/* =====================================================================
   SNSHUB — Presentation (LP style)
   デザイントークンは :root に集約しています。
   色・フォント・余白・角丸・影をここで変えれば全体に反映されます。
   ===================================================================== */

:root {
  /* ---- Brand colors（フクロウラボ系：爽やかなスカイブルー×白）---- */
  --c-accent:        #0e9ce0;   /* 主役のスカイブルー（明るく抜け感のある水色） */
  --c-accent-deep:   #0a7cc0;   /* 濃いめの青（ホバー等） */
  --c-accent-light:  #7fd0f0;   /* 明るい水色（ダーク背景上の強調） */
  --c-accent-soft:   #e6f4fc;   /* 水色の薄い背景 */

  /* 旧ティールは廃止し、ブルー系に統合（CTA・強調も青で統一） */
  --c-teal:          var(--c-accent);        /* = メインのブルー */
  --c-teal-deep:     var(--c-accent-deep);
  --c-teal-light:    var(--c-accent-light);
  --c-teal-soft:     var(--c-accent-soft);

  --c-blue:          var(--c-accent);   /* 統計強調もメインのブルーに統一 */
  --c-red:           #d4787b;   /* 注意色：ネガティブ専用（青より控えめに・くすませた赤） */
  --c-line:          #06c755;   /* LINEグリーン（LINE連携セクションのみ） */
  /* 旧サブカラー（緑・黄）は廃止して無彩色に寄せています */

  /* ---- Neutrals（クールで明るい白基調）---- */
  --c-bg:            #f5f7fb;   /* 全体の背景 */
  --c-bg-soft:       #eef2f8;   /* 一段濃い背景 */
  --c-surface:       #ffffff;
  --c-dark:          #0b2447;   /* ダークセクション（ネイビー） */
  --c-dark-2:        #122d54;
  --c-ink:           #0f2036;   /* 見出し文字 */
  --c-text:          #3f4654;   /* 本文 */
  --c-muted:         #7a8493;   /* 補足 */
  --c-line-soft:     #e4e8ef;   /* 区切り線 */

  /* ---- Typography ---- */
  /* STUDIO方式：英字・数字は Inter、日本語は Noto Sans JP に自動フォールバック */
  --font-jp: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --font-en: "Inter", "Noto Sans JP", sans-serif;

  /* ---- Layout ---- */
  --container: 1120px;
  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 10px rgba(20,20,40,.05);
  --shadow:    0 14px 40px rgba(30,30,60,.10);
  --shadow-lg: 0 30px 70px rgba(30,30,60,.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.84,.44,1);
  --reveal-dur: .5s;

  /* ---- Section rhythm ---- */
  --section-pad: clamp(60px, 6vw, 100px);

  /* ---- Illustration palette（フラットイラスト用。ここで一括変更可）---- */
  --illus-skin:        #f4cda7;   /* 肌 */
  --illus-skin-shadow: #e7b489;   /* 肌の影・首 */
  --illus-hair:        #2b2f3c;   /* 髪・線 */
  --illus-shirt:       var(--c-accent);   /* 服（メイン） */
  --illus-shirt-2:     #8cb6ff;   /* 服（サブ） */
  --illus-accent:      #ffb454;   /* 差し色（あたたかみ） */
  --illus-screen:      #9fd0ff;   /* スマホ画面の光 */
  --illus-line:        #233244;   /* ラインアートの輪郭線 */
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-jp);
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.68;
  font-feature-settings: "palt";
  letter-spacing: .06em;
  overflow-x: hidden;
}
/* 数字（英字フォント）はカーニング不要 — 元の幅に戻す */
.hugenum, .stat strong, .total--neg, .total--accent, .metric__num, .price__num, .tl-time { letter-spacing: normal; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ===== Top bar ===== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 56px);
  background: rgba(244,246,249,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.topbar__brand {
  font-weight: 700; font-size: 17px; letter-spacing: .02em;
  display: flex; align-items: center; gap: 9px; color: var(--c-ink);
  cursor: pointer; user-select: none;
}
.brand-dot {
  width: 22px; height: 22px; border-radius: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="15.5" cy="8.5" r="5.6" fill="%230e9ce0"/><circle cx="7" cy="15.5" r="4.2" fill="%238638f0"/></svg>') center / contain no-repeat;
  display: inline-block;
}
.brand-dot--sm { width: 16px; height: 16px; border-radius: 0; }
.topbar__nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); font-size: 14px; font-weight: 500; }
.topbar__nav a { color: var(--c-text); transition: color .2s; }
.topbar__nav a:hover { color: var(--c-accent); }
/* デスクトップではナビ内CTAは出さない（ヘッダーをすっきり） */
.topbar__nav-cta { display: none; }

