/* IDIDIT STUDIO — site.css
   トークンは ClaudeDesign_書き出し/project/CLAUDE.md、動きの仕様は HANDOFF.md 3章。
   区切り：スマホ 〜760px／タブレット 761〜1080px／PC 1081px〜 */

/* ---------- 書体（DESIGN.md 4-1） ----------
   Mona Sans は英字だけに絞って自前配信（HTML で preload）。日本語の Zen Kaku Gothic New も、サイトで使う文字だけに絞って自前配信
   （tools/jpfont.py が作る。文言を直したら流す。読み込みを待たずに表示）。外部の書体サービスは使わない。
   Mona Sans が届くまでは、幅をそろえた Arial で表示してがたつきを抑える（size-adjust）。
   ライセンスは assets/fonts/OFL.txt（Mona Sans）と OFL-ZenKakuGothicNew.txt */
@font-face{font-family:"Mona Sans";src:url(/assets/fonts/mona-sans-latin.woff2) format("woff2");font-style:normal;font-weight:200 900;font-stretch:75% 125%;
  font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201F,U+2026,U+2122,U+2190-2193,U+2212}
@font-face{font-family:"Mona Sans Fallback";src:local("Arial"),local("ArialMT");size-adjust:101.58%;ascent-override:107.3%;descent-override:31.5%;line-gap-override:0%;
  unicode-range:U+0020-007E,U+00A0-00FF}
/* jpfont:start（tools/jpfont.py が書く。手で直さない） */
@font-face{font-family:"Zen Kaku Gothic New";src:url(/assets/fonts/zen-kaku-gothic-new-400.2233bd75.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url(/assets/fonts/zen-kaku-gothic-new-500.466cfa18.woff2) format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url(/assets/fonts/zen-kaku-gothic-new-700.94d1a9f2.woff2) format("woff2");font-style:normal;font-weight:700;font-display:swap}
/* jpfont:end */
/* palt（かなを詰める）は使わない。Zen Kaku Gothic New には palt がなく効かないうえ、書体が届く前の端末の書体（ヒラギノなど）では効くので、
   届いた瞬間に行数が変わってページがずれる（CLS）。書体を変えるときは見直す */

/* ---------- トークン ---------- */
:root{
  --paper:#F5F5F7;--sheet:#FFFFFF;--ink:#1D1D1F;--graphite:#6E6E73;--hairline:#D2D2D7;
  --void:#000000;--moon:#F5F5F7;--ash:#A1A1A6;--graphite-deep:#1D1D1F;--hairline-dark:#333336;--error:#D70015;
  --s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:104px;--s7:168px;
  --gutter:clamp(20px,5vw,64px);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-inout:cubic-bezier(.65,0,.35,1);
  --font:"Mona Sans","Mona Sans Fallback","Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  /* 画面の高さの1%。site.js が開いたときの値（px）で固定する（iPhone の Safari はツールバーの出入りのたびに vh・svh を変え、
     高さを vh で決めた部分から下がずれてがたつくため）。JS が動かないときは、ふつうの vh・svh のまま */
  --vh:1vh;--svh:1vh;
  /* スクロールで site.js が書き換える値 */
  --pbg:0;--pst:0;--pls:0;--pso:1;--pout:0;--sweep:130%;
  --bg:color-mix(in oklab,var(--paper),var(--void) calc(var(--pbg)*100%));
  --fg:color-mix(in oklab,var(--ink),var(--moon) calc(var(--pbg)*100%));
  --fg2:color-mix(in oklab,var(--graphite),var(--ash) calc(var(--pbg)*100%));
  --line:color-mix(in oklab,var(--hairline),var(--hairline-dark) calc(var(--pbg)*100%));
  color-scheme:light;
  background:var(--bg);
}
@supports (height:1svh){:root{--svh:1svh}}
:root.is-dark{color-scheme:dark}

/* ---------- 土台 ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:calc(var(--vh)*100);background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.9;
  -webkit-font-smoothing:antialiased;text-spacing-trim:trim-start;text-autospace:normal;-webkit-text-size-adjust:100%;
  /* 日本語は文節の区切り（HTML の <wbr>。tools/wbr.py で入れる）と句読点でだけ折り返す。入りきらないときだけ途中で折る */
  word-break:keep-all;overflow-wrap:anywhere}
/* 見出し・リード文・短い一文（class="cl"）は、読点・句点までをひとまとまりにする。入りきらないときは読点・句点で折れる */
.cl-p{display:inline-block}
img{max-width:100%}
picture{display:block}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 16px;background:var(--ink);color:var(--paper);border-radius:999px;font-size:14px;text-decoration:none}
.skip:focus{left:16px}

/* ページの移動（View Transitions） */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:250ms}

/* ---------- 文字 ---------- */
.h2{margin:0 0 var(--s4);font-size:clamp(30px,4.2vw,56px);font-weight:700;line-height:1.3;letter-spacing:.01em;
  text-wrap:balance}
.h3{margin:0;font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.5}
.lead{margin:0;font-size:clamp(19px,2vw,26px);font-weight:500;line-height:1.65;text-wrap:balance}
.body{font-size:17px;line-height:1.9;text-wrap:pretty;line-break:strict;max-inline-size:36em}
.small{font-size:14px;line-height:1.7}
.muted{color:var(--fg2)}
.m0{margin:0}

