@charset "UTF-8";
/* ==========================================================================
   SECTION 8 ｜ お客様の『わっ！すごい！』は、こんな変化から生まれました。（実例）
   参考元: assets/images/SECTION 8/SECTION8_参考元画像.png (1484x1060)
   設計幅 1484px。ヘッダー下 y=62 を原点にしたセクション座標（高さ 998px）で記述する。
   すべての寸法は「設計px × --u」の単一座標系（入れ子の掛け算をしない）。
   数値はすべて参考元のピクセル実測値（tools/box8.py・tools/find8.py）。
   ファイル末尾の「[CAL] 調整値」は tools/cal8.py が自動で書き換える。手で書かない。
   ========================================================================== */

section.s8{
  --y:      #F5C518;   /* 実測 黄（ピル・下線） */
  --y-stat: #F8B90F;   /* 実測 3列目の「短縮／明確化」の黄 */
  --y-cta:  #F7C21B;
  --y-tri:  #FAC302;   /* 実測 右端と左下の黄三角 */   /* 実測 CTAボタンの黄 */
  --ink:    #061637;   /* 実測 見出しの濃紺 */
  --ink-s:  #1E2443;   /* 実測 小見出しの濃紺 */
  --navy:   #16234C;   /* 実測 紺帯 */
  --card:   #FDFDFD;   /* 実測 カード地（背景とほぼ同色。境界は細い線と影でできている） */
  --bg:     #FCFCFC;   /* 実測 ページ地 */
  --cline:  #E9E9EE;   /* 実測 カードの枠線 */
  --dot:    #BABDC3;   /* 実測 点線仕切りの色 */

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

.s8-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;   /* 参考元は約物を詰めていない */
}
.s8-stage > *{ --u: 0.0673854cqw; }
.s8-stage img{ display: block; }

/* 位置指定の共通形（--x/--y2/--w/--h だけを各要素で持つ） */
.s8-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));
}

/* ── 装飾（カードの後ろ） ───────────────────────────────── */
.s8-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)); }
.s8-deco.flipx{ transform: scaleX(-1); }

/* 黄色い三角（参考元の実測：右は頂点(1370,233)・(1484,140)・(1484,385)、
   左下は(0,930)・(0,998)・(165,998)。カードとパネルの下に敷く） */
.s8-tri{ position: absolute; z-index: 0; background: var(--y-tri); pointer-events: none; }

/* 網点。支給素材は粒が参考元よりかなり粗いので、参考元を実測した値（tools/dotsref8.py →
   work8/dots8.json：間隔・直径・広がり・濃さの勾配）でCSSの点を敷く。
   参考元の網点は千鳥（互い違い）配置なので、同じ格子を半周期ずらして2枚重ねる。 */
