@charset "UTF-8";
/* =========================================================
   TERUSKAN GYM — main.css
   構成：1.土台 / 2.部品 / 3.ヘッダー / 4.トップ各セクション
        / 5.フッター / 6.タブレット / 7.スマホ
   ========================================================= */

/* =========================================================
   1. 土台
   ========================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	font-family: var(--font-ja);
	color: var(--txt);
	background: var(--paper);
	font-size: 16px;
	line-height: 1.9;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
	padding-bottom: var(--bar-h);
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color .2s, opacity .2s, background-color .2s, border-color .2s; }
a:hover { opacity: .82; }

/* 本文中の画像暴走防止（移行記事に width="95%" 等が残っていても崩さない） */
.entry-content img, .page-content img { max-width: 100%; height: auto; }

.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 40px, var(--container-narrow)); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

:where(a, button, summary, input, textarea, select):focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 2px;
}

.sp-only { display: none; }

/* reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================
   2. 共通部品
   ========================================================= */

/* --- セクション見出し --- */
.sec-en {
	font-family: var(--font-en);
	font-size: clamp(38px, 6vw, 64px);
	line-height: 1;
	letter-spacing: .02em;
	text-align: center;
	color: var(--paper-3);
	margin-bottom: -.34em;
	user-select: none;
}
.sec-en--light { color: rgba(255, 255, 255, .1); }

.sec-h {
	position: relative;
	text-align: center;
	font-size: clamp(23px, 3.6vw, 34px);
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: .02em;
	margin-bottom: 14px;
}
.sec-h em { font-style: normal; color: var(--red); font-size: 1.35em; padding: 0 .08em; }
.sec-h--light { color: #fff; }
.sec-h--light em { color: var(--gold-2); }
.sec-h--left { text-align: left; }

.sec-h::after {
	content: "";
	display: block;
	width: 56px; height: 4px;
	margin: 18px auto 0;
	background: linear-gradient(90deg, var(--red), var(--red-2));
	border-radius: 2px;
}
.sec-h--left::after { margin-inline: 0; }

.sec-lead {
	text-align: center;
	color: var(--muted);
	font-size: 15px;
	line-height: 2;
	max-width: 760px;
	margin: 0 auto 40px;
}

.sec-more { text-align: center; margin-top: 44px; }
.sec-more--left { text-align: left; }
.sec-empty {
	text-align: center; color: var(--muted);
	background: var(--paper-2); border: 1px dashed var(--line);
	border-radius: var(--radius); padding: 34px 20px;
}

/* --- ボタン --- */
.btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 13px 26px;
	border-radius: var(--radius-pill);
	font-weight: 900;
	font-size: 15px;
	line-height: 1.35;
	text-align: center;
	border: 2px solid transparent;
	white-space: nowrap;
}
.btn small { font-size: 11px; font-weight: 700; opacity: .85; letter-spacing: .02em; }
.btn b { font-weight: 900; }
.btn--lg { padding: 17px 36px; font-size: 17px; min-width: 250px; }

.btn--cta {
	background: linear-gradient(135deg, var(--red-3), var(--red) 45%, var(--red-2));
	color: #fff;
	box-shadow: var(--shadow-red);
}
.btn--cta:hover { opacity: 1; filter: brightness(1.07); }

.btn--line { background: var(--line-green); color: #fff; box-shadow: 0 10px 26px rgba(6, 199, 85, .3); }
.btn--line:hover { opacity: 1; filter: brightness(1.06); }

.btn--white { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; opacity: 1; }
.btn--outline-w { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; }
.btn--outline-w:hover { background: #fff; color: var(--ink); opacity: 1; }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.btn--ghost:hover { background: var(--ink); color: #fff; opacity: 1; }
.btn--ghost-w { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }

/* --- パンくず（下層ページ用・トップでは出さない） --- */
.breadcrumb { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.breadcrumb__list {
	width: min(100% - 40px, var(--container)); margin-inline: auto;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding: 10px 0; list-style: none; font-size: 12.5px; color: var(--muted);
}
.breadcrumb__item { display: flex; align-items: center; gap: 6px; }
.breadcrumb__link { color: var(--muted); }
.breadcrumb__link:hover { color: var(--red-2); }
.breadcrumb__sep { color: var(--muted-2); }
.breadcrumb__current { color: var(--ink); font-weight: 700; }

/* =========================================================
   3. ヘッダー
   ========================================================= */
/* 黒は「細いトップバー・ヒーローの帯・ビフォーアフター・フッター」だけに絞る。
   ヘッダーから下は白基調＋赤アクセントで、参考デザインの明るさに合わせる。 */
.topbar {
	background: var(--ink);
	color: rgba(255, 255, 255, .82);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}
.topbar__in { display: flex; gap: 22px; align-items: center; justify-content: center; height: 34px; overflow: hidden; }
.topbar__item { position: relative; white-space: nowrap; }
.topbar__item + .topbar__item::before {
	content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
	width: 1px; height: 11px; background: rgba(255, 255, 255, .25);
}
.topbar__item b { color: var(--gold-2); font-weight: 900; }
.topbar__item--hl {
	background: linear-gradient(120deg, var(--red-2), var(--red) 60%, var(--red-3));
	color: #fff; padding: 3px 14px; border-radius: var(--radius-pill);
}
.topbar__item--hl + .topbar__item::before { display: none; }

.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(140%) blur(6px);
	border-bottom: 1px solid var(--line);
}
.site-header.is-stuck { box-shadow: 0 6px 22px rgba(17, 18, 20, .10); }

.hdr__in { display: flex; align-items: center; gap: 20px; height: var(--hdr-h); }

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* ★縦長のロゴ画像を入れられてもヘッダーが崩れないよう、高さと幅の両方を縛る。
   高さだけ縛ると横長ロゴがはみ出し、幅だけ縛ると縦長ロゴがヘッダーを押し広げる。 */
.logo__img { max-height: 46px; max-width: 230px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 767px) { .logo__img { max-height: 36px; max-width: 168px; } }
.logo__mark {
	display: grid; place-items: center;
	width: 40px; height: 40px; border-radius: 9px;
	font-family: var(--font-en); font-size: 24px; color: var(--ink);
	background: linear-gradient(140deg, var(--gold-2), var(--gold));
}
.logo__txt { display: flex; flex-direction: column; line-height: 1.15; }
.logo__en { font-family: var(--font-en); font-size: 21px; letter-spacing: .04em; color: var(--ink); }
.logo__ja { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .06em; }

.nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav > a {
	color: var(--txt);
	font-size: 13.5px; font-weight: 700; letter-spacing: .01em;
	position: relative; padding: 6px 0; white-space: nowrap;
}
.nav > a::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
	background: var(--red); transition: width .22s;
}
.nav > a:hover { opacity: 1; }
.nav > a:hover::after, .nav > a.is-current::after { width: 100%; }
.nav__foot { display: none; }

.hdr__cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* ★2026-09-11 吉田さん指摘「ハンバーガーがもっと右では？」。
     PCでは .nav の margin-left:auto が右へ押していたが、1023px以下は .nav が
     position:fixed で横並びから抜けるため、押す要素が無くなりロゴの隣に寄っていた。 */
@media (max-width: 1023px) { .hdr__cta { margin-left: auto; } }
.hdr__tel { display: flex; flex-direction: column; line-height: 1.2; color: var(--ink); text-align: right; }
.hdr__tel small { font-size: 10px; color: var(--muted); font-weight: 700; }
.hdr__tel b { font-family: var(--font-en); font-size: 19px; letter-spacing: .02em; }
.hdr__cta .btn { padding: 10px 18px; font-size: 13px; }

.burger { display: none; width: 44px; height: 44px; background: transparent; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .25s, opacity .25s; }

/* =========================================================
   4-1. ヒーロー
   ========================================================= */
/* ★メインビジュアルは画像だけ。キャッチ・価格は画像に焼き込まれるので
   object-fit で切らず、比率のまま全幅で出す（切ると文字が欠ける）。 */
.hero { background: var(--paper); line-height: 0; }
.hero__media { display: block; }
.hero__media img { width: 100%; height: auto; display: block; }

/* 画像が未設定のあいだのプレースホルダー */
.hero__ph {
	display: flex; align-items: center; justify-content: center; gap: 18px;
	aspect-ratio: 2 / 1; line-height: 1.4;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 14px, transparent 14px 28px),
		linear-gradient(150deg, #24272c, #131417);
	color: rgba(255, 255, 255, .5);
}
.hero__ph-mark {
	display: grid; place-items: center; width: 68px; height: 68px; border-radius: 16px;
	font-family: var(--font-en); font-size: 38px; color: var(--ink);
	background: linear-gradient(140deg, var(--gold-2), var(--gold));
}
.hero__ph-txt { font-family: var(--font-en); font-size: clamp(20px, 3vw, 34px); letter-spacing: .14em; }
.head__ph-txt small, .hero__ph-txt small {
	display: block; font-family: var(--font-ja); font-size: 12px;
	letter-spacing: .06em; color: rgba(255, 255, 255, .38); margin-top: 4px;
}
@media (max-width: 767px) { .hero__ph { aspect-ratio: 3 / 4; flex-direction: column; gap: 12px; } }

/* =========================================================
   4-1b. H1 ＋ 最初のCTA（メインビジュアルの直下）
   ========================================================= */
.s-lead {
	position: relative;
	background:
		radial-gradient(900px 460px at 88% 6%, rgba(232, 53, 78, .12), transparent 62%),
		radial-gradient(700px 420px at 6% 96%, rgba(201, 162, 39, .13), transparent 60%),
		linear-gradient(175deg, #fff 0%, #fff8f6 62%, var(--paper-2) 100%);
	padding-bottom: clamp(44px, 6vw, 68px);
	overflow: hidden;
}

/* 赤帯。メインビジュアルの直下に水平で置く。
   ★以前は skewY(-1.4deg) で斜めにしていたが、支給のメインビジュアル自体が
     下部に斜めのデザインを持っているため干渉し、画像との境目に
     三角形の隙間ができていた（吉田さんの指摘で発覚）。水平に戻した。 */
.lead__flag {
	background: linear-gradient(100deg, var(--red-2), var(--red) 45%, var(--red-3));
	color: #fff;
	text-align: center;
	font-size: clamp(16px, 2.6vw, 27px);
	font-weight: 900;
	letter-spacing: .02em;
	padding: 17px 20px 19px;
	border-top: 3px solid var(--gold);
	box-shadow: 0 14px 34px rgba(232, 53, 78, .28);
	position: relative;
	z-index: 1;
}
.lead__flag > span { display: inline-block; }
.lead__flag em { font-style: normal; color: var(--gold-2); font-size: 1.34em; margin-left: .1em; }

.lead__in { text-align: center; padding-top: clamp(34px, 4.4vw, 52px); }

/* ＼ ／ で挟むアイキャッチ。エリア名を入れてローカル検索の受け皿にもする */
.lead__eyebrow {
	display: inline-block; position: relative;
	font-size: clamp(12px, 1.5vw, 15px); font-weight: 900; color: var(--red-2);
	letter-spacing: .02em; margin-bottom: 12px; padding: 0 26px;
}
.lead__eyebrow::before, .lead__eyebrow::after {
	content: ""; position: absolute; top: 50%; width: 2px; height: 1.35em;
	background: var(--red); margin-top: -.68em; border-radius: 2px;
}
.lead__eyebrow::before { left: 6px; transform: rotate(-22deg); }
.lead__eyebrow::after { right: 6px; transform: rotate(22deg); }

.lead__h1 {
	font-size: clamp(27px, 5.4vw, 60px);
	font-weight: 900;
	line-height: 1.32;
	letter-spacing: .01em;
	color: var(--ink);
	margin-bottom: 18px;
}
/* 強調語は赤文字＋金のマーカー。
   ※擬似要素を z-index:-1 で敷くとセクションの背景の裏に回って消えるので、
     背景グラデーションで引く。 */
.lead__h1 em {
	font-style: normal;
	color: var(--red);
	white-space: nowrap;
	background: linear-gradient(transparent 62%, rgba(232, 207, 122, .9) 62%);
	padding: 0 4px;
}

.lead__txt {
	font-size: clamp(14px, 1.8vw, 17px);
	font-weight: 700;
	line-height: 1.95;
	color: var(--txt);
	margin-bottom: 26px;
}
/* 3本柱は「×」が行頭・行末に落ちないよう、語ごとに折り返しを禁止する */
.lead__mix { display: block; }
.lead__mix > span { white-space: nowrap; }
.lead__mix b { color: var(--red); font-weight: 900; padding: 0 8px; }
.lead__info { display: block; font-size: .92em; color: var(--muted); margin-top: 2px; }

/* 数字チップ4枚 */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 30px; list-style: none; }
.chip {
	background: #fff;
	border: 2px solid var(--gold);
	border-radius: var(--radius);
	padding: 10px 20px 8px;
	min-width: 152px;
	box-shadow: var(--shadow-sm);
}
.chip__label { display: block; font-size: 11.5px; font-weight: 900; color: var(--muted); letter-spacing: .02em; }
.chip__val { display: block; font-family: var(--font-en); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; color: var(--red); }
.chip__val.is-solo { font-family: var(--font-ja); font-weight: 900; letter-spacing: -.02em; }
.chip__val small { font-family: var(--font-ja); font-size: .34em; font-weight: 900; margin-left: 2px; }

.lead__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn--xl { position: relative; padding: 19px 48px 19px 40px; font-size: 18px; min-width: 290px; border-radius: var(--radius-pill); }
.btn--xl small { font-size: 11.5px; }
/* 予約系のボタンだけ矢印を出して「進む」感じを作る */
.btn--xl.btn--cta::after, .btn--xl.btn--line::after {
	content: ""; position: absolute; right: 24px; top: 50%;
	width: 9px; height: 9px; margin-top: -5px;
	border: solid currentColor; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg);
}

