@charset "utf-8";
@import url(init.css);

/* =========================================================
   ヒゲ脱毛スタートプラン特設ページ
   Figma「【脱毛】9月スタートプラン特設ページ」SP(750) / PC(1600)
   数値は Figma のフレーム座標をそのまま計上し、
   calc(var(--vw) * N) でビューポート比例に変換している。
   ========================================================= */

:root {
  --viewport: 750;
  --vw: calc(100vw / var(--viewport));
  --gold: #bba171;
  --gold-grad: linear-gradient(90deg, #bba171 0%, #e9dfc9 27.03%, #a4854a 80.45%, #7e612b 127.5%);
  --navy: #053650;        /* ビフォーアフター節（Figma 93:501 の実値） */
  --plan-navy: #163650;   /* 料金カード（/operation/epilation/price/ と共通） */
  --plan-gold: #b7a171;   /* 同上・金額の金 */
  --blue: #0069a6;
  --dark: #3c3a39;
  --gray-bg: #e8e8e8;
}

@media screen and (min-width: 768px) {
  :root {
    --viewport: 1600;
  }
}

/* 1600px 以上では等倍で固定する */
@media screen and (min-width: 1600px) {
  :root {
    --vw: 1px;
  }
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

body {
  background: #fff;
}

main {
  display: block;
}

/* ---------------------------------------------------------
   共通パーツ
   --------------------------------------------------------- */
.c-heading {
  font-weight: 700;
  text-align: center;
  font-size: calc(var(--vw) * 44);
  line-height: calc(var(--vw) * 60);
}

.c-lead {
  font-size: calc(var(--vw) * 24);
  line-height: calc(var(--vw) * 36);
  margin: calc(var(--vw) * 50) auto 0;
  width: calc(var(--vw) * 690);
}

.c-caption {
  font-size: calc(var(--vw) * 20);
  line-height: calc(var(--vw) * 32);
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 30) auto 0;
}

.c-cta {
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 65) auto 0;
}

.c-cta a,
.p-mv__cta a {
  display: block;
  border-radius: calc(var(--vw) * 17);
  overflow: hidden;
}

.c-cta img,
.p-mv__cta img {
  width: 100%;
  display: block;
}

/* CTAボタンのふわふわ。
   /operation/skincare/equipment/dermapen/lp005_f/ の btn-animation01 が元。
   ボタンのリンク側に当てる（img に当てると a の overflow:hidden で拡大分が切れる）。
   倍率は参考元の 1.1 ではなく 1.05。本ページのCTAは SP で画面幅の92%(690/750)あり、
   1.1 だと 759px となって 750px を超えてしまうため（1.05 なら 724px で収まる） */
@keyframes btn-animation01 {
  0% {
    scale: 1;
  }

  50% {
    scale: 1.05;
  }

  100% {
    scale: 1;
  }
}

.c-cta a,
.p-mv__cta a {
  animation: btn-animation01 infinite 2.2s;
}

/* OS側で視差効果を減らす設定にしている環境では動かさない */
@media (prefers-reduced-motion: reduce) {

  .c-cta a,
  .p-mv__cta a {
    animation: none;
  }
}

/* 青いボタン（Figma 88:320 / 540×111・白26px） */
.c-btn {
  width: calc(var(--vw) * 540);
  margin: calc(var(--vw) * 41) auto 0;
}

.c-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--vw) * 111);
  border-radius: calc(var(--vw) * 8);
  background: var(--blue);
  color: #fff;
  font-size: calc(var(--vw) * 26);
}

.c-btn__arrow {
  position: relative;
  flex: none;
  width: calc(var(--vw) * 44);
  height: calc(var(--vw) * 2);
  background: #fff;
  margin-left: calc(var(--vw) * 22);
}

.c-btn__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(var(--vw) * 13);
  height: calc(var(--vw) * 13);
  border-top: calc(var(--vw) * 2) solid #fff;
  border-right: calc(var(--vw) * 2) solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

