/* =========================================================
   Es-sense 完全運用代行 LP
   bird-and-insect.com の設計言語をミラー（モノクロ・慣性スクロール・
   画像リビール scale1.2→1・clip-path・SVG円ボタン・ヘッダー反転・巨大薄文字）
   ※エフェクト/モーション/レイアウト機構を移植。写真・コピーはEs-sense独自。
   Fonts: Archivo（DIN代替）× Zen Kaku Gothic New（太ゴ相当）
   ========================================================= */

:root {
  --bg: #0b0b0c;          /* near-black */
  --bg-2: #161617;        /* card / step */
  --bg-3: #2a2a2c;        /* faint */
  --paper: #f2f0ea;       /* off-white light section */
  --paper-2: #e7e4dc;
  --ink: #0b0b0c;
  --white: #ffffff;
  --w70: rgba(255,255,255,.72);
  --w50: rgba(255,255,255,.5);
  --w35: rgba(255,255,255,.34);
  --w16: rgba(255,255,255,.16);
  --w10: rgba(255,255,255,.1);
  --k50: rgba(11,11,12,.55);
  --k35: rgba(11,11,12,.36);
  --k14: rgba(11,11,12,.14);
  --maxw: 1600px;
  --gut: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);   /* expo-out（bi の核） */
  --lat: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --jp: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Noto Sans JP", sans-serif;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--jp);
  background: var(--bg);
  color: var(--white);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .04em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--white); color: var(--bg); }

.lat { font-family: var(--lat); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- reveal primitives ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }

/* line draw */
.draw { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease); }
.draw.in { transform: scaleX(1); }

/* image / media reveal: inner scales 1.2 -> 1, overlay fades */
.media { position: relative; overflow: hidden; }
.media__in { position: absolute; inset: 0; transform: scale(1.2); transition: transform 1.8s var(--ease); will-change: transform; }
.media.in .media__in { transform: scale(1); }
.media::after { content: ""; position: absolute; inset: 0; background: var(--bg); transform-origin: top; transform: scaleY(1); transition: transform 1.2s var(--ease); z-index: 2; }
.media.in::after { transform: scaleY(0); transform-origin: bottom; }

