@charset "utf-8";

/* ====================================
	0. カスタムプロパティ (CSS変数)
==================================== */
:root {
	/* カラーパレット */
	--color-primary: #232F3E;		/* メインヘッダー・フッター (Amazonのイメージに近いネイビー) */
	--color-secondary: #FF9900;		/* アクセントカラー (Amazonのイメージに近いオレンジ) */
	--color-text-dark: #333333;		/* 基本テキスト */
	--color-text-light: #FFFFFF;	/* 背景が濃い場合のテキスト */
	--color-background-light: #F8F8F8; /* 薄い背景 */
	--color-link: #007bff;			/* 通常リンク */
	--color-alert: #dc3545;			/* エラー・警告 */

	/* レイアウト */
	--max-width: 1000px;
	--padding-base: 1.5rem;
	--border-radius-base: 4px;
}

/* ====================================
	1. リセット・ベーススタイル
==================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
	color: var(--color-text-dark);
	line-height: 1.6;
	background: var(--color-background-light);
}

#container {
	max-width: var(--max-width);
	margin: 0 auto;
	background: #ffffff; /* コンテンツエリアの背景 */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

p, ul, ol {
	margin: 0 0 1rem 0;
	padding: 0 10px;
}

ul {
	list-style: disc;
	padding-left: 30px;
}

a {
	color: var(--color-link);
	text-decoration: none;
	transition: color 0.2s, opacity 0.2s;
}

