/* くぜさえ 大津SA STORE 進行報告 — 特設サイト（kuzesae.com のトーンに合わせる） */
:root{--cream:#F7F1E7;--paper:#FFFDF8;--ink:#1B1B1B;--ink-2:#4A4540;--yellow:#F6C400;--sky:#BFE3F5;--pink:#F6C3D4;--green:#2EA36A;--orange:#EE7A2A;--red:#E9432E;
  --jp:"Zen Maru Gothic","Hiragino Maru Gothic ProN","M PLUS Rounded 1c",system-ui,sans-serif;--en:"Rubik","Zen Maru Gothic",system-ui,sans-serif;
  --line:3px;--sh:6px 6px 0 var(--ink);--gut:clamp(18px,4vw,48px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:var(--jp);font-weight:500;color:var(--ink);background:var(--cream);font-size:16px;line-height:1.95;-webkit-text-size-adjust:100%;overflow-x:hidden}
.en{font-family:var(--en)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.sp{display:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--gut)}

.top{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px var(--gut);background:var(--cream);border-bottom:var(--line) solid var(--ink)}
.top .brand img{height:26px;width:auto}
.top nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap;padding:2px 12px;border:2px solid var(--ink);border-radius:30px;background:var(--paper)}
.top nav a:hover{background:var(--yellow)}

.hero{background:var(--yellow);padding:clamp(28px,5vw,56px) var(--gut) 0;text-align:center;overflow:hidden}
.hero-in{max-width:1000px;margin:0 auto;background:var(--paper);border:4px solid var(--ink);border-radius:32px;box-shadow:8px 8px 0 var(--ink);padding:clamp(20px,4vw,40px) clamp(16px,4vw,48px)}
.tag{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.16em;background:var(--ink);color:var(--cream);padding:3px 16px;border-radius:30px;margin-bottom:14px}
.hero h1 img{width:100%}
.hero-sub{font-weight:900;font-size:clamp(16px,2.6vw,24px);line-height:1.6;margin-top:10px}
.open{display:inline-block;margin-top:14px;background:var(--red);color:#fff;font-weight:900;font-size:clamp(16px,2.2vw,20px);border:3px solid var(--ink);border-radius:40px;padding:2px 26px;transform:rotate(-1.5deg)}
.open b{font-size:1.4em;margin-right:2px}
.pdf{margin-top:12px;font-size:14px;font-weight:700}
.pdf a{display:inline-block;border:2px solid var(--ink);border-radius:30px;padding:0 18px;background:var(--cream);text-decoration:none}
.pdf a:hover{background:var(--yellow)}
.floats{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,22px);max-width:1160px;margin:clamp(18px,3vw,34px) auto 0;padding-bottom:22px}
.fl{flex:1 1 0;min-width:0;display:block;animation:sway 4.5s ease-in-out infinite;transform-origin:50% 4%}
.fl img{width:100%;max-height:270px;object-fit:contain;object-position:bottom}
.fl:nth-child(even){animation-delay:-2.2s}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.fl,.mq-in{animation:none!important}}
html.nomotion .fl,html.nomotion .mq-in{animation:none!important}

.mq{background:var(--ink);color:var(--yellow);overflow:hidden;white-space:nowrap;border-block:var(--line) solid var(--ink)}
.mq-in{display:inline-flex;animation:mq 40s linear infinite}
.mq span{font-family:var(--en);font-weight:900;font-size:clamp(15px,2vw,22px);letter-spacing:.12em;padding:9px 14px}
.mq i{font-style:normal;color:var(--cream);margin:0 10px}
@keyframes mq{to{transform:translateX(-50%)}}

