/* ウララ歯科 統合サイト デザイントークン（唯一の定義場所。値の変更はここだけ）
   値は docs/design-main.md §1・docs/design-recruit.md §1 の実測値（STUDIO の --s-color-* と 1280px スクショ）。
   変数名は既存のまま維持し、実測で増えた色は追加した。ここに無い色をページ CSS に直書きしない。 */
:root {
  /* ---- 色 [DOM 実測] ---- */
  --c-orange: #E56300;        /* 主色: ボタン塗り・リンク・H1・英字ラベル・Q 記号・価格 */
  --c-orange-2: #E36200;      /* グラデ始点（採用サイトへ／電話ピル／ENTRY 帯） */
  --c-orange-3: #E9893D;      /* グラデ中間・ホバー（DOM 11 件） */
  --c-orange-deep: #C95500;   /* ホバー時の濃色（既存名を維持。現行は transform だけで色は変えない） */
  --c-orange-ans: #E56300;    /* よくある質問の「A」の丸の塗り（医院・採用共通）＝主色。9/28 より前のこのサイトの見た目（ユーザーの記憶の「濃いオレンジ」）に戻す 2026-09-29。白字は 3.43:1（24px の大きな字の基準 3:1 は満たす。A は aria-hidden の飾り） */
  --c-peach: #EEAD75;         /* グラデ終点・薄いオレンジ面・フッター最下段の帯・丸ボタンの chevron */
  --c-peach-soft: #F7E7DB;    /* 薄い面: 価格セル・帯・電話アイコンの丸・採用のカード地・入力欄 */
  --c-cream: #F9F6F4;         /* ページ背景 */
  --c-cream-2: #F7E7DB;       /* = peach-soft（design-main の --c-cream-2 と同値） */
  --c-white: #FFFFFF;
  --c-ink: #333333;           /* 本文（医院） */
  --c-ink-deep: #271200;      /* H2/H3・採用の本文 */
  --c-ink-soft: #574D45;      /* 補足・フッター小リンク・募集要項の値 */
  --c-brown: #664328;         /* 線画アイコン・スタッフ名（Figma illust/nomal） */
  --c-orange-light: #F0831E;  /* Figma の中間オレンジ（アイコンの差し色） */
  --c-logo-text: #727171;     /* Figma logo/text（ロゴの和文字の灰） */
  --c-line: #F1EAE5;          /* 薄い罫・スマイル透かし・ナビ区切り（1px solid） */
  --c-line-2: #C5B5A8;        /* 点線罫の標準（1px dashed） */
  --c-line-3: #B5A090;        /* フッターの点線 */
  --c-line-peach: #F0C9A6;    /* 採用フッター（SP）のグループ区切りの実線 [参照 344 実測] */
  --c-mouth-1: #EBE2DB;       /* フッター「口の中」上の歯の下（参照 pc1280 実測 #EDE4DD 付近） */
  --c-mouth-2: #F3EEEA;       /* 同 中段 */
  --c-mouth-3: #F7F3F0;       /* 同 下段（下の歯の周り） */
  --c-tongue: #F1E9E4;        /* 同 舌（薄いベージュピンクの双丘） */
  --c-tongue-2: #E8DED7;      /* 同 舌の上縁（参照 pc1920 実測 (232,222,215)。丘の縁だけ濃く、内側は --c-tongue へ） */
  --c-mouth-line: #E4E0DD;    /* 同 SP（〜767）の口の輪郭 1px [参照 440 実測 (231,228,226)〜(239,237,234)] */
  --c-band-sp: #E8904C;       /* 同 SP の最下段の帯（PC の --c-peach より濃い）[参照 440/393/344 平均 (232,144,76)] */
  --c-hero-peach: #FFDABC;    /* 下層ページ上端グラデの左上ピーチ [about/case 実測] */
  --c-line-form: #707070;     /* 入力欄の枠（採用フォーム） */
  --c-placeholder: #CCCCCC;   /* プレースホルダ */
  --c-gray-logo: #616161;     /* フッター横ロゴの文字 */
  --c-yellow: #F5C842;        /* ✦ 飾り */
  --c-hero-top: #FFF3C4;      /* ページ上端グラデの黄み（医院） */
  --c-hero-mid: #FDD9B8;      /* 同ピーチ（採用 #FDD9B8 / 医院 #F3C9A6） */
  --c-hero-left: #F5DCC0;
  --c-hero-right: #F3C9A6;
  --c-hero-yellow: #FFF0C2;   /* 採用の上部グラデ始点 */
  --c-chart-1: #E56300;       /* 円・棒グラフ 濃→淡 */
  --c-chart-2: #ED8B41;
  --c-chart-3: #F2A368;
  --c-chart-4: #FFC397;
  --c-scrim: rgba(0, 0, 0, 0.16);  /* 写真上の文字帯 */
  --c-focus: #1A73E8;
  /* Figma: 白いピル（医院ヘッダーのナビ・ハンバーガー）の影 DROP_SHADOW 0 0 6 #C49A84/20%（医院 Header 477:388・SP/header 556:5458） */
  --shadow-pill: 0 0 6px rgba(196, 154, 132, 0.2);

  /* グラデ */
  --g-orange: linear-gradient(90deg, var(--c-orange-2), var(--c-peach));
  /* 医院トップ: 上端は幅いっぱいレモン → 中段ピーチ寄り → クリーム（参照 pc1280: y0 #FFF5C2 / y500 #FEE2C4 / y750 クリーム） */
  --g-page-top: linear-gradient(180deg, #FFF5C2 0%, #FFEEC1 28%, #FEE3C2 62%, var(--c-cream) 100%);
  /* 同 1080〜（参照 pc1920 左端列: y0 #FFEDC1 / y400 #FFDFC1 / y500 #FEE2C9 / y600 #FAECDF / y700 クリーム。帯の高さ 780 に対する割合） */
  --g-page-top-pc: linear-gradient(180deg, #FFF0C2 0%, #FFE8C1 30%, #FFE0C1 55%, #FDE6D2 75%, var(--c-cream) 100%);
  /* 医院下層: 左上ピーチ・右上レモン、左は早く・右は遅くクリームへ（参照 about/case pc1280: (0,0) #FFDABC / (1270,0) #FFF8C2 / (0,300) クリーム / (1270,300) #FEDCC0） */
  --g-page-top-sub: radial-gradient(100% 130% at 100% 0%, var(--c-hero-top) 0%, rgba(255, 243, 196, 0) 62%),
                    radial-gradient(120% 80% at 0% 0%, var(--c-hero-peach) 0%, rgba(255, 218, 188, 0) 68%),
                    linear-gradient(180deg, #FFE6C8 0%, rgba(255, 230, 200, 0) 60%);
  /* 医院下層 1080〜: 右上のレモンは右端で帯の全高（1920: 766）まで、左上のピーチは 45%（1920: 350）で消える [about/case pc1280/1440/1920 実測] */
  --g-page-top-sub-pc: radial-gradient(90% 100% at 100% 0%, var(--c-hero-top) 0%, rgba(255, 243, 196, 0) 100%),
                       radial-gradient(110% 45% at 0% 0%, var(--c-hero-peach) 0%, rgba(255, 218, 188, 0) 100%),
                       linear-gradient(180deg, #FFE6C8 0%, rgba(255, 230, 200, 0) 40%);
  --g-page-top-recruit: linear-gradient(180deg, var(--c-hero-yellow) 0%, var(--c-hero-mid) 45%, var(--c-cream) 100%);
  /* 〜599 の上端グラデ（2026-09-24 参照 ip440/ip393/fold344 の画素から起こした式）。
     医院下層: 右上 → 左下へ 12.4° 傾いた帯。右上の角から測った距離 d で 0 #FFF8C2 → 0.222W #FFDCBF（稜線。左端 y≈3・右端 y≈0.22W）→ 0.41W #F8F4F2。帯の高さ 0.445W（下は地のクリーム） */
  --g-page-top-sub-sp: linear-gradient(192.4deg, #FFF8C2 0, #FFDCBF 22.2vw, #F8F4F2 41vw);
  /* 採用: 幅に関係なく高さ 860 の絵を横だけ伸ばしたもの（左端と右端の縦の色が 440/344 で同じ）。色は t = y − 120·(x/W) の関数:
     t −120 #FFF7C1 / 0 #FFF3C3 / 120 #FEECC0 / 300 #FEE4C1 / 420 #FFDDC0（稜線）/ 480 #FDE5D0 / 540 #F9EDE4 / 600 #F9F5F2。横に伸ばす絵なので SVG（preserveAspectRatio=none）で描く */
  --g-page-top-recruit-sp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 860' preserveAspectRatio='none'%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='-120' x2='-354.098' y2='175.082'%3E%3Cstop offset='0' stop-color='%23FFF7C1'/%3E%3Cstop offset='.1667' stop-color='%23FFF3C3'/%3E%3Cstop offset='.3333' stop-color='%23FEECC0'/%3E%3Cstop offset='.5833' stop-color='%23FEE4C1'/%3E%3Cstop offset='.75' stop-color='%23FFDDC0'/%3E%3Cstop offset='.8333' stop-color='%23FDE5D0'/%3E%3Cstop offset='.9167' stop-color='%23F9EDE4'/%3E%3Cstop offset='1' stop-color='%23F9F5F2'/%3E%3C/linearGradient%3E%3Crect width='100' height='860' fill='url(%23g)'/%3E%3C/svg%3E");
  /* 採用トップ: 同じ色で t = y − 40 − 40·(x/W)（左端は下層より 40 下、右端は 40 上でクリームに。344 の y520 右端でまだピーチ、y680 でクリーム） */
  --g-page-top-recruit-home-sp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 860' preserveAspectRatio='none'%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='-80' x2='-248.276' y2='540.69'%3E%3Cstop offset='0' stop-color='%23FFF7C1'/%3E%3Cstop offset='.1667' stop-color='%23FFF3C3'/%3E%3Cstop offset='.3333' stop-color='%23FEECC0'/%3E%3Cstop offset='.5833' stop-color='%23FEE4C1'/%3E%3Cstop offset='.75' stop-color='%23FFDDC0'/%3E%3Cstop offset='.8333' stop-color='%23FDE5D0'/%3E%3Cstop offset='.9167' stop-color='%23F9EDE4'/%3E%3Cstop offset='1' stop-color='%23F9F5F2'/%3E%3C/linearGradient%3E%3Crect width='100' height='860' fill='url(%23g)'/%3E%3C/svg%3E");
  /* 採用下層の PC: 参照 1920（dentist/entry/work）は黄色ではなく薄いピーチ（#FFE5C1）で、右上が濃く左は 450px・右は 600px ほどでクリームに溶ける */
  --g-page-top-recruit-sub-pc: radial-gradient(70% 100% at 100% 0%, #FFE2C0 0%, rgba(255, 226, 192, 0) 100%), linear-gradient(180deg, #FFE7C8 0%, rgba(255, 231, 200, 0) 75%);
  --g-mouth: radial-gradient(80% 70% at 50% 0%, var(--c-line) 0%, var(--c-white) 70%);
  /* SP フッター（〜767）の口の中と舌。参照 440 の縦の色の実測（口の上端から: 歯の隙間 (240,231,226) → 0.45W で地のクリーム。舌の頂 (234,224,217) → 0.73W で地） */
  --g-mouth-sp: linear-gradient(180deg, #ECE3DD 0%, #F0E9E4 16%, #F3EDE9 23%, #F6F1EE 29%, #F7F3F0 42%, var(--c-cream) 52.5%);
  --g-tongue-sp: linear-gradient(180deg, #EAE0D9 0%, #EFE7E1 17%, #F3EDE8 30%, #F6F1EE 40%, #F7F3F1 57%, var(--c-cream) 68%);

  /* ---- 書体（ゴシックのみ。Zen Maru Gothic は 500 が基本、700 はトップ FV の歯型バッジだけ） ----
     Figma（医院 QEBiVg… / 採用 oONMKi…）のスタイル: 和文は Zen Maru Gothic Medium、英字は Roboto Regular（採用 PC の一部は TharLon だが SP・医院は Roboto → Roboto に統一）。
     医院トップの ACCESS 等に Zen Kaku Gothic Antique（ゴシック）が使われている → --f-kaku で使えるようにした */
  --f-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --f-body: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --f-en: "Roboto", "Zen Maru Gothic", "Noto Sans JP", sans-serif;   /* 2026-09-25 Figma に合わせ Inter → Roboto */
  --f-kaku: "Zen Kaku Gothic Antique", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ---- 型スケール（PC / SP を clamp で。design-main §1-2） ---- */
  --fs-h1: clamp(28px, 2.2rem + 0.9vw, 40px);      /* 40 / 28 */
  --fs-h2: clamp(24px, 1.55rem + 0.6vw, 32px);     /* 32 / 24 */
  --fs-h3: clamp(20px, 1.25rem + 0.45vw, 26px);    /* 26 / 20 */
  --fs-h4: clamp(16px, 1rem + 0.3vw, 20px);
  --fs-lead: clamp(20px, 1.25rem + 0.3vw, 24px);   /* オレンジ 1 行キャッチ */
  --fs-body: clamp(14px, 0.875rem + 0.2vw, 16px);  /* Figma PC/p 16（1024〜）/ SP 14 */
  --fs-body-l: clamp(16px, 1rem + 0.3vw, 20px);
  --fs-small: clamp(13px, 0.8rem + 0.15vw, 16px);  /* キャプション 16 / 14 */
  --fs-xs: 13px;                                   /* 注記 */
  --fs-label: clamp(14px, 0.875rem + 0.15vw, 16px);/* 英字ラベル 16 / 14 */
  --fs-btn: clamp(16px, 1rem + 0.15vw, 18px);      /* ボタン 18 / 16（Figma PC/btn-text 18/1.7 字間 6%、SP 16） */
  --fs-num: clamp(32px, 2rem + 1.8vw, 56px);       /* 大数字 56 / 32 */
  --lh-body: 1.7;
  --lh-loose: 2.2;
  --lh-tight: 1.35;
  --ls-heading: 0.06em;
  --ls-label: 0.25em;
  --ls-body: 0.02em;   /* 〜1079 は原本合わせのまま。1080〜 は Figma 本文（文章テキスト 16）の字間 6%（下の @media） */
  --ls-btn: 0.06em;
  --ls-vertical: 0.2em;

  /* ---- 余白 ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(80px, 6vw + 40px, 160px);     /* セクション間 PC 120〜180 / SP 80〜100 */
  --section-y-s: clamp(48px, 4vw + 24px, 96px);
  --head-gap: clamp(32px, 3vw + 16px, 64px);       /* H2 の下 40〜64 */
  --card-pad: clamp(20px, 2vw + 12px, 48px);       /* カード内 PC 48〜96 / SP 20〜24 */
  --card-pad-l: clamp(24px, 4vw + 8px, 96px);
  --gutter: 20px;                                  /* SP 左右 20px（344 で本文 20〜324） */
  --container: 1200px;                             /* 採用 1200 / 医院 1120（area で上書き） */
  --container-md: 1120px;
  --container-narrow: 976px;                       /* 悩み格子・FAQ 2 列 */
  --container-text: 944px;                         /* 症状本文・FAQ 1 列・プライバシー */
  --container-read: 800px;

  /* ---- 角丸・影（影は使わない。面は白カード＋角丸で分ける） ---- */
  --r-s: 8px; --r-m: 16px; --r-l: 24px; --r-xl: 32px; --r-xxl: 40px; --r-pill: 999px;
  --r-photo: 24px;
  --shadow-card: none;
  --shadow-float: none;
  --shadow-drop: 0 10px 0 0 rgba(0, 0, 0, 0.1);   /* 採用 CTA 4 箇所のベタ落ち影（原則使わない） */
  --dash: 1px dashed var(--c-line-2);
  --dash-ft: 1px dashed var(--c-line-3);

  /* ---- ヘッダー高さ（医院 80 / 120、採用 70 / 90） ---- */
  --hd-h: 80px;
  --tap: 44px;
}
@media (min-width: 768px) { :root { --gutter: 32px; --hd-h: 90px; } }
@media (min-width: 1080px) { :root { --gutter: 40px; --hd-h: 89px; --ls-body: 0.06em; } }   /* ヘッダー 89 = Figma 医院 Header 477:388（1366×89） */
/* 医院エリアはコンテナ 1120。採用は 1200・ヘッダー 70 / 90。1080〜 は医院 89（Figma Header 477:388）・採用 108（Figma 採用ヘッダー 72:913 = 上下 24 ＋ ピル 60） */
.area-main { --container: 1120px; }
.area-recruit { --hd-h: 70px; --r-photo: 16px; }
@media (min-width: 768px) { .area-recruit { --hd-h: 90px; } }
@media (min-width: 1080px) { .area-recruit { --hd-h: 108px; } }