@charset "UTF-8";
/* ==========================================================================
   EQUIP Corporate — design system v2
   コンセプト：「見えない場所に、お店の本気がある」
   深いインディゴの暗い面 × 暖かい紙の色 × ブランドのグリーンを明るくしたライム。
   タイポグラフィを主役に、動きは“意味のあるところだけ”に使う。
   ========================================================================== */

:root{
  /* color */
  --ink:#0b0c1d;
  --night:#100c47;
  --night-2:#1a1470;
  --indigo:#1a0f7a;
  --lime:#c4f542;
  --lime-2:#a9dc22;
  --green:#5fae1f;
  --green-ink:#3b7410;
  --blue:#1c6fa8;
  --paper:#f3f0e9;
  --paper-2:#eae6db;
  --white:#fff;

  --text:#1b1d2e;
  --text-2:#4a4e66;
  --text-3:#5f6378;
  --on-dark:#efedfb;
  --on-dark-2:#b3b2d6;

  --line:rgba(11,12,29,.14);
  --line-2:rgba(11,12,29,.08);
  --line-d:rgba(255,255,255,.18);

  /* type */
  --f-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,system-ui,sans-serif;
  --f-serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-en:"Bricolage Grotesque","Zen Kaku Gothic New",system-ui,sans-serif;
  --f-out:"Archivo Black","Bricolage Grotesque","Zen Kaku Gothic New",system-ui,sans-serif;

  /* layout */
  --gutter:clamp(20px,4.2vw,72px);
  --wide:1680px;
  --wrap:1240px;
  --narrow:880px;
  --hh:76px;
  --r:22px;
  --r-s:12px;

  /* 旧テンプレートのインライン指定との互換 */
  --latin:var(--f-en);
  --muted:var(--text-3);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

/* --- reset ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px);scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--f-jp);font-size:16px;font-weight:500;line-height:1.95;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;word-break:auto-phrase;line-break:strict;
}
img,picture,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5{margin:0;color:inherit;font-weight:900;line-height:1.35;letter-spacing:.01em}
p{margin:0 0 1.4em}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0 0 1.4em;padding-left:1.3em}
li{margin:.3em 0}
table{border-collapse:collapse;width:100%}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.proof :focus-visible,.webband :focus-visible,.philosophy :focus-visible,.page-hero :focus-visible,
.site-footer :focus-visible,.drawer :focus-visible,.intro :focus-visible,.reason--night :focus-visible,.reason--indigo :focus-visible,
.site-header[data-tone="dark"] :focus-visible,.plan.is-featured :focus-visible{outline-color:var(--lime)}
::selection{background:var(--lime);color:var(--ink)}

.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:-9999px;top:0;z-index:999;background:var(--lime);color:var(--ink);padding:12px 20px;font-weight:700}
.skip-link:focus{left:0}
.sp{display:none}
@media (max-width:720px){.sp{display:inline}}
.num{font-family:var(--f-en);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* --- layout --------------------------------------------------------------- */
.wrap-wide{width:min(var(--wide),100% - var(--gutter)*2);margin-inline:auto}
.wrap{width:min(var(--wide),100% - var(--gutter)*2);margin-inline:auto}
.wrap-narrow{width:min(var(--narrow),100% - var(--gutter)*2);margin-inline:auto}
.section{padding-block:clamp(72px,10vw,150px)}
.section--soft{background:var(--paper-2)}
.section--tint{background:var(--paper-2)}
.section--dark{background:var(--night);color:var(--on-dark)}
.section--dark h2,.section--dark h3{color:#fff}

/* --- type helpers --------------------------------------------------------- */
.label,.eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 clamp(18px,2.4vw,32px);
  font-family:var(--f-en);font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);
}
.label::before,.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.eyebrow{display:flex}
.h-xl{font-size:clamp(34px,5.6vw,84px);line-height:1.25;letter-spacing:.005em}
.h-lg{font-size:clamp(28px,3.8vw,56px);line-height:1.32}
.h-md{font-size:clamp(22px,2.4vw,32px);line-height:1.5}
.h-sm{font-size:18px;line-height:1.6}
.h-mega{font-size:clamp(34px,6.4vw,104px);line-height:1.18;letter-spacing:0;font-weight:900}
.sec-head--row .h-mega,.proof .h-mega,.webband .h-mega{font-size:clamp(30px,4.3vw,74px)}
.lead{font-size:clamp(15px,1.5vw,18px);line-height:2.1;color:var(--text-2)}
.small{font-size:13.5px;line-height:1.8;color:var(--text-3)}

