.faq-category-title{font-size: var(--h2); font-weight:700; color:#fff; background:var(--key-blue); display:flex; width:fit-content; justify-self: center; padding:10px 40px; border-radius:80px; margin-bottom:65px;}
.section-stitle{display:flex; justify-content: center; margin-bottom: 60px;}

.category-title{width:100%; max-width:1000px; margin:0 auto 30px; font-size:var(--h3); font-weight: 700; color:#fff; background: var(--key-blue); text-align: center; padding:20px 0;}
.category-list{width:100%; max-width:960px; margin:0 auto 30px;}
.sp-br { display: none; }


.btn__block.flex{
  flex-wrap:wrap;
  gap:20px;
}

.btn__block a.type05{color:#333; background:#fff; border:solid 2px var( --key-grn); font-size:var(--m-text); width:calc((100% - 20px * 2) / 3); padding:12px 60px 12px 20px; text-align:left;}
.btn__block a.type05:after{content:""; display:block; width:30px; height:30px; background-image:url(../images/common/circle-arrow-grn.png); background-repeat:no-repeat; background-size:30px 30px; position:absolute; top:calc(50% - 15px); right:15px;}
.btn__block a.type05:hover{background:var(--key-grn); color:#fff;}

/* ↓ アイコン（アンカーナビ用） */
.btn__block a.type05.down:after{transform:rotate(90deg);}

/* FAQカテゴリーナビ section のパディング調整 */
section.faq-cat-nav .section-in{padding:20px 50px;}
.btn__block a.type05.blue{color:#333; background:#fff; border:solid 2px var( --key-blue); font-size:var(--m-text); width:calc((100% - 20px * 1) / 2); padding:12px 60px 12px 20px; text-align:left;}
.btn__block a.type05.blue:after{content:""; display:block; width:30px; height:30px; background-image:url(../images/common/circle-arrow-blue.png); background-repeat:no-repeat; background-size:30px 30px; position:absolute; top:calc(50% - 15px); right:15px;}
.btn__block a.type05.blue:hover{background:var(--key-blue); color:#fff;}

@media (max-width: 960px) {
  .btn__block a.type05{width:calc((100% - 20px * 1) / 2); padding:12px 60px 12px 20px;}
  .btn__block a.type05.blue{width:calc((100% - 20px * 1) / 2); padding:12px 60px 12px 20px;}
}

/* ▼ アイコン：PC は非表示 */
.faq-toggle-icon {
  display: none;
}

@media (max-width: 768px) {
  :where(.section-in--faq-page) .section-stitle{
    color: var(--key-blue);
    margin-bottom: var(--space-y-3xl);
  }

  /* アコーディオン：スマホのみ */
  .faq-toggle-icon {
    display: inline-block;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--key-blue);
    transition: transform 0.3s ease;
  }
  .faq__list dt {
    align-items: flex-start;
    cursor: pointer;
  }
  .faq__list dt.is-open .faq-toggle-icon {
    transform: rotate(180deg);
  }
  .faq__list dt p {
    align-self: center;
  }
  .faq__list dd {
    display: none;
  }
  .faq__list dt.is-open + dd {
    display: flex;
  }

  /* Q/Aアイコンを縮小して質問文の幅を確保 */
  .faq__list dl { gap: 24px; }
  .faq__list dt, .faq__list dd { gap: 14px; }
  .faq__list dt:before, .faq__list dd:before { aspect-ratio: 1; width: auto; height: 2.0em; font-size: min(17px, calc(17 / 14 * 1em)); flex-shrink: 0; align-items: center; position: relative; top: .2em; }
  .faq__list dt p, .faq__list dd p { width: auto; flex: 1; }
  .faq__list dd p {
    line-height: var(--line-height-text);
  }
}

@media (max-width: 768px) {

  .faq-cat-nav {
    background: var(--bg-light);
  }

  .faq-cat-nav-last {
    display: none !important;
  }

  :root:has( body.post-type-archive-faq) {
    --faq-cat-nav-height: 56px;
  }

  :where(.faq-body) .column {
    scroll-margin-top: var(--faq-cat-nav-height);
  }

  .btn__block a.type05{width:calc((100% - 20px * 1) / 2); padding:12px 60px 12px 20px;}
  .btn__block a.type05.blue{width:calc((100% - 20px * 0) / 1); padding:12px 60px 12px 20px;}
  .btn__block a.type05:after,
  .btn__block a.type05.blue:after{content:""; display:block; width:24px; height:24px; background-size:24px 24px; position:absolute; top:calc(50% - 12px); right:12px;}
  .btn__block a.type05.down:after{transform:rotate(90deg);}
  /* section.faq-cat-nav .section-in{padding:20px 30px;} */

  :where(.faq-cat-nav) .category-list {
    margin: 0;
  }

  /* モバイル改行用 */
  .category-list .sp-br { display: inline; }

  /* category-list：search__tags に準じてコンパクト化 */
  .category-list.btn__block.flex { gap: 8px 4px; }
  .category-list a.type05 {
    width: calc((100% - 8px) / 2);
    padding: 8px 32px 8px 10px;
    font-size: var(--ss-text);
  }
  .category-list a.type05:after { display: none; }
  .category-list a.type05 { padding-right: 10px; text-align: center; }
  /* section.faq-cat-nav .section-in { padding: 14px 20px; } */

  .faq__list--faq-page {
    margin-block: 0;
  }

  .faq__list dl {
    gap: 0;
  }
  .faq__list dt{
    line-height: var(--line-height-lead);
    /* margin-top: var(--space-y-2xl); */
    /* border-top: 1px solid #d5e6ee; */
    margin-top: var(--space-y-lg);
    padding-top: var(--space-y-ml);
  }
  .faq__list dt:first-child{
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
  .faq__list dt:before {
    align-items: center;
  }
  .faq__list dd {
    align-items: flex-start;
    font-weight: normal;
    margin-top: var(--space-y-element);
  }
}

/* ============================================================
   .faq-cat-nav — SPでは.achieve-anchor-navと同様にプルダウン化する
   （HTMLは変更せず、疑似要素をトリガーバーとして使う）
   ============================================================ */
@media (max-width: 768px) {

  section.faq-cat-nav {
    position: sticky;
    top: var(--header-height, 0px);
    z-index: 20;
    margin: 0;
    background: #fff;
    border-top: 1px solid #d9e8ef;
  }

  /* 閉じている状態に見せるトリガーバー */
  section.faq-cat-nav::before {
    content: "カテゴリからさがす";
    display: flex;
    align-items: center;
    height: 56px;
    box-sizing: border-box;
    padding: 0 40px 0 20px;
    font-size: var(--m-text);
    font-weight: 700;
    color: var(--key-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #d9e8ef;
  }

  section.faq-cat-nav-last::before {
    content: "カテゴリで探す";
  }

  /* 開閉シェブロン */
  section.faq-cat-nav::after {
    content: '';
    position: absolute;
    top: 22px;
    right: 20px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--key-blue);
    border-bottom: 2px solid var(--key-blue);
    transform: rotate(45deg);
    transition: transform .2s ease, top .2s ease;
    pointer-events: none;
  }

  section.faq-cat-nav.is-open::after {
    top: 26px;
    transform: rotate(-135deg);
  }

  /* リスト本体: 閉じているときは隠し、開いたら下のコンテンツに被さるオーバーレイとして表示 */
  /* section.faq-cat-nav.faq-cat-nav は style.css の section.faq-cat-nav.faq-cat-nav .section-in
     （paddingを設定している）と詳細度を合わせて上書きするため。paddingが残ると、
     max-height:0 で畳んでも overflow:hidden の裁ち落とし境界がpadding分だけ外側になり、
     閉じているはずの中身がpadding分だけ透けて見えてしまう。 */
  section.faq-cat-nav.faq-cat-nav .section-in {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
    transition: max-height .3s ease;
  }

  section.faq-cat-nav.is-open .section-in {
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
  }

  /* トリガーバーの文言と重複するため、開いたオーバーレイ内では見出しを非表示にする */
  section.faq-cat-nav .category-title {
    display: none;
  }

  /* リンクの見た目もボタンではなく、achieve-anchor-navの.flow-anchor-linkと同様の
     リスト行（区切り線＋左寄せテキスト＋右端に小さい丸アイコン）にする */
  .faq-cat-nav .category-list.btn__block.flex {
    display: block;
    gap: 0;
    margin: 0;
  }

  .faq-cat-nav .category-list a.type05,
  .faq-cat-nav .category-list a.type05.blue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: var(--space-y-sm) var(--space-x-page);
    border: none;
    border-top: 1px solid #d8e6f0;
    border-radius: 0;
    background: none;
    color: #333;
    font-size: var(--s-text);
    font-weight: 700;
    text-align: left;
  }

  .faq-cat-nav .category-list a.type05:first-child {
    border-top: none;
  }

  .faq-cat-nav .category-list a.type05:hover,
  .faq-cat-nav .category-list a.type05.blue:hover {
    background: none;
    color: var(--key-blue);
  }

  /* flow-anchor-link__icon相当: 右端に小さい丸アイコンをインラインで表示する */
  .faq-cat-nav .category-list a.type05:after {
    content: "";
    display: block;
    position: static;
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
    flex-shrink: 0;
    transform: none;
  }

  .faq-cat-nav .category-list a.type05 br {
    display: none;
  }
}