/* =========================================================
   SHADE — CAR FILM STUDIO
   direction : dark-luxury × precision × 「光を、設計する」
   display   : Saira Condensed / jp : Zen Kaku Gothic New
   accent    : ice blue #5AC8F5
   ========================================================= */

:root{
  --bg:#06080C;
  --bg-2:#0B1016;
  --surface:#12181F;
  --surface-2:#182027;
  --line:rgba(198,210,220,.10);
  --line-2:rgba(198,210,220,.20);
  --ink:#EAF1F6;
  --dim:#A3B0BB;
  --mute:#6B7884;
  --ice:#5AC8F5;
  --ice-soft:#9BDDFA;
  --ice-deep:#1E7FA8;
  --glow:rgba(90,200,245,.55);
  --wrap:1180px;
  --pad:clamp(20px,5.2vw,60px);
  --r:14px;
  --ease:cubic-bezier(.16,.84,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  font-weight:400;
  line-height:1.95;
  letter-spacing:.015em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(110% 70% at 78% -12%, rgba(90,200,245,.10), transparent 58%),
    radial-gradient(90% 55% at 2% 104%, rgba(90,200,245,.05), transparent 62%);
}
img,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
::selection{ background:var(--ice); color:#04121a; }
:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ice); color:#04121a; padding:12px 18px; border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{ left:0; }

/* ---------- typography helpers ---------- */
.en{
  font-family:"Saira Condensed", "Zen Kaku Gothic New", sans-serif;
  text-transform:uppercase; letter-spacing:.02em; line-height:.95;
}
.num{ font-family:"Saira Condensed",sans-serif; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.kicker{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
  font-family:"Saira Condensed",sans-serif; font-weight:600;
  font-size:.82rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--ice); box-shadow:0 0 12px var(--glow); }

.sec-head{ margin-bottom:clamp(30px,5vw,54px); }
.sec-head__num{
  display:block; font-family:"Saira Condensed",sans-serif; font-weight:800;
  font-size:clamp(3.4rem,11vw,6.2rem); line-height:.78;
  color:transparent; -webkit-text-stroke:1.3px rgba(198,210,220,.13);
  margin-bottom:-.26em; user-select:none;
}
.sec-head__en{
  font-family:"Saira Condensed",sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.2rem,8.6vw,4.4rem); line-height:.98; margin:0; letter-spacing:.015em;
  background:linear-gradient(178deg,#ffffff 0%, #dfe9f0 42%, #75838d 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-head__en .hl{ -webkit-text-fill-color:var(--ice); color:var(--ice); }
.sec-head__ja{ font-weight:900; font-size:clamp(1.08rem,4.4vw,1.52rem); margin:.55em 0 0; letter-spacing:.03em; }
.sec-head__lead{ margin:1em 0 0; max-width:54ch; color:var(--dim); font-size:clamp(.94rem,2.6vw,1.02rem); }

section{ position:relative; z-index:1; }
.band{ padding-block:clamp(60px,10vw,116px); }
.band--alt{ background:linear-gradient(180deg,var(--bg) 0%, #0A0F14 48%, var(--bg) 100%); }
.band--tight{ padding-top:0; }

/* thin light beam divider */
.beam{ height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent,rgba(90,200,245,.55),transparent); }

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s, backdrop-filter .35s;
}
.site-header.scrolled{
  background:rgba(6,8,12,.84);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-bottom-color:var(--line);
}
.hdr{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:13px; }
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand__mark{
  position:relative; width:34px; height:34px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(118deg,#EAF1F6 0% 48%, #0A0F14 48% 100%);
  box-shadow:0 0 0 1px rgba(198,210,220,.28), 0 0 20px -6px var(--glow);
}
.brand__mark::after{
  content:""; position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px;
  background:var(--ice); box-shadow:0 0 10px var(--glow); transform:rotate(-32deg);
}
.brand__txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand__en{ font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:1.02rem; letter-spacing:.26em; text-transform:uppercase; }
.brand__ja{ font-size:.66rem; letter-spacing:.16em; color:var(--dim); font-weight:500; }

.nav{ display:flex; align-items:center; gap:2px; }
.nav a{
  font-size:.86rem; font-weight:500; letter-spacing:.06em; color:var(--dim);
  padding:10px 13px; border-radius:8px; white-space:nowrap;
  transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--ink); background:rgba(198,210,220,.06); }
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{
  content:""; display:block; height:2px; margin-top:4px; background:var(--ice); box-shadow:0 0 10px var(--glow);
}

.hdr-cta{ display:flex; align-items:center; gap:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:1rem; letter-spacing:.08em;
  padding:13px 22px; border-radius:10px; border:1px solid transparent; line-height:1; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .2s;
}
.btn:active{ transform:scale(.97); }
.btn--ice{
  background:linear-gradient(180deg,#6FD3F8,#2497C9);
  color:#04121a; font-weight:700;
  box-shadow:0 10px 26px -10px rgba(90,200,245,.75), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--ice:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(90,200,245,.9), inset 0 1px 0 rgba(255,255,255,.5); }
.btn--ghost{ background:rgba(198,210,220,.05); color:var(--ink); border-color:var(--line-2); backdrop-filter:blur(6px); }
.btn--ghost:hover{ border-color:var(--ice); color:#fff; transform:translateY(-2px); }
.btn--lg{ padding:17px 30px; font-size:1.1rem; }
.btn--block{ width:100%; }
.btn__i{ width:16px; height:16px; flex:0 0 auto; }
.hdr-cta .btn{ padding:11px 17px; font-size:.92rem; }
.menu-toggle{ display:none; }

/* mobile drawer */
.drawer{ position:fixed; inset:0; z-index:70; display:none; background:rgba(4,6,9,.94); backdrop-filter:blur(12px); }
.drawer.open{ display:block; }
.drawer__inner{ padding:86px var(--pad) 40px; display:flex; flex-direction:column; gap:4px; }
.drawer a{
  display:flex; align-items:baseline; gap:14px; padding:16px 4px;
  border-bottom:1px solid var(--line); font-weight:700; font-size:1.12rem; letter-spacing:.04em;
}
.drawer a .en{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.24em; color:var(--mute); }
.drawer__cta{ margin-top:22px; display:flex; flex-direction:column; gap:12px; }
.drawer__close{
  position:absolute; top:18px; right:var(--pad); width:44px; height:44px;
  border:1px solid var(--line-2); border-radius:10px; background:transparent;
  display:grid; place-items:center; font-size:1.4rem;
}

/* ---------- hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#04060A; }
.hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(4,6,10,.78) 0%, rgba(4,6,10,.18) 30%, rgba(4,6,10,.46) 62%, rgba(4,6,10,.96) 100%),
    radial-gradient(70% 52% at 22% 62%, rgba(90,200,245,.16), transparent 62%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-block:118px 104px; }
.hero__kicker{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 20px;
  font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.82rem;
  letter-spacing:.26em; text-transform:uppercase;
}
.hero__kicker::before{ content:""; width:28px; height:2px; background:var(--ice); box-shadow:0 0 14px var(--glow); }
.hero__title{
  margin:0; font-weight:900; letter-spacing:.02em;
  font-size:clamp(2.6rem,11vw,5.4rem); line-height:1.1;
  text-shadow:0 6px 46px rgba(0,0,0,.6);
}
.hero__title .accent{ color:var(--ice); text-shadow:0 0 34px rgba(90,200,245,.5); white-space:nowrap; }
.hero__lead{
  margin:24px 0 0; max-width:38ch; color:#D3DDE4; font-size:clamp(1rem,3.2vw,1.14rem); line-height:1.85;
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:32px; }
.hero__note{ margin:18px 0 0; font-size:.78rem; color:var(--dim); letter-spacing:.05em; }

/* rotating one-liners */
.hero__type{
  margin:0 0 14px; min-height:1.5em;
  font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:clamp(.94rem,3vw,1.06rem);
  letter-spacing:.18em; color:var(--ice-soft);
}
.hero__type .cursor{ display:inline-block; width:2px; height:1em; background:var(--ice); vertical-align:-.12em; margin-left:3px; animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.scroll-cue{
  position:absolute; left:50%; bottom:20px; z-index:3; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:"Saira Condensed",sans-serif; font-size:.66rem; letter-spacing:.32em; color:var(--mute); text-transform:uppercase;
}
.scroll-cue__line{ width:1px; height:38px; background:linear-gradient(var(--ice),transparent); animation:cue 2.1s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(.2);transform-origin:top;opacity:.35} 50%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(.2);transform-origin:bottom;opacity:.35} }
@media (max-height:880px){ .scroll-cue{ display:none; } }

/* page hero (下層) */
.phero{ position:relative; min-height:clamp(300px,52vw,440px); display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--line); }
.phero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.phero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,6,10,.82) 0%, rgba(4,6,10,.42) 45%, rgba(4,6,10,.92) 100%);
}
.phero__body{ position:relative; z-index:2; padding-block:clamp(84px,12vw,110px) clamp(34px,6vw,56px); }
.phero__en{ font-family:"Saira Condensed",sans-serif; font-weight:800; text-transform:uppercase; font-size:clamp(2.4rem,10vw,4.4rem); line-height:.98; margin:0; letter-spacing:.02em; }
.phero__en .hl{ color:var(--ice); }
.phero__ja{ margin:.4em 0 0; font-weight:900; font-size:clamp(1.05rem,4.2vw,1.4rem); }
.phero__lead{ margin:14px 0 0; max-width:52ch; color:#CBD6DE; font-size:clamp(.94rem,2.6vw,1.02rem); }
.crumb{ font-family:"Saira Condensed",sans-serif; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin:0 0 14px; }
.crumb a:hover{ color:var(--ink); }

/* ---------- trust strip ---------- */
.trust{ background:linear-gradient(180deg,#0D1218,#080B10); border-block:1px solid var(--line); position:relative; z-index:2; }
.trust__grid{ display:grid; grid-template-columns:repeat(2,1fr); }
.trust__item{ padding:24px var(--pad); border-top:1px solid var(--line); border-left:1px solid var(--line); display:flex; flex-direction:column; gap:5px; }
.trust__grid .trust__item:nth-child(-n+2){ border-top:0; }
.trust__grid .trust__item:nth-child(odd){ border-left:0; }
.trust__k{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ice); }
.trust__v{ font-weight:900; font-size:clamp(1rem,4vw,1.24rem); line-height:1.35; }
.trust__s{ font-size:.76rem; color:var(--dim); line-height:1.7; }

/* ---------- split (concept / tech) ---------- */
.split{ display:grid; gap:clamp(26px,4vw,54px); align-items:center; }
.split__media{ position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2); }
.split__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.split__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(125deg,transparent 52%, rgba(90,200,245,.14)); pointer-events:none; }
.split__body p{ margin:0 0 1.15em; color:var(--dim); }
.split__body p strong{ color:var(--ink); font-weight:700; }
.split__sign{
  font-family:"Saira Condensed",sans-serif; font-weight:800; letter-spacing:.04em;
  font-size:clamp(1.5rem,6vw,2.2rem); margin-top:4px;
}
.split__sign span{ color:var(--ice); }

