/*
Theme Name: Cocoon Child (Sonoda)
Description: 産後ダイエット オンラインサービス用 Cocoon子テーマ。園田さんがブロックエディタで文章・画像を差し替えるだけで運用できるテンプレート。
Template: cocoon-master
Version: 1.0.0
Text Domain: cocoon-child
*/

/*
 * ------------------------------------------------------------
 * このファイルについて
 * ------------------------------------------------------------
 * ・親テーマ（cocoon-master）のCSSは、Cocoon本体が自動で読み込みます。
 *   このファイルには「このサイト専用の追加CSS」だけを書きます。
 * ・「Template:」の値は、親テーマのフォルダ名と一致している必要があります。
 * ・園田さんはこのファイルを触りません。
 *   ここで使うクラス（.sec-* など）はブロックパターン側で指定済みです。
 * ・スマホファーストで書き、768px以上をPC向けの調整としています。
 *
 * 配色
 *   ベース背景     #FFFFFF
 *   セクション背景 #F7F6F4
 *   キーカラー     #8C8681
 *   アクセント     #D9BFB7
 *   本文文字       #3C3A38（純黒は使わない）
 * ------------------------------------------------------------
 */

/* ============================================================
 * 1. セクション共通（.sec-*）
 * ============================================================ */

/* 各セクションの余白と文字色（グループブロックに付けるクラス） */
.sec-fv,
.sec-nayami,
.sec-point,
.sec-concept,
.sec-service,
.sec-hikaku,
.sec-flow,
.sec-voice,
.sec-profile,
.sec-faq,
.sec-entry {
	padding: 3rem 1.25rem;
	color: #3C3A38;
	line-height: 1.9;
}

/* 背景色：1つおきに交互（白 → 明るいグレー → 白 …） */
.sec-nayami,
.sec-hikaku,
.sec-voice,
.sec-faq {
	background-color: #F7F6F4;
}
.sec-concept,
.sec-service,
.sec-flow,
.sec-profile,
.sec-entry {
	background-color: #FFFFFF;
}

/* セクション見出し：英語（大）＋日本語サブ（小）の2段 */
h2.sec-title,
.article h2.sec-title {
	margin: 0 0 0.25rem;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	color: #8C8681;
	text-align: center;
}
.sec-title-ja {
	margin: 0 0 2rem;
	font-size: 0.85rem;
	letter-spacing: 0.15em;
	color: #8C8681;
}

/* セクション内の小見出し（h3） */
h3.sec-h3,
.article h3.sec-h3 {
	margin: 2rem 0 0.75rem;
	padding: 0 0 0.5rem;
	background: none;
	border: none;
	border-bottom: 1px solid #D9BFB7;
	font-size: 1.1rem;
	font-weight: 600;
	color: #3C3A38;
}

/* セクション冒頭の説明文 */
.sec-lead {
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

/* ============================================================
 * 2. ボタン
 * ============================================================ */

/* メインの申込ボタン（キーカラー） */
.btn-entry .wp-block-button__link {
	background-color: #8C8681;
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	padding: 0.9rem 2.4rem;
	font-size: 1rem;
	letter-spacing: 0.05em;
	box-shadow: none;
}

/* 公式LINEボタン（LINEのブランド色） */
.btn-line .wp-block-button__link {
	background-color: #06C755;
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	padding: 0.9rem 2.4rem;
	font-size: 1rem;
	letter-spacing: 0.05em;
	box-shadow: none;
}

/* サブのボタン（詳しく見る など：枠線のみ） */
.btn-sub .wp-block-button__link {
	background-color: transparent;
	color: #8C8681;
	border: 1px solid #8C8681;
	border-radius: 999px;
	padding: 0.7rem 2rem;
	font-size: 0.9rem;
	box-shadow: none;
}

.btn-entry .wp-block-button__link:hover,
.btn-line .wp-block-button__link:hover,
.btn-sub .wp-block-button__link:hover {
	opacity: 0.85;
}

/* ============================================================
 * 3. ファーストビュー（.sec-fv：カバーブロック）
 * ============================================================ */
.sec-fv {
	padding: 4rem 1.25rem;
}
h2.fv-catch,
.article h2.fv-catch {
	margin: 0 0 1rem;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: #3C3A38;
}
.fv-lead {
	margin-bottom: 1.75rem;
	font-size: 0.95rem;
}

/* ファーストビューの肩書き（キャッチの上） */
.fv-sub {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	letter-spacing: 0.15em;
	color: #8C8681;
}

/* ファーストビューの実績リスト */
ul.fv-achievements,
.entry-content ul.fv-achievements {
	list-style: none;
	max-width: 22rem;
	margin: 0 auto 1.75rem;
	padding: 1rem 1.25rem;
	background-color: rgba(255, 255, 255, 0.75);
	border-radius: 10px;
}
.fv-achievements li {
	position: relative;
	margin: 0 0 0.35rem;
	padding-left: 1.1rem;
	font-size: 0.85rem;
	line-height: 1.7;
}
.fv-achievements li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #D9BFB7;
}

