/* ==========================================================================
   KOTONOHA ── 深淵に灯る言の樹
   1. トークン  2. 基本  3. 常時レイヤー  4. 起動  5. ヘッダー・ボタン
   6. ヒーロー  7. セクション共通  8. 実績  9. サービス・流れ  10. 読みもの
   11. 扉（CTA）  12. 下層ページ  13. 本文  14. フォーム  15. フッター
   16. 静止モード  17. レスポンシブ
   ========================================================================== */

/* 1. トークン */
:root{
  --abyss:#07060C; --deep:#0E0C17; --moon:#ECE6DA; --moon-2:#A7A0B4; --moon-3:#8A84A0;
  --brass:#C9A96E; --ion:#7C5CFF; --cryo:#58E1FF; --rose:#E05CFF; --err:#FF7A95;
  --hair:rgba(201,169,110,.28); --line:rgba(236,230,218,.10);
  --holo:linear-gradient(100deg,var(--cryo),var(--ion) 45%,var(--rose) 72%,var(--brass));
  --mincho:"Zen Old Mincho","Noto Serif CJK JP","Noto Serif JP","Yu Mincho",serif;
  --gothic:"Zen Kaku Gothic New","Noto Sans CJK JP","Noto Sans JP","Yu Gothic",sans-serif;
  --pad:clamp(20px,5vw,72px);
  --maxw:1280px;
}

/* 2. 基本 */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--abyss);-webkit-text-size-adjust:100%}
body{color:var(--moon);font:400 16px/1.95 var(--gothic);overflow-x:hidden;
  background:radial-gradient(120vw 80vh at 70% -10%,#1B1433 0,transparent 60%),radial-gradient(80vw 60vh at -10% 110%,#0F2230 0,transparent 60%),var(--abyss);background-attachment:fixed}
a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--cryo);outline-offset:4px}
::selection{background:var(--ion);color:#fff}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--moon);color:var(--abyss);padding:10px 16px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
main{position:relative;z-index:2;display:block}

/* 3. 常時レイヤー：粒子ノイズ・周辺減光・隠れ文字・リング */
/* 粒子ノイズ：画面より160px大きい層を、位置だけ切り替えて動かす（再描画なし） */
#grain{position:fixed;left:-160px;top:-160px;width:calc(100vw + 320px);height:calc(100vh + 320px);z-index:50;pointer-events:none;opacity:.035;image-rendering:pixelated;background-repeat:repeat;will-change:transform;animation:grain .36s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-53px,71px)}50%{transform:translate(89px,-37px)}75%{transform:translate(-101px,-83px)}}
.vignette{position:fixed;inset:0;z-index:49;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.cipher{position:fixed;left:0;top:0;width:400px;height:400px;z-index:1;pointer-events:none;opacity:.5;transition:opacity .4s;will-change:transform}
.cipher canvas{display:block}
.cipher.mute{opacity:0}
.lens{position:fixed;z-index:60;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--brass);border-radius:50%;pointer-events:none;left:var(--mx,-99px);top:var(--my,-99px);transition:width .25s,height .25s,margin .25s,border-color .25s;mix-blend-mode:difference}
.lens.hot{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--cryo)}

