/* ===== faq ===== */
body{
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
/* ===== Section ===== */
.faq{
    background:var(--bg);
    padding:80px 24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
.faq-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
    width:100%;
  }
.faq-list{
    width:100%;
    max-width:1020px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
/* ===== Accordion item ===== */
/* faq-item は Q/A の白ボックスをまとめる透明コンテナ */
.faq-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:8px 24px;
    min-height:52px;
    text-align:left;
    background:var(--white);
    border-radius:16px;
  }
.q-left{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
.q-badge,
  .a-badge{
    flex-shrink:0;
    width:36px;
    height:36px;
    border-radius:30px;
    background:var(--sub);
    color:var(--blue);
    font-size:20px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
  }
.q-text{
    font-size:18px;
    font-weight:700;
    line-height:1.4;
    color:var(--text);   /* Figma: #333333 */
  }
/* plus / minus icon */
.q-icon{
    position:relative;
    flex-shrink:0;
    width:16px;
    height:16px;
  }
.q-icon::before,
  .q-icon::after{
    content:"";
    position:absolute;
    background:var(--blue);
    border-radius:2px;
  }
.q-icon::before{top:7px;left:0;width:16px;height:2px}
.q-icon::after{left:7px;top:0;width:2px;height:16px}
/* Figma: 開いてもQ行の「＋」はそのまま。A行の右端に「−」が付く */
.faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
  }
/* A行はQ行と同じ構成（白箱・角丸16・8px 24px）。隙間なく連結して1つの箱に見せる */
.faq-a-inner{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:52px;
    padding:8px 24px;
    background:var(--white);
    border-radius:16px;
  }
.a-text{
    font-size:18px;
    font-weight:700;
    line-height:1.5;
    color:var(--text);
  }
/* A行の「−」アイコン */
.a-icon{
    flex-shrink:0;
    margin-left:auto;
    width:16px;
    height:2px;
    border-radius:2px;
    background:var(--blue);
  }
/* ===== Contact button ===== */
/* ===== Responsive ===== */
@media (max-width:760px){
.faq{padding:56px 20px}
.q-text{font-size:16px}
.q-badge,
    .a-badge{width:32px;height:32px;font-size:18px}
.faq-q{padding:10px 16px}
.faq-a-inner{padding:10px 16px}
.a-text{font-size:16px}
}
@media (max-width:480px){
.q-text{font-size:15px}
.a-text{font-size:15px}
}