a:hover {
	color: var(--color-secondary);
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a img:hover {
	opacity: 0.8;
}

/* ====================================
	2. ヘッダー
==================================== */
.site-logo {
	display: block; /* ブロック要素にしてマージンを適用しやすくする */
	text-align: left; /* 左寄せ */
	margin-bottom: 5px; /* キャッチフレーズとの間に少し隙間 */
	padding-left: var(--padding-base); /* 左端からのパディング */
	/* モバイルでの調整 */
	padding-top: 10px; 
}

.site-logo img {
	max-width: 90px; /* 画像の最大幅（元のサイズに合わせて） */
	height: auto; /* 高さはアスペクト比を保つ */
}

/* ヘッダーコンテンツ全体のパディング調整 */
.site-header .header-content {
	display: flex;
	flex-direction: column; /* 要素を縦に並べる */
	align-items: flex-start; /* 左寄せ */
	padding: 0; /* 全体パディングは後で個別に調整 */
	background-color: #f8f8f8;
}

/* キャッチフレーズの位置調整 */
.site-catchphrase {
	padding-left: var(--padding-base); /* ロゴと位置を揃える */
	margin-bottom: 10px; /* ナビとの間に隙間 */
}

/* ナビゲーションの位置調整 */
.site-nav {
	width: 100%; /* ナビゲーションは全幅を使う */
}
.site-nav ul {
	display: flex;
	justify-content: space-around; /* 項目を均等に配置 */
	width: 100%;
	margin: 0;
	padding: 0;
}
.site-nav li {
	list-style: none;
	flex-grow: 1; /* 均等幅に広がる */
	text-align: center; /* リンクテキスト中央寄せ */
	border-left: 1px solid rgba(255, 255, 255, 0.2); /* 区切り線 */
}
.site-nav li:first-child {
	border-left: none; /* 最初の項目には左線なし */
}


/* PC表示での調整（769px以上） */
@media (min-width: 769px) {
	.site-header .header-content {
		flex-direction: row; /* 横並びに戻す */
		align-items: center; /* 中央揃え */
		justify-content: space-between; /* 両端に配置 */
		padding: 15px var(--padding-base); /* PCでのパディング */
	}

	.site-logo {
		margin-bottom: 0; /* PCではマージンリセット */
		padding-left: 0;
	}
	
	.site-catchphrase {
		flex-grow: 1; /* キャッチフレーズが中央に広がる */
		text-align: center;
		margin-bottom: 0;
		padding-left: 0;
	}

	.site-nav {
		width: auto; /* ナビゲーションはコンテンツ幅に */
	}
	.site-nav ul {
		justify-content: flex-end; /* 右寄せ */
		width: auto;
	}
	.site-nav li {
		border-left: none; /* PCでは区切り線なし */
		padding: 0 15px; /* 項目間のスペース */
	}
	.site-nav a {
		padding: 5px 0; /* 上下パディング */
	}
}

/* ====================================
	3. メインコンテンツ
==================================== */
.main-content {
	padding: var(--padding-base);
}

/* タイトルスタイル */
.main-title {
	font-size: 1.8rem;
	border-bottom: 3px solid var(--color-secondary);
	padding-bottom: 10px;
	margin-bottom: var(--padding-base);
	color: var(--color-primary);
	text-align: center;
}

.section-title {
	font-size: 1.4rem;
	background-color: var(--color-background-light);
	border-left: 5px solid var(--color-secondary);
	padding: 8px 15px;
	margin: 2rem 0 1rem 0;
	color: var(--color-primary);
}

.book-title {
	font-size: 1.2rem;
	margin: 2rem 0 1rem 0;
	padding: 8px 10px;
	color: var(--color-primary);
	border-bottom: 2px dashed #ccc;
}

/* 目次 */
.book-menu {
	background: #FFFBF4;
	border: 1px solid #FFC778;
	border-radius: var(--border-radius-base);
	padding: 15px;
}

.book-menu ul {
	list-style: none;
	padding: 0;
}

.book-menu li {
	margin-bottom: 8px;
}

.menu-link {
	font-weight: bold;
	color: var(--color-primary);
	font-size: 1.1rem;
}

/* 各書籍の詳細 */
.book-flex-container {
	display: flex;
	flex-direction: column; /* モバイル: 縦に並べる */
	gap: 20px;
	margin-top: 15px;
}

.book-image {
	text-align: center;
	padding: 10px;
}

.book-image img {
	margin: 0 auto;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.3s;
	width: 200px; /* モバイルでの画像幅 */
}

.book-summary h4 {
	font-size: 1.0rem;
	border-left: 3px solid var(--color-secondary);
	padding-left: 10px;
	margin: 15px 0 5px 10px;
}

.caption-text {
	font-size: 0.8rem;
	color: #6c757d;
	margin-top: 5px;
	padding: 0;
}

.section-heading {
	font-weight: bold;
	color: var(--color-secondary);
	margin-top: 10px;
	padding: 0 10px;
}

/* カラムレイアウト (特定の書籍の目次用) */
.columns-2 {
	column-count: 1; /* デフォルトは1カラム */
}

/* アクションボタン (CTA) */
.action-frame {
	text-align: center;
	margin: 20px 0;
}

.cta-button {
	display: inline-block;
	padding: 10px 20px;
	background: var(--color-secondary);
	color: var(--color-text-light);
	border-radius: var(--border-radius-base);
	font-weight: bold;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s, transform 0.1s;
}

.cta-button:hover {
	background: #e68a00; /* 少し暗い色 */
	text-decoration: none;
	transform: translateY(-1px);
}

/* ノースクリプト警告 */
.alert-danger {
	background-color: #f8d7da;
	color: var(--color-alert);
	border: 1px solid #f5c6cb;
	padding: 15px;
	margin-bottom: 1rem;
	border-radius: var(--border-radius-base);
}
.alert-danger p {
	padding: 0;
	margin: 5px 0;
	color: inherit;
}

/* ====================================
	4. フッター
==================================== */
.site-footer {
	background: var(--color-primary);
	color: var(--color-text-light);
	padding: var(--padding-base);
	text-align: center;
}

.footer-nav ul {
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.footer-nav li {
	margin: 0 10px;
}

.footer-nav a {
	color: var(--color-text-light);
	font-size: 0.9rem;
}

.footer-nav a:hover {
	color: var(--color-secondary);
}

.copyright {
	font-size: 0.75rem;
	margin-top: 10px;
	padding: 0;
	color: #cccccc;
}

/* ====================================
	5. メディアクエリ (タブレット・PC)
==================================== */

/* 768px以上 (タブレット横PC) */
@media (min-width: 768px) {
	.header-content {
		flex-direction: row; /* 横並びに戻す */
		justify-content: space-between;
		align-items: flex-end; /* ナビとキャッチコピーをヘッダーの下端に揃える */
		padding: 15px var(--padding-base) 0;
	}

	.site-catchphrase {
		margin: 0;
	}

	.site-nav ul {
		justify-content: flex-end;
	}

	.site-nav li a {
		padding: 10px 20px;
		margin: 0;
	}

	.book-flex-container {
		flex-direction: row; /* 横並びにする */
		text-align: left;
	}

	.book-image {
		flex: 0 0 250px; /* 画像エリアを固定幅にする */
		padding: 0;
	}

	.book-image img {
		width: 200px; /* PCでの画像幅を統一 */
	}

	.book-summary {
		flex-grow: 1;
	}

	/* カラムレイアウトを適用 */
	.columns-2 {
		column-count: 2;
		column-gap: 30px;
	}

	.columns-2 ul {
		margin-bottom: 0;
	}
}

/* ====================================
	6. index.html 専用スタイル
==================================== */

/* テキストブロック */
.text-block {
	padding: 10px 0;
	margin-bottom: 1.5rem;
}

.text-block p {
	padding: 0 10px; /* bodyのpと同じ */
}


/* アプリダウンロードリンクブロック */
.app-links-block ul {
	list-style: none;
	padding: 10px 15px;
	background-color: var(--color-background-light);
	border: 1px solid #ddd;
	border-radius: var(--border-radius-base);
}

.app-links-block li {
	padding: 8px 0;
	list-style: none;
	border-bottom: 1px dashed #eee;
}

.app-links-block li:last-child {
	border-bottom: none;
}

/* 重要なリンクを強調するテキスト (以前の.bigred相当) */
.link-important {
	font-weight: bold;
	color: var(--color-secondary);
}

.link-important:hover {
	color: var(--color-link);
}

.link-highlight-text {
	/* オマケ情報のリンク全体を囲む段落の装飾 */
	background-color: #fffacd; /* 黄色に近い背景 */
	padding: 15px 10px;
	border: 1px solid #ffaf58;
	border-radius: var(--border-radius-base);
	text-align: center;
	margin-top: 15px;
}


/* プライバシーポリシーのサブタイトル (h3) */
.policy-subtitle {
	font-size: 1.1rem;
	margin: 2rem 0 0.8rem 0;
	padding: 5px 10px;
	border-left: 3px solid var(--color-link);
	color: var(--color-text-dark);
}

/* プライバシーポリシー項目 */
.policy-item {
	margin-bottom: 2rem;
}

/* 768px以上 (PC/タブレット) 用の調整 */
@media (min-width: 768px) {
	.app-links-block ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.app-links-block li {
		flex: 1 1 30%; /* 3列程度で表示 */
		text-align: center;
		border-right: 1px dashed #eee;
		border-bottom: none;
	}
	.app-links-block li:last-child {
		border-right: none;
	}
}
/* ====================================
	7. 記事ページ (Article) 専用スタイル
==================================== */

.article-content {
	/* 記事全体へのパディングやマージン */
	padding: 0 10px;
}

.article-title {
	/* 記事のメインタイトル (h1) */
	font-size: 1.6rem;
	border-bottom: 3px solid var(--color-secondary);
	padding: 10px 0;
	margin-bottom: 2rem;
	color: var(--color-primary);
	text-align: center;
}

.section-heading {
	/* 記事の主要見出し (h2) */
	font-size: 1.4rem;
	border-left: 5px solid var(--color-secondary);
	background-color: var(--color-background-light);
	padding: 8px 15px;
	margin: 2.5rem 0 1.5rem 0;
	color: var(--color-primary);
}

.section-subheading {
	/* 記事のサブ見出し (h3) */
	font-size: 1.15rem;
	padding: 0.5em 1em;
	margin: 2rem 0 1rem 0;
	color: var(--color-text-dark);
	background: #fff0d9; /* 前回CSSの.subtitleの色を継承 */
	border-bottom: solid 3px #ffaf58; /* 前回CSSの.subtitleの線を継承 */
}

/* 記事内の一般的なテキストブロック */
.text-block {
	margin-bottom: 1.5rem;
}

.text-block p {
	padding: 0 10px;
	margin: 8px 0;
}

/* 注釈・情報ボックス */
.info-box {
	position: relative;
	margin: 20px 0;
	padding: 15px;
	border: solid 2px #ccc;
	border-radius: var(--border-radius-base);
	background: #fcfcfc;
}
.info-box p {
	padding: 0;
	margin: 0;
	font-size: 0.9rem;
	color: #666;
}
/* ====================================
	8. トピックス (topic.js) 専用スタイル
==================================== */

.related-topics {
	margin: 3rem 0;
}

/* ★主要な修正点: カードコンテナのレイアウト */
.topic-cards-container {
	display: flex;
	flex-wrap: wrap; /* 折り返しを許可 */
	justify-content: center; /* 中央寄せ */
	gap: 20px; /* カード間のスペースを広めに */
	margin-bottom: 2rem;
	padding: 0 10px;
}

.topic-card {
	flex: 0 0 calc(33.333% - 20px); /* PC/タブレットで3列、gapを考慮 */
	max-width: 320px; /* カードの最大幅を設定し、あまり大きくならないようにする */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: var(--border-radius-large);
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
	background-color: #fff;
	border: 1px solid #eee;
	text-align: center; /* 画像やテキストを中央寄せ */
	padding-bottom: 15px; /* 下部パディングを追加 */
}

@media (max-width: 767px) {
	.topic-card {
		flex: 1 1 100%; /* スマホでは1列表示 */
		max-width: none; /* スマホでは最大幅の制限を解除 */
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.topic-card {
		flex: 0 0 calc(50% - 20px); /* タブレットで2列 */
	}
}


/* --- 画像表示エリアの修正: 画像全体を表示し、サイズ調整 --- */
.card-image-wrapper {
	width: 100%;
	/* 高さは画像のアスペクト比に依存させるため、ここでは最小限に */
	min-height: 100px;	
	overflow: hidden;	
	text-align: center; /* 画像を中央寄せにする */
	padding: 10px 0; /* 上下に余白を追加して圧迫感をなくす */
}

.topic-card .card-image {
	/* 横幅はコンテナに合わせるが、画像全体を表示する */
	max-width: 90%; /* ★コンテナの90%に制限 */
	height: auto; /* ★高さは自動で調整し、切り抜きを防止 */
	object-fit: contain; /* ★画像を切り抜かずに、アスペクト比を保って全体を表示 */
	display: block;
	margin: 0 auto; /* 中央寄せ */
}

.topic-card .card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.topic-card .card-body {
	padding: 0 10px; /* 左右のパディングを調整 */
}

.topic-card .card-title {
	font-size: 1.1rem;
	margin-top: 0;
	margin-bottom: 5px;
	color: var(--color-primary);
	font-weight: bold;
	line-height: 1.4; /* 行の高さを調整 */
}

.topic-card .card-description {
	font-size: 0.9rem;
	color: #666;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}


/* テキストリンクリスト */
.topic-list {
	list-style: none;
	padding: 0 10px;
	margin: 0;
}

.topic-list li {
	border-bottom: 1px dashed #eee;
	padding: 10px 0;
}

.topic-list li:last-child {
	border-bottom: none;
}

.topic-list .list-link {
	display: block;
	text-decoration: none;
	color: var(--color-text-dark);
	font-size: 1rem;
	transition: color 0.1s;
}

.topic-list .list-link:hover {
	color: var(--color-link);
	text-decoration: underline;
}

.topic-list .list-tag {
	color: var(--color-secondary); /* タグをアクセントカラーで強調 */
	font-weight: bold;
	margin-right: 5px;
}

/* 768px以上 (PC/タブレット) 用の調整 */
@media (min-width: 768px) {
	.topic-cards-container {
		/* カードを均等な3列にする */
		flex: 1 1 calc(33.333% - 10px);
	}
}
/* --- 画像表示エリアを追加し、高さを固定 --- */
.card-image-wrapper {
	width: 100%;
	/* 高さは画像のアスペクト比に依存させるため、ここでは最小限に */
	min-height: 100px;	
	overflow: hidden;	
	text-align: center; /* 画像を中央寄せにする */
	padding: 10px 0; /* 上下に余白を追加して圧迫感をなくす */
}

.topic-card .card-image {
	/* 横幅はコンテナに合わせるが、画像全体を表示する */
	max-width: 90%; /* ★コンテナの90%に制限 */
	height: auto; /* ★高さは自動で調整し、切り抜きを防止 */
	object-fit: contain; /* ★画像を切り抜かずに、アスペクト比を保って全体を表示 */
	display: block;
	margin: 0 auto; /* 中央寄せ */
}

/* 768px以上 (PC/タブレット) 用の調整 */
@media (min-width: 768px) {
	/* PCでは高さを少し大きくするのも考慮できます */
	.card-image-wrapper {
		height: 200px;
	}
}

/* ====================================
	9. テーブルスタイル
==================================== */

.table-container {
	padding: 0 10px;
	margin: 20px 0;
	overflow-x: auto; /* スマホで横スクロール可能にする */
}

.comparison-table, .feature-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
	min-width: 600px; /* スマホでテーブルが潰れるのを防ぐ最小幅 */
	font-size: 0.95rem;
}

.comparison-table th, .feature-table th {
	background-color: var(--color-primary);
	color: var(--color-text-light);
	padding: 12px 10px;
	text-align: left;
	border: 1px solid #ddd;
}

.comparison-table td, .feature-table td {
	padding: 12px 10px;
	border: 1px solid #ddd;
	text-align: left;
	line-height: 1.4;
}

/* 交互の行に背景色を適用 (ストライプ) */
.comparison-table tbody tr:nth-child(even),
.feature-table tbody tr:nth-child(even) {
	background-color: #f7f7f7;
}

/* --- その他の情報ブロック --- */
.summary-point {
	padding: 10px 15px;
	background-color: #e6f7ff; /* 明るい青の背景 */
	border-left: 5px solid var(--color-link);
	margin: 20px 10px;
	font-weight: bold;
}

.recommendation-box {
	margin: 25px 10px;
	padding: 15px;
	border: 2px solid var(--color-secondary);
	border-radius: var(--border-radius-base);
	background-color: #fffaf0; /* 暖色の背景 */
}

.recommendation-box .section-subheading {
	margin-top: 0;
	margin-bottom: 10px;
	background: none;
	border: none;
	padding: 0;
	color: var(--color-secondary);
}

/* ====================================
	10. レビューグリッドスタイル
==================================== */

.review-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 20px 10px;
}

.review-item {
	flex: 1 1 100%; /* スマホでは1列 */
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: var(--border-radius-base);
	padding: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.review-item h3 {
	font-size: 1.1rem;
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-secondary);
	padding-bottom: 5px;
	margin-top: 0;
	margin-bottom: 10px;
}

.review-item ul {
	list-style: disc;
	padding-left: 20px;
	margin: 0;
}

.review-item ul li {
	font-size: 0.95rem;
	margin-bottom: 8px;
	color: var(--color-text-dark);
}

/* PC表示（769px以上）での調整 */
@media (min-width: 769px) {
	.review-grid {
		/* 4つのレビューを横に並べる */
		flex-wrap: nowrap; /* 折り返しを禁止 */
		justify-content: space-between;
	}
	.review-item {
		flex: 1 1 calc(25% - 20px); /* 4等分にしてギャップを引く */
		max-width: calc(25% - 20px);
	}
}

/* ====================================
	11. 不安解消記事 専用スタイル
==================================== */

/* --- ハイライトと注意書き --- */
.highlight {
	background-color: #fffbcf; /* 黄色背景 */
	padding: 2px 5px;
	border-radius: 3px;
	font-weight: bold;
}
.note {
	font-size: 0.85rem;
	color: #666;
	margin-top: 15px;
	padding: 5px 10px;
}

/* --- ステップ/ヒントボックス (旧 yellow_box) --- */
.step-box, .tip-box {
	margin: 20px 10px;
	padding: 15px;
	border: 1px solid #ffcc66; /* オレンジ系の枠線 */
	background-color: #fff8e1; /* 薄い黄色背景 */
	border-radius: var(--border-radius-base);
}

.step-box .step-title, .tip-box .tip-title {
	font-size: 1.05rem;
	font-weight: bold;
	color: var(--color-primary); /* ネイビー系のタイトル色 */
	display: block;
	margin-bottom: 5px;
}

.example-block {
	margin-bottom: 25px;
}

/* --- 最後の書籍紹介カード (book-promote-card) --- */
.book-promote-card {
	display: flex;
	flex-direction: column; /* スマホでは縦並び */
	margin: 30px 10px;
	padding: 20px;
	border: 1px solid #ddd;
	border-radius: var(--border-radius-large);
	background-color: #fcfcfc;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.book-image-area {
	text-align: center;
	margin-bottom: 20px;
}

.book-image-area .promote-image {
	max-width: 250px; /* 画像の最大サイズ */
	height: auto;
	border: 1px solid #ccc;
	border-radius: var(--border-radius-base);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.book-image-area .caption {
	font-size: 0.8rem;
	color: #999;
	margin-top: 5px;
}

.book-text-area {
	line-height: 1.6;
}

.book-text-area h4 {
	color: var(--color-secondary);
	font-size: 1rem;
	margin: 15px 0 5px 0;
}

.book-text-area .content-list {
	list-style: square;
	padding-left: 20px;
	font-size: 0.95rem;
	margin-bottom: 20px;
}

/* 769px以上 (PC/タブレット) 用の調整 */
@media (min-width: 769px) {
	.book-promote-card {
		flex-direction: row; /* PCでは横並び */
		align-items: flex-start;
	}

	.book-image-area {
		flex: 0 0 300px; /* 画像エリアの幅を固定 */
		margin-right: 30px;
		margin-bottom: 0;
	}

	.book-text-area {
		flex-grow: 1;
	}
}

/* --- ボタンのスタイル (旧 center_frame & simple_btn) --- */
.simple-btn {
	display: inline-block;
	padding: 10px 25px;
	background-color: var(--color-secondary); /* アクセントカラー */
	color: var(--color-text-light);
	text-decoration: none;
	font-weight: bold;
	border-radius: 50px;
	transition: background-color 0.2s;
	margin-top: 15px;
	text-align: center;
}

.simple-btn:hover {
	background-color: #b50000; /* ホバーで少し暗く */
}

/* ボタンを中央寄せするためのラッパー */
.book-promote-card .book-text-area .simple-btn {
	display: block;
	max-width: 200px;
	margin: 20px auto 0 0; /* 左寄せ */
}

/* リンクを中央寄せにしたい場合 (元の center_frame に相当) */
.center-frame {
	text-align: center;
	margin: 20px 0;
}

/* ====================================
	12. 手順/ビジュアル解説 専用スタイル
==================================== */

/* --- 手順のビジュアル要素 (旧 flex_box) --- */
.step-visual {
	display: flex;
	flex-direction: column; /* スマホでは縦並び */
	align-items: flex-start;
	margin: 30px 10px;
	padding: 15px;
	border: 1px solid #e0e0e0;
	border-radius: var(--border-radius-base);
	background-color: #fcfcfc;
}

.step-media {
	flex: 0 0 100%;
	margin-bottom: 15px;
	text-align: center;
}

.step-media .step-image {
	max-width: 100%;
	height: auto;
	border: 1px solid #ccc;
	border-radius: var(--border-radius-base);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-description {
	flex-grow: 1;
	line-height: 1.6;
}

.step-description .step-title {
	font-size: 1.2rem;
	color: var(--color-secondary); /* アクセントカラーで手順を強調 */
	margin-top: 0;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px dashed var(--color-secondary);
}

/* PC表示（769px以上）での横並びと左右反転 */
@media (min-width: 769px) {
	.step-visual {
		flex-direction: row; /* 横並び */
	}

	.step-media {
		flex: 0 0 40%; /* 画像エリアを40%に固定 */
		margin-right: 30px;
		margin-bottom: 0;
	}
	
	.step-description {
		flex: 0 0 calc(60% - 30px);
	}
	
	/* 左右反転パターン (画像が右、説明が左) */
	.step-visual.reverse {
		flex-direction: row-reverse;
	}

	.step-visual.reverse .step-media {
		margin-right: 0;
		margin-left: 30px;
	}
}

/* --- 警告ポイント --- */
.warning-point {
	padding: 15px;
	background-color: #fff0f0; /* 薄い赤の背景 */
	border-left: 5px solid #d9534f; /* 赤いバー */
	color: #a94442; /* 赤っぽい文字 */
	margin: 20px 10px;
	font-weight: bold;
	border-radius: var(--border-radius-base);
}

/* ====================================
	13. 商品紹介 専用スタイル
==================================== */

/* --- 商品カード (書籍紹介) --- */
.product-card {
	display: flex;
	flex-direction: column; /* スマホでは縦並び */
	align-items: flex-start;
	margin: 30px 10px;
	padding: 20px;
	border: 1px solid var(--color-primary); /* 薄いネイビー系の枠線 */
	border-radius: var(--border-radius-large);
	background-color: #fcfdff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.product-media {
	flex: 0 0 100%;
	text-align: center;
	margin-bottom: 15px;
}

.product-media .product-image {
	max-width: 200px;
	height: auto;
	border: 1px solid #ccc;
	border-radius: var(--border-radius-base);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-info {
	flex-grow: 1;
	line-height: 1.6;
}

.product-title {
	font-size: 1.3rem;
	color: var(--color-primary);
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--color-secondary);
	padding-bottom: 5px;
}

.product-price {
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--color-secondary);
	margin-bottom: 10px;
	padding-left: 10px;
}

.product-description {
	font-size: 0.95rem;
	margin-bottom: 15px;
	padding: 0 10px;
}

/* PC表示（769px以上）での調整 */
@media (min-width: 769px) {
	.product-card {
		flex-direction: row;
		align-items: flex-start;
	}

	.product-media {
		flex: 0 0 230px;
		margin-right: 30px;
		margin-bottom: 0;
	}
}
/* ====================================
	14. 会話吹き出しスタイル (チャット風)
==================================== */

.chat-bubble-container {
	display: flex;
	flex-direction: column;
	gap: 20px; /* 吹き出し間のスペース */
	margin: 25px 10px;
}

.chat-item {
	display: flex;
	align-items: flex-start; /* アイコンと吹き出しの上端を揃える */
	max-width: 100%;
}

.chat-item.left .chat-icon {
	margin-right: 15px; /* アイコンと吹き出しの間のスペース */
}

.chat-item.right {
	justify-content: flex-end; /* 右寄せ */
}

.chat-item.right .chat-icon {
	order: 2; /* アイコンを吹き出しの右側に配置 */
	margin-left: 15px; /* アイコンと吹き出しの間のスペース */
	margin-right: 0;
}

.chat-icon img {
	width: 80px; /* アイコン画像のサイズ */
	height: auto;
	border-radius: 50%; /* アイコンを丸くする */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-bubble {
	position: relative;
	padding: 15px 20px;
	border-radius: 10px;
	max-width: calc(100% - 110px); /* アイコンとマージンを考慮 */
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--color-text-dark);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chat-bubble p {
	padding: 0;
	margin: 0;
}

.chat-item.left .chat-bubble {
	background-color: #e0f7fa; /* 左側の吹き出しの色 (水色) */
	margin-left: 0;
}

.chat-item.right .chat-bubble {
	background-color: #ffe0b2; /* 右側の吹き出しの色 (オレンジ系) */
	margin-right: 0;
}

/* 吹き出しの三角部分 (左) */
.chat-item.left .chat-bubble::before {
	content: '';
	position: absolute;
	top: 15px;
	left: -10px;
	border: 10px solid transparent;
	border-right-color: #e0f7fa;
}

/* 吹き出しの三角部分 (右) */
.chat-item.right .chat-bubble::before {
	content: '';
	position: absolute;
	top: 15px;
	right: -10px;
	border: 10px solid transparent;
	border-left-color: #ffe0b2;
}

/* PC表示での調整 (アイコンと吹き出しのサイズなど) */
@media (min-width: 769px) {
	.chat-icon img {
		width: 100px; /* PCではアイコンを少し大きく */
	}
	.chat-bubble {
		max-width: 60%; /* PCでは吹き出しの幅を制限 */
		font-size: 1.1rem;
	}
}


/* ====================================
	15. その他の共通要素の微調整
==================================== */
/* .visual-media の汎用的な中央寄せスタイルを調整 */
.visual-media.centered-image {
	text-align: center;
	margin: 20px auto;
}
.visual-media.centered-image img {
	margin: 0 auto;
}

/* .alert-warning のアイコンを明確に */
.alert.alert-warning {
	background-color: #fff3cd;
	color: #856404;
	border: 1px solid #ffeeba;
	padding: 15px;
	margin: 20px 10px;
	border-radius: var(--border-radius-base);
}
.alert.alert-warning p {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}
.alert.alert-warning p::before {
	content: '！'; /* 警告アイコン */
	margin-right: 8px;
	font-size: 1.2em;
}

/* .alert-info のアイコンを明確に */
.alert.alert-info {
	background-color: #d1ecf1;
	color: #0c5460;
	border: 1px solid #bee5eb;
	padding: 15px;
	margin: 20px 10px;
	border-radius: var(--border-radius-base);
}
.alert.alert-info p {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: flex-start;
}
.alert.alert-info p::before {
	content: '・'; /* 情報アイコン */
	margin-right: 8px;
	font-size: 1.2em;
	flex-shrink: 0; /* アイコンが縮まないように */
}

/* 引用ブロックのアイコン */
.quote-block {
	position: relative;
	padding: 20px 20px 20px 70px; /* アイコン分の左パディング */
	margin: 25px 10px;
	background-color: #f5f5f5;
	border-left: 5px solid var(--color-secondary);
	border-radius: var(--border-radius-base);
	font-style: italic;
	color: #555;
}
.quote-block .face-icon {
	position: absolute;
	left: 10px;
	top: 15px;
	width: 50px; /* アイコンサイズ */
	height: 50px;
}
.quote-block .face-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.quote-block q {
	display: block;
	margin-bottom: 10px;
	font-size: 1.05rem;
	padding: 0;
}
.quote-block p {
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: 0.9rem;
}

/* 大きな引用ブロック */
.quote-block.large {
	padding: 30px 30px 30px 100px;
}
.quote-block.large .face-icon {
	left: 20px;
	top: 25px;
	width: 60px;
	height: 60px;
}
.quote-block.large q {
	font-size: 1.2rem;
}


/* チェックリストスタイル */
.checklist-styled {
	margin: 20px 10px;
	padding: 15px;
	background-color: #f9fdf5; /* 薄い緑系の背景 */
	border: 1px solid #d4edda;
	border-radius: var(--border-radius-base);
}
.checklist-styled h3 {
	margin-top: 0;
	margin-bottom: 15px;
	color: var(--color-primary);
	border-bottom: 1px dashed #c3e6cb;
	padding-bottom: 10px;
}
.checklist-styled ul {
	list-style: none; /* デフォルトのリストスタイルを削除 */
	padding: 0;
	margin: 0;
}
.checklist-styled ul li {
	position: relative;
	padding-left: 30px; /* チェックマーク分のスペース */
	margin-bottom: 10px;
	font-size: 1rem;
	line-height: 1.4;
}
.checklist-styled ul li::before {
	content: '◆'; /* チェックマーク代用 */
	color: #28a745; /* 緑色 */
	font-weight: bold;
	position: absolute;
	left: 0;
	top: 0;
}

/* ランキングアイテム */
.ranking-item {
	margin: 30px 10px;
	padding: 20px;
	border: 1px solid #eee;
	border-radius: var(--border-radius-base);
	background-color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
	position: relative;
}
.ranking-number {
	position: absolute;
	top: -15px;
	left: 10px;
	background-color: var(--color-secondary);
	color: var(--color-text-light);
	padding: 5px 15px;
	border-radius: var(--border-radius-base);
	font-weight: bold;
	font-size: 1.2rem;
	z-index: 10;
}
.ranking-number.rank-1 { background-color: #FFD700; color: #333; } /* 金色 */
.ranking-number.rank-2 { background-color: #C0C0C0; color: #333; } /* 銀色 */
.ranking-number.rank-3 { background-color: #CD7F32; color: #333; } /* 銅色 */

.ranking-title {
	font-size: 1.3rem;
	color: var(--color-primary);
	margin-top: 15px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px dashed var(--color-primary);
	text-align: center;
}
.visual-text-block {
	display: flex;
	flex-direction: column; /* スマホでは縦並び */
	gap: 15px;
	align-items: flex-start;
}
.visual-text-block .visual-media {
	flex: 0 0 100%;
	text-align: center;
}
.visual-text-block .visual-media img {
	max-width: 80%;
	height: auto;
	border-radius: var(--border-radius-base);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.visual-text-block .text-content {
	flex-grow: 1;
	padding: 0 10px;
}
@media (min-width: 769px) {
	.visual-text-block {
		flex-direction: row; /* PCでは横並び */
	}
	.visual-text-block .visual-media {
		flex: 0 0 200px; /* 画像の幅を固定 */
	}
	.visual-text-block .visual-media img {
		max-width: 100%;
	}
}

/* ボタンエリア */
.button-area {
	text-align: center;
	margin: 30px 0;
}
.primary-btn {
	display: inline-block;
	padding: 12px 30px;
	background-color: var(--color-secondary);
	color: var(--color-text-light);
	font-size: 1.1rem;
	font-weight: bold;
	border-radius: 50px;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.1s;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.primary-btn:hover {
	background-color: #e68a00;
	transform: translateY(-2px);
	text-decoration: none;
}
.secondary-btn {
	display: inline-block;
	padding: 10px 25px;
	background-color: var(--color-primary);
	color: var(--color-text-light);
	font-size: 1rem;
	border-radius: 5px;
	text-decoration: none;
	transition: background-color 0.2s, transform 0.1s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.secondary-btn:hover {
	background-color: #1a242f;
	transform: translateY(-1px);
	text-decoration: none;
}

/* 特典ボックス */
.privilege-box {
	background-color: #fffbef;
	border: 2px dashed var(--color-secondary);
	padding: 20px;
	margin: 25px 10px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--color-primary);
	border-radius: var(--border-radius-base);
}

/* FAQリスト */
.faq-list {
	margin: 25px 10px;
}
.faq-list dt.question {
	background-color: #e3f2fd; /* 薄い青背景 */
	color: var(--color-primary);
	padding: 12px 15px;
	margin-top: 15px;
	border-left: 4px solid var(--color-link);
	font-weight: bold;
	border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}
.faq-list dt.question::before {
	content: 'Q. ';
	color: var(--color-link);
	margin-right: 5px;
}
.faq-list dd.answer {
	background-color: #f8fcfc;
	padding: 12px 15px;
	border: 1px solid #e0e0e0;
	border-top: none;
	margin-bottom: 10px;
	line-height: 1.6;
	border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
}
.faq-list dd.answer::before {
	content: 'A. ';
	color: #5cb85c; /* 緑色 */
	margin-right: 5px;
	font-weight: bold;
}

/* 特殊テキスト強調 */
.bigred {
	color: var(--color-alert);
	font-weight: bold;
	font-size: 1.1em;
}
.red {
	color: var(--color-alert);
	font-weight: bold;
}
.small-text {
	font-size: 0.85rem;
	color: #666;
}

/* design.css (想定される内容の例) */
.question-box {
    display: flex; /* 左右に並べるために必要 */
    gap: 20px; /* 画像と文章の間のスペース */
    margin-bottom: 30px;
}

.question-media {
    flex: 1 1 40%; /* 画像の幅を制御 */
    /* 画像をレスポンシブにするためのCSSも必要 */
}

.question-content {
    flex: 1 1 60%; /* 文章の幅を制御 */
}

/* スマホなど、画面が狭いときには上下に並べる設定 */
@media (max-width: 768px) {
    .question-box {
        flex-direction: column;
    }
}

/* SNS シェアボタンのスタイル */
.sns-share-wrapper {
    margin: 30px 0;
    padding-top: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

.sns-share-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* ボタン間のスペース */
    flex-wrap: wrap;
}

.sns-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    color: white; /* テキストは白で統一 */
    text-decoration: none;
    transition: opacity 0.2s;
}

.sns-share-btn:hover {
    opacity: 0.8;
}

.sns-icon {
    font-size: 1.2em;
    margin-right: 6px;
}

.sns-name {
    /* アイコンのみ表示したい場合は、この要素を非表示にする（例: スマートフォン表示時など） */
    display: none; 
}

/* 各サービス固有の背景色 */
.sns-share-btn-twitter {
    background-color: #000000; /* Xのブランドカラー */
}

.sns-share-btn-hatebu {
    background-color: #00a4de; /* はてなブルー */
}

.sns-share-btn-facebook {
    background-color: #1877f2; /* Facebookブルー */
}

.sns-share-btn-line {
    background-color: #00c300; /* LINEグリーン */
}

.sns-share-btn-pocket {
    background-color: #ef4056; /* Pocketレッド */
}

/* スマホなど狭い画面の場合、SNS名を非表示にしてアイコンのみにする */
@media (min-width: 600px) {
    .sns-name {
        display: inline; /* PC画面ではサービス名を表示 */
    }
    .sns-icon {
        margin-right: 6px;
    }
}