/* dark monochrome placeholder field (until real photos) */
.ph {
  background:
    radial-gradient(120% 90% at 70% 20%, #2c2c30 0%, #161618 45%, #0c0c0d 100%);
  position: relative;
}
.ph::before {
  content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph--light { background: radial-gradient(120% 90% at 30% 20%, #ffffff 0%, #e9e6de 55%, #d8d4ca 100%); }
.ph__tag { position: absolute; left: 16px; bottom: 14px; z-index: 3; font-family: var(--lat); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--w35); }

/* ---------- type scale ---------- */
.eyebrow { font-family: var(--lat); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--w50); display: inline-flex; align-items: center; gap: 14px; }
.eyebrow .ix { font-variant-numeric: tabular-nums; }
.eyebrow.k { color: var(--k50); }
.display { font-family: var(--jp); font-weight: 500; font-size: clamp(34px, 6.4vw, 104px); line-height: 1.04; letter-spacing: .04em; }
.h2 { font-weight: 500; font-size: clamp(26px, 4vw, 56px); line-height: 1.28; letter-spacing: .02em; }
.h3 { font-weight: 600; font-size: clamp(18px, 2.1vw, 26px); line-height: 1.5; letter-spacing: .03em; }
.lead { font-size: clamp(15px, 1.5vw, 18px); line-height: 2.1; color: var(--w70); max-width: 62ch; }
.lead.k { color: var(--k50); }
.sub-en { font-family: var(--lat); font-size: 12px; letter-spacing: .12em; color: var(--w35); line-height: 2; }
.sub-en.k { color: var(--k35); }

/* ---------- header ---------- */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 80; padding: 26px 0; mix-blend-mode: normal; transition: padding .4s var(--ease); }
.header__in { display: flex; align-items: center; justify-content: space-between; }
.logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--lat); font-weight: 600; font-size: 19px; letter-spacing: .02em; color: var(--white); transition: color .5s var(--ease); }
.logo .glyph { width: 26px; height: 26px; position: relative; }
.logo .glyph i { position: absolute; border: 1.5px solid currentColor; }
.logo .glyph i:nth-child(1) { left: 0; top: 5px; width: 11px; height: 16px; }
.logo .glyph i:nth-child(2) { right: 0; top: 0; width: 11px; height: 11px; transform: rotate(45deg); }
.logo .glyph i:nth-child(3) { right: 1px; bottom: 1px; width: 9px; height: 9px; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.nav a { font-family: var(--lat); font-size: 13px; letter-spacing: .14em; text-transform: lowercase; color: var(--white); position: relative; transition: color .5s var(--ease); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .nav__cta { border: 1px solid currentColor; padding: 9px 18px; }
.nav .nav__cta::after { display: none; }
.nav .nav__cta:hover { background: var(--white); color: var(--bg); }
/* invert when over light sections */
.header.invert .logo, .header.invert .nav a { color: var(--ink); }
.header.invert .nav .nav__cta:hover { background: var(--ink); color: var(--paper); }
.burger { display: none; width: 40px; height: 40px; flex-direction: column; gap: 6px; align-items: flex-end; justify-content: center; }
.burger span { height: 1.5px; background: var(--white); transition: .35s var(--ease); }
.burger span:nth-child(1){ width: 26px; } .burger span:nth-child(2){ width: 18px; } .burger span:nth-child(3){ width: 22px; }
.header.invert .burger span { background: var(--ink); }
.mnav { display: none; }

/* side rails (vertical text like bi) */
.rail { position: fixed; top: 0; height: 100vh; display: flex; align-items: center; z-index: 70; pointer-events: none; }
.rail span { writing-mode: vertical-rl; font-family: var(--lat); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--w35); transition: color .5s var(--ease); }
.rail--l { left: max(14px, calc((100vw - var(--maxw)) / 2 + 18px)); }
.rail--r { right: max(14px, calc((100vw - var(--maxw)) / 2 + 18px)); }
body.light-rail .rail span { color: var(--k35); }

/* ---------- buttons (SVG circle draw) ---------- */
.cbtn { display: inline-flex; align-items: center; gap: 18px; font-family: var(--lat); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.cbtn .ring { width: 58px; height: 58px; position: relative; flex: none; }
.cbtn .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.cbtn .ring circle { fill: none; stroke: currentColor; stroke-width: 1; opacity: .32; }
.cbtn .ring .prog { opacity: 1; stroke-dasharray: 179; stroke-dashoffset: 179; transition: stroke-dashoffset .9s var(--ease); }
.cbtn .ring .arr { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--lat); }
.cbtn:hover .ring .prog { stroke-dashoffset: 0; }
.cbtn:hover .ring .arr { animation: arrloop 1s var(--ease) infinite; }
@keyframes arrloop { 0%{ transform: translateX(5px);} 70%,100%{ transform: translateX(0);} }
.cbtn.k { color: var(--ink); }

/* simple text link with arrow */
.tlink { font-family: var(--lat); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.tlink .a { transition: transform .5s var(--ease); }
.tlink:hover .a { transform: translateX(6px); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; padding: 0 0 clamp(40px,7vh,90px); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* slideshow: cross-fade + slow ken-burns zoom per active slide */
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); }
.hero__slide .ph { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); }
.hero__slide.on { opacity: 1; }
.hero__slide.on .ph { transform: scale(1.14); transition: transform 7.5s linear; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,11,12,.85) 0%, rgba(11,11,12,.45) 45%, rgba(11,11,12,.15) 100%); z-index: 1; }
/* slide progress dots */
.hero__dots { position: absolute; right: clamp(20px,5vw,88px); bottom: clamp(40px,7vh,90px); z-index: 3; display: flex; gap: 12px; }
.hero__dot { width: 30px; height: 2px; background: rgba(255,255,255,.28); position: relative; overflow: hidden; cursor: pointer; }
.hero__dot::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__dot.on::after { animation: dotfill 5s linear forwards; }
@keyframes dotfill { to { transform: scaleX(1); } }
@keyframes heroZoom { to { transform: scale(1); } }
.hero__in { position: relative; z-index: 2; width: 100%; }
.hero__eyebrow { margin-bottom: 26px; }
.hero h1 { margin-bottom: 30px; }
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln i { display: block; font-style: normal; transform: translateY(105%); transition: transform 1.2s var(--ease); }
.hero.ready h1 .ln:nth-child(1) i { transform: none; transition-delay: .15s; }
.hero.ready h1 .ln:nth-child(2) i { transform: none; transition-delay: .28s; }
.hero__price { font-family: var(--lat); font-size: clamp(13px,1.4vw,15px); letter-spacing: .06em; color: var(--w70); margin-bottom: 38px; }
.hero__price b { color: var(--white); font-size: 1.3em; font-weight: 600; }
.hero__price .sep { color: var(--w35); margin: 0 14px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 28px 44px; align-items: center; }
.hero__scroll { position: absolute; left: 0; bottom: clamp(40px,7vh,90px); }
.hero__note { color: var(--w50); font-size: 12.5px; letter-spacing: .04em; margin-top: 26px; max-width: 40ch; }