@media screen and (min-width: 768px) {

  .c-heading {
    font-size: calc(var(--vw) * 40);
    line-height: calc(var(--vw) * 60);
  }

  .c-lead {
    width: calc(var(--vw) * 1120);
    font-size: calc(var(--vw) * 22);
    line-height: calc(var(--vw) * 36);
    text-align: center;
  }

  .c-caption {
    width: calc(var(--vw) * 1120);
    font-size: calc(var(--vw) * 18);
    line-height: calc(var(--vw) * 32);
  }

  .c-cta {
    width: calc(var(--vw) * 690);
  }

  .c-btn a {
    font-size: calc(var(--vw) * 22);
  }
}

/* ---------------------------------------------------------
   MV
   --------------------------------------------------------- */
.p-mv__inner {
  position: relative;
  height: calc(var(--vw) * 500);
  background: #000;
  color: #fff;
  text-align: center;
}

.p-mv__count {
  position: absolute;
  left: calc(var(--vw) * 128);
  top: calc(var(--vw) * 58);
  width: calc(var(--vw) * 494);
}

.p-mv__count picture,
.p-mv__count img {
  width: 100%;
  display: block;
}

/* 金帯（Figma 93:499）＋ コピー（72:25）
   帯は全幅・高さ60、グラデーションは --gold-grad と同値。文字は黒32px、
   「スタートプラン」「特別料金」= DemiBold / 「を」「で」= Light */
.p-mv__copy {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--vw) * 360);
  height: calc(var(--vw) * 60);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-grad);
  border: 1px solid var(--gold);
  color: #000;
  font-family: "A-OTF Gothic MB101 Pro", "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: calc(var(--vw) * 32);
  line-height: 1;
  white-space: nowrap;
}

.p-mv__copy .is-em {
  font-weight: 600;
}

.p-mv__period {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--vw) * 458);
  font-size: calc(var(--vw) * 20);
  line-height: 1;
}

.p-mv__cta {
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 41) auto 0;
}

@media screen and (min-width: 768px) {
  .p-mv__inner {
    height: calc(var(--vw) * 400);
  }

  .p-mv__count {
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--vw) * 31);
    width: calc(var(--vw) * 474);
  }

  .p-mv__cta {
    margin-top: calc(var(--vw) * 50);
  }

  .p-mv__copy {
    top: calc(var(--vw) * 301);
    height: calc(var(--vw) * 50);
    font-size: calc(var(--vw) * 28);
  }

  .p-mv__period {
    top: calc(var(--vw) * 360);
    font-size: calc(var(--vw) * 20);
  }
}

/* ---------------------------------------------------------
   イントロ ＋ スタートプラン料金カード
   --------------------------------------------------------- */
.p-intro {
  padding: calc(var(--vw) * 100) 0 0;
}

.p-offer {
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 39) auto 0;
  overflow: hidden;
  border-radius: calc(var(--vw) * 8);
}

/* Figma 62:9966 の実描画は黒（プランカード 88:170 は紺） */
.p-offer__head {
  background: #000;
  color: #fff;
  text-align: center;
  padding: calc(var(--vw) * 17) 0 calc(var(--vw) * 20);
}

