/* contact/index.html 専用のスタイル。site.css から切り出したもの（#212）。
   このファイルは contact/index.html だけが読み込む。共通で使うものは site.css へ戻すこと。 */

/* --- セクション見出し ----------------------------------------------------
   eyebrow ＋ 和文見出し。ABOUT / Business の .corp-title をそのまま使うと
   このページでは見出しが主役になりすぎるため、この面でだけ一段小さくする
   （共通の .corp-title は書き換えない）。 */
.contact-title {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
}
/* --- 01 窓口の一覧 -------------------------------------------------------
   旧版は角丸カード3枚だったが、3つとも横並びの選択肢なので、カードで
   囲うほど「どれを選べばいいか」が読み取りにくくなっていた。NEWS一覧と
   同じ考え方で、細い罫線で仕切った3行にして見出し・説明・CTAの位置を
   そろえる。shadow・角丸カード・pillは使わない。 */
.contact-routes {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
.contact-route {
  display: grid;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 900px) {
  .contact-route {
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem 0;
  }
}

.contact-route__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: var(--brand-deep);
  /* 窓口名は「飲食店様向け〜」など長い複合語なので、文節単位で折り返す
     （NEWS の見出しと同じ理由。未対応ブラウザは従来どおり） */
  word-break: auto-phrase;
}
.contact-route__text {
  margin: 0.7rem 0 0;
  max-width: 36rem;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--muted-foreground);
  word-break: auto-phrase;
}
/* CTA は共通の角型 secondary（.corp-btn--outline）をそのまま使う。
   行の中に置くので上マージンだけ外し、SPでは行いっぱいに広げて
   タップ領域を確保する。 */
.contact-route__cta {
  margin-top: 0;
}
/* 共通の .corp-btn はブラウザ既定のフォーカスリングに任せているが、この
   ページは「押す」ことが目的なので、キーボード操作時の現在地を明示する。
   共通クラスは書き換えず、このページのCTAだけに足す。 */
.contact-route__cta:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

@media (max-width: 899px) {
  .contact-route__cta {
    /* 1カラムに落ちる幅では行いっぱいに広げてタップ領域を稼ぐ。ただし
       TB（768px前後）で横長になりすぎないよう上限を設ける。 */
    width: 100%;
    max-width: 24rem;
    justify-content: center;
  }
}

/* --- 02 電話 -------------------------------------------------------------
   フォームが使えないとき用の代替導線。電話番号と受付時間の2項目だけを
   細い罫線で仕切って置く。番号がこの面の主役なので一段大きく取る。 */
.contact-tel {
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--border);
}
.contact-tel__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .contact-tel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
  }
  .contact-tel__item {
    padding: 1.75rem 0;
    border-bottom: 0;
  }
  .contact-tel__item + .contact-tel__item {
    padding-left: 3rem;
    border-left: 1px solid var(--border);
  }
}

.contact-tel__label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--brand);
}
.contact-tel__value {
  margin: 0.5rem 0 0;
}
/* 電話番号は行内リンクだが、SPで指で押す対象なので高さを 44px 確保する。 */
.contact-tel__num {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-deep);
  text-decoration: none;
  transition: color 200ms ease;
}
.contact-tel__num:hover,
.contact-tel__num:focus-visible {
  color: var(--brand);
}
.contact-tel__num:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.contact-tel__hours {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--foreground);
}