@charset "UTF-8";

/* ==========================================
   よくあるご質問（FAQ）
   XD: 01_TOP_SP の FAQ（375px。開いた 1 つと閉じた 3 つ）、01_TOP_PC の FAQ（1366px）、04_TOP_よくある質問_PC（2 つ目を開いた状態）
   y は項目の上端からの値（T）。開いた項目の白い帯（線）と、枠の左右の欠けを疑似要素で作る
   ========================================== */
.faq {
  margin: 0 0 81px; /* 次の News まで（組み直し前の値のまま） */
  padding: 0;
}

.faq__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
  padding: 0 15px;
}

.faq__title {
  /* XD SP: 見出し YuGo-Bold 30px・字間 3px・#555・中央（x=73 w=228、ベースライン y=2136）。最初の項目の上端は見出しの上端から 65 */
  position: relative;
  display: block;
  width: fit-content;
  height: 31px;
  margin: 0 auto 34px;
  padding: 1px 0 0 3px; /* 左：最後の字の後の字間 3px を中央揃えから外す。上：ベースライン y=2136 */
  font-family: var(--font-ja);
  font-size: 30px;
  font-weight: 700;
  line-height: 1; /* 30px ÷ 30px */
  letter-spacing: 0.1em; /* 3px ÷ 30px */
  color: var(--color-text);
}

.faq__title::after {
  /* XD SP: 波線（パス 128）x=73.51 y=2127.53 227.25×17.66 */
  content: "";
  position: absolute;
  bottom: -5.19px;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 17.66px;
  background-image: url("../../img/wavyline.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 30px; /* XD SP: 項目の間 30 */
}

.faq__item {
  /* XD SP: 項目 x=15 w=345、枠 3px #93c572（内側）・角丸 30。閉じた項目の高さ 103（質問 2 行）。
     枠の左右には白い欠け（線 17〜22）：閉じた項目は高さ 15・中央 T+51、開いた項目は高さ 30・中央 T+123 */
  position: relative;
  box-sizing: border-box;
  border: 3px solid var(--color-main);
  border-radius: 30px;
  background-color: var(--color-white);

  --row-height: 97px; /* 質問の行の高さ（枠の内側） */
  --notch-height: 15px;
  --notch-top: 48.5px; /* 欠けの中央（枠の内側の上端から） */
}

.faq__item.is-open {
  --notch-height: 30px;
  --notch-top: 120px;
}

.faq__item::before,
.faq__item::after {
  content: "";
  position: absolute;
  top: var(--notch-top);
  z-index: 1;
  width: 3px;
  height: var(--notch-height);
  background-color: var(--color-white);
  transform: translateY(-50%);
  transition:
    top 0.3s ease,
    height 0.3s ease;
  pointer-events: none;
}

.faq__item::before {
  left: -3px;
}

.faq__item::after {
  right: -3px;
}

.faq__question {
  /* XD SP: 質問の行。Q（25px）x=34、質問の文 x=63（w=240・最大 2 行）、アイコン x=324 w=15。行の中央は T+51 */
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--row-height);
  margin: 0;
  padding: 0 18px 0 16px;
  border: none;
  font: inherit;
  color: var(--color-text);
  text-align: left;
  background: none;
  transition: min-height 0.3s ease;
  cursor: pointer;
}

.faq__q-mark,
.faq__a-mark {
  /* XD: Q・A は Archivo Narrow 400（Q は #93c572、A は #f7b560）。SP 25px・行の高さ 34 */
  flex: 0 0 25px;
  font-family: var(--font-en);
  font-size: 25px;
  font-weight: 400;
  line-height: 1.36; /* 34px ÷ 25px */
  color: var(--color-main);
}

.faq__q-mark {
  margin-right: 4px; /* XD SP: Q（x=34）から質問の文（x=63）まで */
}

.faq__q-text {
  /* XD SP: 質問の文 YuGo-Bold 16px・行の高さ 24（1 行目のベースライン T+44） */
  flex: 1;
  min-width: 0;
  margin: 0 21px 2px 0;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5; /* 24px ÷ 16px */
}

.faq__icon {
  /* XD: 開閉のアイコン（SP 15・PC 21、線 3px #93c572）。縦の線は閉じているときだけ */
  position: relative;
  flex: 0 0 var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);

  --icon-size: 15px;
  --icon-vertical: 1;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-main);
  transform: translate(-50%, -50%);
}

