/* ============================================================
   pages.css ── ページ固有のスタイル
   （TOP：ブロックパターン用 / スクール等は各STEPで追記）
   ============================================================ */

/*
 * ============================================================
   スマホ版：コンテンツの左右余白を統一（PC・タブレット表示は変更しない）
   ============================================================
 * 【実機で「余白を広げたはずなのに変化が無い」と報告があり、Chrome
 * DevTools Protocolで実際のDOM・Computedスタイルを直接調査して判明した
 * 根本原因】
 * TOP・技術について・協会について・スクール・お問い合わせ等、
 * ブロックパターンで構成しているページの本文は、
 * <div class="wp-block-group alignfull bikotsu-section ...">という
 * セクション単位で組まれている。.bikotsu-container はこれらのページでは
 * ページ上部のタイトル部分（.bikotsu-page-header内）にしか使われておらず、
 * 本文セクション自体には一切使われていなかったため、以前の修正
 * （.bikotsu-container 等の padding-inline を広げる対応）は本文には
 * 何も効いていなかった（実測で padding-left/right が 0px のままだった
 * ことを確認済み）。
 *
 * そのため、本文セクションの共通クラスである .bikotsu-section 自体に
 * 直接 padding-inline を持たせる方式に変更する。.bikotsu-section は
 * TOP・技術について・協会について・スクール・お問い合わせ・無料説明会・
 * 無料資料・プライバシーポリシー・特定商取引法など、ブロックパターンで
 * 作っている全ページの本文セクションで共通して使われているクラスのため、
 * ここを1箇所直すだけで対象ページ全てに一律で反映される。
 * （症例/成功事例/コラムの一覧・記事詳細・404ページはこの仕組みを使わず
 * .bikotsu-container を直接使っているPHPテンプレートのため、そちらは
 * 従来通り .bikotsu-container 側の指定で対応する）
 *
 * alignfullのセクション自体の幅（＝背景色の範囲）は変えず、内側の
 * paddingだけを広げるため、背景の全幅表示はそのまま維持される。
 */
@media (max-width: 781px) {
	.bikotsu-container,
	.bikotsu-page__body > :where(:not(.alignfull):not(.alignwide)),
	.bikotsu-page__body > :where(.alignwide),
	.bikotsu-article__container,
	.bikotsu-section {
		padding-inline: 36px;
	}

	/*
	 * 【代表挨拶の写真が中央にならない件で判明した、より広範囲な不具合】
	 * Lightning本体のCSSは wp:columns{"align":"wide"} のブロックに対して
	 * 独自のはみ出しマージン（margin-left/right の負の値）を、Lightning側の
	 * theme.json由来の固定の余白値をもとに自動計算している。この計算は
	 * 上の .bikotsu-section 独自のpadding-inline（36px）を一切考慮して
	 * いないため、実機で実際にComputedスタイルを測定したところ
	 * margin-left:0px・margin-right:-36pxのような左右非対称な値になり、
	 * ブロックの中身（今回は代表挨拶の写真）が右へ寄って見える原因になって
	 * いた。alignwideの列ブロックはサイト内に17箇所あり（受講生の実績・
	 * 症例・スクールコース・技術の特徴・代表挨拶等）、同じ理由でどれも
	 * 潜在的に非対称になり得るため、個別対応ではなくここで一括して
	 * margin-left/right を 0 に固定する。
	 */
	.bikotsu-section .wp-block-columns.alignwide,
	.bikotsu-page__body .wp-block-columns.alignwide {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}
}

/*
 * ============================================================
   スマホ版：セクション間の上下余白を統一（PC表示は変更しない）
   ============================================================
 * TOPページの各セクションは .bikotsu-section（padding-block:72px）で
 * 既に統一されている。下層ページ（アーカイブ・詳細・コラム記事・
 * 404・法的ページ等）も同じ72px前後の「呼吸できる」余白に揃える
 * （各セレクタの本来の宣言はPC用としてそのまま残し、スマホ幅でだけ
 * 上書きする）。以前は56pxだったが、スクロール時に詰まった印象になる
 * との指摘を受けて広げた。
 */
@media (max-width: 959.98px) {
	.bikotsu-cases-archive .bikotsu-container,
	.bikotsu-success-archive .bikotsu-container,
	.bikotsu-posts-archive .bikotsu-container {
		padding-block: 72px;
	}

	.bikotsu-single-case__body,
	.bikotsu-single-success__body {
		padding-block: 64px;
	}

	.bikotsu-related-cases,
	.bikotsu-related-posts,
	.bikotsu-single-cta,
	.bikotsu-article-cta {
		padding-block: 72px;
	}

	.bikotsu-article__header {
		padding-block: 48px 32px;
	}

	.bikotsu-article__content {
		padding-block: 32px 64px;
	}

	.bikotsu-legal-page {
		padding-block: 72px 96px;
	}

	.bikotsu-404__body {
		padding-block: 72px 80px;
	}
}

/* ============================================================
   TOPページ共通
   ============================================================ */
.bikotsu-front {
	overflow-x: clip; /* alignfull による横スクロールを防止 */
}

/* ============================================================
   下層ページ共通（page-header ＋ 本文）
   ============================================================ */
.bikotsu-page {
	overflow-x: clip;
}

/* --- ページヘッダー --- */
.bikotsu-page-header {
	background: var(--cream2);
	border-bottom: 1px solid var(--border);
	padding-block: 40px;
	text-align: center;
	/*
	 * 固定ヘッダー分のオフセットを確保する。bodyのpadding-topで通常表示は
	 * 足りているが、アンカーリンク（例：/#voices）でこの要素へ直接
	 * ジャンプした際、ブラウザは要素をビューポート最上部（＝固定ヘッダーの
	 * 真裏）に合わせてしまい、見出しがヘッダーに隠れて見切れる。
	 * scroll-margin-top はこのジャンプ時のみ効き、通常のスクロールや
	 * レイアウトには影響しない。
	 */
	scroll-margin-top: var(--header-h-sp);
}

.bikotsu-breadcrumb {
	font-size: 0.75rem;
	color: var(--text-light);
	margin-bottom: 12px;
}

.bikotsu-breadcrumb a {
	color: var(--text-light);
	text-decoration: none;
}

.bikotsu-breadcrumb a:hover,
.bikotsu-breadcrumb a:focus-visible {
	color: var(--gold-dark);
}

.bikotsu-page-header__title {
	font-size: 1.7rem;
	margin: 0;
}

.bikotsu-page-header__lead {
	font-size: 0.9rem;
	color: var(--text-mid);
	margin: 10px 0 0;
}

/* ナビの「受講生の実績」（/#voices）アンカージャンプが固定ヘッダーの
   裏に隠れないように、ジャンプ先にも同じ余白を確保する */
#voices {
	scroll-margin-top: var(--header-h-sp);
}

@media (min-width: 960px) {
	#voices {
		scroll-margin-top: var(--header-h-pc);
	}
}

@media (min-width: 960px) {
	.bikotsu-page-header {
		padding-block: 56px;
		scroll-margin-top: var(--header-h-pc);
	}

	.bikotsu-page-header__title {
		font-size: 2.2rem;
	}
}

/* --- 本文（ブロックが全幅グループでない場合の保険） --- */
.bikotsu-page__body > :where(:not(.alignfull):not(.alignwide)) {
	max-width: 800px;
	margin-inline: auto;
	padding-inline: 20px;
}

.bikotsu-page__body > :where(.alignwide) {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 20px;
}

/* ============================================================
   症例一覧（archive-cases / taxonomy）
   ============================================================ */
.bikotsu-cases-archive .bikotsu-container {
	padding-block: 40px;
}