/* big faint marquee word */
.marquee { overflow: hidden; border-top: 1px solid var(--w16); border-bottom: 1px solid var(--w16); }
.marquee__track { display: flex; white-space: nowrap; will-change: transform; animation: mq 28s linear infinite; }
.marquee__track span { font-family: var(--lat); font-weight: 700; font-size: clamp(56px, 13vw, 200px); letter-spacing: .02em; line-height: 1; padding: 22px 4vw 18px; color: transparent; -webkit-text-stroke: 1px var(--w16); text-transform: uppercase; }
@keyframes mq { to { transform: translateX(-50%); } }
.marquee--k { border-color: var(--k14); }
.marquee--k .marquee__track span { -webkit-text-stroke: 1px var(--k14); }

/* ---------- section frame ---------- */
.sec { position: relative; padding: clamp(90px, 15vh, 200px) 0; }
.sec--light { background: var(--paper); color: var(--ink); }
.sec--light .lead { color: var(--k50); }
.sec__head { display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: clamp(48px,8vh,96px); }
.sec__rule { height: 1px; background: var(--w16); margin-bottom: 40px; }
.sec--light .sec__rule { background: var(--k14); }

/* statement (intro) */
.stmt { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(28px,5vw,80px); align-items: end; }
.stmt__big { font-weight: 400; font-size: clamp(24px,3.4vw,46px); line-height: 1.7; letter-spacing: .02em; }
.stmt__big .em { box-shadow: inset 0 -.12em 0 var(--white); }
.sec--light .stmt__big .em { box-shadow: inset 0 -.12em 0 var(--ink); }
.stmt__side .sub-en { display: block; }

/* problem rows (editorial, ruled) */
.rows { border-top: 1px solid var(--w16); }
.sec--light .rows { border-top: 1px solid var(--k14); }
.row { display: grid; grid-template-columns: 70px 1.1fr 1fr; gap: clamp(16px,3vw,56px); padding: clamp(22px,3vh,40px) 0; border-bottom: 1px solid var(--w16); align-items: baseline; transition: padding-left .5s var(--ease); }
.sec--light .row { border-bottom: 1px solid var(--k14); }
.row:hover { padding-left: 12px; }
.row__no { font-family: var(--lat); font-size: 12px; letter-spacing: .1em; color: var(--w35); }
.sec--light .row__no { color: var(--k35); }
.row__q { font-size: clamp(17px,1.9vw,23px); font-weight: 600; line-height: 1.6; letter-spacing: .02em; }
.row__a { font-size: 14px; line-height: 1.9; color: var(--w50); }
.sec--light .row__a { color: var(--k50); }
.row__a b { color: var(--white); font-weight: 700; }
.sec--light .row__a b { color: var(--ink); }

/* insight bridge */
.bridge { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px,5vw,90px); align-items: center; }
.bridge__metrics { border-top: 1px solid var(--w16); }
.bmrow { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--w16); }
.bmrow .n { font-family: var(--lat); font-weight: 700; font-size: clamp(26px,3vw,40px); letter-spacing: .01em; }
.bmrow .l { font-size: 12.5px; color: var(--w50); letter-spacing: .04em; }

/* service editorial rows w/ media */
.svc { border-top: 1px solid var(--w16); }
.srow { display: grid; grid-template-columns: 70px 280px 1fr 200px; gap: clamp(16px,2.5vw,48px); padding: clamp(24px,3.5vh,44px) 0; border-bottom: 1px solid var(--w16); align-items: center; transition: padding-left .5s var(--ease); }
.srow:hover { padding-left: 12px; }
.srow__no { font-family: var(--lat); font-size: 12px; letter-spacing: .1em; color: var(--w35); }
.srow__h { font-size: clamp(18px,2vw,24px); font-weight: 600; letter-spacing: .03em; }
.srow__tag { font-family: var(--lat); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--w35); display: block; margin-top: 8px; }
.srow__p { font-size: 14px; line-height: 1.9; color: var(--w50); }
.srow__media { height: 88px; }
.srow:hover .media__in { transform: scale(1.06); }