.p-offer__title {
  font-weight: 600;
  font-size: calc(var(--vw) * 38);
  line-height: calc(var(--vw) * 52);
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-offer__parts {
  font-size: calc(var(--vw) * 24);
  line-height: calc(var(--vw) * 33);
}

/* イラストは price ページと同じ webp で、グレーの余白まで画像に焼き込まれている。
   padding を入れると画像側のグレーと CSS 側のグレーが二重になり境目が出るため、
   /operation/epilation/price/ の .plan_list .img と同様に余白なしで敷き詰める */
.p-offer__body {
  position: relative;
  background: var(--gray-bg);
  padding: 0;
}

.p-offer__illust {
  width: 100%;
  display: block;
}

/* 麻酔無料アイコンは /operation/epilation/ の既存アセットを使用 */
.p-offer__badge,
.p-plan__badge {
  position: absolute;
  right: calc(var(--vw) * 20);
  top: calc(var(--vw) * 21);
  width: calc(var(--vw) * 132);
  height: auto;
  z-index: 1;
}

/* Figma 62:9969 の実描画は黒 */
.p-offer__price {
  position: relative;
  background: #000;
  color: #fff;
  height: calc(var(--vw) * 213);
}

/* 金の枠線ボックス（Figma 62:9970 / 230×65・角丸なし） */
.p-offer__limited {
  position: absolute;
  left: calc(var(--vw) * 134);
  top: calc(var(--vw) * 25);
  width: calc(var(--vw) * 230);
  height: calc(var(--vw) * 65);
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-weight: 700;
  font-size: calc(var(--vw) * 26);
  line-height: 1;
}

.p-offer__before {
  position: absolute;
  left: calc(var(--vw) * 98);
  top: calc(var(--vw) * 111);
  font-family: "din-2014", "Oswald", sans-serif;
  font-size: calc(var(--vw) * 59);
  line-height: 1;
}

.p-offer__before del {
  text-decoration: line-through;
  text-decoration-thickness: calc(var(--vw) * 3);
}

.p-offer__course {
  position: absolute;
  left: calc(var(--vw) * 394);
  top: calc(var(--vw) * 25);
  height: calc(var(--vw) * 65);
  display: flex;
  align-items: center;
  font-size: calc(var(--vw) * 34);
  line-height: 1;
}

.p-offer__after {
  position: absolute;
  left: calc(var(--vw) * 328);
  top: calc(var(--vw) * 85);
  font-family: "din-2014", "Oswald", sans-serif;
  font-size: calc(var(--vw) * 96);
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media screen and (min-width: 768px) {
  .p-intro {
    padding: calc(var(--vw) * 150) 0 0;
  }

  .p-offer {
    width: calc(var(--vw) * 690);
    margin-top: calc(var(--vw) * 89);
  }
}

/* ---------------------------------------------------------
   選ばれる3つの理由
   --------------------------------------------------------- */
/* 見出しは白地、3つの理由の本文は黒地（Figma 91:498 bg-black） */
.p-reason {
  background: #fff;
  padding-top: calc(var(--vw) * 95);
}

.p-reason__body {
  background: #000;
  color: #fff;
  margin-top: calc(var(--vw) * 44);
  padding: calc(var(--vw) * 45) 0 calc(var(--vw) * 100);
}

@media screen and (min-width: 768px) {
  .p-reason__body {
    margin-top: calc(var(--vw) * 82);
    padding: calc(var(--vw) * 100) 0 calc(var(--vw) * 91);
  }
}

/* REASON 間の余白は Figma のノード座標どおり個別に指定する
   （前の本文の下端 → 次のバッジ上端。SP: 50 / 47、PC: 91 / 100） */
.p-reason__item:nth-child(2) {
  margin-top: calc(var(--vw) * 43);
}

.p-reason__item:nth-child(3) {
  margin-top: calc(var(--vw) * 47);
}

.p-reason__item .c-lead {
  margin-top: calc(var(--vw) * 50);
}

/* バッジと見出しは Figma 上で上下中央そろえ（1行/2行のどちらでも中心が合う） */
.p-reason__head {
  display: flex;
  align-items: center;
  gap: 0 calc(var(--vw) * 37);
  padding-left: calc(var(--vw) * 38);
}

/* REASONバッジ：ゴールドの円＋黒文字 */
.p-reason__num {
  width: calc(var(--vw) * 120);
  height: calc(var(--vw) * 120);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gold);
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "din-2014", "Oswald", sans-serif;
}

.p-reason__num span {
  font-size: calc(var(--vw) * 20);
  letter-spacing: 0.06em;
  line-height: 1;
}

.p-reason__num em {
  font-style: normal;
  font-size: calc(var(--vw) * 56);
  line-height: 1;
}

.p-reason__title {
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--vw) * 44);
  line-height: calc(var(--vw) * 60);
}

