@charset "UTF-8";

/* ===============================
   Hero のボタン列（最新情報を見る / 営業時間・道路状況）
=============================== */
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }
button.btn-primary{ font-size:1rem; line-height:1.7; cursor:pointer; }

@media (max-width:560px){
  /* styles.css の .btn-primary{ width:50% } を、2つ並べる前提で打ち消す */
  .hero-actions{ justify-content:center; gap:var(--space-2); }
  .hero-actions .btn-primary{
    width:auto !important; margin-inline:0 !important;
    padding-inline:var(--space-3); font-size:.9rem; letter-spacing:.06em;
  }
}

/* ===============================
   営業時間・道路状況パネル
=============================== */
.faq-panel{ position:fixed; inset:0; z-index:1000; }
.faq-panel[hidden]{ display:none; }

.faq-panel__backdrop{
  position:absolute; inset:0; background:rgba(15,42,58,.45);
  opacity:0; transition:opacity .3s ease;
}

.faq-panel__sheet{
  position:absolute; top:0; right:0; bottom:0;
  width:min(440px, 100%);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#fffafa 0%,#f7fbff 100%);
  box-shadow:var(--shadow-card);
  transform:translateX(100%); transition:transform .35s ease;
}

.faq-panel.is-open .faq-panel__backdrop{ opacity:1; }
.faq-panel.is-open .faq-panel__sheet{ transform:translateX(0); }

.faq-panel__header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  padding-top:max(var(--space-4), env(safe-area-inset-top));
  border-bottom:1px solid var(--color-line);
}
.faq-panel__title{ margin:0; font-size:1.25rem; letter-spacing:.08em; color:var(--color-text); }

.faq-panel__close{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--color-line); background:rgba(255,255,255,.6);
  color:var(--color-text); font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background-color .3s ease;
}
.faq-panel__close:hover,.faq-panel__close:focus-visible{ background:var(--color-accent-soft); }

.faq-panel__body{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--space-5);
  padding-bottom:max(var(--space-5), env(safe-area-inset-bottom));
  display:grid; align-content:start; gap:var(--space-6);
}

.faq-panel__message{ color:var(--color-text-light); }
.faq-panel__message.is-error{
  padding:var(--space-4); border-radius:var(--radius-sm);
  background:var(--color-accent-soft); color:var(--color-text);
}
.faq-panel__tel{
  color:var(--color-highlight); font-weight:600; white-space:nowrap;
  text-decoration:underline; text-underline-offset:3px;
}

/* カテゴリ */
.faq-category{ display:grid; gap:var(--space-2); }
.faq-category__title{
  margin:0 0 var(--space-1); padding-left:var(--space-2);
  border-left:3px solid var(--color-accent);
  font-size:1.05rem; letter-spacing:.06em; color:var(--color-text);
}

/* 項目（アコーディオン） */
.faq-item{
  border:1px solid var(--color-line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.7);
}
.faq-item__question{
  position:relative; display:block; list-style:none; cursor:pointer;
  padding:var(--space-3) calc(var(--space-3) + 28px) var(--space-3) var(--space-3);
  font-weight:600;
}
.faq-item__question::-webkit-details-marker{ display:none; }
.faq-item__question::after{
  content:""; position:absolute; top:50%; right:var(--space-3);
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--color-accent); border-bottom:2px solid var(--color-accent);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq-item[open] > .faq-item__question::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-item__question:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; border-radius:var(--radius-sm); }

.faq-item__answer{
  display:grid; gap:var(--space-2);
  padding:0 var(--space-3) var(--space-3);
}
.faq-item__text{ white-space:pre-line; overflow-wrap:anywhere; }
.faq-item__updated{ font-size:.8rem; color:var(--color-text-light); text-align:right; }

/* 開いている間は背景をスクロールさせない */
html.is-scroll-locked, html.is-scroll-locked body{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .faq-panel__backdrop,.faq-panel__sheet,.faq-item__question::after{ transition:none; }
}