/* 行ごとにせり上がる見出し（JSが無くても読める） */
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>span{display:block;text-wrap:balance}
.js .line>span{transform:translateY(112%);transition:transform 1.15s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
.js .line.is-in>span,.js.is-ready .hero .line>span{transform:none}
.js .hero .line>span{transition-delay:calc(var(--d,0)*1ms + 150ms)}
.js .line:nth-child(2)>span{--d:110}
.js .line:nth-child(3)>span{--d:220}

[data-reveal]{--rd:0ms}
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--rd)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* --- buttons -------------------------------------------------------------- */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:58px;padding:0 10px 0 30px;border:1px solid var(--bd);border-radius:999px;
  background:var(--bg);color:var(--fg);font-size:15px;font-weight:700;letter-spacing:.03em;
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),color .35s ease,background .35s ease,border-color .35s ease;
}
.btn>span{position:relative;z-index:1}
.btn>i{
  position:relative;z-index:1;flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--fg);transition:transform .5s var(--ease),background .35s ease;
}
.btn>i::before{
  content:"";position:absolute;inset:0;background:var(--bg);
  clip-path:polygon(30% 47%,62% 47%,62% 36%,76% 50%,62% 64%,62% 53%,30% 53%);
  transition:background .35s ease;
}
.btn:not(:has(>i)){padding:0 30px}
.btn::after{
  content:"";position:absolute;left:50%;top:100%;width:150%;aspect-ratio:1;border-radius:50%;
  background:var(--hover,var(--lime));transform:translate(-50%,0) scale(.2);transition:transform .7s var(--ease),top .7s var(--ease);z-index:0;
}
.btn:hover::after{top:-25%;transform:translate(-50%,0) scale(1)}
.btn:hover{color:var(--ink);border-color:var(--hover,var(--lime))}
.btn:hover>i{transform:rotate(-45deg);background:var(--ink)}
.btn:hover>i::before{background:var(--hover,var(--lime))}
.btn--lime{--bg:var(--lime);--fg:var(--ink);--bd:var(--lime);--hover:#fff}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:rgba(11,12,29,.3);--hover:var(--ink)}
.btn--ghost:hover{color:#fff}
.btn--white{--bg:#fff;--fg:var(--ink);--bd:#fff;--hover:var(--lime)}
.btn--line-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.4);--hover:#fff}
.btn--line-light:hover{color:var(--ink)}
.btn--line{--bg:#06c755;--fg:#fff;--bd:#06c755;--hover:#fff}
.btn--line:hover{color:#067a37}
.btn--sm{min-height:46px;padding:0 22px;font-size:13.5px}
.btn--sm>i{display:none}
.btn--block{width:100%}
.btn--block:not(:has(>i)){padding:0 20px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row.is-center{justify-content:center}

.pill{
  position:relative;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 8px 0 22px;border-radius:999px;
  background:var(--lime);color:var(--ink);font-size:13.5px;font-weight:700;letter-spacing:.03em;overflow:hidden;white-space:nowrap;
  transition:transform .5s var(--ease),box-shadow .35s ease;
}
.pill i{width:32px;height:32px;border-radius:50%;background:var(--ink);position:relative;flex:none;transition:transform .5s var(--ease)}
.pill i::before{content:"";position:absolute;inset:0;background:var(--lime);clip-path:polygon(28% 47%,62% 47%,62% 34%,78% 50%,62% 66%,62% 53%,28% 53%)}
.pill:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(196,245,66,.7)}
.pill:hover i{transform:rotate(-45deg)}

.link-line{
  position:relative;display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;
  font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--ink);
}
.link-line::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)}
.link-line::after{content:"→";font-family:var(--f-en);transition:transform .5s var(--ease)}
.link-line:hover::before{transform:scaleX(.0001);transform-origin:right}
.link-line:hover::after{transform:translateX(6px)}
.link-line--light{color:#fff}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;color:var(--ink)}
.link-arrow::after{content:"→";font-family:var(--f-en);transition:transform .4s var(--ease)}
.link-arrow:hover::after{transform:translateX(5px)}

.round{
  display:inline-grid;place-items:center;width:60px;height:60px;border-radius:50%;
  border:1px solid var(--line);font-family:var(--f-en);font-size:20px;color:var(--ink);
  transition:background .35s ease,color .35s ease,transform .5s var(--ease),border-color .35s ease;
}
.round:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:scale(1.06)}

/* --- 紙の質感（ごく薄いフィルムの粒子） ------------------------------------ */
body::after{
  content:"";position:fixed;inset:0;z-index:996;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- intro / cursor / progress ------------------------------------------- */
.intro{position:fixed;inset:0;z-index:1000;display:none;place-items:center;background:var(--night);color:#fff;visibility:hidden}
.is-intro .intro{display:grid;visibility:visible}
.intro-inner{position:relative;width:min(560px,86vw);display:grid;gap:22px;justify-items:start}
.intro-logo{width:150px;height:auto;filter:brightness(0) invert(1);opacity:.95}
.intro-line{margin:0;font:900 clamp(30px,6vw,56px)/1.25 var(--f-jp);overflow:hidden}
.intro-line span{display:block;transform:translateY(110%);animation:intro-up 1s var(--ease) forwards}
.intro-line span:nth-child(2){animation-delay:.12s;color:var(--lime)}
.intro-bar{width:100%;height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.intro-bar i{display:block;height:100%;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:left}
.intro-count{position:absolute;right:0;top:0;font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--on-dark-2)}
.intro.is-out{animation:intro-out .9s var(--ease-io) forwards}
@keyframes intro-up{to{transform:none}}
@keyframes intro-out{to{transform:translateY(-100%)}}

.cursor{position:fixed;left:0;top:0;z-index:998;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){.js .cursor{display:block}}
.cursor-dot,.cursor-pos{position:absolute;left:0;top:0;will-change:transform}
.cursor-dot{margin:-3px 0 0 -3px;width:6px;height:6px;border-radius:50%;background:var(--lime)}
.cursor-ring{
  position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(196,245,66,.9);display:grid;place-items:center;
  transition:transform .45s var(--ease),background .3s ease,border-color .3s ease,opacity .3s ease;opacity:0;
}
.cursor.is-on .cursor-ring{opacity:1}
.cursor-ring b{font:700 11px/1 var(--f-en);letter-spacing:.14em;color:var(--ink);opacity:0;transition:opacity .25s ease;text-transform:uppercase}
.cursor.is-link .cursor-ring{transform:scale(1.5)}
.cursor.is-label .cursor-ring{transform:scale(2);background:var(--lime);border-color:var(--lime)}
.cursor.is-label .cursor-ring b{opacity:1}
.cursor.is-down .cursor-ring{transform:scale(.8)}

.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;background:var(--lime);transform:scaleX(var(--p,0));transform-origin:left}

/* --- header --------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:110;
  transition:background .5s ease,backdrop-filter .5s ease,transform .6s var(--ease),border-color .5s ease,color .4s ease;
  color:var(--ink);border-bottom:1px solid transparent;
}
.header-inner{
  width:min(var(--wide),100% - var(--gutter)*2);margin-inline:auto;
  display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);min-height:var(--hh);
}
.site-header.is-solid{background:rgba(243,240,233,.82);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom-color:var(--line-2)}
.site-header[data-tone="dark"]{color:#fff}
.site-header[data-tone="dark"] .brand{background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.28)}
.site-header.is-hide{transform:translateY(-100%)}
.brand{display:block;margin-right:auto;flex:none;padding:7px 12px 6px;border-radius:14px;background:transparent;transition:background .4s ease,box-shadow .4s ease}
.brand-logo{display:block;width:112px;height:auto}
@media (min-width:900px){.brand-logo{width:140px}}

.nav{display:none}
.nav ul{display:flex;align-items:center;gap:clamp(18px,2.2vw,38px);list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav a{position:relative;display:block;padding:8px 0;font-size:14px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--lime-2);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav .current-menu-item>a::after{transform:scaleX(1);transform-origin:left}
.site-header[data-tone="dark"] .nav a::after{background:var(--lime)}

.header-cta{display:none;align-items:center;gap:22px;flex:none}
.header-tel{display:none;align-items:baseline;gap:10px;white-space:nowrap}
.header-tel small{font:600 11px/1 var(--f-en);letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.header-tel b{font-size:19px;font-weight:700}
@media (min-width:1280px){.header-tel{display:flex}}
@media (min-width:1040px){.nav{display:block}.header-cta{display:flex}}

.menu-btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 4px;margin-right:-4px}
.menu-btn-label{font:700 12px/1 var(--f-en);letter-spacing:.2em;text-transform:uppercase}
.menu-btn-icon{position:relative;width:34px;height:34px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center}
.menu-btn-icon i{position:absolute;width:14px;height:1.5px;background:currentColor;transition:transform .5s var(--ease)}
.menu-btn-icon i:nth-child(1){transform:translateY(-3px)}
.menu-btn-icon i:nth-child(2){transform:translateY(3px)}
.menu-btn[aria-expanded="true"] .menu-btn-icon i:nth-child(1){transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn-icon i:nth-child(2){transform:rotate(-45deg)}
@media (min-width:1040px){.menu-btn{display:none}}

.drawer{
  position:fixed;inset:0;z-index:105;background:var(--night);color:#fff;
  padding:calc(var(--hh) + 20px) var(--gutter) 40px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .8s var(--ease-io),visibility 0s .8s;
}
.drawer.is-open{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease-io),visibility 0s}
.drawer-inner{max-width:760px;margin-inline:auto}
.drawer ul{list-style:none;margin:0 0 32px;padding:0;counter-reset:dn}
.drawer li{margin:0;border-bottom:1px solid var(--line-d);counter-increment:dn;overflow:hidden}
.drawer li a{display:flex;align-items:baseline;gap:18px;padding:16px 2px;font-size:clamp(24px,7vw,40px);font-weight:900;line-height:1.3}
.drawer li a::before{content:counter(dn,decimal-leading-zero);font:600 12px/1 var(--f-en);letter-spacing:.14em;color:var(--lime)}
.drawer li a{transform:translateY(100%);transition:transform .9s var(--ease)}
.drawer.is-open li a{transform:none}
.drawer.is-open li:nth-child(2) a{transition-delay:.05s}
.drawer.is-open li:nth-child(3) a{transition-delay:.1s}
.drawer.is-open li:nth-child(4) a{transition-delay:.15s}
.drawer.is-open li:nth-child(5) a{transition-delay:.2s}
.drawer.is-open li:nth-child(6) a{transition-delay:.25s}
.drawer.is-open li:nth-child(7) a{transition-delay:.3s}
.drawer-foot{display:grid;gap:12px}
.drawer-note{margin-top:18px;font-size:12.5px;color:var(--on-dark-2);line-height:1.9}
@media (min-width:1040px){.drawer{display:none}}

/* --- hero ----------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;overflow:clip;color:#fff;background:var(--ink);
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-media{position:absolute;inset:-8% 0;z-index:-3;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hero-media picture,.hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero-media>picture img{filter:saturate(.5) contrast(1.05) brightness(.5);transform:scale(1.08);transition:transform 2.4s var(--ease)}
.hero-lit{
  position:absolute;inset:-8% 0;z-index:-1;pointer-events:none;transform:translate3d(0,var(--py,0px),0);will-change:transform;
  -webkit-mask-image:radial-gradient(circle var(--lr,240px) at var(--lx,68%) var(--ly,54%),#000 0%,#000 36%,rgba(0,0,0,.55) 62%,transparent 100%);
          mask-image:radial-gradient(circle var(--lr,240px) at var(--lx,68%) var(--ly,54%),#000 0%,#000 36%,rgba(0,0,0,.55) 62%,transparent 100%);
}
.hero-lit picture,.hero-lit img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero-lit img{filter:saturate(.95) contrast(1.08) brightness(1.05)}
.hero-lit::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle calc(var(--lr,240px) * 1.1) at var(--lx,68%) var(--ly,54%),rgba(196,245,66,.18),rgba(196,245,66,0) 70%);mix-blend-mode:screen;
}
.js.is-ready .hero-media img,.hero-media img{transform:none}
.hint-touch{display:none}
@media (hover:none){.hint-fine{display:none}.hint-touch{display:inline}}
.hero-shade{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(11,12,29,.62) 0%,rgba(11,12,29,0) 26%),
    linear-gradient(0deg,rgba(11,12,29,.95) 0%,rgba(11,12,29,.5) 38%,rgba(11,12,29,0) 68%),
    linear-gradient(100deg,rgba(16,12,71,.9) 0%,rgba(16,12,71,.52) 46%,rgba(16,12,71,.12) 100%);
}
.hero-inner{position:relative;padding-top:calc(var(--hh) + clamp(40px,8vh,110px));padding-bottom:clamp(36px,6vh,72px)}
.hero-kicker{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 clamp(18px,3vh,34px);font:600 12.5px/1 var(--f-en);letter-spacing:.22em;text-transform:uppercase;color:var(--lime)}
.hero-kicker span+span::before{content:"/";margin-right:22px;opacity:.5}
@media (max-width:720px){.hero-kicker{gap:6px 18px}.hero-kicker span+span::before{display:none}}
.hero-title{
  font-size:clamp(46px,9.4vw,168px);line-height:1.08;font-weight:900;letter-spacing:-.01em;color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.28);
}
.hero-title em{font-style:normal;color:var(--lime);position:relative;display:inline-block}
.hero-title em::after{
  content:"";position:absolute;left:.02em;right:.12em;bottom:.02em;height:.07em;background:var(--lime);border-radius:99px;
  transform:scaleX(0);transform-origin:left;transition:transform 1.3s var(--ease) 1.25s;
}
.is-ready .hero-title em::after,.no-js .hero-title em::after{transform:scaleX(1)}
html:not(.js) .hero-title em::after{transform:scaleX(1)}
.hero-bottom{display:grid;gap:clamp(22px,3vh,38px);margin-top:clamp(28px,5vh,64px)}
@media (min-width:980px){.hero-bottom{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(40px,6vw,120px)}}
.hero-lead{max-width:44em;margin:0;font-size:clamp(14px,1.15vw,16.5px);line-height:2.05;color:rgba(239,237,251,.86)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-side{
  position:absolute;right:calc(var(--gutter) - 6px);top:50%;margin:0;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font:600 11.5px/1 var(--f-en);letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.6);display:none;
}
.hero-scroll{
  position:absolute;right:var(--gutter);bottom:clamp(36px,6vh,72px);display:none;align-items:center;gap:12px;
  font:600 11.5px/1 var(--f-en);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);writing-mode:vertical-rl;
}
.hero-scroll i{display:block;width:1px;height:56px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:0;width:100%;height:50%;background:var(--lime);animation:scroll-line 2.2s var(--ease-io) infinite}
@keyframes scroll-line{0%{transform:translateY(-100%)}100%{transform:translateY(220%)}}
@media (min-width:1100px){.hero-side{display:block}.hero-scroll{display:flex}.hero-bottom{padding-right:90px}}

.js .hero-kicker,.js .hero-bottom{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease) .85s,transform 1.1s var(--ease) .85s}
.js .hero-bottom{transition-delay:1.05s}
.js.is-ready .hero-kicker,.js.is-ready .hero-bottom{opacity:1;transform:none}

/* --- marquee -------------------------------------------------------------- */
.marquee{overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line);padding-block:clamp(10px,1.6vw,22px)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 46s linear infinite}
.marquee-track span{
  font:400 clamp(40px,6.4vw,108px)/1.1 var(--f-out);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);padding-inline:.18em;
}
.marquee-track span.is-solid{color:var(--ink);-webkit-text-stroke:0}
.marquee-track b{font-size:clamp(26px,4vw,64px);color:var(--green);font-weight:400;line-height:1}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --- statement ------------------------------------------------------------ */
.statement{padding-block:clamp(88px,13vw,220px) clamp(48px,6vw,90px);background:var(--paper)}
.statement-text{
  max-width:23em;margin:0 0 clamp(64px,9vw,150px);
  font:900 clamp(26px,4.3vw,68px)/1.55 var(--f-jp);letter-spacing:.01em;
}
[data-fill] .ch{opacity:.16;transition:opacity .45s ease}
[data-fill] .ch.is-lit{opacity:1}
.figures{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--ink)}
@media (min-width:900px){.figures{grid-template-columns:repeat(4,1fr)}}
.figure{padding:clamp(22px,2.6vw,40px) clamp(10px,1.6vw,28px) clamp(26px,3vw,48px) 0;border-bottom:1px solid var(--line)}
@media (min-width:900px){.figure{border-bottom:0;border-right:1px solid var(--line);padding-left:clamp(10px,1.6vw,28px)}.figure:first-child{padding-left:0}.figure:last-child{border-right:0}}
.figure b{display:block;font-size:clamp(48px,7.6vw,132px);font-weight:700;line-height:.95;letter-spacing:-.05em;color:var(--ink)}
.figure b{white-space:nowrap}
.figure b small{font-size:.34em;font-weight:700;margin-left:.12em;letter-spacing:0;font-family:var(--f-jp);vertical-align:.5em}
.figure>span{display:block;margin-top:14px;font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--text-3)}