/* 4. 起動シーケンス */
#boot{display:none}
.ktn-boot #boot{position:fixed;inset:0;z-index:100;background:var(--abyss);display:grid;place-items:center;transition:clip-path 1s cubic-bezier(.8,0,.2,1)}
#boot.open{clip-path:inset(50% 0 50% 0)}
#boot .b-in{text-align:center}
#boot .b-name{font:700 clamp(28px,4vw,48px)/1 var(--mincho);letter-spacing:.5em;margin-right:-.5em}
#boot .b-bar{width:220px;height:1px;background:var(--line);margin:22px auto 10px;position:relative;overflow:hidden}
#boot .b-bar::after{content:"";position:absolute;inset:0;background:var(--holo);transform-origin:left;animation:load 1.3s cubic-bezier(.6,0,.2,1) forwards}
#boot .b-msg{font-size:12px;color:var(--moon-3);letter-spacing:.2em}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* 5. ヘッダー・ボタン */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:32px;padding:22px var(--pad);transition:background .4s,padding .4s,border-color .4s;border-bottom:1px solid transparent}
/* すりガラスは疑似要素に置く（ヘッダー本体に付けると、中の固定配置メニューが閉じ込められるため） */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;background:rgba(7,6,12,.88);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.site-header.solid{padding-top:14px;padding-bottom:14px;border-bottom-color:var(--line)}
.site-header.solid::before{opacity:1}
.logo{text-decoration:none;display:flex;align-items:center;gap:14px;flex-shrink:0}
/* マーク：細部が潰れない大きさ（検証で96px前後から内側の円・点が判別できる） */
.logo svg{width:104px;height:104px;color:var(--moon);flex-shrink:0;transition:color .3s,width .4s,height .4s}
.site-header.solid .logo svg{width:80px;height:80px}
.site-footer .logo svg{width:112px;height:112px}
@media (max-width:900px){.logo svg,.site-header.solid .logo svg{width:72px;height:72px}.site-footer .logo svg{width:88px;height:88px}}
.logo:hover svg{color:var(--brass)}
.logo .custom-mark{height:34px;width:auto;max-width:220px;object-fit:contain;display:block}
.logo:not(:has(span)) .custom-mark{height:40px}
.author-box .av .site-mark{width:100%;height:100%;border-radius:50%;object-fit:cover}
.logo b{font:700 19px/1 var(--mincho);letter-spacing:.32em}
.logo small{display:block;font-size:11px;color:var(--moon-3);letter-spacing:.12em;margin-top:5px}
.gnav{display:flex;align-items:center;gap:30px;margin-left:auto}
.gnav ul{display:flex;gap:28px;list-style:none;font-size:14px;letter-spacing:.08em}
.gnav ul a{text-decoration:none;position:relative;padding:6px 0;color:var(--moon-2);transition:color .2s}
.gnav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--holo);transform:scaleX(0);transform-origin:right;transition:transform .35s}
.gnav ul a:hover,.gnav ul .current-menu-item a{color:var(--moon)}
.gnav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:none}
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;text-decoration:none;cursor:pointer;
  font:700 15px/1 var(--gothic);letter-spacing:.08em;padding:18px 30px;border:0;border-radius:0;color:var(--abyss);background:var(--moon);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:background .3s,color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--holo);opacity:0;transition:opacity .35s;z-index:-1}