/* ===== ハンバーガーボタン（モバイルのみ） ===== */
.navtoggle {
  display: none; width: 42px; height: 42px; border: none; background: transparent;
  cursor: pointer; padding: 9px; z-index: 110; flex-direction: column;
  justify-content: space-between; align-items: stretch;
}
.navtoggle span {
  display: block; height: 2px; width: 100%; background: var(--c-ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .25s;
}
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
.nav-overlay {
  position: fixed; inset: 0; z-index: 99; background: rgba(13,15,26,.42);
  backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s; pointer-events: none;
}
.nav-overlay.is-open { opacity: 1; pointer-events: auto; }
.topbar__cta {
  background: var(--c-teal); color: #fff !important;
  padding: 9px 20px; border-radius: var(--radius-pill); font-weight: 700;
  box-shadow: 0 6px 18px rgba(27,92,242,.32);
}
.topbar__cta:hover { background: var(--c-teal-deep); }

/* ===== Scroll progress ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-light));
  z-index: 101; transition: width .1s linear;
}

/* ===== Dot navigation ===== */
.dotnav {
  position: fixed; right: clamp(12px, 2vw, 28px); top: 50%;
  transform: translateY(-50%); z-index: 90;
  display: flex; flex-direction: column; gap: 12px;
}
.dotnav button {
  position: relative; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(26,108,255,.4); background: transparent;
  cursor: pointer; padding: 0; transition: all .25s;
}
.dotnav button:hover { border-color: var(--c-accent); }
.dotnav button.active { background: var(--c-accent); border-color: var(--c-accent); transform: scale(1.25); }
.dotnav button .tip {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 11.5px; font-weight: 600; color: #fff;
  background: var(--c-ink); padding: 4px 9px; border-radius: 6px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.dotnav button:hover .tip { opacity: 1; }
@media (max-width: 1000px) { .dotnav { display: none; } }

/* ===== Sections ===== */
.section {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden; /* 装飾ブロブのはみ出しをクリップ */
}
.section--soft { background: var(--c-bg-soft); }
.section--dark { background: var(--c-dark); }
.section--line { background: #f0f8f3; }
.container {
  width: min(var(--container), 100% - clamp(32px, 8vw, 96px));
  margin-inline: auto;
  position: relative; z-index: 1; /* 装飾より前面に */
}

/* ===== Common type ===== */
.eyebrow {
  font-family: var(--font-en); font-weight: 700;
  letter-spacing: .14em; font-size: 14px; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 14px;
}
.eyebrow--light { color: var(--c-accent-light); }
.section__title {
  font-size: clamp(26px, 4vw, 42px); font-weight: 900; line-height: 1.32;
  color: var(--c-ink); letter-spacing: .01em; margin-bottom: 36px;
  position: relative;
}
.section__title--light { color: #fff; }
.section__lead { font-size: clamp(15px, 1.4vw, 17px); color: var(--c-text); max-width: 880px; margin-bottom: 40px; }
.section__note { font-size: 13.5px; color: var(--c-muted); line-height: 1.85; max-width: 760px; margin: -10px 0 34px; }
.section--dark .section__lead { color: #c7c9d6; }
.accent { color: var(--c-accent); }
.accent-light { color: var(--c-accent-light); }
.subhead { font-size: clamp(19px, 2.4vw, 26px); font-weight: 700; margin-bottom: 18px; }
.body-text { font-size: 16px; line-height: 2; margin-bottom: 28px; }
.source { font-size: 12px; color: var(--c-muted); margin-top: 26px; line-height: 1.7; }
.muted { color: var(--c-muted); }
.badge-x {
  display: inline-block; font-size: clamp(24px, 3vw, 34px); font-weight: 900; color: var(--c-accent);
  border-top: 3px solid var(--c-accent); border-bottom: 3px solid var(--c-accent);
  padding: 4px 18px; margin-left: 14px; vertical-align: middle; line-height: 1.2;
}

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .05s; }
.reveal[data-delay="2"] { transition-delay: .10s; }
.reveal[data-delay="3"] { transition-delay: .15s; }
.reveal[data-delay="4"] { transition-delay: .20s; }
.reveal[data-delay="5"] { transition-delay: .25s; }
.reveal[data-delay="6"] { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== Tags / pills ===== */
.tag {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  padding: 6px 14px; border-radius: var(--radius-pill);
}
.tag--neg { background: #fde7e6; color: var(--c-red); }
.tag--pos { background: var(--c-accent-soft); color: var(--c-accent); }
.vs-card--pos .tag--pos { background: #fff; }
.tag--accent { background: var(--c-teal); color: #fff; }

/* =====================================================================
   01 — HERO
   ===================================================================== */
/* 固定ヘッダー（約64px）の分を足して、見た目の上下余白を揃える */
.section--hero { padding-top: calc(64px + var(--section-pad)); overflow: hidden; }
.hero__bg-circle {
  position: absolute; right: -6%; top: 8%; width: 520px; height: 520px;
  background: radial-gradient(circle, var(--c-accent-soft), transparent 70%);
  border-radius: 50%; z-index: 0;
}
.hero__grid {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(30px, 5vw, 70px);
  align-items: center; position: relative; z-index: 1;
}
.hero__title { font-size: clamp(40px, 7vw, 76px); font-weight: 900; line-height: 1.18; color: var(--c-ink); letter-spacing: .05em; margin: 6px 0 26px; }
.hero__lead { font-size: clamp(13px, 1.3vw, 16px); font-weight: 700; color: var(--c-ink); max-width: 640px; margin-bottom: 30px; }
.hero__lead .lead-nowrap { white-space: nowrap; }
.hero__pills { display: flex; flex-direction: column; gap: 12px; max-width: 430px; }
.pill {
  display: flex; align-items: center; gap: 11px; background: var(--c-surface);
  padding: 13px 20px; border-radius: var(--radius-pill); font-weight: 700; font-size: 14.5px;
  color: var(--c-ink); box-shadow: var(--shadow-sm);
}
.pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); flex: none; }
.pill-ic { width: 19px; height: 19px; color: var(--c-accent); flex: none; }
.hero__foot { font-size: 12px; color: var(--c-muted); margin-top: 34px; letter-spacing: .04em; }

/* Phone mockup */
.hero__phone { display: flex; justify-content: center; }
/* TOPのモックは上下だけにゆっくり浮遊させる */
.hero__phone .phone { animation: phoneFloat 3.4s ease-in-out infinite; will-change: transform; }
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-26px); }
}
@keyframes phoneFloatSm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__phone .phone { animation: none; }
}
.phone {
  width: 290px; background: #0d0f1a; border-radius: 42px; padding: 12px;
  box-shadow: var(--shadow-lg); position: relative;
}
.phone--dark { background: #0d0f1a; }
/* ダイナミックアイランド風（中身に被らないよう小さめ・上部に配置） */
.phone__notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 78px; height: 22px; background: #0d0f1a; border-radius: 12px; z-index: 3; }
.phone__screen {
  background: #fdfdff; border-radius: 32px; overflow: hidden; padding: 36px 14px 18px;
  min-height: 540px; font-size: 11px; color: #2a2b35;
  display: flex; flex-direction: column;
  position: relative;
}
/* タップ波紋（モック画面を指で操作しているような演出） */
.tap-fx {
  position: absolute; z-index: 6; pointer-events: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46,140,255,.5) 0%, rgba(46,140,255,.2) 45%, rgba(46,140,255,0) 70%);
  opacity: 0;
}
.tap-fx.is-tapping { animation: tapfx .55s ease-out; }
@keyframes tapfx {
  0%   { opacity: 0; transform: scale(.35); }
  25%  { opacity: 1; transform: scale(.7); }
  100% { opacity: 0; transform: scale(1.55); }
}
/* タッチポインター（指先）— アプリを指で操作している演出 */
.touch-pointer {
  position: absolute; z-index: 7; pointer-events: none;
  left: 50%; top: 60%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(60,70,90,.34), rgba(40,48,66,.30));
  border: 1.5px solid rgba(255,255,255,.55);
  box-shadow: 0 3px 8px rgba(20,28,45,.28);
  opacity: 0;
  transition: left .55s cubic-bezier(.45,.05,.2,1), top .55s cubic-bezier(.45,.05,.2,1), transform .18s ease, opacity .3s ease;
}
.touch-pointer.is-visible { opacity: 1; }
.touch-pointer.is-press { transform: scale(.66); }
/* 画面の中身がゆっくり上下に流れる「スクロール風」ドリフト */
.screen-flow { animation: screenFlow 6.5s ease-in-out infinite; will-change: transform; }
@keyframes screenFlow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .tap-fx, .touch-pointer { display: none; }
  .screen-flow { animation: none; }
}
.phone__statusbar { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; padding: 0 6px 10px; color: #1a1a22; }
.phone__time { letter-spacing: .2px; }
.phone__sysicons { display: flex; align-items: center; gap: 5px; color: #1a1a22; }
.sysic { height: 11px; width: auto; fill: currentColor; }
.sysic--batt { height: 12px; }
.app-head__bell { width: 17px; height: 17px; color: #1a1a22; flex: none; }
/* ダーク画面（チャット等）用：白いステータスバー */
.phone__statusbar--light, .phone__statusbar--light .phone__sysicons { color: #f3f4f8; }
.app-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 12px; padding: 4px 2px 10px; }
.app-head__title { display: flex; align-items: center; gap: 5px; }
.app-head--light { color: #1a1a22; }
.app-credits { font-size: 9px; color: #9a9ba6; text-align: center; padding-bottom: 8px; }
.cal { background: #fff; border-radius: 14px; padding: 10px; box-shadow: var(--shadow-sm); }
.cal__head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; padding-bottom: 8px; }
.cal__week { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; font-size: 9px; color: #9a9ba6; padding-bottom: 4px; }
.cal__week .sun { color: var(--c-red); }
.cal__grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; text-align: center; }
.cal__grid span { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: #555; border-radius: 50%; }
.cal__grid span.out { color: #cfd0d8; }
.cal__grid span.today { background: var(--c-accent); color: #fff; font-weight: 700; }
.cal__grid span.dot::after { content: ""; position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent); }
.cal__grid span.dot.blue::after { background: var(--c-blue); }
.cal__grid span.dot.green::after { background: var(--c-teal); }
.cal__grid span.dot.red::after { background: var(--c-accent); }
.app-tags { font-size: 9px; color: #6a6b75; padding: 12px 4px 0; line-height: 1.7; }
.phone__urlbar { margin-top: auto; background: #ececf2; border-radius: var(--radius-pill); font-size: 10px; text-align: center; padding: 7px; color: #6a6b75; }
.phone__urlbar--top { margin: 0 0 10px; }

/* phone — chat variant */
.phone__screen--chat { background: #fdfdff; color: #2a2b35; padding-top: 34px; }
.chat-img { background: linear-gradient(135deg,#e7c8b8,#c89a8a); border-radius: 12px; height: 150px; display: flex; align-items: center; justify-content: center; font-size: 48px; overflow: hidden; }
.chat-img__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-bubble { background: #f1f2f6; border-radius: 12px; padding: 11px; margin-top: 10px; font-size: 10px; line-height: 1.7; }
.chat-bubble__meta { color: #9a9ba6; margin-bottom: 6px; }
.chat-bubble__gen { margin-top: 8px; }
.chat-bubble__gen strong { color: var(--c-ink); }
.line-actions { display: flex; gap: 6px; margin-top: 10px; }
.line-actions span { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--c-accent); color: #fff; font-size: 9px; white-space: nowrap; text-align: center; padding: 10px 2px; border-radius: 9px; font-weight: 700; line-height: 1.2; letter-spacing: 0; }

/* =====================================================================
   02 / 13 — VS GRID
   ===================================================================== */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }
.vs-grid--tri { grid-template-columns: 1fr auto 1fr; gap: clamp(14px, 2vw, 24px); }
.vs-x { display: flex; align-items: center; justify-content: center; }
.vs-x__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: clamp(146px, 14vw, 182px); height: clamp(118px, 11.5vw, 144px); padding: 6px clamp(36px, 3.8vw, 48px) 6px 16px; text-align: center; clip-path: polygon(0% 16%, 72% 16%, 72% 0%, 100% 50%, 72% 100%, 72% 84%, 0% 84%); background: linear-gradient(150deg, var(--c-accent), var(--c-accent-deep)); color: #fff; filter: drop-shadow(0 12px 22px rgba(27,92,242,.38)); }
.vs-x__chip small { font-size: clamp(14px, 1.55vw, 17px); font-weight: 800; opacity: 1; line-height: 1.05; }
.vs-x__chip strong { font-family: var(--font-en); font-weight: 900; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.05; }
.vs-x__big { font-style: normal; font-size: 1.28em; }
.vs-card {
  background: var(--c-surface); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; border: 1px solid var(--c-line-soft);
}
.vs-card--pos { background: var(--c-accent-soft); border-color: transparent; }
.vs-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.vs-card__sub { color: var(--c-muted); font-size: 13.5px; }
.vs-card__metric { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 22px; margin-bottom: 18px; border-bottom: 1px solid var(--c-line-soft); }
.vs-card__label { font-weight: 700; color: var(--c-ink); font-size: 14px; }
.vs-card__label small { color: var(--c-muted); font-weight: 400; font-size: 11px; }
.bignum { font-family: var(--font-en); font-weight: 900; font-size: clamp(48px, 7vw, 78px); line-height: 1; letter-spacing: -.01em; }
.bignum small { font-size: 22px; margin-left: 4px; font-weight: 700; }
.bignum__yen { font-family: var(--font-jp); font-size: .72em; font-weight: 900; margin-right: 2px; }
.bignum--neg { color: var(--c-red); }
.bignum--pos { color: var(--c-accent); }
.vs-card__caption { font-size: 13px; font-weight: 700; color: var(--c-ink); margin-bottom: 14px; }
.reason-list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.reason-list li { display: flex; gap: 12px; align-items: flex-start; background: rgba(0,0,0,.025); border-radius: var(--radius-sm); padding: 12px 14px; }
.vs-card--pos .reason-list li { background: rgba(255,255,255,.6); }
.reason-list strong { display: block; font-size: 14px; color: var(--c-ink); }
.reason-list span:not(.rl-no):not(.rl-dot) { font-size: 12px; color: var(--c-muted); }
.rl-no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.rl-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c, var(--c-accent)); margin-top: 2px; }
.vs-card__foot { margin-top: auto; padding-top: 20px; font-weight: 700; font-size: 14px; }
.vs-card__foot--neg { color: var(--c-red); }
.vs-card__foot--pos { color: var(--c-accent); }
.foot-em { font-size: 1.3em; font-weight: 900; color: var(--c-accent-deep); background: linear-gradient(transparent 62%, rgba(27,92,242,.18) 62%); padding: 0 2px; }
#case .vs-card--pos { border: 2px solid var(--c-accent); box-shadow: none; }
/* B店（伸びているアカウント）の店名・スペック行は太字＋水色で目立たせる */
#case .vs-card--pos .vs-card__sub,
#case .vs-card--pos .case-meta { color: var(--c-accent); font-weight: 700; }

/* case study — タブ切替（スマホのみ表示。PCでは display:none で両カード横並び） */
.vs-tabs { display: none; }

/* case study stats */
.case-meta { font-size: 13px; color: var(--c-muted); margin: -8px 0 18px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: rgba(0,0,0,.025); border-radius: var(--radius-sm); padding: 14px 16px; }
.vs-card--pos .stat { background: rgba(255,255,255,.6); }
.stat span { display: block; font-size: 11.5px; color: var(--c-muted); margin-bottom: 4px; }
.stat strong { font-family: var(--font-en); font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: var(--c-ink); line-height: 1; }
.stat small { font-size: 12px; color: var(--c-muted); margin-left: 3px; }
.num-neg { color: var(--c-red) !important; }
.num-pos { color: var(--c-accent) !important; }

/* =====================================================================
   03 — REALITY
   ===================================================================== */
.reality__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.hugenum { font-family: var(--font-en); font-weight: 900; font-size: clamp(72px, 12vw, 130px); line-height: .9; color: var(--c-blue); margin-bottom: 8px; }
.hugenum__unit { font-family: var(--font-jp); font-size: clamp(20px, 2.4vw, 30px); color: var(--c-ink); font-weight: 700; margin-left: 12px; }
.reality__lead { font-size: clamp(13.5px, 1.3vw, 15px); line-height: 2.1; margin-top: 18px; }
.reality__right { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.thought-bubbles { position: absolute; inset: 0; z-index: 5; } /* イラストより前面に */
.bubble {
  position: absolute; background: #fff; border-radius: 18px; padding: 11px 16px;
  font-size: 12.5px; color: var(--c-text); box-shadow: 0 8px 22px rgba(30,30,60,.12); font-weight: 600;
  max-width: none; white-space: nowrap; line-height: 1.5;
  animation: float 4s ease-in-out infinite;
}
.bubble:nth-child(1) { top: 2%; left: -6%; animation-delay: 0s; }
.bubble:nth-child(2) { top: 14%; right: -4%; animation-delay: .8s; }
.bubble:nth-child(3) { bottom: 22%; left: -8%; animation-delay: 1.6s; }
.bubble:nth-child(4) { top: 52%; right: -2%; animation-delay: 2.4s; }
.bubble:nth-child(5) { top: 46%; left: -10%; animation-delay: 3.2s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* =====================================================================
   04 / 05 — DAY CARD (timeline)
   ===================================================================== */
.daycard { border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.daycard--manual { background: var(--c-surface); border: 1px solid var(--c-line-soft); }
.daycard--ai { background: var(--c-dark-2); }
.daycard__head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 14px; border-bottom: 1px solid var(--c-line-soft); flex-wrap: wrap; }
.daycard--ai .daycard__head { border-color: rgba(255,255,255,.12); }
.daycard__head strong { font-size: 17px; color: var(--c-ink); }
.daycard--ai .daycard__head strong { color: #fff; }
.daycard__role { margin-left: auto; color: var(--c-muted); font-size: 13px; }
.timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 60px); }
.tl-item { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-line-soft); }
/* 最終項目の下線は消す（合計枠の上線と二重になるため） */
.timeline .tl-item:last-child,
.timeline .tl-item:nth-last-child(2) { border-bottom: none; }
.timeline--light .tl-item { border-color: rgba(255,255,255,.08); }
.tl-time { font-family: var(--font-en); font-weight: 700; font-size: 14px; color: var(--c-ink); min-width: 42px; }
.timeline--light .tl-time { color: var(--c-accent-light); }
.tl-item strong { display: block; font-size: 14.5px; color: var(--c-ink); }
.timeline--light .tl-item strong { color: #ececf4; }
.tl-item span:not(.tl-time) { font-size: 12.5px; color: var(--c-muted); }
.tl-item--hl strong { color: var(--c-accent) !important; }
.daycard__total { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 20px; border-top: 1px solid var(--c-line-soft); }
.daycard__total--ai { border-color: rgba(255,255,255,.12); }
.daycard__total span { color: var(--c-muted); font-size: 14px; }
.daycard__total--ai span { color: #9a9cae; }
.daycard__total-lead { display: flex; flex-direction: column; gap: 4px; }
.daycard__total-lead small { font-size: 12.5px; letter-spacing: .02em; opacity: .85; }
.total-msg { font-size: clamp(17px, 2vw, 22px); font-weight: 900; line-height: 1.2; }
.total-msg--neg { color: var(--c-red); }
.total-msg--pos { color: var(--c-accent-light); }
.total--neg { font-family: var(--font-en); font-weight: 900; font-size: clamp(28px, 4vw, 44px); color: var(--c-red); }
.total--accent { font-family: var(--font-en); font-weight: 900; font-size: clamp(28px, 4vw, 44px); color: var(--c-accent-light); }
.total-yen { font-family: var(--font-jp); font-size: 1em; }

/* =====================================================================
   06 / 19 — TABLES
   ===================================================================== */
.table-wrap { overflow-x: auto; border-radius: 0; box-shadow: var(--shadow-sm); }
.ctable { width: 100%; border-collapse: collapse; background: var(--c-surface); min-width: 820px; table-layout: fixed; }
/* 観点列は1行で収まるよう少し広めに。SNSHUB 列も広めにして目立たせる */
.ctable th:nth-child(1), .ctable td:nth-child(1) { width: 26%; }
.ctable th:nth-child(2), .ctable td:nth-child(2),
.ctable th:nth-child(3), .ctable td:nth-child(3) { width: 21.5%; }
.ctable th:nth-child(4), .ctable td:nth-child(4) { width: 31%; }
.ctable th, .ctable td { padding: 16px 20px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--c-line-soft); }
.ctable thead th { font-weight: 700; color: var(--c-ink); background: #faf9f6; text-align: center; }
/* 観点列（1列目）は1行・中央寄せ */
.ctable th:first-child, .ctable td:first-child { white-space: nowrap; text-align: center; }
.ctable td:first-child { font-weight: 700; color: var(--c-ink); }
.ctable td small { display: block; font-size: 11px; color: var(--c-muted); font-weight: 400; }
/* 観点／自社で人力運用／SNS代行に外注 の各列を縦線で仕切る */
.ctable th:nth-child(1), .ctable td:nth-child(1),
.ctable th:nth-child(2), .ctable td:nth-child(2) { border-right: 1px solid var(--c-line-soft); }
.ctable__hl { background: var(--c-teal-soft); color: var(--c-teal-deep); font-weight: 700; }
.ctable thead th.ctable__hl { background: var(--c-accent); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .04em; border-radius: 0; text-align: center; border-top: 2px solid var(--c-accent); border-left: 2px solid var(--c-accent); border-right: 2px solid var(--c-accent); border-bottom: none; }
.ctable td.ctable__hl { border-left: 2px solid var(--c-accent); border-right: 2px solid var(--c-accent); }
.ctable tbody tr:last-child td.ctable__hl { border-bottom: 2px solid var(--c-accent); border-radius: 0; }
.ctable td.ctable__hl small { color: var(--c-teal-deep); opacity: .85; }

/* =====================================================================
   07 — AMATEUR VS PRO
   ===================================================================== */
.post-compare { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 32px); align-items: start; }
.post-col { display: flex; flex-direction: column; gap: 14px; }
.post-col > .tag, .post-col > .flag { align-self: flex-start; box-sizing: border-box; width: clamp(172px, 17.5vw, 212px); padding: 8px 12px; font-size: 11.5px; line-height: 1.4; white-space: nowrap; text-align: center; border-radius: var(--radius-pill); }
.ig-post { background: var(--c-surface); border-radius: var(--radius-sm); padding: 16px; box-shadow: var(--shadow-sm); font-size: 12px; }
.ig-post--pro { background: #1c1f2e; color: #d6d8e4; }
.ig-post__bar { font-size: 14px; letter-spacing: 6px; color: var(--c-ink); margin-bottom: 12px; }
.ig-post--pro .ig-post__bar { color: #d6d8e4; }
.ig-post__img { border-radius: 8px; height: 150px; display: flex; align-items: center; justify-content: center; color: var(--c-muted); margin-bottom: 12px; }
.ig-post__img--gray { background: #ddd9d0; }
.ig-post__img--photo { width: 100%; object-fit: cover; }
.ig-post__txt { line-height: 1.85; }
.ig-post__txt--pro { font-size: 11px; }
.post-flags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.post-flags .flag { align-self: stretch; text-align: center; white-space: nowrap; font-size: 11px; padding: 8px 12px; line-height: 1.4; }
.flag { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: var(--radius-pill); }
.flag--neg { background: #fde7e6; color: var(--c-red); }
.flag--pos { background: var(--c-teal); color: #fff; }
.post-arrow { align-self: center; text-align: center; max-width: 240px; }
.post-arrow p { font-size: 13px; font-weight: 600; color: var(--c-ink); line-height: 1.9; margin-bottom: 12px; }
.post-arrow__icon { font-size: 30px; color: var(--c-ink); }
.ai-result { background: var(--c-surface); border: 2px solid var(--c-accent); border-radius: var(--radius-sm); padding: 14px; font-size: 11.5px; line-height: 1.8; }
.ai-result__q { display: inline-block; background: #ece9fb; color: var(--c-accent); padding: 4px 12px; border-radius: var(--radius-pill); font-size: 11px; margin-bottom: 8px; }
.ai-result ul { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ai-result li { padding-left: 12px; position: relative; }
.ai-result li::before { content: "•"; position: absolute; left: 0; color: var(--c-accent); }
.banner {
  margin-top: 38px; background: var(--c-dark); color: #fff; border-radius: var(--radius);
  padding: 22px clamp(20px, 3vw, 38px); text-align: center; font-weight: 700; font-size: 18px;
}
.banner--left { text-align: left; }

/* =====================================================================
   08 / 10 / 11 / 12 — TWO COLUMN (text + phone)
   ===================================================================== */
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.two-col__media { display: flex; justify-content: center; }
.kw-box { background: var(--c-surface); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.kw-box__label { font-family: var(--font-en); font-weight: 700; letter-spacing: .14em; font-size: 12px; color: var(--c-accent); margin-bottom: 14px; }
.kw-tags { display: grid; grid-template-columns: max-content max-content; justify-content: start; gap: 10px; }
.kw { display: flex; align-items: center; justify-content: center; white-space: nowrap; background: var(--c-accent-soft); color: var(--c-accent); font-weight: 600; font-size: 13px; padding: 8px 15px; border-radius: var(--radius-pill); }
.kw-tags--sm { margin-top: 10px; }
.kw-tags--sm .kw { font-size: 10px; padding: 5px 10px; }
/* モバイル専用改行（デスクトップでは非表示） */
.br-sp { display: none; }
.quote-chip { display: inline-block; background: var(--c-accent); color: #fff; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: var(--radius-pill); margin-bottom: 26px; }
.quote-chip--dark { background: var(--c-dark); }
.quote-chip--line { background: var(--c-line); }
.quote-chip--problem { background: rgba(229,72,77,.13); color: #ff6b70; border: 1.5px solid rgba(229,72,77,.5); font-weight: 700; display: inline-flex; align-items: center; }
.qc-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-red); color: #fff; font-size: 12px; font-weight: 900; margin-right: 9px; flex: none; }
.solve-box { background: var(--c-dark-2); border-radius: var(--radius); padding: 26px; border-left: 4px solid var(--c-accent); }
.section--dark .solve-box { background: rgba(255,255,255,.05); }
.solve-box--light { background: var(--c-surface); box-shadow: var(--shadow-sm); }
.solve-box--line { background: var(--c-surface); box-shadow: var(--shadow-sm); border-left-color: var(--c-line); }
.solve-box h3 { font-size: 18px; margin-bottom: 12px; }
.solve-box p { font-size: 14.5px; line-height: 1.95; }
.section--dark .solve-box p { color: #c7c9d6; }

/* mini app UI inside phone */
.ui-panel { background: #f3f2f8; border-radius: 14px; padding: 12px; margin-top: 8px; }
.ui-panel__title { font-weight: 700; font-size: 12px; color: #1a1a22; margin-bottom: 10px; }
.ui-label { font-size: 10px; font-weight: 700; color: var(--c-accent); margin: 10px 0 6px; }
.ui-select { background: #fff; border: 1px solid #e2e0ec; border-radius: 9px; padding: 9px 11px; font-size: 10px; color: #6a6b75; }
.ui-btn { width: 100%; margin-top: 14px; background: var(--c-blue); color: #fff; border: none; border-radius: 9px; padding: 11px; font-size: 11px; font-weight: 700; cursor: pointer; }
.ui-tabs { display: flex; gap: 4px; font-size: 7.5px; padding: 4px 0 8px; }
.ui-tabs span { flex: 1; text-align: center; white-space: nowrap; padding: 7px 6px; border-radius: 8px; color: #8a8b95; }
.ui-tabs .active { background: var(--c-accent); color: #fff; font-weight: 700; }
.ui-tab { cursor: pointer; transition: transform .14s ease, background .3s ease, color .3s ease; }
@keyframes tabtap { 0% { transform: scale(1); } 38% { transform: scale(.88); } 100% { transform: scale(1); } }
.ui-tab.tap { animation: tabtap .32s ease; }
.ui-stack { position: relative; height: 226px; margin-top: 8px; }
/* TOPのモック：カレンダー〜レポートを自動で切り替える（残り高さいっぱいに） */
.ui-stack--hero { flex: 1; height: auto; min-height: 360px; }
.ui-pane { position: absolute; inset: 0; margin-top: 0; opacity: 0; transform: translateY(7px); transition: opacity .42s ease, transform .42s ease; pointer-events: none; }
.ui-pane.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ui-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 4px; }
.ui-stat { background: #fff; border: 1px solid #e8e6f0; border-radius: 10px; padding: 9px 10px; }
.ui-stat__k { display: block; font-size: 8.5px; color: #8a8b95; font-weight: 600; }
.ui-stat__v { display: block; font-family: var(--font-en); font-weight: 800; font-size: 18px; color: #1a1a22; line-height: 1.2; margin-top: 2px; }
.ui-stat__v small { font-size: 9px; font-weight: 700; color: #8a8b95; margin-left: 1px; }
.ui-stat__d { display: block; font-size: 8.5px; color: #8a8b95; font-weight: 600; margin-top: 1px; }
.ui-stat__d.up { color: #1f9d57; }
.ui-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.ui-bar { display: grid; grid-template-columns: 62px 1fr 20px; align-items: center; gap: 7px; }
.ui-bar__k { font-size: 8.5px; color: #6a6b75; font-weight: 600; }
.ui-bar__t { height: 7px; background: #e4e2ee; border-radius: 4px; overflow: hidden; }
.ui-bar__t i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--c-accent-light), var(--c-accent)); border-radius: 4px; transition: width .8s ease; }
.ui-pane.is-on .ui-bar__t i { width: var(--w); }
.ui-bar__v { font-family: var(--font-en); font-size: 10px; font-weight: 800; color: var(--c-accent-deep); text-align: right; }
.ui-foot { font-size: 9px; color: #8a8b95; margin-top: 8px; }
.chart { width: 100%; height: 120px; margin-top: 10px; }
.chart__line { fill: none; stroke: var(--c-accent); stroke-width: 2.5; }
.chart__line--2 { stroke: var(--c-accent-light); stroke-width: 2; }
.line-badge { display: inline-block; background: var(--c-line); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 5px; vertical-align: middle; }
.line-title { display: flex; align-items: center; gap: 8px; }

/* =====================================================================
   09 — HOW IT WORKS (steps)
   ===================================================================== */
.steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: clamp(10px, 1.4vw, 16px); }
.step {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--c-surface); border-radius: 14px;
  padding: 18px 22px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-line-soft);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
/* 左の細いアクセントバー（ホバーで出現） */
.step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--c-accent), var(--c-accent-light));
  transform: scaleY(0); transform-origin: top; transition: transform .28s ease;
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.step:hover::before { transform: scaleY(1); }
.step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.step__no {
  font-family: var(--font-en); font-weight: 800; line-height: 1;
  font-size: 21px; letter-spacing: .04em; color: var(--c-accent);
  display: inline-flex; align-items: baseline;
}
.step__num { font-style: normal; font-size: 21px; font-weight: 800; letter-spacing: 0; color: var(--c-accent); margin-left: 1px; }
.step h3 { font-size: 16px; color: var(--c-ink); margin: 0 0 6px; }
.step p { font-size: 13px; line-height: 1.7; color: var(--c-muted); margin: 0; }
.point-bar {
  margin-top: 30px; background: var(--c-dark); color: #fff; border-radius: var(--radius);
  padding: 22px clamp(22px, 3vw, 38px); font-weight: 700; font-size: clamp(15px, 1.6vw, 18px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.point-bar__label { font-family: var(--font-en); font-weight: 800; letter-spacing: .12em; font-size: 12px; color: var(--c-teal-light); background: rgba(255,255,255,.08); padding: 6px 12px; border-radius: 7px; flex: none; }
.point-bar__text { flex: 1; min-width: 0; }
.point-bar--center { justify-content: center; text-align: center; }
.point-bar--center .point-bar__text { flex: 0 1 auto; }

/* =====================================================================
   14 — COMPARE POST (attributes)
   ===================================================================== */
.compare-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 28px); }
.compare-card { background: var(--c-surface); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 30px); box-shadow: var(--shadow-sm); border: 1px solid var(--c-line-soft); }
.compare-card--pos { background: var(--c-accent-soft); border: 1.5px solid var(--c-accent); box-shadow: none; }
.compare-card > .tag { margin-bottom: 18px; }
.attr-list { display: flex; flex-direction: column; gap: 14px; }
.attr-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-soft); }
.compare-card--pos .attr-list > div { border-color: rgba(26,108,255,.18); }
.attr-list dt { font-size: 12.5px; color: var(--c-muted); font-weight: 600; }
.attr-list dd { font-size: 14px; color: var(--c-ink); font-weight: 600; }
.compare-card--pos .attr-list dd { color: var(--c-accent-deep); }

/* =====================================================================
   15 — THREE AXES
   ===================================================================== */
.axes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.axis-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 26px; }
.axis-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.axis-card__no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; background: var(--c-accent); color: #fff; font-family: var(--font-en); font-weight: 800; border-radius: 8px; font-size: 14px; }
.axis-head h3 { color: #fff; font-size: 20px; margin: 0; }
.axis-card > p { color: #b5b7c6; font-size: 13.5px; line-height: 1.85; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.axis-compare { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ac-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 10px; }
.ac-row p { font-size: 12.5px; line-height: 1.65; margin: 0; }
.ac-row--neg { background: rgba(229,72,77,.12); border: 1px solid rgba(229,72,77,.38); }
.ac-row--neg p { color: #f3b0b2; }
.ac-row--pos { background: rgba(91,140,255,.18); border: 1.5px solid rgba(91,140,255,.55); box-shadow: 0 6px 18px rgba(27,92,242,.18); animation: acPop 1.8s ease-in-out infinite; will-change: transform; }
.ac-row--pos p { color: #cfe0ff; font-weight: 600; }
/* B店の青枠：3つ揃って、ふわっと一回り大きくなる */
@keyframes acPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .ac-row--pos { animation: none; } }
.ac-tag { flex: 0 0 auto; align-self: flex-start; font-family: var(--font-en); font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 3px 8px; border-radius: 6px; line-height: 1.5; }
.ac-tag--neg { background: var(--c-red); color: #fff; }
.ac-tag--pos { background: var(--c-accent); color: #fff; }

/* =====================================================================
   16 — BEFORE / AFTER
   ===================================================================== */
.ba-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 2.5vw, 30px); align-items: stretch; }
.ba-card { border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.ba-card .ba-list { flex: 1; }
.ba-card--before { background: var(--c-surface); border: 1px solid var(--c-line-soft); box-shadow: var(--shadow-sm); }
.ba-card--after { background: var(--c-accent-soft); }
.ba-card > .tag { margin-bottom: 18px; }
.ba-list { display: flex; flex-direction: column; gap: 12px; }
.ba-list li { font-size: 14px; line-height: 1.8; color: var(--c-text); background: rgba(0,0,0,.025); padding: 12px 16px; border-radius: var(--radius-sm); }
.ba-list--pos li { background: rgba(255,255,255,.7); color: var(--c-ink); }
.ba-list--pos strong { color: var(--c-accent-deep); }
.ba-foot { margin-top: 20px; text-align: center; font-weight: 700; padding: 14px; border-radius: var(--radius-sm); }
.ba-foot--neg { color: var(--c-red); background: #fde7e6; }
.ba-foot--pos { color: var(--c-accent); background: #fff; border: 2px solid var(--c-accent); }
.ba-arrow { display: flex; justify-content: center; align-items: center; }
.ba-arrow__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: clamp(166px, 15vw, 202px); height: clamp(124px, 11.8vw, 152px); padding: 6px clamp(40px, 4vw, 52px) 6px 18px; clip-path: polygon(0% 16%, 72% 16%, 72% 0%, 100% 50%, 72% 100%, 72% 84%, 0% 84%); background: linear-gradient(150deg, var(--c-accent), var(--c-accent-deep)); color: #fff; text-align: center; filter: drop-shadow(0 12px 22px rgba(27,92,242,.38)); }
.ba-arrow__chip small { font-family: var(--font-en); font-size: clamp(15px, 1.8vw, 19px); font-weight: 800; letter-spacing: .02em; opacity: 1; line-height: 1.1; }
.ba-arrow__chip strong { font-weight: 800; font-size: clamp(15px, 1.8vw, 19px); line-height: 1.1; }

/* =====================================================================
   17 / 18 — METRIC GRID
   ===================================================================== */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.metric { background: var(--c-surface); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--c-line-soft); display: flex; flex-direction: column; gap: 4px; }
.metric--dark { background: var(--c-dark); border-color: transparent; }
#after .metric { align-items: center; text-align: center; }
.metric__label { font-weight: 800; color: var(--c-ink); font-size: 16px; }
.metric--dark .metric__label { color: #fff; }
.metric__sub { font-size: 12px; color: var(--c-muted); margin-bottom: 14px; }
.metric__num { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-en); font-weight: 900; font-size: clamp(40px, 4.8vw, 58px); line-height: 1; color: var(--c-ink); }
.metric__num.accent { color: var(--c-accent); }
.metric--dark .metric__num { color: #fff; }
.metric__num small { align-self: flex-end; font-size: 19px; margin-left: 3px; transform: translateY(-2px); }
.count { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.metric__trend { width: .52em; height: .52em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.metric__note { font-size: 12px; color: var(--c-muted); margin-top: 14px; line-height: 1.7; }
.metric--dark .metric__note { color: #a9abbb; }

/* =====================================================================
   19 — PRICE
   ===================================================================== */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 28px); }
.price-card { background: var(--c-surface); border-radius: var(--radius); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); border: 1px solid var(--c-line-soft); }
.price-card--dark { background: var(--c-dark); border-color: transparent; box-shadow: var(--shadow); }
.price-card > .tag { margin-bottom: 16px; }
.price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 22px; }
.price__num { font-family: var(--font-en); font-weight: 900; font-size: clamp(40px, 5.5vw, 64px); color: var(--c-ink); line-height: 1; letter-spacing: .01em; }
.price--light .price__num { color: #fff; }
.price__unit { font-size: 14px; color: var(--c-muted); }
.feature-list { display: flex; flex-direction: column; }
.feature-list li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--c-line-soft); font-size: 14px; color: var(--c-text); }
.feature-list--light li { border-color: rgba(255,255,255,.1); color: #d6d8e4; }
.feature-list li:last-child { border-bottom: none; }
.fl-x, .fl-o, .fl-t, .fl-check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.fl-x { background: #eef0f4; color: #b6bcc6; }
.fl-o { background: #e7ebf1; color: #8b93a1; }
.fl-t { background: #eef0f4; color: #aab1bd; }
.fl-check { background: var(--c-teal); color: #fff; }
.price-foot { margin-top: 7px; padding-top: 20px; border-top: 1px solid var(--c-line-soft); display: flex; justify-content: flex-start; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--c-ink); }
.price-foot .muted { white-space: nowrap; flex: none; }
.price-foot strong { flex: 1; text-align: left; }
.price-foot--light { border-top: 1px solid rgba(255,255,255,.1); color: #fff; }

/* =====================================================================
   20 — ONBOARDING
   ===================================================================== */
.onb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 22px); }
.onb-card { background: var(--c-surface); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--c-line-soft); display: flex; flex-direction: column; }
.onb-card--dark { background: var(--c-dark); border-color: transparent; }
.onb-card .icon-chip { margin-bottom: 16px; }
.onb-card--dark .icon-chip { background: rgba(255,255,255,.08); color: var(--c-accent-light); }
.onb-card__illust { display: block; width: auto; height: 92px; margin: 0 auto 18px; }
.onb-card__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; margin-bottom: 12px; }
.onb-card__step { font-family: var(--font-en); font-weight: 800; font-size: 14px; letter-spacing: .1em; color: var(--c-accent); margin-bottom: 0; }
.onb-card h3 { font-size: 23px; color: var(--c-ink); margin-bottom: 0; }
.onb-card--dark h3 { color: #fff; }
.onb-card p { font-size: 13.5px; color: var(--c-muted); flex: 1; line-height: 1.8; }
.onb-card--dark p { color: #a9abbb; }
.onb-card__day { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--c-line-soft); font-family: var(--font-en); font-weight: 700; font-size: 13px; color: var(--c-muted); text-align: right; }
.onb-card--dark .onb-card__day { border-color: rgba(255,255,255,.12); color: #a9abbb; }
.onb-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.onb-foot > div { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--c-line-soft); padding-left: 16px; }
.onb-foot span { font-size: 12.5px; }
.onb-foot strong { font-size: 17px; color: var(--c-ink); }

/* =====================================================================
   21 — CTA
   ===================================================================== */
.section--cta { background: var(--c-dark); overflow: hidden; padding: clamp(68px, 7vw, 112px) 0; }
.cta__bg-circle { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.cta__bg-circle--1 { width: 820px; height: 820px; background: radial-gradient(circle, rgba(27,92,242,.5), transparent 68%); left: 50%; top: -42%; transform: translateX(-50%); opacity: .9; }
.cta__bg-circle--2 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(20,184,166,.22), transparent 70%); left: 50%; bottom: -38%; transform: translateX(-50%); opacity: .9; }
.section--cta .container { position: relative; z-index: 1; }
.cta__inner { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.cta__text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.cta__title { font-size: clamp(26px, 2.9vw, 40px); font-weight: 900; line-height: 1.36; color: #fff; letter-spacing: .05em; margin: 10px 0 24px; }
.cta__lead { font-size: clamp(14px, 1.4vw, 16px); color: #b5b7c6; line-height: 1.9; margin: 0 0 32px; }
.cta__cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-start; margin-bottom: 32px; }
.cta__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm); padding: 20px 30px; min-width: 200px; display: flex; flex-direction: column; gap: 6px; }
.cta__card span { font-size: 12.5px; }
.cta__card strong { font-size: 22px; color: #fff; }
.cta__btn { display: inline-block; background: var(--c-teal); color: #fff; font-weight: 700; font-size: 16px; padding: 16px 44px; border-radius: var(--radius-pill); box-shadow: 0 12px 30px rgba(27,92,242,.42); transition: transform .2s, background .2s; }
.cta__btn:hover { transform: translateY(-3px); background: var(--c-teal-deep); }
.cta__foot { margin-top: 40px; font-size: 12px; color: #6a6c80; letter-spacing: .04em; }
.cta__foot--center { position: relative; z-index: 1; text-align: center; margin-top: clamp(32px, 5vw, 56px); }
.cta__lead-final { display: block; margin-top: .7em; }

/* ===== Back to top ===== */
.back-to-top {
  position: fixed; bottom: 26px; right: 26px; z-index: 95;
  width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 0; padding: 0;
  background: var(--c-teal); color: #fff;
  box-shadow: none;
  opacity: 0; pointer-events: none; transition: opacity .3s, transform .2s;
}
.back-to-top__icon { width: 17px; height: 17px; display: block; }
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); }
@media (max-width: 1000px) { .back-to-top { bottom: 18px; right: 18px; } }

/* =====================================================================
   DECOR（ブロブ・幾何アクセント）/ ILLUSTRATIONS（フラット人物）
   位置とサイズはHTML側の inline style で個別指定。色は上の変数で一括変更。
   ===================================================================== */
/* ===== 線アイコン（モノ・1色） ===== */
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: var(--c-accent-soft); color: var(--c-accent);
}
.icon-chip .icon { width: 24px; height: 24px; }
.section--dark .icon-chip { background: rgba(255,255,255,.08); color: var(--c-accent-light); }
/* unDraw風フラットイラスト（シーン） */
.scene { width: 100%; max-width: 440px; height: auto; display: block; position: relative; z-index: 1; margin-inline: auto; }
.cta__visual { position: relative; display: flex; justify-content: center; align-items: center; padding: clamp(20px, 3vw, 36px); background: none; border: none; border-radius: 0; box-shadow: none; }
.cta__visual::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%); z-index: 0; pointer-events: none; }
.scene--cta { display: block; width: 100%; max-width: 600px; position: relative; z-index: 1; filter: drop-shadow(0 18px 38px rgba(0,0,0,.45)); }
@media (max-width: 920px) {
  .cta__inner { grid-template-columns: 1fr; gap: 24px; text-align: center; justify-items: center; }
  /* タイトル・本文 → イラスト → ご相談/費用カード の順に */
  .cta__text { display: contents; }
  .cta__text > .eyebrow { order: 1; }
  .cta__title { order: 2; }
  .cta__lead { order: 3; }
  .cta__visual { order: 4; margin: 0; }
  .cta__cards { order: 5; }
  .cta__foot { order: 6; }
  /* ご相談形式／費用は横並び2列を維持 */
  .cta__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; justify-content: stretch; width: 100%; max-width: 460px; }
  .cta__card { min-width: 0; padding: 16px 14px; text-align: center; align-items: center; }
  .cta__card strong { font-size: clamp(16px, 4.6vw, 22px); }
  .scene--cta { max-width: 280px; }
}
/* 効果予測：左に2×2のカード、右にイラストを横並び */
.impact-layout { display: grid; grid-template-columns: 1fr minmax(380px, 540px); align-items: center; gap: clamp(28px, 4vw, 64px); margin-top: 44px; }
.impact-layout .metric-grid { grid-template-columns: repeat(2, 1fr); }
.scene--impact { max-width: 540px; width: 100%; margin: 0; }
@media (max-width: 920px) {
  .impact-layout { grid-template-columns: 1fr; gap: 24px; }
  /* イラストはカードの下に、ひと回り小さく */
  .scene--impact { max-width: 340px; margin: 28px auto 0; order: 1; }
}
.scene--reality { max-width: 330px; } /* 縦長イラスト想定。差し替え画像に合わせて調整可 */

/* 大きめの丸バッジ（イラスト置き換え用） */
.icon-badge {
  display: flex; align-items: center; justify-content: center;
  width: clamp(150px, 22vw, 210px); aspect-ratio: 1; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-accent); position: relative; z-index: 1;
}
.icon-badge .icon { width: 44%; height: 44%; stroke-width: 1.5; }

.deco { position: absolute; z-index: 0; pointer-events: none; }
.deco--blob   { background: var(--c-accent-soft); border-radius: 42% 58% 63% 37% / 45% 38% 62% 55%; }
.deco--blob-2 { background: var(--c-accent-soft); border-radius: 63% 37% 47% 53% / 38% 57% 43% 62%; }
.deco--ring   { border-radius: 50%; border: 12px solid var(--c-accent-soft); background: transparent; }
.deco--dot    { background: var(--c-accent); border-radius: 50%; }
.deco--square { background: var(--c-accent-light); border-radius: 9px; }
.deco--light  { background: rgba(255,255,255,.05); }            /* ダーク背景用 */
.deco--ring-light { border-color: rgba(255,255,255,.08); }
.deco--float      { animation: float 5s ease-in-out infinite; }
.deco--float-slow { animation: float 8s ease-in-out infinite; }

/* PCでは非表示・スマホでのみ表示する語句（≤700pxで表示。対になる .sp-hide はスマホで非表示） */
.pc-hide { display: none; }

/* フラット人物イラスト共通 */
.char { width: 100%; height: auto; display: block; }
.reality__right .char { max-width: 300px; margin-inline: auto; position: relative; z-index: 1; }

/* チャット内のアバター（線アイコン） */
.chat-img { background: linear-gradient(135deg, #dbe7fb, #b4cdf3); }
.chat-useric { width: 64px; height: 64px; color: var(--c-accent); stroke-width: 1.6; }

/* CTAのオンライン相談アイコン */
.icon-badge--cta {
  position: absolute; right: 6%; bottom: 9%; z-index: 1;
  width: clamp(120px, 15vw, 176px);
  background: rgba(255,255,255,.06); color: var(--c-accent-light);
}
@media (max-width: 920px) { .icon-badge--cta { display: none; } }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 920px) {
  .hero__grid,
  .two-col,
  .reality__grid { grid-template-columns: 1fr; }
  /* ヒーロー：装飾は文字とかぶるので非表示 */
  .section--hero .deco, .hero__bg-circle { display: none; }
  /* 文章 → モック → 特徴ピル の順に並べる（copyを display:contents で展開して order 指定） */
  .hero__grid { gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy > .eyebrow { order: 1; margin-bottom: 10px; }
  .hero__title { order: 2; margin: 0 0 16px; }
  .hero__lead { order: 3; margin-bottom: 8px; max-width: 100%; font-size: clamp(15px, 4.2vw, 18px); line-height: 1.75; }
  .hero__lead .lead-nowrap { white-space: normal; }
  /* モックは上下にしっかり余白を取り、浮遊(最大-26px→モバイルは-18px)しても本文/ピルと被らないように */
  .hero__phone { order: 4; margin: 52px 0 48px; }
  .hero__phone .phone { animation-name: phoneFloatSm; }
  .hero__pills { order: 5; max-width: 100%; gap: 10px; }
  .hero__foot { order: 6; margin-top: 34px; text-align: right; }
  /* ピルは小さめに */
  .pill { padding: 11px 16px; font-size: 13px; gap: 9px; }
  .pill-ic { width: 17px; height: 17px; }
  /* モックはPCと同じ比率を保つ（≒PC幅。縮小で縦長にしない） */
  /* モックはPCと同じ290px幅を保ち、内部の折り返し＝比率をPCと一致させる */
  .phone { width: min(290px, 88vw); }
  .vs-grid,
  .compare-cols,
  .price-grid { grid-template-columns: 1fr; }
  /* case study：スマホはタブで1枚ずつ表示（スクロール短縮） */
  .vs-tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    margin-bottom: 18px;
    background: rgba(0,0,0,.04);
    border-radius: 999px;
  }
  .vs-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 11px 10px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-muted);
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
    -webkit-tap-highlight-color: transparent;
  }
  .vs-tab[data-vs-tab="0"].is-active { background: #fff; color: var(--c-red); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .vs-tab[data-vs-tab="1"].is-active { background: #fff; color: var(--c-accent); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  /* 非アクティブのカードは隠す */
  #case .vs-card { display: none; }
  #case .vs-card.is-vs-active { display: flex; }
  #amateur-vs-pro .post-col { display: none; }
  #amateur-vs-pro .post-col.is-vs-active { display: flex; }
  /* タブ表示時は2枚目の上余白（縦積み用）が不要 */
  #amateur-vs-pro .post-compare > .post-col:nth-child(2) { margin-top: 0; }
  #compare-post .compare-card { display: none; }
  #compare-post .compare-card.is-vs-active { display: block; }
  #cost .price-card { display: none; }
  #cost .price-card.is-vs-active { display: block; }
  /* 1日の比較：人運用セクションに集約された2枚をタブで切替 */
  #day-manual .daycard { display: none; }
  #day-manual .daycard.is-vs-active { display: block; }
  /* AIカードは明背景に移るため、上に余白を足してカード単体で成立させる */
  #day-manual .daycard--ai { margin-top: 0; }
  /* カード内側の余白を少し詰めてコンパクトに（枠内の余白に統一感を） */
  .daycard { padding: 22px 20px; }
  .post-compare,
  .ba-grid { grid-template-columns: 1fr; }
  /* 縦積み時、2列目（プロレベルの投稿）の上に余白を入れて区切りを明確に */
  .post-compare > .post-col:nth-child(2) { margin-top: 30px; }
  .post-arrow__icon { transform: rotate(90deg); display: inline-block; }
  /* 矢印チップ：スマホでは横長の「下向き矢印」に（テキストは横書きのまま） */
  .vs-x__chip, .ba-arrow__chip {
    transform: none; flex-direction: column; gap: 3px;
    width: min(240px, 72%); height: auto; min-height: 110px;
    padding: 18px 18px 42px;
    clip-path: polygon(12% 0, 88% 0, 88% 56%, 100% 56%, 50% 100%, 0 56%, 12% 56%);
  }
  .ba-arrow__chip small, .ba-arrow__chip strong { font-size: 22px; }
  .vs-x__chip small, .vs-x__chip strong { font-size: 22px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  /* 導入ステップは横スライド（カルーセル）。次のカードが少し覗いてスワイプを示唆 */
  .onb-grid {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 14px;
    scrollbar-width: none;
  }
  .onb-grid::-webkit-scrollbar { display: none; }
  .onb-card { flex: 0 0 80%; scroll-snap-align: start; }
  /* 比較表：スマホは行の縦幅を詰める（余白・行間・文字を圧縮） */
  .ctable th, .ctable td { padding: 9px 14px; font-size: 13px; line-height: 1.4; }
  .ctable td small { font-size: 10.5px; line-height: 1.3; margin-top: 1px; }
  .ctable thead th.ctable__hl { font-size: 14px; }
  /* スマホでは「STEP 0X」と見出しを縦積み・中央にバランスよく */
  .onb-card__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; margin-bottom: 8px; }
  .onb-card__step { margin-bottom: 0; font-size: 18px; line-height: 1.2; }
  .onb-card__head h3 { margin-bottom: 0; font-size: clamp(19px, 5.2vw, 22px); line-height: 1.25; }
  /* スマホはカードの縦幅を詰める */
  .onb-card { padding: 18px 22px; }
  .onb-card__illust { height: 104px; margin: 12px 0 22px; }
  .onb-card p { line-height: 1.6; }
  .onb-card__day { margin-top: 14px; padding-top: 14px; }
  .axes-grid { grid-template-columns: 1fr; }
  /* タイムライン：1カラム＆行間を詰めて縦幅を短く */
  .timeline { grid-template-columns: 1fr; }
  /* 1カラム時は2カラム用の「下2項目の下線除外」が不要。最後の1項目以外は下線を復活 */
  .timeline .tl-item:nth-last-child(2) { border-bottom: 1px solid var(--c-line-soft); }
  .timeline--light .tl-item:nth-last-child(2) { border-bottom-color: rgba(255,255,255,.08); }
  .tl-item { padding: 7px 0; gap: 12px; }
  .tl-item strong { font-size: 13px; line-height: 1.3; margin-bottom: 0; }
  .tl-item span:not(.tl-time) { font-size: 11.5px; line-height: 1.3; }
  .tl-time { font-size: 13px; line-height: 1.3; }
  .tl-item > div { display: flex; flex-direction: column; gap: 4px; }
  .onb-foot { grid-template-columns: 1fr; }
  /* ナビはハンバーガー式のスライドインパネルに */
  .navtoggle { display: flex; }
  .topbar__nav {
    position: fixed; top: 0; right: 0; z-index: 105;
    width: min(80vw, 320px); height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 84px 0 32px;
    background: #fff; box-shadow: -12px 0 40px rgba(0,0,0,.12);
    transform: translateX(100%); transition: transform .34s var(--ease);
    overflow-y: auto; font-size: 16px;
  }
  .topbar__nav.is-open { transform: translateX(0); }
  .topbar__nav a {
    padding: 16px clamp(24px, 7vw, 34px); border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-ink); font-weight: 600;
  }
  .topbar__nav a:active { background: var(--c-accent-soft); }
  .topbar__nav-cta {
    display: block; margin: 20px clamp(24px, 7vw, 34px) 0; padding: 14px 20px !important;
    background: var(--c-accent); color: #fff !important; text-align: center;
    border-radius: var(--radius-pill); border: none !important; font-weight: 700;
  }
}
@media (max-width: 560px) {
  /* テキスト主体のカードは1列（読みやすさ優先） */
  .steps-grid,
  .onb-grid { grid-template-columns: 1fr; }
  /* 数値カードは2列を維持してスクロールを減らす（minmaxでトラックの突き抜け防止） */
  .metric-grid,
  .impact-layout .metric-grid,
  .stat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  /* 2列に収まるよう数値・余白を圧縮 */
  .metric { min-width: 0; padding: 14px 12px; }
  .metric__num { font-size: clamp(22px, 7.2vw, 30px); gap: 2px; white-space: nowrap; min-width: 0; }
  .metric__num small { font-size: 12px; }
  .metric__trend { width: .46em; height: .46em; }
  .metric__label { font-size: 12.5px; line-height: 1.3; }
  .metric__sub { font-size: 10.5px; margin-bottom: 6px; }
  .metric__note { font-size: 10.5px; margin-top: 8px; line-height: 1.6; }
  /* モバイルでは数字の予約幅を解除（トラックが広がるのを防ぐ／tnumでガタつきは防止済み） */
  #impact .metric__num .count { min-width: 0 !important; text-align: left; }
  .stat { min-width: 0; padding: 11px 12px; }
  .stat span { font-size: 10.5px; }
  .stat strong { font-size: clamp(20px, 6.6vw, 28px); }
  /* 比較カードの項目（ラベル｜値）は縦積みで詰まりを解消 */
  .attr-list > div { grid-template-columns: 1fr; gap: 3px; padding-bottom: 9px; }
  .attr-list { gap: 9px; }
  .attr-list dd { font-size: 13px; }
  .attr-list dt { font-size: 11.5px; }
  /* A店/B店 PR投稿カードの縦幅を圧縮 */
  .compare-card { padding: 18px 18px; }
}

/* =====================================================================
   RESPONSIVE — fine tuning (illustrations / mockups / 改行 / sizing)
   ===================================================================== */
@media (max-width: 920px) {
  /* why の3カラム（カード｜矢印｜カード）を縦積みに */
  .vs-grid--tri { grid-template-columns: 1fr; }
  .vs-x { display: flex; justify-content: center; margin: 4px 0; }
  /* タイムライン合計：縦並びで詰まらないように */
  .daycard__total { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 7px; padding-top: 14px; }
  /* daycardヘッダー：タグを1行目、その下に[店長名 ＋ 役割]を横並び */
  .daycard__head {
    display: grid; grid-template-columns: auto 1fr; grid-auto-rows: auto;
    grid-template-areas: "tag tag" "name role";
    column-gap: 12px; row-gap: 8px; align-items: baseline;
    padding-bottom: 14px; margin-bottom: 7px;
  }
  .daycard__head > .tag { grid-area: tag; justify-self: start; }
  .daycard__head > strong { grid-area: name; font-size: 15px; }
  .daycard__head > .daycard__role { grid-area: role; margin-left: 0; justify-self: end; }
  /* イラストは中央寄せでバランス調整 */
  .scene, .scene--impact, .scene--reality { margin-inline: auto; }
  /* 悩みのフキダシ：イラストの両サイドに散りばめる（3つに絞り、上下を詰める） */
  .reality__right { min-height: 300px; flex-direction: row; }
  .thought-bubbles { position: absolute; inset: 0; display: block; margin: 0; }
  .bubble {
    position: absolute; animation: float 5s ease-in-out infinite; white-space: normal; width: auto;
    max-width: 46%; font-size: 11px; line-height: 1.3; padding: 8px 12px;
  }
  /* スマホでは「何を投稿すれば」と「他の仕事もあるのに時間がない」を非表示 */
  .bubble:nth-child(1), .bubble:nth-child(4) { display: none; }
  .bubble:nth-child(2) { top: 12%; right: 0; left: auto;  bottom: auto; animation-delay: .6s; }
  .bubble:nth-child(3) { top: 2%;  left: 0;  right: auto; bottom: auto; animation-delay: 0s; }
  .bubble:nth-child(5) { bottom: 26%; right: 0; left: auto; top: auto; animation-delay: 1.2s; }
  .scene--reality { max-width: 200px; }
}

@media (max-width: 700px) {
  /* 本文系の手動改行はモバイルでは解除して自然に流す（見出しの改行は維持） */
  .reality__lead br,
  .body-text br,
  .cta__lead br,
  .section__lead br { display: none; }
  /* モバイル専用の改行は表示、PC専用の改行は解除 */
  .br-sp { display: inline; }
  .br-pc { display: none; }
  /* スマホで非表示にしたい語句（例：キーワードチップ内の「美容室」） */
  .sp-hide { display: none; }
  /* スマホでのみ表示したい語句 */
  .pc-hide { display: inline; }
  /* 投稿の質：フラグは2カラム＆中央寄せ、スマホは数を間引く */
  .post-flags { grid-template-columns: 1fr 1fr; justify-content: center; gap: 8px; }
  .post-flags .flag { width: 100%; white-space: nowrap; font-size: 10.5px; padding: 8px 6px; }
  .post-flags .flag:nth-child(n+5) { display: none; }
  /* プロ投稿の見出しタグと「表示されやすい」を同じ全幅・同じ高さに */
  .post-col > .tag, .post-col > .flag { width: 100%; white-space: normal; padding: 12px 16px; box-sizing: border-box; }
  /* 矢印テキスト：ブロックは中央配置、文章は左寄せ（手動改行は解除して自然に流す） */
  .post-arrow { margin-inline: auto; text-align: left; max-width: 300px; }
  .post-arrow p br { display: none; }
  /* 下向き矢印アイコンだけは中央に */
  .post-arrow__icon { display: block; text-align: center; }
  /* AIO登録キーワード：2カラムで幅を小さく */
  .kw-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kw { font-size: 11.5px; padding: 8px 10px; text-align: center; white-space: normal; line-height: 1.4; }
}

@media (max-width: 480px) {
  .scene--cta { max-width: 240px; }
  .scene--reality { max-width: 240px; }
  .total-msg { font-size: 16px; }
  /* 見出し・本文の最小サイズを少し下げて窮屈さを解消 */
  .hero__title { font-size: clamp(40px, 11.5vw, 56px); letter-spacing: .02em; }
  .section__title { font-size: clamp(23px, 6.4vw, 30px); }
  .bignum { font-size: clamp(40px, 13vw, 60px); }
  .hugenum { font-size: clamp(58px, 17vw, 96px); }
  /* セクション余白を少し詰める */
  :root { --section-pad: clamp(48px, 13vw, 80px); }
}

/* =====================================================================
   RESPONSIVE — 背景装飾(deco)を端末サイズに応じて控えめに
   ===================================================================== */
@media (max-width: 920px) {
  /* タブレット：ブロブ・リングを縮小して主張を弱める */
  .deco--blob, .deco--blob-2 { max-width: 190px; max-height: 190px; opacity: .75; }
  .deco--ring { max-width: 104px; max-height: 104px; border-width: 9px; }
}
@media (max-width: 560px) {
  /* スマホ：ブロブは小さく薄く、小さな浮遊ドット・スクエアは間引く */
  .deco--blob, .deco--blob-2 { max-width: 150px; max-height: 150px; opacity: .55; }
  .deco--ring { max-width: 84px; max-height: 84px; border-width: 7px; opacity: .7; }
  .deco--dot, .deco--square { display: none; }
}

/* ===== パフォーマンス最適化 ===== */
/* スマホ：常時動く背景装飾のアニメーションを止めて軽量化（装飾は静止表示のまま残す） */
@media (max-width: 700px) {
  .deco--float, .deco--float-slow { animation: none; }
  /* 固定ヘッダーのぼかしはスクロール中の再描画コストが高いので、スマホでは不透明寄りの背景に置き換え */
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(244,246,249,.96); }
}
/* モーション低減設定の端末では、装飾・浮遊系アニメーションを一括停止 */
@media (prefers-reduced-motion: reduce) {
  .deco--float, .deco--float-slow, .bubble, .hero__phone .phone { animation: none !important; }
}

/* ===== スマホ：全体の余白・行間を少し詰めてスクロールを短縮 ===== */
@media (max-width: 700px) {
  /* セクション上下余白を控えめに圧縮（詰めすぎない範囲で） */
  :root { --section-pad: clamp(44px, 8.5vw, 78px); }
  /* 見出し・リード・注記の下余白と行間を少しタイトに */
  .section__title { margin-bottom: 22px; line-height: 1.28; }
  .section__lead { margin-bottom: 24px; line-height: 1.7; }
  .section__note { margin: -4px 0 22px; line-height: 1.68; }
  .section--cta { padding: clamp(60px, 15vw, 100px) 0; }
  /* 本文・箇条書きの行間を気持ち詰める（読みやすさは維持） */
  .ba-list li, .feature-list li, .reason-list li,
  .vs-card__foot, .compare-card p, .attr-list dd { line-height: 1.55; }
  .source { line-height: 1.6; }
}

/* ===== スマホ：POINTも横スライド＆カルーセルの出現アニメ無効（純粋なスライドのみ） ===== */
@media (max-width: 700px) {
  .steps-grid {
    display: flex;
    grid-auto-rows: auto;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 14px;
    scrollbar-width: none;
  }
  .steps-grid::-webkit-scrollbar { display: none; }
  .steps-grid > .step { flex: 0 0 80%; scroll-snap-align: start; }
  /* カルーセル内カードは出現アニメ無効（スライド時に跳ねない／空白カード防止） */
  .steps-grid > .step.reveal,
  .onb-grid > .onb-card.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== スマホ：本文テキストを少し小さく（タイトル/小見出し/カード見出しは維持） ===== */
@media (max-width: 700px) {
  .section__lead { font-size: 14px; }
  .section__note { font-size: 12.5px; }
  .hero__lead { font-size: clamp(13.5px, 3.9vw, 16px); }
  .cta__lead { font-size: 15.5px; line-height: 1.75; }
  .step p { font-size: 12px; }
  .onb-card p { font-size: 12.5px; }
  .compare-card p, .attr-list dt, .attr-list dd { font-size: 12.5px; }
  .ba-list li, .feature-list li, .reason-list li { font-size: 13px; }
  .vs-card__sub, .case-meta, .vs-card__foot { font-size: 12.5px; }
  .quote-chip { font-size: 12.5px; }
  .point-bar__text { font-size: 13px; }
  .solve-box p, .two-col__text p { font-size: 13px; }
  .source { font-size: 11px; }
  .pill { font-size: 12.5px; }
}

/* ===== スマホ：強調ボックス（banner / point-bar）のフォント統一＆行間圧縮 ===== */
@media (max-width: 700px) {
  .banner { font-size: 15px; line-height: 1.45; padding: 18px 20px; }
  .point-bar { font-size: 15px; padding: 18px 20px; }
  .point-bar__text { font-size: 15px; line-height: 1.45; }
}