.lead__points {
	display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
	margin-top: 26px; list-style: none;
}
.lead__points li { position: relative; font-size: 13px; font-weight: 900; color: var(--txt); padding-left: 20px; }
.lead__points li::before {
	content: ""; position: absolute; left: 2px; top: .42em;
	width: 6px; height: 11px; border: solid var(--red); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}


/* =========================================================
   4-2b. 入会キャンペーン（特典1〜5）
   ========================================================= */
/* ★キャンペーンはページ内でいちばん強く出す。赤地＋金で祝祭感を作る。 */
.s-campaign {
	position: relative;
	padding: clamp(56px, 7.5vw, 88px) 0 clamp(50px, 7vw, 80px);
	background:
		radial-gradient(700px 380px at 84% 4%, rgba(255, 255, 255, .22), transparent 60%),
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 12px, transparent 12px 26px),
		linear-gradient(150deg, var(--red-2) 0%, var(--red) 46%, var(--red-3) 100%);
	color: #fff;
	text-align: center;
	overflow: hidden;
}

/* 「今月限定」を左右に垂れる金のリボンで飾る */
.cp__cap { margin-bottom: 14px; }
.cp__cap > span {
	position: relative; display: inline-block;
	background: linear-gradient(100deg, var(--gold), var(--gold-2) 50%, var(--gold));
	color: #35290a; font-size: clamp(13px, 1.7vw, 16px); font-weight: 900; letter-spacing: .14em;
	padding: 7px 30px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.cp__cap > span::before, .cp__cap > span::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 16px;
	background: var(--gold);
}
.cp__cap > span::before { left: -16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 55% 50%); }
.cp__cap > span::after { right: -16px; clip-path: polygon(0 0, 100% 0, 45% 50%, 100% 100%, 0 100%); }

.cp__h {
	font-size: clamp(26px, 4.6vw, 46px); font-weight: 900; line-height: 1.32;
	margin-bottom: 18px; color: #fff;
	text-shadow: 0 3px 16px rgba(0, 0, 0, .22);
}

/* 割引額をいちばん大きく見せる */
.cp__hero {
	display: inline-block;
	background: rgba(0, 0, 0, .17);
	border: 2px solid rgba(255, 255, 255, .42);
	border-radius: var(--radius-lg);
	padding: 14px clamp(18px, 3vw, 38px) 16px;
	margin-bottom: 18px;
}
.cp__hero-lead { display: block; font-size: clamp(13px, 1.7vw, 16px); font-weight: 900; letter-spacing: .04em; margin-bottom: 2px; }
.cp__hero-fig { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 2px; line-height: 1; }
.cp__hero-fig b { font-family: var(--font-en); font-size: clamp(34px, 6vw, 68px); color: var(--gold-2); }
.cp__hero-fig small { font-size: clamp(16px, 2.2vw, 24px); font-weight: 900; color: var(--gold-2); margin-right: 4px; }
.cp__hero-tilde { font-size: clamp(20px, 3vw, 34px); font-weight: 900; margin: 0 4px; }
.cp__hero-fig em {
	font-style: normal; font-family: var(--font-en);
	font-size: clamp(26px, 4vw, 48px); color: #fff; margin-left: 8px; letter-spacing: .02em;
}

.cp__lead {
	font-size: 14px; line-height: 1.9; color: rgba(255, 255, 255, .9);
	max-width: 760px; margin: 0 auto 32px;
}

/* 特典は5枚。6カラムのグリッドに2カラムずつ置き、
   下段の2枚だけ開始位置をずらして中央に揃える。 */
.cplist {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
	list-style: none; text-align: left;
}
.cpitem { grid-column: span 2; }
.cpitem:nth-child(4) { grid-column: 2 / span 2; }
.cpitem:nth-child(5) { grid-column: 4 / span 2; }

.cpitem {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 3px solid var(--red);
	border-radius: var(--radius);
	padding: 26px 22px 20px;
	box-shadow: var(--shadow-sm);
}
.cpitem__no {
	position: absolute; top: -13px; left: 18px;
	background: linear-gradient(100deg, var(--gold), var(--gold-2) 50%, var(--gold));
	color: #35290a;
	font-size: 12px; font-weight: 900; letter-spacing: .06em;
	padding: 4px 14px; border-radius: var(--radius-pill);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.cpitem__name { font-size: 16.5px; font-weight: 900; line-height: 1.5; margin-bottom: 8px; color: var(--ink); }
.cpitem__value {
	font-size: clamp(17px, 2.1vw, 21px); font-weight: 900; line-height: 1.4;
	color: var(--red-2); margin-bottom: 8px;
}
.cpitem__note { font-size: 12.5px; line-height: 1.75; color: var(--muted); }

.cp__limit {
	display: inline-block; margin-top: 26px;
	font-size: clamp(13px, 1.7vw, 15.5px); font-weight: 900; color: #fff;
	background: rgba(0, 0, 0, .22); border: 1px dashed rgba(255, 255, 255, .5);
	border-radius: var(--radius-pill); padding: 8px 24px;
}
.cp__limit b { color: var(--gold-2); font-weight: 900; margin-right: 6px; }
.s-campaign .sec-more { margin-top: 30px; }

/* =========================================================
   4-3. 成果報告＋バッジ
   ========================================================= */
.s-proof { background: var(--ink); padding: 0; }
.s-proof .container { width: 100%; max-width: none; padding: 0; }
.proof { display: block; }

.proof__ba {
	background: var(--ink); color: #fff;
	padding: clamp(46px, 6vw, 72px) clamp(20px, 5vw, 60px);
	max-width: 1240px; margin-inline: auto;
}

.proof__h { text-align: center; font-size: clamp(21px, 2.8vw, 30px); font-weight: 900; margin-bottom: 26px; line-height: 1.4; }
.proof__h span { display: block; font-family: var(--font-en); font-size: .72em; color: var(--gold-2); letter-spacing: .1em; margin-top: 4px; }
.proof__h--dark { color: var(--ink); }

.balist { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.balist__item a { display: block; position: relative; border-radius: 10px; overflow: hidden; background: #26292e; }
.balist__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.balist__noimg { display: grid; place-items: center; aspect-ratio: 3 / 4; font-size: 11px; color: rgba(255, 255, 255, .45); font-weight: 700; }
.balist__meta {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, .85) 45%);
	padding: 22px 8px 8px; display: flex; flex-direction: column; gap: 1px; text-align: center;
}
.balist__kg { font-family: var(--font-en); font-size: 22px; color: var(--red-3); line-height: 1; }
.balist__fat { font-size: 11px; font-weight: 900; color: var(--gold-2); }
.balist__meta small { font-size: 10px; color: rgba(255, 255, 255, .7); }

.proof__note { font-size: 11px; color: rgba(255, 255, 255, .55); margin-top: 14px; line-height: 1.7; text-align: center; }
.proof__note--dark { color: var(--muted); }
.proof__more { text-align: center; margin-top: 20px; }
.proof__empty {
	border: 1px dashed rgba(255, 255, 255, .28); border-radius: var(--radius);
	padding: 40px 18px; text-align: center; color: rgba(255, 255, 255, .6); font-size: 14px;
}

/* =========================================================
   4-3b. 実績バッジ（王冠＋月桂冠）
   ★以前は成果報告の右half に置いていて幅が足りず、月桂冠が数字に重なっていた。
     独立セクションにして全幅3カラムにしたことで、支給デザインの見せ方に戻せた。
   ========================================================= */
.s-awards { padding: clamp(50px, 7vw, 82px) 0; background: var(--paper); }
.awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.8vw, 24px); margin-top: 30px; list-style: none; }
.award { text-align: center; }

.award__crown { display: block; width: clamp(34px, 3.4vw, 46px); margin: 0 auto 2px; color: var(--gold); }
.award__crown svg { width: 100%; height: auto; fill: currentColor; display: block; }

/* 数字を左右から月桂冠ではさむ。
   ★弧を2本置くだけだと「かっこ」に見えるので、葉付きの月桂樹をSVGで描いている
     （inc/svg.php の teruskan_svg_laurel）。
   ★display:block だとセル幅いっぱいに広がって離れるので inline-block。 */
.award__num { position: relative; display: inline-block; padding: 12px clamp(34px, 3.4vw, 52px) 14px; }
.award__val { font-size: clamp(30px, 3.8vw, 52px); }
.laurel { position: absolute; top: 0; bottom: 0; width: auto; pointer-events: none; }
.laurel svg, .laurel img { height: 100%; width: auto; display: block; }
.laurel--l { left: 0; }
.laurel--r { right: 0; transform: scaleX(-1); }
/* 数字を月桂冠より前に出す */
.award__val { position: relative; z-index: 1; }

.award__val {
	display: block; font-family: var(--font-en);
	font-size: clamp(34px, 5vw, 62px); line-height: 1.02;
	color: var(--ink); white-space: nowrap;
}
/* ★1文字だけの数字（「0」）は Anton だと字幅が狭すぎて「I」に見えるので和文の極太にする */
.award__val.is-solo { font-family: var(--font-ja); font-weight: 900; letter-spacing: -.02em; }
.award__val small { font-family: var(--font-ja); font-size: .3em; font-weight: 900; margin-left: 3px; letter-spacing: 0; }

.award__label { display: block; font-size: clamp(13px, 1.5vw, 15.5px); font-weight: 900; color: var(--ink); line-height: 1.5; margin-top: 8px; }
.award__note { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.65; margin-top: 4px; }

/* =========================================================
   4-4. お悩み
   ========================================================= */
.s-worries {
	padding: clamp(56px, 8vw, 92px) 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .955), rgba(255, 255, 255, .985));
}
/* 悩んでいる方の写真は見出しの下に中央配置。
   背後に薄いピンクの円を敷いて、切り抜き写真が浮かないようにする。 */
.worries__photo {
	position: relative;
	width: clamp(150px, 14vw, 178px);
	margin: 14px auto 0;
}
/* 切り抜き写真が背景から浮かないよう、足元に楕円のアクセントを敷く */
.worries__photo::before {
	content: "";
	position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
	width: 190%; aspect-ratio: 1 / .42;
	background: radial-gradient(closest-side, rgba(232, 53, 78, .16), rgba(232, 53, 78, 0) 78%);
	z-index: 0;
}
.worries__photo img {
	position: relative; z-index: 1;
	width: 100%; height: auto; display: block;
	filter: drop-shadow(0 14px 26px rgba(17, 18, 20, .14));
}
.worries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.worries__item {
	background: var(--paper-2);
	border-left: 5px solid var(--red);
	border-radius: 8px;
	padding: 15px 16px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.7;
}
.worries__item b { font-weight: 900; color: var(--red-2); }

.solve {
	margin-top: 42px;
	background: #fff;
	color: var(--ink);
	text-align: center;
	border: 3px solid var(--red);
	border-radius: var(--radius-lg);
	padding: 30px 24px;
	font-size: clamp(17px, 2.7vw, 27px);
	font-weight: 900;
	line-height: 1.55;
	position: relative;
	box-shadow: var(--shadow);
}
/* 上向きの三角（お悩み → 解決 のつながり）。枠線の分だけ2枚重ねる */
.solve::before, .solve::after {
	content: ""; position: absolute; left: 50%; transform: translateX(-50%);
	width: 0; height: 0; border-style: solid; border-color: transparent;
}
.solve::before { top: -3px; transform: translate(-50%, -100%); border-width: 18px 18px 0; border-top-color: var(--red); }
.solve::after  { top: -3px; transform: translate(-50%, calc(-100% + 4px)); border-width: 14px 14px 0; border-top-color: #fff; }
.solve__en { display: block; font-family: var(--font-en); font-size: .58em; color: var(--gold); letter-spacing: .12em; margin-bottom: 4px; }
.solve em { font-style: normal; color: var(--red); }

/* =========================================================
   4-5. 選ばれる理由
   ========================================================= */
.s-reason {
	position: relative;
	padding: clamp(56px, 8vw, 92px) 0;
	color: var(--txt);
	background:
		linear-gradient(180deg, rgba(246, 244, 241, .96), rgba(246, 244, 241, .99));
}
@media (hover: none) { .s-reason { background-attachment: scroll; } }

.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; list-style: none; }
/* 理由が奇数個のとき、最後の1枚が片側だけ残って隙間になるので横いっぱいに伸ばす
   （2026-09-03 に「手ぶらでOK」を足して9個になった。増減しても崩れないようにCSS側で吸収） */