/* --- 絞り込みナビ --- */
.bikotsu-case-filters {
	margin-bottom: 32px;
}

.bikotsu-case-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 12px;
}

.bikotsu-case-filter__label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-mid);
	flex-shrink: 0;
}

.bikotsu-case-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bikotsu-case-filter__list a,
.bikotsu-case-filter__list a:visited {
	display: inline-block;
	padding: 5px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-size: 0.8rem;
	text-decoration: none;
	color: var(--text-mid);
	background: var(--white);
	transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.bikotsu-case-filter__list a:hover,
.bikotsu-case-filter__list a:focus-visible {
	border-color: var(--gold);
	color: var(--gold-dark);
}

.bikotsu-case-filter__list a.is-current {
	background: var(--pink);
	border-color: var(--pink);
	color: var(--white);
}

/* --- 症例カード --- */
.bikotsu-case-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bikotsu-case-card:hover,
.bikotsu-case-card:focus-within {
	box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.16);
	transform: translateY(-3px);
	border-color: var(--gold-light);
}

.bikotsu-case-card__link,
.bikotsu-case-card__link:visited {
	display: block;
	text-decoration: none;
	color: var(--text);
}

.bikotsu-case-card__image,
.bikotsu-case-card__noimage {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-square); /* 正方形統一・CLS対策 */
	object-fit: cover;
}

.bikotsu-case-card__noimage {
	background: var(--cream2);
}

.bikotsu-case-card__title {
	font-family: var(--font-sans);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.6;
	margin: 10px 12px 6px;
}

.bikotsu-case-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0 12px 12px;
}

.bikotsu-case-card__meta .bikotsu-badge {
	font-size: 0.7rem;
	padding: 2px 10px;
	text-decoration: none;
}

.bikotsu-cases-empty {
	text-align: center;
	color: var(--text-mid);
	padding-block: 48px;
}

/* --- ページネーション（症例・成功事例・コラムの全一覧で共通） --- */
.bikotsu-page .navigation.pagination {
	margin-top: 40px;
	text-align: center;
}

.bikotsu-page .nav-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
}

.bikotsu-page .page-numbers,
.bikotsu-page a.page-numbers:visited {
	display: inline-block;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: 0.85rem;
	text-align: center;
	text-decoration: none;
	color: var(--text-mid);
}

.bikotsu-page .page-numbers.current {
	background: var(--pink);
	border-color: var(--pink);
	color: var(--white);
}

.bikotsu-page a.page-numbers:hover,
.bikotsu-page a.page-numbers:focus-visible {
	border-color: var(--gold);
	color: var(--gold-dark);
}

/* ============================================================
   症例個別（single-cases）
   ============================================================ */
.bikotsu-single-case__badges {
	margin-top: 12px;
}

.bikotsu-single-case__badges .bikotsu-badge {
	text-decoration: none;
	margin-inline: 2px;
}

.bikotsu-single-case__body {
	max-width: 840px;
	padding-block: 40px;
}

/* --- ビフォーアフター --- */
.bikotsu-before-after {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 32px;
}

.bikotsu-before-after__item {
	margin: 0;
}

.bikotsu-before-after__item img {
	width: 100%;
	aspect-ratio: var(--ratio-square);
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
}

.bikotsu-before-after__label {
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text-light);
	margin-top: 8px;
}

.bikotsu-before-after__label--after {
	color: var(--gold-dark);
}

.bikotsu-single-case__thumbnail img {
	width: 100%;
	aspect-ratio: var(--ratio-square);
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
}

/* --- 施術情報 --- */
.bikotsu-case-meta {
	display: flex;
	gap: 16px;
	align-items: baseline;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 14px 20px;
	margin-bottom: 24px;
}

.bikotsu-case-meta dt {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--text-mid);
}

.bikotsu-case-meta dd {
	margin: 0;
	font-weight: 600;
}

/* --- 施術者コメント --- */
.bikotsu-case-comment {
	border-left: 3px solid var(--gold);
	background: var(--cream);
	border-radius: 0 8px 8px 0;
	padding: 20px 24px;
	margin-bottom: 32px;
}

.bikotsu-case-comment__title {
	font-size: 1rem;
	margin: 0 0 8px;
	color: var(--gold-dark);
}

.bikotsu-case-comment p {
	margin: 0;
	font-size: 0.95rem;
}

/* --- 関連症例・CTA --- */
.bikotsu-related-cases {
	padding-block: 48px;
	margin-top: 24px;
}

.bikotsu-single-cta {
	padding-block: 48px;
}

/* --- 前後ナビ --- */
.bikotsu-single-case .post-navigation {
	padding-block: 24px;
	border-top: 1px solid var(--border);
}

.bikotsu-single-case .post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.bikotsu-single-case .post-navigation a {
	font-size: 0.85rem;
	text-decoration: none;
}

/* ============================================================
   成功事例一覧（archive-success / taxonomy-success_type）
   ============================================================ */
.bikotsu-success-archive .bikotsu-container {
	padding-block: 40px;
}

.bikotsu-success-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bikotsu-success-card:hover,
.bikotsu-success-card:focus-within {
	box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.16);
	transform: translateY(-3px);
	border-color: var(--gold-light);
}

.bikotsu-success-card__link,
.bikotsu-success-card__link:visited {
	display: block;
	text-decoration: none;
	color: var(--text);
}

.bikotsu-success-card__figure {
	position: relative;
}

.bikotsu-success-card__image,
.bikotsu-success-card__noimage {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-portrait); /* 縦長ポートレート統一・CLS対策 */
	object-fit: cover;
}

.bikotsu-success-card__noimage {
	background: var(--cream2);
}

.bikotsu-success-card__badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	background: var(--gold-grad);
	color: var(--rose-deep-dark);
	font-size: 0.75rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(17, 30, 53, 0.25);
}

.bikotsu-success-card__body {
	padding: 16px 16px 8px;
}

.bikotsu-success-card__title {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 6px;
}

.bikotsu-success-card__lead {
	font-size: 0.85rem;
	color: var(--text-mid);
	margin: 0;
}

.bikotsu-success-card__meta {
	padding: 0 16px 14px;
}

.bikotsu-success-card__meta .bikotsu-badge {
	font-size: 0.7rem;
	padding: 2px 10px;
	text-decoration: none;
	margin-right: 4px;
}

/* ============================================================
   受講生紹介（testimonials）：固定ページに直接挿入するカード
   （inc/block-patterns.php の受講生紹介パターン専用。管理画面・
   カスタム投稿タイプは使わない運用のため、対応するCSSのみを残している）
   ============================================================ */
.bikotsu-testimonial-card {
	position: relative;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bikotsu-testimonial-card:hover,
.bikotsu-testimonial-card:focus-within {
	box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.16);
	transform: translateY(-3px);
	border-color: var(--gold-light);
}

.bikotsu-testimonial-card__figure {
	position: relative;
	margin: 0;
}

.bikotsu-testimonial-card__figure img {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-portrait); /* Instagram投稿写真（縦長）を想定した比率 */
	object-fit: cover;
}

.bikotsu-testimonial-card__body {
	padding: 14px 16px 16px;
}

.bikotsu-testimonial-card__name {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 4px;
}

.bikotsu-testimonial-card__salon {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--gold-dark);
	margin: 0 0 2px;
}

.bikotsu-testimonial-card__meta {
	font-size: 0.8rem;
	color: var(--text-mid);
	margin: 0;
}

.bikotsu-testimonial-card__catchphrase {
	font-size: 0.85rem;
	color: var(--text);
	font-style: italic;
	margin: 8px 0 0;
	line-height: 1.5;
}