/* trust */
.trust { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px,5vw,80px); align-items: start; }
.founder__h { font-size: clamp(22px,2.8vw,36px); font-weight: 500; line-height: 1.5; letter-spacing: .02em; margin: 18px 0 24px; }
.founder__p { color: var(--k50); font-size: 15px; line-height: 2; max-width: 50ch; margin-bottom: 36px; }
.founder__stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--k14); }
.founder__stats .c { padding: 24px 0; border-bottom: 1px solid var(--k14); }
.founder__stats .n { font-family: var(--lat); font-weight: 700; font-size: clamp(30px,3.6vw,52px); letter-spacing: .01em; line-height: 1; }
.founder__stats .n .u { font-size: .32em; color: var(--k35); margin-left: 4px; }
.founder__stats .l { font-size: 12px; color: var(--k35); margin-top: 12px; letter-spacing: .04em; }
.tpoints { border-top: 1px solid var(--k14); }
.tp { padding: 24px 0; border-bottom: 1px solid var(--k14); }
.tp h4 { font-size: 15.5px; font-weight: 600; letter-spacing: .03em; margin-bottom: 8px; display: flex; gap: 14px; }
.tp h4 .m { font-family: var(--lat); color: var(--k35); font-size: 12px; }
.tp p { font-size: 13.5px; color: var(--k50); line-height: 1.9; }

/* pricing */
.price { display: grid; grid-template-columns: 1.3fr 1fr; border-top: 1px solid var(--k14); border-left: 1px solid var(--k14); }
.price__col { padding: clamp(28px,4vw,52px); border-right: 1px solid var(--k14); border-bottom: 1px solid var(--k14); }
.price__k { font-family: var(--lat); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--k35); margin-bottom: 22px; }
.price__big { font-family: var(--lat); font-weight: 700; font-size: clamp(48px,7.5vw,104px); line-height: .9; letter-spacing: -.02em; }
.price__big .u { font-size: .22em; color: var(--k35); letter-spacing: .02em; }
.price__plus { font-family: var(--lat); font-size: 16px; color: var(--k50); margin-top: 20px; letter-spacing: .04em; }
.price__plus b { color: var(--ink); font-size: 1.5em; font-weight: 700; }
.price__list { margin-top: 30px; display: grid; gap: 12px; }
.price__list li { font-size: 13.5px; color: var(--k50); padding-left: 24px; position: relative; line-height: 1.7; }
.price__list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 10px; height: 1px; background: var(--ink); }
.price__note { font-size: 12px; color: var(--k35); margin-top: 22px; line-height: 1.8; }

.split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--k14); margin-top: 28px; }
.split__c { padding: clamp(24px,3.5vw,40px); }
.split__c:first-child { border-right: 1px solid var(--k14); }
.split__c h4 { font-size: 14px; font-weight: 700; letter-spacing: .03em; display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--k14); }
.split__c h4 .pill { font-family: var(--lat); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; background: var(--ink); color: var(--paper); }
.split__c h4 .pill--o { background: transparent; color: var(--ink); border: 1px solid var(--k14); }
.split__c li { font-size: 13px; color: var(--k50); padding: 7px 0 7px 18px; position: relative; line-height: 1.7; }
.split__c li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 1px; background: var(--k35); }

.cmpwrap { overflow-x: auto; margin-top: 28px; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
table.cmp th, table.cmp td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--k14); vertical-align: top; }
table.cmp thead th { border-bottom: 1px solid var(--ink); font-family: var(--lat); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--k35); font-weight: 600; }
table.cmp thead th.es { color: var(--ink); }
table.cmp td:first-child { color: var(--k35); font-size: 13px; }
table.cmp td.es { color: var(--ink); font-weight: 700; }
table.cmp .lat { font-family: var(--lat); }
table.cmp tr:last-child td { border-bottom: 1px solid var(--ink); }

