/* ミツアカリ 三階建て試作：共通。階ごとの色は body の data-floor で切り替える */ :root{ --navy:#2C3E57; --mint:#5FB3A1; --mint-deep:#3A8676; --apricot:#F2B880; --gold:#C8A15A; --michi:#6F9BE0; --kokoro:#F2A65A; --enishi:#6CC3A0; --display:"Kiwi Maru","Hiragino Maru Gothic ProN",serif; --body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif; --r:18px; --gut:max(16px,env(safe-area-inset-left,0px)); } /* 1階：朝の池 */ body[data-floor="1"]{ --bg:#FBFDFC; --bg2:#F1F8F5; --bg3:#FFF7EE; --card:#FFFFFF; --ink:#24303C; --sub:#56636E; --line:#DCE9E5; --accent:#3A8676; --accent-ink:#FFFFFF; --head:#2C3E57; --glow:rgba(242,184,128,.55); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body[data-floor="1"]{ --bg:#121A22; --bg2:#16222C; --bg3:#1E2026; --card:#1A2530; --ink:#E6ECEF; --sub:#AAB6BF; --line:#2A3946; --accent:#7FCBB9; --accent-ink:#0F1A20; --head:#E9EEF2; --glow:rgba(242,184,128,.35); color-scheme:dark} } :root[data-theme="dark"] body[data-floor="1"]{ --bg:#121A22; --bg2:#16222C; --bg3:#1E2026; --card:#1A2530; --ink:#E6ECEF; --sub:#AAB6BF; --line:#2A3946; --accent:#7FCBB9; --accent-ink:#0F1A20; --head:#E9EEF2; --glow:rgba(242,184,128,.35); color-scheme:dark} /* 玄関：あたたかい灯り */ body[data-floor="door"]{ --bg:#FFF8EE; --bg2:#FDF0DE; --bg3:#FFFFFF; --card:#FFFFFF; --ink:#2B2A26; --sub:#6A6255; --line:#EBDCC3; --accent:#3A8676; --accent-ink:#FFFFFF; --head:#2C3E57; --glow:rgba(242,184,128,.6); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body[data-floor="door"]{ --bg:#1B1813; --bg2:#231E17; --bg3:#201C16; --card:#262019; --ink:#F1EADF; --sub:#C2B6A3; --line:#3A3226; --accent:#7FCBB9; --accent-ink:#0F1A20; --head:#F3E7D2; color-scheme:dark} } :root[data-theme="dark"] body[data-floor="door"]{ --bg:#1B1813; --bg2:#231E17; --bg3:#201C16; --card:#262019; --ink:#F1EADF; --sub:#C2B6A3; --line:#3A3226; --accent:#7FCBB9; --accent-ink:#0F1A20; --head:#F3E7D2; color-scheme:dark} /* 2階：夕方から夜へ（いつも落ち着いた暗めの色） */ body[data-floor="2"]{ --bg:#1D2A42; --bg2:#22324F; --bg3:#283A5A; --card:#253655; --ink:#E9EEF5; --sub:#B4C0D2; --line:#3A4D70; --accent:#7FCBB9; --accent-ink:#10202A; --head:#F2F5FA; --glow:rgba(127,203,185,.45); color-scheme:dark; } /* 3階：夜と金 */ body[data-floor="3"]{ --bg:#0E131C; --bg2:#141B27; --bg3:#1A2231; --card:#151C29; --ink:#EEE8DC; --sub:#B9B0A0; --line:#3A3322; --accent:#D9B56E; --accent-ink:#17120A; --head:#F6EBD3; --glow:rgba(217,181,110,.5); color-scheme:dark; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--head);margin:0;text-wrap:balance;letter-spacing:.04em} p{margin:0} .wrap{max-width:1080px;margin:0 auto;padding-left:var(--gut);padding-right:max(16px,env(safe-area-inset-right,0px))} .kicker{font-size:.78rem;letter-spacing:.18em;color:var(--accent);font-weight:700} .lead{color:var(--sub);max-width:60ch} .small{font-size:.84rem;color:var(--sub)} .sec{padding:72px 0} .sec-head{display:flex;flex-direction:column;gap:8px;margin-bottom:28px} .sec-head h2{font-size:clamp(1.4rem,3.4vw,1.9rem)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;border:0;font-size:1rem;cursor:pointer;box-shadow:0 6px 20px -8px var(--glow);transition:transform .2s ease,box-shadow .2s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px var(--glow)} .btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px} .grid{display:grid;gap:16px} .g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .tag{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:999px;border:1.5px solid currentColor;white-space:nowrap} /* ヘッダー */ .top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)} .top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none} .logo svg{width:34px;height:34px;flex:none} .logo b{font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:.12em;color:var(--head)} .top nav{display:flex;gap:18px;font-size:.88rem} .top nav a{text-decoration:none;color:var(--sub)} .top nav a:hover{color:var(--ink)} @media (max-width:760px){.top nav{display:none}} /* エレベーター（階の案内） */ .lift{position:fixed;right:max(14px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:45;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:999px;background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 24px -14px rgba(0,0,0,.4)} .lift a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;text-decoration:none;font-family:var(--display);font-size:.86rem;color:var(--sub);position:relative} .lift a small{font-size:.62rem} .lift a[aria-current="page"]{background:var(--accent);color:var(--accent-ink)} .lift a:not([aria-current]):hover{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--ink)} .lift .lock::after{content:"";position:absolute;right:3px;top:3px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px var(--gold)} @media (max-width:760px){ .lift{top:auto;bottom:max(12px,env(safe-area-inset-bottom,0px));right:50%;transform:translateX(50%);flex-direction:row} .lift a{width:46px;height:40px;border-radius:999px} body{padding-bottom:76px} } /* 見本の帯 */ .sample{background:color-mix(in srgb,var(--accent) 16%,var(--bg));color:var(--ink);font-size:.82rem;text-align:center;padding:8px 16px} /* ヒーロー */ .hero{position:relative;min-height:min(88vh,760px);display:grid;align-items:end;overflow:hidden;isolation:isolate} .hero .art{position:absolute;inset:0;z-index:-2} .hero .art img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scale(1.04);animation:breathe 18s ease-in-out infinite alternate} .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--bg) 70%,transparent) 68%,var(--bg) 100%)} .hero .copy{padding:0 0 56px;display:flex;flex-direction:column;gap:16px;max-width:620px} .hero h1{font-size:clamp(1.9rem,5.4vw,3.1rem);line-height:1.35} .hero .lead{color:var(--ink);opacity:.86} .hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px} .note-ai{font-size:.74rem;color:var(--sub)} @keyframes breathe{from{transform:scale(1.04)}to{transform:scale(1.09) translateY(-1%)}} /* 浮かぶ灯 */ .lanterns{position:absolute;inset:0;pointer-events:none;z-index:-1} .lanterns i{position:absolute;width:var(--s,12px);height:var(--s,12px);border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--c) 45%,transparent 72%);filter:blur(.3px);opacity:.0;animation:rise var(--d,14s) linear var(--w,0s) infinite} @keyframes rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.9}80%{opacity:.7}100%{transform:translate(var(--x,20px),-70vh);opacity:0}} /* 水面のゆらぎ */ .water{position:relative;overflow:hidden} .water::before{content:"";position:absolute;inset:-20% -10%;background:repeating-linear-gradient(170deg,transparent 0 22px,color-mix(in srgb,var(--accent) 7%,transparent) 22px 24px);animation:drift 16s linear infinite;pointer-events:none} @keyframes drift{to{transform:translateX(-60px)}} /* 3人 */ .three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .person{position:relative;border-radius:var(--r);overflow:hidden;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column} .person img{aspect-ratio:4/5;object-fit:cover;object-position:center 22%;width:100%;transition:transform .8s ease} .person:hover img{transform:scale(1.04)} .person .t{padding:14px 16px 18px;display:flex;flex-direction:column;gap:4px} .person .t b{font-family:var(--display);font-weight:500;font-size:1.2rem;color:var(--head)} .person .sym{position:absolute;top:12px;left:12px;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:#2C3E57} @media (max-width:760px){.three{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.person{scroll-snap-align:start}} /* 地図をつくる */ .mapbox{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center} .ring{position:relative;aspect-ratio:1;max-width:400px;width:100%;margin:0 auto} .ring svg{width:100%;height:100%} .ring .orb{animation:orbit 26s linear infinite;transform-origin:200px 200px} .ring .orb.b{animation-duration:34s;animation-direction:reverse} .ring .orb.c{animation-duration:42s} @keyframes orbit{to{transform:rotate(360deg)}} @media (max-width:760px){.mapbox{grid-template-columns:1fr}} /* 本棚・読み物 */ .shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .book{border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);text-decoration:none;display:flex;flex-direction:column} .book img{aspect-ratio:3/4;object-fit:cover;width:100%} .book span{padding:10px 12px;font-size:.88rem} .book small{display:block;color:var(--sub);font-size:.74rem} .read{display:flex;flex-direction:column;gap:6px} .read b{font-size:1.02rem;color:var(--head)} /* 安全 */ .safe{border-left:4px solid var(--kokoro);background:var(--bg3)} .safe .nums{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .safe .nums a{font-weight:700;text-decoration:none;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card)} /* 階の入口（建物） */ .floors{display:grid;gap:12px} .fl{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--r);text-decoration:none;border:1px solid var(--line);transition:transform .25s ease} .fl:hover{transform:translateX(4px)} .fl .n{font-family:var(--display);font-size:1.6rem;text-align:center} .fl b{display:block;font-family:var(--display);font-weight:500;font-size:1.1rem} .fl.f3{background:linear-gradient(120deg,#0E131C,#1B2333);color:#EEE8DC;border-color:#4A3F25} .fl.f3 .n,.fl.f3 b{color:#E2C27A} .fl.f2{background:linear-gradient(120deg,#1D2A42,#2B3D60);color:#E9EEF5;border-color:#3A4D70} .fl.f2 .n,.fl.f2 b{color:#9FD9C9} .fl.fd{background:#FFF6EA;color:#2B2A26;border-color:#EBDCC3} .fl.fd .n,.fl.fd b{color:#B07A36} .fl .go{font-size:.82rem;opacity:.8;white-space:nowrap} @media (max-width:520px){.fl{grid-template-columns:52px 1fr}.fl .go{display:none}} /* フッター */ footer{border-top:1px solid var(--line);padding:36px 0 48px;font-size:.84rem;color:var(--sub)} footer .wrap{display:flex;flex-direction:column;gap:10px} /* 2階 */ .dusk{background:radial-gradient(120% 70% at 50% 0%,#33476E 0%,var(--bg) 60%)} .room{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:start} .room img.f{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 0 18px var(--glow));animation:bob 5s ease-in-out infinite} .room:nth-child(2) img.f{animation-delay:-1.6s}.room:nth-child(3) img.f{animation-delay:-3.2s} @keyframes bob{50%{transform:translateY(-8px)}} @media (max-width:560px){.room{grid-template-columns:72px 1fr}.room img.f{width:70px;height:70px}} .ai-badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;background:#2E4A6E;color:#CFE6FF;border:1px solid #4E6E98} .chat{display:flex;flex-direction:column;gap:10px} .say{max-width:86%;padding:10px 14px;border-radius:16px;background:var(--bg3);font-size:.94rem} .say.me{align-self:flex-end;background:color-mix(in srgb,var(--accent) 26%,var(--bg2))} .say small{display:block;font-size:.7rem;color:var(--sub)} /* 3階 */ .night{background:radial-gradient(90% 60% at 50% 0%,#1E2840 0%,var(--bg) 65%)} .goldline{border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:inset 0 0 0 4px var(--bg2),inset 0 0 0 5px color-mix(in srgb,var(--accent) 25%,transparent)} .nurse-badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:999px;background:#3A2E14;color:#F1D9A2;border:1px solid #7A6230} .plan{display:flex;flex-direction:column;gap:8px} .plan .p{font-family:var(--display);font-size:1.6rem;color:var(--head)} .plan .p small{font-size:.8rem;font-family:var(--body);color:var(--sub)} #dust{position:fixed;inset:0;pointer-events:none;z-index:0} body[data-floor="3"] main{position:relative;z-index:1} /* あらわれる */ .rv{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease} .rv.on{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .rv{opacity:1;transform:none} } /* スマホ：絵を上、文字を下にして読みやすく */ @media (max-width:760px){ .hero{display:block;min-height:0} .hero .art{position:relative;inset:auto;height:58vh;max-height:520px} .hero::after{inset:auto 0 0 0;height:58vh;max-height:520px;top:0;background:linear-gradient(180deg,transparent 55%,var(--bg) 100%)} .hero .lanterns{height:58vh;max-height:520px} .hero .copy{padding:4px 0 40px;margin-top:-28px;position:relative} } /* PC：文字は左に、絵は右に寄せる */ @media (min-width:761px){ .hero{align-items:center} .hero .art img{object-position:70% 30%} .hero::after{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,transparent 62%),linear-gradient(180deg,transparent 70%,var(--bg) 100%)} .hero .copy{padding:40px 0} } @media (min-width:761px){ .hero .art{left:36%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)} .hero .art img{object-position:center 30%} .hero::after{background:linear-gradient(180deg,transparent 75%,var(--bg) 100%)} .hero .copy{max-width:min(520px,44vw)} } .hero>.wrap{width:100%} @media (min-width:761px){.hero .art{left:46%}} /* 玄関：ステンドグラスの部屋 */ .sg{position:fixed;inset:0;z-index:0;pointer-events:none;background:#2E261F} .sg svg{width:100%;height:100%;display:block;filter:saturate(1.05)} .sg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 38%,rgba(255,246,220,.42),transparent 70%)} .sg-glare{position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.38) 48%,rgba(255,250,230,.12) 52%,transparent 62%);background-size:260% 100%;background-position:120% 0;mix-blend-mode:screen;animation:sgGlare 11s ease-in-out infinite} @keyframes sgGlare{0%{background-position:130% 0}55%,100%{background-position:-30% 0}} .tw{animation:sgTw 7s ease-in-out infinite} @keyframes sgTw{0%,100%{opacity:.14}50%{opacity:.55}} .sg-main{position:relative;z-index:1} body[data-floor="door"] footer{position:relative;z-index:1;background:color-mix(in srgb,var(--bg) 92%,transparent)} body[data-floor="door"] .card{background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 40px -22px rgba(0,0,0,.55)} .sg-arch{width:min(240px,62vw);margin:0 auto -34px;position:relative;z-index:2;filter:drop-shadow(0 0 26px rgba(255,236,190,.65)) drop-shadow(0 14px 22px rgba(0,0,0,.35))} .sg-arch svg{width:100%;height:auto;display:block} .sg-arch .core{animation:sgOrb 4.6s ease-in-out infinite} .sg-arch .o1 .core{animation-delay:-1.5s}.sg-arch .o2 .core{animation-delay:-3s} @keyframes sgOrb{0%,100%{opacity:.35}50%{opacity:1}} .sg-plate{padding-top:46px} .sg-note{background:color-mix(in srgb,var(--card) 88%,transparent);border-radius:999px;padding:8px 16px;width:fit-content;margin-left:auto;margin-right:auto} .sg-door{position:fixed;inset:0;z-index:60;display:flex;perspective:1600px;cursor:pointer;background:rgba(46,38,31,.4)} .sg-door .half{flex:1;border:10px solid #3B2C1E;background:#2E261F;transition:transform 1.5s cubic-bezier(.6,.05,.3,1),opacity 1.5s ease;box-shadow:inset 0 0 60px rgba(255,236,190,.35)} .sg-door .half svg{width:100%;height:100%;display:block} .sg-door .l{transform-origin:left center}.sg-door .r{transform-origin:right center} .sg-door.open{background:transparent;transition:background 1s ease} .sg-door.open .l{transform:rotateY(-100deg);opacity:.2} .sg-door.open .r{transform:rotateY(100deg);opacity:.2} @media (prefers-reduced-motion:reduce){.sg-glare,.tw,.sg-arch .core{animation:none}} /* 玄関 v5：教会の窓。時間で光が変わる */ .sg{background:#3A3026} .sg>*{position:absolute;inset:0} .sg #sgWall{transition:filter 2.5s ease} .sg::after{display:none} #sgFrame{width:100%;height:100%;transition:filter 2.5s ease} .sg-tint{transition:background 2.5s ease,opacity 2.5s ease;mix-blend-mode:multiply} .sg-cloud{background:radial-gradient(ellipse 40% 50% at 30% 40%,rgba(40,40,60,.55),transparent 70%),radial-gradient(ellipse 35% 45% at 75% 60%,rgba(40,40,60,.45),transparent 70%);background-size:200% 200%;mix-blend-mode:multiply;opacity:0;animation:sgCloud 48s ease-in-out infinite alternate;transition:opacity 2.5s ease} @keyframes sgCloud{0%{background-position:0% 0%}100%{background-position:100% 60%}} .sg-rays{overflow:hidden;mix-blend-mode:screen;transition:opacity 2.5s ease} .sg-rays i{position:absolute;top:-30%;height:170%;width:14%;background:linear-gradient(180deg,rgba(255,248,225,.55),rgba(255,236,190,.12) 70%,transparent);filter:blur(18px);transform:rotate(var(--a,-18deg));transform-origin:top center;animation:sgRay 14s ease-in-out infinite;transition:transform 2.5s ease} .sg-rays i:nth-child(1){left:18%;animation-delay:-2s}.sg-rays i:nth-child(2){left:38%;width:9%;animation-delay:-6s} .sg-rays i:nth-child(3){left:56%;width:16%;animation-delay:-9s}.sg-rays i:nth-child(4){left:76%;width:8%;animation-delay:-4s} @keyframes sgRay{0%,100%{opacity:.55}50%{opacity:1}} .sg-floor{top:auto;height:28%;background:radial-gradient(ellipse 30% 60% at 30% 100%,rgba(111,155,224,.35),transparent 70%),radial-gradient(ellipse 30% 60% at 52% 100%,rgba(242,166,90,.4),transparent 70%),radial-gradient(ellipse 30% 60% at 74% 100%,rgba(108,195,160,.35),transparent 70%);mix-blend-mode:screen;transition:opacity 2.5s ease} /* 朝：やわらかく、少し青い。光は左上から */ .sg[data-t="morning"] #sgWall{filter:brightness(.92) saturate(.85)} .sg[data-t="morning"] .sg-tint{background:rgba(205,225,255,.5)} .sg[data-t="morning"] .sg-rays{opacity:.7}.sg[data-t="morning"] .sg-rays i{--a:-24deg} .sg[data-t="morning"] .sg-cloud{opacity:.25}.sg[data-t="morning"] .sg-floor{opacity:.6} /* 昼：いちばん明るく、色があざやか */ .sg[data-t="noon"] #sgWall{filter:brightness(1.08) saturate(1.12)} .sg[data-t="noon"] .sg-tint{background:rgba(255,255,255,0)} .sg[data-t="noon"] .sg-rays{opacity:.9}.sg[data-t="noon"] .sg-rays i{--a:-8deg} .sg[data-t="noon"] .sg-cloud{opacity:.35}.sg[data-t="noon"] .sg-floor{opacity:1} /* 夕：金色からあかね色。光は右から低く */ .sg[data-t="evening"] #sgWall{filter:brightness(.82) saturate(1.05) sepia(.18)} .sg[data-t="evening"] .sg-tint{background:rgba(255,170,110,.55)} .sg[data-t="evening"] .sg-rays{opacity:.75}.sg[data-t="evening"] .sg-rays i{--a:28deg} .sg[data-t="evening"] .sg-cloud{opacity:.3}.sg[data-t="evening"] .sg-floor{opacity:.7} .sg[data-t="evening"] #sgFrame{filter:brightness(.85) sepia(.25)} /* 夜：外は暗く、ガラスはろうそくの灯りでほのかに。三つの丸窓だけがやさしく光る */ .sg[data-t="night"] #sgWall{filter:brightness(.34) saturate(.8)} .sg[data-t="night"] .sg-tint{background:rgba(40,52,100,.55)} .sg[data-t="night"] .sg-rays{opacity:0} .sg[data-t="night"] .sg-cloud{opacity:0} .sg[data-t="night"] .sg-floor{opacity:.9;background:radial-gradient(ellipse 50% 70% at 50% 100%,rgba(255,190,110,.45),transparent 70%)} .sg[data-t="night"] #sgFrame{filter:brightness(.38) saturate(.7)} .sg[data-t="night"] .sg-glare{opacity:0} .sg-glare{transition:opacity 2.5s ease} .sg-ctrl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:12px auto 0;padding:8px 14px;border-radius:999px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:fit-content;max-width:100%} .sg-times{display:flex;gap:4px} .sg-times button,.sg-music{font:inherit;font-size:.84rem;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;min-height:36px;padding:0 12px;cursor:pointer} .sg-times button[aria-pressed="true"],.sg-music[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} @media (prefers-reduced-motion:reduce){.sg-rays i,.sg-cloud{animation:none}} /* 玄関 v6：ChatGPTの石の壁と妖精の窓 */ .sg-stone img{width:100%;height:100%;object-fit:cover;display:block} .sg-stone{transition:filter 2.5s ease} .sg[data-t="morning"] .sg-stone{filter:brightness(.97) saturate(.9) hue-rotate(-4deg)} .sg[data-t="noon"] .sg-stone{filter:brightness(1.03)} .sg[data-t="evening"] .sg-stone{filter:brightness(.82) sepia(.3) saturate(1.15)} .sg[data-t="night"] .sg-stone{filter:brightness(.3) saturate(.6)} .sg-arch{width:min(250px,58vw)} .sg-arch img{width:100%;height:auto;display:block;animation:sgArchGlow 6s ease-in-out infinite} @keyframes sgArchGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(255,236,190,.45))}50%{filter:drop-shadow(0 0 30px rgba(255,236,190,.85))}} @media (prefers-reduced-motion:reduce){.sg-arch img{animation:none}} /* 玄関 v7：窓ごとのガラス絵と光の粒、正面の窓を大きく */ .sg-panes .pane{position:absolute;object-fit:cover;transition:filter 2.5s ease} #sgSpark{width:100%;height:100%;mix-blend-mode:screen} .sg[data-t="morning"] .pane{filter:brightness(1.05) saturate(.9)} .sg[data-t="noon"] .pane{filter:brightness(1.18) saturate(1.1)} .sg[data-t="evening"] .pane{filter:brightness(.95) sepia(.2) saturate(1.1)} .sg[data-t="night"] .pane{filter:brightness(.55) saturate(.9)} .sg-arch{width:min(340px,74vw);margin-bottom:-40px} /* ろうそくの揺れ（背景の絵の上に重ねる） */ .cand{position:absolute;inset:0;overflow:hidden} .cand img{width:100%;height:100%;object-fit:cover;display:block} .cand canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none} .sg-arch{width:min(300px,64vw);margin-bottom:14px} .sg-plate{padding-top:24px} /* 教会建築（10-27）：2階＝夕方の礼拝堂、3階＝夜の小さな聖堂。紫を足す */ body[data-floor="2"]{--bg:#1C1830;--bg2:#221D3B;--bg3:#2A2347;--card:#262041;--line:#433A66;--sub:#BDB5D6;--glow:rgba(185,166,232,.45)} body[data-floor="3"]{--bg:#110D1A;--bg2:#171224;--bg3:#1E182E;--card:#1A1528;--line:#3E3324;--glow:rgba(217,181,110,.5)} .dusk{background:radial-gradient(120% 70% at 50% 0%,#3A2F5E 0%,var(--bg) 60%)} .hero .art.full img{transform:none;animation:none;object-position:center} .cand picture{display:contents} @media (min-width:761px){ .hero .art.full{left:0;-webkit-mask-image:none;mask-image:none} body[data-floor="2"] .hero::after,body[data-floor="3"] .hero::after{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 92%,transparent) 0%,color-mix(in srgb,var(--bg) 60%,transparent) 34%,transparent 60%),linear-gradient(180deg,transparent 72%,var(--bg) 100%)} } /* 玄関の外観（はじめに一度だけ） */ .sg-out{position:fixed;inset:0;z-index:70;background:#0B0F24;overflow:hidden} .sg-out .cand{transition:transform 1.8s cubic-bezier(.55,.05,.35,1),opacity 1.4s ease .5s;transform-origin:50% 84%} .sg-out-copy{position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:#F3ECDD;font-family:var(--display);text-shadow:0 2px 12px rgba(0,0,0,.7);transition:opacity .6s ease;padding:0 16px} .sg-out-copy p{font-size:1.05rem;letter-spacing:.08em} .sg-out.go .sg-out-copy{opacity:0} .sg-out.go .cand{transform:scale(3.2);opacity:0} .sg-out.go{background:transparent;transition:background 1s ease .9s} @media (orientation:portrait){.sg-out .cand{transform-origin:50% 80%}} @media (prefers-reduced-motion:reduce){.sg-out .cand{transition:none}} /* ロゴ：ステンドグラス。光がゆっくり差して、月がほのかに光る */ .logo svg.sglogo{width:38px;height:38px;overflow:visible;filter:drop-shadow(0 0 3px rgba(242,184,128,.35));animation:lgGlow 7s ease-in-out infinite} .sglogo .lg-shine{animation:lgShine 7s ease-in-out infinite} .sglogo .lg-moon{animation:lgMoon 7s ease-in-out infinite} @keyframes lgShine{0%,55%{transform:translateX(0) rotate(20deg);transform-origin:20px 20px}85%,100%{transform:translateX(62px) rotate(20deg);transform-origin:20px 20px}} @keyframes lgMoon{0%,55%,100%{filter:none}72%{filter:brightness(1.25)}} @keyframes lgGlow{0%,55%,100%{filter:drop-shadow(0 0 3px rgba(242,184,128,.35))}72%{filter:drop-shadow(0 0 9px rgba(255,214,150,.85))}} @media (prefers-reduced-motion:reduce){.logo svg.sglogo,.sglogo .lg-shine,.sglogo .lg-moon{animation:none}} /* ロゴ v2（10-27）：元の形のステンドグラス＋御光＋文字に左から右へ光 */ .top .wrap{height:84px} .top{overflow:hidden} .logo{position:relative;gap:14px;isolation:isolate} .logo svg.sglogo{width:56px;height:56px;animation:lgGlow 7s ease-in-out infinite} .lg-rays{position:absolute;left:-40px;top:-60px;width:180px;height:150px;z-index:-1;pointer-events:none} .lg-rays i{position:absolute;top:0;left:50%;width:18px;height:150px;margin-left:-9px;transform-origin:50% 0;background:linear-gradient(180deg,rgba(255,240,200,.75),rgba(255,226,160,.25) 55%,transparent);filter:blur(6px);opacity:.5;animation:lgRay 9s ease-in-out infinite} .lg-rays i:nth-child(1){transform:rotate(26deg);animation-delay:-1s} .lg-rays i:nth-child(2){transform:rotate(12deg);width:12px;animation-delay:-3s} .lg-rays i:nth-child(3){transform:rotate(0deg);width:24px;animation-delay:-5s} .lg-rays i:nth-child(4){transform:rotate(-13deg);width:12px;animation-delay:-2s} .lg-rays i:nth-child(5){transform:rotate(-27deg);animation-delay:-7s} @keyframes lgRay{0%,100%{opacity:.18;filter:blur(7px)}50%{opacity:.7;filter:blur(5px)}} body[data-floor="1"] .lg-rays,body[data-floor="door"] .lg-rays{mix-blend-mode:multiply} body[data-floor="1"] .lg-rays i,body[data-floor="door"] .lg-rays i{background:linear-gradient(180deg,rgba(242,184,128,.6),rgba(242,184,128,.15) 55%,transparent)} .sglogo .lg-shine{animation:lgShine2 7s ease-in-out infinite} @keyframes lgShine2{0%,50%{transform:translateX(0)}80%,100%{transform:translateX(190px)}} .sglogo .lg-st{animation:lgTw 3.4s ease-in-out infinite} @keyframes lgTw{0%,100%{opacity:.2}50%{opacity:1}} .lg-txt{display:flex;flex-direction:column;line-height:1.1} .lg-name{font-family:"Hina Mincho",var(--display);font-weight:400;font-size:1.75rem;letter-spacing:.16em} .lg-mitsu,.lg-akari{background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lgText 7s ease-in-out infinite} .lg-mitsu{background-image:linear-gradient(100deg,var(--head) 40%,#FFF4D6 50%,var(--head) 60%)} .lg-akari{background-image:linear-gradient(100deg,#5FB3A1 40%,#FFF4D6 50%,#5FB3A1 60%);animation-delay:.25s} @keyframes lgText{0%,52%{background-position:100% 0}82%,100%{background-position:0 0}} .lg-en{font-family:"Marcellus",serif;font-size:.68rem;letter-spacing:.42em;color:var(--sub);margin-top:4px;padding-left:2px} .lg-where{display:flex;flex-direction:column;justify-content:center;gap:2px;margin-right:auto;padding-left:16px;border-left:1px solid color-mix(in srgb,var(--line) 90%,transparent);font-size:.82rem;line-height:1.3} .lg-where b{font-family:var(--display);font-weight:500;color:var(--head);letter-spacing:.06em} .lg-where small{color:var(--sub);font-size:.74rem;letter-spacing:.12em} @media (max-width:760px){ .top .wrap{height:70px} .logo svg.sglogo{width:46px;height:46px} .lg-name{font-size:1.35rem} .lg-en{font-size:.56rem;letter-spacing:.34em} .lg-where{padding-left:10px;font-size:.72rem;max-width:7.5em} .lg-where small{display:none} } @media (prefers-reduced-motion:reduce){.lg-rays i,.sglogo .lg-shine,.sglogo .lg-st,.lg-mitsu,.lg-akari{animation:none}} .lg-where{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline} .lg-where .lgw-f{font-family:var(--display);font-weight:500;color:var(--head);font-size:.95rem;letter-spacing:.08em} .lg-where .lgw-n{color:var(--head);font-family:var(--display);letter-spacing:.06em} .lg-where small{grid-column:1/-1} @media (max-width:760px){.lg-where{grid-template-columns:auto;row-gap:0}.lg-where .lgw-n{font-size:.68rem;color:var(--sub)}} @media (max-width:760px){.lg-where{max-width:none;white-space:nowrap}} /* ロゴのガラス：時間で色が変わる（午前＝緑、午後＝オレンジ、夜＝青）。1枚ずつ後ろから光が差す */ :root,:root[data-lgt="night"]{--lp0:#22355C;--lp1:#22355C;--lp2:#2D4777;--lp3:#26406C;--lp4:#36578F;--lp5:#2A4675;--lp6:#20345A;--lp7:#2B4472;--lw1:#1E3A5C;--lw2:#24496F} :root[data-lgt="am"]{--lp0:#24594A;--lp1:#2A6654;--lp2:#3C8A6E;--lp3:#2F7360;--lp4:#4C9C7C;--lp5:#357C66;--lp6:#265E4E;--lp7:#3A8268;--lw1:#1F4E48;--lw2:#2B6A5E} :root[data-lgt="pm"]{--lp0:#8A4A22;--lp1:#94532A;--lp2:#C27A3A;--lp3:#A8642F;--lp4:#D99048;--lp5:#B36D35;--lp6:#8C4C25;--lp7:#BF7840;--lw1:#5E3A2A;--lw2:#7A4B30} .sglogo polygon{transition:fill 2s ease} .sglogo .lg-bl{fill:#FFF6DA;opacity:0;mix-blend-mode:screen;animation:lgBack 4.9s ease-in-out infinite} @keyframes lgBack{0%,100%{opacity:0}18%{opacity:.55}40%{opacity:.08}} @media (prefers-reduced-motion:reduce){.sglogo .lg-bl{animation:none}} /* ロゴの文字のまわりの三つの光の玉 */ .lg-txt{position:relative;isolation:isolate} .lg-txt .lg-name,.lg-txt .lg-en{position:relative;z-index:1} .lg-orb{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 35%,#fff 0,rgba(var(--oc),1) 45%,rgba(var(--oc),.6) 70%,rgba(var(--oc),0) 100%);box-shadow:0 0 10px 3px rgba(var(--oc),.55);will-change:transform,opacity} @media (max-width:760px){.lg-orb{width:7px;height:7px}} .lg-orb{width:5px;height:5px;background:radial-gradient(circle,#FFFDF2 0,rgba(var(--oc),1) 55%,rgba(var(--oc),0) 100%);box-shadow:0 0 6px 2px rgba(var(--oc),.7),0 0 14px 5px rgba(var(--oc),.25)} @media (max-width:760px){.lg-orb{width:4px;height:4px}} /* 1階の地図：つながっていく様子 */ .ring .orb circle{transform-box:fill-box;transform-origin:center;transform:scale(.6)} .cn-you{transition:stroke 2.4s ease,filter 2.4s ease} .cn-line{stroke-dasharray:100;stroke-dashoffset:100;opacity:.9;filter:drop-shadow(0 0 4px currentColor);transition:stroke-dashoffset 1.4s ease,opacity 1.2s ease} .cn-line.on{stroke-dashoffset:0} .cn-line.off{opacity:0} .cn-spark{opacity:0} .cn-spark.on{animation:cnSpark 1.4s ease forwards} @keyframes cnSpark{0%{opacity:1;transform:translate(0,0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y))}} .cn-node{opacity:0;transition:opacity 1.2s ease .8s} .cn-node.on{opacity:1} .cn-node.off{opacity:0;transition-delay:0s} .cn-node.on .cn-halo{animation:cnHalo 3.2s ease-in-out infinite} @keyframes cnHalo{0%,100%{opacity:.12}50%{opacity:.32}} .cn-web{opacity:0;transition:opacity 1.2s ease} .cn-web.on{opacity:.7} .cn-ring{stroke:#FFE7B0;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 6px rgba(255,220,150,.9));transition:stroke-dashoffset 2.6s ease,opacity 1s ease;transform:rotate(-90deg);transform-origin:200px 200px} .cn-ring.on{stroke-dashoffset:0;opacity:1} /* 地図：外側の円に光るバーと、ひとこと */ .cn-bar{stroke-dasharray:100;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px rgba(255,236,190,.6));transition:stroke-dashoffset 1s ease,opacity .8s ease} .cn-bar.on{stroke-dashoffset:0;opacity:1} .ring{overflow:visible} .cn-tip{position:absolute;z-index:3;pointer-events:none;background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--c,var(--line));border-radius:14px;padding:9px 12px;font-size:.8rem;line-height:1.6;color:var(--ink);box-shadow:0 10px 26px -12px rgba(0,0,0,.35),0 0 16px -6px var(--c,transparent);opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease} .cn-tip b{display:block;font-family:var(--display);font-weight:500;font-size:.86rem;margin-bottom:2px} .cn-tip.on{opacity:1;transform:none} /* 地図：枠を広げて文字が切れないように。スマホは大きく、説明は地図の下に */ .ring{max-width:460px} .cn-tip.below{position:relative;left:auto;top:auto;width:auto;margin:6px auto 0;max-width:420px;min-height:5.6em;font-size:.95rem;transform:translateY(6px)} .cn-tip.below.on{transform:none} .ring:has(.cn-tip.below){aspect-ratio:auto} .ring:has(.cn-tip.below) svg{aspect-ratio:1;height:auto} @media (max-width:760px){ .mapbox .ring{max-width:none;width:100%;margin:8px 0 0} .cn-ph text{font-size:17px} .cn-lab{font-weight:500} } /* 三人のカード：光・水・炎のホタル */ .person[data-ff=light]{--ff:250,196,80;--ff2:255,246,205} .person[data-ff=water]{--ff:80,170,235;--ff2:220,242,255} .person[data-ff=fire]{--ff:240,60,40;--ff2:255,190,150} .ffl{position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;pointer-events:none;overflow:hidden;z-index:1} .ffl i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;opacity:0; background:radial-gradient(circle,rgba(var(--ff2),1) 0 25%,rgba(var(--ff),.9) 45%,rgba(var(--ff),0) 72%); box-shadow:0 0 calc(var(--s)*1.2) calc(var(--s)*.35) rgba(var(--ff),.55); animation:ffGlow var(--d) ease-in-out var(--dl) infinite, ffDrift calc(var(--d)*1.7) ease-in-out var(--dl) infinite alternate} @keyframes ffGlow{0%{opacity:0;transform:scale(.5)}45%{opacity:.35;transform:scale(.8)}75%{opacity:1;transform:scale(1.15)}88%{opacity:.85}100%{opacity:0;transform:scale(.6)}} @keyframes ffDrift{from{translate:0 0}to{translate:var(--mx) var(--my)}} .person::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(var(--ff),.0),0 0 0 rgba(var(--ff),0);animation:ffCard 7s ease-in-out infinite} .person[data-ff=water]::after{animation-delay:-2.3s}.person[data-ff=fire]::after{animation-delay:-4.6s} @keyframes ffCard{0%,100%{box-shadow:inset 0 0 0 2px rgba(var(--ff),.25),0 0 0 2px rgba(var(--ff),.15),0 0 10px rgba(var(--ff),.12)}70%{box-shadow:inset 0 0 0 3.5px rgba(var(--ff),.85),0 0 0 3px rgba(var(--ff),.55),0 0 34px 6px rgba(var(--ff),.45)}} .person{overflow:visible}.person img{border-radius:var(--r) var(--r) 0 0} .person .sym{z-index:2} @media (prefers-reduced-motion:reduce){.ffl{display:none}.person::after{animation:none}} /* 三人のカード：細い金の額縁と、角の花（右上・左下）。額縁の線はCSSなので、どの画面の大きさにも合う */ .pfr{position:absolute;inset:0;pointer-events:none;z-index:3} .pfr::before,.pfr::after{content:"";position:absolute;border-radius:calc(var(--r) - 6px)} .pfr::before{inset:7px;border:1px solid rgba(200,161,90,.85)} .pfr::after{inset:11px;border:1px solid rgba(200,161,90,.45)} .pfr img{position:absolute;width:50%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0; opacity:.92;transform:scale(.94);filter:drop-shadow(0 3px 8px rgba(0,0,0,.18)); transition:transform 1.4s cubic-bezier(.2,.8,.2,1),opacity 1s ease,filter 1.2s ease} .pfr .tr{top:-2.5%;right:-3%;transform-origin:92% 8%} .pfr .bl{bottom:-2.5%;left:-3%;transform-origin:8% 92%} .person:hover,.person.bloom{z-index:4} .person:hover .pfr img,.person.bloom .pfr img{opacity:1;transform:scale(1.04);filter:drop-shadow(0 0 10px rgba(var(--ff),.45)) drop-shadow(0 3px 8px rgba(0,0,0,.18))} .person:hover .pfr .bl,.person.bloom .pfr .bl{transition-delay:.15s} @media (max-width:760px){.three{padding:26px 14% 30px 10%;margin:0 -16px;scroll-padding-left:10%}} @media (prefers-reduced-motion:reduce){.pfr img{transition:none}} .person:hover > img{transform:none} .person .t{padding:16px 24px 50px 26px} .pfr .bl{width:44%} /* 階の入口：教会風の絵を、文字にかからない場所に薄く */ .fl{position:relative;overflow:hidden;isolation:isolate} .fl::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:40%;z-index:-1;pointer-events:none; background:var(--art) center 42%/100% auto no-repeat;opacity:.42; -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent); transition:opacity .6s ease} .fl:hover::before{opacity:.6} .fl.f3{--art:url(img/f3_pc.webp)} .fl.f2{--art:url(img/f2_pc.webp)} .fl.fd{--art:url(img/facade_pc.webp)} .fl.fd::before{opacity:.3;mix-blend-mode:multiply;filter:sepia(.35) saturate(1.2)} .fl.fd:hover::before{opacity:.45} @media (max-width:520px){.fl::before{left:auto;right:0;width:46%;opacity:.24; -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)} .fl.fd::before{opacity:.2}} /* 地図の見え方：3階の会員は「星灯り」（金の星図）に切り替えられる */ .pm-toggle{display:flex;justify-content:center;gap:6px;margin:6px auto 0;position:relative;z-index:2} .pm-toggle button{font:inherit;font-size:.82rem;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:6px} .pm-toggle button small{font-size:.68rem;opacity:.7} .pm-toggle button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)} .pm-toggle button[data-skin=pm]{background:linear-gradient(135deg,#141B2B,#26324A);color:#F1DFAE;border-color:#7A6435} .pm-toggle button[data-skin=pm][aria-pressed="true"]{border-color:#E2C27A;box-shadow:0 0 0 2px rgba(226,194,122,.35),0 0 18px rgba(226,194,122,.35)} .pm-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ring:has(.pm-toggle){aspect-ratio:auto} .ring:has(.pm-toggle) svg{aspect-ratio:1;height:auto;display:block} .pm-deco{opacity:0;transition:opacity 1.2s ease;pointer-events:none} .ring.pm .pm-deco{opacity:1} .pm-deco .pm-ticks{transform-box:view-box;transform-origin:200px 200px;animation:pmSpin 240s linear infinite} .pm-deco .pm-st{animation:pmTw 4s ease-in-out infinite} @keyframes pmSpin{to{transform:rotate(360deg)}} @keyframes pmTw{0%,100%{opacity:.25}50%{opacity:1}} .ring.pm svg > circle{stroke:rgba(226,194,122,.55)} .ring.pm .cn-line{stroke:#E2C27A!important;filter:drop-shadow(0 0 3px rgba(226,194,122,.7))} .ring.pm .cn-web{stroke:rgba(226,194,122,.6)!important} .ring.pm .cn-ring,.ring.pm .cn-bar{stroke:#F1D48A!important} .ring.pm .cn-node circle:not(.cn-halo){fill:#131A29!important;stroke:#E2C27A!important;stroke-width:2!important} .ring.pm .cn-halo{fill:#E2C27A!important;opacity:.14} .ring.pm .cn-node text,.ring.pm svg > text{fill:#F5E6BC!important;font-family:"Hina Mincho",serif!important;letter-spacing:.04em} .ring.pm .cn-you{fill:#131A29!important;stroke:#F1D48A!important;filter:drop-shadow(0 0 10px rgba(241,212,138,.75))!important} .ring.pm .cn-ph{fill:#B08A3E;font-family:"Hina Mincho",serif} .ring.pm .cn-tip{background:linear-gradient(135deg,#131A29,#222C42);border-color:#C9A65A;color:#EDE2C8} .ring.pm .cn-tip b{font-family:"Hina Mincho",serif;color:#F1D48A!important} @media (prefers-reduced-motion:reduce){.pm-deco .pm-ticks,.pm-deco .pm-st{animation:none}} /* ロゴの光のカーテン：2階から現れ、最上階でいちばん濃く金色に */ .lg-curtain{position:absolute;left:-24px;top:-64px;width:calc(100% + 48px);height:150px;z-index:1;pointer-events:none;display:none;mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 100%)} .lg-curtain i{position:absolute;top:0;height:100%;width:14%;filter:blur(7px);opacity:0;transform-origin:50% 0; background:linear-gradient(180deg,rgba(var(--cu),.0),rgba(var(--cu),.75) 30%,rgba(var(--cu),.3) 70%,transparent);animation:lgCurtain 9s ease-in-out infinite} .lg-curtain i:nth-child(1){left:2%;animation-delay:-1s}.lg-curtain i:nth-child(2){left:15%;width:9%;animation-delay:-4s} .lg-curtain i:nth-child(3){left:27%;width:16%;animation-delay:-2.5s}.lg-curtain i:nth-child(4){left:44%;width:10%;animation-delay:-6s} .lg-curtain i:nth-child(5){left:56%;width:15%;animation-delay:-3.2s}.lg-curtain i:nth-child(6){left:72%;width:10%;animation-delay:-7.4s} .lg-curtain i:nth-child(7){left:84%;width:13%;animation-delay:-5.1s} @keyframes lgCurtain{0%,100%{opacity:.15;transform:skewX(-8deg) translateX(-6px)}50%{opacity:var(--co,.6);transform:skewX(8deg) translateX(6px)}} body[data-floor="2"] .lg-curtain{display:block;--cu:226,214,255;--co:.45} body[data-floor="3"] .lg-curtain{display:block;--cu:255,226,150;--co:.85} body[data-floor="3"] .lg-rays i{opacity:.8} @media (prefers-reduced-motion:reduce){.lg-curtain i{animation:none;opacity:.3}} /* 階ごとの音楽ボタン */ .fm-btn{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;font:inherit;font-size:.8rem;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 88%,transparent);color:var(--ink);cursor:pointer;backdrop-filter:blur(8px);box-shadow:0 6px 18px -8px rgba(0,0,0,.35)} .fm-btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent)} body[data-floor="3"] .fm-btn{border-color:#7A6435;color:#F1DFAE;background:rgba(19,26,41,.85)} @media (max-width:760px){.fm-btn{bottom:calc(20px + env(safe-area-inset-bottom,0px));width:44px;height:44px;padding:0;font-size:0;display:grid;place-items:center}.fm-btn::before{content:"♪";font-size:18px}} .fl .n.ntop{font-size:1.05rem;letter-spacing:.08em} .fl.f1{background:linear-gradient(120deg,#EAF6F1,#F7FBF8);color:#2C3E57;border-color:#CFE6DC;--art:url(img/town.webp)} .fl.f1 .n,.fl.f1 b{color:#3E8F7E} .fl.f1 .small{color:#5d6b7c} .fl.f1::before{mix-blend-mode:multiply;opacity:.3;filter:brightness(1.35) saturate(.7) sepia(.25)} .fl.f1 .go{font-weight:700;color:#3E8F7E;opacity:1} /* 玄関 10-27：時間と音楽のボタンを、いちばん上の扉の横へ */ .sg-top{position:relative} .sg-top .sg-arch{margin-left:auto;margin-right:auto} @media (min-width:760px){ .sg-top .sg-ctrl{position:absolute;top:50%;left:calc(50% + 170px);transform:translateY(-50%);margin:0;flex-direction:column;align-items:stretch;border-radius:22px;padding:12px;gap:8px;width:auto} .sg-top .sg-times{flex-direction:column} .sg-top #sgNow{text-align:center;white-space:nowrap;font-size:.76rem} } @media (max-width:759px){ .sg-top .sg-ctrl{margin:0 auto 12px} .sg-top .sg-times button,.sg-top .sg-music{padding:0 10px} } /* 立場の3枚：横並び＋色つきの薄い人影 10-27 */ .roles{grid-template-columns:repeat(3,1fr)!important;gap:10px} .roles .role{position:relative;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:flex-start;text-align:center!important;padding:16px 10px 12px} .roles .role b,.roles .role span,.roles .role br{position:relative;z-index:1} .roles .role b{font-size:1.05rem} .role-sil{position:absolute;left:8%;right:8%;bottom:0;width:84%;height:auto;opacity:.2;pointer-events:none;transition:opacity .4s ease} .role[aria-checked="true"] .role-sil{opacity:.36} .role:nth-child(1) .role-sil{color:#3A8676}.role:nth-child(2) .role-sil{color:#D9823B}.role:nth-child(3) .role-sil{color:#3F7CC0} @media (max-width:600px){.roles .role{min-height:150px;padding:12px 6px}.roles .role b{font-size:.9rem}.roles .role .small{font-size:.72rem}} .roles .role{min-height:220px;gap:6px} .roles .role br{display:none} .roles .role .small{line-height:1.5} .role-sil{left:50%;right:auto;width:auto;height:52%;transform:translateX(-50%)} @media (max-width:600px){.roles .role{min-height:210px}.roles .role b{font-size:.84rem;letter-spacing:0;white-space:nowrap}.roles .role .small{font-size:.7rem}.role-sil{height:46%}} /* 同意の横：ミツアカリの約束 10-27 */ .pledge-link{font:inherit;font-size:.86rem;background:none;border:0;padding:4px 0;color:var(--accent);text-decoration:underline;text-underline-offset:4px;cursor:pointer;align-self:flex-start;margin-left:30px} .pledge{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 45%,rgba(255,236,190,.28),rgba(20,16,10,.62) 70%);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .9s ease;cursor:pointer} .pledge.on{opacity:1} .pledge-in{max-width:560px;width:100%;max-height:86vh;overflow:auto;padding:28px 26px;border-radius:22px;background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid rgba(214,180,110,.6);box-shadow:0 0 40px rgba(255,220,150,.45);transform:translateY(14px) scale(.98);filter:blur(4px);transition:transform 1.1s ease,filter 1.1s ease;text-align:left} .pledge.on .pledge-in{transform:none;filter:none} .pledge h2{font-size:1.2rem;margin:6px 0 12px} .pledge ol{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:9px;line-height:1.7;color:var(--ink)} .pledge li::marker{color:#C9A24E;font-family:var(--display)} .pledge .small{margin:16px 0 0;text-align:center;color:var(--sub)} @media (max-width:600px){.roles .role{min-height:190px}.pledge-in{padding:22px 18px}.pledge ol{font-size:.9rem}} @media (prefers-reduced-motion:reduce){.pledge,.pledge-in{transition:none}} .pledge[hidden]{display:none} .agree-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px} .agree-row .pledge-link{margin-left:0;align-self:center;border:1px solid rgba(201,162,78,.6);border-radius:999px;padding:4px 14px;text-decoration:none;color:#C9A24E} .agree-row .pledge-link::before{content:"✦ ";} @media (max-width:600px){.agree-row .pledge-link{margin-left:30px}} /* 星灯り v2（10-27）：元の色を金に混ぜる＋啓示のような見立て */ .ring.pm .cn-node circle:not(.cn-halo){fill:color-mix(in srgb,var(--nc,#E2C27A) 16%,#131A29)!important;stroke:color-mix(in srgb,var(--nc,#E2C27A) 42%,#E2C27A)!important;stroke-width:2.4!important;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--nc,#E2C27A) 50%,transparent))} .ring.pm .cn-halo{fill:color-mix(in srgb,var(--nc,#E2C27A) 45%,#E2C27A)!important;opacity:.22} .ring.pm .cn-line{stroke:color-mix(in srgb,var(--nc,#E2C27A) 35%,#E2C27A)!important} .ring.pm .cn-node text{fill:color-mix(in srgb,var(--nc,#F5E6BC) 18%,#F7E9C2)!important} .ring.pm .orb circle:first-child{stroke:#F1D48A;stroke-width:1.5} .pm-codex{display:none;position:relative;overflow:hidden;margin:26px auto 0;max-width:900px;padding:30px 30px 22px;border-radius:20px;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(241,212,138,.16),transparent 70%),linear-gradient(160deg,#121827,#1C2438 55%,#121827);border:1px solid rgba(201,166,90,.55);box-shadow:inset 0 0 0 5px rgba(12,17,28,.9),inset 0 0 0 6px rgba(201,166,90,.35),0 18px 50px rgba(0,0,0,.35);color:#EDE2C8;text-align:left} .pm-codex.on{display:block} .pmc-rays{position:absolute;inset:-40% -10% auto;height:120%;background:conic-gradient(from 180deg at 50% 0%,transparent 0 160deg,rgba(255,232,170,.10) 168deg,transparent 176deg,rgba(255,232,170,.08) 184deg,transparent 192deg,rgba(255,232,170,.10) 200deg,transparent 208deg 360deg);pointer-events:none;animation:pmcRay 9s ease-in-out infinite} @keyframes pmcRay{0%,100%{opacity:.6}50%{opacity:1}} .pmc-latin{position:relative;margin:0;text-align:center;font-family:"IM Fell English",serif;font-style:italic;font-size:.8rem;letter-spacing:.14em;color:rgba(226,194,122,.55);transform:scaleX(-1)} .pmc-h{position:relative;margin:6px 0 2px;text-align:center;font-family:"Yuji Syuku","Hina Mincho",serif;font-weight:400;font-size:clamp(1.5rem,4vw,2rem);letter-spacing:.2em;color:#F1D48A;text-shadow:0 0 18px rgba(241,212,138,.55)} .pmc-sub{position:relative;margin:0 0 18px;text-align:center;font-family:"Hina Mincho",serif;font-size:.86rem;color:#BFAF8A;letter-spacing:.1em} .pmc-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px 22px} .pmc-note{padding:12px 14px 10px;border-left:1px solid rgba(201,166,90,.45);background:linear-gradient(90deg,rgba(201,166,90,.07),transparent);opacity:0;filter:blur(6px);clip-path:inset(0 100% 0 0);transition:opacity 1.4s ease,filter 1.6s ease,clip-path 2.4s cubic-bezier(.3,.6,.2,1)} .pm-codex.go .pmc-note{opacity:1;filter:none;clip-path:inset(0 0 0 0)} .pmc-note:nth-child(2){transition-delay:.9s}.pmc-note:nth-child(3){transition-delay:1.8s}.pmc-note:nth-child(4){transition-delay:2.7s} .pmc-k{display:block;font-family:"Yuji Syuku","Hina Mincho",serif;font-size:1.02rem;color:#F1D48A;letter-spacing:.12em;margin-bottom:4px} .pmc-note p{margin:0;font-family:"Hina Mincho",serif;font-size:.92rem;line-height:1.9;color:#E9DDC0} .pmc-cal{width:100%;height:auto;display:block;margin:2px 0 6px} .pmc-cal line{stroke:#C9A65A;stroke-width:.8;opacity:.7} .pmc-cal text{font-family:"Hina Mincho",serif;font-size:10px;fill:#CDBB8E} .pmc-cal .pmc-v{font-family:"IM Fell English",serif;font-style:italic;font-size:11px;fill:#F1D48A} .pmc-cal .pmc-mark{font-size:9px;fill:#E2C27A} .pmc-cal circle{fill:#C9A65A}.pmc-cal .pmc-prev{fill:#6F9BE0}.pmc-cal .pmc-now{fill:#F1D48A;filter:drop-shadow(0 0 4px #F1D48A)} .pmc-path{fill:none;stroke:#F1D48A;stroke-width:1.6;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 3s ease 3s} .pm-codex.go .pmc-path{stroke-dashoffset:0} .pmc-foot{position:relative;margin:16px 0 0;text-align:center;font-size:.76rem;color:#A99A78} @media (max-width:640px){.pm-codex{padding:24px 16px 18px}.pmc-grid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.pmc-rays{animation:none}.pmc-note,.pmc-path{transition:none}} .pmc-calbox{grid-column:1/-1} .pmc-calbox .pmc-cal{max-width:620px;margin:4px auto 8px} .pmc-cal text{font-size:11px} /* 玄関：時間と音楽を上の帯へ。朝日・太陽・夕日・月のかたち（10-27） */ .top .sg-ctrl{position:static;transform:none;margin:0 14px 0 0;padding:4px 6px;flex-direction:row;flex-wrap:nowrap;gap:4px;border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid color-mix(in srgb,var(--line) 80%,transparent)} .sg-ctrl #sgNow{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .sg-ctrl .sg-times{flex-direction:row;gap:2px} .sg-ctrl .sg-times button,.sg-ctrl .sg-music{min-height:34px;min-width:34px;padding:0 6px;border-color:transparent;display:inline-grid;place-items:center} .sg-ctrl .sg-times button[data-t=auto]{font-size:.76rem;padding:0 10px} .sg-ctrl svg{width:22px;height:22px;display:block} .sg-ctrl .sg-music{border-left:1px solid var(--line);border-radius:999px;margin-left:2px} .sg-ctrl button[data-t=morning]{color:#E8935A}.sg-ctrl button[data-t=noon]{color:#E2B23C}.sg-ctrl button[data-t=evening]{color:#D0603C}.sg-ctrl button[data-t=night]{color:#8EA6E0} .sg-ctrl .sg-times button[aria-pressed="true"]{background:color-mix(in srgb,currentColor 22%,transparent);border-color:currentColor} .sg-ctrl .sg-times button[data-t=auto][aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} @media (max-width:759px){.sg-ctrl.sg-mob{display:flex;position:sticky;top:76px;z-index:30;margin:10px auto 0;width:fit-content;padding:4px 6px;flex-direction:row;border-radius:999px;background:color-mix(in srgb,var(--card) 85%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.18)}} .sg-ctrl .sg-music[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);animation:sgNote 1.6s ease-in-out infinite} @keyframes sgNote{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}50%{box-shadow:0 0 0 6px transparent}} .top .sg-ctrl+nav{margin-left:0} .top .wrap{position:relative} .hd-clock{position:absolute;right:16px;bottom:3px;font-size:.68rem;letter-spacing:.08em;color:var(--sub);font-variant-numeric:tabular-nums;pointer-events:none;opacity:.85} @media (max-width:759px){.hd-clock{right:12px;bottom:2px;font-size:.62rem}} /* 最上階：流れ星（10-27） */ .cand .mt-glass{mix-blend-mode:normal;transform:scale(1.04);animation:breathe 18s ease-in-out infinite alternate} .cand .mt-room{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:normal;background:radial-gradient(ellipse 60% 70% at var(--mx,50%) var(--my,30%),rgba(120,165,255,.30),rgba(70,110,235,.16) 45%,rgba(40,70,190,.08) 80%),linear-gradient(rgba(50,90,210,.10),rgba(50,90,210,.10))} .hero .cand img{filter:contrast(calc(1 + var(--mb,0)*.12)) brightness(calc(1 + var(--mb,0)*.06))} .cand .mt-dark{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:multiply;background:radial-gradient(ellipse 45% 60% at var(--mx,50%) var(--my,30%),rgba(255,255,255,1) 0,rgba(255,255,255,1) 30%,rgba(70,80,130,1) 100%)} .cand .mt-trail{mix-blend-mode:normal;opacity:.55} .sg-music[hidden]{display:none!important} /* 上の帯の階段（10-27） */ .stairs{display:flex;gap:6px;margin-left:14px} .stairs a{display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;color:var(--sub);padding:2px 6px;border-radius:10px;transition:color .3s ease,background .3s ease} .stairs a:hover,.stairs a:focus-visible{color:var(--head);background:color-mix(in srgb,var(--accent) 12%,transparent)} .stairs svg{width:28px;height:28px;display:block} .stairs span{font-size:.64rem;letter-spacing:.1em;line-height:1.1} .stairs .st-up{color:color-mix(in srgb,var(--accent) 70%,var(--sub))} .stairs a:hover .st-arrow{transform:translateY(-2px)} body[data-floor="3"] .stairs a{color:#D9C38E} @media (max-width:760px){.stairs{margin-left:auto;gap:2px}.stairs svg{width:24px;height:24px}.stairs span{font-size:.58rem}} /* 階が変わるとき：ふわっと広がる */ @keyframes flOpen{from{opacity:.2;transform:scale(.98);filter:blur(3px)}to{opacity:1;transform:none;filter:none}} @keyframes flGlow{0%{opacity:.3;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}} @media (prefers-reduced-motion:no-preference){ body>main,body>header.top{animation:flOpen .6s cubic-bezier(.2,.7,.2,1) backwards;transform-origin:50% 30%} body::after{content:"";position:fixed;left:50%;top:40%;width:60vmax;height:60vmax;margin:-30vmax 0 0 -30vmax;border-radius:50%;pointer-events:none;z-index:300;background:radial-gradient(circle,rgba(255,244,214,.75),rgba(255,226,160,.25) 40%,transparent 70%);animation:flGlow .8s ease-out forwards} } .fl-veil{position:fixed;inset:0;z-index:310;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,rgba(255,246,222,.55),rgba(255,230,170,.25) 45%,rgba(255,220,150,0) 80%);transform:scale(.8);transition:opacity .3s ease,transform .35s ease-out} .fl-veil.out{opacity:.5;transform:scale(1.25);background:radial-gradient(circle at 50% 45%,#FFFBF0,rgba(255,240,200,.92) 35%,rgba(255,225,160,.6) 70%,rgba(255,215,150,.35))} /* 右の階ボタン：触れると階の名前がうっすら */ .lift a[data-name]::before{content:attr(data-name);position:absolute;right:calc(100% + 14px);top:50%;transform:translate(6px,-50%);white-space:nowrap;font-family:"Hina Mincho",serif;font-size:.8rem;letter-spacing:.08em;color:var(--head);background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 80%,transparent);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .45s ease} .lift a[data-name]:hover::before,.lift a[data-name]:focus-visible::before,.lift a[data-name].peek::before{opacity:.92;transform:translate(0,-50%)} @media (max-width:760px){.lift a[data-name]::before{right:auto;left:50%;top:auto;bottom:calc(100% + 12px);transform:translate(-50%,6px);font-size:.74rem} .lift a[data-name]:hover::before,.lift a[data-name].peek::before{transform:translate(-50%,0)}} .room-mark{display:block;width:40px;height:40px;flex:0 0 40px;margin-left:14px;filter:drop-shadow(0 0 6px rgba(226,194,122,.25))} .room-mark svg{width:100%;height:100%;display:block} .room-mark+.lg-where{border-left:0;padding-left:10px} @media (max-width:760px){.room-mark{width:30px;height:30px;flex-basis:30px;margin-left:8px}.room-mark+.lg-where{padding-left:6px}} @media (max-width:760px){.lg-name{white-space:nowrap}.stairs span{white-space:nowrap}.stairs a{padding:2px 3px}} @media (max-width:430px){.lg-txt{display:none}.room-mark{margin-left:10px}} /* ささえの輪のロゴ */ .sw-lock{display:flex;align-items:center;gap:12px;margin-bottom:4px} .sw-mark{width:72px;height:72px;flex:none;overflow:visible} .sw-lock b{display:block;font-family:var(--display);font-weight:500;font-size:1.25rem;letter-spacing:.12em;color:var(--head)} .sw-lock small{display:block;font-size:.78rem;letter-spacing:.1em;color:var(--sub)} .sw-mark .d{transform-box:fill-box;transform-origin:center;transition:filter 1.2s ease,transform 1.2s ease} .sw-mark .d.tw{filter:brightness(1.35) drop-shadow(0 0 6px currentColor);transform:scale(1.28)} .sw-mark .d:nth-of-type(2){color:#6F9BE0}.sw-mark .d:nth-of-type(3){color:#F2A65A}.sw-mark .d:nth-of-type(4){color:#6CC3A0}.sw-mark .d:nth-of-type(5){color:#9C8FD6}.sw-mark .d:nth-of-type(6){color:#E88B8B}.sw-mark .d:nth-of-type(7){color:#5FB3A1}.sw-mark .d.c{color:#F2B880} /* 音楽のスイッチ：上の帯の、間の名前と階段のあいだ（10-27） */ .fm-btn.fm-head{position:static;left:auto;bottom:auto;width:auto;height:auto;display:flex;align-items:center;gap:6px;margin-left:0;padding:5px 10px;font-size:.74rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--line) 85%,transparent);background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--sub);box-shadow:none;cursor:pointer;margin-right:16px} .fm-btn.fm-head::before{content:none} .fm-head .fm-n{font-size:.9rem} .fm-head .fm-sw{position:relative;width:30px;height:16px;border-radius:999px;background:color-mix(in srgb,var(--sub) 35%,transparent);transition:background .4s ease} .fm-head .fm-sw i{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .4s ease} .fm-head[aria-pressed="true"]{color:var(--head);border-color:var(--accent)} .fm-head[aria-pressed="true"] .fm-sw{background:var(--accent)} .fm-head[aria-pressed="true"] .fm-sw i{transform:translateX(14px)} .fm-head[aria-pressed="true"] .fm-n{animation:sgNoteB 2.4s ease-in-out infinite} @keyframes sgNoteB{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}} body[data-floor="3"] .fm-btn.fm-head{background:rgba(19,26,41,.6);border-color:#7A6435;color:#D9C38E} .fm-head+.stairs{margin-left:10px} .top nav+.fm-head,.top nav~.fm-head{margin-left:14px} @media (max-width:760px){.fm-btn.fm-head{padding:4px 7px;gap:4px;margin-left:auto}.fm-head .fm-l{display:none}.fm-head .fm-sw{width:26px;height:14px}.fm-head .fm-sw i{width:10px;height:10px}.fm-head[aria-pressed="true"] .fm-sw i{transform:translateX(12px)}.fm-head+.stairs{margin-left:4px}} .lg-where,.fm-btn.fm-head,.stairs,.room-mark{flex:none;white-space:nowrap} .top nav{gap:12px;font-size:.82rem;white-space:nowrap;min-width:0;overflow:hidden} @media (max-width:1240px){.top nav a[href="#unseen"],.top nav a[href="#about"]{display:none}} .lg-where:has(+.fm-head){margin-right:0} .fm-btn.fm-head{margin-left:14px;margin-right:auto} @media (max-width:1440px){.top nav a[href="#about"]{display:none}} @media (max-width:760px){.fm-btn.fm-head{margin-left:8px}} /* 玄関：扉のまんなかのロゴと名前（10-27） */ .sg-arch{position:relative} .door-emb{position:absolute;left:50%;top:74%;transform:translate(-50%,-50%);width:58%;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:2} .door-emb::before{content:"";position:absolute;inset:-30% -25%;border-radius:50%;background:radial-gradient(circle,rgba(255,236,190,.55),rgba(255,214,140,.18) 45%,transparent 70%);opacity:0;transform:scale(.6);transition:opacity 2.2s ease,transform 2.6s cubic-bezier(.2,.7,.2,1)} .de-logo{width:46%;height:auto;opacity:0;filter:blur(10px) drop-shadow(0 0 0 rgba(255,230,170,0));transform:translateY(14px) scale(.9);transition:opacity 2s ease,filter 2.4s ease,transform 2.6s cubic-bezier(.2,.7,.2,1)} .de-name{display:flex;gap:.06em;font-family:"Kiwi Maru",serif;font-weight:500;font-size:clamp(1.3rem,3.6vw,1.9rem);letter-spacing:.12em;line-height:1.1} .de-name span{color:#FFF3D6;text-shadow:0 0 8px rgba(255,214,140,.9),0 0 22px rgba(255,190,100,.55),0 1px 2px rgba(60,30,10,.6);opacity:0;filter:blur(6px);transform:translateY(8px);transition:opacity 1.2s ease,filter 1.4s ease,transform 1.4s ease;transition-delay:calc(1.4s + var(--i)*.22s)} .de-name span:nth-child(n+3){color:#CFF3E8;text-shadow:0 0 8px rgba(120,220,200,.85),0 0 22px rgba(95,179,161,.55),0 1px 2px rgba(20,40,40,.6)} .de-en{font-family:"Marcellus",serif;font-size:clamp(.55rem,1.4vw,.72rem);letter-spacing:.42em;color:#F3E2B8;text-shadow:0 0 8px rgba(255,214,140,.8);opacity:0;transition:opacity 1.6s ease 2.8s} .door-emb.on::before{opacity:1;transform:none;animation:deAura 5s ease-in-out 3s infinite} .door-emb.on .de-logo{opacity:1;filter:blur(0) drop-shadow(0 0 14px rgba(255,230,170,.85));transform:none;animation:deFloat 6s ease-in-out 3s infinite} .door-emb.on .de-name span{opacity:1;filter:none;transform:none} .door-emb.on .de-en{opacity:.9} @keyframes deFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes deAura{0%,100%{opacity:.85}50%{opacity:1}} @media (prefers-reduced-motion:reduce){.de-logo,.de-name span,.de-en,.door-emb::before{transition:none}.door-emb.on .de-logo,.door-emb.on::before{animation:none}} /* 扉のロゴ：左に大きなしるし、右に同じくらいの大きさの名前（横並び） */ .door-emb{width:96%;top:73%;flex-direction:row;align-items:center;justify-content:center;gap:4%;container-type:inline-size} .de-logo{width:30%;flex:none} .de-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .de-name{font-size:13cqw;letter-spacing:.04em;gap:0;line-height:1} .de-en{font-size:3.3cqw;letter-spacing:.5em;padding-left:.2em} .sg-arch .door-emb svg.de-logo{width:29%;height:auto} .door-emb .de-name{font-size:11.5cqw} .sg-arch .door-emb{width:min(190%,94vw);gap:3%} .sg-arch .door-emb svg.de-logo{width:23%} .door-emb .de-name{font-size:14.5cqw;font-weight:500} .door-emb .de-name span{text-shadow:0 0 10px rgba(255,214,140,1),0 0 30px rgba(255,190,100,.7),0 2px 3px rgba(60,30,10,.7)} .door-emb .de-name span:nth-child(n+3){text-shadow:0 0 10px rgba(120,220,200,1),0 0 30px rgba(95,179,161,.7),0 2px 3px rgba(20,40,40,.7)} .door-emb .de-en{font-size:3cqw;color:#FFF0CC} /* 文字の大きさ（どの階でも同じ。選んだ大きさは端末が覚える） */ html[data-fs="2"]{font-size:112.5%} html[data-fs="3"]{font-size:128%} .fs-ctl{position:fixed;left:14px;bottom:14px;z-index:45;display:flex;align-items:flex-end;gap:2px;background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 10px;box-shadow:0 6px 20px -10px rgba(0,0,0,.35);font-size:14px} .fs-ctl span{font-size:11px;color:var(--sub);margin-right:4px;align-self:center} .fs-ctl button{font-family:var(--display);border:0;background:none;color:var(--ink);cursor:pointer;width:30px;height:30px;border-radius:50%;line-height:1;padding:0} .fs-ctl button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)} @media print{.fs-ctl{display:none}} @media (max-width:760px){.fs-ctl{left:10px;bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 64px);padding:3px 5px 3px 8px}.fs-ctl button{width:28px;height:28px}} /* 星灯り（プレミアム）ボタン：触れたくなるように金色に光る */ .pm-toggle button[data-skin=pm]{position:relative;overflow:hidden;background:linear-gradient(135deg,#1A2236,#2A3550 55%,#1A2236);color:#F7E3B5;border:1px solid #E2C27A;box-shadow:0 0 0 1px rgba(226,194,122,.25),0 0 16px rgba(241,212,138,.45);animation:pmBtn 3.2s ease-in-out infinite} .pm-toggle button[data-skin=pm] small{color:#E2C27A;opacity:.9} .pm-toggle button[data-skin=pm]::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,240,190,.45) 50%,transparent 65%);background-size:260% 100%;background-position:130% 0;animation:pmShine 4.5s ease-in-out infinite;pointer-events:none} .pm-toggle button[data-skin=pm]:hover{transform:translateY(-1px);box-shadow:0 0 0 2px rgba(241,212,138,.5),0 0 28px rgba(241,212,138,.75)} .pm-spark{color:#F1D48A;text-shadow:0 0 8px rgba(241,212,138,.9);animation:pmSpark 2.4s ease-in-out infinite} @keyframes pmBtn{50%{box-shadow:0 0 0 1px rgba(241,212,138,.55),0 0 30px rgba(241,212,138,.7)}} @keyframes pmShine{0%,50%{background-position:130% 0}100%{background-position:-40% 0}} @keyframes pmSpark{50%{opacity:.4;transform:scale(.8) rotate(20deg)}} .pm-note{max-width:440px;margin:10px auto 0;font-size:.74rem;line-height:1.7;color:var(--sub);text-align:left;position:relative;z-index:2} .pm-note b{display:block;font-size:.78rem;color:#B08A3E;letter-spacing:.06em} @media (prefers-reduced-motion:reduce){.pm-toggle button[data-skin=pm],.pm-toggle button[data-skin=pm]::after,.pm-spark{animation:none}} /* 見えない支え：枠が蛍のようにゆっくり光る／出典は左から右へ光が流れる */ #unseen .card.ff{position:relative;animation:ffGlow 5.5s ease-in-out infinite} #unseen .grid > .card.ff:nth-child(2){animation-delay:-1.8s} #unseen .grid > .card.ff:nth-child(3){animation-delay:-3.4s} #unseen .g2 > .card.ff:nth-child(1){animation-delay:-2.6s} #unseen .g2 > .card.ff:nth-child(2){animation-delay:-4.4s} @keyframes ffGlow{0%,100%{border-color:var(--line);box-shadow:0 0 0 rgba(226,214,140,0)} 45%{border-color:rgba(226,214,140,.55);box-shadow:0 0 14px rgba(226,214,140,.22),inset 0 0 10px rgba(226,214,140,.06)} 60%{border-color:rgba(226,214,140,.35);box-shadow:0 0 8px rgba(226,214,140,.12)}} .src-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px} .src-tag{font-style:normal;font-size:.68rem;letter-spacing:.08em;padding:1px 7px;border:1px solid rgba(226,194,122,.6);border-radius:999px;color:#E2C27A} .src-glow{background:linear-gradient(90deg,var(--sub) 0%,var(--sub) 38%,#FFF1C4 48%,#F1D48A 52%,var(--sub) 62%,var(--sub) 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:srcSweep 4s ease-in-out infinite} @keyframes srcSweep{0%{background-position:100% 0}70%,100%{background-position:0 0}} @media (prefers-reduced-motion:reduce){#unseen .card.ff,.src-glow{animation:none}.src-glow{color:var(--sub);background:none}} /* 階の案内：玄関と1階を夕暮れ寄りに暗く／矢印を向けると枠が光る */ .fl.f1{background:linear-gradient(120deg,#1C3533,#24403D 60%,#2B4744);color:#E3EEEA;border-color:#3F6560} .fl.f1 .n,.fl.f1 b,.fl.f1 .go{color:#9FD9C9} .fl.f1 .small{color:#B9CCC6} .fl.f1::before{mix-blend-mode:screen;opacity:.32;filter:brightness(.9) saturate(.8)} .fl.fd{background:linear-gradient(120deg,#2E251B,#3A2E21 60%,#433524);color:#F1E7D6;border-color:#6A5434} .fl.fd .n,.fl.fd b{color:#E2B877} .fl.fd::before{mix-blend-mode:screen;opacity:.3;filter:sepia(.3) saturate(1.1) brightness(.9)} .fl.fd:hover::before{opacity:.42} .fl{--glow:226,194,122;transition:transform .25s ease,box-shadow .3s ease,border-color .3s ease} .fl.f2{--glow:159,217,201}.fl.f1{--glow:159,217,201}.fl.fd{--glow:226,184,119} .fl:hover,.fl:focus-visible{border-color:rgba(var(--glow),.9);box-shadow:0 0 0 1px rgba(var(--glow),.55),0 0 22px rgba(var(--glow),.45),inset 0 0 18px rgba(var(--glow),.12)} .fl:hover .go{opacity:1;text-shadow:0 0 10px rgba(var(--glow),.8)} @media (max-width:520px){.fl.f1::before,.fl.fd::before{opacity:.22}} /* 本文の「ささえの輪」：ブランド色で少し大きく、押すと輪へ */ .wa-brand{display:inline-flex;align-items:center;gap:4px;font-family:var(--display);font-weight:600;font-size:1.08em;letter-spacing:.06em;color:#A9802F;text-decoration:none;border-bottom:1px solid rgba(200,161,90,.55);padding:0 1px;transition:color .2s,text-shadow .2s} .wa-brand i{width:.9em;height:.9em;border-radius:50%;border:1.5px solid currentColor;box-shadow:inset 0 0 0 2.5px transparent;background:radial-gradient(circle,#F2B880 0 28%,transparent 32%);flex:none} .wa-brand:hover,.wa-brand:focus-visible{color:#C8A15A;text-shadow:0 0 10px rgba(226,194,122,.6)} :root[data-theme="dark"] .wa-brand{color:#E2C27A} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-brand{color:#E2C27A}} nav a.nav-wa{color:#A9802F;font-weight:600} :root[data-theme="dark"] nav a.nav-wa{color:#E2C27A} #map .sw-lock b{color:#A9802F} :root[data-theme="dark"] #map .sw-lock b{color:#E2C27A} #map .sw-mark{animation:waLogoGlow 4s ease-in-out infinite} @keyframes waLogoGlow{0%,100%{filter:drop-shadow(0 0 3px rgba(226,194,122,.35))}50%{filter:drop-shadow(0 0 12px rgba(241,212,138,.85))}} #map.wa-arrive .sw-mark{animation:waArrive 1.8s ease-out} #map.wa-arrive .sw-lock b{animation:waArriveT 1.8s ease-out} @keyframes waArrive{0%{transform:scale(1);filter:none}35%{transform:scale(1.18);filter:drop-shadow(0 0 18px rgba(241,212,138,1)) brightness(1.2)}100%{transform:scale(1);filter:drop-shadow(0 0 3px rgba(226,194,122,.35))}} @keyframes waArriveT{35%{text-shadow:0 0 16px rgba(241,212,138,.95)}} /* 1階の輪の左上：ささえの輪 簡易版／星灯り版の印 */ .ring-tag{position:absolute;left:-4px;top:-6px;z-index:3;display:flex;align-items:center;gap:8px;pointer-events:none} .rt-mk{width:34px;height:34px;flex:none;overflow:visible;animation:waLogoGlow 4s ease-in-out infinite} .ring-tag b{display:block;font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:.12em;color:#A9802F;line-height:1.2} .ring-tag small{display:inline-block;margin-top:2px;font-size:.66rem;letter-spacing:.1em;padding:1px 8px;border-radius:999px;border:1px solid currentColor} .ring-tag .rt-n{color:var(--mint-deep)} .ring-tag .rt-p{display:none;color:#E2C27A;background:rgba(20,27,43,.7)} .ring.pm .ring-tag .rt-n{display:none}.ring.pm .ring-tag .rt-p{display:inline-block} .ring.pm .ring-tag b{color:#E2C27A;text-shadow:0 0 10px rgba(226,194,122,.6)} :root[data-theme="dark"] .ring-tag b{color:#E2C27A} :root[data-theme="dark"] .ring-tag .rt-n{color:#9FD9C9} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ring-tag b{color:#E2C27A}:root:not([data-theme="light"]) .ring-tag .rt-n{color:#9FD9C9}} .pm-toggle button[data-skin=""] small{display:block} .pm-toggle button[data-skin=""]{flex-direction:column;gap:0;line-height:1.3} @media (prefers-reduced-motion:reduce){.rt-mk{animation:none}} /* 急ぎのとき：赤い文字で、蛍のようにゆっくり光る */ .safe .nums a{color:#E5484D;border-color:rgba(229,72,77,.45);font-weight:700;animation:sosGlow 3.6s ease-in-out infinite} .safe .nums a:nth-child(2){animation-delay:-1.2s}.safe .nums a:nth-child(3){animation-delay:-2.4s} @keyframes sosGlow{0%,100%{text-shadow:0 0 0 rgba(255,90,95,0);box-shadow:0 0 0 rgba(229,72,77,0)} 45%{text-shadow:0 0 10px rgba(255,90,95,.85);box-shadow:0 0 14px rgba(229,72,77,.35);border-color:rgba(255,110,115,.85)} 60%{text-shadow:0 0 5px rgba(255,90,95,.5);box-shadow:0 0 8px rgba(229,72,77,.2)}} :root[data-theme="dark"] .safe .nums a{color:#FF6B70} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .safe .nums a{color:#FF6B70}} @media (prefers-reduced-motion:reduce){.nums a{animation:none}} /* 通常のささえの輪はミント色（金色は星灯り＝3階だけ） */ .wa-brand,nav a.nav-wa,#map .sw-lock b,.ring-tag b{color:#2F8A78} .wa-brand{border-bottom-color:rgba(95,179,161,.6)} .wa-brand:hover,.wa-brand:focus-visible{color:#3FA28E;text-shadow:0 0 10px rgba(95,179,161,.55)} :root[data-theme="dark"] .wa-brand,:root[data-theme="dark"] nav a.nav-wa,:root[data-theme="dark"] #map .sw-lock b,:root[data-theme="dark"] .ring-tag b{color:#7FD8C3} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-brand,:root:not([data-theme="light"]) nav a.nav-wa,:root:not([data-theme="light"]) #map .sw-lock b,:root:not([data-theme="light"]) .ring-tag b{color:#7FD8C3}} .ring.pm .ring-tag b{color:#E2C27A!important} /* 用語の青い線と、ミチの説明（青い枠の小窓） */ .term-blue{font:inherit;color:inherit;background:none;border:0;padding:0 1px;cursor:pointer;text-decoration:underline;text-decoration-color:#6F9BE0;text-decoration-thickness:2px;text-underline-offset:5px;transition:color .2s,background .2s;border-radius:4px} .term-blue:hover,.term-blue:focus-visible{color:#6F9BE0;background:rgba(111,155,224,.1)} .mpop{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:16px;background:rgba(8,12,20,.55);opacity:0;transition:opacity .35s ease} .mpop.on{opacity:1} .mpop-box{position:relative;max-width:560px;width:100%;max-height:86vh;overflow:auto;background:var(--card);color:var(--ink);border:2px solid #6F9BE0;border-radius:20px;padding:24px 24px 20px;box-shadow:0 0 0 4px rgba(111,155,224,.18),0 0 34px rgba(111,155,224,.45),0 24px 60px -20px rgba(0,0,0,.6);transform:translateY(14px) scale(.97);transition:transform .4s cubic-bezier(.2,.8,.2,1)} .mpop.on .mpop-box{transform:none;animation:mpopGlow 4s ease-in-out infinite} @keyframes mpopGlow{50%{box-shadow:0 0 0 4px rgba(111,155,224,.28),0 0 46px rgba(111,155,224,.6),0 24px 60px -20px rgba(0,0,0,.6)}} .mpop-x{position:absolute;right:12px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:1.2rem;cursor:pointer} .mpop-who{display:flex;align-items:center;gap:12px;margin-bottom:10px} .mpop-who img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #6F9BE0;background:#14203A} .mpop-who b{display:block;color:#6F9BE0;font-family:var(--display);font-size:1.1rem;letter-spacing:.1em} .mpop-who small{font-size:.74rem;color:var(--sub)} .mpop h3{font-family:var(--display);font-weight:500;font-size:1.2rem;margin:4px 0 8px} .mpop h4{font-size:.92rem;margin:16px 0 6px;color:#4F7FC9;border-left:3px solid #6F9BE0;padding-left:8px} .mpop p,.mpop li{font-size:.92rem;line-height:1.85;margin:0 0 6px} .mpop ul{padding-left:1.2em;margin:0} .mpop-ex{font-size:.86rem!important;color:var(--sub);background:rgba(111,155,224,.08);border-radius:10px;padding:8px 12px} .mpop-foot{margin-top:14px!important;font-size:.84rem!important;color:var(--sub);border-top:1px dashed rgba(111,155,224,.5);padding-top:10px} :root[data-theme="dark"] .mpop h4{color:#9FBDF0} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mpop h4{color:#9FBDF0}} @media (prefers-reduced-motion:reduce){.mpop,.mpop-box{transition:none}.mpop.on .mpop-box{animation:none}} .mpop[hidden]{display:none} /* 夕灯り文庫：ロゴ（ひらいた本の上に灯り、夕暮れの弧）と書体（Yuji Syuku＋Marcellus） */ .bk-logo{display:flex;align-items:center;gap:14px} .bk-mark{width:84px;height:70px;flex:none;overflow:visible} .bk-mark .bk-glow{animation:bkGlow 4.5s ease-in-out infinite;transform-origin:60px 40px} @keyframes bkGlow{50%{opacity:.6;transform:scale(1.12)}} .bk-wm{display:flex;flex-direction:column;line-height:1.15} .bk-wm b{font-family:"Yuji Syuku",serif;font-weight:400;font-size:2rem;letter-spacing:.14em;background:linear-gradient(100deg,#B98BE0,#EE8E8E 45%,#F4B565);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px rgba(242,179,106,.35))} .bk-wm small{font-family:Marcellus,serif;font-size:.72rem;letter-spacing:.42em;color:#E2C27A;opacity:.85;margin-top:4px} .bk-link{display:inline-flex;align-items:center;gap:4px;font-family:"Yuji Syuku",serif;font-size:1.1em;letter-spacing:.06em;color:#E0866E;text-decoration:none;border-bottom:1px solid rgba(224,134,110,.55);padding:0 2px;transition:color .2s,text-shadow .2s} .bk-link svg{width:1.1em;height:.9em;flex:none} .bk-link:hover,.bk-link:focus-visible{color:#F4B565;text-shadow:0 0 10px rgba(242,179,106,.6)} :root[data-theme="dark"] .bk-link{color:#F2A07E} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bk-link{color:#F2A07E}} .bunko{background:linear-gradient(180deg,rgba(156,123,201,.10),rgba(242,179,106,.08))} .bk-head{display:flex;flex-direction:column;gap:12px;margin-bottom:22px} .bk-shelf{display:flex;gap:10px;align-items:flex-end;overflow-x:auto;padding:18px 14px 0;border-bottom:10px solid #6B4A2E;border-radius:4px;background:linear-gradient(180deg,transparent 60%,rgba(242,179,106,.10));box-shadow:0 14px 26px -18px rgba(0,0,0,.6)} .bk-book{flex:none;width:118px;height:210px;border-radius:6px 6px 2px 2px;padding:12px 10px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#1A2236),color-mix(in srgb,var(--c) 40%,#1A2236));color:#F7F1E6;border-left:4px solid rgba(255,255,255,.25);box-shadow:inset -6px 0 10px rgba(0,0,0,.25);transition:transform .25s} .bk-book:nth-child(2n){height:190px}.bk-book:nth-child(3n){height:224px} .bk-book:hover{transform:translateY(-8px)} .bk-book span{font-size:.66rem;letter-spacing:.08em;opacity:.85} .bk-book b{font-family:"Yuji Syuku",serif;font-weight:400;font-size:.92rem;line-height:1.5;writing-mode:vertical-rl;margin:0 auto} .bk-note{margin-top:12px} @media (prefers-reduced-motion:reduce){.bk-mark .bk-glow{animation:none}} #bunko{scroll-margin-top:84px} /* 読み物カード：押すと左にキャラ、右に少し詳しい説明 */ .rd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .rd-btn{font:inherit;color:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .25s,box-shadow .3s,border-color .3s} .rd-btn:hover,.rd-btn:focus-visible{transform:translateY(-3px);border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 20px color-mix(in srgb,var(--c) 40%,transparent)} .rd-more{margin-top:auto;font-size:.8rem;color:var(--c);font-weight:700} .rpop .rp-box{max-width:820px;display:grid;grid-template-columns:minmax(180px,38%) 1fr;gap:0;padding:0;overflow:hidden;border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent),0 0 34px color-mix(in srgb,var(--c) 45%,transparent),0 24px 60px -20px rgba(0,0,0,.6)} .rpop.on .rp-box{animation:none} .rp-char{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 18%,#FFFDF8),#FFFDF8);display:flex;align-items:flex-end;justify-content:center;min-height:300px;overflow:hidden} .rp-char img{width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:translateX(-30px);transition:opacity .6s ease .15s,transform .7s cubic-bezier(.2,.8,.2,1) .15s} .rp-char img[src*="michi"],.rp-char img[src*="kokoro"]{object-fit:contain;width:70%;height:auto;margin:auto} .rpop.on .rp-char img{opacity:1;transform:none} .rp-body{padding:26px 26px 22px;display:flex;flex-direction:column;gap:6px;max-height:86vh;overflow:auto} .rp-who{font-size:.76rem;letter-spacing:.08em;color:var(--c);font-weight:700} .rp-body h3{font-family:var(--display);font-weight:500;font-size:1.25rem;margin:2px 0 6px} .rp-body p{font-size:.92rem;line-height:1.85;margin:0 0 4px} .rd-list{margin:4px 0 6px;padding-left:1.4em}.rd-list li{font-size:.92rem;line-height:1.8} .rp-next{margin-top:10px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--c) 55%,transparent)} .rp-next p{font-size:.84rem!important;color:var(--sub)} .rp-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} @media (max-width:640px){.rpop .rp-box{grid-template-columns:1fr}.rp-char{min-height:0;height:200px}.rp-char img{object-position:top center}} /* 支えるチーム */ .team{margin-top:28px;display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px} .team-faces{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .team-faces figure{margin:0;text-align:center} .team-faces img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top center;border-radius:50%;border:3px solid var(--line);background:#fff;transition:transform .3s} .team-faces figure:hover img{transform:translateY(-4px) scale(1.04)} .team-faces figure:nth-child(1) img,.team-faces figure:nth-child(2) img{border-color:#6CC3A0} .team-faces figure:nth-child(3) img,.team-faces figure:nth-child(4) img,.team-faces figure:nth-child(5) img{border-color:#F2A65A} .team-faces figure:nth-child(6) img{border-color:#6F9BE0} .team-faces figcaption{font-size:.74rem;color:var(--sub);margin-top:4px} .team-txt h3{font-family:var(--display);font-weight:500;font-size:1.3rem;margin:4px 0 8px} .team-txt p{font-size:.92rem;line-height:1.9;margin:0 0 10px} @media (max-width:760px){.team{grid-template-columns:1fr}} @media (max-width:640px){.rp-char img{object-fit:contain!important;width:auto!important;height:100%!important;margin:0 auto}} /* キーメッセージ「ひとりで抱えなくていい」：読み物の右下で金色にふわふわ光る */ .team-card{border-color:rgba(226,194,122,.6);background:radial-gradient(120% 90% at 85% 0%,rgba(226,194,122,.14),transparent 60%),var(--card);animation:teamGlow 4.8s ease-in-out infinite} .team-card .tc-msg{font-family:var(--display);font-weight:600;font-size:1.12rem;color:#E2C27A;text-shadow:0 0 12px rgba(226,194,122,.45)} .team-card .tc-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px} .team-card .tc-foot .rd-more{margin-top:0} .team-card .sig{height:34px;width:auto;filter:drop-shadow(0 0 6px rgba(255,255,255,.35))} body[data-floor="1"] .team-card{background:radial-gradient(120% 90% at 85% 0%,rgba(226,194,122,.18),transparent 60%),#1E2633;color:#E9E3D6} body[data-floor="1"] .team-card .small{color:#C9C2B4} @media (prefers-reduced-motion:reduce){.team-card{animation:none}} .tpop .tp-box{max-width:760px;padding:0;overflow:hidden;background:#1B2230;color:#F4EFE4;border-color:#E2C27A;box-shadow:0 0 0 4px rgba(226,194,122,.2),0 0 40px rgba(226,194,122,.45),0 24px 60px -20px rgba(0,0,0,.6)} .tp-photo{aspect-ratio:3/2;max-height:46vh;width:100%;background:radial-gradient(80% 70% at 50% 20%,rgba(226,194,122,.25),transparent 70%),linear-gradient(180deg,#3A2E3F,#1B2230);display:flex;align-items:flex-end;justify-content:center;overflow:hidden} .tp-photo>img{width:100%;height:100%;object-fit:cover} .tp-faces{display:flex;justify-content:center;align-items:flex-end;gap:2%;width:94%;height:88%} .tp-faces img{height:100%;width:19%;object-fit:cover;object-position:top center;border-radius:14px 14px 0 0} .tp-body{position:relative;padding:22px 26px 24px} .tp-body h3{font-family:var(--display);font-weight:600;font-size:1.5rem;color:#E2C27A;margin:6px 0 2px;text-shadow:0 0 14px rgba(226,194,122,.5)} .tp-sig{display:block;margin:0 0 10px auto;height:46px;width:auto;filter:drop-shadow(0 0 8px rgba(255,255,255,.4))} .tp-body p{color:#E9E3D6;line-height:1.9;margin:0 0 8px} .tpop .mpop-x{color:#F4EFE4} /* 3人のしくみ教室 */ .cls{display:flex;flex-direction:column;gap:12px} .cls-stage{position:relative;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:#11161F;border:2px solid var(--cc);box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 25%,transparent),0 0 26px color-mix(in srgb,var(--cc) 55%,transparent);transition:border-color 1.2s,box-shadow 1.2s;animation:clsBreath 4s ease-in-out infinite} @keyframes clsBreath{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--cc) 30%,transparent),0 0 40px color-mix(in srgb,var(--cc) 75%,transparent)}} .cls-slide{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.03);transition:opacity 1.4s ease,transform 6s ease} .cls-slide.is-on{opacity:1;transform:scale(1)} .cls-slide img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block} .cls-slide figcaption{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(17,22,31,.72);color:#fff;font-family:var(--display);font-size:.92rem;border:1px solid var(--cc,#fff)} .cls-slide figcaption i,.cls-pick i{width:10px;height:10px;border-radius:50%;background:var(--cc);box-shadow:0 0 8px var(--cc)} .cls-slide[data-n="凛"] figcaption{--cc:#E2C27A}.cls-slide[data-n="結"] figcaption{--cc:#7CC6E8}.cls-slide[data-n="友花"] figcaption{--cc:#E0645A} .cls-wip{position:absolute;right:12px;top:12px;font-size:.72rem;padding:3px 10px;border-radius:999px;background:rgba(17,22,31,.7);color:#ddd} .cls-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .cls-pick button{font:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;justify-content:center;padding:10px 8px;border-radius:14px;background:var(--card);color:var(--head);border:1.5px solid color-mix(in srgb,var(--cc) 55%,transparent);transition:box-shadow .3s,transform .2s,background .3s} .cls-pick button small{color:var(--muted,#8a8a8a);font-size:.74rem} .cls-pick button:hover,.cls-pick button[aria-pressed="true"]{border-color:var(--cc);box-shadow:0 0 0 1px var(--cc),0 0 18px color-mix(in srgb,var(--cc) 45%,transparent);background:color-mix(in srgb,var(--cc) 12%,var(--card))} .cls-pick button:hover{transform:translateY(-2px)} @media (max-width:480px){.cls-pick button{flex-direction:column;gap:2px}} @media (prefers-reduced-motion:reduce){.cls-stage{animation:none}.cls-slide{transition:opacity .3s}} .term-blue{font-size:1.14em;font-weight:700;color:#3F74C9;text-decoration-thickness:2.5px} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .term-blue{color:#8DB4F0}} :root[data-theme="dark"] .term-blue{color:#8DB4F0} .term-blue:hover,.term-blue:focus-visible{color:#1F57B0;background:rgba(111,155,224,.14)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .term-blue:hover{color:#B5D0FA}} /* 夕灯り文庫：古書と目次 */ .bk-hall{display:grid;grid-template-columns:minmax(220px,38%) 1fr;gap:34px;align-items:center} .bk-tome{position:relative;font:inherit;background:none;border:0;padding:0;cursor:pointer;display:block;aspect-ratio:300/380;width:100%;max-width:360px;margin:0 auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));animation:tmFloat 6s ease-in-out infinite;transition:transform .5s} .bk-tome svg,.bk-tome img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} .bk-tome img{z-index:1} .bk-tome:hover{transform:translateY(-6px) rotate(-1deg)} .bk-tome .tm-glow{animation:bkGlow 4.5s ease-in-out infinite;transform-origin:148px 196px} .tm-hint{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);z-index:2;font-family:"Yuji Syuku",serif;font-size:.9rem;letter-spacing:.2em;color:#F4B565;opacity:.85;white-space:nowrap} @keyframes tmFloat{50%{transform:translateY(-8px)}} .bk-index{display:flex;flex-direction:column;gap:10px} .bk-idx-h{font-family:Marcellus,"Yuji Syuku",serif;font-size:.78rem;letter-spacing:.24em;color:#E2C27A;opacity:.9} .bk-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;border-left:2px solid rgba(226,194,122,.35);padding-left:14px} .bk-list li{position:relative} .bk-t{font:inherit;width:100%;display:grid;grid-template-columns:2.2em 1fr auto;align-items:center;gap:12px;text-align:left;cursor:pointer;padding:12px 14px;border-radius:12px;color:#F3E9D6;background:linear-gradient(90deg,rgba(255,255,255,.04),transparent);border:1px solid rgba(226,194,122,.18);transition:background .3s,border-color .3s,transform .25s,box-shadow .3s} .bk-no{font-family:"Yuji Syuku",serif;font-size:1.3rem;color:var(--c);text-align:center;text-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)} .bk-tt{font-family:"Yuji Syuku",serif;font-size:1.04rem;line-height:1.5;display:flex;flex-direction:column} .bk-tt small{font-family:inherit;font-size:.7rem;letter-spacing:.1em;color:var(--c);opacity:.9} .bk-go{font-size:.72rem;letter-spacing:.14em;color:#E2C27A;opacity:0;transform:translateX(-6px);transition:.3s} .bk-t:hover,.bk-t:focus-visible{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,transparent),rgba(255,255,255,.03));border-color:var(--c);transform:translateX(4px);box-shadow:0 0 18px color-mix(in srgb,var(--c) 35%,transparent)} .bk-t:hover .bk-go,.bk-t:focus-visible .bk-go{opacity:1;transform:none} .bk-tip{position:absolute;z-index:20;right:0;top:calc(100% + 6px);width:min(340px,92%);padding:14px 16px;border-radius:12px;background:#F6EBD3;color:#3A2A14;font-size:.86rem;line-height:1.75;box-shadow:0 18px 40px -12px rgba(0,0,0,.7),0 0 0 1px #C9A15A;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .25s,transform .25s,visibility .25s;pointer-events:none} .bk-tip b{display:block;font-family:"Yuji Syuku",serif;font-weight:400;font-size:.98rem;margin-bottom:4px;color:#5A3A12} .bk-tip em{display:block;font-style:normal;margin-top:6px;font-size:.74rem;color:#8A6526} .bk-list li:hover .bk-tip,.bk-t:focus-visible+.bk-tip{opacity:1;visibility:visible;transform:none} .bk-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .bk-home{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;border:1px solid rgba(226,194,122,.5);color:#F4D9A0;text-decoration:none;font-size:.86rem;background:rgba(226,194,122,.06);transition:.3s} .bk-home svg{width:16px;height:16px} .bk-home:hover{background:rgba(226,194,122,.16);box-shadow:0 0 16px rgba(226,194,122,.35)} @media (max-width:760px){.bk-hall{grid-template-columns:1fr}.bk-tome{max-width:220px}.bk-tip{position:static;width:auto;display:none;margin-top:6px}.bk-list li:hover .bk-tip,.bk-t:focus-visible+.bk-tip{display:block}} @media (prefers-reduced-motion:reduce){.bk-tome,.bk-tome .tm-glow{animation:none}} /* 本が浮かび上がり、めくれながら迫る */ .bk-fly{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;perspective:1400px;background:radial-gradient(60% 60% at 50% 50%,rgba(60,40,70,.0),rgba(18,12,26,0));transition:background .6s,opacity .6s} .bk-fly.go{background:radial-gradient(60% 60% at 50% 50%,rgba(70,45,60,.82),rgba(14,10,22,.96))} .bk-fly.out{opacity:0} .fly-book{position:relative;width:200px;height:270px;transform-style:preserve-3d;transform:translate(var(--x,0),var(--y,0)) scale(.4) rotateX(10deg);opacity:0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .4s} .bk-fly.go .fly-book{opacity:1;transform:translate(0,0) scale(1.15) rotateX(14deg) rotateY(-14deg)} .bk-fly.zoom .fly-book{transition:transform .8s cubic-bezier(.6,0,.4,1);transform:translate(0,0) scale(5) rotateX(0) rotateY(0)} .fly-back,.fly-cover,.fly-pages .lf{position:absolute;inset:0;border-radius:4px 10px 10px 4px;transform-origin:0 50%;backface-visibility:hidden} .fly-back{background:linear-gradient(135deg,#5A2624,#2C1213);box-shadow:0 30px 60px rgba(0,0,0,.6)} .fly-pages .lf{inset:6px 6px 6px 2px;background:linear-gradient(90deg,#D9C49A,#F6EBD3 12%,#F1E3C2);box-shadow:inset 6px 0 12px rgba(120,90,40,.25);animation:lfFlip .5s ease-in-out var(--d) both;animation-play-state:paused} .bk-fly.go .fly-pages .lf{animation-play-state:running} @keyframes lfFlip{0%{transform:rotateY(0)}100%{transform:rotateY(-172deg);filter:brightness(.85)}} .fly-cover{background:linear-gradient(135deg,#7A3430,#4A1F1E 60%,#2C1213);border:2px solid #B08A3E;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;color:#F4D9A0;transition:transform .7s cubic-bezier(.4,.2,.2,1) .3s;box-shadow:inset 0 0 0 6px rgba(226,194,122,.25)} .bk-fly.go .fly-cover{transform:rotateY(-175deg)} .fly-cover b{font-family:"Yuji Syuku",serif;font-weight:400;font-size:.92rem;line-height:1.6;text-align:center} .fly-emb{width:34px;height:44px;border-radius:6px 6px 14px 14px;background:radial-gradient(circle at 50% 60%,#FFF3D1,#E9C878 40%,#8A6526);box-shadow:0 0 22px 6px rgba(255,214,140,.55)} .fly-cap{position:absolute;bottom:14%;left:0;right:0;text-align:center;font-family:"Yuji Syuku",serif;color:#F4D9A0;letter-spacing:.2em;opacity:0;transition:opacity .5s .5s} .bk-fly.go .fly-cap{opacity:.9}.bk-fly.zoom .fly-cap{opacity:0;transition-delay:0s} .fly-dust{position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20% 30%,#FFE7B0,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#FFE7B0,transparent),radial-gradient(2px 2px at 40% 80%,#FFD9A0,transparent),radial-gradient(1.5px 1.5px at 85% 65%,#FFE7B0,transparent),radial-gradient(2px 2px at 55% 45%,#FFF3D1,transparent);opacity:0;transition:opacity 1s;animation:dustUp 3s linear infinite} .bk-fly.go .fly-dust{opacity:.9} @keyframes dustUp{to{transform:translateY(-40px)}} /* 読む画面 */ .bk-page .bunko{min-height:80vh} .bk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px} .bk-bar .bk-wm b{font-size:1.5rem} .bk-read-wrap{display:grid;grid-template-columns:1fr 280px;gap:26px;align-items:start} .rd-paper{position:relative;padding:38px clamp(20px,5vw,54px) 30px;border-radius:6px 14px 14px 6px;background:radial-gradient(120% 80% at 50% 0%,#FBF3E0,#F1E3C2 70%,#E3CFA4);color:#3A2A14;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 10px 0 18px -8px rgba(120,90,40,.35),0 0 0 1px #C9A15A,0 0 0 6px rgba(74,31,30,.9),0 0 0 7px #B08A3E} .rd-paper::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c);opacity:.8;border-radius:6px 0 0 6px} .rd-count{position:absolute;right:18px;top:14px;font-family:Marcellus,serif;font-size:.78rem;letter-spacing:.2em;color:#8A6526} .rd-who{font-size:.8rem;letter-spacing:.12em;color:color-mix(in srgb,var(--c) 70%,#3A2A14)} .rd-t{font-family:"Yuji Syuku",serif;font-weight:400;font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.5;margin:6px 0 18px;color:#2E1E0A} .rd-body{font-size:1.02rem;line-height:2.05} .rd-body ol{padding-left:1.4em}.rd-body li{margin:4px 0} .rd-mark{margin:22px 0 0;font-size:.76rem;color:#8A6526;border-top:1px dashed rgba(138,101,38,.4);padding-top:10px} .bk-reader.arrive .rd-paper{animation:rdIn .8s cubic-bezier(.2,.8,.2,1)} @keyframes rdIn{from{opacity:0;transform:perspective(1200px) rotateY(-12deg) translateY(16px) scale(.97);transform-origin:0 50%}to{opacity:1;transform:none}} .rd-nav{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px} .rd-nav button{font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(226,194,122,.4);color:#F4D9A0;text-align:left;transition:.3s} .rd-nav .rd-next{text-align:right} .rd-nav button span{font-family:"Yuji Syuku",serif;font-size:1rem} .rd-nav button small{color:#CDBFA8;font-size:.78rem;line-height:1.5} .rd-nav button:hover{background:rgba(226,194,122,.12);box-shadow:0 0 18px rgba(226,194,122,.3);transform:translateY(-2px)} .bk-side{position:sticky;top:90px;display:flex;flex-direction:column;padding:16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(226,194,122,.25)} .bk-side>b{font-family:"Yuji Syuku",serif;font-weight:400;color:#E2C27A;letter-spacing:.14em;margin-bottom:8px} .bk-side ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .bk-side button{font:inherit;width:100%;text-align:left;cursor:pointer;display:flex;flex-direction:column;padding:8px 10px;border-radius:10px;border:1px solid transparent;background:none;color:#EDE3D0;font-size:.86rem;line-height:1.5;transition:.25s} .bk-side button small{font-size:.68rem;color:var(--c)} .bk-side button:hover{background:rgba(255,255,255,.05);border-color:color-mix(in srgb,var(--c) 50%,transparent)} .bk-side button[aria-current="true"]{background:color-mix(in srgb,var(--c) 16%,transparent);border-color:var(--c)} @media (max-width:860px){.bk-read-wrap{grid-template-columns:1fr}.bk-side{position:static}.rd-nav{grid-template-columns:1fr}.rd-nav .rd-next{text-align:left}} @media (prefers-reduced-motion:reduce){.bk-reader.arrive .rd-paper{animation:none}} .bk-hall+.bk-note{margin-top:44px} .cls-slide figcaption i+i,.cls-pick i+i{margin-left:-4px} .cls-pick button i+i+b,.cls-pick button i+b{margin-left:2px} .cls-pick button{display:grid;grid-template-columns:auto auto;grid-auto-flow:row;justify-content:center;justify-items:center;column-gap:3px;row-gap:2px} .cls-pick button i{grid-row:1} .cls-pick button b{grid-row:2;grid-column:1/-1;white-space:nowrap} .cls-pick button small{grid-row:3;grid-column:1/-1;white-space:nowrap} .cls-pick button i:only-of-type{grid-column:1/-1} /* 大事な言葉：左から右へ光が走る */ .wa-brand,nav a.nav-wa{--tc:#2F8A78} .term-blue{--tc:#3F74C9} .bk-link{--tc:#E0866E} .wa-pm{--tc:#C9A04E} :root[data-theme="dark"] .wa-brand,:root[data-theme="dark"] nav a.nav-wa{--tc:#7FD8C3} :root[data-theme="dark"] .term-blue{--tc:#8DB4F0} :root[data-theme="dark"] .bk-link{--tc:#F2A07E} :root[data-theme="dark"] .wa-pm{--tc:#E2C27A} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-brand,:root:not([data-theme="light"]) nav a.nav-wa{--tc:#7FD8C3}:root:not([data-theme="light"]) .term-blue{--tc:#8DB4F0}:root:not([data-theme="light"]) .bk-link{--tc:#F2A07E}:root:not([data-theme="light"]) .wa-pm{--tc:#E2C27A}} .ring.pm .wa-pm,.wa-logo.pm~* .wa-pm{--tc:#E2C27A} .wa-brand,nav a.nav-wa,.term-blue,.bk-link,.wa-pm{color:var(--tc);background-image:linear-gradient(100deg,var(--tc) 0 38%,color-mix(in srgb,var(--tc) 35%,#fff) 46%,#fff 50%,color-mix(in srgb,var(--tc) 35%,#fff) 54%,var(--tc) 62% 100%)!important;background-size:280% 100%!important;background-repeat:no-repeat;background-position:100% 0;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;text-shadow:none!important;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tc) 45%,transparent));animation:wordShine 4.8s ease-in-out infinite} .wa-brand i,.wa-pm i,.bk-link svg{-webkit-text-fill-color:initial} .term-blue{text-decoration-color:var(--tc)} .term-blue:hover,.wa-brand:hover,.bk-link:hover,.wa-pm:hover{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--tc) 70%,transparent))} @keyframes wordShine{0%,45%{background-position:100% 0}100%{background-position:0 0}} @media (prefers-reduced-motion:reduce){.wa-brand,nav a.nav-wa,.term-blue,.bk-link,.wa-pm{animation:none}} .wa-word{--tc:#8FE3CF;color:var(--tc);background-image:linear-gradient(100deg,var(--tc) 0 38%,#E9FFF8 46%,#fff 50%,#E9FFF8 54%,var(--tc) 62% 100%);background-size:280% 100%;background-repeat:no-repeat;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(127,216,195,.5));animation:wordShine 4.8s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.wa-word{animation:none}} /* 夕灯り文庫：動画と同じ絵 */ .bunko{position:relative;isolation:isolate} .bunko::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,18,36,.88),rgba(26,18,36,.78) 40%,rgba(26,18,36,.92)),url(img/bunko_room.webp) center 30%/cover no-repeat} .bk-tome{aspect-ratio:2/3;max-width:380px} .bk-tome img{object-fit:cover;border-radius:14px;border:2px solid rgba(226,194,122,.7);box-shadow:0 0 0 6px rgba(74,47,27,.85),0 0 0 7px rgba(226,194,122,.5),0 0 34px rgba(226,194,122,.35)} .bk-tome svg{display:none} .bk-tome .tm-hint{bottom:-34px} /* 規約ページとフッターのリンク（10-28） */ .foot-links{display:flex;flex-wrap:wrap;gap:6px 16px} .foot-links a{color:var(--sub);text-decoration:underline;text-underline-offset:3px} .legal{max-width:820px} .legal h2{font-size:1.15rem;margin:28px 0 8px} .legal h3{font-size:1.02rem;margin:24px 0 8px;font-family:var(--display);font-weight:500;color:var(--head)} .legal p,.legal li{line-height:1.85} .legal ol,.legal ul{padding-left:1.4em;margin:0 0 10px} .legal table{border-collapse:collapse;width:100%;margin:8px 0 14px;font-size:.94rem} .legal th,.legal td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top} .legal th{width:30%;font-weight:700;background:color-mix(in srgb,var(--line) 35%,transparent)} .legal .box{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0} .legal .art{font-weight:700} .legal-nav{margin-top:28px} @media (max-width:560px){.legal th,.legal td{display:block;width:auto}.legal th{border-bottom:none}} /* コミック「灯のそばで」（仮の見た目） */ .cm-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 14px;scrollbar-width:thin} .cm-ep{flex:none;width:168px;scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)} .cm-cv{position:relative;display:block;aspect-ratio:2/3;border-radius:6px 10px 10px 6px;overflow:hidden;box-shadow:inset 5px 0 0 rgba(0,0,0,.25),0 10px 22px -10px rgba(0,0,0,.6);border:1px solid rgba(227,166,64,.45);transition:transform .3s,box-shadow .3s} .cm-cv img{width:100%;height:100%;object-fit:cover;display:block} .cm-cv i{position:absolute;left:8px;top:8px;font-style:normal;font-size:.7rem;padding:2px 8px;border-radius:999px;background:rgba(20,16,28,.72);color:#F4D9A0} .cm-ep b{font-family:"Yuji Syuku",var(--display),serif;font-weight:400;font-size:.98rem;color:var(--head);margin-top:4px} .cm-ep small{font-size:.74rem;line-height:1.5;opacity:.8} .cm-ep:hover .cm-cv{transform:translateY(-6px) rotate(-1deg);box-shadow:inset 5px 0 0 rgba(0,0,0,.25),0 0 22px rgba(227,166,64,.5)} .cm-note{opacity:.75} .bk-comics{margin-top:40px} .bk-comics .cm-ep{color:#F3E9D6}.bk-comics .cm-ep b{color:#F4D9A0} .bk-cmlink{display:block;margin-top:12px;font-size:.84rem;color:#F4D9A0;text-decoration:none;border-top:1px dashed rgba(226,194,122,.35);padding-top:10px} .bk-cmlink:hover{color:#FFE7B0} /* iPhone で横にぶれないように（10-28） */ html,body{overflow-x:hidden} @supports (overflow:clip){html,body{overflow-x:clip}} .sg{overflow:hidden} @media (max-width:760px){ .three{grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;gap:18px;max-width:340px;margin-inline:auto} .cm-row{display:grid;grid-template-columns:1fr 1fr;overflow:visible;scroll-snap-type:none;gap:16px 12px} .cm-ep{width:auto} } .mapbox>*,.grid>*,.wrap>*{min-width:0} @media (max-width:760px){ .cls-pick{grid-template-columns:1fr;gap:8px} .cls-pick button{grid-template-columns:auto auto 1fr;justify-content:start;justify-items:start;align-items:center;column-gap:8px;padding:10px 14px;text-align:left} .cls-pick button i{grid-row:1/3} .cls-pick button i:only-of-type{grid-column:auto} .cls-pick button b{grid-row:1;grid-column:3} .cls-pick button small{grid-row:2;grid-column:3;white-space:normal} } #dust{width:100%;height:100%} /* 三つ灯物語の動画（10-28） */ .vd-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 16px} .vd-tabs button{font:inherit;cursor:pointer;display:flex;align-items:baseline;gap:8px;padding:9px 18px;border-radius:999px;background:var(--card);color:var(--head);border:1.5px solid var(--line)} .vd-tabs button small{font-size:.74rem;opacity:.7} .vd-tabs button[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--card));box-shadow:0 0 0 1px var(--accent)} .vd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 16px} .vd{font:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:3px;padding:0;background:none;border:0;color:var(--ink)} .vd-cv{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px -12px rgba(0,0,0,.5);margin-bottom:6px} .vd-cv img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .vd-cv i{position:absolute;right:10px;bottom:10px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.9rem;padding-left:3px;background:rgba(15,18,28,.72);color:#fff;border:1.5px solid rgba(255,255,255,.7)} .vd:hover .vd-cv img{transform:scale(1.04)} .vd:hover .vd-cv i{background:var(--accent)} .vd small{font-size:.74rem;color:var(--sub)} .vd b{font-weight:500;font-family:var(--display);color:var(--head);line-height:1.5} .vd-note{margin-top:14px;opacity:.75} .vd-room .vd-grid{margin-top:14px} .dusk .vd small{color:#B4C0D2}.dusk .vd b{color:#F4E6C8} @media (max-width:760px){.vd-grid{grid-template-columns:1fr 1fr;gap:14px 10px}.vd b{font-size:.9rem}.vd-cv i{width:30px;height:30px;font-size:.75rem;right:6px;bottom:6px}} .vp-box{max-width:420px;padding:14px 14px 16px;border-color:#E2C27A} .vp-box video{display:block;width:100%;aspect-ratio:9/16;max-height:68vh;border-radius:12px;background:#000;object-fit:contain} .vp-body{padding:10px 4px 0} .vp-lab{font-size:.78rem;color:var(--sub)} .vp-t{margin:2px 0 4px;font-size:1.1rem} .vp-c{margin:0;font-size:.9rem;opacity:.85} .vp-box .mpop-x{z-index:2} .cls-slide{pointer-events:none}.cls-slide.is-on{pointer-events:auto} .cls-play{position:absolute;right:12px;top:12px;z-index:3;font:inherit;font-size:.82rem;cursor:pointer;display:flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(17,22,31,.72);color:#fff;border:1.5px solid var(--cc,#fff);box-shadow:0 0 14px color-mix(in srgb,var(--cc,#fff) 50%,transparent)} .cls-play i{font-style:normal;font-size:.7rem;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--cc,#fff);color:#11161F;padding-left:2px} .cls-play:hover{background:rgba(17,22,31,.9)} .cls-slide .cls-wip{top:auto;bottom:52px} /* note解説の入口 */ .nt-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:center;margin-top:22px;padding:14px;border:1px solid var(--line,#e6e0d4);border-radius:14px;text-decoration:none;color:inherit;background:var(--card,rgba(255,255,255,.6))} .nt-card img{width:100%;aspect-ratio:1280/670;object-fit:cover;border-radius:8px;display:block} .nt-tx{display:grid;gap:4px;min-width:0}.nt-tx small{opacity:.7}.nt-tx b{font-size:1.15rem}.nt-tx span{font-size:.92rem;line-height:1.7}.nt-tx i{font-style:normal;font-weight:700;margin-top:4px} @media (max-width:640px){.nt-card{grid-template-columns:1fr;gap:10px}} .vp-note{display:inline-block;margin-top:8px;font-size:.9rem;font-weight:700} /* コミックの棚：本をめくるように（10-28） */ .cm-book{position:relative;margin-top:8px} .cm-book .cm-row{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:18px calc(50% - 115px) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .cm-book .cm-row::-webkit-scrollbar{display:none} .cm-book .cm-ep{flex:none;width:230px;padding:0 12px;scroll-snap-align:center;scroll-snap-stop:always;transform:scale(var(--sc,1)) translateY(var(--ty,0px));opacity:var(--op,1);transition:opacity .2s} .cm-book .cm-cv{aspect-ratio:4/5;border-radius:4px 12px 12px 4px;border-color:rgba(227,166,64,.55);box-shadow:inset 6px 0 0 rgba(0,0,0,.18),0 18px 30px -16px rgba(0,0,0,.55)} .cm-book .cm-ep b,.cm-book .cm-ep small{text-align:center} .cm-book .cm-ep:hover .cm-cv{transform:none} .cm-nav{position:absolute;top:42%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(227,166,64,.6);background:rgba(20,16,28,.55);color:#F4D9A0;font-size:1.6rem;line-height:1;cursor:pointer;z-index:2;display:grid;place-items:center;padding:0 0 4px} .cm-prev{left:4px}.cm-next{right:4px} .cm-dots{display:flex;justify-content:center;gap:8px;margin-top:6px} .cm-dots i{width:7px;height:7px;border-radius:50%;background:rgba(227,166,64,.3);cursor:pointer;transition:transform .2s,background .2s} .cm-dots i.on{background:#E3A640;transform:scale(1.4)} @media (max-width:760px){ .cm-book .cm-row{display:flex;padding-inline:calc(50% - 105px)} .cm-book .cm-ep{width:210px} .cm-nav{width:36px;height:36px;font-size:1.3rem} } @media (prefers-reduced-motion:reduce){.cm-book .cm-ep{transform:none}} /* 3人のカード→その人の動画を選ぶ */ .person[data-ch]{cursor:pointer} .p-vids{display:inline-flex;align-items:center;gap:8px;margin-top:10px;align-self:flex-start;font-size:.86rem;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid rgba(var(--ff),.7);color:var(--head);background:rgba(var(--ff),.12)} .p-vids i{font-style:normal;font-size:.75rem} .ch-box{max-width:760px;width:calc(100% - 24px);max-height:86vh;overflow-y:auto} .ch-box h4{margin:18px 0 8px;font-size:.95rem;opacity:.85} .ch-t{margin:4px 0 0} /* 物語の年表（横軸＝時間） */ .tl{overflow-x:auto;overflow-y:hidden;margin-top:10px;padding-bottom:10px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin} .tl-in{position:relative} .tl-ln{position:absolute;left:0;top:0;pointer-events:none} .tl-ln path{fill:none;stroke-width:3;stroke-linecap:round;opacity:.75;filter:drop-shadow(0 0 4px currentColor)} .tl-h{position:absolute;top:4px;font-size:.78rem;font-weight:700;letter-spacing:.08em;opacity:.8;white-space:nowrap} .tl-lab{position:absolute;left:0;display:flex;flex-direction:column;align-items:center;gap:2px;width:48px;font-family:var(--display);font-size:1rem;color:var(--head)} .tl-lab i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)} .tl-lab small{font-size:.66rem;opacity:.7} .tl-c{position:absolute} .tl-c .vd{width:100%} .tl-c .vd-cv{box-shadow:0 0 0 2px var(--c,rgba(227,166,64,.7)),0 10px 20px -12px rgba(0,0,0,.6)} .tl-t .vd-cv{box-shadow:0 0 0 2px #E2B85A,0 0 0 4px #6FB8E0,0 0 0 6px #E0645A,0 10px 20px -12px rgba(0,0,0,.6)} .tl-c .vd small{font-size:.68rem}.tl-c .vd b{font-size:.84rem;line-height:1.4} .tl-ss{position:absolute;top:0;height:26px;display:flex;align-items:center;padding-left:12px;font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--head);border-radius:999px;background:linear-gradient(90deg,rgba(226,184,90,.22),rgba(111,184,224,.22),rgba(224,100,90,.22))} .tl-ss.s2{background:none;border:1px dashed rgba(127,127,127,.5);opacity:.7} .tl-h{display:flex;flex-direction:column;gap:1px} .tl-h em{font-style:normal;font-weight:400;font-family:var(--display);font-size:.86rem;letter-spacing:.04em;opacity:.9} .tl-ln path.dash{stroke-dasharray:4 7;opacity:.45;filter:none} .tl-next{position:absolute;border:1.5px dashed rgba(127,127,127,.45);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--sub);padding:12px} .tl-next b{font-family:var(--display);font-weight:500;font-size:1.05rem;color:var(--head)} .tl-next small{font-size:.74rem;line-height:1.6} /* 玄関：扉をひらいて1階へ */ button.sg-arch{display:block;padding:0;border:0;background:none;cursor:pointer;font:inherit} .dr-btn{display:flex;margin:0 auto 18px} .dr-fx{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:rgba(14,12,24,0);transition:background .45s;perspective:1400px;overflow:hidden} .dr-fx.on{background:rgba(14,12,24,.92)} .dr-frame{position:relative;height:min(86vh,150vw);aspect-ratio:580/1140;opacity:0;transform:scale(.9);transition:opacity .45s,transform 2s cubic-bezier(.5,0,.3,1)} .dr-fx.on .dr-frame{opacity:1;transform:scale(1)} .dr-fx.open .dr-frame{transform:scale(2.6)} .dr-l,.dr-r{position:absolute;top:0;bottom:0;width:50%;background:url(img/door_wood.webp) no-repeat;background-size:200% 100%;transition:transform 1.5s cubic-bezier(.6,0,.3,1) .1s;backface-visibility:hidden} .dr-l{left:0;background-position:0 0;transform-origin:0 50%} .dr-r{right:0;background-position:100% 0;transform-origin:100% 50%} .dr-fx.open .dr-l{transform:rotateY(-105deg)} .dr-fx.open .dr-r{transform:rotateY(105deg)} .dr-light{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,#FFF6DD 0%,#FFE3A6 18%,rgba(255,214,140,.5) 38%,rgba(255,214,140,0) 62%);opacity:0;transform:scale(.4);transition:opacity 1.2s .5s,transform 2s .4s} .dr-fx.open .dr-light{opacity:1;transform:scale(2.2)} .dr-fx.open{background:#FFF6E6;transition:background 1s 1.2s} @media (prefers-reduced-motion:reduce){.dr-frame,.dr-l,.dr-r,.dr-light{transition:none}} /* 動画の枠を画面いっぱいに（10-29） */ .mpop.vpop{padding:6px} .vp-box{--vh:calc(100dvh - 175px);max-width:none;width:min(100%,calc(var(--vh)*9/16 + 12px));max-height:calc(100dvh - 12px);padding:6px 6px 10px;border-radius:16px} .vp-box video{max-height:var(--vh);border-radius:10px} .vp-body{padding:6px 8px 0} @supports not (height:100dvh){.vp-box{--vh:calc(100vh - 175px);max-height:calc(100vh - 12px)}} /* 最上階：帯の端から端まで光のカーテン＋ときどき流れ星（10-29） */ .top-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;mix-blend-mode:screen; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%)} body[data-floor="1"] header.top>.wrap,body[data-floor="2"] header.top>.wrap,body[data-floor="3"] header.top>.wrap{position:relative;z-index:1} .top-sky .cu{position:absolute;top:-10%;height:120%;filter:blur(5px);opacity:.2;transform-origin:50% 0; background:linear-gradient(90deg,transparent,rgba(var(--sk),.5) 30%,rgba(var(--sk2),.85) 50%,rgba(var(--sk),.5) 70%,transparent),linear-gradient(180deg,rgba(var(--sk),.9),rgba(var(--sk),.25) 85%);background-blend-mode:multiply;animation:topCu 10s ease-in-out infinite} @keyframes topCu{0%,100%{opacity:.18;transform:skewX(-9deg) translateX(-10px)}50%{opacity:.6;transform:skewX(9deg) translateX(10px)}} .top-sky .ss{position:absolute;width:170px;height:2.5px;border-radius:2px;opacity:0; background:linear-gradient(90deg,rgba(255,240,200,0),rgba(255,240,200,.95));box-shadow:0 0 6px rgba(255,230,170,.9);transform:rotate(var(--a,-18deg));animation:topSs 1.3s ease-out forwards} @keyframes topSs{0%{opacity:0;translate:0 0}12%{opacity:1}100%{opacity:0;translate:var(--dx,-260px) var(--dy,90px)}} @media (prefers-reduced-motion:reduce){.top-sky .cu{animation:none;opacity:.25}.top-sky .ss{display:none}} body[data-floor="3"] .top-sky{--sk:255,226,150;--sk2:255,236,180} body[data-floor="2"] .top-sky{--sk:120,170,255;--sk2:175,205,255} .top-sky .sp{position:absolute;border-radius:50%;background:#EAF3FF;box-shadow:0 0 4px 1px rgba(170,205,255,.9),0 0 9px 2px rgba(120,170,255,.45);opacity:0;animation:topSp 3s ease-in-out forwards} @keyframes topSp{0%{opacity:0;transform:scale(.3)}45%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4) translateY(-6px)}} @media (prefers-reduced-motion:reduce){.top-sky .sp{display:none}} /* 1階：上から降りそそぐ薄い青の光（10-29） */ body[data-floor="1"] .top-sky{--sk:140,190,255;--sk2:190,220,255} body[data-floor="1"] .top-sky .cu{display:none} body[data-floor="1"] .top-sky{mix-blend-mode:normal} :root:not([data-theme="dark"]) body[data-floor="1"] .top-sky{--sk:90,150,235;--sk2:140,185,245} .top-sky .rn{position:absolute;top:-30%;width:10%;height:160%;opacity:0;filter:blur(10px);transform:skewX(-14deg); background:linear-gradient(180deg,rgba(var(--sk2),.55),rgba(var(--sk),.18) 60%,transparent);animation:topRn 5s ease-in-out infinite} @keyframes topRn{0%,100%{opacity:.12}50%{opacity:.45}} /* 1階：ときどき昇る灯籠 */ .lt-lay{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden} .lt-lay i{position:absolute;bottom:-60px;border-radius:30% 30% 22% 22%/22% 22% 14% 14%; background:radial-gradient(ellipse at 50% 70%,#FFF1C4 0,#FFC461 35%,#E8822E 75%,#B4521C 100%); box-shadow:0 0 10px 3px rgba(255,190,90,.55),0 0 26px 8px rgba(255,160,60,.25);animation:ltUp 10s linear forwards} @keyframes ltUp{0%{opacity:0;transform:translate(0,0) scale(1)}8%{opacity:.9}85%{opacity:.75}100%{opacity:0;transform:translate(var(--sw),-115vh) scale(.5)}} @media (prefers-reduced-motion:reduce){.top-sky .rn{animation:none;opacity:.25}.lt-lay{display:none}} /* 玄関は外の絵だけ（10-29） */ .sg-out.only.go{background:#0B0F24} .sg-out.only.go::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 84%,rgba(255,236,190,.95),rgba(255,214,140,.6) 40%,transparent 75%);opacity:0;animation:sgLight 1.6s ease-in forwards} @keyframes sgLight{0%,35%{opacity:0}100%{opacity:1}} /* 外の絵の登録ボタン・レンガの登録画面（10-29） */ .sg-reg{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} .sg-out .sg-reg .btn.ghost{color:#F3ECDD;border-color:rgba(243,236,221,.7);background:rgba(11,15,36,.45)} .sg-top-reg .sg-arch,.sg-top-reg .dr-btn{display:none} .reg-tabs{display:flex;gap:6px;background:rgba(127,127,127,.12);padding:4px;border-radius:999px;align-self:flex-start} .reg-tabs button{font:inherit;font-size:.92rem;padding:6px 18px;border-radius:999px;border:0;background:transparent;color:var(--ink);cursor:pointer} .reg-tabs button[aria-selected="true"]{background:var(--card);box-shadow:0 1px 4px rgba(0,0,0,.18);font-weight:700} .reg-f{display:flex;flex-direction:column;gap:6px;font-size:.92rem} .reg-f input{font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink)} .reg-go.is-line{background:#06C755;color:#fff} .reg-go:disabled{opacity:.45;cursor:not-allowed} .reg-done[hidden],.sg-main .card[hidden]{display:none!important} /* 登録ボタンを絵のまんなかに、金色にもわもわ光る縁＋文字に左から右へ光（10-29） */ .sg-center>.sg-reg{flex-wrap:nowrap;gap:16px} .sg-out .reg-pick{position:relative;font-size:1.08rem;padding:14px 26px;border-radius:999px;border:2px solid #F1D48A;color:#FFF7E2; background:rgba(11,15,36,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:regGlow 3.2s ease-in-out infinite;white-space:nowrap} .sg-out .reg-line{background:rgba(6,150,70,.78)} .sg-out .reg-mail{animation-delay:-1.6s} @keyframes regGlow{0%,100%{box-shadow:0 0 8px 2px rgba(241,212,138,.55),0 0 22px 6px rgba(226,184,90,.3),inset 0 0 8px rgba(241,212,138,.35)} 50%{box-shadow:0 0 14px 4px rgba(255,226,150,.85),0 0 40px 14px rgba(226,184,90,.45),inset 0 0 12px rgba(255,226,150,.5)}} .sg-out .reg-pick span{background:linear-gradient(100deg,#FFF7E2 0,#FFF7E2 40%,#FFE08A 47%,#FFFFFF 50%,#FFE08A 53%,#FFF7E2 60%,#FFF7E2 100%);background-size:250% 100%; -webkit-background-clip:text;background-clip:text;color:transparent;animation:regShine 3.6s linear infinite} .sg-out .reg-mail span{animation-delay:-1.8s} @keyframes regShine{0%{background-position:100% 0}100%{background-position:-150% 0}} @media (max-width:420px){.sg-out>.sg-reg{gap:10px}.sg-out .reg-pick{font-size:.98rem;padding:12px 18px}} @media (prefers-reduced-motion:reduce){.sg-out .reg-pick,.sg-out .reg-pick span{animation:none}.sg-out .reg-pick span{color:#FFF7E2;background:none}} /* 玄関：まんなかにブランドロゴが浮かび上がる＋妖精が舞う（10-29） */ .sg-fairy{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none} .sg-center{position:absolute;left:50%;top:60%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.5vh,32px);width:min(94vw,720px);transition:opacity .6s ease} .sg-out.go .sg-center,.sg-out.go .sg-fairy{opacity:0;transition:opacity .5s ease} .sg-brand{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,24px)} .sg-brand::before{content:"";position:absolute;inset:-45% -18%;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(11,15,36,.62),rgba(11,15,36,.35) 55%,transparent);opacity:0;transition:opacity 1.6s ease} .sb-logo svg{display:block;width:clamp(78px,15vw,132px);height:auto;opacity:0;filter:blur(10px);transform:scale(.85);transition:opacity 1.8s ease .2s,filter 2s ease .2s,transform 2.2s cubic-bezier(.2,.7,.2,1) .2s} .sb-txt{display:flex;flex-direction:column;align-items:flex-start;gap:4px} .sb-name{display:flex;font-family:"Kiwi Maru",serif;font-weight:500;font-size:clamp(2.6rem,9.5vw,4.6rem);letter-spacing:.12em;line-height:1.05} .sb-name span{color:#FFF3D6;text-shadow:0 0 10px rgba(255,214,140,.95),0 0 30px rgba(255,190,100,.6),0 2px 3px rgba(40,20,10,.7);opacity:0;filter:blur(8px);transform:translateY(10px);transition:opacity 1.2s ease,filter 1.4s ease,transform 1.4s ease;transition-delay:calc(.9s + var(--i)*.22s)} .sb-name span:nth-child(n+3){color:#CFF3E8;text-shadow:0 0 10px rgba(120,220,200,.95),0 0 30px rgba(95,179,161,.6),0 2px 3px rgba(10,30,30,.7)} .sb-en{font-family:"Marcellus",serif;font-size:clamp(.8rem,2.4vw,1.15rem);letter-spacing:.5em;padding-left:.3em;color:#F3E2B8;text-shadow:0 0 10px rgba(255,214,140,.85);opacity:0;transition:opacity 1.6s ease 2.3s} .sg-out .sg-reg{opacity:0;transform:translateY(10px);transition:opacity 1.2s ease 2.8s,transform 1.2s ease 2.8s} .sg-out.brand-on .sg-brand::before{opacity:1} .sg-out.brand-on .sb-logo svg{opacity:1;filter:blur(0) drop-shadow(0 0 16px rgba(255,230,170,.9));transform:none;animation:sbFloat 6s ease-in-out 2.4s infinite} .sg-out.brand-on .sb-name span{opacity:1;filter:none;transform:none;animation:sbGlow 4s ease-in-out infinite;animation-delay:calc(3s + var(--i)*.25s)} .sg-out.brand-on .sb-en{opacity:.95} .sg-out.brand-on .sg-reg{opacity:1;transform:none} @keyframes sbFloat{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 14px rgba(255,230,170,.8))}50%{transform:translateY(-6px);filter:drop-shadow(0 0 26px rgba(255,236,190,1))}} @keyframes sbGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35) drop-shadow(0 0 8px rgba(255,236,190,.9))}} @media (max-width:520px){.sg-brand{flex-direction:column;gap:10px}.sb-txt{align-items:center}} @media (prefers-reduced-motion:reduce){.sb-logo svg,.sb-name span,.sb-en,.sg-out .sg-reg{transition:none}.sg-out.brand-on .sb-logo svg,.sg-out.brand-on .sb-name span{animation:none}} .sg-center{gap:clamp(12px,2.2vh,22px)} .sg-center .sb-name{font-size:clamp(2.2rem,min(8vw,7vh),4rem)} .sg-center .sb-logo svg{width:clamp(64px,min(12vw,11vh),112px)} .sg-center #sgEnter{opacity:0;transition:opacity 1.2s ease 3.2s} .sg-out.brand-on .sg-center #sgEnter{opacity:1} @media (max-width:520px){.sg-brand{flex-direction:row;gap:12px}.sb-txt{align-items:flex-start}.sg-center .sb-name{font-size:clamp(1.9rem,10vw,2.6rem)}.sg-center .sb-en{font-size:.72rem}} /* 玄関：扉の左で待つ灯守（10-29） */ .sg-himori{position:absolute;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.6s ease .4s} .sg-himori img{display:block;width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(255,210,140,.25))} .sg-himori::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-2.5%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:-1} .sg-out.brand-on .sg-himori{opacity:1} .sg-out.go .sg-himori{opacity:0;transition:opacity .5s ease} /* 扉をひらく：ミント色の光の中で灯守があいさつ（10-29） */ .sg-out.mint.go::after{background:radial-gradient(circle at 50% 70%,rgba(225,255,245,.98),rgba(150,225,205,.85) 40%,rgba(95,179,161,.75) 80%);animation:sgLight 1.4s ease-in forwards} .mt-greet{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 60%,#E9FFF7,#A8E3D2 55%,#5FB3A1);opacity:0;transition:opacity .9s ease} .mt-greet.on{opacity:1}.mt-greet.out{opacity:0;transition:opacity .8s ease} .mt-greet[hidden]{display:none} .mg-in{display:flex;align-items:flex-end;gap:clamp(12px,3vw,32px);max-width:760px;width:100%} .mg-hm{height:min(70vh,560px);width:auto;flex:none;filter:drop-shadow(0 10px 20px rgba(20,70,60,.35));opacity:0;transform:translateY(12px);transition:opacity 1.2s ease .2s,transform 1.4s ease .2s} .mt-greet.on .mg-hm{opacity:1;transform:none} .mg-box{flex:1;background:rgba(255,255,255,.82);border:2px solid #5FB3A1;border-radius:20px;padding:18px 20px;color:#173B35;box-shadow:0 0 0 4px rgba(95,179,161,.18),0 12px 30px -12px rgba(20,70,60,.45);margin-bottom:8vh} .mg-who{display:inline-block;font-size:.8rem;letter-spacing:.2em;color:#2E7D6E;font-weight:700;margin-bottom:6px} .mg-t{font-family:"Kiwi Maru",serif;font-size:clamp(1.15rem,3.6vw,1.5rem);line-height:1.7;margin:0;min-height:2.2em} .mg-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease} .mg-btns.on{opacity:1;transform:none} .mg-btns .btn{background:#2E7D6E;color:#fff}.mg-btns .btn.ghost{background:#fff;color:#2E7D6E;border:1.5px solid #2E7D6E} @media (max-width:560px){.mg-in{flex-direction:column;align-items:center}.mg-hm{height:42vh}.mg-box{margin-bottom:0;width:100%}} .mg-demo{position:absolute;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:4;font-size:.72rem;color:#F3ECDD;background:rgba(11,15,36,.6);padding:4px 8px;border-radius:999px;display:flex;gap:4px;align-items:center} .mg-demo button{font:inherit;font-size:.72rem;border:1px solid rgba(243,236,221,.5);background:transparent;color:#F3ECDD;border-radius:999px;padding:2px 8px;cursor:pointer} .mg-demo button[aria-pressed="true"]{background:#5FB3A1;border-color:#5FB3A1;color:#0B0F24} .sg-out.go .mg-demo{opacity:0} /* 見学モード（10-29） */ .tour{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:80;width:min(640px,calc(100vw - 24px));display:flex;align-items:flex-end;gap:10px;opacity:0;transition:opacity .5s ease,transform .5s ease;pointer-events:none} .tour.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} .tour-hm{height:150px;width:auto;flex:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))} .tour-b{flex:1;background:rgba(240,255,250,.95);border:2px solid #5FB3A1;border-radius:18px;padding:12px 14px;color:#173B35;box-shadow:0 0 0 4px rgba(95,179,161,.18),0 14px 30px -12px rgba(0,0,0,.45)} .tour-who{font-size:.74rem;letter-spacing:.12em;color:#2E7D6E;font-weight:700}.tour-who small{font-weight:500;margin-left:6px;color:#5B8F84} .tour-t{font-family:"Kiwi Maru",serif;font-size:1.02rem;line-height:1.7;margin:4px 0 8px;min-height:3.4em} .tour-btns{display:flex;flex-wrap:wrap;gap:8px}.tour-btns .btn{min-height:40px;padding:0 18px;font-size:.9rem;background:#2E7D6E;color:#fff} .tour-btns .btn.ghost{background:#fff;color:#2E7D6E;border:1.5px solid #2E7D6E} .tour-lit{outline:3px solid rgba(95,179,161,.85);outline-offset:6px;border-radius:14px;transition:outline-color .4s ease} @media (max-width:560px){.tour-hm{height:110px}.tour-t{font-size:.95rem}} /* プレミアムのお迎え：金の光、深い会釈、きらめきと花びら（10-29） */ .sg-out.mint.go.prem-in::after{background:radial-gradient(circle at 50% 70%,#FFF8E6,#F5D68A 45%,#C9963A)} .mt-greet.prem{background:radial-gradient(circle at 50% 55%,#FFF8E6,#F3D795 50%,#B98A35)} .mt-greet.prem .mg-box{border-color:#C9A65A;background:rgba(255,252,242,.9);box-shadow:0 0 0 4px rgba(226,194,122,.3),0 0 40px rgba(255,214,140,.65),0 12px 30px -12px rgba(90,60,10,.45)} .mt-greet.prem .mg-who{color:#9A7323} .mt-greet.prem .mg-who::after{content:" ・ プレミアムのお客さま";letter-spacing:.08em;font-weight:500} .mt-greet.prem.rin .mg-who::after{content:""} .mt-greet.prem .mg-hm{filter:drop-shadow(0 0 22px rgba(255,226,150,.9)) drop-shadow(0 10px 20px rgba(90,60,10,.35))} .mt-greet.prem.on .mg-hm{animation:mgBow 3.2s ease-in-out 1.2s 1} @keyframes mgBow{0%,100%{transform:none}40%,60%{transform:rotate(-4deg) translateY(4px)}} .mg-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden} .mg-fx i{position:absolute;top:-30px;opacity:0;animation:mgFall linear infinite} .mg-fx .gl{width:6px;height:6px;border-radius:50%;background:#FFF6D8;box-shadow:0 0 8px 3px rgba(255,214,140,.9)} .mg-fx .pt{width:12px;height:9px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#FFE1EA,#F2A7BC)} @keyframes mgFall{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}90%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),110vh) rotate(540deg)}} /* 玄関の灯守：さわるとひとこと（10-29） */ .sg-himori{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent} .sg-himori:focus-visible{outline:2px solid #F1D48A;outline-offset:4px;border-radius:12px} .sg-himori img{transform-origin:50% 100%;transition:filter .4s ease} .sg-himori:hover img{filter:drop-shadow(0 0 12px rgba(255,220,150,.7))} .sg-himori.nod img{animation:hmNod .9s ease-in-out} @keyframes hmNod{0%,100%{transform:none}45%{transform:rotate(-2.5deg) translateY(2px)}} .sg-himori.shy::before{content:"";position:absolute;left:44%;top:7.5%;width:14%;height:2.2%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,120,140,.55),transparent);z-index:2;filter:blur(1px);animation:hmBlush 4s ease forwards} @keyframes hmBlush{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}} .hm-say{position:absolute;z-index:5;max-width:min(260px,70vw);padding:10px 14px;border-radius:16px 16px 16px 4px;background:rgba(255,252,242,.95);color:#2B2416;font-family:"Kiwi Maru",serif;font-size:.95rem;line-height:1.6; box-shadow:0 0 0 2px rgba(241,212,138,.8),0 0 18px rgba(255,214,140,.5);opacity:0;transform:translateY(6px) scale(.96);transition:opacity .35s ease,transform .35s ease;pointer-events:none} .hm-say.on{opacity:1;transform:none} .hm-say.shy{background:rgba(255,240,244,.96);box-shadow:0 0 0 2px rgba(242,167,188,.85),0 0 18px rgba(242,167,188,.45)} .sg-out.go .hm-say{opacity:0} .sg-center{pointer-events:none}.sg-center .btn,.sg-center button{pointer-events:auto} /* プレミアム：最上階の前で、黒いドレスの凛がお迎え（10-29） */ .mg-rin{display:none} .mt-greet.prem .mg-rin{display:block;height:min(66vh,520px);width:auto;flex:none;opacity:0;transform:translateX(30px);transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 0 26px rgba(255,236,190,.95)) drop-shadow(0 10px 18px rgba(90,60,10,.3))} .mt-greet.prem.rin .mg-rin{opacity:1;transform:none} .mt-greet.prem .mg-in{max-width:1080px} .mt-greet.prem.rin .mg-who{color:#7A4A2A} .mt-greet.prem.rin .mg-box{border-color:#E2B85A} @media (max-width:560px){.mt-greet.prem .mg-in{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"hm rin" "box box";align-items:end;justify-items:center;gap:8px} .mt-greet.prem .mg-hm{grid-area:hm;height:40vh}.mt-greet.prem .mg-rin{grid-area:rin;height:38vh}.mt-greet.prem .mg-box{grid-area:box}} /* 部屋の名前の色（10-29）：明るい地には濃い色、暗い地には明るい色 */ .rm{font-weight:700} .rm-1{color:#2E8C78}.rm-2{color:#7A55B8}.rm-3{color:#A87A1E}.rm-door{color:#8A5A2E} body[data-floor="2"] .top .rm-2,body[data-floor="3"] .top .rm-2{color:#C9B0F2} body[data-floor="2"] .top .rm-3,body[data-floor="3"] .top .rm-3{color:#F1D48A} body[data-floor="2"] .top .rm-1,body[data-floor="3"] .top .rm-1{color:#8FDCC9} :root[data-theme="dark"] .top .rm-1{color:#8FDCC9}:root[data-theme="dark"] .top .rm-2{color:#C9B0F2}:root[data-theme="dark"] .top .rm-3{color:#F1D48A}:root[data-theme="dark"] .top .rm-door{color:#E8B880} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .top .rm-1{color:#8FDCC9}:root:not([data-theme="light"]) .top .rm-2{color:#C9B0F2}:root:not([data-theme="light"]) .top .rm-3{color:#F1D48A}:root:not([data-theme="light"]) .top .rm-door{color:#E8B880}} /* ワープ到着 */ html.warp-in body{opacity:0} html.warp-on body{animation:warpBody 1.3s ease-out both} @keyframes warpBody{0%{opacity:.35;filter:blur(6px) brightness(1.2)}45%{opacity:1}100%{opacity:1;filter:none}} .fl-arrive{position:fixed;inset:0;z-index:320;pointer-events:none;background:radial-gradient(circle at 50% 45%,#FFFBF0,rgba(255,240,200,.92) 35%,rgba(255,225,160,.6) 70%,rgba(255,215,150,.35));animation:warpVeil 1.6s ease-out forwards} .fl-arrive.f2,.fl-veil.to-2.out{background:radial-gradient(circle at 50% 45%,#F2FFFA,rgba(190,240,222,.92) 35%,rgba(140,220,195,.6) 70%,rgba(110,205,175,.35))} .fl-arrive.f1,.fl-veil.to-1.out{background:radial-gradient(circle at 50% 45%,#F4F9FF,rgba(200,222,255,.92) 35%,rgba(150,190,250,.6) 70%,rgba(120,170,240,.35))} .fl-arrive.fdoor,.fl-veil.to-door.out{background:radial-gradient(circle at 50% 45%,#FFF6EC,rgba(250,215,180,.92) 35%,rgba(235,180,130,.6) 70%,rgba(220,160,110,.35))} @keyframes warpVeil{0%{opacity:.5;transform:scale(1.25)}35%{opacity:.4}100%{opacity:0;transform:scale(1.9)}} .fl-arrive i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;box-shadow:0 0 8px 3px rgba(255,236,180,.9);opacity:0;animation:warpDot 1.3s ease-out forwards} .fl-arrive.f1 i{box-shadow:0 0 8px 3px rgba(170,205,255,.95)} .fl-arrive.f2 i{box-shadow:0 0 8px 3px rgba(150,230,200,.95)} .fl-arrive.fdoor i{box-shadow:0 0 8px 3px rgba(245,195,140,.95)} @keyframes warpDot{0%{opacity:0;transform:translateY(0)}25%{opacity:.75}100%{opacity:0;transform:translateY(-120px)}} ruby rt{font-size:.42em;letter-spacing:.08em;font-weight:400} /* ロゴだけの光のカーテンは、帯全体の光とつなぎ目ができるので出さない */ .lg-curtain{display:none!important} /* 3階の相談欄：声で書く・整える・送る前の確認 */ .ask-tools{display:flex;flex-wrap:wrap;gap:10px} .ask-mic,.ask-tidy{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid color-mix(in srgb,#E2C27A 60%,transparent);background:color-mix(in srgb,#E2C27A 10%,transparent);color:var(--ink);font:inherit;font-size:.92rem;cursor:pointer} .ask-mic svg{width:20px;height:20px;color:#E2C27A} .ask-star{color:#E2C27A} .ask-mic[aria-pressed="true"]{background:color-mix(in srgb,#E0645A 22%,transparent);border-color:#E0645A;animation:askRec 1.4s ease-in-out infinite} .ask-mic[aria-pressed="true"] svg{color:#F08A80} @keyframes askRec{50%{box-shadow:0 0 0 6px rgba(224,100,90,.18)}} .ask-msg{margin:0;color:#E2C27A} .ask-box{border-color:#C9A15A;box-shadow:0 0 0 4px rgba(226,194,122,.16),0 0 34px rgba(226,194,122,.25)} .ask-cmp{display:grid;gap:10px;margin:12px 0} .ask-opt{display:block;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--bg2);cursor:pointer;text-align:left;color:var(--ink);font:inherit} .ask-opt b{display:block;font-size:.78rem;color:#E2C27A;margin-bottom:4px;letter-spacing:.06em} .ask-opt p{margin:0;white-space:pre-wrap;line-height:1.85} .ask-opt.sel{border-color:#E2C27A;box-shadow:0 0 0 2px rgba(226,194,122,.35)} .ask-opt small{display:block;margin-top:6px;font-size:.72rem;color:var(--sub)} .ask-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} @media (prefers-reduced-motion:reduce){.ask-mic[aria-pressed="true"]{animation:none}} /* 3階：お手紙の記録（本人だけ） */ .mylog{margin-top:22px;padding:16px 18px;border-radius:16px;border:1px solid color-mix(in srgb,#E2C27A 35%,transparent);background:color-mix(in srgb,var(--card) 70%,transparent)} .ml-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px} .ml-head b{font-size:.95rem;letter-spacing:.08em;color:#E2C27A} .ml-lock{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--sub)} .ml-lock svg{width:14px;height:14px} .ml-list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .ml-it details{border-radius:12px;border:1px solid var(--line);background:var(--bg2)} .ml-it summary{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;list-style:none;font-size:.82rem} .ml-it summary::-webkit-details-marker{display:none} .ml-d{color:var(--sub);white-space:nowrap} .ml-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ml-st{font-size:.7rem;padding:2px 9px;border-radius:999px;border:1px solid #C9A15A;color:#E2C27A;white-space:nowrap} .ml-st.done{border-color:color-mix(in srgb,#6CC3A0 70%,transparent);color:#8FDCC9} .ml-body{padding:4px 14px 14px;display:grid;gap:10px;font-size:.88rem;line-height:1.85} .ml-body b{display:block;font-size:.74rem;letter-spacing:.06em;color:var(--sub);margin-bottom:2px} .ml-body p{margin:0 0 6px} .ml-a{padding:10px 12px;border-radius:10px;border-left:3px solid #E2C27A;background:color-mix(in srgb,#E2C27A 7%,transparent)} .ml-a b{color:#E2C27A} .ml-note{margin:8px 0 0} @media (max-width:560px){.ml-it summary{grid-template-columns:1fr auto;row-gap:2px}.ml-d{grid-column:1/-1;font-size:.72rem}} /* 送る前の確認：誰が・何を・言いかえ・お手紙の形 */ .ask-box{max-width:640px} .ak-q{margin:10px 0} .ak-q>b{display:block;font-size:.8rem;letter-spacing:.06em;color:#E2C27A;margin-bottom:6px} .ak-chips{display:flex;flex-wrap:wrap;gap:6px} .ak-chip{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit;font-size:.82rem;cursor:pointer} .ak-chip.on{background:#E2C27A;border-color:#E2C27A;color:#2A2010;font-weight:700} .ak-hit{padding:8px 10px;border-radius:12px;background:color-mix(in srgb,#E2C27A 8%,transparent);margin-bottom:6px} .ak-hit p{margin:0 0 6px;font-size:.85rem} .ak-hit em{font-style:normal;color:#E2C27A} .ak-paper{margin:14px 0 8px;padding:24px 22px 18px} .ak-paper p{font-size:.92rem;line-height:1.9} .ak-raw{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--sub);margin:4px 0 10px} /* 3階：見本の手紙をひとまわり小さく */ #answers .lt-row{max-width:720px;margin-inline:auto;gap:14px} #answers .lt-env{padding:40px 14px 12px;font-size:.88rem} #answers .lt-view{max-width:860px;margin-inline:auto;gap:14px} #answers .lt-paper{padding:20px 20px 16px;font-size:.88rem;line-height:1.85} #answers .lt-paper h3{font-size:1.1rem} #answers .lt-paper p{font-size:.86rem;margin-bottom:.7em} #answers .lt-paper p:first-of-type::first-letter{font-size:1.5em} .ml-sec .mylog{margin-top:0} /* 相談のお手紙は「父（80代）」のように括弧が続くので、頭の大きな字を使わない */ .lt-paper.ask p:first-of-type::first-letter,#answers .lt-paper.ask p:first-of-type::first-letter{font-family:inherit;font-size:inherit;float:none;line-height:inherit;margin:0;color:inherit} /* 3階の便り：札の色（金の縁の内側に、それぞれの色） */ .f3-news .f3-tag{font:inherit;font-size:.72rem;padding:1px 10px;line-height:1.7;cursor:pointer;border:1.5px solid #C9A15A!important;color:#fff!important;background:var(--tg,#7a6a4a)!important;box-shadow:inset 0 0 0 1px rgba(255,240,200,.25)} .f3-news .f3-tag[data-tag="入院"]{--tg:#B85C50} .f3-news .f3-tag[data-tag="退院"]{--tg:#2E8C78} .f3-news .f3-tag[data-tag="制度"]{--tg:#7A55B8} .f3-news .f3-tag[data-tag="暮らし"]{--tg:#3F7DB8;cursor:default} .f3-news .f3-tag:hover:not([data-tag="暮らし"]){filter:brightness(1.15)} /* 押すと、自分の記録が浮かぶ */ .sy-pop{margin-top:12px;padding:14px 16px;border-radius:14px;border:1px solid #C9A15A;background:color-mix(in srgb,var(--tg2,#E2C27A) 12%,var(--bg2));opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s} .sy-pop[data-tag="入院"]{--tg2:#B85C50}.sy-pop[data-tag="退院"]{--tg2:#2E8C78}.sy-pop[data-tag="制度"]{--tg2:#7A55B8} .sy-pop.rise{opacity:1;transform:none} .sy-k{display:block;font-size:.72rem;letter-spacing:.08em;color:#E2C27A;margin-bottom:6px} .sy-big small{display:block;font-size:.75rem;color:var(--sub)} .sy-big b{display:block;font-size:1.6rem;letter-spacing:.06em;color:#F6E7C0;text-shadow:0 0 14px rgba(241,200,110,.55)} .sy-pop.rise .sy-big b{animation:syGlow 1.6s ease-out} @keyframes syGlow{0%{opacity:0;filter:blur(6px);transform:translateY(6px)}60%{text-shadow:0 0 26px rgba(255,220,140,.95)}100%{opacity:1;filter:none;transform:none}} .sy-sub{margin:6px 0 8px;font-size:.82rem;color:var(--sub);line-height:1.7} .sy-edit{font:inherit;font-size:.78rem;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer} .sy-pop label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;margin-bottom:8px} .sy-pop input[type=date],.sy-pop input[type=text]{font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%} .sy-pop label.sy-chk{flex-direction:row;align-items:center;gap:6px} .sy-q{display:block;font-size:.8rem;margin:6px 0} .sy-pop .ak-chips{margin-bottom:8px} .sy-note{font-size:.72rem;color:var(--sub);line-height:1.7;margin:8px 0} .sy-btns{display:flex;gap:8px} @media (prefers-reduced-motion:reduce){.sy-pop{transition:none}.sy-pop.rise .sy-big b{animation:none}} .sy-free{font-style:normal;font-size:.68rem;color:var(--sub);margin-left:8px;padding:0 7px;border:1px solid var(--line);border-radius:999px;vertical-align:1px} .sy-cons{font-size:.85rem;line-height:1.85;margin:0 0 8px} .sy-cl{margin:0 0 6px;padding-left:1.2em;font-size:.8rem;line-height:1.8} .sy-note a{color:#E2C27A} .sy-del{color:var(--sub)} .f3-news .sy-pop .sy-cl li{border:0!important;background:none!important;padding:0!important;margin:0 0 2px!important;box-shadow:none!important;display:list-item;list-style:disc;animation:none!important} .sy-pop label .sy-free{align-self:flex-start;margin-left:0} .sy-pop{grid-column:1/-1;min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden} .sy-pop .sy-btns{flex-wrap:wrap} .f3-news .sy-pop .sy-cl{padding-left:1.3em!important;margin-left:0!important} .sy-ask{margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,#E0645A 60%,transparent);background:color-mix(in srgb,#E0645A 10%,transparent)} .sy-ask p{margin:0 0 8px;font-size:.82rem} .sy-yes{border-color:#E0645A!important;color:#F4A79F!important} /* 1階 物語の本棚：ふだんは3人の絵だけ。押すと年表が広がり、その人の線を光が走る */ .tl-fold{display:grid;gap:12px;max-width:560px;margin:14px auto 6px} .tf-ch{position:relative;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:10px 16px 10px 10px;border-radius:18px;border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 10%,var(--card));color:var(--ink);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:transform .25s,box-shadow .25s} .tf-ch:hover{transform:translateY(-2px);box-shadow:0 0 22px color-mix(in srgb,var(--c) 45%,transparent)} .tf-ch img{width:96px;height:96px;object-fit:cover;object-position:50% 18%;border-radius:12px;box-shadow:0 0 0 2px var(--c)} .tf-ch b{display:block;font-family:var(--display);font-size:1.3rem;font-weight:500;color:var(--head)} .tf-ch small{display:block;font-size:.76rem;color:var(--sub)} .tf-ch em{display:inline-block;margin-top:6px;font-style:normal;font-size:.8rem;color:var(--c);border-bottom:1px solid currentColor} .tf-ln{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--c),transparent);transform:translateX(-100%);opacity:.9} .tf-ch:hover .tf-ln,.tf-ch[aria-pressed="true"] .tf-ln{animation:tfLn 1.6s ease-in-out infinite} @keyframes tfLn{to{transform:translateX(100%)}} .tf-ch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--c),0 0 26px color-mix(in srgb,var(--c) 55%,transparent)} .tf-all{justify-self:center;font:inherit;font-size:.84rem;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer} .tl-fold.opened{grid-template-columns:repeat(3,1fr);max-width:none} .tl-fold.opened .tf-ch{grid-template-columns:52px 1fr;padding:6px 10px 6px 6px;gap:10px} .tl-fold.opened .tf-ch img{width:52px;height:52px} .tl-fold.opened .tf-ch b{font-size:1rem}.tl-fold.opened .tf-ch small{display:none} .tl-fold.opened .tf-all{grid-column:1/-1} @media (max-width:560px){.tl-fold.opened .tf-ch{grid-template-columns:1fr;justify-items:center;text-align:center}.tl-fold.opened .tf-ch em{font-size:.68rem}} .tl{transition:max-height .7s ease,opacity .5s ease;max-height:900px} .tl.tl-shut{max-height:0;opacity:0;padding:0;margin:0;overflow:hidden} .tf-shut{display:block;margin:6px auto 0;font:inherit;font-size:.8rem;padding:6px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--sub);cursor:pointer} .tl .beam{fill:none;stroke-width:6;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);color:#FFE7A6} .tl-head{fill:#FFE7A6;filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #FFD27A)} .tl.beaming .tl-ln path:not(.beam):not(.dash){opacity:.25} .tl-c{transition:filter .4s} .tl.beaming .tl-c:not(.lit){filter:saturate(.5) brightness(.7)} .tl-c.lit .vd-cv{box-shadow:0 0 0 2px #F1D48A,0 0 0 4px rgba(241,212,138,.35),0 0 26px rgba(241,200,110,.75),0 10px 20px -12px rgba(0,0,0,.6)!important;animation:tlLit .9s ease-out} @keyframes tlLit{0%{box-shadow:0 0 0 2px #fff,0 0 0 10px rgba(255,236,170,.6),0 0 50px rgba(255,220,140,1)}} .tf-shut[hidden]{display:none} .tl.beaming .tl-c:not(.lit){filter:none;opacity:.45} .tl-c{transition:opacity .4s} /* 光った絵の縁は、その人の線の色（凛＝金、結＝青、友花＝赤） */ .tl-c.lit .vd-cv{box-shadow:0 0 0 2px var(--lc,#F1D48A),0 0 0 4px color-mix(in srgb,var(--lc,#F1D48A) 35%,transparent),0 0 26px color-mix(in srgb,var(--lc,#F1D48A) 80%,transparent),0 10px 20px -12px rgba(0,0,0,.6)!important;animation:tlLit2 .9s ease-out} @keyframes tlLit2{0%{box-shadow:0 0 0 2px #fff,0 0 0 10px color-mix(in srgb,var(--lc,#F1D48A) 60%,transparent),0 0 50px var(--lc,#F1D48A)}} /* 年表が開いているあいだの、左右に動かすスライダー（いつも見えている） */ .tl-slide{position:sticky;bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 8px);z-index:30;display:flex;align-items:center;gap:10px;max-width:680px;margin:8px auto 0;padding:8px 16px;border-radius:999px;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 8px 20px -10px rgba(0,0,0,.5)} .tl-slide[hidden]{display:none} .tl-slide span{font-size:.7rem;color:var(--sub);white-space:nowrap} .tl-slide input{flex:1;accent-color:#E2B85A;height:28px;cursor:grab} @media (max-width:760px){.tl-slide{bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 112px);margin-inline:8px}} .tl::-webkit-scrollbar{height:8px}.tl::-webkit-scrollbar-thumb{background:rgba(226,184,90,.55);border-radius:8px}.tl::-webkit-scrollbar-track{background:rgba(127,127,127,.15);border-radius:8px} /* 三人のカード＝物語の本棚の入口（押すと年表が開く） */ .tl-fold2{display:grid;gap:14px} .tl-fold2 .tf-all{margin-top:6px} .anchor-alias{display:block;height:0} .tl-fold2 .person[aria-pressed="true"]{transform:translateY(-4px);filter:drop-shadow(0 0 14px color-mix(in srgb,var(--pc,#E2B85A) 70%,transparent))} .tl-fold2 .person[data-k="rin"]{--pc:#E2B85A}.tl-fold2 .person[data-k="yui"]{--pc:#6FB8E0}.tl-fold2 .person[data-k="yuka"]{--pc:#E0645A} /* スライダーをその人の色に／各話の印（押すとその話へ） */ .tl-slide{--sc:#E2B85A} .tl-slide input{accent-color:var(--sc)} .ts-box{flex:1;position:relative;display:flex;flex-direction:column;padding-top:30px} .ts-box input{width:100%;margin:0} .ts-mks{position:absolute;left:8px;right:8px;top:0;height:30px} .ts-mk{position:absolute;width:9px;height:9px;margin-left:-4.5px;padding:0;border-radius:50%;border:0;background:var(--mc);box-shadow:0 0 6px var(--mc);cursor:pointer;transition:transform .15s,opacity .2s} .ts-mk::before{content:"";position:absolute;inset:-3px -5px} .ts-mk:hover,.ts-mk:focus-visible{transform:scale(1.6)} .ts-mk.off{opacity:.25;box-shadow:none} .tl-c.ts-hit{animation:tsHit 1.2s ease} @keyframes tsHit{0%,100%{filter:none}30%{filter:drop-shadow(0 0 16px var(--lc,#E2B85A)) brightness(1.2)}} @media (max-width:760px){.ts-mk{width:7px;height:7px;margin-left:-3.5px}.ts-mk::before{inset:-2px 0}} /* 解説ノートのカード：ミントの囲いが光る＋大きな「読む」ボタン */ .nt-card{border:1.5px solid #7FD9C4;box-shadow:0 0 0 1px rgba(127,217,196,.25),0 0 22px -4px rgba(95,179,161,.6);animation:ntGlow 3.2s ease-in-out infinite;transition:transform .2s} .nt-card:hover{transform:translateY(-2px)} @keyframes ntGlow{0%,100%{box-shadow:0 0 0 1px rgba(127,217,196,.25),0 0 18px -6px rgba(95,179,161,.5)}50%{box-shadow:0 0 0 1px rgba(127,217,196,.5),0 0 30px -2px rgba(95,179,161,.8)}} .nt-tx i{justify-self:start;margin-top:14px;padding:12px 34px;border-radius:999px;font-size:1.35rem;letter-spacing:.12em;color:#0E2A25;background:linear-gradient(180deg,#A6EBDA,#5FB3A1);box-shadow:0 0 18px rgba(127,217,196,.65),inset 0 1px 0 rgba(255,255,255,.5);animation:ntBtn 2.4s ease-in-out infinite} .nt-card:hover .nt-tx i{filter:brightness(1.08)} @keyframes ntBtn{0%,100%{box-shadow:0 0 12px rgba(127,217,196,.45),inset 0 1px 0 rgba(255,255,255,.5)}50%{box-shadow:0 0 28px rgba(127,217,196,.95),inset 0 1px 0 rgba(255,255,255,.5)}} @media (max-width:640px){.nt-tx i{justify-self:stretch;text-align:center}} @media (prefers-reduced-motion:reduce){.nt-card,.nt-tx i{animation:none}} /* 1階のはじめの2つのボタンを目立たせる */ .hero .cta{gap:14px} .hero .cta .btn{font-size:1.12rem;padding:16px 34px;letter-spacing:.08em} .hero .cta .btn:not(.ghost){color:#0E2A25;background:linear-gradient(180deg,#B4F0E1,#5FB3A1);border:1px solid #A6EBDA;box-shadow:0 0 22px rgba(127,217,196,.6),inset 0 1px 0 rgba(255,255,255,.55);animation:ntBtn 2.4s ease-in-out infinite} .hero .cta .btn.ghost{color:#F4E3B0;border:1.5px solid #E2B85A;background:rgba(226,184,90,.08);box-shadow:0 0 16px rgba(226,184,90,.35);animation:ctaGold 2.4s ease-in-out infinite 1.2s} .hero .cta .btn:hover{transform:translateY(-2px);filter:brightness(1.08)} @keyframes ctaGold{0%,100%{box-shadow:0 0 10px rgba(226,184,90,.3)}50%{box-shadow:0 0 24px rgba(226,184,90,.7)}} @media (prefers-reduced-motion:reduce){.hero .cta .btn{animation:none!important}} /* 灯籠はトップ画面（.hero）の中だけで昇る */ .hero .lt-lay{position:absolute;inset:0;z-index:2} .hero .lt-lay i{animation-name:ltUpHero} @keyframes ltUpHero{0%{opacity:0;transform:translate(0,0) scale(1)}8%{opacity:.9}85%{opacity:.75}100%{opacity:0;transform:translate(var(--sw),var(--rise,-100vh)) scale(.5)}} /* 明るい画面では「物語を読む」の金を濃くして読みやすく */ @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .hero .cta .btn.ghost{color:#7A5410;border-color:#C9962E;background:rgba(226,184,90,.14)}} :root[data-theme="light"] .hero .cta .btn.ghost{color:#7A5410;border-color:#C9962E;background:rgba(226,184,90,.14)} /* 「ささえの輪をつくってみる」を大きく、光らせる */ .btn.wa-go{position:relative;display:inline-flex;align-items:center;gap:14px;font-size:1.3rem;letter-spacing:.08em;padding:20px 40px 20px 26px;color:#0E2A25;background:linear-gradient(180deg,#B4F0E1,#5FB3A1);border:1px solid #A6EBDA;box-shadow:0 0 26px rgba(127,217,196,.6),inset 0 1px 0 rgba(255,255,255,.55);animation:ntBtn 2.4s ease-in-out infinite;overflow:hidden} .btn.wa-go::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:waShine 3.6s ease-in-out infinite 1s} @keyframes waShine{0%,60%{left:-60%}100%{left:130%}} .wg-ic{width:34px;height:34px;flex:none;border-radius:50%;border:2.5px solid #0E2A25;position:relative} .wg-ic::before{content:"";position:absolute;inset:8px;border-radius:50%;background:#F2B880;box-shadow:0 0 0 2px #0E2A25} .wg-ar{font-size:1.4rem;transition:transform .2s} .btn.wa-go:hover{transform:translateY(-2px);filter:brightness(1.06)} .btn.wa-go:hover .wg-ar{transform:translateX(4px)} @media (max-width:640px){.btn.wa-go{display:flex;justify-content:center;font-size:1.12rem;padding:18px 20px}} @media (prefers-reduced-motion:reduce){.btn.wa-go,.btn.wa-go::after{animation:none}} /* 見本の輪は押せる */ .ring-go{cursor:pointer;transition:transform .3s,filter .3s} .ring-go:hover,.ring-go:focus-visible{transform:scale(1.02);filter:drop-shadow(0 0 18px rgba(127,217,196,.45));outline:none} .ring-hint{margin:2px 0 8px;text-align:center;font-size:.85rem;color:var(--mint,#5FB3A1);animation:waNowH 2.6s ease-in-out infinite} @keyframes waNowH{0%,100%{opacity:.6}50%{opacity:1}} /* ボタンのマークは、ささえの輪のブランドの形で光らせる */ .btn.wa-go .wg-ic{width:44px;height:44px;border:0;border-radius:50%;background:#0E2A25;padding:3px;box-sizing:border-box;overflow:visible;animation:wgGlow 2.4s ease-in-out infinite} .btn.wa-go .wg-ic::before{content:none} .wg-ic .wg-c{transform-box:fill-box;transform-origin:center;animation:wgCore 2.4s ease-in-out infinite} @keyframes wgGlow{0%,100%{filter:drop-shadow(0 0 3px rgba(255,236,190,.5))}50%{filter:drop-shadow(0 0 10px rgba(255,236,190,.95)) drop-shadow(0 0 18px rgba(242,184,128,.6))}} @keyframes wgCore{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}} .btn.wa-go:hover .wg-ic{animation-duration:1.2s} @media (prefers-reduced-motion:reduce){.wg-ic,.wg-ic .wg-c{animation:none!important}} /* 本文の「ささえの輪」もブランドのマークで、ゆっくり光る */ .wa-brand .wb-mk{width:1.25em;height:1.25em;vertical-align:-.22em;margin-right:.25em;overflow:visible;animation:wbGlow 2.6s ease-in-out infinite} .wa-brand .wb-mk .wg-c{transform-box:fill-box;transform-origin:center;animation:wgCore 2.6s ease-in-out infinite} @keyframes wbGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,236,190,.4))}50%{filter:drop-shadow(0 0 7px rgba(255,236,190,.95)) drop-shadow(0 0 12px rgba(242,184,128,.55))}} @media (prefers-reduced-motion:reduce){.wa-brand .wb-mk,.wa-brand .wb-mk .wg-c{animation:none!important}} /* ブランドのマーク（本文・ボタン） */ .wb-mk{width:1.25em;height:1.25em;vertical-align:-.22em;margin-right:.3em;overflow:visible;flex:none;-webkit-text-fill-color:initial;animation:wbGlow 2.6s ease-in-out infinite} .wb-mk .wg-c{transform-box:fill-box;transform-origin:center;animation:wgCore 2.6s ease-in-out infinite} @keyframes wbGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(255,236,190,.4))}50%{filter:drop-shadow(0 0 7px rgba(255,236,190,.95)) drop-shadow(0 0 12px rgba(242,184,128,.55))}} .btn.wb-btn{display:inline-flex;align-items:center;gap:10px} .btn.wb-btn .wb-mk{width:1.7em;height:1.7em;margin:0;padding:2px;border-radius:50%;background:#0E2A25;box-sizing:border-box} @media (prefers-reduced-motion:reduce){.wb-mk,.wb-mk .wg-c{animation:none!important}} /* 1階：2階の夕灯り文庫への入口 */ .bd-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(14px,2vw,22px);border-radius:24px;background:linear-gradient(135deg,rgba(156,123,201,.16),rgba(242,179,106,.10) 60%,transparent),var(--card);border:1.5px solid rgba(232,139,139,.45);box-shadow:0 0 30px -8px rgba(232,139,139,.45)} .bd-pic{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3.4} .bd-pic>img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform 1.2s ease} .bd-pic:hover>img{transform:scale(1.04)} .bd-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,12,30,.55))} .bd-covers{position:absolute;left:14px;bottom:14px;z-index:1;display:flex} .bd-covers img{width:clamp(56px,8vw,84px);aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:2px solid #FFF3D6;box-shadow:0 6px 14px rgba(0,0,0,.45)} .bd-covers img+img{margin-left:-18px} .bd-covers img:nth-child(1){transform:rotate(-6deg)}.bd-covers img:nth-child(3){transform:rotate(6deg)} .bd-floor{position:absolute;right:14px;top:14px;z-index:1;padding:4px 12px;border-radius:999px;background:rgba(20,12,30,.65);color:#F7D9A8;font-weight:700;border:1px solid #E88B8B} .bd-tx h2{margin:6px 0 10px;font-size:clamp(1.35rem,3vw,1.8rem);line-height:1.5} .bd-tx>p{margin:0 0 10px;line-height:1.85} .bd-list{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px} .bd-list li{font-size:.92rem;color:var(--sub)} .bd-list b{display:inline-block;min-width:5.2em;margin-right:6px;color:var(--head)} .bd-free{display:inline-flex;align-items:center;gap:8px;margin:2px 0 16px!important;padding:8px 14px;border-radius:12px;background:rgba(95,179,161,.14);border:1px solid rgba(127,217,196,.55);color:var(--head);font-weight:700;font-size:.95rem} .bd-free span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#5FB3A1;color:#0E2A25;font-size:.8rem} .btn.bd-go{display:flex;width:max-content;align-items:center;gap:12px;font-size:1.15rem;padding:16px 34px;color:#2B1630;background:linear-gradient(180deg,#F7C9A0,#E88B8B 55%,#B98AD6);border:1px solid #F7D9A8;box-shadow:0 0 22px rgba(232,139,139,.55);animation:bdGlow 2.6s ease-in-out infinite} .bd-up{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(43,22,48,.85);color:#F7D9A8;font-weight:700;animation:bdUp 1.6s ease-in-out infinite} @keyframes bdGlow{0%,100%{box-shadow:0 0 12px rgba(232,139,139,.4)}50%{box-shadow:0 0 30px rgba(232,139,139,.85),0 0 46px rgba(185,138,214,.4)}} @keyframes bdUp{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}} .btn.bd-go:hover{transform:translateY(-2px);filter:brightness(1.06)} .bd-ep1{display:inline-block;margin-top:12px;font-size:.9rem;color:var(--sub)} @media (max-width:760px){.bd-card{grid-template-columns:1fr}.btn.bd-go{width:100%;justify-content:center}} @media (prefers-reduced-motion:reduce){.btn.bd-go,.bd-up{animation:none}} /* 見えない支え：ミツアカリのロゴ＋「ミツアカリの考え」＋サイン */ .uc-brand{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap} .uc-brand svg.uc-logo{width:56px;height:56px;overflow:visible;filter:drop-shadow(0 0 6px rgba(242,184,128,.5));animation:lgGlow 7s ease-in-out infinite} .uc-tx{display:flex;flex-direction:column;line-height:1.3} .uc-name{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.4rem);letter-spacing:.12em;font-weight:500;color:var(--head)} .uc-tx small{font-size:.8rem;letter-spacing:.2em;color:var(--mint,#5FB3A1);margin-top:2px} .uc-sign{height:34px;width:auto;margin-left:4px;opacity:.92;align-self:flex-end} @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .uc-sign{content:url(img/sign_mitsuakari.webp)}} :root[data-theme="light"] .uc-sign{content:url(img/sign_mitsuakari.webp)} #unseen .lead .uc-sign{display:block;margin:6px 0 0 auto;height:42px} /* 文庫の入口：読み物の目次 */ .bd-toc{margin:4px 0 12px} .bd-toc-h{display:block;font-size:.8rem;letter-spacing:.12em;color:var(--sub);margin-bottom:6px} .bd-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px} .bd-toc a,.bd-toc button{display:flex;flex-direction:column;width:100%;text-align:left;font:inherit;padding:7px 12px;border-radius:10px;border:0;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 7%,transparent);color:var(--head);text-decoration:none;font-size:.95rem;line-height:1.5;cursor:pointer;transition:background .2s} .bd-toc a:hover,.bd-toc button:hover{background:color-mix(in srgb,var(--c) 16%,transparent)} .bd-toc small{font-size:.72rem;color:var(--c);letter-spacing:.06em} .bd-cm{font-size:.92rem;color:var(--sub);margin:0 0 12px!important} .bd-cm b{color:var(--head);margin-right:8px} /* ミツアカリの考え：右に集合写真（写真のように）とサイン */ .uc-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:28px} .uc-top .sec-head{margin-bottom:0} .uc-photo{position:relative;margin:0;justify-self:center;width:min(100%,460px);padding-bottom:40px} .uc-frame{display:block;padding:12px 12px 44px;background:#FBF7EE;border-radius:4px;box-shadow:0 18px 40px -14px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25);transform:rotate(2.2deg);transition:transform .5s} .uc-photo:hover .uc-frame{transform:rotate(.6deg) translateY(-3px)} .uc-frame img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.95) contrast(1.02)} .uc-frame::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:26px;margin-left:-48px;background:rgba(232,220,190,.75);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.15)} .uc-photo figcaption{position:absolute;left:24px;bottom:58px;transform:rotate(2.2deg);font-family:"Kiwi Maru",serif;font-size:.9rem;color:#5A4A35} .uc-photo .uc-sign{position:absolute;right:14px;bottom:2px;height:52px;width:auto;opacity:.95;transform:rotate(-4deg)} @media (max-width:860px){.uc-top{grid-template-columns:1fr}.uc-photo{width:min(100%,380px)}} /* サインは写真のふち（白い下の余白）の右に黒で */ .uc-frame{position:relative} .uc-psign{position:absolute;right:16px;bottom:5px;height:36px;width:auto;opacity:.9;transform:rotate(-3deg)} .uc-photo{padding-bottom:12px} .uc-frame img.uc-psign{width:auto;height:34px;aspect-ratio:auto;object-fit:contain;filter:none} .uc-photo figcaption{bottom:26px} /* 一番上：ささえの輪の横の「緊急時は」→ 赤いポップアップ */ .top nav .nav-sos{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;color:#fff;background:#C8362C;border:0;border-radius:999px;padding:3px 12px 3px 9px;cursor:pointer;box-shadow:0 0 0 0 rgba(200,54,44,.5);animation:sosPulse 2.6s ease-out infinite;white-space:nowrap} .top nav .nav-sos i{width:8px;height:8px;border-radius:50%;background:#fff} .top nav .nav-sos:hover{background:#A82A22} @keyframes sosPulse{0%{box-shadow:0 0 0 0 rgba(200,54,44,.55)}70%{box-shadow:0 0 0 9px rgba(200,54,44,0)}100%{box-shadow:0 0 0 0 rgba(200,54,44,0)}} @media (prefers-reduced-motion:reduce){.top nav .nav-sos{animation:none}} @media (max-width:760px){.top nav{display:flex!important}.top nav a{display:none!important}.top nav .nav-sos{font-size:.75rem;padding:3px 9px 3px 7px}} .sos-box{--sr:#C8362C;background:#FFF6F5;color:var(--sr);border:2px solid var(--sr);max-width:520px} .sos-box .mpop-x{color:var(--sr)} .sos-k{font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--sr)} .sos-box h2{color:var(--sr);font-size:1.35rem;margin:6px 0 12px} .sos-box p{color:var(--sr);margin:0 0 8px;line-height:1.8} .sos-box b{font-weight:800} .sos-nums{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .sos-nums a{flex:1 1 auto;text-align:center;text-decoration:none;font-weight:700;color:var(--sr);border:2px solid var(--sr);border-radius:999px;padding:10px 16px;background:#fff} .sos-nums a.sos-main{background:var(--sr);color:#fff} :root[data-theme="dark"] .sos-box{background:#2A1514;--sr:#FF7A70} :root[data-theme="dark"] .sos-nums a{background:transparent} :root[data-theme="dark"] .sos-nums a.sos-main{background:#D9443A;color:#fff;border-color:#D9443A} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sos-box{background:#2A1514;--sr:#FF7A70}:root:not([data-theme="light"]) .sos-nums a{background:transparent}:root:not([data-theme="light"]) .sos-nums a.sos-main{background:#D9443A;color:#fff;border-color:#D9443A}} @media (max-width:760px){.top nav{overflow:visible;flex:none;margin-left:auto;padding:0 2px}.top nav .nav-sos{font-size:.72rem;padding:4px 8px 4px 6px;gap:4px}.top nav .nav-sos i{width:6px;height:6px}} /* 10-30 階の移動を上の帯に1本化（玄関・1F・2F・3F）。浮いている階ボタンは使わない */ body:not([data-floor="door"]) .lift{display:none!important} .stairs.flr{display:flex;gap:4px;align-items:center;margin-left:14px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid color-mix(in srgb,var(--line) 80%,transparent)} .stairs.flr a{position:relative;display:grid;place-items:center;min-width:44px;height:34px;padding:0 10px;border-radius:999px;font-family:var(--display);font-size:.86rem;letter-spacing:.04em;color:var(--sub);text-decoration:none} .stairs.flr a.fr-door{font-size:.8rem} .stairs.flr a[aria-current="page"]{background:var(--accent);color:var(--accent-ink,#fff)} .stairs.flr a:not([aria-current]):hover,.stairs.flr a:not([aria-current]):focus-visible{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--head)} .stairs.flr a.lock::after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 5px var(--gold)} body[data-floor="3"] .stairs.flr a:not([aria-current]){color:#D9C38E} @media (max-width:760px){ .stairs.flr{margin-left:6px;gap:1px;padding:2px} .stairs.flr a{min-width:34px;height:30px;padding:0 6px;font-size:.78rem} .stairs.flr a.fr-door{font-size:.7rem} .stairs.flr a.lock::after{right:3px;top:3px;width:5px;height:5px} } /* 10-30 「緊急時は」を落ち着いた形に：白地・赤い細枠・小さな赤い点（脈打つ光はなし） */ .top nav .nav-sos{color:#B23A30;background:color-mix(in srgb,var(--card) 92%,transparent);border:1.5px solid color-mix(in srgb,#C8362C 70%,transparent);font-weight:500;animation:none;box-shadow:none;padding:3px 12px 3px 10px} .top nav .nav-sos i{background:#D2463A;width:7px;height:7px} .top nav .nav-sos:hover,.top nav .nav-sos:focus-visible{background:#FBEDEA;color:#9E2F26} body[data-floor="2"] .top nav .nav-sos,body[data-floor="3"] .top nav .nav-sos{background:transparent;color:#F0A79E;border-color:color-mix(in srgb,#E0645A 60%,transparent)} @media (max-width:760px){ .hd-clock{display:none} .top .wrap{gap:6px} .top .lg-where{display:none} .top nav .nav-sos{padding:2px 8px 2px 6px;font-size:.72rem;gap:4px} } /* 10-30 階のボタン：それぞれの間の色としるし（玄関＝扉の金、1階＝朝のミント、2階＝夕灯りの紫、3階＝星の金と紺） */ .stairs.flr{gap:6px;padding:0;background:none;border:0} .stairs.flr a{--fc:#C9A65A;--fb:#FBF4E6;display:flex;flex-direction:row;align-items:center;gap:6px;min-width:0;height:38px;padding:0 12px 0 4px;border:1.5px solid color-mix(in srgb,var(--fc) 55%,transparent);background:color-mix(in srgb,var(--fb) 70%,transparent);color:var(--head)} .stairs.flr a.fr-1{--fc:#5FB3A1;--fb:#FFF8EE} .stairs.flr a.fr-2{--fc:#9B7BC8;--fb:#2B2340;color:#E7DDF7} .stairs.flr a.fr-3{--fc:#E2C27A;--fb:#131A29;color:#F5E2A8} .stairs.flr .fr-ic{display:block;width:28px;height:28px;flex:none} .stairs.flr .fr-ic svg{width:100%;height:100%;display:block} .stairs.flr a[aria-current="page"]{background:var(--fb);border-color:var(--fc);box-shadow:0 0 0 2px color-mix(in srgb,var(--fc) 35%,transparent),0 0 14px -2px color-mix(in srgb,var(--fc) 70%,transparent);color:inherit} .stairs.flr a.fr-1[aria-current="page"],.stairs.flr a.fr-door[aria-current="page"]{color:var(--head)} .stairs.flr a:not([aria-current]):hover,.stairs.flr a:not([aria-current]):focus-visible{background:var(--fb);border-color:var(--fc);color:inherit} .stairs.flr a.fr-1:not([aria-current]):hover,.stairs.flr a.fr-door:not([aria-current]):hover{color:var(--head)} body[data-floor="3"] .stairs.flr a:not([aria-current]){color:inherit} body[data-floor="3"] .stairs.flr a.fr-door,body[data-floor="3"] .stairs.flr a.fr-1,body[data-floor="2"] .stairs.flr a.fr-door,body[data-floor="2"] .stairs.flr a.fr-1{color:#3A3A3A} .stairs.flr a.lock::after{right:2px;top:2px} .stairs.flr span{font-size:.84rem;letter-spacing:.04em} .top .stairs.flr+nav{margin-left:12px} @media (max-width:760px){ .stairs.flr{gap:3px;margin-left:auto} .top .room-mark{display:none} .stairs.flr a{flex-direction:column;justify-content:center;gap:0;height:46px;width:38px;padding:2px 0 1px;border-radius:12px} .stairs.flr .fr-ic{width:22px;height:22px} .stairs.flr span{font-size:.6rem;line-height:1.1;letter-spacing:0} .top .stairs.flr+nav{margin-left:4px} } /* 10-30 1階の広間：場面の入れ替わり（重ねた絵を、ふわっと切り替える） */ .hero .hall-show img{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;animation:none;transform:none} .hero .hall-show img.on{opacity:1} @media (max-width:760px){.hero .hall-show{position:relative}.hero .hall-show img{object-position:50% 40%}} /* 10-30 「窓口を検索」の小窓：いちばん上に119番、その下に窓口の一覧 */ .sos-box .sos-life{display:grid;gap:6px;background:#FDE7E4;border:1.5px solid #E08A80;border-radius:14px;padding:12px 14px;margin:6px 0 10px} .sos-box .sos-life b{font-size:1.15rem;color:#B23A30} .sos-box .sos-life span{font-size:.86rem;color:#7A2A24} .sos-box .sos-sub{font-size:.86rem;color:#7A2A24;margin:0 0 10px} .sos-box .sos-sub a{display:inline-block;margin-left:6px;color:#B23A30} .sos-box h2{font-size:1.1rem;color:#3A2F2C;margin:14px 0 6px} .sos-list{list-style:none;padding:0;margin:0;display:grid;gap:8px} .sos-list li{display:grid;gap:2px;background:#fff;border:1px solid #F0D4CF;border-radius:12px;padding:9px 12px;color:#3A2F2C} .sos-list li b{font-size:.92rem} .sos-list li span{font-size:.82rem;line-height:1.6;color:#5A4A46} .sos-list li a{font-size:.84rem;color:#2F6FA8;word-break:break-all} .sos-box .sos-note{font-size:.74rem;color:#7A6A66;margin:12px 0 0;line-height:1.6} /* 10-30 2階 公的データの棚（三つの灯＋共通） */ .pd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px} @media (max-width:980px){.pd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.pd-grid{grid-template-columns:1fr}} .pd-col{min-width:0;border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:16px;padding:14px;background:color-mix(in srgb,var(--c) 8%,transparent)} .pd-col h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:1rem;margin:0 0 10px} .pd-col h3 i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)} .pd-col h3 small{font-size:.72rem;opacity:.75;font-weight:400} .pd-item{display:grid;gap:4px;border-top:1px dashed color-mix(in srgb,var(--c) 50%,transparent);padding-top:10px} .pd-item b{font-size:.92rem} .pd-item p{margin:0;font-size:.84rem;line-height:1.7} .pd-src{font-size:.74rem;opacity:.75} .pd-item a{font-size:.84rem;color:var(--c);font-weight:600;text-decoration:none} .pd-wait{font-size:.82rem;opacity:.7;margin:0} .pd-note{font-size:.76rem;opacity:.8;line-height:1.7;margin-top:16px} .sos-box .sos-life .sos-main{display:block;text-align:center;background:#C8362C;color:#fff;font-weight:700;text-decoration:none;border-radius:999px;padding:10px 14px;margin-top:4px} /* 2階・3階などの「窓口を検索」も、1階と同じ形にして携帯でも出す */ .top nav a[href="index.html#safe"]{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:#B23A30;background:color-mix(in srgb,var(--card) 92%,transparent);border:1.5px solid color-mix(in srgb,#C8362C 70%,transparent);border-radius:999px;padding:3px 12px 3px 10px;font-weight:500;text-decoration:none} .top nav a[href="index.html#safe"]::before{content:"";width:7px;height:7px;border-radius:50%;background:#D2463A} body[data-floor="2"] .top nav a[href="index.html#safe"],body[data-floor="3"] .top nav a[href="index.html#safe"]{background:transparent;color:#F0A79E;border-color:color-mix(in srgb,#E0645A 60%,transparent)} @media (max-width:760px){.top nav{display:flex!important;flex:none}.top nav a[href="index.html#safe"]{padding:2px 8px 2px 6px;font-size:.72rem;gap:4px}} @media (max-width:760px){ .top nav{min-width:max-content;overflow:visible} .stairs.flr a{width:35px} .top .wrap{gap:4px} } @media (max-width:760px){.top nav a[href="index.html#safe"]{display:inline-flex!important}} /* 10-30 1階の文庫の案内：目次をやめて、中にあるものを3つだけ */ .bd-in{list-style:none;padding:0;margin:14px 0 16px;display:grid;gap:8px} .bd-in li{display:grid;gap:2px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--card) 70%,transparent);border-left:3px solid #E3A640} .bd-in li b{font-size:.98rem} .bd-in li span{font-size:.84rem;opacity:.8} .bd-in li{--bc:#E3A640;border-left:4px solid var(--bc);background:color-mix(in srgb,var(--bc) 12%,var(--card))} .bd-in li:nth-child(1){--bc:#5FB3A1} .bd-in li:nth-child(2){--bc:#E8925E} .bd-in li:nth-child(3){--bc:#6F9BE0} .bd-in li b{color:color-mix(in srgb,var(--bc) 75%,var(--head))} /* 10-30 版157：階ボタンの文字を読みやすく（どの階でも同じ濃い色） */ .stairs.flr a.fr-door,.stairs.flr a.fr-door[aria-current="page"],body[data-floor] .stairs.flr a.fr-door{--fb:#FBF4E6;background:#FBF4E6;color:#5A4520!important} .stairs.flr a.fr-1,.stairs.flr a.fr-1[aria-current="page"],body[data-floor] .stairs.flr a.fr-1{background:#FFF8EE;color:#1F5E52!important} .stairs.flr a.fr-2,body[data-floor] .stairs.flr a.fr-2{background:#2B2340;color:#F1E9FF!important} .stairs.flr a.fr-3,body[data-floor] .stairs.flr a.fr-3{background:#131A29;color:#FFE9B0!important} .stairs.flr span{font-weight:700} .stairs.flr a[aria-current="page"]{border-width:2px;box-shadow:0 0 0 2px color-mix(in srgb,var(--fc) 45%,transparent),0 0 16px -2px color-mix(in srgb,var(--fc) 80%,transparent)} /* 10-30 版159：見終わったら次の話へ */ .vp-box{position:relative} .vp-next{position:absolute;left:50%;top:28%;transform:translateX(-50%);z-index:3;width:min(88%,340px);padding:16px 18px;border-radius:16px;background:rgba(15,20,32,.88);border:1px solid rgba(241,212,138,.55);color:#F5EBD3;text-align:center;display:flex;flex-direction:column;gap:4px;box-shadow:0 10px 30px rgba(0,0,0,.4)} .vp-next[hidden]{display:none} .vp-next small{font-size:.74rem;letter-spacing:.12em;color:#E2C27A} .vp-next b{font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.5} .vp-next .vp-nx-c{font-size:.8rem;opacity:.85} .vp-next div{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap} .vp-next button{font:inherit;font-size:.82rem;padding:7px 14px;border-radius:999px;cursor:pointer;border:1px solid #E2C27A} .vp-nx-go{background:#E2C27A;color:#1B2233} .vp-nx-no{background:transparent;color:#F5EBD3} /* 10-30 版161：「この塔の歩き方」と「三人の看護師」を同じ作りに（パソコン＝3つ並び／スマホ＝1枚ずつ回る＋下にボタン） */ @media (min-width:761px){ #about .mapbox{grid-template-columns:1fr;gap:22px} #about .mapbox>.rv:last-child{order:-1;max-width:760px} #about .cls-stage{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;aspect-ratio:auto;overflow:visible;background:none;border:0;box-shadow:none;animation:none;border-radius:0} #about .cls-slide{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#11161F;border:2px solid var(--cc);box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 22%,transparent),0 0 20px color-mix(in srgb,var(--cc) 45%,transparent);transition:transform .3s,box-shadow .3s} #about .cls-slide:hover{transform:translateY(-3px);box-shadow:0 0 0 3px color-mix(in srgb,var(--cc) 35%,transparent),0 0 28px color-mix(in srgb,var(--cc) 65%,transparent)} #about .cls-slide img{object-position:center 30%} #about .cls-slide figcaption{right:12px;font-size:.84rem;line-height:1.4} #about .cls-pick{display:none} .p-pick{display:none} } @media (max-width:760px){ #about .cls-pick{grid-template-columns:repeat(3,1fr);gap:6px} #about .cls-pick button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;text-align:center} #about .cls-pick button small{white-space:normal;font-size:.66rem;line-height:1.3} #about .cls-pick button b{font-size:.86rem} #tlFold .three{display:grid;grid-template-columns:1fr;grid-auto-flow:row;max-width:340px;margin-inline:auto;padding:0;overflow:visible;gap:0} #tlFold .three .person{grid-area:1/1;opacity:0;visibility:hidden;transform:scale(.98);transition:opacity 1.2s ease,transform 1.2s ease,visibility 0s 1.2s} #tlFold .three .person.p-on{opacity:1;visibility:visible;transform:none;transition:opacity 1.2s ease,transform 1.2s ease} .p-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:340px;margin:14px auto 0} .p-pick button{font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:14px;background:var(--card);color:var(--head);border:1.5px solid color-mix(in srgb,var(--cc) 55%,transparent)} .p-pick button i{width:10px;height:10px;border-radius:50%;background:var(--cc);box-shadow:0 0 8px var(--cc)} .p-pick button b{font-size:.86rem} .p-pick button small{font-size:.66rem;color:var(--muted,#8a8a8a)} .p-pick button[aria-pressed="true"]{border-color:var(--cc);box-shadow:0 0 0 1px var(--cc),0 0 16px color-mix(in srgb,var(--cc) 45%,transparent);background:color-mix(in srgb,var(--cc) 12%,var(--card))} } #about .mapbox>.rv:last-child{order:-1} /* 10-30 版162：教室のカードに額縁と角の花 */ .cls-slide .pfr{z-index:2} .cls-slide .pfr img{width:42%;height:auto;object-fit:contain;object-position:center} .cls-slide:hover .pfr img{opacity:1;transform:scale(1.04)} .cls-slide .cls-play{z-index:4}.cls-slide figcaption{z-index:4} @media (min-width:761px){ #about .cls-stage{padding:10px 6px} #about .cls-slide{overflow:visible} #about .cls-slide>img{border-radius:calc(var(--r) - 2px)} #about .cls-slide figcaption{left:22px;right:22px;bottom:22px} #about .cls-slide .cls-play{right:22px;top:22px} } @media (max-width:760px){.cls-slide .pfr img{width:36%}} /* 10-30 版163：教室のカードは、その教室の代表的な絵3枚がゆっくり入れ替わる */ .cls-pics{position:absolute;inset:0;overflow:hidden;border-radius:inherit} .cls-pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:0;transition:opacity 1.6s ease} .cls-pics img.on{opacity:1} @media (min-width:761px){#about .cls-pics{border-radius:calc(var(--r) - 2px)}} @media (max-width:760px){#about .cls-stage{aspect-ratio:4/5;width:100%;max-width:380px;margin-inline:auto}#about .cls-pick{max-width:380px;margin-inline:auto}} /* 10-30 版165：動画の下の説明を色分けし、解説ノートへの大きなボタン（キャラの顔つき） */ .vpop{--vc:#E2C27A} .vp-box{border-color:var(--vc)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--vc) 25%,transparent),0 0 30px color-mix(in srgb,var(--vc) 45%,transparent)} .vp-body .vp-lab{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.78rem;font-weight:700;background:color-mix(in srgb,var(--vc) 22%,transparent);color:color-mix(in srgb,var(--vc) 70%,var(--head));border:1px solid color-mix(in srgb,var(--vc) 55%,transparent)} .vp-body .vp-t{border-left:4px solid var(--vc);padding-left:10px} a.vp-note{display:flex!important;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;border-radius:16px;text-decoration:none!important;color:#1B2233;background:linear-gradient(120deg,color-mix(in srgb,var(--vc) 85%,#fff) 0%,#FFF6DD 55%,color-mix(in srgb,var(--vc) 70%,#fff) 100%);background-size:220% 100%;border:2px solid var(--vc);box-shadow:0 6px 20px color-mix(in srgb,var(--vc) 45%,transparent);position:relative;overflow:hidden;animation:vnShine 4.5s ease-in-out infinite,vnBob 3s ease-in-out infinite;transition:transform .2s} a.vp-note[hidden]{display:none!important} a.vp-note:hover{transform:translateY(-2px) scale(1.01)} .vn-faces{display:flex;flex:none} .vn-faces img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 14%;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);background:#fff} .vn-faces img+img{margin-left:-16px} .vn-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1} .vn-t small{font-size:.72rem;color:#5A4A2A;font-weight:600} .vn-t b{font-size:1.06rem;font-weight:800;letter-spacing:.02em} .vn-t em{font-style:normal;font-size:.72rem;color:#5A5A66} a.vp-note>i{font-style:normal;font-size:1.4rem;font-weight:800;flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1B2233;color:#fff;animation:vnNudge 1.6s ease-in-out infinite} @keyframes vnShine{0%,100%{background-position:0% 0}50%{background-position:100% 0}} @keyframes vnBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}} @keyframes vnNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}} @media (prefers-reduced-motion:reduce){a.vp-note,a.vp-note>i{animation:none}} .vp-nx-note{display:block;margin-top:10px;font-size:.82rem;color:#F1D48A;text-decoration:underline} .vn-faces img{width:48px!important;height:48px!important;max-width:none!important;object-position:center!important;aspect-ratio:1/1} @media (max-width:480px){.vn-faces img{width:40px!important;height:40px!important}.vn-faces img+img{margin-left:-14px}a.vp-note{gap:10px;padding:10px 12px}.vn-t b{font-size:1rem}} @media (max-width:480px){a.vp-note{flex-wrap:wrap;justify-content:space-between;row-gap:6px}a.vp-note .vn-t{order:3;flex:1 1 100%}} /* 10-30 版166：解説ノートのボタンを平たく、矢印をきれいに */ a.vp-note{padding:7px 10px 7px 8px;gap:10px;border-radius:999px;margin-top:12px} .vn-faces img{width:36px!important;height:36px!important} .vn-faces img+img{margin-left:-12px} .vn-t{gap:0} .vn-t small{font-size:.68rem;line-height:1.3} .vn-t b{font-size:.98rem;line-height:1.35} a.vp-note>i{width:30px;height:30px;font-size:0;background:#1B2233;color:#F5E2A8} a.vp-note>i svg{display:block} @media (max-width:480px){a.vp-note{flex-wrap:nowrap;border-radius:18px}a.vp-note .vn-t{order:0;flex:1 1 auto}.vn-faces img{width:32px!important;height:32px!important}.vn-faces img+img{margin-left:-12px}.vn-t b{font-size:.92rem}} @media (max-width:480px){.vn-t small,.vn-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vn-t b{font-size:.86rem;letter-spacing:0}.vn-faces img+img{margin-left:-16px}a.vp-note{gap:8px}} @media (max-width:480px){.vn-t small{display:none}.vn-t b{overflow:visible;text-overflow:clip;font-size:.84rem}.vn-faces img{width:28px!important;height:28px!important}.vn-faces img+img{margin-left:-12px}a.vp-note{padding:6px 8px}} @media (max-width:480px){.vn-x{display:none}.vn-t b{font-size:.95rem}} /* 登録：立場4つ・確かめのチェック・予備の連絡先（10-30） */ .roles.roles4{grid-template-columns:repeat(4,minmax(0,1fr))!important} @media (max-width:760px){.roles.roles4{grid-template-columns:repeat(2,minmax(0,1fr))!important}.roles.roles4 .role{min-height:170px}} .minor-note{padding:8px 12px;border-radius:10px;background:color-mix(in srgb,#8A6CC8 10%,transparent);border:1px solid color-mix(in srgb,#8A6CC8 30%,transparent)} .agree-box{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--gold,#C9A65A) 45%,transparent);background:color-mix(in srgb,var(--gold,#C9A65A) 7%,transparent)} .ag-l{display:flex;gap:10px;align-items:flex-start;font-size:.93rem;line-height:1.6;cursor:pointer} .ag-l input{width:20px;height:20px;margin-top:3px;flex:none} .ag-req,.ag-opt{display:inline-block;font-size:.72rem;padding:0 7px;margin-right:6px;border-radius:999px;vertical-align:1px} .ag-req{background:#C0504D;color:#fff}.ag-opt{background:color-mix(in srgb,currentColor 14%,transparent)} .backup-box{width:100%;max-width:520px;text-align:left;padding:12px 14px;border-radius:14px;border:1px dashed color-mix(in srgb,currentColor 30%,transparent)} .backup-box p{margin:6px 0}.bk-btns{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0} .lift{display:none!important} /* 10-30 TOMO：右横の階ボタンは上の帯と重なるので外す */ /* 立場のカード：触れると・選ぶと、その色でふわっと光る（10-30 TOMO） */ .roles .role[data-c="#3A8676"]{--rc:#5FC3A8}.roles .role[data-c="#D9823B"]{--rc:#F2A65A}.roles .role[data-c="#3F7CC0"]{--rc:#7AB0F0}.roles .role[data-c="#8A6CC8"]{--rc:#B79AF0} .roles .role{transition:box-shadow .35s ease,transform .35s ease,border-color .35s ease,background-color .35s ease} .roles .role .role-sil{transition:opacity .35s ease,filter .35s ease} .roles .role:hover,.roles .role:focus-visible{border-color:var(--rc)!important;transform:translateY(-3px);box-shadow:0 0 0 1px var(--rc),0 0 22px color-mix(in srgb,var(--rc) 55%,transparent),inset 0 0 26px color-mix(in srgb,var(--rc) 22%,transparent)} .roles .role[aria-checked="true"]{border-color:var(--rc)!important;background-color:color-mix(in srgb,var(--rc) 12%,transparent);box-shadow:0 0 0 2px var(--rc),0 0 30px color-mix(in srgb,var(--rc) 70%,transparent),inset 0 0 34px color-mix(in srgb,var(--rc) 28%,transparent)} .roles .role:hover .role-sil,.roles .role[aria-checked="true"] .role-sil{opacity:1!important;filter:drop-shadow(0 0 10px var(--rc)) brightness(1.35)} .roles .role:active{transform:scale(.98)} @media (prefers-reduced-motion:reduce){.roles .role,.roles .role .role-sil{transition:none}.roles .role:hover{transform:none}} .role:nth-child(4) .role-sil{color:#8A6CC8} /* 登録ボタン：指でポチッ・押せるときは光る（10-30 TOMO） */ .reg-go{position:relative;overflow:hidden;display:flex!important;align-items:center;justify-content:center;gap:12px;transition:transform .12s ease,box-shadow .3s ease,filter .3s ease} .reg-go .rg-hand{width:36px;height:36px;flex:none;fill:#fff;stroke:rgba(0,0,0,.35);stroke-width:1.2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));transform-origin:50% 90%} .reg-go:disabled{filter:saturate(.45) brightness(.8);cursor:not-allowed} .reg-go:disabled .rg-hand{opacity:.4} .reg-go:not(:disabled){--gl:#7FE0B8;animation:rgGlow 2.2s ease-in-out infinite;cursor:pointer} .reg-go.is-line:not(:disabled){--gl:#5BE07A} .reg-go:not(:disabled) .rg-hand{animation:rgTap 1.4s ease-in-out infinite} .reg-go:not(:disabled)::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:rgShine 3s ease-in-out infinite;pointer-events:none} .reg-go:not(:disabled):hover{transform:translateY(-2px)} .reg-go:not(:disabled):active{transform:translateY(2px) scale(.97);box-shadow:0 0 0 2px var(--gl),0 0 10px var(--gl);animation:none} .reg-go:not(:disabled):active .rg-hand{animation:none;transform:translateY(4px) scale(.9)} .reg-go .rg-rip{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);opacity:0;pointer-events:none} .reg-go.rip .rg-rip{animation:rgRip .6s ease-out} @keyframes rgGlow{0%,100%{box-shadow:0 0 0 1px color-mix(in srgb,var(--gl) 60%,transparent),0 0 12px color-mix(in srgb,var(--gl) 35%,transparent)}50%{box-shadow:0 0 0 2px var(--gl),0 0 30px color-mix(in srgb,var(--gl) 75%,transparent)}} @keyframes rgTap{0%,55%,100%{transform:translateY(0) rotate(-8deg)}70%{transform:translateY(5px) rotate(-8deg) scale(.92)}82%{transform:translateY(0) rotate(-8deg)}} @keyframes rgShine{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}} @keyframes rgRip{0%{transform:scale(0);opacity:.9}100%{transform:scale(40);opacity:0}} @media (prefers-reduced-motion:reduce){.reg-go:not(:disabled),.reg-go:not(:disabled) .rg-hand,.reg-go:not(:disabled)::after{animation:none}} /* 上の帯の「無料登録」（10-30） */ .top nav a.nav-reg{display:inline-flex!important;align-items:center;white-space:nowrap;font-weight:700;color:#fff;background:linear-gradient(135deg,#3A8676,#5FB3A1);border:1.5px solid #5FB3A1;border-radius:999px;padding:3px 12px;box-shadow:0 0 10px rgba(95,179,161,.45)} .top nav a.nav-reg:hover{filter:brightness(1.1);color:#fff} .top nav a.nav-reg.is-mem{background:transparent;color:var(--ink);border-color:color-mix(in srgb,#5FB3A1 70%,transparent);box-shadow:none;font-weight:500} @media (max-width:760px){.top nav a.nav-reg{padding:2px 8px;font-size:.72rem}} @media (max-width:420px){.top nav{gap:5px!important}} .reg-swap{margin:0}.reg-swap .rs-login{display:none} body.login-mode .reg-swap .rs-reg{display:none}body.login-mode .reg-swap .rs-login{display:inline} .linkish{font:inherit;color:#5FB3A1;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer} body.login-mode .sg-main>.card:not(.reg-card):not(.reg-done){display:none} body.login-mode .reg-card .agree-box,body.login-mode .reg-card label.reg-f:has(#regName){display:none} /* 無料登録：光って目立たせる */ .top nav a.nav-reg{position:relative;overflow:hidden;animation:navRegGlow 2.4s ease-in-out infinite} .top nav a.nav-reg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%);animation:navRegShine 3.2s ease-in-out infinite;pointer-events:none} @keyframes navRegGlow{0%,100%{box-shadow:0 0 0 0 rgba(95,179,161,.0),0 0 8px rgba(95,179,161,.45)}50%{box-shadow:0 0 0 3px rgba(95,179,161,.25),0 0 20px rgba(127,224,184,.85)}} @keyframes navRegShine{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}} @media (prefers-reduced-motion:reduce){.top nav a.nav-reg,.top nav a.nav-reg::after{animation:none}} @media (max-width:480px){.top nav a.nav-reg .nr-l{display:none}.top nav a.nav-reg{padding:2px 7px}} .nav-reg-float{display:none} @media (max-width:480px){ .top nav a.nav-reg{display:none!important} .nav-reg-float{display:inline-flex;align-items:center;gap:6px;position:fixed;z-index:60;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%); padding:9px 20px;border-radius:999px;font-weight:700;font-size:.92rem;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden; background:linear-gradient(135deg,#3A8676,#5FB3A1);border:1.5px solid #8FD9C4;animation:navRegGlow 2.4s ease-in-out infinite} .nav-reg-float::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-130%);animation:navRegShine 3.2s ease-in-out infinite;pointer-events:none} .nav-reg-float i{font-style:normal;color:#FFE9B0} } @media (max-width:480px) and (prefers-reduced-motion:reduce){.nav-reg-float,.nav-reg-float::after{animation:none}} /* 光の帯が角からはみ出さないように：帯を背景の中で動かす（丸みの外に出ない） */ .top nav a.nav-reg::after,.nav-reg-float::after{content:none!important} .top nav a.nav-reg,.nav-reg-float{background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%),linear-gradient(135deg,#3A8676,#5FB3A1)!important;background-size:300% 100%,100% 100%!important;background-repeat:no-repeat!important;background-position:120% 0,0 0;animation:navRegGlow 2.4s ease-in-out infinite,navRegSweep 3.2s ease-in-out infinite!important;overflow:hidden} @keyframes navRegSweep{0%,55%{background-position:120% 0,0 0}100%{background-position:-20% 0,0 0}} .reg-go:not(:disabled)::after{border-radius:inherit} @media (prefers-reduced-motion:reduce){.top nav a.nav-reg,.nav-reg-float{animation:none!important}} .top nav:has(.nav-reg){overflow:visible!important;padding-block:6px;padding-inline:8px 2px} .top nav a.nav-reg{flex:none} /* 階の一覧：いまいる階を光らせる（10-30 TOMO） */ .floors .fl[aria-current="page"]{--cg:127,224,184;border:2px solid rgb(var(--cg))!important;animation:flHere 2.6s ease-in-out infinite;transform:scale(1.015);z-index:1} .floors .fl.f2[aria-current="page"]{--cg:183,154,240}.floors .fl.f3[aria-current="page"]{--cg:240,206,130} .floors .fl[aria-current="page"] .go{display:inline-flex!important;align-items:center;gap:6px;font-weight:700;color:#fff;padding:4px 14px;border-radius:999px;background:rgba(var(--cg),.28);border:1px solid rgba(var(--cg),.9);text-shadow:0 0 8px rgba(var(--cg),.9)} .floors .fl[aria-current="page"] .go::before{content:"";width:8px;height:8px;border-radius:50%;background:rgb(var(--cg));box-shadow:0 0 8px rgb(var(--cg));animation:flDot 1.3s ease-in-out infinite} @keyframes flHere{0%,100%{box-shadow:0 0 0 1px rgba(var(--cg),.4),0 0 14px rgba(var(--cg),.35)}50%{box-shadow:0 0 0 3px rgba(var(--cg),.55),0 0 34px rgba(var(--cg),.75)}} @keyframes flDot{0%,100%{opacity:1}50%{opacity:.3}} @media (max-width:520px){.floors .fl[aria-current="page"]{grid-template-columns:52px 1fr}.floors .fl[aria-current="page"] .go{grid-column:2;justify-self:start;font-size:.78rem;padding:2px 10px}} @media (prefers-reduced-motion:reduce){.floors .fl[aria-current="page"],.floors .fl[aria-current="page"] .go::before{animation:none}} /* 3階の便り：入院・退院・制度のタグを「押せるボタン」に（色ごとの内側の縁・光・記録するの印）10-30 TOMO */ .f3-news .f3-tag{--tl:#E8C98A;font-size:.82rem!important;padding:3px 4px 3px 12px!important;display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:2px solid #C9A15A!important;box-shadow:inset 0 0 0 2px var(--tl),0 0 0 0 transparent!important;vertical-align:middle} .f3-news .f3-tag[data-tag="入院"]{--tg:#B85C50;--tl:#F2A397} .f3-news .f3-tag[data-tag="退院"]{--tg:#2E8C78;--tl:#7FE0C4} .f3-news .f3-tag[data-tag="制度"]{--tg:#7A55B8;--tl:#C9A8F5} .f3-news .f3-tag[data-tag="暮らし"]{--tg:#3F7DB8;--tl:#9CC4F0;padding:3px 12px!important} .f3-news button.f3-tag{animation:tgGlow 2.4s ease-in-out infinite} .f3-news .f3-tag .tg-act{display:inline-flex;align-items:center;gap:3px;font-size:.72rem;font-weight:700;padding:1px 9px 1px 7px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--tg)} .f3-news .f3-tag .tg-act svg{width:12px;height:12px} .f3-news button.f3-tag:hover,.f3-news button.f3-tag:focus-visible{filter:brightness(1.15);transform:translateY(-1px)} .f3-news button.f3-tag:active{transform:translateY(1px) scale(.97)} @keyframes tgGlow{0%,100%{box-shadow:inset 0 0 0 2px var(--tl),0 0 6px color-mix(in srgb,var(--tl) 40%,transparent)}50%{box-shadow:inset 0 0 0 2px var(--tl),0 0 16px var(--tl)}} @media (prefers-reduced-motion:reduce){.f3-news button.f3-tag{animation:none}} /* 3F 便り：金色に流れる一覧＋くわしく（10-30） */ .f3-news .upd-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:6px 0 0} .upd-live{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:#7a5a12;background:linear-gradient(90deg,#FFF3D2,#F6DC9B,#FFF3D2);background-size:200% 100%;animation:updSweep 4s linear infinite;border:1px solid #D9B25F;border-radius:999px;padding:2px 10px} .upd-live i{width:7px;height:7px;border-radius:50%;background:#E0A21B;box-shadow:0 0 6px #F5C04A;animation:updBlink 1.4s ease-in-out infinite} .upd-tick{position:relative;height:440px;overflow-y:auto;scrollbar-width:thin;margin-top:12px;border-radius:18px;padding:4px 8px;background:radial-gradient(120% 60% at 50% 0%,rgba(246,220,155,.25),transparent 70%),linear-gradient(180deg,rgba(255,248,230,.6),rgba(255,248,230,.15));border:1px solid rgba(201,161,90,.45);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34px,#000 calc(100% - 44px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 34px,#000 calc(100% - 44px),transparent 100%);outline:none} .upd-tick ul{margin:24px 0 40px!important;position:relative;z-index:1} .upd-dust{position:sticky;top:0;display:block;height:0;z-index:2;pointer-events:none} .upd-dust i{position:absolute;top:440px;width:var(--s);height:var(--s);border-radius:50%;background:#F7D57A;box-shadow:0 0 8px 2px rgba(247,200,90,.75);opacity:0;animation:updDust 9s linear infinite} @keyframes updDust{0%{transform:translateY(0);opacity:0}15%{opacity:.9}85%{opacity:.7}100%{transform:translateY(-440px);opacity:0}} .f3-news li.upd-card{position:relative;overflow:hidden;cursor:pointer;border:1.5px solid rgba(201,161,90,.55)!important;background:linear-gradient(180deg,#FFFDF7,#FFF6E2)!important;transition:transform .2s,box-shadow .2s} .f3-news li.upd-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,236,170,.55) 50%,transparent 65%);background-size:250% 100%;animation:updShine 5.5s ease-in-out infinite;pointer-events:none} .f3-news li.upd-card:nth-child(2n)::after{animation-delay:-2.7s} @keyframes updShine{0%,55%{background-position:120% 0}100%{background-position:-120% 0}} .f3-news li.upd-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(201,161,90,.35)} .f3-news li.upd-card.new{box-shadow:0 0 0 2px #E8C477,0 0 16px rgba(240,190,80,.45)} .upd-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px} .upd-top time{margin-left:auto;font-size:.76rem;color:#8a7650} .upd-new{font-size:.66rem;font-weight:800;letter-spacing:.06em;color:#fff;background:linear-gradient(90deg,#E0A21B,#F2C65A);border-radius:6px;padding:1px 7px;animation:updBlink 1.6s ease-in-out infinite} .upd-more{position:relative;z-index:1;display:flex;align-items:center;gap:8px;width:100%;margin:10px 0 0;padding:8px 12px;border-radius:12px;border:1.5px dashed #D2AD62;background:rgba(255,243,210,.65);color:#7a5a12;font:inherit;font-weight:700;font-size:.86rem;cursor:pointer;text-align:left} .upd-more small{font-weight:500;font-size:.72rem;color:#9a8358} .upd-more i{margin-left:auto;font-style:normal;font-size:1.3rem;line-height:1;transition:transform .2s} .upd-card:hover .upd-more{background:#FBE7B4;border-style:solid} .upd-card:hover .upd-more i{transform:translateX(3px)} .upd-box{max-width:560px;max-height:86vh;overflow:auto;text-align:left} .upd-k{display:inline-block;font-size:.78rem;color:#fff;border-radius:999px;padding:1px 12px;margin-right:8px;background:#7a6a4a} .upd-k[data-tag="入院"]{background:#B85C50}.upd-k[data-tag="退院"]{background:#2E8C78}.upd-k[data-tag="制度"]{background:#7A55B8}.upd-k[data-tag="暮らし"]{background:#3F7DB8} .upd-in h3{margin:8px 0 6px;font-size:1.15rem} .upd-in p{margin:6px 0;line-height:1.85} .uc{margin:14px 0;padding:12px;border-radius:14px;background:#FFF8E6;border:1px solid #E6CF98} .uc-k{display:block;color:#7a5a12;margin-bottom:2px} .uc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:10px 0 8px;text-align:center;font-size:.78rem} .uc-w{font-weight:700;color:#8a7650;font-size:.7rem} .uc-d{padding:5px 0;border-radius:8px;background:#fff;color:#556} .uc-d.sun{color:#C0504D}.uc-d.sat{color:#3F7DB8} .uc-d.on{background:linear-gradient(180deg,#F6DC9B,#E8B95A);color:#4a3508;font-weight:800;box-shadow:0 0 8px rgba(232,185,90,.6)} .uc-d.base{outline:2px solid #2E8C78;outline-offset:-2px} .uc-list{margin:0;padding-left:0;list-style:none;font-size:.86rem} .uc-list li{padding:4px 0;border-top:1px dashed #E6CF98} .uc-list time{display:inline-block;min-width:7.5em;font-weight:700;color:#7a5a12;margin-right:6px} .upd-nurse{margin:14px 0 8px;padding:12px 14px;border-radius:14px;background:#EEF6F3;border-left:4px solid #2E8C78} .upd-nurse .nurse-badge{font-weight:800;color:#1f6b5a;font-size:.86rem} .upd-nurse small{color:#6b7c78;font-size:.72rem} .upd-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .upd-foot{margin-top:10px!important;color:#7d7d7d} @media (max-width:480px){.upd-tick{height:400px}.upd-dust i{top:400px}.uc-list time{display:block}} @media (prefers-reduced-motion:reduce){.upd-tick{height:auto;max-height:none;-webkit-mask-image:none;mask-image:none}.upd-dust,.f3-news li.upd-card::after{display:none}.upd-live,.upd-new{animation:none}} @keyframes updSweep{0%{background-position:0 0}100%{background-position:200% 0}} @keyframes updBlink{0%,100%{opacity:1}50%{opacity:.45}} .f3-news li.upd-card,.f3-news li.upd-card b,.f3-news li.upd-card p{color:#2B2416!important} .f3-news li.upd-card p{color:#4A3F2C!important} .uc,.uc .small,.uc-list li{color:#3D3424!important} .uc .small{color:#7a6a4a!important} .upd-tick{background:radial-gradient(120% 50% at 50% 0%,rgba(246,220,155,.22),transparent 70%),rgba(255,236,180,.06)} .upd-nurse p{color:#1f3a34!important}.upd-nurse .nurse-badge{background:none!important;color:#1f6b5a!important;padding:0!important} /* 裏のしかけ：看護師の誓い（10-30） */ .vow{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;visibility:hidden;opacity:0;background:#05070d;transition:opacity .9s ease,visibility 0s .9s;overflow:hidden} .vow.on{visibility:visible;opacity:1;transition:opacity 1.4s ease} .vow-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0} .vow.on .vow-a{animation:vowA 26s ease-in-out forwards} .vow.on .vow-b{animation:vowB 26s ease-in-out forwards} @keyframes vowA{0%{opacity:0;transform:scale(1.12)}8%{opacity:.85}45%{opacity:.85;transform:scale(1.02)}55%{opacity:0}100%{opacity:0}} @keyframes vowB{0%,45%{opacity:0;transform:scale(1.1)}57%{opacity:.85}100%{opacity:.8;transform:scale(1)}} @media (max-aspect-ratio:1/1){.vow.on .vow-a{animation:vowA 26s ease-in-out forwards;object-position:50% 50%}} .vow-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(5,7,13,.42),rgba(5,7,13,.82))} .vow-ray{position:absolute;inset:-20% 0 0;background:conic-gradient(from 180deg at 50% 0%,transparent 40%,rgba(255,226,160,.12) 46%,transparent 50%,rgba(255,226,160,.09) 54%,transparent 60%);mix-blend-mode:screen;opacity:0;pointer-events:none} .vow.on .vow-ray{animation:vowRay 6s ease-in-out 1s infinite alternate} @keyframes vowRay{from{opacity:.4;transform:rotate(-2deg)}to{opacity:1;transform:rotate(2deg)}} .vow-dust{position:absolute;inset:0;pointer-events:none} .vow-dust i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#FFE3A0;box-shadow:0 0 8px 2px rgba(255,210,120,.7);animation:vowDust 10s linear infinite} @keyframes vowDust{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-105vh);opacity:0}} .vow-in{position:relative;z-index:2;max-width:620px;max-height:92vh;overflow:auto;padding:28px 22px;text-align:center;color:#F4E9D2;text-shadow:0 0 12px rgba(0,0,0,.8)} .vow-k{margin:0;font-size:.78rem;letter-spacing:.3em;color:#D9BE85;opacity:0} .vow-in h2{margin:6px 0 18px;font-size:clamp(1.6rem,5vw,2.3rem);letter-spacing:.35em;color:#FFE7B0!important;text-shadow:0 0 18px rgba(255,200,110,.75),0 0 40px rgba(255,190,90,.35);opacity:0} .vow-t{margin:0;font-family:var(--display);font-size:clamp(.92rem,2.6vw,1.06rem);line-height:2.05} .vow-t span{display:block;opacity:0;transform:translateY(14px);filter:blur(4px)} .vow-t span.sp{height:.7em} .vow-sig{margin:22px 0 0;font-size:.82rem;color:#D9BE85;opacity:0} .vow-sig b{display:block;font-family:var(--display);font-weight:500;font-size:1.1rem;letter-spacing:.4em;color:#FFE7B0} .vow-note{margin:16px 0 0;font-size:.8rem;color:#E6D3A2;letter-spacing:.06em;opacity:0} .vow.on .vow-k{animation:vowUp 1.6s ease 1.2s forwards} .vow.on .vow-in h2{animation:vowUp 2s ease 2s forwards} .vow.on .vow-t span{animation:vowUp 1.6s ease forwards;animation-delay:calc(3.4s + var(--i) * .42s)} .vow.on .vow-sig{animation:vowUp 2s ease 13s forwards} .vow.on .vow-note{animation:vowUp 2s ease 14.5s forwards} @keyframes vowUp{to{opacity:1;transform:none;filter:none}} .vow-x{position:absolute;top:14px;right:14px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,231,176,.5);background:rgba(10,12,20,.6);color:#FFE7B0;font-size:1.3rem;cursor:pointer} @media (prefers-reduced-motion:reduce){.vow.on .vow-a{animation:none;opacity:.8}.vow.on *{animation-duration:.01s!important;animation-delay:0s!important}} /* 3階：輪の魔法陣と、日にちの文字盤（10-30） */ .f3-stage{position:relative;isolation:isolate} .f3-stage .wa-ring{position:relative;z-index:1} .f3-stage .mg{position:absolute;left:9.7%;top:3.3%;width:80.6%;z-index:0;pointer-events:none;overflow:visible;opacity:.0;transition:opacity 1.6s ease} .f3-stage.go .mg{opacity:1} .mg circle,.mg polygon{fill:none;stroke:rgba(226,194,122,.38);stroke-width:.8} .mg .mg-tk line{stroke:rgba(226,194,122,.5);stroke-width:.8} .mg .dsh{stroke-dasharray:2 6;stroke:rgba(241,212,138,.45)} .mg .dsh2{stroke-dasharray:14 6 2 6;stroke:rgba(241,212,138,.35)} .mg polygon{stroke:rgba(226,194,122,.22)} .mg text{fill:rgba(241,212,138,.55);font-family:"Hina Mincho",serif;font-size:9px;letter-spacing:3px} .mg text.sm{font-size:8px;letter-spacing:4px;fill:rgba(241,212,138,.45)} .mg g{transform-origin:200px 200px;transform-box:view-box} .f3-stage.go .mg-a{animation:mgIn 2.4s cubic-bezier(.2,.7,.2,1) both,mgSpin 120s linear 2.4s infinite} .f3-stage.go .mg-b{animation:mgInR 2.4s cubic-bezier(.2,.7,.2,1) both,mgSpinR 80s linear 2.4s infinite} .f3-stage.go .mg-c{animation:mgSpin 40s linear infinite} @keyframes mgIn{from{transform:rotate(-200deg) scale(.6);opacity:0}to{transform:rotate(0) scale(1);opacity:1}} @keyframes mgInR{from{transform:rotate(240deg) scale(.5);opacity:0}to{transform:rotate(0) scale(1);opacity:1}} @keyframes mgSpin{to{transform:rotate(360deg)}} @keyframes mgSpinR{to{transform:rotate(-360deg)}} .f3-stage.go::after{content:"";position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,231,170,.9),rgba(255,210,120,0) 70%);z-index:2;pointer-events:none;animation:mgFlash 2.2s ease-out .3s both} @keyframes mgFlash{0%{opacity:0;width:8%}25%{opacity:1}100%{opacity:0;width:90%}} .chrono{position:absolute;right:-3%;top:-4%;width:31%;max-width:190px;z-index:3;overflow:visible;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));opacity:0;transform:scale(.8) rotate(-8deg);transition:opacity 1s ease 1s,transform 1.2s cubic-bezier(.2,.8,.2,1) 1s} .f3-stage.go .chrono{opacity:1;transform:none} .chrono .cr-bez{fill:rgba(18,24,39,.55);stroke:rgba(226,194,122,.35);stroke-width:.8;stroke-dasharray:1 3} .chrono .cr-f{fill:#141B2C;stroke:#C9A65A;stroke-width:1.4} .chrono .cr-r{fill:none;stroke:rgba(226,194,122,.3);stroke-width:.6} .chrono .cr-t{stroke:rgba(226,194,122,.5);stroke-width:.6} .chrono .cr-t.b{stroke:#E2C27A;stroke-width:1.1} .chrono .cr-n{fill:#BFAF8A;font-size:7px;text-anchor:middle;font-family:"Hina Mincho",serif} .chrono .cr-n.on{fill:#FFE7B0;font-weight:700} .chrono .cr-c{fill:#F7E3B5;font-size:11px;text-anchor:middle;font-family:"Yuji Syuku","Hina Mincho",serif} .chrono .cr-s{fill:rgba(191,175,138,.7);font-size:4.6px;letter-spacing:1.2px;text-anchor:middle} .chrono .cr-h line{stroke:#F1D48A;stroke-width:1.4;stroke-linecap:round} .chrono .cr-h circle{fill:#FFE7B0} .chrono .cr-h{transform:rotate(0deg);transition:transform 2.2s cubic-bezier(.3,1.4,.4,1) 1.6s} .f3-stage.go .chrono .cr-h{transform:rotate(var(--to))} .chrono .cr-p{fill:#E2C27A;stroke:#141B2C;stroke-width:.8} .chrono .cr-sec line{stroke:rgba(232,139,139,.75);stroke-width:.6} .chrono .cr-sec{animation:mgSpin 60s steps(60) infinite} .f3-tease{margin:6px 0 0;color:#F1D48A;font-family:"Hina Mincho",serif} @media (prefers-reduced-motion:reduce){.f3-stage .mg g,.chrono .cr-sec{animation:none!important}.f3-stage::after{display:none}} .chrono{width:42%;max-width:230px;right:-5%;top:-11%} .chrono .cr-c{font-size:15px} .chrono .cr-n{font-size:8px} .chrono .cr-s{font-size:5.5px} /* 3階：つながりの星図ログ（10-30） */ .cnx{margin:14px 0 6px;text-align:left} .cnx-hd b{display:block;font-family:"Yuji Syuku","Hina Mincho",serif;font-weight:400;color:#F1D48A;font-size:1.08rem;letter-spacing:.12em} .cnx-hd .small{color:#BFAF8A!important} .cnx ul{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .cnx-c{position:relative;padding:12px 12px 10px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(226,194,122,.28);box-shadow:inset 3px 0 0 var(--c);opacity:0;transform:translateY(10px)} .f3-stage.go~.cnx .cnx-c,.cnx.go .cnx-c{animation:vowUp 1s ease forwards} .cnx-c:nth-child(2){animation-delay:.12s!important}.cnx-c:nth-child(3){animation-delay:.24s!important}.cnx-c:nth-child(4){animation-delay:.36s!important}.cnx-c:nth-child(5){animation-delay:.48s!important}.cnx-c:nth-child(6){animation-delay:.6s!important} .cnx-h{display:flex;align-items:center;gap:8px} .cnx-h i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)} .cnx-h b{color:#F7E3B5;font-family:"Hina Mincho",serif;font-size:.98rem} .cnx-tr{margin-left:auto;font-size:.7rem;font-weight:700;border-radius:999px;padding:1px 8px;border:1px solid currentColor} .cnx-up{color:#8FE0B8}.cnx-dn{color:#F2A397}.cnx-eq{color:#C9B98F}.cnx-dot{color:#9AA6B8;border-style:dashed!important} .cnx-sp{display:block;width:100%;height:auto;margin:6px 0 2px} .cnx-ln line{stroke:var(--c);stroke-linecap:round;filter:drop-shadow(0 0 3px var(--c))} .cnx-pt circle{fill:#141B2C;stroke:var(--c);stroke-width:1.4} .cnx-pt circle.now{fill:var(--c);animation:updBlink 2s ease-in-out infinite} .cnx-lb text{fill:#8F9AAE;font-size:7.5px;text-anchor:middle} .cnx dl{margin:4px 0 0;font-size:.8rem;line-height:1.6} .cnx dt{color:#C9A65A;font-size:.68rem;letter-spacing:.08em;margin-top:4px} .cnx dd{margin:0;color:#E6DCC6} @media (prefers-reduced-motion:reduce){.cnx-c{opacity:1;transform:none}} .cnx ul{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,78%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .cnx-c{scroll-snap-align:start} .cnx-sp{max-height:84px} .cnx-hd .cnx-sw{display:block;font-size:.72rem;color:#C9A65A;margin-top:2px} /* 3階：日付の歯車（10-30 二版目：1つの円） */ .chrono{display:none!important} .gear{position:absolute;left:78.5%;top:17%;width:23%;max-width:150px;aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:3;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;transition:opacity 1s ease 1.2s,transform 1.3s cubic-bezier(.2,1.3,.3,1) 1.2s} .f3-stage.go .gear{opacity:1;transform:translate(-50%,-50%)} .gear svg{display:block;width:100%;height:100%;overflow:visible} .gear .gr-t{transform-origin:60px 60px;animation:mgSpinR 60s linear infinite} .gear .gr-t rect{fill:#141B2C;stroke:#E2C27A;stroke-width:1.4} .gear .gr-rim{fill:#141B2C;stroke:#E2C27A;stroke-width:1.4} .gear .gr-in{fill:#121A2A;stroke:#E2C27A;stroke-width:3;filter:drop-shadow(0 0 8px rgba(241,212,138,.75))} .gear .gr-in2{fill:none;stroke:rgba(226,194,122,.35);stroke-width:1;stroke-dasharray:1 3} .gear text{text-anchor:middle;fill:#F7E3B5;font-family:"Yuji Syuku","Hina Mincho",serif} .gear .gr-s{font-size:8px;fill:#C9A65A;letter-spacing:1px;font-family:"Hina Mincho",serif} .gear .gr-d{font-size:22px;letter-spacing:1px} .gear .gr-w{font-size:10px;fill:#E6D3A2} .gear:hover .gr-in,.gear:focus-visible .gr-in{filter:drop-shadow(0 0 14px rgba(241,212,138,1))} .gear:focus-visible{outline:2px solid #F1D48A;outline-offset:3px} .gear.spin .gr-t{animation:gearKick .9s cubic-bezier(.3,1.2,.4,1)} @keyframes gearKick{from{transform:rotate(0)}to{transform:rotate(-120deg)}} .tt-box{max-width:520px;background:#141B2C!important;color:#E6DCC6;border:1px solid rgba(226,194,122,.5)} .tt-in h3{color:#F1D48A!important;font-family:"Yuji Syuku","Hina Mincho",serif;font-weight:400;margin:2px 0 4px} .tt-in .kicker{color:#C9A65A}.tt-in .small{color:#BFAF8A!important} .tt-line{list-style:none;margin:12px 0;padding:0 0 0 22px;max-height:300px;overflow:auto;position:relative} .tt-line::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,rgba(226,194,122,.25),#E2C27A 50%,rgba(226,194,122,.25))} .tt-line li{position:relative;padding:7px 28px 7px 6px;font-size:.9rem;display:flex;flex-direction:column} .tt-line li::before{content:"";position:absolute;left:-19px;top:13px;width:10px;height:10px;border-radius:50%;background:#141B2C;border:2px solid #8F9AAE} .tt-line time{font-size:.74rem;color:#8F9AAE} .tt-line li.pa span{color:#B8BFCC} .tt-line li.now::before{width:14px;height:14px;left:-21px;top:11px;border-color:#F1D48A;background:#F1D48A;box-shadow:0 0 10px #F1D48A} .tt-line li.now span{color:#FFE7B0;font-weight:700} .tt-line li.fu::before{border-color:#E2C27A} .tt-line li.fu span{color:#F7E3B5} .tt-del{position:absolute;right:2px;top:10px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(226,194,122,.5);background:none;color:#E2C27A;cursor:pointer} .tt-add{border-top:1px dashed rgba(226,194,122,.35);padding-top:10px} .tt-add b{display:block;color:#F1D48A;font-size:.86rem;margin-bottom:6px} .tt-add div{display:flex;flex-wrap:wrap;gap:6px} .tt-add input{font:inherit;font-size:.9rem;padding:6px 8px;border-radius:8px;border:1px solid rgba(226,194,122,.45);background:#0F1522;color:#F4E9D2;color-scheme:dark} .tt-add input[type=text]{flex:1;min-width:150px} .vow-snd{position:absolute;top:18px;left:14px;z-index:3;border-radius:999px;border:1px solid rgba(255,231,176,.5);background:rgba(10,12,20,.6);color:#FFE7B0;font:inherit;font-size:.78rem;padding:6px 12px;cursor:pointer} .vow-snd[aria-pressed="true"]{box-shadow:0 0 12px rgba(255,210,120,.45)} .f3-grid>*{min-width:0}.f3-ring,.cnx,.cnx ul{min-width:0;max-width:100%}.cnx ul{grid-auto-columns:minmax(220px,78%)} /* 2階：灯守のこたえの色つきの言葉→1階の答えへ（10-30） */ .fr-ai .kw{font:inherit;font-weight:800;color:var(--k);background:color-mix(in srgb,var(--k) 14%,transparent);border:0;border-bottom:2px solid var(--k);border-radius:6px 6px 2px 2px;padding:0 5px;margin:0 1px;cursor:pointer;text-shadow:0 0 10px color-mix(in srgb,var(--k) 45%,transparent)} .fr-ai .kw:hover,.fr-ai .kw:focus-visible{background:color-mix(in srgb,var(--k) 28%,transparent)} .fr-ai .kw::after{content:"›";font-size:.8em;margin-left:3px;opacity:.75} .kw-hint{opacity:.75;margin-top:-2px} .fr-tbl tr.flash td{animation:frFlash 2.6s ease} @keyframes frFlash{0%,40%{background:color-mix(in srgb,var(--k,#E2C27A) 30%,transparent)}100%{background:transparent}} .fr-f{display:inline-block;font-weight:700;color:var(--k);border-left:3px solid var(--k);padding-left:6px} .fr-made{display:inline-flex;align-items:center;gap:6px;margin:6px 0 2px;font-size:.86rem;color:var(--sub)} .fr-made span{font-weight:700;color:var(--head);background:color-mix(in srgb,var(--gold,#C9A15A) 18%,transparent);border:1px solid color-mix(in srgb,var(--gold,#C9A15A) 55%,transparent);border-radius:999px;padding:1px 10px} .cm-note{margin:12px 0 6px;padding:10px 14px;border:1.5px solid #3A8676;border-radius:10px;background:#F2F8F6;font-size:.86rem;line-height:1.7} .cm-note b{color:#2C6B5E}.cm-note p{margin:4px 0 0} /* 日付の歯車：輪より目立たない薄さ・細い線、数字はヨーロッパ調（10-30 TOMO） */ .gear .gr-t rect{fill:none;stroke:rgba(226,194,122,.42);stroke-width:.7} .gear .gr-rim{fill:rgba(18,26,42,.55);stroke:rgba(226,194,122,.42);stroke-width:.7} .gear .gr-in{fill:rgba(18,26,42,.7);stroke:rgba(226,194,122,.5);stroke-width:.9;filter:none} .gear .gr-in2{stroke:rgba(226,194,122,.22)} .gear .gr-d{font-family:"Cormorant Garamond","Times New Roman",serif;font-style:italic;font-weight:500;font-size:24px;letter-spacing:.5px;fill:rgba(247,227,181,.85)} .gear .gr-s{fill:rgba(201,166,90,.7)} .gear .gr-w{fill:rgba(230,211,162,.7);font-size:9px} .gear:hover .gr-in,.gear:focus-visible .gr-in{filter:drop-shadow(0 0 6px rgba(241,212,138,.5))} .vow-sign{position:absolute;right:3vw;bottom:3vh;z-index:3;width:clamp(150px,22vw,320px);height:auto;opacity:0;filter:drop-shadow(0 0 10px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,220,150,.25));pointer-events:none} .vow.on .vow-sign{animation:vowSign 3s ease 15.5s forwards} @keyframes vowSign{from{opacity:0;transform:translateY(8px)}to{opacity:.92;transform:none}} @media (max-width:600px){.vow-sign{width:42vw;right:4vw;bottom:2vh}} @media (prefers-reduced-motion:reduce){.vow-sign{opacity:.92}} /* 3階：結ばれて、光って、広がる（10-30） */ .f3-stage.seq .wr-p,.f3-stage.seq .wr-ln,.f3-stage.seq .wr-cs,.f3-stage.seq .pm-web{animation:none!important} .f3-stage .wa-ring,.f3-stage .mg{transition:transform 1.4s cubic-bezier(.5,0,.2,1)} .f3-stage.shrunk .wa-ring{transform:scale(.74)} .f3-stage.shrunk .mg{transform:scale(.8)} .f3-stage.bloom::before{content:"";position:absolute;left:50%;top:50%;width:84%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,236,180,.55),rgba(255,214,130,.18) 45%,transparent 70%);z-index:2;pointer-events:none;animation:exBloom 1.6s ease-out forwards} @keyframes exBloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}} .f3-stage .ex{position:absolute;left:9.7%;top:3.3%;width:80.6%;z-index:1;pointer-events:none;overflow:visible} .ex .ex-ring{transform-origin:200px 200px;transform-box:view-box;opacity:0;transform:scale(.7) rotate(-90deg)} .ex .ex-ring circle{fill:none;stroke:rgba(241,212,138,.5);stroke-width:.8} .ex .ex-ring circle.d{stroke-dasharray:2 5;stroke:rgba(241,212,138,.4)} .ex .ex-ring text{fill:rgba(241,212,138,.6);font-size:8px;letter-spacing:3px;font-family:"Cormorant Garamond","Hina Mincho",serif} .f3-stage.grow .ex-ring{animation:exRing 1.6s cubic-bezier(.2,.8,.2,1) forwards,mgSpin 90s linear 1.6s infinite} @keyframes exRing{to{opacity:1;transform:scale(1) rotate(0)}} .ex .ex-b{opacity:0} .f3-stage.grow .ex-b{animation:vowUp .8s ease forwards;animation-delay:calc(.9s + var(--i)*.25s)} .ex .ex-b line{stroke:rgba(241,212,138,.55);stroke-width:1;stroke-dasharray:2 3} .ex .ex-b circle{fill:rgba(18,26,42,.85);stroke:rgba(241,212,138,.6);stroke-width:1;stroke-dasharray:3 2;filter:drop-shadow(0 0 5px rgba(241,212,138,.45))} .ex .ex-b text{fill:#F1D48A;font-size:7.5px;text-anchor:middle;font-family:"Hina Mincho",serif} .ex .ex-cap{fill:rgba(241,212,138,.75);font-size:9px;text-anchor:middle;letter-spacing:2px;opacity:0;font-family:"Hina Mincho",serif} .f3-stage.grow .ex-cap{animation:vowUp 1s ease 2.6s forwards} .f3-stage .ex .ex-b text{transform:none} .ex-replay{display:block;margin:4px auto 0;border:1px solid rgba(226,194,122,.45);background:rgba(18,26,42,.6);color:#E6D3A2;border-radius:999px;padding:4px 14px;font:inherit;font-size:.78rem;cursor:pointer} .f3-stage.grow~.f3-tease{transition:opacity .6s} @media (prefers-reduced-motion:reduce){.ex,.ex-replay{display:none}} .ex .ex-b text{font-size:9.5px!important}.f3-stage.shrunk .wa-ring{transform:scale(.72)} /* 外側の魔法陣：衛星の円・大きな重なる円・小さな印（10-30 TOMO見本） */ .ex .ex-ring circle.w{stroke:rgba(241,212,138,.55);stroke-width:1.2;stroke-dasharray:none} .ex .ex-geo{opacity:0;transform-origin:200px 200px;transform-box:view-box} .f3-stage.grow .ex-geo{animation:exRing 2s ease .6s forwards} .ex .ex-geo circle,.ex .ex-geo polygon{fill:none;stroke:rgba(241,212,138,.22);stroke-width:.7} .ex .ex-geo polygon{stroke:rgba(241,212,138,.3)} .ex .ex-b circle.o{fill:rgba(18,26,42,.9);stroke:rgba(241,212,138,.6);stroke-width:.9;stroke-dasharray:none;filter:drop-shadow(0 0 5px rgba(241,212,138,.4))} .ex .ex-b circle.m{fill:none;stroke:rgba(241,212,138,.4);stroke-width:.6;stroke-dasharray:none;filter:none} .ex .ex-b circle.c{fill:rgba(18,26,42,.95);stroke:rgba(241,212,138,.75);stroke-width:1;stroke-dasharray:none;filter:none} .ex .ex-b .tk line{stroke:rgba(241,212,138,.55);stroke-width:.6;stroke-dasharray:none} .ex .ex-b .ex-rt{fill:rgba(241,212,138,.55)!important;font-size:3.6px!important;letter-spacing:1px;font-family:"Cormorant Garamond",serif} .ex .ex-b text.lb{fill:#F1D48A;font-size:8.6px!important;text-anchor:middle;font-family:"Hina Mincho",serif} .ex .ex-sat{animation:mgSpin 30s linear infinite} .ex .ex-b:nth-child(2n) .ex-sat{animation-direction:reverse} .ex .ex-b line.ex-sp{stroke:rgba(241,212,138,.5);stroke-width:.9;stroke-dasharray:2 3} .ex .ex-gl{opacity:0} .f3-stage.grow .ex-gl{animation:vowUp .6s ease forwards;animation-delay:calc(1.8s + var(--i)*.06s)} .ex .ex-gl circle{fill:rgba(18,26,42,.9);stroke:rgba(241,212,138,.55);stroke-width:.6} .ex .ex-gl circle.dt{fill:rgba(241,212,138,.8);stroke:none} .ex-replay{display:none!important} .f3-stage .ex{transition:opacity 1.4s ease} .f3-stage.fade .ex{opacity:0} .f3-stage.fade .wa-ring .wr-p,.f3-stage.fade .wa-ring .wr-ln,.f3-stage.fade .wa-ring .pm-web{transition:opacity 1.2s ease!important;opacity:.15!important} /* 外側の魔法陣：3つの見せ方（10-30 TOMO） */ .ex .ex-fl{transform-box:view-box} .ex .ex-fl circle.halo{fill:none;stroke:none;opacity:0;transition:opacity .5s} .ex .ex-b.lit circle.halo{opacity:1;fill:rgba(255,226,150,.16);stroke:#F7D57A;stroke-width:1.6;filter:drop-shadow(0 0 10px rgba(255,214,120,.95))} .ex .ex-b.lit circle.o,.f3-stage.p3 .ex circle.o{stroke:#FFE7A8;stroke-width:1.6;filter:drop-shadow(0 0 12px rgba(255,214,120,1))} .ex .ex-b.lit circle.c,.f3-stage.p3 .ex circle.c{stroke:#FFE7A8;stroke-width:1.6;fill:rgba(60,48,20,.95)} .ex .ex-b.lit text.lb,.f3-stage.p3 .ex text.lb{fill:#FFF3D0} .ex .ex-b.lit .ex-fl{animation:exPulse .7s ease} @keyframes exPulse{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}} .ex .ex-fx path,.ex .ex-fx line,.ex .ex-fx circle{fill:none;stroke:#F7D57A;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;filter:drop-shadow(0 0 5px rgba(255,214,120,.9));transition:stroke-dashoffset .9s ease,opacity .5s} .ex .ex-fx .ex-all{stroke-width:.9;opacity:0} .f3-stage.p1 .ex .ex-arc{opacity:1;stroke-dashoffset:0;transition-delay:calc(var(--i)*.52s + .3s)} .f3-stage.p3 .ex .ex-all{opacity:.75;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease,opacity .5s;transition-delay:calc(var(--i)*.12s)} .f3-stage.p3 .ex .ex-rim,.f3-stage.p3 .ex .ex-arc{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease,opacity .5s} .ex .ex-ray{stroke:#F7D57A;stroke-width:2;stroke-linecap:round;opacity:0;stroke-dasharray:0 200;filter:drop-shadow(0 0 6px rgba(255,214,120,.95))} .f3-stage.p2 .ex .ex-ray{animation:exRay 2.8s ease forwards;animation-delay:calc(var(--i)*.15s)} @keyframes exRay{0%{opacity:0;stroke-dasharray:0 200}30%{opacity:1;stroke-dasharray:40 200;stroke-dashoffset:0}75%{opacity:.9;stroke-dasharray:30 200;stroke-dashoffset:-60}100%{opacity:0;stroke-dasharray:10 200;stroke-dashoffset:-90}} .f3-stage.p2 .ex .ex-fl{animation:exFlip 1.8s cubic-bezier(.5,0,.3,1) forwards;animation-delay:calc(var(--i)*.15s)} @keyframes exFlip{0%{transform:scaleX(1)}25%{transform:scaleX(.05)}50%{transform:scaleX(-1)}75%{transform:scaleX(.05)}100%{transform:scaleX(1)}} .f3-stage.p2 .ex circle.o{stroke:#FFE7A8;filter:drop-shadow(0 0 10px rgba(255,214,120,.9))} /* つながりの星図ログ：横軸＝月、縦＝人。パッパッと現れて、人と人が弧で結ばれる（10-30） */ .cnx ul{display:none} .cx{display:block;width:100%;height:auto;margin:8px 0 2px;overflow:visible} .cx-m{fill:#C9A65A;font-size:9px;text-anchor:middle;font-family:"Hina Mincho",serif} .cx-v{stroke:rgba(226,194,122,.14);stroke-width:.6;stroke-dasharray:2 3} .cx-hit{fill:transparent;cursor:pointer} .cx-row.on .cx-hit{fill:rgba(226,194,122,.07)} .cx-n{fill:#E6DCC6;font-size:10.5px;font-family:"Hina Mincho",serif;cursor:pointer} .cx-row.on .cx-n{fill:#FFE7B0;font-weight:700} .cx-dot0{fill:var(--c);filter:drop-shadow(0 0 4px var(--c))} .cx-l{stroke:var(--c);stroke-linecap:round;opacity:0;animation:cxPop 12s ease infinite;animation-delay:var(--t)} .cx-l.dot{stroke-dasharray:1.5 4;stroke:color-mix(in srgb,var(--c) 70%,#fff)} .cx-p{fill:#141B2C;stroke:var(--c);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:cxDot 12s ease infinite;animation-delay:var(--t)} .cx-p.e{stroke-dasharray:2 2;fill:none} .cx-p.now{fill:var(--c);filter:drop-shadow(0 0 6px var(--c))} .cx-link path{fill:none;stroke:#F1D48A;stroke-width:1;stroke-dasharray:2 3;opacity:0;animation:cxPop 12s ease infinite;animation-delay:var(--t);filter:drop-shadow(0 0 3px rgba(241,212,138,.8))} .cx-link text{fill:#F1D48A;font-size:7px;opacity:0;animation:cxPop 12s ease infinite;animation-delay:var(--t);font-family:"Hina Mincho",serif} @keyframes cxPop{0%{opacity:0}4%{opacity:1}82%{opacity:1}92%,100%{opacity:0}} @keyframes cxDot{0%{opacity:0;transform:scale(.2)}3%{opacity:1;transform:scale(1.6)}6%{transform:scale(1)}82%{opacity:1}92%,100%{opacity:0}} .cx-tip{margin:0;color:#BFAF8A!important;font-size:.74rem} .cx-det{margin-top:6px;padding:10px 12px;border-radius:12px;border:1px solid rgba(226,194,122,.28);box-shadow:inset 3px 0 0 var(--c);background:rgba(255,255,255,.03);display:grid;grid-template-columns:1fr auto;gap:2px 8px;animation:vowUp .4s ease both} .cx-det b{display:flex;align-items:center;gap:7px;color:#F7E3B5;font-family:"Hina Mincho",serif} .cx-det b i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)} .cx-tr{font-size:.7rem;color:#E6D3A2;border:1px solid rgba(226,194,122,.45);border-radius:999px;padding:0 8px;align-self:center} .cx-det dl{grid-column:1/-1;margin:2px 0 0;font-size:.8rem;line-height:1.6} .cx-det dt{color:#C9A65A;font-size:.68rem;margin-top:3px}.cx-det dd{margin:0;color:#E6DCC6} @media (prefers-reduced-motion:reduce){.cx-l,.cx-p,.cx-link path,.cx-link text{animation:none;opacity:1}} .cx-link text{paint-order:stroke;stroke:#171E30;stroke-width:3px;stroke-linejoin:round} /* 時期の半円：ループごとにガッコンと移る */ .wa-ring.mvon .wr-arc.on:not(.wr-mv){stroke:rgba(226,194,122,.22);filter:none} .wa-ring .wr-mv{transform-box:view-box;transform-origin:200px 200px;transition:transform .58s cubic-bezier(.55,-.35,.3,1.45),stroke .25s ease,filter .25s ease} .wa-ring.pm .wr-arc.on.wr-mv.blu{stroke:#8FD3FF;filter:drop-shadow(0 0 12px rgba(120,200,255,.95)) drop-shadow(0 0 4px #CFEFFF)} .wa-ring.pm .wr-arc.on.wr-mv.kon{stroke-width:12} .wa-ring .wr-st{transition:fill .35s ease} /* 3階：視点の切り替え・輪のあと右に時間の地図・便りは下に横広く */ .f3-grid{grid-template-columns:minmax(0,1fr)!important} .f3-pov{display:inline-flex;align-items:center;gap:4px;margin:10px auto 2px;padding:4px;border-radius:999px;border:1px solid rgba(226,194,122,.4);background:rgba(10,14,26,.45)} .f3-pov span{font-size:.7rem;color:#C9A65A;padding:0 8px 0 10px;letter-spacing:.1em;font-family:"Hina Mincho",serif} .f3-pov button{font:inherit;font-size:.82rem;color:#E6DCC6;background:none;border:0;border-radius:999px;padding:5px 14px;cursor:pointer;font-family:"Hina Mincho",serif;transition:background .3s,color .3s,box-shadow .3s} .f3-pov button.on{background:linear-gradient(180deg,#F1D48A,#C9A15A);color:#1A2233;box-shadow:0 0 12px rgba(241,212,138,.55)} .f3-pov button:not(.on):hover{background:rgba(226,194,122,.14)} .f3-povn{margin:4px 0 0!important;font-size:.76rem!important;min-height:1.4em} .wa-ring.pm .wr-p.me>circle{fill:#141B2C!important;stroke:#F1D48A;stroke-width:2.6;filter:drop-shadow(0 0 8px rgba(242,184,128,.9))} .wa-ring.pm .wr-p.me text{fill:#1A2233!important;font-weight:700} .f3-stage{transform-style:flat;will-change:transform} .f3-stage.spin3d{animation:stSpin 1.5s cubic-bezier(.6,0,.25,1)} @keyframes stSpin{0%{transform:perspective(1400px) rotateY(0)}100%{transform:perspective(1400px) rotateY(360deg)}} .cnx-hd b small{font-size:.72rem;color:#C9A65A;letter-spacing:.06em} .cnx-who{color:#FFE7B0} .cx-v.wk{stroke:rgba(226,194,122,.07)} .cx-wk{fill:rgba(226,194,122,.45)}.cx-wk.mo{fill:#E2C27A} .cx-p.wk{stroke-width:1} .cx-body.flip{animation:cxFlip .7s cubic-bezier(.2,.7,.3,1) both} @keyframes cxFlip{0%{opacity:0;transform:perspective(900px) rotateX(-70deg)}100%{opacity:1;transform:none}} @media (min-width:900px){ .f3-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0fr);gap:0;align-items:center;transition:grid-template-columns 1.4s cubic-bezier(.5,0,.2,1),gap 1.4s} .f3-duo .f3-l{max-width:520px;width:100%;justify-self:center} .f3-duo .f3-r{overflow:hidden;opacity:0;transform:translateX(30px);transition:opacity .9s ease .9s,transform 1.1s ease .8s} .f3-duo.spread{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px} .f3-duo.spread .f3-r{opacity:1;transform:none;overflow:visible} .f3-duo .cnx{margin-top:0;min-width:460px} .f3-news .upd-tick ul{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .f3-news .upd-tick{height:420px} } @media (prefers-reduced-motion:reduce){.f3-stage.spin3d,.cx-body.flip{animation:none}.f3-duo{transition:none}} /* 版190：あなたのしるし・ログ左の縦の半円 */ .wa-ring.pm .wr-p.me text.me-t{fill:#FFE7B0!important;font-family:"Yuji Syuku","Hina Mincho",serif;paint-order:stroke;stroke:#131A29;stroke-width:3px} .wa-ring.pm .wr-p .me-mk circle{fill:var(--f)!important;stroke:none;filter:none} .wa-ring.pm .wr-p .me-mk circle.rg{fill:none!important;stroke:#E2C27A;stroke-width:1.2} .wa-ring.pm .wr-p .me-mk circle.mc{stroke:none} .wa-ring .pm-yt.pv-c{font-size:20px} .cx-alt .cx-arc{fill:none;stroke:#E2C27A;stroke-width:1.6;filter:drop-shadow(0 0 4px rgba(241,212,138,.7));transition:stroke .25s,filter .25s} .cx-alt .cx-arc2{fill:none;stroke:rgba(226,194,122,.3);stroke-width:.7;stroke-dasharray:1 3} .cx-tk{stroke:rgba(226,194,122,.55);stroke-width:.7} .cx-strat{stroke:rgba(226,194,122,.16);stroke-width:.6;stroke-dasharray:3 3} .cx-rom{fill:#C9A65A;font-size:9.5px;text-anchor:middle;font-family:"Cormorant Garamond",serif;font-style:italic} .cx-alt-h{fill:#C9A65A;font-size:7px;text-anchor:end;font-family:"Hina Mincho",serif} .cx-star{fill:#FFE7B0;filter:drop-shadow(0 0 3px #F1D48A)} .cx-mv{transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .75s cubic-bezier(.55,-.4,.3,1.5)} .cx.ranked .cx-mv{transform:none} .cx.blu .cx-arc{stroke:#8FD3FF;filter:drop-shadow(0 0 7px rgba(120,200,255,.95))} .cx.blu .cx-rom,.cx.blu .cx-star{fill:#BFE6FF} .cx.kon .cx-arc{stroke-width:2.6} .cx.kon .cx-rom{fill:#FFE7B0} .cx-nm .cx-n{transition:fill .3s} @media (prefers-reduced-motion:reduce){.cx-mv{transition:none}} /* 誓い：光の線が左から右へ文字をなぞり、一段ずつ降りていく（版191） */ .vow-t span:not(.sp){position:relative;width:fit-content;max-width:100%;margin:0 auto;opacity:1;transform:none;filter:drop-shadow(0 0 5px rgba(0,0,0,.95));text-shadow:none; color:transparent;-webkit-background-clip:text;background-clip:text; background-image:linear-gradient(90deg,#F4E9D2 0 46%,#FFFBEA 48.5%,#FFE7B0 50%,transparent 52% 100%);background-size:220% 100%;background-position:100% 0} .vow-t span:not(.sp)::after{content:"";position:absolute;left:0;bottom:.12em;width:2.6em;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#FFE7B0 60%,#FFFBEA);box-shadow:0 0 10px 2px rgba(255,214,140,.85),0 0 22px 4px rgba(255,200,110,.4);opacity:0;transform:translateX(-2.6em)} .vow.on .vow-t span:not(.sp){animation:vowTrace 1.7s cubic-bezier(.4,.05,.45,1) forwards;animation-delay:calc(3.6s + var(--n) * 1.35s)} .vow.on .vow-t span:not(.sp)::after{animation:vowHead 1.7s cubic-bezier(.4,.05,.45,1) forwards;animation-delay:calc(3.6s + var(--n) * 1.35s)} @keyframes vowTrace{from{background-position:100% 0}to{background-position:0 0}} @keyframes vowHead{0%{opacity:0;left:0;transform:translateX(-2.6em)}12%{opacity:1}85%{opacity:1}100%{opacity:0;left:100%;transform:translateX(-1em)}} .vow.on .vow-sig{animation-delay:24.6s} .vow.on .vow-note{animation-delay:26s} .vow.on .vow-sign{animation-delay:27.2s} @media (prefers-reduced-motion:reduce){.vow-t span:not(.sp){color:#F4E9D2;background:none}.vow-t span:not(.sp)::after{display:none}} /* 星図ログの半円：上から流れ星のように描く（版191） */ .cx-alt .cx-arc{stroke-dasharray:1 1;stroke-dashoffset:1} .cx.draw .cx-alt .cx-arc{transition:stroke-dashoffset 1.4s cubic-bezier(.55,0,.35,1);stroke-dashoffset:0} .cx-arc-hd{fill:none;stroke:#FFF6DA;stroke-width:4;stroke-linecap:round;stroke-dasharray:.08 1.2;stroke-dashoffset:.08;opacity:0;filter:blur(1.6px) drop-shadow(0 0 6px #FFE7B0) drop-shadow(0 0 14px rgba(255,210,120,.9))} .cx.draw .cx-arc-hd{animation:cxStar 1.5s cubic-bezier(.55,0,.35,1) forwards} @keyframes cxStar{0%{opacity:0;stroke-dashoffset:.08}10%{opacity:1}88%{opacity:1}100%{opacity:0;stroke-dashoffset:-.95}} .cx-alt .cx-tk,.cx-alt .cx-rom,.cx-alt .cx-star,.cx-alt .cx-alt-h,.cx-alt .cx-arc2,.cx-strat{opacity:0;transition:opacity .8s ease} .cx.drawn .cx-alt .cx-tk,.cx.drawn .cx-alt .cx-rom,.cx.drawn .cx-alt .cx-star,.cx.drawn .cx-alt .cx-alt-h,.cx.drawn .cx-alt .cx-arc2,.cx.drawn .cx-strat{opacity:1} .cx.drawn .cx-alt .cx-arc{animation:cxFlare 1.1s ease-out} @keyframes cxFlare{0%{filter:drop-shadow(0 0 4px rgba(241,212,138,.7))}30%{filter:blur(.6px) drop-shadow(0 0 10px #FFF1C8) drop-shadow(0 0 26px rgba(255,205,110,.95));stroke-width:3.2}100%{filter:drop-shadow(0 0 4px rgba(241,212,138,.7))}} @media (prefers-reduced-motion:reduce){.cx-alt .cx-arc{stroke-dashoffset:0}.cx-arc-hd{display:none}.cx-alt .cx-tk,.cx-alt .cx-rom,.cx-alt .cx-star,.cx-alt .cx-alt-h,.cx-alt .cx-arc2,.cx-strat{opacity:1}} /* 誓い：全部の行を書き終えたら、文字全体がふわっと金色に光る（版192） */ .vow.on .vow-t{animation:vowGold 3.2s ease-out 24.4s forwards} @keyframes vowGold{0%{filter:none}35%{filter:sepia(1) saturate(2.4) brightness(1.4) drop-shadow(0 0 10px rgba(255,214,130,.95)) drop-shadow(0 0 26px rgba(255,190,90,.6))}100%{filter:sepia(.75) saturate(1.9) brightness(1.15) drop-shadow(0 0 6px rgba(255,210,120,.7))}} .vow.on .vow-sig{animation-delay:26.4s} .vow.on .vow-note{animation-delay:27.8s} .vow.on .vow-sign{animation-delay:29s} /* スマホ：三人の看護師を横にスライド（版194） */ .p-car{position:relative;min-width:0;max-width:100%} .p-arr,.p-hint{display:none} @media (max-width:760px){ #tlFold .three{display:flex!important;grid-template-columns:none;width:calc(100% + 32px)!important;max-width:none;box-sizing:border-box;margin-inline:-16px;padding:26px 9vw 30px;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} #tlFold .three::-webkit-scrollbar{display:none} #tlFold .three .person,#tlFold .three .person.p-on{grid-area:auto;flex:0 0 82vw;max-width:340px;scroll-snap-align:center;visibility:visible;opacity:.55;transform:scale(.95);transition:opacity .5s ease,transform .5s ease} #tlFold .three .person.p-on{opacity:1;transform:none} .p-arr{display:grid;place-items:center;position:absolute;top:38%;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid rgba(226,194,122,.7);background:rgba(14,18,28,.72);color:#FFE7B0;font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 0 12px rgba(226,194,122,.4);backdrop-filter:blur(2px)} .p-arr.l{left:4px}.p-arr.r{right:4px} .p-hint{display:flex;justify-content:center;align-items:center;gap:10px;margin:2px 0 0;font-size:.74rem;color:#C9A65A;letter-spacing:.06em;transition:opacity .6s} .p-hint span{display:inline-block;font-size:1.1rem;animation:pHint 1.6s ease-in-out infinite} .p-hint span:last-child{animation-name:pHintR} .p-hint.done{opacity:.45} } @keyframes pHint{50%{transform:translateX(-5px)}} @keyframes pHintR{50%{transform:translateX(5px)}} @media (prefers-reduced-motion:reduce){.p-hint span{animation:none}} /* 歴史の間：浮いている本はいったん消す。開く入口は「記録の本を、そっと開く」の文字だけ残す（版196） */ .sr-key{background:none!important;box-shadow:none!important;animation:none!important;border:0} .sr-key .sr-spine{visibility:hidden} .sr-key em{cursor:pointer;opacity:1;border:1px solid rgba(226,194,122,.55)} .sr-key:hover em,.sr-key:focus-visible em{background:rgba(40,28,14,.85);box-shadow:0 0 14px rgba(226,194,122,.5)} /* 版197 歴史の間：本の文字をやめ、絵の宝箱に触れると開く */ .sr-key.sr-tb{position:absolute!important;left:56%!important;top:63%!important;bottom:auto!important;width:17%!important;height:28%!important;min-width:0!important;padding:0;background:none!important;box-shadow:none!important;border:0!important;border-radius:14px;transform:none!important;animation:none!important;opacity:1!important;cursor:pointer;-webkit-tap-highlight-color:transparent} .sr-tb .sr-halo{position:absolute;inset:-6% -4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,226,150,.38),rgba(255,210,120,.12) 55%,transparent 75%);mix-blend-mode:screen;animation:chestPulse 2.8s ease-in-out infinite;pointer-events:none} .sr-tb .sr-dust{position:absolute;inset:0;pointer-events:none;background:radial-gradient(2px 2px at 30% 40%,#FFF3C8,transparent),radial-gradient(1.6px 1.6px at 62% 28%,#FFE7A8,transparent),radial-gradient(2px 2px at 48% 55%,#FFF,transparent),radial-gradient(1.4px 1.4px at 72% 48%,#FFE7A8,transparent);animation:chestDust 3.4s ease-in-out infinite} .sr-tb:hover .sr-halo,.sr-tb:focus-visible .sr-halo{animation-duration:1.2s;background:radial-gradient(closest-side,rgba(255,230,160,.6),rgba(255,210,120,.2) 55%,transparent 78%)} .sr-tb:focus-visible{outline:2px solid rgba(226,194,122,.8);outline-offset:4px} .sr-tb.go .sr-halo{animation:chestBurst .9s ease-out forwards} @keyframes chestPulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}} @keyframes chestDust{0%{opacity:0;transform:translateY(8px)}40%{opacity:1}100%{opacity:0;transform:translateY(-18px)}} @keyframes chestBurst{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(9)}} .sr-wall.flash::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 64% 76%,rgba(255,236,180,.95),rgba(255,214,130,.4) 30%,transparent 70%);animation:wallFlash .9s ease-out forwards;pointer-events:none} @keyframes wallFlash{0%{opacity:0}35%{opacity:1}100%{opacity:1}} @media (prefers-reduced-motion:reduce){.sr-tb .sr-halo,.sr-tb .sr-dust{animation:none}} /* 版198 ひみつの部屋：TOMOの絵に、触れられる場所を重ねる */ .sr-room.ss{display:block;padding:0;border:0;background:none} .ss-pic{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(226,194,122,.45);box-shadow:0 0 0 6px rgba(58,37,22,.9),0 30px 60px -24px #000} .ss-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} .ss-h{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);font:inherit;padding:0;border:0;background:none;cursor:pointer;border-radius:14px;-webkit-tap-highlight-color:transparent;transition:background .35s,box-shadow .35s} .ss-h::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,var(--c) 45%,transparent 72%);box-shadow:0 0 12px 3px var(--c);animation:ssDot 2.6s ease-in-out infinite;opacity:.9} .ss-h:nth-child(3n)::before{animation-delay:-.9s}.ss-h:nth-child(3n+1)::before{animation-delay:-1.7s} .ss-h em{position:absolute;left:50%;top:50%;transform:translate(-50%,14px);white-space:nowrap;font-style:normal;font-size:.74rem;letter-spacing:.1em;color:#FFF3D6;padding:3px 10px;border-radius:999px;background:rgba(11,9,18,.66);border:1px solid color-mix(in srgb,var(--c) 70%,transparent);text-shadow:0 1px 4px #000;opacity:.85;transition:opacity .3s,transform .3s;pointer-events:none} .ss-h:hover,.ss-h:focus-visible{background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent),0 0 24px color-mix(in srgb,var(--c) 45%,transparent);outline:0} .ss-h:hover em,.ss-h:focus-visible em{opacity:1;transform:translate(-50%,18px)} @keyframes ssDot{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1.25);opacity:1}} .ss-tip{text-align:center;color:#E2C27A;margin:14px 0 8px;letter-spacing:.12em} .ss-list{display:none;flex-wrap:wrap;gap:8px;justify-content:center} .ss-list button{font:inherit;font-size:.82rem;cursor:pointer;color:#FFF3D6;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--c) 70%,transparent)} @media (max-width:760px){.ss-h em{display:none}.ss-list{display:flex}.ss-h::before{width:10px;height:10px;margin:-5px 0 0 -5px}} @media (prefers-reduced-motion:reduce){.ss-h::before{animation:none}} .sr-himori{font-size:1.02rem;line-height:1.9;color:#F4E8D0;margin:10px 0 6px;padding:12px 16px;border-left:3px solid #C9B6E8;background:rgba(201,182,232,.08);border-radius:0 10px 10px 0} /* 版199 ひみつの部屋：ボタンと文字を金色に光らせる（プレミアム感） */ .ss-h::before{background:radial-gradient(circle,#FFFBE8 0 25%,#F2C964 50%,transparent 74%);box-shadow:0 0 14px 4px rgba(242,201,100,.85)} .ss-h em{opacity:1;color:#FFE9A8;font-weight:600;background:linear-gradient(180deg,rgba(46,32,12,.92),rgba(20,14,6,.92));border:1.5px solid #E2C27A;box-shadow:0 0 0 1px rgba(255,236,170,.25) inset,0 0 12px rgba(226,194,122,.55);animation:ssGlow 2.8s ease-in-out infinite} .ss-h:hover em,.ss-h:focus-visible em{color:#FFF6D8;box-shadow:0 0 0 1px rgba(255,236,170,.45) inset,0 0 22px rgba(255,214,120,.9)} .ss-h:hover,.ss-h:focus-visible{background:radial-gradient(closest-side,rgba(242,201,100,.28),transparent);box-shadow:inset 0 0 0 1.5px rgba(242,201,100,.8),0 0 26px rgba(242,201,100,.5)} @keyframes ssGlow{0%,100%{text-shadow:0 0 4px rgba(255,214,120,.5),0 1px 3px #000;box-shadow:0 0 0 1px rgba(255,236,170,.2) inset,0 0 8px rgba(226,194,122,.4)}50%{text-shadow:0 0 10px rgba(255,224,140,1),0 0 18px rgba(255,200,90,.7),0 1px 3px #000;box-shadow:0 0 0 1px rgba(255,236,170,.4) inset,0 0 18px rgba(242,201,100,.85)}} .ss-list button{color:#FFE9A8;font-weight:600;border:1.5px solid #E2C27A;background:linear-gradient(180deg,rgba(60,42,16,.9),rgba(24,17,8,.9));animation:ssGlow 2.8s ease-in-out infinite} .ss-list button:nth-child(3n+2){animation-delay:-.9s}.ss-list button:nth-child(3n){animation-delay:-1.8s} .ss-h:nth-child(3n) em{animation-delay:-.9s}.ss-h:nth-child(3n+1) em{animation-delay:-1.8s} @media (prefers-reduced-motion:reduce){.ss-h em,.ss-list button{animation:none}} .sg-center .sg-brand{pointer-events:auto} .sg-out.brand-on .sg-brand:hover .sb-logo svg{filter:drop-shadow(0 0 26px rgba(255,236,180,1))} /* 版201 119番ボタンは試作のあいだ押せない */ .sos-main.sos-off{pointer-events:none;cursor:default;opacity:.55;filter:grayscale(.3);display:block;text-align:center} .sos-offnote{display:block;margin-top:8px;font-size:.82rem;line-height:1.6;color:#9A3B2E;font-weight:600} .sos-box .sos-life .sos-main.sos-off{font-size:1rem;color:#fff;background:#C8362C} /* 版202 緊急のつなぎはしない（10-31 TOMO方針）：窓口ボタンを落ち着いた色に、決まった1行 */ .top nav .nav-sos{color:var(--head,#2A3550)!important;background:color-mix(in srgb,var(--card,#fff) 92%,transparent)!important;border:1.5px solid color-mix(in srgb,#8A7A5A 55%,transparent)!important;animation:none!important;box-shadow:none!important;font-weight:500} .top nav .nav-sos i{background:#B9A26A!important} .top nav .nav-sos:hover,.top nav .nav-sos:focus-visible{background:#F4EEE2!important;color:#2A3550!important} body[data-floor="2"] .top nav .nav-sos,body[data-floor="3"] .top nav .nav-sos{background:transparent!important;color:#E9DFC8!important;border-color:rgba(226,194,122,.55)!important} .emg-line{font-size:.88rem;line-height:1.7;color:#7A3A2E;background:#FBF1EC;border:1px solid #E6C3B6;border-radius:10px;padding:8px 12px;margin:0 0 10px} body[data-floor="2"] .emg-line,body[data-floor="3"] .emg-line,.sec.dark .emg-line{color:#F3D9CF;background:rgba(224,100,90,.1);border-color:rgba(224,100,90,.4)} .sos-box .emg-line{margin:6px 0 8px} .top nav a[href="index.html#safe"]{color:var(--head,#2A3550);border-color:color-mix(in srgb,#8A7A5A 55%,transparent)} .top nav a[href="index.html#safe"]::before{background:#B9A26A} body[data-floor="2"] .top nav a[href="index.html#safe"],body[data-floor="3"] .top nav a[href="index.html#safe"]{color:#E9DFC8;border-color:rgba(226,194,122,.55)} .sos-box{--sr:#5A4A2E;background:#FFFBF3;border-color:#C9B48A} :root[data-theme="dark"] .sos-box{background:#1E1A14;--sr:#E9D7AE} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sos-box{background:#1E1A14;--sr:#E9D7AE}} .sos-box .sos-sub{color:#4A3E2A}:root[data-theme="dark"] .sos-box .sos-sub{color:#E9DFC8} /* 版203 灯守のしくみ（いちばん下の欄から開く、目立たせない1ページ） */ .hm .hm-promise{list-style:none;padding:0;display:grid;gap:8px} .hm .hm-promise li{position:relative;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--card,#fff) 85%,transparent)} .hm .hm-promise li::before{content:"";position:absolute;left:13px;top:1.05em;width:9px;height:9px;border-radius:50%;background:#E2C27A;box-shadow:0 0 6px rgba(226,194,122,.8)} .hm .hm-flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:none} .hm .hm-flow li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:14px 10px;border:1px solid var(--line);border-radius:12px;font-size:.9rem;line-height:1.6} .hm .hm-flow li b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2A3550;color:#F7E7BE;font-weight:700} .hm .hm-flow li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:8px;height:8px;border-top:2px solid #B99A55;border-right:2px solid #B99A55;transform:translateY(-50%) rotate(45deg)} .hm .hm-rings{margin:10px auto 18px;max-width:380px} .hm .hm-rings svg{width:100%;height:auto;display:block} @media (max-width:760px){.hm .hm-flow{grid-template-columns:1fr}.hm .hm-flow li{flex-direction:row;text-align:left}.hm .hm-flow li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-9px;transform:translateX(-50%) rotate(135deg)}} /* 版204 料金：ひとつ灯・ふたつ灯・みつ灯（前のすべて＋α） */ .pr-steps{list-style:none;padding:0;margin:4px auto 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:620px} .pr-steps li{text-align:center;padding:10px 6px;border-radius:999px;border:1.5px dashed color-mix(in srgb,var(--line) 90%,#999);color:color-mix(in srgb,var(--ink,#333) 60%,transparent)} .pr-steps li b{display:block;font-size:1rem}.pr-steps li small{font-size:.74rem} .pr-steps li.on{border:2px solid #E2C27A;color:var(--head,#2A3550);background:color-mix(in srgb,#E2C27A 16%,transparent);box-shadow:0 0 14px rgba(226,194,122,.45)} .pr-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch} .pr-plan{display:flex;flex-direction:column;gap:6px;border-top:4px solid var(--pc,var(--line))} .pr-plan>b{font-size:1.2rem;display:flex;align-items:center;gap:8px} .pr-plan .p{font-size:1.4rem;font-weight:700;color:var(--head)} .pr-plan ul{margin:4px 0 0;padding-left:1.2em;font-size:.9rem;line-height:1.7} .pr-all{margin:2px 0 0;font-size:.82rem;font-weight:700;color:color-mix(in srgb,var(--pc) 70%,#333)} .pr-dots{display:inline-flex;gap:3px}.pr-dots s{width:10px;height:10px;border-radius:50%;background:var(--pc);box-shadow:0 0 8px var(--pc)} .pr-try{margin:auto 0 0;font-size:.82rem;padding:8px 10px;border-radius:8px;background:color-mix(in srgb,#7CC6E8 16%,transparent)} .pr-h{margin:26px 0 10px;font-size:1.15rem} .pr-note{margin-top:16px;border-left:4px solid #7CC6E8} @media (max-width:980px){.pr-plans{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){.pr-plans{grid-template-columns:1fr}} /* 版206 何をお探しですか */ .top nav .nav-find{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.86rem;color:var(--head,#2A3550);background:color-mix(in srgb,var(--card,#fff) 92%,transparent);border:1.5px solid color-mix(in srgb,#8A7A5A 55%,transparent);border-radius:999px;padding:3px 12px 3px 9px;cursor:pointer;white-space:nowrap;margin-right:6px} .top nav .nav-find i{width:12px;height:12px;border:2px solid currentColor;border-radius:50%;position:relative;flex:none} .top nav .nav-find i::after{content:"";position:absolute;width:2px;height:6px;background:currentColor;right:-4px;bottom:-5px;transform:rotate(-45deg)} body[data-floor="2"] .top nav .nav-find,body[data-floor="3"] .top nav .nav-find{background:transparent;color:#E9DFC8;border-color:rgba(226,194,122,.55)} .find-box{border-color:#C9B48A;box-shadow:0 0 0 4px rgba(201,180,138,.18),0 24px 60px -20px rgba(0,0,0,.6)} .find-pop.on .find-box{animation:none} .find-box h2{margin:0 0 10px;font-size:1.2rem} .find-in{width:100%;font:inherit;font-size:1rem;padding:11px 14px;border-radius:999px;border:1.5px solid #C9B48A;background:#fff;color:#2B3140} .find-list{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px} .find-list a{display:block;text-decoration:none;color:var(--head);padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--card) 90%,transparent)} .find-list a:hover,.find-list a:focus-visible{border-color:#C9B48A;background:color-mix(in srgb,#E2C27A 12%,var(--card))} .find-list b{display:block;font-size:.95rem}.find-list small{font-size:.78rem;opacity:.8} @media (max-width:760px){.top nav .nav-find span{display:none}.top nav .nav-find{padding:5px 8px;margin-right:4px}} /* 版207 1階 灯の道（1階ととのえる・2階たもつ・3階そなえる） */ .troad{padding-top:34px;padding-bottom:34px} .tr-line{list-style:none;padding:0;margin:18px auto 0;max-width:820px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative} .tr-line::before{content:"";position:absolute;left:16.6%;right:16.6%;top:22px;height:2px;background:linear-gradient(90deg,#E2B24A,#D9CDAE 40%,#D9CDAE);z-index:0} .tr-line li{position:relative;z-index:1;text-align:center} .tr-line a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:inherit;padding:0 6px} .tr-line i{width:44px;height:44px;border-radius:50%;background:var(--bg,#FBF8F1);border:2px solid #D2C49E;position:relative} .tr-line i::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#E6DDC6} .tr-line li.on i{border-color:#E2B24A;box-shadow:0 0 0 6px rgba(242,201,100,.18),0 0 24px rgba(242,201,100,.9);animation:trGlow 3.2s ease-in-out infinite} .tr-line li.on i::after{background:radial-gradient(circle,#FFF6D6 0 30%,#F2C964 70%)} .tr-line b{font-family:var(--display);font-weight:500;font-size:1.08rem;color:var(--head);margin-top:4px} .tr-line small{font-size:.76rem;opacity:.8} .tr-line em{font-style:normal;font-size:.72rem;padding:2px 10px;border-radius:999px;border:1px solid #D2C49E;color:#8A7A5A;margin-top:2px} .tr-line li.on em{border-color:#E2B24A;color:#7A5A1E;background:rgba(242,201,100,.18);font-weight:700} .tr-note{text-align:center;margin-top:16px} @keyframes trGlow{0%,100%{box-shadow:0 0 0 6px rgba(242,201,100,.14),0 0 16px rgba(242,201,100,.6)}50%{box-shadow:0 0 0 9px rgba(242,201,100,.22),0 0 30px rgba(242,201,100,1)}} @media (prefers-reduced-motion:reduce){.tr-line li.on i{animation:none}} @media (max-width:560px){.tr-line i{width:36px;height:36px}.tr-line::before{top:18px}.tr-line i::after{inset:9px}.tr-line b{font-size:.98rem}.tr-line small{font-size:.68rem}} ruby.akari rt{font-size:.5em;letter-spacing:0;font-weight:400;opacity:.85} /* 版209 ととのえる・たもつ・そなえる：色とマーク、押すと解説 */ :root{--st-tt:#2F9479;--st-tm:#7E5BC0;--st-sn:#A9822F} :root[data-theme="dark"],body[data-floor="2"],body[data-floor="3"]{--st-tt:#7FD3B8;--st-tm:#C3A8F0;--st-sn:#E9C772} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--st-tt:#7FD3B8;--st-tm:#C3A8F0;--st-sn:#E9C772}} .st-tt{--sc:var(--st-tt)}.st-tm{--sc:var(--st-tm)}.st-sn{--sc:var(--st-sn)} .stw{display:inline-flex;align-items:center;gap:.35em;color:var(--sc)!important} .stm{width:1.25em;height:1.25em;flex:none;color:var(--sc)} .tr-line button{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 6px;cursor:pointer;width:100%;text-align:center} .tr-line button:focus-visible{outline:2px solid var(--sc);outline-offset:6px;border-radius:12px} .tr-line li i{border-color:color-mix(in srgb,var(--sc) 55%,transparent)} .tr-line li i::after{background:color-mix(in srgb,var(--sc) 30%,#E6DDC6)} .tr-line li.on i{border-color:var(--sc);box-shadow:0 0 0 6px color-mix(in srgb,var(--sc) 18%,transparent),0 0 24px color-mix(in srgb,var(--sc) 80%,transparent)} .tr-line li.on i::after{background:radial-gradient(circle,#fff 0 30%,var(--sc) 75%)} .tr-line li em{border-color:color-mix(in srgb,var(--sc) 60%,transparent);color:var(--sc)} .tr-line li.on em{background:color-mix(in srgb,var(--sc) 16%,transparent);color:var(--sc);border-color:var(--sc)} .tr-line u{font-size:.74rem;text-decoration:none;border-bottom:1px dotted var(--sc);color:var(--sc);margin-top:4px;opacity:.9} .tr-line button:hover u{opacity:1;border-bottom-style:solid} .tr-line b.stw{font-size:1.12rem} .st-box{border-color:var(--sc);box-shadow:0 0 0 4px color-mix(in srgb,var(--sc) 20%,transparent),0 24px 60px -20px rgba(0,0,0,.6)} .st-pop.on .st-box{animation:none} .st-box h2{font-size:1.3rem;margin:4px 0 12px} .st-k{font-size:.76rem;letter-spacing:.12em;color:var(--sc);font-weight:700} .st-box p,.st-box li{line-height:1.9} .st-box ul{padding-left:1.2em;margin:6px 0 12px} .st-box li::marker{color:var(--sc)} .st-here{padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--sc) 12%,transparent);border-left:3px solid var(--sc)} .st-note{opacity:.85} .st-k{display:block;margin-bottom:2px} .tr-line::before{background:linear-gradient(90deg,var(--st-tt),var(--st-tm) 50%,var(--st-sn))!important;opacity:.85} .tr-line li.on i{animation:stGlow 3.2s ease-in-out infinite} @keyframes stGlow{0%,100%{box-shadow:0 0 0 6px color-mix(in srgb,var(--sc) 14%,transparent),0 0 16px color-mix(in srgb,var(--sc) 60%,transparent)}50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--sc) 22%,transparent),0 0 30px var(--sc)}} @media (prefers-reduced-motion:reduce){.tr-line li.on i{animation:none}} /* 10-31 階のボタンに段階の名前（ととのえる・たもつ・そなえる） */ .stairs.flr a>span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05} .stairs.flr .fr-st{font-size:.62rem;letter-spacing:.02em;opacity:.95} .stairs.flr a.fr-1 .fr-st{color:#2F9479} .stairs.flr a.fr-2 .fr-st{color:#C3A8F0} .stairs.flr a.fr-3 .fr-st{color:#E9C772} @media (max-width:760px){ .stairs.flr a{width:auto;min-width:40px;padding:2px 4px 1px} .stairs.flr a>span{align-items:center} .stairs.flr .fr-st{font-size:.48rem;letter-spacing:-.02em} } /* 灯の道のしるしは、階のしるしをそのまま使う */ .stm{width:1.6em;height:1.6em} /* 10-31 版211 灯の道：階ボタンと同じ形の札＋横棒を光が行き来する */ .tr2::before{display:none} .tr2 .tr-rail{position:absolute;left:16.6%;right:16.6%;top:27px;height:4px;border-radius:4px;z-index:0;background:linear-gradient(90deg,#5FB3A1,#9B7BC8 50%,#E2C27A);opacity:.75} .tr2 .tr-orb{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,#BFF0DF 55%,rgba(95,179,161,0) 72%);box-shadow:0 0 14px 6px rgba(127,211,184,.55);animation:trOrb 7s ease-in-out infinite alternate} @keyframes trOrb{0%{left:0;background:radial-gradient(circle,#fff 0 25%,#BFF0DF 55%,rgba(95,179,161,0) 72%);box-shadow:0 0 14px 6px rgba(127,211,184,.6)} 50%{left:50%;background:radial-gradient(circle,#fff 0 25%,#DCCBF7 55%,rgba(155,123,200,0) 72%);box-shadow:0 0 14px 6px rgba(195,168,240,.6)} 100%{left:100%;background:radial-gradient(circle,#fff 0 25%,#F8E3A6 55%,rgba(226,194,122,0) 72%);box-shadow:0 0 14px 6px rgba(233,199,114,.6)}} .tr2 li:not(.tr-rail){z-index:1} .tr-pill{--fc:#5FB3A1;--fb:#FFF8EE;--ft:#2B3A36;--fn:#2F9479;display:flex;align-items:center;gap:8px;width:172px;height:58px;padding:0 14px 0 6px;border-radius:999px;background:var(--fb);border:2px solid color-mix(in srgb,var(--fc) 70%,transparent);box-sizing:border-box;transition:transform .2s,box-shadow .2s} .st-tm .tr-pill{--fc:#9B7BC8;--fb:#2B2340;--ft:#F1EAFB;--fn:#C3A8F0} .st-sn .tr-pill{--fc:#E2C27A;--fb:#131A29;--ft:#F5E2A8;--fn:#E9C772} .tr-ic{width:44px;height:44px;flex:none} .tr-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left} .tr-tx b{font-family:var(--display);font-size:1.15rem;color:var(--ft);margin:0;font-weight:600} .tr-nm{font-size:.98rem;letter-spacing:.04em;color:var(--fn);font-weight:700} .tr2 button:hover .tr-pill{transform:translateY(-2px)} .tr2 li.on .tr-pill{border-color:var(--fc);animation:pillGlow 3.4s ease-in-out infinite} @keyframes pillGlow{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--fc) 30%,transparent),0 0 14px 2px color-mix(in srgb,var(--fc) 45%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--fc) 22%,transparent),0 0 30px 10px color-mix(in srgb,var(--fc) 55%,transparent)}} .tr2 small{margin-top:8px} @media (max-width:560px){ .tr-pill{width:auto;height:auto;flex-direction:column;gap:2px;padding:6px 8px 7px;border-radius:18px;min-width:92px} .tr-ic{width:34px;height:34px} .tr-tx{align-items:center}.tr-tx b{font-size:.92rem}.tr-nm{font-size:.8rem} .tr2 .tr-rail{top:30px} } @media (prefers-reduced-motion:reduce){.tr2 .tr-orb,.tr2 li.on .tr-pill{animation:none}} /* 上の帯：階ボタンを同じ大きさに、いまの階はもわっと光る */ .stairs.flr a{width:128px;justify-content:flex-start} .stairs.flr a[aria-current="page"]{animation:flrGlow 3.4s ease-in-out infinite} @keyframes flrGlow{0%,100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--fc) 40%,transparent),0 0 10px 1px color-mix(in srgb,var(--fc) 50%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--fc) 28%,transparent),0 0 24px 8px color-mix(in srgb,var(--fc) 60%,transparent)}} @media (max-width:1180px){.stairs.flr a{width:108px}} @media (max-width:760px){.stairs.flr a{width:50px;min-width:0;justify-content:center}} @media (prefers-reduced-motion:reduce){.stairs.flr a[aria-current="page"]{animation:none}} .tr2 li.on small::after{content:"（いまは、ここ）";color:var(--sc);font-weight:700} .tr2 li:not(.on) small::after{content:"（準備中）"} .stairs.flr a{width:112px} @media (max-width:1180px){.stairs.flr a{width:100px}} @media (max-width:760px){.stairs.flr a{width:50px}} @media (max-width:1560px){.top .room-mark{display:none}} .tr2 li:not(.on) small::after{content:none} @media (min-width:761px) and (max-width:1560px){.top .lg-where{display:none}.top .logo{flex:none}} /* 10-31 版212 料金：段階の色・だれのため・プランごとのレポートの表 */ .pr-steps li{border-style:solid;font-weight:600} .pr-steps li:nth-child(1){border-color:#5FB3A1;color:#2F9479;background:#FFF8EE} .pr-steps li:nth-child(2){border-color:#9B7BC8;color:#E7DDF7;background:#2B2340} .pr-steps li:nth-child(3){border-color:#E2C27A;color:#F5E2A8;background:#131A29} .pr-for{font-weight:600;margin:6px 0 0} .pr-all-floors{text-align:center;margin:0 auto 18px;max-width:640px} .pr-tbl{overflow-x:auto;margin:6px 0 10px;border-radius:14px;border:1px solid var(--line)} .pr-tbl table{border-collapse:collapse;width:100%;min-width:640px;font-size:.86rem;line-height:1.6} .pr-tbl th,.pr-tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left} .pr-tbl thead th{background:color-mix(in srgb,var(--gold,#E2C27A) 14%,transparent);font-family:var(--display);white-space:nowrap} .pr-tbl thead th small{display:block;font-size:.72rem;font-weight:400;opacity:.8} .pr-tbl tbody th{white-space:nowrap;color:var(--head)} .pr-tbl tr:last-child th,.pr-tbl tr:last-child td{border-bottom:0} .st-go{text-align:center;margin:14px 0 0} /* 10-31 版213 資料の書庫：65歳未満の方・お子さんのご家族へ */ .u65-list{display:grid;gap:10px;margin-top:8px} .u65-cat{border-radius:16px;border:1px solid color-mix(in srgb,var(--line) 90%,transparent);background:color-mix(in srgb,var(--card) 85%,transparent)} .u65-cat summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;list-style:none;font-family:var(--display)} .u65-cat summary::-webkit-details-marker{display:none} .u65-cat summary::after{content:"＋";color:var(--gold);font-size:1.1rem} .u65-cat[open] summary::after{content:"－"} .u65-cat summary small{margin-left:auto;opacity:.7;font-size:.78rem} .u65-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;padding:0 14px 14px} .u65-k{display:inline-block;font-size:.7rem;padding:1px 10px;border-radius:999px;border:1px solid var(--c);color:var(--c);margin-bottom:4px} .u65-for{font-size:.8rem;opacity:.85} .u65-it{--c:#C9A65A;border:1px solid color-mix(in srgb,var(--line) 90%,transparent);border-radius:12px;padding:12px 14px;background:var(--card)} .u65-it a{font-size:.84rem} .wa-u65{font-size:.84rem;margin:6px 0 0} .u65-k{justify-self:start}.u65-cat summary small{white-space:nowrap} /* 10-31 玄関の1問：選ぶと灯がひとつともる */ .mt-greet .mg-box{position:relative} .mt-greet.lit .mg-box::before{content:"";position:absolute;left:50%;top:-18px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,#F8DFA0 55%,rgba(242,201,100,0) 72%);box-shadow:0 0 18px 8px rgba(242,201,100,.55);animation:seedLit 1.6s ease-out both} @keyframes seedLit{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.4);opacity:1}100%{transform:scale(1)}} .mt-greet .mg-btns{flex-wrap:wrap} /* 見学中の輪の下書き（上の帯） */ .sk-ring{display:inline-grid;place-items:center;width:38px;height:38px;margin-left:8px;border-radius:50%;text-decoration:none;flex:none;position:relative} .sk-ring svg{width:100%;height:100%;display:block} .sk-ring .sk-d{fill:none;stroke:#C9B48A;stroke-width:1;opacity:.55} .sk-ring .sk-d.on{fill:#F2C964;stroke:#E2B24A;opacity:1;filter:drop-shadow(0 0 2px #F2C964)} .sk-ring .sk-c{fill:none;stroke:#C9B48A;stroke-dasharray:2 3;opacity:.7} .sk-ring .sk-y{fill:#F2B880;opacity:.85} .sk-ring.pop{animation:skPop .9s ease} @keyframes skPop{40%{transform:scale(1.25)}} .sk-tip{position:absolute;top:44px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.72rem;padding:3px 10px;border-radius:999px;background:var(--card,#fff);border:1px solid #E2C27A;color:var(--head,#333);opacity:0;pointer-events:none;transition:opacity .3s} .sk-ring:hover .sk-tip,.sk-ring:focus-visible .sk-tip,.sk-ring.pop .sk-tip{opacity:1} @media (max-width:760px){.sk-ring{width:30px;height:30px;margin-left:4px}.sk-tip{display:none}} /* 版216 この階の調べる棚 */ .tn-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:980px){.tn-grid{grid-template-columns:1fr}} .tn-th{font-size:.74rem;opacity:.75} .tn-btn{margin-top:10px;border:1px solid var(--c);color:inherit;background:transparent;border-radius:999px;padding:6px 14px;font:inherit;font-size:.82rem;cursor:pointer} .tn-tier{margin-top:14px} .tn-tier>summary b{font-size:1rem} .tn-u65{padding:0 14px 14px} .tn-it[hidden]{display:none} .fl b .fl-room{display:block;font-size:.72rem;font-weight:400;opacity:.75;letter-spacing:.08em;margin-top:2px} .lg-where .lgw-f{font-size:1rem}.lg-where .lgw-n{font-size:.72rem;opacity:.8} .sn-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px} .sn-card .sn-go{margin-top:auto;color:var(--gold);font-size:.86rem} .mitsu-door{padding-bottom:0} .mitsu-door .sec-head{border-top:1px solid color-mix(in srgb,#E2C27A 40%,transparent);padding-top:36px} /* 版217 輪のあしあと */ .ash-h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.2em 0} .ash-road{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:22px 0 10px} .ash-line{position:absolute;left:4%;right:4%;top:72px;height:2px;background:linear-gradient(90deg,#6CC3A0,#9A86D6,#E2C27A);opacity:.6;border-radius:2px} .ash-orb{position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:#fff6d8;box-shadow:0 0 12px #ffe9a8;animation:trOrb 9s ease-in-out infinite alternate} .ash-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px solid transparent;border-radius:16px;padding:8px 6px;color:inherit;font:inherit;cursor:pointer;text-align:center} .ash-node time{font-size:.74rem;opacity:.8} .ash-node .ash-svg{width:80px;height:80px;background:var(--bg,#fff);border-radius:50%} .ash-node small{font-size:.7rem;color:var(--c)} .ash-node b{font-size:.82rem;font-weight:500;line-height:1.5} .ash-node.on{border-color:var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent)} .ash-pair{display:flex;align-items:flex-start;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:18px} .ash-one{flex:1 1 260px;max-width:340px;text-align:center;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);border-radius:18px;padding:14px} .ash-one time{font-size:.8rem;color:var(--c)} .ash-one .ash-svg{width:100%;max-width:240px;color:var(--sub)} .ash-arrow{align-self:center;font-size:1.4rem;opacity:.6} .ash-diff{max-width:700px;margin:16px auto 0} .ash-diff ul{margin:8px 0;padding-left:0;list-style:none;display:grid;gap:6px} .ash-diff li{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--gold,#C9A65A) 12%,transparent);box-shadow:0 0 10px color-mix(in srgb,var(--gold,#C9A65A) 25%,transparent)} .ash-k{font-weight:600;min-width:6em} .ash-list{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px} .ash-list li{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .ash-list li i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)} .ash-plan .card{display:flex;flex-direction:column;gap:8px;max-width:760px} @media (max-width:760px){.ash-road{grid-template-columns:1fr;gap:4px}.ash-line{left:50px;right:auto;width:2px;top:20px;bottom:20px;height:auto;background:linear-gradient(180deg,#6CC3A0,#9A86D6,#E2C27A)}.ash-orb{display:none} .ash-node{flex-direction:row;flex-wrap:wrap;text-align:left;justify-content:flex-start}.ash-node .ash-svg{width:60px;height:60px;order:-1}.ash-node time,.ash-node small,.ash-node b{flex:1 1 60%}} @media (max-width:760px){.ash-line{display:none}.ash-pair{flex-direction:column;align-items:stretch}.ash-one{max-width:none}.ash-arrow{transform:rotate(90deg)}} /* 版218 灯守のご案内（どの階からも） */ .hm-nav{position:fixed;left:0;top:42%;z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 12px 8px;border:2px solid #E2B85A;border-left:0;border-radius:0 18px 18px 0;background:linear-gradient(180deg,#2A2418,#1A1610);color:#F4E3B0;font:inherit;font-size:.82rem;line-height:1.35;cursor:pointer;box-shadow:0 0 18px rgba(226,184,90,.45)} .hm-nav img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #E2B85A} .hm-nav[aria-expanded="true"]{background:linear-gradient(180deg,#F4E3B0,#E2B85A);color:#2B2416} .hm-box{position:fixed;left:96px;top:max(80px,calc(42% - 160px));z-index:61;width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 120px);overflow:auto;background:#1E1A12;color:#F4E9CC;border:1.5px solid #E2B85A;border-radius:18px;padding:16px 16px 12px;box-shadow:0 12px 40px rgba(0,0,0,.35)} .hm-x{position:absolute;right:8px;top:6px;background:none;border:0;color:inherit;font-size:1.3rem;cursor:pointer} .hm-say{margin:0 22px 10px 0;font-size:.9rem;line-height:1.7}.hm-say b{display:block;color:#E2B85A;font-size:.78rem} .hm-list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .hm-list a{display:block;padding:8px 12px;border-radius:12px;border:1px solid rgba(226,184,90,.35);color:inherit;text-decoration:none} .hm-list a:hover,.hm-list a:focus{background:rgba(226,184,90,.15)} .hm-list b{display:block;font-size:.9rem}.hm-list small{font-size:.74rem;opacity:.8} .hm-emg{font-size:.74rem;opacity:.85;margin:10px 0 0} @media (max-width:760px){.hm-nav{top:auto;bottom:150px;font-size:.72rem;padding:8px 8px 8px 6px}.hm-nav img{width:40px;height:40px}.hm-box{left:16px;top:auto;bottom:20px;max-height:70vh}} .md-flex{display:flex;align-items:center;gap:28px;flex-direction:row-reverse;justify-content:flex-end} .md-rin{width:min(220px,32vw);height:auto;flex:none;filter:drop-shadow(0 0 24px rgba(226,194,122,.35))} .md-say{margin-top:14px;padding:12px 16px;border-left:3px solid #E2B85A;font-family:var(--display);color:#F4E3B0} .md-say small{display:block;font-size:.72rem;opacity:.75;margin-top:4px} @media (max-width:760px){.md-flex{flex-direction:column}.md-rin{width:46vw}} .ash-hero{position:relative;overflow:hidden;color:#FFF8EA} .ash-art{position:absolute;inset:0;z-index:0}.ash-art img{width:100%;height:100%;object-fit:cover;object-position:60% 50%} .ash-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,18,30,.82) 0%,rgba(14,18,30,.55) 45%,rgba(14,18,30,.1) 100%)} .ash-hero .wrap{position:relative;z-index:1;min-height:420px} .ash-hero .kicker,.ash-hero .ash-h1{color:#FFE9B0}.ash-hero .lead,.ash-hero .ash-empty{color:#F1E8D8;max-width:560px} .ash-hero .card{background:rgba(20,22,34,.75);color:#F4E9CC} .tn-std{justify-self:start;font-size:.68rem;padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--gold,#C8A15A) 22%,transparent);color:inherit;letter-spacing:.08em} .mt-h{display:flex;align-items:center;gap:12px} h2.mt-h .mt-logo{width:64px;height:64px;flex:none} b.mt-h .mt-logo{width:40px;height:40px;flex:none} /* 版223 文字つぶれ・重なりの整理（中身は変えない） */ .top .lg-where,.top .room-mark{display:none!important} .top .logo{flex:none} .hero h1 .ln{display:block;white-space:nowrap} .hero h1{font-size:clamp(1.6rem,6.4vw,3.1rem)} @media (min-width:761px){.hero h1{font-size:clamp(1.9rem,3.5vw,3.1rem)}} /* 版223 上の帯：どの幅でも重ならず、切れないように */ .top nav{overflow:visible;flex:none} .top .wrap{gap:10px} @media (max-width:1580px) and (min-width:761px){ .top nav .nav-find span{display:none}.top nav .nav-find{padding:6px 9px} .fm-head .fm-l{display:none} .fm-btn.fm-head{margin-left:6px} } @media (max-width:1120px) and (min-width:761px){ .stairs.flr{gap:6px} .stairs.flr a{width:auto!important;min-width:0;padding:0 10px 0 4px} .hd-clock{display:none} } @media (max-width:960px) and (min-width:761px){ .top .logo>span,.top .logo .lg-txt,.top .logo b,.top .logo small{display:none} .stairs.flr a .fr-st{display:none} } @media (max-width:760px){ .top .wrap{flex-wrap:wrap;height:auto!important;row-gap:6px;padding-top:6px;padding-bottom:6px} .top .stairs.flr{order:10;flex:1 1 100%;display:flex;justify-content:space-between;gap:6px;margin:0!important} .top .stairs.flr a{flex:1 1 0;width:auto!important;flex-direction:row!important;height:40px!important;justify-content:center;gap:4px;padding:0 4px!important;border-radius:999px!important} .top nav{margin-left:auto} } /* 版223 スマホ：灯守のご案内を小さな丸にして、本文に重ねない */ @media (max-width:760px){ .hm-nav{top:auto;bottom:86px;left:10px;padding:0;border:2px solid #E2B85A;border-radius:50%;width:54px;height:54px;justify-content:center;background:#1A1610} .hm-nav img{width:48px;height:48px;border:0} .hm-nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} } /* 版223 改行のくせ：見出し・ボタンは行の長さをそろえ、1〜2文字だけ次の行に落ちないように */ h1,h2,h3,h4,.kicker,.sec-head .lead{word-break:auto-phrase;text-wrap:pretty} .btn,button,.tr-nm{word-break:auto-phrase;text-wrap:balance} body{word-break:auto-phrase} p,li,.small,span,b{text-wrap:pretty} .pm-toggle button{white-space:nowrap} @media (max-width:760px){.pm-toggle{flex-direction:column;align-items:stretch}.pm-toggle button{width:100%}} .btn.wa-go{white-space:nowrap} @media (max-width:420px){.btn.wa-go{font-size:.95rem;padding-left:16px;padding-right:16px;gap:8px}} /* 版225 この建物のしくみ＝灯の道と同じボタン型 */ #floors .flr-wrap{margin-top:8px} #floors .flr-road{margin-top:10px} #floors .flr-road li.sel .tr-pill{border-color:var(--fc);box-shadow:0 0 0 4px color-mix(in srgb,var(--fc) 22%,transparent)} #floors .flr-road li.sel u{border-bottom-style:solid;opacity:1;font-weight:700} #floors .flr-panel{--fc:#5FB3A1;margin:22px auto 0;max-width:900px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0;border-radius:20px;overflow:hidden;border:2px solid color-mix(in srgb,var(--fc) 60%,transparent);background:#141B26} #floors .flr-panel.st-tm{--fc:#9B7BC8;background:#211B32} #floors .flr-panel.st-sn{--fc:#E2C27A;background:#111725} #floors .flr-img{margin:0;min-height:220px;background:#0E131C} #floors .flr-img img{width:100%;height:100%;object-fit:cover;display:block} #floors .flr-tx{padding:22px 24px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center} #floors .flr-k{font-size:.8rem;letter-spacing:.08em;color:var(--fc)} #floors .flr-tx h3{margin:0;font-family:var(--display);font-size:1.35rem;color:#F4EEDF} #floors .flr-tx p{margin:0;font-size:.95rem;line-height:1.85;color:#D9D2C2} #floors .flr-here{margin-top:6px;font-size:.85rem;padding:4px 14px;border-radius:999px;border:1px solid var(--fc);color:var(--fc)} #floors .flr-go{margin-top:6px} #floors .flr-door{text-align:center;margin:16px auto 0;max-width:900px} @media (max-width:760px){#floors .flr-panel{grid-template-columns:1fr}#floors .flr-img{min-height:0;aspect-ratio:16/9}#floors .flr-tx{padding:18px}} #floors .flr-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch} #floors .flr-img{min-height:0;aspect-ratio:16/10;max-height:340px} @media (max-width:760px){#floors .flr-img{aspect-ratio:16/9;max-height:none}} @media (max-width:760px){#floors .flr-panel{grid-template-columns:1fr}} /* 版226 灯の道の下に階の絵と説明 */ #road .tr-floors{margin-top:10px} #road .tr-floors b{color:var(--head);font-weight:700;margin-right:.3em} #road .tr2 li.sel .tr-pill{border-color:var(--fc);box-shadow:0 0 0 4px color-mix(in srgb,var(--fc) 22%,transparent)} #road .tr2 li.sel u{border-bottom-style:solid;opacity:1;font-weight:700} #road .flr-panel{--fc:#5FB3A1;margin:24px auto 6px;max-width:900px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:20px;overflow:hidden;border:2px solid color-mix(in srgb,var(--fc) 60%,transparent);background:#141B26} #road .flr-panel.st-tm{--fc:#9B7BC8;background:#211B32} #road .flr-panel.st-sn{--fc:#E2C27A;background:#111725} #road .flr-img{margin:0;aspect-ratio:16/10;max-height:340px;background:#0E131C} #road .flr-img img{width:100%;height:100%;object-fit:cover;display:block} #road .flr-tx{padding:22px 24px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;text-align:left} #road .flr-k{font-size:.8rem;letter-spacing:.08em;color:var(--fc)} #road .flr-tx h3{margin:0;font-family:var(--display);font-size:1.35rem;color:#F4EEDF} #road .flr-tx p{margin:0;font-size:.95rem;line-height:1.85;color:#D9D2C2} #road .flr-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px} #road .flr-here{font-size:.85rem;padding:5px 14px;border-radius:999px;border:1px solid var(--fc);color:var(--fc)} #road .flr-more{background:none;border:0;border-bottom:1px dotted var(--fc);color:var(--fc);font:inherit;font-size:.85rem;padding:2px 0;cursor:pointer} @media (max-width:760px){#road .flr-panel{grid-template-columns:1fr}#road .flr-img{aspect-ratio:16/9;max-height:none}#road .flr-tx{padding:18px}} .st-box .st-img{margin:4px 0 12px;border-radius:14px;overflow:hidden;aspect-ratio:16/9}.st-box .st-img img{width:100%;height:100%;object-fit:cover;display:block} #road .flr-panel.flr-fade .flr-img img,#road .flr-panel.flr-fade .flr-tx{animation:flrFade .7s ease} @keyframes flrFade{from{opacity:.15}to{opacity:1}} #road .flr-panel{border-color:var(--fc);box-shadow:0 0 18px color-mix(in srgb,var(--fc) 35%,transparent);transition:border-color .5s,box-shadow .5s,background-color .5s} #road .flr-panel.flr-fade{animation:flrGlow 1.6s ease-out} @keyframes flrGlow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--fc) 0%,transparent)}30%{box-shadow:0 0 0 4px color-mix(in srgb,var(--fc) 45%,transparent),0 0 46px 10px color-mix(in srgb,var(--fc) 70%,transparent)}100%{box-shadow:0 0 18px color-mix(in srgb,var(--fc) 35%,transparent)}} @media (prefers-reduced-motion:reduce){#road .flr-panel.flr-fade{animation:none}} #road .tr2 .tr-orb{animation-duration:13s} .nr-more{margin:0 0 14px;padding:12px 18px} .nr-more summary{cursor:pointer;font-weight:700;color:var(--accent);list-style:none} .nr-more summary::-webkit-details-marker{display:none} .nr-more summary::before{content:"＋ ";} .nr-more[open] summary::before{content:"－ ";} .nr-more ul{margin:10px 0 6px;padding-left:1.2em;line-height:1.85} .nr-more li{margin:4px 0} .nr-links{margin:6px 0 0;display:flex;gap:16px;flex-wrap:wrap} .emg-line,body[data-floor="2"] .emg-line,body[data-floor="3"] .emg-line,.sec.dark .emg-line{color:#C62828!important;background:#FBF1EC!important;border-color:#E6A99A!important;font-weight:700} .hm-emg{color:#FF8A7A!important;opacity:1;font-weight:700} .sk-ring .sk-d{fill:#E2C27A;stroke:none;opacity:.35} .sk-ring .sk-d.on{fill:#FFF3C8;stroke:none;opacity:1;filter:drop-shadow(0 0 2px #F2C964)} /* 版235 プラン名＝灯の数（金・消灯は輪だけ） */ .pr-dots{display:inline-flex;gap:4px;margin-right:6px;vertical-align:middle} .pr-dots s{width:11px;height:11px;border-radius:50%;background:transparent!important;box-shadow:none!important;border:1.5px solid #C9B48A;opacity:.7;box-sizing:border-box} .pr-dots s.on{background:#E2C27A!important;border-color:#E2C27A;opacity:1;box-shadow:0 0 8px rgba(242,201,100,.8)!important} .pr-plan .pr-sub{display:block;font-size:.78rem;letter-spacing:.06em;opacity:.75;margin:2px 0 6px} th .pr-dots{display:flex;justify-content:center;margin:0 auto 4px} th .pr-dots{justify-content:flex-start;margin:0 0 4px} /* 版236 灯の道しるべ */ .tn-brand{border:1.5px solid rgba(226,194,122,.55);border-radius:18px;padding:18px 20px;margin:4px 0 18px;background:linear-gradient(135deg,rgba(226,194,122,.08),rgba(95,179,161,.05))} .tn-bh{display:flex;align-items:center;gap:14px} .tn-bic{width:52px;height:52px;flex:none} .tn-bk{display:block;font-size:.76rem;letter-spacing:.08em;opacity:.75} .tn-bn{display:block;font-family:var(--display);font-size:1.45rem;letter-spacing:.08em;color:#E2C27A;margin:2px 0} .tn-bh small{display:block;font-size:.85rem;opacity:.85} .tn-tags{list-style:none;margin:14px 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .tn-tags li{font-size:.82rem;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid currentColor} .tn-tags .t-free{color:#5FB3A1}.tn-tags .t-upd{color:#C9A65A}.tn-tags .t-off{color:#7FA6D9} .tn-flh{margin:12px 0 8px;font-size:.88rem;font-weight:700} .tn-fls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .tn-fl{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--c) 45%,transparent);text-decoration:none;color:inherit;opacity:.8} .tn-fl.me{opacity:1;border-color:var(--c);box-shadow:0 0 14px color-mix(in srgb,var(--c) 35%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)} .tn-fl b{color:var(--c);font-size:.95rem}.tn-fl small{font-size:.8rem;font-weight:700}.tn-fl i{font-style:normal;font-size:.76rem;opacity:.8;line-height:1.6} .tn-fl em{font-style:normal;font-size:.74rem;margin-top:4px;color:var(--c)} a.tn-fl:hover{opacity:1} .tn-diff{margin:12px 0 0;font-size:.85rem;line-height:1.8} @media (max-width:760px){.tn-fls{grid-template-columns:1fr}.tn-bn{font-size:1.25rem}} @media (max-width:760px){.tn-fls{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.tn-fl{padding:8px 8px}.tn-fl i{display:none}.tn-fl b{font-size:.82rem}.tn-fl small{font-size:.72rem}.tn-fl em{font-size:.68rem}.tn-tags li{font-size:.76rem}} /* 版237 新しい三つの教室：表紙に題名と再生マークがあるので、カードの字は重ねない。表紙全体を押すと再生 */ .cls-slide figcaption{display:none} .cls-slide .cls-play{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;color:transparent;font-size:0;box-shadow:none;cursor:pointer;z-index:3} .cls-slide .cls-play i{display:none} .cls-slide .cls-play:focus-visible{outline:3px solid var(--cc);outline-offset:-6px} .cls-slide:hover img{filter:brightness(1.06)} /* 版238 スマホの見え方の切りかえ */ .vw-sw,.vw-bar{display:none} @media (max-width:760px){ .vw-sw{display:flex;align-items:center;gap:6px;position:sticky;top:var(--hdr-h,96px);z-index:40;margin:0;padding:8px 12px;background:color-mix(in srgb,var(--bg,#fff) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,.06)} .vw-sw span{font-size:.74rem;opacity:.7;margin-right:2px} .vw-sw button{flex:1;font:inherit;font-size:.82rem;font-weight:700;padding:7px 4px;border-radius:999px;border:1.5px solid #C9B48A;background:transparent;color:inherit;white-space:nowrap} .vw-sw button[aria-pressed="true"]{background:#2F6F62;border-color:#2F6F62;color:#fff} main.dusk .vw-sw,main.night .vw-sw{background:rgba(20,18,32,.88);border-color:rgba(255,255,255,.08)} body.vw-fold main>section.sec,body.vw-pics main>section.sec{padding-top:6px!important;padding-bottom:6px!important;min-height:0!important} body.vw-fold main>section.sec>.vw-bar,body.vw-pics main>section.sec>.vw-bar{display:flex} body.vw-fold main>section.sec:not(.vw-open)>:not(.vw-bar),body.vw-pics main>section.sec:not(.vw-open)>:not(.vw-bar){display:none!important} .vw-bar{width:calc(100% - 24px);margin:6px 12px;align-items:center;gap:12px;text-align:left;font:inherit;color:inherit;background:color-mix(in srgb,currentColor 5%,transparent);border:1.5px solid color-mix(in srgb,#C9B48A 70%,transparent);border-radius:16px;padding:12px 14px;cursor:pointer} .vw-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} .vw-tx small{font-size:.7rem;letter-spacing:.06em;opacity:.7} .vw-tx b{font-size:1rem;line-height:1.45} .vw-one{display:none;font-size:.8rem;opacity:.8;line-height:1.6} .vw-pic{display:none} .vw-chev{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6;flex:none;transition:transform .25s} section.vw-open>.vw-bar .vw-chev{transform:rotate(-135deg)} body.vw-pics .vw-bar{flex-wrap:wrap;padding:0;overflow:hidden;gap:0} body.vw-pics .vw-pic{display:block;width:100%;aspect-ratio:16/9;overflow:hidden} body.vw-pics .vw-pic img{width:100%;height:100%;object-fit:cover;display:block} body.vw-pics .vw-tx{padding:12px 14px} body.vw-pics .vw-one{display:block} body.vw-pics .vw-chev{margin-right:14px} body.vw-pics section.vw-open>.vw-bar .vw-pic{display:none} } /* 版239 輪の下書き：吹き出しをやめて、紋と文字を一つのボタンに */ .sk-ring{display:inline-flex!important;align-items:center;gap:7px;width:auto!important;height:40px!important;padding:2px 12px 2px 2px;border-radius:999px!important;border:1.5px solid #E2C27A;background:#131A29;color:#F5E2A8} .sk-ring svg{width:34px!important;height:34px!important;flex:none} .sk-lb{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap} .sk-lb b{font-size:.76rem;font-weight:700;color:#F5E2A8} .sk-lb small{font-size:.66rem;color:#E2C27A;opacity:.9} .sk-ring .sk-tip{display:none!important} @media (max-width:1120px){.sk-ring{padding:2px}.sk-lb{display:none}} /* 版239b 輪のあしあと：輪をつくった人にだけ。紋の右下に輪の数 */ .sk-ring{padding:2px!important;width:40px!important} .sk-lb{display:none!important} .sk-n{position:absolute;right:-4px;bottom:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#E2C27A;color:#131A29;font-size:.68rem;font-weight:800;display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px #131A29} .wa-ash{display:inline-block;margin:10px 0 0;font-weight:700;color:#C9A65A;text-decoration:underline;text-underline-offset:3px} .wa-ash[hidden]{display:none} /* 版240 トップの調べる棚は短く：各列3件、説明は2行まで（もっと見るで全部） */ .tn-cmp .tn-col:not(.tn-open) .tn-it>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tn-cmp .tn-col:not(.tn-open) .tn-it .u65-for{display:none} /* 版240 スマホ：最初の画面に見出しとボタンが入るように。浮いているボタンは下の帯に一列で */ @media (max-width:760px){ .hero .art,.hero::after,.hero .lanterns{height:38vh;max-height:330px} .hero .copy{gap:12px;margin-top:-20px} .hero .copy .cta{order:3} .hero .copy .lead{order:4} .hero .copy .note-ai{order:5} .hero .copy .kicker{order:1} .hero .copy h1{order:2} } @media (max-width:480px){ html:has(.nav-reg-float,.hm-nav)::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(66px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg,#fbfaf6) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid rgba(0,0,0,.07);z-index:44;pointer-events:none} body{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))} .hm-nav{bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;left:8px!important;width:52px!important;height:52px!important} .hm-nav img{width:46px!important;height:46px!important} .fs-ctl{left:66px!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important} .nav-reg-float{left:auto!important;right:8px!important;transform:none!important;bottom:calc(11px + env(safe-area-inset-bottom,0px))!important;padding:9px 14px!important} } /* 版241 調べる棚：目線をえらんで開く（全フロア） */ .tn-pick{border:1.5px solid color-mix(in srgb,var(--fc) 60%,transparent);border-left:6px solid var(--fc);border-radius:16px;padding:16px 18px;background:color-mix(in srgb,var(--fc) 7%,transparent);margin-bottom:6px} .tn-ph{margin:0;font-weight:700;font-size:1.02rem;line-height:1.6} .tn-ph small{display:block;font-weight:400;font-size:.82rem;opacity:.8} .tn-pf{display:inline-block;background:var(--fc);color:#fff;border-radius:999px;padding:1px 12px;margin-right:4px;font-size:.92rem;letter-spacing:.06em} .tn-pq{margin:12px 0 8px;font-size:.88rem;opacity:.85} .tn-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .tn-tab{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font:inherit;font-weight:700;font-size:.95rem;padding:10px 6px;border-radius:999px;border:1.5px solid var(--c);background:transparent;color:inherit;cursor:pointer} .tn-tab i{width:9px;height:9px;border-radius:50%;background:var(--c)} .tn-tab small{font-weight:400;font-size:.74rem;opacity:.75} .tn-tab[aria-expanded="true"]{background:color-mix(in srgb,var(--c) 22%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)} .tn-pan{margin-top:12px;border-top:2px dashed color-mix(in srgb,var(--c) 50%,transparent);padding-top:10px} .tn-pan h3{display:flex;align-items:center;gap:8px;font-size:.9rem;margin:0 0 6px} .tn-pan h3 i{width:9px;height:9px;border-radius:50%;background:var(--c)} .tn-row{border-bottom:1px dashed color-mix(in srgb,var(--c) 35%,transparent)} .tn-row summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:10px 26px 10px 2px;position:relative;line-height:1.55} .tn-row summary::-webkit-details-marker{display:none} .tn-row summary::after{content:"＋";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--c);font-weight:700} .tn-row[open] summary::after{content:"－"} .tn-row summary .tn-std{flex:none} .tn-rb{display:grid;gap:6px;padding:0 4px 12px;font-size:.9rem} .tn-rb p{margin:0} .tn-rb a{color:var(--c);font-weight:700} .tn-pan .tn-btn{display:block;margin:12px auto 0} @media (max-width:480px){.tn-tabs{gap:6px}.tn-tab{font-size:.86rem;padding:9px 4px}.tn-pick{padding:14px 12px}} .tn-pick[style*="E2C27A"] .tn-pf{color:#2B2416} /* 版242 道しるべにも灯の道のボタン（押すとその階の棚へ） */ .tn-road{margin:6px auto 4px;max-width:880px} .tn-road small::after{content:none!important} .tn-road small{line-height:1.5;margin-top:4px} .tn-road a{gap:4px} .tn-road a:hover .tr-pill{transform:translateY(-2px)} .tn-road a:focus-visible{outline:2px solid var(--sc);outline-offset:6px;border-radius:14px} .tn-road .tr-orb{animation-duration:13s} @media (max-width:560px){.tn-road small{font-size:.66rem}.tn-road small br+*{display:none}} /* 版244 音楽ボタンは左下の「文字」の枠の中に小さく */ .fs-ctl .fm-btn.fm-mini{border:0;background:none;padding:0 2px 0 8px;margin-left:4px;border-left:1px solid var(--line);border-radius:0;gap:4px;font-size:.7rem;color:var(--sub);height:30px} .fs-ctl .fm-mini .fm-l{display:none} .fs-ctl .fm-mini .fm-n{font-size:.8rem} .fs-ctl .fm-mini .fm-sw{width:24px;height:13px} .fs-ctl .fm-mini .fm-sw i{width:9px;height:9px} .fs-ctl .fm-mini[aria-pressed="true"] .fm-sw i{transform:translateX(11px)} body[data-floor="3"] .fs-ctl .fm-btn.fm-mini{background:none;border-color:var(--line)} @media (max-width:480px){.fs-ctl .fm-mini{padding-left:6px;margin-left:2px}} footer .fm-btn.fm-foot{position:static;display:inline-flex;align-items:center;gap:6px;margin:14px 0 0;padding:4px 10px;font-size:.74rem;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--sub);width:auto;height:auto} footer .fm-btn.fm-foot::before{content:none} footer .fm-foot .fm-sw{width:24px;height:13px} footer .fm-foot .fm-sw i{width:9px;height:9px} footer .fm-foot[aria-pressed="true"] .fm-sw i{transform:translateX(11px)} footer .fm-btn.fm-foot{width:auto!important;max-width:max-content;display:inline-flex!important} footer .fm-foot .fm-l{display:inline!important;font-size:.74rem} /* 版245 ささえの輪：プランごとの見え方 */ .pl-toggle{flex-wrap:wrap} .pl-toggle button{flex-direction:column;gap:0;line-height:1.3;padding:6px 12px} .pl-toggle button small{display:block} .pl-dots{display:flex;gap:3px;justify-content:center;margin-bottom:2px} .pl-dots s{width:7px;height:7px;border-radius:50%;border:1px solid #C9A65A;display:block} .pl-dots s.on{background:#E2C27A;border-color:#E2C27A;box-shadow:0 0 5px rgba(226,194,122,.7)} .pl-toggle button[data-skin=p1][aria-pressed="true"]{border-color:#6FD1B4;box-shadow:0 0 0 2px rgba(111,209,180,.35),0 0 16px rgba(111,209,180,.35)} .pl-toggle button[data-skin=p2][aria-pressed="true"]{border-color:#A98BE0;box-shadow:0 0 0 2px rgba(169,139,224,.35),0 0 16px rgba(169,139,224,.35)} .ring.p1{--plc:#6FD1B4}.ring.p2{--plc:#A98BE0} .pl-deco{opacity:0;transition:opacity 1s ease;pointer-events:none} .ring.p1 .pl-deco,.ring.p2 .pl-deco{opacity:1} .pl-deco .pl-stop{stop-color:var(--plc,#6FD1B4)} .pl-deco .pl-r{stroke:var(--plc,#6FD1B4);opacity:.85} .pl-deco .pl-r2,.pl-deco .pl-memo{display:none} .ring.p2 .pl-r2,.ring.p2 .pl-memo{display:inline} .pl-deco .pl-ghost{stroke:var(--sub);stroke-width:1.2;opacity:.45} .pl-deco .pl-ghost-t{font-size:12px;fill:var(--sub);opacity:.75} .pl-deco .pl-memo circle{fill:var(--plc)} .pl-deco .pl-memo text{font-size:12px;fill:#1b1a14} .ring.p1 .cn-you,.ring.p2 .cn-you{filter:drop-shadow(0 0 8px var(--plc))} .pl-feat{max-width:460px;margin:12px auto 0;text-align:left;position:relative;z-index:2;font-size:.8rem;line-height:1.7} .pl-fh{margin:0;font-weight:700;font-size:.9rem;letter-spacing:.04em} .pl-fd{color:#C9A65A;letter-spacing:2px;margin-right:6px;font-size:.78rem} .pl-fp{margin:2px 0 4px;font-size:.74rem;color:var(--sub)} .pl-feat ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px} .pl-feat li{display:grid;grid-template-columns:26px 1fr;column-gap:8px;align-items:start;padding:7px 10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--plc,#C9A65A) 45%,transparent);background:color-mix(in srgb,var(--plc,#C9A65A) 7%,transparent)} .ring.pm ~ .pl-feat li,.ring.pm .pl-feat li{--plc:#E2C27A} .pl-feat li .pl-ic{grid-row:span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.68rem;border:1px solid color-mix(in srgb,var(--plc,#C9A65A) 70%,transparent)} .pl-feat li b{font-size:.84rem} .pl-feat li small{color:var(--sub);font-size:.74rem;line-height:1.6} .pl-fn{margin:8px 0 0;font-size:.74rem;color:var(--sub)} @media (max-width:760px){.pl-toggle{display:grid;grid-template-columns:1fr 1fr;flex-direction:row}} /* 版246 輪の背景の斜線：はじめ＝青、ひとつ灯＝ミント、ふたつ灯＝紫、みつ灯＝金 */ #map.water[data-plan]::before{background:repeating-linear-gradient(170deg,transparent 0 22px,color-mix(in srgb,var(--plw) 16%,transparent) 22px 24px)} #map[data-plan="free"]{--plw:#6F9BE0} #map[data-plan="p1"]{--plw:#6FD1B4} #map[data-plan="p2"]{--plw:#A98BE0} #map[data-plan="pm"]{--plw:#E2C27A} #map.water[data-plan]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 70% 40%,color-mix(in srgb,var(--plw) 9%,transparent),transparent 60%);transition:background .8s} #map > .wrap{position:relative;z-index:1} /* 版247 「ささえの輪をつくってみる」ボタンの色もプランに：無料＝青くうすく光る、ひとつ灯＝ミント、ふたつ灯＝紫、みつ灯＝金。会員向けには鍵の印 */ #map[data-plan="free"]{--gbg:linear-gradient(180deg,#D3E3FA,#7FA6DE);--gbd:#B9D0F3;--gtx:#13233F;--gsh:rgba(111,155,224,.5)} #map[data-plan="p1"]{--gbg:linear-gradient(180deg,#B4F0E1,#5FB3A1);--gbd:#A6EBDA;--gtx:#0E2A25;--gsh:rgba(127,217,196,.6)} #map[data-plan="p2"]{--gbg:linear-gradient(180deg,#E6DAF8,#9B7BC8);--gbd:#D4C2F2;--gtx:#24163D;--gsh:rgba(169,139,224,.7)} #map[data-plan="pm"]{--gbg:linear-gradient(180deg,#FAEBC2,#C9A65A);--gbd:#F1D9A0;--gtx:#2B2416;--gsh:rgba(226,194,122,.75)} #map[data-plan] .btn.wa-go{background:var(--gbg);border-color:var(--gbd);color:var(--gtx);animation:plGlow 2.4s ease-in-out infinite;transition:background .6s,color .6s} @keyframes plGlow{0%,100%{box-shadow:0 0 16px var(--gsh),inset 0 1px 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 34px var(--gsh),inset 0 1px 0 rgba(255,255,255,.55)}} @media (prefers-reduced-motion:reduce){#map[data-plan] .btn.wa-go{animation:none;box-shadow:0 0 22px var(--gsh)}} .btn.wa-go .wg-lock{display:none;width:20px;height:20px;margin-left:-4px;opacity:.75} .btn.wa-go .wg-lock svg{width:100%;height:100%;display:block} #map[data-plan="p1"] .wg-lock,#map[data-plan="p2"] .wg-lock,#map[data-plan="pm"] .wg-lock{display:inline-block} .wa-plan{margin:10px 0 0;font-size:.82rem;line-height:1.6;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px} .wa-plan .wp-d{color:#C9A65A;letter-spacing:2px;font-size:.78rem} .wa-plan b{color:var(--plw,var(--accent));font-size:.95rem} .wa-plan small{flex-basis:100%;color:var(--sub);font-size:.76rem} .wa-plan .wp-lk{font-size:.8rem} /* 版248 ささえの輪：階ごとに質問がかわる説明 */ .wa-fq{margin:14px 0 4px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 70%,transparent);position:relative;z-index:1} .wa-fq-h{margin:0;font-weight:700;font-size:.95rem} .wa-fq-s{margin:4px 0 8px;font-size:.84rem;color:var(--sub);line-height:1.7} .wa-fq-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .wa-fq-l a{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:12px;border:1.5px solid color-mix(in srgb,var(--c) 60%,transparent);text-decoration:none;color:inherit;background:color-mix(in srgb,var(--c) 8%,transparent)} .wa-fq-l a b{color:var(--c);font-size:.88rem} .wa-fq-l a small{font-size:.74rem;color:var(--sub);line-height:1.5} .wa-fq-l a:hover{border-color:var(--c)} @media (max-width:640px){.wa-fq-l{grid-template-columns:1fr}} /* 版249 色の決め直し（11-01 TOMO）：階＝ミント・紫・金のまま。プランは光の質で分ける：無料＝月白、ひとつ灯＝銀、ふたつ灯＝真珠、みつ灯＝オーロラ。輪のまわりには階の色をうすく残す */ .ring.p1{--plc:#C3CCD8}.ring.p2{--plc:#EADFF2} .pl-deco .pl-stop{stop-color:var(--flc,#5FB3A1)} .ring.p1 .pl-deco .pl-r{stroke:#C3CCD8;opacity:.95} .ring.p2 .pl-deco .pl-r{stroke:url(#plPearl);opacity:1} .ring.p2 .pl-deco .pl-r1{stroke-width:3} .ring.p2 .pl-deco .pl-memo circle{fill:#F3ECF7} .ring.p1 .pl-deco .pl-memo circle{fill:#C3CCD8} .pl-deco .pl-aur{display:none;stroke:url(#plAurora);opacity:.9} .ring.pm .pl-deco{opacity:1} .ring.pm .pl-deco .pl-r,.ring.pm .pl-deco .pl-ghost,.ring.pm .pl-deco .pl-ghost-t,.ring.pm .pl-deco .pl-memo,.ring.pm .pl-deco .pl-halo{display:none} .ring.pm .pl-deco .pl-aur{display:inline;animation:plAur 14s linear infinite;transform-origin:200px 200px;transform-box:view-box} @keyframes plAur{to{filter:hue-rotate(360deg)}} .ring.p1 .cn-you,.ring.p2 .cn-you{filter:drop-shadow(0 0 8px var(--plc))} /* 背景の斜線 */ #map[data-plan="free"]{--plw:#DCE3EE} #map[data-plan="p1"]{--plw:#B8C2CF} #map[data-plan="p2"]{--plw:#E6D7EF} #map[data-plan="pm"]{--plw:#A7E0D2} #map.water[data-plan="pm"]::before{animation:drift 16s linear infinite,plAur 14s linear infinite} /* 「ささえの輪をつくってみる」ボタン */ #map[data-plan="free"]{--gbg:linear-gradient(180deg,#F6F8FC,#C8D3E3);--gbd:#E6ECF5;--gtx:#1B2538;--gsh:rgba(220,228,240,.45)} #map[data-plan="p1"]{--gbg:linear-gradient(180deg,#F4F6F9,#A9B4C3);--gbd:#DDE3EB;--gtx:#1D2430;--gsh:rgba(195,204,216,.6)} #map[data-plan="p2"]{--gbg:linear-gradient(120deg,#FFFFFF,#ECE3F7 35%,#F8E8EF 60%,#E3EFF7 85%,#FFFFFF);--gbd:#F3ECF8;--gtx:#2A2236;--gsh:rgba(236,224,246,.7)} #map[data-plan="pm"]{--gbg:linear-gradient(110deg,#A6EAD3,#A9C0F4,#DDB0EC,#F4DCA0,#A6EAD3);--gbd:#E8F2FF;--gtx:#1E2236;--gsh:rgba(190,210,250,.75)} #map[data-plan="pm"] .btn.wa-go{background-size:300% 100%;animation:plGlow 2.4s ease-in-out infinite,plFlow 9s linear infinite} @keyframes plFlow{to{background-position:300% 0}} @media (prefers-reduced-motion:reduce){#map[data-plan="pm"] .btn.wa-go,.ring.pm .pl-deco .pl-aur,#map.water[data-plan="pm"]::before{animation:none}} /* プランのボタン */ .pl-toggle button[data-skin=""][aria-pressed="true"]{border-color:#DCE3EE;box-shadow:0 0 0 2px rgba(220,227,238,.35),0 0 16px rgba(220,227,238,.35)} .pl-toggle button[data-skin=p1][aria-pressed="true"]{border-color:#C3CCD8;box-shadow:0 0 0 2px rgba(195,204,216,.4),0 0 16px rgba(195,204,216,.4)} .pl-toggle button[data-skin=p2][aria-pressed="true"]{border-color:#EADFF2;box-shadow:0 0 0 2px rgba(234,223,242,.45),0 0 18px rgba(240,220,236,.5)} .pl-toggle button[data-skin=pm]{border-color:#BFD3F5} .pl-toggle button[data-skin=pm][aria-pressed="true"]{border-color:#C9B8F0;box-shadow:0 0 0 2px rgba(167,224,210,.4),0 0 20px rgba(201,184,240,.55)} #map[data-plan="pm"] .pl-feat li{--plc:#B9C6F0} #map[data-plan="free"] .pl-feat li{--plc:#C8D3E3} #map[data-plan="p1"] .pl-feat li{--plc:#C3CCD8} #map[data-plan="p2"] .pl-feat li{--plc:#E3D3EE} .wa-plan b{color:var(--gtx,var(--accent))} #map[data-plan] .wa-plan b{color:var(--plw)} /* 版250 HP全体：「輪をつくる」ボタンの色＝いまのプラン（無料＝月白、ひとつ灯＝銀、ふたつ灯＝真珠、みつ灯＝オーロラ） */ html[data-plan="free"]{--gbg:linear-gradient(180deg,#F6F8FC,#C8D3E3);--gbd:#E6ECF5;--gtx:#1B2538;--gsh:rgba(220,228,240,.45)} html[data-plan="p1"]{--gbg:linear-gradient(180deg,#F4F6F9,#A9B4C3);--gbd:#DDE3EB;--gtx:#1D2430;--gsh:rgba(195,204,216,.6)} html[data-plan="p2"]{--gbg:linear-gradient(120deg,#FFFFFF,#ECE3F7 35%,#F8E8EF 60%,#E3EFF7 85%,#FFFFFF);--gbd:#F3ECF8;--gtx:#2A2236;--gsh:rgba(236,224,246,.7)} html[data-plan="pm"]{--gbg:linear-gradient(110deg,#A6EAD3,#A9C0F4,#DDB0EC,#F4DCA0,#A6EAD3);--gbd:#E8F2FF;--gtx:#1E2236;--gsh:rgba(190,210,250,.75)} html[data-plan] a.btn[href^="wa.html"]:not(.ghost){background:var(--gbg)!important;border:1px solid var(--gbd)!important;color:var(--gtx)!important;box-shadow:0 0 18px var(--gsh),inset 0 1px 0 rgba(255,255,255,.6)!important;text-shadow:none} html[data-plan="pm"] a.btn[href^="wa.html"]:not(.ghost){background-size:300% 100%!important;animation:plFlow 9s linear infinite} html[data-plan="pm"] #map .btn.wa-go{animation:plGlow 2.4s ease-in-out infinite,plFlow 9s linear infinite} @media (prefers-reduced-motion:reduce){html[data-plan="pm"] a.btn[href^="wa.html"]{animation:none!important}} /* 白い光のボタンでは、流れる光を弱めて文字を読みやすく */ html[data-plan] .btn.wa-go::after{opacity:.35;z-index:0} .btn.wa-go > *{position:relative;z-index:1} /* ボタンの下：プランのチップ */ .wa-plan .wp-chips{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px} .wa-plan .wp-chip{font:inherit;cursor:pointer;display:inline-flex;align-items:baseline;gap:5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:.8rem} .wa-plan .wp-chip i{font-style:normal;color:#C9A65A;letter-spacing:1px;font-size:.7rem} .wa-plan .wp-chip small{font-size:.66rem;color:var(--sub)} .wa-plan .wp-chip[aria-pressed="true"]{background:var(--gbg);color:var(--gtx);border-color:var(--gbd);box-shadow:0 0 10px var(--gsh)} .wa-plan .wp-chip[aria-pressed="true"] small{color:var(--gtx);opacity:.7} html[data-plan="pm"] .wa-plan .wp-chip[aria-pressed="true"]{background-size:300% 100%;animation:plFlow 9s linear infinite} .wa-plan .wp-now{display:inline-flex;gap:6px;align-items:baseline} .wa-plan .wp-chip{white-space:nowrap} .wa-plan .wp-now b{color:var(--ink)!important;opacity:1!important} @media (max-width:480px){.wa-plan .wp-chips{display:grid;grid-template-columns:1fr 1fr;gap:6px}.wa-plan .wp-chip{justify-content:center;flex-wrap:wrap;row-gap:0;padding:5px 6px;font-size:.76rem}.wa-plan .wp-chip small{flex-basis:100%;text-align:center}} /* 版251：プランの切りかえは「ささえの輪をつくってみる」の下の1か所だけ */ #map .pl-toggle{display:none!important} /* 1階トップのみつ灯の部屋（3階と同じ夜の色） */ .pm-room{--bg:#0E131C;--bg2:#141B27;--bg3:#1A2231;--card:#151C29;--ink:#EEE8DC;--sub:#B9B0A0;--line:#3A3322;--accent:#D9B56E;--accent-ink:#17120A;--head:#F6EBD3;--glow:rgba(217,181,110,.5);color-scheme:dark; background:radial-gradient(90% 60% at 50% 0%,#1E2840 0%,#0E131C 65%);color:var(--ink);border-top:1px solid rgba(226,194,122,.35);border-bottom:1px solid rgba(226,194,122,.35)} .pm-room[hidden]{display:none} .pm-room .wrap{max-width:1240px} .pm-room h2{color:var(--head);margin:.2em 0 .6em} .pm-room .kicker{color:#E2C27A} .pm-room .pmr-note{color:var(--sub);text-align:center;margin-top:14px} /* 版252 ボタンの中のプラン札 */ .btn .wa-st{display:inline-flex;align-items:center;gap:5px;margin-left:10px;padding:2px 10px 2px 8px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(27,37,56,.18);font-size:.68em;letter-spacing:.06em;line-height:1.5;white-space:nowrap;vertical-align:middle;color:inherit;font-weight:700} .btn .wa-st i{font-style:normal;color:#B8913F;letter-spacing:1px;font-size:.85em} .btn .wa-st b{font-weight:700} html[data-plan="pm"] .btn .wa-st{background:rgba(255,255,255,.6)} .btn.wa-go .wa-st{font-size:.6em} .btn.wa-go .wg-lock{display:none} @media (max-width:480px){.btn.has-st{flex-wrap:wrap;justify-content:center}.btn .wa-st{margin-left:6px}} /* 版252b：プラン札はボタンの右上に乗せる（文字は1行のまま） */ a.btn.has-st{position:relative;overflow:visible} .btn .wa-st{position:absolute;top:-13px;right:22px;margin:0;font-size:12px!important;padding:1px 10px 1px 8px;background:#fff;border:1px solid var(--gbd,#DDE3EE);box-shadow:0 2px 8px rgba(20,30,50,.18);color:#1B2538;letter-spacing:.04em;z-index:3} html[data-plan="pm"] .btn .wa-st{background:linear-gradient(110deg,#E6FAF3,#E9EFFD,#F6EAFB,#FDF5E2)} html[data-plan="p2"] .btn .wa-st{background:linear-gradient(120deg,#fff,#F4EEFB,#FCF1F5)} html[data-plan="p1"] .btn .wa-st{background:linear-gradient(180deg,#fff,#E9EDF2)} .btn .wa-st rt{font-size:.6em;letter-spacing:0} @media (max-width:480px){.btn.has-st{flex-wrap:nowrap}.btn .wa-st{right:16px;top:-12px;font-size:11px!important}} /* 版253：札を外に出すため overflow を見せたので、光の帯がボタンの外へはみ出していた→光はボタンの形の中だけで流す */ .btn.wa-go::after{left:0!important;right:0;top:0;bottom:0;width:auto!important;border-radius:inherit;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:waShine2 3.6s ease-in-out infinite 1s!important;pointer-events:none} @keyframes waShine2{0%,60%{background-position:150% 0}100%{background-position:-50% 0}} @media (prefers-reduced-motion:reduce){.btn.wa-go::after{animation:none!important;opacity:0}} /* 版254：プランのボタンは、ささえの輪の下へ */ #map .wp-chipbox{justify-content:center;margin:14px auto 6px} #map .wp-chipbox .wp-chips{justify-content:center} /* 版256：読む棚のコーナー＝朱色の一枚（箱に分けず、朱の罫と壱弐参で並べる）。昼夜どちらの表示でも同じ色 */ .shu{--shu:#E2512F;--shu-l:#F4896B;--shu-d:#A8301C;--shu-ink:#FFF3E6;--shu-bg:#1C0F10} .shu-card{position:relative;color:#F3E6DA;background:radial-gradient(120% 90% at 100% 0%,rgba(226,81,47,.22),transparent 55%),radial-gradient(80% 70% at 0% 100%,rgba(226,81,47,.12),transparent 60%),linear-gradient(160deg,#241214,#160B0D 70%); border:1px solid rgba(226,81,47,.6)!important;border-radius:26px;box-shadow:0 0 0 1px rgba(226,194,122,.18) inset,0 0 0 6px rgba(226,81,47,.06),0 24px 60px rgba(120,30,15,.35)} .shu-card::before{content:"";position:absolute;inset:10px;border-radius:18px;border:1px solid rgba(244,137,107,.22);pointer-events:none} .shu-card .bd-pic{border:1px solid rgba(244,137,107,.45);box-shadow:0 10px 30px rgba(0,0,0,.4)} .shu-card .bd-floor{border:1px solid rgba(155,123,200,.7);color:#E5D6F7} .shu-card h2{color:#FFF1E2} .shu-card .bd-tx>p{color:#E4D3C6} .shu-card rt{color:#F4B9A6} .shu-top{display:flex;align-items:center;gap:12px;margin-bottom:4px} .shu-seal{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:8px;background:var(--shu);color:#FFF3E6;font-family:var(--display);font-size:1.25rem;font-weight:700;transform:rotate(-6deg);box-shadow:0 0 0 2px rgba(255,243,230,.15) inset,0 4px 14px rgba(226,81,47,.45);letter-spacing:0} .shu-k{color:var(--shu-l)!important;letter-spacing:.14em} .shu-k small{font-size:.8em;margin-left:6px;color:#D7C3E9;letter-spacing:.08em} .shu-list{list-style:none;margin:16px 0 14px;padding:4px 0 4px 16px;border-left:2px solid var(--shu);display:grid} .shu-list li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;padding:10px 0} .shu-list li+li{border-top:1px dashed rgba(244,137,107,.35)} .shu-list i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--shu-l);color:var(--shu-l);font-family:var(--display);font-size:.9rem} .shu-list b{display:block;color:#FFE9DA;font-size:1rem} .shu-list span{display:block;font-size:.85rem;color:#D9C5B8} .shu-free{display:inline-flex;align-items:center;gap:8px;margin:2px 0 18px!important;padding:7px 14px;border-radius:999px;border:1px solid rgba(244,137,107,.55);background:rgba(226,81,47,.1);color:#FFE3D6;font-size:.92rem;font-weight:700} .shu-free span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--shu);color:#fff;font-size:.78rem} .shu-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .btn.shu-go{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;font-size:1.12rem;padding:15px 30px;border-radius:999px;color:var(--shu-ink);background:linear-gradient(180deg,#EE6A47,#D2401F 60%,#B5321A);border:1px solid #F7A58A;box-shadow:0 0 0 3px rgba(226,81,47,.18),0 10px 28px rgba(210,64,31,.45),inset 0 1px 0 rgba(255,255,255,.35);text-shadow:0 1px 0 rgba(90,20,10,.4);font-weight:700} .btn.shu-go .bd-up{background:#FFF3E6;color:#C23A1C} .btn.shu-go::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 40%,rgba(255,240,225,.45) 50%,transparent 60%) no-repeat;background-size:250% 100%;animation:waShine2 4.2s ease-in-out infinite 1.4s;pointer-events:none} .btn.shu-go:hover{transform:translateY(-2px);filter:brightness(1.06)} .btn.shu-sub{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;background:transparent;border:1px solid var(--shu-l);color:#FFD9CB;font-weight:700} .btn.shu-sub:hover{background:rgba(226,81,47,.14)} @media (max-width:760px){.shu-btns{flex-direction:column;align-items:stretch}.btn.shu-go,.btn.shu-sub{justify-content:center;width:100%}} @media (prefers-reduced-motion:reduce){.btn.shu-go::after{animation:none;opacity:0}} /* 版257：塔の横の別館「ささえの文庫」（朱色・ぜんぶ無料） */ .stairs.flr a.fr-bk{--fc:#E2512F;background:linear-gradient(180deg,#3A1A1A,#24100F)!important;border-color:#E2512F!important;color:#FFE3D6!important} .stairs.flr a.fr-bk .fr-st{color:#F4896B!important} .stairs.flr a.fr-bk[aria-current]{box-shadow:0 0 0 2px rgba(226,81,47,.45),0 0 18px rgba(226,81,47,.55)!important} .fl-veil.to-bk{--vc:#E2512F} body[data-floor="bk"]{--bg:#140B0D;--bg2:#1C0F10;--bg3:#24131A;--card:#1E1012;--ink:#F3E6DA;--sub:#CDB8AA;--line:#4A2A22;--accent:#E2512F;--accent-ink:#FFF3E6;--head:#FFF1E2;--glow:rgba(226,81,47,.45);color-scheme:dark} .annex{background:radial-gradient(80% 50% at 50% 0%,#2A1418,#140B0D 70%)} .ax-out{padding:18px 0 8px} .ax-frame{position:relative;max-width:1180px;margin:0 auto;aspect-ratio:3/2;overflow:hidden;border-radius:22px;border:1px solid rgba(226,81,47,.55);box-shadow:0 0 0 6px rgba(226,81,47,.07),0 30px 70px rgba(0,0,0,.5)} .ax-in{position:absolute;top:0;left:50%;height:100%;aspect-ratio:3/2;transform:translateX(-50%);transform-origin:46% 66%;transition:transform 1.2s cubic-bezier(.6,0,.3,1),filter 1.2s} .ax-in>img{width:100%;height:100%;display:block} .ax-in.enter{transform:translateX(-50%) scale(3.4);filter:brightness(1.25)} .ax-sign{position:absolute;left:37.6%;top:38.6%;width:15.6%;height:7.4%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#FFE9C8;text-shadow:0 0 8px rgba(255,190,120,.8),0 1px 0 #3A1A0C;pointer-events:none} .ax-sign b{font-family:"Yuji Syuku",serif;font-weight:400;font-size:clamp(9px,1.7vw,22px);letter-spacing:.14em;line-height:1.1} .ax-sign small{font-family:Marcellus,serif;font-size:clamp(5px,.6vw,8px);letter-spacing:.32em;opacity:.85} .ax-light{position:absolute;left:46%;top:66%;width:2px;height:2px;border-radius:50%;box-shadow:0 0 0 0 rgba(255,220,160,0);transition:box-shadow 1.1s ease .3s;pointer-events:none} .ax-in.enter .ax-light{box-shadow:0 0 120px 160px rgba(255,226,180,.95)} .ax-door{position:absolute;left:41.4%;top:50.5%;width:9.6%;height:29%;border:0;border-radius:40% 40% 4px 4px/22% 22% 4px 4px;background:transparent;cursor:pointer;box-shadow:0 0 0 2px rgba(255,214,170,.0);animation:axDoor 2.6s ease-in-out infinite} .ax-door:hover,.ax-door:focus-visible{box-shadow:0 0 0 2px rgba(255,214,170,.85),0 0 30px rgba(255,190,120,.7);outline:0} @keyframes axDoor{0%,100%{box-shadow:0 0 0 0 rgba(255,200,140,0)}50%{box-shadow:0 0 0 2px rgba(255,214,170,.55),0 0 26px rgba(226,81,47,.6)}} .ax-hint{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);white-space:nowrap;padding:5px 14px;border-radius:999px;background:linear-gradient(180deg,#EE6A47,#C2381C);color:#FFF3E6;font-size:clamp(11px,1.1vw,14px);font-weight:700;letter-spacing:.08em;box-shadow:0 4px 14px rgba(0,0,0,.45);border:1px solid #F7A58A} .ax-cap{max-width:1180px;margin:14px auto 0;padding:0 16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;text-align:center} .ax-cap p{margin:0;color:var(--sub)} .ax-free{display:inline-block;padding:7px 18px;border-radius:999px;background:linear-gradient(180deg,#EE6A47,#C2381C);color:#FFF3E6;font-weight:700;letter-spacing:.08em;box-shadow:0 0 0 3px rgba(226,81,47,.2)} .ax-card{padding:clamp(18px,3vw,36px)!important;display:block!important} .ax-head{display:flex;flex-direction:column;gap:12px;margin-bottom:10px} .shu-wm b{background:linear-gradient(100deg,#FFD2BE,#F4896B 45%,#F2B36A)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important} .shu-wm small{color:#F4B9A6!important} .ax-lead{color:#E9D8CB;max-width:46em;margin:0} .ax-lead b{color:#FFD9CB} .ax-shelf{margin-top:26px;padding-top:20px;border-top:1px dashed rgba(244,137,107,.35)} .ax-sh-h{display:flex;align-items:center;gap:12px;margin-bottom:14px} .ax-sh-h i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #F4896B;color:#F4896B;font-family:var(--display)} .ax-sh-h b{font-size:1.15rem;color:#FFE9DA;letter-spacing:.06em} .ax-tag{padding:2px 10px;border-radius:999px;border:1px solid rgba(244,137,107,.6);color:#FFD2BE;font-size:.78rem} .ax-card .bk-idx-h{color:#F4B9A6} .ax-card .bk-t{--c:#E2512F!important} .ax-note{color:#D9C5B8;font-size:.9rem;margin:0 0 12px} .ax-note a{color:#FFC3AE} .ax-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px} .ax-pk{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;background:rgba(226,81,47,.07);border:1px solid rgba(244,137,107,.3);border-top:3px solid var(--fc)} .ax-pk-f{font-size:.8rem;font-weight:700;color:var(--fc);letter-spacing:.06em} .ax-pk a{color:#FFE3D6;font-size:.9rem;text-decoration:none;padding:4px 0;border-bottom:1px dotted rgba(244,137,107,.35)} .ax-pk a::before{content:"・";color:#F4896B} .ax-pk a:hover{color:#fff} .ax-foot{color:#BFA597;margin-top:18px} @media (max-width:760px){.ax-frame{aspect-ratio:4/5;border-radius:16px}.ax-in{transform:translateX(-46%)}.ax-in.enter{transform:translateX(-46%) scale(3.2)}.ax-picks{grid-template-columns:1fr}.ax-sign b{font-size:clamp(12px,3.6vw,18px)}.ax-sign small{font-size:6px}.ax-hint{bottom:-34px}} @media (prefers-reduced-motion:reduce){.ax-door{animation:none}.ax-in{transition:none}} /* 版257 各階から文庫への入口（朱の帯） */ .shu-floor{border-color:rgba(226,81,47,.8)!important;color:#FFE3D6!important;background:rgba(60,20,18,.75)!important} .ax-ent{padding-top:22px;padding-bottom:22px} .ax-ent-in{display:grid;grid-template-columns:200px 1fr auto;gap:22px;align-items:center;padding:14px 22px 14px 14px;border-radius:22px;text-decoration:none;color:#F3E6DA;background:radial-gradient(120% 120% at 100% 0%,rgba(226,81,47,.24),transparent 60%),linear-gradient(160deg,#241214,#160B0D 70%);border:1px solid rgba(226,81,47,.6);box-shadow:0 0 0 1px rgba(226,194,122,.16) inset,0 16px 40px rgba(120,30,15,.3);transition:transform .3s,box-shadow .3s} .ax-ent-in:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(226,194,122,.25) inset,0 20px 50px rgba(160,40,20,.45)} .ax-ent-pic{display:block;border-radius:14px;overflow:hidden;aspect-ratio:3/2;border:1px solid rgba(244,137,107,.45)} .ax-ent-pic img{width:100%;height:100%;object-fit:cover} .ax-ent-tx{display:flex;flex-direction:column;gap:4px} .ax-ent-tx b,.ax-ent-tx .ax-ent-h{font-family:"Yuji Syuku",serif;font-weight:400;font-size:1.7rem;letter-spacing:.14em;background:linear-gradient(100deg,#FFD2BE,#F4896B 45%,#F2B36A);-webkit-background-clip:text;background-clip:text;color:transparent} .ax-ent-tx>span:last-child{color:#E4D3C6;font-size:.92rem} .ax-ent-go{white-space:nowrap} @media (max-width:760px){.ax-ent-in{grid-template-columns:1fr;padding:12px}.ax-ent-go{justify-content:center}} /* 版258：瑠璃の書庫（ささえの文庫の奥、青い洞窟の書庫。調べる棚をひとつに） */ body[data-floor="shoko"]{--bg:#06122A;--bg2:#0A1A3A;--bg3:#0F2450;--card:#0C1D40;--ink:#E6F0FF;--sub:#A9BEDD;--line:#23407A;--accent:#3A86E0;--accent-ink:#06122A;--head:#F2F8FF;--glow:rgba(70,150,240,.45);color-scheme:dark} .shoko{background:radial-gradient(90% 50% at 50% 0%,#0F2A5E,#06122A 70%)} .rr-hero{padding:18px 0 6px} .rr-frame{position:relative;max-width:1180px;margin:0 auto;aspect-ratio:3/2;overflow:hidden;border-radius:22px;border:1px solid rgba(90,170,240,.6);box-shadow:0 0 0 6px rgba(46,111,216,.1),0 30px 70px rgba(0,10,40,.6)} .rr-frame img{width:100%;height:100%;object-fit:cover;display:block;animation:rrDrift 30s ease-in-out infinite alternate} @keyframes rrDrift{from{transform:scale(1.02)}to{transform:scale(1.08) translateX(-1.5%)}} .rr-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 72% 62%,rgba(90,190,255,.18),transparent 70%),linear-gradient(180deg,rgba(4,12,32,.55),transparent 30%,transparent 70%,rgba(4,12,32,.5));pointer-events:none;animation:rrWater 6s ease-in-out infinite alternate} @keyframes rrWater{from{opacity:.75}to{opacity:1}} .rr-title{position:absolute;left:0;right:0;top:6%;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;text-shadow:0 2px 14px rgba(0,20,60,.9)} .rr-kk{font-size:clamp(.72rem,1.2vw,.9rem);letter-spacing:.2em;color:#A9DBFF} .rr-title b{font-family:"Yuji Syuku",serif;font-weight:400;font-size:clamp(1.8rem,4.6vw,3.4rem);letter-spacing:.16em;background:linear-gradient(100deg,#DDF2FF,#7FC4F0 40%,#3A86E0 70%,#B8E4FF);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px rgba(0,30,80,.8))} .rr-title b rt{color:#BFE3FF;-webkit-text-fill-color:#BFE3FF;font-size:.32em} .rr-title small{font-family:Marcellus,serif;font-size:clamp(.6rem,.9vw,.75rem);letter-spacing:.4em;color:#BFE3FF} .rr-cap{max-width:1180px;margin:14px auto 0;padding:0 16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;text-align:center} .rr-cap p{margin:0;color:var(--sub);max-width:52em} .rr-free{display:inline-block;padding:7px 18px;border-radius:999px;background:linear-gradient(180deg,#3A86E0,#1E50A2);color:#EAF4FF;font-weight:700;letter-spacing:.08em;box-shadow:0 0 0 3px rgba(46,111,216,.25)} .rr-back{color:#FFC3AE;font-size:.9rem} .rr-tana .kicker,.rr-k{color:#7FC4F0!important;letter-spacing:.14em} body[data-floor="shoko"] .tn-brand{background:linear-gradient(160deg,rgba(15,36,80,.9),rgba(6,18,42,.9))!important;border-color:rgba(90,170,240,.55)!important} body[data-floor="shoko"] .tn-bn{color:#BFE3FF!important} /* 各階・文庫からの青い入口 */ .ruri-ent{padding-top:22px;padding-bottom:22px} .rr-ent{display:grid;grid-template-columns:220px 1fr auto;gap:22px;align-items:center;padding:14px 22px 14px 14px;border-radius:22px;text-decoration:none;color:#E6F0FF;background:radial-gradient(120% 120% at 100% 0%,rgba(46,111,216,.35),transparent 60%),linear-gradient(160deg,#0C1D40,#06122A 70%);border:1px solid rgba(90,170,240,.6);box-shadow:0 0 0 1px rgba(191,227,255,.12) inset,0 16px 40px rgba(0,20,60,.4);transition:transform .3s,box-shadow .3s} .rr-ent:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(191,227,255,.2) inset,0 20px 50px rgba(20,80,180,.45)} .rr-ent-pic{display:block;border-radius:14px;overflow:hidden;aspect-ratio:3/2;border:1px solid rgba(127,196,240,.5)} .rr-ent-pic img{width:100%;height:100%;object-fit:cover} .rr-ent-tx{display:flex;flex-direction:column;gap:4px} .rr-ent-tx b{font-family:"Yuji Syuku",serif;font-weight:400;font-size:1.7rem;letter-spacing:.14em;color:#BFE3FF;text-shadow:0 0 14px rgba(58,134,224,.6)} .rr-ent-tx b rt{font-size:.38em} .rr-ent-tx>span:last-child{color:#C9D9F2;font-size:.92rem} .btn.rr-go{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;color:#EAF4FF;background:linear-gradient(180deg,#4C9BF0,#1E50A2 70%);border:1px solid #9FD2FF;box-shadow:0 0 0 3px rgba(46,111,216,.2),0 10px 26px rgba(20,70,170,.5);font-weight:700} .ax-down{padding-top:0} @media (max-width:760px){.rr-ent{grid-template-columns:1fr;padding:12px}.btn.rr-go{justify-content:center}.rr-frame{aspect-ratio:4/5;border-radius:16px}.rr-frame img{object-position:62% 50%}} @media (prefers-reduced-motion:reduce){.rr-frame img,.rr-frame::after{animation:none}} /* v259 瑠璃の書庫：扉→俯瞰→水面→橋 */ .rr-in{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:2;font:inherit;font-weight:700;letter-spacing:.12em;padding:12px 28px;border-radius:999px;color:#EAF4FF;background:linear-gradient(180deg,rgba(76,155,240,.85),rgba(30,80,162,.9));border:1px solid #9FD2FF;box-shadow:0 0 0 4px rgba(46,111,216,.25),0 10px 30px rgba(0,20,70,.6);cursor:pointer;animation:rrPulse 2.6s ease-in-out infinite} .rr-in span{display:inline-block;animation:rrBob 1.6s ease-in-out infinite} @keyframes rrPulse{50%{box-shadow:0 0 0 9px rgba(46,111,216,.12),0 10px 30px rgba(0,20,70,.6)}} @keyframes rrBob{50%{transform:translateY(3px)}} .rr-walk{position:relative;margin:26px 0 0} .rr-stage{position:sticky;top:calc(var(--mt-off,72px) + 8px);height:min(calc(100svh - 110px),760px);max-width:1180px;margin:0 auto;border-radius:22px;overflow:hidden;border:1px solid rgba(90,170,240,.55);box-shadow:0 0 0 6px rgba(46,111,216,.08),0 30px 70px rgba(0,10,40,.6);background:#06122A} .rr-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.4s ease,transform 9s ease-out} .rr-stage img.on{opacity:1;transform:scale(1.08)} .rr-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 45% at 50% 70%,rgba(90,190,255,.16),transparent 70%),linear-gradient(180deg,rgba(4,12,32,.45),transparent 28%,transparent 62%,rgba(4,12,32,.7));animation:rrWater 6s ease-in-out infinite alternate} .rr-dots{position:absolute;right:16px;top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;z-index:1} .rr-dots li{width:9px;height:9px;border-radius:50%;background:rgba(191,227,255,.35);border:1px solid rgba(191,227,255,.7);transition:background .4s,transform .4s} .rr-dots li.on{background:#F4896B;border-color:#FFC3AE;transform:scale(1.3);box-shadow:0 0 10px rgba(244,137,107,.8)} .rr-steps{position:relative;margin-top:calc(-1 * min(calc(100svh - 110px),760px))} .rr-step{min-height:95svh;display:flex;align-items:flex-end;justify-content:center;padding:0 16px 14svh} .rr-step:first-child{min-height:min(calc(100svh - 110px),760px)} .rr-say{position:relative;max-width:34em;margin:0;padding:16px 24px 16px 54px;border-radius:16px;color:#EAF4FF;line-height:1.85;font-size:clamp(.95rem,1.6vw,1.1rem);background:linear-gradient(160deg,rgba(8,22,52,.86),rgba(6,16,40,.8));border:1px solid rgba(127,196,240,.5);border-left:4px solid #E2512F;box-shadow:0 16px 40px rgba(0,10,40,.55);backdrop-filter:blur(3px)} .rr-say small{position:absolute;left:16px;top:14px;font-family:"Yuji Syuku",serif;font-size:1.25rem;color:#F4896B} .rr-say .btn.rr-go{display:flex;width:max-content;margin:12px 0 0} /* 本棚は朱色 */ body[data-floor="shoko"] .tn-tab{--c:#E2512F!important} body[data-floor="shoko"] .tn-row{border-bottom-color:rgba(226,81,47,.35)} body[data-floor="shoko"] .tn-pan{border-top-color:rgba(244,137,107,.55)} body[data-floor="shoko"] .tn-brand{border-left:5px solid #E2512F!important} .rr-tana{position:relative;background:linear-gradient(180deg,rgba(6,18,42,.2),rgba(6,18,42,.92) 30%),url(img/shoko_bridge.webp) center top/cover no-repeat} @media (max-width:760px){.rr-stage{border-radius:16px;margin:0 10px}.rr-stage img{object-position:55% 50%}.rr-say{padding:14px 16px 14px 46px}.rr-dots{right:10px}} @media (prefers-reduced-motion:reduce){.rr-stage img{transition:opacity .3s;transform:none!important}.rr-in,.rr-in span,.rr-glow{animation:none}} /* v260 B1 瑠璃文庫：上の帯のB1札（青・水面のきらめき）＋入口の絵＋司書セツ */ .stairs.flr a.fr-bk{--fc:#3A86E0;position:relative;overflow:hidden;background:linear-gradient(180deg,#123A7A,#0A1F4A)!important;border-color:#5AA8F0!important;color:#EAF4FF!important;isolation:isolate} .stairs.flr a.fr-bk .fr-st{color:#9FD8FF!important} .stairs.flr a.fr-bk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background: radial-gradient(1.5px 1.5px at 18% 72%,#fff,transparent 70%),radial-gradient(1.2px 1.2px at 42% 82%,#DFF4FF,transparent 70%),radial-gradient(1.6px 1.6px at 66% 70%,#fff,transparent 70%),radial-gradient(1.2px 1.2px at 84% 84%,#CFEFFF,transparent 70%),radial-gradient(1px 1px at 30% 60%,#fff,transparent 70%),radial-gradient(1.3px 1.3px at 74% 58%,#E6F7FF,transparent 70%), linear-gradient(180deg,transparent 48%,rgba(95,190,255,.28) 62%,rgba(60,150,240,.42));background-size:100% 100%;animation:b1Glint 2.8s ease-in-out infinite} .stairs.flr a.fr-bk::after{content:"";position:absolute;left:-40%;right:-40%;bottom:0;height:46%;z-index:-1;pointer-events:none;background:repeating-linear-gradient(100deg,transparent 0 14px,rgba(190,235,255,.28) 16px,transparent 19px 34px);opacity:.7;animation:b1Wave 5s linear infinite} @keyframes b1Glint{0%,100%{opacity:.55;filter:brightness(1)}50%{opacity:1;filter:brightness(1.5)}} @keyframes b1Wave{to{transform:translateX(34px)}} .stairs.flr a.fr-bk[aria-current]{box-shadow:0 0 0 2px rgba(90,168,240,.5),0 0 18px rgba(58,134,224,.6)!important} body[data-floor="bk"]{--bg:#06122A;--bg2:#0A1A3A;--bg3:#0F2450;--line:#23407A;--glow:rgba(70,150,240,.45)} body[data-floor="bk"] .annex{background:radial-gradient(90% 50% at 50% 0%,#0F2A5E,#06122A 70%)} body[data-floor="bk"] .ax-frame{border-color:rgba(90,170,240,.6);box-shadow:0 0 0 6px rgba(46,111,216,.1),0 30px 70px rgba(0,10,40,.6)} .ax-in{transform-origin:58% 52%} .ax-sign.b1-sign{left:0;right:0;top:4%;width:auto;height:auto;gap:2px;color:#EAF4FF;text-shadow:0 2px 14px rgba(0,20,60,.95)} .b1-sign i{font-style:normal;font-family:Marcellus,serif;font-size:clamp(.8rem,1.4vw,1.1rem);letter-spacing:.3em;padding:2px 12px;border-radius:999px;border:1px solid rgba(159,210,255,.7);background:rgba(10,30,70,.5);color:#BFE3FF} .b1-sign b{font-family:"Yuji Syuku",serif;font-weight:400;font-size:clamp(1.8rem,4.6vw,3.4rem)!important;letter-spacing:.16em;background:linear-gradient(100deg,#DDF2FF,#7FC4F0 40%,#3A86E0 70%,#B8E4FF);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px rgba(0,30,80,.8))} .b1-sign b rt{color:#BFE3FF;-webkit-text-fill-color:#BFE3FF;font-size:.32em} .b1-sign small{font-size:clamp(.6rem,.9vw,.75rem)!important;letter-spacing:.4em;color:#BFE3FF} .b1-spark{position:absolute;left:28%;right:6%;top:56%;bottom:2%;pointer-events:none;background: radial-gradient(2px 2px at 12% 30%,#fff,transparent 70%),radial-gradient(1.6px 1.6px at 30% 62%,#E6F7FF,transparent 70%),radial-gradient(2px 2px at 48% 40%,#fff,transparent 70%),radial-gradient(1.4px 1.4px at 64% 74%,#DFF4FF,transparent 70%),radial-gradient(2px 2px at 80% 46%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 92% 70%,#fff,transparent 70%),radial-gradient(1.3px 1.3px at 22% 86%,#fff,transparent 70%),radial-gradient(1.8px 1.8px at 56% 90%,#fff,transparent 70%);animation:b1Glint 2.2s ease-in-out infinite;mix-blend-mode:screen} .ax-door.b1-go{left:50%;top:auto;bottom:7%;width:auto;height:auto;transform:translateX(-50%);border-radius:999px;padding:12px 28px;background:linear-gradient(180deg,rgba(76,155,240,.9),rgba(30,80,162,.95));border:1px solid #9FD2FF;box-shadow:0 0 0 4px rgba(46,111,216,.25),0 10px 30px rgba(0,20,70,.6);animation:rrPulse 2.6s ease-in-out infinite} .ax-door.b1-go .ax-hint{position:static;transform:none;background:none;box-shadow:none;padding:0;color:#EAF4FF;font-weight:700;letter-spacing:.12em} .ax-in.enter .ax-light{box-shadow:0 0 120px 160px rgba(170,220,255,.9)} .ax-light{left:58%;top:52%} .b1-floor{background:linear-gradient(180deg,#3A86E0,#1E50A2)!important;color:#EAF4FF!important;border-color:#9FD2FF!important} .setsu-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin:6px 0 22px;padding:14px 18px 14px 14px;border-radius:18px;background:linear-gradient(160deg,rgba(15,36,80,.92),rgba(6,18,42,.92));border:1px solid rgba(127,196,240,.55);color:#E6F0FF} .st-pics{position:relative;width:170px;height:170px} .st-girl{width:150px;height:170px;object-fit:cover;object-position:50% 12%;border-radius:14px;border:1px solid rgba(191,227,255,.6)} .st-cat{position:absolute;right:-6px;bottom:-6px;width:74px;height:74px;object-fit:cover;object-position:50% 20%;border-radius:50%;border:2px solid #BFE3FF;box-shadow:0 4px 12px rgba(0,0,0,.4)} .st-who{font-size:.85rem;letter-spacing:.12em;color:#9FD8FF}.st-who b{font-size:1.2rem;color:#EAF4FF} .st-say{margin:6px 0;line-height:1.85}.st-note{margin:0;font-size:.85rem;color:#A9BEDD} .rr-say.st-in{padding-left:96px;min-height:96px} .rr-say .st-av{position:absolute;left:14px;top:14px;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 14%;border:2px solid #BFE3FF} .rr-say.st-in small{left:auto;right:14px;top:10px;font-size:1rem} .st-nm{display:block;font-size:.8rem;letter-spacing:.14em;color:#9FD8FF} .hm-nav.st-nav img{object-fit:cover;object-position:50% 12%} .st-box .hm-say b{color:#3A86E0} .st-q{width:100%;box-sizing:border-box;margin:4px 0 8px;padding:10px 14px;border-radius:999px;border:1.5px solid #3A86E0;font:inherit;background:#F4F9FF;color:#0B1A3A} .st-hit{margin:0 0 8px;font-size:.85rem;color:#1E50A2} @media (max-width:760px){.setsu-card{grid-template-columns:1fr;justify-items:center;text-align:left}.rr-say.st-in{padding-left:84px}.rr-say .st-av{width:54px;height:54px}} @media (prefers-reduced-motion:reduce){.stairs.flr a.fr-bk::before,.stairs.flr a.fr-bk::after,.b1-spark{animation:none}} body[data-floor="bk"] .ax-free{background:linear-gradient(180deg,#3A86E0,#1E50A2)!important;color:#EAF4FF!important;box-shadow:0 0 0 3px rgba(46,111,216,.25)!important} /* v261 白猫ゆきちゃん（外のセツ）と、トップの「セツが待っています」 */ .yk{position:fixed;right:clamp(12px,4vw,56px);bottom:0;z-index:60;pointer-events:none} .yk-cat{display:block;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;width:clamp(110px,11vw,150px);transform:translateY(105%);transition:transform 1.1s cubic-bezier(.3,1.4,.5,1)} .yk-cat img{width:100%;height:auto;display:block;filter:drop-shadow(0 -4px 14px rgba(120,190,255,.45));transform-origin:50% 100%} .yk.on .yk-cat{transform:translateY(6%)} .yk.on .yk-cat img{animation:ykBob 3.4s ease-in-out 1.2s infinite} .yk.on .yk-cat:hover img,.yk.talk .yk-cat img{animation:none;transform:rotate(-4deg) translateY(-4px)} @keyframes ykBob{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg) translateY(-2px)}60%{transform:rotate(2deg)}} .yk-bub{position:absolute;right:0;bottom:calc(100% + 4px);width:min(300px,80vw);pointer-events:auto;padding:16px 18px 14px;border-radius:18px 18px 4px 18px;background:linear-gradient(160deg,#F4F9FF,#E3F0FF);color:#0B1A3A;border:1.5px solid #7FC4F0;box-shadow:0 14px 34px rgba(10,30,80,.35)} .yk-say{margin:0 18px 4px 0;font-size:.92rem;line-height:1.75} .yk-nya{margin:0 0 10px;font-family:"Yuji Syuku",serif;font-size:1.1rem;color:#1E50A2} .yk-go{display:flex;flex-direction:column;align-items:center;padding:10px 14px;border-radius:999px;text-decoration:none;color:#EAF4FF;font-weight:700;background:linear-gradient(180deg,#4C9BF0,#1E50A2 70%);border:1px solid #9FD2FF;box-shadow:0 0 0 3px rgba(46,111,216,.2)} .yk-go small{font-weight:400;font-size:.75rem;opacity:.9} .yk-bye{display:block;margin:8px auto 0;border:0;background:none;color:#4A6A9A;font:inherit;font-size:.82rem;text-decoration:underline;cursor:pointer} .yk-x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:1.1rem;color:#4A6A9A;cursor:pointer} @media (max-width:760px){.yk{bottom:64px;right:8px}.yk-cat{width:96px}} @media (prefers-reduced-motion:reduce){.yk-cat{transition:none}.yk.on .yk-cat img{animation:none}} .st-meet{display:flex;gap:12px;align-items:center;margin:10px 0 14px;padding:10px 14px 10px 10px;border-radius:16px;text-decoration:none;color:#E6F0FF;background:linear-gradient(160deg,#123A7A,#0A1F4A);border:1px solid #5AA8F0;box-shadow:0 0 0 3px rgba(46,111,216,.15)} .st-meet img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:50% 12%;border:2px solid #BFE3FF;flex:none} .st-meet span{display:flex;flex-direction:column;gap:1px}.st-meet small{font-size:.72rem;color:#9FD8FF;letter-spacing:.1em}.st-meet b{font-size:1.02rem}.st-meet em{font-style:normal;font-size:.8rem;color:#C9D9F2} .st-cnt{margin:0 0 6px;font-size:.82rem;color:#9FD8FF} /* v262 B1札：青い光が下から上へ照らす（11-01 TOMO） */ .stairs.flr a.fr-bk{background:linear-gradient(0deg,#5FB4FF 0%,#2E6FD8 22%,#163F8A 55%,#0A1F4A 100%)!important;border-color:#7FC4F0!important;box-shadow:inset 0 -10px 18px rgba(150,215,255,.55),0 -6px 18px rgba(90,170,255,.55),0 -14px 30px rgba(58,134,224,.35)!important;animation:b1Up 3.2s ease-in-out infinite} .stairs.flr a.fr-bk[aria-current]{box-shadow:inset 0 -12px 22px rgba(170,225,255,.7),0 0 0 2px rgba(127,196,240,.6),0 -8px 22px rgba(110,185,255,.7),0 -18px 38px rgba(58,134,224,.45)!important} .stairs.flr a.fr-bk span{position:relative;z-index:1;text-shadow:0 0 8px rgba(160,220,255,.9)} @keyframes b1Up{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}} @media (prefers-reduced-motion:reduce){.stairs.flr a.fr-bk{animation:none}} .stairs.flr a.fr-bk .fr-st{color:#F2FAFF!important;text-shadow:0 1px 3px rgba(5,25,70,.9),0 0 8px rgba(20,70,170,.8)!important}.stairs.flr a.fr-bk span{text-shadow:0 1px 3px rgba(5,25,70,.8),0 0 10px rgba(160,220,255,.8)} /* v263 上の帯の部屋ボタン：部屋ごとの絵の背景＋装飾の銘板の文字（11-01 TOMO 案C） */ header .stairs.flr a.fr-bk,header .stairs.flr a.fr-door,header .stairs.flr a.fr-1,header .stairs.flr a.fr-2,header .stairs.flr a.fr-3{background-image:var(--rb-ov),url(img/room_btn.webp)!important;background-size:100% 100%,100% 500%!important;background-repeat:no-repeat!important;background-position:0 0,50% var(--rb-y)!important;font-family:"Kaisei Decol",var(--display),serif!important;font-weight:700} header .stairs.flr a.fr-bk{--rb-y:0%;--rb-ov:linear-gradient(90deg,rgba(6,18,42,.55),rgba(6,18,42,.15) 70%,transparent);color:#F2FAFF!important;border-color:#7FC4F0!important} header .stairs.flr a.fr-door{--rb-y:25%;--rb-ov:linear-gradient(90deg,rgba(40,24,8,.62),rgba(40,24,8,.25) 70%,rgba(40,24,8,.1));color:#FFF4DE!important;border-color:#E8C98A!important} header .stairs.flr a.fr-1{--rb-y:50%;--rb-ov:linear-gradient(90deg,rgba(255,252,244,.82),rgba(255,252,244,.45) 70%,rgba(255,252,244,.15));color:#1F5E52!important;border-color:#5FB3A1!important} header .stairs.flr a.fr-2{--rb-y:75%;--rb-ov:linear-gradient(90deg,rgba(30,20,60,.62),rgba(30,20,60,.25) 70%,rgba(30,20,60,.1));color:#F6EEFF!important;border-color:#B49AE0!important} header .stairs.flr a.fr-3{--rb-y:100%;--rb-ov:linear-gradient(90deg,rgba(6,10,30,.55),rgba(6,10,30,.2) 70%,transparent);color:#FFE9B0!important;border-color:#E2C27A!important} /* 銘板の内側の細い線 */ header .stairs.flr a.fr-bk,header .stairs.flr a.fr-door,header .stairs.flr a.fr-1,header .stairs.flr a.fr-2,header .stairs.flr a.fr-3{box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),inset 0 0 0 3px rgba(255,255,255,.38),0 2px 8px rgba(0,0,0,.25)!important;animation:none} header .stairs.flr a.fr-1{box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),inset 0 0 0 3px rgba(31,94,82,.35),0 2px 8px rgba(0,0,0,.15)!important} header .stairs.flr a[aria-current="page"]{box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),inset 0 0 0 3px rgba(255,255,255,.55),0 0 0 2px color-mix(in srgb,var(--fc) 55%,transparent),0 0 18px -2px color-mix(in srgb,var(--fc) 90%,transparent)!important} header .stairs.flr a.fr-bk[aria-current="page"]{box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),0 0 0 2px rgba(127,196,240,.6),0 -8px 22px rgba(110,185,255,.7)!important} header .stairs.flr a>span{text-shadow:0 1px 3px rgba(0,0,0,.55)} header .stairs.flr a.fr-1>span{text-shadow:0 0 6px rgba(255,255,255,.95),0 0 2px #fff} header .stairs.flr a .fr-st{font-family:"Kaisei Decol",serif;font-weight:500;letter-spacing:.08em;color:inherit!important;opacity:.95} header .stairs.flr a:not([aria-current]):hover{filter:brightness(1.12)} header .stairs.flr a.fr-bk::before{opacity:.6} @media (max-width:760px){header .stairs.flr a.fr-bk,header .stairs.flr a.fr-door,header .stairs.flr a.fr-1,header .stairs.flr a.fr-2,header .stairs.flr a.fr-3{background-size:100% 100%,auto 500%!important}} body[data-floor] header .stairs.flr a.fr-door,body[data-floor] header .stairs.flr a.fr-door[aria-current="page"]{color:#FFF4DE!important} body[data-floor] header .stairs.flr a.fr-1{color:#1F5E52!important} body[data-floor] header .stairs.flr a.fr-2{color:#F6EEFF!important} body[data-floor] header .stairs.flr a.fr-3{color:#FFE9B0!important} /* v264 セツのサイン「せつ」：案内文の最後に（11-01 TOMO 決定版） */ .st-sign{display:block;width:92px;height:auto;margin:4px 0 2px auto} .rr-say .st-sign{width:80px;margin:2px 0 0 auto} .hm-say .st-sign{width:72px;margin:2px 0 0 auto} .hm-box .hm-say{position:static;opacity:1;transform:none;max-width:none;padding:0;background:none;color:inherit;border-radius:0;box-shadow:none;margin:0 22px 10px 0;font-size:.9rem;line-height:1.7} /* v266 入口の絵の「B1」札を、上の帯のB1ボタンと同じ見た目に（11-01 TOMO） */ .b1-sign i.b1-pill{display:inline-flex;align-items:center;gap:10px;height:64px;padding:0 26px 0 8px;border-radius:999px;border:1.5px solid #7FC4F0;letter-spacing:0;font-family:"Kaisei Decol",serif;font-weight:700;color:#F2FAFF; background:linear-gradient(90deg,rgba(6,18,42,.55),rgba(6,18,42,.15) 70%,transparent),url(img/room_btn.webp) 50% 0%/100% 500% no-repeat; box-shadow:inset 0 0 0 2px rgba(0,0,0,.18),inset 0 0 0 3px rgba(255,255,255,.45),inset 0 -12px 22px rgba(150,215,255,.55),0 -8px 22px rgba(110,185,255,.6),0 -18px 38px rgba(58,134,224,.4); text-shadow:0 1px 3px rgba(5,25,70,.85),0 0 10px rgba(160,220,255,.8);animation:b1Up 3.2s ease-in-out infinite;margin-bottom:6px} .b1-ic{display:block;width:46px;height:46px;flex:none}.b1-ic svg{width:100%;height:100%;display:block} .b1-pt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05} .b1-pt em{font-style:normal;font-family:"Kaisei Decol",serif;font-size:1.45rem;letter-spacing:.06em} .b1-sign .b1-pt small{font-family:"Kaisei Decol",serif;font-weight:500;font-size:.85rem!important;letter-spacing:.1em!important;color:#F2FAFF} @media (max-width:760px){.b1-sign i.b1-pill{height:50px;padding:0 18px 0 6px}.b1-ic{width:36px;height:36px}.b1-pt em{font-size:1.15rem}.b1-sign .b1-pt small{font-size:.72rem!important}} @media (prefers-reduced-motion:reduce){.b1-sign i.b1-pill{animation:none}} /* v266 「文庫に入る」：青くふわふわ光り、左から右へキラーっとさざ波がゆらめく（11-01 TOMO） */ .ax-door.b1-go{overflow:hidden;isolation:isolate;animation:b1Fuwa 3.2s ease-in-out infinite!important} .ax-door.b1-go .ax-hint{position:relative!important;z-index:2;border:0!important;outline:0!important;box-shadow:none!important;text-shadow:0 1px 3px rgba(5,25,70,.8),0 0 10px rgba(160,220,255,.7)} .ax-door.b1-go::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath d='M0 8 Q10 3 20 8 T40 8 T60 8 T80 8' fill='none' stroke='%23CFEFFF' stroke-width='1.3' stroke-opacity='.75'/%3E%3Cpath d='M0 17 Q10 12 20 17 T40 17 T60 17 T80 17' fill='none' stroke='%23A8DCFF' stroke-width='1' stroke-opacity='.55'/%3E%3C/svg%3E"); background-size:80px 24px;animation:b1Ripple 3.6s linear infinite} .ax-door.b1-go::after{content:"";position:absolute;inset:-2px;z-index:1;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(100deg,transparent 0 35%,rgba(160,220,255,.25) 42%,rgba(235,250,255,.85) 50%,rgba(160,220,255,.25) 58%,transparent 65% 100%), radial-gradient(1.6px 1.6px at 20% 40%,#fff,transparent 70%),radial-gradient(1.3px 1.3px at 55% 70%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 80% 30%,#fff,transparent 70%); background-size:260% 100%,100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;animation:b1Sweep 3.2s cubic-bezier(.45,.05,.35,1) infinite} @keyframes b1Ripple{to{background-position:80px 0}} @keyframes b1Sweep{0%{background-position:130% 0,0 0,0 0,0 0;opacity:.2}15%{opacity:1}60%{background-position:-30% 0,0 0,0 0,0 0;opacity:1}61%,100%{background-position:-30% 0,0 0,0 0,0 0;opacity:0}} @keyframes b1Fuwa{0%,100%{box-shadow:0 0 0 4px rgba(46,111,216,.22),0 0 14px rgba(90,170,255,.35),0 10px 30px rgba(0,20,70,.6);filter:brightness(1)}50%{box-shadow:0 0 0 7px rgba(90,170,255,.18),0 0 34px rgba(110,190,255,.75),0 10px 30px rgba(0,20,70,.6);filter:brightness(1.12)}} @media (prefers-reduced-motion:reduce){.ax-door.b1-go,.ax-door.b1-go::before,.ax-door.b1-go::after{animation:none!important}} .ax-door.b1-go .ax-hint{left:auto!important;bottom:auto!important;top:auto!important} .ax-door.b1-go::before{opacity:.3} @keyframes b1Sweep2{0%{background-position:-30% 0,0 0,0 0,0 0;opacity:.2}15%{opacity:1}60%{background-position:130% 0,0 0,0 0,0 0;opacity:1}61%,100%{background-position:130% 0,0 0,0 0,0 0;opacity:0}} .ax-door.b1-go::after{animation-name:b1Sweep} @media (prefers-reduced-motion:reduce){.ax-door.b1-go::after{animation:none!important}} @keyframes b1Sweep3{0%{background-position:100% 0,0 0,0 0,0 0;opacity:0}10%{opacity:1}75%{background-position:0% 0,0 0,0 0,0 0;opacity:1}85%,100%{background-position:0% 0,0 0,0 0,0 0;opacity:0}} .ax-door.b1-go::after{animation:b1Sweep3 3.6s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.ax-door.b1-go::after{animation:none!important}} /* v266 B1 瑠璃文庫の中の読む棚：枠も文字も瑠璃色に（11-01 TOMO「全部、瑠璃色に」） */ body[data-floor="bk"] .shu{--shu:#3A86E0;--shu-l:#8FCBF5;--shu-d:#1E50A2;--shu-ink:#EAF4FF;--shu-bg:#06122A} body[data-floor="bk"] .shu-card{color:#E6F0FF;background:radial-gradient(120% 90% at 100% 0%,rgba(58,134,224,.28),transparent 55%),radial-gradient(80% 70% at 0% 100%,rgba(58,134,224,.14),transparent 60%),linear-gradient(160deg,#0F2450,#081634 70%)!important;border:1px solid rgba(127,196,240,.6)!important;box-shadow:0 0 0 1px rgba(191,227,255,.14) inset,0 0 0 6px rgba(46,111,216,.08),0 24px 60px rgba(0,20,70,.45)!important} body[data-floor="bk"] .shu-card::before{border-color:rgba(127,196,240,.25)} body[data-floor="bk"] .shu-card h2,body[data-floor="bk"] .shu-card h3{color:#F2F8FF} body[data-floor="bk"] .shu-card rt{color:#A9DBFF} body[data-floor="bk"] .shu-card p,body[data-floor="bk"] .ax-lead{color:#D6E4F7} body[data-floor="bk"] .shu-mark,body[data-floor="bk"] .bk-mark{filter:hue-rotate(195deg) saturate(1.1) brightness(1.1)} body[data-floor="bk"] .shu-wm b,body[data-floor="bk"] .bk-wm b{color:#BFE3FF!important;background:none!important;-webkit-text-fill-color:#BFE3FF} body[data-floor="bk"] .shu-wm small,body[data-floor="bk"] .bk-wm small{color:#8FCBF5!important} body[data-floor="bk"] .ax-sh-h i,body[data-floor="bk"] .ax-sh-h .ax-tag{border-color:#7FC4F0!important;color:#BFE3FF!important;background:rgba(58,134,224,.12)!important} body[data-floor="bk"] .ax-sh-h b{color:#F2F8FF} body[data-floor="bk"] .ax-shelf+.ax-shelf,body[data-floor="bk"] .ax-shelf{border-color:rgba(127,196,240,.3)!important} body[data-floor="bk"] .ax-card .bk-idx-h{color:#A9DBFF} body[data-floor="bk"] .ax-card .bk-t{--c:#5FA8EE!important} body[data-floor="bk"] .shu-card hr,body[data-floor="bk"] .setsu-card+*{border-color:rgba(127,196,240,.3)} /* v266 入口の絵の中の青いきらめき */ .b1-tw{position:absolute;z-index:1;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%) scale(.3);opacity:0;mix-blend-mode:screen; background:radial-gradient(circle,#fff 0 12%,rgba(170,225,255,.95) 22%,rgba(80,160,255,.45) 45%,transparent 70%);animation:b1Tw 3s ease-in-out infinite} .b1-tw::before,.b1-tw::after{content:"";position:absolute;left:50%;top:50%;width:260%;height:1px;background:linear-gradient(90deg,transparent,rgba(210,240,255,.9),transparent);transform:translate(-50%,-50%)} .b1-tw::after{transform:translate(-50%,-50%) rotate(90deg)} @keyframes b1Tw{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}45%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(20deg)}60%{opacity:.8}} .b1-shim{position:absolute;left:28%;right:4%;top:56%;bottom:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.55; background:repeating-linear-gradient(100deg,transparent 0 22px,rgba(120,200,255,.16) 26px,transparent 32px 60px); -webkit-mask:linear-gradient(180deg,transparent,#000 30%);mask:linear-gradient(180deg,transparent,#000 30%);animation:b1Shim 7s linear infinite} @keyframes b1Shim{to{background-position:120px 0}} @media (prefers-reduced-motion:reduce){.b1-tw,.b1-shim{animation:none}.b1-tw{opacity:.6}} /* v266 読む棚の「瑠璃文庫」ロゴを青く光らせる（11-01 TOMO） */ body[data-floor="bk"] .ax-card .bk-logo{position:relative} body[data-floor="bk"] .ax-card .shu-mark{animation:b1Logo 3.4s ease-in-out infinite;overflow:visible} body[data-floor="bk"] .ax-card .shu-mark .bk-glow{transform-box:fill-box;transform-origin:center;animation:b1Lamp 2.6s ease-in-out infinite} @keyframes b1Logo{0%,100%{filter:hue-rotate(195deg) saturate(1.1) brightness(1.1) drop-shadow(0 0 4px rgba(90,170,255,.5))}50%{filter:hue-rotate(195deg) saturate(1.2) brightness(1.4) drop-shadow(0 0 14px rgba(120,195,255,.95))}} @keyframes b1Lamp{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}} body[data-floor="bk"] .ax-card .shu-wm b{position:relative;background:linear-gradient(100deg,#BFE3FF 0 40%,#FFFFFF 48%,#E6F6FF 52%,#BFE3FF 60% 100%)!important;background-size:250% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important; filter:drop-shadow(0 0 6px rgba(90,170,255,.7)) drop-shadow(0 0 14px rgba(58,134,224,.45));animation:b1Word 4s ease-in-out infinite} @keyframes b1Word{0%{background-position:100% 0}60%,100%{background-position:0% 0}} body[data-floor="bk"] .ax-card .shu-wm small{text-shadow:0 0 8px rgba(110,185,255,.8)} @media (prefers-reduced-motion:reduce){body[data-floor="bk"] .ax-card .shu-mark,body[data-floor="bk"] .ax-card .shu-mark .bk-glow,body[data-floor="bk"] .ax-card .shu-wm b{animation:none}} /* v266 瑠璃文庫のコミック：左から、少し重ねて、一画面に多く（11-01 TOMO） */ body[data-floor="bk"] .cm-book .cm-row{padding:22px 60px 12px 8px;scroll-snap-type:none} body[data-floor="bk"] .cm-book .cm-ep{width:210px;padding:0;margin-left:-46px;position:relative;transform:none;opacity:1;transition:transform .3s ease,filter .3s} body[data-floor="bk"] .cm-book .cm-ep:first-child{margin-left:0} body[data-floor="bk"] .cm-book .cm-ep b,body[data-floor="bk"] .cm-book .cm-ep small{text-align:left;padding-left:52px;padding-right:4px} body[data-floor="bk"] .cm-book .cm-ep:first-child b,body[data-floor="bk"] .cm-book .cm-ep:first-child small{padding-left:6px} body[data-floor="bk"] .cm-book .cm-cv{box-shadow:-10px 0 18px -8px rgba(0,0,0,.6),inset 6px 0 0 rgba(0,0,0,.18),0 18px 30px -16px rgba(0,0,0,.55);border-color:rgba(127,196,240,.55)} body[data-floor="bk"] .cm-book .cm-ep:hover,body[data-floor="bk"] .cm-book .cm-ep:focus-visible{transform:translateY(-10px);z-index:20!important;filter:brightness(1.08)} body[data-floor="bk"] .cm-book .cm-ep:hover .cm-cv{box-shadow:0 0 0 2px #7FC4F0,0 0 24px rgba(110,185,255,.6)} body[data-floor="bk"] .cm-book .cm-ep b{color:#BFE3FF} body[data-floor="bk"] .cm-nav{border-color:rgba(127,196,240,.7);color:#BFE3FF;background:rgba(6,18,42,.75);z-index:30} body[data-floor="bk"] .cm-dots i{background:rgba(127,196,240,.3)}body[data-floor="bk"] .cm-dots i.on{background:#7FC4F0} @media (max-width:760px){body[data-floor="bk"] .cm-book .cm-row{padding-inline:6px 40px}body[data-floor="bk"] .cm-book .cm-ep{width:150px;margin-left:-34px}body[data-floor="bk"] .cm-book .cm-ep b,body[data-floor="bk"] .cm-book .cm-ep small{padding-left:38px}body[data-floor="bk"] .cm-book .cm-ep b{font-size:.85rem}} body[data-floor="bk"] .cm-book .cm-ep:nth-child(1){z-index:19} body[data-floor="bk"] .cm-book .cm-ep:nth-child(2){z-index:18} body[data-floor="bk"] .cm-book .cm-ep:nth-child(3){z-index:17} body[data-floor="bk"] .cm-book .cm-ep:nth-child(4){z-index:16} body[data-floor="bk"] .cm-book .cm-ep:nth-child(5){z-index:15} body[data-floor="bk"] .cm-book .cm-ep:nth-child(6){z-index:14} body[data-floor="bk"] .cm-book .cm-ep:nth-child(7){z-index:13} body[data-floor="bk"] .cm-book .cm-ep:nth-child(8){z-index:12} body[data-floor="bk"] .cm-book .cm-ep:nth-child(9){z-index:11} body[data-floor="bk"] .cm-book .cm-ep:nth-child(10){z-index:10} /* v266 セツのことばは、大きめの丸文字（11-01 TOMO） */ .setsu-card .st-say,.setsu-card .st-cnt,.setsu-card .st-note,.setsu-card .st-who,.st-box .hm-say,.rr-say.st-in{font-family:"Kiwi Maru",serif!important;font-weight:500} .setsu-card .st-say{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.9;letter-spacing:.04em} .setsu-card .st-cnt{font-size:1rem} .setsu-card .st-note{font-size:.98rem;line-height:1.8} .setsu-card .st-who{font-size:1rem}.setsu-card .st-who b{font-size:1.4rem} .st-box .hm-say{font-size:1.02rem} .rr-say.st-in{font-size:clamp(1.02rem,1.7vw,1.18rem)} @media (max-width:760px){.setsu-card .st-say{font-size:1.08rem}} /* v266 B1 階ごとのおすすめ：囲いの縁が左から右へ光る */ .ax-pk{position:relative;isolation:isolate} .ax-pk::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none; background:linear-gradient(90deg,transparent 0%,transparent 38%,color-mix(in srgb,var(--fc) 60%,#fff) 47%,#fff 50%,color-mix(in srgb,var(--fc) 60%,#fff) 53%,transparent 62%,transparent 100%) no-repeat; background-size:300% 100%;background-position:100% 0; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); filter:drop-shadow(0 0 4px var(--fc));animation:pkEdge 4.2s ease-in-out infinite} .ax-pk:nth-child(2)::after{animation-delay:.5s}.ax-pk:nth-child(3)::after{animation-delay:1s} @keyframes pkEdge{0%{background-position:100% 0;opacity:0}12%{opacity:1}70%{background-position:0% 0;opacity:1}85%,100%{background-position:0% 0;opacity:0}} @media (prefers-reduced-motion:reduce){.ax-pk::after{animation:none;opacity:0}} /* v266 セツのご案内：青でもあもあ光る */ .hm-nav.st-nav{border-color:#7FB8F0;background:linear-gradient(180deg,#14305E,#0B1A3A);color:#DCEBFF;animation:stMoa 3.6s ease-in-out infinite} .hm-nav.st-nav img{border-color:#9CCBFF} .hm-nav.st-nav[aria-expanded="true"]{background:linear-gradient(180deg,#DCEBFF,#7FB8F0);color:#0B1A3A} @keyframes stMoa{0%,100%{box-shadow:0 0 14px rgba(90,160,255,.45),0 0 30px rgba(60,120,240,.25)}50%{box-shadow:0 0 26px rgba(120,190,255,.85),0 0 60px rgba(70,140,255,.5),0 0 90px rgba(60,120,240,.25)}} @media (prefers-reduced-motion:reduce){.hm-nav.st-nav{animation:none}} /* v266 セツの札：雪の花が咲くゴージャスな縁（img/setsu_frame.webp） */ .setsu-card{position:relative;isolation:isolate;padding:34px 40px 34px 36px;margin:26px 0 34px;border-color:transparent} .setsu-card::before{content:"";position:absolute;inset:-18px;z-index:3;pointer-events:none;border-style:solid;border-width:78px;border-image:url(img/setsu_frame.webp) 330 round;filter:drop-shadow(0 0 6px rgba(170,215,255,.55))} @media (max-width:760px){.setsu-card{padding:30px 24px}.setsu-card::before{inset:-12px;border-width:56px}} /* v266 瑠璃文庫のボタンはぜんぶゴージャス版（「文庫に入る」と同じ光と漣） */ body[data-floor="bk"] .bk-home,body[data-floor="shoko"] .bk-home,.btn.rr-go,.rr-in{position:relative;overflow:hidden;isolation:isolate;color:#EAF4FF!important;background:linear-gradient(180deg,rgba(76,155,240,.92),rgba(30,80,162,.96))!important;border:1px solid #9FD2FF!important;text-shadow:0 1px 3px rgba(5,25,70,.8),0 0 10px rgba(160,220,255,.7);animation:b1Fuwa 3.2s ease-in-out infinite!important} .rr-in{position:absolute} body[data-floor="bk"] .bk-home::before,body[data-floor="shoko"] .bk-home::before,.btn.rr-go::before,.rr-in::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath d='M0 8 Q10 3 20 8 T40 8 T60 8 T80 8' fill='none' stroke='%23CFEFFF' stroke-width='1.3' stroke-opacity='.75'/%3E%3Cpath d='M0 17 Q10 12 20 17 T40 17 T60 17 T80 17' fill='none' stroke='%23A8DCFF' stroke-width='1' stroke-opacity='.55'/%3E%3C/svg%3E"); background-size:80px 24px;animation:b1Ripple 3.6s linear infinite} body[data-floor="bk"] .bk-home::after,body[data-floor="shoko"] .bk-home::after,.btn.rr-go::after,.rr-in::after{content:"";position:absolute;inset:-2px;z-index:1;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(100deg,transparent 0 35%,rgba(160,220,255,.25) 42%,rgba(235,250,255,.85) 50%,rgba(160,220,255,.25) 58%,transparent 65% 100%), radial-gradient(1.6px 1.6px at 20% 40%,#fff,transparent 70%),radial-gradient(1.3px 1.3px at 55% 70%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 80% 30%,#fff,transparent 70%); background-size:260% 100%,100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;animation:b1Sweep3 3.6s ease-in-out infinite} body[data-floor="bk"] .bk-home:nth-child(2)::after{animation-delay:.6s} @media (prefers-reduced-motion:reduce){body[data-floor="bk"] .bk-home,body[data-floor="bk"] .bk-home::before,body[data-floor="bk"] .bk-home::after,.btn.rr-go,.btn.rr-go::before,.btn.rr-go::after,.rr-in,.rr-in::before,.rr-in::after{animation:none!important}} /* v266 調べる棚の入口：青い絵の上でも題字が読めるように */ .rr-title{background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(4,14,40,.62),transparent 75%);padding:14px 40px} .rr-title b{color:#EAF4FF!important;text-shadow:0 2px 6px rgba(2,10,30,.9),0 0 18px rgba(120,190,255,.75)!important} .rr-title .rr-kk,.rr-title small{color:#D6E9FF!important;text-shadow:0 1px 4px rgba(2,10,30,.95)} /* v266 セツの札の雪 */ .st-snow{position:absolute;inset:40px;z-index:-1;overflow:hidden;pointer-events:none;border-radius:12px} .st-snow i{position:absolute;top:-20px;color:#F4FAFF;font-style:normal;line-height:1;text-shadow:0 0 6px rgba(190,225,255,.9);animation:stFall linear infinite,stSway ease-in-out infinite alternate} @keyframes stFall{from{transform:translateY(-20px) rotate(0)}to{transform:translateY(420px) rotate(240deg)}} @keyframes stSway{from{margin-left:-10px}to{margin-left:10px}} @media (max-width:760px){.st-snow{inset:28px}.st-snow i{animation-name:stFallSp,stSway}} @keyframes stFallSp{from{transform:translateY(-20px) rotate(0)}to{transform:translateY(900px) rotate(300deg)}} /* v266 調べる棚の入口のキラキラ */ .rr-hero .rr-frame{position:relative} .rr-shim{left:42%;right:16%;top:44%;bottom:22%} .rr-hero .rr-title,.rr-hero .rr-in{z-index:2} /* v266 調べる棚の中：3枚の絵が自動でフェードして入れかわる（スクロールではない）、セツの言葉も合わせて変わる */ .rr-auto .rr-stage{position:relative;top:auto;height:auto;aspect-ratio:3/2;max-height:760px} .rr-auto .rr-stage img{transition:opacity 1.8s ease,transform 8s ease-out} .rr-auto .rr-steps{position:absolute;inset:0;margin:0;z-index:2;pointer-events:none} .rr-auto .rr-step{position:absolute;left:0;right:0;bottom:7%;min-height:0!important;padding:0 16px;display:flex;justify-content:center;opacity:0;transform:translateY(10px);transition:opacity 1.2s ease,transform 1.2s ease} .rr-auto .rr-step.on{opacity:1;transform:none;transition-delay:.5s;pointer-events:auto} .rr-auto .rr-dots{z-index:3}.rr-auto .rr-dots li{cursor:pointer} .rr-go-row{display:flex;justify-content:center;margin:22px 0 0} @media (max-width:760px){.rr-auto .rr-stage{aspect-ratio:4/5}.rr-auto .rr-step{bottom:5%;padding:0 10px}.rr-auto .rr-say{font-size:.95rem}} .rr-auto .rr-stage .rr-steps img{opacity:1;transform:none;transition:none;right:auto;bottom:auto} .rr-auto .rr-stage .rr-steps img.st-sign{position:static;width:auto;height:auto;display:block} .rr-auto .rr-stage .rr-steps img.st-sign{width:120px!important;height:auto!important;margin:4px 0 0 auto} @media (max-width:760px){.rr-auto .rr-stage .rr-steps img.st-sign{width:96px!important}} /* v266 橋の場面：左にセツ（絵ごとに入れかわる） */ .rr-auto .rr-figs{position:absolute;left:2%;bottom:0;top:6%;width:34%;z-index:1;pointer-events:none} .rr-auto .rr-stage .rr-figs img.rr-fig{position:absolute;left:0;right:auto;top:auto;bottom:0;inset:auto auto 0 0;width:auto;height:96%;max-width:100%;object-fit:contain;object-position:left bottom;opacity:0;transform:translateX(-14px);transition:opacity 1.6s ease,transform 1.6s ease;filter:drop-shadow(0 0 18px rgba(90,170,255,.45)) drop-shadow(0 10px 20px rgba(0,10,40,.5))} .rr-auto .rr-stage .rr-figs img.rr-fig.on{opacity:1;transform:none;transition-delay:.3s} .rr-auto .rr-stage .rr-figs img.rr-fig3{height:80%} .rr-auto .rr-step{left:30%} @media (max-width:760px){.rr-auto .rr-figs{left:0;top:2%;bottom:auto;height:54%;width:52%}.rr-auto .rr-stage .rr-figs img.rr-fig{height:100%}.rr-auto .rr-stage .rr-figs img.rr-fig3{height:78%}.rr-auto .rr-step{left:0}} @media (max-width:760px){.rr-auto .rr-figs{top:3%;height:48%;width:46%}} /* v266 参のセツは右に、セツの言葉の枠は青く光る */ .rr-auto .rr-figs{left:2%;right:2%;width:auto} .rr-auto .rr-stage .rr-figs img.rr-fig3{left:auto;right:0;inset:auto 0 0 auto;object-position:right bottom;transform:translateX(14px)} .rr-auto .rr-stage .rr-figs img.rr-fig3.on{transform:none} .rr-auto .rr-step[data-i="2"]{left:0;right:32%} .rr-auto .rr-say.st-in{border:1px solid #8CC8FF;border-left:1px solid #8CC8FF;animation:stBoxGlow 3.4s ease-in-out infinite} @keyframes stBoxGlow{0%,100%{box-shadow:0 0 0 1px rgba(120,190,255,.35),0 0 12px rgba(90,170,255,.45),0 16px 40px rgba(0,10,40,.55)}50%{box-shadow:0 0 0 2px rgba(150,210,255,.6),0 0 28px rgba(110,190,255,.85),0 0 54px rgba(70,140,255,.4),0 16px 40px rgba(0,10,40,.55)}} @media (prefers-reduced-motion:reduce){.rr-auto .rr-say.st-in{animation:none}} @media (max-width:760px){.rr-auto .rr-figs{left:0;right:0;width:auto}.rr-auto .rr-stage .rr-figs img.rr-fig{max-width:52%}.rr-auto .rr-stage .rr-figs img.rr-fig3{max-width:70%}.rr-auto .rr-step[data-i="2"]{left:0;right:0}} /* v266 調べる棚の入口：キラキラを濃く、波紋は奥（天井側）から手前へ向かってくる */ .rr-hero .b1-tw{animation-name:b1Tw2} @keyframes b1Tw2{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(20deg)}60%{opacity:.9}} .rr-hero .b1-tw{background:radial-gradient(circle,#fff 0 16%,rgba(190,235,255,1) 26%,rgba(90,170,255,.6) 48%,transparent 72%);filter:drop-shadow(0 0 4px rgba(150,210,255,.9))} .rr-shim{left:42%;right:12%;top:36%;bottom:24%;opacity:.8; background:repeating-linear-gradient(180deg,transparent 0 14px,rgba(150,215,255,.28) 17px,transparent 21px 34px)!important; -webkit-mask:radial-gradient(ellipse 60% 70% at 50% 30%,#000 40%,transparent 80%);mask:radial-gradient(ellipse 60% 70% at 50% 30%,#000 40%,transparent 80%);animation:rrToward 3.2s linear infinite!important} @keyframes rrToward{from{background-position:0 0}to{background-position:0 34px}} .rr-rip{position:absolute;z-index:1;width:150px;height:44px;margin:-22px 0 0 -75px;border-radius:50%;border:1.5px solid rgba(190,235,255,.85);box-shadow:0 0 10px rgba(120,200,255,.7),inset 0 0 8px rgba(120,200,255,.5);pointer-events:none;mix-blend-mode:screen;opacity:0;animation:rrRip 5.6s ease-out infinite} @keyframes rrRip{0%{opacity:0;transform:translateY(0) scale(.15)}12%{opacity:.95}100%{opacity:0;transform:translateY(60px) scale(1.7)}} @media (max-width:760px){.rr-rip{width:90px;height:26px;margin:-13px 0 0 -45px}} @media (prefers-reduced-motion:reduce){.rr-rip{display:none}.rr-shim{animation:none!important}} /* v266 調べる棚の入口：ランプの光をもわもわ */ .rr-lamp{position:absolute;z-index:1;width:calc(var(--ls,1)*120px);height:calc(var(--ls,1)*120px);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(circle,rgba(255,226,150,.75) 0%,rgba(255,190,90,.38) 28%,rgba(255,160,60,.14) 52%,transparent 72%);filter:blur(2px);animation:rrLamp 3.4s ease-in-out infinite,rrLampDrift 5s ease-in-out infinite} @keyframes rrLamp{0%,100%{opacity:.55}30%{opacity:.95}55%{opacity:.7}75%{opacity:1}} @keyframes rrLampDrift{0%,100%{transform:translate(-50%,-50%) scale(.92)}50%{transform:translate(-50%,-52%) scale(1.12)}} @media (max-width:760px){.rr-lamp{width:calc(var(--ls,1)*70px);height:calc(var(--ls,1)*70px)}} @media (prefers-reduced-motion:reduce){.rr-lamp{animation:none;opacity:.7}} .b1-rip{width:110px;height:26px;margin:-13px 0 0 -55px;animation:b1RipFoot 5.4s ease-out infinite} @keyframes b1RipFoot{0%{opacity:0;transform:scale(.2)}12%{opacity:.9}100%{opacity:0;transform:scale(1.8)}} @media (prefers-reduced-motion:reduce){.b1-rip{display:none}} /* v266 瑠璃文庫に移した解説ノート */ body[data-floor="bk"] .nt-card{background:linear-gradient(160deg,rgba(15,36,80,.9),rgba(6,18,42,.9));border:1.5px solid #8CC8FF;color:#E6F0FF;animation:stBoxGlow 3.4s ease-in-out infinite;margin-top:6px} body[data-floor="bk"] .nt-card small{color:#9FD2FF}body[data-floor="bk"] .nt-card b{color:#fff}body[data-floor="bk"] .nt-card i{color:#BFE3FF} body[data-floor="bk"] .nt-card .nt-tx i{position:relative;overflow:hidden;isolation:isolate;color:#EAF4FF!important;background:linear-gradient(180deg,rgba(76,155,240,.92),rgba(30,80,162,.96))!important;border:1px solid #9FD2FF!important;text-shadow:0 1px 3px rgba(5,25,70,.8),0 0 10px rgba(160,220,255,.7);animation:b1Fuwa 3.2s ease-in-out infinite!important} /* v266 解説ノートの「読む」もゴージャス版（漣＋左→右のきらめき） */ body[data-floor="bk"] .nt-card .nt-tx i::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath d='M0 8 Q10 3 20 8 T40 8 T60 8 T80 8' fill='none' stroke='%23CFEFFF' stroke-width='1.3' stroke-opacity='.75'/%3E%3Cpath d='M0 17 Q10 12 20 17 T40 17 T60 17 T80 17' fill='none' stroke='%23A8DCFF' stroke-width='1' stroke-opacity='.55'/%3E%3C/svg%3E"); background-size:80px 24px;animation:b1Ripple 3.6s linear infinite} body[data-floor="bk"] .nt-card .nt-tx i::after{content:"";position:absolute;inset:-2px;z-index:1;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(100deg,transparent 0 35%,rgba(160,220,255,.25) 42%,rgba(235,250,255,.85) 50%,rgba(160,220,255,.25) 58%,transparent 65% 100%), radial-gradient(1.6px 1.6px at 20% 40%,#fff,transparent 70%),radial-gradient(1.3px 1.3px at 55% 70%,#fff,transparent 70%),radial-gradient(1.5px 1.5px at 80% 30%,#fff,transparent 70%); background-size:260% 100%,100% 100%,100% 100%,100% 100%;background-repeat:no-repeat;animation:b1Sweep3 3.6s ease-in-out infinite} @media (prefers-reduced-motion:reduce){body[data-floor="bk"] .nt-card .nt-tx i,body[data-floor="bk"] .nt-card .nt-tx i::before,body[data-floor="bk"] .nt-card .nt-tx i::after{animation:none!important}} /* v266 瑠璃文庫のコミック表紙をほんの少し青暗く */ body[data-floor="bk"] .cm-row .cm-cv img,body[data-floor="bk"] .cm-row img{filter:brightness(.9) saturate(.92)} body[data-floor="bk"] .cm-row .cm-cv{position:relative} body[data-floor="bk"] .cm-row .cm-cv::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(20,50,120,.14),rgba(8,20,60,.24));mix-blend-mode:multiply} .rr-hero .rr-rip{display:none!important} /* v266 調べる棚＝瑠璃の書庫の本棚（階の色＝1階ミント・2階紫・3階金はそのまま） */ body[data-floor="shoko"] .tn-pick{--c:var(--fc)!important;position:relative;overflow:hidden;padding:46px 20px 18px;border-radius:14px; border:2px solid var(--fc);border-left:2px solid var(--fc); background: radial-gradient(120% 60% at 20% 0%,rgba(90,160,255,.16),transparent 60%), radial-gradient(80% 70% at 90% 100%,rgba(60,120,230,.18),transparent 70%), linear-gradient(180deg,#0E2552,#071636 70%,#061230); box-shadow:0 0 0 4px color-mix(in srgb,var(--fc) 18%,transparent),0 0 26px color-mix(in srgb,var(--fc) 30%,transparent),inset 0 0 40px rgba(0,8,30,.6)} /* 上の段：本の背が並ぶ（階の色の濃淡） */ body[data-floor="shoko"] .tn-pick::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;pointer-events:none; background: linear-gradient(180deg,transparent 0 24px,color-mix(in srgb,var(--fc) 55%,#2A1A10) 24px 30px), repeating-linear-gradient(90deg, color-mix(in srgb,var(--fc) 85%,#fff) 0 13px,#0A1838 13px 15px, color-mix(in srgb,var(--fc) 70%,#0A1838) 15px 33px,#0A1838 33px 35px, var(--fc) 35px 45px,#0A1838 45px 47px, color-mix(in srgb,var(--fc) 45%,#0A1838) 47px 66px,#0A1838 66px 68px, color-mix(in srgb,var(--fc) 92%,#fff) 68px 78px,#0A1838 78px 80px, color-mix(in srgb,var(--fc) 60%,#0A1838) 80px 96px,#0A1838 96px 98px); -webkit-mask:linear-gradient(180deg,#000 0 30px); box-shadow:0 2px 0 rgba(0,0,0,.35)} body[data-floor="shoko"] .tn-pick::after{content:"";position:absolute;left:0;right:0;top:0;height:24px;pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,236,170,.55) 4px 5px,transparent 5px 9px) 0 6px/100% 2px no-repeat, repeating-linear-gradient(90deg,transparent 0 4px,rgba(255,236,170,.4) 4px 5px,transparent 5px 9px) 0 17px/100% 2px no-repeat;opacity:.55} body[data-floor="shoko"] .tn-pf{box-shadow:0 0 12px color-mix(in srgb,var(--fc) 60%,transparent)} /* 目線の3つ＝本の背の形 */ body[data-floor="shoko"] .tn-pick .tn-tab{border-radius:8px 8px 4px 4px;border:1.5px solid var(--fc);padding:12px 6px; background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 30%,#0B1A3A),color-mix(in srgb,var(--fc) 12%,#06122A)); box-shadow:inset 0 3px 0 rgba(255,226,150,.45),inset 0 -3px 0 rgba(255,226,150,.35),0 4px 0 color-mix(in srgb,var(--fc) 50%,#2A1A10),0 8px 14px rgba(0,8,30,.5)} body[data-floor="shoko"] .tn-pick .tn-tab[aria-expanded="true"]{background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 55%,#0B1A3A),color-mix(in srgb,var(--fc) 25%,#06122A));box-shadow:inset 0 3px 0 rgba(255,226,150,.6),inset 0 -3px 0 rgba(255,226,150,.45),0 4px 0 color-mix(in srgb,var(--fc) 50%,#2A1A10),0 0 20px color-mix(in srgb,var(--fc) 60%,transparent)} /* 棚板 */ body[data-floor="shoko"] .tn-pick .tn-pan{border-top:0;margin-top:18px;padding-top:6px} body[data-floor="shoko"] .tn-pick .tn-row{border-bottom:0;margin:0 0 10px;padding:0 10px;border-radius:6px 6px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(120,180,255,.05)); box-shadow:0 5px 0 color-mix(in srgb,var(--fc) 45%,#3A2210),0 9px 10px rgba(0,8,30,.55)} body[data-floor="shoko"] .tn-pick .tn-row summary:hover{text-shadow:0 0 10px color-mix(in srgb,var(--fc) 70%,transparent)} /* どの階でも同じ棚など：瑠璃の地に朱の棚板 */ body[data-floor="shoko"] .tn-body > .tn-row,body[data-floor="shoko"] .tn-body > details{background:linear-gradient(180deg,#0E2552,#071636);border:1.5px solid rgba(127,196,240,.45);box-shadow:0 6px 0 #8E2A18,0 10px 16px rgba(0,8,30,.55);border-radius:12px 12px 4px 4px} body[data-floor="shoko"] .tn-pick::before,body[data-floor="shoko"] .tn-pick::after{content:none} body[data-floor="shoko"] .tn-pick{padding-top:62px} .tn-books{position:absolute;left:0;right:0;top:0;height:54px;display:flex;align-items:flex-end;gap:2px;padding:0 10px;overflow:hidden;pointer-events:none; border-bottom:6px solid color-mix(in srgb,var(--fc) 50%,#3A2210);box-shadow:0 4px 8px rgba(0,8,30,.5);background:linear-gradient(180deg,rgba(4,12,32,.9),rgba(10,26,60,.85))} .tn-books i{flex:none;display:block;border-radius:2px 2px 0 0;position:relative;box-shadow:inset -2px 0 0 rgba(0,0,0,.25),inset 2px 0 0 rgba(255,255,255,.12)} .tn-books i::before,.tn-books i::after{content:"";position:absolute;left:2px;right:2px;height:2px;background:rgba(255,226,150,.7);border-radius:1px} .tn-books i::before{top:6px}.tn-books i::after{bottom:7px} .tn-books i.lean{transform:rotate(-8deg);transform-origin:bottom left;margin-left:4px;margin-right:6px} body[data-floor="shoko"] .tn-pick .tn-tab i{background:var(--fc)!important;box-shadow:0 0 6px var(--fc)} body[data-floor="shoko"] .tn-pick .tn-pan h3 i{background:var(--fc)!important} body[data-floor="shoko"] .tn-pick .tn-row summary::after{color:var(--fc)!important} body[data-floor="shoko"] .tn-pick .tn-btn{border-color:var(--fc)!important;color:#fff!important;box-shadow:0 0 14px color-mix(in srgb,var(--fc) 45%,transparent)} /* v266 灯の道の札も、上の帯の部屋ボタン（部屋の絵＋装飾の銘板）と同じデザインに */ .tr2 .tr-pill{background-image:var(--rb-ov),url(img/room_btn.webp);background-size:100% 100%,100% 500%;background-repeat:no-repeat;background-position:0 0,50% var(--rb-y);border:2px solid var(--fc);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),inset 0 0 0 4px rgba(0,0,0,.12)} .tr2 .st-tt .tr-pill{--rb-y:50%;--rb-ov:linear-gradient(90deg,rgba(255,252,244,.82),rgba(255,252,244,.45) 70%,rgba(255,252,244,.15));--ft:#1F5E52;--fn:#1F5E52;border-color:#5FB3A1} .tr2 .st-tm .tr-pill{--rb-y:75%;--rb-ov:linear-gradient(90deg,rgba(30,20,60,.62),rgba(30,20,60,.25) 70%,rgba(30,20,60,.1));--ft:#F6EEFF;--fn:#F6EEFF;border-color:#B49AE0} .tr2 .st-sn .tr-pill{--rb-y:100%;--rb-ov:linear-gradient(90deg,rgba(6,10,30,.55),rgba(6,10,30,.2) 70%,transparent);--ft:#FFE9B0;--fn:#FFE9B0;border-color:#E2C27A} .tr2 .tr-tx b,.tr2 .tr-nm{font-family:"Kaisei Decol",var(--display),serif!important;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.35)} .tr2 .st-tt .tr-tx b,.tr2 .st-tt .tr-nm{text-shadow:0 1px 2px rgba(255,255,255,.6)} .tr2 .tr-tx b{font-size:1.2rem}.tr2 .tr-nm{font-size:.98rem;letter-spacing:.06em} /* v266 灯の道の光（ミント→紫→金）に合わせて、本棚の本と枠の色が移りかわる */ @property --lc{syntax:'';inherits:true;initial-value:#5FB3A1} body[data-floor="shoko"] .tn-pick{animation:pickLight 7s ease-in-out infinite alternate;border-color:var(--lc)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--lc) 18%,transparent),0 0 26px color-mix(in srgb,var(--lc) 35%,transparent),inset 0 0 40px rgba(0,8,30,.6)} @keyframes pickLight{0%{--lc:#5FB3A1}50%{--lc:#9B7BC8}100%{--lc:#E2C27A}} .tn-books{border-bottom-color:color-mix(in srgb,var(--lc,var(--fc)) 50%,#3A2210)} .tn-books i{transition:none} @media (prefers-reduced-motion:reduce){body[data-floor="shoko"] .tn-pick{animation:none;--lc:var(--fc)}} /* v266 調べる棚：三冊の古書（朱の革）から開く。縁は階の色でもわもわ光る */ .rr-tomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,40px);max-width:980px;margin:34px auto 0;padding:0 16px;align-items:end} .rr-tome{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .tm-bk{position:relative;width:min(100%,240px)} .tm-bk img{display:block;width:100%;height:auto;animation:tmGlow 3.6s ease-in-out infinite;transition:transform .4s} .rr-tome:nth-child(2) .tm-bk img{animation-delay:-1.2s}.rr-tome:nth-child(3) .tm-bk img{animation-delay:-2.4s} @keyframes tmGlow{0%,100%{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tc) 70%,transparent)) drop-shadow(0 0 16px color-mix(in srgb,var(--tc) 35%,transparent)) drop-shadow(0 14px 14px rgba(0,8,30,.6))} 50%{filter:drop-shadow(0 0 12px var(--tc)) drop-shadow(0 0 34px color-mix(in srgb,var(--tc) 70%,transparent)) drop-shadow(0 14px 14px rgba(0,8,30,.6))}} .rr-tome:hover .tm-bk img,.rr-tome.on .tm-bk img{transform:translateY(-4px)} .tm-lb{position:absolute;left:13%;right:13%;top:22.5%;height:21.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;pointer-events:none;font-family:"Kaisei Decol",var(--display),serif;color:#F6E2A8;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 10px rgba(255,214,140,.45)} .tm-lb small{font-size:clamp(.66rem,1.3vw,.86rem);letter-spacing:.2em;color:var(--tc);text-shadow:0 0 8px var(--tc),0 1px 2px #000} .tm-lb b{font-size:clamp(.92rem,2.3vw,1.5rem);letter-spacing:.1em;line-height:1.15;font-weight:700} .tm-lb i{font-style:normal;font-size:clamp(.7rem,1.4vw,.95rem);letter-spacing:.2em} .tm-sub{margin:0;font-size:.86rem;color:#CFE3FF;opacity:.9} .rr-tomes .btn.tm-go{font-size:clamp(.82rem,1.6vw,1rem);padding:12px clamp(12px,2vw,24px);gap:6px;white-space:nowrap;border-color:color-mix(in srgb,var(--tc) 70%,#9FD2FF)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--tc) 35%,transparent),0 0 18px color-mix(in srgb,var(--tc) 55%,transparent)!important} @media (max-width:760px){.rr-tomes{gap:8px;padding:0 8px}.tm-sub{font-size:.72rem}.rr-tomes .btn.tm-go{font-size:.74rem;padding:10px 8px;white-space:normal;line-height:1.3}} @media (prefers-reduced-motion:reduce){.tm-bk img{animation:none;filter:drop-shadow(0 0 10px var(--tc))}} /* 本の背の列と光の色変わりはやめる */ .tn-books{display:none!important} body[data-floor="shoko"] .tn-pick{animation:none!important;padding-top:18px!important;border-color:var(--fc)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--fc) 18%,transparent),0 0 26px color-mix(in srgb,var(--fc) 30%,transparent),inset 0 0 40px rgba(0,8,30,.6)!important} .rr-tomes .btn.tm-go{word-break:keep-all} /* 光の色は階ごとに直接指定 */ .rr-tome[data-s="tt"] .tm-bk img{animation-name:tmGlow_tt} @keyframes tmGlow_tt{0%,100%{filter:drop-shadow(0 0 6px rgba(95,179,161,.75)) drop-shadow(0 0 16px rgba(95,179,161,.35)) drop-shadow(0 14px 14px rgba(0,8,30,.6))}50%{filter:drop-shadow(0 0 12px rgba(95,179,161,1)) drop-shadow(0 0 34px rgba(95,179,161,.7)) drop-shadow(0 14px 14px rgba(0,8,30,.6))}} .rr-tome[data-s="tm"] .tm-bk img{animation-name:tmGlow_tm} @keyframes tmGlow_tm{0%,100%{filter:drop-shadow(0 0 6px rgba(155,123,200,.75)) drop-shadow(0 0 16px rgba(155,123,200,.35)) drop-shadow(0 14px 14px rgba(0,8,30,.6))}50%{filter:drop-shadow(0 0 12px rgba(155,123,200,1)) drop-shadow(0 0 34px rgba(155,123,200,.7)) drop-shadow(0 14px 14px rgba(0,8,30,.6))}} .rr-tome[data-s="sn"] .tm-bk img{animation-name:tmGlow_sn} @keyframes tmGlow_sn{0%,100%{filter:drop-shadow(0 0 6px rgba(226,194,122,.75)) drop-shadow(0 0 16px rgba(226,194,122,.35)) drop-shadow(0 14px 14px rgba(0,8,30,.6))}50%{filter:drop-shadow(0 0 12px rgba(226,194,122,1)) drop-shadow(0 0 34px rgba(226,194,122,.7)) drop-shadow(0 14px 14px rgba(0,8,30,.6))}} .rr-tomes-sec{margin:10px 0 30px}.rr-tomes-sec .rr-tomes{margin-top:18px} /* v266 本の中の棚（開くまで隠し、開くと背景の絵ごと全面に） */ body[data-floor="shoko"] #tana{display:none} body[data-floor="shoko"] #tana.tm-in{display:block;position:fixed;inset:0;z-index:900;overflow-y:auto;overscroll-behavior:contain;padding:20px 0 40px; background:linear-gradient(180deg,rgba(6,18,42,.35),rgba(6,18,42,.9) 40%),url(img/shoko_bridge.webp) center top/cover no-repeat fixed,#06122A;animation:tmOpen .7s cubic-bezier(.2,.7,.2,1)} @keyframes tmOpen{from{opacity:0;transform:perspective(1200px) rotateY(-14deg) scale(.94);transform-origin:left center}to{opacity:1;transform:none}} html.tm-lock,html.tm-lock body{overflow:hidden} body[data-floor="shoko"] #tana .vw-bar{display:none} .tm-close{position:sticky;top:10px;z-index:5;display:flex;margin:0 16px 0 auto;align-items:center;gap:6px;font:inherit;font-weight:700;font-size:.92rem;padding:9px 18px;border-radius:999px;cursor:pointer; color:#EAF4FF;background:linear-gradient(180deg,rgba(76,155,240,.92),rgba(30,80,162,.96));border:1px solid #9FD2FF;box-shadow:0 0 16px rgba(90,170,255,.55)} .tm-close span{font-size:1.2rem;line-height:1} .tm-close2{position:static;margin:26px auto 0} @media (prefers-reduced-motion:reduce){body[data-floor="shoko"] #tana.tm-in{animation:none}} .rr-tome .tm-bk{cursor:pointer} .rr-tome .tm-bk:focus-visible{outline:2px solid #9FD2FF;outline-offset:6px;border-radius:12px} /* v266 入口の絵と三冊の本をひとつに */ .rr-hero .rr-frame .rr-tomes-in{position:absolute;left:34%;right:3%;bottom:3%;z-index:3;margin:0;padding:0;max-width:none;gap:2.4%;align-items:end} .rr-tomes-in .tm-bk{width:68%} .rr-tomes-in .tm-sub{display:none} .rr-tomes-in .btn.tm-go{font-size:clamp(.66rem,1.05vw,.9rem);padding:8px 12px} .rr-tomes-in .tm-lb small{font-size:clamp(.5rem,.9vw,.72rem)}.rr-tomes-in .tm-lb b{font-size:clamp(.66rem,1.6vw,1.2rem)}.rr-tomes-in .tm-lb i{font-size:clamp(.5rem,.95vw,.78rem)} .rr-in.rr-in2{position:static;transform:none;display:inline-flex;margin:12px auto 0} .rr-cap{text-align:center} @media (max-width:760px){.rr-hero .rr-frame .rr-tomes-in{left:3%;right:3%;bottom:3%}.rr-tomes-in .tm-bk{width:72%}.rr-tomes-in .btn.tm-go{font-size:.66rem;padding:7px 6px}} /* v266 本の中は、その本の色ひと色に（1F ミント／2F 紫／3F 金） */ body[data-floor="shoko"] #tana.rr-tt{--bc:#5FB3A1;--bcl:#A8E3D3;--bcd:#2E7D6C;--bcr:95,179,161} body[data-floor="shoko"] #tana.rr-tm{--bc:#9B7BC8;--bcl:#D3C0F0;--bcd:#5E4592;--bcr:155,123,200} body[data-floor="shoko"] #tana.rr-sn{--bc:#E2C27A;--bcl:#F6E3B0;--bcd:#9C7B33;--bcr:226,194,122} body[data-floor="shoko"] #tana.tm-in{background:linear-gradient(180deg,rgba(var(--bcr),.16),rgba(6,18,42,.55) 22%,rgba(6,18,42,.92) 45%),url(img/shoko_bridge.webp) center top/cover no-repeat fixed,#06122A;box-shadow:inset 0 0 0 3px rgba(var(--bcr),.75),inset 0 0 60px rgba(var(--bcr),.35)} body[data-floor="shoko"] #tana .rr-k{color:var(--bcl)!important} body[data-floor="shoko"] #tana .tn-brand{border:1px solid var(--bc)!important;border-left:5px solid var(--bc)!important;box-shadow:0 0 22px rgba(var(--bcr),.35)!important} body[data-floor="shoko"] #tana .tn-tags li{border-color:var(--bc)!important;color:var(--bcl)!important} body[data-floor="shoko"] #tana .tn-pick{border-color:var(--bc)!important;box-shadow:0 0 0 4px rgba(var(--bcr),.18),0 0 24px rgba(var(--bcr),.4)!important} body[data-floor="shoko"] #tana .tn-tab,body[data-floor="shoko"] #tana .tn-btn{border-color:var(--bc)!important;box-shadow:inset 0 3px 0 rgba(var(--bcr),.55),0 4px 0 var(--bcd),0 0 14px rgba(var(--bcr),.3)!important} body[data-floor="shoko"] #tana .tn-tab[aria-expanded="true"]{background:rgba(var(--bcr),.28)!important} body[data-floor="shoko"] #tana details.u65-cat{border-color:rgba(var(--bcr),.75)!important} body[data-floor="shoko"] #tana details.u65-cat.tn-tier{box-shadow:0 6px 0 var(--bcd),0 10px 18px rgba(0,8,30,.55)!important} body[data-floor="shoko"] #tana .u65-k{border-color:var(--bc)!important;color:var(--bcl)!important} body[data-floor="shoko"] #tana .tm-close{background:linear-gradient(180deg,rgba(var(--bcr),.95),var(--bcd));border-color:var(--bcl);box-shadow:0 0 16px rgba(var(--bcr),.6);color:#fff} body[data-floor="shoko"] #tana .tn-diff a{color:var(--bcl)} /* 本の題名を大きく光らせる */ .tn-bn.tn-bn-bk{font-family:"Kaisei Decol",var(--display),serif;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.15;letter-spacing:.08em;color:#fff; text-shadow:0 0 10px rgba(var(--bcr),.95),0 0 26px rgba(var(--bcr),.75),0 0 48px rgba(var(--bcr),.45);animation:tnBkGlow 3.6s ease-in-out infinite} .tn-bn.tn-bn-bk span{font-size:.55em;margin-left:.2em;color:var(--bcl)} @keyframes tnBkGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}} body[data-floor="shoko"] #tana .tn-flh{color:var(--bcl);font-weight:700;margin:14px 0 4px} /* となりの本へ（部屋ボタンの絵の札） */ body[data-floor="shoko"] #tana .tn-road{margin:10px 0 16px} body[data-floor="shoko"] #tana .tn-road li.on .tr-pill{box-shadow:0 0 0 3px rgba(var(--bcr),.5),0 0 22px rgba(var(--bcr),.8)} body[data-floor="shoko"] #tana .tn-road li.on em{color:var(--bcl);font-weight:700} #tana.tm-flip{animation:tmFlip .62s ease-in-out} @keyframes tmFlip{0%{opacity:1}40%{opacity:0;transform:perspective(1200px) rotateY(10deg)}60%{opacity:0;transform:perspective(1200px) rotateY(-10deg)}100%{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.tn-bn.tn-bn-bk,#tana.tm-flip{animation:none}} @media (max-width:600px){body[data-floor="shoko"] #tana .tn-road em{font-size:.66rem;white-space:nowrap;padding:4px 8px}body[data-floor="shoko"] #tana .tn-road small{font-size:.64rem}} /* v266 絵の中の「瑠璃文庫について」と SNS の札 */ .rr-auto .btn.rr-go.rr-about{position:absolute;top:4%;right:3%;z-index:4;display:inline-flex;align-items:center;gap:8px;font-size:clamp(.82rem,1.3vw,1rem);padding:10px 20px} .rr-about .rr-play{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.6);font-size:.72em;padding-left:.12em} .rr-auto .rr-dots{top:50%} .rr-sns{position:absolute;right:2%;bottom:1.6%;z-index:4;display:flex;gap:8px;margin:0;padding:0;list-style:none} .rr-sns a{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#EAF4FF;background:linear-gradient(180deg,rgba(76,155,240,.85),rgba(20,60,130,.92));border:1px solid #9FD2FF;box-shadow:0 0 12px rgba(90,170,255,.5);transition:transform .2s,box-shadow .2s} .rr-sns a:hover,.rr-sns a:focus-visible{transform:translateY(-2px);box-shadow:0 0 20px rgba(140,200,255,.9)} .rr-sns svg{width:18px;height:18px} .rr-vd{position:fixed;inset:0;z-index:950;display:grid;place-items:center;padding:16px;background:rgba(3,10,26,.82);backdrop-filter:blur(4px)} .rr-vd[hidden]{display:none} .rr-vd-in{width:min(960px,100%);max-height:100%;overflow:auto;padding:14px;border-radius:18px;background:linear-gradient(180deg,#0E2550,#071631);border:1px solid #8CC8FF;box-shadow:0 0 30px rgba(90,170,255,.45)} .rr-vd-x{position:static;margin:0 0 8px auto} .rr-vd-k{margin:0 0 10px;color:#9FD2FF;font-weight:700;letter-spacing:.1em;font-size:.9rem} .rr-vd-box{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000} .rr-vd-box video{display:none;width:100%;height:100%;object-fit:contain;background:#000} .rr-vd-wait{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center} .rr-vd-wait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7)} .rr-vd-wait p{position:relative;margin:0 0 6%;padding:14px 20px;border-radius:12px;background:rgba(6,18,42,.78);border:1px solid #8CC8FF;color:#EAF4FF;text-align:center;line-height:1.8} .rr-vd-wait small{color:#9FD2FF} @media (max-width:760px){.rr-auto .btn.rr-go.rr-about{top:3%;right:2%;padding:8px 14px;font-size:.8rem}.rr-sns a{width:32px;height:32px}.rr-sns svg{width:16px;height:16px}} .rr-tl-row{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap} .rr-free.rr-free-in{margin:0;font-size:clamp(.72rem,1.15vw,.95rem);padding:8px 16px;white-space:nowrap;box-shadow:0 0 14px rgba(90,170,255,.45)} @media (max-width:760px){.rr-tl-row{gap:8px}.rr-free.rr-free-in{font-size:.68rem;padding:5px 10px}} @media (max-width:760px){.rr-tl-row{margin-bottom:8px}} /* v266 セツ物語 setsu.html */ .rr-about .rr-ab-t{display:flex;flex-direction:column;line-height:1.25;text-align:left}.rr-about .rr-ab-t b{font-family:"Kaisei Decol",var(--display),serif;font-size:1.12em;letter-spacing:.06em}.rr-about .rr-ab-t small{font-size:.72em;opacity:.9;font-weight:500} .sx-hero{padding:18px 16px 0}.sx-frame{position:relative;max-width:1180px;margin:0 auto;border-radius:22px;overflow:hidden;border:1px solid rgba(140,200,255,.55);box-shadow:0 0 30px rgba(60,140,240,.35)} .sx-frame>img{display:block;width:100%;height:auto;filter:brightness(.9) saturate(.95)} .sx-title{position:absolute;left:0;right:0;top:9%;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;text-shadow:0 2px 14px rgba(0,10,40,.9)} .sx-title b{font-family:"Kaisei Decol",var(--display),serif;font-size:clamp(2.2rem,6vw,4.4rem);letter-spacing:.14em;text-shadow:0 0 16px rgba(120,190,255,.9),0 0 40px rgba(60,140,240,.6)} .sx-title small{font-size:clamp(.9rem,1.8vw,1.3rem);letter-spacing:.14em;color:#CFE6FF} .sx-card{display:grid;grid-template-columns:minmax(140px,240px) 1fr;gap:26px;align-items:end;padding:22px 26px;border-radius:20px;background:rgba(6,18,42,.78);border:1px solid #8CC8FF;box-shadow:0 0 22px rgba(90,170,255,.3)} .sx-fig{width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(0,8,30,.6))} .sx-tx p{color:#DCEBFF;line-height:1.95}.sx-tx .rr-say{margin:0 0 14px}.sx-tx .st-sign{display:block;margin:6px 0 0 auto;width:120px} .sx-sec .sec-head h2{color:#fff}.sx-vd{max-width:960px;margin:0 auto} .sx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px} .sx-it{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:rgba(6,18,42,.78);border:1px solid rgba(140,200,255,.5);color:#EAF4FF;text-decoration:none} .sx-it .sx-th{aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0B1E40}.sx-it .sx-th img{width:100%;height:100%;object-fit:cover} .sx-it .sx-k{font-size:.78rem;color:#9FD2FF} .sx-empty{grid-column:1/-1;margin:0;padding:22px;text-align:center;border-radius:14px;border:1px dashed rgba(140,200,255,.5);color:#BFD8F5;background:rgba(6,18,42,.55)} .sx-end{text-align:center}.sx-follow{color:#9FD2FF;font-weight:700;letter-spacing:.12em;margin:0 0 10px} .rr-sns.sx-sns{position:static;justify-content:center;margin:0 0 24px}.sx-sns a{width:46px;height:46px}.sx-sns svg{width:22px;height:22px} .sx-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} @media (max-width:760px){.sx-card{grid-template-columns:1fr;padding:18px}.sx-fig{max-width:150px;margin:0 auto}.sx-title{top:6%}} .setsu-pg .sx-title{left:5%;right:auto;top:7%;align-items:flex-start;text-align:left} .sx-vds{display:grid;grid-template-columns:1fr 1fr;gap:22px} .sx-vf{margin:0}.sx-vf .rr-vd-box video{display:block} .sx-vf figcaption{margin-top:10px;color:#CFE6FF;font-size:.9rem;line-height:1.7}.sx-vf figcaption b{display:block;color:#fff;font-size:1.05rem} @media (max-width:760px){.sx-vds{grid-template-columns:1fr}} /* v266 セツのご案内（B1）は青に */ .hm-box.st-box{background:linear-gradient(180deg,#0E2550,#071631);color:#E6F1FF;border:1.5px solid #8CC8FF;box-shadow:0 0 0 4px rgba(90,170,255,.18),0 0 26px rgba(90,170,255,.35),0 24px 60px -20px rgba(0,0,0,.6)} .hm-box.st-box .hm-list a{border-color:rgba(140,200,255,.45);background:rgba(30,80,162,.18)} .hm-box.st-box .hm-list a:hover,.hm-box.st-box .hm-list a:focus,.hm-box.st-box .hm-list a.on,.hm-box.st-box .hm-list a[aria-current]{background:rgba(58,134,224,.35);border-color:#9FD2FF} .hm-box.st-box .hm-list small{color:#BFD8F5;opacity:1} .hm-box.st-box .hm-emg{color:#BFD8F5} .hm-box.st-box input{border-color:#8CC8FF!important;background:rgba(6,18,42,.7)!important;color:#EAF4FF!important} /* 版269 1階のB1入口：2種類の本棚の説明 */ .rr-ent-b1 .rr-ent-tx>span.rr-ent-lead{color:#C9D9F2;font-size:.95rem} .rr-ent-two{display:flex;flex-direction:column;gap:6px;margin-top:6px} .rr-ent-two>span{display:block;color:#C9D9F2;font-size:.9rem;line-height:1.7;padding-left:.2em} .rr-ent-two i{font-style:normal;display:inline-block;margin-right:.7em;padding:1px 10px;border-radius:999px;font-size:.82rem;font-weight:700;color:#fff;background:#E2512F;box-shadow:0 0 10px rgba(226,81,47,.45)} .rr-ent-two>span+span i{background:#2E6FD8;box-shadow:0 0 10px rgba(58,134,224,.55)} /* 版270 玄関：見学する（部屋ボタン）と、ゆきちゃん */ .sg-tour{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transition:opacity 1.2s ease 3.2s} .sg-out.brand-on .sg-tour{opacity:1} .sg-tour-k{margin:0;font-family:"Kaisei Decol",serif;font-size:.92rem;letter-spacing:.14em;color:#F3ECDD;text-shadow:0 1px 6px rgba(0,0,0,.8);display:flex;gap:10px;align-items:baseline} .sg-tour-k small{font-family:var(--body,inherit);font-size:.72rem;letter-spacing:.04em;opacity:.85} .sg-tourbar{display:block;background:rgba(8,12,30,.45);padding:6px 8px;border-radius:999px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .sg-tourbar .stairs.flr{margin:0;flex-wrap:wrap;justify-content:center} .sg-out.go .sg-yuki,.sg-out.go .sg-yk-bub{opacity:0;pointer-events:none;transition:opacity .5s} .sg-yuki{position:absolute;z-index:5;padding:0;border:0;background:none;cursor:pointer;width:90px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.55));transform-origin:50% 100%;animation:ykBob 4.5s ease-in-out infinite} .sg-yuki img{display:block;width:100%;height:auto} .sg-yuki:hover,.sg-yuki:focus-visible{filter:drop-shadow(0 0 12px rgba(191,227,255,.8)) drop-shadow(0 4px 10px rgba(0,0,0,.55))} .sg-yuki.nya{animation:ykNya .7s ease} @keyframes ykBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes ykNya{0%{transform:scale(1)}25%{transform:scale(1.08,.94) rotate(-4deg)}55%{transform:scale(.97,1.05) rotate(3deg)}100%{transform:scale(1)}} .sg-yk-bub{position:absolute;z-index:6;width:min(280px,80vw);padding:14px 16px 14px;border-radius:16px;background:linear-gradient(160deg,#0C1D40,#06122A);border:1px solid rgba(127,196,240,.7);color:#E6F0FF;box-shadow:0 0 18px rgba(58,134,224,.45),0 12px 30px rgba(0,0,0,.5)} .sg-yk-bub .yk-x{position:absolute;right:6px;top:4px;border:0;background:none;color:#BFE3FF;font-size:1.2rem;cursor:pointer} .sg-yk-bub .yk-nya{margin:0 0 4px;font-family:"Yuji Syuku",serif;font-size:1.3rem;color:#BFE3FF;text-shadow:0 0 10px rgba(58,134,224,.7)} .sg-yk-bub .yk-say{margin:0 0 10px;font-size:.86rem;line-height:1.7} .sg-yk-bub .yk-go{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:999px;text-decoration:none;color:#fff;font-weight:700;background:linear-gradient(90deg,#1E50A2,#3A86E0);box-shadow:0 0 14px rgba(58,134,224,.6)} .sg-yk-bub .yk-go small{font-weight:400;font-size:.72rem;opacity:.9} @media (prefers-reduced-motion:reduce){.sg-yuki,.sg-yuki.nya{animation:none}.sg-tour{transition:none}} /* 版270 登録のあとのプラン選び・アップデートの入口 */ .sg-up{margin:0;padding:8px 16px;border-radius:14px;background:rgba(11,15,36,.72);border:1px solid rgba(226,194,122,.7);color:#F8EBC8;text-align:center;font-size:.9rem;line-height:1.6;box-shadow:0 0 16px rgba(226,194,122,.35)} .sg-up b{display:block;font-family:"Kaisei Decol",serif;letter-spacing:.12em;color:#FFE9B0} .sg-up small{opacity:.85;font-size:.76rem} .rd-plan{width:100%;margin:6px 0 4px;text-align:left} .rd-plan-k{margin:0 0 8px;font-size:.86rem}.rd-plan-k b{display:block;font-size:1rem;margin-bottom:2px} .rd-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .rd-p{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:14px;border:1.5px solid var(--line);background:var(--card);color:var(--head);cursor:pointer;text-align:left;font:inherit} .rd-p i{font-style:normal;letter-spacing:.1em;color:#C9A65A;font-size:.8rem}.rd-p b{font-size:1rem}.rd-p small{font-size:.74rem;color:var(--sub)} .rd-p[aria-pressed="true"]{border-color:#C9A65A;box-shadow:0 0 0 2px rgba(201,166,90,.35),0 0 14px rgba(226,194,122,.45)} .rd-msg{margin-top:8px} .pr-up{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:0;width:100%} .pr-up small{font-size:.72rem;opacity:.85;font-weight:400} /* 版272 セツの物語（縦の動画5本） */ .sx-story{margin-top:40px} .sx-st-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:26px 0 12px;color:#fff;font-family:"Kaisei Decol",serif;font-weight:500;font-size:1.25rem;letter-spacing:.08em} .sx-st-h small{font-family:inherit;font-size:.8rem;color:#CFE6FF;letter-spacing:.02em} .sx-st-row{display:flex;flex-wrap:wrap;justify-content:center;gap:22px} .sx-stv{width:min(260px,44vw)} .sx-vt{max-width:none}.sx-vt video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#06122A} .sx-stv figcaption small{display:block;font-size:.76rem;color:#9FC4EA} @media (max-width:560px){.sx-stv{width:calc(50% - 12px)}.sx-st-row{gap:14px}} .sx-vf .rr-vd-box.sx-vt{aspect-ratio:9/16}.sx-vf .sx-vt video{height:100%;aspect-ratio:auto} body.vw-pics .vw-pic img,body.vw-fold .vw-pic img{object-position:50% 35%} .wa-many{margin:10px 0 0;font-size:.8rem;line-height:1.7;color:var(--ink-2,#5b6470);opacity:.9}.wa-many small{display:block;font-size:.7rem;opacity:.75} .wg-lk-p{margin:8px 0 0;font-size:.84rem}.wg-link{color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:.85}.wg-link:hover{opacity:1} .fs-ctl.fs-inline{position:static!important;left:auto!important;bottom:auto!important;margin-left:auto;align-self:center;box-shadow:none;padding:2px 6px 2px 10px}.fs-ctl.fs-inline button{width:34px;height:34px}.fs-ctl.fs-inline span{font-size:12px} /* 版285 セツ物語：ひとつ前の場所へもどる */ .sx-back{position:absolute;right:clamp(14px,3vw,40px);top:clamp(14px,3vw,34px);z-index:4;display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;background:rgba(8,18,44,.72);border:1px solid rgba(140,190,255,.55);color:#E6F0FF;text-decoration:none;font-size:.92rem;letter-spacing:.06em;box-shadow:0 0 18px rgba(80,140,255,.35);backdrop-filter:blur(4px)} .sx-back:hover{background:rgba(20,40,90,.85)} @media (max-width:760px){.sx-back{position:relative;right:auto;top:auto;margin:0 0 10px;font-size:.84rem;padding:7px 14px}} @media (max-width:760px){.sx-back{margin:10px 12px}} /* 版288 お知らせ欄（枠の大きさは固定・中で開く・最新が一番上）。B1＝雪の花の縁、玄関・1〜3階＝部屋ごとの縁 */ .sx-news{position:absolute;left:clamp(16px,4vw,60px);bottom:clamp(70px,9vw,120px);z-index:4;width:360px;max-width:calc(100% - 32px);height:236px;box-sizing:border-box;display:flex;flex-direction:column;padding:24px 26px 18px;background:rgba(8,18,44,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:14px;color:#EEF4FF;text-shadow:0 1px 3px rgba(0,8,30,.9);isolation:isolate;text-align:left} .sx-news::before{content:"";position:absolute;inset:-12px;z-index:-1;pointer-events:none;border-style:solid;border-width:44px;border-image:url(img/setsu_frame.webp) 330 round;filter:drop-shadow(0 0 5px rgba(170,215,255,.5))} .sx-news-h{margin:0 0 6px;font-size:1rem;letter-spacing:.14em;color:#BFE0FF;font-weight:600;flex:none} .sx-news-h::before{content:"◆ ";color:currentColor;font-size:.8em;opacity:.8} .nw-b{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin} .nw-l{list-style:none;margin:0;padding:0;font-size:.82rem;line-height:1.6} .nw-l li{padding:6px 0;border-top:1px dashed rgba(200,220,255,.3)} .nw-top li{border-top:0;padding-top:0} .nw-l time{display:block;font-size:.74rem;opacity:.8;letter-spacing:.08em} .nw-more{margin-top:4px} .nw-more summary{cursor:pointer;list-style:none;font-size:.78rem;letter-spacing:.06em;padding:5px 12px;border-radius:999px;border:1px solid rgba(220,235,255,.45);display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06)} .nw-more summary::-webkit-details-marker{display:none} .nw-more summary::after{content:"▾";transition:transform .2s} .nw-more[open] summary::after{transform:rotate(180deg)} .nw-more summary small{font-size:.9em;opacity:.8} .nw-more[open] summary{margin-bottom:4px} /* 瑠璃文庫の入口 */ .ax-wrap{position:relative;max-width:1180px;margin:0 auto} .ax-wrap>.sx-news{left:clamp(18px,3vw,44px);bottom:clamp(70px,8vw,104px);width:min(360px,32%);min-width:300px} /* 1〜3階：絵の上の文の下に置く */ .copy>.nw{position:relative;left:auto;bottom:auto;margin:30px 0 8px;width:380px} /* 玄関：建物の絵の左下 */ .sg-out>.nw-genkan{left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:6;height:210px;width:340px} /* 部屋ごとの縁と文字の色 */ .nw::before{border-image-slice:170;filter:none} .nw-genkan::before{border-image-source:url(img/nw_genkan.webp)} .nw-f1::before{border-image-source:url(img/nw_f1.webp)} .nw-f2::before{border-image-source:url(img/nw_f2.webp)} .nw-f3::before{border-image-source:url(img/nw_f3.webp)} .nw-genkan .sx-news-h{color:#F4CF8E}.nw-f1 .sx-news-h{color:#A8E6D4}.nw-f2 .sx-news-h{color:#D6C0F5}.nw-f3 .sx-news-h{color:#EBD59E} .nw-genkan{background:rgba(30,20,10,.38)}.nw-f1{background:rgba(10,34,32,.4)}.nw-f2{background:rgba(30,18,48,.4)}.nw-f3{background:rgba(10,16,40,.42)} @media (max-width:760px){ .sx-news{position:relative;left:auto;bottom:auto;width:auto;max-width:none;margin:22px 22px 10px;height:220px} .sx-news::before{border-width:36px;inset:-10px} .ax-wrap>.sx-news{left:auto;bottom:auto;width:auto;min-width:0;margin:22px 14px 6px} .copy>.nw{width:auto;margin:26px 8px 8px} .sg-out>.nw-genkan{position:absolute;left:12px;right:auto;bottom:12px;width:min(300px,calc(100% - 24px));height:170px;margin:0;padding:18px 20px 12px} } /* 版288 1階は明るい部屋なので、白いすりガラスに濃い文字 */ .nw-f1{background:rgba(255,255,255,.5);color:#21403A;text-shadow:0 1px 2px rgba(255,255,255,.8)} .nw-f1 .sx-news-h{color:#2E8C78} .nw-f1 .nw-l li{border-top-color:rgba(46,140,120,.3)} .nw-f1 .nw-more summary{border-color:rgba(46,140,120,.5);background:rgba(255,255,255,.4)} /* 玄関：灯守にかからない幅 */ .sg-out>.nw-genkan{left:16px;bottom:16px;width:300px} @media (max-width:760px){.sg-out>.nw-genkan{left:8px;bottom:8px;width:236px;height:150px;padding:16px 16px 10px;font-size:.92em}.sg-out>.nw-genkan .sx-news-h{font-size:.9rem;margin-bottom:2px}} /* 版290 ささえの輪の紹介：プランごとの見本へ */ .pl-try{margin:12px 0 0;text-align:center}.pl-try .btn{font-size:.88rem;padding:10px 20px} /* 版292 省エネ：見えていないところは止める・携帯はぼかしを外す */ .fx-off,.fx-off *{animation-play-state:paused!important} .sp-lite *,.sp-lite *::before,.sp-lite *::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .sp-lite .sx-news{background:rgba(8,18,44,.66)}.sp-lite .nw-f1{background:rgba(255,255,255,.72)} .sp-lite .b1-tw:nth-of-type(2n){display:none} .dr-open[hidden]{display:none!important} /* 版293 お知らせ欄を読みやすく（TOMO：白すぎる・透けていない）：ぼかしを外し、暗いすけた地にクリームの文字 */ .sx-news{background:rgba(18,24,38,.52)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:#EDE8DC!important;text-shadow:0 1px 2px rgba(0,0,0,.55)!important;--nwc:#9CCBFF} .nw-genkan{--nwc:#F4CF8E}.nw-f1{--nwc:#8FD8C4}.nw-f2{--nwc:#CDB6F0}.nw-f3{--nwc:#E9D29A} .nw-f1 .sx-news-h{color:#A8E6D4} .sx-news .nw-l li{border-top-color:rgba(237,232,220,.22)!important} .sx-news .nw-l time{color:#B9C0CC;opacity:1} .sx-news .nw-more summary{background:rgba(18,24,38,.6)!important;border:1px solid var(--nwc)!important;color:#EDE8DC} .sp-lite .sx-news{background:rgba(18,24,38,.62)!important} /* 1階が明るい見え方のときだけ、うすい白のすりガラスに濃い文字（暗い見え方では上の暗いすけた地） */ @media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .nw-f1{background:rgba(255,255,255,.38)!important;color:#21403A!important;text-shadow:none!important}:root:not([data-theme="dark"]) .nw-f1 .sx-news-h{color:#2E8C78}:root:not([data-theme="dark"]) .nw-f1 .nw-l time{color:#5A7A72}:root:not([data-theme="dark"]) .nw-f1 .nw-more summary{background:rgba(255,255,255,.5)!important;color:#21403A}:root:not([data-theme="dark"]) .nw-f1 .nw-l li{border-top-color:rgba(46,140,120,.3)!important}} :root[data-theme="light"] .nw-f1{background:rgba(255,255,255,.38)!important;color:#21403A!important;text-shadow:none!important}:root[data-theme="light"] .nw-f1 .sx-news-h{color:#2E8C78}:root[data-theme="light"] .nw-f1 .nw-l time{color:#5A7A72}:root[data-theme="light"] .nw-f1 .nw-more summary{background:rgba(255,255,255,.5)!important;color:#21403A} /* 版294 星あかりのふりかえり：たたんで1行＋「くわしく見る」 */ .pm-codex .pmc-one{margin:6px 0 4px;text-align:center;font-size:.95rem} .pm-codex .pmc-more>summary{cursor:pointer;list-style:none;display:table;margin:8px auto 4px;padding:7px 18px;border-radius:999px;border:1px solid rgba(226,194,122,.6);color:#E2C27A;font-size:.85rem;letter-spacing:.08em} .pm-codex .pmc-more>summary::-webkit-details-marker{display:none} .pm-codex .pmc-more>summary::after{content:" ▾"}.pm-codex .pmc-more[open]>summary::after{content:" ▴"} .pm-codex .pmc-more[open]>summary{margin-bottom:12px} .pm-codex .pmc-cal{max-height:70px} /* 版296 2階の並び：介護の世界は短く1列、B1の入口は1枚に */ .fr-three.fr-short .fr-card p{display:none} .fr-three.fr-short .fr-card img{height:44px} @media (max-width:760px){.fr-three.fr-short{grid-template-columns:repeat(3,1fr);gap:8px}.fr-three.fr-short .fr-card{padding:12px 10px 10px;border-radius:14px}.fr-three.fr-short .fr-card img{display:none}.fr-three.fr-short .kicker{font-size:.66rem;line-height:1.4}.fr-three.fr-short .fr-num{font-size:1.15rem}.fr-three.fr-short .small{font-size:.66rem;line-height:1.45}.fr-three.fr-short .fr-src{font-size:.6rem}} #techou .card.room,#kizuku .card.room{max-width:980px;margin:0 auto} div.ax-ent-in{cursor:default}.ax-ent-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.ax-ent-btns .btn{position:relative} #picks{padding-top:0} @media (max-width:760px){.fr-three.fr-short .kicker{font-size:.6rem;letter-spacing:0}.fr-three.fr-short .small{font-size:.62rem;letter-spacing:0}.fr-three.fr-short .fr-num{font-size:1rem;letter-spacing:0}.fr-three.fr-short .fr-src{font-size:0;margin-top:auto}.fr-three.fr-short .fr-src::before{content:"出典 ↗";font-size:.62rem}} /* 版298 みつ灯の部屋への道しるべ */ .mt-sign{display:flex;flex-direction:column;gap:6px;max-width:640px;margin:0 auto;padding:20px 24px;text-decoration:none;color:inherit;border:1px solid rgba(226,194,122,.55);border-radius:14px;background:rgba(20,22,40,.45)} .mt-sign b{font-size:1.15rem;color:#F3E3B4} .mt-sign:hover{border-color:#E2C27A;box-shadow:0 0 18px rgba(226,194,122,.25)} #myring3 .f3-ring .fr-ring{max-width:520px;margin:10px auto} /* 版298 3階 そなえるの3枚 */ .fr-chk{display:inline-block;font-style:normal;font-size:.68rem;color:#E2C27A;border:1px dashed rgba(226,194,122,.6);border-radius:999px;padding:1px 8px;margin:2px 0 4px} .f3-foot{text-align:center;margin-top:18px;color:#E2C27A;letter-spacing:.08em} .mt-sign .mt-h{font-size:1.2rem;margin:0;color:#F3E3B4} .ax-ent-tx .ax-ent-h{margin:0} /* 版299 セツ物語：天井と水面のまたたき、水から上る光の粒（11-02 TOMO） */ .sx-glint{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden} .sg-st{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;filter:drop-shadow(0 0 3px rgba(190,225,255,.9));opacity:0;transform:scale(calc(var(--z)*.3));animation:sgTw var(--d) ease-in-out var(--w) infinite} .sg-st::before,.sg-st::after{content:"";position:absolute;left:50%;top:50%;background:radial-gradient(closest-side,#fff,rgba(190,225,255,.85) 40%,rgba(190,225,255,0));transform:translate(-50%,-50%)} .sg-st::before{width:100%;height:2px}.sg-st::after{width:2px;height:100%} @keyframes sgTw{0%,55%,100%{opacity:0;transform:scale(calc(var(--z)*.3)) rotate(0)}70%{opacity:1;transform:scale(var(--z)) rotate(20deg)}85%{opacity:.25;transform:scale(calc(var(--z)*.6)) rotate(35deg)}} .sg-mt{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);opacity:0;animation:sgMt var(--d) linear var(--w) infinite} @keyframes sgMt{0%{opacity:0;transform:translate(0,0)}15%{opacity:.85}80%{opacity:.5}100%{opacity:0;transform:translate(var(--x),-90px)}} @media (max-width:760px){.sg-st:nth-of-type(n+8),.sg-mt:nth-of-type(n+23){display:none}.sg-mt{box-shadow:none}.sg-st{width:14px;height:14px;margin:-7px 0 0 -7px;filter:none}} @media (prefers-reduced-motion:reduce){.sx-glint{display:none}} /* 版299 3階のいちばん奥：そのあとのことへの扉 */ .so-door{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:22px;align-items:center;max-width:820px;margin:0 auto;padding:18px;border-radius:18px;text-decoration:none;color:inherit;background:linear-gradient(160deg,rgba(14,16,30,.85),rgba(30,28,48,.75));border:1px solid rgba(226,194,122,.35);box-shadow:inset 0 0 40px rgba(0,0,0,.35)} .so-door:hover{border-color:rgba(226,194,122,.7)} .so-pic img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;filter:brightness(.92)} .so-tx{display:flex;flex-direction:column;gap:6px} .so-h{margin:0;font-size:1.4rem;letter-spacing:.12em;color:#F3E3B4} .so-sub{color:#D9D2C2} .so-go{margin-top:6px;align-self:flex-start;padding:8px 18px;border-radius:999px;border:1px solid rgba(226,194,122,.6);color:#F3E3B4;font-size:.9rem} @media (max-width:760px){.so-door{grid-template-columns:1fr;gap:12px;padding:14px}} /* 版299 ささえの輪の紹介動画（トップの輪の下） */ .wa-pr{max-width:760px;margin:28px auto 0} .wa-pr figcaption{margin-top:10px;font-size:.9rem;line-height:1.7} .wa-pr figcaption b{display:block;font-size:1rem;letter-spacing:.08em} .wa-pr figcaption small{display:block;opacity:.75} /* 版299 セツのひとこと（11-02 TOMO OK） */ .st-say{position:relative;overflow:hidden;margin:0 0 16px;padding:18px 24px 18px 104px;min-height:112px;border-radius:18px; background:linear-gradient(160deg,rgba(10,28,66,.92),rgba(6,16,40,.88));border:1px solid #8CC8FF; font-family:"Kiwi Maru",serif;font-weight:500;color:#EAF4FF;font-size:clamp(1rem,1.7vw,1.18rem);line-height:1.85; animation:stGlow 3.6s ease-in-out infinite;cursor:pointer;-webkit-tap-highlight-color:transparent} @keyframes stGlow{ 0%,100%{box-shadow:0 0 10px rgba(127,196,240,.35),0 0 26px rgba(58,134,224,.22),inset 0 0 18px rgba(127,196,240,.08)} 50%{box-shadow:0 0 18px rgba(160,215,255,.6),0 0 46px rgba(58,134,224,.4),inset 0 0 26px rgba(127,196,240,.16)}} .st-say canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .st-say .st-av{position:absolute;left:18px;top:18px;width:68px;height:68px;border-radius:50%;object-fit:cover;object-position:50% 14%;border:2px solid #BFE3FF;z-index:2;box-shadow:0 0 14px rgba(160,215,255,.55)} .st-say .st-nm{position:relative;z-index:2;display:block;font-size:.8rem;letter-spacing:.14em;color:#9FD8FF} .st-line{position:relative;z-index:2;display:block;min-height:3.7em} .st-line rt{font-size:.5em} /* 1文字ずつ、左から白くふわっと */ .st-c{display:inline-block;opacity:0;animation:stIn .9s ease-out forwards;animation-delay:calc(var(--i) * 38ms)} @keyframes stIn{ 0%{opacity:0;filter:blur(6px);transform:translateY(3px);color:#fff;text-shadow:0 0 12px #fff,0 0 22px #BFE3FF} 45%{opacity:1;filter:blur(0);color:#fff;text-shadow:0 0 10px #fff,0 0 18px #BFE3FF} 100%{opacity:1;filter:none;transform:none;color:#EAF4FF;text-shadow:0 0 0 transparent}} .st-line.out{animation:stOut .6s ease-in forwards} @keyframes stOut{to{opacity:0;filter:blur(4px)}} .st-think{color:#BFD6F2;font-size:.94em} .st-dots{position:absolute;right:16px;bottom:10px;z-index:2;display:flex;gap:5px} .st-dots i{width:6px;height:6px;border-radius:50%;background:rgba(191,227,255,.28)} .st-dots i.on{background:#BFE3FF;box-shadow:0 0 6px #BFE3FF} @media (max-width:760px){ .sx-card{grid-template-columns:1fr;justify-items:center;padding:24px 16px;gap:18px} .sx-fig{width:180px} .st-say{padding:16px 16px 22px 82px} .st-say .st-av{width:52px;height:52px;left:14px;top:16px}} @media (prefers-reduced-motion:reduce){ .st-say{animation:none;box-shadow:0 0 16px rgba(127,196,240,.45)} .st-c{animation:none;opacity:1}} /* 版300 3階の便り「くわしく見る」：金の塗りをやめ、金の縁と濃い文字に（11-02 TOMO） */ .upd-more,.upd-card:hover .upd-more,.upd-card.hit .upd-more,.upd-card.new .upd-more,.upd-more:hover,.upd-more:focus-visible,.upd-more:active,.upd-more[aria-expanded="true"],.upd-card.open .upd-more{background:#FFFDF6!important;border:1.5px solid #C9A04A!important;color:#5a4310!important;box-shadow:none} .upd-more small,.upd-card:hover .upd-more small{color:#6e5a32!important} .upd-more:hover,.upd-more:focus-visible{border-color:#B08530!important} /* 版306 星あかりのふりかえり：小さく（11-02 TOMO） */ .pm-codex{max-width:640px;margin:14px auto 0;padding:10px 16px 8px;border-radius:12px;border:1px solid rgba(226,194,122,.45)!important;box-shadow:none!important;outline:none!important} .pm-codex::before,.pm-codex::after{display:none!important} .pm-codex .pmc-rays,.pm-codex .pmc-latin{display:none} .pm-codex .pmc-h{display:inline;margin:0 10px 0 0;font-size:.95rem;letter-spacing:.12em;text-shadow:none} .pm-codex .pmc-one{display:inline;margin:0;font-size:.85rem;text-align:left} .pm-codex .pmc-more{display:inline} .pm-codex .pmc-more>summary{display:inline-block;margin:0 0 0 8px;padding:2px 10px;font-size:.75rem} .pm-codex .pmc-more[open]>summary{margin-bottom:8px} .pm-codex .pmc-more[open] .pmc-grid{margin-top:8px} .pm-codex .pmc-foot{margin:4px 0 0;font-size:.66rem;opacity:.7} @media (max-width:640px){.pm-codex{padding:8px 12px 6px}.pm-codex .pmc-h{display:block;margin:0 0 2px;font-size:.88rem}.pm-codex .pmc-one{font-size:.8rem}} /* 版307 3階の瑠璃文庫の入口を青に（11-02 TOMO、まず3階だけ） */ body[data-floor="3"] .ax-ent-in{background:radial-gradient(120% 120% at 100% 0%,rgba(58,134,224,.26),transparent 60%),linear-gradient(160deg,#0E1A36,#08112A 70%);border:1px solid rgba(58,134,224,.65);box-shadow:0 0 0 1px rgba(127,196,240,.16) inset,0 16px 40px rgba(20,60,140,.35);color:#E2ECFA} body[data-floor="3"] .ax-ent-pic{border-color:rgba(127,196,240,.5)} body[data-floor="3"] .ax-ent .shu-k{color:#7FC4F0!important} body[data-floor="3"] .ax-ent-tx .ax-ent-h{background:linear-gradient(100deg,#DDF0FF,#7FC4F0 45%,#3A86E0);-webkit-background-clip:text;background-clip:text;color:transparent} body[data-floor="3"] .ax-ent-tx>span:last-child,body[data-floor="3"] .ax-ent-tx>span:not(.kicker):not(.ax-ent-btns){color:#C9D9EE} body[data-floor="3"] .ax-ent .btn.shu-go{color:#F2F8FF;background:linear-gradient(180deg,#2C66BE,#1E50A2 60%,#173F82);border:1px solid #7FC4F0;box-shadow:0 0 0 3px rgba(58,134,224,.2),0 10px 28px rgba(30,80,162,.45),inset 0 1px 0 rgba(255,255,255,.3);text-shadow:0 1px 0 rgba(10,30,70,.45)} .wa-pr .rr-vd-box video{display:block} /* 版308 2階もの瑠璃文庫の入口を青に（11-02 TOMO、まず3階だけ） */ body[data-floor="2"] .ax-ent-in{background:radial-gradient(120% 120% at 100% 0%,rgba(58,134,224,.26),transparent 60%),linear-gradient(160deg,#0E1A36,#08112A 70%);border:1px solid rgba(58,134,224,.65);box-shadow:0 0 0 1px rgba(127,196,240,.16) inset,0 16px 40px rgba(20,60,140,.35);color:#E2ECFA} body[data-floor="2"] .ax-ent-pic{border-color:rgba(127,196,240,.5)} body[data-floor="2"] .ax-ent .shu-k{color:#7FC4F0!important} body[data-floor="2"] .ax-ent-tx .ax-ent-h{background:linear-gradient(100deg,#DDF0FF,#7FC4F0 45%,#3A86E0);-webkit-background-clip:text;background-clip:text;color:transparent} body[data-floor="2"] .ax-ent-tx>span:last-child,body[data-floor="2"] .ax-ent-tx>span:not(.kicker):not(.ax-ent-btns){color:#C9D9EE} body[data-floor="2"] .ax-ent .btn.shu-go{color:#F2F8FF;background:linear-gradient(180deg,#2C66BE,#1E50A2 60%,#173F82);border:1px solid #7FC4F0;box-shadow:0 0 0 3px rgba(58,134,224,.2),0 10px 28px rgba(30,80,162,.45),inset 0 1px 0 rgba(255,255,255,.3);text-shadow:0 1px 0 rgba(10,30,70,.45)} body[data-floor="2"] .ax-ent-tx b,body[data-floor="3"] .ax-ent-tx b{background:linear-gradient(100deg,#DDF0FF,#7FC4F0 45%,#3A86E0);-webkit-background-clip:text;background-clip:text;color:transparent} /* 版311 みつ灯の部屋の案内：ひみつの書斎の絵を薄く＋「現在準備中」の白丸（11-02 TOMO） */ .mt-sign{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(14,16,32,.96) 0%,rgba(14,16,32,.88) 45%,rgba(14,16,32,.55) 100%),url(img/secret_room.webp) right center/cover no-repeat} .mt-sign>*{position:relative} .mt-prep{position:absolute!important;top:14px;right:14px;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#FFFDF8;color:#3a2c12;font-size:.78rem;font-weight:700;line-height:1.3;text-align:center;padding:8px;box-shadow:0 2px 12px rgba(0,0,0,.35);letter-spacing:.04em} .mt-sign .kicker,.mt-sign .mt-h{padding-right:84px} @media (max-width:760px){.mt-prep{width:64px;height:64px;font-size:.7rem;top:10px;right:10px}.mt-sign .kicker,.mt-sign .mt-h{padding-right:70px}} /* 版312 3階：人生会議ってなに・話しておきたいことカード・みつ灯でこれから・3階の歩き方（11-02 TOMO） */ .acp{--acp-card:rgba(22,19,38,.9);--acp-line:rgba(226,194,122,.28);--acp-gold:#E2C27A;--acp-gold2:#FFE7B0;--acp-sub:#B9B0A0;--michi:#7FA6E8;--kokoro:#F0A95B;--enishi:#7CC9A0} .acp h2{color:var(--acp-gold2)} .acp .acp-lead{font-size:.95rem;margin:0 0 18px} .acp-what{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;background:var(--acp-card);border:1px solid var(--acp-line);border-radius:18px;padding:20px;color:#EFE7D6} .acp-what p{margin:0 0 .8em} .acp-def{font-size:1.02rem;line-height:2;border-left:3px solid var(--acp-gold);padding-left:14px} .acp-pts{list-style:none;margin:0;padding:0;display:grid;gap:10px} .acp-pts li{background:rgba(255,231,176,.06);border:1px solid var(--acp-line);border-radius:12px;padding:10px 12px;font-size:.9rem} .acp-pts b{display:block;color:var(--acp-gold2);font-weight:500} .acp-src{font-size:.78rem}.acp-src a{color:var(--acp-gold2)} .acp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px} .acp-tabs button{font:inherit;font-size:.84rem;border-radius:999px;padding:5px 14px;border:1px solid var(--acp-line);background:transparent;color:var(--acp-sub);cursor:pointer} .acp-tabs button.on{color:#14101f;background:var(--acp-gold);border-color:var(--acp-gold)} .acp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .acp-cd{position:relative;background:var(--acp-card);border:1px solid var(--acp-line);border-top:4px solid var(--c);border-radius:16px;padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;color:#EFE7D6} .acp-cd[data-g=michi]{--c:var(--michi)}.acp-cd[data-g=kokoro]{--c:var(--kokoro)}.acp-cd[data-g=enishi]{--c:var(--enishi)} .acp-g{font-size:.72rem;letter-spacing:.18em;color:var(--c)} .acp-n{position:absolute;right:12px;top:10px;font-size:.72rem;color:var(--acp-sub)} .acp-cd h3{margin:0;font-weight:500;font-size:1rem;line-height:1.7;color:#F6EEDC} .acp-h{font-size:.78rem;color:var(--acp-sub);margin:0} .acp-ch{display:flex;flex-wrap:wrap;gap:6px} .acp-ch label{position:relative;font-size:.8rem;border:1px solid rgba(239,231,214,.25);border-radius:999px;padding:3px 10px;cursor:pointer;user-select:none} .acp-ch input{position:absolute;opacity:0;pointer-events:none} .acp-ch label:has(input:checked){background:var(--c);color:#14101f;border-color:var(--c)} .acp-ch label:has(input:focus-visible){outline:2px solid var(--acp-gold2)} .acp-cd textarea{width:100%;min-height:64px;font:inherit;font-size:.88rem;background:#0b0915;color:#EFE7D6;border:1px solid rgba(239,231,214,.2);border-radius:10px;padding:8px 10px;line-height:1.7;resize:vertical} .acp-not{font-size:.76rem;color:var(--acp-sub);display:flex;align-items:center;gap:6px;cursor:pointer} .acp-not input{accent-color:#E2C27A} .acp-cd.done::after{content:"✓";position:absolute;right:12px;bottom:10px;color:var(--c);font-size:.9rem} .acp-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:16px;padding:12px 14px;border:1px dashed var(--acp-line);border-radius:14px;font-size:.82rem;color:var(--acp-sub)} .acp-b{display:flex;gap:8px;flex-wrap:wrap} .acp .btn.ghost.acp-s{opacity:.85} .acp-rules{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px} .acp-rules li{font-size:.76rem;color:var(--acp-sub);border:1px solid var(--acp-line);border-radius:999px;padding:2px 10px} .acp-soon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .acp-sn{position:relative;background:var(--acp-card);border:1px solid var(--acp-line);border-radius:16px;padding:16px;overflow:hidden;color:#EFE7D6} .acp-sn h3{margin:0 0 4px;font-weight:500;color:var(--acp-gold2)} .acp-sn p{margin:0 0 10px;font-size:.88rem} .acp-tag{position:absolute;right:12px;top:12px;font-size:.7rem;background:#fff;color:#2a2235;border-radius:999px;padding:2px 10px} .acp-sn svg{display:block;width:100%;height:120px;margin:4px 0 10px} .acp-tourbtn{position:fixed;right:14px;bottom:14px;z-index:60;font-size:.85rem;padding:9px 18px} .acp-tour{position:fixed;inset:0;z-index:300;display:none} .acp-tour.on{display:block} .acp-hole{position:absolute;border-radius:16px;box-shadow:0 0 0 9999px rgba(6,4,14,.72);border:2px solid #FFE7B0;transition:all .45s ease} .acp-tip{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;width:min(520px,calc(100% - 32px));background:#1b1630;border:1px solid #E2C27A;border-radius:14px;padding:12px 14px;font-size:.9rem;color:#EFE7D6} .acp-tip b{display:block;font-weight:500;color:#FFE7B0} .acp-nav{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.78rem;color:#B9B0A0} .acp-nav .btn{padding:6px 14px;font-size:.82rem} @media(max-width:900px){.acp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.acp-what{grid-template-columns:1fr}.acp-soon{grid-template-columns:1fr}.acp-tourbtn{bottom:84px;right:10px;font-size:.78rem;padding:7px 14px}} @media(max-width:560px){.acp-cards{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.acp-hole{transition:none}} @media print{html.acp-printing body>*:not(main),html.acp-printing main>*:not(#cards),html.acp-printing #cards .acp-tabs,html.acp-printing #cards .acp-b,html.acp-printing #cards .acp-rules,html.acp-printing #cards .acp-lead,html.acp-printing .acp-tourbtn,html.acp-printing canvas{display:none!important} html.acp-printing body,html.acp-printing main{background:#fff!important;color:#000} html.acp-printing #cards h2{color:#000}html.acp-printing #cards .kicker{color:#555} html.acp-printing .acp-cd{border-color:#999;break-inside:avoid;background:#fff;color:#000}html.acp-printing .acp-cd h3{color:#000} html.acp-printing .acp-cards{grid-template-columns:repeat(3,1fr)} html.acp-printing .acp-ch label{display:none}html.acp-printing .acp-ch label:has(input:checked){display:inline-block;background:#eee;color:#000} html.acp-printing .acp-cd textarea{border:none;background:#fff;color:#000}} .fr-tourlink{margin:12px 0 0;text-align:center;font-size:.9rem}.fr-tourlink a{color:inherit;text-decoration:underline;text-underline-offset:4px} /* 版316 上の帯にみつ灯の部屋（スマホは灯守のご案内の中だけ）／2階の公開後にひらく部屋 */ .stairs.flr a.fr-mitsu{--fc:#E2C27A;--fb:#131A29;color:#F5E2A8} .stairs.flr a.fr-mitsu ruby rt{font-size:.5em} body[data-floor="1"] .stairs.flr a.fr-mitsu,body[data-floor="door"] .stairs.flr a.fr-mitsu,body[data-floor="bk"] .stairs.flr a.fr-mitsu,body[data-floor="shoko"] .stairs.flr a.fr-mitsu{color:#F5E2A8} .stairs.flr a.fr-mitsu .fr-mt{font-weight:inherit} @media (max-width:1759px){.stairs.flr a.fr-mitsu{padding:0;width:38px!important;min-width:38px;justify-content:center}.stairs.flr a.fr-mitsu>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}} @media (max-width:760px){.stairs.flr a.fr-mitsu{display:none}} .soon-card .kicker,.soon-card h3{padding-right:86px} @media (max-width:760px){.soon-card .kicker,.soon-card h3{padding-right:70px}} /* 版317 プランを上げる小さな入口（金の枠） */ .up-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;justify-content:center;margin:14px 0 0}.up-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid #E2C27A;border-radius:999px;background:transparent;color:inherit;font-size:.86rem;letter-spacing:.04em;text-decoration:none;line-height:1.5;transition:background .2s,box-shadow .2s}.up-btn:hover,.up-btn:focus-visible{background:rgba(226,194,122,.14);box-shadow:0 0 10px rgba(226,194,122,.35)}.up-dots{color:#E2C27A;font-size:.72rem;letter-spacing:1px}.up-btn ruby rt{font-size:.5em} /* 版320 2階 これからひらく部屋／ひみつの書斎の札 */ .soon-box{padding:22px}.soon-box .soon-head{margin-bottom:12px;padding-right:86px;text-align:left}.soon-box .soon-head h2{font-size:clamp(1.1rem,3vw,1.4rem)}.soon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}.soon-grid .card{margin:0;box-shadow:none} @media (max-width:760px){.soon-box{padding:16px}.soon-box .soon-head{padding-right:70px}} .sr-soon{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:999px;background:#FFFDF8;color:#3a2c12;font-size:.78rem;font-weight:700;letter-spacing:.06em} /* 版321 スマホの軽さ：10秒さわらなければ、くり返しの動きを休ませる（さわると再開） */ .sp-idle *,.sp-idle *::before,.sp-idle *::after{animation-play-state:paused!important} /* 版321 スマホは小さい絵（img/m/）を使う。縁の切り出し幅も同じ割合で小さく */ @media (max-width:760px){ .nw::before{border-image-slice:106} .nw-genkan::before{border-image-source:url(img/m/nw_genkan.webp)}.nw-f1::before{border-image-source:url(img/m/nw_f1.webp)} .nw-f2::before{border-image-source:url(img/m/nw_f2.webp)}.nw-f3::before{border-image-source:url(img/m/nw_f3.webp)} .setsu-card::before,.sx-news:not(.nw)::before{border-image-source:url(img/m/setsu_frame.webp);border-image-slice:172} .mt-sign{background:linear-gradient(90deg,rgba(14,16,32,.96) 0%,rgba(14,16,32,.88) 45%,rgba(14,16,32,.55) 100%),url(img/m/secret_room.webp) right center/cover no-repeat} } /* 版321 背の低いスマホ（iPhoneのSafariなど）：玄関のお知らせは小さな札にたたみ、押すとひらく（入口のボタンに重ならないように） */ @media (max-width:760px){ .sg-out>.nw-genkan.nw-fold{height:auto;width:auto;padding:8px 14px;cursor:pointer} .sg-out>.nw-genkan.nw-fold::before{display:none} .sg-out>.nw-genkan.nw-fold .nw-b{display:none} .sg-out>.nw-genkan.nw-fold .sx-news-h{margin:0;font-size:.85rem} .sg-out>.nw-genkan.nw-fold .sx-news-h::after{content:" ▸";font-size:.75em} } /* 版322 スマホはキラキラ・光の粒・星のまたたきを出さない（絵はそのまま） */ .sp-perf #dust,.sp-perf .sg-fairy,.sp-perf .lanterns,.sp-perf .st-snow{display:none!important} .sp-perf .top-sky *,.sp-perf .b1-tw,.sp-perf [class*=twinkle],.sp-perf [class*=spark]{animation:none!important} /* 版322 スマホの「絵と一言」「たたむ」：顔が見えるように絵の位置を合わせる */ body.vw-pics .vw-pic img,body.vw-fold .vw-pic img{object-position:50% 22%} body.vw-pics .vw-pic img[src*="rin_prem"],body.vw-fold .vw-pic img[src*="rin_prem"]{object-position:50% 3%} body.vw-pics .vw-pic img[src*="michi"],body.vw-fold .vw-pic img[src*="michi"], body.vw-pics .vw-pic img[src*="kokoro"],body.vw-fold .vw-pic img[src*="kokoro"], body.vw-pics .vw-pic img[src*="enishi"],body.vw-fold .vw-pic img[src*="enishi"]{object-fit:contain;object-position:50% 50%;background:radial-gradient(ellipse at 50% 55%,rgba(255,236,190,.18),transparent 70%)} /* 版322 スマホの文字の折り返し：見出し・ボタンは行の長さをそろえ、1〜2文字だけ次の行に落ちないように */ @media (max-width:760px){ h1,h2,h3,h4,figcaption,.vw-bar b,.sec-head p,.cap{text-wrap:balance} p,li,dd{text-wrap:pretty} } @media (max-width:760px){.ph{display:inline-block}} /* 版322 ボタンの中のふりがな（灯＝あかり）で字間があかないように */ .up-btn{gap:0!important}.up-btn .up-dots{margin-right:6px}.up-btn rt{font-size:.5em;letter-spacing:0}.up-btn ruby{margin:0 -.26em} /* 版323 iPhone実機チェック（11-02 コワーク37か所）の直し */ @media (max-width:760px){ /* 玄関：見学するの行を読みやすく */ .sg-tour-k{background:rgba(8,12,30,.62);padding:4px 14px;border-radius:999px;flex-wrap:wrap;justify-content:center;row-gap:0} /* 階の歩き方：スマホでは浮かせず、本文の流れの中に置く */ .ft-btn.ft-inline{position:static!important;display:flex;margin:10px 16px 0 auto;width:max-content;max-width:calc(100% - 32px);bottom:auto!important;right:auto!important} /* 横にならぶボタンの幅をそろえる（2階・3階の先頭） */ .hero .copy .cta{display:grid;grid-template-columns:1fr 1fr;gap:12px} .hero .copy .cta>.btn:not(.ghost){grid-column:1/-1;justify-self:start} .hero .copy .cta>.btn.ghost{justify-content:center;text-align:center;padding-left:10px;padding-right:10px;font-size:.92rem;width:100%;min-width:0} /* 青い波のボタン：Safariで角が四角く欠けないように */ .btn.rr-go,.rr-in,body[data-floor="bk"] .bk-home,body[data-floor="shoko"] .bk-home{-webkit-mask-image:-webkit-radial-gradient(white,black);mask-image:radial-gradient(white,black)} .btn.rr-go::after,.rr-in::after,body[data-floor="bk"] .bk-home::after,body[data-floor="shoko"] .bk-home::after{inset:0;border-radius:inherit} .btn.rr-go::before,.rr-in::before,body[data-floor="bk"] .bk-home::before,body[data-floor="shoko"] .bk-home::before{border-radius:inherit} /* 札（全24話・無料 など）は1行で */ .ax-tag,.rr-free,.ax-free{white-space:nowrap} .ax-sh-h{flex-wrap:wrap;row-gap:6px} .ax-sh-h b{flex:1 1 auto;min-width:0;word-break:keep-all;overflow-wrap:anywhere} /* 瑠璃文庫：はじめから読む・階ごとのおすすめ の幅をそろえる */ .bk-links{display:grid!important;grid-template-columns:1fr 1fr;gap:10px} .bk-links .bk-home{justify-content:center;text-align:center;width:100%} /* 調べる棚の見出し：入館無料の札と英字が重ならないように */ .rr-tl-row{flex-wrap:wrap;row-gap:6px} .rr-title .rr-en,.rr-title small{display:block;margin-top:8px} /* セツの物語：2列の題の高さをそろえる */ .sx-stv figcaption b{display:block;min-height:2.9em} } @media (max-width:760px){ body[data-floor="3"] .hero .art img{object-position:50% 34%} .rr-frame img{object-position:82% 50%} } .setsu-card .st-say:not(:has(.st-av)){padding-left:20px} @media (max-width:760px){#about .cls-slide img{object-fit:contain;background:#11161F}} /* 版325 玄関の「見学する」の部屋ボタンが押せなかった（.sg-center が pointer-events:none のため） */ .sg-center .sg-tourbar,.sg-center .sg-tourbar a{pointer-events:auto} /* 版325 玄関はたたまない（LINE・メールで登録を押すと「どの立場で使いますか？」の帯だけが出ていた） */ body[data-floor="door"].vw-fold main>section.sec>.vw-bar,body[data-floor="door"].vw-pics main>section.sec>.vw-bar{display:none!important} body[data-floor="door"].vw-fold main>section.sec>:not(.vw-bar),body[data-floor="door"].vw-pics main>section.sec>:not(.vw-bar){display:revert!important} body[data-floor="door"].vw-fold main>section.sec,body[data-floor="door"].vw-pics main>section.sec{padding-top:48px!important} /* 版325 玄関のお知らせをひらいたとき：スマホは下からの札にして、ボタンや文字に重ならないように。もう一度押すと閉じる */ @media (max-width:760px){ .sg-out>.nw-genkan:not(.nw-fold){position:fixed!important;left:12px!important;right:12px!important;top:auto!important;bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;width:auto!important;height:auto!important;max-height:60vh;overflow:auto;z-index:95;padding:16px 18px 14px!important;border-radius:16px;background:rgba(10,14,32,.97)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(226,194,122,.45);box-shadow:0 10px 30px rgba(0,0,0,.5);transform:none!important;cursor:pointer} .sg-out>.nw-genkan:not(.nw-fold)::before{display:none} .sg-out>.nw-genkan:not(.nw-fold) .sx-news-h{margin:0 0 8px;font-size:.95rem} .sg-out>.nw-genkan:not(.nw-fold) .sx-news-h::after{content:"　× とじる";float:right;font-size:.75rem;opacity:.8;font-family:inherit} .sg-out>.nw-genkan:not(.nw-fold) .nw-b{max-height:none!important;overflow:visible!important;font-size:.86rem} } /* 版325 料金の表：スマホは横にずらして見る。ずらせることを書き、左の列は止めておく */ @media (max-width:760px){ .pr-tbl{-webkit-overflow-scrolling:touch} .pr-tbl::before{content:"横にずらすと、ほかのプランも見られます →";display:block;position:sticky;left:0;width:max-content;margin:0 0 6px;font-size:.78rem;opacity:.75} .pr-tbl th,.pr-tbl td{white-space:nowrap} .pr-tbl tr>:first-child{position:sticky;left:0;z-index:1;background:var(--card,#fff);white-space:normal;min-width:7.5em} } /* 版325 ページのいちばん下（♪ 音楽など）が下の帯に隠れないよう、スマホは下の余白を広げる */ @media (max-width:760px){body:not([data-floor="door"]) footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}} /* 版325 スマホのボタンの高さをそろえる（大きい入口＝60、ふつう＝52、行き先ボタン＝56） */ @media (max-width:760px){ .hero .copy .cta .btn.ghost{height:52px!important;min-height:52px!important;padding:0 8px!important;font-size:.82rem!important;white-space:nowrap!important;line-height:1.2!important;letter-spacing:.02em} .hero .copy .cta .btn.ghost *{white-space:nowrap} .btn.rr-go:not(.tm-go),.btn.shu-go{height:56px!important;min-height:56px!important;padding-top:0!important;padding-bottom:0!important} .rr-tome .tm-go{width:100%!important;height:52px!important;font-size:.7rem!important;white-space:nowrap!important;padding:0 4px!important;letter-spacing:0!important} .rr-tome .tm-go *{white-space:nowrap!important;letter-spacing:0!important} .btn.wa-go{white-space:nowrap;font-size:.92rem} } /* 版325 登録できた画面の「お知らせをLINEでも受け取る」 */ .rd-line{display:flex;flex-direction:column;align-items:center;gap:4px;margin:4px 0 0} .rd-line small{font-size:.76rem;opacity:.8} .rd-line-a{border-color:#06C755!important;color:#06A045!important} /* 版326 iPhoneチェック3回目 */ @media (max-width:760px){ header.top{background-color:color-mix(in srgb,var(--bg,#fbfaf6) 97%,transparent)!important} .find-in{box-sizing:border-box} .find-list{margin-left:0!important;margin-right:0!important;padding:0!important} /* 玄関のお知らせは、上からひらく（下の見学ボタンを隠さない） */ .sg-out>.nw-genkan:not(.nw-fold){bottom:auto!important;top:calc(10px + env(safe-area-inset-top,0px))!important;max-height:52vh} } /* 版326 iPhoneのダークモードで読みにくかった文字 */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .wa-many,:root:not([data-theme="light"]) .wa-many *{color:#B9C3CC!important} } .rb-glue{white-space:nowrap} /* 版326 2階の「これからひらく部屋」は1行の予告に（11-02 TOMO） */ .soon-1{margin:0 auto;max-width:720px;padding:12px 18px;border-radius:18px;border:1px dashed color-mix(in srgb,var(--accent,#9B7BC8) 55%,transparent);font-size:.9rem;text-align:center;opacity:.9} /* 版329 上の帯の丸い数字に「あしあと」の言葉をそえる */ .sk-ring .sk-l{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);font-size:9px;line-height:1;white-space:nowrap;color:#E2C27A;letter-spacing:.02em;pointer-events:none} /* 版332（11-02 コワークA 4回目） */ /* 1階 三つの教室：絵の角の花の縁（透ける画像）に、読みこみ中の黒い下地が出ていた */ .pfr img,img.tr,img.bl{background:transparent!important} @media (max-width:760px){ /* 2階：輪の絵や見どころカードが、Safariで画面より広がらないように */ .fr-grid>*,.f3-grid>*,.hero .copy,.hero .wrap>*{min-width:0} .fr-ring,.f3-ring{max-width:100%;overflow:hidden;box-sizing:border-box} .fr-ring .wa-ring,.f3-ring .wa-ring{width:100%!important;max-width:100%;height:auto!important} .mi-card{box-sizing:border-box;max-width:calc(100vw - 32px)} .hero .mi-card{max-width:100%} /* 各階の先頭の「〇〇のささえの輪をつくる」：大きすぎたので、となりのボタンに近づける */ .hero .cta .btn.has-st{min-height:56px;padding:10px 18px;line-height:1.45;font-size:1.02rem;justify-self:stretch} /* 瑠璃文庫の先頭の絵：右下のセツが切れないように、絵を少し左へ */ .ax-in{transform:translateX(-60%)}.ax-in.enter{transform:translateX(-60%) scale(3.2)} } /* 版333 iPhoneのSafariが文字を自動で大きくして、カードや説明が画面からはみ出していた */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* 版334 iPhone：上の階ボタンの文字が枠からはみ出す → 狭い画面では丸い絵を外して、文字を枠の中に（11-02 TOMO） */ @media (max-width:430px){header .stairs.flr a .fr-ic{display:none!important}header .stairs.flr a{padding:0 3px!important;gap:0!important;justify-content:center!important}header .stairs.flr a>span{min-width:0;max-width:100%;text-align:center;align-items:center;justify-content:center;letter-spacing:0!important;line-height:1.15}header .stairs.flr a .fr-st{letter-spacing:0!important}} /* 版334 iPhone：1階のはじめの2つのボタン（ささえの輪をつくる・はじめての方へ）を、下の「無料で登録する」と同じくらいの大きさに（11-02 TOMO） */ @media (max-width:760px){.hero .cta{gap:10px!important;align-items:flex-start}.hero .copy .cta .btn.wb-btn,.hero .copy .cta .btn.ghost{min-height:46px!important;height:auto!important;padding:8px 18px!important;font-size:.92rem!important;line-height:1.3!important;width:auto!important;max-width:100%;box-sizing:border-box}.hero .copy .cta .btn.wb-btn img,.hero .copy .cta .btn.wb-btn svg,.hero .copy .cta .btn.wb-btn .wb-ic{width:26px!important;height:26px!important}} /* 版334 「たたむ」「絵と一言」のとき、水の斜線（.water の飾り）がカードの上に重なる → 閉じたカードでは飾りを消し、開いたときもカードを前に（11-02 TOMO） */ body.vw-fold main>section.sec:not(.vw-open)::before,body.vw-fold main>section.sec:not(.vw-open)::after,body.vw-pics main>section.sec:not(.vw-open)::before,body.vw-pics main>section.sec:not(.vw-open)::after{display:none!important} body.vw-fold main>section.sec>.vw-bar,body.vw-pics main>section.sec>.vw-bar{position:relative;z-index:1} /* 版335 見どころカード・章の一覧：改行どめ（.jw など）を外して、枠の中で折り返す（コワーク6回目 1〜3） */ .mi-card li button,.mi-sheet li button{overflow:hidden!important;min-width:0} .mi-card li button>span,.mi-sheet li button>span{display:block;flex:1 1 auto;min-width:0} .mi-card li button i,.mi-sheet li button i{display:grid!important} /* 版337 見どころカード：iPhoneでは1列にして、章の名前を言葉の途中で切らない（コワークA 7回目 3） */ @media (max-width:480px){.mi-card ol{grid-template-columns:minmax(0,1fr)!important;gap:5px!important}.mi-card li button{min-height:36px!important;padding:5px 10px!important}} /* 版338 iPhoneの横並びの決まり（11-02 TOMO OK）：文の入った箱は1列、短いボタンは2列まで、3つ以上の横並びは絵だけ */ @media (max-width:480px){ /* 上の階ボタン：1段のまま、小さい段階名（ととのえる など）を外して「B1・玄関・1F・2F・3F」に。丸い絵はもどす */ header .stairs.flr a .fr-st{display:none!important} header .stairs.flr a .fr-ic{display:block!important;width:20px!important;height:20px!important;flex:none} header .stairs.flr a{gap:4px!important;font-size:.9rem!important} /* 2階の三つの目線（ミチ・ココロ・エニシ）の数字カード：1列 */ .fr-three.fr-short{grid-template-columns:minmax(0,1fr)!important;gap:8px!important} /* 1階の教室えらび（結・結と灯守・凛と友花）：1列 */ .cls-pick{grid-template-columns:minmax(0,1fr)!important;gap:8px!important} .cls-pick button{justify-content:flex-start!important;flex-direction:row!important;text-align:left;padding:10px 14px!important} } /* 版339 コワークA 8回目 */ /* 5：輪のプランの札（無料会員・ひとつ灯・ふたつ灯・みつ灯）：えらんでいない札も、カードの色と文字で読めるように */ .wa-plan .wp-chip[aria-pressed="false"]{background:color-mix(in srgb,var(--head) 6%,transparent)!important;color:var(--head)!important;border-color:color-mix(in srgb,var(--head) 28%,transparent)!important}.wa-plan .wp-chip[aria-pressed="true"]{outline:2px solid var(--gbd,#C9A65A);outline-offset:1px} .wa-plan .wp-chip[aria-pressed="false"] small{color:var(--sub)!important;opacity:1} @media (max-width:480px){ /* 4：瑠璃文庫（調べる棚）の先頭の札が「RURI BUNKO・ALL FREE」に重ならないように */ .rr-tl-row{margin-bottom:10px!important} .rr-title small{display:block;position:relative;margin-top:4px} /* 3：3冊の本の下の文字ボタンは出さず、本の絵を押して開く */ .rr-tomes .tm-go{display:none!important} .rr-tomes .tm-bk{cursor:pointer} .rr-tomes .tm-sub{margin-top:6px;font-weight:700} .rr-tomes .tm-sub::after{content:" ›"} } /* v340 夜の検証1回目：iPhoneで箱からはみ出す・3つ以上並ぶボタンを直す */ @media(max-width:560px){.wg-page .row{grid-template-columns:minmax(0,1fr)!important}.wg-page .row>*{min-width:0}.wg-page .fb,.wg-page .ops,.wg-page .opts{flex-wrap:wrap}} @media(max-width:480px){ .wa-fb-b,.wg-page .fb{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .wa-fb-b>*,.wg-page .fb>*{min-width:0;text-align:center;white-space:normal} .wa-fb-b>*:last-child:nth-child(odd),.wg-page .fb>*:last-child:nth-child(odd){grid-column:1/-1} .acp-ch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .acp-ch label{min-width:0} } @media(max-width:480px){.wg-page .opts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}.wg-page .opts button{min-width:0;white-space:normal}} /* v340 上の固定メニューの下に本文が透けないように */ @media(max-width:760px){header.top{background-color:var(--bg,#fbfaf6)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:60!important}.vw-sw{background:var(--bg,#fff)!important;z-index:59!important;backdrop-filter:none!important}main.dusk .vw-sw,main.night .vw-sw{background:#141220!important}} .pr-cards{display:none} @media(max-width:480px){.pr-tbl{display:none!important}.pr-cards{display:grid;gap:12px;margin:10px 0}.pr-cards .prc{background:var(--card,#fff);border:1px solid var(--line,#e5e0d5);border-radius:16px;padding:12px 14px}.pr-cards .prc-h{font-family:"Kiwi Maru";font-size:1.05rem;color:var(--head);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;border-bottom:1px dashed var(--line,#ddd);padding-bottom:6px;margin-bottom:6px}.pr-cards .prc-h small{font-size:.75rem;color:var(--sub)}.pr-cards .prc-h .pr-dots{margin-right:4px}.pr-cards dl{margin:0}.pr-cards dt{font-size:.75rem;color:var(--sub);margin-top:6px}.pr-cards dd{margin:0;font-size:.9rem;line-height:1.7}} /* v340 そのあとのこと：歩き方の案内が「3階へもどる」に重ならないように */ body:has(.fin) .mi-pill.top{top:calc(64px + env(safe-area-inset-top,0px))} /* v340 3回目：番号の丸がつぶれない／反応ボタンを押しやすく */ .hm-flow li>b{flex:0 0 auto;min-width:2em;min-height:2em} @media(max-width:480px){.wg-page .fb span,.wa-fb-b>*{min-height:40px;display:flex;align-items:center;justify-content:center;padding:4px 10px}} /* v341 TOMO：iPhoneでは文字の大きさボタンをなくす（ピンチや端末の設定で拡大できるため、画面を崩さない）。音楽ボタンは残す */ @media(max-width:760px){html[data-fs="2"],html[data-fs="3"]{font-size:100%!important}.fs-ctl>span,.fs-ctl>button[data-fs]{display:none!important}.fs-ctl:not(:has(.fm-mini)){display:none!important}} /* v341 コワークA 9回目 */ @media(max-width:480px){ .rr-tl-row{margin-bottom:16px!important}.rr-title small{margin-top:14px!important} .tn-road li small,.tn-road li em{display:none!important} } .wa-plan .wp-chip small{color:var(--head)!important;opacity:.85;font-size:.7rem} .wa-plan .wp-chip{isolation:isolate} .wa-plan .wp-chipbox .wp-chip::before,.wa-plan .wp-chipbox .wp-chip::after{display:none!important} .wa-plan .wp-chip[aria-pressed="false"]{background:var(--card,#fff)!important} .wa-plan .wp-chip[aria-pressed="true"] small{color:#3A4560!important;opacity:1} /* v341 3階カード：ご本人の希望を聞いて書く＋説明 */ .acp-about{display:grid;gap:8px;margin:0 0 16px} .acp-d{background:var(--acp-card);border:1px solid var(--acp-line);border-radius:14px;padding:4px 14px;color:#EFE7D6;font-size:.9rem;line-height:1.9} .acp-d summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--acp-gold2);font-weight:500;list-style:none} .acp-d summary::-webkit-details-marker{display:none} .acp-d summary::after{content:"＋";margin-left:auto;color:var(--acp-gold)}.acp-d[open] summary::after{content:"－"} .acp-d p{margin:0 0 .7em}.acp-d ul{margin:0 0 .8em;padding-left:1.2em}.acp-d b{color:var(--acp-gold2);font-weight:500} .acp-steps{list-style:none;counter-reset:s;margin:0 0 .6em;padding:0;display:grid;gap:8px} .acp-steps li{counter-increment:s;position:relative;padding:8px 10px 8px 40px;background:rgba(255,231,176,.06);border:1px solid var(--acp-line);border-radius:12px} .acp-steps li::before{content:counter(s);position:absolute;left:10px;top:9px;width:22px;height:22px;border-radius:50%;background:var(--acp-gold);color:#14101f;font-size:.78rem;display:flex;align-items:center;justify-content:center} .acp-steps li b{display:block} .acp-sm{font-size:.8rem;color:var(--acp-sub)} .acp-q{font-size:.78rem;color:var(--acp-gold2);opacity:.85;margin:0;line-height:1.7} .acp-ph{display:none} @media print{html.acp-printing .acp-about,html.acp-printing .acp-q{display:none!important}html.acp-printing .acp-ph{display:block;color:#000;font-size:.85rem;border-bottom:1px solid #999;padding-bottom:6px;margin:0 0 10px}} /* v342 3階カード 印刷（コワークA 11回目 1〜3） */ .acp-ph2{display:flex;flex-wrap:wrap;gap:8px 28px}.acp-ph2 span{white-space:nowrap} .acp-ph2 i{display:inline-block;width:4em;border-bottom:1px solid #666;margin:0 4px}.acp-ph2 i.s{width:2.2em}.acp-ph2 i.w{width:12em} .acp-ph p{margin:0 0 6px} @media print{ html.acp-printing #cards .vw-bar{display:none!important} html.acp-printing .acp-ch label{display:inline-block!important;background:#fff!important;color:#000!important;border-color:#999!important} html.acp-printing .acp-ch label::before{content:"□ "} html.acp-printing .acp-ch label:has(input:checked){background:#eee!important;font-weight:600} html.acp-printing .acp-ch label:has(input:checked)::before{content:"■ "} html.acp-printing .acp-not input{-webkit-appearance:none;appearance:none;width:12px;height:12px;border:1px solid #333;background:#fff!important;margin:0} html.acp-printing .acp-not input:checked{background:#333!important} html.acp-printing .acp-not{color:#000} html.acp-printing .acp-cd textarea{min-height:72px;border:none!important;background:repeating-linear-gradient(#fff 0 23px,#999 23px 24px)!important;line-height:24px;padding:0 4px} html.acp-printing .acp-n{position:static;display:inline;margin-left:10px} html.acp-printing .acp-g{display:inline} html.acp-printing .acp-ph{display:block!important} html.acp-printing .acp-ph2 i{border-color:#333} html.acp-printing .acp-h{color:#333} } /* 11-03 パソコンでも横幅が1440px未満のときは、灯守のご案内を左下の小さな丸にして、本文に重ねない */ @media (min-width:761px) and (max-width:1439px){ .hm-nav{top:auto;bottom:70px;left:14px;padding:0;border:2px solid #E2B85A;border-radius:50%;width:56px;height:56px;justify-content:center;background:#1A1610} .hm-nav img{width:50px;height:50px;border:0} .hm-nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} }