/* =========================================================
   よくあるご質問(/faq/)固有 ── 第30回 Z-1。元:院長フォルダ faq/faq-v1.html(モック v2)
   色・線・角丸は今のサイトの部品に合わせた(白いカード=.oc-cards2 と同じ枠/矢印=ヘッダーのプルダウンと同じ線)
   リンクはサイト共通(.oc-link・.oc-prose a)
   ========================================================= */

/* 分類のボタン5つ(見出し帯の中・ページ内リンク) */
.oc-faq-index{list-style:none; margin:30px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.oc-faq-index a{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; background:#fff; border:1px solid rgba(27,32,135,.22); border-radius:999px; color:var(--ink); font-size:.88rem; letter-spacing:.04em; text-decoration:none; transition:border-color .3s var(--ease), color .3s var(--ease)}
.oc-faq-index a:hover{border-color:var(--red-soft); color:var(--red-soft)}
.oc-faq-index a:active{background:#FFF4F2; border-color:var(--red-soft)}
.oc-faq-index a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
@media (max-width:720px){
  .oc-faq-index{gap:8px}
  .oc-faq-index a{padding:0 14px; font-size:.84rem}
}

/* 質問と答え(白いカード。クリームの段でも白) */
.oc-faq-list{display:flex; flex-direction:column; gap:12px; max-width:820px; margin-top:clamp(24px,3vw,32px)}
.oc-faq{background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.08)}
.oc-psec.white .oc-faq{box-shadow:0 0 0 1px rgba(27,32,135,.14)}
.oc-faq summary{display:grid; grid-template-columns:24px minmax(0,1fr) 18px; column-gap:12px; align-items:start; min-height:44px; padding:16px 18px; list-style:none; cursor:pointer; font-weight:500; line-height:1.75; -webkit-tap-highlight-color:transparent}
.oc-faq summary::-webkit-details-marker{display:none}
.oc-faq summary:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:8px}
.oc-faq__qa{font-family:var(--mincho); font-weight:500; font-size:1.15rem; line-height:1.55; color:var(--red-soft)}
.oc-faq__ans .oc-faq__qa{color:var(--blue)}
.oc-faq__q{font-size:1rem; letter-spacing:.03em}
/* 開閉の矢印(ヘッダーのプルダウンと同じ線。開くと上向き) */
.oc-faq__chev{display:block; width:18px; height:18px; margin-top:5px; fill:none; stroke:var(--ink-soft); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease)}
.oc-faq[open] .oc-faq__chev{transform:rotate(180deg)}
@media (hover:hover){
  .oc-faq summary:hover .oc-faq__q{color:var(--red-soft)}
  .oc-faq summary:hover .oc-faq__chev{stroke:var(--red-soft)}
}
.oc-faq summary:active{background:#FFF8F6; border-radius:8px}
.oc-faq__ans{display:grid; grid-template-columns:24px minmax(0,1fr); column-gap:12px; padding:0 18px 18px}
.oc-faq__body{min-width:0}
.oc-faq__body p{margin:0 0 .6em; font-size:.95rem; line-height:1.95}
/* 答えの下の「→」リンク(第31回 AA-1):文の中と同じく行の中に置く。2行になっても、マーカーは行ごと・矢印は文のすぐ後ろ。1〜2文字だけの行を作らないよう、文に <wbr>(inc/faq.php) */
.oc-faq__body .oc-faq__more{margin:4px 0 0}
.oc-faq__more .oc-link{display:inline; margin:0; padding:2px 2px 0; line-height:1.9}
.oc-faq__more .oc-link svg.oc-link__arw{display:inline-block; margin-left:10px; vertical-align:middle}
@media (max-width:720px){
  .oc-faq summary{grid-template-columns:20px minmax(0,1fr) 16px; column-gap:10px; padding:14px 14px}
  .oc-faq__ans{grid-template-columns:20px minmax(0,1fr); column-gap:10px; padding:0 14px 16px}
  .oc-faq__qa{font-size:1.05rem}
  .oc-faq__q{font-size:.96rem}
  .oc-faq__chev{width:16px; height:16px}
}

/* 動きを減らす設定では、矢印を回す動きを付けない(開いたら向きだけ変わる) */
@media (prefers-reduced-motion:reduce){
  .oc-faq__chev,.oc-faq-index a{transition:none}
}