/* simulator (dark inside light section) */
.sim { margin-top: 52px; background: var(--bg); color: var(--white); }
.sim__top { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; padding: clamp(26px,3.5vw,44px) clamp(24px,4vw,52px) 0; }
.sim__top h3 { font-size: clamp(20px,2.4vw,28px); font-weight: 700; letter-spacing: .03em; }
.sim__top .t { font-family: var(--lat); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--w35); }
.sim__ctl { padding: 34px clamp(24px,4vw,52px) 0; }
.sim__ctl label { font-size: 13px; color: var(--w50); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; letter-spacing: .04em; }
.sim__ctl label b { font-family: var(--lat); font-size: clamp(24px,3.2vw,34px); color: var(--white); font-weight: 700; }
.sim input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 1px; background: var(--w35); outline: none; }
.sim input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; background: var(--white); cursor: pointer; border-radius: 50%; }
.sim input[type=range]::-moz-range-thumb { width: 16px; height: 16px; background: var(--white); cursor: pointer; border: 0; border-radius: 50%; }
.sim__out { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--w16); margin-top: 40px; }
.sim__cell { padding: 30px clamp(20px,3vw,36px); border-left: 1px solid var(--w16); }
.sim__cell:first-child { border-left: 0; }
.sim__cell .l { font-family: var(--lat); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--w35); margin-bottom: 14px; }
.sim__cell .v { font-family: var(--lat); font-size: clamp(24px,3.4vw,40px); font-weight: 700; letter-spacing: -.01em; }
.sim__cell--es { background: var(--white); }
.sim__cell--es .l { color: var(--k35); }
.sim__cell--es .v { color: var(--ink); }
.sim__verdict { padding: 24px clamp(24px,4vw,52px); border-top: 1px solid var(--w16); font-size: 14.5px; line-height: 1.8; color: var(--w70); }
.sim__verdict b { color: var(--white); font-family: var(--lat); }
.sim__foot { padding: 0 clamp(24px,4vw,52px) clamp(26px,3.5vw,44px); font-size: 11.5px; color: var(--w35); line-height: 1.8; }
.sim__foot .lat { color: var(--w50); }

/* steps */
.steps { border-top: 1px solid var(--w16); }
.steprow { display: grid; grid-template-columns: 110px 280px 1fr; gap: clamp(16px,3vw,48px); padding: clamp(22px,3vh,40px) 0; border-bottom: 1px solid var(--w16); align-items: baseline; }
.steprow__n { font-family: var(--lat); font-weight: 700; font-size: clamp(22px,2.8vw,36px); letter-spacing: .01em; color: var(--white); }
.steprow__h { font-size: clamp(17px,2vw,22px); font-weight: 600; letter-spacing: .03em; }
.steprow__p { font-size: 14px; line-height: 1.9; color: var(--w50); }

/* faq */
.faq { border-top: 1px solid var(--w16); }
.faq__item { border-bottom: 1px solid var(--w16); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(22px,3vh,34px) 0; text-align: left; font-size: clamp(16px,1.9vw,21px); font-weight: 600; letter-spacing: .03em; line-height: 1.5; }
.faq__q .mk { width: 18px; height: 18px; position: relative; flex: none; }
.faq__q .mk::before, .faq__q .mk::after { content: ""; position: absolute; background: var(--white); transition: transform .4s var(--ease), opacity .4s var(--ease); }
.faq__q .mk::before { left: 0; right: 0; top: 8px; height: 1px; }
.faq__q .mk::after { top: 0; bottom: 0; left: 8px; width: 1px; }
.faq__item.open .mk::after { transform: rotate(90deg); opacity: 0; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq__a p { padding: 0 0 clamp(22px,3vh,34px); font-size: 14.5px; line-height: 2; color: var(--w50); max-width: 80ch; }

/* contact / form */
.final { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--k14); }
.final__l { padding: clamp(36px,5vw,72px); border-right: 1px solid var(--k14); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.final__l p { color: var(--k50); font-size: 15px; line-height: 2; max-width: 38ch; }
.final__r { padding: clamp(28px,4vw,56px); }
.fprog { display: flex; align-items: center; gap: 16px; margin-bottom: 34px; }
.fprog__bar { flex: 1; height: 1px; background: var(--k14); position: relative; }
.fprog__bar::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: var(--p,50%); background: var(--ink); transition: width .4s var(--ease); }
.fprog__txt { font-family: var(--lat); font-size: 11px; letter-spacing: .1em; color: var(--k35); }
.fstep { display: none; }
.fstep.active { display: block; animation: ffin .4s var(--ease); }
@keyframes ffin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fgrid { display: grid; gap: 22px; }
.fgrid--2 { grid-template-columns: 1fr 1fr; }
.field label { display: block; font-family: var(--lat); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--k35); margin-bottom: 10px; }
.field label .req { color: var(--ink); margin-left: 5px; }
.field input, .field select, .field textarea { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--k14); background: transparent; font-size: 16px; font-family: inherit; color: var(--ink); transition: border-color .3s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--k35); }
.factions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; }
.fnote { font-size: 11.5px; color: var(--k35); margin-top: 22px; line-height: 1.8; }
.fnote a { color: var(--ink); border-bottom: 1px solid var(--k14); }
.fdone { display: none; padding: 36px 0; }
.fdone.show { display: block; }
.fdone .mk { font-family: var(--lat); font-size: 30px; }
.fdone h3 { font-size: 22px; font-weight: 700; letter-spacing: .03em; margin: 16px 0 12px; }
.fdone p { color: var(--k50); font-size: 14px; }

