/* ============================================================
   Business OS Website Top Renewal
   Visual Reconstruction Version 2 ── 編集長 Master Design（PNG）再現
   2026-08-04

   ★ 本ファイルはプロトタイプ専用である。本番実装ではない。
   ★ 本番共通 CSS（lp/index.html の <style>）を変更していない。
   ★ CDN・外部ライブラリを使用していない。Font は端末の Noto Sans JP。

   ── Version 2 の方針 ──────────────────────────
   ・Section 番号レールは ★ 完全に削除した（編集長判断⑥）
   ・図解列を大きく取り、文章のために図を縮小しない
   ・Section ごとに余白量を変える（均一 Spacing を用いない）
   ・Blue ／White ／Orange を主役にし、紺は Hero ・Section 4 ・Section 10 に限定
   ・カード ・図 ・リング ・CTA に PNG 相当の影と発光を与える
   ============================================================ */

:root {
  --blue:        #1e88e5;
  --blue-bright: #2196f3;
  --blue-deep:   #1565c0;
  --blue-ink:    #103d68;
  --blue-line:   #cfe4f7;

  --navy:        #0a2a4a;
  --navy-deep:   #061c33;

  --orange:      #f97316;
  --orange-soft: #fb923c;
  /* 通常サイズのテキストへ Orange を使う場合の色（白背景上 5.18：1 ／WCAG AA 適合）。
     面（ボタン背景）・アイコン・矢印には --orange をそのまま使う */
  --orange-text: #c2410c;
  --orange-text-hover: #9a3412;

  /* ── 現在公開中 AIKK Website 共通 Chrome（Header ／Footer）用 Token ──
     ★ lp/index.html ・lp/philosophy.html ほかの :root と同値。改変しない */
  --primary:      #1e88e5;
  --primary-dark: #1565c0;
  --accent:       #f97316;
  --accent-light: #fb923c;
  --text:         #1e293b;
  --text-light:   #64748b;
  --grad-accent:  linear-gradient(135deg, #f97316 0%, #fb923c 100%);

  --paper:   #ffffff;
  --pale:    #eef6fd;
  --pale-2:  #f6fbfe;

  --ink:      #16293c;
  --ink-mid:  #55708a;
  --line:     #dceaf6;
  --line-soft:#eaf3fa;

  --on-dark:      #ffffff;
  --on-dark-mid:  rgba(255, 255, 255, 0.88);
  --on-dark-soft: rgba(255, 255, 255, 0.7);
  --on-dark-line: rgba(255, 255, 255, 0.2);

  /* Hero ： サイトのテーマブルーと同系色の濃淡。★ 黒に近い濃紺を主役にしない
     ★★ 2026-08-31 ： 上半分のトーンを1段落とした（旧 #2b93e8 → #1f7fd4 始まり）。
       ★狙い ： 水色寄りの軽さを消し、オレンジCTAのコントラストを上げる。
         ★Section 6 の紺帯（--grad-navy #1663ae 始まり）との落差は残す。
       ★終端 #114a8c は変更していない。★--primary ／--primary-dark は変更していない。 */
  --grad-hero: linear-gradient(158deg, #1f7fd4 0%, #1c75c6 22%, #1869b4 46%, #1560a6 68%, #135497 86%, #114a8c 100%);
  /* Section 4 ： AIKK テーマブルーを基準に、Hero より1段深い階調（最も静か）*/
  --grad-navy: linear-gradient(150deg, #1663ae 0%, #145cae 30%, #12539b 62%, #0f4780 100%);
  /* Section 10 ： Hero と Section 4 の中間。CTA の Orange が最も映える明るさ */
  --grad-s10:  linear-gradient(145deg, #1b7ad0 0%, #1565c0 34%, #1259a5 68%, #104b8e 100%);
  --grad-cta:  linear-gradient(135deg, #f97316 0%, #fb923c 100%);

  --wrap: 1280px;
  /* ★ Page Inline（編集長正式判断 2026-08-04 ／対処案A）
     769px 以上 ＝80px ／768px 以下 ＝20px。
     Canonical Header ・Canonical Footer の .container、および
     64 Design Token Value Registry D-26 Page Horizontal Padding と同値。 */
  --pad-x: 80px;
  --gap: 44px;
  --radius: 10px;

  --shadow-card: 0 6px 22px rgba(16, 61, 104, 0.10), 0 1px 3px rgba(16, 61, 104, 0.06);
  --shadow-fig:  0 14px 40px rgba(16, 61, 104, 0.14);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad-x); }

/* ============================================================
   Header ／Navigation Overlay
   ★ 現在公開中 AIKK Website の共通 Chrome を正としている。
     lp/philosophy.html ほか下層9ページと同一実装（値を変更していない）。
   ============================================================ */

.container { max-width: 1280px; margin: 0 auto; padding: 0 80px; }

/* ── HEADER ── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(26,58,110,0.1);
  padding: 14px 0;
}
.hd-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-txt { display: flex; flex-direction: column; gap: 1px; }
.logo-txt .tag { font-size: 11px; color: var(--text-light); line-height: 1.3; }
.logo-txt .name { font-size: 13px; font-weight: 700; color: #1869b4; }

/* ── HAMBURGER BUTTON ── */
.hd-right { display: flex; align-items: center; gap: 12px; }
.hd-menu-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--text); padding: 8px 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
}
.hd-menu-btn:hover { color: var(--primary); }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
.nav-overlay {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 40vw);
  z-index: 200; background: white;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto; display: flex; flex-direction: column;
  box-shadow: -4px 0 32px rgba(0,0,0,0.15);
}
.nav-overlay.is-open { transform: translateX(0); }
.nav-ov-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky; top: 0; background: white; z-index: 1;
}
.nav-close {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--text); padding: 8px 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
}
.nav-close:hover { color: var(--primary); }
.nav-links { flex: 1; display: flex; flex-direction: column; padding: 8px 28px; }
.nav-links a {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0; font-size: 15px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.06); text-decoration: none;
  transition: color 0.2s, gap 0.2s;
}
.nav-links .nav-dash { color: var(--primary); font-weight: 400; flex-shrink: 0; }
.nav-links a:hover { color: var(--primary); gap: 20px; }
.nav-ov-cta { padding: 24px 28px 40px; }
.nav-ov-cta a {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; background: linear-gradient(135deg,#f97316,#fb923c); color: white;
  font-weight: 700; font-size: 15px; padding: 20px 24px; border-radius: 10px;
  text-decoration: none; box-shadow: 0 4px 24px rgba(249,115,22,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nav-ov-cta a:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(249,115,22,0.5); }
.nav-ov-label { font-size: 11px; font-weight: 400; opacity: 0.85; display: block; margin-bottom: 3px; }
.nav-ov-text { display: flex; flex-direction: column; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 32px; border-radius: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 16px; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none; line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
.btn-orange {
  background: var(--grad-accent); color: white;
  box-shadow: 0 4px 20px rgba(249,115,22,0.4);
}
.btn-orange:hover { box-shadow: 0 8px 32px rgba(249,115,22,0.55); }

/* ============================================================
   Section 共通 ── 左＝見出し列（狭い）／右＝図解列（広い）
   ★ Section 番号レールは持たない
   ============================================================ */

.sec { padding: 44px 0; }
.sec--pale  { background: var(--pale); }
.sec--pale2 { background: var(--pale-2); }
.sec--navy  { background: var(--grad-navy); color: var(--on-dark); }
/* 図が主役の Section は上下を広く取る（均一にしない）*/
#s3 { padding: 52px 0; }
#s4 { padding: 50px 0; }
#s5 { padding: 56px 0; }
#s9 { padding: 40px 0; }

.sec-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr);
  column-gap: var(--gap);
  align-items: center;
}

.h2 { font-size: 28px; font-weight: 900; line-height: 1.55; letter-spacing: -0.02em; color: var(--blue-ink); }
/* Section 8 見出しの改行位置切り替え ： 既定（Tablet ／Mobile）は現行のまま。
   Desktop（1025px 以上）でのみ br-pc 側へ切り替える */
.h2 .br-pc { display: none; }
.sec--navy .h2 { color: var(--on-dark); }
#s7 .h2 { font-size: 26px; }

.lead { margin-top: 14px; font-size: 13px; line-height: 1.85; color: var(--ink-mid); }
.sec--navy .lead { color: var(--on-dark-mid); }
.note  { margin-top: 15px; font-size: 13px; line-height: 1.85; color: var(--ink-mid); }
.sec--navy .note { color: var(--on-dark-mid); }
.trans { margin-top: 14px; font-size: 13px; line-height: 1.85; color: var(--blue); font-weight: 700; }
.sec--navy .trans { color: var(--on-dark-soft); font-weight: 400; }

/* ── カード（PNG の色分け ： 左＝Blue ／右＝Orange）── */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-hd {
  padding: 13px 20px 11px;
  font-size: 13.5px; font-weight: 900; letter-spacing: .02em;
  background: #f5faff; border-bottom: 1px solid var(--line-soft);
}
.card--blue   .card-hd { color: var(--blue); }
.card--orange .card-hd { color: var(--orange); background: #fff8f2; border-bottom-color: #ffe6d2; }
.card-bd { padding: 13px 18px 15px; display: grid; gap: 11px; }

.ck { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; }
.ck svg { width: 14px; height: 14px; margin-top: 5px; flex-shrink: 0; }
.card--blue   .ck svg { color: var(--blue); }
.card--orange .ck svg { color: var(--orange); }
.ck p { font-size: 13px; line-height: 1.75; color: var(--ink); }

/* ============================================================
   Section 1 Hero ── 図が主役
   ============================================================ */

.hero {
  position: relative; overflow: hidden;
  background: var(--grad-hero);
  color: var(--on-dark);
  /* ★ Header が fixed のため、Hero 上端に Header 実測高（69px）を加算する。
     Hero 内部の余白（52px）は変更していない */
  padding: 121px 0 60px;
}
/* 粒子 */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.7px 1.7px at 8% 16%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.3px 1.3px at 21% 58%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.9px 1.9px at 35% 24%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 78%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.8px 1.8px at 58% 12%, rgba(255,255,255,.72), transparent 60%),
    radial-gradient(1.3px 1.3px at 71% 66%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 84% 28%, rgba(255,255,255,.66), transparent 60%),
    radial-gradient(1.3px 1.3px at 93% 62%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 14% 86%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 44%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 40%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 84%, rgba(255,255,255,.4), transparent 60%);
}
/* 下部の弧（地平のような奥行き）＋ 右の光 */
.hero::after {
  content: ""; position: absolute; left: 50%; bottom: -76%;
  width: 172%; padding-top: 172%; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 12%, rgba(120, 200, 255, .34) 0%, rgba(21, 101, 192, .22) 34%, transparent 62%);
  border-top: 1px solid rgba(190, 226, 255, .34);
}
.hero .wrap { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  column-gap: 40px;
  align-items: center;
}

