@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root{font-family:'Manrope','Noto Sans JP',sans-serif;color:#193b40;background:#f5f7f3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:300px}button,a{font:inherit}a{color:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #b75234;outline-offset:4px}.skip{position:absolute;top:-100px;left:12px;z-index:10;padding:12px;background:#fff}.skip:focus{top:10px}.fiction{margin:0;padding:8px clamp(16px,3vw,55px);background:#163d42;color:#f4f7f1;font-size:10px;line-height:1.65}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px clamp(20px,4vw,68px);background:#f7faf6;border-bottom:1px solid #c7d9d4}.brand{text-decoration:none;font-size:24px;font-weight:900;letter-spacing:-.08em}.brand span{color:#288396}nav{display:flex;gap:clamp(14px,3vw,38px);flex-wrap:wrap}nav a{text-decoration:none;border-bottom:1px solid #467980;padding-bottom:4px;font-size:12px;font-weight:700}
.intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.5fr);gap:40px;align-items:end;background:#d8edf0;padding:64px clamp(20px,4vw,68px) 55px}.intro>div:first-child>span,.desks-head>span,.note>span{color:#297987;font-size:11px;font-weight:800;letter-spacing:.16em}.intro h1{font-size:clamp(50px,6vw,94px);line-height:1.14;letter-spacing:-.095em;margin:19px 0 0;font-weight:900}.intro-side{padding-bottom:5px}.intro-side p{font-size:16px;line-height:1.9;margin:0 0 23px}.intro-side a,.note a{display:inline-flex;align-items:center;gap:20px;text-decoration:none;border-bottom:1px solid #244b52;padding:10px 0;font-size:13px;font-weight:700}.intro-side b{font-size:20px;font-weight:400}.cover{margin:0;position:relative;background:#becfd0}.cover img{display:block;width:100%;height:min(64vw,650px);min-height:430px;object-fit:cover;object-position:center 50%}.cover figcaption{position:absolute;right:clamp(20px,4vw,68px);bottom:20px;background:#f7faf6;padding:9px 14px;font-size:10px;letter-spacing:.16em;font-weight:800}
.desks{padding:105px clamp(20px,4vw,68px) 120px;background:#f5f7f3}.desks-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:25px;margin-bottom:45px}.desks-head>span{grid-column:1/-1}.desks h2,.note h2{font-size:clamp(44px,5.4vw,78px);line-height:1.2;letter-spacing:-.09em;margin:0;font-weight:900}.desks-head p{max-width:360px;justify-self:end;font-size:14px;line-height:1.95;margin:0 0 4px}.desk-view{display:grid;grid-template-columns:260px minmax(0,1fr);border:1px solid #b7d0d3}.desk-controls{display:flex;flex-direction:column;background:#d8edf0}.desk-controls button{flex:1;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;gap:8px;min-height:190px;border:0;border-bottom:1px solid #aac7cb;background:transparent;color:#193b40;padding:27px;text-align:left}.desk-controls button:last-child{border:0}.desk-controls button:hover{background:#c2e1e6}.desk-controls button[aria-pressed=true]{background:#a7d7de;box-shadow:inset 6px 0 0 #288396}.desk-controls button span{font-size:24px;font-weight:800;color:#297987}.desk-controls button strong{font-size:19px;font-weight:900}.desk-controls button small{font-size:12px}.desk-view figure{margin:0;min-width:0;position:relative;background:#d4ddda}.desk-view img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.desk-view figcaption{padding:15px 22px;background:#fff;font-size:13px;line-height:1.6}.note{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:90px clamp(20px,4vw,68px);background:#e0ebdf}.note>div{max-width:720px}.note p{max-width:600px;font-size:15px;line-height:2.1;margin:25px 0 14px}footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#173d42;color:#f4f7f2;padding:28px clamp(20px,4vw,68px);font-size:11px}footer a{text-decoration:none}
@media(max-width:950px){.intro{grid-template-columns:1fr}.intro-side p{margin-bottom:12px}.desks-head{grid-template-columns:1fr}.desks-head p{justify-self:start}.desk-view{grid-template-columns:205px minmax(0,1fr)}.desk-controls button{min-height:155px;padding:20px}.desk-controls button strong{font-size:16px}}
@media(max-width:650px){header{align-items:flex-start;flex-direction:column;padding:16px 20px}nav{gap:15px}.intro{padding:38px 20px 42px;gap:18px}.intro h1{font-size:clamp(42px,10.4vw,64px);line-height:1.22}.intro-side p{font-size:14px;margin:0 0 7px}.cover img{height:auto;min-height:0;aspect-ratio:3/2;object-fit:cover}.cover figcaption{right:12px;bottom:12px;font-size:8px}.desks{padding:70px 16px 80px}.desks-head{margin:0 4px 28px}.desks h2,.note h2{font-size:clamp(40px,10vw,58px)}.desk-view{display:block}.desk-controls{flex-direction:row}.desk-controls button{width:50%;min-height:110px;padding:12px;gap:4px;border-bottom:1px solid #aac7cb}.desk-controls button:first-child{border-right:1px solid #aac7cb}.desk-controls button[aria-pressed=true]{box-shadow:inset 0 5px 0 #288396}.desk-controls button span{font-size:17px}.desk-controls button strong{font-size:13px}.desk-controls button small{font-size:10px}.desk-view figcaption{font-size:12px;padding:12px}.note{display:block;padding:70px 20px}.note h2{margin-top:22px}.note p{font-size:14px}footer{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}