.reasons > .reason:last-child:nth-child(odd) { grid-column: 1 / -1; }
.reason {
	position: relative;
	display: grid; grid-template-columns: 74px 1fr; align-items: start; gap: 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 26px 26px 24px 22px;
	box-shadow: var(--shadow-sm);
	transition: transform .25s, box-shadow .25s;
}
.reason:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* 番号を金の丸バッジで大きく出す */
.reason__no {
	display: grid; place-items: center;
	width: 64px; height: 64px; border-radius: 50%;
	background: linear-gradient(140deg, var(--gold-2), var(--gold));
	box-shadow: 0 6px 16px rgba(201, 162, 39, .34);
}
.reason__no b { font-family: var(--font-en); font-size: 28px; line-height: 1; color: #35290a; }
.reason__body { min-width: 0; }
.reason__h { font-size: clamp(17px, 2.1vw, 21px); font-weight: 900; line-height: 1.45; color: var(--ink); }
.reason__sub {
	display: inline-block; margin: 8px 0 12px;
	background: linear-gradient(100deg, var(--red-2), var(--red));
	color: #fff; font-size: 12.5px; font-weight: 900;
	padding: 4px 12px; border-radius: var(--radius-pill);
}
.reason__txt { font-size: 14px; line-height: 1.95; color: var(--muted); }

/* =========================================================
   4-6. サービス3本柱
   ========================================================= */
.s-service { padding: clamp(56px, 8vw, 92px) 0; background: var(--paper); }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; }
.pillar {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .25s, box-shadow .25s;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pillar__media { position: relative; display: block; }
.pillar__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pillar__no {
	position: absolute; left: 0; bottom: 0;
	font-family: var(--font-en); font-size: 30px; line-height: 1; letter-spacing: .04em;
	color: #fff; background: linear-gradient(120deg, var(--red-2), var(--red) 55%, var(--red-3));
	padding: 8px 18px 8px 16px;
}
.pillar__body { padding: 22px 24px 24px; }
.pillar__h { font-size: clamp(17px, 2.1vw, 21px); font-weight: 900; margin-bottom: 6px; line-height: 1.45; color: var(--ink); }
.pillar__tag {
	display: inline-block; font-size: 12px; font-weight: 900; color: var(--red-2);
	background: var(--red-soft); padding: 3px 12px; border-radius: var(--radius-pill); margin-bottom: 10px;
}
.pillar__txt { font-size: 14px; line-height: 1.95; color: var(--muted); }
.pillar__link {
	display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 900;
	color: var(--red-2); border-bottom: 2px solid currentColor; padding-bottom: 1px;
}

/* =========================================================
   4-6b. 動画
   ========================================================= */
.s-movie {
	padding: clamp(56px, 8vw, 92px) 0;
	background: linear-gradient(160deg, #1b1d21, #0e0f11 60%, #1b1d21);
	color: #fff;
}
.movie {
	position: relative; aspect-ratio: 16 / 9; margin-top: 8px;
	border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 3px solid rgba(255, 255, 255, .12);
	background: #000;
}
.movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sec-lead--light { color: rgba(255, 255, 255, .78); }

/* =========================================================
   4-7. 料金
   ========================================================= */
.s-price { padding: clamp(56px, 8vw, 92px) 0; background: var(--paper-2); }

/* --- 通えば通うほどお得（支給の料金表イメージの導入部） --- */
.pricetop {
	position: relative;
	background: linear-gradient(180deg, #fff 0%, var(--red-soft) 100%);
	border: 3px solid var(--red);
	border-radius: var(--radius-lg);
	padding: 30px clamp(20px, 4vw, 44px) 26px;
	text-align: center;
	margin-bottom: 22px;
	box-shadow: var(--shadow-sm);
}
.pricetop__ribbon {
	position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
	background: linear-gradient(120deg, var(--red-2), var(--red) 55%, var(--red-3));
	color: #fff; font-size: clamp(13px, 1.7vw, 16px); font-weight: 900; letter-spacing: .06em;
	padding: 6px 26px; border-radius: var(--radius-pill); white-space: nowrap;
	box-shadow: var(--shadow-red);
}
.pricetop__lead { font-size: clamp(16px, 2.4vw, 25px); font-weight: 900; line-height: 1.5; margin: 6px 0 10px; color: var(--ink); }
.pricetop__figure { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 22px); flex-wrap: wrap; }
.pricetop__seal {
	display: grid; place-items: center; text-align: center;
	width: clamp(88px, 10vw, 116px); aspect-ratio: 1;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--red-3), var(--red) 55%, var(--red-2));
	color: #fff; font-size: clamp(11px, 1.3vw, 13px); font-weight: 900; line-height: 1.45;
	box-shadow: var(--shadow-red);
}
.pricetop__num {
	font-family: var(--font-en); font-size: clamp(52px, 10vw, 108px); line-height: 1;
	color: var(--red); letter-spacing: -.01em;
	/* マーカーは数字にかぶらない細さで（74%だと数字の下半分に重なって読みにくい） */
	background: linear-gradient(transparent 86%, rgba(232, 207, 122, .9) 86%);
	padding: 0 8px;
}
.pricetop__num small { font-family: var(--font-ja); font-size: .3em; font-weight: 900; margin-left: 2px; }