/* Gutenbergのグループブロックが付与するレイアウト用クラス
   （.is-layout-flow等）よりも確実に優先させるため、.bikotsu-gridとの
   結合セレクタにしている（スマホ2列・PC3列が崩れないようにするため）. */
.bikotsu-testimonial-grid.bikotsu-grid {
	display: grid;
}

/* ============================================================
   成功事例個別（single-success）
   ============================================================ */
.bikotsu-single-success__badge {
	margin-bottom: 8px;
}

.bikotsu-single-success__badge .bikotsu-badge {
	background: var(--gold-grad);
	color: var(--rose-deep-dark);
}

.bikotsu-single-success__body {
	max-width: 840px;
	padding-block: 40px;
}

/* --- プロフィール --- */
.bikotsu-success-profile {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 24px;
	margin-bottom: 40px;
}

@media (min-width: 600px) {
	.bikotsu-success-profile {
		grid-template-columns: 200px 1fr;
		align-items: center;
	}
}

.bikotsu-success-profile__image {
	width: 100%;
	aspect-ratio: var(--ratio-portrait);
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
}

.bikotsu-success-profile__data {
	margin: 0;
}

.bikotsu-success-profile__data dt {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--gold-dark);
	margin-top: 10px;
}

.bikotsu-success-profile__data dt:first-child {
	margin-top: 0;
}

.bikotsu-success-profile__data dd {
	margin: 0;
	font-weight: 500;
}

/* --- ストーリー --- */
.bikotsu-success-story__step {
	position: relative;
	padding-left: 24px;
	border-left: 2px solid var(--gold-pale);
	padding-bottom: 32px;
}

.bikotsu-success-story__step:last-child {
	padding-bottom: 8px;
}

.bikotsu-success-story__step::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gold-grad);
}

.bikotsu-success-story__heading {
	font-size: 1.1rem;
	margin: 0 0 10px;
}

.bikotsu-success-story__label {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--gold-dark);
	background: var(--gold-pale);
	border-radius: var(--radius-pill);
	padding: 3px 12px;
	margin-right: 10px;
	vertical-align: middle;
}

.bikotsu-success-story__step p {
	font-size: 0.95rem;
	color: var(--text-mid);
	margin: 0;
}

/* --- メッセージ --- */
.bikotsu-success-message {
	background: var(--pink-pale);
	border-left: 4px solid var(--pink);
	color: var(--text);
	border-radius: 0 12px 12px 0;
	padding: 28px;
	margin: 40px 0;
}

.bikotsu-success-message__title {
	font-size: 1rem;
	color: var(--pink-dark);
	margin: 0 0 12px;
}

.bikotsu-success-message p {
	margin: 0;
	line-height: 2;
}

/* ============================================================
   スクールページ
   ============================================================ */

/* --- コース詳細（仕様リスト） --- */
.bikotsu-course-card__specs {
	list-style: none;
	margin: 0 0 16px;
	padding: 12px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	font-size: 0.85rem;
}

.bikotsu-course-card__specs li {
	padding-block: 4px;
	color: var(--text-mid);
}

/* --- 受講までの流れ --- */
.bikotsu-flow__step {
	text-align: center;
}

/* 「選ばれる4つの理由」の丸番号バッジと統一したデザイン言語 */
.bikotsu-flow__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--white);
	border: 1.5px solid var(--gold);
	color: var(--gold-dark);
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1;
}

.bikotsu-flow__step h3 {
	font-size: 1.05rem;
	margin-block: 0 8px;
}

.bikotsu-flow__step p:last-child {
	font-size: 0.85rem;
	color: var(--text-mid);
}

/* スマホでは2×2に */
@media (max-width: 781px) {
	.bikotsu-flow {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 12px;
	}
}

/* --- FAQ（標準「詳細」ブロック） --- */
.bikotsu-faq__item {
	max-width: 800px;
	margin-inline: auto;
	margin-bottom: 12px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.bikotsu-faq__item summary {
	position: relative;
	padding: 16px 48px 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none; /* 既定の▶マーカーを消す */
}

.bikotsu-faq__item summary::-webkit-details-marker {
	display: none;
}

/* Q マーク */
.bikotsu-faq__item summary::before {
	content: "Q.";
	font-family: var(--font-serif);
	font-weight: 700;
	color: var(--gold-dark);
	margin-right: 10px;
}

/* 開閉アイコン（＋／−） */
.bikotsu-faq__item summary::after {
	content: "＋";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--gold-dark);
	font-weight: 700;
}

.bikotsu-faq__item[open] summary::after {
	content: "−";
}

.bikotsu-faq__item[open] summary {
	border-bottom: 1px solid var(--border);
}

.bikotsu-faq__item > :not(summary) {
	padding: 16px 20px;
	margin: 0;
	font-size: 0.95rem;
	color: var(--text-mid);
}

/* ============================================================
   協会についてページ
   ============================================================ */

/* --- 代表挨拶 --- */
.bikotsu-about-greeting__photo img {
	width: 100%;
	aspect-ratio: var(--ratio-portrait); /* 800×1000基準・CLS対策 */
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius-md);
	display: block;
}

.bikotsu-about-greeting__name {
	font-family: var(--font-serif);
	font-weight: 600;
	margin-top: 12px;
}

/* --- 協会概要（表） --- */
.bikotsu-about-table {
	max-width: 800px;
	margin-inline: auto;
}

.bikotsu-about-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.bikotsu-about-table td {
	border: none;
	border-bottom: 1px solid var(--border);
	padding: 14px 18px;
	font-size: 0.95rem;
}

.bikotsu-about-table tr:last-child td {
	border-bottom: none;
}

.bikotsu-about-table td:first-child {
	width: 32%;
	background: var(--cream2);
	font-weight: 600;
	color: var(--text-mid);
}

/* --- 書籍・メディア --- */
.bikotsu-about-media__book img {
	width: 100%;
	aspect-ratio: var(--ratio-portrait); /* 書籍カバーもポートレート比率に統一 */
	object-fit: cover;
	border-radius: var(--radius-sm);
	box-shadow: 0 8px 24px rgba(var(--shadow-rgb), 0.15);
	display: block;
}

/* ============================================================
   無料資料ページ
   ============================================================ */
.bikotsu-resource-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius-md);
	padding: 32px;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.bikotsu-resource-card:hover,
.bikotsu-resource-card:focus-within {
	box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.16);
	transform: translateY(-3px);
	border-color: var(--gold-light);
}

.bikotsu-resource-card__thumb img {
	width: 100%;
	aspect-ratio: var(--ratio-landscape); /* 800×600基準・CLS対策 */
	object-fit: cover;
	border-radius: var(--radius-sm);
	display: block;
}

.bikotsu-resource-card h3 {
	font-size: 1.05rem;
	margin: 16px 0 8px;
}

.bikotsu-resource-card p {
	font-size: 0.9rem;
	color: var(--text-mid);
	margin: 0;
}

/* 動画（埋め込みブロック）を中央寄せ・角丸に */
.bikotsu-resources-video .wp-block-embed {
	max-width: 800px;
	margin-inline: auto;
}

.bikotsu-resources-video .wp-block-embed iframe {
	border-radius: var(--radius-md);
}

/* ============================================================
   お問い合わせページ・WPForms
   ============================================================ */
.bikotsu-contact-methods__title {
	font-size: 1.15rem;
	margin-top: 8px;
}

/* WPForms 挿入前の案内文（挿入後は削除される想定） */
.bikotsu-contact-form-placeholder {
	color: var(--text-light);
	font-size: 0.85rem;
}

/* --- WPForms をブランドデザインに合わせる --- */
.bikotsu-page--contact .wpforms-container {
	max-width: 680px;
	margin-inline: auto;
}

