@charset "UTF-8";
/* ==========================================================================
   SECTION 9 ｜ その『気になる』、会話するように答えます。（よくある質問）
   参考元: assets/images/SECTION 9/SECTION9_参考元画像.png (1484x1060)
   設計幅 1484px。ヘッダー下 y=62 を原点にしたセクション座標（高さ 998px）で記述する。
   すべての寸法は「設計px × --u」の単一座標系（入れ子の掛け算をしない）。
   数値はすべて参考元のピクセル実測値（tools/box9.py・tools/decoref9.py）。
   ファイル末尾の「[CAL] 調整値」は tools/cal9.py が自動で書き換える。手で書かない。
   ========================================================================== */

section.s9{
  --y-tri:  #FAC302;   /* 実測 右と左下の黄三角 */
  --ink:    #081334;   /* 実測 見出しの濃紺 */
  --ink-s:  #090B2C;   /* 実測 サブ見出しの濃紺 */
  --card:   #FEFEFE;   /* 実測 カード地 */
  --bg:     #FCFCFC;   /* 実測 ページ地 */
  --cline:  #F2F2F2;   /* 実測 カード枠線 */
  --dotc:   #151E5D;   /* 網点の紺 */

  position: relative;
  display: flex;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
  padding: 0;
}

.s9-stage{
  --u: 0.0673854cqw;              /* 1 設計px。1484px 幅のとき 1px */
  position: relative;
  width: min(100%, 1484px);
  height: calc(930 * var(--u));
  container-type: inline-size;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--ink);
  font-feature-settings: "palt" 0;   /* 参考元は約物を詰めていない */
}
.s9-stage > *{ --u: 0.0673854cqw; }
.s9-stage img{ display: block; }

/* 位置指定の共通形（--x/--y2/--w/--h だけを各要素で持つ） */
.s9-abs{
  position: absolute;
  left:   calc(var(--x) * var(--u));
  top:    calc(var(--y2) * var(--u));
  width:  calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}