.freerow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 34px; }
.freerow__item {
	background: #fff; border: 2px solid var(--red); border-radius: var(--radius);
	padding: 18px 16px 16px; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.freerow__label { font-size: 13.5px; font-weight: 900; line-height: 1.5; }
.freerow__before { font-size: 14px; font-weight: 900; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.freerow__val { font-family: var(--font-en); font-size: 52px; line-height: 1.05; color: var(--red); }
/* ★単独の「0」は Anton だと縦棒に見えるので和文の極太に切り替える */
.freerow__val.is-solo { font-family: var(--font-ja); font-weight: 900; font-size: 46px; letter-spacing: -.02em; }
.freerow__val small { font-family: var(--font-ja); font-size: .34em; font-weight: 900; margin-left: 2px; }
.freerow__note { font-size: 11.5px; color: var(--muted); font-weight: 700; line-height: 1.6; }
.freerow__item--tax { justify-content: center; gap: 6px; }
.freerow__tax { font-size: clamp(15px, 1.9vw, 19px); font-weight: 900; color: var(--ink); line-height: 1.5; }
.freerow__tax em {
	font-style: normal; color: var(--red);
	background: linear-gradient(transparent 66%, rgba(232, 207, 122, .85) 66%);
	padding: 0 2px;
}

/* --- 料金システムについて（帯付きボックス＋王冠） --- */
.system {
	background: #fff; border: 2px solid var(--red);
	border-radius: var(--radius-lg); overflow: hidden;
	margin-bottom: 26px; box-shadow: var(--shadow-sm);
}
.system__head {
	background: linear-gradient(120deg, var(--red-2), var(--red) 55%, var(--red-3));
	color: #fff; text-align: center; font-weight: 900;
	font-size: clamp(14px, 1.9vw, 18px); letter-spacing: .08em; padding: 9px 16px;
}
.system__body { padding: 22px clamp(18px, 3vw, 34px) 20px; text-align: center; }
.system__crown { display: block; width: 44px; margin: 0 auto 6px; color: var(--gold); }
.system__crown svg { width: 100%; height: auto; fill: currentColor; display: block; }
.system__txt { font-size: clamp(14px, 1.8vw, 17px); font-weight: 700; line-height: 1.85; color: var(--txt); }
.system__txt b { font-weight: 900; color: var(--red-2); }
.system__note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.7; }

/* --- コースカード（左にリボン／中央に価格／右に条件） --- */
.plans { display: grid; gap: 18px; list-style: none; counter-reset: plan; }
.plan {
	position: relative; display: grid; grid-template-columns: 128px 1.15fr 1fr;
	align-items: center; gap: clamp(14px, 2.4vw, 28px);
	background: #fff; border: 2px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 22px clamp(20px, 3vw, 32px) 22px 0;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.plan--feature {
	border-color: var(--gold); border-width: 3px;
	background: linear-gradient(120deg, #fffdf4, #fff 42%);
	box-shadow: var(--shadow);
}

/* 左端の帯（支給デザインの「自分のペースで通いたい方に」のリボン） */
.plan__flag {
	align-self: stretch; display: grid; place-items: center; text-align: center;
	background: linear-gradient(160deg, var(--red-3), var(--red) 50%, var(--red-2));
	color: #fff; font-size: 12.5px; font-weight: 900; line-height: 1.5;
	padding: 18px 12px; margin: -22px 0;
}
.plan--feature .plan__flag { background: linear-gradient(160deg, #3a3d44, var(--ink) 60%); }
.plan--feature .plan__flag::after {
	content: ""; display: block; width: 26px; height: 18px; margin: 8px auto 0;
	background: var(--gold);
	clip-path: polygon(6% 100%, 94% 100%, 100% 22%, 74% 46%, 50% 6%, 26% 46%, 0 22%);
}

.plan__main { min-width: 0; }
.plan__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.plan__no { font-family: var(--font-en); font-size: 22px; color: var(--red); line-height: 1; }
.plan--feature .plan__no { color: var(--gold); }
.plan__name { font-size: clamp(16px, 2vw, 21px); font-weight: 900; line-height: 1.4; color: var(--ink); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; line-height: 1; }
.plan__before { font-size: clamp(15px, 1.8vw, 19px); font-weight: 900; color: var(--muted); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2.5px; }
.plan__arrow { color: var(--red); font-size: 14px; margin: 0 6px; }
.plan__price b { font-family: var(--font-en); font-size: clamp(36px, 5.4vw, 58px); color: var(--red); }
.plan--feature .plan__price b { color: var(--ink); }
.plan__price small { font-size: clamp(16px, 2vw, 21px); font-weight: 900; color: inherit; }
.plan__price small { color: var(--red); }
.plan--feature .plan__price small { color: var(--ink); }

.plan__side { min-width: 0; position: relative; }
.plan__seal {
	display: grid; place-items: center; text-align: center;
	width: 96px; aspect-ratio: 1; border-radius: 50%;
	background: linear-gradient(140deg, var(--gold-2), var(--gold));
	color: #35290a; line-height: 1.15;
	float: right; margin: 0 0 8px 12px;
	box-shadow: 0 8px 20px rgba(201, 162, 39, .35);
}
.plan__seal b { display: block; font-size: 17px; font-weight: 900; }
.plan__seal small { font-size: 12px; font-weight: 900; }
.plan__seal-crown { display: block; width: 24px; margin: 0 auto 1px; color: #35290a; }
.plan__seal-crown svg { width: 100%; height: auto; fill: currentColor; display: block; }

.plan__per {
	display: inline-block; font-size: 13px; font-weight: 900; color: var(--red-2);
	background: var(--red-soft); border-radius: 6px; padding: 6px 12px; margin-bottom: 10px; line-height: 1.5;
}
.plan--feature .plan__per { background: var(--gold-soft); color: #6b5410; }
.plan__notes { list-style: none; display: grid; gap: 5px; }
.plan__notes li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.plan__notes li::before {
	content: ""; position: absolute; left: 4px; top: .5em;
	width: 6px; height: 11px; border: solid var(--red); border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) translateY(-2px);
}
.plan--feature .plan__notes li::before { border-color: var(--gold); }

/* --- 食事改善指導（全コース共通） --- */
.meal {
	display: grid; grid-template-columns: 92px 1fr 84px; align-items: center;
	gap: clamp(14px, 2.4vw, 26px);
	background: #fff; border: 3px solid var(--gold);
	border-radius: var(--radius-lg);
	padding: 22px clamp(20px, 3vw, 34px);
	margin-top: 22px; box-shadow: var(--shadow-sm);
}
.meal__cap {
	display: grid; place-items: center; text-align: center;
	aspect-ratio: 1; border-radius: 50%;
	background: linear-gradient(140deg, var(--red-3), var(--red) 55%, var(--red-2));
	color: #fff; font-size: 13px; font-weight: 900; line-height: 1.4;
}
.meal__h { font-size: clamp(20px, 3vw, 32px); font-weight: 900; line-height: 1.3; color: var(--ink); }
.meal__h b { font-family: var(--font-ja); font-size: 1.45em; color: var(--red); margin-left: 6px; letter-spacing: -.02em; }
.meal__h b small { font-size: .42em; }
.meal__sub {
	display: inline-block; margin: 6px 0 8px;
	background: var(--red-soft); color: var(--red-2);
	font-size: 13px; font-weight: 900; padding: 4px 14px; border-radius: var(--radius-pill);
}
.meal__txt { font-size: 13.5px; line-height: 1.85; color: var(--muted); }
.meal__icon { color: var(--gold); }
.meal__icon svg { width: 100%; height: auto; display: block; }

.offers { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-top: 26px; }
.pair {
	background: #fff; color: var(--txt);
	border-radius: var(--radius-lg); padding: 30px clamp(22px, 3vw, 36px);
	border: 3px solid var(--gold);
	box-shadow: var(--shadow-sm);
}
.pair--sub { border-color: var(--line); }
.pair--sub .pair__cap { background: var(--ink); color: #fff; }
.pair--sub .pair__h em { color: var(--red-2); }
.pair__cap {
	display: inline-block; background: linear-gradient(100deg, var(--gold), var(--gold-2) 50%, var(--gold)); color: #35290a;
	font-size: 12px; font-weight: 900; letter-spacing: .08em;
	padding: 4px 16px; border-radius: var(--radius-pill); margin-bottom: 10px;
}
/* 「乗り換え割 10,000円分プレゼント」が「プレゼン／ト」で割れるのを防ぐ */
.pair__h { font-size: clamp(19px, 3vw, 30px); font-weight: 900; line-height: 1.4; margin-bottom: 14px; text-wrap: balance; }
.pair--sub .pair__h { font-size: clamp(18px, 2.5vw, 26px); }
.pair__h em { font-style: normal; color: var(--red); }
.pair__list { list-style: none; display: grid; gap: 7px; }
.pair__list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.8; color: var(--txt); }
.pair__list li::before {
	content: ""; position: absolute; left: 5px; top: .55em;
	width: 6px; height: 11px; border: solid var(--gold); border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) translateY(-2px);
}
.pair--sub .pair__list li::before { border-color: var(--red); }
.pair__note { font-size: 11.5px; color: var(--muted); margin-top: 12px; }

.compare { margin-top: 40px; text-align: center; }
.compare__cap {
	display: inline-block; background: var(--ink); color: #fff;
	font-size: 12.5px; font-weight: 900; letter-spacing: .06em;
	padding: 5px 20px; border-radius: var(--radius-pill); margin-bottom: 10px;
}
.compare__h { font-size: clamp(19px, 2.6vw, 27px); font-weight: 900; margin-bottom: 18px; color: var(--ink); }
.compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 26px; }
.compare__table {
	width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 0;
	background: #fff; border-radius: var(--radius); overflow: visible;
}
.compare__table th, .compare__table td {
	padding: 15px 10px; text-align: center; font-size: 13.5px;
	border-bottom: 1px solid var(--line);
}
.compare__table thead th { background: var(--ink); color: #fff; font-weight: 900; font-size: 14px; position: relative; }
.compare__table thead th:first-child { background: var(--ink-3); border-radius: var(--radius) 0 0 0; }
.compare__table thead th:last-child { border-radius: 0 var(--radius) 0 0; }
.compare__table tbody th { background: var(--paper-3); font-weight: 900; text-align: left; white-space: nowrap; padding-left: 18px; }
.compare__table tbody tr:last-child th, .compare__table tbody tr:last-child td { border-bottom: 0; }

/* ★当社の列だけを1本の枠で囲って浮かせる（支給デザインの見せ方） */
.compare__table .is-own { background: var(--red-soft); color: var(--red-2); font-weight: 900; font-size: 15px; }
.compare__table thead .is-own {
	background: linear-gradient(120deg, var(--red-2), var(--red) 55%, var(--red-3));
	color: #fff; font-size: 16px;
	box-shadow: 0 -6px 18px rgba(232, 53, 78, .3);
}
.compare__table thead .is-own::after,
.compare__table tbody td.is-own::after {
	content: ""; position: absolute; left: 0; right: 0;
	border-left: 3px solid var(--red); border-right: 3px solid var(--red);
	top: 0; bottom: 0; pointer-events: none;
}
.compare__table tbody td.is-own { position: relative; }
.compare__table thead .is-own { border-radius: 10px 10px 0 0; }
.compare__table thead .is-own::after { border-top: 3px solid var(--red); border-radius: 10px 10px 0 0; }
.compare__table tbody tr:last-child td.is-own::after { border-bottom: 3px solid var(--red); border-radius: 0 0 10px 10px; }

.compare__crown {
	position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
	width: 40px; color: var(--gold);
}
.compare__crown svg { width: 100%; height: auto; fill: currentColor; display: block; }
.compare__note { font-size: 11.5px; color: var(--muted); margin-top: 12px; line-height: 1.7; text-align: center; max-width: 860px; margin-inline: auto; }

/* =========================================================
   4-8. お客様の声
   ========================================================= */
.s-voice { padding: clamp(56px, 8vw, 92px) 0; background: var(--paper); }
.voices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; list-style: none; }
.voice { background: var(--paper-2); border-radius: var(--radius-lg); padding: 26px 24px; position: relative; }
.voice::before {
	content: "“"; position: absolute; top: 6px; right: 20px;
	font-family: var(--font-en); font-size: 76px; line-height: 1; color: rgba(232, 53, 78, .1);
}
.voice__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.voice__img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.voice__img--ph {
	display: grid; place-items: center; background: var(--ink); color: var(--gold-2);
	font-family: var(--font-en); font-size: 34px; line-height: 0.4;
}
.voice__h { font-size: 16.5px; font-weight: 900; line-height: 1.5; }
.voice__who { font-size: 12.5px; font-weight: 700; color: var(--red-2); }
.voice__txt { font-size: 14px; line-height: 1.95; color: var(--muted); }

/* --- Googleクチコミの抜粋 --- */
.gvoice { margin-top: 46px; }
.gvoice__head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
.gvoice__mark {
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
	font-family: var(--font-en); font-size: 26px; line-height: 1;
	background-image: conic-gradient(from -45deg, #ea4335, #fbbc05 90deg, #34a853 190deg, #4285f4 280deg, #ea4335);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.gvoice__title { font-size: 14px; font-weight: 900; color: var(--muted); letter-spacing: .04em; }
.gvoice__score { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gvoice__score b { font-family: var(--font-en); font-size: 34px; line-height: 1; color: var(--ink); }
.gvoice__stars { color: #f5b301; font-size: 17px; letter-spacing: .06em; }
.gvoice__score small { font-size: 12px; font-weight: 700; color: var(--muted); }

.gvlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; }
.gv {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
	padding: 24px 26px 20px; box-shadow: var(--shadow-sm);
	position: relative;
}
.gv__stars { color: #f5b301; font-size: 15px; letter-spacing: .1em; margin-bottom: 6px; }
.gv__head { font-size: 16px; font-weight: 900; line-height: 1.5; color: var(--ink); margin-bottom: 8px; }
.gv__body { font-size: 13.5px; line-height: 1.95; color: var(--muted); }
.gv__name { font-size: 12.5px; font-weight: 900; color: var(--ink); text-align: right; margin-top: 10px; }
.gvoice__note { font-size: 11.5px; color: var(--muted); margin-top: 14px; line-height: 1.7; text-align: center; }

/* --- 料金の直後のCTA --- */
.midcta {
	margin-top: 34px; text-align: center;
	background: linear-gradient(180deg, #fff, var(--red-soft));
	border: 3px solid var(--red); border-radius: var(--radius-lg);
	padding: 32px clamp(18px, 3vw, 40px) 26px;
	box-shadow: var(--shadow-sm);
}
.midcta__lead { font-size: clamp(18px, 2.8vw, 28px); font-weight: 900; line-height: 1.5; color: var(--ink); }
.midcta__lead em { font-style: normal; color: var(--red); font-size: 1.3em; }
.midcta__sub { font-size: 13.5px; color: var(--muted); margin: 8px 0 20px; line-height: 1.8; }
.midcta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.midcta .sec-more { margin-top: 20px; }

/* =========================================================
   4-9. 代表紹介
   ========================================================= */
.s-owner { padding: clamp(56px, 8vw, 92px) 0; background: var(--paper-2); }
.owner { display: grid; grid-template-columns: 380px 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.owner__photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.owner__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.owner__ph {
	display: grid; place-items: center; aspect-ratio: 4 / 5;
	background: linear-gradient(150deg, #24272c, #131417);
	font-family: var(--font-en); font-size: 32px; line-height: 1.25; color: rgba(232, 207, 122, .55);
	text-align: center; letter-spacing: .08em;
	border: 1px solid rgba(201, 162, 39, .3);
}
.owner .sec-en { text-align: left; }
.owner__name { font-size: clamp(22px, 3vw, 30px); font-weight: 900; margin: 14px 0 14px; }
.owner__name small { display: block; font-size: 12.5px; font-weight: 900; color: var(--red-2); letter-spacing: .06em; }
.owner__txt { font-size: 14.5px; line-height: 2; color: var(--muted); margin-bottom: 12px; }
.owner__txt b { color: var(--red-2); font-weight: 900; }
.owner__txt--strong { color: var(--txt); font-weight: 700; }

/* =========================================================
   4-10. 流れ
   ========================================================= */
.s-flow {
	padding: clamp(56px, 8vw, 92px) 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .955), rgba(255, 255, 255, .985));
}
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; }
.flow__step {
	position: relative; background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg); overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.flow__step:not(:last-child)::after {
	content: ""; position: absolute; top: 50%; right: -14px; transform: translateY(-50%);
	border: 10px solid transparent; border-left-color: var(--red); border-right-width: 0;
	z-index: 2;
}
.flow__media { position: relative; display: block; }
.flow__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.flow__no {
	position: absolute; left: 0; bottom: 0;
	display: inline-flex; align-items: baseline; gap: 4px;
	font-family: var(--font-en); font-size: 13px; letter-spacing: .1em;
	color: #fff; background: linear-gradient(120deg, var(--red-2), var(--red) 60%, var(--red-3));
	padding: 7px 18px 7px 16px;
}
.flow__no b { font-size: 21px; }
.flow__body { padding: 20px 24px 24px; }
.flow__h { font-size: clamp(16px, 2vw, 20px); font-weight: 900; margin-bottom: 8px; line-height: 1.45; color: var(--ink); }
.flow__txt { font-size: 14px; line-height: 1.95; color: var(--muted); }

/* =========================================================
   4-11. FAQ
   ========================================================= */
.s-faq { padding: clamp(56px, 8vw, 92px) 0; background: var(--paper-2); }
.faq { display: grid; gap: 12px; }
.faq__item { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.faq__q {
	position: relative; list-style: none; cursor: pointer;
	padding: 18px 56px 18px 56px;
	font-size: 15.5px; font-weight: 900; line-height: 1.6;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before {
	content: "Q"; position: absolute; left: 18px; top: 16px;
	font-family: var(--font-en); font-size: 21px; color: var(--red); line-height: 1.2;
}
.faq__q::after {
	content: ""; position: absolute; right: 22px; top: 50%;
	width: 11px; height: 11px; margin-top: -7px;
	border: solid var(--ink); border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg); transition: transform .25s;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a { position: relative; padding: 0 24px 20px 56px; }
.faq__a::before {
	content: "A"; position: absolute; left: 18px; top: -2px;
	font-family: var(--font-en); font-size: 21px; color: var(--ink-3); line-height: 1.2;
}
.faq__a p { font-size: 14.5px; line-height: 1.95; color: var(--muted); }

/* =========================================================
   4-12. 新着・ブログ
   ========================================================= */
.s-news { padding: clamp(56px, 8vw, 92px) 0; background: var(--paper); }
.newslist { list-style: none; border-top: 1px solid var(--line); }
.newslist__item { border-bottom: 1px solid var(--line); }
.newslist__item a { display: flex; align-items: center; gap: 16px; padding: 17px 6px; }
.newslist__item a:hover { background: var(--paper-2); opacity: 1; }
.newslist__date { font-family: var(--font-en); font-size: 15px; color: var(--muted); letter-spacing: .04em; flex-shrink: 0; }
.newslist__cat {
	flex-shrink: 0; font-size: 11.5px; font-weight: 900; color: #fff;
	background: var(--ink); padding: 3px 12px; border-radius: var(--radius-pill);
}
.newslist__title { font-size: 15px; font-weight: 700; line-height: 1.6; }

/* =========================================================
   4-13. アクセス
   ========================================================= */
.s-access { padding: clamp(56px, 8vw, 92px) 0; background: var(--paper-2); color: var(--txt); }
.access { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: start; }
.access__map { border-radius: var(--radius-lg); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.access__map iframe { width: 100%; height: 420px; display: block; }
.access__mapph {
	display: grid; place-items: center; aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, #fff, #fff 12px, var(--paper-3) 12px, var(--paper-3) 24px);
	color: var(--ink); font-weight: 900; font-size: 15px; text-align: center; line-height: 1.7;
}
.access__dl { display: grid; gap: 0; background: #fff; border-radius: var(--radius-lg); padding: 6px 22px; box-shadow: var(--shadow-sm); }
.access__dl > div { display: grid; grid-template-columns: 108px 1fr; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.access__dl > div:last-child { border-bottom: 0; }
.access__dl dt { font-size: 13px; font-weight: 900; color: var(--red-2); }
.access__dl dd { font-size: 14px; line-height: 1.8; color: var(--txt); }
.access__dl dd a { border-bottom: 1px solid var(--line); }

/* 駅から店舗までの道順 */
.route { margin-top: clamp(30px, 4vw, 48px); }
.route__h { text-align: center; font-size: clamp(17px, 2.3vw, 23px); font-weight: 900; color: var(--ink); margin-bottom: 20px; }
.route__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; list-style: none; }
.route__step { position: relative; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); padding-bottom: 16px; }
/* 順路をつなぐ矢印 */
.route__step:not(:last-child)::after {
	content: ""; position: absolute; top: 34%; right: -13px; z-index: 2;
	border: 9px solid transparent; border-left-color: var(--red); border-right-width: 0;
}
.route__media { position: relative; display: block; }
.route__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.route__no {
	position: absolute; left: 12px; top: 12px;
	display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
	background: linear-gradient(140deg, var(--red-3), var(--red) 55%, var(--red-2));
	color: #fff; font-family: var(--font-en); font-size: 20px; line-height: 1;
	box-shadow: var(--shadow-red);
}
.route__cap { display: block; font-size: 14.5px; font-weight: 900; color: var(--ink); line-height: 1.55; padding: 14px 18px 0; }
.route__note { display: block; font-size: 12px; color: var(--muted); line-height: 1.7; padding: 5px 18px 0; }

/* =========================================================
   5. 最終CTA・フッター・SP固定バー
   ========================================================= */
.finalcta {
	position: relative;
	background:
		linear-gradient(120deg, rgba(198, 27, 52, .93), rgba(232, 53, 78, .90) 50%, rgba(255, 90, 112, .90));
	color: #fff;
	padding: clamp(54px, 7.5vw, 88px) 0;
	text-align: center;
	overflow: hidden;
}
.finalcta::before {
	content: ""; position: absolute; inset: 0;
	background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 14px, transparent 14px 30px);
	pointer-events: none;
}
.finalcta__in { position: relative; }
.finalcta__cap {
	display: inline-block; background: #fff; color: var(--red-2);
	font-size: clamp(13px, 1.7vw, 16px); font-weight: 900; padding: 6px 24px;
	border-radius: var(--radius-pill); margin-bottom: 14px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.finalcta__cap span { font-size: 1.3em; }
.finalcta__h {
	font-size: clamp(22px, 3.6vw, 38px); font-weight: 900; line-height: 1.35; margin-bottom: 6px;
	text-shadow: 0 3px 16px rgba(0, 0, 0, .25);
}
/* 「無料」をいちばん大きく出す */
.finalcta__free { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.finalcta__free b {
	font-size: clamp(46px, 9vw, 96px); font-weight: 900; line-height: 1; color: var(--gold-2);
	letter-spacing: .04em; text-shadow: 0 4px 22px rgba(0, 0, 0, .3);
}
.finalcta__free small {
	font-family: var(--font-en); font-size: clamp(20px, 3vw, 34px);
	background: #fff; color: var(--red-2); padding: 6px 16px; border-radius: var(--radius-pill);
}
.finalcta__lead { font-size: 15px; font-weight: 700; line-height: 1.9; margin-bottom: 26px; color: rgba(255, 255, 255, .95); }
.finalcta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.finalcta__points { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; margin-top: 28px; list-style: none; }
.finalcta__points li { position: relative; font-size: 13px; font-weight: 900; padding-left: 20px; }
.finalcta__points li::before {
	content: ""; position: absolute; left: 2px; top: .42em;
	width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

.site-footer { background: var(--ink); color: rgba(255, 255, 255, .8); padding: clamp(44px, 6vw, 66px) 0 0; }
.footer__in { display: grid; grid-template-columns: 320px 1fr; gap: clamp(28px, 4vw, 56px); }
.footer__logo b { display: block; font-family: var(--font-en); font-size: 27px; color: #fff; letter-spacing: .04em; }
.footer__logo small { display: block; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .55); margin-top: 2px; }
.footer__addr { font-style: normal; font-size: 13.5px; line-height: 2; margin-top: 16px; color: rgba(255, 255, 255, .7); }
.footer__sns { display: flex; gap: 10px; margin-top: 16px; list-style: none; }
.footer__sns a {
	display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: .04em;
	border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-pill); padding: 5px 16px;
}
.footer__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer__h { font-size: 13px; font-weight: 900; color: var(--gold-2); margin-bottom: 10px; letter-spacing: .04em; }
.footer__col ul { list-style: none; display: grid; gap: 8px; }
.footer__col a { font-size: 13.5px; color: rgba(255, 255, 255, .74); }
.footer__col a:hover { color: #fff; opacity: 1; }
.copyright {
	margin-top: 40px; padding: 16px 0; text-align: center;
	font-size: 11.5px; color: rgba(255, 255, 255, .45);
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.spbar { display: none; }

/* =========================================================
   PC用の追従CTA（メインビジュアルを過ぎたら右下に出る）
   ========================================================= */
.floatcta {
	position: fixed; right: 18px; bottom: 18px; z-index: 95;
	display: none; flex-direction: column; gap: 8px; width: 186px;
	background: rgba(255, 255, 255, .97);
	border: 2px solid var(--red);
	border-radius: var(--radius-lg);
	padding: 12px;
	box-shadow: 0 18px 44px rgba(17, 18, 20, .22);
	opacity: 0; transform: translateY(12px);
	transition: opacity .3s, transform .3s;
	pointer-events: none;
}
.floatcta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.floatcta__cap { text-align: center; font-size: 12px; font-weight: 900; color: var(--ink); line-height: 1.4; }
.floatcta__cap b { color: var(--red); font-size: 1.35em; }
.floatcta__btn {
	display: block; text-align: center; border-radius: var(--radius-pill);
	font-size: 13.5px; font-weight: 900; padding: 11px 8px; color: #fff;
}
.floatcta__btn--line { background: var(--line-green); }
.floatcta__btn--cta { background: linear-gradient(135deg, var(--red-3), var(--red) 45%, var(--red-2)); }
.floatcta__btn:hover { opacity: 1; filter: brightness(1.07); }
.floatcta__tel {
	text-align: center; font-family: var(--font-en); font-size: 17px;
	color: var(--ink); letter-spacing: .01em;
}
@media (min-width: 768px) { .floatcta { display: flex; } }
@media (prefers-reduced-motion: reduce) { .floatcta { transition: none; } }

/* =========================================================
   6. タブレット（768〜1023px）
      ここはPC用CSSが当たって崩れる帯。スコープを閉じて上書きする。
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
	.hdr__tel { display: none; }
	.hdr__cta .btn--line { display: none; }

	/* ナビ7項目＋CTAが折り返すので、この幅からバーガーに格納する */
	.nav {
		position: fixed; inset: var(--hdr-h) 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; padding: 8px 20px 24px;
		max-height: calc(100vh - var(--hdr-h)); overflow-y: auto;
		transform: translateY(-12px); opacity: 0; pointer-events: none;
		transition: opacity .2s, transform .2s;
		border-top: 1px solid var(--line);
		box-shadow: 0 18px 40px rgba(17, 18, 20, .16);
	}
	.nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
	.nav > a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
	.nav > a::after { display: none; }
	.nav__foot { display: grid; gap: 10px; margin-top: 18px; }
	.nav__tel { font-family: var(--font-en); font-size: 24px; color: var(--ink); text-align: center; }
	.burger { display: block; }

	.awards { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
	.balist { grid-template-columns: repeat(3, 1fr); }
	/* タブレットは「帯｜コース名と価格」の2列にして、条件は下段へ回す */
	.plan { grid-template-columns: 110px 1fr; align-items: start; }
	.plan__side { grid-column: 2 / -1; }
	.plan__flag { margin: -22px 0; }
	.cplist { grid-template-columns: repeat(4, 1fr); }
	.cpitem { grid-column: span 2; }
	.cpitem:nth-child(4) { grid-column: 1 / span 2; }
	.cpitem:nth-child(5) { grid-column: 3 / span 2; }
	.offers { grid-template-columns: 1fr; }
	.owner { grid-template-columns: 300px 1fr; }
	.footer__in { grid-template-columns: 1fr; }
	.footer__nav { grid-template-columns: repeat(4, 1fr); }
	.access { grid-template-columns: 1fr; }
	.access__map iframe { height: 340px; }
}

/* 1180px以下はナビを詰めて折り返しを防ぐ */
@media (max-width: 1180px) and (min-width: 1024px) {
	.nav { gap: 13px; }
	.nav > a { font-size: 12.5px; }
	.hdr__cta .btn { padding: 9px 14px; font-size: 12px; }
	.hdr__tel b { font-size: 17px; }
}

/* =========================================================
   7. スマホ（〜767px）
   ========================================================= */
@media (max-width: 767px) {
	body { font-size: 15px; line-height: 1.85; }
	.container { width: min(100% - 32px, var(--container)); }
	.sp-only { display: inline; }

	/* --- ヘッダー --- */
	.topbar__in { height: auto; padding: 6px 0; gap: 12px; font-size: 10.5px; overflow-x: auto; justify-content: flex-start; }
	.topbar__item { flex-shrink: 0; }
	.topbar__item + .topbar__item::before { left: -6px; }

	.hdr__in { gap: 10px; }
	.logo__mark { width: 34px; height: 34px; font-size: 20px; }
	.logo__en { font-size: 17px; }
	.logo__ja { font-size: 9px; }
	.hdr__tel { display: none; }
	.hdr__cta .btn { display: none; }
	.burger { display: block; margin-right: -10px; }

	/* ★2026-09-11 内山さん指摘「三本線（メニュー）の字の色が見づらい」。
	     背景が黒（--ink）のまま、文字色は白基調に振り直したときの --txt（濃い色）になっていて
	     黒地に濃い文字＝ほぼ読めなかった。タブレットと同じ白地・濃い文字に揃えた。 */
	.nav {
		position: fixed; inset: var(--hdr-h) 0 auto 0;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; padding: 8px 20px 28px;
		max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto;
		transform: translateY(-12px); opacity: 0; pointer-events: none;
		transition: opacity .2s, transform .2s;
		border-top: 1px solid var(--line);
		box-shadow: 0 18px 40px rgba(17, 18, 20, .16);
	}
	.nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
	.nav > a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
	.nav > a::after { display: none; }
	.nav__foot { display: grid; gap: 10px; margin-top: 18px; }
	.nav__tel { font-family: var(--font-en); font-size: 26px; color: var(--ink); text-align: center; }
	.nav__cta { width: 100%; }

	/* --- ヒーロー --- */
	/* --- メインビジュアル ＋ H1ブロック --- */
	/* ★1行に収まらず「無料」が「無／料」に割れていた。2行に分けて中央で組む */
	.lead__flag { font-size: 15px; padding: 13px 14px 15px; line-height: 1.5; border-top-width: 2px; }
	.lead__flag em { display: inline-block; margin-left: 0; margin-top: 2px; font-size: 1.6em; }

	.lead__in { padding-top: 26px; }
	/* ★＼／ は1行のときだけ成立する。2行になる幅では枠付きのバッジに切り替える */
	.lead__eyebrow {
		font-size: 11.5px; line-height: 1.65; padding: 6px 16px;
		background: #fff; border: 1.5px solid var(--red); border-radius: 14px;
	}
	.lead__eyebrow::before, .lead__eyebrow::after { display: none; }

	.lead__mix { font-size: 13.5px; }
	.lead__mix > span { display: block; }
	.lead__mix b { display: block; padding: 0; font-size: .9em; line-height: 1.2; }
	.lead__info { font-size: 12px; line-height: 1.8; margin-top: 8px; }
	/* ★「小岩のパーソナルジムで、／一生モノのカラダと習慣を。」を必ず2行に収める。
	   固定pxだと360px幅で「を。」だけが3行目に落ちるので、画面幅に追従させる。 */
	.lead__h1 { font-size: clamp(22px, 6.2vw, 27px); line-height: 1.4; letter-spacing: -.01em; }
	.lead__txt { font-size: 13.5px; line-height: 1.95; margin-bottom: 22px; }
	.chips { gap: 8px; }
	.chip { min-width: 0; flex: 1 1 calc(50% - 4px); padding: 9px 10px 7px; border-width: 1.5px; }
	.chip__label { font-size: 10.5px; }
	.chip__val { font-size: 27px; }
	.lead__cta { display: grid; gap: 10px; }
	.lead__cta .btn { width: 100%; min-width: 0; }
	/* 右の余白は矢印の分を残す（詰めると説明文が矢印に重なる） */
	.btn--xl { padding: 16px 36px 16px 20px; font-size: 16px; }
	.btn--xl.btn--cta::after, .btn--xl.btn--line::after { right: 16px; }
	.lead__points { gap: 8px 16px; }
	.lead__points li { font-size: 12px; }

	/* --- 実績バッジ・成果報告 --- */
	.awards { grid-template-columns: repeat(2, 1fr); gap: 24px 10px; margin-top: 24px; }
	.award__num { padding: 8px 30px 10px; }
	.award__val { font-size: 30px; }
	.award__label { font-size: 12.5px; }
	.award__note { font-size: 10.5px; }
	.award__crown { width: 30px; }

	.proof__ba { padding: 40px 16px 36px; }
	.balist { grid-template-columns: repeat(2, 1fr); gap: 8px; }

	/* --- 各セクション 1〜2カラム化 --- */
	.worries__photo { width: 132px; margin-top: 10px; }
	.worries { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
	.worries__item { font-size: 13.5px; padding: 12px 14px; }
	.solve { padding: 24px 18px; font-size: 18px; }

	.reasons { grid-template-columns: 1fr; }
	.reason { padding: 22px 18px 20px; }
	.reason__no { font-size: 34px; top: 12px; right: 14px; }
	.reason__h { font-size: 17px; padding-right: 38px; }

	.pillars { grid-template-columns: 1fr; gap: 16px; }
	.pillar__body { padding: 18px 18px 20px; }
	.pillar__no { font-size: 24px; padding: 6px 14px; }

	.movie { border-width: 2px; }

	.reason { grid-template-columns: 54px 1fr; gap: 14px; padding: 20px 18px 20px 16px; }
	.reason__no { width: 48px; height: 48px; }
	.reason__no b { font-size: 21px; }
	.reason__h { font-size: 17px; }

	.flow__body { padding: 18px 18px 20px; }
	.flow__no { font-size: 12px; padding: 6px 14px; }
	.flow__no b { font-size: 18px; }

	.route__list { grid-template-columns: 1fr; gap: 22px; }
	.route__step:not(:last-child)::after {
		top: auto; bottom: -16px; right: 50%; transform: translateX(50%);
		border-left-color: transparent; border-top-color: var(--red);
		border-width: 9px; border-bottom-width: 0;
	}
	.gvlist { grid-template-columns: 1fr; gap: 12px; }
	.gv { padding: 20px 18px 16px; }
	.gvoice__head { gap: 10px; }
	.gvoice__score b { font-size: 28px; }
	.midcta { padding: 26px 16px 22px; }
	.midcta__btns { display: grid; gap: 10px; }
	.midcta__btns .btn { width: 100%; min-width: 0; }

	.compare__scroll { padding-top: 22px; }
	.compare__crown { width: 32px; top: -22px; }

	.finalcta__free { gap: 10px; }
	.finalcta__free small { padding: 5px 12px; }

	.pricetop { padding: 26px 16px 22px; }
	.pricetop__lead { font-size: 17px; }
	.pricetop__figure { gap: 10px; }
	.pricetop__num { font-size: 58px; }

	.freerow { grid-template-columns: 1fr; gap: 10px; }
	.freerow__item { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px; padding: 14px 14px; text-align: center; }
	.freerow__label { font-size: 13px; }
	.freerow__val { font-size: 40px; }
	.freerow__val.is-solo { font-size: 36px; }
	.freerow__note { flex-basis: 100%; }

	.system__body { padding: 18px 16px 16px; }
	.system__txt { font-size: 14px; }

	/* コースカードは縦積みに。左の帯は上の帯に変える */
	.plans { gap: 20px; }
	.plan {
		grid-template-columns: 1fr; gap: 12px;
		padding: 0 18px 20px; text-align: center;
	}
	.plan__flag { margin: 0 -18px; padding: 9px 12px; font-size: 12px; }
	.plan--feature .plan__flag::after { display: inline-block; margin: 4px 0 0 8px; vertical-align: -3px; }
	.plan__head { justify-content: center; gap: 8px; }
	.plan__price { justify-content: center; }
	.plan__price b { font-size: 42px; }
	.plan__side { display: flex; flex-direction: column; align-items: center; }
	.plan__seal { float: none; margin: 0 0 10px; width: 88px; }
	.plan__notes { text-align: left; }

	.meal { grid-template-columns: 1fr; gap: 14px; text-align: center; padding: 22px 18px; }
	.meal__cap { width: 84px; aspect-ratio: 1; margin: 0 auto; }
	.meal__icon { display: none; }
	.meal__txt { text-align: left; }

	.cplist { grid-template-columns: 1fr; gap: 22px; }
	.cpitem, .cpitem:nth-child(4), .cpitem:nth-child(5) { grid-column: 1 / -1; }
	.cpitem { padding: 24px 18px 18px; }
	.cp__lead { font-size: 13.5px; margin-bottom: 30px; }
	.cp__limit { font-size: 12.5px; }

	.offers { grid-template-columns: 1fr; gap: 14px; }
	.pair { padding: 26px 18px; }
	.compare__table { min-width: 560px; }
	.compare__table th, .compare__table td { padding: 10px 7px; font-size: 12px; }
	.compare__table tbody th { font-size: 11.5px; }

	.voices { grid-template-columns: 1fr; }
	.voice { padding: 22px 18px; }

	.owner { grid-template-columns: 1fr; gap: 24px; }
	.owner__photo { max-width: 300px; margin-inline: auto; }
	.owner .sec-en, .owner .sec-h--left { text-align: center; }
	.owner .sec-h--left::after { margin-inline: auto; }
	.owner__name { text-align: center; }
	.sec-more--left { text-align: center; }

	.flow { grid-template-columns: 1fr; gap: 26px; }
	.flow__step { padding: 24px 20px 22px; }
	.flow__step:not(:last-child)::after {
		top: auto; bottom: -19px; right: 50%; transform: translateX(50%);
		border-left-color: transparent; border-top-color: var(--red);
		border-width: 9px; border-bottom-width: 0;
	}

	.faq__q { padding: 15px 46px 15px 46px; font-size: 14.5px; }
	.faq__q::before { left: 14px; top: 14px; font-size: 18px; }
	.faq__a { padding: 0 18px 18px 46px; }
	.faq__a::before { left: 14px; font-size: 18px; }

	.newslist__item a { flex-wrap: wrap; gap: 6px 10px; padding: 14px 4px; }
	.newslist__title { flex-basis: 100%; font-size: 14px; }

	.access { grid-template-columns: 1fr; }
	.access__map iframe { height: 280px; }
	.access__dl > div { grid-template-columns: 88px 1fr; gap: 10px; padding: 12px 2px; }
	.access__dl dt { font-size: 12px; }
	.access__dl dd { font-size: 13.5px; }

	/* --- 最終CTA・フッター --- */
	.finalcta { padding: 44px 0; }
	.finalcta__btns { display: grid; gap: 10px; }
	.finalcta__btns .btn { width: 100%; min-width: 0; }
	.finalcta__points { gap: 8px 16px; }
	.finalcta__points li { font-size: 12px; }

	.footer__in { grid-template-columns: 1fr; gap: 28px; }
	.footer__nav { grid-template-columns: repeat(2, 1fr); gap: 20px; }

	/* --- スマホ固定CTAバー --- */
	/* ★3つとも同じ幅・同じ文字サイズに揃える（前は1:1:1.6でバラバラだった） */
	.spbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
		display: grid; grid-template-columns: repeat(3, 1fr);
		height: var(--bar-h);
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--ink);
		border-top: 1px solid rgba(255, 255, 255, .12);
	}
	.spbar__btn {
		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		color: #fff; line-height: 1.25; text-align: center;
	}
	.spbar__btn b { font-size: 13.5px; font-weight: 900; }
	.spbar__btn small { font-size: 9.5px; font-weight: 700; opacity: .82; }
	.spbar__btn--tel { background: var(--ink-3); }
	.spbar__btn--line { background: var(--line-green); }
	.spbar__btn--cta { background: linear-gradient(120deg, var(--red-2), var(--red) 55%, var(--red-3)); font-size: 14px; }
}

/* 極小幅（〜359px）のはみ出し防止 */
@media (max-width: 359px) {
	.lead__flag { font-size: 14.5px; }
	.chip__label { font-size: 9.5px; }
	.chip__val { font-size: 24px; }
	.spbar__btn { font-size: 11px; }
	.spbar__btn--cta { font-size: 12.5px; }
}

/* =========================================================
   下層ページ共通
   （記事 / お客様の声 / 成果報告 の一覧・個別、検索結果、404）
   ★2026-09-01 追加。それまでトップ以外はCSSが1つも無く、素のHTMLで表示されていた。
   ★色はトップと同じ「白基調＋赤アクセント」。黒は使わない。
   ========================================================= */

.section { padding: clamp(44px, 5.5vw, 84px) 0; }

/* --- 下層の見出しエリア --- */
.page-hero {
	position: relative; overflow: hidden;
	background: var(--paper-2); border-bottom: 1px solid var(--line);
	padding: clamp(32px, 4.4vw, 60px) 0 clamp(26px, 3.6vw, 44px);
}
.page-hero__aurora {
	position: absolute; right: -8%; bottom: -70%;
	width: min(72vw, 700px); aspect-ratio: 1 / 1; pointer-events: none;
	background: radial-gradient(closest-side, rgba(232, 53, 78, .13), transparent 72%);
}
.page-hero .container { position: relative; }
.page-hero__eyebrow {
	display: block; font-family: var(--font-en); font-size: 13px;
	letter-spacing: .16em; color: var(--red);
}
.page-hero h1 { font-size: clamp(23px, 3.2vw, 36px); font-weight: 900; line-height: 1.38; margin-top: 6px; }
.page-hero > .container > p { margin-top: 12px; font-size: 15px; line-height: 1.95; color: var(--muted); }

/* --- 記事メタ（日付・カテゴリ・年代など） --- */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.pm-mod { color: var(--muted-2); }
.cat-badge {
	display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill);
	background: var(--red-soft); color: var(--red-2); font-size: 12px; font-weight: 700;
}
a.cat-badge:hover { background: var(--red); color: #fff; }

/* --- 一覧カード --- */
.col-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; }
.ccard {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
	box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, transform .3s ease;
}
.ccard:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.ccard__media { display: block; }
/* ★aspect-ratio の枠に height:100% の img を入れると Safari だけ写真が消えるので padding-top で組む */
.ccard .thumb { position: relative; padding-top: 64%; overflow: hidden; background: var(--paper-3); }
.ccard .thumb img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* 成果報告は切り取ると意味がなくなるので全体を見せる */
.ccard--result .thumb { padding-top: 76%; background: var(--paper-2); }
.ccard--result .thumb img { object-fit: contain; }
.ccard .imgslot { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-2); }
.ccard .imgslot .ic { font-size: 26px; }
.ccard .body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; }
.ccard .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--muted); }
.ccard .meta .c { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--red-soft); color: var(--red-2); font-weight: 700; }
.ccard .meta .c--plain { background: var(--paper-2); color: var(--muted); }
.ccard h3 { font-size: 16.5px; font-weight: 900; line-height: 1.55; }
.ccard h3 a:hover { color: var(--red-2); }
.ccard__ex { font-size: 13.5px; line-height: 1.9; color: var(--muted); }

/* --- カテゴリの絞り込み（.chip はトップの料金チップと同名なので全部上書きする） --- */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cat-chips .chip {
	display: inline-flex; align-items: center; padding: 7px 16px; min-width: 0;
	border: 1px solid var(--line); border-radius: var(--radius-pill);
	background: var(--paper); box-shadow: none;
	font-size: 13px; font-weight: 700; color: var(--muted); text-align: left;
}
.cat-chips .chip:hover { border-color: var(--red); color: var(--red-2); }
.cat-chips .chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.cat-chips .chip__n { margin-left: 6px; font-size: 11px; font-weight: 700; opacity: .7; }
/* SPではトップの料金チップ用の「2列に広げる」指定（flex: 1 1 50%）が効いてしまうので打ち消す */
.cat-chips .chip { flex: 0 0 auto; white-space: nowrap; }
/* ブログ一覧（home.php）はカード見出しを h2 にしている（ページの h1 の下に並ぶため） */
.ccard .ccard__ttl { font-size: 16.5px; font-weight: 900; line-height: 1.55; }
.ccard .ccard__ttl a:hover { color: var(--red-2); }

/* --- 記事本文 --- */
.prose { max-width: var(--container-narrow); margin-inline: auto; font-size: 16px; line-height: 2.05; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
	margin-top: 2em; padding: 10px 0 10px 16px; border-left: 5px solid var(--red);
	font-size: clamp(19px, 2.2vw, 24px); font-weight: 900; line-height: 1.5;
}
.prose h3 { margin-top: 1.8em; font-size: clamp(17px, 1.9vw, 20px); font-weight: 900; line-height: 1.55; }
.prose h4 { margin-top: 1.6em; font-size: 16.5px; font-weight: 900; }
.prose p { color: var(--txt); }
.prose a { color: var(--red-2); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .4em; }
.prose ul > li { list-style: disc; }
.prose ol > li { list-style: decimal; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
/* ★旧サイトから引き継いだ記事（本番983本）への手当て（2026-09-12）
 *  - 425本が本文に h1 を持つ。未指定だと既定の2em（SPで31px）になり見出しが巨大化するので h2 と同格の大きさに
 *  - 埋め込み（WordPressのブログカード iframe 等）が固定幅でSPの横スクロールを起こす（実測 390px幅で+16px） */
.prose h1 { margin-top: 2em; font-size: clamp(19px, 2.2vw, 24px); font-weight: 900; line-height: 1.5; }
.prose iframe, .prose video, .prose embed, .prose object { max-width: 100%; }
/*  WordPressのブログカードは読み込みが終わるまで iframe が position:absolute で隠れている。
 *  基準が本文の外（画面幅）になると 100% が画面幅になりはみ出すので、本文を基準にする */
.prose { position: relative; }
.prose blockquote {
	padding: 16px 20px; border-left: 4px solid var(--line); background: var(--paper-2);
	border-radius: 0 var(--radius) var(--radius) 0; color: var(--muted);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); }
.prose th { background: var(--paper-2); font-weight: 900; text-align: left; }
.prose figcaption, .prose .wp-caption-text { font-size: 13px; color: var(--muted); }

/* --- 本文下のCTA --- */
.inline-cta {
	max-width: var(--container-narrow); margin: clamp(32px, 4vw, 52px) auto 0;
	padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg);
	background: var(--red-soft); border: 1px solid rgba(232, 53, 78, .28);
}
.inline-cta__ttl { font-size: clamp(17px, 2vw, 21px); font-weight: 900; line-height: 1.5; }
.inline-cta__txt { margin-top: 10px; font-size: 14.5px; line-height: 1.95; color: var(--txt); }
.inline-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* --- 記事内FAQ --- */
.col-faq { max-width: var(--container-narrow); margin: clamp(32px, 4vw, 52px) auto 0; }
.col-faq__ttl { margin-bottom: 16px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 900; }
.qa { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.qa > summary { padding: 15px 18px; font-weight: 900; cursor: pointer; list-style: none; }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::before { content: "Q"; margin-right: 10px; color: var(--red); font-family: var(--font-en); }
.qa .a { padding: 0 18px 16px; font-size: 14.5px; line-height: 1.95; color: var(--muted); }

/* --- 関連記事 --- */
.col-related { margin-top: clamp(40px, 5vw, 68px); }
.col-related__ttl { margin-bottom: 18px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 900; }

/* --- ページネーション --- */
.pagination { display: flex; justify-content: center; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--line); border-radius: var(--radius-pill);
	background: var(--paper); color: var(--muted); font-weight: 700;
}
.pagination .page-numbers:hover { border-color: var(--red); color: var(--red-2); }
.pagination .page-numbers.current { background: var(--red); border-color: var(--red); color: #fff; }

/* --- 検索結果 / 404 --- */
.search-form { display: flex; gap: 8px; max-width: 520px; }
.search-form input[type="search"], .search-form input[type="text"] {
	flex: 1 1 auto; min-width: 0; padding: 12px 16px; font-size: 15px;
	border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper);
}
.search-results { display: grid; gap: 14px; list-style: none; }
.search-results li { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.search-results__type { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--paper-2); color: var(--muted); font-size: 12px; font-weight: 700; }
.search-results__ttl { margin-top: 8px; font-size: 16.5px; font-weight: 900; line-height: 1.55; }
.search-results__ex { margin-top: 6px; font-size: 13.5px; line-height: 1.9; color: var(--muted); }
.search-empty { color: var(--muted); line-height: 1.95; }
.four-links, .rel-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; }
.four-links a, .rel-links a {
	display: inline-flex; align-items: center; padding: 9px 18px;
	border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper);
	font-size: 14px; font-weight: 700; color: var(--txt);
}
.four-links a:hover, .rel-links a:hover { border-color: var(--red); color: var(--red-2); }

/* --- ちいさな汎用 --- */
.text-center { text-align: center; }
.text-muted { color: var(--muted); line-height: 1.95; }
.mt-4 { margin-top: var(--gap-4); }
.mt-7 { margin-top: var(--gap-7); }

@media (max-width: 1023px) {
	.col-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (max-width: 767px) {
	.col-grid { grid-template-columns: 1fr; gap: 16px; }
	.prose { font-size: 15.5px; line-height: 2; }
	.prose h2 { padding-left: 12px; border-left-width: 4px; }
	.inline-cta__btns .btn { width: 100%; justify-content: center; }
	.page-hero__aurora { bottom: -40%; }
}

/* アイキャッチ（本文の先頭に出る1枚）は縦長でも巨大にならないように */
.prose > img:first-child { display: block; margin-inline: auto; max-height: 520px; width: auto; }

/* =========================================================
   ブログ記事の共通デザイン（2026-09-12）
   ★本番983本の旧記事は、記事ごとの <style> を表示に使わない（inc/column.php）。
     かわりに記事によく出る部品をここで新サイトの見た目にそろえる。
     部品の出現数（<style>入り110本中）：div.cta 61 / div.box 50 / .container 44 / .section 40 /
     footer 38 / header 34 / .faq 17 / .highlight 45 / .point・.voice・.card 少数
   ★目次（.toc）と著者ボックス（.author-box）は流用元のテーマからCSSが来ておらず素のHTMLだった
   ========================================================= */

/* --- 目次 --- */
.toc {
	margin: 0 0 clamp(28px, 4vw, 40px); padding: 20px 24px 18px;
	border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius);
	background: var(--paper-2);
}
.toc__ttl { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 900; letter-spacing: .08em; }
.toc__ttl::before { content: ""; width: 18px; height: 2px; background: var(--red); }
.toc__list { margin-top: 10px; padding: 0; counter-reset: toc; }
.prose .toc__list > li { list-style: none; margin: 0; padding: 5px 0 5px 2.1em; position: relative; font-size: 14.5px; line-height: 1.7; counter-increment: toc; }
.prose .toc__list > li::before {
	content: counter(toc); position: absolute; left: 0; top: 6px;
	min-width: 1.5em; font-family: var(--font-en); font-size: 13px; color: var(--red); text-align: right;
}
.prose .toc__list > li.is-sub { padding-left: 3.2em; font-size: 13.5px; counter-increment: none; }
.prose .toc__list > li.is-sub::before { content: "–"; left: 1.9em; color: var(--muted-2); font-family: inherit; }
.prose .toc__list a { color: var(--txt); text-decoration: none; }
.prose .toc__list a:hover { color: var(--red-2); text-decoration: underline; }

/* --- 表の横スクロール（inc/column.php が table を包む） --- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 520px; }

/* --- 旧記事の部品 --- */
.prose header {
	padding: clamp(22px, 3.5vw, 36px) clamp(20px, 3.5vw, 36px);
	border-radius: var(--radius-lg); background: var(--ink); color: #fff;
}
.prose header h1, .prose header h2 { margin: 0; padding: 0; border: 0; background: none; color: #fff; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.5; }
.prose header p { margin-top: 12px; color: rgba(255, 255, 255, .86); font-size: 14.5px; line-height: 1.95; }
.prose header a { color: var(--gold-2); }
.prose .container, .prose .wrap, .prose .wrapper, .prose main, .prose .section, .prose section { max-width: none; margin-inline: 0; padding: 0; background: none; box-shadow: none; }
.prose .box, .prose .point, .prose .card, .prose .voice, .prose .voice-box, .prose .link-box, .prose .section-box {
	margin-top: 1.4em; padding: 18px 22px; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--paper-2);
}
.prose .box > :first-child, .prose .point > :first-child, .prose .card > :first-child, .prose .voice > :first-child, .prose .voice-box > :first-child { margin-top: 0; }
.prose p.highlight, .prose div.highlight {
	padding: 14px 18px; border-left: 4px solid var(--red); border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--red-soft); color: var(--txt); font-weight: 700;
}
/* 「.box の中に強調1行だけ」の形が多い（50本）→ 箱を重ねず強調の帯だけ見せる（:has 非対応でも箱入りで読める） */
.prose .box:has(> p.highlight:only-child) { padding: 0; border: 0; background: none; }
.prose .box:has(> p.highlight:only-child) > p.highlight { margin: 0; }
.prose span.highlight { background: linear-gradient(transparent 60%, rgba(232, 53, 78, .18) 60%); font-weight: 700; }
.prose .cta {
	margin-top: 2em; padding: clamp(22px, 3vw, 32px); text-align: center;
	border: 1px solid rgba(232, 53, 78, .28); border-radius: var(--radius-lg); background: var(--red-soft);
}
.prose .cta h2, .prose .cta h3 { margin-top: 0; padding: 0; border: 0; background: none; font-size: clamp(18px, 2.2vw, 22px); }
.prose .cta p { font-size: 14.5px; }
.prose .cta a, .prose a.btn, .prose a.button, .prose a.cta {
	display: inline-flex; align-items: center; justify-content: center; margin: 14px 6px 0; padding: 12px 24px;
	border-radius: var(--radius-pill); background: linear-gradient(100deg, var(--red-3), var(--red) 45%, var(--red-2));
	color: #fff; font-weight: 900; font-size: 14.5px; line-height: 1.4; text-decoration: none; box-shadow: var(--shadow-red);
}
.prose .cta a:hover, .prose a.btn:hover, .prose a.button:hover { filter: brightness(1.06); color: #fff; }
.prose .faq { margin-top: 12px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.prose .faq h3, .prose .faq h4 { margin-top: 0; font-size: 16px; }
.prose .faq p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.prose footer {
	margin-top: 2em; padding: 18px 22px; border-top: 1px solid var(--line);
	background: none; color: var(--muted); font-size: 13.5px; text-align: center;
}
.prose footer a { display: inline-block; margin: 2px 8px; }
.prose p.lead { font-size: 1.08em; font-weight: 700; }
.prose p.small, .prose .small { font-size: 13px; color: var(--muted); }
/* 旧記事の文字の書体指定（style="font-family:…"）は本文の書体にそろえる */
.prose [style*="font-family"] { font-family: inherit !important; }

/* --- お客様の声の注記（2026-09-12 文字チェック：体験談には個人差の注記を必ず添える） --- */
.voice-note { margin-top: 14px; font-size: 12.5px; line-height: 1.8; color: var(--muted); text-align: center; }

/* --- この記事を書いた人 --- */
.author-box {
	display: flex; gap: 20px; align-items: flex-start;
	max-width: var(--container-narrow); margin: clamp(32px, 4vw, 52px) auto 0; padding: clamp(20px, 3vw, 28px);
	border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
}
.author-box__photo { flex: 0 0 96px; }
.author-box__photo img { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.author-box__body { min-width: 0; }
.author-box__role { font-size: 12px; font-weight: 900; letter-spacing: .1em; color: var(--red-2); }
.author-box__name { margin-top: 2px; font-size: 18px; font-weight: 900; line-height: 1.5; }
.author-box__name small { display: inline-block; margin-left: 10px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.author-box__bio { margin-top: 8px; font-size: 14px; line-height: 1.9; color: var(--txt); }
.author-box__link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 900; color: var(--red-2); }
@media (max-width: 767px) {
	.author-box { flex-direction: column; align-items: center; text-align: center; }
	.author-box__name small { display: block; margin-left: 0; }
	.prose .cta a, .prose a.btn, .prose a.button { display: flex; margin: 10px 0 0; }
}

/* =========================================================
   下層固定ページ（/gym/ /price/ /pilates/ …）
   ★2026-09-03 追加。それまで phero / psec / pdl / pcheck / pstep /
     pcta / prel / pask / pvoice はCSSが1行も無く、素のHTMLで出ていた。
   ★吉田さん方針：使う画像はトップにあるものだけ／成果報告の画像は使わない。
     そのため「画像なしでも成立する」ことを前提に、罫線・番号・面・余白で作る。
   ========================================================= */

/* --- ページ見出し --------------------------------------- */
.phero {
	position: relative; overflow: hidden;
	padding: 74px 0 58px;
	background:
		radial-gradient(120% 140% at 12% 0%, var(--red-soft) 0%, rgba(253, 239, 241, 0) 58%),
		var(--paper-2);
	border-bottom: 1px solid var(--line);
}
/* 右下に薄い赤の斜め帯。写真を置かないぶん、ここで画面を締める */
.phero::after {
	content: ""; position: absolute; right: -8%; bottom: -60%;
	width: 46%; height: 150%; transform: rotate(18deg);
	background: linear-gradient(180deg, rgba(232, 53, 78, .07), rgba(232, 53, 78, 0));
	pointer-events: none;
}
.phero .container { position: relative; z-index: 1; }
.phero__en {
	font-family: var(--font-en); font-size: clamp(30px, 6vw, 52px); line-height: 1;
	letter-spacing: .04em; color: rgba(28, 30, 34, .09); margin-bottom: -14px;
}
.phero__h {
	font-size: clamp(24px, 4.4vw, 40px); font-weight: 900; line-height: 1.4;
	letter-spacing: .01em; color: var(--txt);
}
.phero__h::after {
	content: ""; display: block; width: 56px; height: 4px; margin-top: 18px;
	border-radius: 2px; background: linear-gradient(90deg, var(--red), var(--red-3));
}
.phero__lead { margin-top: 22px; max-width: 820px; font-size: 15.5px; line-height: 2; color: var(--txt); }
.phero__lead b { font-weight: 900; }

/* --- 本文セクション ------------------------------------- */
.page { padding: 58px 0 0; }
.psec { margin-bottom: 54px; }
.psec__h {
	position: relative; padding-left: 16px; margin-bottom: 18px;
	font-size: clamp(19px, 2.6vw, 25px); font-weight: 900; line-height: 1.5;
}
.psec__h::before {
	content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
	width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--red), var(--red-2));
}
.psec > p { font-size: 15.5px; line-height: 2.05; margin-bottom: 1.1em; }
.psec > p b { font-weight: 900; }
.psec__sub { margin: 30px 0 14px; font-size: 17px; font-weight: 900; padding-bottom: 8px; border-bottom: 2px solid var(--line); }

/* --- チェックリスト ------------------------------------- */
.pcheck { list-style: none; display: grid; gap: 10px; margin: 6px 0 22px; }
.pcheck li {
	position: relative; padding: 14px 18px 14px 46px;
	background: var(--paper); border: 1px solid var(--line);
	border-radius: 12px; font-size: 15.5px; line-height: 1.8;
}
.pcheck li::before {
	content: ""; position: absolute; left: 20px; top: 1.28em;
	width: 7px; height: 13px; border: solid var(--red);
	border-width: 0 2.8px 2.8px 0; transform: rotate(45deg);
}

/* --- 定義リスト（店舗情報など） ------------------------- */
.pdl { border-top: 1px solid var(--line); margin: 6px 0 20px; }
.pdl > div {
	display: grid; grid-template-columns: 190px 1fr; gap: 0 20px;
	padding: 16px 4px; border-bottom: 1px solid var(--line);
}
.pdl dt { font-weight: 900; color: var(--red-2); font-size: 15px; }
.pdl dd { font-size: 15.5px; line-height: 1.9; }

/* --- 番号つきステップ ----------------------------------- */
.pstep { list-style: none; counter-reset: pstep; display: grid; gap: 14px; margin: 6px 0 22px; }
.pstep li {
	counter-increment: pstep; position: relative;
	padding: 20px 22px 20px 74px;
	background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: var(--shadow-sm);
}
.pstep li::before {
	content: counter(pstep, decimal-leading-zero);
	position: absolute; left: 20px; top: 20px;
	width: 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--font-en); font-size: 17px; color: #fff;
	background: linear-gradient(140deg, var(--red-3), var(--red-2));
}
.pstep li b { display: block; font-size: 16.5px; font-weight: 900; margin-bottom: 6px; }
.pstep li p { font-size: 15px; line-height: 1.95; color: var(--txt); }

/* --- 比較表。★スマホでレイアウトを壊さないよう必ず枠内で横スクロールさせる --- */
.ptable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 10px; }
.ptable {
	width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0;
	background: var(--paper); border: 1px solid var(--line);
	border-radius: 14px; overflow: hidden; font-size: 14.5px;
}
.ptable th, .ptable td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; line-height: 1.8; }
.ptable thead th { background: var(--ink); color: #fff; font-weight: 900; font-size: 14px; }
.ptable thead th.is-ours { background: linear-gradient(140deg, var(--red-3), var(--red-2)); }
/* ★背景は tr ではなく th/td 側に書く。tr に書くと th の背景に負ける */
.ptable tbody th { width: 168px; font-weight: 900; background: var(--paper-2); color: var(--txt); }
.ptable td.is-ours { background: var(--red-soft); font-weight: 700; }
.ptable tr:last-child th, .ptable tr:last-child td { border-bottom: 0; }
.ptable__note { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-top: 8px; }
/* 横スクロールの案内。PCでは全部見えているので出さない */
.ptable__hint { display: none; font-size: 12.5px; font-weight: 900; color: var(--red-2); margin-bottom: 6px; }

/* --- 数字を見せるカード（写真の代わりに“絵”になる） ----- */
.pfacts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 22px; }
.pfacts li { text-align: center; padding: 22px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.pfacts b {
	display: block; font-family: var(--font-en); font-size: clamp(26px, 4.6vw, 38px);
	line-height: 1.1; color: var(--red); letter-spacing: .02em;
}
/* ★Antonの「0」は縦棒に見えるので、単独数字や和文まじりは和文900に切り替える */
.pfacts b.is-ja { font-family: var(--font-ja); font-weight: 900; font-size: clamp(19px, 3vw, 26px); }
.pfacts b small { font-family: var(--font-ja); font-size: 14px; font-weight: 900; margin-left: 2px; }
.pfacts span { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.7; }

/* --- 本文中の写真（使えるのはトップに出ている画像だけ） --- */
.pfig { margin: 6px 0 24px; }
.pfig img {
	display: block; width: 100%; height: auto;
	border-radius: 14px; border: 1px solid var(--line);
}
.pfig figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.8; }