.bikotsu-page--contact .wpforms-field-label {
	font-weight: 600;
	color: var(--text);
}

.bikotsu-page--contact .wpforms-required-label {
	color: var(--pink);
}

.bikotsu-page--contact .wpforms-field input[type="text"],
.bikotsu-page--contact .wpforms-field input[type="email"],
.bikotsu-page--contact .wpforms-field input[type="tel"],
.bikotsu-page--contact .wpforms-field select,
.bikotsu-page--contact .wpforms-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--white);
	font-size: 16px; /* 16px未満だとiOSでフォーカス時に自動ズームされるため */
	color: var(--text);
}

.bikotsu-page--contact .wpforms-field input:focus,
.bikotsu-page--contact .wpforms-field select:focus,
.bikotsu-page--contact .wpforms-field textarea:focus {
	outline: 2px solid var(--gold-dark);
	outline-offset: 1px;
	border-color: var(--gold);
}

/* 送信ボタン（ゴールドCTA・タップしやすい高さ） */
.bikotsu-page--contact .wpforms-submit,
.bikotsu-page--contact button[type="submit"] {
	display: block;
	width: 100%;
	max-width: 320px;
	margin-inline: auto;
	padding: 16px 32px;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--gold-grad);
	color: var(--rose-deep-dark);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(154, 122, 46, 0.3);
	transition: var(--transition-interactive);
}

.bikotsu-page--contact .wpforms-submit:hover,
.bikotsu-page--contact button[type="submit"]:hover,
.bikotsu-page--contact .wpforms-submit:focus-visible,
.bikotsu-page--contact button[type="submit"]:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(154, 122, 46, 0.4);
}

.bikotsu-page--contact .wpforms-submit:active,
.bikotsu-page--contact button[type="submit"]:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(154, 122, 46, 0.3);
}

/* エラーメッセージ */
.bikotsu-page--contact .wpforms-error {
	color: var(--pink);
	font-size: 0.8rem;
}

/* ============================================================
   法的ページ（プライバシーポリシー・特定商取引法に基づく表記）
   ============================================================ */
.bikotsu-legal-page {
	padding-block: 48px 80px;
}

.bikotsu-legal-page > * {
	max-width: 760px;
	margin-inline: auto;
}

.bikotsu-legal-page h2 {
	margin-top: 40px;
	font-size: 1.1rem;
}

.bikotsu-legal-page p,
.bikotsu-legal-page li {
	line-height: 1.9;
}

.bikotsu-legal-page table td {
	vertical-align: top;
}

.bikotsu-legal-page__date {
	margin-top: 48px;
	color: var(--text-light);
	font-size: 0.85rem;
	text-align: right;
}

/* ============================================================
   購入前確認ページ（page-purchase-confirm.php）
   スマホでの利用が前提のため、まず単カラム・読みやすさ優先で組む。
   ============================================================ */
.bikotsu-purchase-confirm {
	padding-block: 32px 80px;
}

.bikotsu-purchase-confirm__inner {
	max-width: 640px;
	margin-inline: auto;
}

.bikotsu-purchase-confirm__product {
	margin: 0 0 24px;
	padding: 12px 16px;
	background: var(--cream);
	border-radius: 6px;
	font-weight: 700;
	text-align: center;
}

.bikotsu-purchase-confirm__terms h3 {
	margin-top: 32px;
	font-size: 1.05rem;
}

.bikotsu-purchase-confirm__terms p,
.bikotsu-purchase-confirm__terms li {
	line-height: 1.9;
}

.bikotsu-purchase-confirm__agree {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--border);
	text-align: center;
}

.bikotsu-purchase-confirm__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 auto 24px;
	max-width: 480px;
	text-align: left;
	line-height: 1.7;
	cursor: pointer;
}

.bikotsu-purchase-confirm__checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--gold-dark);
}

.bikotsu-purchase-confirm__proceed-wrap {
	display: flex;
	justify-content: center;
}

#bikotsu-purchase-confirm-proceed {
	border: 0;
	cursor: pointer;
	font: inherit;
}

#bikotsu-purchase-confirm-proceed[disabled] {
	background: var(--border);
	color: var(--text-light);
	cursor: not-allowed;
	box-shadow: none;
}

.bikotsu-purchase-confirm__error {
	margin-top: 40px;
	padding: 16px 20px;
	background: var(--cream);
	border-radius: 6px;
	text-align: center;
}

.bikotsu-purchase-confirm__error p {
	margin: 0;
}

/* ============================================================
   コラム記事（single.php）
   ============================================================ */
.bikotsu-article__container {
	max-width: 760px;
	margin-inline: auto;
	padding-inline: 20px;
}

.bikotsu-article__header {
	padding-block: 28px 20px;
}

.bikotsu-article__categories {
	margin-bottom: 12px;
}

.bikotsu-article__categories .bikotsu-badge {
	text-decoration: none;
	margin-right: 4px;
}

.bikotsu-article__title {
	font-size: 1.6rem;
	line-height: 1.6;
	margin: 0 0 12px;
}

@media (min-width: 960px) {
	.bikotsu-article__title {
		font-size: 2rem;
	}
}

.bikotsu-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 0.8rem;
	color: var(--text-light);
}

.bikotsu-article__eyecatch {
	margin: 0 0 8px;
}

.bikotsu-article__eyecatch img {
	width: 100%;
	aspect-ratio: var(--ratio-landscape);
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
}

/* --- 本文タイポグラフィ（読みやすさ＝SEOの土台） --- */
.bikotsu-article__content {
	padding-block: 16px 40px;
	font-size: 1rem;
	line-height: 2;
}

.bikotsu-article__content h2 {
	font-size: 1.35rem;
	margin: 2.2em 0 0.8em;
	padding: 10px 16px;
	background: var(--cream2);
	border-left: 4px solid var(--gold);
	border-radius: 0 8px 8px 0;
}

.bikotsu-article__content h3 {
	font-size: 1.15rem;
	margin: 1.8em 0 0.6em;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--gold-pale);
}

.bikotsu-article__content p {
	margin-block: 1.2em;
}

.bikotsu-article__content ul,
.bikotsu-article__content ol {
	padding-left: 1.4em;
	margin-block: 1.2em;
}

.bikotsu-article__content li {
	margin-block: 0.4em;
}

.bikotsu-article__content blockquote {
	border-left: 3px solid var(--gold);
	background: var(--cream);
	padding: 16px 20px;
	margin-inline: 0;
	border-radius: 0 8px 8px 0;
	color: var(--text-mid);
}

.bikotsu-article__content img {
	border-radius: var(--radius-sm);
}

.bikotsu-article__content a {
	text-decoration: underline;
}

/* 目次（Table of Contents Plus） */
.bikotsu-article__content #toc_container {
	background: var(--cream);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	font-size: 0.9rem;
	width: 100%;
}

.bikotsu-article__content #toc_container .toc_title {
	font-weight: 700;
	color: var(--text);
}

.bikotsu-article__content #toc_container a,
.bikotsu-article__content #toc_container a:visited {
	color: var(--text-mid);
	text-decoration: none;
}

.bikotsu-article__content #toc_container a:hover,
.bikotsu-article__content #toc_container a:focus-visible {
	color: var(--gold-dark);
}

.bikotsu-article__tags {
	padding-bottom: 24px;
	font-size: 0.8rem;
}

/* --- 記事カード（関連記事・一覧共用） --- */
.bikotsu-post-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bikotsu-post-card:hover,
.bikotsu-post-card:focus-within {
	box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.16);
	transform: translateY(-3px);
	border-color: var(--gold-light);
}

.bikotsu-post-card__link,
.bikotsu-post-card__link:visited {
	display: block;
	text-decoration: none;
	color: var(--text);
}