.hero-h1 { font-size: 40px; font-weight: 900; line-height: 1.45; letter-spacing: -0.02em; color: var(--on-dark); }
.hero-h1 .em { color: var(--orange-soft); }
.hero-h1 .nw { white-space: nowrap; }
.hero-sub { margin-top: 20px; font-size: 15px; line-height: 1.9; color: var(--on-dark-mid); }
.hero-cta-wrap { margin-top: 26px; }
.hero-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 26px;
  min-width: 274px;
  background: var(--grad-cta); color: #fff;
  font-size: 15.5px; font-weight: 700; line-height: 1;
  padding: 18px 24px; border-radius: 6px;
  box-shadow: 0 12px 32px rgba(249, 115, 22, 0.44);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(249,115,22,.52); }
.hero-cta svg { width: 16px; height: 16px; }
.hero-assure { margin-top: 14px; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--on-dark-soft); }
.hero-assure svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--on-dark-soft); }

/* Business OS リング ── PNG と同じ存在感。縮小しない */
.osring { position: relative; width: min(560px, 100%); aspect-ratio: 1; margin: 0 auto; }
.osring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.osring-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 36%, #1a6bb5 0%, #0f4a8b 55%, #0b3465 100%);
  border: 2px solid rgba(190, 226, 255, 0.7);
  box-shadow: 0 0 66px rgba(140, 205, 255, .55) inset, 0 0 52px rgba(140, 205, 255, .4);
  font-size: 21px; font-weight: 700; color: var(--on-dark);
}
.osring-nodes { position: absolute; inset: 0; }
.osring-nodes li {
  position: absolute; left: 50%; top: 50%;
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 3px;
  background: radial-gradient(circle at 50% 35%, #14528f 0%, #0c3462 100%);
  border: 2px solid rgba(190, 226, 255, 0.75);
  box-shadow: 0 0 26px rgba(140, 205, 255, .5);
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-215px) rotate(calc(var(--i) * -60deg));
}
.osring-nodes svg { width: 22px; height: 22px; color: #cfe8ff; }
.osring-nodes span { font-size: 12px; font-weight: 700; color: var(--on-dark); white-space: nowrap; line-height: 1.2; }

/* ============================================================
   Section 2
   ============================================================ */

.s2-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
}
.s2-cols > .s2-a      { grid-column: 1; grid-row: 2; }
.s2-cols > .s2-mid    { grid-column: 2; grid-row: 1 / span 2; }
.s2-cols > .s2-bridge { grid-column: 3; grid-row: 1; }
.s2-cols > .s2-b      { grid-column: 3; grid-row: 2; }
.s2-mid { display: grid; place-items: center; align-self: center; position: relative; }
.s2-mid::before, .s2-mid::after {
  content: ""; position: absolute; left: 50%; width: 1px; height: 42px;
  background: var(--blue-line);
}
.s2-mid::before { top: -14px; }
.s2-mid::after  { bottom: -14px; }
.s2-mid svg { width: 40px; height: 40px; color: var(--blue); }
.s2-bridge { margin-bottom: 12px; font-size: 12.5px; line-height: 1.75; color: var(--ink-mid); }
.s2-close { margin-top: 22px; font-size: 13px; line-height: 1.9; color: var(--ink-mid); text-align: center; }

