/* ============================================================
   n1a Big Five — 設問スケール コンポーネント
   すべて .bfq / .bfq-* 配下。ホスト側のCSSと衝突しないよう独立させている。
   配色・寸法は :root ではなくコンポーネント側の変数で持つので、
   ホストページ（LP動線／システム動線）は変数を上書きするだけで調整できる。
   ============================================================ */

.bfq{
  /* --- 円のサイズ --------------------------------------------------
     大きさ・間隔・線の太さはすべて --bfq-dot（最大円の直径）から比率で出す。
     デザイン実測比 = 1 : .735 : .526 : .735 : 1／間隔 .635／線 .053。
     ※ 派生値をカスタムプロパティにすると宣言した要素で解決されてしまい、
        子孫で --bfq-dot を上書きしても追従しない。使う場所で calc すること。
  ------------------------------------------------------------------ */
  --bfq-dot:      clamp(40px, 10.4vw, 72px);

  /* --- 配色 --- */
  --bfq-agree:      #3699EA;   /* そう思う側（青） */
  --bfq-neutral:    #BBBCBC;   /* どちらでもない（グレー） */
  --bfq-disagree:   #DE58ED;   /* そう思わない側（マゼンタ） */
  --bfq-text:       #3f3f57;   /* 設問文 */
  --bfq-end:        #7c7c90;   /* 両端ラベル */
  --bfq-line:       rgba(89,69,182,.13);
  --bfq-need:       #DC2626;

  /* --- 余白 --- */
  --bfq-row-py:     clamp(20px, 3.2vw, 30px);
  --bfq-row-px:     clamp(16px, 3vw, 32px);

  font-family:inherit;
  color:var(--bfq-text);
}

/* ---------- 設問リスト ---------- */
.bfq__list{ display:block; }

.bfq-row{
  position:relative;
  padding:var(--bfq-row-py) var(--bfq-row-px);
  border-bottom:1px solid var(--bfq-line);
  scroll-margin-top:170px;
  transition:background .3s ease;
}
.bfq-row:last-child{ border-bottom:none; }

.bfq-row__text{
  margin:0 0 clamp(14px,2.2vw,22px);
  font-size:clamp(14.5px,1.9vw,17px);
  font-weight:700;
  line-height:1.7;
  letter-spacing:.01em;
  color:var(--bfq-text);
}
.bfq-row__num{
  display:inline-block;
  margin-right:.6em;
  font-size:.82em;
  font-weight:800;
  color:var(--bfq-agree);
  font-variant-numeric:tabular-nums;
}

/* 未回答フラグ（送信時にハイライト） */
.bfq-row.is-need{ background:rgba(220,38,38,.045); }
.bfq-row.is-need::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--bfq-need);
}
.bfq-row__need{
  display:none; margin:12px 0 0;
  font-size:12.5px; font-weight:700; color:var(--bfq-need);
}
.bfq-row.is-need .bfq-row__need{ display:block; }

/* ---------- 5段階スケール ---------- */
.bfq-scale{
  display:grid;
  grid-template-columns:1fr repeat(5, auto) 1fr;
  align-items:center;
  column-gap:calc(var(--bfq-dot) * .635);
}
.bfq-scale__end{
  font-size:clamp(12px,1.5vw,14px);
  font-weight:500;
  color:var(--bfq-end);
  white-space:nowrap;
  line-height:1.4;
}
.bfq-scale__end--agree{ justify-self:end; }
.bfq-scale__end--disagree{ justify-self:start; }

/* ---------- 選択肢の円 ---------- */
.bfq-opt{
  --c:var(--bfq-neutral);
  appearance:none; -webkit-appearance:none;
  display:grid; place-items:center;
  width:calc(var(--bfq-dot) * .526); height:calc(var(--bfq-dot) * .526);
  padding:0; margin:0;
  border:max(2px, calc(var(--bfq-dot) * .053)) solid var(--c);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.bfq-opt--lg{ width:var(--bfq-dot);                 height:var(--bfq-dot); }
.bfq-opt--md{ width:calc(var(--bfq-dot) * .735);    height:calc(var(--bfq-dot) * .735); }
.bfq-opt--sm{ width:calc(var(--bfq-dot) * .526);    height:calc(var(--bfq-dot) * .526); }

.bfq-opt--agree{    --c:var(--bfq-agree); }
.bfq-opt--neutral{  --c:var(--bfq-neutral); }
.bfq-opt--disagree{ --c:var(--bfq-disagree); }

@media (hover:hover){
  .bfq-opt:hover{ background:color-mix(in srgb, var(--c) 14%, transparent); transform:scale(1.06); }
}
.bfq-opt:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px color-mix(in srgb, var(--c) 55%, transparent);
}
.bfq-opt:active{ transform:scale(.94); }