.bikotsu-post-card__image,
.bikotsu-post-card__noimage {
	display: block;
	width: 100%;
	aspect-ratio: var(--ratio-landscape); /* CLS対策 */
	object-fit: cover;
}

.bikotsu-post-card__noimage {
	background: var(--cream2);
}

.bikotsu-post-card__body {
	padding: 14px 16px 6px;
}

.bikotsu-post-card__title {
	font-family: var(--font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.6;
	margin: 0 0 6px;
}

.bikotsu-post-card__date {
	font-size: 0.75rem;
	color: var(--text-light);
}

.bikotsu-post-card__more {
	display: block;
	margin-top: 8px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--pink-dark);
}

.bikotsu-post-card__more::after {
	content: "→";
	margin-left: 4px;
}

.bikotsu-post-card__meta {
	padding: 0 16px 14px;
}

.bikotsu-post-card__meta .bikotsu-badge {
	font-size: 0.7rem;
	padding: 2px 10px;
	text-decoration: none;
}

/* --- 記事下CTA --- */
.bikotsu-article-cta {
	padding-block: 48px;
}

.bikotsu-article-cta__title {
	color: var(--white);
	font-size: 1.3rem;
	margin: 0 0 8px;
}

.bikotsu-article-cta__text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.9rem;
	margin: 0 0 24px;
}

.bikotsu-article-cta__buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

@media (min-width: 600px) {
	.bikotsu-article-cta__buttons {
		flex-direction: row;
		justify-content: center;
	}
}

.bikotsu-related-posts {
	padding-block: 48px;
}

.bikotsu-single-post .post-navigation {
	padding-block: 24px;
}

.bikotsu-single-post .post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.bikotsu-single-post .post-navigation a {
	font-size: 0.85rem;
	text-decoration: none;
}

/* ============================================================
   コラム一覧（archive / category / tag / search）
   ============================================================ */
.bikotsu-posts-archive .bikotsu-container {
	padding-block: 40px;
}

/* --- 検索フォーム --- */
.bikotsu-search-form {
	display: flex;
	gap: 8px;
	max-width: 480px;
}

.bikotsu-search-form__input {
	flex: 1;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-size: 16px; /* iOSの自動ズーム防止 */
	color: var(--text);
}

.bikotsu-search-form__input:focus {
	outline: 2px solid var(--gold-dark);
	outline-offset: 1px;
}

.bikotsu-search-form__submit {
	padding: 10px 24px;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--pink);
	color: var(--white);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: var(--transition-interactive);
}

.bikotsu-search-form__submit:hover,
.bikotsu-search-form__submit:focus-visible {
	background: var(--pink-dark);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(var(--pink-shadow-rgb), 0.3);
}

.bikotsu-search-form__submit:active {
	background: var(--pink-dark);
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(var(--pink-shadow-rgb), 0.25);
}

/* ============================================================
   404ページ
   ============================================================ */
.bikotsu-404__body {
	max-width: 560px;
	padding-block: 40px 64px;
	text-align: center;
}

.bikotsu-404__search {
	margin-bottom: 32px;
}

.bikotsu-404__search .bikotsu-search-form {
	margin-inline: auto;
}

.bikotsu-404__links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bikotsu-404__links a,
.bikotsu-404__links a:visited {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-size: 0.85rem;
	text-decoration: none;
	color: var(--text-mid);
	transition: border-color 0.25s ease, color 0.25s ease;
}

.bikotsu-404__links a:hover,
.bikotsu-404__links a:focus-visible {
	border-color: var(--gold);
	color: var(--gold-dark);
}

/* ============================================================
   技術ページ
   ============================================================ */
.bikotsu-tech-intro__image img,
.bikotsu-tech__image img {
	width: 100%;
	aspect-ratio: var(--ratio-landscape);
	object-fit: cover;
	display: block;
	border-radius: var(--radius-md);
}

/* ============================================================
   セクション見出し（サイト全体共通・ラグジュアリー仕様）
   全パターンで使い回す最重要の共有コンポーネント。ここを整えることで
   個々のセクションを直さなくてもサイト全体の統一感が底上げされる。
   ============================================================ */
.bikotsu-heading-en {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold-dark);
	margin-bottom: 14px;
}

/* 英語見出しの左右に短いゴールドの一本線を添える */
.bikotsu-heading-en::before,
.bikotsu-heading-en::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 1px;
	background: var(--gold);
}

/* text-align:center の段落は inline-flex にすると中央からズレるため、
   親を flex コンテナ化して見出しラベルごと中央寄せする */
p.bikotsu-heading-en {
	display: flex;
	justify-content: center;
}

/* 濃色・カラー背景セクションでは英語見出しをゴールドライトに */
.bikotsu-final-cta .bikotsu-heading-en,
.bikotsu-grad-hero .bikotsu-heading-en {
	color: var(--gold-light);
}

.bikotsu-final-cta .bikotsu-heading-en::before,
.bikotsu-final-cta .bikotsu-heading-en::after,
.bikotsu-grad-hero .bikotsu-heading-en::before,
.bikotsu-grad-hero .bikotsu-heading-en::after {
	background: var(--gold-light);
}

.bikotsu-heading-ja {
	position: relative;
	font-size: 1.6rem;
	line-height: 1.5;
	margin-top: 0;
	margin-bottom: 20px;
	padding-bottom: 20px;
}

/* 見出し直下に短いゴールドの装飾線（サイン・署名のような一筆） */
.bikotsu-heading-ja::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 44px;
	height: 2px;
	background: var(--gold-grad);
	transform: translateX(-50%);
}

@media (min-width: 960px) {
	.bikotsu-heading-en {
		margin-bottom: 18px;
	}

	.bikotsu-heading-ja {
		font-size: 2.1rem;
		padding-bottom: 24px;
		margin-bottom: 28px;
	}

	.bikotsu-heading-ja::after {
		width: 56px;
	}
}

/* ============================================================
   1. ヒーロー（PC/SP専用の完成デザイン画像をそのまま使用）
   ============================================================ */

/*
 * 見出し・実績バッジ・CTAまで作り込んだ1枚の画像を、加工せず
 * そのままファーストビューとして表示する。PC/SPで別々の画像を用意し、
 * width:100%; height:auto; で「幅に合わせて縮小するだけ」にする
 * （contain/coverによるクロップや引き伸ばしは行わない）。
 */
.bikotsu-hero-flat {
	position: relative;
	margin: 0;
	line-height: 0;
}

.bikotsu-hero-flat__img {
	margin: 0;
	width: 100%;
	overflow: visible !important;
}

/*
 * Lightning（親テーマ）側が画像に object-fit:cover や高さ固定の
 * スタイルを当てているケースを想定し、この要素だけは !important で
 * 明示的に上書きする（親テーマ側のクロップでロゴ等が見切れるのを防ぐ）。
 */
.bikotsu-hero-flat__img img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	object-position: center !important;
	display: block;
}

.bikotsu-hero-flat__img--pc {
	display: none;
}

.bikotsu-hero-flat__img--sp {
	display: block;
}

/*
 * 画像内の「無料説明会に参加する」ボタンの上に重ねる透明リンク。
 * PC画像は従来通り画像内にCTAが描き込まれているため、この透明リンクで
 * クリックできるようにする。SP画像（2026/7リニューアル版）はCTAを含まない
 * デザインに変更したため、SP側の透明リンクは廃止し、画像の下に独立した
 * CTAセクション（.bikotsu-hero-cta-standalone-wrap）を新設した。
 */
.bikotsu-hero-flat__cta {
	position: absolute;
	margin: 0;
}

.bikotsu-hero-flat__cta a {
	display: block;
	width: 100%;
	height: 100%;
}

