/* =====================================================================
   JAPAN TENANT — Design System (v2)  ★単一ソース★
   ボスへ: サイト全体の色・余白・角丸・書体はこの1ファイルで変更できます。
   ここを書き換えると、React本体(トップ/診断/検索)と、静的SEOページ・共通
   ヘッダー/フッター(index.html)の両方に一括で反映されます。
   （public/ に置き index.html から <link> するため、全ページに適用されます）
   ---------------------------------------------------------------------
   旧デザイン(coral #e2603f + navy #11203a)は全廃。淡ブルーグレー地に
   明るめnavyのCTA・テラコッタのアクセントで、落ち着いた雑誌的トンマナへ。
   ===================================================================== */

:root {
  /* ── Base（地の色）───────────────────────────────── */
  --color-bg:        #F1F3F4;   /* 淡ブルーグレー（メイン背景） */
  --color-bg-sub:    #E7EBEE;   /* 補助背景（セクション区切り等） */
  --color-bg-card:   #FFFFFF;   /* カードは真白でコントラスト */

  /* ── Text（文字）───────────────────────────────── */
  --color-text:       #253340;  /* 本文（真墨より軽い） */
  --color-text-sub:   #6B7580;  /* サブ文字 */
  --color-text-muted: #96A0AA;  /* 補足・プレースホルダ */
  --color-text-on-primary: #FFFFFF; /* primary地の上の文字 */

  /* ── Border（境界）───────────────────────────────── */
  --color-border:        #D9DEE1;
  --color-border-strong: #B8C0C8;

  /* ── Accent（アクセント）─────────────────────────── */
  --color-primary:        #3E5A78;  /* CTA/リンク（明るめnavy） */
  --color-primary-hover:  #4E6D8E;
  --color-primary-soft:   #EAF0F5;  /* primaryの淡い地（選択chip等） */
  --color-secondary:      #A88371;  /* バッジ/アイコン（テラコッタ） */
  --color-secondary-soft: #F3ECE7;  /* secondaryの淡い地 */
  --color-success:        #3E7D5A;  /* 確認済み・件数取得成功 */
  --color-success-soft:   #E7F1EB;
  --color-warning:        #9A7B3A;  /* 混雑検知/一部反映などの注記 */
  --color-error:          #B85450;

  /* ── Spacing（余白スケール）──────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Radius（角丸）───────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── Elevation（影・控えめ）──────────────────────── */
  --shadow-sm: 0 1px 3px rgba(37, 51, 64, .06);
  --shadow-md: 0 4px 16px rgba(37, 51, 64, .08);
  --shadow-lg: 0 12px 32px rgba(37, 51, 64, .12);

  /* ── Typography（書体）───────────────────────────── */
  /* 見出し: 明朝 / 本文・UI: ゴシック / 数字・英字: Inter / ロゴ: Cormorant */
  --font-serif:  "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans:   "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-num:    "Inter", "Noto Sans JP", system-ui, sans-serif;      /* 数字・英字 */
  --font-logo:   "Cormorant Garamond", "Noto Serif JP", serif;        /* ロゴ・ヒーロー欧文 */

  /* サイズスケール: 12/14/16/18/20/24/32/48/64 */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;

  /* ── Layout（レイアウト）─────────────────────────── */
  --container:      1120px;  /* コンテンツ最大幅 */
  --container-read:  820px;  /* 読み物・フォームの読みやすい幅 */

  /* セクション間: 64px / モバイル40px（下の @media で上書き） */
  --section-gap: var(--space-3xl);

  /* ── Motion（モーション・最小限）─────────────────── */
  --ease:         cubic-bezier(.2, .7, .2, 1);
  --dur-fast:     140ms;
  --dur:          200ms;
  --dur-drawer:   250ms;

  /* ── Z-index（重なり順の単一定義）───────────────── */
  --z-header:  900;
  --z-scrim:   950;
  --z-drawer: 1000;
  --z-dock:     50;
  --z-toast:    60;
  --z-sheet:    70;
  --z-onb:      80;
}

@media (max-width: 720px) { :root { --section-gap: 40px; } }

