@charset "UTF-8";

/* ============================================================
   00. Tokens
============================================================ */
:root{
  --paper:      #F7F7F5;
  --paper-2:    #EDEFF2;
  --white:      #FFFFFF;
  --ink:        #14171C;
  --ink-70:     #4C525B;
  --ink-45:     #838A94;
  --rule:       #DFE1E5;
  --rule-soft:  #E9EAED;
  --accent:     #1B34E0;
  --accent-dk:  #1226A8;
  --accent-lt:  #7C8CFF;
  --accent-tint:#E8EAFD;
  --dark:       #0F1218;
  --dark-2:     #191D25;

  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-dp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

  --wrap: 1180px;
  --wrap-wide: 1400px;
  --pad: 32px;
  --header-h: 76px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(20,23,28,.05), 0 6px 18px -12px rgba(20,23,28,.18);
  --shadow-md: 0 10px 30px -16px rgba(20,23,28,.28);
  --shadow-lg: 0 40px 80px -40px rgba(20,23,28,.45);

  --ease: cubic-bezier(.22,.85,.28,1);
}

/* ============================================================
   01. Base
============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ja);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.015em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.section--dark :focus-visible{ outline-color:var(--accent-lt); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px;
  transition:top .2s;
}
.skip-link:focus{ top:16px; }

.container{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.container--narrow{ max-width:860px; }
.container--wide{ max-width:var(--wrap-wide); }

.pc-only{ display:inline; }
.sp-only{ display:none; }

/* ============================================================
   02. Buttons（Apple的なピル型）
============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 30px;
  font-family:var(--font-dp);
  font-size:15px; font-weight:700; letter-spacing:.01em; line-height:1;
  border:1.5px solid transparent;
  border-radius:999px;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .25s var(--ease),
             box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 8px 22px -12px rgba(27,52,224,.9); }
.btn--accent:hover{ background:var(--accent-dk); transform:translateY(-2px); }
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:var(--accent); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--rule); color:var(--ink); background:var(--white); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.section--dark .btn--ghost{ background:transparent; border-color:rgba(255,255,255,.3); color:#fff; }
.btn--sm{ padding:11px 22px; font-size:13.5px; }
.btn--lg{ padding:19px 42px; font-size:16px; }
.btn--block{ display:flex; width:100%; }
.btn:active{ transform:translateY(0); }

/* ============================================================
   03. Header
============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  transition:background .35s var(--ease), border-color .35s var(--ease), height .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  height:64px;
  background:rgba(247,247,245,.8);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--rule-soft);
}
.header-inner{
  height:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{
  width:28px; height:28px;
  object-fit:contain; display:block;
  transition:transform 1.4s cubic-bezier(.3,.8,.3,1);
}
.logo:hover .logo-mark{ transform:rotate(360deg); }
.logo-text{ font-family:var(--font-dp); font-weight:900; font-size:19px; letter-spacing:.02em; }
.site-header.is-scrolled .logo-mark{ width:25px; height:25px; }

.nav{ display:flex; align-items:center; gap:32px; }
.nav-list{ display:flex; gap:8px; }
.nav-list a{
  display:block; padding:8px 14px; border-radius:999px;
  font-family:var(--font-dp);
  font-size:14px; font-weight:500; color:var(--ink-70);
  transition:color .25s, background .25s;
}
.nav-list a:hover{ color:var(--ink); background:rgba(20,23,28,.05); }
.nav-list a.is-active{ color:var(--accent); background:var(--accent-tint); }

.menu-toggle{ display:none; }

.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--paper);
  padding:calc(var(--header-h) + 24px) var(--pad) 40px;
  opacity:0; transition:opacity .3s var(--ease);
  overflow-y:auto;
}
.mobile-menu.is-open{ opacity:1; }
.mobile-menu-inner ul{ margin-bottom:32px; }
.mobile-menu-inner li{ border-bottom:1px solid var(--rule-soft); }
.mobile-menu-inner li a{ display:flex; align-items:baseline; gap:16px; padding:20px 4px; }
.mm-en{ font-family:var(--font-dp); font-weight:700; font-size:20px; min-width:120px; }
.mm-ja{ font-size:12.5px; color:var(--ink-45); }

/* ============================================================
   04. Section shells
============================================================ */
.section{ position:relative; padding:clamp(84px,10vw,140px) 0; scroll-margin-top:70px; }
.section--alt{ background:var(--paper-2); }
.section--dark{ background:var(--dark); color:#fff; }

.sec-head{ max-width:780px; margin:0 auto clamp(46px,6vw,78px); text-align:center; }
.sec-label{
  display:inline-block;
  font-family:var(--font-dp); font-weight:700;
  font-size:11.5px; letter-spacing:.16em;
  color:var(--accent);
  background:var(--accent-tint);
  padding:8px 18px; border-radius:999px;
  margin-bottom:24px;
}
.sec-title{
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(29px,4.6vw,54px);
  line-height:1.3; letter-spacing:-.02em;
  margin-bottom:22px;
}
.sec-desc{
  font-size:15px; line-height:2; color:var(--ink-70);
  max-width:40em; margin-inline:auto;
}
.sec-head--dark .sec-label{ color:var(--accent-lt); background:rgba(124,140,255,.14); }
.sec-head--dark .sec-desc{ color:rgba(255,255,255,.62); }

/* ============================================================
   05. Hero
============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; place-items:center;
  padding:calc(var(--header-h) + 56px) 0 90px;
  overflow:hidden;
  text-align:center;
}
.hero-glow{
  position:absolute; z-index:0;
  width:min(1100px,120vw); aspect-ratio:1/.62;
  left:50%; top:24%; transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side, rgba(27,52,224,.13), transparent 70%),
    radial-gradient(closest-side, rgba(124,140,255,.16), transparent 72%);
  background-position:30% 40%, 72% 60%;
  background-repeat:no-repeat;
  background-size:70% 90%, 62% 80%;
  filter:blur(6px);
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; }

.hero-eyebrow{
  display:inline-block;
  font-family:var(--font-dp); font-weight:700;
  font-size:13px; letter-spacing:.06em; color:var(--accent);
  background:rgba(255,255,255,.7);
  border:1px solid var(--rule);
  padding:8px 20px; border-radius:999px;
  margin-bottom:clamp(22px,3vw,34px);
  animation:fadeUp .9s var(--ease) both;
}
.hero-title{
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(46px,10.5vw,124px);
  line-height:1.08; letter-spacing:-.04em;
  margin-bottom:clamp(26px,3.4vw,40px);
}
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero-title .line > span{
  display:block; transform:translateY(105%);
  animation:heroRise 1.05s var(--ease) forwards;
}
.hero-title .line:nth-child(1) > span{ animation-delay:.12s; }
.hero-title .line:nth-child(2) > span{ animation-delay:.26s; }
@keyframes heroRise{ to{ transform:translateY(0); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

.hero-lead{
  font-family:var(--font-dp); font-weight:700;
  font-size:clamp(17px,2.1vw,24px); line-height:1.75;
  letter-spacing:-.01em;
  margin-bottom:14px;
  animation:fadeUp .9s var(--ease) .58s both;
}
.hero-sub{
  font-size:14.5px; line-height:2.05; color:var(--ink-70);
  max-width:44em; margin:0 auto clamp(32px,4vw,44px);
  animation:fadeUp .9s var(--ease) .68s both;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-bottom:clamp(40px,5vw,64px);
  animation:fadeUp .9s var(--ease) .78s both;
}
.hero-chips{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  animation:fadeUp .9s var(--ease) .88s both;
}
.hero-chips li{
  font-family:var(--font-dp); font-weight:700;
  font-size:12px; letter-spacing:.14em; color:var(--ink-70);
  background:var(--white);
  border:1px solid var(--rule);
  padding:9px 18px; border-radius:999px;
  transition:transform .35s var(--ease), color .3s, border-color .3s;
}
.hero-chips li:hover{ transform:translateY(-3px); color:var(--accent); border-color:var(--accent); }

.hero-scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  width:1px; height:44px; background:var(--rule); overflow:hidden;
}
.hero-scroll span{
  display:block; width:100%; height:16px; background:var(--accent);
  animation:scrollHint 2.2s var(--ease) infinite;
}
@keyframes scrollHint{ 0%{ transform:translateY(-16px); } 60%,100%{ transform:translateY(44px); } }

/* ============================================================
   06. Problem
============================================================ */
.problem-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.problem-card{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,36px);
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.problem-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.problem-card--wide{ grid-column:span 4; }
.problem-tag{
  display:inline-block;
  font-family:var(--font-dp); font-weight:700;
  font-size:11.5px; letter-spacing:.1em; color:var(--accent);
  background:var(--accent-tint);
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.problem-card h3{
  font-family:var(--font-dp); font-weight:700;
  font-size:clamp(16.5px,1.5vw,19px); line-height:1.6;
  letter-spacing:-.01em; margin-bottom:12px;
}
.problem-card p{ font-size:13.5px; line-height:1.95; color:var(--ink-70); }
.problem-card--wide h3{ font-size:clamp(19px,2.1vw,26px); }
.problem-card--wide p{ max-width:60em; }

/* ============================================================
   07. Design showcase（スクロール連動ステージ）
============================================================ */
.design{ padding:clamp(84px,10vw,140px) 0 clamp(60px,7vw,100px); scroll-margin-top:70px; }

/* 高さ = 重みの合計（フレーム＋トランジション。JSが --stage-units に設定） × 1単位のスクロール量 + 1画面分 */
.stage-track{
  --stage-unit-h:80vh;
  position:relative;
  height:calc(var(--stage-units, 6) * var(--stage-unit-h) + 100vh);
}
.stage-sticky{
  position:sticky; top:0;
  height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(18px,2.6vw,32px);
  padding:calc(var(--header-h) + 8px) var(--pad) 40px;
}

.stage-message{
  position:relative; width:100%;
  height:1.5em;
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(20px,3.2vw,40px); line-height:1.5;
  letter-spacing:-.02em; text-align:center;
}
.stage-message .msg{
  position:absolute; left:0; right:0; top:0;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.stage-message .msg.is-active{ opacity:1; transform:none; }

.stage-frames{
  position:relative;
  width:min(1080px, 100%, 120svh);
  aspect-ratio:2 / 1;
}
.frame{
  position:absolute; inset:0;
  opacity:0; transform:scale(.97) translateY(14px);
  transition:opacity .55s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
.frame.is-active{ opacity:1; transform:none; pointer-events:auto; }
.frame-inner{
  width:100%; height:100%;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--rule);
  background:#fff;
  box-shadow:var(--shadow-lg);
  container-type:size;
  display:flex; flex-direction:column;
}

.stage-progress{ display:flex; gap:8px; }
.stage-progress i{
  width:34px; height:3px; border-radius:999px;
  background:var(--rule);
  transition:background .4s var(--ease), width .4s var(--ease);
}
.stage-progress i.is-active{ background:var(--accent); width:52px; }

.design-note{
  margin-top:clamp(30px,4vw,48px);
  padding-top:22px; border-top:1px solid var(--rule);
  font-size:13px; color:var(--ink-45); text-align:center;
}

/* 実スクリーンショットに差し替える場合のスタイル
   <div class="frame-inner"><img class="frame-shot" src="images/design-01.png" alt=""></div> */
.frame-shot{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
}

/* --- モック共通 --- */
.mk-bar{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
  padding:.85em 1.3em;
  font-size:clamp(8px,1.15cqw,12.5px);
  background:#F2F2F0; border-bottom:1px solid var(--rule);
}
.mk-bar::before{
  content:""; width:34px; height:7px; border-radius:999px;
  background:
    radial-gradient(circle 3.5px at 3.5px 3.5px, #D5D6D8 99%, transparent),
    radial-gradient(circle 3.5px at 17px 3.5px, #D5D6D8 99%, transparent),
    radial-gradient(circle 3.5px at 30.5px 3.5px, #D5D6D8 99%, transparent);
}
.mk-bar span{ letter-spacing:.02em; color:var(--ink-45); }
.mk-body{
  flex:1; min-height:0; overflow:hidden; position:relative;
  font-size:clamp(4px,1.55cqw,17px);
  line-height:1.6;
}

/* 01 Product / Clean */
.mk--product .mk-body{ background:#fff; padding:1.4em 2em 0; text-align:center; }
.pr-nav{ display:flex; justify-content:center; gap:2.4em; margin-bottom:2.4em; }
.pr-nav i{ display:block; width:2.6em; height:.5em; border-radius:999px; background:#E4E4E6; }
.pr-kicker{ font-size:1.05em; letter-spacing:.02em; color:#6E7079; margin-bottom:.5em; }
.pr-head{
  font-family:var(--font-dp); font-weight:900;
  font-size:3.3em; line-height:1.16; letter-spacing:-.04em; color:#111318;
  margin-bottom:.7em;
}
.pr-btn{
  display:inline-block; background:#0B63F6; color:#fff;
  font-weight:700; font-size:1.1em; padding:.85em 2.4em; border-radius:999px;
}
.pr-price{ font-size:1.05em; color:#3D404A; margin-top:.9em; }
.pr-device{
  width:70%; margin:1.6em auto 0;
  background:#D9DBE0; border-radius:1.2em 1.2em 0 0; padding:.7em .7em 0;
  box-shadow:0 -.4em 2em rgba(20,23,28,.18);
}
.pr-screen{
  height:9em; border-radius:.7em .7em 0 0;
  background:
    linear-gradient(120deg,#E9FF5E 0%,#8CE86B 28%,#2FD6C0 55%,#3FA9F5 80%,#B6F04A 100%);
  filter:saturate(120%);
}

/* 02 Travel / Editorial */
.mk--travel .mk-body{ background:#FBFAF8; padding:1.8em 2.2em; text-align:center; }
.tv-kicker{ font-size:1em; letter-spacing:.3em; color:#8C8579; margin-bottom:.7em; }
.tv-head{
  font-family:var(--font-dp); font-weight:700;
  font-size:2.5em; letter-spacing:.02em; color:#2A2723; margin-bottom:.4em;
}
.tv-sub{ font-size:1em; color:#8C8579; margin-bottom:1.6em; }
.tv-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; grid-template-rows:1fr 1fr;
  gap:.8em; height:12.5em; text-align:left;
}
.tv-main{ grid-row:span 2; }
.tv-main,.tv-cell{
  background:#fff; border:1px solid #EAE5DC; border-radius:.5em;
  padding:.9em 1em; display:flex; flex-direction:column; overflow:hidden;
}
.tv-main span,.tv-cell span{ font-size:.85em; letter-spacing:.2em; color:#A29A8C; }
.tv-main b,.tv-cell b{
  font-family:var(--font-dp); font-weight:700; font-size:1.35em; color:#2A2723;
  margin:.25em 0 .35em; border-bottom:.14em solid #B3373C; align-self:flex-start; padding-bottom:.1em;
}
.tv-main i{ font-style:normal; font-size:.85em; color:#8C8579; margin-bottom:.6em; }
.tv-photo{ flex:1; border-radius:.3em; min-height:2.5em; }
.tv-photo--city{ background:linear-gradient(180deg,#F2C48A 0%,#D98F5A 40%,#3FA3C4 78%,#2E7FA8 100%); }
.tv-photo--a{ background:linear-gradient(140deg,#EDE4D6,#C9B79B); }
.tv-photo--b{ background:linear-gradient(140deg,#D8C9AE,#8E7A5C); }
.tv-photo--c{ background:linear-gradient(140deg,#E2CFC2,#A8846F); }
.tv-photo--d{ background:linear-gradient(140deg,#CBD8CE,#7C9481); }

/* 03 Corporate / Trust */
.mk--corp .mk-body{ background:#fff; display:flex; flex-direction:column; }
.cp-top{
  display:flex; justify-content:space-between; align-items:center;
  padding:.9em 2em; font-size:.95em; color:#5A6270; border-bottom:1px solid #E6E8EC;
}
.cp-top b{ font-family:var(--font-dp); font-weight:900; font-size:1.4em; color:#0B2A6B; letter-spacing:.02em; }
.cp-nav{
  display:flex; gap:2.2em; padding:.9em 2em; font-size:1em; font-weight:500; color:#22293A;
  border-bottom:1px solid #E6E8EC;
}
.cp-hero{
  flex:1; display:grid; grid-template-columns:1fr 1.7fr; gap:2em;
  background:linear-gradient(120deg,#0A2A78 0%,#0F3FBF 55%,#1450E0 100%);
  padding:1.8em 2em; align-items:center;
}
.cp-card{ background:#fff; border-radius:.4em; padding:1.4em 1.4em 1.2em; }
.cp-card p{ font-size:1em; font-weight:700; color:#22293A; margin-bottom:.9em; }
.cp-card i{ display:block; height:2.1em; border:1px solid #C9CDD6; border-radius:.25em; margin-bottom:.7em; }
.cp-btn{
  display:block; text-align:center; background:#0A2A78; color:#fff;
  font-weight:700; font-size:1em; padding:.75em; border-radius:999px;
}
.cp-card em{ display:block; font-style:normal; font-size:.85em; color:#0F3FBF; text-align:center; margin-top:.8em; }
.cp-h{ font-family:var(--font-dp); font-weight:700; font-size:1.7em; color:#fff; margin-bottom:1em; letter-spacing:-.01em; }
.cp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1em; }
.cp-grid div{ text-align:center; color:#fff; }
.cp-grid b{ font-family:var(--font-dp); font-weight:900; font-size:2.4em; line-height:1; letter-spacing:-.03em; }
.cp-grid b i{ font-style:normal; font-size:.45em; margin-left:.1em; }
.cp-grid span{ display:block; font-size:.85em; margin-top:.5em; color:rgba(255,255,255,.8); }

/* 04 Hospitality / Luxury */
.mk--luxury .mk-body{ background:#fff; display:flex; flex-direction:column; }
.lx-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9em 1.8em;
}
.lx-menu{ display:flex; flex-direction:column; gap:.3em; }
.lx-menu i{ display:block; width:1.8em; height:.14em; background:#2A2723; }
.lx-brand{ text-align:center; }
.lx-brand b{
  font-family:var(--font-dp); font-weight:500; font-style:italic;
  font-size:1.9em; letter-spacing:.14em; color:#1F1C18;
}
.lx-brand span{ display:block; font-size:.85em; letter-spacing:.14em; color:#6C6559; }
.lx-lang{ font-size:.9em; letter-spacing:.1em; color:#6C6559; }
.lx-nav{
  display:flex; justify-content:space-between; padding:.7em 1.8em 1em;
  font-family:var(--font-dp); font-weight:700; font-size:1em; color:#2A2723;
}
.lx-stage{
  flex:1; position:relative; padding:1.2em 1.8em;
  background:
    radial-gradient(60% 50% at 50% 22%, rgba(255,226,170,.55), transparent 70%),
    radial-gradient(30% 26% at 20% 60%, rgba(255,214,150,.28), transparent 70%),
    linear-gradient(180deg,#5B4A34 0%,#33281C 45%,#150F09 100%);
  display:flex; flex-direction:column; justify-content:space-between;
}
.lx-crumb{ font-size:.85em; color:rgba(255,255,255,.6); }
.lx-copy{
  font-family:var(--font-dp); font-weight:500;
  font-size:2.6em; line-height:1.45; letter-spacing:.12em; color:#fff;
  text-shadow:0 .1em .6em rgba(0,0,0,.4);
}

/* 05 Entertainment / Dark */
.mk--dark .mk-body{ background:#07080B; display:flex; flex-direction:column; padding-bottom:1.2em; }
.dk-nav{
  display:flex; align-items:center; gap:1.8em; padding:1em 1.8em;
  font-size:.95em; color:#9AA0AC; border-bottom:1px solid #16181F;
}
.dk-nav b{ font-family:var(--font-dp); font-weight:900; font-size:1.35em; color:#fff; letter-spacing:.06em; }
.dk-hero{ flex:1; display:grid; grid-template-columns:1fr 1.25fr; align-items:center; }
.dk-left{ padding:0 2em; }
.dk-title{
  font-family:var(--font-dp); font-weight:900;
  font-size:3.6em; line-height:1; letter-spacing:.06em;
  background:linear-gradient(120deg,#F2D68A,#B98A3C 45%,#F7E9BC 70%,#9C6E28);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dk-meta{ font-size:.95em; color:#9AA0AC; margin:.9em 0 1.4em; }
.dk-btn{
  display:inline-block; background:#fff; color:#07080B;
  font-weight:700; font-size:1em; padding:.7em 2em; border-radius:.35em;
}
.dk-arts{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5em; height:78%; padding-right:1.8em; }
.dk-arts i{ border-radius:.2em; }
.dk-arts i:nth-child(1){ background:linear-gradient(200deg,#3B4A63,#0E1218 70%); }
.dk-arts i:nth-child(2){ background:linear-gradient(200deg,#6B5540,#17110B 70%); }
.dk-arts i:nth-child(3){ background:linear-gradient(200deg,#6B3550,#1A0D14 70%); }
.dk-sec{ font-family:var(--font-dp); font-weight:700; font-size:1.15em; color:#fff; padding:1.2em 1.8em .7em; }
.dk-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:.6em; padding:0 1.8em; }
.dk-row i{ display:block; aspect-ratio:16/9; border-radius:.2em; background:#161A22; }
.dk-row i:nth-child(2n){ background:#1E222C; }

/* 06 Pop / Colorful */
.mk--pop .mk-body{ background:#fff; display:flex; flex-direction:column; }
.pp-nav{
  display:flex; align-items:center; gap:1.6em;
  padding:1em 1.8em; background:#0B63F6; color:#fff; font-size:.95em; font-weight:500;
}
.pp-nav b{ font-family:var(--font-dp); font-weight:900; font-size:1.3em; letter-spacing:.08em; }
.pp-ticket{
  margin-left:auto; background:#fff; color:#0B63F6;
  font-weight:700; padding:.55em 1.6em; border-radius:999px;
}
.pp-stage{ flex:1; position:relative; display:grid; place-items:center; overflow:hidden; background:#fff; }
.pp-burst i{ position:absolute; display:block; border-radius:50%; }
.pp-burst .b1{ width:9em; height:9em; background:#FFC200; left:8%;  top:14%; }
.pp-burst .b2{ width:6em; height:6em; background:#FF3B6B; left:22%; top:58%; }
.pp-burst .b3{ width:11em;height:11em;background:#0B63F6; right:9%; top:10%; opacity:.9; }
.pp-burst .b4{ width:5.5em;height:5.5em;background:#00C2A8; right:24%; top:62%; }
.pp-burst .b5{ width:4em; height:4em; background:#8A4DFF; left:46%; top:4%; }
.pp-burst .b6{ width:3.2em;height:3.2em;background:#FF7A00; right:4%; bottom:12%; }
.pp-burst .b7{ width:3.6em;height:3.6em;background:#FFE600; left:3%; bottom:18%; }
.pp-head{
  position:relative;
  font-family:var(--font-dp); font-weight:900;
  font-size:3.6em; line-height:1.15; letter-spacing:-.03em;
  color:#101A3D; text-align:center;
  text-shadow:0 0 .18em #fff, .06em .06em 0 #fff, -.06em .06em 0 #fff, .06em -.06em 0 #fff, -.06em -.06em 0 #fff;
}
.pp-band{
  background:#0B2A78; color:#fff; text-align:center;
  font-family:var(--font-dp); font-weight:700; font-size:1.1em; padding:.9em;
}

/* ============================================================
   08. Why us
============================================================ */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* 見せ方 × 届け方 の2軸レイアウト */
.why-split{
  display:grid; grid-template-columns:.92fr auto 2fr;
  gap:clamp(14px,1.8vw,26px); align-items:stretch;
}
.why-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.why-axis{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(17px,1.9vw,22px); letter-spacing:-.01em;
}
.why-axis-num{
  font-size:12px; letter-spacing:.1em; color:var(--accent-lt);
  background:rgba(124,140,255,.16); padding:5px 11px; border-radius:999px;
}
.why-x{
  display:flex; align-items:center; justify-content:center;
  padding-top:38px;
  font-family:var(--font-dp); font-weight:900; font-size:clamp(20px,2.4vw,30px);
  color:rgba(255,255,255,.28);
}
.why-col > .why-card{ flex:1; }
.why-sub-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; flex:1; }
.why-sub-grid .why-card{ padding:clamp(22px,2.2vw,28px) clamp(18px,1.8vw,24px); }
.why-sub-grid .why-en{ margin-bottom:18px; }
.why-sub-grid h3{ font-size:clamp(15px,1.4vw,17.5px); }
.why-card--lead h3{ font-size:clamp(17px,1.7vw,21px); }
.why-tags{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:auto; padding-top:20px;
}
.why-tags li{
  font-size:11px; letter-spacing:.02em; color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.07); border-radius:999px; padding:5px 11px;
}
.why-sub-grid .why-card{ display:flex; flex-direction:column; align-items:flex-start; }
.why-sub-grid .why-tags{ align-self:stretch; }
.why-sub-grid .why-card > p:last-of-type{ margin-bottom:16px; }
.why-list{ margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }
.why-list li{
  position:relative; padding-left:18px; margin-bottom:8px;
  font-size:12.5px; line-height:1.8; color:rgba(255,255,255,.72);
}
.why-list li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--accent-lt);
}
.why-card{
  background:var(--dark-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg);
  padding:clamp(28px,3vw,38px);
  transition:transform .45s var(--ease), background .4s var(--ease), border-color .4s;
}
.why-card:hover{ transform:translateY(-6px); background:#212630; border-color:rgba(124,140,255,.4); }
.why-en{
  display:inline-block;
  font-family:var(--font-dp); font-weight:900;
  font-size:12px; letter-spacing:.14em; color:var(--accent-lt);
  background:rgba(124,140,255,.14);
  padding:7px 14px; border-radius:999px; margin-bottom:24px;
}
.why-card h3{
  font-family:var(--font-dp); font-weight:700;
  font-size:clamp(16px,1.5vw,19px); line-height:1.6; letter-spacing:-.01em;
  margin-bottom:13px;
}
.why-card p{ font-size:13.5px; line-height:1.95; color:rgba(255,255,255,.6); }
.why-foot{
  margin-top:clamp(40px,5vw,60px);
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(20px,3vw,36px); letter-spacing:-.02em;
  text-align:center;
}

/* ============================================================
   09. Service
============================================================ */
.service-block{
  background:var(--white);
  border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px) clamp(24px,3vw,40px) clamp(14px,2vw,24px);
  box-shadow:var(--shadow-sm);
  margin-bottom:18px;
}
.service-cat{
  font-family:var(--font-dp); font-weight:900;
  font-size:17px; letter-spacing:-.01em;
  padding-bottom:16px; margin-bottom:6px;
  border-bottom:1px solid var(--rule);
}
.service-list{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:48px; }
.service-list li{
  display:flex; align-items:baseline; gap:16px;
  padding:16px 2px; border-bottom:1px solid var(--rule-soft);
  transition:padding-left .35s var(--ease);
}
.service-list li:hover{ padding-left:10px; }
.service-list span{ font-family:var(--font-dp); font-weight:700; font-size:15px; flex:0 0 auto; min-width:11em; }
.service-list em{ font-style:normal; font-size:12.5px; color:var(--ink-45); }
.service-note{
  font-size:13px; line-height:1.9; color:var(--ink-45);
  padding:20px 24px; background:var(--accent-tint); border-radius:var(--r-md);
  max-width:70em; margin-inline:auto;
}

/* ============================================================
   10. Members / Results
============================================================ */
.member-grid{
  display:grid; grid-template-columns:1fr 1fr 1.7fr; gap:clamp(20px,2.6vw,34px);
  align-items:start; margin-bottom:clamp(48px,5.5vw,80px);
}
.member-photo{
  aspect-ratio:3/3.5;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
}
.member-photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}
.member-photo span{ font-size:11px; letter-spacing:.2em; color:var(--ink-45); }
.member-photo--ito img{ object-position:center 35%; }
.member-photo--fujita img{ object-position:center 80%; }
.member-name{
  margin-top:16px;
  font-family:var(--font-dp); font-weight:900; font-size:19px; letter-spacing:-.01em;
}
.member-name span{
  display:block; margin-top:4px;
  font-family:var(--font-ja); font-size:11px; font-weight:400;
  letter-spacing:.14em; color:var(--ink-45);
}
.member-career{
  background:var(--white); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,34px); box-shadow:var(--shadow-sm);
}
.member-career h3{
  display:inline-block;
  font-family:var(--font-dp); font-weight:700;
  font-size:12px; letter-spacing:.06em; color:var(--accent);
  background:var(--accent-tint); padding:7px 14px; border-radius:999px;
  margin-bottom:20px;
}
.member-career li{
  position:relative; padding-left:20px; margin-bottom:11px;
  font-size:14.5px; line-height:1.85;
}
.member-career li::before{
  content:""; position:absolute; left:0; top:.8em;
  width:7px; height:7px; border-radius:50%; background:var(--accent-lt);
}
.member-career > p{ margin-top:18px; font-size:13.5px; color:var(--ink-70); line-height:1.95; }

.results{ text-align:center; }
.results-label{
  display:inline-block;
  font-family:var(--font-dp); font-weight:700;
  font-size:11.5px; letter-spacing:.16em; color:var(--accent);
  background:var(--accent-tint); padding:8px 18px; border-radius:999px;
  margin-bottom:30px;
}
.results-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.result{
  background:var(--white); border-radius:var(--r-xl);
  padding:clamp(28px,3vw,42px);
  box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.6vw,34px);
  align-items:center; text-align:left;
}
.result-num{
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(58px,8vw,112px); line-height:.9;
  letter-spacing:-.05em;
  background:linear-gradient(140deg,var(--accent) 10%, #6E7DFF 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.result h3{
  font-family:var(--font-dp); font-weight:700;
  font-size:clamp(16px,1.6vw,20px); line-height:1.6; letter-spacing:-.01em;
  margin-bottom:10px;
}
.result-body p{ font-size:13.5px; color:var(--ink-70); line-height:1.95; }

/* ============================================================
   11. Flow（PC：8ステップ横1列）
============================================================ */
.flow-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  align-items:stretch;
}
.flow-step{
  position:relative;
  background:var(--white); border-radius:var(--r-lg);
  padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,34px) clamp(26px,2.8vw,36px);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.flow-step:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.flow-step:not(:last-child)::after{
  content:""; position:absolute; right:-14px; top:50%;
  width:10px; height:10px; margin-top:-5px;
  border-top:2px solid var(--rule); border-right:2px solid var(--rule);
  transform:rotate(45deg);
}
.flow-num{
  display:block;
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(38px,3.6vw,50px); line-height:1; letter-spacing:-.04em;
  color:var(--accent); margin-bottom:18px;
}
.flow-step h3{
  font-family:var(--font-dp); font-weight:700;
  font-size:clamp(17px,1.7vw,21px); line-height:1.5; letter-spacing:-.02em;
  margin-bottom:12px;
}
.flow-step p{ font-size:13.5px; color:var(--ink-70); line-height:1.9; margin-bottom:18px; }
.flow-sub{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:0; padding-top:18px; border-top:1px solid var(--rule-soft);
}
.flow-sub li{
  font-size:11.5px; letter-spacing:.02em; color:var(--ink-45);
  background:var(--paper-2); border-radius:999px; padding:5px 12px;
}

.flow-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-top:clamp(30px,3.6vw,48px);
}
.flow-facts li{
  background:var(--white); border-radius:var(--r-md);
  padding:20px 24px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:6px;
}
.flow-facts b{ font-size:11.5px; font-weight:500; letter-spacing:.1em; color:var(--ink-45); }
.flow-facts span{ font-family:var(--font-dp); font-weight:700; font-size:clamp(15px,1.4vw,18px); letter-spacing:-.01em; }

/* ============================================================
   12. Price
============================================================ */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.price-card{
  background:var(--white); border-radius:var(--r-xl);
  padding:clamp(30px,3.2vw,44px);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.price-card h3{
  font-family:var(--font-dp); font-weight:700;
  font-size:14px; letter-spacing:.02em; color:var(--ink-45);
  padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--rule);
}
.price-num{ font-family:var(--font-dp); display:flex; align-items:baseline; gap:6px; margin-bottom:18px; }
.price-num b{ font-size:clamp(38px,5vw,58px); font-weight:900; line-height:1; letter-spacing:-.04em; }
.price-num span{ font-size:15px; font-weight:700; }
.price-quote{
  font-family:var(--font-dp); font-weight:700;
  font-size:clamp(20px,2.2vw,26px); line-height:1.5; letter-spacing:-.02em;
  margin-bottom:18px;
}
.price-desc{ font-size:13.5px; line-height:1.95; color:var(--ink-70); margin-top:auto; }
.price-card--quote{
  background:linear-gradient(150deg,#F2F4FE 0%, #E7EAFD 100%);
  border:1px solid rgba(27,52,224,.12);
}

.price-cta{ margin-top:clamp(36px,4.5vw,56px); display:flex; flex-direction:column; align-items:center; gap:14px; }
.price-cta p{ font-size:13px; color:var(--ink-45); }

/* ============================================================
   13. FAQ
============================================================ */
.faq-list{
  background:var(--white); border-radius:var(--r-lg);
  padding:6px clamp(20px,2.6vw,34px);
  box-shadow:var(--shadow-sm);
}
.faq-item + .faq-item{ border-top:1px solid var(--rule-soft); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:24px 2px; text-align:left;
  font-family:var(--font-dp); font-weight:700;
  font-size:clamp(15px,1.5vw,17.5px); line-height:1.6; letter-spacing:-.01em;
  transition:color .3s;
}
.faq-q:hover{ color:var(--accent); }
.faq-icon{
  position:relative; flex:0 0 26px; height:26px;
  border-radius:50%; background:var(--accent-tint);
  transition:background .3s;
}
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; left:7px; top:50%; width:12px; height:1.8px;
  background:var(--accent); border-radius:2px;
  transition:transform .4s var(--ease);
}
.faq-icon::after{ transform:rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon{ background:var(--accent); }
.faq-q[aria-expanded="true"] .faq-icon::before,
.faq-q[aria-expanded="true"] .faq-icon::after{ background:#fff; }
.faq-q[aria-expanded="true"] .faq-icon::after{ transform:rotate(0deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease); }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding:0 2px 26px; font-size:14.5px; line-height:2.05; color:var(--ink-70); }

/* ============================================================
   14. Contact（ライト＋淡いブルーのウォッシュ）
============================================================ */
.contact{
  background:linear-gradient(180deg, #F3F5FF 0%, #EDF0FE 55%, #F5F6FA 100%);
}
.contact::before{
  background:
    radial-gradient(46% 44% at 14% 12%, rgba(27,52,224,.10), transparent 66%),
    radial-gradient(42% 42% at 86% 76%, rgba(124,140,255,.16), transparent 68%);
}
.contact-title{
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(31px,5.4vw,64px); line-height:1.24; letter-spacing:-.04em;
  margin-bottom:22px;
}
.contact-form{
  display:grid; grid-template-columns:1fr 1fr; gap:24px 28px;
  max-width:860px; margin-inline:auto;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(27,52,224,.1);
  border-radius:var(--r-xl);
  padding:clamp(28px,3.4vw,46px);
  box-shadow:0 24px 60px -34px rgba(27,52,224,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.field{ display:flex; flex-direction:column; gap:10px; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-dp); font-weight:700;
  font-size:12.5px; color:var(--ink-70);
  display:flex; align-items:center; gap:10px;
}
.req,.opt{ font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; }
.req{ background:var(--accent); color:#fff; }
.opt{ background:var(--paper-2); color:var(--ink-45); }

.contact-form input,
.contact-form textarea{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  padding:14px 16px;
  color:var(--ink); font-size:15px; line-height:1.8;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.contact-form textarea{ resize:vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#AEB3BC; }
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(27,52,224,.12);
}
.contact-form input.is-error,
.contact-form textarea.is-error{ border-color:#D93025; box-shadow:0 0 0 3px rgba(217,48,37,.1); }

.form-foot{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:18px; margin-top:6px; }
.form-note{ font-size:12px; color:var(--ink-45); }
.form-result{ grid-column:1 / -1; font-size:13.5px; min-height:1.2em; color:var(--accent); }

/* ============================================================
   15. Footer
============================================================ */
.site-footer{ background:var(--dark); color:#fff; padding:0 0 40px; }
.footer-inner{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:40px; flex-wrap:wrap;
  padding-top:56px; padding-bottom:40px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-brand{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.site-footer .logo-mark{
  width:40px; height:40px; padding:5px;
  background:#fff; border-radius:10px;
}
.footer-logo{ font-family:var(--font-dp); font-weight:900; font-size:21px; letter-spacing:.02em; }
.footer-tag{ font-family:var(--font-dp); font-weight:500; font-size:14px; color:rgba(255,255,255,.55); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:10px 26px; }
.footer-nav a{ font-size:13px; color:rgba(255,255,255,.6); transition:color .25s; }
.footer-nav a:hover{ color:#fff; }
.footer-bottom{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px; color:rgba(255,255,255,.4);
}

/* ============================================================
   16. Reveal
============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
.why-grid [data-reveal]:nth-child(2){ transition-delay:.07s; }
.why-grid [data-reveal]:nth-child(3){ transition-delay:.14s; }
.why-grid [data-reveal]:nth-child(4){ transition-delay:.21s; }

/* ============================================================
   17. Responsive
============================================================ */
@media (max-width:1200px){
}

@media (max-width:1024px){
  :root{ --pad:26px; }
  .problem-grid{ grid-template-columns:repeat(2,1fr); }
  .problem-card--wide{ grid-column:span 2; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .why-split{ grid-template-columns:1fr; gap:22px; }
  .why-x{ padding:0; font-size:20px; }
  .mkt-grid{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; }
  .member-grid{ grid-template-columns:1fr 1fr; }
  .member-career{ grid-column:span 2; }
  .flow-list{ grid-template-columns:repeat(2,1fr); }
  .flow-step:nth-child(2)::after{ display:none; }
  .results-grid{ grid-template-columns:1fr; }
  .stage-track{ --stage-unit-h:72vh; }
}

@media (max-width:820px){
  .nav{ display:none; }
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; margin-right:-10px;
  }
  .menu-toggle-bars{ display:block; width:22px; }
  .menu-toggle-bars i{ display:block; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .4s var(--ease); }
  .menu-toggle-bars i:first-child{ margin-bottom:6px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars i:first-child{ transform:translateY(3.8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bars i:last-child{ transform:translateY(-3.8px) rotate(-45deg); }
  body.menu-open{ overflow:hidden; }
  .flow-facts{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:680px){
  :root{ --pad:20px; --header-h:64px; }
  body{ font-size:15px; }
  .pc-only{ display:none; }
  .sp-only{ display:inline; }

  .hero{ min-height:auto; padding:calc(var(--header-h) + 76px) 0 90px; }
  .hero-title{ font-size:clamp(34px,11.4vw,58px); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-chips li{ font-size:11px; padding:8px 14px; }

  .problem-grid{ grid-template-columns:1fr; }
  .problem-card--wide{ grid-column:span 1; }
  .why-grid{ grid-template-columns:1fr; }
  .why-grid [data-reveal]{ transition-delay:0s !important; }
  .why-sub-grid{ grid-template-columns:1fr; }
  .mkt-cycle-list{ grid-template-columns:1fr; }
  .mkt-cycle-list li:not(:last-child)::after{ display:none; }

  .service-list{ grid-template-columns:1fr; }
  .service-list li{ flex-direction:column; gap:5px; }
  .service-list span{ min-width:0; }

  .member-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .result{ grid-template-columns:1fr; gap:6px; text-align:center; }
  .result-num{ font-size:72px; }

  /* Flow：スマホは1列 */
  .flow-list{ grid-template-columns:1fr; gap:12px; }
  .flow-step{ padding:24px 22px 26px; }
  .flow-step::after{ display:none !important; }
  .flow-num{ font-size:34px; margin-bottom:12px; }
  .flow-step h3{ font-size:17px; }
  .flow-facts{ grid-template-columns:1fr; }

  .stage-track{ --stage-unit-h:66vh; }
  .stage-frames{ aspect-ratio:4 / 3; width:min(100%, 92svh); }
  .mk-bar{ font-size:clamp(7px,1.7cqw,10px); }
  .mk-body{ font-size:clamp(6px,2.3cqw,12px); }
  .stage-message{ font-size:clamp(18px,5.6vw,26px); }
  .stage-progress i{ width:20px; }
  .stage-progress i.is-active{ width:34px; }

  .contact-form{ grid-template-columns:1fr; }
  .form-foot .btn{ width:100%; }
  .footer-inner{ flex-direction:column; gap:28px; }
}

/* ============================================================
   18. Reduced motion
============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero-title .line > span{ transform:none; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero-scroll{ display:none; }
}

/* ============================================================
   19. Section wash（Flow / FAQ / Contact の淡い背景）
============================================================ */
.flow, .faq, .contact{ overflow:hidden; }
.flow::before, .faq::before, .contact::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
}
.flow > *, .faq > *, .contact > *{ position:relative; z-index:1; }

.flow::before{
  background:
    radial-gradient(52% 46% at 10% 6%,  rgba(27,52,224,.07),  transparent 66%),
    radial-gradient(46% 44% at 92% 78%, rgba(124,140,255,.11), transparent 68%);
}
.faq::before{
  background:
    radial-gradient(48% 42% at 88% 8%,  rgba(27,52,224,.06),  transparent 66%),
    radial-gradient(44% 42% at 8%  84%, rgba(124,140,255,.10), transparent 68%);
}

/* ============================================================
   20. Marketing（届け方の中身）
============================================================ */
.marketing{ overflow:hidden; }
.marketing::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 44% at 6% 10%,  rgba(27,52,224,.07),  transparent 66%),
    radial-gradient(44% 42% at 94% 82%, rgba(124,140,255,.12), transparent 68%);
}
.marketing > *{ position:relative; z-index:1; }

.mkt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.mkt-card{
  background:var(--white); border-radius:var(--r-xl);
  padding:clamp(28px,3vw,40px);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.mkt-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.mkt-card--accent{
  background:linear-gradient(160deg,#F3F5FF 0%, #E9ECFD 100%);
  border:1px solid rgba(27,52,224,.12);
}
.mkt-en{
  display:inline-block; align-self:flex-start;
  font-family:var(--font-dp); font-weight:900;
  font-size:12px; letter-spacing:.14em; color:var(--accent);
  background:var(--accent-tint); padding:7px 15px; border-radius:999px;
  margin-bottom:22px;
}
.mkt-card--accent .mkt-en{ background:var(--accent); color:#fff; }
.mkt-card h3{
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(19px,1.9vw,24px); line-height:1.45; letter-spacing:-.03em;
  margin-bottom:12px;
}
.mkt-desc{ font-size:13.5px; line-height:1.95; color:var(--ink-70); }
.mkt-list{
  margin-top:auto; padding-top:20px;
  border-top:1px solid var(--rule-soft);
}
.mkt-list li{
  position:relative; padding-left:19px; margin-bottom:9px;
  font-size:13px; line-height:1.8; color:var(--ink-70);
}
.mkt-list li:last-child{ margin-bottom:0; }
.mkt-list li::before{
  content:""; position:absolute; left:0; top:.68em;
  width:6px; height:6px; border-radius:50%; background:var(--accent-lt);
}
.mkt-card--accent .mkt-list{ border-top-color:rgba(27,52,224,.14); }

.mkt-cycle{
  margin-top:clamp(28px,3.4vw,44px);
  background:var(--white); border-radius:var(--r-xl);
  padding:clamp(28px,3.2vw,44px);
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.mkt-cycle-head{
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(19px,2.2vw,28px); letter-spacing:-.03em;
  margin-bottom:clamp(22px,2.6vw,32px);
}
.mkt-cycle-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,24px);
  text-align:left;
}
.mkt-cycle-list li{
  position:relative;
  background:var(--paper-2); border-radius:var(--r-md);
  padding:20px 22px 22px;
}
.mkt-cycle-list li:not(:last-child)::after{
  content:""; position:absolute; right:-14px; top:50%;
  width:9px; height:9px; margin-top:-5px;
  border-top:2px solid var(--rule); border-right:2px solid var(--rule);
  transform:rotate(45deg);
}
.mkt-cycle-list span{
  display:block;
  font-family:var(--font-dp); font-weight:900;
  font-size:16px; letter-spacing:-.01em; color:var(--accent);
  margin-bottom:8px;
}
.mkt-cycle-list em{ font-style:normal; font-size:12.5px; line-height:1.8; color:var(--ink-70); }
.mkt-cycle-note{
  margin-top:clamp(22px,2.6vw,30px);
  font-size:13px; line-height:1.95; color:var(--ink-45);
  max-width:46em; margin-inline:auto;
}

/* Marketing セクションのレスポンシブ（基本形より後ろに置く必要があります） */
@media (max-width:1024px){
  .mkt-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .mkt-cycle-list{ grid-template-columns:1fr; }
  .mkt-cycle-list li:not(:last-child)::after{ display:none; }
  .mkt-card h3{ font-size:20px; }
}

/* ============================================================
   21. Design scenes（Designセクション内のスクロール連動シーン）
   - .scene        : フレーム内の演出面
   - .scene-canvas : 開始画像と同じ縦横比の座標面。子要素は % / cqw で画像座標に合わせる
   - .scene-zoom   : カメラ（ズーム・回転）をかける層
   - .scene-end    : 終了画像
   状態はすべて script.js の各シーン update(p) がスクロール進捗から計算する
============================================================ */
.scene{
  position:relative; width:100%; height:100%;
  overflow:hidden;
  background:#2FB5CF; /* ズーム中に画像の外側が見えたときの下地（海の色） */
}
.scene-canvas{
  --img-ratio:1823 / 863;
  --scene-align:.5; /* 0 = 左寄せ / .5 = 中央 */
  position:absolute; top:0;
  height:100cqh;
  width:calc(100cqh * var(--img-ratio));
  left:calc((100cqw - 100cqh * var(--img-ratio)) * var(--scene-align));
  container-type:inline-size;
}
.scene-zoom{
  position:absolute; inset:0;
  will-change:transform;
  backface-visibility:hidden;
}
.scene-img{ width:100%; height:100%; display:block; }
.scene-end{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  will-change:transform, opacity;
}

/* --- 01 Travel / TABIPASS ---
   座標は travel-start.png（1823 × 863）基準の % */
.tr-ui > *{ position:absolute; pointer-events:none; }

.tr-focus{
  left:26.66%; top:33.84%; width:23.15%; height:5.33%;
  border:.11cqw solid #2B8EE8; border-radius:.3cqw;
  box-shadow:0 0 0 .32cqw rgba(43,142,232,.16);
  opacity:0;
}
.tr-value{
  left:26.88%; top:34.3%; width:20.85%; height:4.4%;
  background:#FCFDFD;
  display:flex; align-items:center;
  padding-left:.6cqw;
  overflow:hidden;
  opacity:0;
}
.tr-value span{
  display:block;
  font-family:var(--font-ja); font-weight:500;
  font-size:.86cqw; line-height:1; letter-spacing:.02em; color:#23252B;
  white-space:nowrap;
}

.tr-dropdown{
  left:26.66%; top:39.75%; width:23.15%;
  padding:.45cqw 0;
  background:#fff;
  border:1px solid #D7DCE3; border-radius:.35cqw;
  box-shadow:0 .9cqw 2.2cqw -.6cqw rgba(16,32,64,.32), 0 .1cqw .3cqw rgba(16,32,64,.08);
  opacity:0; visibility:hidden;
  transform-origin:50% 0;
}
.tr-dd-head{
  padding:.25cqw .9cqw .4cqw;
  font-family:var(--font-ja); font-weight:700;
  font-size:.6cqw; letter-spacing:.08em; line-height:1.4; color:#8A919C;
}
.tr-dd-list li{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  height:2.15cqw; padding:0 .9cqw;
  font-family:var(--font-ja); font-weight:500;
  font-size:.8cqw; line-height:1; color:#2A2D33;
  white-space:nowrap;
}
.tr-dd-list em{
  font-style:normal; font-weight:700;
  font-size:.55cqw; letter-spacing:.06em; color:#8A919C;
  border:1px solid #DDE1E7; border-radius:999px; padding:.18cqw .45cqw;
}
.tr-dd-list li.is-hover{ color:#1477CC; }
.tr-dd-list li.is-hover em{ color:#1477CC; border-color:rgba(20,119,204,.3); }
.tr-dd-hover{
  position:absolute; z-index:0; left:.3cqw; right:.3cqw; top:0;
  height:2.15cqw; border-radius:.25cqw;
  background:#EAF4FD;
  opacity:0;
}

/* 検索ボタン：画像の該当部分を複製して「押し込み」を表現する */
.tr-btn{
  left:21.89%; top:61.65%; width:25.4%; height:7.18%;
  --press:1;
  opacity:0;
}
.tr-btn::before,
.tr-btn::after{ content:""; position:absolute; inset:0; border-radius:999px; }
.tr-btn::before{ inset:-.2cqw; background:#FDFCF8; } /* 元のボタンを隠す下地 */
.tr-btn::after{
  background:url("images/travel-start.webp") 29.34% 66.42% / 393.7% auto no-repeat;
  transform:scale(var(--press));
  filter:brightness(calc(.88 + .12 * var(--press-light, 1)));
  box-shadow:0 .2cqw .8cqw -.3cqw rgba(240,70,90,.55);
}

.tr-ripple{
  left:0; top:0; width:2.6cqw; height:2.6cqw; margin:-1.3cqw 0 0 -1.3cqw;
  border-radius:50%;
  border:.12cqw solid rgba(43,142,232,.75);
  background:rgba(43,142,232,.16);
  opacity:0;
}
.tr-ripple.is-light{ border-color:rgba(255,255,255,.9); background:rgba(255,255,255,.28); }

.tr-cursor{
  left:0; top:0; width:1.45cqw;
  transform-origin:21% 10%; /* 矢印の先端 */
  filter:drop-shadow(0 .12cqw .25cqw rgba(0,0,0,.28));
  opacity:0;
  will-change:transform;
}
.tr-cursor svg{ display:block; width:100%; height:auto; }

/* スマホ（4:3の枠）では検索フォームが見えるよう左寄せ */
@media (max-width:680px){
  .scene--travel .scene-canvas{ --scene-align:0; }
}

/* --- 05 Japanese sweets / 菓彩堂 日和 ---
   座標は wagashi-spring.png（1774 × 887）基準の %
   季節写真の位置・倍率は、春の写真の皿の縁と釉薬の模様に合わせて算出した値 */
.scene--wagashi{ background:#F6F4F0; }
.scene--wagashi .scene-canvas{ --img-ratio:1774 / 887; }

.wg-hero{
  position:absolute; inset:0;
  clip-path:inset(20.406% 0 0 0); /* ヘッダーより下（写真部分）だけ */
}
.wg-photo{
  position:absolute; max-width:none;
  opacity:0;
  will-change:opacity;
}
.wg-photo--summer{ left:-7.215%; top:14.431%; width:108.2%;  height:108.2%; }
.wg-photo--autumn{ left:-4.961%; top:17.024%; width:104.96%; height:104.4%; }
.wg-photo--winter{ left:-5.524%; top:14.205%; width:108%;    height:108%; }

/* 季節の変わり目にかかる、ごく淡い光のヴェール */
.wg-veil{ position:absolute; inset:0; opacity:0; pointer-events:none; }

.wg-fx{ position:absolute; inset:0; pointer-events:none; }
.wg-fx > i{
  position:absolute; left:0; top:0;
  display:block;
  opacity:0;
  will-change:transform, opacity;
}
.wg-fx svg{ display:block; width:100%; height:auto; overflow:visible; }
/* スクロールとは別に、その場でかすかに揺れる（止まっていても静止画に見えない） */
.wg-fx > i > span{ display:block; animation:wgFlutter var(--dur, 4s) ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes wgFlutter{
  from{ transform:rotate(-9deg) scaleX(1); }
  to  { transform:rotate(9deg) scaleX(.82); }
}
.wg-fx .wg-snow > span{
  width:100%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #fff 0 38%, rgba(255,255,255,.75) 55%, rgba(255,255,255,0) 72%);
  filter:drop-shadow(0 0 .08cqw rgba(96,108,130,.45));
  animation-name:wgDrift;
}
@keyframes wgDrift{
  from{ transform:translateX(-.25cqw); }
  to  { transform:translateX(.25cqw); }
}

.wg-copy{
  position:absolute;
  left:7.892%; top:38.331%; width:28.185%; height:61.669%;
  max-width:none;
  opacity:0;
  pointer-events:none;
}

/* スマホ（4:3の枠）：ロゴ・コピー・和菓子がすべて見えるよう、全体を収めて上下に余白をとる */
@media (max-width:680px){
  .scene--wagashi .scene-canvas{
    left:0; width:100cqw;
    height:calc(100cqw / (var(--img-ratio)));
    top:calc((100cqh - 100cqw / (var(--img-ratio))) / 2);
  }
}
.wg-fx > i{ width:1cqw; }
.wg-fx .wg-petal > span,
.wg-fx .wg-leaf > span{ filter:drop-shadow(0 .12cqw .22cqw rgba(60,30,20,.16)); }

/* --- 03 Yakiniku / 朱音 ---
   開始画像（1774 × 887）と縦長画像（1024 × 1536）。動画の位置は開始画像の肉・トングに合わせた値 */
.scene--yakiniku{ background:#0E0A08; }
.scene--yakiniku .scene-canvas{ --img-ratio:1774 / 887; }

.yk-start,
.yk-long{ position:absolute; inset:0; will-change:transform, opacity, filter; }

/* 炎の動画（canvasにマスク済みで描画）。動画 1280×720 を 1.13 倍、(217, 66) に配置 */
.yk-flame{
  position:absolute;
  left:12.232%; top:7.441%; width:81.533%; height:91.725%;
  opacity:0;
  pointer-events:none;
}
.yk-video{ position:absolute; width:2px; height:2px; opacity:0; pointer-events:none; }

/* 縦長ページ：横幅いっぱいに置き、縦方向に動かす（比率は変えない） */
.yk-long{ overflow:hidden; opacity:0; visibility:hidden; }
.yk-long-img{ position:absolute; left:0; top:0; width:100%; height:auto; max-width:none; will-change:transform; }
/* サイト内をスクロールしているように見せる、固定ヘッダー（縦長画像の上端 89px を切り出し） */
.yk-long-head{
  position:absolute; left:0; top:0; width:100%;
  aspect-ratio:1024 / 89;
  background:url("images/yakiniku-long.webp") 0 0 / 100% auto no-repeat;
  box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.45);
}

/* 炎の光の帯（スクリーン合成で明るさだけを足す） */
.yk-fire{
  position:absolute; inset:0; overflow:hidden;
  mix-blend-mode:screen;
  opacity:0; visibility:hidden;
  pointer-events:none;
}
.yk-fire i{
  position:absolute; top:-30%; left:0;
  width:95%; height:160%;
  will-change:transform;
}
.yk-fire i:nth-child(1){
  background:linear-gradient(100deg,
    rgba(0,0,0,0) 4%, rgba(120,18,4,.45) 22%, rgba(196,46,12,.75) 36%,
    rgba(252,124,36,.92) 47%, rgba(255,206,142,.95) 52%, rgba(250,112,30,.85) 58%,
    rgba(160,30,8,.5) 74%, rgba(0,0,0,0) 94%);
  filter:blur(2.2cqw);
}
.yk-fire i:nth-child(2){
  width:60%;
  background:
    radial-gradient(40% 22% at 50% 30%, rgba(255,190,110,.75), rgba(255,120,40,0) 70%),
    radial-gradient(36% 26% at 44% 68%, rgba(255,150,60,.7), rgba(200,40,10,0) 70%),
    radial-gradient(30% 20% at 60% 50%, rgba(255,226,170,.6), rgba(255,140,50,0) 70%);
  filter:blur(1.6cqw);
}

/* 火の粉 */
.yk-embers{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.yk-embers i{
  position:absolute; left:0; top:0;
  width:.5cqw; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #FFF3D6 0 25%, #FFB45A 45%, rgba(255,90,20,0) 72%);
  box-shadow:0 0 .8cqw .2cqw rgba(255,110,30,.55);
  opacity:0;
  will-change:transform, opacity;
}

/* スマホ（4:3の枠）：開始画像は全体を収める（文字・肉が切れないように） */
@media (max-width:680px){
  .scene--yakiniku .scene-canvas{
    left:0; width:100cqw;
    height:calc(100cqw / (var(--img-ratio)));
    top:calc((100cqh - 100cqw / (var(--img-ratio))) / 2);
  }
}

/* --- 02 Ryokan / 灯り庵 ---
   開始画像（1659 × 948）。写真枠は x 838.5〜1586.5 / y 332.5〜836（画像内の px）
   動画（1112 × 834）は写真と建物が重なる位置・倍率（0.586倍）で枠内に配置 */
.scene--ryokan{ background:#fff; }
/* 横幅いっぱいに合わせ、上端を基準に置く。
   PC（2:1の枠）では下の余白側がわずかに切れ、スマホ（4:3の枠）では下に白い余白が続く */
.scene--ryokan .scene-canvas{
  --img-ratio:1659 / 948;
  left:0; top:0;
  width:100cqw;
  height:calc(100cqw / (var(--img-ratio)));
}
.rk-photo{
  position:absolute;
  left:50.542%; top:35.074%; width:45.087%; height:53.112%;
  overflow:hidden;
}
.rk-video{
  position:absolute;
  left:5.882%; top:.596%; width:87.11%; height:97.06%;
  object-fit:fill; /* 比率は幅・高さの指定で 1112:834 を保っている */
  opacity:0;
  /* 動画の外周をぼかし、下の写真（PNG）へなじませる */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 4%, #000 94%, transparent 100%);
  mask-composite:intersect;
  pointer-events:none;
}
/* 夕暮れの余韻：写真枠の中だけ、少し暗く・灯りが引き立つように（値は script.js で変化） */
.rk-dusk{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(120% 110% at 55% 55%, rgba(8,12,28,0) 45%, rgba(8,12,28,.35) 100%);
  opacity:0;
}


/* ============================================================
   22. Design stage：フレーム間のトランジション
   - JS が動いている間（.is-scripted）は、フレームの表示を script.js がスクロール進捗から決める
   - JS が動かない場合は、従来どおり .is-active の切り替え（CSSのフェード）で表示する
============================================================ */
.stage-frames.is-scripted .frame{
  transition:none;
  transform:none;
  opacity:0; visibility:hidden;
}
.stage-frames.is-scripted .frame .scene,
.stage-frames.is-scripted .frame .frame-shot{ will-change:auto; }

.stage-fx{
  position:absolute; inset:0; z-index:3;
  border-radius:var(--r-lg);
  overflow:hidden;
  pointer-events:none;
  visibility:hidden;
}
.stage-fx > *{ position:absolute; inset:0; opacity:0; }
/* 旅館 → 焼肉：灯りが沈む暗がり／下から立ちのぼる炎の明かり */
.fx-dim{ background:#0B0705; }
.fx-glow{
  inset:-15% -10%;
  background:
    radial-gradient(55% 50% at 50% 100%, rgba(255,150,60,.95), rgba(220,60,14,.55) 45%, rgba(0,0,0,0) 75%),
    radial-gradient(30% 30% at 30% 92%, rgba(255,190,110,.6), rgba(0,0,0,0) 70%),
    radial-gradient(28% 28% at 72% 95%, rgba(255,170,80,.55), rgba(0,0,0,0) 70%);
  mix-blend-mode:screen;
}
/* 焼肉 → 電設：炎の光が青白いラインに変わる */
.fx-lines i{
  position:absolute; left:0; width:100%; height:2px;
  --c:255,140,50;
  background:linear-gradient(90deg, rgba(var(--c),0) 0%, rgba(var(--c),.9) 28%, #fff 50%, rgba(var(--c),.9) 72%, rgba(var(--c),0) 100%);
  box-shadow:0 0 8px rgba(var(--c),.9), 0 0 22px rgba(var(--c),.6);
  transform-origin:0 50%;
  transform:scaleX(0);
}
.fx-lines i:nth-child(1){ top:12%; }
.fx-lines i:nth-child(2){ top:24%; height:1px; }
.fx-lines i:nth-child(3){ top:37%; }
.fx-lines i:nth-child(4){ top:50%; height:3px; }
.fx-lines i:nth-child(5){ top:63%; }
.fx-lines i:nth-child(6){ top:76%; height:1px; }
.fx-lines i:nth-child(7){ top:88%; }
/* 電設 → 和菓子：設計図の線が消え、白い余白へ */
.fx-white{ background:#F6F4F0; }
.fx-grid{
  --wipe:-30%;
  background-image:
    linear-gradient(rgba(36,104,214,.42) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,104,214,.42) 1px, transparent 1px),
    linear-gradient(rgba(36,104,214,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,104,214,.16) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(90deg, transparent var(--wipe), #000 calc(var(--wipe) + 25%));
  mask-image:linear-gradient(90deg, transparent var(--wipe), #000 calc(var(--wipe) + 25%));
}


/* --- 04 Corporate / 光輪電設 ---
   開始画像（1816 × 866）と終了画像（左右を延長した 1882 × 941）。どちらも横幅に合わせ、上端を基準に置く
   （PCの2:1の枠では終了画像がちょうど収まり、開始画像とスマホでは下に白い余白が続く） */
.scene--electric{ background:#fff; }
.scene--electric .scene-canvas{
  left:0; top:0;
  width:100cqw;
  height:calc(100cqw / (var(--img-ratio)));
}
.el-start{ --img-ratio:1816 / 866; }
.el-end{ --img-ratio:1882 / 941; visibility:hidden; }

/* カードの切り出し（位置・倍率は script.js が終了画像の座標から設定） */
.el-cards > span{
  position:absolute;
  background-repeat:no-repeat;
  opacity:0;
  will-change:opacity, transform;
}

/* 設計図（SVG）：元デザインと同じ青の細い線 */
.el-plan{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.el-plan .pl{
  fill:none; stroke:#2F6FD6; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.el-plan .pl--thin{ stroke-width:.8; stroke-opacity:.7; }
.el-plan text{
  font-family:var(--font-ja); font-size:15px; font-weight:500;
  letter-spacing:.12em; fill:#2F6FD6;
}

/* 設計図の用紙：開始画像から終了画像へ移るあいだ、全体にかかる */
.el-sheet{
  position:absolute; inset:0;
  background-color:#F7F9FD;
  background-image:
    linear-gradient(rgba(47,111,214,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,111,214,.2) 1px, transparent 1px),
    linear-gradient(rgba(47,111,214,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,111,214,.08) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 24px 24px, 24px 24px;
  opacity:0; visibility:hidden;
  pointer-events:none;
}

/* ============================================================
   23. Results：数値のない実績カード
============================================================ */

/* ============================================================
   24. Yarn story（毛糸の紙飛行機・スクロール連動）
   - JSなし：コピーを縦に並べるだけ（canvas は非表示）
   - .is-scripted：sticky の固定表示面に canvas とコピーを重ねる
   - .is-static（動きを減らす設定）：sticky を使わず、完成の絵とコピーを静止表示
============================================================ */
.yarn{
  position:relative;
  /* --yarn-knit：JSが作る編み地のタイル（毛糸の作品が置かれた布のような下地） */
  background-color:#F1F3F6;
  background-image:var(--yarn-knit, none), linear-gradient(180deg, var(--paper) 0%, #F2F4F7 40%, #EEF0F4 100%);
  scroll-margin-top:70px;
}
.yarn-sticky{ position:relative; padding:clamp(84px,10vw,140px) 0; }
.yarn-canvas{ display:none; }

.yarn-copy{ position:relative; z-index:1; text-align:center; padding-inline:var(--pad); }
.yarn-copy .sec-label{ margin-bottom:clamp(14px,2vw,22px); background:rgba(232,234,253,.8); }
.yarn-msgs{ display:grid; gap:34px; }
.yarn-msg-title{
  font-family:var(--font-dp); font-weight:900;
  font-size:clamp(27px,4.2vw,50px);
  line-height:1.35; letter-spacing:-.025em;
  color:#1F2D4A;
}
.yarn-msg-sub{
  margin-top:clamp(6px,1vw,12px);
  font-size:clamp(13.5px,1.25vw,16px); line-height:1.9; color:var(--ink-70);
}
.yarn-cta{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:clamp(14px,1.8vw,22px); }
.yarn-progress{ display:none; }

/* スクロール連動 */
.yarn.is-scripted .yarn-track{ height:560vh; }
.yarn.is-scripted .yarn-sticky{
  position:sticky; top:0;
  height:100svh; padding:0;
  overflow:hidden;
}
.yarn.is-scripted .yarn-canvas{ display:block; position:absolute; inset:0; width:100%; height:100%; }
.yarn.is-scripted .yarn-copy{ padding-top:calc(var(--header-h) + clamp(14px,3vh,40px)); pointer-events:none; }
.yarn.is-scripted .yarn-msgs{ gap:0; }
.yarn.is-scripted .yarn-msg{
  grid-area:1 / 1;
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.yarn.is-scripted .yarn-msg.is-active{ opacity:1; transform:none; }
.yarn.is-scripted .yarn-msg.is-active .yarn-cta{ pointer-events:auto; }
.yarn.is-scripted .yarn-progress{
  display:flex; gap:8px;
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
}
.yarn-progress i{
  width:26px; height:3px; border-radius:999px;
  background:rgba(31,45,74,.14);
  transition:background .4s var(--ease), width .4s var(--ease);
}
.yarn-progress i.is-active{ background:#1F2D4A; width:42px; }

/* 動きを減らす設定：完成の絵（子どもが紙飛行機を受け取った状態）を静止表示 */
.yarn.is-static .yarn-track{ height:auto; }
.yarn.is-static .yarn-sticky{ position:relative; height:auto; overflow:visible; padding:clamp(84px,10vw,140px) 0; }
.yarn.is-static .yarn-copy{ padding-top:0; }
.yarn.is-static .yarn-msgs{ gap:22px; }
.yarn.is-static .yarn-msg{ grid-area:auto; opacity:1; transform:none; }
.yarn.is-static .yarn-msg-title{ font-size:clamp(20px,2.6vw,30px); }
.yarn.is-static .yarn-msg--final .yarn-msg-title{ font-size:clamp(27px,4.2vw,50px); }
.yarn.is-static .yarn-cta{ pointer-events:auto; }
.yarn.is-static .yarn-canvas{ position:relative; height:min(62vh,520px); margin-top:24px; }
.yarn.is-static .yarn-progress{ display:none; }

@media (max-width:680px){
  .yarn.is-scripted .yarn-track{ height:480vh; }
  .yarn-msg-title{ font-size:clamp(21px,6.3vw,30px); }
  .yarn-msg-sub{ font-size:13px; }
  .yarn-progress i{ width:18px; }
  .yarn-progress i.is-active{ width:30px; }
}