.btn:hover{background:transparent;color:#fff}
.btn:hover::before{opacity:1}
.btn.ghost{background:transparent;color:var(--moon);box-shadow:inset 0 0 0 1px var(--hair)}
.btn.sm{padding:12px 18px;font-size:13px}
.btn[disabled]{opacity:.6;pointer-events:none}
.acts{display:flex;flex-wrap:wrap;gap:14px}

/* 6. ヒーロー */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden}
#tree{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.hud{position:absolute;z-index:3;font-size:12px;letter-spacing:.14em;color:var(--moon-3)}
.hud b{color:var(--brass);font-weight:500;font-variant-numeric:tabular-nums;margin-left:12px}
.hud.tl{left:var(--pad);top:172px}
.hud.tr{right:var(--pad);top:172px;text-align:right}
.hero-copy{position:absolute;z-index:3;left:var(--pad);bottom:clamp(110px,16vh,170px);max-width:min(780px,90vw)}
.hero h1{font:900 clamp(40px,6.4vw,92px)/1.14 var(--mincho);letter-spacing:.04em;text-shadow:0 0 40px rgba(124,92,255,.35)}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .ch{display:inline-block}
.hero h1 .ch.scr{color:var(--cryo);opacity:.8}
.hero .sub{margin-top:22px;max-width:34em;color:var(--moon-2);font-size:15px}
.hero .sub strong{color:var(--moon);font-weight:500}
.hero .acts{margin-top:30px}
.tip{position:absolute;z-index:4;pointer-events:none;min-width:220px;max-width:280px;padding:12px 16px;font-size:13px;line-height:1.6;background:rgba(14,12,23,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--hair);opacity:0;transform:translateY(6px);transition:.18s}
.tip.show{opacity:1;transform:none}
.tip::before{content:"";position:absolute;left:-1px;top:-1px;width:14px;height:14px;border-left:2px solid var(--cryo);border-top:2px solid var(--cryo)}
.tip b{display:block;font:700 15px/1.5 var(--mincho);color:var(--moon);margin-bottom:2px}
.tip .k{color:var(--moon-3)} .tip .v{color:var(--cryo)}
.scroll-cue{position:absolute;z-index:3;right:var(--pad);bottom:40px;writing-mode:vertical-rl;font-size:11px;letter-spacing:.4em;color:var(--moon-3);display:flex;align-items:center;gap:14px}
.scroll-cue::after{content:"";width:1px;height:70px;background:linear-gradient(var(--brass),transparent);animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 7. セクション共通 */
.sec{padding:140px var(--pad);max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto}
.wrap{padding:176px var(--pad) 120px;max-width:calc(var(--maxw) + var(--pad) * 2);margin:0 auto}
.wrap.narrow{max-width:calc(840px + var(--pad) * 2)}
/* 本文が主役のページは、読みやすい行長を列そのものにして画面の中央にそろえる
   （列の中で本文だけが細いと、右側が大きく空いて左に寄って見えるため） */
.wrap.narrow .entry{max-width:none}
.wrap.narrow .page-head .lead{max-width:none}
.sec-h{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:28px;margin-bottom:24px}
.sec-h .idx,.idx{font:400 13px/1 var(--mincho);color:var(--brass);letter-spacing:.2em;padding-bottom:12px;border-bottom:1px solid var(--brass);white-space:nowrap}
h2,.page-head h1{font:700 clamp(30px,3.8vw,54px)/1.3 var(--mincho);letter-spacing:.06em;position:relative}
.glitch.in{animation:glitch .7s steps(2) 1}
@keyframes glitch{
  0%{text-shadow:-6px 0 var(--cryo),6px 0 var(--rose);clip-path:inset(10% 0 55% 0)}
  25%{text-shadow:4px 0 var(--cryo),-4px 0 var(--rose);clip-path:inset(60% 0 5% 0)}
  50%{text-shadow:-2px 0 var(--cryo),2px 0 var(--rose);clip-path:inset(30% 0 30% 0)}
  100%{text-shadow:none;clip-path:inset(0)}}
.lead{color:var(--moon-2);max-width:38em;margin:0 0 44px}
.more{margin-top:64px}
.more-link{display:inline-block;margin-top:16px;font-size:14px;color:var(--brass);text-decoration:none;border-bottom:1px solid var(--hair)}
.more-link:hover{color:var(--cryo);border-color:var(--cryo)}
.empty,.note-more{color:var(--moon-2);margin:32px 0}
.note-more{font-size:14px;color:var(--moon-3);border-top:1px solid var(--line);padding-top:24px;margin-top:64px}

/* 8. 実績：ホログラム標本 */
.filters-wrap{display:grid;gap:14px;margin-bottom:48px}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:40px}
.filters-wrap .filters{margin:0}
.f-label{font-size:12px;color:var(--moon-3);letter-spacing:.14em;min-width:5.5em}
.chip{font:inherit;font-size:13px;letter-spacing:.08em;padding:8px 18px;border:1px solid var(--line);background:transparent;color:var(--moon-2);cursor:pointer;transition:.25s;text-decoration:none;display:inline-flex;gap:8px;align-items:baseline}
.chip small{font-size:11px;color:var(--moon-3)}
.chip:hover{border-color:var(--hair);color:var(--moon)}
.chip[aria-pressed="true"],.chip[aria-current]{border-color:var(--brass);color:var(--brass);background:rgba(201,169,110,.06)}
.specimens{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:56px 40px}
.specimens.two{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.spec-cell[hidden]{display:none}
.spec{position:relative}
.spec-link{text-decoration:none;display:block;perspective:900px}
.plate{position:relative;aspect-ratio:4/3;overflow:hidden;transform-style:preserve-3d;transition:transform .2s ease-out;background:var(--deep);border:1px solid var(--line);margin:0}
.plate .art,.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate::before{content:"";position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .4s;mix-blend-mode:color-dodge;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(88,225,255,.35) 45%,rgba(224,92,255,.3) 55%,transparent 70%);background-size:250% 100%;background-position:var(--sx,50%) 0}
.plate::after{content:"";position:absolute;inset:10px;z-index:3;border:1px solid transparent;pointer-events:none;border-image:linear-gradient(var(--brass),transparent 30%,transparent 70%,var(--brass)) 1;opacity:.6}
.spec-link:hover .plate::before{opacity:1}
.spec .ttl{margin-top:18px;font:700 19px/1.5 var(--mincho);transition:color .25s;letter-spacing:.02em}
.spec-link:hover .ttl{color:var(--cryo)}
.label{margin-top:8px;display:grid;grid-template-columns:5em 1fr;font-size:13px;line-height:1.8;column-gap:10px}
.label dt{color:var(--moon-3)}
.label dd{color:var(--moon-2)}
.label .res{color:var(--brass)}
.badge{position:absolute;top:14px;right:14px;z-index:4;font-size:11px;letter-spacing:.1em;padding:3px 8px;background:rgba(7,6,12,.7);border:1px solid var(--line);color:var(--moon-2)}

