:root{--bg:#f3f5f6;--bg2:#e9edef;--panel:#ffffff;--ink:#141d26;--muted:#5b6a77;--line:#d5dde2;--accent:#8f6a1c;--gold:#d9b24c;--night:#0d1319;--onnight:#e8edf0;color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0b1016;--bg2:#0f161d;--panel:#131b23;--ink:#e8edf0;--muted:#8e9ba6;--line:#223040;--accent:#d9b24c;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0b1016;--bg2:#0f161d;--panel:#131b23;--ink:#e8edf0;--muted:#8e9ba6;--line:#223040;--accent:#d9b24c;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);overflow-x:hidden;color:var(--ink);font:16px/1.8 "Noto Sans JP","Hiragino Sans",sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--accent)}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:"Shippori Mincho B1","Hiragino Mincho ProN",serif;font-weight:800;line-height:1.35;letter-spacing:.08em;margin:0}
.muted{color:var(--muted)}
/* ヘッダ */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.brand{display:flex;align-items:baseline;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand b{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:19px;letter-spacing:.14em}
.brand small{font-size:11px;color:var(--muted);letter-spacing:.2em}
.nav nav{display:flex;gap:18px;font-size:14px;white-space:nowrap}
.nav nav a{color:var(--muted);text-decoration:none}.nav nav a:hover{color:var(--ink)}
/* ボタン */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;text-decoration:none;letter-spacing:.06em;border:1px solid var(--line);color:var(--ink);background:var(--panel);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#141d26}
.btn.ghost{background:transparent}
.btn[aria-disabled="true"]{opacity:.6;cursor:default}
.btn[aria-disabled="true"]:hover{transform:none;box-shadow:none}
.btns{display:flex;flex-wrap:wrap;gap:10px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
/* 節 */
section{padding-block:88px}
section.alt{background:var(--bg2)}
.eyebrow{font-size:12px;letter-spacing:.32em;color:var(--accent);font-weight:700;margin-bottom:10px}
.sec-title{font-size:clamp(24px,3.4vw,34px);margin-bottom:12px}
.sec-lead{color:var(--muted);max-width:36em;margin:0 0 40px}
/* ヒーロー（作品の絵は鉄紺の上） */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 70% 10%,#18222c 0%,var(--night) 55%,#080c10 100%);color:var(--onnight);padding-block:72px 80px}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,178,76,.5),transparent)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(44px,7vw,84px);letter-spacing:.14em;line-height:1.15}
.hero .lead{font-family:"Shippori Mincho B1",serif;font-weight:700;font-size:clamp(18px,2.4vw,24px);color:var(--gold);letter-spacing:.12em;margin:14px 0 18px}
.hero p{color:#b9c4cc;max-width:30em;margin:0 0 28px}
.hero .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--onnight)}
.hero .btn.gold{background:var(--gold);border-color:var(--gold);color:#141d26}
.note{font-size:12px;color:#8e9ba6;margin-top:12px}
.zan{width:100%;max-width:440px;margin-left:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.zan .ha{animation:ha 1.1s cubic-bezier(.2,1.5,.35,1) .75s both}
.zan .hb{animation:hb 1.1s cubic-bezier(.2,1.5,.35,1) .75s both}
.zan .blade{stroke-dasharray:1500;stroke-dashoffset:1500;animation:blade .32s cubic-bezier(.6,0,.2,1) .45s forwards}
.zan .flash{opacity:0;animation:flash .5s ease-out .74s both}
@keyframes blade{to{stroke-dashoffset:0}}
@keyframes ha{from{transform:translate(0,0)}to{transform:translate(var(--ax),var(--ay))}}
@keyframes hb{from{transform:translate(0,0)}to{transform:translate(calc(var(--ax) * -1),calc(var(--ay) * -1))}}
@keyframes flash{0%{opacity:0}15%{opacity:.9}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.zan .ha,.zan .hb,.zan .blade,.zan .flash{animation:none}.zan .ha{transform:translate(var(--ax),var(--ay))}.zan .hb{transform:translate(calc(var(--ax) * -1),calc(var(--ay) * -1))}.zan .blade{stroke-dashoffset:0}}
/* 遊び方 */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{display:grid;gap:16px;align-content:start}
.step .no{font-family:"Shippori Mincho B1",serif;font-weight:800;color:var(--accent);font-size:14px;letter-spacing:.2em}
.step h3{font-size:22px}
.step p{margin:0;color:var(--muted);font-size:15px}
.phone{border-radius:28px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:0 18px 50px rgba(10,20,30,.18);aspect-ratio:1320/2868}
.phone img{width:100%;height:100%;object-fit:cover}
/* 見どころ */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px}
.feat .ic{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:28px;color:var(--accent);line-height:1;margin-bottom:12px}
.feat h3{font-size:18px;margin-bottom:6px}
.feat p{margin:0;color:var(--muted);font-size:14px}
.tag{display:inline-block;font-size:11px;letter-spacing:.1em;border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:6px;color:var(--muted);vertical-align:middle;font-family:"Noto Sans JP",sans-serif;font-weight:400}
/* ギャラリー（横に流す） */
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:min(240px,62vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:thin}
.gallery figure{margin:0;scroll-snap-align:center}
.gallery figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:10px}
/* 締め */
.cta{text-align:center}
.cta h2{font-size:clamp(26px,3.6vw,38px);margin-bottom:10px}
.cta p{color:var(--muted);margin:0 0 26px}
.cta .btns{justify-content:center}
/* 屋号トップ */
.studio-hero{padding-block:96px 72px;text-align:center}
.studio-hero h1{font-size:clamp(46px,8vw,96px);letter-spacing:.18em}
.studio-hero .kana{letter-spacing:.5em;color:var(--muted);font-size:14px;margin:6px 0 22px}
.studio-hero p{color:var(--muted);margin:0}
.cut{display:block;width:min(360px,70%);height:2px;margin:30px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform-origin:left;animation:cut .7s cubic-bezier(.6,0,.2,1) .2s both}
@keyframes cut{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.cut{animation:none}}
.app{display:grid;grid-template-columns:1.2fr .8fr;background:var(--night);color:var(--onnight);border-radius:28px;overflow:hidden;border:1px solid #223040;text-decoration:none;box-shadow:0 30px 80px rgba(10,20,30,.25)}
.app .info{padding:40px 40px 36px;display:grid;align-content:center;gap:14px}
.app .row{display:flex;align-items:center;gap:16px}
.app .row img{width:72px;height:72px;border-radius:17px}
.app h3{font-size:30px;letter-spacing:.14em;color:var(--onnight)}
.app .lead{font-family:"Shippori Mincho B1",serif;font-weight:700;color:var(--gold);letter-spacing:.1em}
.app p{margin:0;color:#b9c4cc}
.app .shots{position:relative;min-height:340px;background:radial-gradient(90% 80% at 50% 30%,#1a2530,#0d1319)}
.app .shots .phone{position:absolute;width:44%;border-color:#223040;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.app .shots .p1{left:12%;top:12%;transform:rotate(-4deg)}
.app .shots .p2{right:10%;top:22%;transform:rotate(5deg)}
.more{margin-top:18px;color:var(--muted);font-size:14px;text-align:center}
/* 文書ページ */
.doc{max-width:760px;margin:0 auto;padding-block:56px 40px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.doc h1{font-size:30px;margin-bottom:24px}.doc h2{font-size:21px;margin:36px 0 10px}.doc h3{font-size:17px;margin:24px 0 6px}
.qa{border-top:1px solid var(--line);padding:18px 0}
.qa h3{margin:0 0 6px}
.qa p{margin:0;color:var(--muted)}
/* フッタ */
footer{border-top:1px solid var(--line);padding-block:32px 48px;font-size:13px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer nav{display:flex;flex-wrap:wrap;gap:18px}footer a{color:var(--muted)}
/* 狭い画面 */
@media (max-width:820px){
  section{padding-block:64px}
  .hero{padding-block:40px 56px}.hero .wrap{grid-template-columns:1fr;gap:28px}
  .zan{max-width:300px;margin:0 auto;order:-1}
  .hero .text{text-align:center}.hero p{margin-left:auto;margin-right:auto}.hero .btns{justify-content:center}
  .steps{grid-template-columns:1fr;gap:44px}.step{grid-template-columns:1fr 1fr;align-items:center;gap:20px}
  .feats{grid-template-columns:1fr 1fr}
  .app{grid-template-columns:1fr}.app .info{padding:28px 24px}.app .shots{min-height:300px}
}
@media (max-width:480px){.feats{grid-template-columns:1fr}.step{grid-template-columns:1fr}.step .phone{max-width:260px}.nav nav{gap:12px;font-size:13px}.brand small{display:none}}
@media (max-width:360px){.nav nav{gap:10px;font-size:12px}.brand b{font-size:17px;letter-spacing:.1em}}