/* 書と刀。白い紙と墨、朱は印と斬った跡だけに使う。本文は明朝で静かに、筆と刀だけが動く */
:root{
  --paper:#F6F6F3;      /* 紙 */
  --ink:#101010;        /* 墨 */
  --sumi:#55554F;       /* 薄墨：本文の補足 */
  --nezu:#9A9A93;       /* 鼠：悩みの言葉 */
  --rule:#D9D9D3;       /* 罫 */
  --wash:#ECECE7;       /* 淡い面 */
  --shu:#B8321F;        /* 朱 */
  --night:#111113;      /* 刀の写真の地と同じ黒 */
  --on-ink:#F6F6F3;
  --f-jp:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;
  --f-en:"Cormorant Garamond","Shippori Mincho B1",serif;
  --f-logo:"Yuji Boku","Yu Mincho",serif;
  --grain-blend:multiply;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E0E0D;--ink:#ECECE8;--sumi:#A6A69F;--nezu:#5F5F59;--rule:#2A2A27;--wash:#171716;--shu:#D4543B;--night:#09090A;--on-ink:#0E0E0D;--grain-blend:screen;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0E0E0D;--ink:#ECECE8;--sumi:#A6A69F;--nezu:#5F5F59;--rule:#2A2A27;--wash:#171716;--shu:#D4543B;--night:#09090A;--on-ink:#0E0E0D;--grain-blend:screen;color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-jp);font-weight:500;font-size:15px;line-height:2;letter-spacing:.05em;overflow-x:clip;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 0}
h1,h2,h3,p{margin:0}
h2,h3{text-wrap:balance;font-weight:800;line-height:1.5;}
a{color:inherit}
img{display:block}
::selection{background:var(--shu);color:#fff}
.in{max-width:1180px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.ink{display:block;background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.05;mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.tbd{font-family:var(--f-jp);font-size:11px;color:var(--shu);border:1px dashed var(--shu);padding:0 6px;margin-left:8px;letter-spacing:0;white-space:nowrap;font-weight:500;vertical-align:middle}

/* 見出しの型：英字の斜体と、日本語の小さな札 */
.eyebrow{display:flex;align-items:baseline;gap:14px}
.eyebrow .en{font-family:var(--f-en);font-style:italic;font-weight:500;font-size:clamp(22px,2.4vw,30px);letter-spacing:.02em;line-height:1}
.eyebrow .jp{font-size:11px;letter-spacing:.3em;color:var(--sumi)}
.eyebrow .jp::before{content:"";display:inline-block;width:18px;height:1px;background:var(--shu);vertical-align:middle;margin-right:10px}
.h2{font-size:clamp(26px,3.6vw,46px);letter-spacing:.06em;line-height:1.45;margin-top:22px}
section{position:relative}

.btn{position:relative;display:inline-flex;align-items:center;gap:18px;background:var(--ink);color:var(--on-ink);text-decoration:none;font-family:var(--f-jp);font-weight:700;font-size:15px;letter-spacing:.14em;padding:20px 34px;border:0;cursor:pointer;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0 -20%;background:var(--shu);transform:translateX(-102%) skewX(-24deg);transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover::before{transform:translateX(0) skewX(-24deg)}
.btn .arw{width:26px;height:1px;background:currentColor;position:relative;transition:width .3s}
.btn .arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .arw{width:38px}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px}

/* ヘッダー：色を反転させて、どの地の上でも読める */
.hd{position:fixed;left:0;right:0;top:0;z-index:80;padding-top:env(safe-area-inset-top,0px);mix-blend-mode:difference;color:#fff;pointer-events:none}
.hd .in{display:flex;align-items:center;gap:28px;height:76px;max-width:none;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.hd a,.hd button{pointer-events:auto}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo .ink{width:112px;aspect-ratio:1536/598;color:currentColor;--src:url(img/katsuai-h.webp)}
.logo small{font-size:11px;letter-spacing:.26em;opacity:.75;padding-left:14px;border-left:1px solid currentColor;line-height:1.2}
.hd nav{margin-left:auto;display:flex;gap:30px;align-items:center}
.hd nav a{text-decoration:none;font-size:13px;letter-spacing:.14em;display:grid;line-height:1.3;position:relative}
.hd nav a span{font-family:var(--f-en);font-style:italic;font-size:12px;opacity:.6;letter-spacing:.04em}
.hd nav a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.hd nav a:hover::after{transform:scaleX(1);transform-origin:left}
.hd .cta{border:1px solid currentColor;padding:11px 20px;font-size:13px;letter-spacing:.16em;text-decoration:none;transition:background .3s,color .3s}
.hd .cta:hover{background:#fff;color:#000}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid currentColor;color:inherit;font-family:var(--f-en);font-style:italic;font-size:15px;padding:8px 16px;cursor:pointer;letter-spacing:.06em}
.drawer{position:fixed;inset:0;z-index:85;background:var(--night);color:#F6F6F3;display:grid;align-content:center;gap:10px;padding:100px max(28px,env(safe-area-inset-left,0px)) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .6s cubic-bezier(.7,0,.2,1);visibility:hidden}
.drawer.open{clip-path:inset(0 0 0 0);visibility:visible}
.drawer a{font-size:30px;font-weight:700;text-decoration:none;letter-spacing:.08em;display:flex;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid #2a2a2a}
.drawer a span{font-family:var(--f-en);font-style:italic;font-size:16px;opacity:.55;font-weight:500}
.drawer .ink{width:200px;aspect-ratio:1536/598;color:#F6F6F3;--src:url(img/katsuai-h.webp);margin-bottom:30px}
.drawer-close{position:absolute;right:max(28px,env(safe-area-inset-right,0px));top:calc(20px + env(safe-area-inset-top,0px));background:none;border:1px solid #F6F6F3;color:#F6F6F3;font-family:var(--f-en);font-style:italic;font-size:15px;padding:8px 16px;cursor:pointer}

/* ヒーロー */
.hero{padding-top:76px}
.stage{position:relative;height:clamp(600px,68vw,800px);overflow:hidden;touch-action:pan-y;cursor:crosshair;user-select:none;-webkit-user-select:none}
.splash{position:absolute;left:50%;top:52%;width:min(1500px,150%);aspect-ratio:1488/896;transform:translate(-50%,-50%) rotate(4deg);pointer-events:none;color:var(--ink);opacity:.22;--src:url(img/splash.webp)}
.worry{position:absolute;left:0;top:0;white-space:nowrap;color:var(--nezu);font-weight:600;letter-spacing:.08em;padding:6px 4px;animation:drift var(--d,7s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);visibility:hidden}
.worry.ready{visibility:visible}
@keyframes drift{from{translate:0 -7px}to{translate:0 7px}}
.shard{animation:none!important;pointer-events:none;color:var(--ink)!important}
.center{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.big{position:relative;margin:0;width:min(1080px,84%);transform:rotate(-3deg)}
.big .ink{width:100%;aspect-ratio:1536/598;color:var(--ink);--src:url(img/katsuai-h.webp)}
.big .ink.v{display:none;--src:url(img/katsuai-v.webp);aspect-ratio:418/1536}
.seal{position:absolute;right:1%;bottom:2%;width:clamp(48px,7.5%,92px);aspect-ratio:1;transform:rotate(7deg);background:url(img/seal.webp) center/contain no-repeat}
canvas.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--on-ink);padding:12px 22px 12px 18px;font-size:14px;font-weight:700;letter-spacing:.16em;white-space:nowrap;pointer-events:none}
.hint svg{width:30px;height:18px;overflow:visible}
.hint svg path{stroke:var(--shu);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:44;stroke-dashoffset:44;animation:hintline 2.2s cubic-bezier(.7,0,.3,1) infinite}
@keyframes hintline{0%{stroke-dashoffset:44}40%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-44}}
.counter{position:absolute;right:max(28px,env(safe-area-inset-right,0px));bottom:30px;display:flex;align-items:baseline;gap:10px;font-size:12px;color:var(--sumi);letter-spacing:.14em}
.counter b{font-family:var(--f-en);font-style:italic;font-weight:600;font-size:34px;line-height:1;color:var(--shu);font-variant-numeric:tabular-nums;letter-spacing:0}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end;padding-block:44px 110px;border-top:1px solid var(--ink)}
.def{font-size:12px;color:var(--sumi);letter-spacing:.12em;margin-bottom:18px}
.def b{color:var(--ink);letter-spacing:.24em;margin-right:14px;font-weight:700}
.msg{font-size:clamp(17px,1.6vw,20px);font-weight:600;max-width:30em;line-height:1.9}
.price-line{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13px;color:var(--sumi);align-items:baseline}
.price-line b{font-family:var(--f-en);font-weight:600;font-size:26px;color:var(--ink);letter-spacing:.01em;margin:0 4px}

/* 流れる帯 */
.marquee{background:var(--ink);color:var(--on-ink);overflow:hidden;padding-block:24px}
.marquee .track{display:flex;width:max-content;animation:flow 40s linear infinite}
.marquee .track > div{display:flex;align-items:center}
.marquee span{white-space:nowrap;font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:.1em}
.marquee .mk{width:clamp(130px,14vw,190px);aspect-ratio:1536/598;margin:0 1.2em 0 .3em;color:var(--on-ink);--src:url(img/katsuai-h.webp)}
@keyframes flow{to{transform:translateX(-50%)}}

/* 悩み */
.worry-sec{padding-block:150px 130px}
.worry-sec .in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px;align-items:start}
.worry-sec .head{position:sticky;top:130px}
.worry-sec .head p{margin-top:28px;color:var(--sumi);max-width:22em}
.wlist{list-style:none;padding:0;margin:0;counter-reset:w}
.wlist li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:12px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--rule);font-size:clamp(17px,1.8vw,22px);font-weight:600;line-height:1.7;transition:color .4s}
.wlist li:first-child{border-top:1px solid var(--ink)}
.wlist li::before{counter-increment:w;content:"Q" counter(w);font-family:var(--f-en);font-style:italic;font-size:15px;color:var(--shu);font-weight:600}
.wlist li:hover{color:var(--shu)}

/* とは */
.about{background:var(--night);color:#F2F2EE;padding-block:170px;overflow:hidden}
.about .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:80px;align-items:center}
.about .mark{width:min(520px,100%);aspect-ratio:1200/652;transform:rotate(-4deg);color:#F2F2EE;--src:url(img/katsuai-kanji.webp)}
.about .eyebrow .jp{color:#9b9b95}
.about .h2{color:#F2F2EE}
.about .body{margin-top:28px;color:#BDBDB6;max-width:30em}
.flow{margin-top:48px;display:grid;justify-items:start;font-size:14px}
.flow b{border:1px solid #4a4a46;padding:9px 18px;font-weight:600;letter-spacing:.1em}
.flow i{font-style:normal;color:#8d8d87;font-size:12px;display:flex;align-items:center;gap:12px;padding:12px 0 12px 20px;border-left:1px solid #4a4a46;margin-left:20px}
.flow i::before{content:"";width:14px;height:1px;background:currentColor;margin-left:-20px}

/* 守破離 */
.shuhari{padding-block:170px 150px}
.shr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:80px;border-top:1px solid var(--ink)}
.shr article{position:relative;padding:44px 36px 10px 0;display:grid;gap:18px;align-content:start}
.shr article+article{padding-left:36px;border-left:1px solid var(--rule)}
.shr .k{width:clamp(130px,14vw,190px);aspect-ratio:1;color:var(--ink);transform:rotate(-4deg);transform-origin:left bottom;margin-left:-8px}
.shr .stage-label{display:flex;gap:12px;align-items:baseline;font-size:12px;letter-spacing:.24em;color:var(--sumi)}
.shr .stage-label em{font-family:var(--f-en);font-size:16px;letter-spacing:.04em;color:var(--shu)}
.shr h3{font-size:22px;letter-spacing:.06em}
.shr p{color:var(--sumi);font-size:14px}

/* 抜刀：刀の写真が斜めに入ってくる */
.blade-sec{background:var(--night);color:#F2F2EE;overflow:hidden}
.blade-stage{position:relative;height:100svh;min-height:560px;max-height:900px;overflow:hidden}
.photo{position:absolute;left:50%;top:50%;width:max(118%,1100px);aspect-ratio:3/2;margin-left:calc(max(118%,1100px) / -2);margin-top:calc(max(118%,1100px) / -3);
  -webkit-mask:radial-gradient(ellipse 62% 64% at 52% 48%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 62% 64% at 52% 48%,#000 55%,transparent 100%)}
.photo picture,.photo img{display:block;width:100%;height:100%;object-fit:cover}
.flash{position:absolute;left:-10%;top:50%;width:130%;height:2px;background:linear-gradient(90deg,transparent,#fff 25%,#fff 75%,transparent);transform:rotate(-24deg);opacity:0;box-shadow:0 0 30px 6px rgba(255,255,255,.5);pointer-events:none}
.blade-cap{position:absolute;left:max(28px,env(safe-area-inset-left,0px));bottom:44px;display:grid;gap:8px}
.blade-cap .en{font-family:var(--f-en);font-style:italic;font-size:15px;color:#9b9b95}
.blade-cap p{font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:.14em}

/* 対応範囲：重なっていく札 */
.scope{padding-block:160px 60px;overflow-x:clip}
.cards{margin-top:80px;display:grid;gap:0}
.card{position:sticky;top:calc(96px + var(--i) * 18px);background:var(--paper);border-top:1px solid var(--ink);padding:44px 0 56px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:48px;min-height:340px;box-shadow:0 -18px 30px -28px rgba(0,0,0,.18)}
.card .t{display:grid;gap:14px;align-content:start}
.card .t .en{font-family:var(--f-en);font-style:italic;font-size:18px;color:var(--shu)}
.card .t h3{font-size:clamp(46px,6vw,84px);letter-spacing:.08em;line-height:1.1;font-weight:800}
.card .d{color:var(--sumi);font-size:15px;padding-top:12px}
.card .cut{position:relative;padding-top:12px}
.card .cut small{display:block;font-size:11px;letter-spacing:.3em;color:var(--sumi);margin-bottom:10px}
.card .cut ul{list-style:none;margin:0;padding:0}
.card .cut li{position:relative;padding:12px 0;border-bottom:1px solid var(--rule);font-size:16px;font-weight:600;width:fit-content;min-width:100%}
.card .cut li span{position:relative;transition:color .4s .2s}
.card .cut li span::after{content:"";position:absolute;left:-4px;right:-4px;top:55%;height:2px;background:var(--shu);transform:scaleX(var(--s,1));transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1) var(--dl,0s)}
.card.pre .cut li span::after{--s:0}
.card:not(.pre) .cut li span{color:var(--nezu)}
.stamp{position:absolute;right:0;top:-6px;width:96px;aspect-ratio:1;background:url(img/seal.webp) center/contain no-repeat;transform:rotate(12deg);transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s;opacity:.95}
.card.pre .stamp{transform:rotate(-8deg) scale(2.2);opacity:0}

/* 担当者・事例の仮置き */
.placeholder{padding-block:110px}
.ph-box{margin-top:44px;border:1px dashed var(--nezu);padding:40px;color:var(--sumi);font-size:14px}

.ph{display:inline-block}
/* 責任者 */
.person-sec{padding-block:150px 120px}
.person{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:72px;align-items:start;border-top:1px solid var(--ink);padding-top:44px}
.pnamebox{display:grid;gap:18px;position:sticky;top:130px}
.pphoto{aspect-ratio:4/5;background:var(--wash);display:grid;place-items:center;align-content:center;gap:8px;color:var(--sumi);font-size:13px;border:1px dashed var(--nezu)}
.ptext{display:grid;gap:22px;max-width:40em}
.prole{font-size:12px;letter-spacing:.3em;color:var(--sumi)}
.pname{font-size:clamp(34px,4.4vw,56px);letter-spacing:.2em;line-height:1.2}
.ptext p:not(.prole){font-size:15px;line-height:2.1}
.pwhy{padding:24px 0 0;border-top:1px solid var(--ink);font-weight:700}

/* 事例：カード */
.cases-sec{padding-block:60px 140px}
.cases{margin-top:64px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.case{position:relative;background:#fff;background:color-mix(in srgb,var(--paper) 40%,#fff);border:1px solid var(--ink);padding:34px 34px 0;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.case:hover{transform:translateY(-6px);box-shadow:10px 10px 0 var(--ink)}
.case.wide{grid-column:1/-1}
.ch{display:flex;align-items:baseline;gap:16px}
.cn{font-family:var(--f-en);font-style:italic;font-size:30px;color:var(--shu);line-height:1}
.ctag{font-size:11px;letter-spacing:.2em;border:1px solid var(--ink);padding:2px 10px}
.case h3{font-size:clamp(20px,2vw,25px);letter-spacing:.06em;margin-top:18px;line-height:1.55}
.case dl{margin:22px 0 28px;display:grid;gap:10px}
.case dl div{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:10px;font-size:14px;line-height:1.9}
.case dt{font-weight:700;color:var(--sumi);font-size:12px;letter-spacing:.14em;padding-top:2px}
.case dd{margin:0;color:var(--sumi)}
.saved{margin:auto -34px 0;background:var(--ink);color:var(--on-ink);padding:20px 34px;display:flex;align-items:baseline;gap:30px;flex-wrap:wrap;position:relative}
.saved .sl{font-size:11px;letter-spacing:.24em;opacity:.7;width:100%}
.saved p{display:flex;align-items:baseline;gap:6px}
.saved b{font-family:var(--f-en);font-weight:600;font-size:52px;line-height:.9;font-variant-numeric:lining-nums}
.saved small{font-size:13px;letter-spacing:.1em;opacity:.85}
.stamp2{position:absolute;right:26px;top:-30px;width:66px;aspect-ratio:1;background:url(img/seal.webp) center/contain no-repeat;transform:rotate(10deg)}
.cnote{margin-top:24px;font-size:12px;color:var(--sumi)}

/* 業種：流れる大きな字 */
.ind{padding-block:120px 130px;overflow:hidden}
.ind .rows{margin-top:56px;display:grid;gap:6px}
.ind .row{display:flex;width:max-content;animation:flow 46s linear infinite}
.ind .row.rev{animation-direction:reverse;animation-duration:52s}
.ind .row span{font-size:clamp(44px,7vw,104px);font-weight:800;letter-spacing:.06em;line-height:1.25;padding-right:.6em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--ink)}
.ind .row span:nth-child(3n){color:var(--ink);-webkit-text-stroke:0}
.ind .row span:nth-child(5n){color:var(--shu);-webkit-text-stroke:0}
.ind .row:hover{animation-play-state:paused}

/* 選ばれる理由：一行ずつの大きな文 */
.reasons{background:var(--wash);padding-block:150px}
.rlist{margin-top:64px;border-top:1px solid var(--ink)}
.ritem{display:grid;grid-template-columns:5em minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:baseline;padding:44px 0;border-bottom:1px solid var(--rule);transition:background .4s}
.ritem .num{font-family:var(--f-en);font-style:italic;font-weight:500;font-size:44px;line-height:1;color:var(--shu)}
.ritem h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:.08em;line-height:1.5}
.ritem p{color:var(--sumi);font-size:15px}
.ritem:hover h3{color:var(--shu)}
/* 料金：お品書き */
.pricing{padding-block:160px}
.menu-card{margin:72px auto 0;max-width:880px;position:relative;border:1px solid var(--ink);padding:10px}
.menu-in{border:1px solid var(--ink);padding:64px clamp(24px,6vw,72px) 56px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center}
.menu-in .v{writing-mode:vertical-rl;font-size:28px;font-weight:800;letter-spacing:.4em;border-left:1px solid var(--rule);padding-left:36px;height:100%;display:flex;align-items:center}
.amount{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.amount .pre{font-size:15px;color:var(--sumi);letter-spacing:.2em}
.amount b{font-family:var(--f-en);font-weight:600;font-size:clamp(80px,11vw,140px);line-height:.9;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.amount .post{font-size:15px;color:var(--sumi)}
.menu-in table{width:100%;border-collapse:collapse;font-size:15px;margin-top:34px}
.menu-in th,.menu-in td{text-align:left;padding:16px 0;border-bottom:1px dotted var(--nezu)}
.menu-in th{font-weight:500;color:var(--sumi)}
.menu-in td{text-align:right;font-weight:700}
.menu-in .foot{margin-top:18px;font-size:12px;color:var(--sumi)}
.left-tag{position:absolute;top:-16px;left:40px;background:var(--shu);color:#fff;font-size:12px;letter-spacing:.2em;padding:6px 14px;font-weight:700}
.menu-card .seal{right:-22px;bottom:-26px;width:104px}

/* 流れ：5つを一度に見せる */
.steps-sec{background:var(--night);color:#F2F2EE;padding-block:150px}
.steps-sec .eyebrow .jp{color:#9b9b95}
.steps-sec .h2{color:#F2F2EE}
.track2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:72px;position:relative}
.track2::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#4a4a46}
.step{position:relative;padding:34px 24px 0 0}
.step::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--shu)}
.step .n{font-family:var(--f-en);font-style:italic;font-weight:500;font-size:64px;line-height:1;color:#3a3a36;display:block}
.step h3{font-size:19px;letter-spacing:.08em;margin-top:14px}
.step p{color:#B4B4AD;margin-top:12px;font-size:13px;line-height:1.95}
/* FAQ */
.faq-sec{padding-block:160px}
.faq{margin-top:64px;border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3em minmax(0,1fr) 24px;gap:14px;align-items:baseline;padding:28px 0;font-size:clamp(16px,1.6vw,19px);font-weight:700;letter-spacing:.06em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-size:24px;color:var(--shu);font-weight:800}
.faq summary .pm{position:relative;width:16px;height:16px;align-self:center}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:0;top:7.5px;width:16px;height:1px;background:var(--ink);transition:transform .3s}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq .a{display:grid;grid-template-columns:3em minmax(0,1fr);gap:14px;padding:0 0 30px;color:var(--sumi)}
.faq .a b{font-size:24px;color:var(--ink);font-weight:800;line-height:1.2}

/* 締め */
.closing{background:var(--night);color:#F2F2EE;overflow:hidden;padding-block:170px 160px}
.closing .splash{color:#F2F2EE;opacity:.12;width:min(1500px,170%)}
.closing .in{position:relative;display:grid;justify-items:center;text-align:center}
.closing .lead2{font-size:clamp(22px,3vw,34px);font-weight:700;letter-spacing:.14em}
.closing .big2{width:min(980px,92%);transform:rotate(-3deg);margin-top:10px}
.closing .big2 .ink{width:100%;aspect-ratio:1536/598;color:#F2F2EE;--src:url(img/katsuai-h.webp)}
.closing .offer{margin-top:40px;font-size:15px;color:#BDBDB6;letter-spacing:.1em}
.closing .btn{margin-top:30px;background:#F2F2EE;color:#111}

/* 申し込み */
.form-sec{padding-block:150px}
.form-sec .in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:80px;align-items:start}
.form-sec .head{position:sticky;top:130px}
.reply{display:flex;align-items:center;gap:14px;margin-bottom:34px;padding:16px 20px;border:1px solid var(--ink);font-weight:700;letter-spacing:.12em;font-size:14px}
.reply::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--shu);box-shadow:0 0 0 0 var(--shu);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--shu) 60%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
form{display:grid;gap:30px}
label{display:grid;gap:10px;font-size:13px;font-weight:700;letter-spacing:.12em}
label small{font-size:11px;color:var(--sumi);font-weight:500;margin-left:10px;letter-spacing:.1em}
label small.req{color:var(--shu)}
input,textarea,select{font:inherit;font-weight:500;font-size:16px;letter-spacing:.04em;padding:12px 0;border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);width:100%;border-radius:0;transition:border-color .25s}
input:focus,textarea:focus,select:focus{outline:none;border-bottom-color:var(--shu)}
textarea{min-height:130px;resize:vertical}
.privacy{font-size:12px;color:var(--sumi);line-height:1.9}
.form-msg{font-size:13px;color:var(--shu)}

/* フッター */
.ft{background:var(--night);color:#F2F2EE;padding-top:110px;overflow:hidden;position:relative}
.ft-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:48px;padding-bottom:80px;border-bottom:1px solid #2c2c29}
.ft-logo{display:flex;align-items:center;gap:18px;margin-bottom:40px}
.ft-logo .ink{width:180px;aspect-ratio:1536/598;color:#F2F2EE;--src:url(img/katsuai-h.webp)}
.ft-logo .sl{width:46px;aspect-ratio:1;background:url(img/seal.webp) center/contain no-repeat;transform:rotate(6deg)}
.ft-logo small{font-size:11px;letter-spacing:.3em;color:#8d8d87;padding-left:18px;border-left:1px solid #3a3a37;line-height:1.4}
.ft-top .lead{font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:.1em;line-height:1.7}
.ft-top .lead + .btn{margin-top:30px;background:#F2F2EE;color:#111}
.ft-col h4{margin:0 0 18px;font-family:var(--f-en);font-style:italic;font-weight:500;font-size:16px;color:#8d8d87}
.ft-col a,.ft-col span{display:block;text-decoration:none;font-size:14px;padding:6px 0;color:#D8D8D2;letter-spacing:.08em}
.ft-col a:hover{color:#fff}
.ft-bottom{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding-block:26px;font-size:12px;color:#8d8d87;letter-spacing:.08em}
.ft-giant{width:min(1500px,112%);margin:10px auto -7%;aspect-ratio:1536/598;color:#F2F2EE;--src:url(img/katsuai-h.webp);opacity:.95}

@media (max-width:900px){
  .person{grid-template-columns:minmax(0,1fr);gap:28px}
  .pnamebox{position:static}
  .cases{grid-template-columns:minmax(0,1fr)}
  .hd nav,.hd .cta{display:none}
  .menu-btn{display:block}
  .hero-foot,.about .in,.worry-sec .in,.form-sec .in,.ft-top,.menu-in{grid-template-columns:minmax(0,1fr)}
  .worry-sec .head,.form-sec .head{position:static}
  .worry-sec .in,.form-sec .in{gap:48px}
  .shr{grid-template-columns:minmax(0,1fr)}
  .shr article,.shr article+article{padding:36px 0 30px;border-left:0;border-bottom:1px solid var(--rule)}
  .card{grid-template-columns:minmax(0,1fr);gap:18px;min-height:0;position:relative;top:auto;box-shadow:none;padding-bottom:44px}
  .stamp{width:72px;top:0}
  .menu-in th,.menu-in td{display:block;text-align:left;border:0;padding:4px 0}
  .menu-in tr{display:block;padding:12px 0;border-bottom:1px dotted var(--nezu)}
  .ritem{grid-template-columns:3em minmax(0,1fr);gap:8px 14px;padding:30px 0}
  .ritem p{grid-column:2}
  .ritem .num{font-size:30px}
  .menu-in .v{writing-mode:horizontal-tb;border-left:0;padding-left:0;border-bottom:1px solid var(--rule);padding-bottom:18px;letter-spacing:.3em}
  .menu-card .seal{right:-8px;width:80px}
  .track2{grid-template-columns:minmax(0,1fr);margin-top:48px}
  .track2::before{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .step{padding:0 0 36px 32px}
  .step::before{left:0;top:6px}
  .step .n{font-size:44px}
}
@media (max-width:600px){
  .case{padding:26px 22px 0}
  .saved{margin:auto -22px 0;padding:18px 22px}
  .saved b{font-size:42px}
  .case:hover{transform:none;box-shadow:none}
  .stage{height:660px}
  .big{width:auto;height:520px;transform:rotate(2deg)}
  .big .ink.h{display:none}
  .big .ink.v{display:block;height:100%;width:auto}
  .seal{right:auto;left:-40px;bottom:2%;width:46px}
  .hint{bottom:18px;font-size:13px;padding:10px 16px}
  .counter{display:none}
  .photo{width:112%;aspect-ratio:2/3;margin-left:-56%;margin-top:-84%;-webkit-mask:radial-gradient(ellipse 70% 62% at 50% 50%,#000 60%,transparent 100%);mask:radial-gradient(ellipse 70% 62% at 50% 50%,#000 60%,transparent 100%)}
  .logo .ink{width:92px}
  .wlist li{grid-template-columns:2.6em minmax(0,1fr)}
  .about,.shuhari,.scope,.pricing,.faq-sec,.form-sec,.worry-sec,.reasons{padding-block:110px}
}
@media (prefers-reduced-motion:reduce){
  .worry,.marquee .track,.ind .row,.hint svg path,.reply::before{animation:none}
}

/* Contact Form 7 */
.form-sec .wpcf7 form{display:grid;gap:30px}
.form-sec .wpcf7 p{margin:0}
.form-sec .wpcf7 label{display:grid;gap:10px}
.form-sec .wpcf7-form-control-wrap{display:block}
.form-sec .wpcf7-submit{position:relative;display:inline-flex;align-items:center;background:var(--ink);color:var(--on-ink);font-family:var(--f-jp);font-weight:700;font-size:15px;letter-spacing:.14em;padding:20px 40px;border:0;border-radius:0;cursor:pointer;width:auto;transition:background .3s}
.form-sec .wpcf7-submit:hover{background:var(--shu)}
.form-sec .wpcf7-not-valid-tip{color:var(--shu);font-size:12px;margin-top:6px}
.form-sec .wpcf7 form .wpcf7-response-output{margin:0;padding:14px 18px;border:1px solid var(--ink);font-size:14px}
.form-sec .wpcf7 form.sent .wpcf7-response-output{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}
.form-sec .wpcf7-spinner{margin:0 0 0 16px}
.form-sec .wpcf7-list-item{margin:0}
.form-sec .wpcf7 label br{display:none}
/* 特定商取引法に基づく表記 */
.law{padding-block:150px 120px}
.law .h2{margin-bottom:56px}
.law-table{border-top:1px solid var(--ink)}
.law-table div{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.law-table dt{font-weight:700;font-size:14px;letter-spacing:.08em}
.law-table dd{margin:0;font-size:15px;color:var(--sumi);line-height:1.95}
.law-back{margin-top:56px}
.law-date{margin-top:28px;font-size:12px;color:var(--sumi)}
@media (max-width:700px){.law-table div{grid-template-columns:minmax(0,1fr);gap:6px}}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}