/* =========================================================================
米沢みさわ小学校｜とここと デザイントークン（宿泊料金シミュレーター用）
★ misawa-hp /imoni 用の写し。正本は misawa-simulator/public/assets/css/tokens.css。
値を勝手に変えないこと（唯一の相違点は @font-face の src パス）。
抽出元: misawa-hp/_legacy_handbuild/css/site.css + docs/DESIGN-SPEC.md + README.md
そのまま もしくは @import して :root の変数を使う。
========================================================================= */
/* ---- 手書き風ディスプレイフォント（自ホスト）-----------------------------
misawa-hp/_legacy_handbuild/fonts/RiiCookieR.woff2 をプロジェクトにコピーして
下記 src のパスを合わせること（必要文字サブセット版・商用web可・クレジット不要）。 */
@font-face {
font-family: "Rii Cookie";
/* misawa-hp では hub/workation/contact と同じ共用サブセット（tools/subset-rii.py が生成）を読む。
ファイル名が固定なので、作り直したら ?v= を必ず上げる（_headers で assets は max-age=3600） */
src: url("/assets/hub/fonts/riicookie-hub.woff2?v=20260827a") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* ---- Google Fonts（本文・ボタン）-----------------------------------------
に次を入れてもよい:
*/
:root {
/* ===== カラー（基幹・公式 :root 実値）===== */
--color-ink: #333333; /* 本文・枠線・ボタン塗り・フッター背景 */
--color-bg: #eeeeee; /* ページ背景（薄いウォームグレー） */
--color-white: #ffffff; /* カード・パネル背景 */
--color-hover: #7a7a7a; /* ナビ/リンク hover のグレー */
--color-link: #007cff; /* インラインリンク（下線付き） */
--color-sub: #4b4b4b; /* 注記テキスト */
/* ===== アクセント（イチョウ / ginkgo）＆補助 =====
★ 使い分け（2026-08-27。宿泊料金シミュレーターの決定に合わせた）
線・文字・小さな差し色 → --color-accent (#c79a3b)
大きなベタ塗り → --color-accent-fill (#f0b71f)
濃い地（--color-ink）の上の文字 → --color-accent-fill
#c79a3b は線や文字では締まって見えるが、**面で使うと茶色に寄る**。
逆に #f0b71f は面では自然なイチョウ色だが、白地の文字色にするとコントラストが足りない。
だから2つに分けている。#f0b71f は「とここと手帳」の --ginkgo と同じ値＝
とこことのデザインシステム内で既に使っている黄色。 */
--color-accent: #c79a3b; /* イチョウの黄金色。**線・文字・小さな差し色**（白地でも読める濃さ） */
--color-accent-fill:#f0b71f; /* イチョウ（ベタ塗り）。主要ボタン・選択状態・バッジ・タブ下線 */
--color-accent-wash:#fdf6e0; /* イチョウの極淡（面の下地） */
--color-accent-soft:#e7d9b0; /* アクセントの淡色（背景塗り・選択行のうっすら強調）派生 */
--color-rule: #cfcfcf; /* 点線罫線（淡）2px dotted */
--color-rule-strong:#333333; /* 点線罫線（濃）2px dotted */
--color-footer-text:#e6e6e6; /* フッター内の薄い文字 */
/* ===== 状態色（公式に無し→世界観に合わせた控えめな自然色の提案）===== */
--color-success: #5a7a4a; /* 苔・常緑のくすんだ緑 */
--color-warning: #c79a3b; /* イチョウ色を流用 */
--color-error: #b4503f; /* 焚き火・焼き物の土っぽい赤茶 */
/* ===== オーバーレイ・影 ===== */
--overlay-hero: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.16) 60%, rgba(0,0,0,.3));
--text-shadow-hero: 0 2px 16px rgba(0,0,0,.45);
--shadow-none: none; /* 既定はフラット（カードに影を付けない） */
--shadow-subtle: 0 1px 0 rgba(0,0,0,.06); /* どうしても必要な時の極薄影 */
/* ===== タイポグラフィ：フォントファミリー ===== */
--font-display: "Rii Cookie", "Zen Maru Gothic", sans-serif; /* 大見出し・ラベル・番号・＼／ */
--font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; /* 本文・ナビ・詳細 */
--font-button: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; /* 大型ボタン文字 */
/* ===== タイポグラフィ：本文の基本 ===== */
--body-size: 16px;
--body-weight: 500;
--body-line: 2; /* line-height 2.0（=32px @16）ゆったり */
--body-tracking: 0.15em; /* letter-spacing（=2.4px @16）字間広め */
/* ===== タイポグラフィ：サイズスケール（clamp はレスポンシブ可変）===== */
--fs-h1: clamp(30px, 3.4vw, 40px); /* 大見出し h-title（display） */
--fs-slash: clamp(22px, 2.4vw, 30px); /* ＼ ／ 斜線見出し（display） */
--fs-panel-no: 44px; /* パネル番号 01.（display） */
--fs-label-lg: 28px; /* パネルラベル（display） */
--fs-label-md: 26px; /* プランカード ラベル（display） */
--fs-label-sm: 24px; /* カルーセル見出し / CTA文字（display/button） */
--fs-key: 19px; /* 定義リスト見出し（display） */
--fs-price: 18px; /* 価格強調（700） */
--fs-body: 16px; /* 本文 */
--fs-sm: 14px; /* 抜粋・ナビ・注記 */
--fs-xs: 11px; /* コピーライト等 */
--fs-hero: clamp(22px, 2vw, 28px); /* ヒーロー縦書き */
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
/* ===== レイアウト：幅・余白 ===== */
--content-max: 1280px; /* 標準コンテンツ最大幅 */
--content-news: 1360px; /* 広めの帯 */
--content-text: 880px; /* 中央リード文の最大幅 */
--pad-x: clamp(20px, 5vw, 70px); /* 左右パディング */
--section-y: clamp(70px, 9vw, 120px); /* セクション縦余白 */
--scroll-offset: 110px; /* section[id] scroll-margin-top */
/* ===== 余白スケール（8基調＋実測頻出値）===== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 56px;
--space-10: 64px;
--space-11: 80px;
--space-12: 120px;
--gap-grid: 32px; /* ニュースグリッドの gap */
/* ===== 角丸（公式は角ばり基調）===== */
--radius-card: 0; /* カードは角丸なし＝2px枠で表現 */
--radius-button: 2px; /* ボタン */
--radius-photo: 2px; /* 写真 */
--radius-carousel: 8px; /* カルーセル画像枠 */
/* ===== ボーダー ===== */
--border-card: 2px solid var(--color-ink); /* カード枠 */
--border-button: 4px solid var(--color-ink); /* ボタン枠 */
--rule-dotted: 2px dotted var(--color-rule); /* 淡い点線罫線 */
--rule-dotted-strong: 2px dotted var(--color-ink); /* 濃い点線罫線 */
/* ===== トランジション ===== */
--t-fast: .25s;
--t-mid: .5s ease;
--t-slow: .7s ease-out; /* スクロールリビール */
/* ===== ブレークポイント（参考値。メディアクエリで直接使用）===== */
--bp-tablet: 980px; /* グリッド多段→1カラム */
--bp-mobile: 760px; /* ヘッダー縮小・ハンバーガー */
}
/* =========================================================================
ベース（任意・公式の読み心地を再現したいとき）
========================================================================= */
/*
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-ink);
font-family: var(--font-body);
font-size: var(--body-size);
font-weight: var(--body-weight);
line-height: var(--body-line);
letter-spacing: var(--body-tracking);
-webkit-font-smoothing: antialiased;
}
*/
/* =========================================================================
すぐ使えるコンポーネントクラス（公式パターン準拠・任意）
========================================================================= */
/* 大型CTAボタン（プライマリ） */
.btn-cta {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
width: 442px; max-width: 100%; height: 96px;
background: var(--color-ink); border: var(--border-button); border-radius: var(--radius-button);
color: #fff; font-family: var(--font-button);
font-size: var(--fs-label-sm); font-weight: var(--fw-bold); letter-spacing: 0.04em; line-height: 1;
transition: opacity var(--t-fast); cursor: pointer;
}
.btn-cta:hover { opacity: .85; color: #fff; }
/* セカンダリボタン（白地・墨枠） */
.btn-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
height: 96px; padding: 0 32px; max-width: 100%;
background: #fff; border: var(--border-button); border-radius: var(--radius-button);
color: var(--color-ink); font-family: var(--font-button);
font-size: var(--fs-label-sm); font-weight: var(--fw-bold); letter-spacing: 0.04em; line-height: 1;
transition: opacity var(--t-fast); cursor: pointer;
}
.btn-secondary:hover { opacity: .85; }
/* カード（白＋2px枠＋角丸0＋影なし） */
.card {
background: var(--color-white); border: var(--border-card); border-radius: var(--radius-card);
padding: 34px;
}
/* 大見出し＋装飾（横線＋丸ドット） */
.h-title {
font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-regular);
letter-spacing: 0.06em; color: var(--color-ink); line-height: 1.3;
}
.h-deco { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: var(--space-4); }
.h-deco::before { content: ""; width: 64px; height: 2px; background: var(--color-ink); }
.h-deco i { width: 4px; height: 4px; border-radius: 50%; background: var(--color-ink); display: block; }
/* ＼ ／ 斜線見出し */
.h-slash { display: inline-flex; align-items: flex-start; gap: var(--space-4); }
.h-slash::before { content: "＼"; }
.h-slash::after { content: "／"; }
.h-slash::before, .h-slash::after {
font-family: var(--font-display); font-size: var(--fs-slash); color: var(--color-ink);
line-height: 1.1; transform: translateY(4px);
}
/* 定義リスト行（料金・設備表に最適） */
.defrow {
display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6); padding: 22px 0;
border-bottom: var(--rule-dotted); align-items: start;
}
.defrow:first-child { border-top: var(--rule-dotted); }
.defrow__k { font-family: var(--font-display); font-size: var(--fs-key); color: var(--color-ink); letter-spacing: 0.04em; }
.defrow__v { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.9; letter-spacing: 0.08em; color: var(--color-ink); }
.defrow__v .price { font-size: var(--fs-price); font-weight: var(--fw-bold); }
.defrow__v .note { font-size: var(--fs-sm); color: var(--color-sub); }
@media (max-width: 760px) {
.btn-cta { width: 100%; height: 76px; font-size: 20px; }
.defrow { grid-template-columns: 1fr; gap: 6px; }
}