.s8-dots{
  position: absolute; z-index: 0; pointer-events: 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));
  background-image:
    radial-gradient(circle, var(--dotc) 0 calc(var(--dr) * var(--u)), transparent calc((var(--dr) + 0.55) * var(--u))),
    radial-gradient(circle, var(--dotc) 0 calc(var(--dr) * var(--u)), transparent calc((var(--dr) + 0.55) * var(--u)));
  background-size: calc(var(--dp) * var(--u)) calc(var(--dp) * var(--u));
  background-position: 0 0, calc(var(--dp) / 2 * var(--u)) calc(var(--dp) / 2 * var(--u));
  --dotc: #151E5D;
  -webkit-mask-image: linear-gradient(var(--dir), #000 var(--m0), transparent var(--m1));
          mask-image: linear-gradient(var(--dir), #000 var(--m0), transparent var(--m1));
}
.s8-dots.y{ --dotc: #FBC42D; }
.s8-tri.tr{ left: calc(1269 * var(--u)); top: calc(140 * var(--u));
  width: calc(215 * var(--u)); height: calc(252 * var(--u));
  clip-path: polygon(100% 0, 0 63.5%, 100% 100%); }
.s8-tri.bl{ left: 0; top: calc(862 * var(--u));
  width: calc(165 * var(--u)); height: calc(68 * var(--u));
  clip-path: polygon(0 0, 0 100%, 100% 100%); }

/* ── 見出し ────────────────────────────────────────────── */
.s8-head, .s8-sub{ position: absolute; margin: 0; z-index: 2; white-space: nowrap; }
/* h2 自身はステージ左上に置き、中の各区画をセクション座標で絶対配置する */
.s8-head{ left: 0; top: 0; width: 100%; height: 0; font-weight: 900; line-height: 1; letter-spacing: 0; }
.s8-head > span{ position: absolute; display: block; }

.s8-h1{ left: calc(var(--h1x) * var(--u)); top: calc(var(--h1y) * var(--u));
  font-size: calc(var(--h1fs) * var(--u)); letter-spacing: calc(var(--h1ls) * var(--u)); }
/* 『 』は Noto Sans JP の字形が参考元より細い。高さは font-size、幅は scaleX で合わせる
   （SECTION 7 と同じ考え方。字送りは1文字だと効かない） */
.s8-h2{ left: calc(var(--h2x) * var(--u)); top: calc(var(--h2y) * var(--u));
  font-size: calc(var(--h2fs) * var(--u)); letter-spacing: calc(var(--h2ls) * var(--u));
  transform: scaleX(var(--h2sx)); transform-origin: 0 0; }
.s8-h3{ left: calc(var(--h3x) * var(--u)); top: calc(var(--h3y) * var(--u));
  font-size: calc(var(--h3fs) * var(--u)); letter-spacing: calc(var(--h3ls) * var(--u));
  transform: scaleX(var(--h3sx)); transform-origin: 0 0; }
.s8-h4{ left: calc(var(--h4x) * var(--u)); top: calc(var(--h4y) * var(--u));
  font-size: calc(var(--h4fs) * var(--u)); letter-spacing: calc(var(--h4ls) * var(--u)); }
.s8-h5{ left: calc(var(--h5x) * var(--u)); top: calc(var(--h5y) * var(--u));
  font-size: calc(var(--h5fs) * var(--u)); letter-spacing: calc(var(--h5ls) * var(--u)); }
.s8-mk{ z-index: 2; }

.s8-sub{ 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); }

/* ── カード ────────────────────────────────────────────── */
.s8-cards{ list-style: none; margin: 0; padding: 0; }
.s8-card{
  position: absolute; z-index: 1;
  left:   calc(56 * var(--u));
  width:  calc(1081 * var(--u));
  top:    calc(var(--ct) * var(--u));
  height: calc(var(--ch) * var(--u));
  background: var(--card);
  border-radius: calc(20 * var(--u));
  border: calc(2 * var(--u)) solid var(--cline);
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(20, 30, 70, 0.09);
}
/* 点線の縦仕切り（3本） */
.s8-div{
  position: absolute; z-index: 2;
  left: calc(var(--dx) * var(--u));
  top:  calc(var(--dy) * var(--u));
  width: calc(2 * var(--u));
  height: calc(var(--dh) * var(--u));
  /* 参考元の点線は「周期8px・芯3px・ふちがやわらかい」。単純な破線だと角が立つので、
     階段状の色でふちをぼかし、実測した濃さの分布（芯186前後）に合わせる */
  background-image: repeating-linear-gradient(to bottom,
      #DCDEE2 0 calc(0.6 * var(--u)),
      #C6C9CF calc(0.6 * var(--u)) calc(1.2 * var(--u)),
      var(--dot) calc(1.2 * var(--u)) calc(2.6 * var(--u)),
      #C6C9CF calc(2.6 * var(--u)) calc(3.2 * var(--u)),
      #DCDEE2 calc(3.2 * var(--u)) calc(3.8 * var(--u)),
      transparent calc(3.8 * var(--u)) calc(8 * var(--u)));
}

/* ── 右パネル ──────────────────────────────────────────── */
.s8-panel{
  position: absolute; z-index: 1;
  left:   calc(1156 * var(--u));
  top:    calc(273 * var(--u));
  width:  calc(264 * var(--u));
  height: calc(529 * var(--u));
  background: var(--card);
  border-radius: calc(24 * var(--u));
  border: calc(2 * var(--u)) solid var(--cline);
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(20, 30, 70, 0.09);
}

/* スマホ用の要約行と詳細の包み。
   要約行は PC では出さない。詳細の包みは PC では箱を作らない（絶対配置の基準を保つ） */
.s8-sum{ display: none; }
.s8-det{ display: contents; }

/* ── 3列目の数値（支給素材が無いのでCSS＋SVGで組む） ───────── */
.s8-stat{ position: absolute; z-index: 2; text-align: center; white-space: nowrap;
  left: calc(var(--x) * var(--u)); top: calc(var(--y2) * var(--u)); width: calc(var(--w) * var(--u)); }
.s8-stat .cap{ display: block; font-weight: 700; color: var(--ink-s);
  font-size: calc(var(--cfs) * var(--u)); line-height: 1;
  letter-spacing: calc(var(--cls) * var(--u)); }
.s8-stat .big{ display: block; font-weight: 900; color: var(--y-stat);
  font-size: calc(var(--bfs) * var(--u)); line-height: 1;
  letter-spacing: calc(var(--bls) * var(--u));
  margin-top: calc(var(--bgap) * var(--u)); }
.s8-stat.a{ --cfs: var(--capfs); --cls: var(--capls); --bfs: var(--bigfs); --bls: var(--bigls); --bgap: var(--biggap); --iw: var(--icw); --igap: var(--icgap); }
.s8-stat.b{ --cfs: var(--capfs2); --cls: var(--capls2); --bfs: var(--bigfs2); --bls: var(--bigls2); --bgap: var(--biggap2); --iw: var(--icw2); --igap: var(--icgap2); }
.s8-stat svg{ display: block; margin: calc(var(--igap) * var(--u)) auto 0;
  width: calc(var(--iw) * var(--u)); height: auto; }

/* ── CTA ───────────────────────────────────────────────── */
.s8-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)); }
.s8-cta img{ width: 100%; height: 100%; }
.s8-cta:focus-visible{ outline: calc(3 * var(--u)) solid var(--ink); outline-offset: calc(3 * var(--u)); }

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