/* ============================================================
   Section 3 ── 図を大きく
   ============================================================ */

.s3-fig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); column-gap: 24px; align-items: center; }
.s3-stack { display: grid; gap: 3px; justify-items: center; filter: drop-shadow(0 12px 26px rgba(16,61,104,.18)); }
.s3-layer {
  display: grid; place-items: center;
  height: 46px; color: #fff; font-size: 12.5px; font-weight: 700;
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
}
.s3-layer:nth-child(1) { width: 50%; background: #bcdcf6; color: var(--blue-ink); }
.s3-layer:nth-child(2) { width: 70%; background: #6fb3e8; color: #05233c; }
.s3-layer:nth-child(3) { width: 86%; background: #1f76c8; }
.s3-layer:nth-child(4) { width: 100%; background: linear-gradient(100deg, #0a2a4a 0%, #12508f 100%); }
.s3-list { display: grid; gap: 18px; }
.s3-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; }
.s3-dot { position: relative; height: 100%; }
.s3-dot::before { content: ""; position: absolute; left: 0; top: 9px; width: 26px; border-top: 1.5px dotted var(--blue); }
.s3-dot::after { content: ""; position: absolute; right: 0; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.s3-list p { font-size: 13px; line-height: 1.75; color: var(--ink); font-weight: 700; }
.s3-close { margin-top: 22px; font-size: 13px; line-height: 1.9; color: var(--ink-mid); text-align: center; }

/* ============================================================
   Section 4 ── 直線の流れを大きく
   ============================================================ */

.s4-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; }
.s4-step { display: grid; justify-items: center; gap: 10px; width: 88px; }
/* 明るい背景でも図解が埋もれないよう、円は背景より一段濃く、枠は明るい水色にする */
.s4-ico {
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(215, 240, 255, 0.8);
  background: radial-gradient(circle at 50% 34%, #14539a 0%, #0e3f74 100%);
  box-shadow: 0 0 22px rgba(190, 226, 255, 0.34);
}
.s4-ico svg { width: 27px; height: 27px; color: #ffffff; }
.s4-step span { font-size: 13px; font-weight: 700; color: var(--on-dark); line-height: 1.4; text-align: center; }
.s4-arrow { margin-top: 24px; color: var(--orange-soft); filter: drop-shadow(0 1px 4px rgba(120, 45, 0, .35)); }
.s4-arrow svg { width: 20px; height: 20px; }

/* 図解の補足として軽く見せる（別ブロックに見せない）*/
.s4-nots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.s4-nots li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 9px; align-items: center;
  padding: 11px 14px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.s4-nots svg { width: 12px; height: 12px; color: #d7efff; }
.s4-nots p { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }

/* 左本文の読む順序 ： 1段落目を強く、2から3段落目を1段弱く近接させる */
#s4 .sec-txt p.lead:nth-of-type(1) { color: #ffffff; font-weight: 700; margin-top: 18px; }
#s4 .sec-txt p.lead:nth-of-type(2) { color: rgba(255, 255, 255, 0.84); margin-top: 20px; }
#s4 .sec-txt p.lead:nth-of-type(3) { color: rgba(255, 255, 255, 0.84); margin-top: 10px; }

/* ============================================================
   Section 5 ── 代表図解。縮小しない
   ============================================================ */

.s5-fig { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 30px; align-items: center; }
.s5-cycle { position: relative; width: min(400px, 100%); aspect-ratio: 1; margin: 0 auto; }
.s5-cycle-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.s5-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 44%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; align-content: center; text-align: center; gap: 3px;
  background: radial-gradient(circle at 50% 34%, #12508f 0%, #0a2a4a 100%);
  color: #fff; padding: 12px;
  box-shadow: 0 12px 32px rgba(16, 61, 104, .28);
}
.s5-core small { font-size: 11.5px; opacity: .88; line-height: 1.45; }
.s5-core b { font-size: 14px; font-weight: 900; line-height: 1.45; }
.s5-nodes { position: absolute; inset: 0; }
.s5-nodes li {
  position: absolute; left: 50%; top: 50%;
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 0;
  background: #fff; border: 2px solid var(--blue);
  box-shadow: 0 4px 14px rgba(16, 61, 104, .14);
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-155px) rotate(calc(var(--i) * -60deg));
}
.s5-nodes small { font-size: 11px; color: var(--blue); line-height: 1.1; font-weight: 900; }
.s5-nodes span { font-size: 11.5px; font-weight: 700; color: var(--blue-ink); line-height: 1.2; white-space: nowrap; }
.s5-list { display: grid; }
.s5-list li { display: grid; grid-template-columns: 26px 74px minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.s5-list li:last-child { border-bottom: 0; }
.s5-list b { font-size: 12.5px; font-weight: 900; color: var(--blue); font-variant-numeric: tabular-nums; }
.s5-list em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue-ink); }
.s5-list p { font-size: 12.5px; line-height: 1.7; color: var(--ink-mid); }

/* ============================================================
   Section 6
   ============================================================ */

.s6-cols { display: grid; grid-template-columns: minmax(0, 1fr) 68px minmax(0, 1fr); align-items: center; }
.s6-arrows { display: grid; gap: 26px; justify-items: center; }
.s6-arrows i { display: grid; place-items: center; color: var(--blue); }
.s6-arrows svg { width: 26px; height: 26px; }
.s6-close { margin-top: 22px; font-size: 13px; line-height: 1.9; color: var(--ink-mid); text-align: center; }

/* ============================================================
   Section 7 ── 中央パネルを主役に
   ============================================================ */

.s7-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr); align-items: stretch; column-gap: 14px; }
/* 中央図解 ： 未言語の判断 → AIとの対話 → 言葉になる の3段階 */
.s7-mid {
  margin: -16px 0; position: relative; z-index: 1;
  /* ★ AIKK Theme Blue へ統一（2026-08-04）。3つの stop はすべて
     Hero ／Section 4 ／Section 10 で実際に使っている色をそのまま採用している。
     #1663ae ＝--grad-navy（Section 4）の開始色
     #1565c0 ＝--primary-dark（Section 10 の共通色。★Hero は 2026-08-31 に別階調へ移行）
     #1b7ad0 ＝--grad-s10（Section 10）の開始色
     角度 168deg ・上が濃く下が明るい流れは従来どおり（構造 ・意味は不変）*/
  background: linear-gradient(168deg, #1663ae 0%, #1565c0 52%, #1b7ad0 100%);
  color: #fff; border-radius: var(--radius);
  display: grid; align-content: center; justify-items: stretch;
  gap: 4px; padding: 22px 16px;
  box-shadow: 0 16px 40px rgba(10, 42, 74, .34);
  overflow: hidden;
}
.s7-mid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* 背景が明るくなった分、Glow は弱める（強すぎると図が白く沈むため）*/
  background: radial-gradient(circle at 50% 8%, rgba(140, 205, 255, .18) 0%, transparent 55%);
}
.s7-node {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 6px;
  padding: 12px 12px; border-radius: 8px; text-align: center;
}
.s7-node span { font-size: 12.5px; font-weight: 700; line-height: 1.5; }
/* ★ 3段階の視覚階層（2026-08-04 再調整）
   背景グラデーションは変更せず、各ボックスの「塗り ・境界線 ・文字の不透明度 ・影」
   だけで 弱（上段）→ 中（中段）→ 強（下段）の差を作る。
   塗りに暗い半透明を敷くことで、明るい背景のままコントラストを上げている。 */

/* 上段 ： まだ形になっていない状態 ── 最も弱い。ただし読める強さは確保する */
.s7-node--raw {
  border: 1px dashed rgba(190, 226, 255, .55);
  background: rgba(8, 34, 62, .22);
  color: rgba(255, 255, 255, .82);
}
.s7-node--raw span { font-size: 11.5px; }
/* 中段 ： 対話 ── 進行中の段階。Orange の輪郭を明確にする */
.s7-node--talk {
  /* ★ 薄いオレンジを明るい青へ重ねると灰色に濁るため、
     Orange 系のまま不透明度を上げた塗りにして暖色と可読性を両立させる。
     色相は Brand Orange（#f97316）の暗部側で、新しい色相は足していない */
  border: 1px solid rgba(249, 115, 22, .7);
  background: rgba(150, 62, 14, .9);
  color: #ffd7b5;
  box-shadow: 0 4px 14px rgba(4, 26, 48, .22);
}
.s7-node--talk svg { width: 22px; height: 22px; color: var(--orange-soft); }
/* 下段 ： 言葉として形になった状態 ── 3段階のゴール。最も強い */
.s7-node--out {
  background: #fff; color: var(--blue-ink);
  box-shadow: 0 10px 26px rgba(4, 26, 48, .40), 0 0 0 3px rgba(255, 255, 255, .22);
}
.s7-node--out span { font-weight: 900; font-size: 15px; }
.s7-down { position: relative; z-index: 1; display: grid; place-items: center; color: rgba(214, 236, 255, .92); }
.s7-down svg { width: 17px; height: 17px; }
.s7-close { margin-top: 22px; font-size: 13px; line-height: 1.9; color: var(--ink-mid); text-align: center; }

/* ============================================================
   Section 8
   ============================================================ */

.s8-flow { display: grid; grid-template-columns: minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr); align-items: start; }
.s8-step { display: grid; justify-items: start; gap: 9px; }
.s8-num {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--blue); color: var(--blue);
  font-size: 15px; font-weight: 900; background: #fff;
  box-shadow: 0 4px 14px rgba(30,136,229,.18);
}
.s8-step h3 { font-size: 14px; font-weight: 700; color: var(--blue-ink); line-height: 1.55; }
.s8-step p { font-size: 12.5px; line-height: 1.75; color: var(--ink-mid); }
.s8-arrow { display: grid; place-items: center; padding-top: 18px; color: var(--blue); }
.s8-arrow svg { width: 22px; height: 22px; }
.s8-bar { margin-top: 24px; font-size: 13px; line-height: 1.9; color: var(--ink-mid); text-align: center; }
.s8-bar .trans { display: inline; margin: 0 0 0 6px; }

/* ============================================================
   Section 9
   ============================================================ */

.s9-cols { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: start; }
.s9-mid { align-self: stretch; display: grid; place-items: center; }
.s9-mid i { width: 1px; height: 100%; border-left: 2px dashed var(--blue-line); }
.s9-close { margin-top: 22px; font-size: 13px; line-height: 1.9; color: var(--ink-mid); text-align: center; }

/* ============================================================
   Section 10 ── 行動。最大 CTA
   ============================================================ */

#s10 { padding: 54px 0; position: relative; overflow: hidden; background: var(--grad-s10); }
#s10::after {
  content: ""; position: absolute; right: -4%; top: 50%; transform: translateY(-50%);
  width: 460px; height: 460px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 42% 38%, rgba(200,232,255,.34) 0%, rgba(21,101,192,.20) 44%, transparent 70%);
  border: 1px solid rgba(215,240,255,.36);
}
#s10 .wrap { position: relative; z-index: 1; }