/* ---------- ボタン・リンク ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:999px;
  background:var(--fg);color:var(--bg);font-size:16px;font-weight:500;text-decoration:none;transition:background 150ms}
.btn:hover{background:color-mix(in oklab,var(--fg),var(--bg) 14%)}
.tlink{font-size:16px;font-weight:500}
.ext{display:inline-flex;align-items:center;gap:4px}
.ext svg{flex:none}
.btn-row{display:flex;align-items:center;gap:32px}

/* ---------- クローム文字（HANDOFF 3-4、CLAUDE.md） ---------- */
.chrome{--hz:0%;position:relative;display:inline-block;margin:0;padding:.14em 0 .1em;font-weight:800;font-stretch:125%;line-height:.88;letter-spacing:-.045em;
  background-size:260% 100%,100% 100%;background-position:var(--sweep) 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.chrome-lg{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%),
  linear-gradient(180deg,#FFFFFF 0%,#E4E6E9 calc(16% + var(--hz)),#B7BBC1 calc(36% + var(--hz)),#50555C calc(46% + var(--hz)),#2A2E34 calc(50% + var(--hz)),#A2A7AE calc(54% + var(--hz)),#D9DCE0 calc(74% + var(--hz)),#F6F7F9 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 18px 28px rgba(29,29,31,.10))}
.chrome-dark{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.7) 50%,transparent 60%),
  linear-gradient(180deg,#8D9299 0%,#C9CDD2 calc(45% + var(--hz)),#FFFFFF calc(49% + var(--hz)),#FFFFFF calc(51% + var(--hz)),#4A4F56 calc(55% + var(--hz)),#9DA2A9 100%);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.18))}
@media (forced-colors:active){.chrome,.logo,.next-title{background:none!important;color:CanvasText!important;filter:none!important}}
/* スマホの光の帯（site.js が流すあいだだけ置く写し）。位置・大きさ・書体は site.js が元の文字から写す */
.sw-box{position:absolute;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none}
.sw{position:absolute;top:0;bottom:0;will-change:transform;
  -webkit-mask-image:linear-gradient(105deg,transparent 40%,#000 50%,transparent 60%);mask-image:linear-gradient(105deg,transparent 40%,#000 50%,transparent 60%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.sw-t{position:absolute;top:0;margin:0;will-change:transform}

/* ---------- ロゴ ---------- */
.logo{display:inline-flex;gap:.35em;align-items:baseline;font-size:15px;letter-spacing:.04em;line-height:1;font-stretch:125%;text-decoration:none;
  background-image:linear-gradient(180deg,#3A3E44,#1D1D1F 50%,#62666D);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo b{font-weight:800}
.logo span{font-weight:300}
.logo--dark{background-image:linear-gradient(180deg,#FFFFFF,#A1A1A6 50%,#E8E8ED)}

/* ---------- ナビ（HANDOFF 3-2） ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);
  view-transition-name:site-nav;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  background:rgba(245,245,247,.72);border-bottom:1px solid #D2D2D7;color:#1D1D1F;line-height:1.9;
  transition:background 200ms,border-color 200ms,color 200ms}
.nav-links{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500}
.nav-links a{color:inherit;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:6px}
.nav-links a:hover,.nav-links a[aria-current="page"]:not(.nav-cta){text-decoration:underline}
.nav .nav-cta{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:#1D1D1F;color:#F5F5F7;
  font-size:13px;font-weight:500;text-decoration:none;transition:background 200ms,color 200ms}
.nav-sp{display:none;align-items:center;gap:4px;margin-right:-10px}
.is-dark:not([data-menu="open"]) .nav{background:rgba(0,0,0,.6);border-bottom-color:#333336;color:#F5F5F7}
.nav .nav-cta:hover{text-decoration:none}
.is-dark:not([data-menu="open"]) .nav-cta{background:#F5F5F7;color:#1D1D1F}
.is-dark:not([data-menu="open"]) .nav .logo{background-image:linear-gradient(180deg,#FFFFFF,#A1A1A6 50%,#E8E8ED)}
[data-menu="open"] .nav{background:#F5F5F7}

/* メニューボタン（2本線 → ×） */
.menu-btn{appearance:none;border:0;padding:0;margin:0;background:none;color:inherit;font:inherit;cursor:pointer;
  width:44px;height:44px;display:grid;place-items:center;position:relative}
.menu-btn span{position:absolute;left:13px;width:18px;height:1.2px;background:currentColor;transition:transform 300ms var(--ease-out);transform:translateY(-3.5px)}
.menu-btn span+span{transform:translateY(3.5px)}
[data-menu="open"] .menu-btn span{transform:rotate(45deg)}
[data-menu="open"] .menu-btn span+span{transform:rotate(-45deg)}

/* スマホのメニュー（HANDOFF 3-8） */
.sp-menu{position:fixed;left:0;right:0;top:48px;bottom:0;z-index:49;display:none;flex-direction:column;justify-content:space-between;
  padding:40px 20px 32px;background:#F5F5F7;color:#1D1D1F;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),visibility 0s linear 300ms}
[data-menu="open"] .sp-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sp-menu ul{list-style:none;margin:0;padding:0;border-top:1px solid #D2D2D7}
.sp-menu li{border-bottom:1px solid #D2D2D7}
.sp-menu a{display:flex;align-items:baseline;gap:16px;padding:20px 0;color:inherit;text-decoration:none}
.sp-menu .en{font-size:40px;font-weight:700;font-stretch:112%;letter-spacing:-.03em;line-height:1}
.sp-menu .ja{font-size:15px;font-weight:500;color:#6E6E73}
.sp-menu .copy{margin:40px 0 0;font-size:12px;line-height:1.6;color:#6E6E73}

/* ---------- 入れ物 ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter) var(--s7);box-sizing:content-box}

/* ---------- HOME：ヒーロー ---------- */
.hero{min-height:calc(var(--svh)*100);display:grid;grid-template-rows:1fr auto;padding:52px var(--gutter) 24px;text-align:center}
.hero-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}
.hero-mark{animation:hero-blur 900ms var(--ease-out) 200ms both}
.hero-title{font-size:clamp(72px,15vw,232px);animation:hero-ls 900ms var(--ease-out) 200ms both}
.hero-sub{display:flex;flex-direction:column;align-items:center;gap:40px;animation:fade-up 600ms var(--ease-out) 1300ms both}
.hero-note{margin:0;font-size:12px;line-height:1.6;color:var(--graphite);animation:fade-up 600ms var(--ease-out) 1300ms both}
@keyframes hero-blur{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes hero-ls{from{letter-spacing:-.02em}to{letter-spacing:-.045em}}
@keyframes fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- HOME：ステートメント ---------- */
.st{height:calc(var(--vh)*240);position:relative}
.st-pin{position:sticky;top:0;height:calc(var(--vh)*100);display:flex;align-items:center;justify-content:center;padding:0 var(--gutter)}
.st-text{margin:0;text-align:center;font-size:clamp(26px,3.6vw,48px);font-weight:700;line-height:1.6;max-width:30em;opacity:var(--pso)}
.st-l{display:block}
.st-p{display:inline-block}   /* 1文の中のまとまり。スマホではこの間でだけ折り返す */
.st-l span{color:color-mix(in oklab,#C7C7CC,var(--fg) calc(clamp(0,(var(--pst)*1.53 - var(--i))*10,1)*100%))}

/* ---------- HOME：ローンチ・シークエンス（案A） ---------- */
.ls{height:calc(var(--vh)*360);margin-top:calc(var(--vh)*-100);position:relative}
.ls-pin{position:sticky;top:0;height:calc(var(--vh)*100);overflow:hidden;opacity:calc(1 - var(--pout));
  --t0:clamp(0,var(--pls)/.12,1);--t1:clamp(0,(var(--pls) - .12)/.24,1);--t2:clamp(0,(var(--pls) - .36)/.12,1);
  --t3:clamp(0,(var(--pls) - .48)/.22,1);--t4:clamp(0,(var(--pls) - .7)/.08,1)}
.ls-stage{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding:52px var(--gutter) 0;
  --a0:clamp(0,var(--t3)/.18,1);--a1:clamp(0,(var(--t3) - .22)/.18,1);--a2:clamp(0,(var(--t3) - .44)/.18,1);--a3:clamp(0,(var(--t3) - .66)/.18,1)}
.ls-title{align-self:end;text-align:center;padding-bottom:32px;opacity:var(--t2);transform:translateY(calc((1 - var(--t2))*10px))}
.ls-title h2{margin:0;font-size:clamp(20px,1.8vw,24px);font-weight:700;letter-spacing:.02em;line-height:1.5}
.ls-title p{margin:4px 0 0;font-size:14px;line-height:1.7;color:var(--fg2)}
.ls-grid{display:grid;grid-template-columns:minmax(160px,1fr) min(62vw,960px,calc((var(--vh)*100 - 280px)*1.45),calc(100% - 400px)) minmax(160px,1fr);
  gap:40px;align-items:center;width:100%;max-width:1680px}
.ls-facts{list-style:none;margin:0;padding:0;display:grid;gap:40px}
.ls-facts--l{justify-items:end}
.ls-facts li{font-size:17px;line-height:1.9;max-width:15em;text-wrap:pretty;line-break:strict;opacity:var(--a);transform:translateY(calc((1 - var(--a))*16px))}
.f0{--a:var(--a0)}.f1{--a:var(--a1)}.f2{--a:var(--a2)}.f3{--a:var(--a3)}
.ls-btns{align-self:start;padding-top:40px;display:flex;align-items:center;gap:32px;opacity:var(--t4);transform:translateY(calc((1 - var(--t4))*12px))}

/* 画面の中の写真 */
.screen-img{display:block;width:100%;height:auto;opacity:clamp(0,(var(--t2) - .35)/.45,1)}
.laptop .screen-img{transform:translateY(calc(var(--t3)*-58%))}
.phone .screen-img{transform:translateY(calc(var(--t3)*-36%))}
.screen-flash{position:absolute;inset:0;background:#fff;opacity:clamp(0,min(var(--t2)*5,(1 - var(--t2))*1.6),1)}

/* ノートパソコン（CSS で組む） */
.laptop-wrap{opacity:var(--t0);transform:translateY(calc((1 - var(--t0))*var(--vh)*40)) scale(calc(1 - var(--t4)*.14))}
.laptop{position:relative;width:100%;aspect-ratio:16/11.5;perspective:1800px;perspective-origin:50% 35%}
.laptop-lid{position:absolute;left:0;right:0;top:0;aspect-ratio:16/10;transform-origin:50% 100%;transform:rotateX(calc((1 - var(--t1))*-83deg));transform-style:preserve-3d}
.laptop-front{position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,#D6D8DC,#A9ADB3);backface-visibility:hidden}
.laptop-bezel{position:absolute;inset:.9%;border-radius:11px;background:#0B0B0C}
.laptop-screen{position:absolute;inset:2.8% 2.4% 3.6%;border-radius:4px;background:#000;overflow:hidden}
.laptop-back{position:absolute;inset:0;border-radius:14px;transform:rotateY(180deg);backface-visibility:hidden;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),linear-gradient(180deg,#C9CCD1,#A3A7AD)}
.laptop-base{position:absolute;left:-1.2%;right:-1.2%;top:86.96%;height:58.4%;transform-origin:50% 0;transform:rotateX(83deg);transform-style:preserve-3d;border-radius:0 0 18px 18px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),linear-gradient(180deg,#D6D8DC,#A9ADB3)}
.laptop-pad{position:absolute;inset:8% 12% 44%;border-radius:8px;background:rgba(0,0,0,.16)}
.laptop-edge{position:absolute;left:0;right:0;top:100%;height:3%;transform-origin:50% 0;transform:rotateX(-83deg);background:linear-gradient(180deg,#B9BDC3,#8E9298);border-radius:0 0 6px 6px}
.laptop-glow{position:absolute;left:5%;right:5%;top:100%;height:40%;background:radial-gradient(50% 100% at 50% 0,rgba(255,255,255,.09),transparent 70%)}

/* スマホ（〜760px でノートパソコンの代わり） */
.ls-sp{display:none;justify-items:center;gap:16px}
.phone-wrap{opacity:var(--t0);transform:translateY(calc((1 - var(--t0))*var(--vh)*40)) scale(calc(1 - var(--t4)*.06));perspective:1400px;perspective-origin:50% 30%}
.phone{position:relative;width:min(54vw,calc((var(--svh)*100 - 380px)*.462));aspect-ratio:390/844;transform-origin:50% 100%;transform:rotateX(calc((1 - var(--t1))*64deg));
  border-radius:40px;background:linear-gradient(180deg,#D6D8DC,#A9ADB3)}
.phone-bezel{position:absolute;inset:1.4%;border-radius:37px;background:#0B0B0C}
.phone-screen{position:absolute;inset:3.6%;border-radius:32px;background:#000;overflow:hidden}
.phone-glow{height:16px;margin:0 10%;background:radial-gradient(50% 100% at 50% 0,rgba(255,255,255,.1),transparent 70%)}
.ls-facts-sp{list-style:none;margin:0;padding:0;position:relative;width:100%;max-width:22em;height:3.8em;font-size:16px;line-height:1.9;text-align:center}
.ls-facts-sp li{position:absolute;inset:0;text-wrap:balance;line-break:strict}
.ls-facts-sp .s0{opacity:calc(var(--a0)*(1 - var(--a1)));transform:translateY(calc((1 - var(--a0))*12px))}
.ls-facts-sp .s1{opacity:calc(var(--a1)*(1 - var(--a2)));transform:translateY(calc((1 - var(--a1))*12px))}
.ls-facts-sp .s2{opacity:calc(var(--a2)*(1 - var(--a3)));transform:translateY(calc((1 - var(--a2))*12px))}
.ls-facts-sp .s3{opacity:var(--a3);transform:translateY(calc((1 - var(--a3))*12px))}

/* ---------- HOME：サービス ---------- */
.svc{position:relative;margin-top:calc(var(--vh)*-40)}
.svc-list{margin:0;border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:3fr 6fr 3fr;gap:24px;padding:32px 0;border-bottom:1px solid var(--line)}
.svc-row dd{margin:0}
.svc-after{margin:40px 0 0}

/* ---------- HOME：制作の流れ（予告） ---------- */
.proc{position:relative}
.proc-line{position:absolute;left:0;right:0;top:3px;height:1px;background:var(--fg);transform-origin:left;transform:scaleX(var(--procs,0));transition:transform 1200ms var(--ease-inout)}
.proc-ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:24px}
.proc-ol li{position:relative;padding-top:28px}
.proc-dot{position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--fg)}
.proc-n{display:block;font-size:24px;font-weight:650;font-stretch:110%;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.proc-name{display:block;font-size:14px;line-height:1.7;font-weight:500}
.h2--proc{margin-bottom:64px}
.proc-after{margin:64px 0 0}
.more{margin:24px 0 0;font-size:16px;font-weight:500}

/* ---------- HOME：料金（予告） ---------- */
.plans{margin-top:40px;background:var(--sheet);color:var(--ink);border:1px solid var(--hairline);border-radius:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden}
.plan{padding:40px 32px}
.plan+.plan{border-left:1px solid var(--hairline)}
.plan p{margin:0;font-size:14px;line-height:1.7;color:var(--graphite)}
.plan .plan-for{margin-top:4px}
.plan .plan-label{margin-top:32px}
.plan .plan-reg{margin-top:12px}
.plan .plan-reg s{font-variant-numeric:tabular-nums}
.plan .price{margin:4px 0 0;font-size:clamp(44px,5vw,72px);font-weight:650;font-stretch:110%;letter-spacing:-.03em;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.price .yen,.pnum .yen{font-size:.5em;font-weight:500;letter-spacing:0;font-stretch:100%}
.more--plans{margin-top:40px}

/* ---------- 最後の呼びかけ（白い面のまま。2026-10-10 オーナーの判断で黒から変更） ---------- */
.cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;text-align:center;padding:168px var(--gutter)}
.cta-title{font-size:clamp(56px,10vw,160px)}
.cta p{margin:0}
.cta--sub{margin-top:168px}

/* ---------- フッター ---------- */
.footer{max-width:1200px;margin:0 auto;padding:64px var(--gutter) 40px;box-sizing:content-box;font-size:14px;line-height:1.7;color:#6E6E73}
.footer-grid{display:grid;grid-template-columns:5fr 1fr 6fr;gap:24px}
.footer .logo{margin:0 0 16px}
.footer p{margin:0}
.footer .mail{overflow-wrap:anywhere}
.footer-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;align-content:start}
.footer-links a,.footer .mail a{color:inherit}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer .copy{margin:64px 0 0;font-size:12px;line-height:1.6}
/* 黒い面の上のフッター（今は使っていない。最後の呼びかけを黒に戻すときに使う） */
.footer--dark{padding-top:0;color:var(--ash)}
.footer--dark .footer-grid{border-top:1px solid var(--hairline-dark);padding-top:64px}
.footer--dark .footer-links,.footer--dark .mail{color:var(--moon)}

/* ---------- 下層ページの共通 ---------- */
.phead{max-width:1200px;margin:0 auto;padding:220px var(--gutter) 104px;box-sizing:content-box}
.phead h1{margin:0;display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;font-weight:inherit}
.ptitle{font-size:clamp(56px,9vw,128px);font-weight:700;font-stretch:112%;line-height:.95;letter-spacing:-.04em;view-transition-name:page-title}
.ptja{font-size:17px;font-weight:500;line-height:1.7;color:var(--fg2)}
.phead .lead{margin:40px 0 0;max-width:30em}
.wrap.pb0{padding-bottom:0}
.split{display:grid;grid-template-columns:5fr 7fr;gap:24px}
.prose{text-wrap:pretty;line-break:strict;max-inline-size:36em}
.lined{margin:0;border-top:1px solid var(--line);padding-top:16px}
.note{margin:24px 0 0;font-size:14px;line-height:1.7;color:var(--fg2);max-inline-size:36em}
.h2--sub{margin:0}
.fit-top{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* 画面の外のまとまりは、近づくまで配置の計算を省く（日本語の書体が少しずつ届くたびに、ページ全体を組み直すのを避ける）。
   下層ページの、最初の画面より下のセクションだけ。TOP は見せ場が重なり合う作りなので使わない */
.cv{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* ---------- Works ---------- */
.case{padding:168px 0}
.case-in{max-width:1200px;margin:0 auto;padding:0 var(--gutter);box-sizing:content-box;display:grid;gap:168px}
.case-h2{margin:0;font-size:clamp(30px,4.2vw,56px);font-weight:700;font-stretch:112%;line-height:1.1;letter-spacing:-.01em}
.case-sub{margin:16px 0 0;color:var(--fg2)}
.kv{margin:0;border-top:1px solid var(--line)}
.kv>div{display:grid;grid-template-columns:7em 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.kv dt{font-size:14px;line-height:1.9;color:var(--fg2)}
.kv dd{margin:0;text-wrap:pretty}
.case-note{margin:40px 0 0;font-size:17px;font-weight:500}
.gap64{display:grid;gap:64px}
.gap40{display:grid;gap:40px}
.wish{margin:0;padding:16px 0 0;list-style:none;display:grid;gap:16px;border-top:1px solid var(--line)}
.wish li{text-wrap:pretty;line-break:strict}
/* 機器（CSS で組む） */
.devices{display:flex;align-items:flex-end;justify-content:center;gap:64px}
.dev-pc{flex:0 1 860px;min-width:0}
.dev-pc-body{position:relative;aspect-ratio:16/10;border-radius:14px;background:linear-gradient(180deg,#D6D8DC,#A9ADB3)}
.dev-pc-bezel{position:absolute;inset:.9%;border-radius:11px;background:#0B0B0C}
.dev-pc-screen{position:absolute;inset:2.8% 2.4% 3.6%;border-radius:4px;background:#000;overflow:hidden}
.dev-pc-screen picture,.dev-sp-screen picture,.shot picture{height:100%}
.dev-pc-base{margin:0 -2.4%;height:18px;border-radius:0 0 18px 18px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px),linear-gradient(180deg,#D6D8DC,#8E9298)}
.dev-pc-glow{margin:0 6%;height:40px;background:radial-gradient(50% 100% at 50% 0,rgba(255,255,255,.08),transparent 70%)}
.dev-sp{flex:0 0 200px;margin-bottom:58px}
.dev-sp-body{aspect-ratio:390/844;border-radius:36px;padding:8px;background:linear-gradient(180deg,#D6D8DC,#A9ADB3)}
.dev-sp-screen{width:100%;height:100%;border-radius:29px;background:#000;overflow:hidden}
/* 見えない部分の図（HANDOFF 3-7） */
[data-line]{transition:stroke-dashoffset var(--lt,900ms) var(--ease-inout) var(--ld,0ms)}
.diag{margin:0;position:relative;aspect-ratio:1000/520;width:100%;color:var(--fg2)}
.diag svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.diag-site{position:absolute;left:35%;width:30%;top:36.5%;height:13.8%;margin:0;display:grid;place-items:center;border:1px solid var(--fg);border-radius:12px;
  color:var(--fg);font-size:clamp(14px,1.5vw,18px);font-weight:600;font-stretch:110%;line-height:1.2}
.diag ul{list-style:none;margin:0;padding:0}
.diag li{position:absolute;width:31%}
.diag .d-l{left:0;text-align:right}
.diag .d-r{right:0}
.diag .d-t{top:7.4%}
.diag .d-b{top:63.2%}
.diag .d-c{left:32%;width:36%;top:81%;text-align:center}
.d-name{display:block;color:var(--fg);font-size:clamp(14px,1.3vw,17px);font-weight:500;line-height:1.7}
.d-desc{display:block;font-size:14px;line-height:1.7}
.diag-sp{color:var(--fg2)}
.diag-sp-site{margin:0;padding:16px;border:1px solid var(--fg);border-radius:12px;text-align:center;color:var(--fg);font-size:16px;font-weight:600;font-stretch:110%;line-height:1.2}
.diag-tree{position:relative;margin-left:24px;padding-left:28px}
.diag-trunk{position:absolute;left:0;top:0;width:2px;height:calc(100% - 2.2em);overflow:visible}
.diag-tree ul{list-style:none;margin:0;padding:8px 0 0}
.diag-tree li{position:relative;padding:16px 0}
.diag-tree li:last-child{padding-bottom:0}
.diag-tree li>svg{position:absolute;left:-28px;top:calc(16px + .7em);overflow:visible}
.diag-tree .d-name{font-size:inherit}
/* 全ページの画面写真 */
.car-head{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:16px}
.car-head p{margin:0}
.car-btns{display:flex;gap:8px}
.round-btn{appearance:none;margin:0;padding:0;font:inherit;color:inherit;background:none;cursor:pointer;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);
  display:grid;place-items:center;transition:background 150ms}
.round-btn:hover{background:var(--graphite-deep)}
.car{display:grid;grid-auto-flow:column;grid-auto-columns:min(66%,780px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:16px;scrollbar-width:thin;outline-offset:6px}
.car figure,.sprow figure{margin:0;display:grid;gap:12px}
.car figure{scroll-snap-align:start}
.shot{border-radius:28px;overflow:hidden;border:1px solid var(--hairline-dark);background:#000}
.shot--pc{aspect-ratio:16/10}
.shot--sp{aspect-ratio:390/844}
.car figcaption,.sprow figcaption{font-size:14px;color:var(--fg2)}
.sprow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.after-link{margin:40px 0 0;font-size:16px;font-weight:500}
/* 次の実績の枠 */
.next{max-width:1200px;margin:0 auto;padding:168px var(--gutter) 0;box-sizing:content-box;display:grid;grid-template-columns:6fr 6fr;gap:64px;align-items:center}
.ghost-pc{aspect-ratio:16/10;border:1px solid var(--fg);border-radius:14px;position:relative}
.ghost-pc::after{content:"";position:absolute;inset:2.8% 2.4% 3.6%;border:1px solid var(--line);border-radius:4px}
.ghost-base{margin:0 -2.4%;height:14px;border:1px solid var(--fg);border-top:none;border-radius:0 0 14px 14px}
.ghost-sp-wrap{justify-content:center}
.ghost-sp{width:52%;aspect-ratio:390/844;border:1px solid var(--fg);border-radius:32px;position:relative}
.ghost-sp::after{content:"";position:absolute;inset:3.5%;border:1px solid var(--line);border-radius:26px}
.next-title{margin:0;display:inline-block;padding:.05em 0;font-size:clamp(40px,5vw,72px);font-weight:800;font-stretch:125%;line-height:1;letter-spacing:-.03em;
  background-image:linear-gradient(180deg,#3A3E44,#1D1D1F 50%,#62666D);-webkit-background-clip:text;background-clip:text;color:transparent}
.next p{margin:40px 0 0}
.next .btn{margin-top:40px}

/* ---------- Process ---------- */
.steps-sec{position:relative}
.steps-pin{position:sticky;top:156px;display:flex;gap:32px;align-items:flex-start}
.steps-track{position:relative;width:1px;height:280px;background:var(--line)}
.steps-fill{position:absolute;inset:0;background:var(--fg);transform-origin:top;transform:scaleY(var(--pp,0))}
.steps-cur{display:block;margin-top:-14px;font-size:96px;font-weight:650;font-stretch:110%;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.steps-track-sp{position:absolute;left:var(--gutter);top:0;bottom:104px;width:1px;background:var(--line)}
.steps{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.step{padding:40px 0 64px;border-top:1px solid var(--line);min-height:calc(var(--vh)*36)}
.step-n{display:inline-block;margin-right:12px;font-weight:650;font-stretch:110%;font-variant-numeric:tabular-nums}
.step dl{margin:24px 0 0;display:grid;gap:24px}
.step dt{font-size:14px;line-height:1.7;color:var(--fg2)}
.step dd{margin:4px 0 0}
.dur{width:100%;border-collapse:collapse;font-size:17px}
.dur thead th{text-align:left;font-size:14px;font-weight:400;color:var(--fg2);padding:0 0 12px}
.dur tbody tr{border-top:1px solid var(--line)}
.dur tbody tr:last-child{border-bottom:1px solid var(--line)}
.dur tbody th{text-align:left;font-weight:500;padding:16px 0;width:50%}
.dur td{padding:16px 0;font-variant-numeric:tabular-nums}
.rules{margin:0;border-top:1px solid var(--line)}
.rules>div{padding:32px 0;border-bottom:1px solid var(--line)}
.rules dd{margin:0}
.faq{border-top:1px solid var(--line);interpolate-size:allow-keywords}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 24px;gap:24px;align-items:center;padding:28px 0;
  font-size:clamp(18px,1.6vw,21px);font-weight:500;line-height:1.6}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{justify-self:end}
.faq-a{padding:0 0 32px}
.faq-a p{margin:0}
.faq details::details-content{block-size:0;overflow-y:clip;transition:block-size 300ms var(--ease-out),content-visibility 300ms allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* ---------- Pricing ---------- */
.seg{display:flex;gap:2px;padding:3px;border-radius:8px;background:var(--sheet);border:1px solid var(--hairline);font-size:14px;font-weight:500;color:var(--ink)}
.seg button{appearance:none;border:0;margin:0;font:inherit;cursor:pointer;height:36px;padding:0 16px;border-radius:6px;display:inline-flex;align-items:center;
  background:transparent;color:var(--ink);transition:background 150ms,color 150ms}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.price-mode{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:40px}
.price-mode p{margin:0;font-size:14px;line-height:1.7;color:var(--fg2)}
.pswitch{display:none;width:fit-content;max-width:100%;margin-bottom:16px}
.pswitch button{height:40px;padding:0 14px;white-space:nowrap}
.ptable-box{background:var(--sheet);color:var(--ink);border:1px solid var(--hairline);border-radius:20px;overflow:clip}
.ptable{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.7}
.ptable .c0{width:25%}
.ptable .pcorner,.ptable .pcol{position:sticky;top:52px;z-index:2;background:var(--sheet);box-shadow:inset 0 -1px 0 #D2D2D7}
.ptable .pcol{border-left:1px solid var(--hairline);padding:20px clamp(16px,2vw,32px);text-align:left;font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.5}
.ptable .pcorner2{border-bottom:1px solid var(--hairline)}
.ptable .pinfo{border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:24px clamp(16px,2vw,32px) 32px;vertical-align:top}
.pinfo p{margin:0;font-size:14px;line-height:1.7;color:var(--graphite)}
.pinfo .who{min-height:3.4em;text-wrap:pretty}
.pinfo .plabel{margin-top:24px}
.pinfo .pnum{margin-top:4px;display:flex;align-items:baseline;font-size:clamp(28px,3.2vw,52px);font-weight:650;font-stretch:110%;letter-spacing:-.03em;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.pinfo .preg{margin-top:12px}
.pinfo .preg s{font-variant-numeric:tabular-nums}
[data-mode="regular"] .preg{visibility:hidden}
.digits{display:inline-flex;height:1.1em;overflow:hidden}
.dg{display:block;height:1.1em;overflow:hidden}
.dg>span{display:block;white-space:pre;line-height:1.1em;transform:translateY(calc(var(--d)*-1.1em));transition:transform 450ms var(--ease-out) var(--dl,0ms)}
.pbtn{margin-top:24px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;padding:0 12px;min-height:48px;font-size:clamp(13px,1.1vw,15px);
  border-radius:999px;background:var(--ink);color:var(--paper);font-weight:500;text-decoration:none;transition:background 150ms}
.pbtn:hover{background:#3A3A3D}
.ptable .prow{text-align:left;font-weight:500;padding:16px 24px 16px 32px;border-bottom:1px solid var(--hairline);vertical-align:top;text-wrap:pretty}
.ptable .pcell{padding:16px clamp(16px,2vw,32px);border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline);vertical-align:top;text-wrap:pretty}
.cell{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cell svg{align-self:center}
.cell .no{color:var(--graphite)}
.ptable-note{max-inline-size:52em}
/* オプション・保守の表 */
/* 列幅は試作の見た目どおり等分（試作では col の幅指定が効いていなかった） */
.otable{width:100%;border-collapse:collapse;table-layout:fixed}
.otable thead th{text-align:left;font-size:14px;font-weight:400;color:var(--fg2);padding:0 24px 12px 0}
.otable thead th:last-child{padding-right:0}
.otable tbody tr{border-top:1px solid var(--line)}
.otable--closed tbody tr:last-child{border-bottom:1px solid var(--line)}
.otable tbody th{text-align:left;font-weight:500;padding:20px 24px 20px 0;vertical-align:top}
.otable tbody td{padding:20px 24px 20px 0;vertical-align:top;font-variant-numeric:tabular-nums}
.otable tbody td:last-child{padding-right:0;text-wrap:pretty;line-break:strict}
.otable--plan tbody th{font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.5;padding:24px 24px 24px 0}
.otable--plan tbody td{padding-top:24px;padding-bottom:24px}
.otable--plan .mprice{font-size:24px;font-weight:650;font-stretch:110%;line-height:1.5}
.otable--plan .mprice span{font-size:.5em;font-weight:500;font-stretch:100%}
.rtable{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:40px}
.rtable thead th{text-align:left;font-size:14px;font-weight:400;color:var(--fg2);padding:0 24px 12px 0}
.rtable thead th:last-child{padding-right:0}
.rtable tbody tr{border-top:1px solid var(--line)}
.rtable td{padding:20px 24px 20px 0;vertical-align:top;text-wrap:pretty;line-break:strict}
.rtable td:last-child{padding-right:0;font-weight:500}
.mt24{margin-top:24px}
.mt40{margin-top:40px}
.mt64{margin-top:64px}
.mt104{margin-top:104px}
.gap24{display:grid;gap:24px}
.gap24 p{margin:0}
.h4grid{row-gap:64px}
.h4{margin:0;font-size:17px;font-weight:700;line-height:1.9}
.dlist{margin:0;border-top:1px solid var(--line)}
.dlist>div{padding:16px 0;border-bottom:1px solid var(--line)}
.dlist dt{font-weight:500}
.dlist dd{margin:0;color:var(--fg2);text-wrap:pretty}
.dlist--2>div.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.dlist--2 dd{color:inherit}
.plist{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.plist li{padding:16px 0;border-bottom:1px solid var(--line)}

/* ---------- Contact ---------- */
.contact{align-items:start}
.contact-aside{position:sticky;top:116px;padding-right:40px}
.info{margin:40px 0 0;border-top:1px solid var(--line)}
.info>div{padding:16px 0;border-bottom:1px solid var(--line)}
.info dt{font-size:14px;line-height:1.7;color:var(--fg2)}
.info dd{margin:4px 0 0}
.info .mail{overflow-wrap:anywhere}
.tnum{font-variant-numeric:tabular-nums}
.form{position:relative;background:var(--sheet);color:var(--ink);border:1px solid var(--hairline);border-radius:20px;padding:40px;display:grid;gap:32px}
.field{display:grid;gap:8px}
.field>label,.flabel{display:flex;gap:8px;align-items:baseline;font-size:15px;font-weight:500;line-height:1.6}
.req{flex:none;white-space:nowrap;font-size:12px;font-weight:500;color:var(--graphite)}
.input{height:52px;padding:0 16px;border-radius:12px;border:1px solid #D2D2D7;background:#fff;color:var(--ink);font:inherit;font-size:17px;width:100%;
  transition:box-shadow 150ms,border-color 150ms}
textarea.input{height:auto;min-height:180px;padding:14px 16px;line-height:1.7;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;padding:0 48px 0 16px;cursor:pointer}
.input[aria-invalid="true"]{border-color:#D70015}
.input:focus{outline:none;border-color:#1D1D1F;box-shadow:inset 0 0 0 1px #1D1D1F}
.select{position:relative}
.select svg{position:absolute;right:20px;top:50%;transform:translateY(-50%);pointer-events:none}
.hint{margin:0;font-size:12px;line-height:1.6;color:var(--graphite)}
.err{margin:0;font-size:14px;line-height:1.7;color:var(--error)}
.agree-box{display:grid;gap:8px;padding-top:8px;border-top:1px solid #D2D2D7}
.agree{display:flex;gap:12px;align-items:center;min-height:44px;font-size:15px;font-weight:500;cursor:pointer}
.agree input{width:20px;height:20px;margin:0;accent-color:#1D1D1F;cursor:pointer}
.submit-row{display:grid;gap:12px;justify-items:start}
.submit{appearance:none;border:0;margin:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 32px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:16px;font-weight:500;transition:background 150ms,opacity 150ms}
.submit:hover{background:#3A3A3D}
.submit:disabled{opacity:.6;cursor:default}
.submit:focus-visible{outline:2px solid #1D1D1F;outline-offset:3px}
.send-err{min-height:1px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 送信完了・プライバシーポリシー・404 ---------- */
.page-fill{display:flex;flex-direction:column}
.page-fill main{flex:1}
.page-fill .footer{width:calc(100% - 2 * var(--gutter))}   /* 縦の flex の中でも左右いっぱいに（auto の余白で縮むのを防ぐ） */
.thanks{max-width:1200px;margin:0 auto;padding:220px var(--gutter) 168px;box-sizing:content-box}
.thanks p{margin:40px 0 0}
.thanks .btn{margin-top:40px}
.pp{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.pp li{padding:32px 0;border-bottom:1px solid var(--hairline)}
.pp h2{display:flex;gap:16px}
.pp h2 span{font-variant-numeric:tabular-nums;color:var(--graphite)}
.pp p{margin:0}
.pp-date{margin:40px 0 0;font-size:14px;line-height:1.7;color:var(--graphite)}
.tbd{display:inline-block;min-width:8em;height:1.4em;border:1px dashed var(--graphite);border-radius:4px}
.nf{min-height:calc(var(--svh)*100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;text-align:center;padding:52px var(--gutter) 64px}
.nf-title{font-size:clamp(72px,15vw,232px)}
.nf p{margin:0;max-inline-size:28em}

/* ---------- 出現（data-rv） ---------- */
[data-rv]{transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}

/* ---------- PC・タブレット（761px〜）ではスマホ専用を隠す ---------- */
@media print,(min-width:761px){.only-sp{display:none!important}}

/* ---------- 料金表：899px 以下は1プランずつ（HANDOFF 3-5） ---------- */
@media screen and (max-width:899px){
  .pswitch{display:flex}
  .ptable{table-layout:auto}
  .ptable .c0{width:46%}
  [data-ptable="0"] [data-pc="1"],[data-ptable="0"] [data-pc="2"],
  [data-ptable="1"] [data-pc="0"],[data-ptable="1"] [data-pc="2"],
  [data-ptable="2"] [data-pc="0"],[data-ptable="2"] [data-pc="1"]{display:none}
}

/* ---------- タブレット（761〜1080px） ---------- */
@media (min-width:761px) and (max-width:1080px){
  .ls-grid{grid-template-columns:minmax(120px,1fr) min(52vw,calc(100% - 288px),calc((var(--vh)*100 - 280px)*1.45)) minmax(120px,1fr);gap:24px}
  .ls-facts li{font-size:16px}   /* 狭い列で「ネットショップの」が途中で折れないように */
  .plan .price{font-size:clamp(36px,4.7vw,72px)}   /* 3列の幅に「110,000円」が1行で入るように */
}

/* ---------- スマホ（〜760px） ---------- */
@media screen and (max-width:760px){
  body{font-size:16px}
  .only-pc{display:none!important}
  .nav{height:48px}
  .nav-links{display:none}
  .nav-sp{display:flex}
  .sp-menu{display:flex}
  .h2{font-size:28px}
  .h3,.ls-title h2{font-size:19px}
  .lead{font-size:18px}
  .wrap{padding-bottom:104px}
  .btn{height:52px}
  .btn-row--hero{flex-direction:column;align-items:stretch;gap:20px;width:100%}
  .btn-row--hero .btn{width:100%}
  .btn-row--hero .tlink{align-self:center}
  .chrome{line-height:1.04;background-size:260% 100%,100% 1.04em;background-repeat:no-repeat,repeat-y;background-position:var(--sweep) 0,0 .14em}
  /* 影（drop-shadow）付きの大きな文字は、別の層にして一度だけ描かせる。iPhone の Safari は、ページの絵（タイル）を描くたびに
     影のぼかしを計算し直し、スクロールががたつくため。影を外すと白い部分の輪郭が消えるので、影は残す */
  .chrome-lg,.chrome-dark{will-change:transform}
  /* ローンチ・シークエンスで、スクロールに合わせて薄さや位置が変わる部品も、別の層にしておく。
     層になっていないと、iPhone の Safari は1フレームごとに描き直す（特にスマホの模型の中の縦長の画面写真は重い）。
     層になっていれば、描いた絵を動かす・薄くするだけで済む */
  .ls-pin,.ls-title,.phone-wrap,.phone .screen-img,.screen-flash,.ls-facts-sp li,.ls-btns{will-change:transform,opacity}
  .hero-title{font-size:22vw}
  .st{height:calc(var(--vh)*200)}
  .st-text{font-size:min(24px,6.4vw)}   /* 320px 幅でも「ネットショップ。フォーム。」が1行に入るように */
  .st-l+.st-l{margin-top:.5em}
  .ls{height:calc(var(--vh)*300)}
  .ls-grid{display:block}
  .ls-sp{display:grid}
  .ls-title{padding-bottom:16px}
  .ls-btns{padding-top:16px;flex-direction:column;gap:16px;width:100%;max-width:22em}
  .ls-btns .btn{width:100%}
  .svc-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .proc-ol{grid-template-columns:minmax(0,1fr);gap:20px}
  .proc-line{left:3px;right:auto;top:4px;bottom:4px;height:auto;width:1px;transform-origin:top;transform:scaleY(var(--procs,0))}
  .proc-ol li{padding:0 0 0 28px}
  .proc-dot{top:.6em}
  .proc-n{display:inline-block;margin:0 12px 0 0;font-size:19px;vertical-align:baseline}
  .proc-name{display:inline;font-size:15px}
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan+.plan{border-left:none;border-top:1px solid var(--hairline)}
  .cta{padding-top:104px;padding-bottom:104px}
  .cta .btn{width:100%}
  .cta .body{max-inline-size:none}
  .cta--sub{margin-top:104px}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  /* 下層ページ */
  .phead{padding-top:168px;padding-bottom:64px}
  .phead h1{flex-direction:column;align-items:flex-start;gap:12px}
  .ptitle{font-size:15vw}
  .ptja{font-size:15px}
  .split{grid-template-columns:minmax(0,1fr)}
  /* Works */
  .case{padding:104px 0}
  .case-in{gap:104px}
  .dev-sp{flex:0 0 64%;margin-bottom:0}
  .car{grid-auto-columns:85%}
  .car-head{flex-wrap:wrap}
  .sprow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
  .sprow>*{scroll-snap-align:start}
  .next{grid-template-columns:minmax(0,1fr);padding-top:104px}
  /* Process */
  .steps{padding-left:24px}
  /* Pricing */
  .h4grid{row-gap:24px}
  .ptable,.ptable thead,.ptable tbody{display:block;width:100%}
  .ptable colgroup,.ptable .pcorner,.ptable .pcorner2{display:none}
  .ptable tr{display:grid;grid-template-columns:minmax(0,1fr)}
  .ptable .pcol{position:static;padding:16px 16px 0;box-shadow:none;border-left:none}
  .ptable .pinfo{padding:8px 16px 24px;border-left:none}
  .ptable .prow{padding:16px 16px 0;border-bottom:none}
  .ptable .pcell{padding:4px 16px 16px;border-left:none}
  .otable,.otable tbody,.rtable,.rtable tbody{display:block;width:100%}
  .otable thead,.rtable thead{display:none}
  .otable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:16px 0}
  .otable tbody th,.otable tbody td,.otable--plan tbody th,.otable--plan tbody td,.rtable td{padding:0}
  .otable tbody td:last-child{grid-column:1/-1;margin-top:6px;color:var(--fg2)}
  .rtable tr{display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;padding:16px 0}
  /* Contact */
  .contact-aside{position:static;padding-right:0}
  .form{padding:24px}
  /* 送信完了 */
  .thanks{padding-top:168px;padding-bottom:104px}
}

/* ---------- 視差を減らす設定（DESIGN.md 7-4） ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .hero-mark,.hero-title,.hero-sub,.hero-note{animation:none!important}
  .proc-line,[data-rv],[data-line],.dg>span{transition:none!important}
  .faq details::details-content{transition:none}
  .car{scroll-behavior:auto}
}

/* ---------- 印刷（料金ページ。DESIGN.md 10章の9） ---------- */
@media print{
  :root,body{background:#fff!important;color:#000!important}
  .nav,.sp-menu,.footer,.skip,[data-noprint]{display:none!important}
  .phead{padding-top:0}
  .ptable .pcorner,.ptable .pcol{position:static}
  tr{break-inside:avoid}
}