/* --- section head --------------------------------------------------------- */
.sec-head{margin-bottom:clamp(40px,6vw,96px)}
.sec-head--row{display:grid;gap:clamp(20px,3vw,48px)}
@media (min-width:1000px){.sec-head--row{grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);align-items:end}}
.sec-lead{max-width:34em;margin:clamp(20px,2.4vw,36px) 0 0;color:var(--text-2);font-size:clamp(14.5px,1.2vw,16.5px);line-height:2.05}
.sec-head--row .sec-lead{margin:0}

/* --- services (list) ------------------------------------------------------ */
.services{padding-block:clamp(72px,10vw,160px);background:var(--paper)}
.svc-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--ink)}
.svc{margin:0;border-top:1px solid var(--ink)}
.svc a{
  position:relative;display:grid;gap:12px 24px;align-items:center;isolation:isolate;
  grid-template-columns:44px minmax(0,1fr) auto;
  padding-block:clamp(26px,3.6vw,56px);
}
.svc a::before{content:"";position:absolute;inset:0 calc(var(--gutter)*-1);background:var(--lime);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease);z-index:-1}
.svc a:hover::before,.svc a:focus-visible::before{transform:scaleY(1);transform-origin:top}
.svc-no{font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--text-3);align-self:start;padding-top:.9em}
.svc-title{display:grid;gap:8px}
.svc-title small{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--green-ink)}
.svc-title b{font-size:clamp(26px,3.9vw,66px);font-weight:900;line-height:1.16;letter-spacing:0;transition:transform .7s var(--ease)}
.svc a:hover .svc-title b{transform:translateX(clamp(8px,1.4vw,26px))}
.svc-desc{grid-column:2/-1;max-width:32em;font-size:15px;line-height:1.95;color:var(--text-2)}
.svc-meta{grid-column:2;font-size:clamp(20px,2vw,30px);font-weight:600;letter-spacing:-.02em}
.svc-meta small{font-size:.6em;font-weight:600;margin-left:.1em;color:var(--text-3)}
.svc-arrow{
  grid-column:3;grid-row:1;justify-self:end;width:clamp(44px,5vw,76px);aspect-ratio:1;border-radius:50%;border:1px solid var(--ink);
  position:relative;transition:background .4s ease,transform .6s var(--ease);
}
.svc-arrow::after{content:"";position:absolute;inset:0;background:var(--ink);clip-path:polygon(30% 48%,66% 48%,66% 36%,80% 50%,66% 64%,66% 52%,30% 52%);transition:background .4s ease}
.svc a:hover .svc-arrow{background:var(--ink);transform:rotate(-45deg)}
.svc a:hover .svc-arrow::after{background:var(--lime)}
.svc-thumb{grid-column:2/-1;display:block;margin-top:8px;border-radius:var(--r-s);overflow:hidden;aspect-ratio:16/9}
.svc-thumb picture,.svc-thumb img,.svc-thumb svg{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .svc a{grid-template-columns:70px minmax(0,1.9fr) minmax(0,1fr) 200px 90px}
  .svc-no{padding-top:0;align-self:center}
  .svc-desc{grid-column:3;grid-row:1}
  .svc-meta{grid-column:4;grid-row:1;text-align:right}
  .svc-arrow{grid-column:5;grid-row:1}
  .svc-thumb{display:none}
}
.svc-preview{
  position:fixed;left:0;top:0;z-index:97;width:clamp(260px,26vw,440px);aspect-ratio:4/3;border-radius:16px;overflow:hidden;pointer-events:none;
  opacity:0;transform:translate3d(0,0,0) scale(.82) rotate(-4deg);transition:opacity .35s ease,scale .5s var(--ease);box-shadow:0 40px 80px -30px rgba(11,12,29,.55);
}
.svc-preview.is-on{opacity:1}
.svc-preview>*{width:100%;height:100%;object-fit:cover}
.svc-preview picture,.svc-preview img,.svc-preview svg{width:100%;height:100%;object-fit:cover}

/* --- reasons (sticky stack) ---------------------------------------------- */
.reasons{padding-block:clamp(72px,10vw,160px);background:var(--paper)}
.stack{position:relative}
.reason{
  position:sticky;top:calc(var(--hh) + 16px + var(--i)*22px);
  display:grid;gap:18px;align-content:space-between;min-height:min(60vh,520px);
  padding:clamp(26px,3.6vw,60px);margin-bottom:clamp(14px,2vw,26px);border-radius:var(--r);
  transform-origin:50% 0;
}
.reason-no{font-size:clamp(70px,12vw,220px);font-weight:700;line-height:.85;letter-spacing:-.06em;opacity:.95}
.reason h3{font-size:clamp(26px,3.3vw,56px);font-weight:900;line-height:1.25}
.reason p{max-width:30em;font-size:clamp(14.5px,1.2vw,17px);line-height:2.05}
@media (min-width:900px){.reason{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr) minmax(0,1fr);align-items:end}.reason-no{align-self:start}}
.reason--night{background:var(--night);color:var(--on-dark)}
.reason--night .reason-no{color:var(--lime)}
.reason--lime{background:var(--lime);color:var(--ink)}
.reason--paper{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line) inset}
.reason--paper .reason-no{color:var(--green)}
.reason--indigo{background:var(--indigo);color:var(--on-dark)}
.reason--indigo .reason-no{color:var(--lime)}

