@charset "UTF-8";

/* ===========================================================
   ユーザーアンケート結果2026 専用コンポーネント
   サイト共通枠に干渉しないよう、すべて .q2026 配下にスコープ。
   配色はアンケートの円グラフ（グリーン系）に合わせて調整。
   =========================================================== */

.q2026 {
  --q-green: #6f9a00;        /* アクセント文字（白背景で可読な濃いめの緑） */
  --q-green-dark: #7ba10c;   /* 1位バッジ・比較チップ①（濃い緑） */
  --q-green-badge: #9bc024;  /* バッジ・明るい緑（円グラフ「大変満足」に近い） */
  --q-green-mid: #bfd264;    /* 円グラフ「満足」に近い */
  --q-green-bg: #f4f8e6;     /* 淡い緑背景 */
  --q-green-border: #dbe7ad; /* 緑系ボーダー */
  --q-gray: #BDBDBD;         /* 4位以下・その他 */
  --border: #E0E0E0;
  --text-mid: #555;

  /* --- チャートのサイズ導出（依存関係の“単一起点”） ---
     ここ（--pair-max/--gap/--crop-zoom）だけ変えれば --col-w/--slide-w が自動追従する。 */
  --gap: 12px;
  --pair-max: 732px;   /* Q4〜Q7ペアの最大幅 */
  --crop-zoom: 2.2615; /* chart-crop の拡大率（円を枠に合わせる） */
  --col-w: calc((var(--pair-max) - var(--gap)) / 2); /* ペア1列 ≈360px */
  --slide-w: calc(var(--crop-zoom) * var(--col-w));  /* cropが描くスライド幅 ≈814px */
}

/* チャート枠のみコンテナ化（バッジ整列を viewport でなく“枠幅”で判定）。
   緑コンポーネント(.q2026)には付与しないので、そちらへの影響は無い。 */
.q2026.chartbox { container-type: inline-size; }

/* ===== ご要望ランキング ===== */
.q2026 .ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 12px 0 24px;
}
.q2026 .ranking-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.q2026 .ranking-card .rk-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--q-green);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--q-green-border);
}
.q2026 .rk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed #eee;
}
.q2026 .rk-item:last-child { border-bottom: none; }
.q2026 .rk-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--q-green-badge);
  color: #fff;
  font-family: sans-serif;
  font-weight: 900;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.q2026 .rk-num.gold   { background: var(--q-green-dark); }
.q2026 .rk-num.silver { background: var(--q-green-badge); }
.q2026 .rk-num.bronze { background: var(--q-green-mid); }
.q2026 .rk-num.other  { background: var(--q-gray); }
.q2026 .rk-label { font-size: 14px; flex: 1; }
.q2026 .rk-count {
  font-family: sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--q-green);
  white-space: nowrap;
}

/* ===== hanasoをどこで知りましたか？ ===== */
.q2026 .where-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 12px 0 24px;
}
.q2026 .where-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 18px;
  min-width: 230px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.q2026 .where-item .wi-icon { font-size: 24px; }
.q2026 .where-item .wi-label { font-size: 13px; font-weight: 600; color: var(--text-mid); }
.q2026 .where-item .wi-count {
  font-family: sans-serif;
  font-weight: 900; font-size: 22px;
  color: var(--q-green);
  margin-left: auto;
}