/* 左 ＝メッセージ → 説明 → 行動（CTA）／右 ＝安心材料の縦積み */
.s10-cta-wrap { margin-top: 30px; }
.s10-right { display: grid; justify-items: stretch; align-content: center; gap: 0; }
.s10-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 26px;
  width: min(100%, 360px);
  background: var(--grad-cta); color: #fff;
  font-size: 19px; font-weight: 900; line-height: 1;
  padding: 21px 26px; border-radius: 8px;
  box-shadow: 0 0 0 12px rgba(249, 115, 22, 0.10), 0 22px 56px rgba(249, 115, 22, 0.42);
  transition: transform .2s ease, box-shadow .2s ease;
}
.s10-cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 14px rgba(249,115,22,.14), 0 26px 64px rgba(249,115,22,.5); }
.s10-cta svg { width: 20px; height: 20px; }
/* 安心情報 ： 横並びを廃止し、上下に縦積みする */
.s10-notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; width: 100%; }
.s10-note { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 14px; align-items: center;
  font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, 0.88); }
.s10-note span {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(215,240,255,.45); background: rgba(255,255,255,.1);
}
.s10-note svg { width: 13px; height: 13px; color: #d7efff; }
/* 接続文 ： 左右両カラムの下へまたがる Section 全幅。CTA ・安心情報より一段弱く */
.s10-trans { grid-column: 1 / -1; text-align: center; color: rgba(255, 255, 255, 0.67); margin-top: 30px; }

/* ============================================================
   Section 11 ＋ Footer ── 明るい終端バンド
   ============================================================ */

#s11 { padding: 44px 0 48px; background: var(--pale); }
#s11 .sec-grid { align-items: start; }
/* ★ .s11-brand（ロゴ ＋社名）は Footer と重複するため削除した */
#s11 .h2 { font-size: 22px; margin-top: 4px; }
#s11 .lead { margin-top: 12px; font-size: 12.5px; }

.s11-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s11-card {
  display: grid; gap: 9px; padding: 18px 18px 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.s11-card:hover,
.s11-card:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 61, 104, .16); border-color: rgba(249, 115, 22, .28); }
/* Focus はキーボード操作時に位置が分かる状態を維持する */
.s11-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* アイコンは Blue のまま維持 */
.s11-ico { width: 34px; height: 34px; color: var(--blue); }
.s11-ico svg { width: 34px; height: 34px; }