/* footer */
.footer { background: var(--paper); color: var(--ink); padding: clamp(60px,8vh,110px) 0 40px; }
.footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: clamp(40px,6vh,72px); border-bottom: 1px solid var(--k14); }
.footer__top p { color: var(--k50); font-size: 13px; line-height: 1.9; max-width: 32ch; margin-top: 16px; }
.footer__col h4 { font-family: var(--lat); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--k35); margin-bottom: 18px; }
.footer__col li { margin-bottom: 12px; }
.footer__col a { font-size: 13.5px; color: var(--k50); transition: color .3s; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 32px; font-family: var(--lat); font-size: 11px; letter-spacing: .08em; color: var(--k35); }

/* company page */
.phero { padding: clamp(120px,18vh,220px) 0 clamp(48px,7vh,96px); border-bottom: 1px solid var(--w16); }
.cotable { width: 100%; border-collapse: collapse; font-size: 15px; border-top: 1px solid var(--w16); }
.cotable th, .cotable td { text-align: left; padding: 22px 0; border-bottom: 1px solid var(--w16); vertical-align: top; }
.cotable th { width: 220px; font-family: var(--lat); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--w35); font-weight: 600; white-space: nowrap; }
.cotable a { border-bottom: 1px solid var(--w35); }
.philo { display: grid; gap: 20px; max-width: 70ch; }
.philo p { font-size: clamp(16px,2vw,20px); line-height: 2.1; }
.mgrid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--w16); border-left: 1px solid var(--w16); margin-top: 8px; }
.mcard { padding: clamp(28px,3.5vw,48px); border-right: 1px solid var(--w16); border-bottom: 1px solid var(--w16); }
.mcard .num { font-family: var(--lat); font-weight: 700; font-size: clamp(34px,4.5vw,60px); letter-spacing: -.01em; line-height: 1; margin-bottom: 24px; }
.mcard h3 { font-size: 18px; font-weight: 700; letter-spacing: .03em; margin-bottom: 16px; }
.mcard p { font-size: 14px; line-height: 1.95; color: var(--w50); }
.mind__q { font-weight: 700; font-size: clamp(22px,3.4vw,40px); line-height: 1.9; letter-spacing: .03em; margin-bottom: 32px; }
.mind__d p { color: var(--w50); font-size: 15px; line-height: 2; }
.existence { font-size: clamp(18px,2.4vw,28px); line-height: 2.1; letter-spacing: .04em; max-width: 70ch; font-weight: 500; }

/* ================= deep-scroll effects (bird-and-insect mirror) ================= */

/* full-bleed photo band w/ parallax + scale reveal + caption */
.band { position: relative; height: clamp(60vh, 78vh, 900px); overflow: hidden; background: var(--bg); }
.band__media { position: absolute; inset: -30% 0; will-change: transform; }
.band__media img, .band__media .ph { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 2s var(--ease); }
.band.in .band__media img, .band.in .band__media .ph { transform: scale(1); }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,12,.5), rgba(11,11,12,.15) 40%, rgba(11,11,12,.6)); z-index: 1; }
.band__cap { position: absolute; z-index: 2; left: var(--gut); bottom: clamp(34px,6vh,72px); right: var(--gut); }
.band__cap .k { font-family: var(--lat); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--w50); display: block; margin-bottom: 18px; overflow: hidden; }
.band__cap .k i { display: block; font-style: normal; transform: translateY(110%); transition: transform 1s var(--ease) .2s; }
.band.in .band__cap .k i { transform: none; }
.band__cap h2 { font-weight: 500; font-size: clamp(26px,4.4vw,64px); line-height: 1.25; letter-spacing: .02em; }
.band__cap h2 .ln { display: block; overflow: hidden; }
.band__cap h2 .ln i { display: block; font-style: normal; transform: translateY(110%); transition: transform 1.1s var(--ease); }
.band.in .band__cap h2 .ln:nth-child(1) i { transform: none; transition-delay: .28s; }
.band.in .band__cap h2 .ln:nth-child(2) i { transform: none; transition-delay: .4s; }

