/* ============================================================
   Aero テーマ — ダウンロードボタン用スタイル（フロントエンド）
   記事内のショートコードで表示されるダウンロードボタンの見た目を整えます
   ============================================================ */

/* ボタンを囲む外枠コンテナの配置と上下の余白を設定します */
.aero-download-btn-wrapper {
	display: flex;
	justify-content: center; /* ボタンを親要素の中央に寄せます */
	margin: 30px 0;          /* ボタンの上下に30pxの空きを作ります */
	width: 100%;             /* 横幅全体に広げます */
}

/* プレミアムなダウンロードボタンのスタイル定義です。!importantを除去し、詳細度を高めるため親ラッパーを指定します */
.aero-download-btn-wrapper .aero-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;                      /* 左側のアイコンと右側の文字との隙間です */
	padding: 14px 28px;             /* ボタンの内側の余白（上下14px、左右28px）です */
	background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%); /* シアンから青への綺麗なグラデーションです */
	color: #ffffff;                 /* 文字の色を白にします（テーマのリンク色設定を上書き） */
	text-decoration: none;          /* リンク特有の下線を消します */
	font-size: 16px;
	font-weight: 700;
	border-radius: 50px;            /* ボタンの両端を半円状に丸めます */
	box-shadow: 0 10px 20px -5px rgba(6, 182, 212, 0.4); /* ボタンの下側にふわっと広がるシアンの影です */
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* ホバー（マウス乗せ）時のアニメーションを滑らかにします */
	cursor: pointer;
	position: relative;
	overflow: hidden;               /* はみ出したエフェクトなどを非表示にします */
}

/* ボタンの上にマウスが乗ったときの動きです */
.aero-download-btn:hover {
	transform: translateY(-3px);    /* ボタンを少し上に浮かび上がらせます */
	box-shadow: 0 15px 25px -5px rgba(6, 182, 212, 0.6); /* 影を少し大きく濃くします */
	background: linear-gradient(135deg, #0891b2 0%, #2563eb 100%); /* ホバー時の少し濃いグラデーション配色です */
}

/* ボタンをクリックした瞬間の動きです */
.aero-download-btn:active {
	transform: translateY(-1px);   /* 押し込まれたように少しだけ下げます */
	box-shadow: 0 8px 15px -5px rgba(6, 182, 212, 0.5); /* 影を少し弱くします */
}

/* ボタン内のアイコンを囲む要素のスタイルです */
.aero-download-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease; /* アイコンのアニメーション速度を調整します */
}

/* ボタンの上にマウスが乗ったときに、アイコンを少し下に下げて「ダウンロード」を表現します */
.aero-download-btn:hover .aero-download-icon {
	transform: translateY(2px);
}

/* ボタンの中にあるラベルテキストのスタイルです */
.aero-download-label-text {
	line-height: 1;
	letter-spacing: 0.5px;
}

/* 画面幅が狭いスマートフォン（最大幅480px）での表示設定です */
@media screen and (max-width: 480px) {
	.aero-download-btn {
		width: 100%;            /* 横幅いっぱいにボタンを広げます */
		justify-content: center; /* 要素を真ん中に寄せます */
		padding: 16px 24px;     /* 親指でタップしやすいように高さを広げます */
		font-size: 15px;
	}
}