/* [CAL] 調整値 ここから ─ tools/cal8.py が書き換える。手で編集しない ───── */
.s8-stage{
  --h1x: 61;   --h1y: 83;   --h1fs: 54.8; --h1ls: 4;
  --h2x: 290; --h2y: 68;  --h2fs: 68.22; --h2ls: 0;  --h2sx: 0.85;
  --h3x: 854; --h3y: 72;  --h3fs: 68.22; --h3ls: 0;  --h3sx: 0.85;
  --h4x: 900;  --h4y: 88;   --h4fs: 51;   --h4ls: 4;
  --h5x: 61;   --h5y: 158;  --h5fs: 53;   --h5ls: 2.48;
  --sx: 66;   --sy: 233;  --sfs: 23.7;  --sls: 2.48;
  --capfs: 16.4;  --capls: 1.47;  --bigfs: 36;  --bigls: 5.5; --biggap: 17;
  --capfs2: 16.4; --capls2: 0.8; --bigfs2: 32; --bigls2: 1.5; --biggap2: 20;
  --icw: 65; --icgap: 10; --icw2: 66.04; --icgap2: 8;
}
/* [CAL] 調整値 ここまで ────────────────────────────────── */


/* ==========================================================================
   右パネルの文言
   支給素材（pill-yoku-iwareru / bubble-service / pill-hanpo-ue /
   panel-text-genba-ul）は文字が画像に焼き込まれていて差し替えられないため、
   同じ見た目をテキストで組む。位置・大きさは素材と同じ設計px。
   ========================================================================== */