/* ★ 次に行動できる箇所（リンク名＋矢印）だけを Orange にする
   リンク文字 ＝--orange-text #c2410c（白背景上 5.18：1 ／WCAG AA 適合）
   矢印       ＝--orange      #f97316（図形のため Brand Orange を維持）*/
.s11-link { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; color: var(--orange-text); transition: color 180ms ease; }
.s11-link svg { width: 14px; height: 14px; color: var(--orange); transition: transform 180ms ease; }
/* ★ Hover では明るくせず、さらに暗くする（コントラストを下げない）*/
.s11-card:hover .s11-link,
.s11-card:focus-visible .s11-link { color: var(--orange-text-hover); }
.s11-card:hover .s11-link svg,
.s11-card:focus-visible .s11-link svg { transform: translateX(3px); }
.s11-card p { font-size: 12px; line-height: 1.8; color: var(--ink-mid); }
.s11-card p.s11-title { color: var(--blue-ink); font-weight: 700; font-size: 13px; }

/* ★ Footer は Master Design ではなく、現在公開中サイト（lp/index.html の footer）を正として再現する */
/* ── FOOTER ──
   ★ 現在公開中 AIKK Website の共通 Footer と同一実装（値を変更していない）*/
footer { background: #1a2e35; border-top: none; padding: 64px 0 0; }
.ft-inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px; margin-bottom: 48px;
}
.ft-brand-tag { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 12px; }
.ft-nav { display: flex; gap: 60px; }
.ft-nav-grp h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4); margin-bottom: 14px; text-transform: uppercase;
}
.ft-nav-grp ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ft-nav-grp a { font-size: 14px; color: rgba(255,255,255,0.65); transition: color 0.2s ease; }
.ft-nav-grp a:hover { color: white; }
.ft-bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding: 24px 0;
  display: flex; justify-content: space-between; align-items: center;
}
.ft-copy { font-size: 12px; color: rgba(255,255,255,0.35); }

