/* 「どこ行く？」の見た目。
   色・フォントは kwit-design の正本のみ（自作しない）。
   寸法は黄金比 1:1.618（社長制定 2026-08-03 マスタールール）。 */

:root {
  /* ── KWIT 正本パレット（この表にない有彩色を作らない） ── */
  --green:       #00c850;  /* コーポレートグリーン（主） */
  --green-deep:  #00b983;  /* 濃い緑が要る時はコレ */
  --teal:        #00aea4;
  --ink:         #3a3a3a;  /* 本文。黒 #000 は使わない */
  --gray:        #a1a1a1;  /* 注記 */
  --rule:        #e2e2e2;
  --bg-soft:     #f6f6f6;
  --mint:        #effbf7;
  --lime:        #aae505;

  /* ── フォント（会社サイトと同じスタック） ── */
  --font:    "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Noto Sans JP","メイリオ",Meiryo,sans-serif;
  --font-en: "Oswald", sans-serif;

  /* ── 黄金比の段（1rem を本文として ×1.618） ── */
  --fs-caption: .618rem;
  --fs-body:    1rem;
  --fs-h3:      1.272rem;   /* √1.618＝半段 */
  --fs-h2:      1.618rem;
  --fs-h1:      2.618rem;

  /* ── 余白（8pxベースのフィボナッチ近似） ── */
  --sp-1: 8px; --sp-2: 13px; --sp-3: 21px; --sp-4: 34px; --sp-5: 55px;
}

* { box-sizing: border-box; }

html { font-size: 17px; }        /* スマホで読める本文基準 */

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.618;
  color: var(--ink);
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

/* ── 合言葉の関所 ───────────────────────────── */
.gate {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: center;
}
.gate__logo { width: 144px; height: auto; }   /* 最小64px規定を満たす */
.gate__title { font-size: var(--fs-h1); line-height: 1.2; margin: 0; }
.gate__lead  { margin: 0; color: var(--gray); }
.gate__form  { display: flex; flex-direction: column; gap: var(--sp-2); width: min(100%, 340px); }
.gate__input {
  font-family: var(--font);
  font-size: var(--fs-body);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: var(--sp-1);
  min-height: 48px;
}
.gate__input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.gate__msg { margin: 0; color: var(--green-deep); min-height: 1.618em; }
.gate__msg.is-bad { color: var(--ink); }

/* ── ヘッダ ─────────────────────────────────── */
.head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.head__logo  { width: 88px; height: auto; }
.head__title { font-size: var(--fs-h3); margin: 0; line-height: 1.2; }

/* ── 選ぶところ ─────────────────────────────── */
.home { padding: var(--sp-3); padding-bottom: var(--sp-5); }

.pick { margin-bottom: var(--sp-3); }
.pick__label {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: 0 0 var(--sp-1);
  padding-left: var(--sp-1);
  border-left: 3px solid var(--green);   /* KWIT の見出し＝緑の縦線 */
  line-height: 1.2;
}

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.chip {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-3);
  min-height: 44px;                       /* 指で押せる高さ */
  cursor: pointer;
}
.chip.is-on {
  background: var(--mint);
  border-color: var(--green);
  font-weight: 700;
}

/* ── 地域 ───────────────────────────────────── */
.where {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-soft);
  border-radius: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.where__now { font-weight: 700; }

/* ── ボタン ─────────────────────────────────── */
.btn {
  font-family: var(--font);
  font-size: var(--fs-body);
  border-radius: var(--sp-1);
  min-height: 48px;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.btn--primary { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.btn--primary:active { background: var(--green-deep); border-color: var(--green-deep); }
.btn--ghost { background: #fff; }
.btn--go { width: 100%; min-height: 55px; font-size: var(--fs-h3); }
.btn:disabled { opacity: .45; cursor: default; }

/* ── お知らせ・注記 ─────────────────────────── */
.note { margin: var(--sp-2) 0 0; min-height: 1.618em; }
.note--quiet { color: var(--gray); font-size: var(--fs-caption); text-align: center; }

/* ── 結果カード（縦横比 1.618:1 を意識した余白） ── */
.results { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }

.card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--green);      /* KWIT のカード上辺 */
  border-radius: var(--sp-1);
  padding: var(--sp-3);
}
.card__name { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 var(--sp-1); line-height: 1.2; }
.card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-2); }
.card__num  { font-family: var(--font-en); font-size: var(--fs-h3); line-height: 1; color: var(--green-deep); }
.card__unit { color: var(--gray); font-size: var(--fs-caption); }
.card__open {
  display: inline-block;
  background: var(--mint);
  color: var(--green-deep);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 0 var(--sp-1);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.card__addr { color: var(--gray); font-size: var(--fs-caption); margin: 0 0 var(--sp-2); }
.card__acts { display: flex; gap: var(--sp-1); }
.card__acts .btn { flex: 1; text-align: center; text-decoration: none; line-height: 46px; padding: 0; }
.card__acts .btn--tel { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.card__acts .btn--tel[aria-disabled="true"] {
  background: var(--bg-soft); border-color: var(--rule); color: var(--gray); font-weight: 400; pointer-events: none;
}
.card__ask {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-caption);
  color: var(--gray);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-1);
}

/* ── 地域シート ─────────────────────────────── */
.sheet {
  position: fixed; inset: 0;
  background: rgba(58,58,58,.45);
  display: flex; align-items: flex-end;
  z-index: 10;
}
.sheet__panel {
  background: #fff;
  width: 100%;
  max-height: 82svh;
  overflow-y: auto;
  border-radius: var(--sp-3) var(--sp-3) 0 0;
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.sheet__title { font-size: var(--fs-h3); margin: 0; line-height: 1.2; }
.sheet__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.sheet__group { font-size: var(--fs-caption); color: var(--gray); margin: var(--sp-1) 0 0; }

/* ── 足元 ───────────────────────────────────── */
.foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--gray);
}
.foot__usage { font-family: var(--font-en); }

/* ── v2-2 追加 ─────────────────────────────── */
.card__cal {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--green-deep);
  text-decoration: none;
}
.credit {
  margin: var(--sp-2) 0 0;
  text-align: center;
  font-size: var(--fs-caption);
}
.credit a { color: var(--gray); text-decoration: none; }

/* ── v2-3 追加（いつ？・2ブロック・もっと見る・リンク行） ── */
.when { display: flex; gap: var(--sp-1); }
.when__input {
  font-family: var(--font);
  font-size: var(--fs-body);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--rule);
  border-radius: var(--sp-1);
  min-height: 44px;
  background: #fff;
  color: var(--ink);
}
.note--left { text-align: left; }
.results__head {
  font-size: var(--fs-body);
  font-weight: 700;
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-1);
  border-left: 3px solid var(--green);
  line-height: 1.4;
}
.card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-1);
}
.card__link {
  font-size: var(--fs-caption);
  color: var(--green-deep);
  text-decoration: none;
}
.btn--more { width: 100%; }
/* v2-5: 「ネット予約の入口が見つからないお店」は畳む段。
   主役ではないので線の色を落とす（消しはしない＝情報は残す）。 */
.results__head--fold {
  border-left-color: var(--line, #d7d2c8);
  color: var(--ink-sub, #6b6459);
}
.results__note {
  font-size: var(--fs-caption);
  color: var(--ink-sub, #6b6459);
  margin: var(--sp-1) 0 0;
  padding-left: var(--sp-1);
}