/* 9. サービス・流れ */
.svc{border-top:1px solid var(--hair)}
.svc-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr) auto;gap:32px;padding:36px 0;border-bottom:1px solid var(--line);align-items:baseline;overflow:hidden;text-decoration:none}
.svc-row::before{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(124,92,255,.12),transparent);transition:left .7s}
.svc-row:hover::before{left:100%}
.svc-row h2,.svc-row h3{font:700 26px/1.4 var(--mincho);letter-spacing:.04em}
.svc-row:hover h2,.svc-row:hover h3{color:var(--cryo)}
.svc-row p{color:var(--moon-2);font-size:15px}
.price{font:700 22px/1 var(--mincho);color:var(--brass);white-space:nowrap}
.price small{font:400 12px var(--gothic);color:var(--moon-3);margin-left:4px}
.svc-price{font-size:15px;color:var(--moon-2);margin:-12px 0 40px}
.svc-price b{font:700 30px/1 var(--mincho);color:var(--brass);margin:0 4px 0 12px}
.flow{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);counter-reset:f;position:relative;margin-top:40px}
.flow::before{content:"";position:absolute;left:0;right:0;top:25px;height:1px;background:linear-gradient(90deg,var(--brass),var(--ion),var(--cryo))}
.flow li{counter-increment:f;padding:0 22px 0 0;font-size:14px;color:var(--moon-2);position:relative}
.flow li::before{content:counter(f);display:grid;place-items:center;width:51px;height:51px;border:1px solid var(--hair);border-radius:50%;background:var(--abyss);font:700 20px/1 var(--mincho);color:var(--brass);margin-bottom:20px;position:relative}
.flow b{display:block;color:var(--moon);font:700 18px/1.5 var(--mincho);margin-bottom:6px}
.sec-in{margin-top:120px}