/* ============================================================
 * 4. お悩みリスト（.check-list：チェック印つき）
 * ============================================================ */
ul.check-list,
.entry-content ul.check-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}
.check-list li {
	position: relative;
	margin: 0 0 0.6rem;
	padding: 0.85rem 0.75rem 0.85rem 2.6rem;
	background-color: #FFFFFF;
	border-radius: 8px;
	font-size: 0.95rem;
}
.check-list li::before {
	content: "✓";
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background-color: #D9BFB7;
	color: #FFFFFF;
	font-size: 0.85rem;
	line-height: 1.4rem;
	text-align: center;
}

/* ============================================================
 * 4-2. 選ばれる理由（.point-card）／ コンセプト（.sec-concept）
 * ============================================================ */
.point-card {
	height: 100%;
	margin-bottom: 1rem;
	padding: 1.5rem 1.25rem;
	background-color: #FFFFFF;
	border-radius: 12px;
}
.sec-point {
	background-color: #F7F6F4;
}
.point-label {
	margin: 0 0 0.5rem;
	padding-left: 0.6rem;
	border-left: 3px solid #D9BFB7;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	color: #8C8681;
}
h3.point-title,
.article h3.point-title {
	margin: 0 0 0.75rem;
	padding: 0;
	background: none;
	border: none;
	font-size: 1.15rem;
	font-weight: 600;
	color: #3C3A38;
}
.point-desc {
	font-size: 0.9rem;
}
.point-photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}

/* コンセプト（大切にしていること） */
.concept-voice {
	max-width: 30rem;
	margin: 1.5rem auto;
	padding: 1.25rem;
	background-color: #F7F6F4;
	border-radius: 12px;
	font-size: 0.95rem;
	color: #8C8681;
}

/* ============================================================
 * 5. サービスカード（.service-card）
 * ============================================================ */
.service-card {
	height: 100%;
	padding: 1.25rem;
	background-color: #FFFFFF;
	border: 1px solid #E8E4E0;
	border-radius: 12px;
}
.service-photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}
h3.service-name,
.article h3.service-name {
	margin: 1rem 0 0.5rem;
	padding: 0;
	background: none;
	border: none;
	font-size: 1.15rem;
	font-weight: 600;
	color: #3C3A38;
}
.service-desc {
	font-size: 0.9rem;
}

/* 料金（同期パターン） */
.price-box {
	margin: 0.5rem 0 1rem;
}
.price-tag {
	margin: 0;
	font-size: 1.5rem;
	color: #8C8681;
}
.price-note {
	margin: 0;
	font-size: 0.8rem;
	color: #8C8681;
}

/* ============================================================
 * 6. 比較表（.sec-hikaku）
 * ============================================================ */
.sec-hikaku .wp-block-table {
	overflow-x: auto;          /* スマホでは横スクロール */
	-webkit-overflow-scrolling: touch;
}
.sec-hikaku .hikaku-table table {
	min-width: 680px;          /* 列がつぶれないよう最小幅を確保 */
	background-color: #FFFFFF;
	font-size: 0.9rem;
}
.sec-hikaku .hikaku-table th,
.sec-hikaku .hikaku-table td {
	padding: 0.75rem 0.5rem;
	border: 1px solid #E8E4E0;
	vertical-align: middle;
}
.sec-hikaku .hikaku-table th {
	background-color: #F0EDEA;
	color: #3C3A38;
	font-weight: 600;
}
.sec-hikaku .hikaku-table td:first-child {
	text-align: left;
	background-color: #FBFAF9;
}
.sec-hikaku .hikaku-table td.has-text-align-center {
	font-size: 1.2rem;
	color: #8C8681;
}
.hikaku-note {
	margin-top: 0.75rem;
	font-size: 0.8rem;
	color: #8C8681;
}

