@charset "UTF-8";
/*
 * FAQ ページ（ショートコード [kotonare_faq]）のスタイル
 * 色はフローティングチャット（faq-widget.css）と揃えている。
 */

.kf{
  /* チャット側と同じパレット */
  --kf-deep:#0E5C63;
  --kf-mid:#158A93;
  --kf-line:#CFE7E9;
  --kf-bg:#F3F9FA;
  --kf-ink:#0F3236;
  --kf-mint:#EAFBFB;
  /* タブ同士・Q&A 同士の間隔。ここ1箇所で決める */
  --kf-gap:0.6rem;
  color:var(--kf-ink);
}

/*
 * faq-page.js が初期化を終えるまでは最初の商品だけを見せる。
 * 初期化後は data-kf-ready が付いてこのルールが外れ、JS が hidden で制御する。
 * JS 無効時は page-template.php の <noscript> がタブを隠して全商品を並べる。
 */
.kf:not([data-kf-ready]) .kf-product:not(:first-of-type){
  display:none;
}

/* --- 商品タブ --- */
.kf-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:var(--kf-gap);
  margin-bottom:2rem;
}
.kf-tab{
  display:flex;
  align-items:center;
  gap:0.6em;
  /* 高さを超える半径は自動で比例縮小されるため、行数が増えても角丸は半分に保たれる */
  border:1px solid var(--kf-line);
  border-radius:99rem;
  background:#fff;
  /* テキストが折り返しても縁に触れないよう横余白を持たせる */
  padding:0.5em 1.1em;
  min-height:2.8em;
  color:var(--kf-deep);
  /* ボタン要素なので継承されない指定を戻す */
  font-family:inherit;
  font-size:inherit;
  font-weight:700;
  line-height:1.5;
  text-align:left;
  cursor:pointer;
}
.kf-tab:hover{
  background:var(--kf-mint);
}
.kf-tab:focus-visible{
  outline:2px solid var(--kf-deep);
  outline-offset:2px;
}
.kf-tab[aria-selected="true"]{
  border-color:var(--kf-deep);
  background:var(--kf-deep);
  color:#fff;
}
.kf-tab__count{
  /* 件数バッジ。桁数が増えても潰れないよう min-width で確保する */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.2em;
  min-height:1.8em;
  padding-inline:0.4em;
  border-radius:99rem;
  background:var(--kf-deep);
  color:#fff;
  font-size:0.78em;
  font-weight:500;
}
.kf-tab[aria-selected="true"] .kf-tab__count{
  /* 選択中はタブ自体が濃色になるので、バッジは白地に反転させる */
  background:#fff;
  color:var(--kf-deep);
}

/* --- 商品セクション（タブパネル） --- */
.kf-product{
  /* ハッシュ付き URL で開いたとき、見出しが画面上端に張り付かないようにする */
  scroll-margin-top:2rem;
}
.kf-product:focus{
  /* タブから矢印キーで移動したときにパネル全体を囲む枠は出さない */
  outline:none;
}
.kf-product__title{
  border-bottom:2px solid var(--kf-deep);
  padding-bottom:0.4em;
  margin-bottom:1.5rem;
}

/* --- カテゴリ見出し --- */
.kf-cat{
  display:flex;
  align-items:center;
  gap:0.6em;
  margin:2rem 0 var(--kf-gap);
  color:var(--kf-deep);
  font-size:1.05em;
}
.kf-cat::before{
  content:'';
  /* 見出しが2行になっても縦線が伸びるよう、高さは自身で持たず親に合わせる */
  align-self:stretch;
  flex-shrink:0;
  width:4px;
  min-height:1.2em;
  border-radius:99rem;
  background:var(--kf-mid);
}

/* --- Q&A --- */
.kf-item{
  border:1px solid var(--kf-line);
  border-radius:0.6rem;
  background:#fff;
  overflow:hidden;
}
.kf-item + .kf-item{
  margin-top:var(--kf-gap);
}
.kf-q{
  display:flex;
  align-items:center;
  gap:0.7em;
  padding:0.9em 1.1em;
  min-height:3.2em;
  background:var(--kf-bg);
  color:var(--kf-deep);
  font-weight:700;
  line-height:1.6;
  cursor:pointer;
  /* details の既定マーカーを消す（::marker と -webkit- の両方が必要） */
  list-style:none;
}
.kf-q::-webkit-details-marker{
  display:none;
}
.kf-q:hover{
  background:var(--kf-mint);
}
.kf-q:focus-visible{
  outline:2px solid var(--kf-deep);
  outline-offset:-2px;
}
.kf-item[open] .kf-q{
  border-bottom:1px solid var(--kf-line);
}
.kf-a{
  display:flex;
  gap:0.7em;
  padding:1.1em;
  line-height:1.9;
  /* 回答に含まれる改行をそのまま見せる。チャット側の吹き出しと同じ見え方にする */
  white-space:pre-wrap;
}

/* Q / A のバッジ。aspect-ratio で正円にするので width だけ指定すれば済む */
.kf-q::before,
.kf-a::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:1.8em;
  aspect-ratio:1;
  border-radius:50%;
  font-size:0.85em;
  font-weight:700;
}
.kf-q::before{
  content:'Q';
  background:var(--kf-deep);
  color:#fff;
}
.kf-a::before{
  content:'A';
  /* 回答は複数行になるので、上端に揃えて1行目の横に置く */
  align-self:flex-start;
  background:var(--kf-mint);
  color:var(--kf-deep);
  /* pre-wrap の影響を受けないようにする */
  white-space:normal;
}