/* 10. 読みもの */
.feeds{display:grid;grid-template-columns:1.8fr 1fr;gap:64px;margin-top:40px}
.feed h3{font:700 20px/1.4 var(--mincho);margin-bottom:18px;color:var(--brass);letter-spacing:.1em}
.feed ul{list-style:none;border-top:1px solid var(--line)}
.feed li a{display:grid;grid-template-columns:7em 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s,background .3s}
.feed li a:hover{padding-left:12px;background:linear-gradient(90deg,rgba(88,225,255,.05),transparent)}
.feed time{color:var(--moon-3);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.cat{display:block;font-size:12px;color:var(--cryo);font-style:normal;letter-spacing:.1em;text-decoration:none}
.feed span{color:var(--moon)}
.feed li.empty{padding:20px 0;color:var(--moon-3)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:56px 40px}
.post-card a{text-decoration:none;display:block}
.post-card .meta{display:flex;gap:14px;align-items:baseline;margin-top:16px;font-size:13px;color:var(--moon-3)}
.post-card .ttl{font:700 20px/1.55 var(--mincho);margin-top:6px;transition:color .25s}
.post-card a:hover .ttl{color:var(--cryo)}
.post-card a:hover .plate::before{opacity:1}
.post-card .ex{font-size:14px;color:var(--moon-2);margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 11. 扉（相談CTA） */
.gate{position:relative;text-align:center;overflow:hidden;padding:140px var(--pad);isolation:isolate}
.gate .aura{position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:-1;opacity:.55;
  background:conic-gradient(from 0deg,transparent,rgba(88,225,255,.25),transparent 30%,rgba(124,92,255,.3),transparent 60%,rgba(201,169,110,.25),transparent);filter:blur(60px);animation:spin 24s linear infinite}
.gate .ring{position:absolute;left:50%;top:50%;width:min(620px,90vw);aspect-ratio:1;translate:-50% -50%;border:1px solid var(--hair);border-radius:50%;z-index:-1}
.gate .ring.r2{width:min(760px,110vw);border-style:dashed;opacity:.4;animation:spin 60s linear infinite reverse}
@keyframes spin{to{rotate:360deg}}
.gate .lead{margin:18px auto 44px}
.quick{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:14px;max-width:920px;margin:0 auto;text-align:left}
.quick label{font-size:13px;display:grid;gap:8px;color:var(--moon-2);letter-spacing:.06em}
.quick .go{grid-column:1/-1;justify-self:center;margin-top:18px}
.assure{margin-top:22px;font-size:13px;color:var(--moon-3)}
input,select,textarea{font:inherit;font-size:16px;color:var(--moon)}
.quick input,.quick select,.ktn-form input:not([type=checkbox]),.ktn-form select,.ktn-form textarea,.search-form input{width:100%;padding:15px 16px;border:1px solid rgba(236,230,218,.18);background:rgba(14,12,23,.75);border-radius:0;transition:border-color .2s,box-shadow .2s}
.quick input:focus,.quick select:focus,.ktn-form input:focus,.ktn-form select:focus,.ktn-form textarea:focus,.search-form input:focus{outline:none;border-color:var(--cryo);box-shadow:0 0 0 3px rgba(88,225,255,.18)}
option{background:#0E0C17;color:var(--moon)}

/* 12. 下層ページ */
.page-head{margin-bottom:56px}
.page-head .sec-h{margin-bottom:24px}
.page-head .lead{margin-bottom:0}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;font-size:12px;color:var(--moon-3);margin-bottom:40px;letter-spacing:.06em}
.bc li+li::before{content:"／";margin:0 10px;color:var(--hair)}
.bc a{text-decoration:none;color:var(--moon-2)}
.bc a:hover{color:var(--cryo)}
.pager{margin-top:72px}
.pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pager .page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line);text-decoration:none;font-size:14px;color:var(--moon-2)}
.pager .page-numbers.current{border-color:var(--brass);color:var(--brass)}
.pager a.page-numbers:hover{border-color:var(--cryo);color:var(--cryo)}
/* 実績詳細 */
.ws-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:48px;align-items:start}
.ws-mv{aspect-ratio:16/10}
.ws-label{margin:0;grid-template-columns:6em 1fr;font-size:14px;line-height:2;border-top:1px solid var(--brass);padding-top:16px}
.ws-label a{color:var(--cryo)}
.ws-summary{font:400 clamp(18px,1.6vw,22px)/1.9 var(--mincho);margin:64px 0 0;max-width:36em;color:var(--moon)}
.ws-sec{margin-top:96px}
.ws-sec>h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:32px;display:flex;align-items:baseline;gap:20px}
.ws-sec>h2 span{font:400 14px/1 var(--mincho);color:var(--brass);letter-spacing:.2em;border-bottom:1px solid var(--brass);padding-bottom:8px}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.result{background:var(--abyss);padding:28px 24px}
.r-label{font-size:13px;color:var(--moon-3);letter-spacing:.1em}
.r-val{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:10px 0 6px}
.r-val .before{font-size:15px;color:var(--moon-2)}
.r-val .arrow{color:var(--brass)}
.r-val .after{font:700 34px/1.1 var(--mincho);background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.r-note{font-size:12px;color:var(--moon-3)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:24px}
.gallery .plate{aspect-ratio:auto}
.gallery .plate img{position:static;height:auto}
.gallery figcaption{font-size:13px;color:var(--moon-3);padding:10px 14px}
.voice{margin-top:96px;border-left:1px solid var(--brass);padding:8px 0 8px 36px;max-width:44em}
.voice blockquote{font:400 clamp(17px,1.5vw,20px)/2 var(--mincho)}
.voice figcaption{margin-top:14px;font-size:13px;color:var(--moon-3)}
.ws-cta,.cta-inline{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:96px;padding:32px 36px;border:1px solid var(--hair);background:linear-gradient(110deg,rgba(124,92,255,.10),rgba(88,225,255,.04) 50%,transparent)}
.ws-cta p,.cta-inline p{max-width:40em;color:var(--moon-2);font-size:15px}
.ws-cta b,.cta-inline b{display:block;color:var(--moon);font:700 19px/1.6 var(--mincho);margin-bottom:4px}
.related h2{font-size:clamp(22px,2.2vw,28px)}
/* ブログ記事 */
.read-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:45;pointer-events:none}
.read-progress span{display:block;height:100%;width:100%;background:var(--holo);transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px var(--cryo)}
.post-single{max-width:calc(820px + var(--pad) * 2)}
.post-head .meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;font-size:13px;color:var(--moon-3);margin-bottom:18px}
.post-head .meta .cat{display:inline}
.post-title{font:700 clamp(28px,3.4vw,44px)/1.45 var(--mincho);letter-spacing:.03em}
.post-eye{margin-top:40px;aspect-ratio:16/9}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:48px;font-size:13px}
.tags a{color:var(--moon-2);text-decoration:none}
.tags a:hover{color:var(--cryo)}
.author-box{display:grid;grid-template-columns:64px 1fr;gap:20px;margin-top:64px;padding:28px;border:1px solid var(--line);font-size:14px;color:var(--moon-2)}
.author-box .av{width:64px;height:64px;border:1px solid var(--hair);border-radius:50%;display:grid;place-items:center}
.author-box .av svg{width:38px;height:38px;color:var(--moon)}
.author-box .who{color:var(--moon)}
.author-box a{color:var(--brass)}
.back{margin-top:56px}
.search-form{display:flex;gap:10px;margin-bottom:40px;max-width:560px}
.lost .acts{margin-top:24px}
.thanks .next{margin-top:56px}
.thanks .next .idx{display:inline-block;margin-bottom:20px}

