@charset "UTF-8";
/* faq.css — よくある質問（アコーディオン）。Figma: nZ1q PC 4:10934 / SP 4:11580
   開閉は grid-template-rows 0fr↔1fr（文字が潰れない・測定不要） */

.faq-section{padding-bottom:120px;}
.faq-list{width:min(100% - 48px,890px);margin:0 auto;}

/* 各Q&A（<details open>のまま .is-open で状態管理） */
.faq-item{border-bottom:1px solid var(--c-line);}

/* 質問行（summary） */
.faq-q{
  display:flex;align-items:center;gap:32px;
  padding:24px 16px;cursor:pointer;list-style:none;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-qtext{
  flex:1;text-align:left;
  font-family:var(--f-min);font-weight:600;font-size:18px;line-height:1.5;color:var(--c-ink);
}

/* Q / A バッジ（丸） */
.faq-badge{
  flex:none;width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-min);font-weight:400;font-size:21px;line-height:1;
}
.faq-badge--q{background:var(--c-beige);color:var(--c-green);}
.faq-badge--a{background:var(--c-green);color:#fff;}

/* ＋/−アイコン（緑） */
.faq-toggle{position:relative;flex:none;width:24px;height:24px;}
.faq-toggle::before,.faq-toggle::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--c-green);
}
.faq-toggle::before{width:14px;height:2px;transform:translate(-50%,-50%);}
.faq-toggle::after{width:2px;height:14px;transform:translate(-50%,-50%);transition:opacity .3s ease;}
.faq-item.is-open .faq-toggle::after{opacity:0;}   /* 開いたら − */

/* 回答（開閉ラッパ） */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.faq-item.is-open .faq-a{grid-template-rows:1fr;}
.faq-a-inner{min-height:0;overflow:hidden;}   /* clip専用（余白を付けない＝0fr時に0へ潰れる） */
.faq-a-row{display:flex;align-items:flex-start;gap:32px;padding:0 16px 24px;}
.faq-atext{flex:1;min-width:0;min-height:50px;display:flex;flex-direction:column;justify-content:center;}   /* 1行時はバッジ高(50px)内で縦中央／複数行時は高さが超えて上揃えのまま */
.faq-atext p{font-family:var(--f-min);font-weight:400;font-size:16px;line-height:1.75;color:var(--c-ink);}
.faq-atext p + p{margin-top:0;}

/* ===== SP ===== */
@media (max-width:767px){
  body{background:#fff;}                 /* SPもFAQコンテンツは白背景（Figma 4:11580）。faq.cssはfaq.htmlのみ読込＝このページ限定 */
  .faq-list{width:calc(100% - 20px);}    /* 画面幅に対応（左右10px・370pxの上限を撤廃） */
  .faq-q{gap:16px;padding:24px 16px;}
  .faq-qtext{font-size:16px;}
  .faq-badge{width:40px;height:40px;font-size:18px;}
  .faq-a-row{gap:16px;}
  .faq-atext{min-height:40px;}   /* SPバッジ高に合わせる */
  .faq-atext p{font-size:16px;}
}