/* page-faq.css - よくあるご質問（一覧・個別ページ） */

h2{font-size:clamp(1.05rem, 0.85rem + 2.2vw, 1.9rem);}

/* Header hamburger: square button, dark purple background, white lines */
  .c-hamburger--header{
    width:2.5rem; height:2.5rem;
    background:var(--purple-900);
    border-radius:8px;
  }

.c-hamburger--header span{
    left:0.625rem; right:0.625rem;
    background:#fff;
  }

.c-hamburger--header span:nth-child(1){top:0.8125rem;}

.c-hamburger--header span:nth-child(2){top:1.1875rem;}

.c-hamburger--header span:nth-child(3){top:1.5625rem;}

.c-hamburger--header.is-open span:nth-child(1){top:1.1875rem; transform:rotate(45deg);}

.c-hamburger--header.is-open span:nth-child(3){top:1.1875rem; transform:rotate(-45deg);}

@media(max-width:768px){
    .l-submenu__inner{display:none;}
    .c-hamburger--header{display:flex; align-items:center; justify-content:center;}
    .l-submenu{background:transparent; border-bottom:none;}
    .l-submenu.is-menu-open{background:var(--purple-900); border-bottom:1px solid rgba(255,255,255,.08);}
  }

.c-mini-cta .c-btn-group{max-width:40rem; margin:0 auto;}

/* ---------- Anchor offset for sticky header ---------- */
  section[id]{scroll-margin-top:118px;}

/* ----------------------------------------------------------------------
   下部固定CTAの余白について

   他のページCSSには body{padding-bottom:8.25rem;} が入っているが、
   common.css の 14rem（PC）／25rem（SP）を打ち消してしまうため
   このページでは意図的に指定していない。
   他ページと揃える必要が出た場合はここに1行足せば切り替わる。
   ---------------------------------------------------------------------- */

/* ---------- Fixed bottom CTA（写真とキャプションの位置） ---------- */
  .c-fixed-cta__photo{display:none;}

.c-fixed-cta__caption{display:none;}

@media(min-width:1100px){
    .c-fixed-cta__buttons{max-width:37.5rem; margin:0 auto;}
    .c-fixed-cta__photo{
      display:block;
      position:absolute;
      left:calc(50% + 18.75rem - 1rem); bottom:-0.625rem;
      pointer-events:none;
    }
    .c-fixed-cta__photo img{width:9.375rem; height:auto; display:block;}
    .c-fixed-cta__caption{
      display:block;
      position:absolute;
      left:calc(50% + 18.75rem - 1rem + 9.875rem);
      bottom:1.25rem;
      width:6.625rem;
      margin:0;
      font-size:.6rem;
      font-weight:700;
      color:var(--ink-soft);
      line-height:1.5;
      text-align:left;
      white-space:nowrap;
      pointer-events:none;
    }
  }

/* ----------------------------------------------------------------------
   パンくずリスト（FAQページのみ）

   PC   … 1行に収め、入り切らない質問文は末尾を省略記号にする
   SP   … 折り返さず、パンくずの帯だけ横スクロールで全文を読めるようにする
          （overflow-x は帯の内側だけに付けるため、ページ全体は横に動かない）
   ---------------------------------------------------------------------- */
.c-breadcrumb__inner{
    flex-wrap:nowrap;
  }

/* リンクと区切り記号は縮めない */
.c-breadcrumb__inner a,
.c-breadcrumb__sep{
    flex:none;
    white-space:nowrap;
  }