/* 13. 本文（ブロックエディタの出力） */
.entry{font-size:17px;line-height:2.05;color:#DDD6E6;max-width:40em}
.narrow-entry{margin-top:56px}
.entry>*+*{margin-top:1.4em}
.entry h2{font:700 clamp(24px,2.4vw,30px)/1.5 var(--mincho);margin-top:2.6em;padding-bottom:.5em;border-bottom:1px solid var(--hair);scroll-margin-top:130px}
.entry h3{font:700 21px/1.6 var(--mincho);margin-top:2em;color:var(--moon);scroll-margin-top:130px}
.entry h3::before{content:"";display:inline-block;width:10px;height:10px;border:1px solid var(--cryo);transform:rotate(45deg);margin-right:14px;vertical-align:3px}
.entry a{color:var(--cryo);text-underline-offset:4px}
.entry a:hover{color:#fff}
.entry strong{color:var(--moon);background:linear-gradient(transparent 70%,rgba(124,92,255,.35) 70%)}
.entry ul,.entry ol{padding-left:1.4em}
.entry li+li{margin-top:.4em}
.entry ul li::marker{color:var(--brass)}
.entry ol li::marker{color:var(--brass);font-family:var(--mincho)}
.entry blockquote{border-left:1px solid var(--brass);padding-left:1.4em;color:var(--moon-2);font-family:var(--mincho)}
.entry figure img{border:1px solid var(--line)}
.entry figcaption{font-size:13px;color:var(--moon-3);margin-top:8px}
.entry table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.7}
.entry th,.entry td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.entry th{background:rgba(201,169,110,.08);color:var(--moon);font-weight:500}
.entry tbody th{white-space:nowrap;width:1%}
@media (max-width:700px){.entry tbody th{white-space:normal;width:auto;min-width:5.5em}}
.entry .wp-block-table{overflow-x:auto}
.entry code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:rgba(236,230,218,.07);padding:.15em .4em}
.entry pre{background:var(--deep);border:1px solid var(--line);padding:18px;overflow-x:auto}
.entry pre code{background:none;padding:0}
.entry hr{border:0;height:1px;background:var(--line);margin:3em 0}
.entry details{border:1px solid var(--line);padding:16px 20px}
.entry details summary{cursor:pointer;font-weight:700;color:var(--moon)}
.entry details[open] summary{margin-bottom:10px;color:var(--brass)}
.entry .is-style-ktn-point{border:1px solid var(--hair);padding:24px 28px;background:rgba(201,169,110,.05);position:relative}
.entry .is-style-ktn-point::before{content:"ポイント";position:absolute;top:-11px;left:20px;background:var(--abyss);padding:0 10px;font-size:12px;letter-spacing:.2em;color:var(--brass)}
.entry .wp-block-button__link{display:inline-block;background:var(--moon);color:var(--abyss);text-decoration:none;padding:14px 26px;font-weight:700;border-radius:0}
.entry .wp-block-button__link:hover{background:var(--cryo)}
.toc{border:1px solid var(--line);padding:24px 28px;margin:2.4em 0;background:rgba(14,12,23,.6)}
.toc-h{font:700 15px/1 var(--mincho);color:var(--brass);letter-spacing:.2em;margin-bottom:14px}
.toc ol{list-style:none;padding:0;font-size:15px;line-height:1.8}
.toc li.lv3{padding-left:1.4em;font-size:14px}
.toc a{color:var(--moon-2);text-decoration:none}
.toc a:hover{color:var(--cryo)}
.entry .cta-inline{margin:2.6em 0}
.entry .btn,.entry .btn:hover{color:var(--abyss);text-decoration:none}
.entry .btn:hover{color:#fff}
.post-single .entry{max-width:none}

/* 標語（屋号のひと言など） */
.entry .ktn-motto{font:700 clamp(22px,2.4vw,30px)/1.7 var(--mincho);color:var(--moon);letter-spacing:.06em;padding:1.1em 0;margin:2em 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);text-align:center}