/* ============================================================
 * 7. ご利用の流れ（.sec-flow：Cocoonタイムラインの色調整）
 * ============================================================ */
.sec-flow .timeline-box {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}
.sec-flow .timeline-title {
	margin-bottom: 1.5rem;
	color: #8C8681;
}
.sec-flow .timeline-item::before {
	background-color: #D9BFB7;  /* ポイントの色 */
}
.sec-flow .timeline-item-content {
	border-left-color: #D9BFB7; /* 縦線の色（PC） */
}
.sec-flow .timeline > li.timeline-item {
	border-left-color: #D9BFB7; /* 縦線の色（スマホ） */
}
.sec-flow .timeline-item-label {
	color: #8C8681;
	font-weight: 600;
}

/* ============================================================
 * 8. お客様の声（.voice-item）
 * ============================================================ */
.voice-item {
	height: 100%;
	padding: 1.5rem 1.25rem;
	background-color: #FFFFFF;
	border-radius: 12px;
}
.voice-photo img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 50%;
}
.voice-name {
	margin: 0.75rem 0 0;
	font-weight: 600;
}
.voice-age {
	margin: 0 0 0.75rem;
	font-size: 0.8rem;
	color: #8C8681;
}
.voice-comment {
	font-size: 0.9rem;
}

/* ============================================================
 * 9. プロフィール（.sec-profile）
 * ============================================================ */
.profile-media .wp-block-media-text__media img {
	border-radius: 12px;
}
.profile-job {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	color: #8C8681;
}
.profile-name {
	margin: 0 0 0.75rem;
	font-size: 1.3rem;
	font-weight: 600;
}
.profile-intro {
	font-size: 0.95rem;
}

/* ============================================================
 * 10. よくある質問（.sec-faq：Cocoonトグルボックスの色調整）
 * ============================================================ */
.sec-faq .toggle-box {
	margin: 0 0 0.75rem;
	background-color: #FFFFFF;
	border: 1px solid #E8E4E0;
	border-radius: 8px;
}
.sec-faq .toggle-button {
	color: #3C3A38;
	font-weight: 600;
}
.sec-faq .toggle-content {
	font-size: 0.95rem;
}

/* ============================================================
 * 11. 募集・お申し込み（.sec-entry ／ 同期パターン「募集ステータス」）
 * ============================================================ */
.sec-entry {
	border: 2px solid #D9BFB7;
	border-radius: 16px;
}
.recruit-open,
.recruit-closed {
	padding: 1.5rem 1rem;
	background-color: #F7F6F4;
	border-radius: 12px;
}
.recruit-label {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	font-weight: 600;
	color: #8C8681;
}
.recruit-period {
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
}

/* ============================================================
 * 12. 制作用の目印（公開ページでの見え方）
 * ============================================================ */

/* 画像の設定場所を示す枠（写真を入れたら段落ごと削除する） */
.ph-img {
	padding: 1.75rem 1rem;
	background-color: #FBF7F5;
	border: 2px dashed #D9BFB7;
	border-radius: 8px;
	font-size: 0.85rem;
	color: #8C8681;
}

/* 同期パターンを入れる場所を示す段落（挿入したら削除する） */
.sync-slot {
	padding: 0.75rem;
	border: 1px dashed #8C8681;
	border-radius: 6px;
	font-size: 0.8rem;
	color: #8C8681;
}

/* 「▼▼ ここから ▼▼」などの案内は公開ページには表示しない（編集画面では editor-style.css で表示） */
.editor-note {
	display: none;
}

/* ============================================================
 * 13. PC向けの調整（768px以上）
 * ============================================================ */