/* 動画直下の比較画像ラベル（左=白 / 右=ゴールド） */
.p-reason__powerLabel {
  display: flex;
  margin-top: calc(var(--vw) * 16);
  font-weight: 700;
  font-size: calc(var(--vw) * 24);
}

.p-reason__powerLabel span {
  flex: 1;
  text-align: center;
}

.p-reason__powerLabel .is-gold {
  color: var(--gold);
}

.p-reason .c-cta {
  margin-top: calc(var(--vw) * 50);
}

@media screen and (min-width: 768px) {
  .p-reason .c-cta {
    margin-top: calc(var(--vw) * 100);
  }
}

.p-reason__video,
.p-reason__powerImg,
.p-reason__photo {
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 50) auto 0;
}

/* REASON1 の動画だけ Figma 実測が 42（他は 50） */
.p-reason__item:first-child .p-reason__video {
  margin-top: calc(var(--vw) * 42);
}

/* 動画と直下の比較画像は一続きに見せるので間を詰める */
.p-reason__powerImg {
  margin-top: calc(var(--vw) * 30);
}

.p-reason__video video,
.p-reason__powerImg img,
.p-reason__photo img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 768px) {
  .p-reason__item:nth-child(2) {
    margin-top: calc(var(--vw) * 91);
  }

  .p-reason__item:nth-child(3) {
    margin-top: calc(var(--vw) * 100);
  }

  .p-reason__head {
    gap: 0 calc(var(--vw) * 30);
    padding-left: calc(var(--vw) * 449);
  }

  .p-reason__title {
    font-size: calc(var(--vw) * 40);
  }

  .p-reason__video,
  .p-reason__powerImg,
  .p-reason__photo {
    width: calc(var(--vw) * 1120);
  }
}

/* ---------------------------------------------------------
   ビフォーアフター
   --------------------------------------------------------- */
.p-case {
  background: #fff;
  padding-top: calc(var(--vw) * 100);
}

@media screen and (min-width: 768px) {
  .p-case {
    padding-top: calc(var(--vw) * 136);
  }
}

.p-case__body {
  background: var(--navy);
  margin-top: calc(var(--vw) * 37);
  padding: calc(var(--vw) * 50) 0 calc(var(--vw) * 100);
}

@media screen and (min-width: 768px) {
  .p-case__body {
    margin-top: calc(var(--vw) * 100);
    padding-bottom: calc(var(--vw) * 123);
  }
}

/* SP は左揃え・PC は中央（Figma 91:462 は text-align 指定なし / 100:33 は text-center） */
.p-case .c-lead {
  color: #fff;
  margin-top: 0;
}

/* 2枚の写真とラベル帯は隙間なく並べる */
.p-case__photos {
  display: flex;
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 41) auto 0;
}

@media screen and (min-width: 768px) {
  .p-case__photos {
    margin-top: calc(var(--vw) * 50);
  }
}

.p-case__photos + .p-case__photos {
  margin-top: calc(var(--vw) * 30);
}

.p-case__photo {
  width: 50%;
}

.p-case__photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 帯色は /operation/epilation/ TOP と共通（before=グレー / after=ゴールド） */
.p-case__label {
  color: #000;
  font-weight: 700;
  font-size: calc(var(--vw) * 28);
  letter-spacing: 0.04em;
  text-align: center;
  height: calc(var(--vw) * 56);
  line-height: calc(var(--vw) * 56);
}

.p-case__label.is-before {
  background: #9f9592;
}

.p-case__label.is-after {
  background: var(--gold);
}

