:root { --bg: #FAFAF8; --bg-2: #F4F2EC; --sumi: #ECEAE2; --ink: #1A1A1A; --ink-soft: #3A3A3A; --ink-mute: #555555; --ink-dim: var(--ink-mute); --kin: #B8976A; --kin-deep: #6E5A2E; --kin-pale: #876B3F; --shu: #E0654E; --washi: #FFFFFF; --washi-2: #F7F4EC; --line: rgba(26, 26, 26, .16); --line-soft: rgba(26, 26, 26, .08); --header-bg: rgba(250, 250, 248, .82); --footer-bg: rgba(244, 242, 236, .60); --bar-bg: rgba(255, 255, 255, .94); --tnav-bg: rgba(184, 151, 106, .06); --font-sans: "Inter", "Noto Sans JP", sans-serif; --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif; --font-display: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", serif; --font-num: var(--font-sans); --font-mute: var(--font-sans); --lh-lead: 1.95; --measure: 34rem; --measure-hero: 50rem; --w-form: 420px; --fs-micro: 12.5px; --fs-body: 16px; --fs-lead: 17px; --fs-h2: 33px; --fs-h1: 42px; --rhythm-block: clamp(48px, 13vw, 64px); --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --r-sharp: 4px; --r-card: 14px; --r-key: 20px; --sh-1: 0 1px 0 var(--line-soft); --sh-2: 0 6px 24px rgba(40, 33, 20, .08); --sh-key: 0 18px 48px rgba(40, 33, 20, .14); --glow-1: 0 0 0 1px rgba(184, 151, 106, .12), 0 8px 28px rgba(184, 151, 106, .16); --glow-lav: rgba(212, 191, 163, .26); --glow-blue: rgba(190, 165, 120, .14); --glow-warm: rgba(228, 200, 150, .18); --gold-l: #D8BE92; --gold-m: #B8976A; --gold-d: #9C7F52; --grad-gold: linear-gradient(135deg, var(--gold-l) 0%, var(--gold-m) 46%, var(--gold-d) 100%); --sheen-gold: inset 0 1px 0 rgba(255, 253, 247, .32), inset 0 -1px 0 rgba(70, 58, 32, .22); --metal-edge-gold: rgba(110, 90, 46, .42); --silver-l: #E2DFD9; --silver-m: #C7C3BC; --silver-d: #ABA79F; --grad-silver: linear-gradient(135deg, var(--silver-l) 0%, var(--silver-m) 48%, var(--silver-d) 100%); --sheen-silver: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 -1px 0 rgba(90, 86, 78, .20); --metal-edge-silver: rgba(110, 106, 98, .40); --mk: var(--accent, var(--w-accent, var(--kin))); --mk-l: color-mix(in srgb, var(--mk) 72%, #ffffff 28%); --mk-m: var(--mk); --mk-d: color-mix(in srgb, var(--mk) 80%, #1a1a1a 20%); --grad-key: linear-gradient(135deg, var(--mk-l) 0%, var(--mk-m) 50%, var(--mk-d) 100%); --grad-key-aqua: linear-gradient(135deg, color-mix(in srgb, var(--mk) 60%, #d8f3ff 40%) 0%, var(--mk) 52%, color-mix(in srgb, var(--mk) 78%, #0a2230 22%) 100%); --sheen-key: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .16); --gold: var(--kin); --accent: var(--kin); --type-c1: var(--kin); --type-c2: var(--kin-pale); --w-text: 720px; --w-wide: 1120px; --w-gutter: clamp(20px, 5vw, 40px); --max: var(--w-text); --max-wide: var(--w-wide); --ease: cubic-bezier(.2, .6, .2, 1); --t: .35s var(--ease); --mon-kin: url('data:image/svg+xml;utf8,'); --night-0: #070c16; --night-1: #0a1020; --night-2: #0d1426; --night-3: #12203c; --night-field: radial-gradient(140% 100% at 50% -12%, var(--night-3) 0%, var(--night-1) 46%, var(--night-0) 100%); --star-warm: #F5E9C8; --star-cool: #EAF0FB; --particle-gold: rgba(220, 190, 130, .90); --nebula: rgba(58, 74, 120, .22); --nebula-warm: rgba(150, 120, 70, .10); --aur-teal: rgba( 62, 156, 134, .40); --aur-violet: rgba(135, 120, 190, .40); --aur-rose: rgba(184, 85, 112, .38); --aur-gold: rgba(200, 168, 120, .12); --aur-blur: 52px; --grad-gold-lustre: linear-gradient(120deg, #B8976A 0%, #D8BE92 36%, #FBF3E0 50%, #D8BE92 64%, #9C7F52 100%); --edge-gild: 0 0 0 1px var(--metal-edge-gold), 0 0 0 3px rgba(212, 191, 163, .14); --glow-night: 0 0 0 1px rgba(212, 191, 163, .16), 0 18px 46px rgba(0, 0, 0, .46); --glass-night: rgba(20, 28, 48, .66); --glass-night-2: rgba(28, 38, 62, .52); } body.world-body, body[class*="world-"] { --bg: #FAFAF8; --bg-2: #F4F2EC; --sumi: #ECEAE2; --ink: #1A1A1A; --ink-soft: #3A3A3A; --ink-mute: #555555; --ink-dim: #555555; --kin: #B8976A; --kin-deep: #6E5A2E; --kin-pale: #876B3F; --shu: #E0654E; --shu-cta: #D8543C; --washi: #FFFFFF; --washi-2: #F7F4EC; --line: rgba(26, 26, 26, .16); --line-soft: rgba(26, 26, 26, .08); --header-bg: rgba(250, 250, 248, .82); --footer-bg: rgba(244, 242, 236, .60); --bar-bg: rgba(255, 255, 255, .94); --tnav-bg: rgba(184, 151, 106, .06); --sh-2: 0 6px 24px rgba(40, 33, 20, .08); --sh-key: 0 18px 48px rgba(40, 33, 20, .14); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: radial-gradient(120% 70% at 78% -8%, var(--glow-lav) 0%, transparent 48%), radial-gradient(100% 60% at 12% 4%, var(--glow-blue) 0%, transparent 52%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%) fixed, var(--bg); line-height: 1.9; font-size: 16.5px; letter-spacing: .02em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.night-page { background: var(--night-0); --ink: #eaf0fb; --ink-soft: #c4cee0; --ink-dim: #b8c2d6; --ink-mute: #b8c2d6; --kin-pale: #D4BFA3; --line: rgba(212, 191, 163, .26); --line-soft: rgba(212, 191, 163, .14); --washi: var(--glass-night); --washi-2: var(--glass-night-2); --header-bg: rgba(10, 16, 32, .72); --footer-bg: rgba(8, 13, 24, .66); --bar-bg: rgba(14, 20, 38, .90); color: var(--ink); } .sky-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .sky-field::before { content: ""; position: absolute; inset: 0; background: var(--night-field); } .night-page > .site-header, .night-page > main, .night-page > .site-footer { position: relative; z-index: 1; } .sky-field .nebula { position: absolute; inset: -15%; background: radial-gradient(38% 30% at 26% 22%, var(--nebula) 0%, transparent 60%), radial-gradient(30% 26% at 78% 68%, var(--nebula-warm) 0%, transparent 62%); filter: blur(24px); opacity: .9; animation: nebulaDrift 60s ease-in-out infinite; } @keyframes nebulaDrift { 0% { transform: translate3d(-2%, 0, 0) scale(1); } 50% { transform: translate3d(3%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 0, 0) scale(1); } } .sky-field .aurora { position: absolute; inset: -12% -10% auto -10%; height: 66%; pointer-events: none; } .sky-field .aur { position: absolute; inset: 0; opacity: .30; filter: blur(var(--aur-blur)); } .sky-field .aur-1 { background: radial-gradient(78% 66% at 22% 42%, var(--aur-teal) 0%, var(--aur-teal) 16%, transparent 74%); animation: aurBreath 54s ease-in-out infinite; } .sky-field .aur-2 { background: radial-gradient(76% 62% at 78% 34%, var(--aur-violet) 0%, var(--aur-violet) 15%, transparent 72%); animation: aurBreath 66s ease-in-out -22s infinite; } .sky-field .aur-3 { background: radial-gradient(74% 60% at 50% 54%, var(--aur-rose) 0%, var(--aur-rose) 15%, transparent 72%); animation: aurBreath 78s ease-in-out -44s infinite; } .sky-field .aurora::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; background: radial-gradient(80% 55% at 50% -10%, var(--aur-gold) 0%, transparent 60%); filter: blur(var(--aur-blur)); opacity: .12; animation: aurBreath 90s ease-in-out -12s infinite; } @keyframes aurBreath { 0%,100% { opacity: .30; transform: translate3d(-3%, 0, 0); } 50% { opacity: 1; transform: translate3d( 3%, -1.5%, 0); } } @media (max-width: 640px) { .sky-field { --aur-blur: 30px; } .sky-field .aur-3 { display: none; } .sky-field .aurora::after { display: none; } } .sky-field .stars { position: absolute; inset: 0; } .sky-field .stars-a { background-image: radial-gradient(1.4px 1.4px at 12% 18%, var(--star-cool) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 68% 12%, var(--star-warm) 50%, transparent 51%), radial-gradient(1.1px 1.1px at 84% 46%, var(--star-cool) 50%, transparent 51%), radial-gradient(1.3px 1.3px at 34% 62%, var(--star-warm) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 6% 52%, var(--star-warm) 50%, transparent 51%), radial-gradient(1.1px 1.1px at 52% 22%, var(--star-cool) 50%, transparent 51%); animation: twinkle 5.5s ease-in-out infinite; } .sky-field .stars-b { background-image: radial-gradient(1.1px 1.1px at 22% 40%, var(--star-cool) 50%, transparent 51%), radial-gradient(1.0px 1.0px at 56% 30%, var(--star-warm) 50%, transparent 51%), radial-gradient(1.2px 1.2px at 90% 74%, var(--star-cool) 50%, transparent 51%), radial-gradient(1.0px 1.0px at 44% 86%, var(--star-warm) 50%, transparent 51%), radial-gradient(1.1px 1.1px at 72% 54%, var(--star-warm) 50%, transparent 51%), radial-gradient(1.0px 1.0px at 30% 14%, var(--star-cool) 50%, transparent 51%); animation: twinkle 7.5s ease-in-out 1.2s infinite; } .sky-field .stars-c { background-image: radial-gradient(0.9px 0.9px at 8% 70%, var(--star-cool) 50%, transparent 51%), radial-gradient(1.0px 1.0px at 74% 88%, var(--star-warm) 50%, transparent 51%), radial-gradient(0.9px 0.9px at 50% 8%, var(--star-cool) 50%, transparent 51%), radial-gradient(0.9px 0.9px at 18% 92%, var(--star-warm) 50%, transparent 51%), radial-gradient(1.0px 1.0px at 94% 20%, var(--star-cool) 50%, transparent 51%), radial-gradient(0.9px 0.9px at 62% 66%, var(--star-warm) 50%, transparent 51%); animation: twinkle 9s ease-in-out .6s infinite; } @keyframes twinkle { 0%, 100% { opacity: .30; } 50% { opacity: .85; } } .sky-field .dust { position: absolute; inset: 0; } .sky-field .dust i { position: absolute; bottom: -6px; width: 2px; height: 2px; border-radius: 50%; background: var(--particle-gold); box-shadow: 0 0 4px var(--particle-gold); opacity: 0; animation: dustRise var(--dur, 12s) linear var(--dly, 0s) infinite; } .sky-field .dust i:nth-child(1) { left: 14%; --dur: 11s; --dly: 0s; } .sky-field .dust i:nth-child(2) { left: 27%; --dur: 14s; --dly: 2.4s; } .sky-field .dust i:nth-child(3) { left: 41%; --dur: 12s; --dly: 5.1s; } .sky-field .dust i:nth-child(4) { left: 55%; --dur: 15s; --dly: 1.2s; } .sky-field .dust i:nth-child(5) { left: 63%; --dur: 11s; --dly: 6.4s; } .sky-field .dust i:nth-child(6) { left: 76%; --dur: 13s; --dly: 3.3s; } .sky-field .dust i:nth-child(7) { left: 85%; --dur: 14s; --dly: 7.7s; } .sky-field .dust i:nth-child(8) { left: 92%; --dur: 12s; --dly: 4.0s; } .sky-field .dust i:nth-child(9) { left: 8%; --dur: 13s; --dly: 8.5s; } .sky-field .dust i:nth-child(10) { left: 20%; --dur: 15s; --dly: 3.8s; } .sky-field .dust i:nth-child(11) { left: 34%; --dur: 11s; --dly: 9.6s; } .sky-field .dust i:nth-child(12) { left: 49%; --dur: 14s; --dly: 6.9s; } .sky-field .dust i:nth-child(13) { left: 70%; --dur: 12s; --dly: 1.9s; } .sky-field .dust i:nth-child(14) { left: 81%; --dur: 15s; --dly: 5.6s; } @keyframes dustRise { 0% { transform: translateY(0); opacity: 0; } 14% { opacity: .7; } 86% { opacity: .5; } 100% { transform: translateY(-46px); opacity: 0; } } .sky-field .shootingstar { position: absolute; top: 12%; left: -10%; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--star-warm), transparent); opacity: 0; animation: shoot 24s var(--ease) infinite; } .sky-field .shootingstar-2 { top: 34%; left: -10%; width: 92px; animation: shoot 31s var(--ease) 6s infinite; } @keyframes shoot { 0%, 86% { opacity: 0; transform: translate(0, 0); } 88% { opacity: .9; } 100% { opacity: 0; transform: translate(60vw, 26vh); } } @media (prefers-reduced-motion: reduce) { .sky-field .nebula, .sky-field .stars, .sky-field .dust i { animation: none; } .sky-field .stars { opacity: .55; } .sky-field .dust i { opacity: .4; transform: none; } .sky-field .shootingstar { animation: none; opacity: 0; } .sky-field .aur { animation: none; } .sky-field .aur-1 { opacity: .5; transform: translate3d(-2%, 0, 0); } .sky-field .aur-2 { opacity: .42; transform: translate3d( 1%, 0, 0); } .sky-field .aur-3 { opacity: .34; transform: none; } .sky-field .aurora::after { animation: none; opacity: .22; } } .sec-title, .hero h1, .brand, .r-name, .premium-title, .q-text, .faq-item summary { font-feature-settings: "palt" 1; } .lead, .sec-sub, .note, .promise p, .faq-item p, .premium-lede, .teaser-lead { font-feature-settings: "palt" 0; } .free-lead-price span, .score-big .num, .paid-item-price { font-feature-settings: "tnum" 1, "palt" 0; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .wrap { width: 100%; max-width: var(--w-text); margin: 0 auto; padding: 0 var(--w-gutter); } .wrap-wide { max-width: var(--w-wide); } .wrap-stage { width: 100%; max-width: none; margin: 0 auto; padding: 0; } .wrap-stage > .stage-inner { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--w-gutter); } .form-narrow { max-width: var(--w-form); margin-left: auto; margin-right: auto; } @media (min-width: 768px) { #quiz > .wrap, #result > .wrap, #intro.diag-intro > .wrap { max-width: var(--w-wide); } #quiz > .wrap > .q-card, #quiz > .wrap > #birthStep, #result > .wrap > .result-card { max-width: var(--w-text); margin-inline-start: 0; margin-inline-end: auto; } } .site-header { position: sticky; top: 0; z-index: 20; background: var(--header-bg); -webkit-backdrop-filter: saturate(1.15) blur(8px); backdrop-filter: saturate(1.15) blur(8px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 58px; } .brand { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 9px; font-feature-settings: "palt" 1; } .brand::before { content: ""; width: 22px; height: 22px; flex: 0 0 auto; background: var(--mon-kin) center / contain no-repeat; } .brand span { color: var(--ink); } .ent-badge { font-size: 11px; color: var(--ink-soft); border: 1px solid var(--line); padding: 5px 11px; border-radius: 12px; white-space: nowrap; letter-spacing: .04em; } .header-link { color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 600; border: 1px solid var(--line); padding: 8px 15px; border-radius: 12px; white-space: nowrap; min-height: 38px; display: inline-flex; align-items: center; transition: color var(--t), border-color var(--t); } .header-link:hover { color: var(--ink); border-color: var(--kin); } .header-link.active { color: #1A1A1A; background: var(--grad-gold); border-color: var(--metal-edge-gold); box-shadow: var(--sheen-gold); } .site-header .wrap .ent-badge { margin-left: auto; } .site-header .nav { display: flex; align-items: center; gap: 10px; } @media (max-width: 560px) { .site-header .wrap { height: 52px; padding: 0 13px; } .brand { font-size: 16px; letter-spacing: .03em; gap: 7px; } .brand::before { width: 19px; height: 19px; } .site-header .nav { gap: 12px; } .header-link { border: none; background: none; padding: 10px 1px; border-radius: 0; font-size: 12.5px; min-height: 44px; } .header-link.active { color: var(--kin-pale); background: none; } .ent-badge { padding: 4px 8px; font-size: 10px; } } @media (max-width: 360px) { .brand { font-size: 15px; } .site-header .nav { gap: 9px; } .header-link { font-size: 12px; } .ent-badge { font-size: 9.5px; padding: 3px 7px; } } .hero { position: relative; overflow: hidden; padding: 40px 0 0; text-align: left; } .hero::after { content: ""; display: block; height: 1px; margin-top: 48px; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); } .hero::before { content: ""; position: absolute; z-index: 0; top: -110px; right: -50px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, var(--glow-lav) 0%, var(--glow-blue) 38%, transparent 72%); filter: blur(8px); pointer-events: none; } .world-body .hero::before { background: radial-gradient(circle, var(--glow-lav) 0%, var(--glow-blue) 38%, transparent 72%); } .hero-inner { position: relative; z-index: 2; } @media (max-width: 380px) { .world-hero .hero-inner::after, .portal-hero .hero-inner::after { width: 24px; height: 24px; opacity: .55; } } .hero h1 .hl { display: inline; } .hero h1 .hl { position: relative; --brush: var(--kin); --brush-hi: var(--kin-pale); } .hero h1 .hl::after { content: ""; position: absolute; left: -.04em; right: -.12em; bottom: -.02em; height: .15em; background: linear-gradient(90deg, transparent 0%, var(--brush) 14%, var(--brush-hi) 52%, var(--brush) 84%, transparent 100%); border-radius: 40% 60% 50% 50% / 100%; transform: rotate(-.6deg); transform-origin: left center; opacity: .9; pointer-events: none; } .world-hero h1 .hl { --brush: var(--w-accent); --brush-hi: var(--mk-l); } .world-hero .eyebrow::after, .world-body .eyebrow::after { display: none; } .world-hero::after, .portal-hero::after, .world-body .hero::after { display: none; } .eyebrow { display: inline-block; color: var(--kin-pale); font-weight: 600; letter-spacing: .18em; font-size: 12px; margin: 0 0 18px; padding: 0; border: 0; border-radius: 0; } .eyebrow::after { content: ""; display: block; width: 34px; height: 1.5px; margin-top: 9px; background: linear-gradient(90deg, var(--kin), transparent); } .eyebrow.center { display: block; text-align: center; } .premium-hero .eyebrow { background: rgba(7, 12, 22, .5); padding: 6px 12px; border-radius: 12px; margin-left: -12px; } .hero h1 { font-family: var(--font-serif); font-weight: 700; font-feature-settings: "palt" 1; font-size: clamp(28px, 8vw, var(--fs-h1)); line-height: 1.4; letter-spacing: .04em; margin: 0 0 16px; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; } .hl { color: var(--kin-pale); } .lead { color: var(--ink-soft); margin: 0 0 26px; max-width: var(--measure); font-size: var(--fs-lead); line-height: 1.95; } .note { color: var(--ink-dim); font-size: var(--fs-micro); line-height: 1.75; margin-top: 18px; max-width: var(--measure); } .note strong { color: var(--ink-soft); } .note, .tiny, .signoff, .bf-hint, .q-sub, .q-count, .hero-links, .lead, .disclaimer, .legal-links, .card-tag, .r-eyebrow, .section-sub, .tnav-head, .paid-list, .paid-menu-note { font-family: var(--font-mute); font-feature-settings: "palt" 1; letter-spacing: .03em; } .hero-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; font-size: 14px; color: var(--ink-dim); } .hero-links a { display: inline-flex; align-items: center; min-height: 42px; box-sizing: border-box; padding: 9px 19px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink); background: var(--washi-2); border: 1.5px solid var(--kin); border-radius: 12px; text-decoration: none; box-shadow: 0 2px 8px rgba(70,58,32,.10); transition: color .15s, background .15s, transform .15s, box-shadow .15s; } .hero-links a:hover, .hero-links a:focus-visible { color: #1A1A1A; background: var(--grad-gold); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(70,58,32,.16); } .hero-links .sep { display: none; } .hero-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 20% 24%, var(--kin-pale) 50%, transparent), radial-gradient(1.2px 1.2px at 78% 30%, var(--kin) 50%, transparent), radial-gradient(1px 1px at 44% 70%, var(--kin-pale) 50%, transparent); opacity: .4; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 16px 32px; border-radius: 12px; line-height: 1.25; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 700; letter-spacing: .02em; text-decoration: none; text-align: center; cursor: pointer; border: 1.5px solid transparent; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow var(--t), transform .12s var(--ease); } .btn:active { transform: translateY(1px); } .btn-lg { min-height: 60px; padding: 18px 40px; font-size: var(--fs-lead); border-radius: 14px; } @media (max-width: 430px) { .btn-lg { padding-left: 14px; padding-right: 14px; font-size: var(--fs-body); } } .btn-sm { min-height: 44px; padding: 10px 20px; font-size: 14px; border-radius: 10px; } .btn .btn-arrow { transition: transform .25s var(--ease); } .btn:hover .btn-arrow { transform: translateX(4px); } .btn-primary { color: #1A1A1A; --btn-bg-image: url("../img/ui/btn-primary.webp"); background-color: var(--gold-m); background-image: var(--btn-bg-image, var(--grad-gold)); background-size: cover; background-position: center; box-shadow: var(--sheen-gold), 0 6px 18px rgba(110, 90, 46, .30); border-color: var(--metal-edge-gold); position: relative; overflow: hidden; } .btn-primary:hover { background-image: var(--btn-bg-image, linear-gradient(135deg, #E2CCA2 0%, #C2A074 46%, #A8895E 100%)); transform: translateY(-1px); box-shadow: var(--sheen-gold), 0 9px 26px rgba(110, 90, 46, .38); } .btn-primary:active { background-image: var(--btn-bg-image, linear-gradient(135deg, #CDB184 0%, #AC8F60 50%, #8E7348 100%)); transform: translateY(1px); box-shadow: var(--sheen-gold), 0 3px 9px rgba(110, 90, 46, .34); } @media (max-width: 412px) { .btn { padding-left: 14px; padding-right: 14px; letter-spacing: 0; font-size: 15px; } } .btn-frame { --frame-l: var(--gold-l); --frame-d: var(--gold-d); min-height: 68px; padding: 20px 40px; border-radius: 10px; font-size: 17.5px; font-weight: 700; letter-spacing: .06em; border: 1px solid var(--frame-d); position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1.5px var(--frame-d), 0 0 0 3px var(--night-0), 0 0 0 4px var(--frame-l), inset 0 1px 0 rgba(255, 250, 235, .22), inset 0 -12px 24px rgba(0, 0, 0, .42), 0 14px 30px rgba(0, 0, 0, .50), 0 3px 8px rgba(0, 0, 0, .40); transition: box-shadow var(--t), transform .12s var(--ease), background-image .25s var(--ease); } .btn-frame:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--frame-d), 0 0 0 3px var(--night-0), 0 0 0 4px var(--gold-l), 0 0 0 6px color-mix(in srgb, var(--gold-l) 30%, transparent), inset 0 1px 0 rgba(255, 250, 235, .30), inset 0 -12px 24px rgba(0, 0, 0, .38), 0 18px 40px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .42); } .btn-frame:active { transform: translateY(1px); box-shadow: 0 0 0 1.5px var(--frame-d), 0 0 0 3px var(--night-0), 0 0 0 4px var(--frame-d), inset 0 2px 9px rgba(0, 0, 0, .60), 0 6px 14px rgba(0, 0, 0, .48); } .btn-frame:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 6px; } @media (max-width: 430px) { .btn-frame { padding-left: 18px; padding-right: 18px; font-size: 16.5px; } } .btn-frame { color: var(--star-warm); background-color: var(--night-1); background-image: var(--btn-bg-image, linear-gradient(180deg, color-mix(in srgb, var(--night-3) 84%, var(--gold-d) 16%) 0%, var(--night-2) 44%, var(--night-0) 100%)); background-size: cover; background-position: center; } .btn-frame:hover { background-image: var(--btn-bg-image, linear-gradient(180deg, color-mix(in srgb, var(--night-3) 70%, var(--gold-d) 30%) 0%, var(--night-2) 42%, var(--night-1) 100%)); } .btn-frame.is-gold { color: #1A1A1A; --frame-l: color-mix(in srgb, var(--gold-l) 78%, #ffffff 22%); --btn-bg-image: url("../img/ui/btn-cta.webp"); background-color: var(--gold-m); background-image: var(--btn-bg-image, var(--grad-gold)); box-shadow: 0 0 0 1.5px var(--frame-d), 0 0 0 3px var(--night-0), 0 0 0 4px var(--frame-l), inset 0 1px 0 rgba(255, 250, 235, .48), inset 0 -9px 18px rgba(120, 92, 50, .26), 0 14px 30px rgba(0, 0, 0, .50), 0 3px 8px rgba(0, 0, 0, .40); } .btn-frame.is-gold:hover { background-image: var(--btn-bg-image, linear-gradient(135deg,#E6D2AA 0%,#C8A678 46%,#AE9064 100%)); box-shadow: 0 0 0 1.5px var(--frame-d), 0 0 0 3px var(--night-0), 0 0 0 4px var(--gold-l), 0 0 0 6px color-mix(in srgb, var(--gold-l) 30%, transparent), inset 0 1px 0 rgba(255, 250, 235, .55), inset 0 -9px 18px rgba(120, 92, 50, .22), 0 18px 40px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .42); } .btn-frame.is-gold:active { background-image: var(--btn-bg-image, linear-gradient(135deg,#CDB184 0%,#AC8F60 50%,#8E7348 100%)); } @media (prefers-reduced-motion: reduce) { .btn-frame { transition: none; } .btn-frame:hover, .btn-frame:active { transform: none; } } .btn-secondary, .btn-outline, .btn-soft { color: var(--ink); background: transparent; border: 1.5px solid var(--kin); font-weight: 700; } .btn-secondary:hover, .btn-outline:hover, .btn-soft:hover { background: rgba(184, 151, 106, .12); border-color: var(--kin-pale); } .night-page .btn-secondary, .night-page .btn-outline, .night-page .btn-soft { color: var(--star-warm); } .btn-tertiary, .btn-ghost { min-height: 44px; padding: 8px 6px; background: none; border: none; color: var(--ink-soft); border-radius: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; margin: 0; text-decoration: underline; text-decoration-color: var(--kin); text-underline-offset: 4px; } .btn-tertiary:hover, .btn-ghost:hover { color: var(--ink); background: none; text-decoration-color: var(--kin-pale); } .btn-tertiary .btn-label, .btn-ghost .btn-label { text-decoration: none; border-bottom: 1px solid var(--kin); padding-bottom: 2px; } :focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; border-radius: 2px; } .btn:focus-visible, .q-choice:focus-visible, .w-tab:focus-visible, .concern-pick:focus-visible, .persona-pick:focus-visible { outline-offset: 3px; } .quiz { padding-block: var(--s6); padding-inline: 0; } .progress { height: 3px; background: var(--line-soft); border-radius: 12px; overflow: hidden; margin: 0 0 24px; } .progress-bar { height: 100%; width: 0; background: var(--kin); border-radius: 12px; transition: width .45s var(--ease); } .q-card { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-key); padding: 28px 22px; box-shadow: var(--sh-2); } .q-count { color: var(--kin-pale); font-size: 12px; font-weight: 600; letter-spacing: .18em; margin: 0 0 10px; } .q-text { font-family: var(--font-serif); font-weight: 600; font-size: clamp(19px, 5vw, 23px); margin: 0 0 6px; line-height: 1.5; letter-spacing: .04em; } .q-sub { color: var(--ink-dim); font-size: 13.5px; margin: 0 0 18px; } .q-choice { display: block; width: 100%; text-align: left; margin: 12px 0 0; padding: 17px 18px; min-height: 56px; background: var(--washi-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); font: inherit; font-size: 16px; cursor: pointer; transition: border-color var(--t), background var(--t), transform .12s var(--ease); } .q-choice:hover { border-color: var(--kin); background: rgba(184, 151, 106, .06); transform: translateY(-1px); } .q-back { margin-top: 18px; background: none; border: none; color: var(--ink-dim); font: inherit; cursor: pointer; padding: 6px 4px; min-height: 44px; } .q-back:hover { color: var(--ink-soft); } .birth-form { margin-top: 10px; } #birthForm { scroll-margin-top: 120px; } .bf-field { margin: 0 0 18px; } .bf-fieldset { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 14px 14px; margin: 0 0 18px; min-width: 0; } .bf-fieldset legend.bf-label, .bf-fieldset > .bf-label { padding: 0 8px; margin-left: -2px; } .bf-more .bf-fieldset { border: 0; padding: 0; } .bf-label { display: block; color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: .08em; margin: 0 0 10px; padding: 0; } .bf-req { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 12px; background: rgba(184, 151, 106, .14); color: var(--kin-deep); font-size: 11px; letter-spacing: .08em; font-weight: 700; } .bf-hint { color: var(--ink-mute); font-size: 13.5px; line-height: 1.75; margin: 8px 0 0; } .school-pick { border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 14px 12px; margin: 0 0 18px; min-width: 0; } .school-pick > legend.bf-label { padding: 0 8px; margin-left: -2px; } .school-opts { display: flex; gap: 10px; flex-wrap: wrap; } .school-opt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 11px 38px; position: relative; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--washi-2); transition: border-color var(--t), background var(--t); } .school-opt input { position: absolute; left: 13px; top: 14px; accent-color: var(--kin); width: 16px; height: 16px; cursor: pointer; } .school-opt:hover { border-color: rgba(184, 151, 106, .45); } .school-opt:has(input:checked) { border-color: var(--kin); background: rgba(184, 151, 106, .08); } .school-opt:has(input:focus-visible) { outline: 2px solid var(--kin); outline-offset: 2px; } .school-opt-name { font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--ink); } .school-opt-sub { font-size: 11.5px; line-height: 1.55; color: var(--ink-mute); letter-spacing: .02em; } .bf-remember { display: flex; align-items: center; gap: 9px; margin: 2px 0 16px; font-size: 13px; color: var(--ink-soft); letter-spacing: .02em; line-height: 1.5; cursor: pointer; } .bf-remember input { width: 17px; height: 17px; accent-color: var(--kin); cursor: pointer; flex: none; } .bf-remember:hover { color: var(--ink); } .bf-reentry { margin: 8px 0 2px; opacity: .9; } .bf-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .bf-actions .btn { min-width: 0; } .bf-pay-note { color: var(--ink-mute); margin-top: 8px; } .bf-input { width: 100%; padding: 13px 14px; min-height: 48px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--washi-2); color: var(--ink); font-family: var(--font-sans); font-size: 16px; letter-spacing: .02em; transition: border-color var(--t); } .bf-select:hover, .bf-input:hover { border-color: rgba(184, 151, 106, .4); } .bf-input:focus { outline: 2px solid var(--kin); outline-offset: 2px; border-color: var(--kin); box-shadow: 0 0 0 3px rgba(184, 151, 106, .12); } .bf-select { width: 100%; padding: 12px 14px; min-height: 48px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--washi-2); color: var(--ink); font-family: var(--font-sans); font-size: 16px; letter-spacing: .02em; cursor: pointer; transition: border-color var(--t); appearance: auto; } .bf-select:focus { outline: 2px solid var(--kin); outline-offset: 2px; border-color: var(--kin); box-shadow: 0 0 0 3px rgba(184, 151, 106, .12); } .bf-select.is-error { border-color: var(--shu); } .bf-select-wide { width: 100%; } .birth-row { display: flex; gap: 10px; } .birth-row .bf-sublabel { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .1em; } .birth-row .bf-select option:disabled { color: var(--ink-dim); } .birth-row-time .bf-sublabel:first-child { flex: 1.9; } .birth-row label { color: var(--ink-soft); font-size: 13px; letter-spacing: .06em; } .birth-row input:focus { box-shadow: 0 0 0 3px rgba(184, 151, 106, .12); } .birth-form > .birth-row { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 14px 14px; } .birth-form > .birth-row label { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--ink-soft); } .birth-form > .birth-row input { width: 100%; padding: 13px 14px; min-height: 48px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--washi-2); color: var(--ink); font-size: 16px; } .birth-form > .birth-row input:focus { outline: 2px solid var(--kin); outline-offset: 2px; border-color: var(--kin); box-shadow: 0 0 0 3px rgba(184, 151, 106, .12); } .birth-form .btn { width: 100%; margin-top: 8px; } .form-error { color: var(--shu); font-size: 13px; margin: 12px 0 0; } .bf-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; } .bf-more > summary { list-style: none; cursor: pointer; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; letter-spacing: .03em; padding: 6px 2px; display: flex; align-items: center; gap: 8px; transition: color var(--t); } .bf-more > summary::-webkit-details-marker { display: none; } .bf-more > summary::before { content: "＋"; color: var(--kin-deep); font-weight: 700; font-size: 15px; line-height: 1; transition: transform var(--t); } .bf-more[open] > summary::before { content: "−"; } .bf-more > summary:hover { color: var(--ink); } .bf-more > summary:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; border-radius: 6px; } .bf-more-body { padding-top: 14px; } .result { padding-block: var(--s6); padding-inline: 0; } .result-card { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-key); padding: 34px 22px; position: relative; overflow: hidden; box-shadow: var(--sh-key); } .result-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-key); } .r-eyebrow { color: var(--ink-dim); letter-spacing: .14em; font-size: 12px; margin: 6px 0 6px; } .sample-letter-card { border-left: 3px solid var(--type-c1, var(--kin)); } .sample-letter-card .letter-body { margin: 10px 0 4px; } .sample-letter-card .letter-p { font-family: var(--font-serif); color: var(--ink); font-size: 15.5px; line-height: 2.05; margin: 0 0 14px; text-align: justify; text-justify: inter-character; } .sample-letter-card .letter-p:last-child { margin-bottom: 0; } .sample-letter-card .sample-letter-note { margin-top: 14px; color: var(--ink-dim); } .r-name { font-family: var(--font-serif); font-weight: 700; font-feature-settings: "palt" 1; font-size: clamp(36px, 10.5vw, 54px); line-height: 1.28; letter-spacing: .02em; margin: 0 0 10px; } .r-name small { display: block; font-family: var(--font-sans); font-size: .26em; color: var(--ink-soft); font-weight: 400; letter-spacing: .42em; text-indent: .42em; margin-top: 10px; } .star-mark { display: inline-block; width: 48px; height: 48px; margin: 0 0 6px; color: var(--type-c1); } .star-mark svg { width: 100%; height: 100%; display: block; } .r-subtitle { display: flex; align-items: center; gap: 12px; font-family: var(--font-serif); font-weight: 500; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.5; letter-spacing: .04em; color: var(--ink); margin: 0 0 14px; } .r-subtitle::before, .r-subtitle::after { content: ""; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, transparent, var(--mk-l), var(--mk-m), var(--mk-d), transparent); opacity: .5; } .r-second { flex: 0 1 auto; } .r-emblem { color: var(--type-c1, var(--ink)); font-weight: 600; white-space: nowrap; } .r-catch { color: var(--ink-soft); font-size: 16px; margin: 0 0 16px; } body.world-hinata #result .r-name, body.world-aoi #result .r-name, body.world-miu #result .r-name, body.world-butler #result .r-name { font-size: clamp(19px, 5vw, 24px); line-height: 1.5; letter-spacing: .03em; font-weight: 600; margin: 0 0 4px; } body.world-hinata #result .r-catch, body.world-aoi #result .r-catch, body.world-miu #result .r-catch, body.world-butler #result .r-catch { font-family: var(--font-serif); font-weight: 700; color: var(--type-c1); font-size: clamp(23px, 6.4vw, 32px); line-height: 1.5; letter-spacing: .01em; margin: 0 0 18px; } .sec-title, .r-name, .r-catch, .r-subtitle, .premium-title, .solo-title, .astro-sign-name, .astro-oracle, .q-text, .faq-item summary { text-wrap: balance; } .lead, .sec-sub, .r-greet, .r-section p, .astro-read p, .premium-lede, .teaser-lead, .note, .diag-intro p { text-wrap: pretty; } .chara-standee { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 14px; } .chara-avatar { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 6px 22px rgba(0,0,0,.18), inset 0 2px 6px rgba(255,255,255,.35); } .chara-avatar svg { width: 44px; height: 44px; display: block; opacity: .92; } .chara-prep { font-size: 11.5px; letter-spacing: .14em; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 12px; padding: 3px 11px; background: var(--washi-2); } .chara-portrait { width: 120px; height: auto; border-radius: 14px; display: block; } .r-greet { color: var(--ink-soft); font-size: 14.5px; line-height: 1.85; margin: 0 0 14px; } .r-ouen p { color: var(--ink); } .r-color-swatch { box-shadow: 0 6px 22px rgba(0,0,0,.16), inset 0 2px 6px rgba(255,255,255,.3); } .confidence { display: inline-flex; align-items: center; gap: 8px; background: var(--washi-2); border: 1px solid var(--line); border-radius: 12px; padding: 7px 14px; font-size: 13.5px; color: var(--ink-soft); } .confidence b { color: var(--kin-deep); font-size: 14.5px; font-family: var(--font-serif); letter-spacing: .04em; } .r-desc { margin: 18px 0 6px; color: var(--ink); } .r-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .r-section h4 { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--ink); letter-spacing: .06em; } .r-lights { list-style: none; padding: 0; margin: 0; } .r-lights li { padding: 6px 0 6px 20px; color: var(--ink); position: relative; } .r-lights li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 1px; background: var(--kin); } .r-match { list-style: none; padding: 0; margin: 0; } .r-match li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .r-match li:last-child { border-bottom: none; } .r-match .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: 0 0 auto; } .r-match .res { margin-left: auto; color: var(--kin-pale); font-size: 13px; font-weight: 600; font-family: var(--font-num); } .destiny p { color: var(--ink-soft); } .destiny b { color: var(--ink); } .blessing { position: relative; } .r-section.blessing { border-top: 1px solid var(--line-soft); } .blessing p:not(.signoff):not(.r-receive) { position: relative; z-index: 0; font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 2.05; color: var(--ink); letter-spacing: .04em; text-indent: .2em; background-color: var(--washi); background-image: radial-gradient(120% 90% at 20% 0%, var(--glow-lav) 0%, transparent 55%), radial-gradient(90% 70% at 92% 110%, var(--glow-warm) 0%, transparent 60%); border: 1px solid var(--line-soft); border-radius: var(--r-key); padding: 30px 26px; margin: 8px 0 0; box-shadow: var(--glow-1); } .blessing .r-receive { margin: 16px 0 0; color: var(--ink-dim); font-family: var(--font-mute); font-size: 13.5px; line-height: 1.9; text-align: center; letter-spacing: .03em; } .blessing p:not(.signoff):not(.r-receive)::after { content: none; } .blessing p:not(.signoff):not(.r-receive)::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--kin-pale) 35%, var(--kin) 50%, var(--kin-pale) 65%, transparent); border-radius: 2px; z-index: 1; pointer-events: none; } .signoff { color: var(--ink-dim); font-size: 13.5px; font-style: normal; margin-top: 12px; } .tiny { font-size: 13.5px; color: var(--ink-dim); line-height: 1.75; max-width: var(--measure); } .center { text-align: center; } .share-block { margin-top: 28px; text-align: center; } .share-block h4 { font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: 16px; letter-spacing: .06em; } .share-canvas { width: 100%; max-width: 360px; height: auto; border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--sh-2); } .share-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .upsell { margin-top: 30px; text-align: center; background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-key); padding: 26px 20px; } .upsell h4 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; font-size: 18px; letter-spacing: .04em; } .upsell p { color: var(--ink-soft); font-size: 14px; } .upsell-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 16px; } .upsell-reassure { color: var(--ink-dim); margin: 14px 0 0; } .upsell-more { color: var(--ink-soft); margin: 8px 0 0; } .upsell-more a { color: var(--ink); border-bottom: 1px solid var(--kin); text-decoration: none; } .upsell-more a:hover { color: var(--kin-deep); } .life-nav { margin: 26px 0 0; text-align: center; } .life-nav-label { color: var(--ink-soft); font-size: 13px; font-weight: 600; letter-spacing: .1em; margin: 0 0 12px; } .life-nav-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .life-chip { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 8px 18px; font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); background: var(--washi-2); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: color .15s, border-color .15s, background .15s, transform .15s; } .life-chip:hover, .life-chip:focus-visible { color: var(--ink); border-color: var(--kin); background: var(--washi); transform: translateY(-1px); } .persona-fold, .future-fold { margin: 18px 0 0; } .persona-fold > summary, .future-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); background: var(--washi-2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 20px; min-height: 44px; box-sizing: border-box; transition: border-color .15s, color .15s, background .15s; } .persona-fold > summary::-webkit-details-marker, .future-fold > summary::-webkit-details-marker { display: none; } .persona-fold > summary::after, .future-fold > summary::after { content: "▾"; font-size: 11px; opacity: .8; } .persona-fold[open] > summary::after, .future-fold[open] > summary::after { content: "▴"; } .persona-fold > summary:hover, .future-fold > summary:hover, .persona-fold > summary:focus-visible, .future-fold > summary:focus-visible { border-color: var(--kin); color: var(--ink); background: var(--washi); } .persona-fold .persona-switch { margin-top: 14px; } .r-astro-fold { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .r-astro-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; letter-spacing: .04em; color: var(--ink-soft); min-height: 44px; padding: 4px 2px; transition: color .15s; } .r-astro-fold > summary::-webkit-details-marker { display: none; } .r-astro-fold > summary::before { content: "＋"; color: var(--kin-deep); font-weight: 700; font-size: 15px; line-height: 1; transition: transform var(--t); } .r-astro-fold[open] > summary::before { content: "−"; } .r-astro-fold > summary:hover { color: var(--ink); } .r-astro-fold > summary:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; border-radius: 6px; } .r-astro-fold > .r-section, .r-astro-fold > .r-section-astro, .r-astro-fold > .r-calc { margin-top: 8px; padding-top: 0; border-top: 0; } @media (prefers-reduced-motion: reduce) { .r-astro-fold > summary, .r-astro-fold > summary::before { transition: none; } } .pricing { padding-block: var(--rhythm-block); padding-inline: 0; border-top: 1px solid var(--line); } .pricing h2 { text-align: center; font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 6vw, var(--fs-h2)); letter-spacing: .05em; margin: 0 0 8px; } .section-sub { text-align: center; color: var(--ink-soft); margin: 0 0 28px; max-width: var(--measure); } .free-lead { text-align: center; max-width: var(--measure); margin: 0 auto; padding: 8px 0 4px; } .free-lead-eyebrow { color: var(--kin-pale); font-size: 12px; font-weight: 600; letter-spacing: .2em; margin: 0 0 12px; } .free-lead-price { font-family: var(--font-serif); font-weight: 600; font-size: 22px; letter-spacing: .06em; margin: 0 0 6px; } .free-lead-price span { font-family: var(--font-num); font-size: 30px; margin-left: 10px; color: var(--ink); } .free-lead-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(18px, 5vw, 22px); letter-spacing: .04em; margin: 0 0 12px; } .free-lead-desc { color: var(--ink-soft); font-size: 15px; line-height: 1.95; margin: 0 0 24px; } .free-lead-cta { margin: 0; } .paid-menu { max-width: var(--measure); margin: 36px auto 0; } .paid-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: center; gap: 10px; min-height: 44px; padding: 8px 0; text-align: center; } .paid-menu > summary::-webkit-details-marker { display: none; } .paid-menu-label { font-family: var(--font-serif); font-weight: 600; font-size: 15px; letter-spacing: .03em; color: var(--ink-soft); } .paid-menu-note { font-size: 11.5px; letter-spacing: .12em; color: var(--ink-mute); } .paid-menu > summary::after { content: "▾"; font-size: 11px; color: var(--ink-mute); } .paid-menu[open] > summary::after { content: "▴"; } .paid-list { list-style: none; padding: 0; margin: 14px 0 0; } .paid-list li { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); } .paid-list li:last-child { border-bottom: 1px solid var(--line); } .paid-item-body { flex: 1; min-width: 0; } .paid-item-body h4 { font-family: var(--font-serif); font-weight: 600; font-size: 15.5px; letter-spacing: .03em; margin: 0 0 4px; } .paid-item-body p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.8; margin: 0; } .paid-item-body a { color: var(--kin-pale); text-decoration: none; border-bottom: 1px solid var(--line); } .paid-item-body a:hover, .paid-item-body a:focus-visible { color: var(--kin); border-color: var(--kin); } .paid-item-price { flex: 0 0 auto; font-family: var(--font-num); font-size: 17px; color: var(--ink-mute); margin: 0; white-space: nowrap; } .paid-item-price small { font-size: 12px; } .badge { position: absolute; top: 16px; right: 16px; font-size: 11px; background: var(--grad-gold); color: #1A1A1A; padding: 4px 11px; border-radius: 12px; font-weight: 600; letter-spacing: .04em; box-shadow: var(--sheen-gold); border: 1px solid var(--metal-edge-gold); } .theme-grid { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 8px; } .theme-card { position: relative; display: flex; flex-direction: column; background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 22px; transition: border-color var(--t), transform .12s var(--ease), box-shadow var(--t); } .theme-card:hover { transform: translateY(-2px); border-color: var(--kin); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6); } .theme-card:focus-within { border-color: var(--kin); } .theme-card .emoji { font-size: 30px; line-height: 1; filter: grayscale(.3) opacity(.9); } .theme-card .star-mark { width: 38px; height: 38px; padding: 7px; border-radius: 50%; color: var(--kin); background: radial-gradient(120% 120% at 30% 22%, rgba(184, 151, 106, .14), rgba(184, 151, 106, .04)); border: 1px solid var(--line); } .theme-card h3 { margin: 12px 0 6px; font-size: 18px; font-family: var(--font-serif); font-weight: 600; letter-spacing: .04em; } .theme-card .host { position: relative; color: var(--ink-mute); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; padding-left: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin: 0 0 14px; } .theme-card .host::before { content: ""; position: absolute; left: 0; top: .28em; width: 2px; height: 1em; background: linear-gradient(180deg, var(--kin-pale), var(--kin-deep)); border-radius: 2px; } .theme-card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.8; letter-spacing: .02em; margin: 0 0 16px; flex: 1; } .theme-card .btn { align-self: flex-start; } .theme-card .tag { position: absolute; top: 16px; right: 16px; font-size: 11px; padding: 4px 11px; border-radius: 12px; font-weight: 600; letter-spacing: .04em; } .theme-card .tag.free { background: var(--washi-2); color: var(--ink-soft); border: 1px solid var(--line); } .theme-card .tag.paid { background: var(--grad-gold); color: #1A1A1A; } .theme-card .card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; flex: 0 0 auto; } .card-tag { font-size: 12px; color: var(--ink-soft); background: var(--washi-2); border: 1px solid var(--line); border-radius: 12px; padding: 5px 12px; } .play-card { position: relative; --accent: var(--kin); } .play-card::after { content: ""; position: absolute; top: 16px; bottom: 16px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: .85; } .play-card:hover { border-color: var(--accent); } .play-card .accent-mark { color: var(--accent); } .play-card .tag.accent-tag { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 10%, var(--washi-2)); } .play-more { margin-top: 20px; } .play-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; padding: 11px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--washi-2); color: var(--ink-soft); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; transition: border-color var(--t), color var(--t); } .play-more { text-align: center; } .play-more > summary::-webkit-details-marker { display: none; } .play-more > summary:hover { border-color: var(--kin); color: var(--ink); } .play-more > summary:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; } .play-more > summary .play-more-close { display: none; } .play-more[open] > summary .play-more-open { display: none; } .play-more[open] > summary .play-more-close { display: inline; } .play-more .theme-grid { text-align: left; } .teller-ico { position: relative; flex: 0 0 auto; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background-color: var(--bg-2); background-image: var(--ico, none), radial-gradient(120% 120% at 30% 22%, color-mix(in srgb, var(--accent) 78%, #fff 10%) 0%, color-mix(in srgb, var(--accent) 60%, var(--sumi) 0%) 48%, color-mix(in srgb, var(--accent) 28%, var(--sumi) 72%) 100%); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; box-shadow: inset 0 1px 4px rgba(255,255,255,.18), inset 0 -6px 14px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.30); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); overflow: hidden; } .teller-ico-ph { font-family: var(--font-serif); font-weight: 700; color: rgba(255,253,247,.94); letter-spacing: 0; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.45); user-select: none; } .teller-ico-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; z-index: 1; object-position: var(--face-x, 50%) var(--face-y, 50%); transform: scale(var(--face-zoom, 1)); transform-origin: var(--face-x, 50%) var(--face-y, 50%); } .banner-card { position: relative; display: block; text-decoration: none; color: var(--ink); border-radius: var(--r-key); border: 1px solid color-mix(in srgb, var(--accent, var(--kin)) 36%, var(--line)); background: var(--washi); box-shadow: var(--sh-1); overflow: hidden; transition: transform .14s var(--ease), border-color var(--t), box-shadow var(--t); --accent: var(--kin); } .banner-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--sh-2); } .banner-card:focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; } .banner-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--accent, var(--kin)) 14%, var(--washi-2)); overflow: hidden; } .banner-thumb img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; } .banner-thumb img { animation: bannerFade .4s var(--ease) both; } @keyframes bannerFade { from { opacity: 0; } to { opacity: 1; } } .banner-fallback { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; text-align: center; background: var(--grad-key), radial-gradient(120% 130% at 30% 18%, color-mix(in srgb, var(--accent) 70%, #fff 8%) 0%, color-mix(in srgb, var(--accent) 52%, var(--sumi) 0%) 46%, color-mix(in srgb, var(--accent) 26%, var(--sumi) 70%) 100%); box-shadow: var(--sheen-key) inset; } .banner-fallback-kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 253, 247, .82); text-shadow: 0 1px 3px rgba(0, 0, 0, .35); } .banner-fallback-name { font-family: var(--font-serif); font-weight: 700; letter-spacing: .04em; font-size: clamp(18px, 5.4vw, 26px); line-height: 1.3; color: rgba(255, 253, 247, .96); text-shadow: 0 1px 4px rgba(0, 0, 0, .42); background: rgba(10, 14, 24, .45); border-radius: 8px; padding: 4px 12px; } .teller-nav { border-top: 1px solid var(--line-soft); background: var(--tnav-bg); padding: 20px 0 8px; } .tnav-head { margin: 0 0 12px; color: var(--ink-soft); font-size: 13px; font-weight: 600; letter-spacing: .12em; font-family: var(--font-serif); } .tnav-track { display: flex; gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 2px 2px 16px; scrollbar-width: thin; } .tnav-track::-webkit-scrollbar { height: 6px; } .tnav-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .tnav-cell { scroll-snap-align: start; flex: 0 0 auto; } .tnav-card { --ink: var(--boku); --ink-soft: var(--boku-soft); --ink-dim: var(--boku-dim); display: flex; flex-direction: column; width: 236px; text-decoration: none; color: var(--boku); border-radius: var(--r-card); overflow: hidden; background: var(--paper); border: 1px solid var(--paper-line); box-shadow: 0 8px 22px rgba(0,0,0,.28); transition: transform .12s var(--ease), box-shadow var(--t), border-color var(--t); --accent: var(--kin); position: relative; } .tnav-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--paper-line)); box-shadow: 0 14px 30px rgba(0,0,0,.36); } .tnav-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tnav-visual { display: block; position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--accent) 46%, #17203a), #10182e); border-bottom: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); } .tnav-visual-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: rgba(255,255,255,.82); font-family: var(--font-serif); } .tnav-visual-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .tnav-body { display: block; padding: 10px 13px 12px; background: var(--paper); } .tnav-name { display: block; font-family: var(--font-serif); font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--boku); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tnav-tag { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.55; color: var(--boku-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tnav-card.is-current { cursor: default; } .tnav-card.is-current:hover { transform: none; } .tnav-card.is-current .tnav-visual { opacity: .82; } .tnav-here { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #fff; background: rgba(12,16,30,.72); border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 10px; padding: 3px 9px; } @media (min-width: 720px) { .teller-nav { padding: 26px 0 10px; } .tnav-card { width: 268px; } } .teller-profile { padding: 8px 0 26px; } .tprof-card { --ink: var(--boku); --ink-soft: var(--boku-soft); --ink-dim: var(--boku-dim); --line: var(--paper-line); --line-soft: var(--paper-line-soft); max-width: 640px; margin: 0 auto; background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 32%), var(--paper); border: 1px solid var(--paper-line); border-top: 3px solid var(--accent, var(--kin)); border-radius: var(--r-card); box-shadow: 0 10px 30px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.5) inset; color: var(--boku); padding: 20px 20px 18px; } .tprof-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .tprof-face { width: 64px; height: 64px; flex: 0 0 auto; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--kin)) 60%, transparent), 0 4px 14px rgba(0,0,0,.22); } .tprof-role { margin: 0 0 2px; font-size: 12px; letter-spacing: .06em; color: var(--boku-dim); font-family: var(--font-mute); } .tprof-name { margin: 0; font-family: var(--font-serif); font-size: clamp(19px, 5vw, 22px); font-weight: 700; color: var(--boku); } .tprof-rows { margin: 0; } .tprof-row { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--paper-line-soft); } .tprof-row dt { font-size: 12.5px; font-weight: 700; color: var(--kin-on-paper); letter-spacing: .08em; padding-top: 2px; font-family: var(--font-serif); } .tprof-row dd { margin: 0; font-size: 14px; line-height: 1.9; color: var(--boku-soft); } .site-footer { border-top: 1px solid var(--line); padding: 30px 0 48px; background: var(--footer-bg); } .disclaimer { color: var(--ink-soft); font-size: 13px; max-width: var(--measure); margin: 0 auto 18px; text-align: center; line-height: 1.85; } .disclaimer strong { color: var(--ink); } .legal-links { display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: center; margin-bottom: 16px; } .legal-links a { color: var(--ink-soft); font-size: 13px; text-decoration: none; border-bottom: 1px solid transparent; } .legal-links a:hover { color: var(--ink); border-color: var(--ink-dim); } .copyright { text-align: center; color: var(--ink-dim); font-size: 12px; margin: 0; } @media (min-width: 720px) { .theme-grid { grid-template-columns: repeat(2, 1fr); } .hero { padding: 56px 0 0; } } @media (min-width: 980px) { .theme-grid { grid-template-columns: repeat(3, 1fr); } #today #pDailyCard.theme-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1180px) { .sec-title { margin: 0 0 12px; } .divider { margin: 8px 0 32px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } .persona-bar { background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; margin-bottom: 18px; } .persona-who { display: flex; align-items: center; gap: 12px; } .persona-emoji { font-size: 26px; line-height: 1; filter: grayscale(.25) opacity(.92); } .persona-mark { width: 34px; height: 34px; color: var(--w-accent, var(--kin)); flex: 0 0 auto; } .persona-mark svg { width: 100%; height: 100%; display: block; } .persona-meta { display: flex; flex-direction: column; } .persona-meta b { font-size: 16px; font-family: var(--font-serif); font-weight: 600; letter-spacing: .04em; } .persona-meta small { color: var(--ink-dim); font-size: 12px; } .persona-intro { color: var(--ink-soft); font-size: 14px; margin: 10px 0 12px; } .persona-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .persona-switch-label { font-size: 12px; color: var(--ink-dim); } .persona-pick { font: inherit; font-size: 13px; cursor: pointer; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 9px 15px; min-height: 44px; transition: color var(--t), border-color var(--t); } .persona-pick:hover { color: var(--ink); border-color: var(--kin); } .persona-pick.active { color: #1A1A1A; background: var(--grad-gold); border-color: transparent; font-weight: 600; } .persona-pick { display: inline-flex; align-items: center; gap: 6px; } .pick-mark { width: 18px; height: 18px; flex: 0 0 auto; color: currentColor; } .pick-mark svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .report-head { text-align: center; padding: 40px 0 8px; } .report-head .eyebrow { color: var(--kin-pale); } .report-head h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 8vw, var(--fs-h1)); letter-spacing: .05em; margin: 8px 0; } .report-form { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-key); padding: 22px 18px; margin-top: 18px; } .person-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } .person-card { background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; } .person-card h3 { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: .04em; } .person-note { margin: -4px 0 14px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; } .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; color: var(--ink-soft); font-size: 12px; font-weight: 600; letter-spacing: .08em; } .field input, .field select { padding: 13px 12px; min-height: 48px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--washi-2); color: var(--ink); font-size: 16px; font-family: var(--font-sans); } .field input:focus, .field select:focus { outline: 2px solid var(--kin); outline-offset: 1px; border-color: var(--kin); } .field .mini-row { display: flex; gap: 8px; } .field .mini-row input { width: 100%; text-align: center; font-family: var(--font-num); } .field .mini-row .bf-select { padding: 12px 14px; } .report-form .btn { width: 100%; margin-top: 6px; } .report-out { margin-top: 26px; } .report-card { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-key); padding: 28px 20px; position: relative; overflow: hidden; box-shadow: var(--sh-key); } .report-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--kin); } .pair-line { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 5vw, 26px); letter-spacing: .04em; margin: 6px 0 4px; } .pair-line .heart { color: var(--shu); } .score-big { text-align: center; margin: 8px 0 18px; } .score-big .num { font-family: var(--font-num); font-size: 56px; font-weight: 600; color: var(--kin-pale); letter-spacing: .02em; } .score-big .num small { font-size: 22px; color: var(--ink-soft); } .bars { margin: 8px 0 4px; } .bar-row { margin: 12px 0; } .bar-row .bl { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; } .bar-row .bl b { font-family: var(--font-num); color: var(--kin-pale); } .bar-track { height: 4px; background: var(--line-soft); border-radius: 12px; overflow: hidden; } .bar-fill { height: 100%; background: var(--kin); border-radius: 12px; } .rep-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); } .rep-section h4 { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: 16px; letter-spacing: .05em; } .rep-section p, .rep-section li { color: var(--ink-soft); } .rep-section .blessing { } .paywall { position: relative; margin-top: 18px; } .paywall .locked { filter: blur(6px); pointer-events: none; user-select: none; opacity: .5; } .paywall.unlocked .locked { filter: none; opacity: 1; } #soloPaywall { position: relative; } #soloPaywall .locked { max-height: 172px; overflow: hidden; opacity: .58; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 90%); } #soloPaywall::after { content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 3; pointer-events: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--kin); background-color: rgba(20, 28, 48, .9); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; background-size: 20px; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); } #soloPaywall.unlocked .locked { max-height: none; -webkit-mask-image: none; mask-image: none; opacity: 1; } #soloPaywall.unlocked::after { display: none; } .solo-bridge { font-family: var(--font-serif); font-size: 13.5px; line-height: 1.85; letter-spacing: .04em; color: var(--ink-soft); text-align: center; max-width: var(--measure); margin: 18px auto 2px; } .solo-weave-deep .astro-weave { font-size: clamp(14.5px, 4vw, 16px); line-height: 1.95; color: var(--ink-soft); max-width: var(--measure); margin: 4px auto 14px; text-align: left; font-feature-settings: "palt" 1; } .solo-weave-deep .solo-weave-bridge { font-family: var(--font-serif); font-size: 14px; line-height: 1.85; letter-spacing: .04em; color: var(--ink-soft); text-align: center; max-width: var(--measure); margin: 12px auto 0; } .solo-deliver { margin: 10px auto 2px; max-width: var(--measure); font-size: 14px; line-height: 1.8; color: var(--ink); } .solo-sub-bridge { margin: 12px auto 0; max-width: var(--measure); font-size: 13.5px; line-height: 1.8; color: var(--ink-soft); text-align: center; } .paywall-banner { background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--r-key); padding: 24px 20px; text-align: center; margin: 16px 0; } .paywall-invite { display: inline-flex; align-items: center; gap: 8px; justify-content: center; margin: 0 0 12px; font-family: var(--font-serif); font-size: 14.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.6; color: var(--ink-soft); } .paywall-lock { font-size: 15px; line-height: 1; } .paywall-banner h4 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: 18px; letter-spacing: .04em; } .paywall-banner p { color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; } .paywall-banner .btn { margin: 6px; } .paywall.unlocked .paywall-banner { display: none; } .week-list { list-style: none; padding: 0; margin: 0 0 4px; } .week-day { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 8px; background: var(--washi); } .week-day .wd { flex: 0 0 56px; color: var(--ink-dim); font-size: 13px; font-weight: 600; } .week-day .wh { flex: 1; color: var(--ink-soft); font-size: 14px; } .week-day .ws { color: var(--kin-pale); font-weight: 600; font-size: 13px; font-family: var(--font-num); } .week-day.today { border-color: var(--line); box-shadow: inset 3px 0 0 var(--kin); } .week-day.today .wh { color: var(--ink); } .week-day.locked { opacity: .65; } .week-day.locked .wh { color: var(--ink-dim); } .deep-peek { margin: 28px 0 8px; padding-top: 22px; border-top: 1px solid var(--line); } .deep-peek-head .r-eyebrow { color: var(--kin-deep); letter-spacing: .08em; } .deep-peek-theme { color: var(--ink-soft); font-size: 14px; line-height: 1.9; margin: 2px 0 14px; } .frost-peek { position: relative; margin: 14px 0 0; padding: 4px 2px 0; max-height: 8.5em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 86%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 86%); } .frost-peek-lead { font-family: var(--font-serif); color: var(--ink-dim); font-size: 12.5px; letter-spacing: .06em; margin: 0 0 6px; } .frost-peek-body { font-family: var(--font-serif); color: var(--ink); font-size: 15.5px; line-height: 1.95; margin: 0 0 .55em; } .frost-peek-body.frost-peek-dim { filter: blur(1.6px); opacity: .85; } .frost-peek-body.frost-peek-dim ~ .frost-peek-body.frost-peek-dim { filter: blur(3.4px); opacity: .6; } .frost-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 253, 248, 0) 0%, rgba(255, 253, 248, .15) 42%, rgba(255, 253, 248, .55) 72%, rgba(255, 253, 248, .9) 100%); -webkit-backdrop-filter: blur(.5px); backdrop-filter: blur(.5px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); } .deep-peek-cta { margin-top: -6px; } .future-tl { margin: 30px 0 8px; padding-top: 22px; border-top: 1px solid var(--line); } .future-tl-head .r-eyebrow { color: var(--kin-deep); letter-spacing: .08em; } .future-tl-head .tiny { color: var(--ink-soft); margin: 2px 0 14px; line-height: 1.85; } .future-now { background: var(--washi-2); border: 1px solid var(--line); border-left: 3px solid var(--kin); border-radius: var(--r-key); padding: 16px 18px; margin: 0 0 14px; } .future-band { font-family: var(--font-serif); color: var(--ink); font-size: 15px; letter-spacing: .04em; margin: 0 0 9px; } .future-band b { font-size: 17.5px; font-weight: 600; } .future-here { display: inline-block; vertical-align: 2px; margin-left: 8px; border: 1px solid var(--kin); color: var(--kin-deep); font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 1px 9px; border-radius: 12px; } .future-now > p { color: var(--ink); font-size: 15px; line-height: 1.95; margin: 0 0 .6em; } .future-now .future-ask { color: var(--ink-soft); font-family: var(--font-serif); margin: .5em 0 0; } .future-cta { margin-top: -6px; } .legal-doc { max-width: var(--max); margin: 0 auto; padding: 40px 20px 72px; } .legal-doc .back { color: var(--ink-soft); text-decoration: none; font-size: 14px; } .legal-doc .back:hover { color: var(--ink); } .legal-doc h1 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(28px, 8vw, var(--fs-h1)); letter-spacing: .05em; margin: 18px 0 6px; } .legal-doc h1::after, .article-doc h1::after { content: ""; display: block; width: 40px; height: 1.5px; margin-top: 14px; background: linear-gradient(90deg, var(--kin), transparent); } .legal-doc .updated { color: var(--ink-dim); font-size: 13px; margin: 0 0 28px; } .legal-doc h2 { font-family: var(--font-serif); font-weight: 600; font-size: 18px; margin: 38px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); color: var(--ink); letter-spacing: .04em; } .legal-doc h3 { font-size: 15px; margin: 24px 0 8px; font-weight: 600; color: var(--ink); } .legal-doc p, .article-doc p { color: var(--ink); line-height: 2.0; letter-spacing: .02em; } .article-doc p { margin: 0 0 20px; } .legal-doc li, .article-doc li { color: var(--ink); line-height: 1.95; } .legal-doc ul, .legal-doc ol { padding-left: 1.3em; } .legal-doc li { padding: 3px 0; } .legal-doc ul li, .article-doc ul li { list-style: none; position: relative; padding-left: 20px; } .legal-doc ul li::before, .article-doc ul li::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 1px; background: var(--kin); } .legal-doc ol li::marker { color: var(--kin-pale); } .legal-doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; } .legal-doc th, .legal-doc td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } .legal-doc th { width: 32%; white-space: normal; font-weight: 600; color: var(--kin-pale); } .legal-doc .fill { color: var(--kin-pale); } .legal-doc .callout { background: var(--washi); border: 1px solid var(--line); border-left: 3px solid var(--kin); border-radius: var(--r-card); padding: 14px 18px; margin: 18px 0; } .legal-doc strong { color: var(--ink); } .sec { padding-block: var(--rhythm-block); padding-inline: 0; } .sec--tight { padding-block: var(--s6); } .sec-label { display: block; text-align: left; color: var(--kin-pale); font-size: 12px; font-weight: 600; letter-spacing: .2em; margin: 0 0 10px; } .sec-title { text-align: left; font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 6vw, var(--fs-h2)); line-height: 1.4; letter-spacing: .05em; margin: 0 0 10px; } .sec-sub { text-align: left; color: var(--ink-soft); margin: 0 0 28px; max-width: var(--measure); font-size: 14.5px; } .sec-head { max-width: var(--w-wide); margin: 0 auto var(--s6); } .sec-kicker { display: flex; align-items: baseline; gap: 12px; margin: 0 0 var(--s3); } .sec-num { font-family: var(--font-display); font-size: clamp(28px, 5vw, 44px); font-weight: 600; color: var(--kin-pale); opacity: .55; line-height: 1; } .sec-eyebrow { font-size: 12px; letter-spacing: .18em; font-weight: 600; color: var(--kin-pale); display: inline-flex; align-items: center; gap: 8px; } .sec-eyebrow::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; transform: translateY(-.5px); background: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .sec-head .sec-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: .03em; line-height: 1.32; font-size: clamp(24px, 6vw, var(--fs-h2)); margin: 0 0 var(--s3); } .sec-head .sec-title::after { content: ""; display: block; width: 34px; height: 2px; margin: 12px 0 0; border-radius: 2px; background: linear-gradient(90deg, var(--kin), transparent); } .sec-head--solo .sec-title::after, .sec-head--aside .sec-title::after { display: none; } .sec-desc { font-size: clamp(16px, 2.4vw, 19px); color: var(--ink-soft); line-height: 1.85; max-width: var(--measure); margin: 0; } @media (max-width: 560px) { .sec-head .sec-title::after { margin-top: 10px; } .sec-head { margin-bottom: var(--s5); } } .rule-draw { height: 1px; background: var(--kin); opacity: .5; margin: 4px 0 var(--s6); transform-origin: left; } .divider { display: flex; align-items: center; gap: 12px; margin: 6px 0 26px; height: 14px; color: transparent; font-size: 0; position: relative; background: url('data:image/svg+xml;utf8,') center / 10px 10px no-repeat; } .divider::before, .divider::after { content: ""; flex: 1 1 auto; max-width: 44px; } .divider::before { height: 1.6px; background: linear-gradient(90deg, transparent, var(--kin)); align-self: center; } .divider::after { height: 1px; background: linear-gradient(90deg, var(--kin), transparent); align-self: center; } .promises { list-style: none; padding: 0; margin: 0; } .promise { display: flex; align-items: flex-start; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); text-align: left; } .promise:first-child { border-top: 0; padding-top: 4px; } .promise-ic { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; color: var(--ink-mute); } .promise-ic svg { width: 100%; height: 100%; display: block; } .promise-body { flex: 1; min-width: 0; } .promise h3 { font-family: var(--font-serif); font-weight: 600; font-size: 17px; margin: 0 0 6px; letter-spacing: .04em; } .promise p { color: var(--ink-soft); font-size: 14px; margin: 0; } .promises.starlist > li.promise { padding: 22px 14px; padding-left: 14px; } .promises.starlist > li.promise:first-child { padding-top: 8px; } .promises.starlist > li.promise::before { content: none; } .steps { list-style: none; counter-reset: step; padding: 0; margin: 6px 0 0; } .steps li { counter-increment: step; position: relative; padding: 18px 0 18px 52px; border-top: 1px solid var(--line); } .steps li:first-child { border-top: 0; padding-top: 4px; } .steps li::after { content: ""; position: absolute; left: 17px; top: 22px; bottom: 18px; width: 1px; background: linear-gradient(180deg, var(--kin-pale), var(--line) 55%, transparent); } .steps li:first-child::after { top: 8px; } .steps li:last-child::after { display: none; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 16px; width: 34px; font-family: var(--font-num); font-weight: 400; font-size: 22px; line-height: 1; color: var(--ink-mute); text-align: left; } .steps li:first-child::before { top: 2px; } .step-star { position: absolute; left: 24px; top: 12px; width: 9px; height: 9px; display: block; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; opacity: .5; pointer-events: none; } .steps li:first-child .step-star { top: -2px; } .steps b { display: block; margin-bottom: 2px; font-family: var(--font-serif); font-weight: 600; letter-spacing: .03em; } .steps p { color: var(--ink-soft); font-size: 14px; margin: 0; } .chips { display: flex; flex-wrap: wrap; gap: 10px; } .craft-axis { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); } .craft-group { margin-top: var(--s7); } .craft-group:first-of-type { margin-top: var(--s5); } .craft-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 var(--s4); } .craft-group-head .cg-num { font-family: var(--font-display); font-size: clamp(20px, 4vw, 30px); font-weight: 600; color: var(--kin-pale); opacity: .55; line-height: 1; } .craft-group-head .cg-title { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: .04em; color: var(--ink); margin: 0; } .craft-group-head .cg-note { font-family: var(--font-sans); font-weight: 400; font-size: 12.5px; color: var(--ink-mute); letter-spacing: .02em; } .craft-btn-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); } .craft-btn { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; overflow: hidden; border: 1.5px solid var(--kin); border-radius: 16px; background: var(--washi); text-decoration: none; color: var(--ink); transition: border-color .2s var(--ease), transform .14s var(--ease), box-shadow .2s var(--ease); } .craft-btn:hover { border-color: var(--kin-pale); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .26); } .craft-btn:focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; } .craft-btn .cb-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 12px 10px; } .craft-btn .cb-craft { font-size: 11.5px; color: var(--kin-pale); letter-spacing: .05em; } .craft-btn .cb-name { font-family: var(--font-serif); font-weight: 600; font-size: 15.5px; letter-spacing: .02em; line-height: 1.3; } .craft-btn .btn-arrow { display: grid; place-items: center; position: absolute; right: 9px; bottom: 9px; width: 28px; height: 28px; border-radius: 9px; background: var(--grad-gold); color: #1A1A1A; font-weight: 700; font-size: 15px; line-height: 1; border: 1px solid var(--metal-edge-gold); box-shadow: var(--sheen-gold), 0 3px 10px rgba(0, 0, 0, .35); transition: transform .14s var(--ease); } .craft-btn:hover .btn-arrow { transform: translateX(2px); } .craft-btn .cb-body { padding-right: 44px; } .craft-btn.is-flag { border-color: var(--kin); box-shadow: 0 0 0 1px rgba(184, 151, 106, .18) inset; } .craft-btn.is-flag .cb-craft::before { content: "★ "; color: var(--kin); } .night-page .craft-btn { background: var(--glass-night); color: var(--star-warm); } .night-page .craft-btn:hover { background: var(--glass-night); border-color: var(--kin-pale); box-shadow: 0 0 0 1px rgba(212, 191, 163, .30), 0 14px 30px rgba(0, 0, 0, .40); } .craft-more { margin-top: var(--s4); } .craft-more > summary { list-style: none; cursor: pointer; } .craft-more > summary::-webkit-details-marker { display: none; } .craft-more > summary::after { content: "▾"; font-size: 11px; opacity: .8; margin-left: 4px; } .craft-more[open] > summary::after { content: "▴"; } .faq-list { display: block; margin-top: 6px; } .faq-item { border-top: 1px solid var(--line); } .faq-item:last-child { border-bottom: 1px solid var(--line); } .faq-item summary { list-style: none; cursor: pointer; padding: 18px 28px 18px 0; position: relative; font-family: var(--font-serif); font-weight: 600; font-size: 15px; letter-spacing: .03em; min-height: 44px; display: flex; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "＋"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--kin-pale); font-weight: 600; } .faq-item[open] summary::after { content: "−"; } .faq-item p { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; } .faq-item[open] { background: linear-gradient(90deg, rgba(184, 151, 106, .05), transparent 60%); border-radius: 10px; } .faq-item { position: relative; } .faq-item[open]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--kin), var(--kin-pale)); } .faq-item[open] summary, .faq-item[open] p { padding-left: 14px; } .faq-item[open] summary { padding-right: 28px; } .final-cta { text-align: center; padding: var(--rhythm-block) 0; } .final-cta .glow { position: relative; } .final-cta h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 6vw, var(--fs-h2)); letter-spacing: .05em; margin: 0 0 8px; } .final-cta p { color: var(--ink-soft); margin: 0 0 22px; } .cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: none; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bar-bg); border-top: 1px solid var(--line); } .cta-bar .btn { width: 100%; } @media (min-width: 720px) { .sec-title { text-align: left; } } @media (max-width: 719px) { .cta-bar { display: block; } body.has-cta-bar { padding-bottom: 84px; } } :root { --w-accent: var(--kin-deep); --w-accent2: var(--kin-deep); --w-bg1: #efe9db; --w-bg2: #f4efe3; --w-bg3: #e7e0d0; } .world-body { background: linear-gradient(180deg, var(--w-bg2) 0%, var(--w-bg1) 40%, var(--w-bg3) 100%) fixed, var(--sumi); } body.world-princess{ --accent:#b23e7e; --accent2:#d878a0; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#f7eef0 0%,#f1e2e7 42%,#ecd9e0 100%) fixed, #ecd9e0; } body.world-junki{ --accent:#3a7524; --accent2:#6aa84e; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#eff4ec 0%,#e6efe0 42%,#dde8d4 100%) fixed, #dde8d4; } body.world-butler{ --accent:#1f6e5e; --accent2:#4aa590; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#ecf3f0 0%,#e1ece8 42%,#d6e5df 100%) fixed, #d6e5df; } body.world-konami{ --accent:#a04e22; --accent2:#d36a3c; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#f6efe4 0%,#f1e7d6 42%,#ece0cb 100%) fixed, #ece0cb; } body.world-ibuki{ --accent:#a8451f; --accent2:#dc5e3a; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#f6ece8 0%,#f1ded8 42%,#ecd2ca 100%) fixed, #ecd2ca; } body.world-wadachi{ --accent:#34699e; --accent2:#6090ce; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#eef0f6 0%,#e3e8f1 42%,#d8dfec 100%) fixed, #d8dfec; } body.world-aoi{ --accent:#2d6fb0; --accent2:#5aa0e0; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#eaf2f8 0%,#dceaf4 42%,#cfe2f0 100%) fixed, #cfe2f0; } body.world-miu{ --accent:#b03e84; --accent2:#dc78b4; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#f7eef2 0%,#f1e0ea 42%,#ecd4e2 100%) fixed, #ecd4e2; } body.world-hinata{ --accent:#7548b8; --accent2:#a884e0; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#f1edf6 0%,#e8e0f1 42%,#dfd4ec 100%) fixed, #dfd4ec; } body.world-iro{ --accent:#a8451f; --accent2:#dc7050; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#f6ede8 0%,#f1e0d6 42%,#ecd5c8 100%) fixed, #ecd5c8; } body.world-gogyo{ --accent:#2f7d57; --accent2:#5aa680; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#ecf3ef 0%,#e1ece6 42%,#d6e5dc 100%) fixed, #d6e5dc; } body.world-nagi{ --accent:#9a5e12; --accent2:#eaa959; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#fbf3e6 0%,#f8ebd6 42%,#f4e2c6 100%) fixed, #f4e2c6; } body.world-seimei{ --accent:#4f5b7a; --accent2:#7682a0; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#eef0f4 0%,#e4e7ee 42%,#d9dde8 100%) fixed, #d9dde8; } body.world-nekoame{ --accent:#4f6d90; --accent2:#9ab2cc; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#eef2f6 0%,#e3eaf1 42%,#d8e2ec 100%) fixed, #d8e2ec; } body.world-eki{ --accent:#9a3b46; --accent2:#c06a72; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#f4ecea 0%,#ede0de 42%,#e4d3d1 100%) fixed, #e4d3d1; } body.world-kavala{ --accent:#5b4b8a; --accent2:#8273b0; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#efedf4 0%,#e6e2f0 42%,#dcd6ea 100%) fixed, #dcd6ea; } body.world-rune{ --accent:#4a6f8f; --accent2:#6f93b0; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#eaeff3 0%,#dfe7ee 42%,#d3dde6 100%) fixed, #d3dde6; } body.world-osaru{ --accent:#8a6a16; --accent2:#e2c06a; --w-accent:var(--accent); --w-accent2:var(--accent); background: linear-gradient(180deg,#fcf6e7 0%,#f8eecf 42%,#f3e3b7 100%) fixed, #f3e3b7; } body.world-aoi, body.world-wadachi, body.world-seimei, body.world-nekoame, body.world-rune, body.world-butler, body.world-kavala { --grad-key: var(--grad-key-aqua); } .osaru-draw-area{ margin:18px 0 6px; } .osaru-result[hidden]{ display:none; } .osaru-lead{ text-align:center; font-size:1.05rem; margin:.2em 0 1em; } .osaru-cards{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:0 0 8px; } .osaru-card{ flex:1 1 200px; max-width:260px; margin:0; padding:16px; border-radius:16px; background:rgba(255,255,255,.72); border:1px solid rgba(202,162,74,.5); box-shadow:0 6px 20px rgba(120,90,20,.12); text-align:center; } .osaru-card-face{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:3/4; border-radius:12px; overflow:hidden; background:linear-gradient(160deg,var(--accent2,#e2c06a),var(--accent,#caa24a)); } .osaru-card-emoji{ font-size:3.4rem; line-height:1; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)); } .osaru-card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .osaru-card-name{ margin:.6em 0 .3em; font-size:1.1rem; color:var(--accent); } .osaru-card-advice{ margin:0; font-size:.95rem; line-height:1.7; text-align:left; } .osaru-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:14px; } @media (max-width:640px){ .osaru-card{ flex-basis:100%; max-width:340px; } } .lifemap{ list-style:none; margin:14px 0 6px; padding:0; } .lifemap-band{ display:grid; grid-template-columns:64px 8px 1fr; align-items:start; gap:10px; padding:9px 0; border-top:1px solid var(--rule, rgba(0,0,0,.08)); } .lifemap-band:first-child{ border-top:0; } .lifemap-age{ font-family:var(--font-sans); font-size:.82rem; color:var(--ink-mute,#777); padding-top:2px; white-space:nowrap; } .lifemap-bar{ display:block; width:8px; height:100%; min-height:34px; border-radius:4px; } .lifemap-theme{ font-size:.92rem; line-height:1.6; } .naming-cand{ margin:18px 0; padding:14px 0; border-top:2px solid var(--accent,#4f5b7a); } .naming-cand-name{ margin:0 0 6px; } .naming-cand-sub{ font-family:var(--font-sans); font-size:.8rem; color:var(--ink-mute,#777); margin:2px 0 4px; } .naming-compare-note,.naming-bless p{ font-size:.92rem; line-height:1.7; } .naming-compare-note{ background:rgba(79,91,122,.06); border-radius:10px; padding:10px 12px; } @media (min-width:1040px){ .lifemap-theme{ font-size:1rem; } .lifemap-band{ grid-template-columns:80px 10px 1fr; } } body.world-princess .hero h1 .hl::before{ content:""; position:absolute; top:-.18em; right:-.10em; width:.18em; height:.18em; border-radius:50%; background: radial-gradient(circle, var(--accent2) 0%, var(--accent) 45%, transparent 70%); opacity:.85; pointer-events:none; } body.world-junki .hero::before{ background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 62%), radial-gradient(70% 60% at 30% 80%, color-mix(in srgb, var(--accent) 11%, transparent) 0%, transparent 60%); } body.world-butler .hero::after{ background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent), linear-gradient(90deg, transparent 38%, color-mix(in srgb, var(--accent) 26%, transparent) 50%, transparent 62%); } body.world-konami .hero::before{ background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 10%, transparent) 0%, transparent 58%), radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent) 0%, color-mix(in srgb, var(--accent) 4%, transparent) 42%, transparent 70%); opacity:1; } body.world-ibuki .hero h1 .hl::after{ background: linear-gradient(90deg, transparent 4%, var(--accent) 30%, var(--accent2) 52%, var(--accent) 74%, transparent 96%); height:.17em; opacity:.95; } body.world-wadachi .hero-stars{ background-image: radial-gradient(1.4px 1.4px at 16% 72%, var(--accent2) 50%, transparent), radial-gradient(1.1px 1.1px at 82% 64%, var(--accent) 50%, transparent); opacity:.5; } body.world-aoi .hero-stars{ background-image: radial-gradient(1.5px 1.5px at 20% 24%, var(--kin-pale) 50%, transparent), radial-gradient(1.2px 1.2px at 78% 30%, var(--kin) 50%, transparent), radial-gradient(1px 1px at 44% 70%, var(--kin-pale) 50%, transparent), radial-gradient(2px 2px at 68% 18%, var(--accent2) 40%, transparent 72%); opacity:.45; } body.world-miu .hero-stars{ background-image: radial-gradient(1.5px 1.5px at 20% 24%, var(--accent2) 50%, transparent), radial-gradient(1.2px 1.2px at 78% 30%, var(--kin) 50%, transparent), radial-gradient(1px 1px at 44% 70%, var(--kin-pale) 50%, transparent); opacity:.42; } body.world-hinata .hero::before{ width:320px; height:320px; top:-70px; right:-60px; background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 12%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 45%, transparent 72%); opacity:.9; } body.world-iro .eyebrow::after{ width:40px; background: linear-gradient(90deg, var(--accent2), var(--accent) 55%, transparent); } .world-hero .eyebrow { color: var(--w-accent2); border-color: var(--line); } .world-hero .hl, .world-hero h1 .hl { color: var(--w-accent2); } .world-persona { text-align: left; margin-top: 22px; border-color: var(--line); } .world-persona .persona-who { gap: 18px; align-items: center; } .world-persona .persona-mark { width: 96px; height: 96px; padding: 16px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(120% 120% at 30% 24%, color-mix(in srgb, var(--w-accent, var(--kin)) 26%, var(--washi-2)) 0%, var(--washi-2) 72%); border: 1.5px solid color-mix(in srgb, var(--w-accent, var(--kin)) 55%, var(--line)); box-shadow: inset 0 1px 4px rgba(255, 255, 255, .14), 0 6px 18px rgba(0, 0, 0, .28); } .world-persona .persona-meta b { font-size: 20px; } @media (min-width: 720px) { .world-persona .persona-mark { width: 120px; height: 120px; padding: 20px; } } .hero-poem { font-family: var(--font-serif); font-weight: 500; font-size: clamp(14px, 3.2vw, 18px); letter-spacing: .14em; color: var(--kin-pale); margin: 0 0 var(--s4); padding-left: 14px; border-left: 2px solid var(--kin); line-height: 1.6; } .world-hero .hero-poem .hl { color: var(--w-accent2, var(--kin-pale)); } .hero-lede { font-family: var(--font-serif); font-weight: 600; line-height: 1.5; font-size: clamp(21px, 3.8vw, 34px); letter-spacing: .02em; margin: 0 0 var(--s4); max-width: var(--measure); } .hero-sub { font-size: clamp(15px, 2.4vw, 18px); color: var(--ink-soft); line-height: 1.85; letter-spacing: .04em; margin: 0 0 var(--s5); } .hero-armed .hero-inner .line-mask { display: block; overflow: hidden; } .hero-armed .hero-inner .line-mask > .line-inner { display: block; transform: translateY(110%); animation: lineLift .9s var(--ease) forwards; } .hero-armed .hero-poem .line-inner { animation-delay: .05s; } .hero-armed .eyebrow .line-inner { animation-delay: .12s; } .hero-armed .hero-lede .line-inner { animation-delay: .19s; } .hero-armed .hero-sub .line-inner { animation-delay: .28s; } @keyframes lineLift { to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero-armed .hero-inner .line-mask > .line-inner { transform: none; animation: none; } } #engage, #worldlore { display: block; scroll-margin-top: 64px; } .world-hero { padding-top: 40px; } .world-hero #wHeroWheel.astro-hero-wheel { max-width: 150px; margin: 14px 0 6px; } @media (min-width: 1040px) { .world-hero .hero-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; } .world-hero .hero-inner > .hero-poem, .world-hero .hero-inner > .eyebrow, .world-hero .hero-inner > .hero-sub, .world-hero .hero-inner > .world-persona, .world-hero .hero-inner > .note { grid-column: 1; } .world-hero .hero-inner > h1 { grid-column: 1 / -1; } .world-hero #wHeroWheel.astro-hero-wheel { grid-column: 2; grid-row: 1 / -1; align-self: center; max-width: 200px; margin: 0 auto; } } .diag-intro { position: relative; overflow: hidden; padding: 14px 0 4px; text-align: left; } .diag-intro .lead { margin-bottom: 6px; } #pane-diag #quiz.quiz { padding-top: 4px; } body[class*="world-"]:not(.world-body) #intro.hero { padding-top: 40px; } body[class*="world-"]:not(.world-body) #intro.hero .lead { margin-bottom: 12px; } body[class*="world-"]:not(.world-body) #quiz.quiz { padding-top: 6px; } @media (max-width: 719px) { .banner-hero .banner-thumb { max-height: none; } .banner-hero { padding: 0; margin-top: 8px; margin-bottom: 8px; } .banner-hero .banner-thumb { border: 0; border-radius: 0; filter: none; box-shadow: 0 2px 12px rgba(40, 33, 20, .14); } .banner-hero .banner-fallback { border-radius: 0; } .world-body .world-hero { padding-top: 18px; } .world-body .world-hero #wHeroWheel.astro-hero-wheel, .world-body .world-hero .hero-inner > .hero-lede, .world-body .world-hero .world-persona, .world-body .world-hero .hero-inner > .note { display: none; } .diag-intro #wDiagLabel, .diag-intro #wDiagLead, .diag-intro .note { display: none; } .diag-intro { padding: 8px 0 2px; } #birthStep .q-count { margin-bottom: 2px; } #birthStep .q-sub { margin: 6px 0 14px; } body[class*="world-"]:not(.world-body) #intro.hero { padding-top: 16px; } body[class*="world-"]:not(.world-body) #intro.hero .lead { font-size: 14px; line-height: 1.75; margin-bottom: 12px; } } .w-tabs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .w-tab { font: inherit; font-family: var(--font-serif); font-weight: 600; font-size: 15px; cursor: pointer; color: var(--ink-soft); background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 14px 18px; min-height: 48px; letter-spacing: .04em; transition: color var(--t), border-color var(--t); } .w-tab:hover { color: var(--ink); } .w-tab.active { color: var(--ink); border-bottom-color: var(--w-accent); } .ignition-card { margin-top: 30px; background: var(--washi); border: 1px solid var(--w-accent); border-radius: var(--r-key); padding: 26px 22px; } .ignition-card .solo-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 5.5vw, 26px); line-height: 1.5; letter-spacing: .04em; margin: 6px 0 10px; } .ignition-card .solo-lead { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 18px; } .concern-chips { display: flex; flex-wrap: wrap; gap: 10px; } .concern-pick { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink-soft); background: var(--washi-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px 12px 14px; min-height: 48px; display: inline-flex; align-items: center; transition: color var(--t), border-color var(--t), transform .12s var(--ease); } .concern-pick[data-concern]::before, .concern-pick[data-cc]::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; margin-right: 9px; background: var(--cc-deco, var(--kin)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-deco, var(--kin)) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); } .concern-pick:hover { color: var(--ink); border-color: var(--w-accent); transform: translateY(-1px); } .concern-pick.active { color: var(--ink); background: transparent; border-color: var(--w-accent); box-shadow: 0 0 0 1px var(--w-accent) inset; } .concern-bundle-note { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-mute); } .concern-bundle-ladder { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); } .concern-summary { margin: 10px 0 0; padding: 10px 14px; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--ink); background: var(--washi-2); border: 1px solid var(--w-accent); border-radius: 12px; box-shadow: 0 0 0 1px var(--w-accent) inset; } .solo-bundle { max-width: var(--measure); margin: 18px auto 6px; padding: 14px 16px 10px; background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--r-card, 14px); text-align: left; } .solo-bundle-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; letter-spacing: .04em; color: var(--ink); } .solo-bundle-price { margin-left: auto; font-family: var(--font-sans); font-weight: 700; font-size: 13px; color: var(--ink); letter-spacing: .02em; } .solo-bundle-list { list-style: none; margin: 0; padding: 0; } .solo-bundle-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); } .solo-bundle-item:first-child { border-top: 0; } .solo-bundle-ch { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: .02em; } .solo-bundle-item.is-primary .solo-bundle-ch { color: var(--ink); } .solo-bundle-tag { margin-left: auto; font-size: 12px; color: var(--ink-mute); letter-spacing: .02em; text-align: right; } .solo-bundle-item.is-primary .solo-bundle-tag { color: var(--kin-pale, var(--w-accent)); } .solo-bundle-note { margin: 6px 0 0; } .solo-head .solo-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 6vw, 30px); letter-spacing: .04em; margin: 6px 0 10px; } .solo-head .solo-title small { color: var(--ink-dim); font-size: .6em; } .solo-teaser { font-size: 16px; color: var(--ink); line-height: 1.95; } .solo-teaser-more { margin: 12px 0 0; padding: 10px 0 2px 14px; position: relative; font-family: var(--font-serif); font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); border-top: 1px solid var(--line-soft); } .solo-teaser-more::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 4px; width: 2px; background: linear-gradient(180deg, var(--kin), var(--kin-deep)); border-radius: 2px; } .r-step { position: relative; padding-left: 18px; color: var(--ink-soft); } .r-step::before { content: ""; position: absolute; left: 0; top: .95em; width: 8px; height: 1px; background: var(--kin); } .paywall-peek { list-style: none; padding: 0; margin: 4px auto 16px; max-width: var(--measure); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .paywall-peek li { background: var(--washi); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: 13px; color: var(--ink-soft); } .peek-toc { max-width: var(--measure); margin: 6px auto 16px; padding: 14px 16px 8px; background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--r-card, 14px); text-align: left; } .peek-toc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; letter-spacing: .04em; color: var(--ink); } .peek-toc-meta { font-family: var(--font-sans); font-weight: 400; font-size: 12px; color: var(--ink-mute); letter-spacing: .02em; } .peek-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: peektoc; } .peek-toc-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); } .peek-toc-list li:first-child { border-top: 0; } .peek-toc-list li::before { counter-increment: peektoc; content: counter(peektoc); font-family: var(--font-num); font-size: 12px; color: var(--kin-pale); min-width: 1.1em; flex: none; } .peek-toc-ch { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: .02em; } .peek-toc-sub { margin-left: auto; font-size: 12px; color: var(--ink-mute); letter-spacing: .02em; text-align: right; } .ent-consent { display: flex; align-items: flex-start; gap: 10px; text-align: left; background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; margin: 4px auto 16px; max-width: var(--measure); cursor: pointer; } .ent-consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--shu); } .ent-consent span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; } .ent-consent strong { color: var(--ink); } .ent-consent:has(input:checked) { border-color: var(--kin); background: color-mix(in srgb, var(--kin) 6%, var(--washi)); } .age-gate { text-align: left; background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; margin: 4px auto 16px; max-width: var(--measure); } .age-legend { color: var(--ink); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; padding: 0; margin: 0 0 10px; } .age-opt { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; margin: 0 0 8px; cursor: pointer; } .age-opt input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--shu); } .age-guardian { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--washi-2); color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; cursor: pointer; } .age-guardian input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--shu); } .age-guardian[hidden] { display: none; } .age-note { color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; margin: 8px 0 0; } .age-note-fold { margin: 8px 0 0; } .age-note-fold > summary { list-style: none; cursor: pointer; color: var(--ink-dim); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 7px; padding: 4px 2px; transition: color var(--t); } .age-note-fold > summary::-webkit-details-marker { display: none; } .age-note-fold > summary::before { content: "＋"; color: var(--kin-deep); font-weight: 700; font-size: 14px; line-height: 1; } .age-note-fold[open] > summary::before { content: "−"; } .age-note-fold > summary:hover { color: var(--ink-soft); } .age-note-fold > summary:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; border-radius: 6px; } .age-note-fold .age-note { margin: 6px 0 0; } .premium-card .age-opt input, .premium-card .age-guardian input { accent-color: var(--accent, var(--kin)); } .btn.is-disabled { opacity: .5; pointer-events: none; cursor: not-allowed; filter: grayscale(.3); } .article-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 16px; } .article-list li { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 22px; transition: border-color var(--t), transform .12s var(--ease); } .article-list li:hover { border-color: var(--kin); transform: translateY(-2px); } .article-list h2 { margin: 0 0 8px; font-size: 18px; font-family: var(--font-serif); font-weight: 600; color: var(--ink); letter-spacing: .04em; } .article-list h2 a { color: inherit; text-decoration: none; } .article-list h2 a:hover { color: var(--kin-pale); } .article-list .excerpt { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; } .article-list .more { color: var(--kin-pale); font-size: 13px; font-weight: 600; text-decoration: none; } .article-list .more:hover { color: var(--ink); } .article-list li.is-featured { border-color: var(--line); box-shadow: 0 0 0 1px rgba(184, 151, 106, .10) inset; } .article-doc .lead { font-size: 16px; color: var(--ink-soft); margin: 0 0 24px; } .article-doc p { margin: 0 0 16px; } .article-cta { margin: 36px 0 0; background: var(--washi); border: 1px solid var(--kin); border-radius: var(--r-key); padding: 24px 22px; text-align: center; } .article-cta h3 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: .04em; } .article-cta p { color: var(--ink-soft); font-size: 14px; margin: 0 0 16px; } .article-cta .btn { margin: 4px; } .star-mark svg, .persona-mark svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .astro-hero .lead { margin-top: 18px; } .astro-wheel { display: block; width: 100%; height: auto; overflow: visible; stroke-linejoin: miter; stroke-linecap: butt; } .astro-wheel .aw-ring { fill: none; stroke: var(--w-accent, var(--kin)); } .astro-wheel .aw-r-outer { stroke-width: 1.2; } .astro-wheel .aw-r-inner { stroke-width: .6; opacity: .8; } .astro-wheel .aw-deco-ring { fill: none; stroke: var(--w-accent, var(--kin)); stroke-width: .5; opacity: .55; } .astro-wheel .aw-tick { stroke: var(--w-accent, var(--kin)); stroke-width: .6; opacity: .32; } .astro-wheel .aw-tick-major { stroke-width: .8; opacity: .5; } .astro-wheel .aw-spoke { stroke: var(--w-accent, var(--kin)); stroke-width: .7; opacity: .26; } .astro-wheel .aw-cl-star { fill: var(--ink-soft); transition: fill var(--t); } .astro-wheel .aw-cl-line { fill: none; stroke: var(--ink-dim); stroke-width: .45; opacity: .22; transition: stroke var(--t), opacity var(--t); } .astro-wheel .aw-constellation-on .aw-cl-star { fill: var(--w-accent2, var(--kin-pale)); } .astro-wheel .aw-constellation-on .aw-cl-line { stroke: var(--w-accent, var(--kin)); opacity: .62; } .astro-wheel .aw-field-star { fill: var(--w-accent2, var(--kin-pale)); } .astro-wheel .aw-sh-1 { fill: var(--w-accent, var(--kin)); opacity: .05; } .astro-wheel .aw-sh-2 { fill: var(--w-accent2, var(--kin-pale)); opacity: .07; } .astro-wheel .aw-sh-3 { fill: var(--w-accent2, var(--kin-pale)); opacity: .13; } .astro-wheel .aw-ruler { fill: var(--w-accent, var(--kin)); font-family: var(--font-serif); font-size: 11px; opacity: .68; } .astro-wheel .aw-sunline { stroke: var(--w-accent, var(--kin)); stroke-width: 1; opacity: .55; } .astro-wheel .aw-sun-halo { fill: var(--w-accent, var(--kin)); opacity: .16; } .astro-wheel .aw-sun { fill: var(--w-accent2, var(--kin-pale)); stroke: var(--w-accent, var(--kin)); stroke-width: 1; } .astro-wheel .aw-moon-disc { fill: var(--washi-2); stroke: var(--line); stroke-width: 1; } .astro-wheel .aw-moon-lit { fill: var(--w-accent2, var(--kin-pale)); opacity: .42; } .astro-wheel .aw-center-ring { fill: none; stroke: var(--line); stroke-width: 1; } .astro-wheel .aw-center-dot { fill: var(--w-accent2, var(--kin-pale)); } .astro-wheel .aw-planet { fill: var(--ink-soft); font-family: var(--font-serif); font-size: 9.5px; } .astro-wheel .aw-planet-moon { fill: var(--ink); } .astro-wheel .aw-asc { fill: var(--w-accent, var(--kin)); font-family: var(--font-serif); font-size: 8px; font-weight: 700; letter-spacing: .03em; } .astro-wheel .aw-aspect { fill: none; stroke-width: .6; opacity: .42; } .astro-wheel .aw-aspect-tri, .astro-wheel .aw-aspect-sext { stroke: var(--w-accent, var(--kin)); } .astro-wheel .aw-aspect-conj { stroke: var(--w-accent, var(--kin)); stroke-width: .8; opacity: .5; } .astro-wheel .aw-aspect-squ, .astro-wheel .aw-aspect-opp { stroke: var(--ink-dim); stroke-dasharray: 2.4 2.4; opacity: .5; } .astro-hero-wheel { max-width: 288px; margin: 20px 0 8px; position: relative; z-index: 2; } .astro-hero-wheel::before { content: ""; position: absolute; inset: -8%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(138, 109, 34, .08) 0%, transparent 68%); pointer-events: none; } .astro-wheel-fig { margin: 0 0 18px; text-align: center; } .astro-wheel-fig .astro-wheel { max-width: 240px; margin: 0 auto; } .astro-wheel-cap { color: var(--ink-soft); font-size: 13.5px; margin: 12px 0 0; } .astro-wheel-cap b { color: var(--ink); font-family: var(--font-num); font-size: 15px; letter-spacing: .02em; } .astro-wheel-note { display: block; color: var(--ink-dim); font-size: 13px; margin-top: 4px; } .astro-chart { } .astro-sec { margin-top: 20px; } .astro-sec:first-of-type { margin-top: 0; } .astro-sec h4 { margin: 0 0 10px; font-family: var(--font-serif); font-weight: 600; letter-spacing: .05em; } .astro-calc h4 { color: var(--ink); font-size: 17px; } .astro-calc h4::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; vertical-align: middle; background: var(--w-accent, var(--kin)); transform: rotate(45deg); } .astro-facts { list-style: none; padding: 0; margin: 0; } .astro-facts li { font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: 18px; line-height: 1.72; letter-spacing: .02em; padding: 8px 0 8px 16px; position: relative; border-bottom: 1px solid var(--line-soft); } .astro-facts li:last-child { border-bottom: none; } .astro-facts li::before { content: ""; position: absolute; left: 0; top: 1em; width: 7px; height: 1px; background: var(--w-accent, var(--kin)); } .astro-facts b { color: var(--w-accent2, var(--kin-pale)); } .teller-grid { display: grid; gap: 18px; grid-template-columns: 1fr; } .teller-story p { color: var(--ink-soft); margin: 0 0 14px; max-width: var(--measure); } .teller-story p:last-child { margin-bottom: 0; } .craft-banner { background: var(--washi); border: 1px solid var(--kin); border-radius: var(--r-key); padding: 22px 20px; box-shadow: 0 0 0 1px rgba(184, 151, 106, .12) inset, var(--sh-2); } .craft-eyebrow { display: block; color: var(--kin-pale); font-size: 11px; font-weight: 600; letter-spacing: .22em; margin: 0 0 6px; } .craft-name { font-family: var(--font-serif); font-weight: 700; font-size: clamp(26px, 8vw, 34px); letter-spacing: .06em; margin: 0 0 12px; line-height: 1.3; } .craft-name .craft-reading { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-dim); letter-spacing: .3em; margin-top: 6px; } .craft-desc { color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; } .craft-desc strong { color: var(--ink); } .craft-points { list-style: none; padding: 0; margin: 0; } .craft-points li { position: relative; padding: 5px 0 5px 18px; color: var(--ink); font-size: 14px; } .craft-points li::before { content: ""; position: absolute; left: 0; top: 1em; width: 8px; height: 1px; background: var(--kin); } .craft-points strong { color: var(--kin-pale); } .craft-menu { list-style: none; counter-reset: none; padding: 0; margin: 0; display: grid; gap: 14px; } .craft-menu-item { display: flex; gap: 16px; align-items: flex-start; background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 20px; transition: border-color var(--t), transform .12s var(--ease); } .craft-menu-item:hover { border-color: var(--kin); transform: translateY(-1px); } .craft-menu-item .cm-no { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 18px; color: var(--kin-pale); border: 1px solid var(--line); border-radius: 50%; background: var(--washi-2); } .craft-menu-item .cm-body { flex: 1; } .craft-menu-item h3 { font-family: var(--font-serif); font-weight: 600; font-size: 17px; letter-spacing: .03em; margin: 2px 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cm-free { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #1A1A1A; background: var(--grad-gold); border-radius: 12px; padding: 3px 10px; } .cm-price { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px 10px; white-space: nowrap; } .menu-pricing-note { color: var(--ink-mute); margin: -2px 0 18px; } .craft-menu-item p { color: var(--ink-soft); font-size: 14px; margin: 0 0 10px; } .cm-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; min-height: 44px; box-sizing: border-box; padding: 10px 22px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--ink); background: transparent; border: 1.5px solid var(--kin); border-radius: 12px; text-decoration: none; transition: background .15s, color .15s, transform .15s; } .cm-link:hover, .cm-link:focus-visible { background: var(--grad-gold); color: #1A1A1A; transform: translateY(-1px); } .angle-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } .angle-card { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 20px; transition: border-color var(--t); } .angle-card:hover { border-color: var(--kin); } .angle-glyph { display: inline-block; font-family: var(--font-serif); font-size: 26px; line-height: 1; color: var(--kin-pale); margin: 0 0 10px; } .angle-card h3 { font-family: var(--font-serif); font-weight: 600; font-size: 17px; letter-spacing: .03em; margin: 0 0 8px; } .angle-card p { color: var(--ink-soft); font-size: 14px; margin: 0; } .angle-note { margin-top: 18px; } @media (min-width: 720px) { .teller-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } .angle-grid { grid-template-columns: repeat(3, 1fr); } .astro-hero .hero-inner { display: grid; grid-template-columns: 1.35fr .9fr; gap: 32px; align-items: center; } .astro-hero .hero-inner > .hero-poem, .astro-hero .hero-inner > .eyebrow, .astro-hero .hero-inner > .hero-sub, .astro-hero .hero-inner > .world-persona, .astro-hero .hero-inner > .note { grid-column: 1; } .astro-hero .hero-inner > h1 { grid-column: 1 / -1; } .astro-hero .eyebrow { justify-self: start; } .astro-hero-wheel { grid-column: 2; grid-row: 1 / -1; align-self: center; max-width: 300px; margin: 0 auto; } } .astro-hero-result { text-align: center; margin-bottom: 6px; } .astro-hero-result .r-eyebrow { text-align: center; } .astro-sign-name { font-family: var(--font-serif); font-weight: 700; font-feature-settings: "palt" 1; font-size: clamp(30px, 9vw, 46px); line-height: 1.3; letter-spacing: .04em; margin: 4px 0 14px; color: var(--ink); } .astro-sign-name small { display: block; font-family: var(--font-serif); font-weight: 500; font-size: clamp(14px, 4.2vw, 17px); letter-spacing: .08em; color: var(--ink-soft); margin-top: 10px; } .astro-hero-result .astro-facet-src { font-size: 12.5px; line-height: 1.7; color: var(--ink-dim); max-width: var(--measure); margin: -6px auto 14px; text-align: center; } .astro-calc-fold-body .astro-facet-src { font-size: 12.5px; line-height: 1.7; color: var(--ink-dim); margin: 0 0 12px; text-align: left; } .astro-triad { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 10px auto 18px; max-width: 30em; border: 1px solid var(--line); border-radius: var(--r-key); background: var(--washi); overflow: hidden; } .astro-triad-item { flex: 1 1 0; min-width: 88px; padding: 12px 10px; text-align: center; border-left: 1px solid var(--line); } .astro-triad-item:first-child { border-left: 0; } .astro-triad-item dt { font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); margin: 0 0 5px; } .astro-triad-item dd { margin: 0; } .astro-triad-body { display: block; font-family: var(--font-serif); font-weight: 700; font-size: clamp(15px, 4.4vw, 18px); color: var(--ink); letter-spacing: .02em; font-feature-settings: "palt" 1; } .astro-triad-deg { display: inline-block; margin-top: 3px; font-family: var(--font-num); font-size: 12.5px; color: var(--ink-soft); } .astro-triad-note { display: inline-block; margin-left: 5px; font-size: 11px; color: var(--ink-dim); } .astro-triad-asc .astro-triad-body { color: var(--kin-deep); } .astro-hero-result .astro-weave { font-size: clamp(14.5px, 4vw, 16px); line-height: 1.95; color: var(--ink-soft); max-width: var(--measure); margin: 4px auto 16px; text-align: left; font-feature-settings: "palt" 1; } .astro-hero-result .astro-oracle { font-family: var(--font-serif); font-size: clamp(15.5px, 4.6vw, 18.5px); line-height: 1.85; color: var(--ink); letter-spacing: .03em; max-width: var(--measure); margin: 2px auto 16px; text-align: center; font-feature-settings: "palt" 1; } .astro-read { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-key); padding: 24px 22px; margin-top: 18px; box-shadow: var(--sh-1); } .astro-read-h { font-family: var(--font-serif); font-weight: 600; font-size: 17px; letter-spacing: .05em; color: var(--ink); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .astro-read p { font-size: 17px; line-height: 1.95; letter-spacing: .02em; color: var(--ink); max-width: var(--measure); margin: 0 0 var(--s4); } .astro-read p:last-child { margin-bottom: 0; } .astro-read b { font-weight: 700; color: var(--ink); } .strength-list { list-style: none; padding: 0; margin: 0 0 14px; } .strength-list li { position: relative; padding: 7px 0 7px 20px; color: var(--ink); font-size: 16px; line-height: 1.8; } .strength-list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 9px; height: 1px; background: var(--kin); } .strength-weak { font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); margin: 0; max-width: var(--measure); } .astro-read-love { background: linear-gradient(180deg, rgba(184, 151, 106, .07), rgba(184, 151, 106, .03)), var(--washi); border-color: var(--kin); box-shadow: 0 0 0 1px rgba(184, 151, 106, .10) inset, var(--sh-2); } .theme-focus-badge { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: #1A1A1A; background: var(--grad-gold); border-radius: 12px; padding: 3px 10px; white-space: nowrap; } .astro-read-blood .blood-type { margin-left: 10px; font-family: var(--font-num); font-size: 16px; color: var(--w-accent2, var(--kin-pale)); letter-spacing: .04em; vertical-align: middle; } .astro-read-blood .blood-omake { margin-left: 8px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; vertical-align: middle; white-space: nowrap; } .astro-read-blood p { color: var(--ink-soft); } .theme-hook { margin: 16px 0 0; } .theme-hook-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-family: var(--font-sans); font-size: 14px; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--kin); padding-bottom: 2px; transition: color var(--t), border-color var(--t); } .theme-hook-link:hover { color: var(--ink); border-bottom-color: var(--kin-pale); } .theme-hook-arrow { color: var(--kin-pale); font-family: var(--font-num); font-size: 16px; } .astro-read-hitokoto .hitokoto-date { font-family: var(--font-sans); font-weight: 400; font-size: 13px; color: var(--ink-dim); letter-spacing: .1em; } .hitokoto-line { color: var(--ink); } .hitokoto-action { font-size: 15.5px !important; line-height: 1.85 !important; color: var(--ink-soft) !important; padding-left: 18px; position: relative; max-width: var(--measure); } .hitokoto-action::before { content: ""; position: absolute; left: 0; top: .95em; width: 9px; height: 1px; background: var(--kin); } .hitokoto-action-label { display: block; font-size: 13px; color: var(--ink-dim); letter-spacing: .12em; margin-bottom: 2px; } .astro-read .tiny { max-width: var(--measure); margin-top: 12px; } .astro-read-match .r-match li { font-size: 15.5px; } .astro-scorebars { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-key); padding: 22px 22px 18px; margin-top: 18px; box-shadow: var(--sh-1); } .astro-scorebars .astro-read-h { margin-bottom: 6px; } .sb-row { margin-top: 18px; } .sb-label { display: block; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 8px; } .sb-track.sb-discrete { display: flex; gap: 6px; } .sb-tick { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .sb-dot { width: 100%; height: 4px; border-radius: 12px; background: var(--line-soft); } .sb-tick.on .sb-dot { background: var(--kin); box-shadow: 0 0 0 1px rgba(184, 151, 106, .3); } .sb-tick-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: .04em; color: var(--ink-dim); } .sb-tick.on .sb-tick-label { color: var(--ink); font-weight: 600; } .sb-track.sb-continuous { position: relative; height: 6px; border-radius: 12px; background: linear-gradient(90deg, var(--washi-2), var(--line) 50%, var(--washi-2)); border: 1px solid var(--line-soft); } .sb-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--kin-pale); border: 1px solid var(--kin); box-shadow: 0 0 0 3px rgba(184, 151, 106, .14); } .sb-continuous + .sb-eff { display: inline-block; margin-top: 8px; font-family: var(--font-sans); font-size: 12.5px; color: var(--kin-deep); letter-spacing: .04em; } .sb-pair-cells { display: flex; align-items: center; gap: 12px; } .sb-pair-cell { display: flex; flex-direction: column; } .sb-pair-cell small { font-size: 11px; color: var(--ink-dim); letter-spacing: .1em; margin-bottom: 2px; } .sb-pair-cell b { font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: .04em; } .sb-pair-sep { color: var(--ink-dim); font-size: 15px; } .astro-calc-fold { margin-top: 22px; background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-card); padding: 0 20px; } .astro-calc-fold summary { list-style: none; cursor: pointer; position: relative; padding: 18px 28px 18px 0; min-height: 44px; display: flex; align-items: center; font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; letter-spacing: .03em; color: var(--ink-soft); } .astro-calc-fold summary::-webkit-details-marker { display: none; } .astro-calc-fold summary::after { content: "＋"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--kin-deep); font-weight: 600; } .astro-calc-fold[open] summary::after { content: "−"; } .astro-calc-fold-body { padding: 0 0 18px; } .astro-calc-fold-body .astro-sec { margin-top: 16px; } .astro-calc-fold-body .astro-sec:first-of-type { margin-top: 0; } .astro-calc-fold-body .astro-sec h4 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; font-size: 14px; color: var(--ink-soft); letter-spacing: .04em; } .astro-calc-fold-body .astro-facts { list-style: none; padding: 0; margin: 0; } .astro-calc-fold-body .astro-facts li { font-family: var(--font-num); color: var(--ink-dim); font-size: 13.5px; line-height: 1.7; letter-spacing: .01em; padding: 6px 0 6px 14px; position: relative; border-bottom: 1px solid var(--line-soft); } .astro-calc-fold-body .astro-facts li:last-child { border-bottom: none; } .astro-calc-fold-body .astro-facts li::before { content: ""; position: absolute; left: 0; top: 1em; width: 6px; height: 1px; background: var(--line); } .astro-calc-fold-body .tiny { margin-top: 14px; } .astro-fine-fold { margin-top: 18px; border: 1px solid var(--kin-line, var(--line)); border-radius: var(--r-card); padding: 0 20px; background: linear-gradient(180deg, rgba(184,150,60,.05), rgba(184,150,60,.01)); } .astro-fine-fold summary { list-style: none; cursor: pointer; position: relative; padding: 18px 28px 18px 0; min-height: 44px; display: flex; align-items: center; font-family: var(--font-serif); font-weight: 600; font-size: 14.5px; letter-spacing: .04em; color: var(--kin-deep); } .astro-fine-fold summary::-webkit-details-marker { display: none; } .astro-fine-fold summary::after { content: "＋"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--kin-deep); font-weight: 600; } .astro-fine-fold[open] summary::after { content: "−"; } .astro-fine-fold-body { padding: 0 0 20px; } .astro-fine-fold-body .astro-read { border: none; background: none; padding: 0; margin: 0 0 18px; box-shadow: none; } .astro-fine-fold-body .astro-read:last-child { margin-bottom: 0; } @media (min-width: 720px) { .astro-read { padding: 28px 28px; } .astro-scorebars { padding: 26px 28px 22px; } } .r-tier { position: relative; } .r-tier + .r-tier { margin-top: 40px; } @media (min-width: 1040px) { .r-tier + .r-tier { margin-top: 56px; } } .r-tier-calc:empty { display: none; } .r-tier-read { background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent, var(--kin)) 5%, transparent), transparent 60%); padding-top: 8px; } .r-tier-read::before { content: attr(data-tier-label); display: block; font-family: var(--font-serif); font-weight: 600; font-size: clamp(13px, 3.6vw, 15px); letter-spacing: .14em; color: var(--ink-soft); text-align: center; padding: 6px 0 18px; } .r-tier-calc:has(.astro-calc-fold)::before { content: "算出の根拠"; display: block; font-family: var(--font-mute); font-size: 13px; letter-spacing: .12em; color: var(--ink-dim); text-align: center; padding: 4px 0 10px; } .r-crown-emblem { display: flex; justify-content: center; margin: 2px auto 10px; } .r-crown-emblem svg { width: 88px; height: 88px; opacity: .9; } @media (min-width: 1040px) { .r-crown-emblem svg { width: 104px; height: 104px; } } @media (prefers-reduced-motion: reduce) { .craft-menu-item, .craft-menu-item:hover, .angle-card, .astro-wheel .aw-cl-star, .astro-wheel .aw-cl-line, .theme-hook-link { transition: none; } .craft-menu-item:hover { transform: none; } } .world-body { position: relative; } .world-body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 18% 24%, rgba(138, 109, 34, .30), transparent 62%), radial-gradient(1.1px 1.1px at 72% 15%, rgba(138, 109, 34, .22), transparent 62%), radial-gradient(1px 1px at 41% 60%, rgba(106, 83, 24, .20), transparent 62%), radial-gradient(1.3px 1.3px at 87% 71%, rgba(138, 109, 34, .18), transparent 62%), radial-gradient(1px 1px at 29% 86%, rgba(106, 83, 24, .15), transparent 62%), radial-gradient(1.1px 1.1px at 62% 42%, rgba(138, 109, 34, .14), transparent 62%); opacity: .5; } .world-body > main, .world-body > header, .world-body > footer { position: relative; z-index: 1; } .site-header { z-index: 40; } .astro-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); } .astro-sky.is-on { opacity: 1; } .astro-sky.is-static { opacity: .5; } .reveal-ceremony { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: radial-gradient(125% 95% at 50% 36%, #2c2560 0%, #1b1444 40%, #0d0a26 76%, #070512 100%); opacity: 1; transition: opacity .55s var(--ease); pointer-events: auto; cursor: pointer; overflow: hidden; } .reveal-ceremony.is-closing { opacity: 0; } .reveal-ceremony { --rc-c: var(--rc-accent, var(--w-accent, var(--kin))); --rc-c2: var(--rc-accent2, var(--w-accent2, var(--kin-pale))); } .rc-stage { position: relative; text-align: center; --rc-scale: 1; transform: scale(var(--rc-scale)); will-change: transform; } @media (min-width: 640px) { .rc-stage { --rc-scale: 1.35; } } @media (min-width: 1024px) { .rc-stage { --rc-scale: 1.95; } } @media (min-width: 1440px) { .rc-stage { --rc-scale: 2.4; } } .reveal-ceremony.is-playing .rc-stage { animation: rcStageBreath 2.2s var(--ease) both; } @keyframes rcStageBreath { 0% { transform: scale(calc(var(--rc-scale) * .965)); } 28% { transform: scale(calc(var(--rc-scale) * 1)); } 78% { transform: scale(calc(var(--rc-scale) * 1)); } 88% { transform: scale(calc(var(--rc-scale) * 1.03)); } 100% { transform: scale(calc(var(--rc-scale) * 1)); } } .rc-burst { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 3; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, var(--rc-c2) 0%, var(--rc-c) 30%, transparent 70%); mix-blend-mode: screen; } .reveal-ceremony.is-playing .rc-burst { animation: rcBurst .85s var(--ease) 1.5s forwards; } @keyframes rcBurst { 0% { opacity: 0; transform: scale(.3); } 38% { opacity: .72; } 100% { opacity: 0; transform: scale(4.2); } } .rc-wheel { position: relative; z-index: 2; width: 148px; height: 148px; display: block; margin: 0 auto; overflow: visible; } .rc-ring { fill: none; stroke: var(--rc-c); stroke-width: 1.2; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 1; } .reveal-ceremony.is-playing .rc-r1 { animation: rcDraw 1s var(--ease) .05s forwards; } .reveal-ceremony.is-playing .rc-r2 { animation: rcDraw 1s var(--ease) .22s forwards; opacity: .6; } .reveal-ceremony.is-playing .rc-r3 { animation: rcDraw 1s var(--ease) .39s forwards; opacity: .45; } @keyframes rcDraw { to { stroke-dashoffset: 0; } } .rc-dial { transform-box: view-box; transform-origin: 60px 60px; opacity: 0; } .reveal-ceremony.is-playing .rc-dial { animation: rcDialIn .6s var(--ease) .15s forwards, rcSpin 22s linear .15s infinite; } @keyframes rcDialIn { to { opacity: 1; } } @keyframes rcSpin { to { transform: rotate(360deg); } } .rc-hand { stroke: var(--rc-c2); stroke-width: 1.6; stroke-linecap: round; opacity: 0; transform-box: view-box; transform-origin: 60px 60px; filter: drop-shadow(0 0 3px var(--rc-c)); } .reveal-ceremony.is-playing .rc-hand { animation: rcHandIn .5s var(--ease) .35s forwards, rcSweep 1.3s cubic-bezier(.4, 0, .2, 1) .35s forwards, rcHandOut .5s var(--ease) 1.5s forwards; } @keyframes rcHandIn { to { opacity: .8; } } @keyframes rcSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rcHandOut { to { opacity: 0; } } .rc-glow { fill: var(--rc-c); opacity: 0; } .rc-core { fill: var(--rc-c2); opacity: 0; transform-box: fill-box; transform-origin: center; } .reveal-ceremony.is-playing .rc-glow { animation: rcGlow 1s var(--ease) 1.0s forwards; } .reveal-ceremony.is-playing .rc-core { animation: rcBloom .9s var(--ease) 1.0s forwards; } @keyframes rcGlow { to { opacity: .42; } } @keyframes rcBloom { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } } .rc-orbs { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; transform: translate(-50%, -50%); pointer-events: none; } .rc-orb { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--a, 0deg)); } .rc-orb::before { content: ""; position: absolute; left: 0; top: 0; width: var(--sz, 3px); height: var(--sz, 3px); margin: calc(var(--sz, 3px) / -2) 0 0 calc(var(--sz, 3px) / -2); border-radius: 50%; background: #fff; opacity: 0; transform: translateX(0); box-shadow: 0 0 5px var(--rc-c), 0 0 11px var(--rc-c); } .reveal-ceremony.is-playing .rc-orb { animation: rcOrbSpin var(--spin, 3s) linear var(--dly, 0s) infinite; } .reveal-ceremony.is-playing .rc-orb.rc-orb-rev { animation-direction: reverse; } .reveal-ceremony.is-playing .rc-orb::before { animation: rcOrbIn .7s var(--ease) var(--dly, 0s) forwards, rcOrbTwinkle 1.8s var(--ease) calc(var(--dly, 0s) + .7s) infinite; } @keyframes rcOrbIn { from { transform: translateX(0); opacity: 0; } to { transform: translateX(var(--d, 60px)); opacity: .9; } } @keyframes rcOrbTwinkle { 0%, 100% { transform: translateX(var(--d, 60px)); opacity: .4; } 50% { transform: translateX(var(--d, 60px)); opacity: .95; } } @keyframes rcOrbSpin { from { transform: rotate(var(--a, 0deg)); } to { transform: rotate(calc(var(--a, 0deg) + 360deg)); } } .rc-sym { position: absolute; left: 50%; top: 50%; z-index: 2; width: 56px; height: 56px; transform: translate(-50%, -50%) scale(.7); margin-top: -10px; color: var(--rc-c2); opacity: 0; pointer-events: none; } .rc-sym .star-mark, .rc-sym svg { width: 56px; height: 56px; display: block; } .rc-sym svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .reveal-ceremony.is-playing .rc-sym { animation: rcSymIn 1.15s var(--ease) .95s forwards; } @keyframes rcSymIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 55% { opacity: .5; transform: translate(-50%, -50%) scale(1); } 100% { opacity: .92; transform: translate(-50%, -50%) scale(1.06); } } .rc-caption { margin: 20px 0 0; font-family: var(--font-serif); color: #ECE9F8; letter-spacing: .12em; font-size: 15px; opacity: 0; text-shadow: 0 0 18px color-mix(in srgb, var(--rc-c) 55%, transparent); } .reveal-ceremony.is-playing .rc-caption { animation: rcFadeIn .6s var(--ease) .35s forwards; } .rc-skip { margin: 10px 0 0; font-family: var(--font-sans); color: rgba(226,222,246,.55); font-size: 11px; letter-spacing: .08em; opacity: 0; } .reveal-ceremony.is-playing .rc-skip { animation: rcFadeIn .5s var(--ease) 1.2s forwards; } @keyframes rcFadeIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .reveal-ceremony.is-playing .rc-dial, .reveal-ceremony.is-playing .rc-hand, .reveal-ceremony.is-playing .rc-orb, .reveal-ceremony.is-playing .rc-burst, .reveal-ceremony.is-playing .rc-stage { animation: none; } } .result-reveal { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: auto; cursor: pointer; --rv-c: var(--rv-accent, var(--w-accent, var(--kin))); --rv-c2: var(--rv-accent2, var(--kin-pale)); } .rv-veil { position: absolute; left: -7%; right: -7%; z-index: 1; background: linear-gradient(180deg, #14233f 0%, #0c1428 48%, #070c16 100%); will-change: transform; } .rv-veil-top { top: -4%; height: 56%; transform-origin: 50% 100%; } .rv-veil-bot { bottom: -4%; height: 56%; transform-origin: 50% 0%; background: linear-gradient(0deg, #14233f 0%, #0c1428 48%, #070c16 100%); } .result-reveal.is-opening .rv-veil-top { animation: rvOpenTop .58s var(--ease) forwards; } .result-reveal.is-opening .rv-veil-bot { animation: rvOpenBot .58s var(--ease) forwards; } @keyframes rvOpenTop { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-6%, -108%) rotate(-6deg); } } @keyframes rvOpenBot { from { transform: translate(0, 0) rotate(0); } to { transform: translate(6%, 108%) rotate(6deg); } } .rv-band { position: absolute; z-index: 2; top: -60%; left: -40%; width: 40%; height: 220%; transform: rotate(24deg) translateX(-260%); opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--rv-c) 22%, transparent) 42%, color-mix(in srgb, var(--rv-c2) 55%, transparent) 50%, color-mix(in srgb, var(--rv-c) 22%, transparent) 58%, transparent 100%); filter: blur(6px); } .result-reveal.is-playing .rv-band { animation: rvBand 1.15s var(--ease) .06s forwards; } @keyframes rvBand { 0% { opacity: 0; transform: rotate(24deg) translateX(-260%); } 22% { opacity: .85; } 70% { opacity: .5; } 100% { opacity: 0; transform: rotate(24deg) translateX(320%); } } .rv-sky { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .rv-star { position: absolute; left: var(--x); top: var(--y); width: var(--sz, 3px); height: var(--sz, 3px); margin: calc(var(--sz, 3px) / -2); border-radius: 50%; background: #fff; opacity: 0; transform: scale(.3); box-shadow: 0 0 6px var(--rv-c), 0 0 13px var(--rv-c2); } .result-reveal.is-playing .rv-star { animation: rvStarIn 1.25s var(--ease) var(--dly, 0s) both; } @keyframes rvStarIn { 0% { opacity: 0; transform: translateY(16px) scale(.28); } 42% { opacity: 1; transform: translateY(0) scale(1); } 78% { opacity: .82; } 100% { opacity: .55; transform: translateY(-7px) scale(.9); } } .rv-streaks { position: absolute; inset: -20%; z-index: 3; pointer-events: none; } .rv-streak { position: absolute; top: var(--top); left: 0; width: 150%; height: 2px; opacity: 0; transform: rotate(-24deg) translateX(-80%); background: linear-gradient(90deg, transparent 0%, var(--rv-c2) 40%, var(--rv-c) 60%, transparent 100%); } .result-reveal.is-playing .rv-streak { animation: rvStreak var(--dur, .9s) var(--ease) var(--dly, 0s) forwards; } @keyframes rvStreak { 0% { opacity: 0; transform: rotate(-24deg) translateX(-80%); } 28% { opacity: .9; } 72% { opacity: .5; } 100% { opacity: 0; transform: rotate(-24deg) translateX(80%); } } .rv-center { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: opacity .3s var(--ease); } .result-reveal.is-opening .rv-center, .result-reveal.is-opening .rv-sky, .result-reveal.is-opening .rv-streaks { opacity: 0; } .rv-sym { width: 66px; height: 66px; color: var(--rv-c2); opacity: 0; transform: scale(.6); display: inline-flex; align-items: center; justify-content: center; } .rv-sym .star-mark, .rv-sym svg { width: 66px; height: 66px; display: block; } .rv-sym svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .result-reveal.is-playing .rv-sym { animation: rvSymPulse 1.2s var(--ease) .2s both; } @keyframes rvSymPulse { 0% { opacity: 0; transform: scale(.6); } 55% { opacity: .9; transform: scale(1.05); } 100% { opacity: .8; transform: scale(1); } } .rv-caption { margin: 22px 0 0; font-family: var(--font-serif); color: #ECE9F8; letter-spacing: .16em; font-size: 16px; opacity: 0; text-shadow: 0 0 22px color-mix(in srgb, var(--rv-c) 60%, transparent); } .result-reveal.is-playing .rv-caption { animation: rvCaptionIn .7s var(--ease) .32s both; } @keyframes rvCaptionIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .rv-skip { margin: 12px 0 0; font-family: var(--font-sans); color: rgba(226,222,246,.5); font-size: 11px; letter-spacing: .08em; opacity: 0; } .result-reveal.is-playing .rv-skip { animation: rvCaptionIn .5s var(--ease) 1.05s both; } @media (min-width: 640px) { .rv-caption { font-size: 19px; } .rv-sym, .rv-sym .star-mark, .rv-sym svg { width: 84px; height: 84px; } } @media (min-width: 1024px) { .rv-caption { font-size: 22px; } .rv-sym, .rv-sym .star-mark, .rv-sym svg { width: 104px; height: 104px; } } @media (prefers-reduced-motion: reduce) { .result-reveal { display: none !important; } } .q-card.just-cued { animation: qCardCue 1.15s var(--ease); } @keyframes qCardCue { 0% { box-shadow: var(--sh-1); } 16% { box-shadow: 0 0 0 3px rgba(184, 151, 106, .30), 0 12px 34px rgba(184, 151, 106, .20); } 100% { box-shadow: var(--sh-1); } } @media (prefers-reduced-motion: reduce) { .q-card.just-cued { animation: none; } } .q-card { animation: qStepIn .34s var(--ease) both; } @keyframes qStepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes rcPaneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .w-pane.is-shown { animation: rcPaneIn .32s var(--ease) both; } .sr-armed .reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .75s var(--ease), transform .75s var(--ease); } .sr-armed .reveal-on-scroll.is-revealed { opacity: 1; transform: none; } .sr-armed .reveal-on-scroll.is-revealed .sec-title { background-image: linear-gradient(100deg, currentColor 0 42%, var(--star-warm) 50%, currentColor 58% 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: titleGleam 1.2s var(--ease) .12s 1 both; } @keyframes titleGleam { from { background-position: 120% 0; } to { background-position: -20% 0; } } .sr-armed .reveal-stagger.is-revealed > * { animation: riseStagger .7s var(--ease) both; } .sr-armed .reveal-stagger.is-revealed > *:nth-child(1) { animation-delay: 0s; } .sr-armed .reveal-stagger.is-revealed > *:nth-child(2) { animation-delay: .07s; } .sr-armed .reveal-stagger.is-revealed > *:nth-child(3) { animation-delay: .14s; } .sr-armed .reveal-stagger.is-revealed > *:nth-child(4) { animation-delay: .21s; } .sr-armed .reveal-stagger.is-revealed > *:nth-child(n+5) { animation-delay: .28s; } @keyframes riseStagger { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .sr-armed .reveal-on-scroll .sec-title { transform: translateY(28px); opacity: 0; } .sr-armed .reveal-on-scroll.is-revealed .sec-title { transform: none; opacity: 1; transition: transform .8s var(--ease), opacity .8s var(--ease); } .sr-armed .reveal-on-scroll .rule-draw { transform: scaleX(0); } .sr-armed .reveal-on-scroll.is-revealed .rule-draw { transform: scaleX(1); transition: transform 1s var(--ease) .15s; } .sr-armed .reveal-on-scroll .angle-card { opacity: 0; transform: translateY(20px); } .sr-armed .reveal-on-scroll.is-revealed .angle-card { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); } .sr-armed .reveal-on-scroll.is-revealed .angle-card:nth-child(2) { transition-delay: .12s; } .sr-armed .reveal-on-scroll.is-revealed .angle-card:nth-child(3) { transition-delay: .24s; } .pin-armed .angle-sec { position: sticky; top: 0; } @media (prefers-reduced-motion: reduce) { .sr-armed .reveal-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; } .sr-armed .reveal-on-scroll.is-revealed .sec-title { animation: none; -webkit-text-fill-color: currentColor; } .sr-armed .reveal-stagger.is-revealed > * { animation: none; } .sr-armed .reveal-on-scroll .sec-title, .sr-armed .reveal-on-scroll .rule-draw, .sr-armed .reveal-on-scroll .angle-card { transform: none; opacity: 1; } .pin-armed .angle-sec { position: static; } } .night-page .btn-primary { position: relative; overflow: hidden; } .night-page .btn-primary::before { content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 250, 235, .42), transparent); transform: translateX(-160%); pointer-events: none; } .night-page .btn-primary:hover::before, .night-page .btn-primary:focus-visible::before { animation: btnSheen .7s var(--ease) 1; } @keyframes btnSheen { to { transform: translateX(220%); } } .night-page .hero-slideshow { animation: heroGild 1.1s var(--ease) both; } @keyframes heroGild { from { opacity: 0; transform: scale(.986); } to { opacity: 1; transform: none; } } .night-page .hero-sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; } .night-page .hero-sweep::before { content: ""; position: absolute; top: -20%; left: 0; width: 55%; height: 140%; background: linear-gradient(105deg, transparent 42%, rgba(255, 250, 235, .30) 50%, transparent 58%); transform: translateX(-140%) rotate(2deg); mix-blend-mode: screen; animation: heroSweep 1.5s var(--ease) .45s 1 both; } @keyframes heroSweep { to { transform: translateX(240%) rotate(2deg); } } @media (prefers-reduced-motion: reduce) { .night-page .btn-primary::before { display: none; } .night-page .hero-slideshow { animation: none; } .night-page .hero-sweep { display: none; } } .world-body .astro-read { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 96px), var(--washi); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 7px 20px -16px rgba(60, 48, 24, .28); } .world-body .astro-read p.read-p { font-family: var(--font-serif); font-weight: 500; font-size: clamp(16px, 4.3vw, 17.5px); line-height: 2.05; letter-spacing: .03em; color: var(--ink); font-feature-settings: "palt" 1; max-width: var(--measure); background-image: radial-gradient(circle, rgba(138, 109, 34, .22) 0.5px, transparent 0.6px); background-size: 5px 2.05em; background-position: 0 1.9em; background-repeat: repeat; padding-bottom: 2px; } .world-body .astro-read p.read-p:first-of-type { font-size: clamp(16.5px, 4.7vw, 18.5px); line-height: 2.05; } .world-body .astro-read p:not(.read-p), .world-body .astro-read .strength-list li { line-height: 2.05; background-image: radial-gradient(circle, rgba(138, 109, 34, .22) 0.5px, transparent 0.6px); background-size: 5px 2.05em; background-position: 0 1.9em; background-repeat: repeat; } .world-body .astro-read-h { position: relative; border-bottom: none; padding: 0 0 13px 14px; font-size: 18px; } .world-body .astro-read-h::before { content: ""; position: absolute; left: 0; top: .14em; width: 3px; height: 1.02em; background: linear-gradient(180deg, var(--kin-pale), var(--kin-deep)); border-radius: 2px; } .world-body .astro-read-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--kin) 0%, var(--kin) 14%, var(--line) 56%, transparent 100%); } .world-body .astro-read-love:not([data-focus="1"]) { background: linear-gradient(180deg, rgba(184, 151, 106, .045), rgba(184, 151, 106, .012) 130px), var(--washi); border-color: rgba(138, 109, 34, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 26px -18px rgba(60, 48, 24, .3); } .world-body .astro-read[data-focus="1"] { background: radial-gradient(120% 82% at 50% -12%, rgba(184, 151, 106, .12), transparent 58%), linear-gradient(180deg, rgba(184, 151, 106, .06), rgba(184, 151, 106, .018) 140px), var(--washi); border-color: var(--kin); box-shadow: inset 0 0 0 1px rgba(138, 109, 34, .22), inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 50px -28px rgba(60, 48, 24, .34); } .world-body .astro-read[data-focus="1"]::after { content: "✦"; position: absolute; bottom: 14px; right: 16px; color: var(--kin); opacity: .3; font-size: 13px; line-height: 1; pointer-events: none; } .world-body .astro-hero-result { position: relative; overflow: hidden; padding: 30px 20px 22px; margin-bottom: 16px; background: radial-gradient(82% 120% at 50% 0%, rgba(184, 151, 106, .12), transparent 56%), linear-gradient(180deg, var(--washi-2), var(--washi)); border: 1px solid var(--line); border-radius: var(--r-key); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 52px -30px rgba(60, 48, 24, .32); } .world-body .astro-hero-result .astro-sign-name { font-size: clamp(34px, 10vw, 52px); text-shadow: 0 1px 18px rgba(138, 109, 34, .14); } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .world-body #resultBody > *:not(.paywall):not(.locked) { animation: riseIn .7s var(--ease) both; } .world-body #resultBody > *:nth-child(1) { animation-delay: .02s; } .world-body #resultBody > *:nth-child(2) { animation-delay: .10s; } .world-body #resultBody > *:nth-child(3) { animation-delay: .18s; } .world-body #resultBody > *:nth-child(4) { animation-delay: .26s; } .world-body #resultBody > *:nth-child(5) { animation-delay: .34s; } .world-body #resultBody > *:nth-child(6) { animation-delay: .42s; } .world-body #resultBody > *:nth-child(7) { animation-delay: .50s; } .world-body #resultBody > *:nth-child(8) { animation-delay: .58s; } .world-body #resultBody > *:nth-child(n+9) { animation-delay: .64s; } @keyframes wheelIn { from { opacity: 0; transform: rotate(-9deg) scale(.93); } to { opacity: 1; transform: none; } } .world-body .astro-wheel-fig .astro-wheel { transform-origin: 50% 50%; animation: wheelIn 1.15s var(--ease) both .18s; } @keyframes sunBloom { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } .world-body .astro-wheel-fig .aw-sun, .world-body .astro-wheel-fig .aw-sun-halo { transform-box: fill-box; transform-origin: center; animation: sunBloom 1s var(--ease) both .95s; } @keyframes sunlineIn { from { opacity: 0; } to { opacity: .55; } } .world-body .astro-wheel-fig .aw-sunline { animation: sunlineIn .6s var(--ease) both 1.0s; } .find-hero { text-align: center; } .find-hero .hero-inner { margin: 0 auto; } .find-hero .eyebrow.center, .find-hero .eyebrow { text-align: center; } .find-hero .lead { margin-left: auto; margin-right: auto; } .find-card { background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-key); padding: 30px 22px; box-shadow: var(--sh-2); max-width: var(--w-form); margin: 0 auto; } .find-step { color: var(--kin-pale); font-size: 12px; font-weight: 600; letter-spacing: .18em; margin: 0 0 12px; } .find-q { font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 5.2vw, 24px); margin: 0 0 20px; line-height: 1.5; letter-spacing: .04em; } .find-opts { display: block; } .find-opt { display: block; width: 100%; text-align: left; margin: 12px 0 0; padding: 17px 18px; min-height: 56px; background: var(--washi-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); font: inherit; font-size: 16px; cursor: pointer; transition: border-color var(--t), background var(--t), transform .12s var(--ease); } .find-opt:hover { border-color: var(--kin); background: rgba(184, 151, 106, .06); transform: translateY(-1px); } .find-result { text-align: center; border-color: var(--kin-pale); } .find-result .find-step { color: var(--ink-dim); letter-spacing: .14em; } .find-name { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 7vw, 34px); margin: 4px 0 14px; line-height: 1.3; color: var(--ink); } .find-name small { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: .08em; margin-top: 8px; } .find-reason { font-family: var(--font-serif); color: var(--ink); font-size: clamp(15px, 4.2vw, 16.5px); line-height: 2.0; letter-spacing: .03em; max-width: var(--measure); margin: 0 auto 22px; } .find-cta { display: inline-block; min-width: 240px; } .find-ru { color: var(--ink-soft); font-size: 13.5px; line-height: 1.9; margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--line-soft); } .find-ru a { color: var(--ink-soft); border-bottom: 1px solid var(--line); } .find-ru a:hover { color: var(--ink); border-color: var(--kin); } .find-result #findRetry { margin-top: 14px; } .tarot-stage { position: relative; min-height: 0; } .tarot-stage[data-shuffling] { min-height: 280px; margin: 10px 0 6px; } .tarot-shuffle-deck { position: absolute; left: 50%; top: 50%; } .tarot-back-card { position: absolute; left: 50%; top: 50%; width: 150px; height: 250px; border-radius: 12px; border: 1px solid var(--w-accent, #b8902f); background-color: var(--w-bg2, #10182b); background-image: radial-gradient(60% 50% at 50% 42%, rgba(236,217,160,.16), transparent 70%), repeating-linear-gradient(135deg, rgba(236,217,160,.05) 0 6px, transparent 6px 12px), url(../img/tarot/back.webp); background-size: cover, auto, cover; background-position: center, center, center; background-repeat: no-repeat, repeat, no-repeat; box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 1px rgba(236,217,160,.12) inset; animation: tarot-riffle 0.95s cubic-bezier(.22,.61,.36,1) both; } @keyframes tarot-riffle { 0% { opacity: 0; transform: translate(-50%,-50%) translateY(22px) rotate(0deg) scale(.96); } 35% { opacity: 1; } 62% { transform: translate(-50%,-50%) translateY(-3px) rotate(var(--riffle-rot, 0deg)) scale(1.01); } 100% { opacity: 1; transform: translate(-50%,-50%) translateY(0) rotate(var(--riffle-rot, 0deg)) scale(1); } } .tarot-stage[data-scene="cut"] .tarot-back-card { animation: tarot-cut .5s cubic-bezier(.4,0,.2,1) both; } @keyframes tarot-cut { 0% { transform: translate(-50%,-50%) rotate(var(--riffle-rot, 0deg)); } 45% { transform: translate(-50%,-50%) translateY(-6px) rotate(calc(var(--riffle-rot, 0deg) * -0.3)) scale(1.015); } 100% { transform: translate(-50%,-50%) rotate(0deg) scale(1); } } .tarot-spread.is-dealing { opacity: 0; } .tarot-spread.is-dealt { animation: tarot-deal .6s cubic-bezier(.22,.61,.36,1) both; } @keyframes tarot-deal { 0% { opacity: 0; transform: translateY(14px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .tarot-question { max-width: var(--measure); margin: 4px auto 16px; padding: 14px 18px; background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--r-card, 10px); font-family: var(--font-serif); color: var(--ink-soft); line-height: 1.8; letter-spacing: .02em; } .tarot-question-text { display: block; margin: 4px 0 6px; font-size: 1.15em; color: var(--ink); letter-spacing: .04em; } .tarot-question-note { display: block; font-size: 12.5px; color: var(--ink-dim); line-height: 1.7; } .tarot-spread { display: flex; flex-direction: column; gap: 18px; max-width: 540px; margin: 18px auto 6px; } .tarot-card { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; } .tarot-text { flex: 1 1 auto; min-width: 0; } .tarot-pos { font-size: 15px; color: var(--w-accent2, #ecd9a0); letter-spacing: .04em; margin-bottom: 7px; line-height: 1.3; font-weight: 600; } .tarot-pos-sub { font-size: 12.5px; color: var(--ink-soft, #9aa); margin-left: 6px; font-weight: 400; } .tarot-orient { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--ink-soft, #9aa); border: 1px solid var(--line, rgba(255,255,255,.15)); border-radius: 12px; padding: 1px 9px; vertical-align: middle; } .tarot-orient.is-rev { color: var(--w-accent2, #ecd9a0); border-color: var(--w-accent2, #ecd9a0); } .tarot-flip { position: relative; flex: 0 0 158px; width: 158px; aspect-ratio: 3 / 5; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.34,1.18,.5,1); } @media (min-width: 380px) { .tarot-flip { flex-basis: 170px; width: 170px; } } @media (min-width: 560px) { .tarot-flip { flex-basis: 192px; width: 192px; } } .tarot-card { opacity: 1; } .tarot-card .tarot-flip { transform: translateY(8px) rotateY(0deg); } .tarot-card.is-revealed .tarot-flip { transform: translateY(0) rotateY(180deg); } .tarot-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; } .tarot-face-back { background-color: var(--w-bg2, #10182b); background-image: radial-gradient(58% 48% at 50% 40%, rgba(236,217,160,.15), transparent 72%), repeating-linear-gradient(135deg, rgba(236,217,160,.05) 0 6px, transparent 6px 12px), url(../img/tarot/back.webp); background-size: cover, auto, cover; background-position: center, center, center; background-repeat: no-repeat, repeat, no-repeat; border: 1px solid var(--w-accent, #b8902f); box-shadow: 0 0 0 1px rgba(236,217,160,.12) inset; } .tarot-face-front { transform: rotateY(180deg); border: 1px solid var(--line, rgba(255,255,255,.15)); box-shadow: 0 0 0 1px rgba(236,217,160,.10) inset; } .tarot-face-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 30%, rgba(255,255,255,.35), transparent 70%); opacity: 0; } .tarot-card.is-revealed .tarot-face-front::after { animation: tarot-glow 1.1s ease-out .15s 1; } @keyframes tarot-glow { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } } .tarot-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .tarot-card-img.is-reversed { transform: rotate(180deg); } .tarot-cap { margin-top: 0; text-align: left; } .tarot-name { display: block; font-size: 17px; color: var(--ink, #e9e9ef); font-weight: 600; line-height: 1.4; } .tarot-kw { display: inline-block; margin: 7px 0; font-size: 13.5px; color: var(--w-accent2, #ecd9a0); border: 1px solid var(--line, rgba(255,255,255,.15)); border-radius: 12px; padding: 2px 11px; } .tarot-read { font-size: 15px; line-height: 1.9; color: var(--ink-soft, #c8c8d2); text-align: left; margin: 6px 0 0; } @media (prefers-reduced-motion: reduce) { .tarot-flip { transition: none; } .tarot-card .tarot-flip { transform: rotateY(0deg); } .tarot-card.is-revealed .tarot-flip { transform: rotateY(180deg); } .tarot-back-card { animation: none; } .tarot-card.is-revealed .tarot-face-front::after { animation: none; opacity: 0; } .tarot-spread.is-dealing { opacity: 1; } .tarot-spread.is-dealt { animation: none; } .tarot-stage[data-scene="cut"] .tarot-back-card { animation: none; } } .linklike { background: none; border: 0; padding: 0; margin-left: 6px; color: var(--w-accent2, #ecd9a0); font: inherit; font-size: .92em; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .linklike:hover { color: var(--w-accent, #b8902f); } :root { --paper: #f7f3ea; --paper-2: #efe9db; --paper-line: rgba(60,50,30,.16); --paper-line-soft: rgba(60,50,30,.09); --boku: #1c1a14; --boku-soft: #4a4538; --boku-dim: #6f6857; --kin-on-paper: #8a6d22; --shu-on-paper: #b23c28; } .astro-sign-name, .result-card .r-name { font-size: clamp(34px, 9.5vw, 50px); } .astro-hero-result .astro-oracle { font-size: clamp(17px, 5vw, 21px); line-height: 1.9; max-width: var(--measure); margin: 4px auto 18px; } .astro-read { --ink: var(--boku); --ink-soft: var(--boku-soft); --ink-dim: var(--boku-dim); --line: var(--paper-line); --line-soft: var(--paper-line-soft); --kin: var(--kin-on-paper); --kin-pale: var(--kin-on-paper); --kin-deep: var(--kin-on-paper); --shu: var(--shu-on-paper); --w-accent: var(--kin-on-paper); --w-accent2: var(--kin-on-paper); background: var(--paper); border: 1px solid var(--paper-line); box-shadow: 0 10px 30px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.5) inset; color: var(--boku); padding: 26px 22px; margin-top: 20px; } @media (min-width: 720px) { .astro-read { padding: 30px 30px; } } .astro-read .astro-read-h { color: var(--boku); font-size: clamp(18px, 5vw, 21px); border-bottom: 1px solid var(--paper-line); padding-bottom: 13px; margin-bottom: 16px; } .astro-read p { color: var(--boku); font-size: clamp(16px, 4.4vw, 17.5px); line-height: 2.0; } .astro-read b, .astro-read .read-p { color: var(--boku); } .astro-read .strength-list li { color: var(--boku); } .astro-read .strength-list li::before { background: var(--kin-on-paper); } .astro-read .strength-weak { color: var(--boku-soft); } .astro-read-match .r-match li { color: var(--boku); border-bottom-color: var(--paper-line-soft); } .astro-read-match .r-match .res { color: var(--kin-on-paper); } .astro-read-match .r-match .dot { box-shadow: 0 0 0 1px rgba(60,50,30,.18); } .astro-read .tiny { color: var(--boku-dim); } .astro-read .theme-hook-link { color: var(--boku-soft); border-bottom-color: var(--kin-on-paper); } .astro-read .theme-hook-link:hover { color: var(--boku); } .astro-read .theme-hook-arrow { color: var(--kin-on-paper); } .astro-read .theme-focus-badge { color: var(--paper); background: var(--kin-on-paper); } .astro-read-blood .blood-type { color: var(--kin-on-paper); } .astro-read-blood .blood-omake { color: var(--boku-dim); border-color: var(--paper-line); } .astro-read-blood p { color: var(--boku-soft); } .astro-read .hitokoto-line { color: var(--boku); } .astro-read .hitokoto-action { color: var(--boku-soft) !important; } .astro-read .hitokoto-action::before { background: var(--kin-on-paper); } .astro-read .hitokoto-action-label, .astro-read .hitokoto-date { color: var(--boku-dim); } .astro-read a { color: var(--boku); text-decoration: none; border-bottom: 1px solid var(--kin-on-paper); } .astro-read a:hover { color: var(--kin-on-paper); } .astro-read .tiny a { color: var(--boku-soft); } .astro-read-love { background: linear-gradient(180deg, rgba(138,109,34,.08), rgba(138,109,34,.03)), var(--paper-2); border-color: var(--kin-on-paper); box-shadow: 0 0 0 1px rgba(138,109,34,.18) inset, 0 12px 32px rgba(0,0,0,.36); } .result-card .r-section:not(.blessing) { --ink: var(--boku); --ink-soft: var(--boku-soft); --ink-dim: var(--boku-dim); --line: var(--paper-line); --line-soft: var(--paper-line-soft); --kin: var(--kin-on-paper); --kin-pale: var(--kin-on-paper); background: transparent; border: none; border-radius: 0; box-shadow: none; color: var(--boku); border-top: 1px solid var(--paper-line); padding: 24px 0 0; margin-top: 24px; } .result-card .r-section:not(.blessing) h4 { color: var(--boku); font-size: clamp(18px, 5vw, 20px); border-color: var(--paper-line); } .result-card .r-section:not(.blessing) h4 { position: relative; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 0; background-image: linear-gradient(90deg, var(--kin-on-paper) 0%, color-mix(in srgb, var(--kin-on-paper) 38%, transparent) 62%, transparent 100%); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1.5px; } .result-card .r-section:not(.blessing) h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2.5px; background: color-mix(in srgb, var(--type-c1, var(--kin-on-paper)) 70%, #6b5520 30%); border-radius: 2px; } .result-card .r-section:not(.blessing) p, .result-card .r-section:not(.blessing) .r-desc { color: var(--boku); font-size: clamp(16px, 4.4vw, 17.5px); line-height: 2.0; } .result-card .r-section:not(.blessing) .r-lights li, .result-card .r-section:not(.blessing) .r-match li { color: var(--boku); } .result-card .r-section:not(.blessing) .r-lights li::before { background: var(--kin-on-paper); } .result-card .r-address { font-family: var(--font-serif); font-weight: 500; font-size: clamp(15px, 3.6vw, 18px); letter-spacing: .08em; color: var(--boku-soft); line-height: 1.7; margin: 2px 0 var(--s5); padding-left: 14px; border-left: 2px solid var(--kin-on-paper); } .result-card .r-pull { font-family: var(--font-serif); font-weight: 600; font-size: clamp(19px, 4.6vw, 28px); line-height: 1.7; color: var(--boku); letter-spacing: .02em; margin: var(--s6) 0; padding: var(--s4) 0 var(--s4) var(--s5); border-left: 3px solid var(--kin-on-paper); } .result-card .r-address + .r-pull { font-size: clamp(22px, 5.4vw, 33px); margin-top: var(--s4); } .result-card .r-catch + .r-keyvisual { margin-top: var(--s5); border-radius: 0; } .result-card .blessing p.r-closing:not(.signoff) { font-size: clamp(20px, 5vw, 26px); text-align: center; text-indent: 0; line-height: 1.7; } .result-card .blessing .r-closing + .signoff { text-align: center; } .result-card .r-ent-note { text-align: center; margin: var(--s5) 0 0; } .result-card .r-ent-note a { color: var(--boku-soft); border-bottom: 1px solid var(--kin-on-paper); text-decoration: none; } .result-card .r-ent-note a:hover { color: var(--boku); } .result-card .r-section:not(.blessing) .r-lights.starlist > li::before { content: ""; position: absolute; left: 8px; top: 21px; width: 16px; height: 16px; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; } .result-card .r-section:not(.blessing) .r-lights.starlist > li:hover { background: linear-gradient(90deg, rgba(138, 109, 34, .06), transparent 70%); } @media (prefers-reduced-motion: reduce) { .result-card .r-section:not(.blessing) .r-lights.starlist > li { transition: none; } } .result-card .r-section:not(.blessing) .tiny { color: var(--boku-dim); } .result-card .r-section:not(.blessing) b { color: var(--boku); } .result-card .r-section:not(.blessing) a { color: var(--boku); text-decoration: none; border-bottom: 1px solid var(--kin-on-paper); } .result-card .r-section:not(.blessing) a:hover { color: var(--kin-on-paper); } .result-card .r-section:not(.blessing) .tiny a { color: var(--boku-soft); } .r-section-astro .afact { margin: 0; padding: 11px 0; border-top: 1px solid var(--paper-line-soft); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .r-section-astro .afact:first-of-type { border-top: none; padding-top: 2px; } .r-section-astro .afact-k { flex: 0 0 auto; font-family: var(--font-serif); font-size: 13px; letter-spacing: .06em; color: var(--boku-dim); } .r-section-astro .afact-v { font-family: var(--font-serif); font-weight: 600; font-size: clamp(16px, 4.4vw, 18px); color: var(--boku); } .r-section-astro .afact-note { flex: 1 1 100%; font-size: clamp(13.5px, 3.6vw, 15px); line-height: 1.85; color: var(--boku-soft); } .r-section-astro .afact-invite { display: block; padding: 10px 13px; border: 1px dashed var(--paper-line); border-radius: 10px; background: rgba(0, 0, 0, .015); color: var(--boku-soft); font-size: clamp(13.5px, 3.6vw, 15px); line-height: 1.8; } .r-section-astro .afact-invite b { color: var(--boku); font-weight: 600; } .r-section-astro .afact-focus { display: block; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--paper-line-soft); font-size: clamp(14.5px, 3.8vw, 16px); line-height: 1.9; color: var(--boku); } .r-section-astro .afact-focus .theme-focus-badge { margin-right: 8px; vertical-align: middle; color: var(--paper); background: var(--kin-on-paper); } .r-section-astro .afact-blood .afact-note { flex-basis: 100%; } .hero-slideshow { position: relative; width: 100%; max-width: 100%; margin: 26px 0 8px; } .portal-hero .hero-slideshow { max-width: 100%; margin-top: clamp(22px, 4vw, 34px); } @media (min-width: 1000px) { .portal-hero .hero-slideshow { max-width: 960px; } } .hero-slides { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-key); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 16px 44px rgba(0, 0, 0, .42); } .hero-slide { position: absolute; inset: 0; display: flex; align-items: flex-end; text-decoration: none; color: var(--ink); background: var(--washi-2) center / cover no-repeat; opacity: 0; visibility: hidden; transition: opacity .6s ease; pointer-events: none; } .hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } .hero-slide-body { position: relative; width: 100%; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, transparent, rgba(8, 11, 20, .55)); } .hero-slide-eyebrow { font-size: 11px; letter-spacing: .12em; color: var(--washi); background: var(--accent2, var(--kin-pale)); align-self: flex-start; padding: 3px 10px; border-radius: 12px; font-weight: 700; margin-bottom: 2px; } .hero-slide-title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 6.4vw, 38px); line-height: 1.28; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); } .hero-slide-sub { font-size: clamp(var(--fs-micro), 3.4vw, var(--fs-lead)); color: rgba(255, 255, 255, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } @media (min-width: 720px) { .hero-slide-body { padding: 26px 30px 30px; } } .hero-slide:hover .hero-slide-title { text-decoration: underline; text-underline-offset: 3px; } .hero-ctl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; } .hero-nav { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 1.5px solid var(--kin); background: transparent; color: var(--kin-pale); font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .hero-nav:hover { background: rgba(184, 151, 106, .16); color: var(--star-warm); border-color: var(--kin-pale); } .hero-thumbs { display: flex; justify-content: safe center; align-items: center; --thumb-gap: 8px; --thumb-cols: 4.2; gap: var(--thumb-gap); margin-top: 8px; max-width: 100%; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hero-thumbs::-webkit-scrollbar { display: none; } .hero-thumb { flex: 0 0 calc((100% - (var(--thumb-cols) - 1) * var(--thumb-gap)) / var(--thumb-cols)); min-height: 44px; padding: 2px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; scroll-snap-align: center; } .hero-thumb-face { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-sharp); overflow: hidden; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: .5; transition: opacity .2s var(--ease), box-shadow .2s var(--ease); } .hero-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero-thumb:hover .hero-thumb-face { opacity: .85; } .hero-thumb:focus-visible { outline: none; } .hero-thumb:focus-visible .hero-thumb-face { opacity: 1; outline: 2px solid var(--kin); outline-offset: 2px; } .hero-thumb.is-active .hero-thumb-face { opacity: 1; box-shadow: 0 0 0 2px var(--kin); } @media (min-width: 600px) { .hero-thumbs { --thumb-cols: 5; } } @media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } .hero-thumb-face { transition: none; } } .pickup-card { position: relative; display: flex; align-items: stretch; gap: 22px; text-decoration: none; color: var(--ink); background: linear-gradient(135deg, rgba(184, 151, 106, .14), rgba(184, 151, 106, .04)), var(--washi-2); border: 1px solid var(--kin); border-radius: var(--r-key); padding: 26px 22px; box-shadow: 0 0 0 1px rgba(184, 151, 106, .12) inset, 0 12px 32px rgba(0, 0, 0, .30); transition: transform .18s ease, border-color .18s ease; } .pickup-card .pickup-main { align-self: center; } .pickup-card:hover { transform: translateY(-2px); border-color: var(--kin-pale); box-shadow: 0 0 0 1px rgba(201, 174, 134, .2) inset, 0 16px 40px rgba(0, 0, 0, .34); } .pickup-badge { position: absolute; top: 16px; right: 16px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 11px; border-radius: 12px; background: var(--grad-gold); color: #1A1A1A; box-shadow: var(--sheen-gold); } .pickup-main { flex: 1 1 auto; min-width: 0; } .pickup-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: .04em; font-size: clamp(22px, 6.4vw, 30px); margin: 0 0 8px; } .pickup-lead { color: var(--ink-soft); font-size: 14.5px; line-height: 1.85; margin: 0 0 18px; max-width: var(--measure); } .pickup-cta { pointer-events: none; } .pickup-aside { flex: 0 0 auto; display: flex; align-items: stretch; } .pickup-aside .star-mark { width: 64px; height: 64px; color: var(--kin); opacity: .6; align-self: center; } @media (max-width: 520px) { .pickup-card:not(.has-face) .pickup-aside { display: none; } .pickup-badge { position: static; align-self: flex-start; margin-bottom: 12px; } .pickup-card { flex-direction: column; align-items: stretch; } } .r-season { font-size: 13.5px; letter-spacing: .08em; line-height: 1.6; color: var(--ink-soft); opacity: .92; margin: 2px 0 6px; } .birthday-perk:empty { display: none; } .birthday-perk { max-width: var(--max); margin: 8px auto 0; padding: 0 var(--s4); } .bday-inner { position: relative; border: 1px solid var(--line); border-radius: var(--r-key); background: radial-gradient(120% 140% at 50% -10%, rgba(184, 151, 106, .12), transparent 60%), linear-gradient(180deg, var(--washi-2), var(--washi)); box-shadow: var(--sh-2); padding: 22px 20px 20px; overflow: hidden; } .bday-inner::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--kin), transparent); opacity: .8; } .bday-eyebrow { margin: 0 0 6px; font-family: var(--font-num); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--kin-pale); } .bday-title { margin: 0 0 8px; font-family: var(--font-serif); font-size: 21px; line-height: 1.45; color: var(--ink); } .bday-lead { margin: 0 0 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.8; } .bday-reading { border-top: 1px solid var(--line-soft); padding-top: 14px; } .bday-star { margin: 0 0 8px; font-size: 12.5px; letter-spacing: .06em; color: var(--ink-dim); } .bday-headline { margin: 0 0 8px; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.7; color: var(--ink); } .bday-message { margin: 0 0 10px; color: var(--ink-soft); font-size: 14px; line-height: 1.85; } .bday-color { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); } .bday-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-soft); flex: 0 0 auto; } .bday-coupon { margin-top: 16px; border: 1px dashed var(--kin); border-radius: var(--r-card); background: rgba(184, 151, 106, .06); padding: 14px 16px; } .bday-coupon-tag { display: inline-block; margin-bottom: 6px; font-size: 11px; letter-spacing: .1em; font-weight: 700; color: var(--kin-pale); } .bday-coupon-body { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.8; } .bday-coupon-note { margin: 8px 0 0; color: var(--ink-dim); } @media (min-width: 600px) { .bday-inner { padding: 28px 32px 26px; } .bday-title { font-size: 24px; } } .premium-birth-form { max-width: var(--w-form); margin: 6px auto 0; } .premium-birth .section-sub { margin-left: auto; margin-right: auto; } .premium-product { padding-block: var(--s6); } .premium-first-wrap { margin: 8px auto 4px; } .premium-first-pick { max-width: var(--measure); margin: 0 auto; text-align: center; font-size: 15px; line-height: 1.9; letter-spacing: .02em; color: var(--ink-soft); } .premium-first-pick-tag { display: inline-block; margin-right: 8px; padding: 3px 12px; border-radius: 12px; background: rgba(184, 151, 106, .14); color: var(--kin-pale); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; vertical-align: middle; } .premium-first-pick a { color: var(--kin-pale); text-decoration: none; border-bottom: 1px solid var(--line); } .premium-first-pick a:hover, .premium-first-pick a:focus-visible { color: var(--kin); border-color: var(--kin); } .premium-card { position: relative; border-top: 1px solid var(--line); padding: 30px 0 6px; max-width: var(--measure); } .premium-card-head { text-align: left; } .premium-title { margin: 0 0 10px; font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 6vw, 28px); letter-spacing: .04em; color: var(--ink); } .premium-lede { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.85; } .premium-lede strong { color: var(--ink); } .premium-price { margin: 14px 0 0; font-family: var(--font-num); font-weight: 400; font-size: 13px; letter-spacing: .04em; color: var(--ink-mute); } .premium-price b { font-weight: 600; font-size: 17px; color: var(--ink-soft); margin: 0 2px; } .premium-price small { font-size: 12px; color: var(--ink-mute); font-weight: 400; } .premium-includes { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .premium-includes h3, .premium-teaser h3 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; color: var(--ink); font-size: 15px; letter-spacing: .05em; } .premium-list { list-style: none; padding: 0; margin: 6px 0 0; } .premium-list li { padding: 14px 0; border-top: 1px solid var(--line); } .premium-list li b { display: block; color: var(--ink); font-weight: 600; font-size: 14.5px; letter-spacing: .02em; margin-bottom: 4px; } .premium-list li span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.75; } .premium-teaser { margin-top: 24px; padding: 20px 16px 16px; border-top: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, rgba(184, 151, 106, .05), transparent 60%); } .premium-teaser-hint { margin: 0 0 12px; color: var(--ink-dim); font-size: 13px; line-height: 1.7; } .teaser-body:empty { display: none; } .teaser-body { margin-top: 6px; } .teaser-type { margin: 0 0 12px; color: var(--ink-dim); font-size: 13px; } .teaser-type strong { color: var(--kin-pale); } .teaser-lead { margin: 0 0 12px; color: var(--ink); font-size: 15.5px; line-height: 1.9; } .teaser-promise { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.85; font-style: italic; } .teaser-note { margin: 12px 0 0; color: var(--ink-dim); font-size: 12.5px; line-height: 1.7; } @media (min-width: 600px) { .premium-card { padding: 36px 0 8px; } } :root { --kin-on-paper: #7d6320; } .astro-scorebars { box-shadow: var(--sh-2); } .ignition-card { box-shadow: var(--sh-2); } .tarot-card { background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--r-key); box-shadow: 0 10px 30px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.5) inset; padding: 16px; --ink: var(--boku); --ink-soft: var(--boku-soft); --line: var(--paper-line); } .tarot-name { color: var(--boku); font-size: 18px; } .tarot-read { color: var(--boku-soft); font-size: 16px; line-height: 1.95; } .tarot-pos { color: var(--kin-on-paper); } .tarot-kw { color: var(--boku); border-color: var(--paper-line); } .w-tabs { gap: 10px; border-bottom: none; } .w-tab { --wtab-bg-image: none; min-height: 56px; font-size: 16px; font-weight: 600; padding: 15px 24px; border-radius: 12px; color: var(--ink); background: var(--wtab-bg-image, none), #58688f; background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid var(--kin); border-bottom: 1px solid var(--kin); box-shadow: 0 6px 18px rgba(0, 0, 0, .38); } .w-tab:hover { color: var(--ink); border-color: var(--gold-l); background: var(--wtab-bg-image, none), #64749d; } .w-tab:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 2px; } .w-tab.active { color: #1A1A1A; font-weight: 700; background: var(--wtab-bg-image, none), var(--grad-gold); background-color: var(--gold-m); border-color: var(--gold-d); box-shadow: 0 8px 22px rgba(184, 151, 106, .30), var(--sheen-gold); } .legal-links a { border-bottom: 1px solid var(--line-soft); } @media (min-width: 720px) { .tarot-flip { flex-basis: 220px; width: 220px; } .tarot-spread { max-width: 680px; } } @media (min-width: 1040px) { html { font-size: 100%; } body { font-size: 18.5px; line-height: 1.95; } .astro-read p { font-size: 19px; line-height: 2.0; max-width: var(--measure); } .astro-read p, .result-card .r-section:not(.blessing) p, .result-card .r-section:not(.blessing) .r-desc { font-size: 20px; line-height: 2.0; } .world-body .astro-read p.read-p { font-size: 21px; line-height: 2.1; max-width: var(--measure); } .world-body .astro-read p.read-p:first-of-type { font-size: 22.5px; } .astro-read .astro-read-h, .world-body .astro-read-h { font-size: 23px; } .result-card .r-section:not(.blessing) h4 { font-size: 22px; } .r-section h4 { font-size: 19px; } .astro-read-h { font-size: 20px; } .astro-sign-name, .result-card .r-name { font-size: clamp(34px, 6vw, 64px); } .r-name { font-size: clamp(36px, 6vw, 66px); } .astro-hero-result .astro-oracle { font-size: 24px; max-width: var(--measure); } .astro-read .strength-list li, .strength-list li { font-size: 18px; } .astro-read-match .r-match li, .r-match li { font-size: 18px; } .strength-weak { font-size: 17px; } .lead { font-size: 19px; max-width: var(--measure); } .astro-read { padding: 38px 40px; } .result-card .r-section:not(.blessing) { padding: 32px 0 0; } .astro-scorebars { padding: 34px 40px 28px; } .result-card { padding: 44px 40px; } .astro-read, .astro-scorebars { margin-top: 26px; } .world-body .astro-hero-result { padding: 44px 36px 32px; } .w-tab { font-size: 16.5px; padding: 13px 24px; } .tarot-spread { max-width: 820px; gap: 26px; } .tarot-card { padding: 26px; gap: 26px; } .tarot-flip { flex-basis: 270px; width: 270px; } .tarot-name { font-size: 21px; } .tarot-read { font-size: 18px; line-height: 2.0; } } @media (min-width: 1440px) { body { font-size: 19px; } .world-body .astro-read p.read-p { font-size: 22px; } .world-body .astro-read p.read-p:first-of-type { font-size: 23.5px; } .astro-read p, .result-card .r-section:not(.blessing) p { font-size: 21px; } .astro-sign-name, .result-card .r-name, .r-name { font-size: 70px; } .tarot-flip { flex-basis: 310px; width: 310px; } .tarot-spread { max-width: 920px; } } .world-body .astro-read { --boku: #1c1a14; --boku-soft: #4a4538; --boku-dim: #6f6857; --paper-line: rgba(60, 50, 30, .16); --paper-line-soft: rgba(60, 50, 30, .09); --kin-on-paper: #7a5f1e; } .banner-hero { position: relative; display: block; margin: 0 auto; margin-top: 14px; margin-bottom: 4px; width: 100%; max-width: var(--max-wide); padding: 0 20px; } @media (min-width: 1180px) { .banner-hero { padding: 0 40px; } } .banner-hero .banner-thumb { border-radius: var(--r-key); border: 6px solid var(--washi); box-shadow: var(--sh-2), 0 0 0 1px rgba(70, 58, 32, .28); width: 100%; } .world-body .banner-hero { margin-top: 10px; } .banner-hero.is-link { cursor: pointer; -webkit-tap-highlight-color: transparent; } .banner-hero.is-link .banner-thumb { transition: transform .28s var(--ease), opacity .28s var(--ease); will-change: transform; } .banner-hero.is-link:hover .banner-thumb, .banner-hero.is-link:focus-visible .banner-thumb { transform: translateY(-2px); opacity: .94; } .banner-hero.is-link:focus { outline: none; } .banner-hero.is-link:focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; border-radius: var(--r-key); } @media (prefers-reduced-motion: reduce) { .banner-hero.is-link .banner-thumb { transition: none; } .banner-hero.is-link:hover .banner-thumb, .banner-hero.is-link:focus-visible .banner-thumb { transform: none; } } .night-band { position: relative; background: linear-gradient(180deg, #0d1426 0%, #0a1020 60%, #080d18 100%); --ink: #eaf0fb; --ink-soft: #c4cee0; --ink-dim: #aab4c8; --ink-mute: #aab4c8; --kin-pale: #D4BFA3; --line: rgba(212, 191, 163, .26); --line-soft: rgba(212, 191, 163, .14); color: var(--ink); } .portal-hero.night-band { background: radial-gradient(120% 90% at 50% -10%, #12203c 0%, transparent 60%), linear-gradient(180deg, #0d1426 0%, #0a1020 60%, #080d18 100%); } .night-band .hero-stars { opacity: .55; } .portal-hero.night-band::before { background: radial-gradient(circle, rgba(212, 191, 163, .22) 0%, rgba(184, 151, 106, .08) 42%, transparent 70%); } .night-band .pickup-card { box-shadow: 0 0 0 1px rgba(184, 151, 106, .20) inset, 0 14px 36px rgba(0, 0, 0, .5); --ink: #1f1c15; --ink-soft: #4a4538; --ink-dim: #6b6454; --ink-mute: #6b6454; color: #1f1c15; } .night-band .banner-card { background: #f7f3ea; border-color: color-mix(in srgb, var(--accent, #D4BFA3) 44%, rgba(212, 191, 163, .30)); box-shadow: 0 10px 30px rgba(0, 0, 0, .42); } .night-band .banner-card:hover { border-color: var(--accent, #D4BFA3); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); } .night-band .banner-card { color: var(--ink-card, #1f1c15); } .night-band .divider::before { background: linear-gradient(90deg, transparent, #D4BFA3); } .night-band .divider::after { background: linear-gradient(90deg, #D4BFA3, transparent); } .night-band + .night-band { border-top: 0; } .theme-card .btn-outline, .play-card .btn-outline { color: #fff7ec; background: var(--ink); border: 1px solid color-mix(in srgb, var(--accent, var(--kin)) 58%, var(--ink)); box-shadow: 0 5px 16px rgba(28, 22, 40, .18), inset 0 1px 0 rgba(255, 255, 255, .05); font-weight: 700; letter-spacing: .08em; } .theme-card .btn-outline:hover, .play-card .btn-outline:hover { background: var(--ink-soft); border-color: color-mix(in srgb, var(--accent, var(--kin)) 78%, var(--ink)); transform: translateY(-1px); box-shadow: 0 9px 24px rgba(28, 22, 40, .28); } .night-page .theme-card .btn-outline, .night-page .play-card .btn-outline { color: var(--boku); background: transparent; border: 1px solid var(--kin-on-paper); box-shadow: none; } .night-page .theme-card .btn-outline:hover, .night-page .theme-card .btn-outline:focus-visible, .night-page .play-card .btn-outline:hover, .night-page .play-card .btn-outline:focus-visible { color: var(--boku); background: rgba(138, 109, 34, .10); border-color: var(--kin-on-paper); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(60, 50, 30, .4); } .result-card { isolation: isolate; } .result-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; background: radial-gradient(120% 100% at 50% -25%, color-mix(in srgb, var(--type-c1, var(--kin)) 18%, transparent) 0%, transparent 72%); pointer-events: none; z-index: 0; border-radius: var(--r-card) var(--r-card) 0 0; } .result-card > * { position: relative; z-index: 1; } @media (min-width: 720px) { .result-card { padding: 44px 40px; } } .r-teller { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 0 0 6px; } .r-teller-face { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; border: 2px solid color-mix(in srgb, var(--type-c1, var(--kin)) 55%, #fff); box-shadow: 0 4px 14px rgba(28, 22, 40, .18); background: color-mix(in srgb, var(--type-c1, var(--kin)) 16%, #fff); } .r-keyvisual { display: block; width: calc(100% + 44px); margin: -34px -22px 14px; aspect-ratio: 16 / 6; object-fit: cover; border-radius: var(--r-key) var(--r-key) 0 0; background: #0a1020; } @media (min-width: 720px) { .r-keyvisual { width: calc(100% + 80px); margin: -44px -40px 18px; } } .sec-veil { position: relative; isolation: isolate; } .sec-veil::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 60% at 88% -6%, var(--glow-lav) 0%, transparent 55%), radial-gradient(70% 50% at 6% 108%, var(--glow-blue) 0%, transparent 58%); opacity: .7; } .lustre-frame { position: relative; border: 1px solid var(--line-soft); border-radius: var(--r-card); background: linear-gradient(180deg, rgba(255,255,255,.5), transparent 40%), var(--washi); box-shadow: var(--glow-1); padding: 24px 22px; } .lustre-frame::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--kin-pale) 35%, var(--kin) 50%, var(--kin-pale) 65%, transparent); border-radius: 2px; } .lustre-frame::after { content: ""; position: absolute; top: 10px; left: 12px; width: 9px; height: 9px; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; opacity: .55; } .rule-star { display: flex; align-items: center; gap: 12px; margin: 6px 0 26px; height: 14px; color: transparent; font-size: 0; position: relative; background: url('data:image/svg+xml;utf8,') center / 10px 10px no-repeat; } .rule-star::before, .rule-star::after { content: ""; flex: 1 1 auto; max-width: 44px; } .rule-star::before { height: 1.6px; background: linear-gradient(90deg, transparent, var(--kin)); align-self: center; } .rule-star::after { height: 1px; background: linear-gradient(90deg, var(--kin), transparent); align-self: center; } .starlist { list-style: none; padding: 0; margin: 0; } .starlist > li { position: relative; padding: 18px 14px 18px 38px; border-top: 1px solid var(--line-soft); border-radius: 8px; transition: background var(--t); } .starlist > li:first-child { border-top: 0; } .starlist > li::before { content: ""; position: absolute; left: 8px; top: 21px; width: 16px; height: 16px; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; opacity: .6; } .starlist > li:hover { background: linear-gradient(90deg, rgba(184,151,106,.06), transparent 70%); } .sec-label { position: relative; padding-left: 26px; } .sec-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--kin-pale)); } .sec-label::after { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--kin); } @media (prefers-reduced-motion: reduce) { .starlist > li { transition: none; } } .banner-hero { max-width: var(--w-wide); } .world-body .banner-hero { max-width: var(--w-wide); } .world-hero .hero-inner { max-width: var(--w-wide); } .premium-card { margin-left: auto; margin-right: auto; } .premium-card.lustre-frame::before { background: linear-gradient(90deg, transparent, var(--accent-soft, var(--kin-pale)) 35%, var(--accent, var(--kin)) 50%, var(--accent-soft, var(--kin-pale)) 65%, transparent); } .premium-card.lustre-frame::after { background: url('data:image/svg+xml;utf8,') center/contain no-repeat; opacity: 0; } .premium-card { isolation: isolate; overflow: hidden; } .premium-card::after { content: ""; position: absolute; z-index: -1; top: -40px; right: -30px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--kin)) 16%, transparent) 0%, transparent 70%); pointer-events: none; } .premium-card-alt::after { right: auto; left: -30px; } .premium-compare { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); } .premium-compare-no { font-family: var(--font-num); font-weight: 600; font-size: 22px; line-height: 1; color: var(--accent-deep, var(--kin-deep)); letter-spacing: .02em; flex: none; opacity: .9; } .premium-compare-for { font-size: 13px; line-height: 1.6; color: var(--ink-soft); letter-spacing: .02em; } .premium-card-alt .premium-compare { flex-direction: row-reverse; text-align: right; } .premium-symbol { display: inline-flex; width: 46px; height: 46px; margin-bottom: 12px; color: var(--accent, var(--kin)); } .premium-symbol svg { width: 100%; height: 100%; } .premium-card-alt .premium-symbol { margin-left: auto; } .premium-card-alt .premium-title, .premium-card-alt .premium-sub, .premium-card-alt .premium-price { text-align: right; } .premium-sub { margin: 0 0 12px; font-family: var(--font-serif); font-weight: 500; font-size: 15.5px; letter-spacing: .04em; color: var(--accent-deep, var(--kin-deep)); } .premium-title { position: relative; } .premium-card .premium-title { color: var(--ink); } .premium-card .premium-price { color: var(--ink-soft); position: relative; } .premium-price b { color: var(--accent-deep, var(--ink-soft)); } .premium-pick { margin-top: 22px; padding: 16px 16px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--accent, var(--kin)) 28%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--kin)) 6%, transparent), transparent 70%); } .premium-pick-label { display: block; margin: 0 0 8px; font-family: var(--font-serif); font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--ink); } .premium-pick-select { width: 100%; } .premium-pick-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-dim); } .premium-includes { margin-top: 22px; padding-top: 18px; } .premium-list-2col li { padding: 11px 14px 11px 38px; } .premium-list-2col li b { margin-bottom: 2px; } .premium-list-2col li span { font-size: 13px; line-height: 1.65; } @media (min-width: 680px) { .premium-list-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; } .premium-list-2col > li:nth-child(1), .premium-list-2col > li:nth-child(2) { border-top: 0; } } .premium-card .paywall-peek li { border-color: color-mix(in srgb, var(--accent, var(--kin)) 30%, var(--line)); } .premium-card .ent-consent input { accent-color: var(--accent, var(--kin)); } .night-page .premium-card .premium-sub { color: color-mix(in srgb, var(--accent, var(--kin)) 55%, var(--ink)); } .night-page .premium-card .premium-price b { color: color-mix(in srgb, var(--accent, var(--kin)) 50%, var(--ink)); } .night-page .premium-card .premium-compare-no { color: color-mix(in srgb, var(--accent, var(--kin)) 60%, var(--ink)); } .pickup-teller { display: inline-block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--kin-pale); padding: 4px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--kin) 40%, var(--line)); background: rgba(184, 151, 106, .10); } .pickup-teller[hidden] { display: none; } .btn-soft { border-color: color-mix(in srgb, var(--kin) 32%, var(--line)); } .btn-soft, .cm-link, a.chip, .hero-links a, .life-chip, .concern-pick { background: linear-gradient(180deg, rgba(255, 253, 247, .6), transparent 60%), color-mix(in srgb, var(--washi-2) 86%, var(--kin) 14%); border: 1px solid color-mix(in srgb, var(--kin) 40%, var(--line)); box-shadow: inset 0 1px 0 rgba(255, 253, 247, .55), inset 0 -1px 0 rgba(70, 58, 32, .06), 0 2px 6px rgba(70, 58, 32, .10); transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .btn-soft, a.chip, .life-chip, .concern-pick { padding: 12px 24px; min-height: 46px; } .cm-link { padding: 13px 26px; min-height: 48px; margin-top: 16px; } .btn-soft:hover, .btn-soft:focus-visible, .cm-link:hover, .cm-link:focus-visible, a.chip:hover, a.chip:focus-visible, .life-chip:hover, .life-chip:focus-visible, .concern-pick:hover, .concern-pick:focus-visible { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255, 253, 247, .7), transparent 60%), color-mix(in srgb, var(--washi-2) 70%, var(--kin) 30%); border-color: var(--kin); box-shadow: inset 0 1px 0 rgba(255, 253, 247, .6), 0 5px 14px rgba(70, 58, 32, .18); } .btn-soft:active, .cm-link:active, a.chip:active, .life-chip:active, .concern-pick:active { box-shadow: inset 0 1px 2px rgba(70, 58, 32, .18), 0 1px 3px rgba(70, 58, 32, .12); transform: translateY(0); } .btn-soft:focus-visible, .cm-link:focus-visible, a.chip:focus-visible, .life-chip:focus-visible, .concern-pick:focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; } .concern-pick.active { background: linear-gradient(180deg, rgba(255, 253, 247, .5), transparent 60%), var(--washi-2); border-color: var(--w-accent); box-shadow: 0 0 0 1px var(--w-accent) inset, 0 2px 6px rgba(70, 58, 32, .10); } .hero-links { gap: 12px; } .hero-links a { padding: 12px 22px; min-height: 46px; } .hero-links a:hover, .hero-links a:focus-visible { color: #1A1A1A; transform: translateY(-1px); background: linear-gradient(180deg, rgba(255, 253, 247, .5), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--gold-l) 58%, var(--washi-2)) 0%, color-mix(in srgb, var(--gold-m) 54%, var(--washi-2)) 100%); border-color: var(--metal-edge-gold); box-shadow: inset 0 1px 0 rgba(255, 253, 247, .55), 0 5px 14px rgba(70, 58, 32, .18); } .hero-links a { border-radius: 12px; min-height: 48px; } .night-page .hero-links a { background: linear-gradient(180deg, color-mix(in srgb, var(--night-3) 66%, var(--star-cool) 34%) 0%, color-mix(in srgb, var(--night-3) 69%, var(--star-cool) 31%) 100%); border: 1px solid var(--metal-edge-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 10px rgba(0, 0, 0, .34); } .btn-outline { background: linear-gradient(180deg, rgba(255, 253, 247, .42), transparent 70%), color-mix(in srgb, var(--washi-2) 94%, var(--kin) 6%); box-shadow: inset 0 1px 0 rgba(255, 253, 247, .45), 0 1px 4px rgba(70, 58, 32, .07); transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); } .btn-outline:hover, .btn-outline:focus-visible { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255, 253, 247, .5), transparent 60%), color-mix(in srgb, var(--washi-2) 90%, var(--kin) 10%); border-color: var(--kin); box-shadow: inset 0 1px 0 rgba(255, 253, 247, .5), 0 4px 12px rgba(70, 58, 32, .14); } .btn-ghost { position: relative; transition: color .16s var(--ease), border-color .16s var(--ease); } .btn-ghost::after { content: ""; position: absolute; left: 18px; right: 100%; bottom: 8px; height: 1px; background: var(--kin); transition: right .22s var(--ease); pointer-events: none; } .btn-ghost:hover, .btn-ghost:focus-visible { color: var(--ink); border-color: var(--kin); } .btn-ghost:hover::after, .btn-ghost:focus-visible::after { right: 18px; } .sec--tint, .sec--night { position: relative; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } .sec--paper { position: relative; isolation: isolate; } .sec--paper::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 60% at 88% -6%, var(--glow-lav) 0%, transparent 55%), radial-gradient(70% 50% at 6% 108%, var(--glow-blue) 0%, transparent 58%); opacity: .55; } .sec--tint { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, var(--kin) 8%) 0%, color-mix(in srgb, var(--bg) 96%, var(--kin) 4%) 100%); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .sec--night { background: linear-gradient(180deg, #0d1426 0%, #0a1020 60%, #080d18 100%); --ink: #eaf0fb; --ink-soft: #c4cee0; --ink-dim: #aab4c8; --ink-mute: #aab4c8; --kin-pale: #D4BFA3; --line: rgba(212, 191, 163, .26); --line-soft: rgba(212, 191, 163, .14); color: var(--ink); } .sec--night::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -12%, rgba(212, 191, 163, .16) 0%, transparent 60%); } .sec--night > .wrap { position: relative; z-index: 1; } .sec--night .cm-link, .sec--night .btn-soft, .sec--night a.chip, .sec--night .life-chip { color: var(--ink); background: linear-gradient(180deg, rgba(212, 191, 163, .14), transparent 60%), rgba(212, 191, 163, .06); border-color: rgba(212, 191, 163, .34); box-shadow: inset 0 1px 0 rgba(212, 191, 163, .14), 0 2px 8px rgba(0, 0, 0, .32); } .sec--night .angle-card { --ink: #eaf0fb; --ink-soft: #c4cee0; --ink-dim: #b8c2d6; --ink-mute: #b8c2d6; --kin-pale: #D4BFA3; --line: rgba(212, 191, 163, .26); background: var(--glass-night); color: var(--ink); border-color: rgba(212, 191, 163, .26); box-shadow: 0 10px 30px rgba(0, 0, 0, .42); } .sec--night .angle-card:hover { border-color: rgba(212, 191, 163, .5); } .sec--frame { position: relative; } .sec--frame > .wrap { position: relative; border: 1px solid var(--line-soft); border-radius: var(--r-key); background: linear-gradient(180deg, rgba(255, 253, 247, .5), transparent 40%), var(--washi); box-shadow: var(--glow-1); padding-top: 34px; padding-bottom: 34px; } .sec--frame > .wrap::before { content: ""; position: absolute; left: 18px; right: 18px; top: -1px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--kin-pale) 35%, var(--kin) 50%, var(--kin-pale) 65%, transparent); } .sec-label.v-star { position: relative; padding-left: 26px; } .sec-label.v-star::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 1px; background: linear-gradient(90deg, transparent, var(--kin-pale)); } .sec-label.v-star::after { content: ""; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--kin); } .sec-label.v-tick { padding-left: 12px; border-left: 2px solid var(--kin-pale); } .night-page .sec-label { padding-left: 30px; background-repeat: no-repeat; background-position: left center; background-size: 22px 22px; } .night-page .sec-label::before, .night-page .sec-label::after { content: none; } .night-page .sec-label.v-tick { border-left: none; } .night-page .sec-label.v-star { background-image: url('data:image/svg+xml;utf8,'); } .night-page .sec-label.v-tick { background-image: url('data:image/svg+xml;utf8,'); } .night-page .sec-title { letter-spacing: .04em; } .night-page .chip, .night-page a.chip, .night-page .card-tag { color: var(--ink); border: 1px solid rgba(212, 191, 163, .34); box-shadow: inset 0 1px 0 rgba(212, 191, 163, .14); padding-left: 24px; background-image: url('data:image/svg+xml;utf8,'), linear-gradient(180deg, rgba(212, 191, 163, .12), transparent 70%); background-size: 8px 8px, auto; background-position: 9px center, 0 0; background-repeat: no-repeat, no-repeat; background-color: rgba(212, 191, 163, .05); } .night-page a.chip:hover, .night-page a.chip:focus-visible { border-color: var(--kin-pale); box-shadow: var(--edge-gild); transform: translateY(-1px); } .night-page .pickup-badge, .night-page .badge { background: radial-gradient(circle at left center, var(--night-1) 2.4px, transparent 3px), radial-gradient(circle at right center, var(--night-1) 2.4px, transparent 3px), var(--grad-gold-lustre); color: #1A1A1A; box-shadow: var(--sheen-gold); border: 1px solid var(--metal-edge-gold); border-radius: 6px; } .night-page .theme-card, .night-page .play-card, .night-page .craft-banner, .night-page .craft-menu-item, .night-page .angle-card, .night-page .menu-item-card, .night-page .plan-card, .night-page .order-confirm, .night-page .age-gate, .night-page .paywall-banner { --ink: var(--boku); --ink-soft: var(--boku-soft); --ink-dim: var(--boku-dim); --ink-mute: var(--boku-dim); --line: var(--paper-line); --line-soft: var(--paper-line-soft); --kin: var(--kin-on-paper); --kin-pale: var(--kin-on-paper); --kin-deep: var(--kin-on-paper); --shu: var(--shu-on-paper); --w-accent: var(--kin-on-paper); --w-accent2: var(--kin-on-paper); --washi: #ffffff; --washi-2: var(--paper-2); color: var(--boku); background: linear-gradient(180deg, rgba(255,255,255,.55), transparent 32%), var(--paper); border: 1px solid var(--paper-line); box-shadow: 0 10px 30px rgba(0,0,0,.30), 0 1px 0 rgba(255,255,255,.5) inset; } .night-page .theme-card:hover, .night-page .play-card:hover, .night-page .craft-menu-item:hover, .night-page .angle-card:hover, .night-page .menu-item-card:hover, .night-page .plan-card:hover { border-color: var(--kin-on-paper); box-shadow: 0 16px 34px -18px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.5) inset; } .night-page .craft-banner { border-color: var(--kin-on-paper); } .night-page .pickup-card { --ink: #eaf0fb; --ink-soft: #c4cee0; --ink-dim: #aab4c8; --ink-mute: #aab4c8; --kin-pale: #D4BFA3; color: var(--ink); background: linear-gradient(180deg, rgba(212, 191, 163, .10), transparent 70%), var(--glass-night); border: 1px solid rgba(212, 191, 163, .28); box-shadow: var(--glow-night); } .night-page .pickup-card:hover { border-color: rgba(212, 191, 163, .5); box-shadow: var(--edge-gild), var(--glow-night); transform: translateY(-2px); } .night-page .pickup-card::after { content: ""; position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; pointer-events: none; background: url('data:image/svg+xml;utf8,') center / contain no-repeat; } #today .teller-today-card { --ink: var(--boku); --ink-soft: var(--boku-soft); --ink-dim: var(--boku-dim); --ink-mute: var(--boku-dim); --line: var(--paper-line); --line-soft: var(--paper-line-soft); --kin: var(--kin-on-paper); --kin-pale: var(--kin-on-paper); --kin-deep: var(--kin-on-paper); --shu: var(--shu-on-paper); --w-accent: var(--kin-on-paper); --w-accent2: var(--kin-on-paper); --washi: #ffffff; --washi-2: var(--paper-2); color: var(--boku); background: linear-gradient(180deg, rgba(255, 255, 255, .55), transparent 32%), var(--paper); border: 1px solid var(--paper-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .34), 0 1px 0 rgba(255, 255, 255, .5) inset; } #today .teller-today-card:hover { border-color: var(--kin-on-paper); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .5) inset; } #today .teller-today-card .persona-bar { background: var(--paper-2); border: 1px solid var(--paper-line); } #today .teller-today-card .btn-outline { color: var(--boku); background: transparent; border: 1px solid var(--kin-on-paper); box-shadow: none; } #today .teller-today-card .btn-outline:hover, #today .teller-today-card .btn-outline:focus-visible { color: var(--boku); background: rgba(138, 109, 34, .10); border-color: var(--kin-on-paper); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(60, 50, 30, .4); } .night-page .btn-primary { background-color: var(--gold-m); background-image: var(--btn-bg-image, var(--grad-gold-lustre)); background-size: cover; background-position: center; } .night-page .btn-outline, .night-page .btn-soft { color: var(--ink); background: linear-gradient(180deg, rgba(212, 191, 163, .16), rgba(212, 191, 163, .07)); border: 1px solid rgba(212, 191, 163, .55); box-shadow: inset 0 1px 0 rgba(212, 191, 163, .14); } .night-page .btn-outline:hover, .night-page .btn-outline:focus-visible, .night-page .btn-soft:hover, .night-page .btn-soft:focus-visible { color: var(--ink); transform: translateY(-1px); background: linear-gradient(180deg, rgba(212, 191, 163, .22), rgba(212, 191, 163, .10)); border-color: var(--kin-pale); box-shadow: var(--edge-gild), inset 0 1px 0 rgba(212, 191, 163, .16); } .night-page .banner-thumb { background: linear-gradient(180deg, rgba(10, 16, 32, .18), rgba(10, 16, 32, .30)), color-mix(in srgb, var(--accent, var(--kin)) 14%, var(--washi-2)); } .night-page .banner-fallback { box-shadow: inset 0 0 0 1px rgba(212, 191, 163, .30); } .night-page .bf-input, .night-page .bf-select, .night-page .birth-form > .birth-row input { border-color: rgba(212, 191, 163, .30); } .night-page .bf-input:hover, .night-page .bf-select:hover, .night-page .birth-form > .birth-row input:hover { border-color: rgba(212, 191, 163, .5); } .night-page .bf-input::placeholder { color: var(--ink-dim); } .night-page .bf-input:focus, .night-page .bf-select:focus, .night-page .birth-form > .birth-row input:focus { border-color: var(--kin-pale); box-shadow: 0 0 0 2px rgba(212, 191, 163, .5); } .night-page.world-body { --w-accent: var(--kin-pale); --w-accent2: var(--kin-pale); } .night-page .astro-read { --washi: var(--paper); --washi-2: var(--paper-2); --bg-2: var(--paper-2); --ink: var(--boku); --ink-soft: var(--boku-soft); --ink-dim: var(--boku-dim); border-color: rgba(212, 191, 163, .34); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, var(--glow-night); } .night-page .menu-item-card .mi-name, .night-page .plan-name { color: var(--ink); } .night-page .mi-thumb { background: rgba(212, 191, 163, .10); border-color: rgba(212, 191, 163, .30); } .night-page .mi-price { color: var(--ink-soft); background: rgba(212, 191, 163, .08); border-color: rgba(212, 191, 163, .30); } .night-page .mi-vol, .night-page .plan-vol { color: var(--kin-pale); border-color: rgba(212, 191, 163, .5); background: rgba(212, 191, 163, .08); } .night-page .plan-price { color: var(--kin-pale); } .night-page .spec-tag { color: var(--ink-soft); background: rgba(212, 191, 163, .08); border-color: rgba(212, 191, 163, .30); } body.night-page[class*="world-"] { background: var(--night-0); } .night-page .linklike { color: var(--kin-pale); } :where(.night-page) a { color: var(--kin-pale); } .night-page .result-card { --washi: var(--paper); --washi-2: var(--paper-2); --bg-2: var(--paper-2); --ink: var(--boku); --ink-soft: var(--boku-soft); --ink-dim: var(--boku-dim); color: var(--boku); border-color: rgba(212, 191, 163, .34); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, var(--glow-night); } @media (max-width: 480px) { .night-page .result-card .astro-read { background: none; border: 0; box-shadow: none; padding-left: 0; padding-right: 0; } .night-page .result-card { padding-left: 10px; padding-right: 10px; } .world-body .astro-read p.read-p:first-of-type { font-size: clamp(16.5px, 4.5vw, 18px); } } .night-page .divider::before { background: linear-gradient(90deg, transparent, var(--kin-pale)); } .night-page .divider::after { background: linear-gradient(90deg, var(--kin-pale), transparent); } .night-page .sec--tint { background: linear-gradient(180deg, rgba(212, 191, 163, .05) 0%, rgba(212, 191, 163, .015) 100%); border-top-color: var(--line-soft); border-bottom-color: var(--line-soft); } .night-page .sec--frame > .wrap { background: linear-gradient(180deg, rgba(212, 191, 163, .06), transparent 30%), var(--glass-night); box-shadow: var(--glow-night); } .night-page .sec--frame > .wrap::before { background: var(--grad-gold-lustre); } .night-page .lustre-frame { background: linear-gradient(180deg, rgba(212, 191, 163, .06), transparent 34%), var(--glass-night); } .sec-title, .hero h1, .premium-title, .r-name, .sec h2, .sec h3, main h2, main h3 { text-wrap: balance; max-inline-size: 20em; word-break: auto-phrase; } @media (min-width: 768px) { .hero:not(.world-hero) h1, .hero:not(.world-hero) .lead, .hero:not(.world-hero) .note, .hero:not(.world-hero) .hero-lede, .hero:not(.world-hero) .hero-sub { max-width: var(--measure-hero); max-inline-size: var(--measure-hero); } } .section-sub, .sec-sub, .premium-birth .section-sub { } .lead, .section-sub, .sec-sub, p { text-wrap: pretty; } @media (prefers-reduced-motion: reduce) { .btn-soft, .cm-link, a.chip, .hero-links a, .life-chip, .concern-pick, .btn-outline, .btn-ghost, .btn-ghost::after, .cm-link > * { transition: none !important; } .btn-soft:hover, .cm-link:hover, a.chip:hover, .hero-links a:hover, .life-chip:hover, .concern-pick:hover, .btn-outline:hover { transform: none !important; } .btn-ghost:hover::after, .btn-ghost:focus-visible::after { right: 18px !important; } } --r-*/--line/--font-serif）だけで組む。新色・新画像・新フォント無し。 * 金の主役は「無料（.mi-free）」に置き、有料の予定価格は銀・中立に退ける。 * 煽らない：ボリューム可視化(.mi-vol/.plan-vol)は金縁の“中立”バッジに留める。 * ===================================================================== */ .menu-section { margin: 0 0 8px; } .menu-group-note { color: var(--ink-mute); margin: -4px 0 16px; } .menu-cat { margin: 0 0 30px; } .menu-cat:last-child { margin-bottom: 0; } .menu-cat-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .menu-cat-note { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--kin-pale); } .menu-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 560px) { .menu-grid { grid-template-columns: 1fr 1fr; } } .menu-cat-lead { margin: -4px 0 14px; max-width: var(--measure); font-family: var(--font-sans); font-size: 13.5px; line-height: 1.85; letter-spacing: .02em; color: var(--ink-soft); text-wrap: pretty; } .menu-lead { margin: 2px 0 20px; max-width: var(--measure); font-family: var(--font-serif); font-size: 14.5px; line-height: 1.9; letter-spacing: .03em; color: var(--ink-soft); text-wrap: pretty; } .menu-selfcare { margin: 4px auto 20px; max-width: var(--measure); font-family: var(--font-serif); font-size: 15px; line-height: 1.9; letter-spacing: .04em; color: var(--ink-soft); text-align: center; text-wrap: pretty; } .menu-guide { position: relative; margin: 22px 0 0; padding: 16px 4px 4px 40px; max-width: var(--measure); border-top: 1px solid var(--line-soft); font-family: var(--font-sans); font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); } .menu-guide::before { content: ""; position: absolute; left: 8px; top: 18px; width: 18px; height: 18px; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; opacity: .7; } .menu-guide-label { font-family: var(--font-serif); font-weight: 600; color: var(--ink); letter-spacing: .04em; margin-right: .5em; } .health-disclaimer { margin: 12px 0 0; padding: 9px 12px 9px 32px; position: relative; font-size: 11.5px; line-height: 1.7; color: #6E6252; background: var(--washi-2); border: 1px solid var(--line-soft); border-radius: 10px; max-width: var(--measure); } body.night-page .health-disclaimer { color: #B8A99C; } .health-disclaimer::before { content: ""; position: absolute; left: 12px; top: 11px; width: 13px; height: 13px; background: url('data:image/svg+xml;utf8,') center/contain no-repeat; opacity: .8; } body.night-page .health-disclaimer::before { background: url('data:image/svg+xml;utf8,') center/contain no-repeat; } .menu-item-card { position: relative; display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 40px 14px 14px; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, color-mix(in srgb, var(--washi) 90%, var(--kin) 10%) 0%, var(--washi) 62%); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: inset 0 1px 0 rgba(255, 253, 247, .7), var(--sh-1); transition: transform .14s var(--ease), box-shadow .18s var(--ease), border-color var(--t); } .menu-item-card:hover { transform: translateY(-2px); border-color: var(--kin); box-shadow: inset 0 1px 0 rgba(255, 253, 247, .8), var(--sh-2); } .menu-item-card:active { transform: translateY(0); box-shadow: inset 0 1px 0 rgba(255, 253, 247, .5), var(--sh-1); } .menu-item-card:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; } .menu-item-card::after { content: "→"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--kin-pale); transition: transform .16s var(--ease), right .16s var(--ease); transform-origin: center; } .menu-item-card:hover::after { transform: translateY(-50%) translateX(3px); } .mi-thumb { flex: 0 0 auto; width: 48px; height: 48px; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); background: var(--washi-2); display: grid; place-items: center; } .mi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mi-thumb-fallback { display: none; font-size: 22px; line-height: 1; color: var(--kin-pale); } .mi-thumb.no-img { background: color-mix(in srgb, var(--washi-2) 80%, var(--kin) 6%); } .mi-thumb.no-img img { display: none; } .mi-thumb.no-img .mi-thumb-fallback { display: block; } .mi-body { flex: 1 1 auto; min-width: 0; } .mi-name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 15.5px; letter-spacing: .02em; line-height: 1.4; color: var(--ink); text-wrap: balance; } .mi-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 7px; } .mi-note { font-size: 12px; color: var(--ink-mute); letter-spacing: .02em; } .mi-price { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--ink-soft); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px 9px; white-space: nowrap; } .mi-vol { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--kin-deep); background: rgba(184, 151, 106, .09); border: 1px solid var(--kin); border-radius: 12px; padding: 3px 9px; white-space: nowrap; } .mi-free { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #1A1A1A; background: var(--grad-gold); box-shadow: var(--sheen-gold); border-radius: 12px; padding: 3px 10px; white-space: nowrap; } .teller-profile { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--washi); padding: 18px 18px 16px; margin: 22px 0 0; box-shadow: var(--sh-1); } .spec-tags { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; } .spec-tag { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); background: var(--washi-2); border: 1px solid var(--line); border-radius: 12px; padding: 5px 12px; } .voice-soon { display: flex; align-items: center; gap: 10px; border: 1px dashed var(--line); border-radius: var(--r-card); background: transparent; padding: 12px 14px; color: var(--ink-mute); } .voice-soon .vs-mark { flex: 0 0 auto; color: var(--kin-pale); font-size: 15px; line-height: 1; } .voice-soon p { margin: 0; font-size: 13px; letter-spacing: .02em; } .plan-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 560px) { .plan-grid { grid-template-columns: 1fr 1fr; } .plan-grid .plan-card.is-large { grid-column: 1 / -1; } } .plan-card { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--washi); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 18px 16px; box-shadow: var(--sh-1); transition: transform .14s var(--ease), box-shadow .18s var(--ease), border-color var(--t); } .plan-card:hover { transform: translateY(-2px); border-color: var(--kin); box-shadow: var(--sh-2); } .plan-card:active { transform: translateY(0); box-shadow: var(--sh-1); } .plan-card:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; } .plan-card.is-large { border-color: var(--metal-edge-gold); background: linear-gradient(180deg, color-mix(in srgb, var(--washi) 88%, var(--kin) 12%) 0%, var(--washi) 46%); box-shadow: var(--sheen-gold), var(--sh-2); } .plan-card.is-large::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--kin-pale) 30%, var(--kin) 50%, var(--kin-pale) 70%, transparent); } .plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .plan-name { font-family: var(--font-serif); font-weight: 600; font-size: 17px; letter-spacing: .03em; color: var(--ink); } .plan-card.is-large .plan-name { font-size: 18.5px; } .plan-price { font-family: var(--font-serif); font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--kin-deep); white-space: nowrap; } .plan-price small { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--ink-mute); margin-left: 3px; } .plan-card.is-large .plan-price { font-size: 19px; } .plan-desc { display: block; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; margin: 8px 0 12px; text-wrap: pretty; } .plan-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .plan-vol { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--kin-deep); background: rgba(184, 151, 106, .09); border: 1px solid var(--kin); border-radius: 12px; padding: 3px 9px; white-space: nowrap; } .sec--night .menu-item-card, .sec--night .plan-card { color: var(--ink); background: linear-gradient(180deg, rgba(212, 191, 163, .12), transparent 60%), rgba(212, 191, 163, .05); border-color: rgba(212, 191, 163, .30); box-shadow: inset 0 1px 0 rgba(212, 191, 163, .12), 0 2px 8px rgba(0, 0, 0, .30); } .sec--night .menu-item-card .mi-name, .sec--night .plan-name { color: var(--ink); } .sec--night .mi-thumb { background: rgba(212, 191, 163, .10); border-color: rgba(212, 191, 163, .30); } .sec--night .mi-price { color: var(--ink-soft); background: rgba(212, 191, 163, .08); border-color: rgba(212, 191, 163, .30); } .sec--night .mi-vol, .sec--night .plan-vol { color: var(--kin-pale); border-color: rgba(212, 191, 163, .5); background: rgba(212, 191, 163, .08); } .sec--night .plan-price { color: var(--kin-pale); } .sec--night .spec-tag { color: var(--ink-soft); background: rgba(212, 191, 163, .08); border-color: rgba(212, 191, 163, .30); } @media (prefers-reduced-motion: reduce) { .menu-item-card, .plan-card, .menu-item-card::after { transition: none !important; } .menu-item-card:hover, .plan-card:hover, .menu-item-card:active, .plan-card:active { transform: none !important; } .menu-item-card:hover::after { transform: translateY(-50%) !important; } } .order-confirm { border: 1px solid var(--line); border-radius: var(--r-card, 14px); background: var(--washi-2, #F7F4EC); padding: 22px clamp(16px, 4vw, 28px); margin: 8px auto 0; max-width: 640px; } .order-confirm > summary.order-confirm-summary { cursor: pointer; list-style: none; font-family: var(--font-serif, 'Noto Serif JP', serif); font-size: clamp(14.5px, 4vw, 16px); color: var(--ink-soft); letter-spacing: .02em; position: relative; padding-right: 24px; } .order-confirm > summary.order-confirm-summary::-webkit-details-marker { display: none; } .order-confirm > summary.order-confirm-summary::after { content: "＋"; position: absolute; right: 2px; top: 0; color: var(--ink-mute); font-weight: 400; } .order-confirm[open] > summary.order-confirm-summary::after { content: "−"; } .order-confirm > summary.order-confirm-summary:hover { color: var(--ink); } .order-confirm > summary.order-confirm-summary:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; border-radius: 6px; } .order-confirm[open] > .order-confirm-head { margin-top: 16px; } .order-confirm-head { font-family: var(--font-serif, 'Noto Serif JP', serif); font-size: clamp(18px, 5vw, 22px); color: var(--ink); margin: 0 0 4px; letter-spacing: .03em; } .order-confirm-note { font-size: 13.5px; color: var(--ink-mute); margin: 0 0 16px; } .order-confirm-dl { margin: 0; } .order-confirm-dl > div { display: grid; grid-template-columns: 128px 1fr; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); } .order-confirm-dl > div:first-child { border-top: 0; } .order-confirm-dl dt { font-weight: 700; color: var(--ink-soft); font-size: 14px; letter-spacing: .02em; } .order-confirm-dl dd { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.85; } .order-confirm-dl dd b { color: var(--ink); } .order-confirm-dl .oc-cancel dt, .order-confirm-dl .oc-cancel dd { color: var(--ink); } .order-confirm-foot { font-size: 13.5px; color: var(--ink-mute); margin: 14px 0 0; line-height: 1.8; } @media (max-width: 520px) { .order-confirm-dl > div { grid-template-columns: 1fr; gap: 2px; } .order-confirm-dl dt { font-size: 13px; } } .buy-reassure { max-width: var(--measure); margin: 18px auto 12px; padding: 15px 18px; background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--r-card, 14px); color: var(--ink); font-size: 16.5px; font-weight: 500; line-height: 1.9; letter-spacing: .02em; text-align: left; } .buy-reassure b { color: var(--ink); font-weight: 700; } #relatedReadings > .wrap { padding: 44px var(--w-gutter) 8px; } .related-head { margin: 0 0 18px; padding-top: 28px; border-top: 1px solid var(--line-soft); text-align: left; font-family: var(--font-serif); font-weight: 600; font-size: clamp(19px, 5vw, 24px); line-height: 1.5; letter-spacing: .05em; color: var(--ink); } #teller-parade { padding-top: clamp(16px, 3.5vw, 26px); padding-bottom: clamp(18px, 4vw, 32px); } #teller-parade .sec-head { margin-bottom: 4px; } .parade { position: relative; margin-top: var(--s4); display: flex; flex-direction: column; gap: 14px; } .parade-spotlight { position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(60% 78% at 50% 50%, rgba(212, 191, 163, .12), transparent 70%), linear-gradient(90deg, transparent, rgba(255, 248, 230, .05) 42%, rgba(255, 248, 230, .05) 58%, transparent); } .parade-row { z-index: 1; } .parade-row { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%); } .parade-track { display: flex; width: max-content; animation: paradeScroll 52s linear infinite; } .parade-row-a .parade-track { animation-duration: 64s; animation-delay: -9s; } .parade-row-b .parade-track { animation-duration: 84s; animation-direction: reverse; animation-delay: -13s; } .parade-row:hover .parade-track, .parade-row:focus-within .parade-track { animation-play-state: paused; } .parade-row:hover .parade-card, .parade-row:focus-within .parade-card { animation-play-state: paused; } .parade.is-paused .parade-track, .parade.is-paused .parade-card, .parade-row.is-touchpaused .parade-track, .parade-row.is-touchpaused .parade-card { animation-play-state: paused; } @media (hover: none) { .parade-row-a .parade-track { animation-duration: 90s; } .parade-row-b .parade-track { animation-duration: 118s; } } @keyframes paradeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .parade-card { position: relative; flex: 0 0 auto; margin-right: 16px; width: 208px; text-decoration: none; color: var(--ink); --accent: var(--kin); animation: paradeFloat 8s ease-in-out infinite; } .parade-card:nth-child(6n+1) { animation-duration: 7s; animation-delay: 0s; } .parade-card:nth-child(6n+2) { animation-duration: 9s; animation-delay: -1.5s; } .parade-card:nth-child(6n+3) { animation-duration: 8s; animation-delay: -3.2s; } .parade-card:nth-child(6n+4) { animation-duration: 11s; animation-delay: -2.1s; } .parade-card:nth-child(6n+5) { animation-duration: 10s; animation-delay: -4.6s; } .parade-card:nth-child(6n) { animation-duration: 8.5s; animation-delay: -6.0s; } @keyframes paradeFloat { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } } .parade-media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0, 0, 0, .42); background: var(--washi-2); } .parade-media img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; display: block; } .parade-card.no-img .parade-media img { display: none; } .parade-fallback { position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 130% at 30% 18%, color-mix(in srgb, var(--accent) 66%, #fff 8%) 0%, color-mix(in srgb, var(--accent) 44%, var(--sumi) 0%) 52%, color-mix(in srgb, var(--accent) 22%, var(--sumi) 70%) 100%); } .parade-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .parade-card:focus-visible { outline: none; } .parade-card:focus-visible .parade-media { outline: 2px solid var(--kin); outline-offset: 3px; } @media (min-width: 760px) { .parade-card { width: 300px; margin-right: 20px; } .parade { gap: 18px; } } .parade-controls { display: flex; justify-content: flex-end; margin-top: 6px; padding-right: 2px; position: relative; z-index: 2; } .parade-toggle { min-height: 44px; padding: 8px 18px; border-radius: 12px; border: 1.5px solid var(--kin); background: transparent; color: var(--kin-pale); font-size: 15px; font-weight: 600; letter-spacing: .06em; line-height: 1; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .parade-toggle[aria-pressed="true"] { border-color: var(--kin-pale); } .parade-toggle:hover { background: rgba(184, 151, 106, .16); color: var(--star-warm); border-color: var(--kin-pale); } .parade-toggle:focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; } .constellation { position: absolute; z-index: 0; top: 40%; left: 54%; width: min(920px, 132vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; opacity: .26; } .constellation::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 50% 44%, rgba(201, 162, 76, .16), rgba(201, 162, 76, .05) 40%, transparent 66%); } .constellation svg { position: relative; width: 100%; height: 100%; display: block; animation: constellationSpin 180s linear infinite; } @keyframes constellationSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .geo-divider { display: flex; justify-content: center; align-items: center; padding: 10px 0 2px; } .geo-divider svg { width: 46px; height: 46px; display: block; } .craft-btn .cb-ico { width: 100%; height: 140px; flex: 0 0 auto; --face-y: 20%; border-radius: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--kin) 30%, transparent); box-shadow: none; } .craft-btn .cb-ico .teller-ico-img { border-radius: 0; } .craft-btn .cb-ico .teller-ico-ph { font-size: 46px; } @media (min-width: 760px) { .craft-btn .cb-ico { height: 168px; } } [src*="img/teller/touzai."] { --face-zoom: 1.85; --face-y: 7%; } [src*="img/teller/shimono."] { --face-zoom: 1.05; --face-y: 22%; } [src*="img/teller/veda."] { --face-zoom: 1.35; --face-y: 16%; } [src*="img/teller/koyomi."] { --face-zoom: 1.18; --face-y: 18%; } [src*="img/teller/kazuhara."]{ --face-zoom: 1.00; --face-y: 20%; } [src*="img/teller/gogyo."] { --face-zoom: 1.12; --face-y: 22%; } [src*="img/teller/kavala."] { --face-zoom: 1.48; --face-y: 12%; } [src*="img/teller/rune."] { --face-zoom: 1.30; --face-y: 16%; } [src*="img/teller/nekoame."] { --face-zoom: 1.42; --face-y: 6%; } [src*="img/teller/nagi."] { --face-zoom: 1.25; --face-y: 15%; } [src*="img/teller/junki."] { --face-zoom: 1.12; --face-y: 20%; } [src*="img/teller/princess."]{ --face-zoom: 1.18; --face-y: 15%; } [src*="img/teller/iro."] { --face-zoom: 1.28; --face-y: 15%; } [src*="img/teller/konami."] { --face-zoom: 1.12; --face-y: 16%; } [src*="img/teller/ibuki."] { --face-zoom: 1.35; --face-y: 12%; } [src*="img/teller/wadachi."] { --face-zoom: 1.50; --face-y: 6%; } [src*="img/teller/butler."] { --face-zoom: 1.18; --face-y: 18%; } [src*="img/teller/aoi."] { --face-zoom: 1.15; --face-y: 12%; } [src*="img/teller/miu."] { --face-zoom: 1.00; --face-y: 14%; } [src*="img/teller/hinata."] { --face-zoom: 1.25; --face-y: 14%; } [src*="img/teller/mumu."] { --face-zoom: 1.50; --face-y: 6%; } [src*="img/teller/eki."] { --face-zoom: 1.35; --face-y: 8%; } [src*="img/teller/osaru."] { --face-zoom: 1.00; --face-y: 18%; } [src*="img/teller/seimei."] { --face-zoom: 1.32; --face-y: 12%; } [src*="img/teller/fusui."] { --face-zoom: 1.35; --face-y: 10%; } .theme-card .host:has(.host-ico) { display: flex; align-items: center; gap: 9px; padding-left: 0; } .theme-card .host:has(.host-ico)::before { display: none; } .theme-card .host-ico { width: 56px; height: 56px; flex: 0 0 auto; } .theme-card .host-ico .teller-ico-ph { font-size: 22px; } .pickup-face { width: 164px; height: 100%; min-height: 208px; align-self: stretch; object-fit: cover; display: none; object-position: var(--face-x, 50%) var(--face-y, 18%); transform: scale(var(--face-zoom, 1)); transform-origin: var(--face-x, 50%) var(--face-y, 18%); } .pickup-card.has-face .pickup-face { display: block; } .pickup-card.has-face .pickup-aside { overflow: hidden; border-radius: 16px; border: 2px solid var(--kin); box-shadow: inset 0 -8px 18px rgba(0, 0, 0, .26), 0 8px 22px rgba(0, 0, 0, .34); } .pickup-card.has-face .pickup-aside .star-mark { display: none; } @media (min-width: 900px) { .pickup-face { width: 200px; } } @media (max-width: 520px) { .pickup-card.has-face { flex-direction: column; } .pickup-card.has-face .pickup-aside { display: block; order: -1; margin-bottom: 4px; } .pickup-card.has-face .pickup-face { width: 100%; height: 200px; min-height: 0; } } .concern-hero { padding-block: var(--rhythm-block); } .ch-title { margin: 0 0 var(--s3); } .ch-lead { display: block; font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: clamp(30px, 8.4vw, 54px); line-height: 1.22; letter-spacing: .02em; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; } .ch-sub { display: block; margin-top: 10px; font-family: var(--font-serif); font-weight: 600; color: var(--ink-soft); font-size: clamp(18px, 4.4vw, 27px); line-height: 1.5; letter-spacing: .03em; text-wrap: balance; } .ch-fact { margin: 0 0 var(--s6); font-family: var(--font-mute); font-weight: 600; font-size: 13px; letter-spacing: .12em; color: var(--kin-pale); } .ch-ent { display: block; margin-top: 5px; font-weight: 500; font-size: 11.5px; letter-spacing: .08em; color: var(--ink-dim); } .concern-hero .hl { font-weight: 700; color: var(--kin-pale); } .concern-hero h1 .hl::after { display: none; } .concern-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; } .concern-btn { display: flex; align-items: center; gap: 13px; min-height: 100px; padding: 12px 14px; border: 1.5px solid var(--kin); border-radius: 12px; background: var(--glass-night); color: var(--star-warm); text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease); } .concern-btn:hover { background: rgba(212, 191, 163, .12); border-color: var(--kin-pale); transform: translateY(-1px); } .concern-btn[data-concern] .concern-ico { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc-deco) 60%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--cc-deco) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14), 0 4px 12px rgba(0, 0, 0, .28); border-color: color-mix(in srgb, var(--cc-deco) 55%, var(--line)); } .concern-btn:active { transform: translateY(0); } .concern-btn:focus-visible { outline: 2px solid var(--kin); outline-offset: 3px; } .concern-ico { width: 72px; height: 72px; } .concern-ico .teller-ico-ph { font-size: 28px; } .concern-label { min-width: 0; font-family: var(--font-serif); font-weight: 600; font-size: clamp(14px, 3.3vw, 17px); letter-spacing: 0; line-height: 1.3; text-wrap: balance; word-break: auto-phrase; line-break: strict; } .concern-btn .btn-arrow { display: none; margin-left: auto; flex: 0 0 auto; color: var(--kin-pale); transition: transform .25s var(--ease); } .concern-btn:hover .btn-arrow { transform: translateX(4px); } @media (min-width: 720px) { .concern-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } .concern-btn { min-height: 112px; } .concern-ico { width: 88px; height: 88px; } .concern-ico .teller-ico-ph { font-size: 34px; } .concern-btn .btn-arrow { display: block; } } @media (max-width: 430px) { .concern-btn { padding: 11px 12px; gap: 10px; min-height: 94px; } .concern-ico { width: 60px; height: 60px; } .concern-ico .teller-ico-ph { font-size: 24px; } .concern-label { font-size: clamp(13.5px, 3.7vw, 16px); line-height: 1.36; } } .hero-poem { font-family: var(--font-serif); font-weight: 700; color: var(--ink); font-size: clamp(20px, 5vw, 30px); line-height: 1.5; letter-spacing: .04em; margin: 0 0 16px; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; } .rm-clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sec-head:has(.rm-toggle[open]) .rm-clip { -webkit-line-clamp: unset; overflow: visible; } .rm-toggle { margin: 6px 0 0; } .rm-toggle > summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; font-family: var(--font-mute); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--kin-pale); width: max-content; } .rm-toggle > summary::-webkit-details-marker { display: none; } .rm-toggle > summary::after { content: "＋つづきを読む"; } .rm-toggle[open] > summary::after { content: "－とじる"; } .rm-toggle > summary::before { content: none; } .rm-toggle:focus-within > summary { outline: 2px solid var(--kin); outline-offset: 3px; border-radius: 4px; } .craft-fold { margin: 8px 0 4px; } .craft-fold > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-family: var(--font-serif); font-size: 14px; font-weight: 600; letter-spacing: .03em; color: var(--ink); width: max-content; } .craft-fold > summary::-webkit-details-marker { display: none; } .craft-fold > summary::after { content: "＋"; color: var(--kin-pale); font-weight: 700; } .craft-fold[open] > summary::after { content: "－"; } .craft-fold:focus-within > summary { outline: 2px solid var(--kin); outline-offset: 3px; border-radius: 4px; } .craft-fold .sec-sub { margin-top: 10px; } @media (prefers-reduced-motion: reduce) { .parade-track { animation: none; } .parade-card { animation: none; } .parade-row { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; -webkit-mask-image: none; mask-image: none; } .parade-row .is-dup { display: none; } .parade-row::-webkit-scrollbar { height: 6px; } .parade-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 50%; } .constellation svg { animation: none; } #uhA2hs .uh-a2-card { animation: none; } #uhA2hs .uh-a2-done { transition: none; } .uh-fav-chip { transition: none; } .hero-editorial .eyebrow, .hero-editorial .hero-poem, .hero-editorial .lead, .hero-editorial .hero-slideshow, .concern-hero .ch-title, .concern-hero .ch-fact, .concern-grid .concern-btn { animation: none; opacity: 1; transform: none; } .hero-editorial .hero-poem .hl, .concern-hero .ch-sub .hl { animation: none; background-image: none; -webkit-text-fill-color: var(--kin-pale); color: var(--kin-pale); } .pickup-cta { animation: none; transform: none; } } .block-title { text-align: center; font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 5vw, 26px); line-height: 1.5; letter-spacing: .04em; margin: 0 0 6px; } .result-block { margin-top: var(--s6); } .result-block--top { margin-top: 0; } .result-block > .section-sub { margin-bottom: 14px; } .apply-block { margin-top: var(--s7); } .hero-editorial .eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .hero-editorial .eyebrow::after { content: ""; display: block; flex: 1 1 auto; width: auto; height: 1px; margin-top: 0; background: linear-gradient(90deg, var(--kin), transparent); } .sec-head--solo { text-align: left; border-bottom: 1px solid var(--line); padding-bottom: var(--s5); } .sec-head--solo .sec-title { margin-bottom: 0; } .sec-head--aside { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: var(--s5); } .sec-head--aside .sec-title { grid-column: 1; grid-row: 1; text-align: left; margin-bottom: var(--s4); } .sec-head--aside .sec-kicker { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0; } .sec-head--aside .sec-desc { grid-column: 1 / -1; grid-row: 2; } @media (max-width: 560px) { .sec-head--aside { display: block; } .sec-head--aside .sec-kicker { justify-content: flex-start; margin: 0 0 var(--s3); } } @media (max-width: 719px) { .play-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .play-grid > .play-card { padding: 18px 15px; } .play-grid > .play-card:first-child { grid-column: 1 / -1; padding: 24px 20px; } .play-grid > .play-card .btn, .themes-page .theme-card .btn { padding-left: 10px; padding-right: 10px; } } .sec--airy { padding-block: var(--rhythm-block); } .sec--dense { padding-block: var(--s6); } .uh-greet:empty, .uh-fav:empty, .uh-habit:empty { display: none; } .uh-greet { margin: 0 0 14px; } .uh-greet-line { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.6; letter-spacing: .04em; color: var(--ink-soft); } .uh-greet-streak { flex: 0 0 auto; font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--kin-pale); border: 1px solid var(--line); border-radius: 12px; padding: 2px 8px; } .uh-fav { margin: 0 0 20px; } .uh-fav-head { margin: 0 0 10px; text-align: center; color: var(--ink-soft); font-family: var(--font-serif); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; } .uh-fav-track { display: flex; gap: 12px; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 2px 2px 6px; scrollbar-width: thin; } .uh-fav-track::-webkit-scrollbar { height: 6px; } .uh-fav-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 50%; } .uh-fav-chip { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 76px; padding: 8px 4px 10px; flex: 0 0 auto; scroll-snap-align: start; text-decoration: none; color: var(--ink-soft); border-radius: var(--r-card); transition: color var(--t), transform .12s var(--ease), background var(--t); --accent: var(--kin); } .uh-fav-chip:hover { color: var(--ink); transform: translateY(-2px); background: rgba(255,255,255,.03); } .uh-fav-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .uh-fav-ico { width: 50px; height: 50px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), inset 0 1px 4px rgba(255,255,255,.18), inset 0 -6px 14px rgba(0,0,0,.28), 0 4px 14px rgba(0,0,0,.30); } .uh-fav-ico .teller-ico-ph { font-size: 20px; } .uh-fav-name { font-size: 11px; line-height: 1.35; text-align: center; letter-spacing: .02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .uh-habit { margin: 16px 0 0; text-align: center; } .uh-a2-row { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 8px; padding: 6px 8px 6px 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,.03); } .uh-a2-open { font-size: 12.5px; letter-spacing: .02em; margin-left: 0; } .uh-a2-dismiss { flex: 0 0 auto; width: 22px; height: 22px; line-height: 1; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: var(--ink-dim); font-size: 15px; } .uh-a2-dismiss:hover { color: var(--ink); } .uh-a2-dismiss:focus-visible { outline: 2px solid var(--kin-pale); outline-offset: 2px; } .uh-cal-row { margin: 0; } .uh-cal-link { font-size: 12.5px; letter-spacing: .02em; margin-left: 0; } #uhA2hs { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; } #uhA2hs .uh-a2-scrim { position: absolute; inset: 0; background: rgba(4,8,20,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } #uhA2hs .uh-a2-card { position: relative; z-index: 1; width: 100%; max-width: 520px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; background: rgba(10,16,38,.86); border: 1px solid rgba(160,185,240,.20); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); animation: uhA2Rise .3s cubic-bezier(.16,.84,.34,1) both; } #uhA2hs .uh-a2-head { padding: 20px 22px 12px; border-bottom: 1px solid rgba(120,150,220,.15); } #uhA2hs .uh-a2-eyebrow { display: block; font-family: var(--font-mute, sans-serif); font-size: 11px; letter-spacing: .18em; color: rgba(212,191,163,.9); margin: 0 0 6px; } #uhA2hs .uh-a2-title { margin: 0; font-family: var(--font-serif, serif); font-size: 19px; line-height: 1.5; font-weight: 700; color: rgba(235,240,255,.96); } #uhA2hs .uh-a2-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 22px 6px; } #uhA2hs .uh-a2-lead { margin: 0 0 12px; font-family: var(--font-sans, sans-serif); font-size: 14.5px; line-height: 1.85; color: rgba(233,238,252,.96); } #uhA2hs .uh-a2-os { margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(120,150,220,.18); border-radius: 12px; background: rgba(255,255,255,.03); } #uhA2hs .uh-a2-os.is-active { border-color: rgba(212,191,163,.5); background: rgba(212,191,163,.07); } #uhA2hs .uh-a2-os-title { margin: 0 0 8px; font-family: var(--font-sans, sans-serif); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: rgba(212,191,163,.92); } #uhA2hs .uh-a2-steps { margin: 0; padding-left: 1.3em; font-family: var(--font-sans, sans-serif); font-size: 14px; line-height: 1.9; color: rgba(226,233,250,.95); } #uhA2hs .uh-a2-steps strong { color: rgba(245,240,225,.98); font-weight: 700; } #uhA2hs .uh-a2-foot { padding: 12px 22px 20px; border-top: 1px solid rgba(120,150,220,.15); background: rgba(5,10,28,.5); } #uhA2hs .uh-a2-done { display: block; width: 100%; box-sizing: border-box; padding: 13px 18px; border: 1px solid rgba(200,175,110,.5); border-radius: 12px; cursor: pointer; font-family: var(--font-serif, serif); font-size: 15px; font-weight: 700; letter-spacing: .04em; color: rgba(245,240,225,.98); background: rgba(255,255,255,.05); transition: background .12s ease, border-color .12s ease; } #uhA2hs .uh-a2-done:hover { background: rgba(255,255,255,.09); border-color: rgba(200,175,110,.75); } #uhA2hs .uh-a2-done:focus-visible { outline: 2px solid #c8a24c; outline-offset: 3px; } @keyframes uhA2Rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @media (min-width: 600px) { #uhA2hs { align-items: center; padding: 24px; } #uhA2hs .uh-a2-card { border-radius: 18px; } } .hero-editorial .eyebrow { animation: riseStagger .7s var(--ease) .05s both; } .hero-editorial .hero-poem { animation: riseStagger .7s var(--ease) .17s both; } .hero-editorial .lead { animation: riseStagger .7s var(--ease) .29s both; } .hero-editorial .hero-slideshow { animation-delay: .42s; } .concern-hero .ch-title { animation: riseStagger .7s var(--ease) .04s both; } .concern-hero .ch-fact { animation: riseStagger .7s var(--ease) .16s both; } .concern-grid .concern-btn { animation: riseStagger .6s var(--ease) both; } .concern-grid .concern-btn:nth-child(1) { animation-delay: .22s; } .concern-grid .concern-btn:nth-child(2) { animation-delay: .29s; } .concern-grid .concern-btn:nth-child(3) { animation-delay: .36s; } .concern-grid .concern-btn:nth-child(4) { animation-delay: .43s; } .concern-grid .concern-btn:nth-child(5) { animation-delay: .50s; } .concern-grid .concern-btn:nth-child(6) { animation-delay: .57s; } .hero-editorial .hero-poem .hl, .concern-hero .ch-sub .hl { background-image: linear-gradient(100deg, var(--kin) 0 34%, var(--star-warm) 50%, var(--kin) 66% 100%); background-size: 220% 100%; background-position: 140% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: heroGildFlow 8s var(--ease) 1s infinite; } @keyframes heroGildFlow { from { background-position: 140% 0; } to { background-position: -40% 0; } } .pickup-cta { animation: ctaFloat 6s var(--ease) .8s infinite; } @keyframes ctaFloat { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } } :root{ --c-love-deco:#B85570; --c-love-txt:#E0A6B4; --c-en-deco: #8778BE; --c-en-txt: #C9BEE6; --c-work-deco:#4A82C8; --c-work-txt:#A9C6EC; --c-social-deco:#3E9C86; --c-social-txt:#A6D8C9; --c-money-deco:var(--kin); --c-money-txt:var(--kin-pale); --c-today-deco:#7C8BA8; --c-today-txt:#C4CEE0; } .sec--night.face-ai{ background:linear-gradient(180deg,#0c1a30 0%,#0a1020 60%,#080d18 100%); } .sec--night.face-sumire{ background:linear-gradient(180deg,#14122e 0%,#100e26 60%,#0b0a1c 100%); } .sec--night.face-midori{ background:linear-gradient(180deg,#0a1e1a 0%,#081815 60%,#06110f 100%); } .sec--night.face-budo{ background:linear-gradient(180deg,#180f22 0%,#130b1b 60%,#0d0713 100%); } body[class*="world-"] .sec-eyebrow{ color: color-mix(in srgb, var(--w-accent2, var(--kin-pale)) 60%, var(--star-cool)); } body[class*="world-"] .sec--night::after{ background: radial-gradient(120% 80% at 50% -12%, color-mix(in srgb, var(--w-accent, var(--kin)) 22%, transparent) 0%, transparent 60%); } body[class*="world-"] .angle-card{ border-top: 2px solid color-mix(in srgb, var(--w-accent) 50%, var(--line)); } [data-concern="love"] { --cc-deco:var(--c-love-deco); --cc-txt:var(--c-love-txt); } [data-concern="en"] { --cc-deco:var(--c-en-deco); --cc-txt:var(--c-en-txt); } [data-concern="work"] { --cc-deco:var(--c-work-deco); --cc-txt:var(--c-work-txt); } [data-concern="career"]{ --cc-deco:var(--c-work-deco); --cc-txt:var(--c-work-txt); } [data-concern="social"]{ --cc-deco:var(--c-social-deco); --cc-txt:var(--c-social-txt); } [data-concern="money"] { --cc-deco:var(--c-money-deco); --cc-txt:var(--c-money-txt); } [data-concern="today"] { --cc-deco:var(--c-today-deco); --cc-txt:var(--c-today-txt); } .concern-pick[data-concern]{ border-color: color-mix(in srgb, var(--cc-deco) 55%, var(--line)); } .concern-pick[data-concern]:hover{ border-color: var(--cc-deco); } .concern-pick[data-concern].active{ color: var(--cc-txt); border-color: var(--cc-deco); box-shadow: 0 0 0 1px var(--cc-deco) inset; } #relatedReadings > .wrap{ max-width: var(--w-wide); } [data-concern="future"] { --cc-deco:var(--c-today-deco); --cc-txt:var(--c-today-txt); } [data-concern="migrate"]{ --cc-deco:var(--c-today-deco); --cc-txt:var(--c-today-txt); } [data-concern="study"] { --cc-deco:var(--c-work-deco); --cc-txt:var(--c-work-txt); } [data-concern="marriage"]{ --cc-deco:var(--c-en-deco); --cc-txt:var(--c-en-txt); } [data-concern="health"] { --cc-deco:var(--c-social-deco); --cc-txt:var(--c-social-txt); } .themes-page .theme-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: stretch; } .themes-page .theme-card { padding: 16px 14px; } .themes-page .theme-card h3 { font-size: 15px; line-height: 1.4; letter-spacing: 0; margin: 10px 0 6px; text-wrap: balance; overflow-wrap: anywhere; } .themes-page .theme-card .host { font-size: 12.5px; padding-bottom: 10px; margin-bottom: 10px; letter-spacing: .02em; } .themes-page .theme-card p { margin-bottom: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; } .themes-page .theme-card .btn { width: 100%; text-align: center; padding-left: 8px; padding-right: 8px; } .themes-page .theme-card .tag { top: 12px; right: 12px; } .themes-page .theme-card--lead { grid-column: 1 / -1; padding: 22px 20px; } .themes-page .theme-card--lead .star-mark { width: 52px; height: 52px; padding: 12px; } .themes-page .theme-card--lead h3 { font-size: 20px; line-height: 1.36; } .themes-page .theme-card--lead p { -webkit-line-clamp: unset; display: block; font-size: 15.5px; line-height: 1.8; } .themes-page .theme-card--lead .btn { width: auto; align-self: flex-start; grid-column: 2; } @media (min-width: 560px) { .themes-page .theme-card--lead { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; align-items: start; } .themes-page .theme-card--lead .star-mark { width: 60px; height: 60px; grid-row: 1 / span 4; align-self: center; } .themes-page .theme-card--lead .tag { grid-column: 2; } } .themes-page .asobi-groups { margin-top: 6px; } .themes-page .asobi-fold { margin: 0; } .themes-page .asobi-sum { display: flex; align-items: center; gap: 10px; list-style: none; color: var(--ink-soft); font-weight: 600; } .themes-page .asobi-sum::-webkit-details-marker { display: none; } .themes-page .asobi-sum-title { font-size: 12.5px; letter-spacing: .1em; } .themes-page .asobi-sum-count { font-size: 11px; letter-spacing: .04em; color: var(--ink-mute); font-weight: 600; } @media (max-width: 719px) { .themes-page .asobi-fold { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: linear-gradient(180deg, rgba(212, 191, 163, .06), rgba(212, 191, 163, .015)); margin-top: 10px; } .themes-page .asobi-sum { padding: 14px 15px; min-height: 48px; box-sizing: border-box; cursor: pointer; } .themes-page .asobi-sum-count { margin-left: auto; padding-left: 8px; } .themes-page .asobi-sum::after { content: "＋"; flex: 0 0 auto; margin-left: 8px; color: var(--kin-pale); font-size: 17px; line-height: 1; font-weight: 400; } .themes-page .asobi-fold[open] > .asobi-sum::after { content: "－"; } .themes-page .asobi-sum:focus-visible { outline: 2px solid var(--kin); outline-offset: -2px; } .themes-page .asobi-fold > .theme-grid { padding: 2px 12px 14px; margin-top: 0; } } @media (min-width: 720px) { .themes-page .asobi-fold > .theme-grid { display: grid; } .themes-page .asobi-fold::details-content { content-visibility: visible; } .themes-page .asobi-sum { pointer-events: none; cursor: default; margin: 20px 0 2px; font-size: 12.5px; letter-spacing: .16em; } .themes-page .asobi-fold:first-child > .asobi-sum { margin-top: 4px; } .themes-page .asobi-sum-title { letter-spacing: .16em; } .themes-page .asobi-sum::after { content: ""; flex: 1; height: 1px; background: var(--line); order: 3; } .themes-page .asobi-sum-count { display: none; } } .themes-page .theme-card .star-mark { position: relative; width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: radial-gradient(120% 120% at 32% 24%, rgba(212, 191, 163, .20), rgba(212, 191, 163, .05) 60%), linear-gradient(160deg, rgba(20, 28, 48, .55), rgba(10, 14, 26, .35)); border: 1px solid rgba(212, 191, 163, .38); box-shadow: inset 0 0 0 1px rgba(212, 191, 163, .10), 0 1px 4px -2px rgba(0, 0, 0, .5); color: var(--kin-pale); } .themes-page .theme-card .star-mark svg { transform: scale(.92); transform-origin: center; } .themes-page .theme-card .star-mark[style*="--tile-icon-image"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tile-icon-image) center / cover no-repeat; } .themes-page .theme-card .star-mark[style*="--tile-icon-image"] svg { opacity: 0; } .themes-page .cat-tabs { position: sticky; top: 0; z-index: 30; padding: 8px 0; background: linear-gradient(180deg, rgba(8, 12, 24, .92), rgba(8, 12, 24, .78)); border-bottom: 1px solid rgba(212, 191, 163, .18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .themes-page .cat-tabs-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .themes-page .cat-tabs-scroll::-webkit-scrollbar { display: none; } .themes-page .cat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 8px 15px; border-radius: 12px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink); text-decoration: none; white-space: nowrap; background: linear-gradient(180deg, rgba(212, 191, 163, .14), rgba(212, 191, 163, .06)); border: 1px solid rgba(212, 191, 163, .34); transition: border-color var(--t), background var(--t); } .themes-page .cat-chip:hover, .themes-page .cat-chip:focus-visible { border-color: var(--kin-pale); background: linear-gradient(180deg, rgba(212, 191, 163, .22), rgba(212, 191, 163, .10)); } .themes-page .cat-chip:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; } @media (min-width: 720px) { .themes-page .cat-tabs-scroll { justify-content: center; flex-wrap: wrap; overflow-x: visible; } } .menu-sec .craft-menu.menu-grid { grid-template-columns: 1fr; gap: 12px; } .menu-sec .craft-menu .menu-item-card { min-height: 84px; padding: 18px 44px 18px 16px; } .menu-sec .craft-menu .mi-thumb { width: 54px; height: 54px; } .menu-sec .craft-menu .mi-thumb-fallback { font-size: 25px; } .menu-sec .craft-menu .mi-name { font-size: 17px; } .menu-sec .menu-section .menu-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .menu-sec .menu-section .menu-item-card { min-height: 60px; padding: 11px 12px 11px 11px; gap: 10px; align-items: center; } .menu-sec .menu-section .menu-item-card .mi-thumb { width: 34px; height: 34px; border-radius: 8px; } .menu-sec .menu-section .menu-item-card .mi-thumb-fallback { font-size: 17px; } .menu-sec .menu-section .menu-item-card .mi-name { font-size: 13.5px; line-height: 1.34; } .menu-sec .menu-section .menu-item-card { padding-right: 12px; } .menu-sec .menu-section .menu-item-card::after { content: none; } .menu-sec .menu-section .mi-meta { gap: 6px; margin-top: 5px; } .menu-sec .menu-section .mi-price { order: 3; margin-left: auto; background: none; border: none; box-shadow: none; padding: 0; color: var(--ink-mute); font-size: 11.5px; font-weight: 600; letter-spacing: .02em; } .menu-sec .menu-section .mi-vol { order: 1; background: none; border: 1px solid var(--line); color: var(--ink-mute); font-weight: 600; padding: 2px 7px; font-size: 10.5px; } .menu-sec .menu-section .mi-free { order: 2; background: none; box-shadow: none; padding: 0; color: var(--ink-mute); font-weight: 600; font-size: 10.5px; letter-spacing: .03em; } .menu-sec .menu-section > .sec-label.v-star { font-size: 17px; } .menu-sec .menu-group-note { color: var(--ink-soft); font-size: 13px; font-weight: 600; margin: 2px 0 14px; } .menu-sec .menu-group-note::before { content: "◇ "; color: var(--kin-pale); font-weight: 700; } .menu-sec .books-fold { margin: 0; } .menu-sec .books-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--washi-2); color: var(--ink); font-weight: 600; font-size: 14.5px; letter-spacing: .02em; transition: border-color var(--t); } .menu-sec .books-fold > summary::-webkit-details-marker { display: none; } .menu-sec .books-fold > summary::after { content: "＋"; color: var(--kin-pale); font-size: 18px; font-weight: 400; line-height: 1; } .menu-sec .books-fold[open] > summary::after { content: "－"; } .menu-sec .books-fold > summary:hover { border-color: var(--kin); } .menu-sec .books-fold > summary:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; } .menu-sec .books-fold-note { color: var(--ink-mute); font-size: 12px; margin: 10px 0 0; } .menu-sec .books-fold .plan-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; } .menu-sec .books-fold .plan-card { padding: 15px 16px; } .menu-sec .books-fold .plan-card.is-large { grid-column: auto; } .menu-sec .books-fold .plan-desc { font-size: 13px; margin: 6px 0 10px; } .menu-sec .books-fold .plan-meta .mi-free { background: none; box-shadow: none; padding: 0; color: var(--ink-mute); font-weight: 600; font-size: 11px; } .night-page .menu-sec .menu-section .mi-price, .night-page .menu-sec .menu-section .mi-free, .night-page .menu-sec .menu-section .mi-vol { color: var(--ink-mute); } .premium-body .premium-compare-wrap { margin: 16px auto 4px; } .premium-body .premium-plan-table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid rgba(212, 191, 163, .28); border-radius: var(--r-card); overflow: hidden; } .premium-body .premium-plan-cap { caption-side: top; text-align: left; padding: 0 2px 10px; font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--ink); letter-spacing: .03em; } .premium-body .ppt-cap-note { display: block; margin-top: 4px; font-family: var(--font-sans); font-weight: 400; font-size: 11.5px; color: var(--ink-mute); letter-spacing: .02em; } .premium-body .premium-plan-table th, .premium-body .premium-plan-table td { border: 1px solid rgba(212, 191, 163, .18); padding: 8px 6px; text-align: center; vertical-align: middle; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); word-break: auto-phrase; } .premium-body .premium-plan-table thead th { background: rgba(212, 191, 163, .10); padding: 9px 5px; } .premium-body .premium-plan-table thead th a { color: var(--ink); font-family: var(--font-serif); font-weight: 600; font-size: 12.5px; letter-spacing: .01em; text-decoration: none; border-bottom: 1px solid var(--kin-pale); } .premium-body .premium-plan-table thead th a:hover, .premium-body .premium-plan-table thead th a:focus-visible { color: var(--kin-pale); } .premium-body .premium-plan-table th[scope="row"] { text-align: left; width: 21%; color: var(--ink-mute); font-weight: 600; font-size: 11px; letter-spacing: .02em; background: rgba(212, 191, 163, .05); } .premium-body .ppt-corner { width: 21%; background: transparent !important; border: none; } .premium-body .ppt-corner-label { font-size: 10.5px; color: var(--ink-mute); font-weight: 600; letter-spacing: .04em; } .premium-body .premium-plan-table tbody tr:first-child td { color: var(--ink); font-weight: 600; font-size: 13px; } .premium-body .premium-plan-table-note { margin: 8px 2px 0; color: var(--ink-mute); } .premium-body .premium-lockfold { text-align: left; padding: 0; overflow: hidden; } .premium-body .premium-lockfold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 18px; margin: 0; background: linear-gradient(180deg, rgba(212, 191, 163, .12), rgba(10, 14, 26, .28)); border-top: 1px solid var(--kin-pale); color: var(--ink); font-size: 13.5px; letter-spacing: .04em; transition: background var(--t); } .premium-body .premium-lockfold > summary::-webkit-details-marker { display: none; } .premium-body .lockfold-lock { flex: 0 0 auto; font-size: 14px; line-height: 1; filter: saturate(.7); } .premium-body .lockfold-label { font-family: var(--font-serif); font-weight: 600; color: var(--kin-pale); letter-spacing: .08em; } .premium-body .lockfold-hint { margin-left: auto; font-size: 11.5px; color: var(--ink-mute); letter-spacing: .02em; } .premium-body .premium-lockfold > summary::after { content: "＋"; flex: 0 0 auto; margin-left: 8px; color: var(--kin-pale); font-size: 17px; line-height: 1; font-weight: 400; } .premium-body .premium-lockfold[open] > summary::after { content: "－"; } .premium-body .premium-lockfold > summary:hover { background: linear-gradient(180deg, rgba(212, 191, 163, .18), rgba(10, 14, 26, .30)); } .premium-body .premium-lockfold > summary:focus-visible { outline: 2px solid var(--kin); outline-offset: -2px; } .premium-body .premium-lockfold[open] { padding-bottom: 18px; } .premium-body .premium-lockfold > :not(summary) { margin-left: 18px; margin-right: 18px; } .premium-body .premium-lockfold > h4:first-of-type { margin-top: 16px; } .premium-body .premium-teaser { position: relative; } .premium-body .teaser-body:not(:empty) { max-height: 6.4em; overflow: hidden; } .premium-body .premium-teaser::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(10, 14, 26, .34)); } .money-hero-band { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px; margin: 0 auto 20px; max-width: var(--w-wide); border: 1px solid rgba(95, 179, 154, .30); border-radius: var(--r-card); background: linear-gradient(180deg, rgba(95, 179, 154, .10), rgba(10, 14, 26, .18)); overflow: hidden; } .money-hero-band::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #7fc9b1, #2f7d68); } .money-hero-figures { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-family: var(--font-num, var(--font-serif)); font-weight: 700; font-size: 52px; letter-spacing: .06em; color: rgba(212, 191, 163, .085); pointer-events: none; white-space: nowrap; line-height: 1; font-feature-settings: "tnum" 1; } @media (max-width: 560px) { .money-hero-figures { font-size: 40px; right: 12px; color: rgba(212, 191, 163, .07); } } .money-hero-ico { width: 60px; height: 60px; z-index: 1; } .money-hero-ico .teller-ico-ph { font-size: 24px; } .money-hero-who { display: flex; flex-direction: column; z-index: 1; min-width: 0; } .money-hero-who b { font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--ink); letter-spacing: .04em; } .money-hero-who small { color: var(--ink-dim); font-size: 12px; margin-top: 2px; letter-spacing: .02em; } @media (prefers-reduced-motion: no-preference) { .sky-field .stars { opacity: .82; } .sky-field .dust { opacity: .66; } } .hero-stars { opacity: .28; } .themes-page .banner-hero { margin-bottom: 20px; } .disclaimer { font-size: 14px; } .copyright { font-size: 13px; } .legal-links a { font-size: 13.5px; } .tiny { font-size: 14px; } .bf-req { font-size: 12.5px; padding: 2px 9px; } .world-hero .world-persona { display: none; } @media (min-width: 720px) { .teller-intro .teller-grid { align-items: start; } .teller-intro .craft-banner { position: sticky; top: 20px; align-self: start; } } [data-navlabel] { scroll-margin-top: 74px; } .section-nav-list { list-style: none; margin: 0; padding: 0; } .section-nav-item { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); min-height: 44px; box-sizing: border-box; border: 1px solid rgba(212, 191, 163, .30); background: linear-gradient(180deg, rgba(212, 191, 163, .13), rgba(212, 191, 163, .05)); transition: border-color var(--t), background var(--t), color var(--t); } .section-nav-item .sn-num { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--kin-pale); flex: 0 0 auto; line-height: 1; } .section-nav-item .sn-label { font-family: var(--font-serif); font-weight: 600; font-size: 13px; letter-spacing: .02em; line-height: 1.3; } .section-nav-item:hover, .section-nav-item:focus-visible { border-color: var(--kin-pale); background: linear-gradient(180deg, rgba(212, 191, 163, .22), rgba(212, 191, 163, .10)); } .section-nav-item:focus-visible { outline: 2px solid var(--kin); outline-offset: 2px; } .section-nav-item[aria-current="true"] { border-color: var(--kin-pale); color: var(--star-warm); background: linear-gradient(180deg, rgba(212, 191, 163, .30), rgba(212, 191, 163, .14)); } .section-nav-item[aria-current="true"] .sn-label { color: var(--star-warm); } .section-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--bar-bg, rgba(14, 20, 38, .92)); border-top: 1px solid rgba(212, 191, 163, .22); -webkit-backdrop-filter: saturate(1.1) blur(8px); backdrop-filter: saturate(1.1) blur(8px); padding: 7px 0 calc(7px + env(safe-area-inset-bottom)); } .section-nav .section-nav-list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 max(12px, env(safe-area-inset-left)); } .section-nav .section-nav-list::-webkit-scrollbar { display: none; } .section-nav-cell { flex: 0 0 auto; } .section-nav-item { padding: 8px 15px; border-radius: 12px; white-space: nowrap; } .has-section-nav .site-footer { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } @media (min-width: 1464px) { .section-nav { left: auto; right: 14px; width: 158px; bottom: auto; top: 50%; transform: translateY(-50%); padding: 11px 11px; border: 1px solid rgba(212, 191, 163, .22); border-radius: var(--r-card); background: var(--glass-night); -webkit-backdrop-filter: saturate(1.1) blur(9px); backdrop-filter: saturate(1.1) blur(9px); } .section-nav::before { content: "目次"; display: block; font-family: var(--font-mute, var(--font-sans)); font-size: 10.5px; letter-spacing: .2em; color: var(--ink-mute); margin: 0 2px 9px; } .section-nav .section-nav-list { display: block; overflow: visible; padding: 0; } .section-nav-cell + .section-nav-cell { margin-top: 6px; } .section-nav-item { padding: 9px 11px; border-radius: 10px; white-space: nowrap; gap: 9px; } .has-section-nav .site-footer { padding-bottom: 0; } } .world-body .world-hero .hero-lede { font-family: var(--font-mute); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: .02em; color: var(--ink-soft); max-width: var(--measure); margin: 0 0 var(--s5); } @media (min-width: 1040px) { .world-hero .hero-inner > .hero-lede { grid-column: 1; } } .night-page .q-card { background: linear-gradient(180deg, rgba(52, 66, 104, .96) 0%, rgba(42, 54, 86, .94) 100%); border: 1px solid rgba(212, 191, 163, .38); box-shadow: inset 0 1px 0 rgba(212, 191, 163, .18), 0 16px 40px rgba(0, 0, 0, .58); } .night-page .mi-thumb { background: rgba(212, 191, 163, .16); border-color: rgba(212, 191, 163, .34); } .world-body .world-hero { background-image: radial-gradient(120% 78% at 50% -8%, color-mix(in srgb, var(--teller, #3d5c9e) 30%, transparent) 0%, color-mix(in srgb, var(--teller, #3d5c9e) 12%, transparent) 34%, transparent 62%); } body.world-body.night-page { --night-3: color-mix(in srgb, #12203c 66%, var(--teller, #3d5c9e) 34%); } .world-body #quiz { background-color: color-mix(in srgb, var(--teller, #3d5c9e) 14%, transparent); } .world-body .sec--night { background: linear-gradient(180deg, color-mix(in srgb, #0d1426 86%, var(--teller, #3d5c9e) 14%) 0%, color-mix(in srgb, #0a1020 90%, var(--teller, #3d5c9e) 10%) 60%, #080d18 100%); } .world-body .q-card, .world-body .plan-card { position: relative; } .world-body .q-card { background: linear-gradient(180deg, color-mix(in srgb, rgba(52, 66, 104, .96) 72%, var(--teller, #3f45a2) 28%) 0%, color-mix(in srgb, rgba(42, 54, 86, .94) 76%, var(--teller, #3f45a2) 24%) 100%); --ink-dim: #cdd5e3; --ink-mute: #cdd5e3; --ink-soft: #d8e0ed; } .world-body .q-card::before, .world-body .menu-item-card::before, .world-body .plan-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 2; background: linear-gradient(90deg, var(--teller, #3d5c9e), var(--teller-2, #c79a3a)); border-radius: var(--r-key) var(--r-key) 0 0; } .world-body .result-card::before { background: linear-gradient(90deg, var(--teller, #3d5c9e), var(--teller-2, #c79a3a)); }