@media (min-width: 768px) {
	.sec-fv,
	.sec-nayami,
	.sec-point,
	.sec-concept,
	.sec-service,
	.sec-hikaku,
	.sec-flow,
	.sec-voice,
	.sec-profile,
	.sec-faq,
	.sec-entry {
		padding: 4.5rem 2rem;
	}
	h2.sec-title,
	.article h2.sec-title {
		font-size: 2rem;
	}
	.sec-title-ja {
		margin-bottom: 2.5rem;
	}
	h2.fv-catch,
	.article h2.fv-catch {
		font-size: 2.2rem;
	}
	.fv-lead {
		font-size: 1.05rem;
	}
	.check-list li {
		font-size: 1rem;
	}
	.sec-hikaku .hikaku-table table {
		font-size: 0.95rem;
	}
}

/* ============================================================
 * 15. ランディングページ用の調整
 * ============================================================
 * Cocoonの「ページ設定 → ページタイプ → 本文のみ（広い）」を選んだページでは、
 * ページタイトル（例：home）を表示しません。
 * トップページはファーストビューのキャッチが見出しの役割を果たすためです。
 */
.content-only .article-header {
	display: none;
}


/* ============================================================
 * 16. 文字サイズ・レイアウトの調整（見やすさ重視）
 * ============================================================
 * スマホで読みやすいよう、本文まわりの文字を一回り大きくしています。
 * 上のセクション別の指定より後に書いているので、こちらが優先されます。
 */

/* 見出し */
h2.sec-title,
.article h2.sec-title { font-size: 1.85rem; }
.sec-title-ja { font-size: 0.95rem; }
h2.fv-catch,
.article h2.fv-catch { font-size: 1.8rem; }
h3.point-title,
.article h3.point-title,
h3.service-name,
.article h3.service-name { font-size: 1.25rem; }
h3.sec-h3,
.article h3.sec-h3 { font-size: 1.2rem; }

/* 本文 */
.fv-lead { font-size: 1.05rem; }
.fv-achievements li { font-size: 0.95rem; }
.sec-lead { font-size: 1.02rem; }
.check-list li { font-size: 1.02rem; }
.point-label { font-size: 0.85rem; }
.point-desc,
.service-desc,
.voice-comment { font-size: 1rem; }
.price-note { font-size: 0.9rem; }
.voice-age { font-size: 0.9rem; }
.profile-job { font-size: 0.95rem; }
.profile-intro { font-size: 1.05rem; }
.sec-faq .toggle-content { font-size: 1rem; }
.sec-faq .toggle-button { font-size: 1.02rem; }
.sec-hikaku .hikaku-table table { font-size: 0.95rem; }
.hikaku-note { font-size: 0.9rem; }
.ph-img { font-size: 0.9rem; }

/* プロフィール：文字の位置を読みやすく
   ・写真の枠を少し小さくして、文章の幅を確保
   ・写真が未設定のときは、点線の枠を表示して置き場所が分かるように
   ・1行が長くなりすぎないよう、本文の幅を34文字程度で折り返す */
.sec-profile .wp-block-media-text {
	grid-template-columns: 38% auto;
	gap: 0 2rem;
	align-items: center;
}
.sec-profile .wp-block-media-text__media:empty {
	min-height: 240px;
	background-color: #F7F6F4;
	border: 2px dashed #D9BFB7;
	border-radius: 12px;
}
.sec-profile .wp-block-media-text__content {
	padding: 0;
}
.sec-profile p {
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}
.profile-name {
	font-size: 1.4rem;
}

/* スマホ（600px以下）では写真の下に文章が回り込むので、名前と肩書きは中央に */
@media (max-width: 600px) {
	.sec-profile .wp-block-media-text__media:empty {
		min-height: 180px;
		margin-bottom: 1rem;
	}
	.profile-name,
	.profile-job {
		text-align: center;
	}
}

/* PC（768px以上）はもう一段大きく */
@media (min-width: 768px) {
	h2.sec-title,
	.article h2.sec-title { font-size: 2.2rem; }
	h2.fv-catch,
	.article h2.fv-catch { font-size: 2.4rem; }
	.fv-lead { font-size: 1.15rem; }
	.check-list li,
	.sec-lead { font-size: 1.08rem; }
	.point-desc,
	.service-desc,
	.voice-comment,
	.profile-intro { font-size: 1.05rem; }
	.sec-hikaku .hikaku-table table { font-size: 1rem; }
}