/* --- proof (before/after) ------------------------------------------------- */
.proof{background:var(--night);color:var(--on-dark);padding-block:clamp(72px,10vw,160px);overflow:clip}
.proof .label{color:var(--on-dark-2)}
.proof .label::before{background:var(--lime)}
.proof-grid{display:grid;gap:clamp(40px,5vw,90px)}
@media (min-width:1000px){.proof-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}}
.proof .h-mega{color:#fff}
.proof .h-mega .line:nth-child(2){color:var(--lime)}
.proof-text{max-width:30em;margin:clamp(24px,3vw,44px) 0 22px;font-size:clamp(14.5px,1.2vw,16.5px);line-height:2.1;color:var(--on-dark-2)}
.proof-hint{display:flex;gap:12px;align-items:center;margin:0 0 30px;font:600 12px/1 var(--f-en);letter-spacing:.16em;color:var(--lime);text-transform:none}
.compare{position:relative;width:min(100%,520px);justify-self:center}
.compare-frame{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.compare-frame picture,.compare-frame img{width:100%;height:100%;object-fit:cover}
.compare-frame>picture{position:absolute;inset:0}
.compare-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.compare-after picture,.compare-after img{width:100%;height:100%;object-fit:cover}
.compare-tag{
  position:absolute;top:18px;padding:7px 14px;border-radius:999px;font:700 11.5px/1 var(--f-en);letter-spacing:.16em;text-transform:uppercase;
  background:rgba(11,12,29,.72);color:#fff;backdrop-filter:blur(8px);
}
.compare-tag small{font:700 11px/1 var(--f-jp);letter-spacing:.06em;margin-left:6px;color:var(--lime)}
.compare-tag--before{left:18px}
.compare-tag--after{right:18px;background:var(--lime);color:var(--ink)}
.compare-tag--after small{color:var(--ink)}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.compare-handle i{
  position:absolute;left:50%;top:50%;width:62px;height:62px;border-radius:50%;background:var(--lime);transform:translate(-50%,-50%);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.compare-handle i::before,.compare-handle i::after{content:"";position:absolute;top:50%;width:0;height:0;border:7px solid transparent;transform:translateY(-50%)}
.compare-handle i::before{left:11px;border-right-color:var(--ink);border-left:0}
.compare-handle i::after{right:11px;border-left-color:var(--ink);border-right:0}
.compare-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.compare:focus-within .compare-handle i{outline:2px solid #fff;outline-offset:3px}

/* --- works (rail) --------------------------------------------------------- */
.works{padding-block:clamp(72px,10vw,160px);background:var(--paper);overflow:clip}
.rail{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);cursor:grab;padding-inline:var(--gutter)}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{cursor:grabbing;scroll-snap-type:none}
.rail.is-drag a{pointer-events:none}
.rail-track{display:flex;gap:clamp(14px,2vw,32px);list-style:none;margin:0;padding:0;width:max-content}
.work{margin:0;flex:none;width:clamp(260px,30vw,520px);scroll-snap-align:start}
.work a{display:block}
.work-img{display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.work-img picture,.card-media picture{display:block;width:100%;height:100%}
.work-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.work a:hover .work-img img{transform:scale(1.07)}
.work-meta{display:flex;align-items:center;gap:14px;margin-top:20px;font-size:13px}
.work-meta .num{font-size:15px;font-weight:700}
.work-tag{padding:5px 14px;border:1px solid var(--ink);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em}
.work-title{display:block;margin-top:12px;font-size:clamp(17px,1.5vw,22px);font-weight:900;line-height:1.5}
.rail-ui{display:grid;grid-template-columns:1fr auto;gap:22px 28px;align-items:center;margin-top:clamp(32px,4vw,60px)}
.rail-progress{height:2px;background:var(--line);position:relative;overflow:hidden}
.rail-progress i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform:scaleX(var(--rp,.2));transform-origin:left}
.rail-ui .link-line{grid-column:1/-1;justify-self:start}
@media (min-width:760px){.rail-ui{grid-template-columns:1fr auto auto}.rail-ui .link-line{grid-column:auto}}

/* --- web band ------------------------------------------------------------- */
.webband{background:var(--ink);color:var(--on-dark);padding-block:clamp(72px,10vw,170px);position:relative;overflow:clip;isolation:isolate}
.webband::before{
  content:"";position:absolute;right:-18vw;top:-22vw;width:64vw;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(196,245,66,.2),rgba(196,245,66,0) 62%);
}
.webband .label{color:var(--on-dark-2)}
.webband .label::before{background:var(--lime)}
.webband-grid{display:grid;gap:clamp(48px,6vw,100px)}
@media (min-width:1000px){.webband-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}}
.webband .h-mega{color:#fff}
.webband .h-mega .line:nth-child(2){color:var(--lime)}
.webband-copy>p{max-width:32em;margin:clamp(24px,3vw,44px) 0 0;font-size:clamp(14.5px,1.2vw,16.5px);line-height:2.1;color:var(--on-dark-2)}
.webband-points{list-style:none;margin:28px 0 38px;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.webband-points li{margin:0;padding:9px 16px;border:1px solid var(--line-d);border-radius:999px;font-size:13px;font-weight:700;letter-spacing:.03em}
.webband-points b{color:var(--lime);margin:0 .2em}
.webband-price{padding:clamp(26px,3.4vw,52px);border:1px solid var(--line-d);border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.01))}
.webband-from{margin:0}
.webband-from small{font:600 12px/1 var(--f-en);letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-2)}
.webband-num{margin:14px 0 0;font-size:clamp(60px,8.2vw,150px);font-weight:700;line-height:.9;letter-spacing:-.06em;color:var(--lime);white-space:nowrap}
.webband-num sup{font-size:.4em;vertical-align:top;margin-right:.08em;position:relative;top:.18em;letter-spacing:0}
.webband-unit{margin:10px 0 0;font-size:15px;font-weight:700;color:#fff}
.webband-plans{margin:clamp(24px,3vw,40px) 0 0;display:grid;border-top:1px solid var(--line-d)}
.webband-plans div{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-d)}
.webband-plans dt{font-weight:700;font-size:14.5px}
.webband-plans dd{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em}
.webband-plans dd::before{content:"¥";font-size:.6em;margin-right:.15em;opacity:.7}
.webband-plans dd::after{content:" /月";font-size:.5em;font-family:var(--f-jp);opacity:.7}

/* --- news ----------------------------------------------------------------- */
.news{padding-block:clamp(72px,10vw,150px);background:var(--paper)}
.news-grid{display:grid;gap:clamp(30px,4vw,70px)}
@media (min-width:1000px){.news-grid{grid-template-columns:minmax(260px,.55fr) minmax(0,1.45fr);align-items:start}}
.news .h-mega{font-size:clamp(34px,5vw,80px);margin-bottom:28px}
.newslist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.newslist li{margin:0;border-bottom:1px solid var(--line)}
.newslist a,.newslist .row{display:grid;gap:6px 22px;padding:clamp(18px,2vw,28px) 0;align-items:baseline;position:relative;transition:padding .6s var(--ease)}
@media (min-width:700px){.newslist a,.newslist .row{grid-template-columns:120px 130px 1fr}}
.newslist a:hover{padding-left:clamp(10px,1.4vw,22px)}
.newslist time{font:600 13.5px/1.6 var(--f-en);letter-spacing:.06em;color:var(--text-3)}
.newslist .t{font-size:clamp(15px,1.3vw,18px);font-weight:700;line-height:1.7}
.newslist a:hover .t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.tag{display:inline-block;padding:4px 12px;border:1px solid var(--ink);border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.05em;background:transparent;color:var(--ink)}
.tag--green{border-color:var(--green-ink);color:var(--green-ink)}
.tag--blue{border-color:var(--blue);color:var(--blue)}

