:root{
  --navy:#0A1E3C;
  --navy-2:#0D2544;
  --blue:#2E6FB7;
  --blue-pale:#EDF3FA;
  --blue-line:#C6D6E8;
  --gold:#B8913D;
  --gold-lt:#C9A254;
  --gold-deep:#8F6E27;
  --terracotta:#C1603F;
  --terracotta-lt:#D9805E;
  --terracotta-deep:#8F4128;
  --ink:#1B2635;
  --ink-weak:#5A6B80;
  --ph-bg:#DEE8F3;
  --ph-line:#7E97B8;
  --ph-text:#44597A;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  font-family:"Noto Sans JP",sans-serif;color:var(--ink);
  background:#fff;line-height:1.9;font-size:15px;letter-spacing:.02em;
  overflow-x:hidden;
}
.serif{font-family:"Zen Old Mincho",serif;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}
section{padding:110px 0;}
h2{font-family:"Zen Old Mincho",serif;font-weight:700;font-size:34px;line-height:1.55;letter-spacing:.04em;}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.26em;color:var(--gold-deep);
  margin-bottom:20px;display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:"";width:28px;height:1px;background:var(--gold);}
.on-dark .eyebrow{color:var(--gold-lt);}

/* ---- 画像プレースホルダ ---- */
.ph{
  background:var(--ph-bg);border:1px dashed var(--ph-line);border-radius:4px;
  position:relative;display:flex;align-items:center;justify-content:center;
  text-align:left;color:var(--ph-text);font-size:12.5px;line-height:2;padding:28px 34px;
}
.ph::before{
  content:"イラスト素材";position:absolute;top:10px;left:12px;
  font-size:10px;letter-spacing:.18em;font-weight:700;color:var(--ph-line);
}
.ph.dark{background:#132C4F;border-color:#3D5A82;color:#9FB8D6;}
.ph.dark::before{color:#5F7DA3;}

/* ---- ボタン ---- */
.btn{
  display:inline-block;text-decoration:none;text-align:center;font-weight:700;
  letter-spacing:.06em;padding:15px 40px;border-radius:2px;transition:opacity .2s;font-size:14px;
}
.btn:hover{opacity:.85;}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-ghost{border:1px solid #7E97B8;color:#DCE6F2;}
.btn-navy{background:var(--navy);color:#fff;}

/* =========================================================
   共通バッジ（機能チップ）— ゴールド基調のリッチな pill
   feature.css と同一定義。ライト地・ダーク地の両対応。
   ========================================================= */
.badge{
  --bd-dot:var(--gold);
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;letter-spacing:.03em;line-height:1;
  padding:6px 14px 6px 12px;border-radius:99px;
  color:var(--gold-deep);
  background:linear-gradient(180deg,#FFFDF8 0%,#FBF4E6 100%);
  border:1px solid rgba(184,145,61,.42);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 2px rgba(143,110,39,.10),
    0 4px 10px -6px rgba(143,110,39,.28);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.badge::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 30%,#F2DFA6 0%,var(--bd-dot) 55%,var(--gold-deep) 100%);
  box-shadow:0 0 4px rgba(201,162,84,.55),0 0 0 1px rgba(255,255,255,.5) inset;
}
.badge:hover{
  transform:translateY(-1px);
  border-color:rgba(184,145,61,.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 3px rgba(143,110,39,.12),
    0 8px 16px -8px rgba(143,110,39,.34);
}
.on-dark .badge,
.badge--on-dark{
  color:#EBD9A8;
  background:
    linear-gradient(180deg,rgba(201,162,84,.16) 0%,rgba(201,162,84,.06) 100%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
  border:1px solid rgba(201,162,84,.42);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 0 0 1px rgba(10,20,38,.20),
    0 6px 14px -8px rgba(0,0,0,.55),
    0 0 14px -4px rgba(201,162,84,.30);
}
.on-dark .badge:hover,
.badge--on-dark:hover{
  border-color:rgba(201,162,84,.62);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 0 0 1px rgba(10,20,38,.20),
    0 8px 18px -8px rgba(0,0,0,.6),
    0 0 18px -4px rgba(201,162,84,.42);
}
.badge--neutral{
  color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F7FB 100%);
  border-color:var(--blue-line);
}
.on-dark .badge--neutral,
.badge--on-dark.badge--neutral{
  color:#DCE6F2;
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.03) 100%);
  border-color:rgba(198,214,232,.26);
}
.badge--accent{
  --bd-dot:var(--terracotta);
  color:var(--terracotta-deep);
  background:linear-gradient(180deg,#FFF6F2 0%,#FBE7DF 100%);
  border-color:rgba(193,96,63,.4);
}
.on-dark .badge--accent,
.badge--on-dark.badge--accent{
  color:#F0C7B5;
  background:linear-gradient(180deg,rgba(193,96,63,.2) 0%,rgba(193,96,63,.08) 100%);
  border-color:rgba(217,128,94,.5);
}

/* ---- ヘッダー（共通は .site-header / site-chrome.css） ---- */
header:not(.site-header){
  position:sticky;top:0;z-index:50;background:rgba(10,30,60,.88);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(184,145,61,.3);
}
.header-in{
  max-width:1180px;margin:0 auto;padding:0 32px;height:66px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo-ph{width:140px;height:32px;font-size:11px;padding:4px;justify-content:center;text-align:center;}
.logo-ph::before{display:none;}
header:not(.site-header) nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:500;}
header:not(.site-header) nav a{color:#DCE6F2;text-decoration:none;}
header:not(.site-header) nav a:hover{color:var(--gold-lt);}
header:not(.site-header) nav .btn{padding:9px 22px;font-size:12.5px;}

/* ---- ヒーロー（一点透視：画面外から中央へ収束するモック） ---- */
.hero{
  --hero-anchor:324px;
  --hero-perspective:1040px;
  --hero-persp-x:50%;
  --hero-persp-y:65%;
  --hero-left-top:48%;
  --hero-right-top:49%;
  --hero-phone-h:570px;
  --hero-phone-ry:47deg;
  --hero-phone-rx:18deg;
  --hero-phone-ox:62%;
  --hero-phone-oy:88%;
  --hero-tablet-w:700px;
  --hero-tablet-ry:-56deg;
  --hero-tablet-rx:12deg;
  --hero-tablet-ox:1%;
  --hero-tablet-oy:42%;
  position:relative;
  background:var(--navy);color:#fff;text-align:center;
  overflow:visible;
  z-index:2;
}

/* ---- ヒーロー背景：プロダクトグリッド ---- */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
/* 精密グリッド：中央がわずかに明るく、端へフェード */
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(143,180,224,.07) 1px,transparent 1px),
    linear-gradient(180deg,rgba(143,180,224,.07) 1px,transparent 1px);
  background-size:56px 56px;
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 85% 92% at 50% 44%,#000 30%,transparent 96%);
  mask-image:radial-gradient(ellipse 85% 92% at 50% 44%,#000 30%,transparent 96%);
}
/* 中央の淡いグロー＋上のトーン締め（下端は次セクションへ受け渡すためフェードなし） */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 52% 44% at 50% 46%,rgba(46,111,183,.16) 0%,rgba(46,111,183,.05) 50%,transparent 75%),
    linear-gradient(180deg,rgba(6,15,30,.5) 0%,transparent 22%);
}
.hero-stage{
  position:relative;
  z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:100%;
  min-height:min(880px,94vh);
  padding:88px 24px 72px;
  transform-style:preserve-3d;
}
.hero-panel{flex-shrink:0;}
.hero-panel--left,
.hero-panel--right{
  position:absolute;
  z-index:1;pointer-events:none;
  transform-style:preserve-3d;
}
.hero-panel--left{
  left:calc(50% - var(--hero-anchor));
  top:var(--hero-left-top);
  transform:translate(-100%,-50%);
}
.hero-panel--right{
  left:calc(50% + var(--hero-anchor));
  top:var(--hero-right-top);
  transform:translateY(-50%);
  z-index:4;
}
.hero-panel--center{
  position:relative;
  width:min(520px,42vw);
  z-index:10;
  padding:0 12px;
}
.hero-body{width:100%;}

/* マップ用 .device スタイルをヒーロー内でリセット */
.hero-panel .device{
  position:relative;
  left:auto;top:auto;
  opacity:1;
  z-index:auto;
  width:auto;
  transform:none;
  transform-style:preserve-3d;
}
.hero-panel .d-tilt{
  transform:none;
  transform-style:preserve-3d;
  animation:heroFloat 8s ease-in-out infinite alternate;
}
.hero-panel--right .d-tilt{animation-delay:1.2s;}
@keyframes heroFloat{
  from{transform:translateY(-5px);}
  to{transform:translateY(5px);}
}

/* 左：外側（左）が手前・大きく見切れ、内側（右）が奥へ縮小 */
.hero-panel .device.hero-phone{
  height:min(var(--hero-phone-h),88vh);
  transform:perspective(var(--hero-perspective)) rotateY(var(--hero-phone-ry)) rotateX(var(--hero-phone-rx));
  transform-origin:var(--hero-phone-ox) var(--hero-phone-oy);
  pointer-events:none;
}
.hero-phone .d-tilt,
.hero-phone .d-body{height:100%;}
.hero-phone .d-body{width:auto;aspect-ratio:9/18.6;}

/* 右：左スマホの鏡像 */
.hero-panel .device.hero-tablet{
  width:min(var(--hero-tablet-w),44vw);
  transform:perspective(var(--hero-perspective)) rotateY(var(--hero-tablet-ry)) rotateX(var(--hero-tablet-rx));
  transform-origin:var(--hero-tablet-ox) var(--hero-tablet-oy);
  pointer-events:none;
}
.hero-panel .device.hero-tablet.ipad{width:min(var(--hero-tablet-w),44vw);}

.hero-panel .d-body{
  transform-style:preserve-3d;
  box-shadow:
    0 60px 100px -16px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 48px rgba(201,162,84,.1);
}
/* ヒーローのみ：背面プレートで板厚を表現 */
.hero-panel .d-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(201,162,84,.42);
  background:linear-gradient(168deg,#0A1A33 0%,#050B16 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
  transform:translate3d(6px,8px,-22px);
  z-index:-1;
}
.hero-panel .d-body::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(201,162,84,.22);
  background:linear-gradient(145deg,rgba(201,162,84,.16) 0%,#081528 28%,#040A14 100%);
  transform:translate3d(4px,6px,-11px);
  z-index:-2;
}
.hero-panel .d-screen{transform:translateZ(1px);}
.hero-panel .iphone .island{transform:translateX(-50%) translateZ(2px);}
.hero-panel .d-screen{font-size:11px;line-height:1.65;}
.hero-phone .d-screen{font-size:10px;padding:11%;}

.hero h1{
  font-family:"Zen Old Mincho",serif;font-weight:900;font-size:clamp(28px,3.6vw,56px);
  line-height:1.5;letter-spacing:.05em;
}
.hero h1 .u{background:linear-gradient(transparent 84%,var(--gold) 84%);padding:0 2px;}
.hero-sub{margin:26px auto 0;color:#C3D3E8;font-size:clamp(13px,1.4vw,16px);}
.hero-price{
  margin:30px auto 0;display:flex;justify-content:center;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.hero-price .cap{font-size:13px;color:#C3D3E8;letter-spacing:.1em;}
.hero-price .yen{font-family:"Zen Old Mincho",serif;font-size:clamp(36px,4.5vw,54px);font-weight:700;color:var(--gold-lt);}
.hero-cta{margin-top:38px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.hero-note{margin-top:16px;font-size:12px;color:#8FA6C4;letter-spacing:.06em;}
@media(prefers-reduced-motion:reduce){
  .hero-panel .d-tilt{animation:none;}
}
@media(max-width:1024px){
  .hero{
    overflow:hidden;
    background:var(--navy);
  }
  /* コピーの下に端末2台を並べて、端への見切れ配置はやめる */
  .hero-stage{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "copy copy"
      "phone tablet";
    justify-items:center;
    align-items:end;
    column-gap:20px;
    row-gap:36px;
    min-height:0;
    padding:72px 20px 48px;
    overflow:visible;
  }
  .hero-panel--center{
    grid-area:copy;
    width:100%;max-width:420px;padding:0 8px;
  }
  .hero-panel--left,
  .hero-panel--right{
    position:relative;
    left:auto;right:auto;top:auto;bottom:auto;
    transform:none;
    display:flex;justify-content:center;align-items:flex-end;
    width:100%;
    z-index:1;
  }
  .hero-panel--left{grid-area:phone;}
  .hero-panel--right{grid-area:tablet;}
  .hero-panel .device.hero-phone{
    height:min(300px,42vw);
    transform:perspective(900px) rotateY(14deg) rotateX(4deg);
    transform-origin:50% 50%;
  }
  .hero-panel .device.hero-tablet,
  .hero-panel .device.hero-tablet.ipad{
    width:min(340px,46vw);
    transform:perspective(900px) rotateY(-14deg) rotateX(4deg);
    transform-origin:50% 50%;
  }
  .gear-banner{margin-top:-24px;}
}
@media(max-width:720px){
  .hero-stage{
    padding:64px 16px 40px;
    column-gap:12px;
    row-gap:28px;
  }
  .hero-panel .device.hero-phone{height:min(220px,38vw);}
  .hero-panel .device.hero-tablet,
  .hero-panel .device.hero-tablet.ipad{width:min(250px,44vw);}
}

/* ---- 機材無料キャンペーン：横長帯バナー ---- */
.gear-banner{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  padding:0 0 40px;
  z-index:1;
  margin-top:-64px;
}
/* ヒーロー背景の続き：グロー（グリッドより背面） */
.gear-banner::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 120% at 50% -20%,rgba(46,111,183,.14) 0%,transparent 70%);
}
/* ヒーローから続くグリッド：グローより手前に表示 */
.gear-banner::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(143,180,224,.07) 1px,transparent 1px),
    linear-gradient(180deg,rgba(143,180,224,.07) 1px,transparent 1px);
  background-size:56px 56px;
  background-position:center top;
}
.gear-banner-in{
  position:relative;z-index:1;
  max-width:1120px;margin:0 auto;padding:96px 32px 0;
}
.gear-strip{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px;
  padding:22px 36px 22px 32px;border-radius:0;
  background:
    radial-gradient(ellipse 70% 150% at 88% 50%,rgba(184,145,61,.18) 0%,transparent 62%),
    linear-gradient(105deg,#FDFAF2 0%,#F8EFDA 55%,#F1E2C2 100%);
  border:1.5px solid var(--gold);
  box-shadow:
    0 22px 48px -16px rgba(10,30,60,.65),
    0 0 0 1px rgba(6,15,30,.4),
    0 0 0 5px rgba(201,162,84,.2),
    0 0 40px rgba(201,162,84,.22),
    inset 0 0 0 1px rgba(255,255,255,.7);
}
/* 四隅の金枠アクセント */
.gear-strip .corner{
  position:absolute;width:22px;height:22px;border-color:var(--gold-deep);border-style:solid;
  z-index:2;pointer-events:none;
}
.gear-strip .c1{top:9px;left:9px;border-width:2px 0 0 2px;}
.gear-strip .c2{top:9px;right:9px;border-width:2px 2px 0 0;}
.gear-strip .c3{bottom:9px;left:9px;border-width:0 0 2px 2px;}
.gear-strip .c4{bottom:9px;right:9px;border-width:0 2px 2px 0;}
/* 装飾：斜めゴールドの光と細かいドット */
.gear-strip::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 1px 1px,rgba(143,110,39,.28) 1px,transparent 0) 0 0/18px 18px;
  -webkit-mask-image:linear-gradient(105deg,#000 0%,transparent 46%);
  mask-image:linear-gradient(105deg,#000 0%,transparent 46%);
}
/* きらめき：ゆっくり流れる光の帯 */
.gear-strip::after{
  content:"";position:absolute;top:-40%;left:-45%;width:30%;height:180%;
  transform:rotate(16deg);pointer-events:none;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55) 45%,rgba(201,162,84,.25) 55%,transparent);
  animation:gearShine 5.2s ease-in-out infinite;
}
@keyframes gearShine{
  0%,58%{left:-45%;}
  100%{left:125%;}
}
@media(prefers-reduced-motion:reduce){.gear-strip::after{animation:none;}}
/* 左：0円のエンブレム */
.gear-emblem{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:104px;height:104px;flex-shrink:0;border-radius:50%;
  background:linear-gradient(160deg,#FFFFFF 0%,#F7F1E4 100%);
  border:1.5px solid var(--gold);
  box-shadow:0 0 0 5px rgba(201,162,84,.14),0 6px 18px -8px rgba(10,30,60,.2);
}
.gear-emblem .num{
  font-family:"Zen Old Mincho",serif;font-weight:900;line-height:.9;
  font-size:46px;color:var(--gold-deep);letter-spacing:-.02em;
}
.gear-emblem .yen{
  font-family:"Zen Old Mincho",serif;font-size:18px;color:var(--gold-deep);margin-top:2px;
}
.gear-emblem .rim{
  position:absolute;inset:6px;border-radius:50%;
  border:1px dashed rgba(143,110,39,.35);
}
/* 中央：テキスト */
.gear-text{position:relative;z-index:1;min-width:0;color:var(--ink);text-align:left;}
.gear-text .cx-ribbon{margin:0 0 11px 16px;}
.gear-text h3{
  font-family:"Zen Old Mincho",serif;font-weight:700;color:var(--navy);
  font-size:clamp(18px,2vw,25px);line-height:1.5;letter-spacing:.03em;
}
.gear-text h3 .free{
  color:var(--terracotta);
  background:linear-gradient(transparent 84%,rgba(201,162,84,.55) 84%);
  padding:0 2px;
}
.gear-list{
  margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;
}
.gear-list li{
  font-size:11.5px;font-weight:500;color:var(--navy);
  background:rgba(255,255,255,.6);border:1px solid rgba(184,145,61,.45);
  padding:4px 11px;border-radius:99px;white-space:nowrap;
}
.gear-list li::before{
  content:"✓";color:var(--gold-deep);font-weight:700;margin-right:5px;
}
/* 右：機材写真＋その手前に小さめCTA */
.gear-action{
  position:relative;z-index:1;flex-shrink:0;
  width:380px;min-height:96px;align-self:stretch;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
}
.gear-shot{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.6);
  width:380px;max-width:none;height:auto;z-index:0;pointer-events:none;
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));
  -webkit-mask-image:radial-gradient(ellipse 74% 88% at 50% 46%,#000 62%,transparent 92%);
  mask-image:radial-gradient(ellipse 74% 88% at 50% 46%,#000 62%,transparent 92%);
}
.gear-action .btn,
.gear-action .gear-cta{
  position:relative;z-index:1;
  padding:11px 28px;font-size:13px;white-space:nowrap;
  color:#fff;
  background:linear-gradient(135deg,var(--gold-lt) 0%,var(--gold) 48%,var(--gold-deep) 100%);
  border:1.5px solid var(--gold-deep);
  box-shadow:0 8px 20px -6px rgba(143,110,39,.45);
}
.gear-action .gear-cta:hover{opacity:.92;}
.gear-action .cap{
  position:relative;z-index:1;font-size:10px;color:var(--ink-weak);letter-spacing:.04em;
  text-shadow:0 1px 4px rgba(255,250,238,.9);
}
.gear-more{
  position:relative;z-index:1;
  font-size:11.5px;font-weight:700;color:var(--gold-deep);text-decoration:none;
  letter-spacing:.06em;border-bottom:1px solid rgba(143,110,39,.5);padding-bottom:1px;
}
.gear-more:hover{color:var(--terracotta);border-color:var(--terracotta);}
@media(max-width:1100px){
  .gear-action{width:290px;}
  .gear-shot{width:290px;transform:translate(-50%,-50%) scale(1.3);}
}
@media(max-width:860px){
  .gear-strip{grid-template-columns:auto 1fr;gap:18px 22px;padding:22px 24px;}
  .gear-action{
    grid-column:1 / -1;width:100%;min-height:0;
    flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:8px;
  }
  .gear-shot{
    position:relative;left:auto;top:auto;transform:none;
    width:min(220px,44vw);
    -webkit-mask-image:none;mask-image:none;
  }
  .gear-emblem{width:88px;height:88px;}
  .gear-emblem .num{font-size:38px;}
}
@media(max-width:520px){
  .gear-banner{padding:24px 0;margin-top:-48px;}
  .gear-banner-in{padding-top:88px;}
  .gear-strip{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;}
  .gear-text{text-align:center;}
  .gear-text .cx-ribbon{margin-left:auto;margin-right:auto;padding:0 4px;}
  .gear-list{justify-content:center;}
  .gear-action{flex-direction:column;}
  .gear-strip::before{-webkit-mask-image:linear-gradient(180deg,#000,transparent 60%);mask-image:linear-gradient(180deg,#000,transparent 60%);}
}

/* ---- 機能マップ ---- */
.map-sec{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;text-align:center;padding:120px 0 130px;
}
/* ヒーロー〜バナーから続くグリッド：上部だけ残し、下へフェードアウト */
.map-sec::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(143,180,224,.07) 1px,transparent 1px),
    linear-gradient(180deg,rgba(143,180,224,.07) 1px,transparent 1px);
  background-size:56px 56px;
  background-position:center top;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 38%);
  mask-image:linear-gradient(180deg,#000 0%,transparent 38%);
}
.map-sec > *{position:relative;z-index:1;}
.map-sec h2{color:#fff;}
.map-sec h2 .huge{
  font-size:78px;color:var(--gold-lt);vertical-align:-6px;letter-spacing:0;
  padding:0 6px;
}
.map-sec .sub{margin:18px auto 0;color:#C3D3E8;font-size:14.5px;max-width:520px;}
.map-scroll{overflow-x:auto;max-width:100%;margin-top:56px;-webkit-overflow-scrolling:touch;}
.map-svg{min-width:900px;width:100%;height:auto;display:block;}
.core-ring{
  transform-box:fill-box;transform-origin:center;
  animation:spin 60s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.core-ring{animation:none;}}
.map-caption{margin-top:34px;font-size:12px;color:#8FA6C4;letter-spacing:.08em;}

/* ---- アニメーション（クラスベース） ---- */

/* 初期状態 */
.map-svg path{stroke-dasharray:1000;stroke-dashoffset:1000;opacity:0;}
.map-svg .branch line{stroke-dasharray:600;stroke-dashoffset:600;opacity:0;}
.map-svg .devline line{opacity:0;}
.map-svg circle[r="2.5"]{
  opacity:0;transform:scale(0);
  transform-origin:center;transform-box:fill-box;
}
.map-svg text{opacity:0;}
.map-svg rect{opacity:0;}

/* 1. 幹線：コアから放射（0〜0.5s） */
.map-svg.active path{
  opacity:1;
  animation:drawLine .5s cubic-bezier(.4,0,.2,1) forwards;
}
/* 2. 柱ノード（0.45s） */
.map-svg.active rect{
  animation:fadeInText .35s ease-out forwards;
  animation-delay:.45s;
}
/* 3. 支線：柱から広がる（0.5〜0.9s） */
.map-svg.active .branch line{
  opacity:1;
  animation:drawLine .4s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:.5s;
}
/* 4. ノード出現→継続的な輝き */
.map-svg.active circle[r="2.5"]{
  animation:
    nodeBloom .45s cubic-bezier(.34,1.56,.64,1) forwards,
    nodeShine 2.4s ease-in-out infinite;
  animation-delay:.85s, 1.35s;
}
.map-svg.active circle[r="2.5"]:nth-child(8n+1){animation-delay:.85s, 1.35s;}
.map-svg.active circle[r="2.5"]:nth-child(8n+3){animation-delay:.85s, 1.6s;}
.map-svg.active circle[r="2.5"]:nth-child(8n+5){animation-delay:.85s, 1.85s;}
.map-svg.active circle[r="2.5"]:nth-child(8n+7){animation-delay:.85s, 2.1s;}
/* 5. 開発中の破線 */
.map-svg.active .devline line{
  animation:fadeInText .4s ease-out forwards;
  animation-delay:1.0s;
}
/* 6. 機能名 */
.map-svg.active text{
  animation:fadeInText .35s ease-out forwards;
  animation-delay:1.15s;
}

@keyframes drawLine{to{stroke-dashoffset:0;}}
@keyframes nodeBloom{
  0%{opacity:0;transform:scale(0);filter:drop-shadow(0 0 16px rgba(201,162,84,1));}
  50%{filter:drop-shadow(0 0 12px rgba(201,162,84,.8));}
  100%{
    opacity:1;transform:scale(1.15);
    fill:#E8C978;
    filter:
      drop-shadow(0 0 2px rgba(255,244,200,.9))
      drop-shadow(0 0 6px rgba(201,162,84,.75));
  }
}
@keyframes nodeShine{
  0%, 100%{
    opacity:1;
    transform:scale(1.1);
    fill:#C9A254;
    filter:
      drop-shadow(0 0 1.5px rgba(255,244,200,.7))
      drop-shadow(0 0 5px rgba(201,162,84,.55))
      drop-shadow(0 0 10px rgba(201,162,84,.3));
  }
  50%{
    opacity:1;
    transform:scale(1.55);
    fill:#FFF3C4;
    filter:
      drop-shadow(0 0 3px rgba(255,255,255,.95))
      drop-shadow(0 0 8px rgba(255,236,170,1))
      drop-shadow(0 0 16px rgba(201,162,84,.95))
      drop-shadow(0 0 28px rgba(201,162,84,.55));
  }
}
@keyframes fadeInText{from{opacity:0;}to{opacity:1;}}
.map-svg .core-logo{opacity:1;}
.map-svg.active .core-logo{animation:none;}

@media(prefers-reduced-motion:reduce){
  .map-svg path,.map-svg .branch line,.map-svg .devline line,
  .map-svg circle[r="2.5"],.map-svg text,.map-svg rect{
    opacity:1;transform:none;stroke-dashoffset:0;animation:none;
  }
  .map-svg circle[r="2.5"]{
    fill:#E8C978;
    filter:
      drop-shadow(0 0 2px rgba(255,244,200,.85))
      drop-shadow(0 0 8px rgba(201,162,84,.7));
  }
}

/* ---- マップステージ（SVG＋デバイスの合成レイヤー） ---- */
.map-stage{position:relative;overflow:hidden;}
.map-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block;min-width:0;}
.map-stage-d{min-width:900px;aspect-ratio:1100/690;}
.map-stage-m{display:none;aspect-ratio:420/1660;max-width:440px;margin:0 auto;overflow:hidden;}
@media(max-width:720px){
  .map-sec{overflow:visible;}
  .map-sec .map-scroll{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    overflow:visible;
    -webkit-overflow-scrolling:auto;
  }
  .map-stage{overflow:visible;}
  .map-stage-d{display:none;}
  .map-stage-m{display:block;overflow:visible;}
}

/* ---- CSS製デバイスモックアップ ---- */
.device{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  opacity:0;
  z-index:2;
}
.d-tilt{
  transform:perspective(1400px) rotateX(var(--rx,5deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));
  animation:floaty 7s ease-in-out infinite alternate;
  animation-delay:var(--fd,0s);
}
@keyframes floaty{from{transform:perspective(1400px) rotateX(var(--rx,5deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) translateY(-5px);}to{transform:perspective(1400px) rotateX(var(--rx,5deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg)) translateY(5px);}}

.d-body{
  position:relative;width:100%;
  background:linear-gradient(155deg,#152B4C,#0B1830 60%);
  border:1px solid rgba(201,162,84,.55);
  box-shadow:
    0 40px 70px -20px rgba(3,10,24,.75),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.1) inset;
}
.iphone .d-body{aspect-ratio:9/18.6;border-radius:14% / 6.8%;padding:5% 4.5%;}
.ipad .d-body{aspect-ratio:59/41;border-radius:5% / 6.6%;padding:2.8%;}
.d-screen{
  position:relative;width:100%;height:100%;
  background:#132C4F;border:1px dashed #3D5A82;
  border-radius:inherit;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#9FB8D6;font-size:10.5px;line-height:1.7;padding:10%;
  letter-spacing:.04em;
}
.iphone .d-screen{border-radius:11% / 5.4%;}
.ipad .d-screen{border-radius:3.4% / 4.4%;}
/* スクショ差込 */
.d-screen--shot{
  padding:0;background:none;border:none;display:block;
  overflow:hidden;isolation:isolate;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.26),
    inset 0 0 28px rgba(150,195,255,.09),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 16px rgba(201,162,84,.18),
    0 0 36px -6px rgba(100,160,255,.2);
}
.d-screen--shot::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(201,162,84,.14);
  background:radial-gradient(ellipse 90% 80% at 50% 42%,transparent 50%,rgba(201,162,84,.05) 100%);
}
.d-screen--shot .d-shot{
  width:100%;height:100%;object-fit:fill;display:block;border-radius:inherit;
}
.hero-phone .d-screen.d-screen--shot{padding:0;}
.device.teaser .d-screen.d-screen--shot{
  display:block;padding:0;
}
.device.teaser .d-screen .d-shot{
  position:relative;inset:auto;width:100%;height:100%;object-fit:fill;z-index:0;border-radius:inherit;
}
.device.teaser .d-screen::before{z-index:2;}
.d-screen.theme-washoku.d-screen--shot,
.d-screen.theme-bar.d-screen--shot,
.d-screen.theme-cafe.d-screen--shot{background:none;border:none;}
/* ガラスの反射 */
.d-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:3;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 24%,transparent 42%);
}
.d-screen--shot::after{
  background:linear-gradient(115deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 26%,transparent 44%);
}
.device.teaser .d-screen.d-screen--shot::after{
  background:
    linear-gradient(180deg,rgba(10,21,38,.06) 0%,rgba(10,21,38,.38) 100%),
    linear-gradient(115deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.06) 26%,transparent 44%);
}
/* iPhoneのダイナミックアイランド */
.iphone .island{
  position:absolute;top:3%;left:50%;transform:translateX(-50%);
  width:30%;height:2.6%;background:#050B16;border-radius:99px;z-index:3;
  border:1px solid rgba(201,162,84,.25);
}
/* 銘板（柱の名前） */
.dname{
  position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:3;
  font-family:"Zen Old Mincho",serif;font-size:11px;font-weight:700;
  color:#EADFC4;background:rgba(8,20,38,.88);
  border:1px solid rgba(201,162,84,.65);
  padding:2px 12px;letter-spacing:.12em;white-space:nowrap;border-radius:2px;
}
.ipad .dname{bottom:5.5%;}

/* デバイスのサイズ（ステージ比率で拡縮） */
.map-stage-d .iphone{width:10%;}
.map-stage-d .ipad{width:21%;}
.map-stage-m .iphone{width:52%;}
.map-stage-m .ipad{width:81%;}
.map-stage-m .d-screen:not(.d-screen--shot){font-size:11px;padding:9%;}
.map-stage-m .d-screen.d-screen--shot{padding:0;}
.map-stage-m .dname{display:none;} /* 柱名はタイムライン側に表示するため銘板は不使用 */

/* マップ：4モック内側のマスコット */
.map-mascot{
  position:absolute;
  z-index:3;
  width:clamp(88px,10.5%,138px);
  height:auto;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 10px 18px rgba(3,10,24,.45));
}
.map-stage.active .map-mascot{
  animation:mapMascotIn .55s cubic-bezier(.3,1.25,.5,1) forwards;
}
.map-stage.active .map-mascot--mo{animation-delay:.65s;}
.map-stage.active .map-mascot--pos{animation-delay:.75s;}
.map-stage.active .map-mascot--ledger{animation-delay:.85s;}
.map-stage.active .map-mascot--page{animation-delay:.95s;}
@keyframes mapMascotIn{
  from{opacity:0;transform:translate(-50%,-42%) scale(.82);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}

/* デスクトップ：コア側（内側）に寄せてモックと重ねる */
.map-stage-d .map-mascot--mo{left:31%;top:29%;}
.map-stage-d .map-mascot--pos{left:69%;top:29%;}
.map-stage-d .map-mascot--ledger{left:31%;top:67%;}
.map-stage-d .map-mascot--page{left:69%;top:67%;}

/* モバイル：タイムライン中央寄り＝端末の内側 */
.map-stage-m .map-mascot{
  width:clamp(92px,26vw,128px);
}
.map-stage-m .map-mascot--mo{left:72%;top:17.5%;}
.map-stage-m .map-mascot--pos{left:28%;top:41%;}
.map-stage-m .map-mascot--ledger{left:72%;top:64.5%;}
.map-stage-m .map-mascot--page{left:28%;top:85%;}

@media(prefers-reduced-motion:reduce){
  .map-stage .map-mascot,
  .map-stage.active .map-mascot{
    opacity:1;transform:translate(-50%,-50%);animation:none;
  }
}
/* 背骨の描画を上から順に */
.map-svg-m.active path:nth-of-type(1){animation-delay:0s;}
.map-svg-m.active path:nth-of-type(2){animation-delay:.1s;}
.map-svg-m.active path:nth-of-type(3){animation-delay:.2s;}
.map-svg-m.active path:nth-of-type(4){animation-delay:.3s;}
.map-svg-m.active path:nth-of-type(5){animation-delay:.4s;}
/* タイムライン結節点 */
.map-svg circle.pnode{opacity:0;transform:scale(0);transform-origin:center;transform-box:fill-box;}
.map-svg.active circle.pnode{animation:nodeBloom .4s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:.6s;}

/* 花火シーケンスへの参加：柱のタイミングで着地 */
.map-stage.active .device{
  animation:deviceIn .5s cubic-bezier(.3,1.3,.5,1) forwards;
  animation-delay:.5s;
}
@keyframes deviceIn{
  from{opacity:0;transform:translate(-50%,-42%) scale(.88);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
/* ---- ティザーデバイス（開発中機能） ---- */
.device.teaser .d-body{
  background:#07101F;
  border-color:rgba(201,162,84,.8);
  animation:teaserGlow 3.2s ease-in-out infinite;
}
@keyframes teaserGlow{
  0%,100%{box-shadow:0 30px 60px -20px rgba(3,10,24,.75),0 0 20px rgba(201,162,84,.12);}
  50%{box-shadow:0 30px 60px -20px rgba(3,10,24,.75),0 0 46px rgba(201,162,84,.45);}
}
.device.teaser .d-screen{
  flex-direction:column;gap:6px;
  background:
    radial-gradient(closest-side at 50% 42%,rgba(201,162,84,.30),rgba(201,162,84,.06) 58%,transparent 78%),
    #0A1526;
  border:1px solid rgba(201,162,84,.35);
}
/* ベール越しの光のスイープ */
.device.teaser .d-screen::before{
  content:"";position:absolute;top:-30%;left:-70%;width:45%;height:160%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent);
  transform:rotate(8deg);
  animation:sweep 4.5s ease-in-out infinite;
}
@keyframes sweep{0%,55%{left:-70%;}100%{left:140%;}}
.device.teaser .dname{display:none;}
/* 破線をエネルギーが流れる */
.map-svg.active .devline line{
  animation:fadeInText .4s ease-out 1.0s forwards,dashFlow 1.4s linear 1.45s infinite;
}
@keyframes dashFlow{to{stroke-dashoffset:-24;}}

@media(prefers-reduced-motion:reduce){
  .device{opacity:1;}
  .d-tilt,.device.teaser .d-body,.device.teaser .d-screen::before{animation:none;}
  .map-stage.active .device{animation:none;}
  .map-svg.active .devline line{animation:fadeInText .4s ease-out 1.0s forwards;}
}

/* ---- 4つの柱 ---- */
.pillars{background:#fff;padding-bottom:40px;}
.pillars-head{
  margin:0 0 36px;
}
.pillars-head .eyebrow{margin-bottom:10px;}
.pillars-head h2{margin:0;}
.pillars-lead{
  margin:16px 0 0;max-width:none;
  font-size:14.5px;line-height:1.9;color:var(--ink-weak);
}
.pillars-rule{
  display:block;width:100%;height:2px;margin-top:28px;
  background:linear-gradient(90deg,var(--gold-lt) 0%,var(--gold) 45%,var(--gold-deep) 100%);
  border-radius:1px;
}
.pillar{
  display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;
  padding:78px 0;border-bottom:1px solid var(--blue-line);
}
.pillar:has(+ .pillars-foot){border-bottom:none;}
.pillars-foot{
  margin-top:36px;padding-bottom:18px;border-bottom:1px solid var(--blue-line);
}
.pillars-footnote{
  margin:0;font-size:9px;line-height:1.4;color:var(--ink-weak);opacity:.5;letter-spacing:.03em;
}
/* 偶数番目の「柱」だけビジュアルを右へ（見出しマスコット等は除外） */
.pillar:nth-child(even of .pillar) .p-visual{order:2;}
.p-visual .ph{min-height:340px;}
.p-label{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:7px;margin:0;
}
.p-label .no{
  font-family:"Cormorant Garamond",serif;
  font-size:28px;font-weight:600;letter-spacing:.12em;
  color:var(--gold-deep);line-height:1;
  font-variant-numeric:lining-nums;
}
.p-name{
  display:inline-block;
  font-size:15px;font-weight:700;letter-spacing:.1em;
  color:#fff;line-height:1.2;
  background:linear-gradient(135deg,var(--gold-lt) 0%,var(--gold) 48%,var(--gold-deep) 100%);
  border:none;
  padding:7px 13px;
  border-radius:2px;
}
.p-name-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.p-head{
  display:flex;align-items:flex-end;gap:8px 14px;
  margin:14px 0 16px;max-width:480px;
}
.pillar h3{
  font-family:"Zen Old Mincho",serif;font-weight:700;font-size:30px;
  line-height:1.55;letter-spacing:.04em;margin:0;flex:1 1 auto;min-width:0;
}
.p-mascot{
  flex:0 0 auto;
  width:clamp(64px,8vw,88px);height:auto;display:block;
  margin-bottom:-6px;margin-right:-4px;
  filter:drop-shadow(0 10px 18px rgba(10,30,60,.14));
  pointer-events:none;user-select:none;
}
.pillar:nth-child(even of .pillar) .p-mascot{margin-right:0;}
.pillar p{color:var(--ink-weak);font-size:14.5px;max-width:440px;}
.p-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.p-chips span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;line-height:1;
  color:#fff;
  padding:6px 13px;border-radius:2px;
  background:linear-gradient(135deg,var(--blue) 0%,var(--navy-2) 100%);
  border:1px solid rgba(46,111,183,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 4px 10px -6px rgba(10,30,60,.4);
}
.p-chips span::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--gold-lt);
  box-shadow:0 0 4px rgba(201,162,84,.6);
}
.p-more{
  display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  font-size:14px;font-weight:700;color:var(--navy);text-decoration:none;
  letter-spacing:.06em;border-bottom:1px solid var(--gold);padding-bottom:6px;
}
.p-more::after{content:"→";color:var(--gold-deep);transition:transform .2s;}
.p-more:hover::after{transform:translateX(4px);}
.p-more-row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;}
.p-more-sub{
  font-size:13px;font-weight:500;color:var(--ink-weak);
  border-bottom-color:var(--blue-line);
}
.p-more-sub::after{color:var(--ink-weak);}