/* --- アイコン（inc/icons.php のインラインSVG） ----------- */
.icn { width: 1em; height: 1em; display: block; flex: none; }

/* 比較表の行頭：アイコン＋タイプ名 */
.ptable__type { display: flex; align-items: center; gap: 8px; }
.ptable__type .icn { width: 19px; height: 19px; color: var(--muted); }
.ptable .is-ours .ptable__type .icn { color: var(--red); }

/* 困りごとのリスト。★チェックマークは「できること」に使う記号なので、
   ネガティブな項目には使わない（意味が反転して読みにくくなる） */
.pissue { list-style: none; display: grid; gap: 10px; margin: 6px 0 22px; }
.pissue li {
	display: flex; align-items: flex-start; gap: 13px;
	padding: 14px 18px; background: var(--paper-2);
	border: 1px solid var(--line); border-left: 4px solid var(--muted-2);
	border-radius: 0 12px 12px 0; font-size: 15.5px; line-height: 1.8;
}
.pissue .icn { width: 21px; height: 21px; margin-top: .18em; color: var(--muted); }

/* 数字カードのアイコン */
.pfacts__ic {
	display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 12px;
	border-radius: 50%; background: var(--red-soft); color: var(--red);
}
.pfacts__ic .icn { width: 23px; height: 23px; }
.pfacts__txt { display: block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.7; }
.pfacts--sm b.is-ja { font-size: clamp(17px, 2.4vw, 21px); }