/* branding-style asymmetric image cluster */
.cluster { position: relative; }
.cluster__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(60px, 7vw, 110px); gap: 0; }
.cluster .cell { position: relative; overflow: hidden; }
.cluster .cell .ph, .cluster .cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.9s var(--ease), opacity .6s linear; opacity: 0; }
.cluster .cell.in .ph, .cluster .cell.in img { transform: scale(1); opacity: 1; }
.cluster .c1 { grid-column: 1 / 6;  grid-row: 1 / 5; }
.cluster .c2 { grid-column: 7 / 13; grid-row: 2 / 5; }
.cluster .c3 { grid-column: 2 / 6;  grid-row: 6 / 9; }
.cluster .c4 { grid-column: 7 / 11; grid-row: 6 / 10; }
.cluster .cap { max-width: 640px; margin-bottom: 40px; }

/* service rows: hovering shows a fixed bg image behind list */
.svc-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.svc-bg .layer { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.svc-bg .layer img, .svc-bg .layer .ph { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); }
.svc-bg .layer.on { opacity: .22; }
.svc-host { position: relative; }
.svc-host .svc { position: relative; z-index: 1; }

/* vertical divide line w/ clip mask loop */
.divline { width: 1px; height: clamp(80px,12vh,160px); margin: 0 auto; background: var(--w35); animation: vmask 3.2s var(--ease) infinite; }
.sec--light .divline { background: var(--k35); }
@keyframes vmask { 0%{clip-path: inset(0 0 100% 0);} 30%{clip-path: inset(0);} 70%{clip-path: inset(0);} 100%{clip-path: inset(100% 0 0 0);} }

/* footer pull-up */
.footer { overflow: hidden; }
.footer__inner { will-change: transform; }

/* split-screen: text one side, full-bleed photo other side */
.split-scr { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(70vh, 86vh, 920px); }
.split-scr--rev { grid-template-columns: 1fr 1fr; }
.split-scr__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,7vw,120px) var(--gut); }
.split-scr__media { position: relative; overflow: hidden; }
.split-scr__media .ph, .split-scr__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 2s var(--ease); }
.split-scr.in .split-scr__media .ph, .split-scr.in .split-scr__media img { transform: scale(1); }
.split-scr__media::after { content: ""; position: absolute; inset: 0; background: var(--bg); transform-origin: left; transition: transform 1.2s var(--ease); z-index: 2; }
.split-scr.in .split-scr__media::after { transform: scaleX(0); transform-origin: right; }
.split-scr__cap { position: absolute; z-index: 3; left: 24px; bottom: 22px; font-family: var(--lat); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--w50); }

/* english label + circle button band (bird-and-insect connector) */
.lblband { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(40px,6vh,80px) 0; border-top: 1px solid var(--w16); border-bottom: 1px solid var(--w16); }
.sec--light .lblband { border-color: var(--k14); }
.lblband__t { font-weight: 700; font-size: clamp(20px,3vw,40px); letter-spacing: .02em; line-height: 1.4; }
.lblband__t .en { font-family: var(--lat); display: block; font-size: .42em; letter-spacing: .12em; color: var(--w35); text-transform: uppercase; margin-bottom: 12px; font-weight: 500; }
.sec--light .lblband__t .en { color: var(--k35); }

/* cluster stagger */
.cluster .c1 { transition-delay: 0s; }
.cluster .c2 { transition-delay: .12s; }
.cluster .c3 { transition-delay: .24s; }
.cluster .c4 { transition-delay: .36s; }