/* ── 装飾（カードの後ろ） ───────────────────────────────── */
.s9-deco{
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  left: calc(var(--x) * var(--u)); top: calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.s9-deco.flipx{ transform: scaleX(-1); }
.s9-deco.flipy{ transform: scaleY(-1); }
.s9-deco.flipxy{ transform: scale(-1, -1); }

/* 黄色い帯（右上から左下へ流れる帯。参考元の実測：右端 y=139〜358、傾き dx/dy=-1.343）
   と左下の三角（(0,929)(0,998)(162,998)）。どちらもカード・パネルの下に敷く。 */
.s9-tri{ position: absolute; inset: 0; z-index: 0; background: var(--y-tri); pointer-events: none; }
.s9-tri.r{
  clip-path: polygon(
    calc(1484 * var(--u)) calc(139 * var(--u)),
    calc(1484 * var(--u)) calc(358 * var(--u)),
    calc(1300 * var(--u)) calc(495 * var(--u)),
    calc(1300 * var(--u)) calc(276 * var(--u)));
}
.s9-tri.bl{
  clip-path: polygon(0 calc(861 * var(--u)), 0 calc(930 * var(--u)), calc(162 * var(--u)) calc(930 * var(--u)));
}

/* ── カードとパネル ─────────────────────────────────────── */
.s9-card, .s9-panel{
  position: absolute; z-index: 1;
  left: calc(var(--x) * var(--u)); top: calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  background: var(--card);
  border: calc(1 * var(--u)) solid var(--cline);
  border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(9 * var(--u)) rgba(20, 24, 48, .045);
}
.s9-card{ list-style: none; margin: 0; padding: 0; }

/* ── 見出し ─────────────────────────────────────────────── */
.s9-head{
  margin: 0; position: static; z-index: 3;
  font-weight: 900; line-height: 1; white-space: nowrap;
}
.s9-head span{
  position: absolute; z-index: 3;
  left: calc(var(--x) * var(--u)); top: calc(var(--y2) * var(--u));
  font-size: calc(var(--fs) * var(--u));
  letter-spacing: calc(var(--ls) * var(--u));
  transform-origin: left top;
}
.s9-h1{ --x: var(--h1x); --y2: var(--h1y); --fs: var(--h1fs); --ls: var(--h1ls); }
.s9-h2{ --x: var(--h2x); --y2: var(--h2y); --fs: var(--h2fs); --ls: 0; transform: scaleX(var(--h2sx)); }
.s9-h3{ --x: var(--h3x); --y2: var(--h3y); --fs: var(--h3fs); --ls: 0; transform: scaleX(var(--h3sx)); }
.s9-h4{ --x: var(--h4x); --y2: var(--h4y); --fs: var(--h4fs); --ls: var(--h4ls); }
.s9-mk{ z-index: 3; }
/* 『』はマーカー画像の上に重なる（参考元では黄の上に紺のかぎ括弧が乗っている） */
.s9-head span.s9-h2, .s9-head span.s9-h3{ z-index: 4; }

.s9-sub{
  margin: 0; position: absolute; z-index: 3; white-space: nowrap;
  left: calc(var(--sx) * var(--u)); top: calc(var(--sy) * var(--u));
  font-size: calc(var(--sfs) * var(--u));
  letter-spacing: calc(var(--sls) * var(--u));
  font-weight: 700; line-height: 1; color: var(--ink-s);
}

/* ── Q&A の行（すべてステージ座標の絶対配置） ───────────── */
.s9-item{ position: static; }
.s9-item img{ position: absolute; z-index: 2;
  left: calc(var(--x) * var(--u)); top: calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.s9-item .qav{ z-index: 2; }
.s9-item .aper{ z-index: 3; }   /* 回答者は吹き出しの上に重なる */

/* ── 右パネルの中身 ─────────────────────────────────────── */
.s9-pn{ position: absolute; z-index: 2;
  left: calc(var(--x) * var(--u)); top: calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.s9-pn.front{ z-index: 3; }

/* ── CTA ───────────────────────────────────────────────── */
.s9-cta{ position: absolute; z-index: 3; display: block;
  left: calc(var(--x) * var(--u)); top: calc(var(--y2) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
.s9-cta img{ width: 100%; height: 100%; }
.s9-cta:focus-visible{ outline: calc(3 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); }

@media (prefers-reduced-motion: no-preference){
  .s9-cta{ transition: transform .18s ease; }
  .s9-cta:hover{ transform: translateY(calc(-2 * var(--u))); }
}

/* Q&A とパネルの包み箱。PC では箱を作らない（絶対配置の基準を変えないため） */
.s9-qhead, .s9-abody{ display: contents; }
/* 右パネルのグループ箱。PC では箱を作らない */
.s9-panelwrap{ display: contents; }

/* ── スマホ：チャット風の縦積みに組み直す ───────────────── */
@media (max-width: 900px){
  section.s9{ padding: 44px 0 52px; }
  .s9-stage{ height: auto; min-height: 0; container-type: normal; padding: 0 5vw; }

  .s9-stage img.s9-deco{ display: none; }
  .s9-tri, .s9-card{ display: none; }

  /* 見出し：静的に */
  .s9-head{ position: static; font-size: clamp(22px, 6.2vw, 34px);
            line-height: 1.5; white-space: normal; }
  .s9-head span{ position: static; display: inline; font-size: inherit;
                 letter-spacing: 0; transform: none; }
  .s9-head img.s9-mk{ position: static; display: inline-block;
                      width: auto; height: 1.25em; vertical-align: -0.22em; }
  .s9-sub{ position: static; margin-top: 10px; white-space: normal;
           font-size: clamp(12.5px, 3.5vw, 16px); line-height: 1.7;
           letter-spacing: .04em; }

  /* ── Q&A：1問1カード。Qは左寄せ・Aは右寄せのチャット風 ── */
  .s9-item{
    margin-top: 8px; padding: 0 14px;
    background: #FDFDFD; border: 1px solid #E9E9EE; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(20,30,70,.05);
    overflow: hidden;
  }
  .s9-item:first-of-type{ margin-top: 16px; }
  .s9-item img{ position: static; width: auto; height: auto; }
  /* 画像の文字は読みにくいので、スマホでは本物のテキストに差し替える */
  .s9-item img{ display: none; }

  /* ── 質問（タップで開く見出し） ── */
  .s9-qhead{
    display: grid; grid-template-columns: 1fr 28px; align-items: center;
    gap: 12px; min-height: 56px; padding: 14px 4px 14px 2px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .s9-qtx{
    font-weight: 800; font-size: 16px; line-height: 1.5; color: var(--ink);
    letter-spacing: .01em;
  }
  .s9-qtx::before{
    content: "Q."; margin-right: 8px; color: var(--ink);
    font-family: "Poppins", sans-serif; font-weight: 800; font-size: 18px;
  }
  /* 開閉の目印（＋／−） */
  .s9-mark{ position: relative; width: 28px; height: 28px; justify-self: end;
            border-radius: 50%; background: #F1F2F6; }
  .s9-mark::before, .s9-mark::after{
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 12px; height: 2px; margin: -1px 0 0 -6px;
    background: var(--ink); border-radius: 2px; transition: transform .2s ease;
  }
  .s9-mark::after{ transform: rotate(90deg); }
  .s9-qhead[aria-expanded="true"] .s9-mark{ background: var(--y-tri); }
  .s9-qhead[aria-expanded="true"] .s9-mark::after{ transform: rotate(0deg); }

  /* ── 回答 ── */
  .s9-abody{ display: block; padding: 0 4px 14px 2px; }
  .s9-abody[hidden]{ display: none; }
  .s9-atx{
    margin: 0; padding: 14px 14px 14px 16px;
    background: #F7F8FB; border-left: 3px solid var(--y-tri); border-radius: 0 10px 10px 0;
    font-size: 15px; line-height: 1.8; font-weight: 500; color: #1E2443;
  }
  .s9-atx br{ display: none; }

  /* ── 右パネル「わぁおの答え方」 ── */
  .s9-panel{ display: none; }
  .s9-panelwrap{
    display: block; margin-top: 16px; padding: 18px 16px 20px;
    background: #FDFDFD; border: 1px solid #E9E9EE; border-radius: 14px;
    box-shadow: 0 2px 5px rgba(20,30,70,.06);
    text-align: center;
  }
  .s9-panelwrap .s9-pn{ position: static; width: auto; height: auto; }
  .s9-panelwrap img[data-cal9="pn_badge"]{ display: block; width: min(72%, 280px); margin: 0 auto; }
  .s9-panelwrap img[data-cal9="pn_bub1"]{ display: inline-block; width: 52%; max-width: 210px;
                                          vertical-align: middle; margin-top: 16px; }
  .s9-panelwrap img[data-cal9="pn_per1"]{ display: inline-block; width: 25%; max-width: 105px;
                                          vertical-align: middle; margin: 16px 0 0 4%; }
  .s9-panelwrap img[data-cal9="pn_arrow"]{ display: block; width: 36px; margin: 12px auto; }
  .s9-panelwrap img[data-cal9="pn_bub2"]{ display: inline-block; width: 56%; max-width: 230px;
                                          vertical-align: middle; }
  .s9-panelwrap img[data-cal9="pn_per2"]{ display: inline-block; width: 34%; max-width: 145px;
                                          vertical-align: middle; margin-left: 2%; }
  .s9-panelwrap img[data-deco9="spark_pn"]{ display: none; }
  .s9-panelwrap img[data-cal9^="ic"]{ display: inline-block; width: 27%; max-width: 110px;
                                      margin: 16px 1.5% 0; vertical-align: top; }

  /* ── CTA ── */
  .s9-cta{ position: static; display: block; width: min(100%, 420px);
           height: auto; margin: 20px auto 0; }
  .s9-cta img{ width: 100%; height: auto; }
}

/* [CAL] 調整値 ここから ─ tools/cal9.py が書き換える。手で編集しない ───── */
.s9-stage{
  --h1x: 62.0; --h1y: 93.0; --h1fs: 46.69; --h1ls: -2.04;
  --h2x: 122.0; --h2y: 73.0; --h2fs: 66.96; --h2sx: 1.459;
  --h3x: 486.0; --h3y: 77.0; --h3fs: 66.96; --h3sx: 1.459;
  --h4x: 544.0; --h4y: 94.0; --h4fs: 47.00; --h4ls: 0.50;
  --sx: 64.0;  --sy: 166.0;  --sfs: 24.96;  --sls: 3.68;
}
/* [CAL] 調整値 ここまで ────────────────────────────────── */