/* --- philosophy ----------------------------------------------------------- */
.philosophy{background:var(--night);color:var(--on-dark);padding-block:clamp(88px,13vw,230px);text-align:center;position:relative;overflow:clip;isolation:isolate}
.philosophy::before{
  content:"";position:absolute;left:50%;top:50%;width:90vw;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);z-index:-1;
  background:radial-gradient(circle,rgba(74,65,173,.5),rgba(16,12,71,0) 62%);
}
.philosophy .label{color:var(--on-dark-2)}
.philosophy .label::before{background:var(--lime)}
.philosophy-en{margin:0 0 clamp(30px,4vw,60px);font:800 clamp(40px,8.4vw,150px)/1.04 var(--f-en);letter-spacing:-.045em;color:#fff;word-break:normal}
.philosophy-en .ch{opacity:.22}
.philosophy-en .ch.is-lit{opacity:1}
.philosophy-jp{font:700 clamp(15px,1.7vw,22px)/2.2 var(--f-serif);color:var(--on-dark-2);margin:0 0 40px}

/* --- final CTA ------------------------------------------------------------ */
.cta-final{background:var(--lime);color:var(--ink);padding-block:clamp(72px,10vw,170px) clamp(48px,6vw,90px);overflow:clip}
.cta-final .label{color:var(--ink)}
.cta-final .label::before{background:var(--ink)}
.mega{font-size:clamp(46px,11vw,200px);line-height:1.08;font-weight:900;letter-spacing:-.01em;color:var(--ink)}
.cta-row{display:grid;gap:36px;align-items:end;margin-top:clamp(32px,5vw,80px)}
@media (min-width:900px){.cta-row{grid-template-columns:minmax(0,1fr) auto}}
.cta-copy{max-width:34em;margin:0;font-size:clamp(14.5px,1.25vw,17px);font-weight:700;line-height:2.1}
.orb{
  position:relative;display:grid;place-items:center;width:clamp(170px,19vw,280px);aspect-ratio:1;border-radius:50%;
  background:var(--ink);color:#fff;text-align:center;font-weight:900;font-size:clamp(17px,1.7vw,24px);line-height:1.4;
  justify-self:start;transition:background .4s ease,color .4s ease;
}
@media (min-width:900px){.orb{justify-self:end}}
.orb i{position:absolute;right:16%;bottom:18%;width:18%;aspect-ratio:1;background:var(--lime);clip-path:polygon(0 42%,62% 42%,62% 14%,100% 50%,62% 86%,62% 58%,0 58%);transition:transform .6s var(--ease)}
.orb:hover{background:#fff;color:var(--ink)}
.orb:hover i{background:var(--ink);transform:translateX(8px)}
.cta-links{list-style:none;margin:clamp(40px,6vw,100px) 0 0;padding:0;display:grid;border-top:1px solid var(--ink)}
@media (min-width:900px){.cta-links{grid-template-columns:repeat(3,1fr)}}
.cta-links li{margin:0;border-bottom:1px solid rgba(11,12,29,.3)}
@media (min-width:900px){.cta-links li{border-bottom:0;border-right:1px solid rgba(11,12,29,.3)}.cta-links li:last-child{border-right:0}}
.cta-links a{display:grid;gap:6px;padding:clamp(20px,2.4vw,34px) clamp(0px,1.4vw,26px) clamp(20px,2.4vw,34px) 0;transition:padding .6s var(--ease)}
@media (min-width:900px){.cta-links li:not(:first-child) a{padding-left:clamp(14px,1.8vw,30px)}}
.cta-links a:hover{padding-left:clamp(10px,1.4vw,26px)}
.cta-links small{font:700 12px/1 var(--f-en);letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.cta-links b{font-size:clamp(20px,2.2vw,34px);font-weight:900;line-height:1.35;letter-spacing:-.01em;word-break:break-all}
.cta-links em{font-style:normal;font-size:12.5px;font-weight:700;opacity:.75}

/* --- footer --------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--on-dark-2);font-size:14px;padding-top:clamp(56px,7vw,110px);overflow:clip}
.footer-grid{display:grid;gap:40px}
@media (min-width:900px){.footer-grid{grid-template-columns:minmax(300px,1.3fr) repeat(2,minmax(0,1fr));gap:56px}}
.footer-brand img{display:block;width:150px;height:auto;background:#fff;padding:9px 14px 8px;border-radius:14px;box-sizing:content-box}
.footer-brand p{margin-top:22px;font-size:13.5px;line-height:2}
.footer-brand .corp-name{display:flex;flex-direction:column;gap:2px;margin-top:20px;line-height:1.4}.footer-brand .corp-name strong{font:700 20px/1.2 var(--f-en);letter-spacing:.06em}.footer-brand .corp-name span{font-size:12px;opacity:.75;letter-spacing:.08em}.footer-brand .corp-name+p{margin-top:12px}
.footer-brand .tagline{color:var(--lime);font:600 12px/1.6 var(--f-en);letter-spacing:.08em;margin-top:12px}
.footer-col h3{margin:0 0 18px;color:#fff;font:700 12px/1 var(--f-en);letter-spacing:.24em;text-transform:uppercase}
.footer-col ul{list-style:none;margin:0 0 18px;padding:0}
.footer-col li{margin:0 0 11px}
.footer-col a{font-size:14px;color:var(--on-dark-2);transition:color .3s ease,padding .5s var(--ease)}
.footer-col a:hover{color:var(--lime);padding-left:6px}
.footer-mark{
  margin:clamp(28px,5vw,80px) 0 0;font:400 clamp(110px,27vw,470px)/.78 var(--f-out);letter-spacing:-.04em;text-transform:lowercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.22);user-select:none;white-space:nowrap;
  transform:translateY(18%);
}
.footer-bottom{border-top:1px solid var(--line-d);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;position:relative;background:var(--ink)}
.footer-bottom p{margin:0;font-size:12px;color:#8a8aae}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:0;padding:0}
.footer-bottom li{margin:0}
.footer-bottom a{font-size:12px;color:#8a8aae}
.footer-bottom a:hover{color:var(--lime)}

.floatbar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:grid;grid-template-columns:1fr 1.25fr;gap:8px;
  transform:translateY(140%);transition:transform .6s var(--ease);
}
.floatbar.is-on{transform:none}
.floatbar.is-off{transform:translateY(140%)!important}
.floatbar a{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;font-size:14px;font-weight:900;letter-spacing:.04em;box-shadow:0 14px 34px -14px rgba(11,12,29,.6)}
.floatbar .f-tel{background:var(--ink);color:#fff}
.floatbar .f-form{background:var(--lime);color:var(--ink)}
@media (min-width:1040px){.floatbar{display:none}}
@media (max-width:1039px){body.has-floatbar{padding-bottom:78px}}

/* ==========================================================================
   下層ページ
   ========================================================================== */
.page-hero{
  position:relative;isolation:isolate;overflow:clip;background:var(--night);color:#fff;
  padding:calc(var(--hh) + clamp(48px,9vw,140px)) 0 clamp(48px,7vw,110px);
}
.page-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(900px 520px at 88% -10%,rgba(196,245,66,.2),transparent 62%),radial-gradient(800px 520px at 0% 110%,rgba(74,65,173,.7),transparent 66%);
}
.page-hero::after{
  content:attr(data-ghost);position:absolute;right:-1vw;bottom:-.2em;z-index:-1;
  font:400 clamp(80px,17vw,290px)/.8 var(--f-out);letter-spacing:-.03em;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);pointer-events:none;
}
.page-hero .eyebrow{color:var(--lime)}
.page-hero .eyebrow::before{background:var(--lime)}
.page-title{font-size:clamp(34px,6.6vw,112px);font-weight:900;line-height:1.16;letter-spacing:-.005em;color:#fff;max-width:14em}
.page-lead{max-width:38em;margin:clamp(20px,3vw,40px) 0 0;color:var(--on-dark-2);font-size:clamp(14.5px,1.25vw,17px);line-height:2.1}
.js .page-hero .eyebrow,.js .page-title,.js .page-lead{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .page-title{transition-delay:.12s}
.js .page-lead{transition-delay:.26s}
.js.is-ready .page-hero .eyebrow,.js.is-ready .page-title,.js.is-ready .page-lead{opacity:1;transform:none}

.breadcrumb{background:var(--paper);border-bottom:1px solid var(--line-2)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:15px 0;font-size:12.5px;font-weight:700;color:var(--text-3);letter-spacing:.04em}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:6px}
.breadcrumb li+li::before{content:"/";opacity:.5}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 下層ページの見出しブロック */
.section-head{max-width:880px;margin-bottom:clamp(36px,5vw,76px)}
.section-head.is-center{margin-inline:auto;text-align:center}
.section-head.is-center .eyebrow{justify-content:center}
.section-head p{margin-top:clamp(16px,2vw,28px)}
.section-head .lead{margin-bottom:0}

/* ---- ウェブ制作ページ ---------------------------------------------------- */
.concerns{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--ink)}
@media (min-width:900px){.concerns{grid-template-columns:repeat(2,1fr)}}
.concerns li{margin:0;display:flex;gap:clamp(16px,2vw,32px);align-items:baseline;padding:clamp(24px,3vw,44px) 0;border-bottom:1px solid var(--line)}
@media (min-width:900px){.concerns li:nth-child(odd){padding-right:clamp(16px,3vw,56px);border-right:1px solid var(--line)}.concerns li:nth-child(even){padding-left:clamp(16px,3vw,56px)}}
.concerns .num{font-size:14px;font-weight:600;color:var(--green-ink);letter-spacing:.1em;flex:none}
.concerns p{margin:0;font-size:clamp(20px,2.4vw,36px);font-weight:900;line-height:1.5}
.concerns-close{margin:clamp(28px,4vw,56px) 0 0;font-size:clamp(16px,1.6vw,22px);font-weight:900;line-height:1.9}
.concerns-close span{background:linear-gradient(transparent 62%,var(--lime) 62%)}

.lifespan{position:relative;overflow:clip;isolation:isolate}
.lifespan::before{content:"";position:absolute;right:-18vw;top:-14vw;width:60vw;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(circle,rgba(196,245,66,.16),rgba(196,245,66,0) 62%)}
.lifespan .eyebrow{color:var(--on-dark-2)}
.lifespan .eyebrow::before{background:var(--lime)}
.lifespan-grid{display:grid;gap:clamp(36px,5vw,90px)}
@media (min-width:1000px){.lifespan-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.lifespan-num{margin:clamp(24px,3vw,48px) 0 0;font-size:clamp(88px,15vw,260px);font-weight:700;line-height:.85;letter-spacing:-.06em;color:var(--lime)}
.lifespan-num small{font-size:.28em;font-family:var(--f-jp);letter-spacing:0;margin-left:.1em}
.lifespan-cap{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--on-dark-2)}
.lifespan-list{margin:0;border-top:1px solid var(--line-d)}
.lifespan-list>div{padding:clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--line-d);display:grid;gap:6px}
@media (min-width:700px){.lifespan-list>div{grid-template-columns:200px 1fr;gap:24px}}
.lifespan-list dt{font-size:clamp(17px,1.5vw,21px);font-weight:900;color:#fff}
.lifespan-list dd{margin:0;font-size:15px;line-height:1.95;color:var(--on-dark-2)}
.lifespan-close{margin:clamp(48px,7vw,110px) 0 0;font-size:clamp(26px,4.4vw,72px);font-weight:900;line-height:1.35;color:#fff}
.lifespan-close span{color:var(--lime)}

.promises{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));border-top:1px solid var(--ink)}
.promise{padding:clamp(24px,2.6vw,40px) clamp(14px,1.6vw,28px) clamp(26px,3vw,44px) 0;border-bottom:1px solid var(--line)}
@media (min-width:1000px){.promise{border-bottom:0;border-right:1px solid var(--line);padding-left:clamp(14px,1.6vw,28px)}.promise:first-child{padding-left:0}.promise:last-child{border-right:0}}
.promise b{display:block;margin-bottom:clamp(16px,2vw,28px);font-size:clamp(40px,5.2vw,84px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--ink);white-space:nowrap}
.promise b:not(.num){font-family:var(--f-jp);font-weight:900;font-size:clamp(30px,3.6vw,56px);letter-spacing:0}
.promise b small{font-size:.34em;font-family:var(--f-jp);font-weight:900;letter-spacing:0;margin-left:.15em}
.promise h3{font-size:clamp(16px,1.3vw,19px);margin-bottom:10px;line-height:1.55}
.promise p{font-size:14px;line-height:1.95;color:var(--text-2)}

