:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; color: #f7f4ef; background: #211e19; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; background: #211e19; }
body { padding: 0 0 calc(102px + env(safe-area-inset-bottom)); }
.page-shell { width: min(100%, 520px); margin: 0 auto; overflow: hidden; background: #211e19; }
.hero-image { width: 100%; overflow: hidden; background: #fff; }
.hero-image img { display: block; width: 100%; height: auto; }
.intro-card { position: relative; padding: 0 25px 22px; text-align: center; background: linear-gradient(180deg, #211e19 0%, #2b2721 100%); }
.profile { display: block; width: 88px; height: 88px; margin: -43px auto 10px; border: 4px solid #b8a78c; border-radius: 50%; object-fit: cover; object-position: 18% center; box-shadow: 0 4px 14px #0008; }
.eyebrow { margin: 0 0 12px; color: #d6c29b; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.intro-card h1 { margin: 0; color: #f6f2eb; font-size: clamp(22px, 6vw, 29px); line-height: 1.5; font-weight: 800; letter-spacing: .035em; }
.intro-card h2 { margin: 15px 0 0; color: #f0ece4; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.7; font-weight: 700; }
.description { max-width: 435px; margin: 16px auto 0; color: #c7c0b5; font-size: 13px; line-height: 1.95; }
.info-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 16px 0 0; }
.info-chips span { padding: 6px 10px; border: 1px solid #655b4d; border-radius: 999px; color: #ead7a9; background: #312b22; font-size: 10px; }
.risk-note { margin: 17px auto 0; max-width: 420px; color: #948c80; font-size: 10px; line-height: 1.7; }
.details-card { margin: 7px 15px 28px; padding: 19px 19px 15px; border: 1px solid #4b4338; border-radius: 15px; background: #29251f; }
.details-card h2 { margin: 0 0 12px; color: #f0dcae; font-size: 16px; }
.details-card ul { margin: 0; padding-left: 1.2em; color: #d4cec3; font-size: 12px; line-height: 2; }
.line-cta { position: fixed; z-index: 10; left: 50%; bottom: max(13px, env(safe-area-inset-bottom)); display: flex; width: min(calc(100% - 32px), 440px); min-height: 68px; align-items: center; gap: 12px; padding: 8px 10px; transform: translateX(-50%); border: 1px solid #e8e3db; border-radius: 999px; color: #fff; background: #202125; box-shadow: 0 8px 24px #0008; text-decoration: none; }
.cta-avatar { flex: 0 0 48px; width: 48px; height: 48px; border: 2px solid #b8a78c; border-radius: 50%; object-fit: cover; object-position: 18% center; }
.cta-text { flex: 1; text-align: center; line-height: 1.45; }
.cta-text strong, .cta-text small { display: block; }
.cta-text strong { font-size: 14px; }
.cta-text small { margin-top: 2px; color: #e0dbd3; font-size: 11px; }
.line-badge { display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; border: 4px solid #078f43; border-radius: 50%; color: #06c755; background: #fff; box-shadow: 0 0 0 2px #14d56d; }
.line-badge b { font: 900 11px Arial, sans-serif; }
.modal-overlay, .exit-overlay { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 20px 15px; background: rgba(9, 12, 14, .7); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.modal-card, .exit-card { width: min(100%, 430px); padding: 25px 22px 19px; border: 1px solid #e7e9e6; border-radius: 22px; color: #25302b; background: #fff; box-shadow: 0 24px 75px #0007; text-align: center; }
.modal-logo { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 11px; border-radius: 14px; color: #fff; background: #06c755; font: 900 12px Arial, sans-serif; }
.modal-eyebrow { margin: 0 0 10px; color: #16804d; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.modal-card h2 { margin: 0; color: #1e2b25; font-size: clamp(20px, 5.5vw, 25px); font-weight: 800; line-height: 1.5; }
.modal-copy { margin: 12px 0 18px; color: #68736d; font-size: 13px; line-height: 1.8; }
.modal-actions { display: grid; gap: 9px; }
.modal-choice { display: flex; width: 100%; min-height: 64px; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid #dce4df; border-radius: 13px; color: #29342f; background: #fff; text-align: left; cursor: pointer; }
.modal-choice:hover, .modal-choice:focus-visible { border-color: #06c755; background: #f5fff8; outline: none; }
.modal-choice strong, .modal-choice small { display: block; }
.modal-choice strong { font-size: 14px; }
.modal-choice small { margin-top: 4px; color: #7b857f; font-size: 11px; }
.arrow { color: #92a097; font-size: 23px; }
.modal-risk { margin: 13px 0 0; color: #929a95; font-size: 10px; line-height: 1.6; }
.exit-card { width: min(100%, 350px); padding: 27px 22px; }
.exit-card h2 { margin: 0 0 8px; font-size: 21px; }
.exit-card p { margin: 0; color: #68736d; font-size: 13px; line-height: 1.7; }
@media (min-width: 700px) { body { padding-bottom: 106px; background: #171512; } .page-shell { box-shadow: 0 0 45px #0005; } }