.s8-p-pill{
  z-index: 2; margin: 0;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  border-radius: calc(10 * var(--u));
  font-weight: 700; font-size: calc(var(--fs) * var(--u));
  letter-spacing: .06em; white-space: nowrap;
}
.s8-p-pill.y{ background: var(--y); color: var(--ink); border-radius: calc(28 * var(--u)); }

.s8-p-bubble{
  z-index: 2; margin: 0;
  display: grid; place-items: center;
  background: var(--card);
  border: calc(2 * var(--u)) solid var(--ink);
  border-radius: calc(16 * var(--u));
  color: var(--ink); text-align: center; font-weight: 700;
  font-size: calc(var(--fs) * var(--u)); line-height: calc(var(--lh) * var(--u));
}
.s8-p-bubble::after{            /* 下向きのしっぽ */
  content: ""; position: absolute; left: 50%; bottom: calc(-12 * var(--u));
  transform: translateX(-50%);
  width: calc(22 * var(--u)); height: calc(13 * var(--u));
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.s8-p-text{
  z-index: 2; margin: 0; text-align: center; color: var(--ink);
  font-weight: 700; font-size: calc(var(--fs) * var(--u));
  line-height: calc(var(--lh) * var(--u));
}
.s8-p-text .ul{
  background: linear-gradient(var(--y), var(--y)) no-repeat;
  background-size: 100% calc(5 * var(--u));
  background-position: 0 100%;
}

/* ── スマホ：絶対配置をやめて「1事例＝1カード」で縦に積む ── */
@media (max-width: 900px){
  section.s8{ padding: 44px 0 52px; }
  .s8-stage{ height: auto; min-height: 0; container-type: normal;
             padding: 0 5vw; }

  .s8-stage img.s8-deco{ display: none; }
  .s8-tri, .s8-div, .s8-dots{ display: none; }

  /* 見出し：静的に組み直す（マーカー画像は行内に流し込む） */
  .s8-head{ position: static; width: auto; height: auto;
            font-size: clamp(22px, 6.2vw, 34px); line-height: 1.5;
            letter-spacing: .02em; white-space: normal; }
  .s8-head > span{ position: static; display: inline; font-size: inherit;
                   letter-spacing: inherit; transform: none; }
  .s8-head img.s8-mk{ position: static; display: inline-block;
                      width: auto; height: 1.25em; vertical-align: -0.22em; }
  .s8-sub{ position: static; margin-top: 10px; white-space: normal;
           font-size: clamp(12.5px, 3.5vw, 16px); line-height: 1.7;
           letter-spacing: .04em; }

  /* ── 事例カード：ふだんは1行に畳み、タップで中身を開く ── */
  .s8-cards{ margin: 16px 0 0; padding: 0; }
  .s8-card{
    position: static; width: 100%; height: auto;
    margin-top: 0; padding: 4px 14px 14px;
    text-align: center; border-radius: 12px;
  }

  /* 要約行（会社名 ＋ 変化の数字） */
  .s8-sum{
    display: grid; grid-template-columns: 1fr; align-items: center;
    gap: 4px 12px; padding: 14px 0; text-align: left;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .s8-sname{ font-weight: 800; font-size: 16px; color: var(--ink); line-height: 1.4; }
  .s8-sname i{
    display: inline-block; margin-left: 8px; padding: 2px 8px;
    background: #EEF0F5; border-radius: 10px;
    font-style: normal; font-weight: 700; font-size: 11.5px; color: #5B6274;
    vertical-align: 2px;
  }
  .s8-schg{ grid-column: 1; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .s8-sst{ font-size: 13px; font-weight: 700; color: var(--y-stat); white-space: nowrap; }
  .s8-sst b{ margin-right: 6px; font-weight: 700; color: #5B6274; }
  /* 横スワイプで1枚ずつ見せるので、開閉の目印は出さない */
  .s8-smark{ display: none; }
  .s8-smark-unused{ grid-row: 1 / 3; grid-column: 2; position: relative;
             width: 28px; height: 28px; justify-self: end; align-self: center;
             border-radius: 50%; background: #F1F2F6; }
  .s8-smark::before, .s8-smark::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;
  }
  .s8-smark::after{ transform: rotate(90deg); }
  .s8-sum[aria-expanded="true"] .s8-smark{ background: var(--y-tri); }
  .s8-sum[aria-expanded="true"] .s8-smark::after{ transform: rotate(0deg); }

  /* 詳細 */
  .s8-det{ display: block; padding-bottom: 16px; }
  .s8-det[hidden]{ display: none; }
  .s8-bt, .s8-at{
    margin: 0; text-align: left; font-size: 15px; line-height: 1.6; font-weight: 700;
    padding: 12px 14px; border-radius: 10px;
  }
  .s8-bt{ background: #F1F2F5; color: #5B6274; }
  .s8-at{ background: #FFF8E1; color: var(--ink); margin-top: 8px; }
  .s8-bt b, .s8-at b{
    display: inline-block; margin-right: 10px; padding: 2px 10px;
    border-radius: 10px; font-family: "Poppins", sans-serif;
    font-size: 11.5px; letter-spacing: .06em; vertical-align: 2px;
  }
  .s8-bt b{ background: #DDDFE5; color: #4A5163; }
  .s8-at b{ background: var(--y); color: var(--ink); }
  /* 中身は文書順に流す：会社ラベル → BEFORE → 矢印 → AFTER → 数字2つ */
  .s8-card img{ position: static; width: auto; height: auto; }
  .s8-card img[data-cal^="avatar"]{ display: none; }   /* 会社名は要約行に出しているので不要 */
  .s8-card img[data-cal^="label"]{ display: none; }
  /* Before/After は上のテキストで読ませるので、画像の文字は出さない */
  .s8-card img[data-cal^="bpill"], .s8-card img[data-cal^="apill"],
  .s8-card img[data-cal^="before"], .s8-card img[data-cal^="after"],
  .s8-card img[data-cal^="arrow"]{ display: none; }
  .s8-card img[data-cal^="stat"]{ display: inline-block; width: 34%; max-width: 130px;
                                  margin: 16px 4% 0; vertical-align: top; }
  /* C社のテキスト製スタット（基底の width:calc(--w*--u) を打ち消す） */
  .s8-stat{ position: static; display: inline-block; width: auto;
            margin: 16px 6% 0; vertical-align: top; }
  .s8-stat .cap{ font-size: 13px; letter-spacing: .06em; }
  .s8-stat .big{ font-size: 26px; letter-spacing: .04em; margin-top: 6px; }
  .s8-stat svg{ width: 34px; height: auto; margin: 8px auto 0; }

  /* ── 右パネル（変化前 → 変化後） ── */
  .s8-panel{
    position: static; width: 100%; height: auto;
    margin-top: 14px; padding: 18px 16px 20px;
    text-align: center;
  }
  /* 基底 .s8-abs の width/height（設計px×--u）も外さないと文字が枠からはみ出す */
  .s8-panel .s8-abs{ position: static; width: auto; height: auto; }
  .s8-p-pill{ display: grid; width: 150px; height: 44px; margin: 0 auto;
              font-size: 17px; border-radius: 8px; }
  .s8-p-pill.y{ height: 46px; border-radius: 23px; font-size: 18px; }
  .s8-p-bubble{ display: grid; width: min(78%, 260px); height: auto; margin: 16px auto;
                padding: 12px 10px; font-size: 14px; line-height: 1.6;
                border-width: 2px; border-radius: 12px; }
  .s8-p-bubble::after{ bottom: -11px; width: 20px; height: 11px; }
  .s8-panel img[data-cal="p_chev"]{ display: block; width: 32px; height: auto; margin: 0 auto 16px; }
  .s8-panel img[data-cal="p_people"]{ display: block; width: 150px; height: auto; margin: 14px auto 0; }
  .s8-p-text{ font-size: 17px; line-height: 1.8; margin-top: 12px; }
  .s8-p-text .ul{ background-size: 100% 4px; }

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