/* =========================================================================
 * Make it — レイアウト土台 ＋ rail（通り道）  ※フェーズ2 共通パーツ
 *
 * ■ コンテナ（.mk-container）
 *   コンテンツを中央寄せ・最大幅で組み、左端に rail 分のオフセットを確保する。
 *   Figma 基準（PC 1280）：ページ左マージン=120／rail=左端／本文左=192／本文幅=968。
 *   → 左内側 = 外側マージン(--mk-side) + rail逃げ(--mk-rail-offset)、右内側 = --mk-side。
 *
 * ■ rail（.mk-container の擬似要素）
 *   コンテンツ左端の「縦ライン＋節点」。2026-08〜：全セクション同一トーン
 *   （線=--rail-line／節点=--rail-dot）に単純化。最終CTA（暗面）でrailを
 *   出すかどうか（モックには無い）はFigma更新時に判断し、必要なら
 *   .mk-container--no-rail をテンプレート側に付与する（現状は据え置き）。
 *
 * 値の一次ソースは theme.json → tokens.css（--rail-line/-dot/-width/-node ほか）。
 * ====================================================================== */

:root {
	/* コンテンツ設計寸法（Figma 1280 基準） */
	--mk-page-max: 1280px;   /* コンテナ最大幅の上限 */
	--mk-content-max: 968px; /* 本文の最大幅 */

	/* 外側マージン(--mk-side) と rail 逃げ(--mk-rail-offset)：BPで可変 */
	--mk-side: 12px;        /* SP：Figma rail x=12 */
	--mk-rail-offset: 30px; /* SP：本文左 42 − rail 12 = 30 */

	/* セクションの標準上下余白。rail の節点はこれと同じ高さ（＝本文の先頭）に置く。
	   Figma実測：rail（節点＋線）の y座標・高さは常に本文content側と完全一致する。 */
	--mk-space-section: 3rem;
}

@media (min-width: 768px) {
	:root {
		--mk-side: 24px;
		--mk-rail-offset: 48px;
	}
}

@media (min-width: 1024px) {
	:root {
		/* PC：1280 で --mk-side=120 になるよう ((100vw-1040)/2) を 24〜120 でクランプ */
		--mk-side: clamp(24px, calc((100vw - 1040px) / 2), 120px);
		--mk-rail-offset: 72px; /* PC：本文左 192 − rail 120 = 72 */
		--mk-space-section: 4.5rem;
		--btn-min-h: 50px; /* PC＝Figma実測50px（Issue #51。SPは tokens.css の46px） */
	}
}

/* セクション別の上下余白（Figma実測・PCのみ。Issue #52）。
   Figmaは一律ではなく 88 / 76 / 72 / 64 の4段階。とくに最終CTAは到達点なので
   最も広く取る設計になっている。
   padding-block を直接上書きせず --mk-space-section を差し替えているのは、
   rail の節点と縦線（.mk-container::before / ::after）が同じ変数で位置を
   決めているため。変数側を変えれば rail も自動で追随する。

   ■ `.home` でスコープを絞っている理由（重要）
   Issue #52 の実測は**TOP限定**で、下層11ページは別の値になる（Figma実測で
   下層の最終CTAは 80px。counselor 106:80／faq 110:76 とも content y=80）。
   `.mk-section--cta-final` は blog / counselor / faq / front / mindset / plan の
   **6ページで共有される全ページ共通パーツ**なので、`.home` を付けないと
   下層5ページの最終CTAが 8px 広くなってしまう。
   最終CTAは「TOPと下層で値が違うパーツ」で、front.css にも既に
   `body:not(.home) .mk-cta-final__head .mk-display`（PR #43）という
   下層専用の出し分けがある。その前例に揃えた。
   下層側の 80px 化は Issue #68 で扱う（下層はセクション余白そのものが
   80/72/64 の可変で、本PRの実測範囲外）。
   ※ hero / story / journey / pricing / photo-band は front/ 配下のみで
     使われる TOP 専用クラス（git grep で確認済み）。hero も対称性のため
     `.home` を付けているが、なくても他ページには当たらない。 */