.p-case__note {
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 50) auto 0;
  color: #fff;
  font-size: calc(var(--vw) * 20);
  line-height: calc(var(--vw) * 32);
}

.p-case__noteRow {
  display: flex;
  gap: calc(var(--vw) * 14);
}

.p-case__noteRow dt {
  width: calc(var(--vw) * 240);
  flex: none;
}

.p-case__noteRow dt::after {
  content: "：";
}

@media screen and (min-width: 768px) {
  .p-case__photos,
  .p-case__note {
    width: calc(var(--vw) * 1120);
  }

  .p-case__label {
    font-size: calc(var(--vw) * 24);
    height: calc(var(--vw) * 56);
    line-height: calc(var(--vw) * 56);
  }

  .p-case__noteRow dt {
    width: calc(var(--vw) * 209);
  }
}

/* ---------------------------------------------------------
   料金プラン
   --------------------------------------------------------- */
.p-plan {
  padding: calc(var(--vw) * 83) 0 calc(var(--vw) * 50);
}

/* 見出し → リードは SP のみ 30（PC は共通の 50） */
.p-plan > .c-lead {
  margin-top: calc(var(--vw) * 30);
}

@media screen and (min-width: 768px) {
  .p-plan {
    padding: calc(var(--vw) * 100) 0 calc(var(--vw) * 75);
  }

  .p-plan > .c-lead {
    margin-top: calc(var(--vw) * 50);
  }
}

.p-plan__card {
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 50) auto 0;
  border-radius: calc(var(--vw) * 8);
  overflow: hidden;
}

.p-plan__head {
  background: var(--plan-navy);
  color: #fff;
  text-align: center;
  padding: calc(var(--vw) * 17) 0 calc(var(--vw) * 20);
}

.p-plan__title {
  color: var(--gold);
  font-weight: 700;
  font-size: calc(var(--vw) * 38);
  line-height: calc(var(--vw) * 52);
}

.p-plan__parts {
  font-size: calc(var(--vw) * 24);
  line-height: calc(var(--vw) * 33);
}

/* 同上（画像側のグレーと二重にしない） */
.p-plan__body {
  position: relative;
  background: var(--gray-bg);
  padding: 0;
}

.p-plan__illust {
  width: 100%;
  display: block;
}

.p-plan__tabs {
  display: flex;
  gap: 0 calc(var(--vw) * 12);
  margin-top: calc(var(--vw) * 20);
  background: var(--gray-bg);
}

.p-plan__tab {
  width: calc(33.3333% - var(--vw) * 8);
  border: 0;
  background: #bebebe;
  color: #000;
  font-size: calc(var(--vw) * 26);
  padding: calc(var(--vw) * 16) 0 calc(var(--vw) * 17);
  cursor: pointer;
  border-radius: calc(var(--vw) * 15) calc(var(--vw) * 15) 0 0;
}

.p-plan__tab.is-active {
  background: var(--plan-navy);
  color: #fff;
  font-weight: 700;
}

.p-plan__panel {
  display: none;
}

.p-plan__panel.is-active {
  display: block;
}

.p-plan__priceRow {
  background: var(--plan-navy);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: calc(var(--vw) * 18) 0 0;
}

/* 料金と分割の間の縦罫 */
.p-plan__monthly {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: calc(var(--vw) * 18);
  font-size: calc(var(--vw) * 22);
  color: #fff;
}

.p-plan__price {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  border-right: 1px solid #fff;
  font-family: "din-2014", "Oswald", sans-serif;
  font-weight: 700;
  font-size: calc(var(--vw) * 85);
  line-height: 1;
  margin-bottom: calc(var(--vw) * 18);
  color: var(--plan-gold);
}

.p-plan__monthly > span {
  display: block;
  line-height: 1;
}