/* ---- 壱-b タブレットオーダー案内バナー（柱1に添えるミニバナー） ---- */
.tob{
  grid-column:1/-1;
  position:relative;overflow:hidden;display:flex;align-items:center;gap:24px;
  margin-top:36px;padding:26px 34px;border-radius:4px;text-decoration:none;
  background:var(--navy);
  border:1px solid rgba(255,255,255,.12);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.tob::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,
    var(--navy) 0%,
    var(--navy) 42%,
    var(--navy-2) 68%,
    #1a3558 100%);
}
.tob-body,
.tob-media,
.tob .corner{position:relative;z-index:1;}
.tob:hover{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 14px 28px -18px rgba(10,30,60,.3);
}
/* 四隅の金枠アクセント（料金カードと共通の意匠） */
.tob .corner{position:absolute;width:16px;height:16px;border-color:var(--gold);border-style:solid;z-index:2;}
.tob .c1{top:8px;left:8px;border-width:1.5px 0 0 1.5px;}
.tob .c2{top:8px;right:8px;border-width:1.5px 1.5px 0 0;}
.tob .c3{bottom:8px;left:8px;border-width:0 0 1.5px 1.5px;}
.tob .c4{bottom:8px;right:8px;border-width:0 1.5px 1.5px 0;}
.tob-body{flex:1 1 auto;min-width:0;}
.tob .p-label .no{color:var(--gold-lt);}
.tob-title{
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:clamp(18px,2vw,22px);line-height:1.4;letter-spacing:.03em;color:#fff;
  margin:14px 0 0;
}
.tob-sub{
  margin:8px 0 0;font-size:13.5px;color:rgba(255,255,255,.72);letter-spacing:.02em;
}
.tob-em{color:var(--gold-lt);font-weight:700;}
.tob-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-size:12.5px;font-weight:700;color:var(--gold-lt);letter-spacing:.04em;
  border-bottom:1px solid var(--gold);padding-bottom:3px;
}
.tob-more::after{content:"→";transition:transform .2s;}
.tob:hover .tob-more::after{transform:translateX(3px);}
.tob-media{flex:none;width:190px;position:relative;align-self:stretch;overflow:visible;}
.tob-device{
  position:absolute;left:10%;top:78%;
  /* .device のデフォルト(position:absolute;transform:translate(-50%,-50%);opacity:0)を上書き */
  /* ヒーローのタブレットと同じ手法：大きめのrotateY＋perspectiveで奥行きのある斜めを作り、
     .tob の overflow:hidden で上下だけを意図的に見切れさせる（下寄り配置で下側を大きく見切れさせる） */
  transform:translate(-50%,-50%) perspective(900px) rotateY(-52deg) rotateX(10deg);
  transform-style:preserve-3d;opacity:1;
  width:480px;filter:drop-shadow(0 18px 30px rgba(10,30,60,.25));
}
.tob-device .d-tilt{transform:none;}
.tob-device .d-body{transform-style:preserve-3d;}
.tob-vid{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
@media(max-width:640px){
  .tob{
    flex-wrap:wrap;padding:24px 22px;
  }
  .tob::before{
    background:linear-gradient(180deg,
      var(--navy) 0%,
      var(--navy) 40%,
      var(--navy-2) 70%,
      #1a3558 100%);
  }
  .tob-body{width:100%;}
  .tob-media{width:100%;margin:0 auto;height:140px;}
  .tob-device{left:50%;top:50%;width:230px;}
}
@media(prefers-reduced-motion:reduce){
  .tob-device .d-tilt{animation:none;}
}

/* ---- 比較（1枚バンド） ---- */
.compare{background:var(--blue-pale);}
.compare-in{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.compare-in .ph{min-height:300px;}
.compare h2{margin-bottom:8px;}
.cmp-line{display:flex;align-items:baseline;gap:14px;margin-top:26px;flex-wrap:wrap;}
.cmp-line .old{
  font-family:"Zen Old Mincho",serif;font-size:26px;color:var(--ink-weak);
  text-decoration:line-through;text-decoration-color:var(--gold);text-decoration-thickness:2px;
}
.cmp-line .new{font-family:"Zen Old Mincho",serif;font-size:clamp(26px,3.2vw,36px);font-weight:700;color:var(--navy);line-height:1.35;}
.cmp-line .new b{color:var(--terracotta-deep);}
.cmp-note{
  margin-top:16px;max-width:36em;
  font-size:11px;line-height:1.75;color:var(--ink-weak);letter-spacing:.02em;
}

/* ---- NEXT ティザー ---- */
.next{background:var(--navy);color:#fff;}
.next h2{color:#fff;}
.next .lead{color:#C3D3E8;font-size:14.5px;margin-top:16px;max-width:560px;}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px;}
.next-card{
  position:relative;border:1px dashed rgba(201,162,84,.55);
  padding:44px 40px;background:rgba(255,255,255,.025);
}
.next-card .badge{
  position:absolute;top:-13px;left:36px;background:var(--navy);
  color:var(--gold-lt);border:1px solid var(--gold);font-size:11px;
  font-weight:700;letter-spacing:.2em;padding:4px 16px;
}
.next-card .ph{height:190px;margin-bottom:28px;}
.next-card h3{font-family:"Zen Old Mincho",serif;font-size:22px;margin-bottom:10px;}
.next-card h3 small{
  font-size:12px;color:var(--gold-lt);font-family:"Noto Sans JP";
  font-weight:700;letter-spacing:.14em;margin-left:14px;vertical-align:2px;
}
.next-card p{font-size:13.5px;color:#B9C9DE;}

/* ---- 料金 ---- */
.pricing{background:#fff;text-align:center;}
.price-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;
  max-width:960px;margin:48px auto 0;
}
.price-card{
  background:var(--navy);color:#fff;
  padding:32px 28px;position:relative;
  display:flex;flex-direction:column;text-align:left;
  min-width:0;
}
.price-card .corner{position:absolute;width:18px;height:18px;border-color:var(--gold);border-style:solid;}
.price-card .c1{top:8px;left:8px;border-width:1.5px 0 0 1.5px;}
.price-card .c2{top:8px;right:8px;border-width:1.5px 1.5px 0 0;}
.price-card .c3{bottom:8px;left:8px;border-width:0 0 1.5px 1.5px;}
.price-card .c4{bottom:8px;right:8px;border-width:0 1.5px 1.5px 0;}
.price-card .cap{font-size:11px;letter-spacing:.22em;color:var(--gold-lt);font-weight:700;}
.price-card .num{
  font-family:"Zen Old Mincho",serif;font-size:clamp(34px,4vw,44px);font-weight:700;margin:8px 0 0;
}
.price-card .num small{font-size:13px;font-weight:400;color:#C3D3E8;}
.price-card .init{font-size:12px;color:#8FA6C4;line-height:1.6;margin-top:2px;}
.price-feat{
  margin-top:16px;padding-top:14px;
  border-top:1px solid rgba(184,145,61,.35);
  text-align:left;
}
.price-feat-label{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--gold-lt);
  margin-bottom:8px;
}
.price-feat-ask{
  font-size:10px;font-weight:600;letter-spacing:.02em;color:#8FA6C4;
}
.price-card .incl{
  display:block;margin:0;
  font-size:12.5px;line-height:1.85;color:#C3D3E8;
}
.price-card .incl span{
  display:inline;padding:0;border:none;border-radius:0;
  font-size:inherit;color:inherit;background:none;
}
.price-card .incl span:not(:last-child)::after{
  content:" ／ ";
  color:rgba(201,162,84,.55);
}
.price-card .incl--opt{color:#E8D7A8;}
.price-card .incl--opt span:not(:last-child)::after{color:rgba(201,162,84,.45);}
.price-feat--opt{margin-top:14px;padding-top:14px;}
.price-cta{
  margin-top:auto;padding-top:20px;
  display:flex;flex-direction:column;gap:10px;width:100%;
}
.price-card .btn{
  margin:0;width:100%;text-align:center;box-sizing:border-box;
  padding:12px 24px;font-size:13px;
}
.price-note{
  margin:0;
  font-size:10.5px;line-height:1.5;color:#8FA6C4;letter-spacing:.02em;
  text-align:left;
}

/* エンタープライズ：金グラデカード */
.price-card--enterprise{
  color:var(--navy);
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%,rgba(255,255,255,.35) 0%,transparent 55%),
    linear-gradient(145deg,var(--gold-lt) 0%,var(--gold) 42%,var(--gold-deep) 100%);
  box-shadow:0 14px 32px -16px rgba(143,110,39,.4);
}
.price-card--enterprise .corner{border-color:rgba(10,30,60,.5);}
.price-card--enterprise .cap{color:rgba(10,30,60,.72);}
.price-card--enterprise .num{color:var(--navy);}
.price-card--enterprise .init{color:rgba(10,30,60,.7);}
.price-ent-tag{
  margin:2px 0 6px;
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--navy);
}
.price-card--enterprise .price-feat{
  border-top-color:rgba(10,30,60,.2);
}
.price-card--enterprise .price-feat-label{color:rgba(10,30,60,.7);}
.ent-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.ent-list li{
  position:relative;padding-left:14px;
  font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.45;
}
.ent-list li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;
  background:var(--navy);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.price-ent-btn{
  background:var(--navy);color:#fff;
  border:1.5px solid rgba(10,30,60,.85);
}
.price-ent-btn:hover{opacity:.92;}

.price-sub{margin-top:22px;font-size:12.5px;color:var(--ink-weak);}
.price-sub a{color:var(--blue);}

@media(max-width:860px){
  .price-cards{
    display:flex;gap:14px;
    max-width:none;margin:40px -16px 0;
    padding:4px 16px 10px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .price-cards::-webkit-scrollbar{display:none;}
  .price-card{
    flex:0 0 min(84vw,380px);
    scroll-snap-align:center;
    padding:28px 22px;
  }
  .price-card .btn{width:100%;}
}

/* ---- 料金セクション：キャンペーン再案内 ---- */
.price-campaign{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:26px;
  max-width:680px;margin:36px auto 0;padding:20px 30px;border-radius:0;
  text-align:left;text-decoration:none;
  background:
    radial-gradient(ellipse 70% 150% at 88% 50%,rgba(184,145,61,.16) 0%,transparent 62%),
    linear-gradient(105deg,#FDFAF2 0%,#F8EFDA 55%,#F1E2C2 100%);
  border:1.5px solid var(--gold);
  box-shadow:
    0 14px 34px -14px rgba(10,30,60,.35),
    0 0 0 4px rgba(201,162,84,.14),
    inset 0 0 0 1px rgba(255,255,255,.7);
  transition:box-shadow .25s ease,transform .25s ease;
}
.price-campaign:hover{
  transform:translateY(-2px);
  box-shadow:
    0 20px 40px -14px rgba(10,30,60,.4),
    0 0 0 4px rgba(201,162,84,.24),
    inset 0 0 0 1px rgba(255,255,255,.7);
}
.price-campaign::after{
  content:"";position:absolute;top:-40%;left:-45%;width:26%;height:180%;
  transform:rotate(16deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 45%,rgba(201,162,84,.2) 55%,transparent);
  animation:gearShine 5.2s ease-in-out infinite;
  animation-delay:1.4s;
}
@media(prefers-reduced-motion:reduce){.price-campaign::after{animation:none;}}
.pcp-emblem{
  position:relative;flex-shrink:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;
  background:linear-gradient(160deg,#FFFFFF 0%,#F7F1E4 100%);
  border:1.5px solid var(--gold);
  box-shadow:0 0 0 4px rgba(201,162,84,.16),0 4px 14px -6px rgba(10,30,60,.18);
}
.pcp-emblem .num{
  font-family:"Zen Old Mincho",serif;font-weight:900;line-height:.9;
  font-size:30px;color:var(--gold-deep);letter-spacing:-.02em;
}
.pcp-emblem .yen{font-family:"Zen Old Mincho",serif;font-size:13px;color:var(--gold-deep);}
.pcp-body{flex:1;min-width:0;position:relative;z-index:1;}
.pcp-body .cx-ribbon{margin:0 0 8px 16px;}
.pcp-title{
  display:block;
  font-family:"Zen Old Mincho",serif;font-weight:700;color:var(--navy);
  font-size:clamp(15px,1.8vw,19px);line-height:1.5;letter-spacing:.02em;
}
.pcp-title b{color:var(--terracotta);}
.pcp-sub{display:block;margin-top:4px;font-size:12px;color:var(--ink-weak);line-height:1.7;}
.pcp-shot{
  position:absolute;right:-8%;top:50%;z-index:0;
  width:300px;max-width:none;height:auto;
  transform:translateY(-50%) scale(1.15);
  filter:drop-shadow(0 12px 22px rgba(10,30,60,.3));
  pointer-events:none;
}
.pcp-more{
  position:relative;z-index:1;flex-shrink:0;align-self:center;white-space:nowrap;
  padding:11px 22px;font-size:13px;font-weight:700;letter-spacing:.06em;
  color:#fff;
  background:linear-gradient(135deg,var(--gold-lt) 0%,var(--gold) 48%,var(--gold-deep) 100%);
  border:1.5px solid var(--gold-deep);
  box-shadow:0 8px 20px -6px rgba(143,110,39,.45);
  margin-left:auto;
}
.price-campaign:hover .pcp-more{opacity:.92;}
@media(max-width:680px){
  .price-campaign{flex-wrap:wrap;justify-content:center;text-align:center;gap:14px;padding:22px 20px;}
  .pcp-body{flex:1 1 100%;}
  .pcp-body .cx-ribbon{margin-left:auto;margin-right:auto;padding:0 4px;}
  .pcp-shot{
    position:relative;right:auto;top:auto;transform:none;
    width:min(240px,70vw);margin:4px auto;
  }
  .pcp-more{flex-basis:auto;margin-left:0;}
}
.flow-strip{
  margin-top:54px;display:flex;justify-content:center;align-items:flex-start;
  gap:0;flex-wrap:wrap;font-size:13px;color:var(--ink-weak);
}
.flow-strip .f{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:150px;padding:0 12px;text-align:center;
}
.flow-strip .f-mark{
  flex-shrink:0;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 36%,#173359 0%,var(--navy) 74%);
  border:1.5px solid var(--gold);
  box-shadow:0 0 0 4px #fff,0 8px 16px -6px rgba(10,30,60,.45);
  font-family:"Cormorant Garamond","Zen Old Mincho",serif;
  font-weight:700;font-size:26px;color:var(--gold-lt);line-height:1;
  letter-spacing:.02em;
}
.flow-strip .f b{
  display:flex;align-items:center;justify-content:center;
  min-height:2.6em;margin:0;
  font-family:"Zen Old Mincho",serif;font-size:15px;font-weight:700;
  color:var(--ink);letter-spacing:.04em;line-height:1.35;
}
.flow-strip .f+.f::before{
  content:"";position:absolute;left:-10px;top:28px;width:20px;height:1px;background:var(--gold);
}
@media(max-width:640px){
  .flow-strip{gap:22px 0;}
  .flow-strip .f{width:46%;padding:0 8px;}
  .flow-strip .f+.f::before{display:none;}
  .flow-strip .f:nth-child(2n)::before{
    display:block;left:-6%;top:28px;width:12%;
  }
}

/* ---- FAQ ---- */
.faq{background:var(--blue-pale);}
.faq-list{margin-top:44px;border-top:1px solid var(--blue-line);}
.faq-item{border-bottom:1px solid var(--blue-line);padding:24px 8px;background:transparent;}
.faq-item .q{display:flex;gap:16px;font-weight:700;font-size:15px;}
.faq-item .q::before{content:"Q";font-family:"Zen Old Mincho",serif;color:var(--gold-deep);}
.faq-item .a{display:flex;gap:16px;margin-top:10px;color:var(--ink-weak);font-size:13.5px;line-height:1.9;}
.faq-item .a::before{content:"A";font-family:"Zen Old Mincho",serif;color:var(--blue);flex:none;}
.faq-item .a > span{flex:1;min-width:0;}

footer{background:#061224;color:#7E97B8;font-size:12.5px;padding:40px 0;}
.footer-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}

/* ---- フェードイン（全セクション共通・控えめ） ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}


/* ---- 1日あたり価格 ---- */
.per-day{margin-top:10px;font-size:14px;color:#C3D3E8;letter-spacing:.04em;}
.per-day b{font-family:"Zen Old Mincho",serif;color:var(--terracotta-lt);font-size:21px;}

/* ---- スマホ固定CTAバー ---- */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(10,30,60,.96);backdrop-filter:blur(8px);
  border-top:1px solid rgba(184,145,61,.5);
  padding:10px 14px;align-items:center;gap:12px;justify-content:space-between;
}
.mobile-cta .p{color:#fff;font-size:11.5px;line-height:1.5;}
.mobile-cta .p b{font-family:"Zen Old Mincho",serif;color:var(--gold-lt);font-size:16px;}
.mobile-cta .btn{padding:11px 18px;font-size:12.5px;white-space:nowrap;}
@media(max-width:960px){
  .mobile-cta{display:flex;}
  body{padding-bottom:62px;}
  .note-toggle{bottom:76px;}
}


/* ---- マップのエピローグ（COMING NEXT） ---- */
.soon-flow{
  position:relative;
  margin-top:56px;
  padding:56px 28px 52px;
  isolation:isolate;
  border-radius:8px;overflow:hidden;
  /* 暗紺のショーケース：機能マップの宇宙が続く */
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(201,162,84,.1) 0%,transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 120%,rgba(46,111,183,.14) 0%,transparent 62%),
    linear-gradient(180deg,#0B2140 0%,#08182F 58%,#0A1E3C 100%);
  border:1px solid rgba(184,145,61,.42);
  box-shadow:
    inset 0 1px 0 rgba(201,162,84,.28),
    inset 0 0 80px rgba(4,10,22,.6),
    0 34px 64px -30px rgba(0,0,0,.6);
}
/* 金の内枠（四隅を欠いた舞台の縁） */
.soon-flow::after{
  content:"";position:absolute;inset:11px;z-index:0;pointer-events:none;
  border:1px solid rgba(201,162,84,.28);border-radius:4px;
  -webkit-mask-image:
    linear-gradient(90deg,#000 0 34px,transparent 34px calc(100% - 34px),#000 calc(100% - 34px)),
    linear-gradient(180deg,#000 0 34px,transparent 34px calc(100% - 34px),#000 calc(100% - 34px));
  -webkit-mask-composite:source-over;
  mask-image:
    linear-gradient(90deg,#000 0 34px,transparent 34px calc(100% - 34px),#000 calc(100% - 34px)),
    linear-gradient(180deg,#000 0 34px,transparent 34px calc(100% - 34px),#000 calc(100% - 34px));
}
.soon-flow > *{position:relative;z-index:1;}
.soon-circles{
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);
  width:min(680px,130%);
  height:auto;
  pointer-events:none;
  z-index:0;
}
.soon-evolve{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;max-width:min(720px,94%);
  margin:0 auto 28px;padding:8px 0;
  text-align:center;position:relative;z-index:2;
  opacity:0;transform:translateY(14px);
}
.soon-evolve-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px 22px;
  width:fit-content;
  max-width:100%;
  margin:4px auto 0;
  text-align:left;
}
.soon-evolve-copy{flex:0 1 auto;min-width:0;text-align:left;}
/* 2026新機能：銀の勲章バッジ（campaignの効果バッジ流用・光なし） */
.soon-badge{
  position:relative;z-index:4;
  flex:0 0 auto;
  top:auto;right:auto;
  width:84px;height:84px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.4));
  pointer-events:none;
}
.soon-badge .ribbon{
  position:absolute;left:50%;top:66%;width:18px;height:38px;z-index:0;
  margin-left:-9px;
  background:linear-gradient(180deg,#C9A254 0%,#8F6E27 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%);
}
.soon-badge .ribbon.r1{transform:translateX(-56%) rotate(-16deg);transform-origin:50% 0;}
.soon-badge .ribbon.r2{transform:translateX(56%) rotate(16deg);transform-origin:50% 0;}
/* 外周リング：磨いた金属の光沢（コニックで光の反射を表現） */
.soon-badge .cog{
  position:absolute;inset:0;z-index:1;border-radius:50%;
  background:
    conic-gradient(from 145deg,
      #7A5E1F 0deg,#E8CE85 42deg,#FBF0C8 72deg,#C9A254 110deg,
      #8F6E27 180deg,#C9A254 232deg,#FBF0C8 288deg,#A07F30 330deg,#7A5E1F 360deg);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%);
  mask:radial-gradient(circle,transparent 63%,#000 64%);
  box-shadow:
    inset 0 0 0 1px rgba(255,247,220,.5),
    inset 0 0 8px rgba(90,70,20,.5);
}
.soon-badge .disc{
  position:absolute;inset:9px;z-index:2;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(circle at 50% 30%,#FBF0C8 0%,#E3C57F 46%,#B8913D 100%);
  border:1px solid #8F6E27;
  box-shadow:
    inset 0 2px 5px rgba(255,250,225,.85),
    inset 0 -4px 9px rgba(120,90,25,.5),
    0 0 14px rgba(201,162,84,.35);
}
.soon-badge .disc::before{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:1px solid rgba(120,90,25,.4);
  box-shadow:inset 0 1px 2px rgba(255,250,225,.6);
}
.soon-badge .b-year{
  position:relative;z-index:1;
  font-family:"Zen Old Mincho",serif;font-weight:900;
  font-size:15px;line-height:1;letter-spacing:.04em;
  color:#5C4410;
  text-shadow:0 1px 0 rgba(255,250,225,.7);
}
.soon-badge .b-label{
  position:relative;z-index:1;margin-top:2px;
  font-family:"Noto Sans JP",sans-serif;font-weight:700;
  font-size:10px;letter-spacing:.1em;line-height:1;
  color:#6B5015;
}
/* 見出し背後の金のグロー */
.soon-evolve::before{
  content:"";position:absolute;left:50%;top:50%;z-index:-1;
  width:min(640px,90vw);height:240px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(201,162,84,.16) 0%,rgba(201,162,84,.05) 45%,transparent 70%);
  pointer-events:none;
}
.soon-evolve-cap{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.3em;color:#EADFC4;
  margin:0 0 18px;
}
.soon-evolve-cap::before{content:"";width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lt));}
.soon-evolve-cap::after{content:"";width:36px;height:1px;background:linear-gradient(90deg,var(--gold-lt),transparent);}
.map-sec .soon-evolve-main,
.soon-evolve-main{
  margin:0;
  font-family:"Zen Old Mincho",serif;font-size:clamp(26px,3.8vw,44px);
  font-weight:900;letter-spacing:.1em;color:#FBF7EE;line-height:1.4;
  text-shadow:0 1px 2px rgba(4,10,22,.6),0 0 22px rgba(201,162,84,.22);
}
.soon-evolve-main .u{background:linear-gradient(transparent 84%,var(--gold) 84%);padding:0 2px;}
.soon-evolve-sub{
  margin-top:14px;font-size:clamp(13px,1.45vw,15px);color:#E8EEF4;letter-spacing:.06em;line-height:1.9;
}
.soon-evolve-sub b{color:var(--gold-lt);font-weight:700;}
.soon-flow.active .soon-evolve{
  animation:soonIn .75s cubic-bezier(.3,1.2,.5,1) .12s forwards;
}
.soon-devices{
  position:relative;
  display:flex;justify-content:center;align-items:flex-end;gap:80px;
  margin-top:18px;flex-wrap:wrap;
  padding:20px 0 8px;
}
.soon-item{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;
}
/* COMING SOON：端末モックの下に、枠なしで要素を直接表示 */
.soon-devices .device{position:static;left:auto;top:auto;transform:none;opacity:1;}
.soon-devices .soon-item--phone .iphone{width:150px;}
.soon-devices .soon-item--tablet .ipad{width:390px;}
.soon-card{
  position:relative;z-index:6;
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:16px;
  margin-top:20px;padding:0;
  background:none;border:0;box-shadow:none;
  text-align:left;text-decoration:none;color:inherit;
  transition:transform .2s;
}
a.soon-card:hover{transform:translateY(-3px);}
a.soon-card:hover .soon-card-title{color:var(--gold-lt);}
/* マスコットはテキストの右に */
.soon-mascot{
  position:relative;z-index:1;flex:0 0 auto;order:2;
  width:clamp(62px,7vw,84px);height:auto;
  pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(3,10,24,.5));
}
.soon-mascot--pc{width:clamp(66px,7.5vw,90px);}
.soon-card-body{flex:0 1 auto;min-width:0;}
/* 無料タグ：テキストの上に置く（横並びの左寄せ） */
.soon-tag{
  display:inline-block;
  font-size:12px;font-weight:700;letter-spacing:.14em;white-space:nowrap;
  padding:4px 16px;border-radius:99px;margin-bottom:8px;
}
.soon-tag--free{
  background:var(--gold);color:var(--navy);
  font-size:13px;letter-spacing:.16em;padding:5px 20px;
}
.soon-card-cap{
  font-size:9px;font-weight:700;letter-spacing:.24em;color:var(--gold-lt);
  margin-bottom:6px;
}
.soon-card-title{
  margin:0;
  font-family:"Zen Old Mincho",serif;font-size:clamp(18px,2.2vw,23px);font-weight:700;
  color:#EADFC4;letter-spacing:.12em;line-height:1.4;
  transition:color .2s;
}
.soon-card-sub{
  margin-top:9px;font-size:12px;color:#9FB8D6;line-height:1.65;letter-spacing:.04em;
}
.soon-card-note{
  margin:8px 0 0;
  font-size:10.5px;color:#7A90A8;letter-spacing:.06em;line-height:1.4;
}
.soon-flow.active .soon-item{animation:soonIn .8s cubic-bezier(.3,1.25,.5,1) forwards;}
.soon-flow.active .soon-devices > .soon-item:nth-child(2){animation-delay:.55s;}
.soon-flow.active .soon-devices > .soon-item:nth-child(3){animation-delay:.85s;}
@keyframes soonIn{
  from{opacity:0;transform:translateY(26px) scale(.92);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media(max-width:720px){
  .soon-flow{margin-top:24px;padding:22px 14px 28px;}
  .soon-flow::before{inset:6px;}
  .soon-circles{width:min(480px,115%);top:40%;}
  .soon-evolve{
    padding:6px 0 12px;margin:0 auto 18px;
  }
  .soon-evolve-cap{margin-bottom:14px;}
  .soon-evolve-row{gap:12px 14px;}
  .soon-evolve-main{font-size:24px;}
  .soon-evolve-sub{font-size:11.5px;}
  .soon-badge{
    width:64px;height:64px;
  }
  .soon-badge .ribbon{width:14px;height:30px;margin-left:-7px;}
  .soon-badge .disc{inset:7px;}
  .soon-badge .b-year{font-size:12px;}
  .soon-badge .b-label{font-size:8px;margin-top:2px;}
  .soon-devices{
    flex-wrap:nowrap;justify-content:flex-start;align-items:flex-end;
    gap:0;
    margin:8px -6px 0;padding:12px 6px 4px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .soon-devices::-webkit-scrollbar{display:none;}
  .soon-item{
    flex:0 0 min(82vw,300px);
    scroll-snap-align:center;scroll-snap-stop:always;
    opacity:1;
  }
  .soon-devices .soon-item--phone .iphone{width:118px;}
  .soon-devices .soon-item--tablet .ipad{width:240px;}
  .soon-item--phone .soon-card,
  .soon-item--tablet .soon-card{
    margin-top:14px;width:100%;max-width:280px;padding:0;
  }
  .soon-mascot{width:clamp(48px,16vw,64px);}
  .soon-mascot--pc{width:clamp(52px,17vw,68px);}
  .soon-card-title{font-size:15px;}
  .soon-card-sub{font-size:10.5px;}
}
@media(prefers-reduced-motion:reduce){
  .soon-evolve{opacity:1;transform:none;animation:none;}
  .soon-flow.active .soon-card{animation:none;}
  .soon-devices .device{opacity:1;animation:none;}
  .soon-item{opacity:1;animation:none;}
}

/* ================= コンポジション（イラスト実装） ================= */
/* マップ外のデバイスは常時表示・整った既定角度 */
.compose{position:relative;min-height:380px;}
.compose .device,.uq-visual .device{opacity:1;}
/* MOBILE ORDER：モック背後に動画（16:9） */
.compose--mo{
  min-height:420px;overflow:visible;
  display:flex;align-items:center;
}
.compose-mo-media{
  position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);
  aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:#0A1E3C;
}
.compose--mo .compose-bgvid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;pointer-events:none;
}
.compose--mo > .device{
  --x:85%;--y:50%;
  --rx:6deg;--ry:-12deg;--rz:3deg;--fd:0s;
  width:34%;z-index:2;
  filter:drop-shadow(0 28px 44px rgba(10,30,60,.48)) drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.compose--mo > .device .d-body{
  box-shadow:
    0 40px 70px -20px rgba(3,10,24,.75),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.1) inset;
}
@media(min-width:961px) and (max-width:1024px){
  /* 柱1（モバイルオーダー）：iPhoneモックが動画ボックスに対して
     縦に伸びすぎないよう、このレンジだけ縮小して比率を整える */
  .compose--mo > .device{width:22%;--x:80%;}
}
/* POS：タブレットモック（チャットは .chat-stage のまま） */
.compose--pos{min-height:400px;}
.compose--pos > .device{
  --x:50%;--y:50%;
  --rx:6deg;--ry:5deg;--rz:-1deg;--fd:0s;
  width:84%;
}
@media(prefers-reduced-motion:reduce){
  .compose--mo .compose-bgvid{display:none;}
}

/* 抽象UIミニカード */
.mini{
  position:absolute;width:150px;background:#fff;border:1px solid var(--blue-line);
  border-radius:6px;padding:13px 15px;z-index:3;
  box-shadow:0 22px 44px -20px rgba(10,30,60,.4);
  animation:floaty2 6.5s ease-in-out infinite alternate;
}
.mini .t{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--navy);display:flex;align-items:center;gap:6px;margin-bottom:9px;}
.mini .t::before{content:"";width:6px;height:6px;background:var(--gold);flex:none;}
.mini .sk{height:6px;border-radius:99px;background:#E2EAF4;margin-top:7px;}
.mini .sk.w60{width:60%;}.mini .sk.w80{width:80%;}
.mini .sk.g{background:linear-gradient(90deg,var(--gold),#E4CB8A);}
.mini.dark{background:#10243F;border-color:rgba(201,162,84,.4);box-shadow:0 24px 50px -18px rgba(0,0,0,.6);}
.mini.dark .t{color:#EADFC4;}
.mini.dark .sk{background:#1E3A61;}
@keyframes floaty2{from{transform:translateY(-5px);}to{transform:translateY(5px);}}

/* ヒーロー左右デバイス（旧 compose は廃止） */

/* NFCタッチポイント */
.nfc{
  position:absolute;width:78px;height:78px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 34% 28%,#E2C883,#B8913D 52%,#8F6E27 90%);
  box-shadow:0 18px 34px -12px rgba(90,64,15,.5),0 2px 0 rgba(255,255,255,.35) inset;
  display:flex;align-items:center;justify-content:center;
  font-family:"Zen Old Mincho",serif;font-size:10px;font-weight:700;color:#4C3A12;letter-spacing:.16em;
}
.nfc .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold);opacity:0;animation:ripple 2.6s ease-out infinite;}
.nfc .ring:nth-child(2){animation-delay:.9s;}
.nfc .ring:nth-child(3){animation-delay:1.8s;}
@keyframes ripple{0%{transform:scale(.7);opacity:.75;}100%{transform:scale(2.1);opacity:0;}}

/* ルーレット（CSSのみ） */
.wheel{
  width:46px;height:46px;border-radius:50%;margin-top:4px;
  background:conic-gradient(var(--gold) 0 60deg,#12315E 60deg 120deg,#C9A254 120deg 180deg,#2E6FB7 180deg 240deg,#E4CB8A 240deg 300deg,#0A1E3C 300deg 360deg);
  border:2px solid #fff;box-shadow:0 4px 10px rgba(10,30,60,.25);
  animation:spin 14s linear infinite;
}

/* プログレスバー */
.pbar{height:8px;border-radius:99px;background:#E2EAF4;margin-top:8px;overflow:hidden;}
.pbar i{display:block;height:100%;width:72%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#E4CB8A);}

/* チャット吹き出し */
.bubble{
  position:absolute;z-index:3;max-width:240px;padding:13px 16px;border-radius:10px;
  font-size:12px;line-height:1.75;
  box-shadow:0 20px 44px -20px rgba(10,30,60,.4);
  animation:floaty2 7s ease-in-out infinite alternate;
}
.bubble.q{
  background:linear-gradient(165deg, #5AC8FA 0%, #32ADF0 42%, #0A84FF 100%);
  color:#fff;
  border-bottom-right-radius:4px;
  text-shadow:0 1px 0 rgba(0,72,160,.12);
}
.bubble.a{background:#E9E9EB;border:none;color:#1B2635;border-bottom-left-radius:4px;}
.bubble.a .bchart{display:flex;align-items:flex-end;gap:5px;height:44px;margin-top:10px;}
.bubble.a .bchart i{flex:1;background:#DCE6F2;border-radius:2px 2px 0 0;}
.bubble.a .bchart i:nth-child(1){height:40%;}
.bubble.a .bchart i:nth-child(2){height:65%;}
.bubble.a .bchart i:nth-child(3){height:100%;background:linear-gradient(180deg,var(--gold),#9A7830);}
.bubble.a .bchart i:nth-child(4){height:52%;}
.bubble.a .bchart i:nth-child(5){height:75%;}

/* ---- AIチャット（自然な高さ + 一定gap、JS段階送り） ---- */
.chat-stage{
  position:absolute;left:50%;top:3%;transform:translateX(-50%);
  width:66%;height:94%;z-index:5;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.chat-roll{
  display:flex;flex-direction:column;
  will-change:transform;
}
.chat-track{
  display:flex;flex-direction:column;gap:12px;
  padding-bottom:12px;
}
.chat-track .bubble{
  position:static;flex:none;max-width:80%;margin:0;
  box-shadow:0 20px 40px -16px rgba(4,12,26,.55);
  animation:none;
}
.chat-track .bubble.q{
  align-self:flex-end;
  border:none;
  box-shadow:0 1px 1px rgba(0,60,140,.08), 0 3px 10px rgba(10,132,255,.22);
}
.chat-track .bubble.a{
  align-self:flex-start;
  box-shadow:0 1px 1px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.08);
}
.chat-track .bubble.is-active{
  animation:bubblePop .5s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes bubblePop{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){
  .chat-roll{transform:none !important;}
  .chat-track[aria-hidden="true"]{display:none;}
  .chat-track .bubble.is-active{animation:none;}
}
/* ABC分析ミニバー */
.abc{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.abc div{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--ink-weak);font-weight:700;}
.abc i{height:7px;border-radius:99px;display:block;}
.abc .ra i{width:104px;background:linear-gradient(90deg,var(--gold),#E4CB8A);}
.abc .rb i{width:62px;background:#2E6FB7;}
.abc .rc i{width:30px;background:#D8E2EE;}
/* ランキング行 */
.rank{margin-top:9px;font-size:11.5px;color:var(--ink);}
.rank div{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--blue-line);}
.rank div:last-child{border-bottom:none;}
.rank b{color:var(--gold-deep);font-family:"Zen Old Mincho",serif;margin-right:8px;}
@media(prefers-reduced-motion:reduce){
  .chat-stage .bubble{animation:none !important;}
  .chat-stage .c1q,.chat-stage .c1a{opacity:1;transform:none;}
}
/* グルメサイト同期カード */
.site{
  position:absolute;z-index:3;width:168px;background:#fff;border:1px solid var(--blue-line);
  border-left:3px solid var(--gold);border-radius:4px;padding:11px 14px;
  box-shadow:0 18px 38px -18px rgba(10,30,60,.35);
  animation:floaty2 6s ease-in-out infinite alternate;
}
.site b{font-size:12.5px;color:var(--navy);letter-spacing:.04em;}
.site .sk{height:5px;border-radius:99px;background:#E2EAF4;margin-top:7px;}
.site .st{display:inline-block;margin-top:8px;font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--gold-deep);border:1px solid var(--gold);padding:1px 8px;border-radius:99px;}
.sync-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;}
.sync-lines path{
  fill:none;stroke-linecap:round;stroke-linejoin:round;
}
/* 細い下地線 */
.sync-lines-soft path{
  stroke:#C9A254;stroke-width:.9;stroke-opacity:.42;
  stroke-dasharray:none;
}
.sync-lines-soft path.rev{stroke-opacity:.28;}
/* 細い線上を走る光点（信号パケット） */
.sync-lines-core path{
  stroke:#FFFDF2;stroke-width:1.35;stroke-opacity:1;
  stroke-dasharray:2.2 26;
  filter:
    drop-shadow(0 0 1px #fff)
    drop-shadow(0 0 3px rgba(255,250,230,1))
    drop-shadow(0 0 7px rgba(255,230,150,1))
    drop-shadow(0 0 14px rgba(232,200,120,.95))
    drop-shadow(0 0 22px rgba(201,162,84,.65));
  animation:dashFlow 2.2s linear infinite;
}
.sync-lines-core path.rev{
  animation-direction:reverse;
  stroke-opacity:1;
  stroke-dasharray:2 30;
  animation-duration:2.8s;
}
.sync-lines-core path:nth-child(2){animation-duration:1.9s;animation-delay:-.4s;}
.sync-lines-core path:nth-child(3){animation-duration:2.5s;animation-delay:-1.1s;}
.sync-lines-core path:nth-child(4){animation-duration:2.7s;animation-delay:-.7s;}
.sync-lines-core path:nth-child(5){animation-duration:2.1s;animation-delay:-1.5s;}
@media(prefers-reduced-motion:reduce){
  .sync-lines-core path{animation:none;stroke-dasharray:none;stroke-opacity:.55;}
}

/* テーマ別スクリーン（予約ページ3態）— 旧スマホモック用。page-fan 移行後も残置 */
.d-screen.theme-washoku{background:linear-gradient(165deg,#2B2620,#171310);color:#CFC5AE;border-color:#5A503D;}
.d-screen.theme-bar{background:linear-gradient(165deg,#241708,#120C05);color:#D9B37C;border-color:#6E5326;}
.d-screen.theme-cafe{background:linear-gradient(165deg,#22301F,#101B10);color:#BFD3B4;border-color:#4C6247;}

/* BRANDED PAGE ファン重ね・手数料スタンプ → css/page-fan-branded.css */

/* 請求書バンドル（比較） */
.bundle{display:grid;grid-template-columns:minmax(280px,1fr) 70px minmax(210px,1fr);align-items:center;min-height:320px;}
.inv-pile{position:relative;width:280px;height:280px;margin:0 auto;justify-self:center;}
.inv{
  position:absolute;width:126px;background:#fff;border:1px solid var(--blue-line);
  border-radius:3px;padding:12px 13px;box-shadow:0 14px 30px -14px rgba(10,30,60,.3);
}
.inv .ih{font-size:9px;font-weight:700;letter-spacing:.14em;color:var(--ink-weak);display:flex;justify-content:space-between;}
.inv .sk{height:5px;border-radius:99px;background:#E8EEF6;margin-top:7px;}
.inv .iy{margin-top:9px;font-family:"Zen Old Mincho",serif;font-size:13px;color:var(--ink-weak);}
/* ごちゃごちゃ感を出す小さなデバイス（黒画面＋テキストのみ） */
.dev-mini{position:absolute;filter:drop-shadow(0 12px 20px rgba(10,30,60,.35));}
.dev-mini .dm-screen{
  background:linear-gradient(160deg,#141B26,#0C1219 70%);
  border:3px solid #2A3442;border-radius:6px;
  color:#B9C6D8;font-size:8.5px;font-weight:700;letter-spacing:.1em;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;
}
.dev-tab .dm-screen{width:92px;height:60px;}
.dev-laptop .dm-screen{width:100px;height:58px;border-radius:5px 5px 0 0;}
.dev-laptop .dm-base{
  width:120px;height:7px;margin-left:-10px;
  background:linear-gradient(180deg,#3A4450,#232B36);
  border-radius:2px 2px 7px 7px;
}
.dev-phone .dm-phone{
  position:relative;
  width:42px;padding:5px 4px 6px;
  background:linear-gradient(160deg,#2A3442,#1A212B);
  border:2px solid #3A4450;border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.dev-phone .dm-notch{
  display:block;width:14px;height:3px;margin:0 auto 3px;
  background:#0C1219;border-radius:99px;
}
.dev-phone .dm-screen{
  width:100%;height:54px;border:none;border-radius:4px;
  font-size:7px;letter-spacing:.06em;
}

/* Syncless ONE APP タブレット（右側） */
.one-tab{
  width:210px;margin:0 auto;position:relative;
  background:linear-gradient(155deg,#152B4C,#0B1830 60%);
  border:1px solid var(--gold);
  border-radius:14px;padding:10px;
  box-shadow:
    0 26px 50px -20px rgba(10,30,60,.55),
    0 0 22px -6px rgba(201,162,84,.45);
}
.one-tab-screen{
  aspect-ratio:4/3;border-radius:8px;
  background:radial-gradient(ellipse 90% 80% at 50% 38%,#12294B 0%,#0A1E3C 70%);
  border:1px solid rgba(201,162,84,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.one-tab-brand{
  display:inline-flex;align-items:center;justify-content:center;
  line-height:0;
}
.one-tab-brand img{height:14px;width:auto;display:block;}
.one-tab-brand::after{display:none;}
.one-tab-app{
  font-size:9.5px;font-weight:700;letter-spacing:.34em;text-indent:.34em;
  color:var(--gold-lt);
}
.bundle-arrow{position:relative;z-index:10;display:flex;align-items:center;justify-content:center;}
.bundle-arrow svg{width:64px;height:auto;overflow:visible;}
.bundle-arrow .arrow-shaft{
  stroke:var(--gold);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:6 6;animation:dashFlow 1.2s linear infinite;
}
.bundle-arrow .arrow-head{
  fill:var(--gold);stroke:none;
}

/* ワードマーク */
.wordmark{
  font-family:"Zen Old Mincho",serif;font-weight:700;font-size:21px;letter-spacing:.05em;
  color:#fff;display:inline-flex;align-items:baseline;gap:3px;text-decoration:none;
}
.wordmark::after{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%;flex:none;}
footer .wordmark{font-size:18px;color:#DCE6F2;}

/* ================= 全体ポリッシュ ================= */
::selection{background:var(--gold);color:var(--navy);}
[id]{scroll-margin-top:86px;}
.btn{transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;}
.btn:hover{opacity:1;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(10,30,60,.5);}
.p-chips span{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;}
.p-chips span:hover{
  transform:translateY(-1px);
  border-color:rgba(201,162,84,.55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 8px 16px -8px rgba(10,30,60,.5);
}
details.faq-item summary{list-style:none;cursor:pointer;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item .q{position:relative;padding-right:36px;}
details.faq-item .q::after{
  content:"＋";position:absolute;right:6px;top:0;color:var(--gold-deep);
  font-size:16px;transition:transform .25s;
}
details.faq-item[open] .q::after{transform:rotate(45deg);}
details.faq-item .a{margin-top:12px;}

/* コンポジションのモバイル縮小 */
@media(max-width:960px){
  .compose{min-height:300px;}
  .mini{width:124px;padding:10px 12px;}
  .bubble{max-width:190px;font-size:11px;}
  .site{width:140px;}
  .m-hide{display:none;}
  .bundle{grid-template-columns:1fr;gap:8px;min-height:0;}
  .inv-pile{height:230px;}
  .bundle-arrow svg{transform:rotate(90deg);width:40px;}
  .stamp{width:74px;height:74px;}
  .stamp .s2{font-size:20px;}
}

/* ---- 現場発の売上装置 ---- */
.unique{background:#fff;padding:110px 0 90px;}
.unique .uq-grid{margin-top:28px;}
@media(max-width:720px){
  .unique .uq-grid{margin-top:8px;}
}
@media(max-width:960px){
  .unique{padding:72px 0 60px;}
}

/* ---- FIELD-BORN 後：2026 COMING SOON 2カラム誘導 ---- */
.coming-strip{
  position:relative;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%,rgba(201,162,84,.12) 0%,transparent 55%),
    radial-gradient(ellipse 50% 45% at 90% 80%,rgba(46,111,183,.18) 0%,transparent 55%),
    linear-gradient(180deg,#0A1E3C 0%,#0D2544 100%);
  padding:96px 0 100px;
  overflow:hidden;
}
.coming-strip-head{text-align:center;max-width:640px;margin:0 auto 48px;}
.coming-strip-head .eyebrow{justify-content:center;color:var(--gold-lt);}
.coming-strip-head .eyebrow::before,
.coming-strip-head .eyebrow::after{background:var(--gold-lt);}
.coming-strip-head h2{color:#fff;margin:0;}
.coming-strip-head .lead{
  margin:16px auto 0;color:#C3D3E8;font-size:15.5px;letter-spacing:.06em;
}
.coming-strip-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
  max-width:1120px;margin:0 auto;
}
.coming-strip-card{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;align-items:center;
  padding:28px 24px;
  background:rgba(8,20,38,.55);
  border:1px solid rgba(201,162,84,.4);
  text-decoration:none;color:inherit;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.coming-strip-card:hover{
  border-color:var(--gold-lt);
  transform:translateY(-3px);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.55),0 0 24px rgba(201,162,84,.18);
}
.coming-strip-media{
  position:relative;min-height:180px;
  display:flex;align-items:center;justify-content:center;
}
.coming-strip-media .device{
  position:relative;left:auto;top:auto;transform:none;opacity:1;
  width:42%;max-width:110px;
  filter:drop-shadow(0 18px 28px rgba(3,10,24,.5));
}
.coming-strip-media--wide .device{
  width:88%;max-width:220px;
}
.coming-strip-mascot{
  position:absolute;left:0;bottom:0;
  width:72px;height:auto;pointer-events:none;
  filter:drop-shadow(0 8px 14px rgba(3,10,24,.4));
}
.coming-strip-mascot--pc{left:auto;right:-4px;width:78px;}
.coming-strip-cap{
  display:inline-block;margin-bottom:10px;
  font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--gold-lt);
}
.coming-strip-cap--free{
  color:var(--navy);background:var(--gold);
  padding:4px 12px;border-radius:99px;letter-spacing:.14em;font-size:11px;
}
.coming-strip-body h3{
  margin:0;
  font-family:"Zen Old Mincho",serif;font-weight:700;
  font-size:22px;color:#fff;letter-spacing:.04em;
}
.coming-strip-body p{
  margin:10px 0 0;
  font-size:13.5px;line-height:1.8;color:#B8C9DE;
}
.coming-strip-more{
  display:inline-block;margin-top:16px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--gold-lt);
}
@media(max-width:860px){
  .coming-strip{padding:72px 0 80px;}
  .coming-strip-grid{grid-template-columns:1fr;gap:16px;}
  .coming-strip-card{grid-template-columns:1fr;gap:12px;padding:22px 18px;}
  .coming-strip-media{min-height:140px;}
  .coming-strip-media .device{max-width:96px;}
  .coming-strip-media--wide .device{max-width:180px;}
}

/* ---- レスポンシブ ---- */
@media(max-width:960px){
  section{padding:72px 0;}
  .hero h1{font-size:36px;}
  h2{font-size:26px;}
  .map-sec h2 .huge{font-size:52px;}
  .pillar,.compare-in,.next-grid{grid-template-columns:1fr;gap:36px;}
  /* SP：テキスト → イメージ（偶数柱も同じ順） */
  .pillar > div:not(.p-visual){order:1;}
  .pillar .p-visual{order:2;}
  .pillar .tob{order:3;}
  .pillar{padding:56px 0;}
  .pillar h3{font-size:26px;}
  .p-mascot{width:68px;margin-bottom:-4px;}
  header:not(.site-header) nav{display:none;}
  .price-card{padding:40px 28px;}
  .price-card .btn{width:100%;}
}
.logo-link::after{display:none;}
.logo-img{height:32px;width:auto;display:block;}
.footer-logo{height:28px;}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 20px;}
.footer-links a{color:#7E97B8;text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:var(--gold-lt);}

/* ---- マスコット付き見出し（index-v2） ---- */
.iv-head-mascot{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px 28px;
  text-align:left;
  margin:0 auto 36px;
  max-width:820px;
}
.iv-head-mascot.mascot-left{flex-direction:row;}
.iv-head-mascot.mascot-left .iv-mascot{order:-1;}
.iv-head-mascot--center{margin-left:auto;margin-right:auto;}
.iv-head-mascot--compact{margin:0 0 18px;max-width:none;}
.iv-head-mascot-copy{flex:1 1 auto;min-width:0;}
.iv-head-mascot .eyebrow{margin-bottom:10px;}
.iv-head-mascot h2{margin:0;}
.iv-head-mascot .sub,
.iv-head-mascot .lead{
  margin:16px 0 0;max-width:34em;
}
.map-sec .iv-head-mascot .sub{margin-left:0;margin-right:0;}
.map-sec .iv-head-mascot{text-align:left;}
.map-sec .iv-head-mascot .eyebrow,
.unique .iv-head-mascot .eyebrow,
.faq .iv-head-mascot .eyebrow{justify-content:flex-start;}
.map-head,
.unique-head{margin:0 0 36px;}
.map-head .iv-head-mascot,
.unique-head .iv-head-mascot{
  margin:0;max-width:none;
  align-items:flex-end;
}
.map-head .iv-head-mascot-copy,
.unique-head .iv-head-mascot-copy{flex:1 1 auto;min-width:0;}
.map-lead{
  margin:16px 0 0;max-width:none;
  color:#C3D3E8;font-size:14.5px;line-height:1.9;
}
.unique-lead{
  margin:16px 0 0;max-width:none;
  color:var(--ink-weak);font-size:14.5px;line-height:1.9;
}
.unique-rule{
  display:block;width:100%;height:2px;margin-top:28px;
  background:linear-gradient(90deg,var(--gold-lt) 0%,var(--gold) 45%,var(--gold-deep) 100%);
  border-radius:1px;
}
.iv-mascot{
  flex:0 0 auto;
  width:clamp(100px,15vw,158px);height:auto;display:block;
  filter:drop-shadow(0 14px 28px rgba(10,30,60,.16));
}
.on-dark .iv-mascot,
.iv-head-mascot.on-dark .iv-mascot{
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.45));
}
.faq .iv-head-mascot{margin-bottom:40px;}
@media(max-width:860px){
  .iv-head-mascot{gap:10px 16px;margin-bottom:28px;}
  .map-head .iv-head-mascot,
  .unique-head .iv-head-mascot{margin-bottom:0;}
  .iv-mascot{width:clamp(84px,22vw,120px);}
}
@media(max-width:720px){
  .map-head,
  .unique-head{margin-bottom:28px;}
  .map-lead,
  .unique-lead{margin-top:14px;font-size:13.5px;}
  .unique-rule{margin-top:22px;}
}