/* ==========================================================================
   interactions.css — 開閉まわりと、旧サイトが Webflow ランタイムに
   任せていた挙動の置き換え。

   旧サイトでは jQuery + webflow.js がやっていたことを素の CSS/JS で再現する。
   site.css の後に読み込むこと。
   ========================================================================== */

/* --------------------------------------------------------------------------
   ハンバーガーボタン（旧 .w-nav-button）
   -------------------------------------------------------------------------- */

.nav-menu-button {
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.nav-menu-button .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-menu-button .icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* 開いている間は×印に切り替える。
   すぐ上の `.icon svg` と詳細度で競合するので svg まで含めて指定する。 */
.nav-menu-button .icon svg.icon-close,
.nav-menu-button.is-open .icon svg.icon-open {
  display: none;
}

.nav-menu-button.is-open .icon svg.icon-close {
  display: block;
}

/* --------------------------------------------------------------------------
   モバイルメニュー（旧 .w-nav-menu）
   site.css 側で display:none が指定済み。開いたときだけ出す。
   -------------------------------------------------------------------------- */

.mobile-menu-panel.is-open {
  display: flex;
}

/* --------------------------------------------------------------------------
   FAQ アコーディオン（旧 .w-dropdown）

   旧サイトは Webflow のドロップダウンで、閉じている間 .w-dropdown-list が
   display:none だった。ここでは grid-template-rows の 0fr → 1fr で
   高さをアニメーションさせる。中の要素に min-height:0 が要る点に注意。
   -------------------------------------------------------------------------- */

.faq-question {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.faq-dropdown.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

/* 中身の余白まで含めて畳むため、クリップ役の内側ラッパーを挟む。
   .faq-answer 自身に margin があり、grid の行高だけでは隠しきれないため。 */
.faq-answer-inner {
  min-height: 0;
  overflow: hidden;
}

.faq-dropdown.is-open .faq-arrow {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   アンカーリンクのスクロール位置
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 16px;
}

/* --------------------------------------------------------------------------
   PC・タブレット幅での表示

   旧サイトのデザインは 479px 以下だけで組まれており、それより広い幅では
   レイアウトが崩れていた。site.css ではその 479px 用スタイルを全幅に
   適用しているので、あとは横幅を 390px のカラムに固定して中央に置けばよい。
   .page-wrapper は site.css で max-width:390px / margin:auto 済み。
   ここでは画面下に固定される CTA バーだけ同じ幅に揃える。
   -------------------------------------------------------------------------- */

.fixed-cta {
  right: auto;
  left: 50%;
  width: 100%;
  max-width: 390px;
  transform: translateX(-50%);
}