:root{--night:#1d1633;--night2:#2a2145;--moon:#d9b45c;--mist:#cfc6e8;--white:#f3effa;--line:rgba(217,180,92,.22)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{background:var(--night);color:var(--white);font-family:'Noto Sans JP',sans-serif;line-height:1.95;font-size:16px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(1px 1px at 12% 20%,rgba(243,239,250,.6),transparent),radial-gradient(1px 1px at 78% 12%,rgba(243,239,250,.45),transparent),radial-gradient(1.5px 1.5px at 55% 42%,rgba(217,180,92,.5),transparent),radial-gradient(1px 1px at 30% 70%,rgba(243,239,250,.35),transparent),radial-gradient(1.5px 1.5px at 8% 88%,rgba(217,180,92,.35),transparent)}
a{color:var(--moon)}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;position:relative}
.narrow{max-width:760px}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(29,22,51,.93);backdrop-filter:blur(8px);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:'Shippori Mincho',serif;font-weight:800;font-size:1.15rem;letter-spacing:.14em;color:var(--white);text-decoration:none}
.logo .m{color:var(--moon);margin-right:.4em}
.nav ul{display:flex;gap:22px;list-style:none;font-size:.83rem}
.nav ul a{color:var(--mist);text-decoration:none;transition:color .2s}
.nav ul a:hover{color:var(--moon)}
@media(max-width:760px){.nav ul{gap:14px;font-size:.75rem}}
main{min-height:60vh}
article{padding:48px 0 72px}
.crumb{font-size:.74rem;color:var(--mist);margin-bottom:18px}
.crumb a{color:var(--mist);text-decoration:none}
h1{font-family:'Shippori Mincho',serif;font-weight:800;font-size:clamp(1.45rem,4vw,1.95rem);line-height:1.65;letter-spacing:.05em;margin-bottom:12px}
.meta{font-size:.77rem;color:var(--mist);padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:30px}
h2{font-family:'Shippori Mincho',serif;font-weight:800;font-size:1.28rem;letter-spacing:.09em;margin:46px 0 16px;padding-bottom:9px;border-bottom:1px solid var(--line)}
h2::before{content:"☾ ";color:var(--moon)}
h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.04rem;margin:30px 0 10px;color:var(--moon)}
p{margin-bottom:1.15em}
.profile{background:var(--night2);border:1px solid var(--line);border-radius:12px;padding:24px 26px;margin:28px 0}
.profile table{width:100%;border-collapse:collapse;font-size:.9rem}
.profile th{text-align:left;color:var(--moon);font-weight:600;padding:7px 12px 7px 0;width:8.5em;vertical-align:top;font-family:'Shippori Mincho',serif}
.profile td{padding:7px 0;border-bottom:1px dashed rgba(217,180,92,.15)}
.profile tr:last-child td{border-bottom:none}
.ad{border:1px dashed rgba(217,180,92,.4);border-radius:8px;padding:26px;text-align:center;color:var(--mist);font-size:.72rem;letter-spacing:.2em;margin:38px 0;background:rgba(42,33,69,.5)}
.linkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:18px 0}
.linkgrid a{display:block;border:1px solid var(--line);border-radius:10px;padding:15px;text-align:center;text-decoration:none;background:var(--night2);transition:border-color .2s,transform .2s}
.linkgrid a:hover{border-color:var(--moon);transform:translateY(-2px)}
.linkgrid .d{font-family:'Shippori Mincho',serif;font-weight:800;color:var(--white)}
.linkgrid .t{font-size:.73rem;color:var(--mist)}
.next{border:1px solid var(--moon);border-radius:12px;padding:28px;margin-top:46px;text-align:center;background:linear-gradient(170deg,rgba(217,180,92,.1),transparent)}
.next h3{margin-top:0}
.next p{color:var(--mist);font-size:.87rem}
.btn{display:inline-block;background:var(--moon);color:var(--night);font-weight:700;font-size:.88rem;padding:12px 30px;border-radius:999px;text-decoration:none;margin-top:6px;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.prevnext{display:flex;justify-content:space-between;gap:12px;margin-top:34px;font-size:.85rem}
.prevnext a{text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:10px 16px;color:var(--mist)}
.prevnext a:hover{border-color:var(--moon);color:var(--moon)}
.score{font-family:'Shippori Mincho',serif;font-size:2.6rem;font-weight:800;color:var(--moon);text-align:center;margin:8px 0}
.score small{font-size:1rem;color:var(--mist)}
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--mist);font-size:.75rem;text-align:center}
footer a{color:var(--mist)}
footer .note{font-size:.68rem;opacity:.75;margin-top:8px}
/* トップ用 */
.hero{padding:64px 0 40px;text-align:center}
.hero .date{font-family:'Shippori Mincho',serif;color:var(--moon);letter-spacing:.3em;font-size:.85rem;margin-bottom:18px}
.hero h1{font-size:clamp(1.6rem,4.4vw,2.6rem);line-height:1.7}
.lede{color:var(--mist);max-width:32em;margin:18px auto 0;font-size:.93rem}
section{padding:56px 0}
.sec-title{font-family:'Shippori Mincho',serif;font-weight:800;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:.12em;text-align:center;margin-bottom:8px}
.sec-sub{text-align:center;color:var(--mist);font-size:.85rem;margin-bottom:34px}
.sec-sub::before,.sec-sub::after{content:" ─── ";color:var(--moon);opacity:.6}
.rank{max-width:640px;margin:0 auto;list-style:none;counter-reset:r}
.rank li{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:10px;background:var(--night2);padding:13px 18px;margin-bottom:9px}
.rank li::before{counter-increment:r;content:counter(r);font-family:'Shippori Mincho',serif;font-weight:800;font-size:1.25rem;color:var(--moon);min-width:1.4em;text-align:center}
.rank li:first-child{border-color:var(--moon);box-shadow:0 0 18px rgba(217,180,92,.15)}
.rank .rs{font-size:1.3rem}
.rank .rn a{font-family:'Shippori Mincho',serif;font-weight:600;color:var(--white);text-decoration:none;font-size:.95rem}
.rank .rt{font-size:.78rem;color:var(--mist);margin-left:auto;text-align:right;max-width:52%}
@media(max-width:600px){.rank .rt{display:none}}
.tarot{margin:44px auto 0;max-width:640px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(170deg,var(--night2),var(--night));padding:40px 28px;text-align:center;position:relative}
.tarot::before,.tarot::after{content:"✦";position:absolute;color:var(--moon);opacity:.6;font-size:.8rem}
.tarot::before{top:14px;left:18px}.tarot::after{bottom:14px;right:18px}
.tarot h2{border:none;padding:0;margin:0 0 6px;font-size:1.2rem;letter-spacing:.2em;color:var(--moon);text-align:center}
.tarot h2::before{content:""}
.tarot .sub{color:var(--mist);font-size:.82rem;margin-bottom:26px}
.card-stage{perspective:900px;height:225px;display:flex;justify-content:center;align-items:center;margin-bottom:22px}
.tcard{width:138px;height:220px;position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.7,.2,1);cursor:pointer;border:none;background:none;padding:0}
.tcard.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.back{background:repeating-linear-gradient(45deg,var(--night2),var(--night2) 8px,#332a52 8px,#332a52 16px);border:1.5px solid var(--moon);color:var(--moon);font-family:'Shippori Mincho',serif;letter-spacing:.2em;font-size:.8rem}
.back .sym{font-size:2.2rem}
.front{background:#f5f0e4;color:#2a2145;border:1.5px solid var(--moon);transform:rotateY(180deg);padding:12px}
.front .glyph{font-size:2.5rem;line-height:1}
.front .cname{font-family:'Shippori Mincho',serif;font-weight:800;font-size:1rem;letter-spacing:.1em}
.front .cnum{font-size:.66rem;letter-spacing:.3em;color:#8a7a4a}
#tarot-result{min-height:3.4em;color:var(--mist);font-size:.9rem;max-width:26em;margin:0 auto}
#tarot-result strong{color:var(--moon)}
.draw-btn{margin-top:16px;background:var(--moon);color:var(--night);border:none;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:.88rem;padding:12px 34px;border-radius:999px;cursor:pointer;transition:transform .15s}
.draw-btn:hover{transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.tcard{transition:none}}
.db-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.db{border:1px solid var(--line);border-radius:12px;padding:28px 24px;background:var(--night2);transition:border-color .2s,transform .2s;display:block;text-decoration:none}
.db:hover{border-color:var(--moon);transform:translateY(-3px)}
.db .g{font-size:1.8rem;color:var(--moon)}
.db h3{margin:10px 0 6px;font-size:1.06rem;letter-spacing:.1em;color:var(--white)}
.db p{color:var(--mist);font-size:.83rem}
.db .cnt{display:inline-block;margin-top:12px;font-size:.7rem;color:var(--moon);border:1px solid var(--line);padding:2px 12px;border-radius:999px}
.month-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:18px 0 30px}
.month-tabs a{display:block;text-align:center;border:1px solid var(--line);border-radius:8px;padding:8px 4px;text-decoration:none;color:var(--mist);font-size:.85rem}
.month-tabs a:hover{border-color:var(--moon);color:var(--moon)}
.daygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px;margin:14px 0 34px}
.daygrid a{display:block;text-align:center;border:1px solid var(--line);border-radius:8px;padding:9px 2px;text-decoration:none;color:var(--white);font-size:.86rem;background:var(--night2)}
.daygrid a:hover{border-color:var(--moon)}
.matrix{overflow-x:auto;margin:20px 0}
.matrix table{border-collapse:collapse;font-size:.8rem;min-width:640px;width:100%}
.matrix th,.matrix td{border:1px solid var(--line);padding:7px 6px;text-align:center}
.matrix th{background:var(--night2);font-family:'Shippori Mincho',serif;font-weight:600;font-size:.74rem}
.matrix td a{text-decoration:none;font-weight:700}