/* ============================================================
CHI TERASU Design System v1.0 「智照 — 夜を旅する光」
assets/css/chiterasu.css
正典: docs/CHITERASU_BRAND_DESIGN_SYSTEM.md と 1:1 対応
============================================================ */
/* ------------------------------------------------------------
0. Design Tokens
------------------------------------------------------------ */
:root{
/* Brand colors */
--ct-shinya:#070514; --ct-yozora:#0D0A24; --ct-yoi:#171238; --ct-fujikon:#241C52;
--ct-suisho:#8A73C4; --ct-suisho-l:#B4A3E0; --ct-suisho-d:#6C56A8;
--ct-gekko:#F1EAD8;
--ct-kin-1:#D8BC7E; --ct-kin-2:#B99A55; --ct-kin-3:#8A7038;
--ct-shu:#C4553F; --ct-toro:#E8A75C; --ct-mizuumi:#3D4F8A;
--ct-sakura:#E9B7CC; --ct-washi:#F6F1E6; --ct-sumi:#262233;
/* Semantic (dark = 夜 default) */
--bg:var(--ct-yozora);
--surface-1:rgba(23,18,56,.55);
--surface-2:var(--ct-yoi);
--surface-3:var(--ct-fujikon);
--text-1:var(--ct-gekko);
--text-2:rgba(241,234,216,.64);
--text-3:rgba(241,234,216,.40);
--primary:var(--ct-suisho); --primary-strong:var(--ct-suisho-l);
--secondary:var(--ct-mizuumi);
--accent:var(--ct-kin-2); --accent-l:var(--ct-kin-1);
--border-gold:rgba(216,188,126,.26);
--border-soft:rgba(241,234,216,.12);
--ok:#8FBFA5; --warn:var(--ct-toro); --error:#D07680; --info:#8FA6D9;
--scrim:rgba(7,5,20,.72);
/* Type */
--font-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
--font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
--font-num:"Cormorant Garamond",Georgia,serif;
/* Space (8px base) */
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;--sp-11:192px;
/* Radius */
--r-1:2px;--r-2:4px;--r-3:10px;--r-full:999px;
/* Elevation */
--e-1:0 8px 32px rgba(7,5,20,.35);
--e-2:0 16px 56px rgba(7,5,20,.5);
--e-3:0 32px 96px rgba(7,5,20,.6);
--glow-gold:0 0 24px rgba(216,188,126,.18);
--glow-suisho:0 0 32px rgba(138,115,196,.28);
--glow-toro:0 0 40px rgba(232,167,92,.25);
/* Motion */
--ease-silk:cubic-bezier(.22,1,.36,1);
--ease-standard:cubic-bezier(.45,.05,.25,1);
--ease-exit:cubic-bezier(.4,0,1,1);
--dur-micro:220ms;--dur-ui:420ms;--dur-enter:900ms;--dur-scene:1600ms;
/* Layout */
--container:1120px;--container-wide:1440px;--container-read:680px;
--header-h:72px;
/* Moon defaults (scene 1) */
--moon-x:72vw; --moon-y:10vh; --moon-s:.5; --moon-o:.95;
}
/* Light = 和紙の朝 */
html[data-theme="light"]{
--bg:var(--ct-washi);
--surface-1:rgba(255,253,248,.8);
--surface-2:#FFFDF8;
--surface-3:#EFE7D4;
--text-1:var(--ct-sumi);
--text-2:rgba(38,34,51,.66);
--text-3:rgba(38,34,51,.42);
--primary:#5A4694; --primary-strong:#43336F;
--accent:#A8842F; --accent-l:#C1A04A;
--border-gold:rgba(138,112,56,.34);
--border-soft:rgba(38,34,51,.14);
--ok:#4E8A6A; --warn:#B97A2C; --error:#B04A56; --info:#4A5F9E;
--scrim:rgba(38,34,51,.45);
--e-1:0 8px 28px rgba(60,48,100,.12);
--e-2:0 16px 44px rgba(60,48,100,.16);
--e-3:0 28px 72px rgba(60,48,100,.2);
}
/* ------------------------------------------------------------
1. Base / Reset
------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;background:var(--bg);color:var(--text-1);
font-family:var(--font-body);font-weight:400;font-size:15px;
line-height:1.95;letter-spacing:.04em;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html[data-theme="light"] body{
background-image:url("data:image/svg+xml;utf8,");
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(138,115,196,.4);color:var(--ct-gekko)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent-l);outline-offset:3px;border-radius:var(--r-1)}
[hidden]{display:none !important}
/* ------------------------------------------------------------
2. Typography
------------------------------------------------------------ */
.ct-display-1{font-family:var(--font-display);font-weight:500;font-size:clamp(44px,6vw,76px);line-height:1.25;letter-spacing:.14em}
.ct-display-2,h1.ct{font-family:var(--font-display);font-weight:500;font-size:clamp(32px,4.2vw,52px);line-height:1.3;letter-spacing:.12em}
.ct-h1{font-family:var(--font-display);font-weight:500;font-size:clamp(26px,3vw,36px);line-height:1.4;letter-spacing:.1em}
.ct-h2{font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.5;letter-spacing:.08em}
.ct-h3{font-family:var(--font-body);font-weight:500;font-size:18px;line-height:1.6;letter-spacing:.06em}
.ct-lead{font-weight:300;font-size:17px;line-height:2;letter-spacing:.05em;color:var(--text-2)}
.ct-body-s{font-size:13px;line-height:1.8}
.ct-caption{font-size:12px;line-height:1.6;letter-spacing:.08em;color:var(--text-2)}
.ct-eyebrow{font-size:11px;font-weight:500;letter-spacing:.35em;color:var(--accent);text-transform:uppercase}
.ct-num{font-family:var(--font-num);font-weight:400;letter-spacing:.02em}
.ct-num-xl{font-family:var(--font-num);font-weight:300;font-size:clamp(40px,5vw,64px);line-height:1.1}
.ct-vertical{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.4em}
.ct-t2{color:var(--text-2)}.ct-t3{color:var(--text-3)}
.ct-gold{color:var(--accent-l)}
h1,h2,h3,h4{margin:0}
p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}
/* ------------------------------------------------------------
3. Layout
------------------------------------------------------------ */
.ct-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px}
.ct-container--wide{max-width:var(--container-wide)}
.ct-container--read{max-width:var(--container-read)}
.ct-section{padding-block:var(--sp-10)}
.ct-stack>*+*{margin-top:var(--sp-5)}
.ct-grid{display:grid;gap:24px}
.ct-grid--2{grid-template-columns:repeat(2,1fr)}
.ct-grid--3{grid-template-columns:repeat(3,1fr)}
.ct-grid--4{grid-template-columns:repeat(4,1fr)}
.ct-center{text-align:center}
.ct-page-offset{padding-top:calc(var(--header-h) + var(--sp-8))}
@media(min-width:768px){.ct-container{padding-inline:40px}}
@media(min-width:1080px){.ct-container{padding-inline:64px}}
@media(max-width:1079px){.ct-grid--4{grid-template-columns:repeat(2,1fr)}.ct-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ct-grid--2,.ct-grid--3,.ct-grid--4{grid-template-columns:1fr}.ct-section{padding-block:var(--sp-9)}}
/* Divider(hairline) */
.ct-divider{border:0;height:1px;margin:var(--sp-8) auto;max-width:var(--container);
background:linear-gradient(90deg,transparent,var(--border-gold) 30%,var(--border-gold) 70%,transparent)}
/* Surfaces */
.ct-glass{background:var(--surface-1);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
border:1px solid var(--border-gold);box-shadow:var(--e-1);position:relative}
.ct-glass::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:rgba(241,234,216,.1);pointer-events:none}
.ct-paper{background:var(--surface-2);border:1px solid var(--border-soft);box-shadow:var(--e-1)}
/* ------------------------------------------------------------
4. Buttons
------------------------------------------------------------ */
.ct-btn{
position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:48px;padding:0 28px;border-radius:var(--r-1);
font-weight:500;font-size:13px;letter-spacing:.14em;line-height:1;
color:var(--text-1);border:1px solid var(--border-soft);
transition:transform var(--dur-micro) var(--ease-standard),box-shadow var(--dur-micro),
border-color var(--dur-micro),color var(--dur-micro),background-color var(--dur-micro);
}
.ct-btn:hover{transform:translateY(-2px)}
.ct-btn:active{transform:translateY(0)}
.ct-btn--sm{min-height:40px;padding:0 24px;font-size:12px}
.ct-btn--lg{min-height:56px;padding:0 36px;font-size:14px}
.ct-btn--primary{border:0;color:var(--ct-gekko);
background:linear-gradient(135deg,var(--ct-suisho-d),var(--ct-suisho));box-shadow:var(--glow-suisho)}
.ct-btn--primary:hover{box-shadow:0 0 44px rgba(138,115,196,.42)}
.ct-btn--gold{border:1px solid var(--accent);color:var(--accent-l);background:transparent}
.ct-btn--gold::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
background:linear-gradient(135deg,var(--ct-kin-1),var(--ct-kin-2));opacity:0;transition:opacity var(--dur-micro)}
.ct-btn--gold:hover{color:var(--ct-shinya);box-shadow:var(--glow-gold)}
.ct-btn--gold:hover::before{opacity:1}
.ct-btn--ghost{border:0;padding:0 4px;min-height:32px;letter-spacing:.12em;color:var(--text-2)}
.ct-btn--ghost::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-micro) var(--ease-standard)}
.ct-btn--ghost:hover{color:var(--text-1);transform:none}
.ct-btn--ghost:hover::after{transform:scaleX(1)}
.ct-btn:disabled{opacity:.38;pointer-events:none}
.ct-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-full);
border:1px solid var(--border-soft);color:var(--text-2);transition:all var(--dur-micro)}
.ct-icon-btn:hover{color:var(--text-1);border-color:var(--border-gold);box-shadow:var(--glow-gold)}
.ct-btn.is-loading{color:transparent;pointer-events:none}
.ct-btn.is-loading::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;
border:1.5px solid transparent;border-top-color:var(--accent-l);animation:ct-rot 1.1s linear infinite}
@keyframes ct-rot{to{transform:rotate(360deg)}}
/* ------------------------------------------------------------
5. Fields / Forms
------------------------------------------------------------ */
.ct-field{display:block}
.ct-field+.ct-field{margin-top:var(--sp-6)}
.ct-field__label{display:block;font-size:12px;letter-spacing:.2em;color:var(--text-2);margin-bottom:var(--sp-2);transition:color var(--dur-micro)}
.ct-field__input,.ct-field select,.ct-field textarea{
width:100%;background:transparent;border:0;border-bottom:1px solid var(--border-soft);
padding:14px 2px;font-size:16px;letter-spacing:.04em;color:var(--text-1);border-radius:0;
background-image:linear-gradient(var(--accent-l),var(--accent-l));
background-repeat:no-repeat;background-position:center bottom;background-size:0% 1.5px;
transition:background-size var(--dur-ui) var(--ease-silk),border-color var(--dur-micro);
}
.ct-field__input::placeholder{color:var(--text-3)}
.ct-field__input:focus,.ct-field select:focus,.ct-field textarea:focus{background-size:100% 1.5px}
.ct-field:focus-within .ct-field__label{color:var(--accent-l)}
.ct-field textarea{border:1px solid var(--border-soft);border-radius:var(--r-2);padding:14px;min-height:120px;background-image:none;resize:vertical}
.ct-field textarea:focus{border-color:var(--accent)}
.ct-field__hint{display:block;margin-top:var(--sp-2);font-size:12px;color:var(--text-3)}
.ct-field.is-error .ct-field__input{border-bottom-color:var(--error);background-image:linear-gradient(var(--error),var(--error))}
.ct-field.is-error .ct-field__hint{color:var(--error)}
.ct-field select{appearance:none;-webkit-appearance:none;
background-image:linear-gradient(var(--accent-l),var(--accent-l)),
url("data:image/svg+xml;utf8,");
background-position:center bottom,right 4px center;background-size:0% 1.5px,16px}
.ct-field select:focus{background-size:100% 1.5px,16px}
html[data-theme="light"] .ct-field select{color:var(--text-1)}
.ct-field select option{color:#262233;background:#F6F1E6}
/* check / radio / switch */
.ct-check,.ct-radio{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font-size:14px}
.ct-check input,.ct-radio input,.ct-switch input{position:absolute;opacity:0;width:0;height:0}
.ct-check__box{width:20px;height:20px;border:1px solid var(--border-soft);border-radius:var(--r-1);
display:inline-grid;place-items:center;transition:all var(--dur-micro);flex:none}
.ct-check__box svg{width:12px;height:12px;stroke:var(--ct-gekko);stroke-width:2;fill:none;
stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset var(--dur-micro) var(--ease-standard)}
.ct-check input:checked+.ct-check__box{background:var(--primary);border-color:var(--primary)}
.ct-check input:checked+.ct-check__box svg{stroke-dashoffset:0}
.ct-check input:focus-visible+.ct-check__box{outline:2px solid var(--accent-l);outline-offset:3px}
.ct-radio__dot{width:20px;height:20px;border:1px solid var(--border-soft);border-radius:50%;display:inline-grid;place-items:center;transition:border-color var(--dur-micro);flex:none}
.ct-radio__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary-strong);transform:scale(0);transition:transform var(--dur-micro) var(--ease-standard)}
.ct-radio input:checked+.ct-radio__dot{border-color:var(--primary)}
.ct-radio input:checked+.ct-radio__dot::after{transform:scale(1)}
.ct-radio input:focus-visible+.ct-radio__dot{outline:2px solid var(--accent-l);outline-offset:3px}
.ct-switch{display:inline-flex;align-items:center;gap:12px;cursor:pointer}
.ct-switch__track{width:44px;height:24px;border-radius:var(--r-full);border:1px solid var(--border-soft);
position:relative;transition:all var(--dur-micro);flex:none}
.ct-switch__track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
background:var(--text-3);transition:all var(--dur-micro) var(--ease-standard)}
.ct-switch input:checked+.ct-switch__track{background:var(--surface-3);border-color:var(--accent)}
.ct-switch input:checked+.ct-switch__track::after{left:23px;background:var(--ct-gekko);box-shadow:0 0 10px rgba(241,234,216,.6)}
.ct-switch input:focus-visible+.ct-switch__track{outline:2px solid var(--accent-l);outline-offset:3px}
/* 選択カード型ラジオ(性別など) */
.ct-choice{display:flex;gap:12px;flex-wrap:wrap}
.ct-choice label{position:relative;cursor:pointer}
.ct-choice input{position:absolute;opacity:0}
.ct-choice__chip{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:var(--r-1);
border:1px solid var(--border-soft);color:var(--text-2);letter-spacing:.1em;font-size:13px;transition:all var(--dur-micro)}
.ct-choice input:checked+.ct-choice__chip{border-color:var(--primary);color:var(--text-1);box-shadow:var(--glow-suisho)}
.ct-choice input:focus-visible+.ct-choice__chip{outline:2px solid var(--accent-l);outline-offset:3px}
/* ------------------------------------------------------------
6. Cards
------------------------------------------------------------ */
.ct-card{padding:var(--sp-6);border-radius:var(--r-2)}
.ct-card--link{display:block;transition:transform var(--dur-ui) var(--ease-silk),box-shadow var(--dur-ui),border-color var(--dur-ui)}
.ct-card--link:hover{transform:translateY(-4px);box-shadow:var(--e-2);border-color:var(--border-gold)}
.ct-dcard{position:relative;overflow:hidden;padding-top:calc(var(--sp-6) + 2px)}
.ct-dcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--dcard-accent,var(--accent)) 30%,var(--dcard-accent,var(--accent)) 70%,transparent)}
.ct-dcard::after{content:"";position:absolute;top:18px;right:18px;width:14px;height:14px;border-radius:50%;
background:radial-gradient(circle at 35% 35%,var(--ct-gekko),rgba(241,234,216,.15) 70%);
opacity:0;transition:opacity var(--dur-ui)}
.ct-dcard:hover::after{opacity:.7}
.ct-dcard__icon{width:34px;height:34px;color:var(--dcard-accent,var(--accent-l));margin-bottom:var(--sp-4)}
.ct-dcard__name{font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:.1em;margin-bottom:var(--sp-2)}
.ct-dcard__copy{font-size:13px;line-height:1.8;color:var(--text-2);margin-bottom:var(--sp-4)}
.ct-dcard__meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--text-3);letter-spacing:.08em}
/* ------------------------------------------------------------
7. Header / Navigation / Footer
------------------------------------------------------------ */
.ct-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
display:flex;align-items:center;transition:background-color var(--dur-ui),backdrop-filter var(--dur-ui),border-color var(--dur-ui)}
.ct-header .ct-container{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--container-wide)}
.ct-header.is-scrolled{background:rgba(13,10,36,.72);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px);
border-bottom:1px solid var(--border-soft)}
html[data-theme="light"] .ct-header.is-scrolled{background:rgba(246,241,230,.82)}
.ct-brand{display:inline-flex;align-items:center;gap:12px}
.ct-brand__mark{width:30px;height:30px;color:var(--accent-l)}
.ct-brand__ja{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:.3em}
.ct-brand__en{font-family:var(--font-num);font-size:10px;letter-spacing:.35em;color:var(--text-3);margin-top:2px}
.ct-nav{display:flex;align-items:center;gap:var(--sp-6)}
.ct-navlink{position:relative;font-size:12px;letter-spacing:.25em;color:var(--text-2);padding:8px 2px;transition:color var(--dur-micro)}
.ct-navlink::after{content:"";position:absolute;left:50%;bottom:0;width:16px;height:1px;background:var(--accent-l);
transform:translateX(-50%) scaleX(0);opacity:0;transition:all var(--dur-micro) var(--ease-standard)}
.ct-navlink:hover{color:var(--text-1)}
.ct-navlink:hover::after,.ct-navlink.is-current::after{transform:translateX(-50%) scaleX(1);opacity:1}
.ct-navlink.is-current{color:var(--text-1)}
.ct-header__actions{display:flex;align-items:center;gap:var(--sp-4)}
.ct-menu-btn{display:none}
@media(max-width:1079px){
.ct-nav{display:none}
.ct-menu-btn{display:inline-grid}
.ct-header{height:60px}
:root{--header-h:60px}
}
.ct-footer{position:relative;background:var(--ct-shinya);color:rgba(241,234,216,.7);margin-top:var(--sp-10)}
html[data-theme="light"] .ct-footer{background:#221D33;}
.ct-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(200,138,160,.5) 35%,rgba(216,188,126,.6) 65%,transparent)}
.ct-footer__inner{padding:var(--sp-9) 24px var(--sp-8);max-width:var(--container);margin-inline:auto;
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:var(--sp-7)}
.ct-footer h4{font-size:12px;letter-spacing:.3em;color:var(--ct-kin-1);margin-bottom:var(--sp-4);font-weight:500}
.ct-footer a{display:block;font-size:13px;padding:6px 0;color:rgba(241,234,216,.6);transition:color var(--dur-micro)}
.ct-footer a:hover{color:var(--ct-gekko)}
.ct-footer__tate{writing-mode:vertical-rl;letter-spacing:.5em;font-family:var(--font-display);font-size:14px;color:rgba(241,234,216,.45);align-self:start}
.ct-footer__base{border-top:1px solid rgba(241,234,216,.1);padding:var(--sp-5) 24px;
display:flex;align-items:center;justify-content:space-between;max-width:var(--container);margin-inline:auto;
font-size:11px;letter-spacing:.15em;color:rgba(241,234,216,.4)}
@media(max-width:1079px){.ct-footer__inner{grid-template-columns:1fr 1fr}.ct-footer__tate{display:none}}
@media(max-width:640px){.ct-footer__inner{grid-template-columns:1fr}.ct-footer__base{flex-direction:column;gap:12px}}
/* ------------------------------------------------------------
8. Breadcrumb / Tabs / Accordion / Tooltip
------------------------------------------------------------ */
.ct-crumb{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.1em;color:var(--text-3);flex-wrap:wrap}
.ct-crumb a{color:var(--text-3);transition:color var(--dur-micro)}
.ct-crumb a:hover{color:var(--text-2)}
.ct-crumb li{display:flex;align-items:center;gap:12px;list-style:none}
.ct-crumb li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--accent)}
.ct-crumb [aria-current]{color:var(--text-1)}
ol.ct-crumb,ul.ct-crumb{margin:0;padding:0}
.ct-tabs{border-bottom:1px solid var(--border-soft);display:flex;gap:var(--sp-6)}
.ct-tab{position:relative;padding:14px 2px;font-size:13px;letter-spacing:.15em;color:var(--text-3);transition:color var(--dur-micro)}
.ct-tab::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent-l);
transform:scaleX(0);transform-origin:left;transition:transform 320ms var(--ease-standard)}
.ct-tab:hover{color:var(--text-2)}
.ct-tab[aria-selected="true"]{color:var(--text-1)}
.ct-tab[aria-selected="true"]::after{transform:scaleX(1)}
.ct-tabpanel{padding-top:var(--sp-5);animation:ct-panel 320ms var(--ease-silk)}
@keyframes ct-panel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ct-acc__item{border-bottom:1px solid var(--border-soft)}
.ct-acc__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:var(--sp-5) 2px;text-align:left;font-size:15px;letter-spacing:.06em;color:var(--text-1)}
.ct-acc__head .ct-acc__x{width:16px;height:16px;position:relative;flex:none;transition:transform var(--dur-micro) var(--ease-standard)}
.ct-acc__x::before,.ct-acc__x::after{content:"";position:absolute;background:var(--accent-l);inset:auto}
.ct-acc__x::before{width:16px;height:1px;top:7.5px;left:0}
.ct-acc__x::after{width:1px;height:16px;left:7.5px;top:0}
.ct-acc__item.is-open .ct-acc__x{transform:rotate(45deg)}
.ct-acc__body{overflow:hidden;max-height:0;transition:max-height var(--dur-ui) var(--ease-silk)}
.ct-acc__body>div{padding:0 2px var(--sp-5);color:var(--text-2);font-size:14px}
.ct-tip{position:relative}
.ct-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);
background:var(--surface-3);color:var(--text-1);font-size:12px;letter-spacing:.06em;line-height:1.5;
padding:8px 12px;border-radius:var(--r-1);border:1px solid var(--border-soft);box-shadow:var(--e-2);
white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-micro) 120ms,transform var(--dur-micro) 120ms;z-index:50}
.ct-tip:hover::after,.ct-tip:focus-visible::after{opacity:1;transform:translate(-50%,0)}
/* ------------------------------------------------------------
9. Badge / Tag / Avatar
------------------------------------------------------------ */
.ct-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:var(--r-full);
font-size:11px;letter-spacing:.12em;border:1px solid var(--border-soft);color:var(--text-2)}
.ct-badge--free{border-color:var(--ok);color:var(--ok)}
.ct-badge--hot{border-color:var(--warn);color:var(--warn)}
.ct-badge--new{border:0;background:var(--primary);color:var(--ct-gekko)}
.ct-badge--paid{border-color:var(--accent);color:var(--accent-l)}
.ct-tag{display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:var(--r-1);
font-size:12px;letter-spacing:.1em;border:1px solid var(--border-soft);color:var(--text-2);transition:all var(--dur-micro)}
a.ct-tag:hover,button.ct-tag:hover{border-color:var(--border-gold);color:var(--text-1)}
.ct-tag.is-selected{border-color:var(--primary);color:var(--text-1)}
.ct-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
border:1px solid var(--accent);background:var(--surface-3);
font-family:var(--font-display);font-size:16px;color:var(--text-1);overflow:hidden}
.ct-avatar--guest{border-color:var(--border-soft)}
.ct-avatar--sm{width:32px;height:32px;font-size:13px}
.ct-avatar--lg{width:56px;height:56px;font-size:22px}
/* ------------------------------------------------------------
10. Progress / Steps / Loading / Skeleton
------------------------------------------------------------ */
.ct-progress{height:2px;background:var(--border-soft);border-radius:var(--r-full);overflow:visible;position:relative}
.ct-progress__bar{height:100%;width:var(--value,0%);border-radius:inherit;position:relative;
background:linear-gradient(90deg,var(--ct-kin-3),var(--ct-kin-1));transition:width var(--dur-ui) var(--ease-silk)}
.ct-progress__bar::after{content:"";position:absolute;right:-2px;top:50%;width:4px;height:4px;border-radius:50%;
transform:translateY(-50%);background:var(--ct-kin-1);box-shadow:0 0 8px var(--ct-kin-1)}
.ct-steps{display:flex;margin:0;padding:0;list-style:none}
.ct-steps li{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;
font-size:11px;letter-spacing:.15em;color:var(--text-3)}
.ct-steps li::before{content:"";position:absolute;top:6px;left:calc(-50% + 12px);right:calc(50% + 12px);height:1px;
background:linear-gradient(90deg,transparent,var(--border-gold),transparent)}
.ct-steps li:first-child::before{display:none}
.ct-steps .ct-steps__dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--border-soft);background:transparent;transition:all var(--dur-ui)}
.ct-steps li.is-done{color:var(--text-2)}
.ct-steps li.is-done .ct-steps__dot{background:var(--ct-gekko);border-color:var(--ct-gekko)}
.ct-steps li.is-current{color:var(--text-1)}
.ct-steps li.is-current .ct-steps__dot{border-color:var(--accent-l);box-shadow:var(--glow-gold)}
.ct-spinner{display:inline-block;width:24px;height:24px;position:relative}
.ct-spinner::before{content:"";position:absolute;inset:0;border-radius:50%;
border:1.5px solid transparent;border-top-color:var(--accent-l);animation:ct-rot 1.2s linear infinite}
.ct-spinner::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ct-gekko);
animation:ct-phase 2.4s var(--ease-standard) infinite}
@keyframes ct-phase{0%{clip-path:inset(0 90% 0 0 round 50%)}50%{clip-path:inset(0 round 50%)}100%{clip-path:inset(0 0 0 90% round 50%)}}
.ct-loader{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:var(--ct-shinya);
transition:opacity .6s var(--ease-exit),visibility .6s}
.ct-loader.is-done{opacity:0;visibility:hidden}
.ct-loader__inner{display:grid;place-items:center;gap:20px;color:var(--text-2);font-size:12px;letter-spacing:.35em}
.ct-skel{background:var(--surface-3);border-radius:var(--r-1);animation:ct-fog 1.6s ease-in-out infinite}
@keyframes ct-fog{0%,100%{opacity:.35}50%{opacity:.7}}
/* ------------------------------------------------------------
11. Toast
------------------------------------------------------------ */
.ct-toast-stack{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:400;
display:flex;flex-direction:column;gap:12px;width:min(480px,90vw)}
.ct-toast{display:flex;align-items:center;gap:14px;padding:16px 24px;border-radius:var(--r-2);
background:var(--surface-1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid var(--border-soft);border-left:3px solid var(--info);box-shadow:var(--e-2);
font-size:13px;letter-spacing:.05em;opacity:0;transform:translateY(16px);
transition:opacity var(--dur-ui) var(--ease-silk),transform var(--dur-ui) var(--ease-silk)}
.ct-toast.is-in{opacity:1;transform:none}
.ct-toast--ok{border-left-color:var(--ok)}
.ct-toast--warn{border-left-color:var(--warn)}
.ct-toast--error{border-left-color:var(--error)}
/* ------------------------------------------------------------
12. Dialog / Drawer(Layer)
------------------------------------------------------------ */
.ct-layer{position:fixed;inset:0;z-index:300;visibility:hidden}
.ct-layer.is-open{visibility:visible}
.ct-layer__scrim{position:absolute;inset:0;background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
opacity:0;transition:opacity var(--dur-ui)}
.ct-layer.is-open .ct-layer__scrim{opacity:1}
.ct-dialog__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.97);
width:min(560px,92vw);max-height:86vh;overflow:auto;padding:var(--sp-7);
background:rgba(23,18,56,.78);backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px);
border:1px solid var(--border-gold);border-radius:var(--r-3);box-shadow:var(--e-3);
opacity:0;transition:opacity var(--dur-ui) var(--ease-silk),transform var(--dur-ui) var(--ease-silk)}
html[data-theme="light"] .ct-dialog__panel{background:rgba(255,253,248,.92)}
.ct-layer.is-open .ct-dialog__panel{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ct-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,88vw);
background:var(--surface-2);border-left:1px solid var(--border-gold);box-shadow:var(--e-3);
padding:var(--sp-7) var(--sp-6);overflow:auto;transform:translateX(100%);
transition:transform 480ms var(--ease-silk)}
.ct-layer.is-open .ct-drawer__panel{transform:none}
.ct-layer__close{position:absolute;top:16px;right:16px}
/* ------------------------------------------------------------
13. Timeline / Pagination / Table / Empty
------------------------------------------------------------ */
.ct-timeline{list-style:none;margin:0;padding:0 0 0 28px;position:relative}
.ct-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;
background:linear-gradient(180deg,transparent,var(--border-gold) 12%,var(--border-gold) 88%,transparent)}
.ct-timeline li{position:relative;padding:0 0 var(--sp-6)}
.ct-timeline li::before{content:"";position:absolute;left:-28px;top:6px;width:11px;height:11px;border-radius:50%;
border:1px solid var(--accent);background:var(--bg)}
.ct-timeline li.is-current::before{background:var(--ct-gekko);box-shadow:var(--glow-gold)}
.ct-timeline .ct-timeline__t{font-family:var(--font-num);font-size:15px;color:var(--accent-l);letter-spacing:.05em}
.ct-timeline h4{font-family:var(--font-display);font-weight:500;font-size:16px;letter-spacing:.1em;margin:4px 0 6px}
.ct-timeline p{font-size:13px;color:var(--text-2)}
.ct-pager{display:flex;align-items:center;justify-content:center;gap:6px}
.ct-pager a,.ct-pager button,.ct-pager span{display:inline-grid;place-items:center;min-width:44px;height:44px;
font-family:var(--font-num);font-size:16px;color:var(--text-2);border-radius:50%;border:1px solid transparent;
transition:all var(--dur-micro)}
.ct-pager a:hover{color:var(--text-1);border-color:var(--border-soft)}
.ct-pager [aria-current]{color:var(--text-1);border-color:var(--accent)}
.ct-pager .ct-pager__gap{color:var(--text-3)}
.ct-table{width:100%;border-collapse:collapse;font-size:14px}
.ct-table th{font-size:11px;letter-spacing:.2em;color:var(--text-3);font-weight:500;text-align:left;
padding:12px 16px;border-bottom:1px solid var(--border-gold)}
.ct-table td{padding:16px;border-bottom:1px solid var(--border-soft)}
.ct-table td.ct-num,.ct-table th.ct-num{text-align:right}
.ct-table tr:hover td{background:rgba(36,28,82,.25)}
html[data-theme="light"] .ct-table tr:hover td{background:rgba(90,70,148,.05)}
.ct-empty{display:grid;place-items:center;gap:var(--sp-4);padding:var(--sp-9) var(--sp-5);text-align:center;color:var(--text-2)}
.ct-empty svg{width:44px;height:44px;color:var(--text-3)}
/* ------------------------------------------------------------
14. Reveal / Parallax
------------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(28px);
transition:opacity var(--dur-enter) var(--ease-silk),transform var(--dur-enter) var(--ease-silk)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="scale"]{transform:scale(.96)}
[data-reveal="scale"].is-in{transform:scale(1)}
/* ------------------------------------------------------------
15. World(十一景の演出)
------------------------------------------------------------ */
.ct-sky{position:fixed;inset:0;z-index:-4;
background:linear-gradient(180deg,#171238 0%,#0D0A24 45%,#070514 100%)}
.ct-sky::before,.ct-sky::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity 3.2s var(--ease-standard)}
.ct-sky::before{background:radial-gradient(120% 90% at 50% 110%,#12093A 0%,#070514 60%)}
.ct-sky::after{background:linear-gradient(180deg,#0D0A24 0%,#3A2E5E 34%,#8A5E86 58%,#C88AA0 74%,#F0C9A8 100%)}
body[data-scene="8"] .ct-sky::before,
body[data-scene="9"] .ct-sky::before,
body[data-scene="10"] .ct-sky::before{opacity:.9}
body[data-scene="11"] .ct-sky::after{opacity:1}
#ct-stars,#ct-petals{position:fixed;inset:0;pointer-events:none}
#ct-stars{z-index:-3}
#ct-petals{z-index:1}
.ct-moon{position:fixed;top:0;left:0;width:40vmin;aspect-ratio:1;border-radius:50%;z-index:-2;pointer-events:none;
background:radial-gradient(circle at 38% 32%,#FFFAEE 0%,#F3E9CE 42%,#E6D5AC 68%,rgba(230,213,172,0) 70%);
opacity:var(--moon-o);
transform:translate(var(--moon-x),var(--moon-y)) scale(var(--moon-s));
transition:transform var(--dur-scene) var(--ease-silk),opacity var(--dur-scene)}
.ct-moon::before{content:"";position:absolute;inset:-32%;border-radius:50%;
background:radial-gradient(circle,rgba(241,231,203,.32) 0%,rgba(241,231,203,0) 62%);
animation:ct-halo 14s ease-in-out infinite}
.ct-moon::after{content:"";position:absolute;inset:0;border-radius:50%;
background:
radial-gradient(14% 14% at 62% 38%,rgba(180,160,120,.28),transparent 70%),
radial-gradient(10% 10% at 40% 58%,rgba(180,160,120,.22),transparent 70%),
radial-gradient(7% 7% at 55% 66%,rgba(180,160,120,.2),transparent 70%)}
@keyframes ct-halo{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
/* 月の景別プリセット */
body[data-scene="1"]{--moon-x:72vw;--moon-y:10vh;--moon-s:.5;--moon-o:.95}
body[data-scene="2"]{--moon-x:58vw;--moon-y:6vh;--moon-s:.62;--moon-o:.95}
body[data-scene="3"]{--moon-x:16vw;--moon-y:8vh;--moon-s:.5;--moon-o:.9}
body[data-scene="4"]{--moon-x:50vw;--moon-y:5vh;--moon-s:.66;--moon-o:1}
body[data-scene="5"]{--moon-x:30vw;--moon-y:14vh;--moon-s:1;--moon-o:1}
body[data-scene="6"]{--moon-x:8vw;--moon-y:8vh;--moon-s:.44;--moon-o:.85}
body[data-scene="7"]{--moon-x:76vw;--moon-y:8vh;--moon-s:.4;--moon-o:.8}
body[data-scene="8"]{--moon-x:70vw;--moon-y:12vh;--moon-s:.38;--moon-o:.55}
body[data-scene="9"]{--moon-x:47vw;--moon-y:6vh;--moon-s:.3;--moon-o:.5}
body[data-scene="10"]{--moon-x:47vw;--moon-y:10vh;--moon-s:.24;--moon-o:.4}
body[data-scene="11"]{--moon-x:12vw;--moon-y:6vh;--moon-s:.3;--moon-o:.22}
/* 霧 */
.ct-mist{position:fixed;left:-10vw;right:-10vw;bottom:-12vh;height:52vh;z-index:-1;pointer-events:none}
.ct-mist i{position:absolute;bottom:0;width:64vw;height:34vh;border-radius:50%;
background:radial-gradient(closest-side,rgba(214,208,255,.09),transparent);filter:blur(48px)}
.ct-mist i:nth-child(1){left:-6vw;animation:ct-mist1 26s ease-in-out infinite}
.ct-mist i:nth-child(2){left:34vw;bottom:6vh;animation:ct-mist2 34s ease-in-out infinite}
.ct-mist i:nth-child(3){left:58vw;animation:ct-mist3 44s ease-in-out infinite}
@keyframes ct-mist1{0%,100%{transform:translateX(0)}50%{transform:translateX(9vw)}}
@keyframes ct-mist2{0%,100%{transform:translateX(0)}50%{transform:translateX(-11vw)}}
@keyframes ct-mist3{0%,100%{transform:translateX(0)}50%{transform:translateX(7vw)}}
/* 景セクション */
.ct-scene{min-height:100dvh;position:relative;display:grid;place-items:center;
padding:22vh 24px;overflow:hidden}
.ct-scene__inner{position:relative;z-index:2;max-width:760px;text-align:center}
.ct-sleeve{position:absolute;right:4vw;top:50%;transform:translateY(-50%);z-index:2;
writing-mode:vertical-rl;letter-spacing:.5em;font-family:var(--font-display);
font-size:13px;color:var(--text-3);display:flex;align-items:center;gap:16px}
.ct-sleeve::before{content:"";width:1px;height:64px;background:linear-gradient(180deg,transparent,var(--border-gold),transparent)}
@media(max-width:1079px){.ct-sleeve{display:none}}
.ct-scene__no{font-family:var(--font-num);font-size:12px;letter-spacing:.4em;color:var(--accent);margin-bottom:var(--sp-4)}
/* 鳥居・灯籠・湖・天の川・滝・龍 */
.ct-art{position:absolute;inset:0;z-index:0;pointer-events:none;display:grid;place-items:end center}
.ct-art--torii svg{width:min(520px,78vw);height:auto;margin-bottom:-2px;color:#3A1620;
filter:drop-shadow(0 0 40px rgba(196,85,63,.12))}
.ct-art--torii .ct-torii-edge{stroke:var(--ct-shu);stroke-opacity:.55}
.ct-art--lanterns{display:flex;align-items:flex-end;justify-content:space-between;padding:0 8vw}
.ct-lantern{width:clamp(40px,7vw,84px);color:#241626}
.ct-lantern .fire{fill:var(--ct-toro);filter:drop-shadow(0 0 18px rgba(232,167,92,.65));
animation:ct-fire 5s ease-in-out infinite}
.ct-lantern:nth-child(2) .fire{animation-delay:1.2s}
.ct-lantern:nth-child(3) .fire{animation-delay:2.6s}
.ct-lantern:nth-child(4) .fire{animation-delay:3.4s}
@keyframes ct-fire{0%,100%{opacity:.75}50%{opacity:1}}
.ct-lake{position:absolute;left:0;right:0;bottom:0;height:38vh;z-index:0;
background:linear-gradient(180deg,rgba(61,79,138,0) 0%,rgba(61,79,138,.16) 18%,rgba(13,10,36,.9) 100%)}
.ct-lake::before{content:"";position:absolute;left:50%;bottom:6%;width:12vmin;height:26vh;transform:translateX(-50%);
background:radial-gradient(50% 50% at 50% 50%,rgba(241,231,203,.35),transparent 70%);
filter:blur(6px);animation:ct-lake 8s ease-in-out infinite}
@keyframes ct-lake{0%,100%{opacity:.5;transform:translateX(-50%) scaleY(1)}50%{opacity:.85;transform:translateX(-50%) scaleY(1.06)}}
.ct-milkyway{position:absolute;inset:-20% -30%;z-index:0;transform:rotate(-15deg);
background:linear-gradient(90deg,transparent 18%,rgba(108,86,168,.32) 40%,rgba(180,135,201,.38) 50%,rgba(233,183,204,.28) 60%,transparent 82%);
mix-blend-mode:screen;filter:blur(2px)}
.ct-falls{position:absolute;inset:0;z-index:0;overflow:hidden}
.ct-falls i{position:absolute;top:-30%;width:2px;height:46%;border-radius:2px;
background:linear-gradient(180deg,transparent,rgba(241,234,216,.4),rgba(143,166,217,.25),transparent);
animation:ct-fall linear infinite}
.ct-falls i:nth-child(1){left:36%;animation-duration:7s}
.ct-falls i:nth-child(2){left:42%;width:4px;animation-duration:9s;animation-delay:-3s}
.ct-falls i:nth-child(3){left:47%;animation-duration:8s;animation-delay:-5s}
.ct-falls i:nth-child(4){left:54%;width:3px;animation-duration:11s;animation-delay:-2s}
.ct-falls i:nth-child(5){left:61%;animation-duration:9.5s;animation-delay:-6s}
@keyframes ct-fall{to{transform:translateY(260%)}}
.ct-dragon{width:min(720px,88vw);margin-inline:auto;color:var(--ct-kin-1)}
.ct-dragon path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 10px rgba(216,188,126,.35))}
.ct-dragon.is-drawn path{transition:stroke-dashoffset 6s var(--ease-standard);stroke-dashoffset:0}
.ct-dragon .eye{fill:currentColor;stroke:none;opacity:0;transition:opacity 1s 5.4s}
.ct-dragon.is-drawn .eye{opacity:1}
/* Hero(一景) */
.ct-hero__title{margin:0 0 var(--sp-5)}
.ct-hero__title small{display:block;font-family:var(--font-num);font-size:clamp(12px,1.4vw,15px);
letter-spacing:.5em;color:var(--accent-l);margin-bottom:var(--sp-4);font-weight:400}
.ct-scroll-cue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;
display:grid;justify-items:center;gap:10px;color:var(--text-3);font-size:10px;letter-spacing:.4em}
.ct-scroll-cue::after{content:"";width:1px;height:56px;
background:linear-gradient(180deg,var(--accent-l),transparent);animation:ct-cue 2.4s var(--ease-standard) infinite}
@keyframes ct-cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* 朝(light)では夜の演出を畳む */
html[data-theme="light"] .ct-sky,
html[data-theme="light"] #ct-stars,
html[data-theme="light"] #ct-petals,
html[data-theme="light"] .ct-moon,
html[data-theme="light"] .ct-mist{display:none}
/* ------------------------------------------------------------
16. Utilities
------------------------------------------------------------ */
.ct-mt-2{margin-top:var(--sp-2)}.ct-mt-4{margin-top:var(--sp-4)}.ct-mt-5{margin-top:var(--sp-5)}
.ct-mt-6{margin-top:var(--sp-6)}.ct-mt-7{margin-top:var(--sp-7)}.ct-mt-8{margin-top:var(--sp-8)}
.ct-mb-4{margin-bottom:var(--sp-4)}.ct-mb-5{margin-bottom:var(--sp-5)}.ct-mb-6{margin-bottom:var(--sp-6)}
.ct-flex{display:flex;gap:var(--sp-4);align-items:center}
.ct-flex--between{justify-content:space-between}
.ct-flex--wrap{flex-wrap:wrap}
.ct-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;clip-path:inset(50%);overflow:hidden}
/* ------------------------------------------------------------
17. Reduced Motion(§10.3 完全対応)
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important}
[data-reveal]{opacity:1 !important;transform:none !important}
.ct-dragon path{stroke-dashoffset:0}
.ct-dragon .eye{opacity:1}
}
/* ------------------------------------------------------------
18. アプリ画面 追補(V1実装用・参考画像準拠のUI変奏)
------------------------------------------------------------ */
/* 箱型フィールド(神域フォーム: 参考S__26927122) */
.ct-field--box .ct-field__input,.ct-field--box select{
border:1px solid var(--border-soft);border-radius:12px;background:rgba(23,18,56,.35);
padding:16px 18px;background-image:none}
.ct-field--box .ct-field__input:focus,.ct-field--box select:focus{
border-color:var(--accent);box-shadow:var(--glow-gold);background-size:0}
html[data-theme="light"] .ct-field--box .ct-field__input,
html[data-theme="light"] .ct-field--box select{background:rgba(255,253,248,.7)}
.ct-date-triple{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
.ct-choice--grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ct-choice--grid .ct-choice__chip{width:100%;justify-content:center;min-height:52px;border-radius:12px}
/* 星石オーブ(結果ヒーロー: 参考S__26927121) */
.ct-orb{position:relative;width:min(280px,64vw);aspect-ratio:1;margin-inline:auto;border-radius:50%;
background:
radial-gradient(circle at 32% 26%,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 18%),
radial-gradient(circle at 50% 45%,#B4A3E0 0%,#8A73C4 46%,#5B4694 78%,#3A2C66 100%);
box-shadow:0 24px 80px rgba(90,70,148,.45), inset 0 -18px 40px rgba(20,12,50,.55)}
.ct-orb svg{position:absolute;inset:18%;opacity:.9}
.ct-orb::after{content:"";position:absolute;inset:-14%;border-radius:50%;
background:radial-gradient(circle,rgba(180,163,224,.28),transparent 62%);z-index:-1}
.ct-hairline-title{display:flex;align-items:center;gap:18px;justify-content:center;
font-size:14px;letter-spacing:.18em;color:var(--text-2)}
.ct-hairline-title::before,.ct-hairline-title::after{content:"";flex:0 0 56px;height:1px;
background:linear-gradient(90deg,transparent,var(--border-gold));}
.ct-hairline-title::after{background:linear-gradient(90deg,var(--border-gold),transparent)}
.ct-pilltags{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ct-pilltags .ct-tag{border-radius:var(--r-full);height:36px;padding:0 18px}
/* 有料ぼかし(§A-4 先頭300字+ぼかし) */
.ct-paywall{position:relative;max-height:9.5em;overflow:hidden}
.ct-paywall::after{content:"";position:absolute;inset:auto 0 0 0;height:7em;
background:linear-gradient(180deg,transparent,var(--bg) 92%)}
.ct-locknote{display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:12px;letter-spacing:.15em}
/* 鑑定本文の紙面 */
.ct-scroll-body{font-size:15.5px;line-height:2.15;letter-spacing:.05em}
.ct-scroll-body p{margin:0 0 1.6em}
.ct-report-h{font-family:var(--font-display);font-weight:500;font-size:20px;letter-spacing:.14em;
display:flex;align-items:center;gap:14px;margin:0 0 18px}
.ct-report-h::before{content:"";width:26px;height:1px;background:var(--accent)}
/* 管理画面 quiet variant(§18: 和紙固定・演出なし・密度+1) */
.ct-quiet{font-size:14px}
.ct-quiet .ct-section{padding-block:var(--sp-6)}
.ct-quiet .ct-card{padding:var(--sp-5)}
.ct-admin-side{position:fixed;inset:0 auto 0 0;width:220px;background:var(--surface-2);
border-right:1px solid var(--border-soft);padding:24px 16px;overflow:auto}
.ct-admin-main{margin-left:220px;padding:32px}
.ct-admin-side a{display:block;padding:9px 12px;border-radius:var(--r-2);font-size:13px;color:var(--text-2)}
.ct-admin-side a.is-current,.ct-admin-side a:hover{background:var(--surface-3);color:var(--text-1)}
@media(max-width:900px){.ct-admin-side{position:static;width:auto;border-right:0}.ct-admin-main{margin:0;padding:20px}}
/* フォームエラー要約 */
.ct-errorbox{border:1px solid var(--error);border-radius:var(--r-2);padding:14px 18px;color:var(--error);font-size:13px}
@media print{
.ct-header,.ct-footer,.ct-noprint{display:none !important}
body{background:#fff;color:#222}
}
/* ------------------------------------------------------------
19. P3.1 追補: 不自然な改行の防止(スマホ最優先)
------------------------------------------------------------ */
.ct-display-1,.ct-display-2,.ct-h1,.ct-h2,.ct-hero__title{text-wrap:balance}
.ct-lead,.ct-caption{text-wrap:pretty}
.ct-brand__ja,.ct-brand__en,.ct-navlink{white-space:nowrap}
.ct-btn{white-space:nowrap}
@media(max-width:640px){
.ct-display-1{font-size:clamp(34px,9vw,42px)}
.ct-display-2{font-size:clamp(27px,7.6vw,31px)}
}