/* page transition mask (subtle, between index<->company) */
.tmask { position: fixed; inset: 0; z-index: 9999; background: var(--bg); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.tmask.show { transform: scaleY(1); transition: transform .55s var(--ease); }
.tmask.hide { transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rv, .draw, .media__in, .media::after, .hero__media .ph, .hero h1 .ln i,
  .band__media img, .band__media .ph, .band__cap .k i, .band__cap h2 .ln i,
  .cluster .cell .ph, .cluster .cell img { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; }
  .media::after, .band::after { }
  .marquee__track, .divline { animation: none; }
  .cluster .cell .ph, .cluster .cell img { opacity: 1 !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .rail { display: none; }
  .stmt, .bridge, .trust, .price, .split, .final { grid-template-columns: 1fr; }
  .split-scr { grid-template-columns: 1fr; min-height: 0; }
  .split-scr__text { padding: clamp(48px,9vw,90px) var(--gut); }
  .split-scr__media { min-height: 58vh; order: 2; }
  .price__col:first-child, .split__c:first-child, .final__l { border-right: 0; border-bottom: 1px solid var(--k14); }
  .srow { grid-template-columns: 60px 1fr; }
  .srow__media { display: none; }
  .srow__p { grid-column: 2; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  /* ハンバーガー/nav ブレークポイントを768pxに前倒し */
  .nav { display: none; }
  .burger { display: flex; }
  .row { grid-template-columns: 44px 1fr; }
  .row__a { grid-column: 2; }
  .founder__stats, .sim__out { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header.open .burger span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); width: 26px;}
  .header.open .burger span:nth-child(2){ opacity: 0;}
  .header.open .burger span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); width: 26px;}
  .mnav { display: block; position: fixed; inset: 0; background: var(--bg); z-index: 75; padding: 100px var(--gut) 40px; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
  .header.open ~ .mnav, body.menu-open .mnav { opacity: 1; pointer-events: auto; }
  .mnav a { display: block; font-family: var(--lat); font-size: 26px; letter-spacing: .04em; text-transform: lowercase; color: var(--white); padding: 16px 0; border-bottom: 1px solid var(--w16); }
  .row { grid-template-columns: 44px 1fr; }
  .row__a { grid-column: 2; }
  .steprow { grid-template-columns: 64px 1fr; }
  .steprow__p { grid-column: 2; }
  .founder__stats, .sim__out, .mgrid { grid-template-columns: 1fr; }
  .founder__stats .c { border-bottom: 1px solid var(--k14); }
  .sim__cell { border-left: 0; border-top: 1px solid var(--w16); }
  .fgrid--2 { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .hero { min-height: 92vh; }
  .band { height: 64vh; }
  .band__cap h2 { font-size: clamp(24px,7vw,40px); }
  .cluster__grid { grid-auto-rows: clamp(46px,11vw,80px); }
  .cluster .c1 { grid-column: 1/8; } .cluster .c2 { grid-column: 6/13; }
  .cluster .c3 { grid-column: 1/7; } .cluster .c4 { grid-column: 7/13; }
  .cluster .cap { position: static; max-width: none; margin-top: 24px; }
  .svc-bg { display: none; }
  /* h1 行間 日本語対応 */
  .display { line-height: 1.35; }
  /* タップターゲット最小44px */
  .tlink { min-height: 44px; padding-top: 7px; padding-bottom: 7px; display: inline-flex; align-items: center; }
  .logo { min-height: 44px; }
  .nav__cta { min-height: 44px; padding: 11px 18px; }
  /* 比較表: min-width固定を解除してモバイルでの内部スクロールを軽減 */
  .cmpwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; }
  .cmpwrap::after { content: ""; position: absolute; top: 0; right: 0; width: 32px; height: 100%; background: linear-gradient(to right, transparent, var(--paper)); pointer-events: none; z-index: 1; }
  table.cmp { min-width: unset; width: 100%; }
  table.cmp th, table.cmp td { padding: 14px 10px; font-size: 12px; }
  table.cmp th:nth-child(1), table.cmp td:nth-child(1) { width: 80px; min-width: 80px; }
}
/* band 縦高さ調整 (タブレット) */
@media (max-width: 900px) {
  .band { height: clamp(50vh, 60vh, 600px); }
}
/* レール: ライト背景での視認性を上げる(薄すぎ対策) */
body.light-rail .rail span { color: rgba(11,11,12,.5); }
/* 狭幅(<=430): ヒーローCTAを縦積みにして窮屈さを解消 */
@media (max-width: 430px) {
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__price { margin-bottom: 28px; }
  .hero__note { margin-top: 22px; }
}
/* 極小幅(<=380): 見出し・余白をさらに最適化 */
@media (max-width: 380px) {
  :root { --gut: 18px; }
  .display { font-size: clamp(30px, 9vw, 38px); line-height: 1.4; }
  .hero { min-height: 100vh; }
  .hero__price { font-size: 12px; }
  .cbtn { gap: 14px; font-size: 12px; }
  .cbtn .ring { width: 50px; height: 50px; }
  .marquee__track span { font-size: clamp(44px, 16vw, 80px); }
  .band__cap h2 { font-size: clamp(22px, 8vw, 32px); }
}