.faq__icon::before {
  width: var(--icon-size);
  height: 3px;
}

.faq__icon::after {
  width: 3px;
  height: var(--icon-size);
  transform: translate(-50%, -50%) scaleY(var(--icon-vertical));
  transition: transform 0.3s ease;
}

.is-open .faq__icon {
  --icon-vertical: 0;
}

.faq__answer {
  /* XD SP: 開いたとき、A は質問の文の下（T+78.8）、答えの文は x=34・w=304・行の高さ 24（1 行目のベースライン T+136.7）。閉じた項目は高さ 0 */
  display: grid;
  grid-template-rows: 0fr;
  box-sizing: border-box;
  margin: 0;
  padding: 0 18px 0 16px; /* 文の幅 305（XD の 1 行は最大 304） */
  transition:
    grid-template-rows 0.3s ease,
    margin 0.3s ease,
    padding 0.3s ease;
}

.is-open .faq__answer {
  grid-template-rows: 1fr;
  margin-top: -21.2px; /* 質問の行の下端 T+100 → A の上端 T+78.8 */
  padding-bottom: 22.8px;
}

.faq__a {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5; /* 24px ÷ 16px */
  color: var(--color-text);
}

.faq__a-mark {
  display: block;
  width: fit-content;
  padding-left: 1px;
  color: var(--color-accent);
}

.faq__a-text {
  display: block;
  margin-top: 6.4px;
}

@media (width >= 768px) {
  .faq {
    /* XD PC: 見出しの上端 y=2420（works の下 121px のすぐ下）。最初の項目の上端は 2509 */
    margin-bottom: 120px;
  }

  .faq__inner {
    max-width: 992px; /* 中身 960 ＋ 左右 16 */
    padding: 0 16px;
  }

  .faq__title {
    /* XD PC: 見出し 40px・字間 4px（x=531 w=304、ベースライン y=2455）。波線 531.67,2441.72 303×23.55 */
    height: auto;
    margin-bottom: 46.6px;
    padding: 0 0 0 4px;
    font-size: 40px;
    line-height: 42.4px; /* 比率（1.06）にすると 1/64px ずれて位置が 1px 動くので px のまま（AUDIT CSS-1 の要確認） */
    letter-spacing: 0.1em;
  }

  .faq__title::after {
    bottom: -2.8px;
    height: 23.55px;
  }

  .faq__list {
    gap: 50px;
  }

  .faq__item {
    /* XD PC: 項目 x=203 w=960、角丸 50。閉じた高さ 70（行 64）、開いた高さ 190（行 84 ＋ 答え）。欠けは閉じた項目が高さ 15・中央 T+35、開いた項目が高さ 30・中央 T+99 */
    border-radius: 50px;

    --row-height: 64px;
    --notch-top: 32px;
  }

  .faq__item.is-open {
    --row-height: 84px;
    --notch-top: 96px;
  }

  .faq__question {
    /* XD PC: Q（35px・x=243）、質問の文 YuGo-Bold 20px（x=287）、アイコン x=1102.5〜1123.5（21px） */
    padding-inline: 37px;
  }

  .faq__q-mark {
    margin-right: 0;
  }

  .faq__q-mark,
  .faq__a-mark {
    flex-basis: 44px;
    font-size: 35px;
    line-height: 1.3429; /* 47px ÷ 35px（切り上げて 47px ちょうどにする） */
  }

  .faq__q-text {
    margin: 2px 0 0;
    font-size: 20px;
    line-height: 1.4; /* 28px ÷ 20px */
  }

  .faq__icon {
    --icon-size: 21px;
  }

  .faq__answer {
    /* XD PC: 答え。A（x=246）と文（x=288・20px・行の高さ 34・右は x=1125 まで）は縦の中央そろえ。1 行目のベースラインは T+113 */
    padding: 0 35px 0 37px;
  }

  .is-open .faq__answer {
    margin-top: 2.1px;
    padding-bottom: 29.9px;
  }

  .faq__a {
    display: flex;
    align-items: center;
    font-size: 20px;
    line-height: 1.7; /* 34px ÷ 20px */
  }

  .faq__a-mark {
    flex: 0 0 45px;
    width: auto;
    padding-left: 3px;
  }

  .faq__a-text {
    margin-top: 0;
  }
}