.plan-note small{font-size:12.5px;font-weight:700;color:var(--text-3)}
.plan.is-featured .plan-note small{color:var(--on-dark-2)}
.plan-tax{margin:2px 0 0;font-size:12px;font-weight:700;color:var(--text-3)}
.plan.is-featured .plan-tax{color:var(--on-dark-2)}
.terms{display:grid;gap:0;margin-top:clamp(32px,4vw,60px);border-top:1px solid var(--ink)}
@media (min-width:900px){.terms{grid-template-columns:repeat(4,1fr)}}
.terms>div{padding:22px clamp(0px,1.4vw,24px) 24px 0;border-bottom:1px solid var(--line)}
@media (min-width:900px){.terms>div{border-bottom:0;border-right:1px solid var(--line);padding-left:clamp(10px,1.4vw,24px)}.terms>div:first-child{padding-left:0}.terms>div:last-child{border-right:0}}
.terms h3{font-size:14px;margin-bottom:8px;letter-spacing:.04em}
.terms p{font-size:13.5px;line-height:1.9;margin:0;color:var(--text-2)}
.section--soft .terms{margin-top:clamp(28px,3.4vw,52px)}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);box-shadow:0 0 0 1px var(--line-2) inset;background:#fff}
.compare-table{min-width:680px;font-size:14.5px}
.compare-table th,.compare-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.7}
.compare-table thead th{font-size:15px;font-weight:900;border-bottom:1px solid var(--ink);background:#fff;position:sticky;top:0}
.compare-table tbody th{font-size:13.5px;font-weight:900;color:var(--text-3);white-space:nowrap;width:1%}
.compare-table td{font-weight:700}
.compare-table .num{font-size:18px;font-weight:700;letter-spacing:-.02em}
.compare-table thead th:first-child,.compare-table tbody th{position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 var(--line-2)}
.table-hint{display:none;margin:0 0 12px;font:700 12px/1 var(--f-en);letter-spacing:.14em;color:var(--text-3)}
@media (max-width:899px){.table-hint{display:block}}
.compare-table .is-main{background:var(--night);color:#fff;border-bottom-color:rgba(255,255,255,.12)}
.compare-table thead .is-main{background:var(--night);color:#fff}
.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:0}

.why .eyebrow{color:var(--on-dark-2)}
.why .eyebrow::before{background:var(--lime)}
.why-lead{display:grid;gap:18px;max-width:900px;margin-bottom:clamp(40px,6vw,90px)}
.why-big{margin:0;font-size:clamp(28px,4.6vw,76px);font-weight:900;line-height:1.35;color:var(--lime)}
.why-lead p:not(.why-big){margin:0;font-size:clamp(14.5px,1.25vw,17px);line-height:2.1;color:var(--on-dark-2);max-width:40em}
.why-sub{margin:0 0 clamp(18px,2.4vw,34px);font-size:clamp(17px,1.6vw,22px);font-weight:900;color:#fff}
.why-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-d)}
.why-list li{margin:0;padding:clamp(18px,2vw,28px) 0;border-bottom:1px solid var(--line-d);display:grid;gap:6px}
@media (min-width:900px){.why-list li{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:baseline}}
.why-list b{font-size:clamp(16px,1.4vw,20px);font-weight:900;color:#fff;line-height:1.6}
.why-list span{font-size:14.5px;line-height:1.95;color:var(--on-dark-2)}
.why-close{margin:clamp(36px,5vw,80px) 0 0;font-size:clamp(18px,2.2vw,32px);font-weight:900;line-height:1.7;color:#fff}

/* cards / grid */
.grid{display:grid;gap:clamp(16px,2vw,30px)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line-2) inset;transition:transform .7s var(--ease),box-shadow .5s ease}
a.card:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--line-2) inset,0 36px 60px -34px rgba(11,12,29,.4)}
.card-media{position:relative;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
a.card:hover .card-media img{transform:scale(1.06)}
.card-body{padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;flex:1}
.card-body h3,.card-body .card-title{font-size:clamp(17px,1.4vw,21px);line-height:1.55;margin-bottom:10px}
.card-body p{font-size:14px;line-height:1.95;color:var(--text-2)}
.card-body .link-arrow{margin-top:auto;padding-top:16px}
.service-no{font:700 12px/1 var(--f-en);letter-spacing:.2em;color:var(--green-ink);display:block;margin-bottom:10px}

.mockup{aspect-ratio:3/2;width:100%;display:block;background:linear-gradient(150deg,#1a1470 0%,#100c47 60%,#0b0833 100%)}

/* feature rows */
.feature{display:grid;gap:clamp(24px,4vw,70px);align-items:center}
@media (min-width:900px){.feature{grid-template-columns:1fr 1fr}.feature.is-reverse .feature-media{order:2}}
.feature+.feature{margin-top:clamp(56px,8vw,130px)}
.feature-media{position:relative}
.feature-media img,.feature-media .mockup{border-radius:var(--r);width:100%}
.feature-media .stamp{
  position:absolute;left:clamp(10px,2vw,22px);bottom:clamp(10px,2vw,22px);background:var(--lime);color:var(--ink);
  padding:12px 20px;border-radius:999px;font-size:13px;font-weight:900;line-height:1.5;letter-spacing:.03em;
}
.feature-body h3{margin-bottom:18px}
.feature-body .price{display:inline-flex;align-items:baseline;gap:8px;margin-top:10px;color:var(--text-3);font-size:14px}
.feature-body .price b{font:700 clamp(30px,3vw,44px)/1 var(--f-en);color:var(--ink);letter-spacing:-.03em}

/* trust */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--ink)}
.trust div{padding:clamp(22px,2.4vw,40px) clamp(10px,1.4vw,24px) clamp(22px,2.4vw,40px) 0;border-bottom:1px solid var(--line)}
.trust b{display:block;font:700 clamp(40px,5vw,80px)/1 var(--f-en);color:var(--ink);letter-spacing:-.05em}
.trust b small{font-size:.32em;margin-left:.2em;color:var(--text-3);letter-spacing:0}
.trust>div>span{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--text-3)}

/* plans */
.plans{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.plan{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);padding:clamp(26px,2.6vw,40px);position:relative;box-shadow:0 0 0 1px var(--line-2) inset}
.plan.is-featured{background:var(--night);color:var(--on-dark);box-shadow:none}
.plan.is-featured h3,.plan.is-featured .plan-price b{color:#fff}
.plan.is-featured::before{content:"人気";position:absolute;top:22px;right:22px;background:var(--lime);color:var(--ink);font-size:11.5px;font-weight:900;padding:4px 12px;border-radius:999px;letter-spacing:.08em}
.plan h3{font-size:19px;margin-bottom:8px}
.plan .plan-note{font-size:13px;color:var(--text-3);min-height:3em}
.plan.is-featured .plan-note,.plan.is-featured li{color:var(--on-dark-2)}
.plan .plan-price{margin:22px 0 6px;display:flex;align-items:baseline;gap:6px;font-family:var(--f-en)}
.plan .plan-price b{font-size:clamp(40px,3.8vw,60px);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.05em}
.plan .plan-price span{font-size:13.5px;font-family:var(--f-jp);font-weight:700;color:var(--text-3)}
.plan.is-featured .plan-price span{color:var(--on-dark-2)}
.plan ul{list-style:none;margin:20px 0 28px;padding:20px 0 0;border-top:1px solid var(--line)}
.plan.is-featured ul{border-color:var(--line-d)}
.plan li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.85;color:var(--text-2)}
.plan li::before{content:"";position:absolute;left:2px;top:.6em;width:12px;height:7px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.plan.is-featured li::before{border-color:var(--lime)}
.plan .btn{margin-top:auto}
.plan.is-featured .btn{--bg:var(--lime);--fg:var(--ink);--bd:var(--lime);--hover:#fff}

/* definition table */
.deftable{border-top:1px solid var(--ink)}
.deftable dl{display:grid;margin:0;border-bottom:1px solid var(--line)}
@media (min-width:720px){.deftable dl{grid-template-columns:240px 1fr}}
.deftable dt{padding:22px 4px 4px;font-size:13.5px;font-weight:900;letter-spacing:.06em;color:var(--text-3)}
.deftable dd{margin:0;padding:0 4px 22px;font-size:15px;line-height:1.95;font-weight:700}
@media (min-width:720px){.deftable dt{padding:26px 20px 26px 0}.deftable dd{padding:26px 0}}
.deftable a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.deftable a:hover{color:var(--green-ink)}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:var(--line)}
.timeline li{position:relative;margin:0;padding:0 0 clamp(24px,3vw,40px) 40px}
.timeline li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--green)}
.timeline li:last-child{padding-bottom:0}
.timeline .year{display:block;font:700 clamp(18px,1.8vw,26px)/1.4 var(--f-en);color:var(--ink);letter-spacing:-.01em;margin-bottom:4px}
.timeline p{font-size:15px;line-height:1.95;margin:0;color:var(--text-2)}