/* 現在位置（質問文）だけを縮める。min-width:0 がないと省略が効かない */
.c-breadcrumb__current{
    flex:0 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

@media(max-width:900px){
  /* 帯の内側だけ横スクロール。質問文は省略せず全文を残す */
  .c-breadcrumb__inner{
    overflow-x:auto;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }

  .c-breadcrumb__current{
    flex:none;
    overflow:visible;
    text-overflow:clip;
    padding-right:1.5rem;
  }
}

/* ======================================================================
   一覧ページ（/faq/）
   ====================================================================== */

.p-faq-list-section{padding-top:3rem;}

.p-faq-list{
    list-style:none;
    max-width:56.25rem;
    margin:0 auto;
    padding:0;
    border-top:1px solid var(--line);
  }

/* 背景は敷かず、区切りの線だけで行を分ける */
.p-faq-list__item{
    border-bottom:1px solid var(--line);
  }

.p-faq-list__link{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1.375rem 1.5rem;
    transition:background .2s ease;
  }

.p-faq-list__link:hover{background:var(--purple-050);}

/* 行頭の「Q.」。折り返しても1行目に揃うよう上寄せにする */
.p-faq-list__mark{
    flex:none;
    align-self:flex-start;
    font-family:"Noto Serif JP", serif;
    font-size:1.35rem;
    font-weight:700;
    line-height:1.55;
    color:var(--purple-900);
  }

/* 質問文。基準の本文サイズ1.25remに合わせる */
.p-faq-list__text{
    flex:1 1 auto;
    font-size:1.25rem;
    line-height:1.7;
    color:var(--ink);
  }

/* 右端の丸い矢印 */
.p-faq-list__arrow{
    flex:none;
    width:1.75rem; height:1.75rem;
    border-radius:50%;
    background:var(--purple-900);
    display:flex; align-items:center; justify-content:center;
    transition:background .2s ease;
  }

.p-faq-list__arrow svg{
    width:0.8125rem; height:0.8125rem;
    stroke:#fff; fill:none;
    stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  }

.p-faq-list__link:hover .p-faq-list__arrow{background:var(--yellow-dark);}

/* 原稿未確定の行。公開前に必ず解消する */
.p-faq-list__item--draft .p-faq-list__mark,
.p-faq-list__item--draft .p-faq-list__text{color:var(--purple-300);}

.p-faq-list__item--draft .p-faq-list__arrow{background:var(--purple-300);}

.p-faq-list__note{
    max-width:56.25rem;
    margin:1.75rem auto 0;
    font-size:1.25rem;
    line-height:1.8;
    color:var(--ink-soft);
  }

/* ----------------------------------------------------------------------
   ページタイトルの強調語
   費用ページ・流れページ（page-fee.css / page-flow.css）と同じ指定。
   黄色の下線ではなく赤字＋1.25emで、タイトルの見た目が3ページで揃う
   ---------------------------------------------------------------------- */
.c-hero h1 .c-highlight{
    background:none;
    color:#B31F31;
    font-size:1em;   /* h1本体を大きくしたため、強調語は同サイズにする */
  }

/* ======================================================================
   個別ページ（/faq/001 〜 /faq/021）
   ====================================================================== */

/* 質問文はヘッダー帯のh1として置く。長文になるため上限幅を広めに取る */
.c-hero--faq{padding:3.25rem 0 3rem;}

/* 「Q」の丸マークと質問文を横並びにする。回答側の「A」と同じ組み方 */
.p-faq-detail__qrow{
    display:flex;
    align-items:flex-start;
    gap:1.25rem;
    max-width:53.75rem;
    margin:0 auto;
    text-align:left;
  }

/* 回答の「A」と同じ円。色だけ濃い紫にして質問と答えを見分ける */
.p-faq-detail__qmark{
    flex:none;
    width:2.75rem; height:2.75rem;
    border-radius:50%;
    background:var(--purple-900);
    color:#fff;
    font-family:"Noto Serif JP", serif;
    font-size:1.45rem;
    font-weight:700;
    line-height:2.75rem;
    text-align:center;
  }

.c-hero--faq h1.p-faq-detail__q{
    flex:1 1 auto;
    max-width:none;
    font-size:clamp(1.35rem, 3.1vw, 1.85rem);
    line-height:1.6;
    text-align:left;
    margin:0;
  }

.p-faq-detail{padding-top:3rem;}

/* ---------- 回答本文 ---------- */
.p-faq-detail__answer{
    display:flex;
    align-items:flex-start;
    gap:1.25rem;
    max-width:53.75rem;
    margin:0 auto;
  }

.p-faq-detail__answer-mark{
    flex:none;
    width:2.75rem; height:2.75rem;
    border-radius:50%;
    background:var(--yellow);
    color:var(--purple-900);
    font-family:"Noto Serif JP", serif;
    font-size:1.45rem;
    font-weight:700;
    line-height:2.75rem;
    text-align:center;
  }

.p-faq-detail__body{flex:1 1 auto;}

/* 基準の本文サイズ */
.p-faq-detail__body p{
    margin:0;
    font-size:1.25rem;
    line-height:1.95;
    color:var(--ink-soft);
  }

.p-faq-detail__body p + p{margin-top:1.25rem;}

/* 回答本文の強調（<strong>）
   サイト内の強調表現に合わせた赤字＋太字。
   色はTOPページの .c-strength__emphasis 等と同じ #B31F31 */
.p-faq-detail__body strong{
    font-weight:700;
    color:#B31F31;
  }

/* 回答内の小見出し（データ側で行頭が「・」の段落）。基準の1.45rem */
.p-faq-detail__sub{
    margin:2.25rem 0 0.875rem;
    padding-left:0.75rem;
    border-left:4px solid var(--yellow-dark);
    font-size:1.45rem;
    line-height:1.6;
    color:var(--purple-900);
  }

.p-faq-detail__sub + p{margin-top:0;}

.p-faq-detail__body p + .p-faq-detail__sub{margin-top:2.25rem;}

/* 原稿未確定の注意書き */
.p-faq-detail__draft{
    max-width:53.75rem;
    margin:0 auto 1.75rem;
    padding:0.875rem 1.125rem;
    border-left:4px solid var(--yellow-dark);
    background:var(--yellow-050);
    font-size:1.1rem;
    line-height:1.7;
    color:var(--ink-soft);
  }

/* ----------------------------------------------------------------------
   ミニCTA
   page-top.css の「Mini CTA band」と同じ指定。
   FAQページは page-top.css を読み込まないため、ここに複製している。
   TOP側を変更した場合はこちらも合わせて直すこと
   ---------------------------------------------------------------------- */
.c-mini-cta{
    background:var(--purple-900);
    padding:2.75rem 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    text-align:center;
  }

.c-mini-cta p{
    font-family:"Noto Sans JP",sans-serif;
    font-weight:700;
    color:#fff;
    font-size:1.2rem;
    margin:0 0 1.375rem;
  }

.c-mini-cta__note{
    margin:-0.75rem 0 1.375rem;
    color:#fff;
    font-family:"Noto Sans JP",sans-serif;
    font-weight:700;
  }

/* ---------- 関連Q&A ---------- */
/* 個別ページは最終CTAを置かないため、下側の余白を確保する */
.p-faq-foot{padding-top:3.5rem; padding-bottom:4.5rem;}

.p-faq-related{
    max-width:53.75rem;
    margin:0 auto;
  }

.p-faq-related__title{
    font-size:1.45rem;
    line-height:1.6;
    padding-bottom:0.75rem;
    border-bottom:2px solid var(--purple-100);
  }

.p-faq-related__list{
    list-style:none;
    margin:0;
    padding:0;
  }

.p-faq-related__item{border-bottom:1px solid var(--line);}

.p-faq-related__link{
    display:flex;
    align-items:flex-start;
    gap:0.875rem;
    padding:1.125rem 0.25rem;
  }

/* 一覧ページと同じ「Q.」表記。番号は出さない */
.p-faq-related__mark{
    flex:none;
    align-self:flex-start;
    font-family:"Noto Serif JP", serif;
    font-size:1.25rem;
    font-weight:700;
    line-height:1.7;
    color:var(--purple-900);
  }

.p-faq-related__text{
    flex:1 1 auto;
    font-size:1.25rem;
    line-height:1.7;
  }

/* 一覧と揃えて、下線ではなく背景色でホバーを示す */
.p-faq-related__link{
    border-radius:8px;
    transition:background .2s ease;
  }

.p-faq-related__link:hover{background:var(--purple-050);}

/* ---------- 一覧へ戻るボタン ---------- */
.p-faq-back{
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:26.25rem;
    margin:3rem auto 0;
    padding:1.125rem 1.5rem;
    border:2px solid var(--purple-900);
    border-radius:999px;
    background:#fff;
    color:var(--purple-900);
    font-size:1.25rem;
    font-weight:700;
    line-height:1.6;
    text-align:center;
    transition:background .2s ease, color .2s ease;
  }

.p-faq-back:hover{
    background:var(--purple-900);
    color:#fff;
  }

/* ======================================================================
   SP表示（判定は900px以下でサイト共通に揃える）
   ====================================================================== */

@media(max-width:900px){

  /* ---------- 一覧 ---------- */
  .p-faq-list__link{
    gap:0.75rem;
    padding:1.25rem 1rem;
  }

  .p-faq-list__mark{font-size:1.3rem;}

  .p-faq-list__text{font-size:1.25rem;}

  .p-faq-list__arrow{width:1.5rem; height:1.5rem;}

  .p-faq-list__arrow svg{width:0.75rem; height:0.75rem;}

  .p-faq-list__note{font-size:1.15rem;}

  /* ---------- 個別 ---------- */
  .c-hero--faq h1.p-faq-detail__q{font-size:min(5.2vw, 1.62rem);}

  .p-faq-detail__qrow{gap:0.875rem;}

  .p-faq-detail__qmark{
    width:2.25rem; height:2.25rem;
    font-size:1.25rem;
    line-height:2.25rem;
  }

  .p-faq-detail__answer{
    gap:0.875rem;
  }

  .p-faq-detail__answer-mark{
    width:2.25rem; height:2.25rem;
    font-size:1.25rem;
    line-height:2.25rem;
  }

  .p-faq-detail__sub{font-size:1.45rem; margin-top:2rem;}

  .p-faq-related__title{font-size:1.45rem;}

  .p-faq-related__link{gap:0.75rem;}

  .p-faq-related__mark{font-size:1.2rem;}

  .p-faq-back{
    max-width:100%;
    font-size:1.35rem;
  }

}

/* ---------- Utility classes ---------- */
.u-br-sp{display:none;}

@media(max-width:768px){.u-br-sp{display:inline;}}

.c-eyebrow--center{justify-content:center;}