.proto { background: #fff; border-top: 1px solid var(--line); padding: 26px 0 40px; font-size: 12px; line-height: 1.9; color: var(--ink-mid); }
.proto h2 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.proto ul { padding-left: 1.2em; list-style: disc; }
.proto li { margin-bottom: 4px; }

/* ============================================================
   Desktop 限定 ： Section ごとの左右比率
   ★ 1025px 以上でのみ適用する。Tablet ／Mobile へは引き継がない。
   ★ 見出しや本文が長い Section は左を広く、図解 ・カード比較が主役の
     Section は右を広く取る。全 Section が同じテンプレートに見えないようにする。
   ============================================================ */

@media (min-width: 1025px) {
  /* ── 修正1 ： Hero 左コピーの視覚強度（リングは 560px のまま）── */
  /* ★ Page Inline 80px 化（2026-08-04）に伴う再調整
     実効幅 1120px に対し、H1 2行目「会社で使える形にする。」の自然幅 559.5px と
     リング 560px は合計 1119.5px となり、両立させると gap が取れない。
     そこで左列を 568px に固定して H1 2行を確定させ、
     リングは右ページ余白側へ 30px だけ寄せる（＝リングは 560px を維持する）。
     ・H1 52px ・2行 ── 維持
     ・リング 560px   ── 維持
     ・縮小したもの   ── なし */
  .hero-grid { grid-template-columns: minmax(0, 568px) minmax(0, 1fr); column-gap: 20px; }
  .hero-fig { margin-right: -30px; }
  .hero-h1 { font-size: 52px; line-height: 1.28; }
  .hero-sub { font-size: 17px; margin-top: 24px; }
  .hero-cta-wrap { margin-top: 30px; }
  .hero-cta { font-size: 16.5px; padding: 20px 28px; min-width: 300px; }
  .hero-assure { font-size: 12.5px; margin-top: 16px; }

  /* Section 10 ： 左＝見出し ・説明 ・CTA ／右＝安心情報の縦積み（Section 中央付近）*/
  #s10 .s10-right { align-content: center; }
  /* 1行が長く伸びないよう読みやすい幅に収める */
  #s10 .s10-notes { max-width: 470px; }

  /* ★ Page Inline 80px 化（2026-08-04）で実効幅が 1208px → 1120px（−88px）になった分を、
     図解 ・カードを縮小せずに吸収するための再配分。
     ・column-gap を 44px → 36px（必要最小限）
     ・図解 ・カードが主役の Section だけ左列（見出し列）を狭める
     ・見出しの意味単位改行が崩れる Section（3 ・6 ・10）は比率を変えない */
  .sec-grid { column-gap: 36px; }

  #s2  .sec-grid { grid-template-columns: minmax(300px, 0.54fr) minmax(0, 1fr); }
  /* Section 2 ： 中央アイコン列を 78px → 56px にして左右カードの1行文字数を確保する
     （アイコン自体 40px と上下の縦線は変更していない）*/
  #s2  .s2-cols { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }
  /* 修正2 ： Section 3 見出しを意味単位の2行で成立させるため左列を広げる（変更しない）*/
  #s3  .sec-grid { grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1fr); }
  #s4  .sec-grid { grid-template-columns: minmax(320px, 0.60fr) minmax(0, 1fr); }
  #s5  .sec-grid { grid-template-columns: minmax(300px, 0.46fr) minmax(0, 1.15fr); }
  #s6  .sec-grid { grid-template-columns: minmax(300px, 0.50fr) minmax(0, 1fr); }
  #s7  .sec-grid { grid-template-columns: minmax(340px, 0.68fr) minmax(0, 1fr); }
  /* Section 7 ： 3列を維持したまま左右カードの1行文字数を確保する
     （中央図解は 3段階のラベルが収まる範囲でのみ細くする）*/
  #s7  .s7-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr) minmax(0, 1fr); column-gap: 10px; }
  /* Section 8 ： 見出しを意味単位の3行で固定する（Section 3 と同じ nb ＋nowrap 方式）。
     ★ Desktop のみ。3行目「一つのテーマを話してみることです。」の自然幅 462px を
     収めるため、左列を広げ column-gap を詰める */
  #s8  .sec-grid { grid-template-columns: minmax(300px, 0.76fr) minmax(0, 1fr); column-gap: 20px; }
  #s8  .h2 .nb { white-space: nowrap; }
  #s8  .h2 .br-pc { display: inline; }
  #s8  .h2 .br-sp { display: none; }
  /* Section 8 ： 矢印列を 46px → 26px にして3ステップカードの幅を確保する
     （見出しの3行固定で左列を広げた分を、図解側で取り戻すための調整）*/
  #s8  .s8-flow { grid-template-columns: minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr); }
  #s9  .sec-grid { grid-template-columns: minmax(300px, 0.46fr) minmax(0, 1fr); }
  #s10 .sec-grid { grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1fr); }
  #s11 .sec-grid { grid-template-columns: minmax(300px, 0.48fr) minmax(0, 1fr); }

  /* 修正2 ： Desktop では意味単位の2行を確定させる */
  #s3 .h2 .nb { white-space: nowrap; }
}

/* ============================================================
   Tablet（1024px 以下）── 図を縮小しすぎない
   ============================================================ */

@media (max-width: 1024px) {
  /* ★ --pad-x は 80px のまま（Canonical Chrome と一致させるため上書きしない）*/
  :root { --gap: 30px; }
  .sec, #s3, #s4, #s5, #s9, #s10 { padding: 48px 0; }
  #s11 { padding: 40px 0 8px; }

  /* ★ Desktop の Section 別比率は引き継がず、共通の1カラムへ戻す */
  .sec-grid { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }

  .hero-h1 { font-size: 34px; }
  .h2 { font-size: 25px; } #s7 .h2 { font-size: 24px; } #s11 .h2 { font-size: 21px; }

  .osring { width: min(480px, 100%); }
  .osring-nodes li { width: 78px; height: 78px; transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-184px) rotate(calc(var(--i) * -60deg)); }
  .osring-core { font-size: 19px; }

  .s5-fig { grid-template-columns: 360px minmax(0, 1fr); }
  .s5-cycle { width: min(360px, 100%); }
  .s5-nodes li { width: 70px; height: 70px; transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-139px) rotate(calc(var(--i) * -60deg)); }

  .s3-fig { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .s4-flow { flex-wrap: wrap; justify-content: flex-start; gap: 14px 2px; }
}

