@charset "UTF-8";
/* =====================================================
   よくあるご質問
   Figma: PC-水素の杜-よくある質問 (227:5052) / 1280 幅基準
   Q&A のカード（.lp-faq__item）・※注記は lp.css（共通）
   ===================================================== */

/* =====================================================
   本文：左にページ内メニュー、右に製品ごとの Q&A
   ===================================================== */
/* メニュー 347px ＋ 余白 40px ＋ Q&A 733px（x=80〜1200）。 */
.faq-body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 100px 40px 103px;
  color: #fff;
}
/* スクロールしてもメニューが見えるよう、固定ヘッダーの下 20px に貼り付ける。 */
.faq-nav {
  position: sticky;
  top: 149px;
  flex-shrink: 0;
  width: 347px;
  margin-top: 20px;
}
.faq-nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 65px;
  padding: 0 13px 0 29px;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  line-height: 1.5;
  transition: background-color 0.2s ease;
}
.faq-nav a:hover { background: rgba(255, 255, 255, 0.2); }
/* 横向きの矢印素材を 90° 回して下向きにする。 */
.faq-nav__arrow {
  flex-shrink: 0;
  width: 19px;
  height: 5.5px;
  transform: rotate(90deg);
}
.faq-groups {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 80px;
  min-width: 0;
}
/* ページ内リンクで飛んだとき、見出しが固定ヘッダーに隠れないよう少し余白をとる。 */
.faq-group { scroll-margin-top: 20px; }
.faq-group__title {
  margin-bottom: 30px;
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.5;
}
.faq-group__list {
  display: flex;
  flex-direction: column;
  gap: 27px;
}

@media (max-width: 1023px) {
  .faq-body {
    flex-direction: column;
    align-items: stretch;
    padding-left: 0;
    padding-right: 0;
  }
  .faq-nav {
    position: static;
    width: 100%;
    margin-top: 0;
  }
}