/* 定義リストの項目名にアイコンを付けるとき */
.pdl--ic dt { display: flex; align-items: center; gap: 8px; }
.pdl--ic dt .icn { width: 18px; height: 18px; color: var(--red); }

/* 実績の一文（星アイコン付き） */
.pstat {
	display: flex; align-items: flex-start; gap: 13px;
	padding: 18px 20px; background: var(--gold-soft);
	border: 1px solid rgba(201, 162, 39, .35); border-radius: 12px;
	font-size: 15px; line-height: 1.95;
}
.pstat__ic { color: var(--gold); flex: none; margin-top: .1em; }
.pstat__ic .icn { width: 24px; height: 24px; }
/* ★本文はこの1要素にまとめる。中の <b> を直接の子にすると列に割れる */
.pstat__txt { flex: 1 1 auto; min-width: 0; }
.pstat__txt b { font-weight: 900; }

/* --- 下層の料金カード ----------------------------------- */
.pplans { list-style: none; counter-reset: none; display: grid; gap: 16px; margin: 6px 0 12px; }
.pplans > li {
	position: relative; padding: 24px 24px 22px;
	background: var(--paper); border: 1px solid var(--line);
	border-radius: 16px; box-shadow: var(--shadow-sm);
}
.pplans > li.is-feature { border-color: var(--gold); border-width: 2px; background: linear-gradient(180deg, var(--gold-soft), var(--paper) 60%); }
.pplans__badge {
	display: inline-block; padding: 5px 14px; margin-bottom: 12px;
	background: var(--ink); color: #fff; border-radius: 999px;
	font-size: 12px; font-weight: 900;
}
.pplans > li.is-feature .pplans__badge { background: linear-gradient(140deg, var(--gold-2), var(--gold)); color: var(--ink); }
.pplans__name { font-size: 18px; font-weight: 900; line-height: 1.5; margin-bottom: 10px; }
.pplans__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pplans__price del { font-size: 15px; color: var(--muted); }
/* 金額は3桁区切りが入るのでAntonでよい（単独の「0」だけ和文に切り替える） */
.pplans__price b { font-family: var(--font-en); font-size: clamp(30px, 5vw, 42px); line-height: 1; color: var(--red); letter-spacing: .01em; }
.pplans__price small { font-size: 15px; font-weight: 900; }
.pplans__per { margin-top: 10px; font-size: 14px; font-weight: 900; color: var(--red-2); }
.pplans__note { list-style: none; margin-top: 12px; display: grid; gap: 6px; }
.pplans__note li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.85; color: var(--txt); }
.pplans__note li::before {
	content: ""; position: absolute; left: 2px; top: .55em;
	width: 6px; height: 11px; border: solid var(--red);
	border-width: 0 2.4px 2.4px 0; transform: rotate(45deg);
}