/* steps */
.steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps li{counter-increment:step;position:relative;margin:0;background:#fff;border-radius:var(--r);padding:clamp(30px,3vw,44px) clamp(22px,2vw,30px) clamp(24px,2.4vw,34px);box-shadow:0 0 0 1px var(--line-2) inset}
.steps li::before{content:"0" counter(step);display:block;margin-bottom:26px;font:700 clamp(48px,5vw,76px)/.9 var(--f-en);letter-spacing:-.06em;color:var(--green)}
.steps h3{font-size:18px;margin-bottom:10px}
.steps p{font-size:13.5px;line-height:1.95;margin:0;color:var(--text-2)}

/* gallery */
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gallery figure{margin:0}
.gallery img{border-radius:var(--r-s);width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{margin-top:8px;font-size:12.5px;line-height:1.7;color:var(--text-3)}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;gap:16px;align-items:flex-start;padding:clamp(20px,2vw,30px) 56px clamp(20px,2vw,30px) 0;position:relative;cursor:pointer;list-style:none;font-size:clamp(15.5px,1.3vw,19px);font-weight:900;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";font:700 15px/1.9 var(--f-en);color:var(--green-ink);flex:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:34px;height:34px;margin-top:-17px;border:1px solid var(--ink);border-radius:50%;
  background:linear-gradient(var(--ink),var(--ink)) center/12px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 12px no-repeat;transition:transform .5s var(--ease),background-color .3s ease}
.faq details[open] summary::after{transform:rotate(135deg);background-color:var(--lime)}
.faq .a{display:flex;gap:16px;padding:0 56px clamp(22px,2.4vw,34px) 0;font-size:15px;line-height:2}
.faq .a::before{content:"A";font:700 15px/2 var(--f-en);color:var(--text-3);flex:none}

/* form */
.form{display:grid;gap:clamp(22px,2.4vw,32px)}
.field{display:grid;gap:10px}
.field label{font-size:14px;font-weight:900;color:var(--ink);display:flex;align-items:center;gap:10px}
.req{background:var(--ink);color:#fff;font-size:10.5px;font-weight:900;padding:3px 9px;border-radius:999px;letter-spacing:.06em}
.opt{border:1px solid var(--line);color:var(--text-3);font-size:10.5px;font-weight:900;padding:2px 9px;border-radius:999px}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:17px 18px;font:inherit;font-size:16px;font-weight:500;color:var(--ink);
  background:#fff;border:1px solid rgba(11,12,29,.2);border-radius:14px;transition:border-color .25s ease,box-shadow .25s ease;
}
.field textarea{min-height:190px;resize:vertical;line-height:1.9}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(196,245,66,.55)}
.field .hint{font-size:12.5px;color:var(--text-3)}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#c22b22;background:#fff8f7}
.field .err{font-size:12.5px;color:#b3261e;font-weight:900}
.radio-row{display:flex;flex-wrap:wrap;gap:10px}
.radio-row label{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:1px solid rgba(11,12,29,.2);border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;background:#fff;transition:background .25s ease,color .25s ease,border-color .25s ease}
.radio-row input{accent-color:var(--ink)}
.radio-row label:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}
.radio-row label:has(input:checked) input{accent-color:var(--lime)}
.form-note{background:#fff;border-radius:var(--r-s);padding:20px 22px;font-size:13px;line-height:1.95;color:var(--text-3);box-shadow:0 0 0 1px var(--line-2) inset}
.hp{position:absolute!important;left:-9999px!important}
.notice{padding:20px 22px;border-radius:var(--r-s);font-size:14.5px;line-height:1.9;margin-bottom:28px;font-weight:700}
.notice--ok{background:var(--lime);color:var(--ink)}
.notice--ng{background:#fdecea;color:#8c1d18}

/* editor content */
.entry{font-size:16px;line-height:2.1}
.entry h2{font-size:clamp(22px,2.6vw,34px);margin:2.6em 0 .9em;padding-bottom:.6em;border-bottom:1px solid var(--ink)}
.entry h2:first-child{margin-top:0}
.entry h3{font-size:clamp(18px,1.8vw,22px);margin:2em 0 .8em;padding-left:16px;border-left:4px solid var(--lime-2)}
.entry ul,.entry ol{margin:0 0 1.6em;padding-left:1.4em}
.entry img{border-radius:var(--r-s);margin:1.6em 0}
.entry figure{margin:1.8em 0}
.entry figcaption{margin-top:8px;font-size:12.5px;color:var(--text-3);text-align:center}
.case-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3vw,48px) clamp(18px,2vw,32px);margin:1.6em 0 2.4em;counter-reset:step}
.case-steps .case-step{margin:0;counter-increment:step}
.case-steps .case-step img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--paper-2);border-radius:var(--r-s);margin:0}
.case-steps .case-step figcaption{margin-top:14px;font-size:14.5px;line-height:1.95;color:var(--ink);text-align:left;font-weight:700}
.case-steps .case-step figcaption::before{content:counter(step,decimal-leading-zero);display:inline-block;margin-right:12px;font:700 13px/1 var(--f-en);color:var(--green-ink);letter-spacing:.1em}
@media (max-width:640px){.case-steps{grid-template-columns:1fr}}
.entry blockquote{margin:1.8em 0;padding:20px 24px;background:#fff;border-left:4px solid var(--lime-2);border-radius:0 var(--r-s) var(--r-s) 0}
.entry table{margin:1.6em 0;font-size:14.5px}
.entry th,.entry td{border:1px solid var(--line);padding:12px 14px;text-align:left}
.entry th{background:var(--paper-2);font-weight:900}
.entry a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.entry a:hover{color:var(--green-ink)}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
.entry-meta time{font:600 13px/1 var(--f-en);color:var(--text-3);letter-spacing:.06em}

.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:56px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font:600 14px/1 var(--f-en);transition:background .3s ease,color .3s ease}
.pagination .page-numbers:hover{background:var(--ink);color:#fff}
.pagination .current{background:var(--ink);border-color:var(--ink);color:#fff}
.postnav{display:grid;gap:12px;margin-top:64px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.postnav a{background:#fff;border-radius:var(--r);padding:22px 26px;color:var(--ink);font-weight:900;box-shadow:0 0 0 1px var(--line-2) inset;transition:transform .6s var(--ease)}
.postnav a:hover{transform:translateY(-4px)}
.postnav span{display:block;font:700 11px/1 var(--f-en);letter-spacing:.2em;color:var(--text-3);margin-bottom:8px;text-transform:uppercase}

.note-band{background:#fff;border-radius:var(--r);padding:clamp(24px,2.6vw,38px);box-shadow:0 0 0 1px var(--line-2) inset}
.note-band h3{font-size:17px;margin-bottom:10px}
.note-band p{font-size:14px;margin-bottom:0;color:var(--text-2)}

.mapframe{border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--paper-2);position:relative;display:flex}
.mapframe iframe{width:100%;height:100%;border:0;display:block}
.map-load{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--paper-2);padding:24px;text-align:center}
.map-load span{font-size:15px;font-weight:900;border:1px solid var(--ink);border-radius:999px;padding:14px 28px;transition:background .3s ease,color .3s ease}
.map-load small{font-size:12px;color:var(--text-3);max-width:34em;line-height:1.7}
.map-load:hover span{background:var(--ink);color:#fff}

.contact-layout{display:grid;gap:clamp(32px,4vw,64px)}
@media (min-width:960px){.contact-layout{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);align-items:start}}
.contact-side{display:grid;gap:16px}
.contact-side .card-body{padding:24px 26px 28px}
.contact-side h3{font-size:16px;margin-bottom:8px}
.contact-side p{font-size:13.5px;margin-bottom:16px}

.reveal{opacity:1}

/* --- page transition ------------------------------------------------------ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s var(--ease-io) both}
::view-transition-new(root){animation:vt-in .7s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-18px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}

/* --- WordPress の管理バー（ログイン中だけ出る黒い帯）との干渉を避ける ------------ */
.admin-bar .site-header{top:32px}
.admin-bar .progress{top:32px}
.admin-bar .drawer{padding-top:calc(var(--hh) + 52px)}
@media (max-width:782px){.admin-bar .site-header,.admin-bar .progress{top:46px}.admin-bar .drawer{padding-top:calc(var(--hh) + 66px)}}

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .marquee-track{animation:none}
  .js .line>span,.js [data-reveal],.js .hero-kicker,.js .hero-bottom,.js .page-hero .eyebrow,.js .page-title,.js .page-lead{transform:none!important;opacity:1!important}
  [data-fill] .ch{opacity:1}
  .cursor{display:none!important}
  .intro{display:none!important}
  @view-transition{navigation:none}
}

/* --- v1.3 : 外部ライブラリなしで移植した演出（Magic UI / Aceternity 系の手法を素のCSSで） ---- */
/* カーソル追従のスポットライト（Magic Card） */
.plan,.why-list li{--mx:50%;--my:50%}
.plan::after,.why-list li::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx) var(--my),rgba(196,245,66,.16),transparent 70%)}
.plan:not(.is-featured)::after{background:radial-gradient(360px circle at var(--mx) var(--my),rgba(16,12,71,.07),transparent 70%)}
.plan.is-glow::after,.why-list li.is-glow::after{opacity:1}
/* 光が縁を一周する枠（Border Beam）— 人気プランだけ */
@property --beam{syntax:"<angle>";initial-value:0deg;inherits:false}
.plan.is-featured{isolation:isolate}
.plan.is-featured::after{opacity:1;inset:-1px;padding:2px;border-radius:calc(var(--r) + 1px);
  background:conic-gradient(from var(--beam),transparent 0 70%,rgba(196,245,66,.95) 86%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam 6s linear infinite}
@keyframes beam{to{--beam:360deg}}
/* ベントグリッド（お店の中を知っているから、できること） */
@media (min-width:900px){
  .why-list{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;border-top:0}
  .why-list li{position:relative;grid-column:span 2;grid-template-columns:1fr;gap:14px;align-content:space-between;min-height:210px;padding:28px;border:1px solid var(--line-d);border-radius:var(--r);background:rgba(255,255,255,.03);overflow:hidden}
  .why-list li:nth-child(1),.why-list li:nth-child(4){grid-column:span 4}
  .why-list li:nth-child(5),.why-list li:nth-child(6){grid-column:span 3}
  .why-list li:nth-child(1) b,.why-list li:nth-child(4) b{font-size:clamp(20px,1.9vw,26px)}
}
/* WebGLの背景（理念） */
.phi-gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1.2s}
.phi-gl.is-on{opacity:.9}
@media (prefers-reduced-motion:reduce){.plan.is-featured::after{animation:none;--beam:40deg}.phi-gl{display:none}}

/* --- Square 申込ボタン周り --- */
.plan .btn[data-plan]{background:var(--lime);color:var(--ink)}
.plan.is-featured .btn[data-plan]{background:var(--lime)}
.plan-pay{margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--text-3);text-align:center}
.plan.is-featured .plan-pay{color:var(--on-dark-2)}
.plan-sub{display:block;margin-top:8px;text-align:center;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px}

/* --- お支払いの案内 --- */
.pay-guide{margin-top:clamp(28px,3.4vw,48px);padding:clamp(22px,2.6vw,36px);background:#fff;border-radius:var(--r);box-shadow:0 0 0 1px var(--line-2) inset}
.pay-guide h3{font-size:clamp(16px,1.5vw,20px);margin:0 0 14px}
.pay-guide ol{margin:0;padding:0;list-style:none;counter-reset:pg;display:grid;gap:12px}
@media (min-width:900px){.pay-guide ol{grid-template-columns:repeat(3,1fr);gap:24px}}
.pay-guide li{counter-increment:pg;position:relative;padding-left:40px;font-size:14px;line-height:1.9;color:var(--text-2)}
.pay-guide li::before{content:counter(pg);position:absolute;left:0;top:2px;width:28px;height:28px;border-radius:50%;background:var(--night);color:var(--lime);font:700 14px/28px var(--f-en);text-align:center}
.pay-guide li b{display:block;color:var(--ink);font-size:15px}
.pay-guide u{text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700;color:var(--ink)}
.pay-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.8;color:var(--text-3)}
.plan-pay a{text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* ==========================================================================
   v1.4 写真と完成イメージ
   ========================================================================== */
/* トップ：About の下の写真 */
.stmt-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.4vw,20px);margin-top:clamp(40px,6vw,90px)}
.stmt-photos li{position:relative;overflow:hidden;border-radius:clamp(10px,1.4vw,20px);aspect-ratio:4/5;background:var(--paper-2)}
.stmt-photos li:nth-child(2){transform:translateY(clamp(14px,3vw,44px))}
.stmt-photos picture,.stmt-photos img{display:block;width:100%;height:100%}
.stmt-photos img{object-fit:cover;transition:transform 1.2s var(--ease)}
.stmt-photos li:hover img{transform:scale(1.05)}
.stmt-photos span{position:absolute;left:12px;bottom:12px;padding:5px 12px;border-radius:999px;background:rgba(16,12,71,.82);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em}
@media (min-width:900px){.stmt-photos li{aspect-ratio:3/4}.stmt-photos{margin-bottom:clamp(14px,3vw,44px)}}

