:root { 
    --primary: #fab1a0; 
    --primary-light: #fab1a022;
    --bg: #fcfcfc; 
    --card: #ffffff; 
    --text: #2d3436; 
    --text-sub: #636e72;
    --border: rgba(0,0,0,0.06);
    --ivory: #fdfaf2; /* 温かみのあるアイボリーに戻しました */
    --ivory-dark: #f5f0e1; /* 封筒の内側や蓋の影用 */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a1a;
        --card: #2d2d2d;
        --text: #f0f0f0;
        --text-sub: #b2bec3;
        --border: rgba(255,255,255,0.1);
    }
}

.control-chk, .rule-logic-chk { position: fixed; opacity: 0; pointer-events: none; }

body { 
    margin: 0; 
    background-color: var(--bg); 
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHN0eWxlPnRleHR7Zm9udC1zaXplOjE2cHg7ZmlsbDojZmFiMWEwO2ZpbGwtb3BhY2l0eTowLjA2O308L3N0eWxlPjx0ZXh0IHg9IjEwIiB5PSIyNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1IDEwIDI1KSI+8J+MuDwvdGV4dD48dGV4dCB4PSI2NSIgeT0iMzUiIHRyYW5zZm9ybT0icm90YXRlKDEyIDY1IDM1KSI+8J+MsTwvdGV4dD48dGV4dCB4PSIzNSIgeT0iNzUiIHRyYW5zZm9ybT0icm90YXRlKC04IDM1IDc1KSI+8J+OvDwvdGV4dD48dGV4dCB4PSI4MCIgeT0iODUiIHRyYW5zZm9ybT0icm90YXRlKDIwIDgwIDg1KSI+8J+NsDwvdGV4dD48L3N2Zz4='); 
    background-size: 160px 160px; 
    color: var(--text); 
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden; 
}

/* スプラッシュ・サイドバー・ヘッダー共通 */
#splash { position: fixed; inset: 0; background: var(--card); z-index: 10000; display: flex; align-items: center; justify-content: center; transition: 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
#sp-trigger:checked ~ #splash { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-container { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.circle-loader { position: absolute; inset: 0; animation: rotate 2s linear infinite; }
.path { stroke: var(--primary); stroke-linecap: round; animation: dash 1.5s ease-in-out infinite; stroke-width: 4; }
.seasonal-icon { position: absolute; font-size: 3rem; animation: pulse 1.5s ease-in-out infinite; filter: drop-shadow(0 0 10px var(--primary)); }
.splash-title { font-weight: 900; font-size: 0.85rem; letter-spacing: 0.2em; color: var(--primary); position: absolute; bottom: -60px; width: 200px; text-align: center; left: 50%; transform: translateX(-50%); }

@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes dash { 0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; } }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } }

