@charset "utf-8";
/* ==========================================================================
   Design Tokens
   出典: Figma モックアップ（pc-top__01-index-pc.png / sp-top__01-index-sp.png）から抽出。
   ※ design__claude-docs/design.md の青系トークンは別ページのライブラリと思われ、
     本デザインと一致しないため採用していない（要 Figma 再確認）。
   ========================================================================== */

:root {
	/* ---- Color: brand ----
	   値は Figma 書き出しSVG（ベクター）から取得した確定値。
	   ラスター実測ではなくSVGのfill属性が出典なので、圧縮による誤差がない。 */
	--c-gold:        #d0b07a; /* 塗り。アイコンの金丸・バッジ・ボタン地 */
	--c-gold-dark:   #a8803f; /* 線画・アクセント文字・下線・矢印 */
	--c-gold-light:  #e2ddd5; /* 淡いベージュ罫線 */

	/* ---- Color: neutral ---- */
	--c-ink:         #39353b; /* 基本文字色・フッター地 */
	--c-ink-deep:    #2c2b31; /* 予約バンド等の濃い面 */
	--c-txt:         #39353b; /* 本文 */
	--c-txt-sub:     #7b7b7c; /* 補助テキスト */

	/* ---- Color: surface ---- */
	--c-wh:          #ffffff;
	--c-off:         #fcfcfc; /* 極薄ベース */
	--c-base:        #ededed; /* セクション地（グレー） */
	--c-beige:       #e2ddd5; /* セクション地（ベージュ） */
	--c-beige-light: #ebe1cf; /* FAQ / カード地（暖色） */
	--c-bdr:         #c3bfbd; /* 罫線 */
	--c-bdr-light:   #e0dedd;

	/* ---- Typography ---- */
	--f-ja:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--f-ja-mp:  "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--f-en:     "Jost", "Noto Sans JP", sans-serif;

	--fs-11: 1.1rem;
	--fs-12: 1.2rem;
	--fs-13: 1.3rem;
	--fs-14: 1.4rem;
	--fs-16: 1.6rem;
	--fs-18: 1.8rem;
	--fs-20: 2.0rem;
	--fs-24: 2.4rem;
	--fs-28: 2.8rem;
	--fs-32: 3.2rem;
	--fs-40: 4.0rem;
	--fs-56: 5.6rem;

	--lh-tight:  1.4;
	--lh-normal: 1.7;
	--lh-loose:  2;
	--ls-base:   0.05em;

	/* ---- Layout ---- */
	--w-design:    1440px; /* PC デザイン基準幅 */
	--w-container: 1160px; /* コンテナ内寸（1440 − 左右140） */
	--w-narrow:     900px;
	--pad-x:         16px; /* SP 左右余白（内容幅 358px） */
	--h-header:      96px; /* モックアップ実測 */
	--h-header-sp:   64px; /* SPモックアップ実測 */

	/* ---- Spacing（セクション間） ---- */
	--sp-sec:    120px;
	--sp-sec-sp:  64px;

	/* ---- Effect ---- */
	--radius:      0px;   /* デザインは角丸をほぼ使わない */
	--radius-pill: 999px;
	--shadow-card: 0 2px 12px rgba(57, 53, 59, 0.08);
	--ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur:         0.35s;

	/* ---- Layer ---- */
	--z-header:  100;
	--z-drawer:  200;
	--z-float:   150;

	/* ---- Icon（mask 用。色は background で指定する） ---- */
	--icon-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.3' d='M.65.65h16.7v16.7H.65z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' d='m4 9.2 3.4 3.4L14.2 5'/%3E%3C/svg%3E");
	/* INFORMATION：金の塗り四角＋白いチェック（背景画像として使う） */
	--icon-check-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect width='22' height='22' fill='%23a8803f'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' d='m5 11.2 3.6 3.6L17.2 6'/%3E%3C/svg%3E");
	/* TROUBLE：線の四角＋金のチェック（チェックが枠を越える） */
	--icon-check-line: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a8803f' stroke-width='1.1' d='M.55 4.55h17.9v18.9H.55z'/%3E%3Cpath fill='none' stroke='%23a8803f' stroke-width='1.7' d='m4.2 12 4.3 4.3L23 1.2'/%3E%3C/svg%3E");
	--icon-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8'%3E%3Cpath fill='none' stroke='%23000' d='M0 4h30m-5-3.5L30.5 4 25 7.5'/%3E%3C/svg%3E");
	/* 金丸の中に置く白い矢印（ドロワーの第三・第四階層） */
	--icon-arrow-w: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.2' d='M0 5h12M8.4 1.4 12.6 5 8.4 8.6'/%3E%3C/svg%3E");
	/* メリット・デメリットの印 */
	--icon-check-mark: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.6' d='m1 5.2 3.2 3.2L11 1.4'/%3E%3C/svg%3E");
	--icon-minus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 2'%3E%3Cpath stroke='%23000' stroke-width='1.6' d='M1 1h10'/%3E%3C/svg%3E");
	--icon-tel: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.5.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.57 3.5a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	:root {
		--sp-sec: var(--sp-sec-sp);
	}
}