/* ===== 他社比較 ===== */
.q2026 .compare-box {
  background: var(--q-green-bg);
  border: 1px solid var(--q-green-border);
  border-radius: 16px;
  padding: 28px;
  margin: 12px 0 24px;
}
.q2026 .compare-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.q2026 .compare-pct {
  text-align: center;
  background: #fff;
  border: 2px solid var(--q-green-badge);
  border-radius: 12px;
  padding: 14px 22px;
  min-width: 120px;
}
.q2026 .compare-pct .num {
  font-family: sans-serif;
  font-size: 36px; font-weight: 900;
  color: var(--q-green);
  line-height: 1;
}
.q2026 .compare-pct .cap { font-size: 12px; color: #888; margin-top: 4px; }
.q2026 .compare-text { flex: 1; min-width: 220px; font-size: 14px; color: var(--text-mid); line-height: 1.8; }
.q2026 .compare-text strong { color: var(--q-green); }
.q2026 .compare-top5-label { font-size: 14px; font-weight: bold; color: var(--text-mid); margin: 0 0 12px; }
.q2026 .compare-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.q2026 .compare-chips .chip {
  color: #fff;
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 13px; font-weight: bold;
}
.q2026 .chip.c1 { background: var(--q-green-dark); }
.q2026 .chip.c2 { background: var(--q-green-badge); }
.q2026 .chip.c3 { background: var(--q-green-mid); }
.q2026 .chip.c4 { background: var(--q-gray); }
.q2026 .chip.c5 { background: var(--q-gray); }
.q2026 .compare-chips .chip .cnt { opacity: 0.85; margin-left: 4px; font-weight: 700; }

/* ===========================================================
   満足度チャート（Q1〜Q7）
   -----------------------------------------------------------
   ■設計
   ・Q4〜Q7 = chart-crop：元スライドを --crop-zoom 倍に拡大し、円だけを枠に表示。
     結果、スライドは --slide-w(≈814px) の幅で描画される。
   ・Q2/Q3 = chart-band：元スライドを切らず全幅表示（上下余白のみ除去）。
     幅を --slide-w に合わせることで、Q4〜Q7 と同じ倍率＝同じ円サイズになる。
   ・Q1 = chart-q1：合成画像で円が少し大きいため、770px で円サイズが一致。上の余白のみトリミング。
   ■依存関係（画像やペア幅を変えたら“ここ”が起点）
   ・--pair-max / --gap / --crop-zoom を変えれば --col-w / --slide-w が自動追従
     （→ chart-crop の拡大率 / chart-band の幅 に反映される）。
   ・770px・-6.3%・-3.9%・-8.28%・aspect(1280/542)・crop の各% は、元スライドの
     “構図の実測値”に基づく固定値（bbox 左138/上106、中身1280×542、円中心x=418（Q1のみ388）、
     バッジ左138）。画像を差し替えたら実測して更新すること。
   ■レスポンシブ（切り取り禁止による“物理的”制約）
   ・円サイズ一致とバッジ整列が厳密に成立するのは枠幅 ≥ --slide-w(≈814px) のときのみ。
     それ未満では、切らない制約上 Q2/Q3 は枠幅までしか拡大できず、Q4〜Q7 より円が数%小さくなる
     （枠外にはみ出す or 切る 以外に解が無い＝物理的限界）。
   ・そこで枠 < 815px ではバッジ整列シフトを無効化し中央寄せへ退避（崩れ・横スクロールを防ぐ）。
     判定は viewport ではなく“枠幅そのもの”＝ @container で行う（.q2026.chartbox が container）。
   =========================================================== */

/* Q1: 合成画像。円サイズをQ4〜Q7に合わせる幅770px。上の余白のみCSSトリミング（下の注記は残す） */
.q2026 .chart-q1 {
  position: relative;
  width: 100%;
  max-width: 770px; /* 円がQ4〜Q7と一致する幅（Q1は円が大きめのため732より広い） */
  aspect-ratio: 1280 / 638; /* 上に余白≈15px(y=82〜)を残す。下は注記＋余白を残す（Q2/Q3と同じ考え方） */
  overflow: hidden;
  margin: 0 auto; /* 上余白は画像内に含めるので外側マージンは不要 */
}
.q2026 .chart-q1 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: -6.4%; /* 上を y=82 から表示（余白を約15px残す） */
}

/* Q4〜Q7: 2枚横並び（スマホでも折り返さない） */
.q2026 .chart-pair {
  display: flex;
  gap: var(--gap);
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap; /* スマホでも常に横並び（幅に応じて縮小） */
  max-width: var(--pair-max);
  margin: 0 auto;
}
.q2026 .chart-col {
  flex: 1 1 0%;  /* 等幅・常に横並び（0%表記で旧実装も安全） */
  min-width: 0;  /* 狭幅での確実な縮小（flexアイテムの min-width:auto 対策） */
  max-width: var(--col-w);
}
.q2026 .chart-crop {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 103.53%; /* 円を含む枠の縦横比（構図実測） */
  overflow: hidden;
}
.q2026 .chart-crop img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--crop-zoom) * 100%); /* = 226.15% */
  max-width: none;
  margin-left: -20.14%; /* 円を枠に合わせる横位置（構図実測） */
  margin-top: -14.49%;  /* 同 縦位置 */
}

/* Q2/Q3: 元スライドを切らず全幅表示。上下余白のみ除去。幅を --slide-w に合わせQ4〜Q7と同円サイズ */
.q2026 .chart-band {
  position: relative;
  width: 100%;
  max-width: var(--slide-w);
  aspect-ratio: 1280 / 566; /* 上に余白≈15px(y=82〜)を残しつつ表示。横並びcropの上余白と同等 */
  overflow: hidden;
  margin: 0 auto 4px;
}
.q2026 .chart-band img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: -6.4%; /* 上を y=82 から表示（余白を約15px残す。全部削ると上端ギリギリになるため） */
}
/* 下間隔を楽しさ(横並び)セクションと揃える（cropの下余白≈13px相当）。
   上余白は chart-band 自体（aspect/margin-top）に含めるため、上マージンは不要。
   Q2〜Q3の間隔＝Q2の下マージン(4px)＋Q3の画像内の上余白(≈15px)。 */
.q2026 .chart-band:last-child { margin-bottom: 13px; }

/* バッジ整列：Q1/Q2/Q3のバッジをQ4/Q6の縦線に合わせる。
   枠幅 ≥ 815px（= --slide-w 相当）でのみ有効。それ未満は中央寄せのまま退避。
   ※ 815px は --slide-w(≈814px) と一致させること。 */
@container (min-width: 815px) {
  .q2026 .chart-q1 img { margin-left: -6.3%; }   /* Q1 */
  .q2026 .chart-band img { margin-left: -3.9%; } /* Q2/Q3 */
}

@media (max-width: 600px) {
  .q2026 .ranking-grid { grid-template-columns: 1fr; }
}