.bikotsu-hero-flat__cta--pc {
	display: none;
}

@media (min-width: 960px) {
	.bikotsu-hero-flat__img--pc {
		display: block;
	}

	.bikotsu-hero-flat__img--sp {
		display: none;
	}

	/* PC画像（1536×1024・2026/7/11更新版）内のボタン位置に合わせた座標 */
	.bikotsu-hero-flat__cta--pc {
		display: block;
		left: 6.45%;
		top: 67.97%;
		width: 52.14%;
		height: 14.06%;
	}
}

/*
 * ============================================================
   ヒーロー直下の独立CTAセクション（スマホのみ・2026/7リニューアル）
   ============================================================
 * SP用ヒーロー画像にCTAを描き込まなくなったため、画像の直下に
 * 独立したCTAボタン（画像）を配置する。通常時／Hover・Active時で
 * 別々の画像を用意し、クロスフェードで切り替える（PC・タブレットは
 * 従来通り画像内蔵CTAのままのため、このセクションは960px未満でのみ表示）。
 */
.bikotsu-hero-cta-standalone-wrap {
	display: block;
	/*
	 * 透明区間をさらに長くし（0%→75%）、色がつき始めるタイミングを
	 * 遅らせることで境界感をより弱める。加えて、ヒーロー画像の下端に
	 * わずかに重なるよう負のmarginで引き上げ、「画像の下に置いた別部品」
	 * ではなく「画像から地続きに続くデザイン」に見せる（画像の四隅は
	 * ほぼ白に近い色のため、重なっても写真を不自然に隠すことはない）。
	 */
	background: linear-gradient(180deg, rgba(255, 247, 250, 0) 0%, #FFF7FA 75%);
	/*
	 * 左右余白は固定pxではなくclamp()にし、画面幅に応じてなめらかに
	 * 変化させる。上の間隔は、ヒーロー画像へわずかに重なるよう負の値にし、
	 * 「一枚のデザインの続き」に見えるようにしている。
	 */
	margin-block: clamp(-20px, -3vw, -10px) 0;
	padding-block: clamp(18px, 4.5vw, 26px);
	padding-inline: clamp(20px, 6vw, 40px);
	position: relative;
}

.bikotsu-hero-cta-standalone-inner {
	margin: 0;
	/*
	 * ボタン自体の最大幅を制限し、画面幅のある端末（大型スマホ〜このCTAが
	 * 表示される上限の781px付近）でボタンだけが間延びして大きくなりすぎ
	 * ないようにする。auto marginで中央に保つ。
	 */
	max-width: 480px;
	margin-inline: auto;
}

.bikotsu-hero-cta-standalone {
	position: relative;
	display: block;
	line-height: 0;
	transition: transform 0.2s ease;
}

.bikotsu-hero-cta-standalone:active {
	transform: scale(0.98);
}

/*
 * 画像自体、ボタン本体の周りにやわらかい発光がにじむように作られており、
 * 画像の四隅（背景）はほぼ白（RGB 252,252,252）に近い。以前はこの画像に
 * border-radiusで丸ピル型のクリッピングをかけていたが、それによって
 * 画像本来のやわらかいにじみが角で唐突に切り取られ、「後から貼り付けた
 * カード」のように見える一因になっていた。クリッピングをやめて画像を
 * そのまま四角形で表示することで、画像自体の白に近い背景が
 * このセクションの背景（グラデーション）に自然に溶け込むようにする。
 */
.bikotsu-hero-cta-standalone__img {
	display: block;
	width: 100%;
	height: auto;
}

.bikotsu-hero-cta-standalone__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bikotsu-hero-cta-standalone:hover .bikotsu-hero-cta-standalone__img--hover,
.bikotsu-hero-cta-standalone:active .bikotsu-hero-cta-standalone__img--hover,
.bikotsu-hero-cta-standalone:focus-visible .bikotsu-hero-cta-standalone__img--hover {
	opacity: 1;
}

@media (min-width: 960px) {
	.bikotsu-hero-cta-standalone-wrap {
		display: none;
	}
}

/*
 * ブロックエディター内では、PC用・スマホ用の両方を常に表示し、
 * ラベルを付けて区別できるようにする（実際の表示切り替えは
 * フロント側のみで行い、編集画面では常に両方が見える・選べる状態にする。
 * エディターの表示幅が960px未満になると、レスポンシブの表示切り替えに
 * よって「PC用」画像が非表示・選択不可になり、管理者が置き換えられない
 * ことがあったための対策）。
 */
.editor-styles-wrapper .bikotsu-hero-flat__img--pc,
.editor-styles-wrapper .bikotsu-hero-flat__img--sp {
	display: block !important;
}

.editor-styles-wrapper .bikotsu-hero-flat__img--pc::before,
.editor-styles-wrapper .bikotsu-hero-flat__img--sp::before {
	display: block;
	color: var(--white);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	margin-bottom: 4px;
}

.editor-styles-wrapper .bikotsu-hero-flat__img--pc::before {
	content: "PC用画像（960px以上の画面幅で表示）";
	background: var(--gold-dark);
}

.editor-styles-wrapper .bikotsu-hero-flat__img--sp::before {
	content: "スマホ用画像（960px未満の画面幅で表示）";
	background: var(--pink-dark);
}

/* ============================================================
   2. 実績バッジ帯（ゴールドの月桂樹装飾・高級感のある賞状風）
   ============================================================ */

/*
 * 月桂樹アイコンはCSSのみで実装（SVGデータURI）。
 * post_content に生のSVGを置くとKSESで剥ぎ取られる可能性があるため、
 * 編集可能なコンテンツ側ではなく、必ずこのCSS側に持たせること。
 */
.bikotsu-stats {
	padding-block: 80px 40px;
	background:
		radial-gradient(ellipse at 50% 0%, var(--pink-pale) 0%, var(--white) 62%);
	position: relative;
}

/* 上下を金の細い一本線で額装する（賞状・高級ホテルの案内板のような印象） */
.bikotsu-stats::before {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	margin: 0 auto 40px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.bikotsu-stats__grid {
	gap: 8px;
}

/* 表彰プレート風のカード（極細ゴールド枠＋淡いカード背景） */
.bikotsu-stat {
	position: relative;
	text-align: center;
	padding: 28px 40px 24px;
	background: linear-gradient(180deg, var(--white) 0%, var(--pink-pale) 100%);
	border: 1px solid var(--gold-light);
	border-radius: var(--radius-lg);
	box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.06);
}

/* 月桂樹（左右）：CSSのみのSVG装飾。数字＋ラベル全体を包むように配置 */
.bikotsu-stat::before,
.bikotsu-stat::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 34px;
	height: 74px;
	transform: translateY(-54%);
	background-image: var(--laurel-svg);
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.9;
}

.bikotsu-stat::before {
	left: 0;
}

.bikotsu-stat::after {
	right: 0;
	transform: translateY(-54%) scaleX(-1);
}

/* 数字を主役にしたタイポグラフィ */
.bikotsu-stat__num {
	position: relative;
	display: block;
	font-family: var(--font-serif);
	font-size: clamp(1.3rem, 6vw, 2.3rem);
	font-weight: 700;
	color: var(--pink-dark);
	line-height: 1;
	letter-spacing: 0.01em;
	margin-bottom: 10px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.bikotsu-stat__suffix {
	font-size: 0.42em;
	font-weight: 500;
	letter-spacing: 0;
	margin-left: 2px;
	color: var(--text-mid);
}

.bikotsu-stat__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--text-mid);
	margin-top: 0;
}

.bikotsu-stats__note {
	font-size: 0.7rem;
	color: var(--text-light);
	margin-top: 32px;
}

