@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1:wght@400;500;600&display=swap');

.letter-page{--paper:#f4efe5;--ink:#27251f;--muted:#746d60;--line:#cfc5b3;--serif:"Moname Serif","Yu Mincho","Noto Serif JP",serif;background:var(--paper);color:var(--ink);min-height:100vh;font-family:"M PLUS 1","Noto Sans JP","Yu Gothic",sans-serif}
.letter-page .v-header{position:relative;color:var(--ink);border-bottom:1px solid var(--line);padding-top:24px;padding-bottom:24px}.letter-page .v-header nav{font:400 13px/1.9 "M PLUS 1","Noto Sans JP",sans-serif}.letter-page .nav-outline{border-color:#a79d8b}.letter-page .v-menu{background:transparent}
.letter-hero{background:#292a24;color:#f6f0e5;padding:164px 0 92px;position:relative;overflow:hidden}.letter-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 22%,#8d744f66 0 2%,transparent 30%),linear-gradient(120deg,transparent 0 66%,#c9af7a13 66% 68%,transparent 68%)}.letter-hero-inner{position:relative;max-width:880px;margin:auto;width:calc(100% - 128px)}.letter-hero .kicker{color:#d8bd8b;margin-bottom:28px;font-family:"M PLUS 1","Noto Sans JP",sans-serif}.letter-hero h1{font:400 clamp(40px,5.1vw,68px)/1.55 var(--serif);letter-spacing:.08em;margin:0;max-width:760px}.letter-meta{display:flex;gap:20px;align-items:center;margin-top:34px;color:#d9d1c3;font:400 13px/1.9 "M PLUS 1","Noto Sans JP",sans-serif;letter-spacing:.07em}.letter-meta:before{content:"";width:46px;height:1px;background:#c8ad79}
.article-shell{max-width:720px;margin:auto;width:calc(100% - 64px);padding:92px 0 55px}.article-lead{font:400 25px/2 var(--serif);letter-spacing:.04em;margin-bottom:60px;padding-bottom:52px;border-bottom:1px solid var(--line)}.article-body{font-size:16px;line-height:2.25;letter-spacing:.025em}.article-body p+p{margin-top:30px}.article-body h2{font:400 26px/1.8 var(--serif);letter-spacing:.06em;margin:65px 0 25px}.article-body blockquote{margin:38px 0;padding:25px 30px;border-left:2px solid #9b7d48;background:#eae1d1;font:400 20px/1.9 var(--serif);letter-spacing:.04em}.article-body blockquote p{margin:0}.article-answer{margin:48px -54px;padding:43px 54px;background:#e4d8c5;font:400 25px/1.9 var(--serif);letter-spacing:.05em}.article-answer strong{font-weight:400}
.letter-next{margin-top:72px;padding:35px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.letter-next .kicker{color:#8a7050;margin-bottom:13px;font-family:"M PLUS 1","Noto Sans JP",sans-serif}.letter-next h2{font:400 26px/1.75 var(--serif);margin:0}.letter-next p{color:var(--muted);font-size:15px;margin-top:13px;line-height:2}.letter-back{display:inline-flex;align-items:center;justify-content:space-between;gap:52px;border-bottom:1px solid currentColor;padding:13px 0;margin-top:48px;font:400 14px/1.9 "M PLUS 1","Noto Sans JP",sans-serif}.letter-page .v-footer{max-width:1180px;width:calc(100% - 128px);margin:auto;color:#d8d2c6;border-color:#5d594f;padding-bottom:25px}.letter-footer{background:#292a24;color:#eee7da;padding:20px 0 1px;margin-top:40px}
@media(max-width:700px){.letter-page .v-header{padding:20px}.letter-page .v-header nav{background:#f4efe5;border-color:var(--line)}.letter-hero{padding:116px 0 65px}.letter-hero-inner{width:calc(100% - 40px)}.letter-hero h1{font-size:35px;line-height:1.7}.letter-meta{margin-top:27px;font-size:11px}.article-shell{width:calc(100% - 40px);padding:60px 0 30px}.article-lead{font-size:21px;line-height:1.95;margin-bottom:42px;padding-bottom:38px}.article-body{font-size:16px;line-height:2.2}.article-body p+p{margin-top:26px}.article-body h2{font-size:23px;margin:50px 0 20px}.article-body blockquote{margin:30px 0;padding:20px;font-size:18px}.article-answer{margin:38px -20px;padding:30px 20px;font-size:21px}.letter-next{margin-top:53px;padding:28px 0}.letter-next h2{font-size:23px}.letter-page .v-footer{width:calc(100% - 40px)}.letter-footer{margin-top:20px}}