@media (min-width: 1024px) {
	.home .mk-section--hero .mk-container,
	.home .mk-section--cta-final .mk-container {
		--mk-space-section: 88px;
	}

	.mk-section--story .mk-container,
	.mk-section--journey .mk-container,
	.mk-section--pricing .mk-container {
		--mk-space-section: 76px;
	}

	.mk-section--photo-band .mk-container {
		--mk-space-section: 64px;
	}
}

/* 下層11ページのセクション上下余白（Issue #68）。
   Issue #52／PR #67 の実測がTOP限定だったための抜けを埋める。

   ■ 値の根拠
   Figma側は 2026-08-24 に案B（正規化）で20セクションを修正済みで、下層82セクション
   全件が下記の役割別スケールに揃っている（登内さんの検算＝一致82／不一致0）。
   正規化前は PC が 48/56/64/68/72/80 の6値に散っていた。

     役割          PC    SP
     先頭          80    40
     中間          72    36
     コールアウト   56    32
     最終CTA       80    44

   TOP（`.home`）は Issue #52 の 88/76/72/64 なので `body:not(.home)` で分ける。
   最終CTAが「TOPと下層で値が違うパーツ」なのは PR #67 の時と同じ理由。

   ■ セレクタの順序について
   `:first-of-type`（0,4,1）以外は全て同詳細度（0,3,1）なので、
   **中間 → コールアウト → 最終CTA の順に書く必要がある**（後勝ち）。
   `:first-of-type` は詳細度が高いので位置に関わらず勝つ。

   ■ PCで「中間72px」を明示している理由
   SP側の中間36pxをメディアクエリ外に置いているため、PCで打ち消さないと
   36pxのまま残る。`:root` の 4.5rem は詳細度0,0,0で負けるので効かない。

   ■ `:first-of-type` の妥当性
   下層11ページすべてで、`main.mk-main` 直下の最初の `<section>` が intro 節に
   なることを実機で確認済み。パンくずは `<div class="mk-breadcrumb-bar">` で
   `<section>` ではないため型に数えられない。 */
body:not(.home) .mk-section .mk-container {
	--mk-space-section: 36px;
}

/* コールアウト1個だけのセクション（consultation「ご家族の方へ」／
   mindset「5つに共通すること」／plan「セット申込」） */
body:not(.home) .mk-section--consult-family .mk-container,
body:not(.home) .mk-section--mindset-common .mk-container,
body:not(.home) .mk-section--plan-set .mk-container {
	--mk-space-section: 32px;
}

body:not(.home) .mk-section--cta-final .mk-container {
	--mk-space-section: 44px;
}

body:not(.home) .mk-section:first-of-type .mk-container {
	--mk-space-section: 40px;
}

@media (min-width: 1024px) {
	body:not(.home) .mk-section .mk-container {
		--mk-space-section: 72px;
	}

	body:not(.home) .mk-section--consult-family .mk-container,
	body:not(.home) .mk-section--mindset-common .mk-container,
	body:not(.home) .mk-section--plan-set .mk-container {
		--mk-space-section: 56px;
	}

	body:not(.home) .mk-section--cta-final .mk-container {
		--mk-space-section: 80px;
	}

	body:not(.home) .mk-section:first-of-type .mk-container {
		--mk-space-section: 80px;
	}
}

/* -------------------------------------------------------------------------
 * コンテナ
 * ---------------------------------------------------------------------- */
.mk-container {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--mk-content-max) + var(--mk-rail-offset) + var(--mk-side) * 2);
	margin-inline: auto;
	padding-block: var(--mk-space-section);
	padding-left: calc(var(--mk-side) + var(--mk-rail-offset));
	padding-right: var(--mk-side);

}