.side-profile { position: fixed; top: 0; right: 0; width: 300px; max-width: 85vw; height: 100%; background: var(--card); z-index: 9000; transform: translateX(105%); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1); padding: 60px 30px; box-shadow: -10px 0 30px rgba(0,0,0,0.1); box-sizing: border-box; overflow-y: auto; }
#profile-toggle:checked ~ .side-profile { transform: translateX(0); }
.close-btn { position: absolute; top: 20px; right: 20px; font-size: 2.5rem; cursor: pointer; opacity: 0.3; padding: 10px; line-height: 0.8; }
.web-link { display: block; background: var(--primary); color: white; text-decoration: none; padding: 18px; border-radius: 20px; text-align: center; font-weight: bold; margin-top: 30px; box-shadow: 0 4px 15px var(--primary-light); }
.x-link { display: block; background: #000; color: white; text-decoration: none; padding: 18px; border-radius: 20px; text-align: center; font-weight: bold; margin-top: 12px; }

header { padding: 50px 20px 70px; text-align: center; background: linear-gradient(135deg, var(--primary), transparent); color: white; position: relative; }
header .logo-area::before { content: "🎒"; display: block; font-size: 4rem; margin-bottom: 5px; animation: float 3s infinite ease-in-out; filter: drop-shadow(0 0 15px rgba(255,255,255,0.4)); }
.main-logo { font-family: 'Zen Maru Gothic', sans-serif; font-weight: 900; font-size: 2.2rem; letter-spacing: 0.05em; margin: 0; color: #fff; text-shadow: 0 4px 10px rgba(0,0,0,0.1); }

.header-top { display: flex; justify-content: center; gap: 12px; margin-bottom: 30px; }
.open-btn, .replay-btn { background: rgba(255, 255, 255, 0.95); padding: 0 20px; height: 48px; border-radius: 14px; color: var(--primary); cursor: pointer; text-decoration: none; font-weight: bold; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; transition: 0.2s; border: none; }

main { max-width: 640px; margin: -40px auto 0; padding: 0 20px 60px; position: relative; z-index: 10; }
section { background: var(--card); padding: 40px; border-radius: 28px; margin-bottom: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); border: 1px solid var(--border); box-sizing: border-box; }
h2 { color: var(--primary); font-size: 1.2rem; border-bottom: 3px solid var(--primary); padding-bottom: 6px; margin-bottom: 25px; display: inline-block; font-weight: 900; }

.rule-item { display: flex; align-items: flex-start; gap: 18px; cursor: pointer; padding: 15px; border-radius: 16px; transition: 0.2s; }
.rule-item:hover { background: var(--primary-light); }
.rule-item p { margin: 0; font-size: 1rem; line-height: 1.7; flex: 1; }
.custom-chk { width: 26px; height: 26px; border: 3px solid var(--primary); border-radius: 9px; flex-shrink: 0; position: relative; background: var(--card); margin-top: 2px; transition: 0.2s; }
#rule-1:checked ~ #wrapper .rule-item[for="rule-1"] .custom-chk, #rule-2:checked ~ #wrapper .rule-item[for="rule-2"] .custom-chk, #rule-3:checked ~ #wrapper .rule-item[for="rule-3"] .custom-chk, #rule-4:checked ~ #wrapper .rule-item[for="rule-4"] .custom-chk { background: var(--primary); }
#rule-1:checked ~ #wrapper .rule-item[for="rule-1"] .custom-chk::after, #rule-2:checked ~ #wrapper .rule-item[for="rule-2"] .custom-chk::after, #rule-3:checked ~ #wrapper .rule-item[for="rule-3"] .custom-chk::after, #rule-4:checked ~ #wrapper .rule-item[for="rule-4"] .custom-chk::after { content: '✓'; color: white; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: bold; }

/* 入部届（紙）のスタイル：ドッグイヤーなし・温かいアイボリー */
.application-form { 
    grid-area: 1 / 1;
    width: 220px; height: 280px; padding: 30px; 
    background-color: var(--ivory);
    border: 1px solid rgba(0,0,0,0.05); 
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); 
    transition: 0.8s cubic-bezier(0.5, 0, 0.2, 1); transform-origin: bottom; z-index: 5; color: #333; 
    position: relative; box-sizing: border-box;
    border-radius: 2px;
}
#rule-1:checked + #rule-2:checked + #rule-3:checked + #rule-4:checked ~ #wrapper .application-form { transform: translateY(140px) rotateX(80deg) scale(0.6); opacity: 0; pointer-events: none; }

.letter-container { position: relative; height: 360px; display: grid; place-items: center; perspective: 1200px; margin-top: 20px; }

/* 封筒のスタイル */
.envelope-wrapper { grid-area: 1 / 1; width: 260px; height: 160px; opacity: 0.15; transition: 0.6s; filter: grayscale(1); pointer-events: none; }
#rule-1:checked + #rule-2:checked + #rule-3:checked + #rule-4:checked ~ #wrapper .envelope-wrapper { opacity: 1; filter: none; cursor: pointer; pointer-events: auto; }
.envelope { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.env-back { position: absolute; inset: 0; background: var(--ivory-dark); border-radius: 6px; }
.env-paper-folded { position: absolute; width: 85%; top: 0; left: 7.5%; background: var(--ivory); z-index: 2; opacity: 0; transition: 0.5s 0.4s; padding: 15px; text-align: center; color: var(--primary); font-weight: bold; border: 1px solid rgba(0,0,0,0.05); font-size: 0.9rem; }
#rule-1:checked + #rule-2:checked + #rule-3:checked + #rule-4:checked ~ #wrapper .env-paper-folded { top: -25px; opacity: 1; }
.env-front { position: absolute; inset: 0; background: var(--ivory); z-index: 3; clip-path: polygon(0 35%, 50% 70%, 100% 35%, 100% 100%, 0 100%); border-radius: 0 0 6px 6px; }
.env-flap { position: absolute; top: 0; width: 100%; height: 100%; background: var(--ivory-dark); z-index: 4; clip-path: polygon(0 0, 100% 0, 50% 55%); transform-origin: top; transform: rotateX(-165deg); transition: 0.5s; }
.is-closing .env-flap { transform: rotateX(0deg); z-index: 5; background: var(--ivory); }
.seal { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 44px; height: 44px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 6; transition: 0.3s 0.5s; font-size: 1.4rem; }
.is-closing .seal { transform: translate(-50%, -50%) scale(1); }
.is-sent { animation: send-away 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes send-away { 100% { transform: translateY(-1200px) rotate(20deg) scale(0.8); opacity: 0; } }

footer { text-align: center; padding: 30px 20px 50px; }
footer p { display: inline-block; background: var(--card); padding: 12px 30px; border-radius: 50px; border: 1px solid var(--border); color: var(--text-sub); font-size: 0.85rem; font-weight: bold; }