.p-plan__monthly strong {
  display: block;
  white-space: nowrap;
  font-family: "din-2014", "Oswald", sans-serif;
  font-weight: 700;
  font-size: calc(var(--vw) * 50);
  line-height: 1;
  margin-top: calc(var(--vw) * 4);
}

.p-plan__monthly strong small {
  font-size: 0.68em;
}

@media screen and (min-width: 768px) {

  .p-plan__card {
    width: calc(var(--vw) * 690);
    margin-top: calc(var(--vw) * 100);
  }

}

/* ---------------------------------------------------------
   初めての方へ
   --------------------------------------------------------- */
.p-first {
  background: var(--gray-bg);
  padding: calc(var(--vw) * 50) 0 calc(var(--vw) * 50);
}

/* 見出し → リードは SP のみ 37（PC は共通の 50） */
.p-first > .c-lead {
  margin-top: calc(var(--vw) * 37);
}

@media screen and (min-width: 768px) {
  .p-first {
    padding: calc(var(--vw) * 75) 0 calc(var(--vw) * 75);
  }

  .p-first > .c-lead {
    margin-top: calc(var(--vw) * 50);
  }
}

/* ---------------------------------------------------------
   よくあるご質問
   --------------------------------------------------------- */
.p-faq {
  padding: calc(var(--vw) * 50) 0 calc(var(--vw) * 80);
}

@media screen and (min-width: 768px) {
  .p-faq {
    padding-top: calc(var(--vw) * 75);
  }
}

.p-faq__list {
  width: calc(var(--vw) * 690);
  margin: calc(var(--vw) * 37) auto 0;
}

@media screen and (min-width: 768px) {
  .p-faq__list {
    margin-top: calc(var(--vw) * 86);
  }
}

.p-faq__item {
  margin-top: calc(var(--vw) * 49);
}

@media screen and (min-width: 768px) {
  .p-faq__item {
    margin-top: calc(var(--vw) * 100);
  }
}

.p-faq__item:first-child {
  margin-top: 0;
}

/* Q行：ダークグレー地・白文字（Figma 88:336 / 690×100） */
.p-faq__q {
  width: 100%;
  background: var(--dark);
  border: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--vw) * 18);
  min-height: calc(var(--vw) * 100);
  padding: calc(var(--vw) * 16) calc(var(--vw) * 70) calc(var(--vw) * 16) calc(var(--vw) * 21);
  text-align: left;
  cursor: pointer;
  position: relative;
  color: #fff;
}

/* Q / A の文字。Figma上はアウトライン化されたベクターでフォント名が残っていないが、
   字形がDIN系のため他の数字と同じ din-2014 を使う。
   line-height:1 だとフォントのアセンダ/ディセンダ分だけ下寄りに見えるため、
   flexで中央寄せしたうえで行ボックスを字面に寄せている */
.p-faq__mark {
  flex: none;
  width: calc(var(--vw) * 50);
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "din-2014", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: calc(var(--vw) * 72);
  line-height: 0.75;
  text-align: center;
}

.p-faq__mark.is-a {
  color: var(--dark);
}

.p-faq__qText {
  font-weight: 600;
  font-size: calc(var(--vw) * 28);
  line-height: calc(var(--vw) * 38);
}

/* 開閉アイコン（Figma 88:359 / 32×4 の白いバー） */
.p-faq__icon {
  position: absolute;
  right: calc(var(--vw) * 19);
  top: 50%;
  width: calc(var(--vw) * 32);
  height: calc(var(--vw) * 4);
  background: #fff;
  transform: translateY(-50%);
}

.p-faq__icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: rotate(90deg);
  transition: transform .3s ease-in-out;
}

.p-faq__q[aria-expanded="true"] .p-faq__icon::before {
  transform: rotate(0deg);
}

/* JS が動かない環境では回答が読めなくなるため、開いた状態で表示する */
html:not(.js) .p-faq__a {
  height: auto;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .p-faq__a,
  .p-faq__icon::before {
    transition: none;
  }
}