/* ---------- cards ---------- */
.cards{ display:grid; gap:clamp(15px,2.4vw,20px); }
.card{
  position:relative; background:linear-gradient(180deg,var(--surface),#0E141A);
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,4vw,32px); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(90,200,245,.5),transparent); }
.card:hover{ transform:translateY(-5px); border-color:rgba(90,200,245,.4); box-shadow:0 26px 52px -26px rgba(0,0,0,.9); }
.card__n{ font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:2.3rem; line-height:1; color:transparent; -webkit-text-stroke:1.2px rgba(90,200,245,.6); }
.card__t{ font-weight:900; font-size:1.18rem; margin:12px 0 9px; letter-spacing:.02em; }
.card__d{ margin:0; color:var(--dim); font-size:.94rem; }

/* ---------- showcase ---------- */
.showcase{ position:relative; min-height:clamp(320px,56vw,500px); display:flex; align-items:flex-end; overflow:hidden; border-block:1px solid var(--line); }
.showcase__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.showcase::after{ content:""; position:absolute; inset:0; background:linear-gradient(92deg, rgba(4,6,10,.94) 0%, rgba(4,6,10,.6) 46%, rgba(4,6,10,.18) 100%); }
.showcase__body{ position:relative; z-index:2; padding-block:clamp(40px,7vw,72px); max-width:42ch; }
.showcase__en{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ice); }
.showcase__t{ font-weight:900; font-size:clamp(1.5rem,6vw,2.5rem); line-height:1.38; margin:10px 0 0; }
.showcase__t span{ color:var(--ice); }
.showcase__d{ margin:14px 0 0; color:#CBD6DE; font-size:clamp(.94rem,2.6vw,1.02rem); }

/* ---------- tint simulator（濃さシミュレーター） ---------- */
.sim{ border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.sim__stage{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.sim__stage img{ width:100%; height:100%; object-fit:cover; }
.sim__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(190deg, rgba(6,10,14,.98), rgba(10,16,22,.9));
  opacity:var(--tint,.35); transition:opacity .18s linear;
}
.sim__badge{
  position:absolute; top:14px; left:14px; z-index:2;
  font-family:"Saira Condensed",sans-serif; font-weight:700; letter-spacing:.1em; font-size:.86rem;
  padding:8px 14px; border-radius:8px; background:rgba(6,10,14,.72); border:1px solid var(--line-2);
  backdrop-filter:blur(6px);
}
.sim__badge b{ color:var(--ice); font-size:1.16rem; }
.sim__ctrl{ padding:20px clamp(18px,3vw,26px) 22px; border-top:1px solid var(--line); }
.sim__ctrl label{ display:block; font-family:"Saira Condensed",sans-serif; font-weight:600; letter-spacing:.14em; font-size:.8rem; text-transform:uppercase; color:var(--dim); margin-bottom:12px; }
.sim__range{
  width:100%; -webkit-appearance:none; appearance:none; height:4px; border-radius:99px; background:linear-gradient(90deg,#0A0F14,#7FB6CE,#EAF1F6); outline:none;
}
.sim__range::-webkit-slider-thumb{
  -webkit-appearance:none; width:30px; height:30px; border-radius:50%;
  background:linear-gradient(180deg,#6FD3F8,#2497C9); border:2px solid #04121a;
  box-shadow:0 0 0 1px rgba(90,200,245,.5), 0 6px 16px -4px rgba(90,200,245,.8); cursor:ew-resize;
}
.sim__range::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:#5AC8F5; border:2px solid #04121a; cursor:ew-resize;
}
.sim__scale{ display:flex; justify-content:space-between; margin-top:10px; font-family:"Saira Condensed",sans-serif; font-size:.74rem; letter-spacing:.1em; color:var(--mute); }
.sim__note{ margin:14px 0 0; font-size:.8rem; color:var(--mute); line-height:1.8; }

/* ---------- VLT scale swatches ---------- */
.vlt{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.vlt__i{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
.vlt__sw{ height:76px; position:relative; }
.vlt__sw::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 42%); }
.vlt__b{ padding:12px 14px 15px; }
.vlt__p{ font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:1.28rem; color:var(--ice); line-height:1.1; }
.vlt__n{ font-weight:700; font-size:.94rem; margin:2px 0 4px; }
.vlt__d{ margin:0; font-size:.8rem; color:var(--dim); line-height:1.7; }

/* ---------- menu / pricing ---------- */
.plans{ display:grid; gap:clamp(15px,2.4vw,20px); }
.plan{
  position:relative; background:linear-gradient(180deg,var(--surface),#0E131A);
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,4vw,32px);
  display:flex; flex-direction:column; transition:transform .3s var(--ease), border-color .3s;
}
.plan:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.plan--feat{ border-color:rgba(90,200,245,.5); box-shadow:0 30px 60px -32px rgba(90,200,245,.35); }
.plan__badge{
  position:absolute; top:-12px; left:22px; background:linear-gradient(180deg,#6FD3F8,#2497C9); color:#04121a;
  font-family:"Saira Condensed",sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.16em;
  padding:6px 14px; border-radius:20px; box-shadow:0 8px 20px -8px var(--glow);
}
.plan__en{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mute); }
.plan__name{ font-weight:900; font-size:1.24rem; margin:5px 0 4px; letter-spacing:.02em; }
.plan__sub{ margin:0 0 16px; font-size:.86rem; color:var(--dim); }
.plan__rows{ list-style:none; margin:0 0 16px; padding:16px 0; border-block:1px solid var(--line); display:grid; gap:10px; }
.plan__row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.plan__row span:first-child{ color:var(--dim); font-size:.89rem; }
.price{ font-family:"Saira Condensed",sans-serif; font-weight:700; font-variant-numeric:tabular-nums; font-size:1.14rem; white-space:nowrap; }
.price small{ font-size:.72rem; color:var(--mute); font-weight:500; margin-left:2px; }
.plan__dur{ font-family:"Saira Condensed",sans-serif; font-size:.86rem; letter-spacing:.06em; color:var(--ice-soft); margin-bottom:18px; }
.plan .btn{ margin-top:auto; }
.note{ margin-top:20px; font-size:.82rem; color:var(--mute); line-height:1.9; }
.note--center{ text-align:center; }

/* price table */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); -webkit-overflow-scrolling:touch; }
table.price-table{ width:100%; min-width:640px; border-collapse:collapse; }
table.price-table th, table.price-table td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:.93rem; }
table.price-table thead th{
  font-family:"Saira Condensed",sans-serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; color:var(--ice); background:#0D1319; white-space:nowrap;
}
table.price-table tbody tr:last-child td{ border-bottom:0; }
table.price-table tbody tr:hover{ background:rgba(198,210,220,.03); }
table.price-table td.n{ font-family:"Saira Condensed",sans-serif; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.price-table td:first-child{ font-weight:700; }

/* ---------- feature list ---------- */
.features{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.features li{ display:flex; gap:15px; padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.features .ic{ flex:0 0 auto; width:40px; height:40px; border-radius:10px; background:rgba(90,200,245,.14); color:var(--ice); display:grid; place-items:center; }
.features .ic svg{ width:20px; height:20px; }
.features h3{ margin:0 0 3px; font-size:1rem; font-weight:900; }
.features p{ margin:0; font-size:.89rem; color:var(--dim); }

/* ---------- gallery / works ---------- */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(11px,2vw,18px); }
.shot{ position:relative; border-radius:13px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
.shot:hover img{ transform:scale(1.06); }
.shot__label{
  position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px;
  background:linear-gradient(transparent, rgba(4,6,10,.92));
  font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.86rem; letter-spacing:.05em;
}
.shot__label b{ color:var(--ice); font-weight:700; }

.work{ background:linear-gradient(180deg,var(--surface),#0E131A); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.work__media{ position:relative; aspect-ratio:16/10; }
.work__media img{ width:100%; height:100%; object-fit:cover; }
.work__tag{
  position:absolute; top:12px; left:12px; font-family:"Saira Condensed",sans-serif; font-weight:700;
  font-size:.74rem; letter-spacing:.12em; padding:6px 12px; border-radius:7px;
  background:rgba(6,10,14,.78); border:1px solid rgba(90,200,245,.45); color:var(--ice-soft); backdrop-filter:blur(6px);
}
.work__b{ padding:20px clamp(18px,3vw,24px) 24px; }
.work__car{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); }
.work__t{ font-weight:900; font-size:1.1rem; margin:5px 0 8px; }
.work__d{ margin:0 0 14px; font-size:.9rem; color:var(--dim); }
.work__spec{ list-style:none; margin:0; padding:14px 0 0; border-top:1px solid var(--line); display:grid; gap:7px; }
.work__spec li{ display:flex; justify-content:space-between; gap:12px; font-size:.84rem; }
.work__spec b{ font-family:"Saira Condensed",sans-serif; font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.74rem; color:var(--ice); }

/* filter chips */
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(22px,3.5vw,34px); }
.chip{
  font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.92rem; letter-spacing:.08em;
  padding:9px 16px; border-radius:99px; border:1px solid var(--line-2); background:rgba(198,210,220,.04); color:var(--dim);
  transition:all .22s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--ice); }
.chip[aria-pressed="true"]{ background:linear-gradient(180deg,#6FD3F8,#2497C9); color:#04121a; border-color:transparent; font-weight:700; }

/* ---------- voices ---------- */
.voices{ display:grid; gap:clamp(15px,2.4vw,20px); }
.voice{ background:linear-gradient(180deg,var(--surface),#0E141A); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,4vw,30px); }
.voice__q{ font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:2.4rem; line-height:.72; color:rgba(90,200,245,.42); }
.voice__t{ margin:8px 0 16px; font-size:1rem; }
.voice__m{ display:flex; align-items:center; gap:12px; padding-top:15px; border-top:1px solid var(--line); }
.voice__ini{ width:40px; height:40px; border-radius:50%; background:var(--surface-2); display:grid; place-items:center; font-family:"Saira Condensed",sans-serif; font-weight:700; color:var(--ice-soft); }
.voice__who{ font-size:.83rem; color:var(--dim); }
.voice__who b{ color:var(--ink); font-weight:700; }
.star{ color:var(--ice); letter-spacing:2px; font-size:.82rem; margin-bottom:8px; }

/* ---------- flow steps ---------- */
.flow{ display:grid; gap:13px; counter-reset:step; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:19px; align-items:flex-start;
  padding:22px clamp(19px,3vw,28px); background:var(--surface); border:1px solid var(--line); border-radius:13px;
  transition:border-color .3s, transform .3s var(--ease);
}
.step:hover{ border-color:rgba(90,200,245,.4); transform:translateX(4px); }
.step__n{
  counter-increment:step; font-family:"Saira Condensed",sans-serif; font-weight:800; font-size:1.6rem; line-height:1;
  width:54px; height:54px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg,#1B242C,#131A20); border:1px solid var(--line-2); color:var(--ice);
}
.step__n::before{ content:counter(step,decimal-leading-zero); }
.step h3{ margin:5px 0 4px; font-size:1.04rem; font-weight:900; }
.step p{ margin:0; font-size:.9rem; color:var(--dim); }
.step .t{ display:inline-block; margin-top:8px; font-family:"Saira Condensed",sans-serif; font-size:.8rem; letter-spacing:.1em; color:var(--ice-soft); }

/* ---------- FAQ ---------- */
.faq{ display:grid; gap:11px; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.faq details[open]{ border-color:rgba(90,200,245,.35); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px clamp(18px,3vw,24px);
  display:flex; align-items:flex-start; gap:14px; font-weight:700; font-size:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q"; font-family:"Saira Condensed",sans-serif; font-weight:800; color:var(--ice); font-size:1.16rem; line-height:1.5; flex:0 0 auto; }
.faq summary::after{ content:"＋"; margin-left:auto; color:var(--mute); font-weight:400; transition:transform .25s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .a{ padding:0 clamp(18px,3vw,24px) 22px 46px; margin:0; color:var(--dim); font-size:.93rem; }

/* ---------- access / info ---------- */
.access{ display:grid; gap:clamp(24px,4vw,44px); }
.info-list{ list-style:none; margin:0; padding:0; display:grid; }
.info-list li{ display:grid; grid-template-columns:92px 1fr; gap:14px; padding:15px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.info-list .k{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ice); }
.info-list .v{ font-weight:500; }
.info-list .v small{ display:block; color:var(--mute); font-size:.78rem; margin-top:2px; line-height:1.7; }
.info-list .v a:hover{ color:var(--ice); }
.map{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line-2); }
.map iframe{ width:100%; height:330px; border:0; filter:grayscale(.35) contrast(1.06) brightness(.82); }

/* ---------- contact form ---------- */
.contact-shell{
  background:linear-gradient(180deg,#101720,#080C11); border:1px solid var(--line-2);
  border-radius:clamp(16px,3vw,24px); padding:clamp(26px,5vw,50px);
  box-shadow:0 40px 90px -52px rgba(0,0,0,.95);
}
.form{ display:grid; gap:17px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; }
.field .req{ color:var(--ice); margin-left:6px; font-size:.74rem; }
.field input, .field select, .field textarea{
  width:100%; background:#080B0F; border:1px solid var(--line-2); border-radius:11px;
  color:var(--ink); padding:14px 15px; font-family:inherit; font-size:1rem; font-weight:500;
  transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.field textarea{ min-height:124px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--ice); box-shadow:0 0 0 3px rgba(90,200,245,.22); }
.field input::placeholder, .field textarea::placeholder{ color:var(--mute); }
.form__row{ display:grid; gap:17px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; }
.form__note{ font-size:.78rem; color:var(--mute); margin:2px 0 0; line-height:1.8; }
.form__msg{ display:none; padding:16px 18px; border-radius:11px; font-weight:700; font-size:.93rem; }
.form__msg.ok{ display:block; background:rgba(90,200,245,.12); border:1px solid rgba(90,200,245,.4); color:var(--ice-soft); }
.form__msg.err{ display:block; background:rgba(240,110,100,.12); border:1px solid rgba(240,110,100,.4); color:#F4ADA7; }

/* ---------- digital card banner ---------- */
.cardbanner{
  position:relative; overflow:hidden; border-radius:clamp(16px,3vw,24px);
  background:linear-gradient(122deg,#141C24 0%, #0B1015 58%, #0D2029 100%);
  border:1px solid var(--line-2); padding:clamp(28px,6vw,50px);
  display:grid; gap:22px; align-items:center;
}
.cardbanner::before{ content:""; position:absolute; right:-70px; top:-70px; width:270px; height:270px; border-radius:50%; background:radial-gradient(circle, rgba(90,200,245,.3), transparent 70%); }
.cardbanner__en{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ice); }
.cardbanner h2{ margin:8px 0 0; font-weight:900; font-size:clamp(1.36rem,5.4vw,1.96rem); line-height:1.35; }
.cardbanner p{ margin:12px 0 0; color:var(--dim); font-size:.95rem; max-width:44ch; }

/* ---------- footer ---------- */
.footer{ background:#04070A; border-top:1px solid var(--line); padding-block:clamp(46px,7vw,70px) 0; position:relative; z-index:1; }
.footer__grid{ display:grid; gap:clamp(28px,5vw,46px); }
.footer__brand p{ margin:15px 0 0; color:var(--dim); font-size:.89rem; max-width:34ch; }
.fcol h4{ font-family:"Saira Condensed",sans-serif; font-weight:600; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ice); margin:0 0 15px; }
.fcol ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.fcol li, .fcol a{ color:var(--dim); font-size:.88rem; }
.fcol a:hover{ color:var(--ink); }
.social{ display:flex; gap:11px; }
.social a{ width:44px; height:44px; border-radius:11px; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--dim); transition:all .25s var(--ease); }
.social a:hover{ color:#04121a; border-color:transparent; background:var(--ice); transform:translateY(-3px); }
.social svg{ width:20px; height:20px; }
.social__note{ margin-top:12px; font-size:.74rem; color:var(--mute); line-height:1.75; }
.footer__bottom{ margin-top:clamp(36px,6vw,54px); border-top:1px solid var(--line); padding-block:22px; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center; }
.footer__bottom small, .footer__bottom a{ color:var(--mute); font-size:.78rem; }
.footer__bottom nav{ display:flex; gap:18px; flex-wrap:wrap; }
.footer__bottom a:hover{ color:var(--ink); }

/* ---------- mobile action bar（モバイル専用設計） ---------- */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:55; display:none;
  grid-template-columns:1fr 1fr 1.25fr; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.mbar a{
  background:rgba(8,11,16,.96); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:11px 6px 12px; font-size:.72rem; font-weight:700; letter-spacing:.05em; color:var(--dim); min-height:58px;
}
.mbar a svg{ width:19px; height:19px; }
.mbar a.is-cta{ background:linear-gradient(180deg,#6FD3F8,#2497C9); color:#04121a; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (min-width:600px){
  .trust__grid{ grid-template-columns:repeat(4,1fr); }
  .trust__grid .trust__item{ border-top:0; }
  .trust__grid .trust__item:nth-child(odd){ border-left:1px solid var(--line); }
  .trust__grid .trust__item:first-child{ border-left:0; }
  .form__row{ grid-template-columns:1fr 1fr; }
  .vlt{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:760px){
  .cards{ grid-template-columns:repeat(3,1fr); }
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:repeat(3,1fr); }
  .plans--4{ grid-template-columns:repeat(2,1fr); }
  .voices{ grid-template-columns:repeat(3,1fr); }
  .gallery{ grid-template-columns:repeat(4,1fr); }
  .works-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(15px,2.4vw,22px); }
  .cardbanner{ grid-template-columns:1.4fr auto; }
  .footer__grid{ grid-template-columns:1.6fr 1fr 1fr 1.15fr; }
}
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--wide-media{ grid-template-columns:1.12fr 1fr; }
  .access{ grid-template-columns:1fr 1.12fr; }
  .cards--4{ grid-template-columns:repeat(4,1fr); }
  .plans--4{ grid-template-columns:repeat(4,1fr); }
  .works-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  .nav, .hdr-cta .btn{ display:none; }
  .menu-toggle{
    display:grid; place-items:center; width:46px; height:46px;
    border:1px solid var(--line-2); border-radius:10px; background:rgba(198,210,220,.04);
  }
  .menu-toggle span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
  .menu-toggle span::before, .menu-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); }
  .menu-toggle span::before{ top:-6px; }
  .menu-toggle span::after{ top:6px; }
  .mbar{ display:grid; }
  body{ padding-bottom:64px; }
  .footer__bottom{ padding-bottom:14px; }
}
@media (min-width:861px){ .menu-toggle{ display:none; } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}