:root { --bg:#F1EDE3; --paper:#FAF8F2; --ink:#26231F; --mute:#857F73; --rule:#DAD3C4; --shu:#BF3B2B; --note:#F3E7B5;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","Songti SC","Noto Serif CJK JP",serif;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#1C1B19; --paper:#242220; --ink:#E8E3D6; --mute:#9A9487; --rule:#3B3834; --shu:#D9604C; --note:#4A4325; } }
:root[data-theme="dark"] { --bg:#1C1B19; --paper:#242220; --ink:#E8E3D6; --mute:#9A9487; --rule:#3B3834; --shu:#D9604C; --note:#4A4325; }
html { scroll-padding-top:env(safe-area-inset-top,0px); }
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background-color:var(--bg); color:var(--ink); font:16px/2 var(--serif); letter-spacing:.04em; -webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 .15 0 0 0 0 .13 0 0 0 0 .1 0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
button, input, textarea { font:inherit; color:inherit; letter-spacing:inherit; }
button:focus-visible { outline:2px solid var(--shu); outline-offset:2px; }
::placeholder { color:var(--mute); opacity:.7; }

/* 入口 */
#gate { position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px)); transition:opacity .5s, transform .5s; }
#gate.out { opacity:0; transform:scale(1.02); pointer-events:none; }
.gate-in { display:flex; justify-content:center; align-items:stretch; gap:clamp(28px,9vw,60px); width:100%; max-width:460px; animation:rise .8s cubic-bezier(.2,.7,.2,1) backwards; }
.g-form { flex:1; max-width:250px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; }
.g-lab { font-size:12px; color:var(--mute); letter-spacing:.3em; }
.g-form input { width:100%; border:0; border-bottom:1px solid var(--ink); border-radius:0; background:transparent; padding:10px 2px; font-size:16px; outline:none; transition:border-color .2s, box-shadow .2s; }
.g-form input:focus { border-color:var(--shu); box-shadow:0 1px 0 var(--shu); }
#pwd.shake { animation:shake .35s; }
.g-msg { min-height:24px; margin:0; font-size:13px; color:var(--shu); line-height:1.7; }
.g-hint { margin:4px 0 0; font-size:11px; line-height:1.7; color:var(--mute); }
.g-side { display:flex; flex-direction:column; align-items:center; gap:18px; }
.dot { width:12px; height:12px; border-radius:50%; background:var(--shu); flex:none; }
.g-title { writing-mode:vertical-rl; margin:0; font-size:clamp(40px,12vw,56px); font-weight:600; letter-spacing:.3em; line-height:1.2; }
.g-en { writing-mode:vertical-rl; margin:0; font-size:11px; letter-spacing:.3em; color:var(--mute); line-height:1.2; }

/* 本体 */
.wrap { max-width:640px; margin:0 auto; padding:44px calc(20px + env(safe-area-inset-right,0px)) 96px calc(20px + env(safe-area-inset-left,0px)); }
.top { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:28px; animation:rise .7s cubic-bezier(.2,.7,.2,1) backwards; }
h1 { margin:0; font-size:20px; font-weight:600; letter-spacing:.12em; line-height:1.4; }
h1::before { content:""; display:inline-block; width:10px; height:10px; margin-right:12px; border-radius:50%; background:var(--shu); vertical-align:middle; }
.sub { margin:0; font-size:13px; color:var(--mute); }
.link { min-height:44px; padding:0 4px; border:0; background:none; font-size:14px; color:var(--mute); cursor:pointer; transition:color .2s; }
.link:hover { color:var(--ink); }
.sheet { position:relative; padding:22px 22px 18px 44px; background:var(--paper); border:1px solid var(--rule); border-radius:2px; }
.lab { display:block; margin:0 0 6px; font-size:12px; letter-spacing:.3em; color:var(--mute); }
.note { display:block; width:100%; resize:none; margin-bottom:16px; padding:10px 14px; border:0; border-radius:2px; background:var(--note); font-size:16px; line-height:1.8; outline:none; }
.ruled { display:block; width:100%; resize:vertical; padding:0 2px; border:0; background:transparent linear-gradient(to bottom, transparent 37px, var(--rule) 37px) 0 0 / 100% 38px local; font-size:16px; line-height:38px; outline:none; }
.bar { position:relative; display:flex; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); }
#thumb { position:relative; display:flex; }
#thumb img { width:44px; height:44px; object-fit:cover; border-radius:2px; }
#thumb .x { position:absolute; top:-8px; right:-8px; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:var(--shu); color:#fff; font-size:13px; line-height:20px; cursor:pointer; }
.seal { margin-left:auto; height:46px; padding:0 26px; border:0; border-radius:2px; background:var(--ink); color:var(--bg); font-size:15px; letter-spacing:.3em; cursor:pointer; transition:background .2s, transform .1s; }
.seal:hover { background:var(--shu); }
.seal:active { transform:scale(.98); }
.stamp { position:absolute; right:140px; top:-8px; width:44px; height:44px; display:grid; place-items:center; border:2px solid var(--shu); border-radius:3px; color:var(--shu); writing-mode:vertical-rl; font-size:15px; font-weight:600; line-height:1.1; opacity:0; pointer-events:none; }
.stamp.on { animation:stamp 1.8s ease both; }

.sec { display:flex; justify-content:space-between; align-items:baseline; margin:44px 0 4px; font-size:13px; font-weight:400; letter-spacing:.3em; color:var(--mute); }
.ent { display:grid; grid-template-columns:3rem 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--rule); }
.date { writing-mode:vertical-rl; white-space:nowrap; font-size:15px; letter-spacing:.15em; color:var(--mute); }
.tcy { text-combine-upright:all; }
.memo { display:inline-block; margin:0 0 10px; padding:2px 12px; background:var(--note); border-radius:2px; font-size:14px; line-height:1.9; white-space:pre-wrap; }
.txt { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.pic { display:block; max-width:100%; margin-top:12px; border-radius:2px; }
.meta { display:flex; justify-content:space-between; align-items:center; margin-top:6px; font-size:12px; color:var(--mute); }
.meta .link { font-size:12px; }
.meta .arm { color:var(--shu); }
.empty { padding:40px 0; text-align:center; color:var(--mute); border-top:1px solid var(--rule); }

@keyframes rise { from { opacity:0; transform:translateY(10px); } }
@keyframes shake { 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
@keyframes stamp { 0% { opacity:0; transform:scale(1.8) rotate(-8deg); } 12% { opacity:.9; transform:scale(1) rotate(-8deg); } 80% { opacity:.9; transform:scale(1) rotate(-8deg); } 100% { opacity:0; transform:scale(1) rotate(-8deg); } }
@media (max-width:480px) { .wrap { padding-top:28px; } .sheet { padding:18px 16px 14px 36px; } .sheet::before { left:8px; } .ent { grid-template-columns:2.6rem 1fr; gap:14px; } .stamp { right:120px; } }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } .rv { opacity:1 !important; transform:none !important; } #fx { display:none; } }

/* 日めくり hero */
:root { --ai:#3E5C76; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ai:#8FAECB; } }
:root[data-theme="dark"] { --ai:#8FAECB; }
html { scroll-behavior:smooth; }
.hero { position:relative; isolation:isolate; min-height:min(72svh,600px); display:flex; flex-direction:column; justify-content:center; gap:14px; padding:6vh 0 12vh; }
.hero > * { animation:rise 1s cubic-bezier(.2,.7,.2,1) backwards; }
.hero > .era { animation-delay:.1s; } .hero > .hd { animation-delay:.25s; } .hero > .term { animation-delay:.55s; } .hero > .copy { animation-delay:.8s; } .hero > .cue { animation-delay:1.2s; }
.kanji { position:absolute; z-index:-1; right:32px; top:0; font-size:min(50vw,300px); line-height:1; color:var(--rule); opacity:.6; user-select:none; animation:inkx 2.4s ease-out .2s backwards !important; }
.era { margin:0; font-size:13px; letter-spacing:.3em; color:var(--mute); }
.hd { display:flex; align-items:flex-end; gap:16px; }
.day { display:block; font-size:clamp(96px,28vw,168px); font-weight:400; line-height:.85; letter-spacing:-.03em; }
.day::after { content:""; display:block; width:.35em; height:3px; margin-top:.14em; background:var(--shu); transform-origin:left; animation:grow2 1s .9s cubic-bezier(.3,.7,.2,1) backwards; }
.hm { display:flex; flex-direction:row-reverse; gap:8px; padding-bottom:12px; }
.hm > span { writing-mode:vertical-rl; font-size:16px; letter-spacing:.25em; line-height:1.3; }
.sat { color:var(--ai); } .sun { color:var(--shu); }
.term { margin:6px 0 0; font-size:13px; letter-spacing:.15em; color:var(--mute); }
.copy { position:absolute; right:2px; top:4vh; margin:0; writing-mode:vertical-rl; font-size:15px; letter-spacing:.5em; color:var(--mute); }
.cue { position:absolute; left:2px; bottom:3vh; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--mute); text-decoration:none; font-size:11px; letter-spacing:.3em; }
.cue span { writing-mode:vertical-rl; }
.cue i { position:relative; width:1px; height:52px; overflow:hidden; background:var(--rule); }
.cue i::after { content:""; position:absolute; inset:0; background:var(--shu); transform:translateY(-100%); animation:cue 2.2s ease-in-out infinite; }

/* 手帳：綴じ穴・栞・天気 */
.sheet::before { content:""; position:absolute; left:11px; top:14px; bottom:14px; width:12px; background:radial-gradient(circle at 6px 6px, var(--bg) 4.5px, transparent 5px) 0 0 / 12px 64px repeat-y; pointer-events:none; }
.sheet::after { content:""; position:absolute; right:30px; top:-1px; width:14px; height:56px; background:var(--shu); clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); transform-origin:50% 0; animation:drop .9s cubic-bezier(.3,.7,.2,1) .6s backwards, sway 6s ease-in-out 1.6s infinite; }
.wx { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.wx .lab { margin:0 6px 0 0; }
.wx button { width:40px; height:40px; border:1px solid var(--rule); border-radius:50%; background:transparent; color:var(--mute); font-size:15px; cursor:pointer; transition:color .25s, border-color .25s, transform .25s; }
.wx button:hover { color:var(--ink); border-color:var(--ink); }
.wx button[aria-pressed="true"] { color:var(--shu); border-color:var(--shu); transform:scale(1.1); }
.mi { display:flex; align-items:center; }
.wxs { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:8px; border:1px solid var(--shu); border-radius:50%; color:var(--shu); font-size:11px; font-style:normal; font-weight:400; line-height:1; }
.memo { transform:rotate(-.5deg); transform-origin:left; }
.fresh .txt, .fresh .memo { animation:inkx 1.4s ease-out .15s backwards; }
.fresh .date { animation:rise .6s backwards; }

/* スクロール連動 */
.rv { opacity:0; transform:translateY(20px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity:1; transform:none; }
.end { display:flex; flex-direction:column; align-items:center; gap:16px; padding:80px 0 0; color:var(--mute); }
.end p { margin:0; writing-mode:vertical-rl; font-size:14px; letter-spacing:.5em; }

/* 入口の動き・季節 */
.vline { width:1px; background:var(--rule); transform-origin:top; animation:grow 1.4s .3s cubic-bezier(.3,.6,.2,1) backwards; }
.dot { animation:breathe 4s ease-in-out infinite; }
.g-title { animation:ink2 2s cubic-bezier(.3,.6,.2,1) .2s backwards; }
#fx { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.fx { position:absolute; top:-24px; left:var(--x); width:var(--s); height:var(--s); background:var(--c); opacity:var(--o); animation:fall var(--d) linear var(--dl) infinite; }
.fx.fly { top:var(--y); box-shadow:0 0 8px 2px var(--c); animation:fly var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes grow { from { transform:scaleY(0); } }
@keyframes grow2 { from { transform:scaleX(0); } }
@keyframes breathe { 50% { transform:scale(1.3); opacity:.65; } }
@keyframes ink2 { from { opacity:0; filter:blur(8px); clip-path:inset(0 0 100% 0); } to { opacity:1; filter:blur(0); clip-path:inset(0); } }
@keyframes inkx { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@keyframes cue { 0% { transform:translateY(-100%); } 60%, 100% { transform:translateY(100%); } }
@keyframes drop { from { transform:scaleY(0); } }
@keyframes sway { 50% { transform:rotate(2.5deg); } }
@keyframes fall { from { transform:translate3d(0,-5vh,0) rotate(0); } to { transform:translate3d(var(--dx),112vh,0) rotate(var(--r)); } }
@keyframes fly { 0%, 100% { opacity:0; } 50% { opacity:.85; transform:translate(var(--dx),-30px); } }
.smsg { margin:8px 0 0; font-size:13px; line-height:1.7; color:var(--shu); } .smsg:empty { display:none; }
.seal:disabled { opacity:.5; cursor:default; }
.more { display:block; margin:12px auto 0; }

.g-form .seal { margin-left:0; }
.legacy { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:6px 0; border-top:1px solid var(--rule); font-size:13px; color:var(--shu); }
.raw { margin-left:8px; font-size:11px; font-weight:400; color:var(--shu); }