/* 料金ページ */
.page-price .entry{max-width:none}
.entry .ktn-jump{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:2.2em 0 1em}
.entry .ktn-jump li{margin:0}
.entry .ktn-jump a{display:inline-block;padding:7px 14px;border:1px solid var(--line);font-size:13px;line-height:1.4;color:var(--moon-2);text-decoration:none;transition:.2s}
.entry .ktn-jump a:hover{border-color:var(--brass);color:var(--brass)}
.entry .is-style-ktn-price table{table-layout:fixed}
.entry .is-style-ktn-price th:nth-child(1){width:31%}
.entry .is-style-ktn-price th:nth-child(2){width:29%}
.entry .is-style-ktn-price td:nth-child(1){color:var(--moon)}
.entry .is-style-ktn-price td:nth-child(2){font:700 16px/1.6 var(--mincho);color:var(--brass)}
.entry .is-style-ktn-price td:nth-child(3){color:var(--moon-2);font-size:14px}
.entry .is-style-ktn-terms th{width:9em;white-space:nowrap}
.entry .is-style-ktn-terms td{color:var(--moon-2)}
@media (max-width:700px){
  .entry .is-style-ktn-price thead{display:none}
  .entry .is-style-ktn-price table,.entry .is-style-ktn-price tbody,.entry .is-style-ktn-price tr,.entry .is-style-ktn-price td{display:block;width:auto}
  .entry .is-style-ktn-price tr{border:1px solid var(--line);border-bottom:0;padding:12px 14px}
  .entry .is-style-ktn-price tr:last-child{border-bottom:1px solid var(--line)}
  .entry .is-style-ktn-price td{border:0;padding:0}
  .entry .is-style-ktn-price td:nth-child(2){margin-top:2px}
  .entry .is-style-ktn-price td:nth-child(3):empty{display:none}
  .entry .is-style-ktn-terms th,.entry .is-style-ktn-terms td{display:block;width:auto}
  .entry .is-style-ktn-terms th{border-bottom:0}
}