/* =====================================================================
   Base element styles（リセット＋地の設定）
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.35; color: var(--color-text); margin: 0; }
h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; margin: 0; }

a { color: var(--color-primary); text-decoration: none; }
@media (hover: hover) { a:hover { color: var(--color-primary-hover); } }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =====================================================================
   Global chrome — ヘッダー / ハンバーガー / ドロワー / フッター
   #root の外(index.html)に置くため、React全ページ＋静的SEOページに継承される。
   すべて theme トークンで着色（旧coral/navyのハードコードを撤去）。
   ===================================================================== */
.jtnav {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.3) blur(8px);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
}
.jtnav-in {
  max-width: var(--container); margin: 0 auto; height: 58px;
  padding: 0 var(--space-md);
  display: flex; align-items: center; justify-content: space-between;
}
.jtnav-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.jtnav-logo:hover { color: inherit; }
.jtnav-mark {
  width: 30px; height: 30px; flex: 0 0 auto; align-self: center;
  display: block; object-fit: contain;
}
.jtnav-mark svg { width: 17px; height: 17px; }
.jtnav-name {
  font-family: var(--font-logo);
  font-size: 22px; font-weight: 600; letter-spacing: .04em;
  color: var(--color-text); line-height: 1;
}
.jtnav-burger {
  width: 44px; height: 44px; margin-right: -8px; border: none; background: none;
  cursor: pointer; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--color-text);
}
.jtnav-burger:hover { background: var(--color-bg-sub); }

.jtnav-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(37, 51, 64, .42); opacity: 0; transition: opacity var(--dur-drawer);
}
.jtnav-scrim.on { opacity: 1; }
.jtnav-drawer {
  position: fixed; top: 0; right: 0; z-index: var(--z-drawer); height: 100%;
  width: min(320px, 86vw); background: var(--color-bg-card);
  box-shadow: -12px 0 40px rgba(37, 51, 64, .18);
  transform: translateX(100%); transition: transform var(--dur-drawer) var(--ease);
  padding: var(--space-md) 0 var(--space-lg); overflow-y: auto; font-family: var(--font-sans);
}
.jtnav-drawer.on { transform: translateX(0); }
.jtnav-close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: none;
  background: none; cursor: pointer; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--color-text);
}
.jtnav-close:hover { background: var(--color-bg-sub); }
.jtnav-dh {
  font-size: 11px; letter-spacing: .16em; font-weight: 700;
  color: var(--color-secondary); padding: 16px 22px 6px;
}
.jtnav-sec { display: flex; flex-direction: column; }
.jtnav-sec.jtnav-sec2 { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 8px; }
.jtnav-sec a {
  display: flex; align-items: center; gap: 8px; padding: 13px 22px; text-decoration: none;
  font-size: 15px; font-weight: 600; color: var(--color-text);
}
.jtnav-sec2 a { font-size: 13.5px; font-weight: 500; color: var(--color-text-sub); padding: 11px 22px; }
.jtnav-sec a:hover { background: var(--color-primary-soft); color: var(--color-primary); }

/* フッター（3ブロック: サービス / 情報 / 運営） */
.jtfoot {
  background: var(--color-bg-sub); border-top: 1px solid var(--color-border);
  font-family: var(--font-sans); color: var(--color-text-sub); margin-top: var(--section-gap);
}
.jtfoot-in {
  max-width: var(--container); margin: 0 auto; padding: var(--space-2xl) var(--space-md) var(--space-lg);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl);
}
@media (max-width: 640px) { .jtfoot-in { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }
.jtfoot-brand { grid-column: 1 / -1; }
@media (min-width: 641px) { .jtfoot-brand { grid-column: auto; } }
.jtfoot-logo { font-family: var(--font-logo); font-size: 22px; font-weight: 600; color: var(--color-text); letter-spacing: .04em; }
.jtfoot-tag { font-size: 13px; line-height: 1.8; margin-top: 8px; max-width: 30ch; }
.jtfoot-h { font-size: 11px; letter-spacing: .12em; font-weight: 700; color: var(--color-text-muted); margin-bottom: 12px; }
.jtfoot-col a { display: block; font-size: 14px; color: var(--color-text-sub); padding: 6px 0; text-decoration: none; }
.jtfoot-col a:hover { color: var(--color-primary); }
.jtfoot-bottom {
  max-width: var(--container); margin: 0 auto;
  padding: var(--space-md); border-top: 1px solid var(--color-border);
  font-size: 12px; color: var(--color-text-muted);
}