/* 選択済み：塗りつぶしは円と同じ色 ＋ 白いチェック */
.bfq-opt.is-on{
  background:var(--c);
  box-shadow:0 6px 18px color-mix(in srgb, var(--c) 38%, transparent);
}
.bfq-opt__ck{
  width:52%; height:52%;
  fill:none; stroke:#fff; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.4);
  transition:opacity .16s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.bfq-opt.is-on .bfq-opt__ck{ opacity:1; transform:scale(1); }

/* スクリーンリーダー用ラベル */
.bfq-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* color-mix 非対応ブラウザ向けのフォールバック */
@supports not (color: color-mix(in srgb, red 50%, transparent)){
  .bfq-opt:hover{ background:rgba(0,0,0,.04); }
  .bfq-opt:focus-visible{ box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(54,153,234,.5); }
  .bfq-opt.is-on{ box-shadow:0 6px 18px rgba(62,46,148,.2); }
}

/* ---------- 進捗バー（ロゴのマークが先頭を走る） ---------- */
.bfq-progress{
  --bfq-p:0%;
  --bfq-bar-h:14px;
  --bfq-mark:28px;
  --bfq-mark-lift:5px;              /* マークの下端とバー上端のすき間 */
  /* 塗りの先端の位置。バーが0のときも先端が見えるよう、最低でもバーの高さ分は出す。
     clip-path とマークの left で同じ式を使い、ネコと塗りの先端を必ず一致させる。 */
  --bfq-head:max(var(--bfq-bar-h), var(--bfq-p));
  display:flex; align-items:center; gap:16px; width:100%;
}
.bfq-progress__track{
  position:relative; flex:1;
  height:var(--bfq-bar-h);
  border-radius:999px;
  background:#dbeaf9;
}
.bfq-progress__fill{
  position:absolute; inset:0;
  border-radius:999px;
  /* ロゴと同じ 青 → 藍 → マゼンタ。clip-path で左から現す（グラデは固定） */
  background:linear-gradient(90deg,#3699EA 0%,#4b45d6 46%,#DE58ED 100%);
  clip-path:inset(0 calc(100% - var(--bfq-head)) 0 0 round 999px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1);
}
.bfq-progress__mark{
  position:absolute;
  /* バーには乗せず、すぐ上に浮かせる（PDFのデザインと同じ関係） */
  bottom:calc(100% + var(--bfq-mark-lift));
  left:clamp(calc(var(--bfq-mark) / 2), var(--bfq-head), calc(100% - var(--bfq-mark) / 2));
  transform:translateX(-50%);
  width:var(--bfq-mark); height:auto;
  transition:left .45s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(62,46,148,.28));
}
.bfq-progress__mark.is-step{ animation:bfqHop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes bfqHop{
  0%{ transform:translateX(-50%) translateY(0) scale(1); }
  45%{ transform:translateX(-50%) translateY(-26%) scale(1.1); }
  100%{ transform:translateX(-50%) translateY(0) scale(1); }
}
.bfq-progress__count{
  font-size:15px; font-weight:800; white-space:nowrap;
  color:var(--bfq-agree); font-variant-numeric:tabular-nums;
}
.bfq-progress__count b{ font-size:19px; }
.bfq-progress__count i{ font-style:normal; opacity:.55; margin-left:1px; }

/* ---------- 狭いとき：両端ラベルを円の上に逃がす ---------- */
/* コンテナクエリ非対応ブラウザ向けのフォールバック（ビューポート基準） */
@media (max-width:600px){
  .bfq{ --bfq-dot:clamp(40px, 11.6vw, 58px); }
  .bfq-scale{
    grid-template-columns:repeat(5, auto);
    justify-content:space-between;
    column-gap:0; row-gap:10px;
  }
  .bfq-scale__end--agree{    grid-area:1 / 1 / 2 / 3; justify-self:start; }
  .bfq-scale__end--disagree{ grid-area:1 / 4 / 2 / 6; justify-self:end; }
  .bfq-opt{ grid-row:2; }
  .bfq-progress{ --bfq-bar-h:12px; --bfq-mark:26px; gap:12px; }
  .bfq-progress__count{ font-size:13px; }
  .bfq-progress__count b{ font-size:16px; }
}

/* ---------- 円の大きさは「置かれた箱の幅」で決める ----------
   1行の必要幅 = 3.996×dot（円5個）＋ 3.81×dot（間隔6個）＋ 両端ラベル。
   ビューポート基準だと、狭いカラムに入れたとき右の「そう思わない」がはみ出す。
   コンテナクエリで箱の幅から逆算し、どこに置いても収まるようにする。
   ホスト側で --bfq-dot を直接指定すればこの計算は上書きできる。
--------------------------------------------------------------- */
@supports (container-type: inline-size){
  .bfq{ container-type:inline-size; container-name:bfq; }
  /* 1行の必要幅 = 7.806×dot ＋ 両端ラベル(最大140px)。行の左右padding(最大32px)も引く。
     dot ≦ (箱幅 − 64 − 140) / 7.806 ＝ 12.8cqw − 28px */
  .bfq__list{ --bfq-dot:clamp(40px, calc(12.8cqw - 28px), 72px); }

  @container bfq (max-width: 620px){
    .bfq__list{ --bfq-dot:clamp(38px, 17cqw, 58px); }
    .bfq-scale{
      grid-template-columns:repeat(5, auto);
      justify-content:space-between;
      column-gap:0; row-gap:10px;
    }
    .bfq-scale__end--agree{    grid-area:1 / 1 / 2 / 3; justify-self:start; }
    .bfq-scale__end--disagree{ grid-area:1 / 4 / 2 / 6; justify-self:end; }
    .bfq-opt{ grid-row:2; }
  }
}

@media (prefers-reduced-motion:reduce){
  .bfq-opt,
  .bfq-opt__ck,
  .bfq-progress__fill,
  .bfq-progress__mark{ transition:none; }
  .bfq-progress__mark.is-step{ animation:none; }
}

/* ---------- 印刷（結果PDF）では設問を出さない ---------- */
@media print{
  .bfq, .bfq-progress{ display:none !important; }
}