:root { --green:#31574d; --red:#963c46; --ink:#26352d; --paper:#f7f6f0; --line:#b5c2b8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:500 17px/1.85 "Yu Gothic", "Meiryo", sans-serif; }
a { color:var(--green); text-underline-offset:5px; overflow-wrap:anywhere; }
button,input { font:inherit; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.skip { position:absolute; top:-80px; background:white; padding:12px; }
.skip:focus { top:0; z-index:5; }
.preview-banner { padding:10px max(5%,calc((100% - 1120px)/2)); background:#e3ece5; font-size:14px; border-bottom:1px solid var(--line); display:flex; gap:6px 20px; flex-wrap:wrap; }
.member-header { max-width:1120px; margin:auto; padding:25px 24px; display:flex; justify-content:space-between; gap:24px; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:20px; text-decoration:none; }
.wordmark { font:700 44px/1.4 "Yu Mincho",serif; letter-spacing:.16em; }
.brand>span+span { font-size:13px; line-height:1.6; }
nav { display:flex; flex-wrap:wrap; gap:8px 22px; }
nav a { min-height:44px; display:flex; align-items:center; font-weight:700; font-size:15px; }
nav a[aria-current] { text-decoration-thickness:3px; }
main { max-width:1120px; padding:38px 24px 60px; margin:auto; min-height:65vh; }
h1,h2,h3 { line-height:1.5; font-weight:700; overflow-wrap:anywhere; }
h1 { font-family:"Yu Mincho",serif; font-size:36px; margin:8px 0 20px; }
h2 { font-size:23px; margin:0 0 14px; }
h3 { font-size:19px; }
p { margin:0 0 18px; }
.eyebrow { color:var(--green); font-size:14px; font-weight:700; letter-spacing:.09em; margin:0; }
.layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr); gap:26px; }
.panel { padding:28px; background:white; border:1px solid var(--line); margin-bottom:24px; }
.narrow { max-width:680px; margin:auto; }
.lead { font-size:18px; }
.notice { padding:17px 20px; background:#eaf0eb; border-left:4px solid var(--green); }
.warning { border-color:var(--red); background:#f7edeb; }
.small { font-size:14px; line-height:1.8; }
.tag { display:inline-block; font-size:14px; padding:3px 12px; border:1px solid var(--line); background:#eef3ef; margin-bottom:12px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:22px 0 10px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; background:var(--green); border:1px solid var(--green); color:white; font-weight:700; text-decoration:none; line-height:1.6; }
.button.secondary { background:white; color:var(--green); }
.button.danger { background:var(--red); border-color:var(--red); }
.text-button { color:var(--green); border:0; background:none; text-decoration:underline; padding:10px 0; min-height:44px; }
button:disabled { cursor:not-allowed; background:#e6e8e4; color:#56635a; border-color:var(--line); }
label { display:block; font-weight:700; margin:18px 0 8px; }
input[type=email] { width:100%; padding:13px; background:#f6f7f3; border:1px solid #758b7d; font-size:17px; }
.check { display:flex; gap:12px; align-items:flex-start; font-size:16px; }
.check input { width:22px; height:22px; flex:0 0 22px; margin-top:4px; accent-color:var(--green); }
.steps { display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; margin:0 0 24px; padding:0; font-size:14px; color:#52665a; }
.steps .active { font-weight:700; color:var(--green); border-bottom:2px solid var(--green); }
.error { color:#8b2535; font-weight:700; }
.product { display:grid; grid-template-columns:90px minmax(0,1fr); gap:20px; margin:20px 0; }
.product img { width:90px; height:128px; object-fit:cover; }
.price { font-size:28px; font-weight:700; }
.price small { font-size:14px; font-weight:500; }
dl { margin:0; }
dl>div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; padding:12px 0; border-bottom:1px solid #dce3dd; }
dt { font-size:15px; font-weight:700; }
dd { margin:0; overflow-wrap:anywhere; }
.scope-switch { border:1px solid var(--line); padding:18px; margin:24px 0; }
.scope-switch button { padding:10px 16px; min-height:44px; border:1px solid var(--green); color:var(--green); background:white; margin:0 8px 8px 0; }
.scope-switch button[aria-pressed=true] { color:white; background:var(--green); }
.preview-controls { background:#f4f1e9; border:1px dashed #a19277; padding:20px; margin:24px 0; }
.preview-controls h2 { font-size:18px; }
.list { padding-left:24px; }
.list li { margin-bottom:10px; }
details { border-top:1px solid var(--line); padding:16px 0; }
summary { cursor:pointer; font-weight:700; }
details p { margin-top:12px; }
footer { border-top:1px solid var(--line); padding:26px max(24px,calc((100% - 1072px)/2)); display:flex; flex-wrap:wrap; gap:10px 24px; font-size:14px; }
footer a,footer button { min-height:44px; display:inline-flex; align-items:center; }
footer button { background:none; border:0; text-decoration:underline; color:var(--green); padding:0; }
footer p { width:100%; }
@media(max-width:700px) {
  body { font-size:16px; }
  .member-header { padding:18px; display:block; }
  .brand { gap:14px; }
  .wordmark { font-size:34px; }
  nav { margin-top:12px; gap:6px 18px; }
  main { padding:26px 18px 40px; }
  h1 { font-size:28px; }
  h2 { font-size:21px; }
  .layout { display:block; }
  .panel { padding:21px 18px; }
  .actions .button { width:100%; }
  dl>div { grid-template-columns:1fr; gap:4px; }
  .product { gap:14px; }
  .preview-banner { padding:10px 18px; }
}