/* A行：白地・黒文字
   高さを JS で実測値（scrollHeight）に設定して transition させる。
   max-height に大きな固定値を入れる方式だと、閉じるときに実際の高さへ
   縮むまでの間が「無反応」に見えるため採用しない。
   閉じている間は visibility:hidden にして読み上げ・ページ内検索から外す。 */
.p-faq__a {
  background: #fff;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height .3s ease-in-out, visibility 0s linear .3s;
}

.p-faq__a.is-open {
  visibility: visible;
  transition: height .3s ease-in-out, visibility 0s linear 0s;
}

.p-faq__aInner {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--vw) * 18);
  padding: calc(var(--vw) * 22) calc(var(--vw) * 30) calc(var(--vw) * 28) calc(var(--vw) * 20);
}

.p-faq__aText {
  font-size: calc(var(--vw) * 24);
  line-height: calc(var(--vw) * 36);
}

@media screen and (min-width: 768px) {

  .p-faq__list {
    width: calc(var(--vw) * 1120);
  }

  .p-faq__qText {
    font-size: calc(var(--vw) * 22);
    line-height: calc(var(--vw) * 35);
  }

  .p-faq__aText {
    font-size: calc(var(--vw) * 20);
    line-height: calc(var(--vw) * 32);
  }

  .p-faq__mark {
    font-size: calc(var(--vw) * 40);
    width: calc(var(--vw) * 44);
  }
}

/* ---------------------------------------------------------
   フッター / 固定CTA
   --------------------------------------------------------- */
/* 共通ヘッダーのコンテナ幅（PC）。
   他ページは parts/hige/assets/css/common.css の
   `header .inner { width:1120px; margin:0 auto }` で中央寄せされているが、
   同ファイルは素のelementセレクタが多くページ側の体裁を壊すため読み込まず、
   この1点だけ再現する。SP(≤979px)は common_2025.css の padding 指定に任せる */
@media screen and (min-width: 980px) {
  #header .header_upper .inner {
    width: 1120px;
    margin: 0 auto;
  }
}

/* 共通フッター(assets/include/footer.html)の医師監修セクションは本ページでは出さない。
   footer.html 側は $mode / $site による出し分けを持つが、それらは同ファイル内の
   フッターナビの分岐(162〜251行)も兼ねており、変えるとナビ構成まで変わるため、
   フラグは触らずCSSで打ち消す */
.supervision_common {
  display: none !important;
}

/* 共通フッター(assets/include/footer.html)の追従CTA .float_bottom は
   本ページ独自の .l-fixedCta と重なるため非表示にする。
   共通パーツ自体は他ページでも使うため、ここで打ち消すだけに留める */
.float_bottom {
  display: none !important;
}

.l-fixedCta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: calc(var(--vw) * 16) calc(var(--vw) * 30);
  background: rgba(0, 0, 0, .75);
}

.l-fixedCta a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--vw) * 96);
  border-radius: calc(var(--vw) * 48);
  background: var(--gold);
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--vw) * 30);
}

/* 追従CTAはSPのみ表示する */
@media screen and (min-width: 768px) {
  .l-fixedCta {
    display: none;
  }
}

.l-fixedCta__arrow {
  display: inline-block;
  width: calc(var(--vw) * 16);
  height: calc(var(--vw) * 16);
  margin-left: calc(var(--vw) * 16);
  border-top: calc(var(--vw) * 3) solid #fff;
  border-right: calc(var(--vw) * 3) solid #fff;
  transform: rotate(45deg);
}

@media screen and (min-width: 768px) {
      .l-fixedCta {
    padding: calc(var(--vw) * 14) 0;
  }

  .l-fixedCta a {
    width: calc(var(--vw) * 560);
    height: calc(var(--vw) * 72);
    margin: 0 auto;
    font-size: calc(var(--vw) * 24);
  }
}