/* =========================================================
   お問い合わせフォーム（inc/contact-form.php）
   ★2026-09-03 追加。それまで .cform 系のCSSが1行も無く、素のHTMLで出ていた。
     /contact/ ページを作って初めて画面に出たため発覚。
   ========================================================= */
.cform { margin-top: 8px; }

/* ★★ハニーポット。**絶対に見えてはいけない。**
   ここが見えていると、普通に入力した方が「Webサイト」欄を埋めてしまい、
   ボット判定で送信を弾かれる＝問い合わせが届かなくなる。
   display:none ではなく画面外に飛ばす（自動入力対策として一般的な方法）。 */
.cform__hp {
	position: absolute !important; left: -9999px !important; top: auto !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important;
}

.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cform__field { display: block; margin-bottom: 16px; }
.cform__label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 900; color: var(--txt); }
.cform__label em {
	font-style: normal; margin-left: 8px; padding: 2px 8px;
	background: var(--red); color: #fff; border-radius: 4px; font-size: 11px; vertical-align: 2px;
}
.cform input[type="text"],
.cform input[type="email"],
.cform input[type="tel"],
.cform select,
.cform textarea {
	display: block; width: 100%; padding: 13px 15px;
	font-family: inherit; font-size: 16px; /* ★16px未満だとiOSで入力時に画面が拡大する */
	color: var(--txt); background: var(--paper);
	border: 1px solid var(--line); border-radius: 10px;
	transition: border-color .2s, box-shadow .2s;
	-webkit-appearance: none; appearance: none;
}
.cform select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7079' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px;
	padding-right: 40px;
}
.cform textarea { line-height: 1.8; resize: vertical; min-height: 150px; }
.cform input::placeholder, .cform textarea::placeholder { color: var(--muted-2); }
.cform input:focus, .cform select:focus, .cform textarea:focus {
	outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(232, 53, 78, .14);
}
/* エラーの項目 */
.cform__field.is-error input,
.cform__field.is-error select,
.cform__field.is-error textarea { border-color: var(--red); background: var(--red-soft); }
.cform__alert {
	padding: 14px 18px; margin-bottom: 18px; border-radius: 10px;
	font-size: 14.5px; font-weight: 700; line-height: 1.8;
}
.cform__alert--err { background: var(--red-soft); border: 1px solid var(--red); color: var(--red-2); }
/* 送信完了。エラーと見分けがつくよう緑系にする */
.cform__alert--ok {
	background: #eaf7ee; border: 1px solid #2f9e57; color: #1d6b39;
	font-size: 15.5px;
}