/* スマホでは2×2に。月桂樹は最小限のサイズに詰め、数字の可読性を優先 */
@media (max-width: 781px) {
	.bikotsu-stats__grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 36px;
		column-gap: 4px;
	}

	.bikotsu-stat {
		padding-inline: 20px;
		min-width: 0;
	}

	.bikotsu-stat::before,
	.bikotsu-stat::after {
		width: 14px;
		height: 44px;
	}
}

/* iPhone SE等の極小幅でも数字が折り返さないよう、さらに一段階詰める */
@media (max-width: 380px) {
	.bikotsu-stat {
		padding-inline: 14px;
	}

	.bikotsu-stat__num {
		font-size: 1.15rem;
	}

	.bikotsu-stat::before,
	.bikotsu-stat::after {
		width: 10px;
		height: 34px;
	}
}

@media (min-width: 960px) {
	.bikotsu-stats {
		padding-block: 132px 56px;
	}

	.bikotsu-stat {
		padding-inline: 52px;
	}

	.bikotsu-stat::before,
	.bikotsu-stat::after {
		width: 40px;
		height: 88px;
	}
}

/* ============================================================
   3. 受講生の実績（カード）
   ============================================================ */
.bikotsu-voices .bikotsu-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	padding-bottom: 16px;
}

.bikotsu-card__image img {
	width: 100%;
	aspect-ratio: var(--ratio-portrait); /* 画像未設定・サイズ違いでもCLSを起こさない・写真を主役に大きく見せる */
	object-fit: cover;
	display: block;
}

.bikotsu-card__title {
	font-size: 1.1rem;
	line-height: 1.7;
	margin: 24px 24px 10px;
}

.bikotsu-card__text {
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--text-mid);
	margin: 0 24px 12px;
}

/*
 * スマホでは1件ずつ縦に大きくスタックし、写真が画面を占有していたため、
 * 症例実績セクションと同じ3列グリッドに統一し、一覧性・テンポを高める。
 * 体験談本文はこの幅では読みにくいため非表示にし、写真とタイトルのみを
 * 見せる（PC表示は変更しない）。
 */
@media (max-width: 781px) {
	.bikotsu-voices .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.bikotsu-voices .wp-block-column.bikotsu-card {
		padding-bottom: 0;
	}

	.bikotsu-card__image {
		padding: 0;
	}

	.bikotsu-card__image img {
		border-radius: var(--radius-sm);
	}

	.bikotsu-card__title {
		margin: 8px 6px 6px;
		font-size: 0.68rem;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bikotsu-card__text {
		display: none;
	}

	/* 「成功事例をもっと見る」ボタンをスマホのみゴールド系に統一 */
	.bikotsu-voices .is-style-bikotsu-outline .wp-block-button__link {
		border-color: var(--gold-dark);
		color: var(--gold-dark);
	}

	.bikotsu-voices .is-style-bikotsu-outline .wp-block-button__link:hover,
	.bikotsu-voices .is-style-bikotsu-outline .wp-block-button__link:focus-visible {
		background: var(--gold-dark);
		border-color: var(--gold-dark);
		color: var(--white);
	}
}

/* ============================================================
   5. ビフォーアフター抜粋
   ============================================================ */
.bikotsu-case__image img {
	width: 100%;
	aspect-ratio: var(--ratio-square); /* 正方形統一（1200×1200基準）・CLS対策 */
	object-fit: cover;
	display: block;
	border-radius: var(--radius-sm);
}

/*
 * スマホでは3枚が1枚ずつ画面いっぱいにスタックし、写真が画面を
 * 占有して見えていたため、3列の小さめグリッドに変更して
 * 一覧性を高める（PC表示は変更しない）。
 */
@media (max-width: 781px) {
	.bikotsu-cases .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
}

/* ============================================================
   6. スクール3コース
   ============================================================ */
.bikotsu-course-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius-md);
	padding: 48px 32px;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.bikotsu-course-card:hover,
.bikotsu-course-card:focus-within {
	box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.16);
	transform: translateY(-3px);
	border-color: var(--gold-light);
}

.bikotsu-course-card h3 {
	margin-top: 0;
	margin-bottom: 4px;
}

.bikotsu-course-card__en {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gold-dark);
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
}

/*
 * スマホでは1件ずつ縦に大きくスタックしていたため、症例実績・受講生の
 * 実績と同じ3列グリッドに統一する。コース説明文はこの幅では読みにくい
 * ため非表示にし、コース名のみで一覧できるようにする
 * （PC表示は変更しない）。
 */
@media (max-width: 781px) {
	.bikotsu-courses .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.bikotsu-courses .wp-block-column.bikotsu-course-card {
		padding: 16px 10px;
	}

	.bikotsu-courses .wp-block-column.bikotsu-course-card h3 {
		font-size: 0.72rem;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bikotsu-courses .bikotsu-course-card__en {
		font-size: 0.55rem;
		letter-spacing: 0.05em;
		margin-bottom: 8px;
		padding-bottom: 8px;
	}

	.bikotsu-courses .wp-block-column.bikotsu-course-card > p:not(.bikotsu-course-card__en) {
		display: none;
	}
}

/*
 * 技術ページ「技術の3つの特徴」も同じ3列グリッドに統一する
 * （スクールコースと同じ .bikotsu-course-card を流用しているため
 * 　同じ縮小レイアウトを適用する。PC表示は変更しない）。
 */
@media (max-width: 781px) {
	.bikotsu-tech-points .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.bikotsu-tech-points .wp-block-column.bikotsu-course-card {
		padding: 16px 10px;
	}

	.bikotsu-tech-points .wp-block-column.bikotsu-course-card h3 {
		font-size: 0.72rem;
		line-height: 1.5;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.bikotsu-tech-points .wp-block-column.bikotsu-course-card > p {
		display: none;
	}
}

/* ============================================================
   7. 選ばれる4つの理由（ピンク番号バッジ）
   ============================================================ */
.bikotsu-feature {
	text-align: center;
}

/*
 * 数字（01/02/03/04）はDOM上は残しつつ（アクセシビリティ・意味上の
 * 順序表現として）、視覚的にはゴールドのアイコンバッジに置き換える
 * （LINEリッチメニューと世界観を合わせたデザイン方針）。
 */
.bikotsu-feature__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--pink-pale);
	border: 1.5px solid var(--gold);
	font-size: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}