/* 会社概要：事業の写真 */
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.6vw,22px)}
@media (min-width:900px){.photo-grid{grid-template-columns:repeat(4,1fr)}}
.photo-grid li{display:flex;flex-direction:column;gap:12px}
.photo-grid picture,.photo-grid img{display:block;width:100%}
.photo-grid img{aspect-ratio:4/5;object-fit:cover;border-radius:clamp(10px,1.4vw,18px)}
.photo-grid span{font-size:13px;line-height:1.7;color:var(--ink-2,inherit)}
.photo-grid b{display:block;font-size:11px;letter-spacing:.2em;color:var(--indigo,#4a41ad);margin-bottom:2px}

/* ウェブ制作：架空のお店の画面（画像を使わず HTML と CSS で描く） */
.mock-screen{--m-red:#8f2a1d;--m-ink:#14110f;--m-cream:#f4efe6;--m-gold:#c8a45c;position:relative;overflow:hidden;background:var(--m-cream);color:var(--m-ink);font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-weight:600;width:100%;height:100%;text-align:left}
.mk-bar{display:flex;align-items:center;gap:6px;padding:.9em 1em;background:var(--m-ink);color:#fff;font-size:inherit}
.mk-bar b{margin-right:auto;font-size:1.05em;letter-spacing:.08em;white-space:nowrap}
.mk-bar i{width:1.6em;height:2px;background:rgba(255,255,255,.55);border-radius:2px}
.mk-hero{position:relative;padding:1.8em 1.2em 1.6em;background:radial-gradient(110% 90% at 82% 8%,#a9854a 0,#4a3b26 40%,#14110f 100%);color:#fff}
.mk-new{display:inline-block;margin:0 0 .6em;padding:.15em .7em;border-radius:99px;background:transparent;border:1px solid var(--m-gold);color:var(--m-gold);font-weight:700;font-size:.8em;letter-spacing:.2em}
.mk-t{margin:0 0 1em;font-weight:700;font-size:1.9em;line-height:1.35;letter-spacing:.12em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.mk-btn{display:inline-block;margin:0;padding:.55em 1.3em;border-radius:99px;background:var(--m-gold);color:var(--m-ink);font-weight:800;font-size:.95em;letter-spacing:.14em}
.mk-body{padding:1em 1.1em}
.mk-body--row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.mk-pic{aspect-ratio:1;border-radius:.5em;background:radial-gradient(90% 90% at 30% 25%,#d9b878,#8a5a36 60%,#2c1b12)}
.mk-pic--b{background:radial-gradient(90% 90% at 70% 30%,#c9d2d8,#4f6272 58%,#1b2630)}
.mk-pic--c{background:radial-gradient(90% 90% at 40% 70%,#d4dcc0,#78845a 55%,#2d3520)}
.mk-body>.mk-pic{aspect-ratio:16/9;margin-top:.8em}
.mk-h{margin:0 0 .6em;font-weight:900;font-size:1.25em;color:var(--m-red);letter-spacing:.06em}
.mk-list{margin:0;padding:0;list-style:none}
.mk-list li{display:flex;justify-content:space-between;gap:.6em;padding:.6em 0;border-bottom:1px dashed rgba(42,26,20,.3);font-size:.95em}
.mk-list em{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.mk-list--plain li{border-bottom-style:solid;border-bottom-color:rgba(42,26,20,.12)}
.mk-tag{margin:.9em 0 0;padding:.5em .8em;border-radius:.4em;background:var(--m-ink);color:var(--m-gold);font-weight:800;font-size:.9em}
.mk-map{position:relative;height:6.2em;margin-bottom:.7em;border-radius:.5em;background:linear-gradient(90deg,transparent 48%,#fff 48% 52%,transparent 52%),linear-gradient(0deg,transparent 40%,#fff 40% 46%,transparent 46%),#e5dccb}
.mk-map span{position:absolute;left:55%;top:28%;width:1.2em;height:1.2em;border-radius:50% 50% 50% 0;background:var(--m-red);transform:rotate(-45deg)}
.mk-body .mk-btn{margin-top:.9em;background:var(--m-ink);color:var(--m-gold)}

.mock-pc{position:relative;aspect-ratio:16/10;padding:2.2% 2.2% 3%;border-radius:14px 14px 4px 4px;background:#0b0930;border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 70px rgba(0,0,0,.45);font-size:clamp(7px,.82vw,11.5px)}
.mock-pc::after{content:"";position:absolute;left:-4%;right:-4%;bottom:-14px;height:14px;border-radius:0 0 14px 14px;background:linear-gradient(#cfd0dc,#8e8fa6)}
.mock-pc .mock-screen{border-radius:4px}
.mock-phone{position:relative;aspect-ratio:9/19;padding:2.4%;border-radius:26px;background:#0b0930;border:1px solid rgba(255,255,255,.28);box-shadow:0 24px 60px rgba(0,0,0,.4);font-size:clamp(6.5px,.7vw,9.5px)}
.mock-phone .mock-screen{border-radius:20px}
.mock-phone::before{content:"";position:absolute;left:50%;top:1.6%;z-index:2;width:28%;height:1.5%;border-radius:99px;background:#0b0930;transform:translateX(-50%)}
.mock-phone .mk-bar{padding-top:1.7em}

.mock-devices{position:relative;margin-top:clamp(44px,7vw,70px);max-width:560px;padding-bottom:14px}
.mock-devices .mock-phone{position:absolute;right:-3%;bottom:-8%;width:26%}
.mock-note{margin:clamp(52px,9vw,60px) 0 0;max-width:calc(100% - 100px);line-height:1.8;font-size:11px;letter-spacing:.14em;color:var(--on-dark-2)}
.mock-note::before{content:"";display:inline-block;width:24px;height:1px;margin-right:10px;vertical-align:middle;background:var(--lime)}
@media (min-width:1280px){
	.page-hero.has-aside .mock-devices{position:absolute;right:clamp(24px,4vw,72px);bottom:clamp(60px,8vw,130px);margin:0;width:clamp(400px,38vw,640px)}
	.page-hero.has-aside .mock-note{position:absolute;left:0;top:calc(100% + 26px);margin:0;white-space:nowrap}
}
.js .page-hero .mock-devices{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease) .4s,transform 1.1s var(--ease) .4s}
.js.is-ready .page-hero .mock-devices{opacity:1;transform:none}

.mock-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,3vw,48px);align-items:start;max-width:980px;margin-inline:auto}
.mock-trio figure{margin:0;display:flex;flex-direction:column;gap:18px;align-items:center}
.mock-trio .mock-phone{width:100%;max-width:260px;font-size:clamp(6px,1.15vw,12.5px);background:#16124f;border-color:rgba(16,12,71,.25);box-shadow:0 22px 50px rgba(16,12,71,.28)}
.mock-trio figure:nth-child(2){margin-top:clamp(16px,3vw,44px)}
.mock-trio figcaption{font-size:clamp(11px,1.2vw,14px);line-height:1.7;text-align:center}
.mock-trio figcaption b{display:block;font-size:1.1em;margin-bottom:2px}
.mock-foot{max-width:44em;margin:clamp(34px,5vw,60px) auto 0;font-size:12px;line-height:1.9;color:var(--muted,#667);text-align:center}
@media (max-width:560px){.mock-trio{grid-template-columns:1fr;max-width:260px}.mock-trio figure:nth-child(2){margin-top:0}.mock-trio .mock-phone{font-size:11px}}

/* v1.4.2 社屋の写真 */
.office-photo{padding-block:clamp(48px,7vw,110px)}
.office-fig{margin:0;overflow:hidden;border-radius:clamp(14px,2vw,28px);background:var(--paper-2);aspect-ratio:3/2;box-shadow:0 30px 70px rgba(16,12,71,.16)}
.office-fig picture,.office-fig img{display:block;width:100%;height:100%}
.office-fig img{object-fit:cover}
@media (min-width:900px){.office-fig{aspect-ratio:2/1}.office-fig img{object-position:50% 52%}}

.stmt-banner{position:relative;isolation:isolate;overflow:hidden;height:clamp(340px,52vw,760px);background:#9a9aa0;color:#fff}
.stmt-banner picture,.stmt-banner img{display:block;width:100%}
.stmt-banner img{position:absolute;left:0;top:-14%;height:128%;object-fit:cover;object-position:50% 50%;will-change:transform}
.stmt-banner::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,12,71,0) 38%,rgba(16,12,71,.72) 100%),linear-gradient(90deg,rgba(16,12,71,.35),transparent 55%)}
.stmt-banner-cap{position:absolute;z-index:2;left:max(var(--gutter,24px),4vw);right:var(--gutter,24px);bottom:clamp(24px,4.5vw,64px)}
.stmt-banner .label{color:var(--lime)}
.stmt-banner-t{margin:.4em 0 0;font-size:clamp(24px,4.2vw,64px);font-weight:900;line-height:1.25;letter-spacing:.01em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
@supports (animation-timeline:view()){
	@media (prefers-reduced-motion:no-preference){
		.stmt-banner img{animation:bannerpan linear both;animation-timeline:view()}
		@keyframes bannerpan{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
	}
}
.mock-devices{margin-bottom:clamp(30px,5vw,40px)}
@media (min-width:1280px){.page-hero.has-aside .mock-devices{margin-bottom:0}}