/* 14. フォーム */
.ktn-form{max-width:720px}
.form-status{display:flex;gap:14px;align-items:center;padding:14px 18px;border:1px solid var(--hair);margin-bottom:32px;font-size:14px}
.form-status span{color:var(--brass);font-size:12px;letter-spacing:.14em;border-right:1px solid var(--hair);padding-right:14px}
.steps{list-style:none;display:flex;gap:0;margin-bottom:40px;counter-reset:s;font-size:13px;color:var(--moon-3)}
.steps li{flex:1;display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.steps b{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;font:700 13px/1 var(--mincho)}
.steps li.done{color:var(--moon-2);border-color:var(--hair)}
.steps li.done b{border-color:var(--brass);color:var(--brass)}
.steps li[aria-current]{color:var(--moon);border-color:var(--cryo)}
.steps li[aria-current] b{border-color:var(--cryo);color:var(--cryo)}
.ktn-form fieldset{border:0;margin:0 0 12px;padding:0}
.ktn-form legend{font:700 18px/1.5 var(--mincho);margin-bottom:22px;color:var(--moon)}
.js .ktn-form[data-stage=input] .step-2.is-hidden{display:none}
.field{margin-bottom:26px}
.field>label{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:8px;color:var(--moon)}
.req,.opt{font-size:11px;letter-spacing:.08em;padding:2px 7px;line-height:1.4}
.req{background:var(--brass);color:var(--abyss)}
.opt{border:1px solid var(--line);color:var(--moon-3)}
.field .msg{font-size:13px;color:var(--moon-3);margin-top:6px;min-height:1em}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--err)!important}
.field.has-err .msg{color:var(--err)}
.field.has-err .msg::before{content:"！ ";font-weight:700}
.form-err{border:1px solid var(--err);color:var(--err);padding:14px 18px;margin-bottom:28px;font-size:14px}
.ktn-form .acts{margin-top:12px}
.ktn-form .next{margin-top:4px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.confirm-list{display:grid;grid-template-columns:10em 1fr;border-top:1px solid var(--line);margin-bottom:32px}
.confirm-list dt,.confirm-list dd{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.confirm-list dt{color:var(--moon-3)}
.confirm-list .none{color:var(--moon-3)}
.consent label{font-size:15px;display:flex;gap:10px;align-items:center}
.consent input{width:20px;height:20px;accent-color:var(--cryo)}
.consent a{color:var(--cryo)}
.cf-turnstile{margin:8px 0 20px}

/* 15. フッター */
.site-footer{position:relative;z-index:2;border-top:1px solid var(--line);padding:64px var(--pad) 40px;font-size:13px;color:var(--moon-3)}
.f-main{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start;max-width:var(--maxw);margin:0 auto}
.site-footer nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 28px}
.site-footer nav a{text-decoration:none;color:var(--moon-2)}
.site-footer nav a:hover{color:var(--cryo)}
.f-sub{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:var(--maxw);margin:48px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.motion{font:inherit;background:none;border:1px solid var(--line);color:var(--moon-2);padding:8px 14px;cursor:pointer}
.motion:hover{border-color:var(--hair);color:var(--moon)}
.fab{position:fixed;right:16px;bottom:16px;z-index:45;display:none!important}

/* 16. 静止モード（動きを止める／視差効果を減らす） */
.still .cipher,.still .lens,.still #grain{display:none}
.still .gate .aura,.still .gate .ring.r2,.still .scroll-cue::after,.still #grain{animation:none}
.still .glitch.in{animation:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
@media (pointer:coarse){.cipher,.lens{display:none}}

/* 17. レスポンシブ */
@media (max-width:1024px){
  .gnav ul{gap:20px}
  .ws-top{grid-template-columns:1fr}
}
@media (max-width:900px){
  .site-header .logo{position:relative;z-index:41}
  .menu-btn{display:grid;place-items:center;margin-left:auto;width:44px;height:44px;background:none;border:1px solid var(--line);cursor:pointer;position:relative;z-index:41}
  .menu-btn>span:first-child,.menu-btn>span:first-child::before,.menu-btn>span:first-child::after{content:"";display:block;width:18px;height:1px;background:var(--moon);position:relative;transition:.3s}
  .menu-btn>span:first-child::before{position:absolute;top:-6px}
  .menu-btn>span:first-child::after{position:absolute;top:6px}
  .menu-btn[aria-expanded=true]>span:first-child{background:transparent}
  .menu-btn[aria-expanded=true]>span:first-child::before{top:0;transform:rotate(45deg)}
  .menu-btn[aria-expanded=true]>span:first-child::after{top:0;transform:rotate(-45deg)}
  .gnav{position:fixed;inset:0;z-index:40;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:36px;padding:132px var(--pad) 48px;overflow-y:auto;overscroll-behavior:contain;background:rgba(7,6,12,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .gnav.open{opacity:1;visibility:visible}
  .gnav ul{flex-direction:column;gap:22px;font:700 24px/1.4 var(--mincho)}
  .gnav ul a{color:var(--moon)}
  .hud.tr{display:none}
  .hud.tl{top:140px}
  .hero-copy{bottom:96px}
  .hero h1{font-size:clamp(30px,8.6vw,48px)}
  .svc-row{grid-template-columns:1fr;gap:10px}
  .flow{grid-template-columns:1fr;gap:28px}
  .flow::before{left:25px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(var(--brass),var(--ion),var(--cryo))}
  .flow li{display:grid;grid-template-columns:51px 1fr;column-gap:18px}
  .flow li::before{grid-row:span 2;margin:0}
  .feeds{grid-template-columns:1fr}
  .quick{grid-template-columns:1fr}
  .fab.on{display:inline-flex!important}
  .scroll-cue{display:none}
  .sec,.gate{padding-top:96px;padding-bottom:96px}
  .wrap{padding-top:142px}
  .sec-h{grid-template-columns:1fr;gap:14px}
  .sec-h .idx{justify-self:start}
  .f-main{grid-template-columns:1fr}
  .site-footer nav ul{justify-content:flex-start}
  .confirm-list{grid-template-columns:1fr}
  .confirm-list dt{border-bottom:0;padding-bottom:0}
  .ws-cta,.cta-inline{padding:24px}
  .gallery{grid-template-columns:1fr}
  .specimens,.posts{grid-template-columns:1fr}
}

/* 料金の注記（ポイント枠のラベルを差し替え） */
.entry .is-style-ktn-point.ktn-note::before{content:"料金について"}
.entry .ktn-note p{color:var(--moon);font-size:15px;line-height:1.9}