/* -------------------------------------------------------------------------
 * rail：縦ライン＋節点（2026-08〜：全セクション同一の1組に単純化）
 *
 * 旧仕様は寒色→暖色の6段階グラデーション（.mk-rail--cold〜--lit）で、
 * テラコッタの「灯」は最終CTAのみ点灯させる設計だった。「玄関の灯り」の
 * 温度設計そのものを廃止したことに伴い、rail も単一トーンへ統合する：
 * 縦ライン＝--rail-line（#DFB19F）、節点＝--rail-dot（#F05E37）で固定。
 * 旧トーンクラス（cold/cool/mid/warm/warmer/subpage/lit）はテンプレート側に
 * 互換のため残置する方針で確定（CSSはno-op・実害なし）。置換の手間より
 * 残すコストの方が低いため、PR-Bでも一括除去は行っていない。
 * ---------------------------------------------------------------------- */
.mk-container::before {
	/* 縦ライン：節点の下端から本文下端（コンテナの下余白の外側）まで。
	   Figma実測で線の上端は節点の下端にぴったり接する（丸 y42〜53／線 y53〜）。
	   以前は節点の下に +0.375rem の隙間が入っていたため接続させた。
	   Figma実測でrailは常に本文と同じ高さで終わる（下余白の中までは伸ばさない）。 */
	content: "";
	position: absolute;
	pointer-events: none;
	left: var(--mk-side);
	top: calc(var(--mk-space-section) + var(--rail-node));
	bottom: var(--mk-space-section);
	width: var(--rail-width);
	background: var(--rail-line);
}

.mk-container::after {
	/* 節点（ドット）：本文の先頭（コンテナの上余白ぶん下）に置く。Figma実測でrailの
	   y座標は本文contentのy座標と一致するため、コンテナ上余白と同じ値を使う。 */
	content: "";
	position: absolute;
	pointer-events: none;
	left: calc(var(--mk-side) - (var(--rail-node) - var(--rail-width)) / 2);
	top: var(--mk-space-section);
	width: var(--rail-node);
	height: var(--rail-node);
	border-radius: 50%;
	background: var(--rail-dot);
}

/* rail を出したくないコンテナ（任意で付与。最終CTAはモック同様rail自体を出さない） */
.mk-container--no-rail::before,
.mk-container--no-rail::after {
	content: none;
}

/* 旧トーンクラス：単一トーンへ統合につき見た目の上書きは不要（クラス名のみ存置）。
   互換のため残置で確定・除去はしない（2026-08-19 石井さんレビューを受けて確定）。 */
.mk-rail--cold,
.mk-rail--cool,
.mk-rail--mid,
.mk-rail--warm,
.mk-rail--warmer,
.mk-rail--subpage,
.mk-rail--lit {
	/* no-op */
}

/* -------------------------------------------------------------------------
 * ブランド画像（makeit_brand_picture() の <picture> 出力）
 *
 * 画像スロットの箱（顔写真・QR等）は従来 background 色のプレースホルダだった。
 * <picture> に置き換えたので、箱側を block＋overflow:hidden にし、内側の <img> を
 * object-fit:cover で敷き込む。箱の background 色は画像読込前のプレースホルダとして残す。
 * ---------------------------------------------------------------------- */
.mk-story__portrait,
.mk-profile__portrait,
.mk-blog-author__photo,
.mk-lp-cta__qr-box,
.mk-hero__image,
.mk-mindset-image,
.mk-lp-hero-image,
.mk-consult-image,
.mk-photo-band {
	display: block;
	overflow: hidden;
}

.mk-brand-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* 2026-08：nonaka-portrait（新写真・縦位置800x1056）は顔が上寄りのため、
   正方形／横長寄りの箱（プロフィール・ブログ著者欄）で cover crop すると
   デフォルトの中央基準だと顔が切れやすい。3スロット共通で上寄りに固定する。 */
.mk-story__portrait .mk-brand-img,
.mk-profile__portrait .mk-brand-img,
.mk-blog-author__photo .mk-brand-img {
	object-position: 50% 32%;
}