/* 同意チェック */
.cform__agree {
	display: flex; align-items: flex-start; gap: 11px;
	padding: 16px 18px; margin: 4px 0 8px;
	background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px;
	font-size: 14.5px; line-height: 1.8; cursor: pointer;
}
.cform__agree input[type="checkbox"] {
	flex: none; width: 20px; height: 20px; margin-top: .15em; accent-color: var(--red);
}
.cform__agree a { color: var(--red-2); font-weight: 900; }
.cform__agree.is-error { border-color: var(--red); background: var(--red-soft); }

.cform__submit { margin-top: 22px; text-align: center; }
.cform__submit .btn { min-width: 280px; justify-content: center; }
.cform__note { margin-top: 12px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }

@media (max-width: 767px) {
	/* ★2カラムのままだと入力欄が半分の幅になって、プレースホルダが読めない */
	.cform__row { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
	.cform__submit .btn { width: 100%; min-width: 0; }
}

/* --- サイトマップの一覧 --------------------------------- */
.psitemap { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
.psitemap li { border-bottom: 1px solid var(--line); }
.psitemap a {
	display: block; position: relative; padding: 15px 4px 15px 22px;
	font-size: 15.5px; font-weight: 700; color: var(--txt); text-decoration: none;
	transition: color .2s;
}
.psitemap a::before {
	content: ""; position: absolute; left: 4px; top: 1.42em;
	width: 6px; height: 6px; border-top: 2px solid var(--red); border-right: 2px solid var(--red);
	transform: rotate(45deg);
}
.psitemap a:hover { color: var(--red-2); }
@media (max-width: 767px) {
	.psitemap { grid-template-columns: 1fr; }
}

/* --- Q&A（よくある質問） -------------------------------- */
.pqa { list-style: none; display: grid; gap: 14px; margin: 6px 0 12px; }
.pqa > li {
	padding: 22px 24px; background: var(--paper);
	border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
}
.pqa__q {
	position: relative; padding-left: 34px; margin-bottom: 10px;
	font-size: 16.5px; font-weight: 900; line-height: 1.6;
}
.pqa__q::before {
	content: "Q"; position: absolute; left: 0; top: -.1em;
	width: 25px; height: 25px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--font-en); font-size: 14px; color: #fff;
	background: linear-gradient(140deg, var(--red-3), var(--red-2));
}
.pqa__a { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.95; }
.pqa__a::before {
	content: "A"; position: absolute; left: 0; top: -.05em;
	width: 25px; height: 25px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--font-en); font-size: 14px; color: var(--ink);
	background: var(--paper-3);
}

/* 番号を出さないステップ（特典の羅列など） */
.pstep--plain li { padding: 18px 22px; }
.pstep--plain li::before { display: none; }

/* --- 補足注記 ------------------------------------------- */
.pask {
	margin: 16px 0 0; padding: 16px 18px;
	background: var(--gold-soft); border: 1px solid rgba(201, 162, 39, .35);
	border-radius: 12px; font-size: 14.5px; line-height: 1.95;
}
.pmore { margin-top: 22px; text-align: center; }
/* 「（必須）」など、項目に添える小さな注記 */
.pnote { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* --- お客様の声（下層版・写真を使わない） --------------- */
.pvoice { padding: 54px 0; background: var(--paper-2); border-top: 1px solid var(--line); }
.pvoice__h { text-align: center; font-size: clamp(20px, 3vw, 27px); font-weight: 900; margin-bottom: 26px; }
.pvoice__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pvoice__list > li {
	position: relative; padding: 30px 22px 22px;
	background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
}
.pvoice__list > li::before {
	content: "\201C"; position: absolute; left: 18px; top: 2px;
	font-family: var(--font-en); font-size: 46px; line-height: 1; color: var(--red-soft);
}
/* ★2026-09-03 吉田さんOK：お客様の声の写真は下層でも出す（ビフォーアフターは出さない） */
.pvoice__head { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.pvoice__img {
	width: 62px; height: 62px; flex: none; border-radius: 50%;
	object-fit: cover; border: 2px solid var(--paper); box-shadow: var(--shadow-sm);
}
.pvoice__img--ph { display: grid; place-items: center; background: var(--red-soft); color: var(--red); }
.pvoice__img--ph .icn { width: 28px; height: 28px; }
.pvoice__list h3 { position: relative; font-size: 15.5px; font-weight: 900; line-height: 1.6; }
.pvoice__list p { font-size: 14.5px; line-height: 1.95; color: var(--txt); }

/* --- 関連ページ ----------------------------------------- */
.prel { padding: 54px 0; border-top: 1px solid var(--line); }
.prel__h { text-align: center; font-size: clamp(19px, 2.6vw, 24px); font-weight: 900; margin-bottom: 22px; }
.prel__list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prel__list a {
	display: block; height: 100%; padding: 18px 20px;
	background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
	text-decoration: none; color: var(--txt);
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.prel__list a:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.prel__ic {
	display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px;
	border-radius: 10px; background: var(--red-soft); color: var(--red);
}
.prel__ic .icn { width: 21px; height: 21px; }
.prel__list a:hover .prel__ic { background: var(--red); color: #fff; }
.prel__list b { display: block; font-size: 15.5px; font-weight: 900; margin-bottom: 5px; }
.prel__list b::after { content: " \2192"; color: var(--red); }
.prel__list small { font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* --- ページ下部CTA -------------------------------------- */
.pcta { padding: 60px 0; text-align: center; color: #fff; background: linear-gradient(140deg, var(--red-2), var(--red)); }
.pcta__cap {
	display: inline-block; padding: 7px 18px; margin-bottom: 16px;
	background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px; font-size: 13px; font-weight: 900;
}
/* ★Antonの「0」は縦棒に見える。単独数字は和文900にする（トップでも同じ対処をしている） */
.pcta__cap b { font-family: var(--font-ja); font-weight: 900; font-size: 16px; margin-left: 4px; }
.pcta__h { font-size: clamp(21px, 3.4vw, 32px); font-weight: 900; line-height: 1.5; }
.pcta__lead { margin-top: 14px; font-size: 14.5px; line-height: 1.95; opacity: .95; }
.pcta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.pcta__btns .btn--ghost { background: #fff; border-color: #fff; color: var(--txt); }

@media (max-width: 900px) {
	.pfacts, .pvoice__list, .prel__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.phero { padding: 52px 0 40px; }
	.phero__lead { font-size: 15px; line-height: 1.95; }
	.page { padding: 40px 0 0; }
	.psec { margin-bottom: 40px; }
	.psec > p { font-size: 15px; line-height: 1.95; }
	/* ★1カラムに落とす。2カラムのままだと項目名が2文字ずつで折り返す */
	.pdl > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 2px; }
	.pfacts, .pvoice__list, .prel__list { grid-template-columns: 1fr; }
	.ptable__hint { display: block; }
	.pstep li { padding: 18px; }
	.pstep li::before { position: static; margin-bottom: 10px; }
	.pcta__btns { flex-direction: column; }
	.pcta__btns .btn { width: 100%; justify-content: center; }
}

/* ★2026-09-12 表示速度：背景写真は main.js が画面に近づいたときに .is-bg を付けてから読む（最初の表示を邪魔しない） */
.s-worries.is-bg { background: linear-gradient(180deg, rgba(255, 255, 255, .955), rgba(255, 255, 255, .985)), url("../images/bg-stretch.webp") center / cover no-repeat; }
.s-reason.is-bg { background: linear-gradient(180deg, rgba(246, 244, 241, .96), rgba(246, 244, 241, .99)), url("../images/bg-press.webp") center / cover no-repeat fixed; }
.s-flow.is-bg { background: linear-gradient(180deg, rgba(255, 255, 255, .955), rgba(255, 255, 255, .985)), url("../images/bg-bench.webp") center / cover no-repeat; }
.finalcta.is-bg { background: linear-gradient(120deg, rgba(198, 27, 52, .93), rgba(232, 53, 78, .90) 50%, rgba(255, 90, 112, .90)), url("../images/bg-gym.webp") center / cover no-repeat; }