.sec{padding:clamp(48px,7vw,96px) 0}
.sec.sky{background:var(--sky)}.sec.yellow{background:var(--yellow)}.sec.pink{background:var(--pink)}.sec.ink{background:var(--ink);color:var(--cream)}
.sec+.sec{border-top:var(--line) solid var(--ink)}
.no{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.16em;background:var(--ink);color:var(--cream);padding:2px 16px;border-radius:30px;margin-bottom:10px}
.sec.ink .no{background:var(--yellow);color:var(--ink)}
h2{font-size:clamp(26px,4.4vw,44px);font-weight:900;line-height:1.35;margin-bottom:14px}
h2 small{display:inline-block;font-size:.42em;font-weight:700;margin-left:10px;background:var(--paper);color:var(--ink);border:var(--line) solid var(--ink);border-radius:30px;padding:0 16px;vertical-align:middle;line-height:1.9}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.w70{max-width:820px}
.to{font-weight:900;font-size:19px;margin-bottom:8px}
.lead{margin-bottom:28px}
.h-s{display:inline;font-size:clamp(21px,2.8vw,28px);background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.h-s+p{margin-top:14px}
.card{background:var(--paper);border:var(--line) solid var(--ink);border-radius:22px;box-shadow:var(--sh)}
.card h3{font-size:22px;font-weight:900;letter-spacing:.08em;padding:18px 24px 6px}
.card h3 small{font-family:var(--jp);font-size:13px;font-weight:700;margin-left:10px;letter-spacing:0;color:var(--ink-2)}
.lineup{list-style:none;padding:0 24px 14px}
.lineup li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:2px dashed var(--ink)}
.lineup h4{font-size:17px;font-weight:900;line-height:1.4}
.lineup p{font-size:13px;color:var(--ink-2);line-height:1.5}
.chip{display:inline-block;font-size:12px;font-weight:700;border:2px solid var(--ink);border-radius:30px;padding:0 11px;white-space:nowrap;line-height:1.8;vertical-align:middle;color:var(--ink)}
.chip.done{background:var(--green);color:#fff}.chip.wip{background:var(--yellow)}.chip.plan{background:#fff}

.spec-row{margin-bottom:12px}
.spec{background:var(--paper);border:var(--line) solid var(--ink);border-radius:18px;box-shadow:var(--sh);padding:6px 22px}
.spec div{display:flex;gap:14px;padding:9px 0;border-top:2px dashed var(--ink)}
.spec div:first-child{border-top:0}
.spec dt{flex:0 0 56px;font-weight:900}
.spec dd{font-size:15px;line-height:1.7}
.sub{margin:clamp(34px,5vw,56px) 0 8px;text-align:center}
.sub span{display:inline-block;font-size:clamp(17px,2.2vw,22px);font-weight:900;background:var(--ink);color:var(--cream);border-radius:40px;padding:2px 28px;transform:rotate(-1deg)}
.grid{display:grid;gap:clamp(18px,3vw,34px) clamp(10px,2vw,24px)}
.grid.g5{grid-template-columns:repeat(5,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr);margin-top:30px}
.it{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:transform .25s cubic-bezier(.2,.9,.2,1)}
.it:hover{transform:translateY(-6px) rotate(-2deg)}
.it img{width:auto;max-width:100%;height:clamp(150px,21vw,250px);object-fit:contain}
.g3 .it img{height:clamp(120px,20vw,230px)}
.it figcaption{margin-top:8px;font-size:clamp(11.5px,1.3vw,14px);font-weight:700;background:var(--paper);border:2px solid var(--ink);border-radius:30px;padding:0 12px 0 3px;line-height:1.8;white-space:nowrap}
.it figcaption b{font-family:var(--en);font-weight:800;font-size:.8em;background:var(--ink);color:var(--cream);border-radius:30px;padding:1px 7px;margin-right:6px}

.socks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,36px);margin-top:26px}
.socks figure.card{padding:18px 22px 8px;text-align:center;background:#fff}
.socks figcaption{font-weight:900;font-size:17px}
.socks.sheet figure{background:#fff;border-radius:14px;padding:10px 14px}

.towels{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);margin-top:20px;align-items:start}
.tw-l .towel{max-width:1000px}
.towel{border-radius:10px;overflow:hidden;box-shadow:0 8px 22px rgba(60,20,30,.35);position:relative}
.towel:before,.towel:after{content:"";position:absolute;top:0;bottom:0;border-left:2px dashed rgba(0,0,0,.28)}
.towel:before{left:2.2%}.towel:after{right:2.2%}
.tw-s .card{overflow:hidden;padding:12px;background:#fff;max-width:1000px}
.colors{margin-top:14px;text-align:center;font-size:13px;font-weight:700}
.colors img{border:2px solid var(--ink);border-radius:12px;margin-bottom:4px}
.towels figcaption{margin-top:20px}
.towels h4{font-size:21px;font-weight:900;margin-bottom:4px}
.towels figcaption p{font-size:15px}

.sched{list-style:none;margin:22px 0 0 10px;border-left:4px solid var(--ink);max-width:760px}
.sched li{position:relative;padding:0 0 26px 30px}
.sched li:before{content:"";position:absolute;left:-12px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}
.sched li:last-child:before{background:var(--red)}
.sched .when{display:inline-block;font-weight:900;font-size:14px;background:var(--ink);color:var(--cream);border-radius:30px;padding:0 16px;line-height:1.8}
.sched h4{font-size:20px;font-weight:900;line-height:1.5;margin-top:3px}
.sched p{font-size:14.5px;color:var(--ink-2);line-height:1.7}
.more{max-width:760px;background:var(--paper);border:2px dashed var(--ink);border-radius:16px;padding:10px 20px;font-size:15px}
.consult{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.consult li{background:var(--paper);color:var(--ink);border:var(--line) solid var(--cream);border-radius:20px;padding:16px 22px;box-shadow:6px 6px 0 var(--yellow)}
.consult h4{font-size:18px;font-weight:900}
.consult p{font-size:14.5px;line-height:1.75}
.notes{margin-top:34px;font-size:12.5px;line-height:1.8;opacity:.8}
.foot{background:var(--cream);border-top:var(--line) solid var(--ink);text-align:center;padding:34px var(--gut) 40px;font-size:14px;font-weight:700}
.foot img{height:30px;width:auto;margin:0 auto 10px}
.foot a{margin:0 2px}
.foot .c{font-size:12px;font-weight:500;color:var(--ink-2);margin-top:6px}

@media (max-width:820px){
  .sp{display:inline}
  body{font-size:15px}
  .two,.towels{grid-template-columns:1fr}
  .grid.g5{grid-template-columns:repeat(2,1fr)}
  .grid.g3{grid-template-columns:repeat(2,1fr)}
  .it img{height:clamp(170px,48vw,260px)}
  .g3 .it img{height:clamp(110px,34vw,200px)}
  .consult{grid-template-columns:1fr}
  .socks{grid-template-columns:1fr}
  .hero-in{border-radius:22px;box-shadow:5px 5px 0 var(--ink)}
  .floats .fl:nth-child(n+6){display:none}
  .top .brand img{height:20px}
  .lineup li{flex-wrap:wrap;gap:4px 12px}
  .hero-sub br.sp+*{display:none}
}