:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; color: #26322d; background: #e9e3d6; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.9; background: radial-gradient(circle at 10% 0%, #fffdf6bb 0 2px, transparent 2px) 0 0 / 22px 22px, linear-gradient(125deg, #e5dccb, #f3eedf 50%, #e7dece); }
.grain { position: fixed; inset: 0; z-index: -1; opacity: .26; pointer-events: none; background-image: repeating-radial-gradient(#5f594c 0 .55px, transparent .8px 100%); background-size: 5px 5px; mix-blend-mode: soft-light; }
.page-shell { width: min(100% - 32px, 790px); margin: 0 auto; padding: clamp(20px, 5vw, 64px) 0 72px; }
.hero { position: relative; overflow: hidden; padding: clamp(38px, 8vw, 78px) clamp(28px, 8vw, 76px) clamp(30px, 6vw, 58px); color: #fbf8ef; border: 1px solid #c9a35a77; border-radius: 3px 3px 0 0; background: radial-gradient(circle at 84% 11%, #cfaf68 0 2px, transparent 2.5px), radial-gradient(circle at 88% 12%, #cfaf68 0 1px, transparent 1.7px), linear-gradient(140deg, #112f28, #245341 74%, #173a30); box-shadow: 0 24px 60px #4a3d2626; }
.hero::before { content: ""; position: absolute; inset: 13px; border: 1px solid #f1dcaa55; pointer-events: none; }
.eyebrow { margin: 0; color: #ead49f; font-family: Georgia, "Times New Roman", serif; font-size: .72rem; font-weight: 700; letter-spacing: .18em; }
.hero h1 { margin: .3em 0 0; font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(2.15rem, 7vw, 3.8rem); font-weight: 500; line-height: 1.28; letter-spacing: .07em; }
.hero-copy { margin: 1rem 0 2.4rem; color: #d5e1d7; font-size: .98rem; letter-spacing: .12em; }
.private-notice { position: relative; margin: 0; padding: .8rem 1rem .8rem 1.15rem; border-left: 2px solid #e2c074; background: #ffffff10; color: #edf0e8; font-size: .84rem; }
.letter-map { display: grid; grid-template-columns: 145px 1fr; gap: 24px; align-items: center; padding: 18px clamp(28px, 7vw, 76px); border: 1px solid #d6c6a6; border-top: 0; background: #f7f1e4; color: #4b4c42; }
.letter-map > p { margin: 0; color: #a1783b; font-family: Georgia, serif; font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.letter-map ol { display: flex; gap: 17px; margin: 0; padding: 0; list-style: none; font-size: .78rem; }
.letter-map li { display: grid; gap: 1px; white-space: nowrap; }
.letter-map span { color: #a1783b; font-family: Georgia, serif; font-size: .68rem; letter-spacing: .12em; }
.note { padding: clamp(32px, 7vw, 76px); border: 1px solid #d6c6a6; border-top: 0; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #fdfbf4, #fffef9 50%, #fcfaf1); box-shadow: 0 24px 60px #4a3d261c; }
.note h1 { display: none; }
.note h2 { position: relative; margin: 3.8rem 0 1.3rem; padding: .2rem 0 .75rem; color: #214a3a; font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: clamp(1.4rem, 4vw, 1.88rem); font-weight: 500; line-height: 1.5; border-bottom: 1px solid #cfbf9f; }
.note h2::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 52px; border-bottom: 2px solid #ae8341; }
.note h2:first-child { margin-top: 0; }
.note h3 { margin: 2.3rem 0 .85rem; color: #2d614b; font-size: 1.14rem; }
.note p { margin: 0 0 1.35rem; }
.note ul, .note ol { margin: 0 0 1.55rem; padding-left: 1.35rem; }
.note li { padding-left: .25rem; margin-bottom: .4rem; }
.note strong { color: #1e5943; }
.note a { color: #145b73; font-weight: 700; text-decoration-color: #c69c53; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.note a:hover { color: #0b3e50; }
.note blockquote { margin: 1.7rem 0; padding: 1.1rem 1.25rem; border-left: 2px solid #b48945; background: #f7f0df; color: #464438; }
.note hr { position: relative; height: 18px; margin: 3rem 0; border: 0; background: linear-gradient(90deg, transparent, #c8af7a, transparent) center / 100% 1px no-repeat; }
.note hr::before { content: "◆"; position: absolute; left: 50%; top: 50%; padding: 0 10px; color: #a77b39; background: #fffef9; font-size: 10px; line-height: 18px; transform: translate(-50%, -50%); }
.loading, .error { color: #5b6863; text-align: center; }
.guide { margin: 1.7rem 0 2.1rem; padding: 1.25rem; border: 1px solid #d9c79f; background: #fbf6e9; }
.guide figcaption { margin-bottom: 1rem; color: #35604e; font-family: Georgia, "Yu Mincho", serif; font-size: 1rem; font-weight: 700; }
.guide p { margin: 1rem 0 0; color: #5d6257; font-size: .88rem; }
.guide-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; }
.guide-steps > div { display: grid; gap: .25rem; padding: .8rem .55rem; border: 1px solid #d6c49a; background: #fffdf7; text-align: center; }
.guide-steps b { display: grid; width: 24px; height: 24px; place-items: center; margin: 0 auto; color: #fff7e8; border-radius: 50%; background: #2c644e; font-size: .75rem; }
.guide-steps span { color: #244a3c; font-size: .85rem; font-weight: 700; }
.guide-steps small { color: #71776c; font-size: .72rem; }
.guide-steps > i { align-self: center; color: #b08747; font-size: 1.15rem; font-style: normal; }
.visual-cards { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 8px; }
.visual-cards > div { display: grid; gap: .28rem; padding: .85rem .65rem; border: 1px solid #d6c49a; background: #fffdf7; text-align: center; }
.visual-cards b { color: #a1783b; font-family: Georgia, "Yu Mincho", serif; font-size: .76rem; letter-spacing: .06em; }
.visual-cards span { color: #244a3c; font-size: .84rem; font-weight: 700; line-height: 1.5; }
.visual-cards small { color: #71776c; font-size: .7rem; line-height: 1.55; }
.visual-cards > i { align-self: center; color: #b08747; font-size: 1rem; font-style: normal; }
.cycle-guide > div { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.cycle-guide span { padding: .45rem .7rem; border-radius: 999px; color: #244a3c; background: #e9f0e7; font-size: .78rem; font-weight: 700; }
.cycle-guide i { color: #b08747; font-style: normal; }
.bar-chart { display: grid; gap: .62rem; }
.bar-chart > div { display: grid; grid-template-columns: 72px 1fr; gap: .7rem; align-items: center; }
.bar-chart span { color: #5c6259; font-size: .77rem; font-weight: 700; }
.bar-chart b { position: relative; isolation: isolate; overflow: hidden; display: block; padding: .37rem .55rem; color: #214a3a; border: 1px solid #d7c69c; background: #fffdf7; font-size: .78rem; }
.bar-chart b::before { position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--level); content: ""; background: #dce9d9; }
.timeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; }
.timeline > div { display: grid; gap: .25rem; padding: .78rem .55rem; border-top: 2px solid #b08747; background: #fffdf7; text-align: center; }
.timeline b { color: #214a3a; font-size: .79rem; }
.timeline span { color: #697067; font-size: .72rem; }
.timeline i { color: #b08747; font-style: normal; }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-cards > div { display: grid; gap: .25rem; padding: 1rem; border: 1px solid #d6c49a; background: #fffdf7; }
.plan-cards > div:last-child { border-color: #b08747; background: #f6edda; }
.plan-cards b { color: #80633a; font-size: .74rem; }
.plan-cards strong { color: #214a3a; font-family: Georgia, "Yu Mincho", serif; font-size: 1.3rem; }
.plan-cards span { color: #6b7168; font-size: .72rem; line-height: 1.5; }
.footer { display: flex; justify-content: space-between; color: #766b58; font-family: Georgia, serif; font-size: .7rem; letter-spacing: .13em; padding: 20px 4px 0; }
@media (max-width: 620px) { .letter-map { grid-template-columns: 1fr; gap: 8px; } .letter-map ol { justify-content: space-between; gap: 8px; font-size: .68rem; } .guide-steps, .visual-cards, .timeline { grid-template-columns: 1fr; } .guide-steps > i, .visual-cards > i, .timeline > i { display: none; } .bar-chart > div { grid-template-columns: 1fr; gap: .25rem; } .plan-cards { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .page-shell { width: min(100% - 20px, 790px); padding-top: 10px; } }