/* 配色を変える場合は、この5色を編集します。 */
:root{--paper:#f7f4ee;--ink:#3b4039;--sage:#d9dfcf;--line:#d8d9cf;--accent:#55684c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Yu Gothic",Meiryo,sans-serif;line-height:1.9}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible{outline:3px solid #8b5e2c;outline-offset:5px}
.sample-notice{padding:12px 5%;background:var(--ink);color:#fff;font-size:12px}
.site-header{max-width:1300px;margin:auto;padding:35px 5%;display:flex;justify-content:space-between;align-items:center;gap:25px}
.logo{font-family:"Yu Mincho",serif;font-size:24px;letter-spacing:.16em}
.logo span{font-size:9px;letter-spacing:.2em;font-family:Arial,sans-serif;display:block}
.service-label{font-size:11px;letter-spacing:.05em;margin:0}
.hero{max-width:1300px;min-height:570px;margin:auto;padding:50px 5% 85px;display:grid;grid-template-columns:1.1fr 1fr;gap:65px;align-items:center}
.eyebrow{font-size:11px;letter-spacing:.16em;color:#627355;font-weight:700}
h1{font-family:"Yu Mincho",serif;font-size:clamp(34px,3.5vw,52px);font-weight:500;line-height:1.8;letter-spacing:.035em;margin:24px 0}
.lead{font-size:14px;line-height:2.2;margin:20px 0}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:60px;padding:16px 23px;background:var(--accent);color:#fff;font-size:13px;margin-top:14px}
.button:hover{background:#3e5136}
.scene{height:400px;background:var(--sage);position:relative;overflow:hidden;isolation:isolate}
.scene:before{content:"";position:absolute;width:150%;height:55%;left:-20%;bottom:-10%;background:#e9e5d9;transform:rotate(-14deg)}
.tray{position:absolute;width:62%;height:32%;left:18%;bottom:18%;background:#c9b99c;border:13px solid #d9c9ae;transform:rotate(-12deg);box-shadow:6px 14px 0 #b5a284,14px 30px 35px #55684c28}
.notebook{position:absolute;width:31%;height:51%;left:15%;top:16%;background:#f6f2e8;border-left:8px solid #76866c;transform:rotate(-12deg);box-shadow:4px 6px 0 #c1c5b6}
.notebook:before{content:"";position:absolute;width:40%;height:1px;background:#b8c0ae;top:28%;left:22%;box-shadow:0 12px 0 #b8c0ae}
.pencil{position:absolute;width:8px;height:45%;right:24%;top:18%;background:#ab7f4a;transform:rotate(19deg);box-shadow:4px 4px 0 #56644520}
.pencil:before{content:"";position:absolute;top:-18px;left:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:18px solid #615140}
.circle{position:absolute;right:-35px;top:-35px;width:155px;height:155px;border:1px solid #a4b096;border-radius:50%}
.visual-caption{position:absolute;left:18px;right:18px;bottom:12px;font-size:9px;color:#5f6959;letter-spacing:.03em}
.sample-about{border-top:1px solid var(--line);background:#fffdf8;padding:35px 5% 45px;scroll-margin-top:20px}
.sample-about-inner{max-width:1170px;margin:auto;display:grid;grid-template-columns:1fr 2fr;gap:50px}
.sample-about h2{font-size:17px;margin:5px 0 10px}
.sample-about p{font-size:13px;margin:10px 0;color:#5f685a}
.review-points{padding-left:1.5em;font-size:13px;color:#5f685a}.review-points li{padding-left:.3em;margin:.4em 0}.file-link{text-decoration:underline;text-underline-offset:3px}
details{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
summary{font-size:13px;font-weight:600;cursor:pointer}
@media(max-width:700px){.site-header{padding-top:25px;padding-bottom:20px}.logo{font-size:21px}.service-label{font-size:10px;max-width:110px;text-align:right}.hero{padding-top:30px;padding-bottom:50px;grid-template-columns:1fr;gap:35px}h1{font-size:36px;margin:22px 0}.lead{font-size:13px}.scene{height:310px}.sample-about-inner{grid-template-columns:1fr;gap:10px}.button{gap:45px}}
@media(max-width:480px){h1{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}