/* ============================================================
   Narrow Tablet（900px 以下 ／769px 以上を含む）
   ★ Page Inline 80px 化により実効幅が 740px 以下になる帯域。
     Desktop の横並びを無理に維持せず、Mobile と同じ安全な構成へ切り替える。
     これにより 768px 境界の前後でレイアウトが急変しない。
     ★ 図解サイズ（アイコン円66px ／循環図360px）は縮小していない。
   ============================================================ */

@media (max-width: 900px) {
  /* Section 4 ： 6ステップを 3×2 のグリッドへ。★ 円 66px は維持する */
  .s4-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 8px; justify-items: center; }
  .s4-arrow { display: none; }
  .s4-step { width: auto; }

  /* Section 5 ： 循環図 360px を保ったまま、右一覧を下へ回す */
  .s5-fig { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

/* ★ Page Inline ： 768px 以下は 20px。
   Canonical Chrome（.container）と同一の境界にするため、
   Section レイアウトの Mobile 境界（767px）とは分けて指定する。 */
@media (max-width: 768px) {
  :root { --pad-x: 20px; }
}

/* ============================================================
   Mobile（767px 以下）── PC 図を単純縮小しない
   ============================================================ */

@media (max-width: 767px) {
  :root { --gap: 20px; }
  .sec, #s3, #s4, #s5, #s9, #s10 { padding: 40px 0; }
  #s11 { padding: 34px 0 8px; }

  /* ★ Header が fixed のため、Hero 上端に Header 実測高（69px）を加算する。
     Hero 内部の余白（40px）は変更していない */
  .hero { padding: 109px 0 48px; }
  .hero-h1 { font-size: 27px; }
  .hero-sub { font-size: 14px; }
  .hero-cta { width: 100%; min-width: 0; font-size: 14.5px; padding: 16px 18px; gap: 14px; }

  .h2 { font-size: 21px; line-height: 1.6; } #s7 .h2 { font-size: 20px; } #s11 .h2 { font-size: 19px; }
  /* 修正2 ： Mobile で一文字単位の不自然な改行を避ける */
  #s3 .h2 { font-size: 20px; }

  .osring { width: min(330px, 100%); }
  .osring-nodes li { width: 64px; height: 64px; transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-127px) rotate(calc(var(--i) * -60deg)); }
  .osring-nodes span { font-size: 10px; }
  .osring-nodes svg { width: 16px; height: 16px; }
  .osring-core { font-size: 15px; }

  .s2-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; }
  .s2-cols > .s2-a, .s2-cols > .s2-bridge, .s2-cols > .s2-b { grid-column: 1; grid-row: auto; }
  .s2-mid { display: none; }

  .s3-stack { width: 100%; }
  .s3-layer { font-size: 11.5px; height: 44px; }
  .s3-list { gap: 14px; }

  .s4-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 6px; justify-items: center; }
  .s4-arrow { display: none; }
  .s4-step { width: auto; }
  .s4-ico { width: 56px; height: 56px; }
  .s4-ico svg { width: 23px; height: 23px; }
  .s4-nots { grid-template-columns: minmax(0, 1fr); }

  .s5-fig { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .s5-cycle { width: min(330px, 100%); }
  .s5-nodes li { width: 66px; height: 66px; transform: translate(-50%, -50%) rotate(calc(var(--i) * 60deg)) translateY(-128px) rotate(calc(var(--i) * -60deg)); }
  .s5-list li { grid-template-columns: 24px minmax(0, 1fr); row-gap: 2px; }
  .s5-list p { grid-column: 2; }

  .s6-cols { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .s6-arrows { grid-auto-flow: column; gap: 20px; }
  .s6-arrows i { transform: rotate(90deg); }

  .s7-cols { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }

  .s8-flow { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .s8-arrow { display: none; }

  .s9-cols { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .s9-mid { display: none; }

  .s10-cta-wrap { margin-top: 24px; }
  .s10-cta { width: 100%; font-size: 16px; padding: 22px 20px; }
  .s10-notes { gap: 20px; }
  .s10-trans { margin-top: 26px; }
  #s10::after { width: 300px; height: 300px; }

  .s11-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   共通 Chrome の Mobile 挙動（768px 以下）
   ★ 現在公開中 AIKK Website と同一のブレークポイント ・同一の指定。
     Section 側の Mobile 指定（767px 以下）とは別ブロックとして分離している。
   ============================================================ */

@media (max-width: 768px) {
  .btn { width: 100% !important; min-height: 48px; justify-content: center; }
  .hd-cta { display: none !important; }
  .nav-overlay { width: 100%; box-shadow: none; }
  .nav-ov-head { padding: 14px 20px; }
  .nav-links { padding: 8px 20px; }
  .nav-ov-cta { padding: 24px 20px 40px; }
  .container { padding: 0 20px; }
  .ft-inner { flex-direction: column; gap: 32px; }
  .ft-nav { flex-direction: column; gap: 28px; }
  .ft-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* ============================================================
   CTA ボタンの折り返し修正（2026-09-03 追加）
   ── 「無料AI体験」→「無料AIコーチ体験」名称変更に伴う Visual Regression 修正

   ■ 何が起きていたか
     旧称「無料AI体験」（6文字）が新称「無料AIコーチ体験」（9文字）になり、
     CTA 文言「無料AIコーチ体験を受けてみる」が 15文字になった。
     `.s10-cta` は `width: min(100%, 360px)` の固定上限を持っていたが、
     1行に必要な幅が 365px となり、わずか 5px 足りずに末尾1文字だけが
     2行目へ落ちていた（例 ： 「…受けてみ」／「る」）。

   ■ 方針（本ファイルで守っていること）
     ・文言（Copy）は変更していない
     ・font-size は 360px 未満（320px 級の最狭幅）を除いて変更していない
     ・色 ・影 ・角丸 ・Hover ・リンク先は変更していない
     ・ボタンが画面外へはみ出す（overflow する）実装にはしていない
   ============================================================ */

/* ── ① 最終CTA ／中間CTA（#s10 ／#s11 ／中間CTA ／pricing の CTA 帯） ──
   旧 ： width: min(100%, 360px)
   新 ： 内容がちょうど収まる幅（max-content）にし、従来の 360px は下限として保つ。
   `justify-content: space-between` のため、Desktop の見た目は幅が +5px 変わるだけで、
   gap ・padding ・font-size ・文字の並びは従来どおり。 */
.s10-cta { width: max-content; min-width: 360px; max-width: 100%; }

/* ── ② Footer Navigation の「無料AIコーチ体験」 ──
   Footer の列幅は 769〜1024px で最も狭くなり、9文字の新称が2行に折り返していた。
   該当リンク1本だけを1行に固定する（Footer の他のリンクには影響しない）。
   ※ 同じ指定は `assets/button-hover.css` にもある。business-os.html は
     button-hover.css を読み込まないため、本ファイル側にも必要。 */
footer .ft-nav-grp a[href="/ai-taiken"] { white-space: nowrap; }

@media (max-width: 768px) {
  /* Mobile では従来どおり幅いっぱい。①の min-width を解除する */
  .s10-cta { width: 100%; min-width: 0; }

  /* ── ③ 文字と矢印の間隔（gap）だけを詰める ──
     この2つのボタンは `justify-content: space-between` ＋ `width: 100%` のため、
     文字は左端 ・矢印は右端に固定される。gap は「最低これだけ空ける」という値でしか
     ないので、詰めても通常時の見た目は変わらず、折り返しの閾値だけが下がる。
     padding ・font-size ・高さ ・色は変更していない。 */
  .s10-cta { gap: 10px; }
  .hero-cta { gap: 8px; }
}

@media (max-width: 359px) {
  /* ★320px 級の最狭幅のみ。360px 以上の表示は一切変えていない。
     gap を詰めるだけでは1行に収まらないため、この幅に限って
     左右の余白を詰め、`.s10-cta` は font-size も下げる。 */
  .hero-cta { padding-left: 14px; padding-right: 14px; }
  .s10-cta { padding-left: 14px; padding-right: 14px; font-size: 14px; }
}

/* ============================================================
   本文 ・見出しの折り返し修正（2026-09-03 追加 ／Phase N6-3B）
   ── 「無料AIコーチ体験」名称変更に伴う Typography Regression の修正

   新称が旧称より3文字長くなったことで、Top ／business-os ／pricing の
   短い注記 ・リード ・見出しの行末に、1〜3文字だけが孤立して残るようになった。
   （例 ： 「無料AIコーチ体験だけで終えていただいてかまいませ」／「ん。」）

   ■ 方針
     ・文言（Copy）は変更していない
     ・1行化ではなく、★孤立した1〜2文字（orphan）をなくすことが目的
     ・対象は★短い注記 ・リード ・見出しのみ。長い本文段落には適用しない
     ・`text-wrap: balance` は本サイトで既に使っている手法
       （business-os-pre-publication.css の `.pp-deliv-name` ／`.pp-hero-uni-b`）
     ・`.pp-*` は business-os-pre-publication.css 側のクラスだが、
       N6-3A ／N6-3B の折り返し修正を1か所にまとめて追えるよう、本ファイルに置いている
       （両ファイルとも Top ／business-os ／pricing の3ページが読み込む）
   ============================================================ */
.s10-note,
.hero-assure,
.pp-cta-left .lead { text-wrap: balance; }