.bikotsu-feature:nth-child(1) .bikotsu-feature__num {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC945C' stroke-width='1.5'%3E%3Cpath d='M12 5c-2-1.5-5-2-8-1v14c3-1 6-0.5 8 1c2-1.5 5-2 8-1V4c-3-1-6-0.5-8 1z'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

.bikotsu-feature:nth-child(2) .bikotsu-feature__num {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC945C' stroke-width='1.5'%3E%3Cpath d='M12 20s-7-4.5-9-9c-1.3-3 1-6 4-6c2 0 3.5 1.5 5 3.5C13.5 6.5 15 5 17 5c3 0 5.3 3 4 6c-2 4.5-9 9-9 9z'/%3E%3C/svg%3E");
}

.bikotsu-feature:nth-child(3) .bikotsu-feature__num {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC945C' stroke-width='1.5'%3E%3Cpath d='M4 19V10M10 19V5M16 19v-7M20 19V8'/%3E%3C/svg%3E");
}

.bikotsu-feature:nth-child(4) .bikotsu-feature__num {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC945C' stroke-width='1.5'%3E%3Ccircle cx='12' cy='14' r='6'/%3E%3Cpath d='M9 3l2 5M15 3l-2 5'/%3E%3C/svg%3E");
}

.bikotsu-feature__title {
	font-size: 1rem;
	color: var(--text);
	margin-bottom: 8px;
}

.bikotsu-feature__text {
	font-size: 0.85rem;
	color: var(--text-mid);
}

/* スマホでは2×2に */
@media (max-width: 781px) {
	.bikotsu-features .wp-block-columns {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 12px;
	}
}

/* ============================================================
   8. ミッション
   ============================================================ */
.bikotsu-mission__text {
	line-height: 2.2;
	margin-bottom: 28px;
}

/*
 * ============================================================
   10. 最終CTA（サイト全体で唯一の「強いCTA」。ゴールドの帯にする）
   ============================================================ */
.bikotsu-final-cta {
	background: var(--gold-grad);
}

.bikotsu-final-cta .bikotsu-heading-ja,
.bikotsu-grad-hero .bikotsu-heading-ja {
	color: var(--white);
}

.bikotsu-grad-hero p {
	color: var(--white) !important;
}

/* ゴールドの帯に映るよう、ボタンは白地＋ゴールド文字にする */
.bikotsu-final-cta .is-style-bikotsu-primary .wp-block-button__link {
	background: var(--white);
	color: var(--gold-dark);
	box-shadow: 0 6px 16px rgba(var(--shadow-rgb), 0.24);
}

.bikotsu-final-cta .is-style-bikotsu-primary .wp-block-button__link:hover,
.bikotsu-final-cta .is-style-bikotsu-primary .wp-block-button__link:focus-visible {
	background: var(--cream);
	color: var(--gold-dark);
}

/* CTA帯のブランドマーク。白の紋章のような控えめな透かしとして表示 */
.bikotsu-final-cta__mark {
	width: 48px;
	margin: 0 auto 16px;
}

.bikotsu-final-cta__mark img {
	width: 100%;
	height: auto;
	display: block;
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

/* ============================================================
   11. お知らせ・コラム（オプション）
   ============================================================ */
.bikotsu-news .wp-block-post-title {
	font-size: 1rem;
	line-height: 1.6;
	margin: 12px 0 4px;
}

.bikotsu-news .wp-block-post-title a,
.bikotsu-news .wp-block-post-title a:visited {
	text-decoration: none;
	color: var(--text);
}

.bikotsu-news .wp-block-post-title a:hover,
.bikotsu-news .wp-block-post-title a:focus-visible {
	color: var(--gold-dark);
}

.bikotsu-news .wp-block-post-date {
	font-size: 0.8rem;
	color: var(--text-light);
}

.bikotsu-news .wp-block-post-featured-image img {
	aspect-ratio: var(--ratio-landscape);
	object-fit: cover;
	border-radius: var(--radius-sm);
}

/* ============================================================
   オプション：写真ギャラリー
   ============================================================ */
.bikotsu-gallery__grid {
	gap: 16px;
}

.bikotsu-gallery__image img {
	width: 100%;
	aspect-ratio: var(--ratio-portrait);
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
}

.bikotsu-gallery__caption {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--pink-dark);
	margin-top: 10px;
}

/* スマホでは2×2に */
@media (max-width: 781px) {
	.bikotsu-gallery__grid {
		display: grid !important;
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ============================================================
   LINE集客導線ページ（Intro / Webinar / Reservation）
   ============================================================ */

/* --- 動画埋め込み（Vimeo・YouTube共通、16:9レスポンシブ） --- */
.bikotsu-video-embed {
	max-width: 760px;
	margin: 32px auto;
}

.bikotsu-video-embed__ratio {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--cream2);
	box-shadow: 0 14px 32px rgba(var(--shadow-rgb), 0.16);
}

.bikotsu-video-embed__ratio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* --- Introページ：動画でわかることリスト --- */
.bikotsu-line-intro__points {
	max-width: 480px;
	margin: 0 auto 32px;
	padding: 0;
	list-style: none;
}

.bikotsu-line-intro__points li {
	position: relative;
	padding: 14px 0 14px 32px;
	border-bottom: 1px solid var(--border);
	font-weight: 600;
}

.bikotsu-line-intro__points li:first-child {
	border-top: 1px solid var(--border);
}

.bikotsu-line-intro__points li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold);
}

/* --- Webinarページ：本文セクション見出しの間隔を少し広めに --- */
.bikotsu-line-webinar h2 {
	margin-top: 56px;
}

.bikotsu-line-webinar__cta p {
	color: var(--white);
}

/* --- 入学時期・募集状況の案内文 --- */
.bikotsu-enrollment-status {
	max-width: 560px;
	margin: 0 auto;
	padding: 28px 32px;
	background: var(--cream2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.bikotsu-enrollment-status__headline {
	font-family: var(--font-serif);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--gold-dark);
	margin: 0 0 8px;
}

.bikotsu-enrollment-status__period {
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 12px;
}

.bikotsu-enrollment-status__note {
	font-size: 0.85rem;
	color: var(--text-mid);
	margin: 0;
}

/* --- Reservationページ：Fluent Booking予約カレンダーの外枠 ---
   予約カレンダー自体（曜日・時間帯の選択UI）はプラグイン側が描画する
   ため、ここでは周囲の余白・背景・角丸・影のみをサイトのデザイン
   トークンに合わせている。カレンダー内部の配色（アクセントカラー等）を
   細かく合わせたい場合は、本番環境で実際に描画されたHTML・CSSクラス名
   を確認したうえで追加調整が必要（現時点ではプラグインの内部クラス名を
   確認できていないため、ここでは上書きしていない）。 */
.bikotsu-booking-embed {
	max-width: 760px;
	margin: 32px auto 0;
	padding: 8px;
	background: var(--cream2);
	border-radius: var(--radius-md);
	box-shadow: 0 14px 32px rgba(var(--shadow-rgb), 0.16);
}

@media (min-width: 782px) {
	.bikotsu-booking-embed {
		padding: 16px;
	}
}

/* --- Reservation Thanksページ --- */
.bikotsu-line-reservation-thanks .bikotsu-video-embed {
	margin-top: 24px;
}

.bikotsu-line-reservation-thanks ul.wp-block-list {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.4em;
}

.bikotsu-line-reservation-thanks ul.wp-block-list li {
	margin-bottom: 10px;
}

/* ============================================================
   小顔技術のすべてがわかる（TOPページ・3枚写真＋アイコン）
   ============================================================ */
.bikotsu-learn-more__item {
	text-align: center;
}

.bikotsu-learn-more__image {
	margin: 0 0 -28px;
}

.bikotsu-learn-more__image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: 0 10px 24px rgba(var(--shadow-rgb), 0.14);
}

.bikotsu-learn-more__icon {
	position: relative;
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background-color: var(--white);
	border: 1.5px solid var(--gold);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.12);
}

.bikotsu-learn-more__icon--book {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC945C' stroke-width='1.5'%3E%3Cpath d='M12 5c-2-1.5-5-2-8-1v14c3-1 6-0.5 8 1c2-1.5 5-2 8-1V4c-3-1-6-0.5-8 1z'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

.bikotsu-learn-more__icon--feather {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC945C' stroke-width='1.5'%3E%3Cpath d='M20 4c-6 0-13 5-15 15c8-1 13-6 15-15z'/%3E%3Cpath d='M5 19l5-5'/%3E%3C/svg%3E");
}

.bikotsu-learn-more__icon--globe {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BC945C' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E");
}

.bikotsu-learn-more__title {
	font-size: 1.05rem;
	color: var(--text);
	margin: 0 0 6px;
}

.bikotsu-learn-more__text {
	font-size: 0.85rem;
	color: var(--text-mid);
}

@media (max-width: 781px) {
	.bikotsu-learn-more .wp-block-columns {
		gap: 40px !important;
	}
}