/* 曼荼羅の説明ページ（1曼荼羅1ページ）共通の見た目。設計値は qi9.jp トップと同じ（9系列・白銀比・昼→宵） */
:root{--kinari:#F7F3EC;--sage:#A8BFA3;--coral:#F2B8A0;--asahi:#D9B36C;--sumi:#3A3A38;--fuji:#EFEBF4;--lavender:#B9A7D9;--yoi:#2E3358;--hoshi:#E3C77E;--font-round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;--font-latin:"Quicksand","M PLUS Rounded 1c",sans-serif}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:var(--font-round);color:var(--sumi);background:var(--kinari);line-height:1.9;font-size:16px;overflow-x:hidden}
img{max-width:100%}a{color:inherit}
header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 27px;background:color-mix(in srgb,var(--kinari) 82%,transparent);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.wordmark{font-family:var(--font-latin);font-weight:600;font-size:22px;letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:9px}
.wordmark img{width:27px;height:27px}
nav{display:flex;gap:27px;font-size:14px;font-weight:500}nav a{text-decoration:none;opacity:.75}nav a:hover,nav a.on{opacity:1}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:99px 27px 81px;position:relative;background:radial-gradient(ellipse 140% 60% at 50% 108%,color-mix(in srgb,var(--sage) 38%,var(--kinari)) 0%,transparent 62%),radial-gradient(ellipse 90% 50% at 78% -10%,color-mix(in srgb,var(--asahi) 22%,var(--kinari)) 0%,transparent 60%),var(--kinari)}
.hero .mon{width:126px;height:126px;animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.hero .kicker{font-family:var(--font-latin);font-size:13px;letter-spacing:.27em;color:var(--sage);text-transform:uppercase;margin-top:27px}
.hero h1{margin-top:9px;font-size:clamp(28px,6vw,45px);font-weight:700;letter-spacing:.06em}
.hero h1 .latin{font-family:var(--font-latin);letter-spacing:.02em}
.hero .first-voice{margin-top:27px;font-size:clamp(18px,3.6vw,24px);font-weight:500;letter-spacing:.12em}
.hero .hero-note{margin-top:27px;font-size:14px;opacity:.72;letter-spacing:.05em;max-width:29em}
.scroll-hint{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);font-size:12px;opacity:.5;letter-spacing:.3em}
section{padding:99px 27px}.inner{max-width:882px;margin:0 auto}
.sec-label{font-family:var(--font-latin);font-size:13px;font-weight:600;letter-spacing:.27em;color:var(--sage);text-transform:uppercase;margin-bottom:9px}
h2{font-size:clamp(22px,4vw,30px);font-weight:700;letter-spacing:.08em;margin-bottom:27px}
.lead{max-width:34em;margin-bottom:45px}
.layer-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}
.layer-cards.four{grid-template-columns:repeat(2,1fr);max-width:630px;margin:0 auto}
.card{aspect-ratio:1/1.414;background:#fff;border-radius:18px;padding:36px 27px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 9px 27px rgba(58,58,56,.07);text-decoration:none}
.card .glyph svg{width:36px;height:36px;display:block}.card .glyph img{width:54px;height:54px;display:block}
.card h3{margin-top:18px;font-size:18px;letter-spacing:.1em}
.card .en{font-family:var(--font-latin);font-size:11px;letter-spacing:.2em;color:var(--asahi);margin-top:4px;text-transform:uppercase}
.card p{margin-top:18px;font-size:14px;opacity:.85}
.card .tag{margin-top:auto;font-size:11px;opacity:.55;letter-spacing:.05em}
.card .soon{margin-top:7px;font-size:10px;letter-spacing:.12em;color:var(--asahi);border:1px solid color-mix(in srgb,var(--asahi) 60%,transparent);border-radius:99px;padding:1px 11px}
a.card:hover{transform:translateY(-3px);transition:transform .2s ease}
.spine{text-align:center;padding:126px 27px;background:linear-gradient(180deg,var(--kinari) 0%,var(--fuji) 55%,#C9BFDD 100%)}
.spine .mon{width:63px;height:63px;opacity:.9}
.spine h2{margin:27px 0 13px;font-size:clamp(24px,5vw,36px);letter-spacing:.1em}
.spine p{max-width:30em;margin:0 auto;opacity:.85}
.spine .spine-sub{margin-bottom:36px;opacity:1;font-weight:700;font-size:clamp(16px,3vw,20px);letter-spacing:.1em}
.spine .three{list-style:none;max-width:22em;margin:0 auto;text-align:left;display:grid;gap:9px}
.spine .three li{padding-left:18px;border-left:2px solid var(--sage)}
.spine .three li b{display:block;letter-spacing:.08em}.spine .three li span{font-size:14px;opacity:.8}
.spine .spine-q1{margin-top:36px;font-weight:500;letter-spacing:.08em;opacity:.9}
.spine .spine-question{margin-top:45px;opacity:1;font-weight:700;font-size:clamp(17px,3.2vw,22px);letter-spacing:.12em;color:var(--yoi)}
.figure{text-align:center}.figure img{max-width:432px;width:100%;border-radius:18px;box-shadow:0 9px 27px rgba(58,58,56,.08)}
.figure figcaption{font-size:13px;opacity:.7;margin-top:13px}
.doc{background:#fff}.doc .inner{max-width:693px}
.doc h3{font-size:18px;letter-spacing:.06em;margin:45px 0 13px;color:#6d7d68}
.doc p{margin-bottom:18px}.doc ul,.doc ol{margin:0 0 18px 1.4em}.doc li{margin-bottom:9px}
.doc .entry{background:var(--kinari);border-radius:18px;padding:27px;margin-bottom:18px}
.doc .entry h4{font-size:16px;letter-spacing:.08em;margin-bottom:9px}.doc .entry p{margin-bottom:0;font-size:14px;opacity:.9}
.doc .ui{display:inline-block;border:1px solid var(--sage);border-radius:9px;padding:0 8px;font-size:13px;background:#fff}
.doc .note{font-size:13px;opacity:.7}
.app{background:radial-gradient(ellipse 120% 70% at 50% -20%,#3A4066 0%,transparent 60%),var(--yoi);color:var(--fuji);text-align:center}
.app .sec-label{color:var(--lavender)}.app .mon{width:99px;height:99px}.app h2{margin-top:27px}
.app .app-lead{max-width:30em;margin:0 auto 36px;opacity:.9}
.cta{display:inline-block;background:var(--hoshi);color:var(--yoi);font-weight:700;font-size:17px;letter-spacing:.1em;padding:18px 45px;border-radius:99px;text-decoration:none;box-shadow:0 9px 27px rgba(227,199,126,.28);transition:transform .2s ease}
.cta:hover{transform:translateY(-2px)}
.app-links{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.ghost{display:inline-block;border:1px solid rgba(239,235,244,.45);color:var(--fuji);font-weight:500;font-size:15px;letter-spacing:.08em;padding:16px 36px;border-radius:99px;text-decoration:none;transition:background .2s ease}
.ghost:hover{background:rgba(239,235,244,.1)}.cta-note{margin-top:18px;font-size:13px;opacity:.72}
.stars{position:relative}.star{position:absolute;border-radius:50%;background:var(--hoshi);opacity:.7;animation:twinkle 4.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.8}}
.sisters{background:var(--fuji)}.sisters .inner{max-width:693px;text-align:center}.sisters .links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.sisters .links a{border:1px solid var(--lavender);border-radius:99px;padding:9px 27px;text-decoration:none;font-size:14px;background:#fff}
footer{background:#262A47;color:var(--fuji);padding:63px 27px 45px;font-size:13px}
footer .inner{display:flex;flex-direction:column;gap:27px}
.disclaimer{max-width:40em;opacity:.75;line-height:2}
.foot-links{display:flex;gap:27px;flex-wrap:wrap}.foot-links a{opacity:.85}
.copyright{font-family:var(--font-latin);opacity:.55;letter-spacing:.05em}
@media (max-width:720px){nav{gap:14px;font-size:13px}.layer-cards{grid-template-columns:1fr;max-width:315px;margin:0 auto}.card{aspect-ratio:auto;min-height:0;padding:27px}.card .tag{margin-top:18px}section{padding:81px 18px}}