/*
  予約・問い合わせ
  いちばん上に「いま営業中か」を大きく出し、その下に押してほしい順でボタンを並べる。
  一番上のボタンだけ塗り、残りは枠だけ（contact.js が状態に合わせて付け替える）。
*/
/* 部品の幅でボタンの並びを変える（差し込む先の段組みに合わせるため、画面幅ではなく部品の幅で見る） */
.fhp-contact { container-type: inline-size; }
.fhp-contact-status { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; align-items: baseline; margin: 0; }
.fhp-contact-dot {
  width: .8rem;
  height: .8rem;
  border: 2px solid var(--fhp-edge);
  border-radius: 50%;
  transform: translateY(-.1rem);
}
.fhp-contact[data-state="open"] .fhp-contact-dot { border-color: var(--fhp-accent); background: var(--fhp-accent); }
.fhp-contact-title {
  font-family: var(--fhp-display);
  font-size: clamp(1.45rem, 4.2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
}
.fhp-contact-detail {
  grid-column: 2;
  margin-top: .15rem;
  color: var(--fhp-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fhp-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1.4rem 0 0;
}
.fhp-contact-actions .fhp-btn { flex-wrap: wrap; justify-content: flex-start; row-gap: 0; width: 100%; padding-left: 1.1em; padding-right: 1.1em; text-align: left; }
/* 狭いときは、右の補足（電話番号など）だけが次の行に回る。ボタンの名前は途中で折らない */
.fhp-contact-actions .fhp-btn-label { white-space: nowrap; }
.fhp-contact-actions .fhp-btn small { margin-left: auto; font-size: .86em; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fhp-contact-note { margin: .9rem 0 0; color: var(--fhp-muted); font-size: .9rem; line-height: 1.7; }

.fhp-contact-week { width: 100%; margin: 1.6rem 0 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fhp-contact-week caption { padding-bottom: .4rem; font-weight: 700; text-align: left; }
.fhp-contact-week th, .fhp-contact-week td { padding: .5rem 0; border-top: 1px solid var(--fhp-line); text-align: left; font-weight: 400; }
.fhp-contact-week th { width: 7.5em; color: var(--fhp-muted); }
.fhp-contact-week tr.is-today th, .fhp-contact-week tr.is-today td { color: var(--fhp-fg); font-weight: 700; }
.fhp-contact-week tr.is-today th { border-left: 3px solid var(--fhp-accent); padding-left: .7rem; }

@container (min-width: 620px) {
  .fhp-contact-actions { flex-direction: row; flex-wrap: wrap; }
  .fhp-contact-actions .fhp-btn { width: auto; flex: 1 1 14rem; }
}