/* 制作例 #overview — 架空の宿3軒の改善前／提案。外枠は r3 の tokens、宿の画面の中は宿ごとの意匠（DESIGN.md「制作例 #overview」節）。 */
@font-face{font-family:"Case Mincho";src:url("assets/case-mincho.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Case Gothic";src:url("assets/case-gothic.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------------------------------------------------------------- 外枠 */
.cases{padding-block:105px 100px}.cases:focus{outline:none}
.cases .section-heading{margin-bottom:22px}
.cases-disclosure{font-size:13px;line-height:1.9;color:var(--quiet);margin-bottom:40px;max-width:62em}
.case-picker{display:flex;border-bottom:1px solid var(--line);margin-bottom:34px}
.case-picker button{display:grid;gap:3px;justify-items:start;text-align:left;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 44px 14px 0;min-height:64px;color:var(--quiet)}
.case-picker strong{font-size:18px;font-weight:600;letter-spacing:.02em}.case-picker span{font-size:12px;line-height:1.6}
.case-picker button:hover{color:var(--ink)}
.case-picker button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.case-picker button:focus-visible{outline-offset:2px}
.case+.case{margin-top:80px}
.case-title{font-size:22px;margin-bottom:22px}
.cases-js .case-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cases-js .case+.case{margin-top:0}

.compare{--pos:50%;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:20px 44px;align-items:end}
.device{min-width:0}
.device-label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:11px;letter-spacing:.14em;color:var(--quiet);line-height:1;margin-bottom:8px}
.frame{position:relative}
.screen{position:relative;container-type:inline-size;overflow:hidden;background:#d9ddd8;border:1px solid var(--ink);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cases-js .screen{cursor:ew-resize}
.screen.pc{aspect-ratio:16/10}.screen.sp{aspect-ratio:9/16}
.layer{position:absolute;inset:0;overflow:hidden}
.layer.before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px #243b3b80;pointer-events:none}
.knob{position:absolute;top:50%;left:clamp(22px,var(--pos),calc(100% - 22px));width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;background:var(--ink);color:var(--paper);box-shadow:0 6px 16px -6px #10292599;cursor:ew-resize;touch-action:none}
html:not(.cases-js) .knob{display:none}
.knob svg{width:26px;height:14px;stroke-width:1.6}
.knob:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.device-sp .knob{left:clamp(18px,var(--pos),calc(100% - 18px));width:36px;height:36px;margin:-18px 0 0 -18px}
.side-tag{font-size:11px;letter-spacing:.08em;padding:5px 8px;border:1px solid var(--ink);transition:opacity .2s}
.side-tag.is-before{color:var(--ink);background:var(--paper)}
.side-tag.is-after{color:var(--paper);background:var(--ink)}
.compare.only-after .side-tag.is-before,.compare.only-before .side-tag.is-after{opacity:.28}
.compare-control{grid-column:1/-1;display:flex;align-items:center;gap:30px;margin-top:4px}
.compare-control button{background:none;border:0;border-bottom:1px solid transparent;min-height:44px;padding:8px 0;font-size:14px;color:var(--quiet)}
.compare-control button:hover{color:var(--ink)}
.compare-control button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
.compare-control p{margin-left:auto;font-size:12px;line-height:1.7;color:var(--quiet)}
.compare-control:not(.is-live){display:none}
.case-changes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;margin:44px 0 0;border-top:1px solid var(--line)}
.case-changes>div{padding-top:22px}
.case-changes dt{font-size:16px;font-weight:600;line-height:1.6;margin-bottom:8px}
.case-changes dd{margin:0;font-size:14px;line-height:1.95;color:var(--quiet)}
.cases .case-takeaway{display:flex;align-items:center;justify-content:space-between;gap:55px;padding-top:34px;margin-top:64px;border-top:1px solid var(--line)}
.cases .case-takeaway h3{font-size:25px;line-height:1.6;margin-bottom:17px}
.cases .case-takeaway p{font-size:14px;color:var(--quiet)}
.cases .case-takeaway>.text-link{flex-shrink:0;font-size:14px}

/* ---------------------------------------------------------------- 宿の画面（PC=1280×800、スマホ=390×693 の設計寸法を --u で縮める） */
.mk{position:absolute;inset:0;overflow:hidden;--u:calc(100cqw / 1280);font-family:"Noto Sans JP",sans-serif;line-height:1.6;color:#2b2b2b;text-align:left}
.sp .mk{--u:calc(100cqw / 390)}
.mk *{margin:0;padding:0;box-sizing:border-box;list-style:none;font-weight:inherit;letter-spacing:inherit;line-height:inherit}
.mk img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.mk svg{fill:none;stroke:currentColor;stroke-width:1.5}

/* 改善前 1 — 森の湯宿: 幅固定の古い表組み。スマホでは PC の画面がそのまま縮む */
.b1{background:#24402f;background-image:repeating-linear-gradient(45deg,#2a4836 0 calc(var(--u)*6),#24402f calc(var(--u)*6) calc(var(--u)*12));font-size:calc(var(--u)*12);color:#333}
.sp .b1{--u:calc(100cqw / 880)}
.b1-page{width:calc(var(--u)*880);min-height:100%;margin:0 auto;background:#fff;border-inline:1px solid #8a9a8e}
.b1-head{display:flex;justify-content:space-between;align-items:center;height:calc(var(--u)*104);padding:0 calc(var(--u)*22);background:linear-gradient(#3d6b4b,#1d3a27)}
.b1-logo b{display:block;font-family:"Case Mincho",serif;font-weight:700;font-size:calc(var(--u)*36);letter-spacing:.1em;color:#f6e7a6;text-shadow:calc(var(--u)*2) calc(var(--u)*2) 0 #000}
.b1-logo span{display:block;margin-top:calc(var(--u)*4);font-size:calc(var(--u)*12);color:#dfe8d6}
.b1-tel{background:#fff;border:calc(var(--u)*2) solid #c33;padding:calc(var(--u)*6) calc(var(--u)*14);text-align:center;color:#c33}
.b1-tel span{display:block;font-size:calc(var(--u)*10);color:#555}.b1-tel b{font-size:calc(var(--u)*18);font-weight:700}
.b1-nav{display:flex;background:linear-gradient(#f6f6f6,#cfcfcf);border-block:1px solid #999}
.b1-nav li{flex:1;text-align:center;padding:calc(var(--u)*9) 0;border-right:1px solid #aaa;font-size:calc(var(--u)*12.5);font-weight:700;color:#333}
.b1-ticker{padding:calc(var(--u)*5) calc(var(--u)*12);background:#fffbd6;color:#c00;font-size:calc(var(--u)*11.5);border-bottom:1px dashed #d9c76a;white-space:nowrap;overflow:hidden}
.b1-main{display:flex;gap:calc(var(--u)*16);padding:calc(var(--u)*16)}
.b1-left{flex:1;min-width:0}
.b1-slide{position:relative;height:calc(var(--u)*300);border:1px solid #999;padding:calc(var(--u)*4);background:#eee}
.b1-slide img{object-position:50% 62%}
.b1-arrow{position:absolute;top:50%;margin-top:calc(var(--u)*-14);font-size:calc(var(--u)*20);color:#fff;text-shadow:0 0 calc(var(--u)*3) #000}
.b1-l{left:calc(var(--u)*12)}.b1-r{right:calc(var(--u)*12)}
.b1-dots{position:absolute;left:0;right:0;bottom:calc(var(--u)*10);text-align:center;font-size:calc(var(--u)*10);color:#fff;text-shadow:0 0 calc(var(--u)*3) #000}
.b1-h{margin:calc(var(--u)*16) 0 calc(var(--u)*8);padding-bottom:calc(var(--u)*4);border-bottom:calc(var(--u)*2) solid #2f5c3d;font-size:calc(var(--u)*16);font-weight:700;color:#2f5c3d}
.b1-p{font-size:calc(var(--u)*12);line-height:1.8}
.b1-right{width:calc(var(--u)*230);flex:none}
.b1-banner{height:calc(var(--u)*46);display:flex;align-items:center;justify-content:center;margin-bottom:calc(var(--u)*8);background:linear-gradient(#fdfdfd,#dde5dc);border:1px solid #9aab9c;border-radius:calc(var(--u)*4);font-size:calc(var(--u)*13);font-weight:700;color:#2f5c3d}
.b1-banner.b1-red{background:linear-gradient(#e8574a,#a71f16);border-color:#801010;color:#fff;font-size:calc(var(--u)*15)}
.b1-news{border:1px solid #9aab9c;margin-top:calc(var(--u)*12)}
.b1-news>p{background:#2f5c3d;color:#fff;padding:calc(var(--u)*4) calc(var(--u)*8);font-size:calc(var(--u)*12);font-weight:700}
.b1-news ul{padding:calc(var(--u)*4) calc(var(--u)*8)}
.b1-news li{padding:calc(var(--u)*5) 0;border-bottom:1px dotted #bbb;font-size:calc(var(--u)*11)}
.b1-news li span{display:block;color:#888;font-size:calc(var(--u)*10)}
.b1-news i{margin-left:calc(var(--u)*4);padding:0 calc(var(--u)*3);background:#e33;color:#fff;font-style:normal;font-size:calc(var(--u)*9)}

/* 提案 1 — 森の湯宿「湯の窓」: 深い緑の窓枠に縦長の湯。縦書きの宿名と一言、入口は一つ */
.a1{display:grid;grid-template-columns:calc(var(--u)*170) calc(var(--u)*456) minmax(0,1fr);background:#1c3029;color:#efeadd}
.a1-bar{display:none}
.a1-name{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--u)*52) 0 calc(var(--u)*46)}
.a1-name b{writing-mode:vertical-rl;font-family:"Case Mincho",serif;font-weight:400;font-size:calc(var(--u)*62);letter-spacing:.2em;line-height:1}
.a1-region{writing-mode:vertical-rl;font-size:calc(var(--u)*12);letter-spacing:.32em;color:#c7cdbb}
.a1-en{font-size:calc(var(--u)*12);letter-spacing:.06em;border-bottom:1px solid #b9a978;padding-bottom:calc(var(--u)*3)}
.a1-window{margin:calc(var(--u)*40) 0;padding:calc(var(--u)*10);border:1px solid #66806c;min-height:0}
.a1-side{position:relative;display:flex;flex-direction:column;padding:calc(var(--u)*44) calc(var(--u)*56) calc(var(--u)*50) calc(var(--u)*66);min-width:0}
.a1-nav{display:flex;justify-content:flex-end;gap:calc(var(--u)*30);font-size:calc(var(--u)*13);letter-spacing:.12em;color:#cdc7b3}
.a1-copy{writing-mode:vertical-rl;align-self:flex-start;height:calc(var(--u)*390);margin-top:calc(var(--u)*30);font-family:"Case Mincho",serif;font-size:calc(var(--u)*46);line-height:1.75;letter-spacing:.16em}
.a1-foot{margin-top:auto}
.a1-lead{font-size:calc(var(--u)*16);line-height:1.95;margin-bottom:calc(var(--u)*22);color:#e4e0d2}
.a1-facts{display:flex;border-top:1px solid #4f6858;margin-bottom:calc(var(--u)*26)}
.a1-facts>div{flex:1;padding-top:calc(var(--u)*12)}
.a1-facts dt{font-size:calc(var(--u)*11);letter-spacing:.14em;color:#a9b8a8}
.a1-facts dd{margin-top:calc(var(--u)*4);font-family:"Case Mincho",serif;font-size:calc(var(--u)*18)}
.a1-cta{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*18) calc(var(--u)*2);border-block:1px solid #c2ad74;font-size:calc(var(--u)*17);letter-spacing:.08em;color:#f1e6c4}
.a1-cta svg{width:calc(var(--u)*30);height:calc(var(--u)*20)}
.sp .a1{display:block}
.sp .a1-bar{display:flex;justify-content:space-between;align-items:center;height:calc(var(--u)*60);padding:0 calc(var(--u)*20);font-family:"Case Mincho",serif;font-size:calc(var(--u)*21);letter-spacing:.14em}
.sp .a1-bar b{font-weight:400}
.sp .a1-bar i{width:calc(var(--u)*24);height:calc(var(--u)*9);border-block:1px solid #efeadd}
.sp .a1-name,.sp .a1-nav{display:none}
.sp .a1-window{position:absolute;left:calc(var(--u)*20);top:calc(var(--u)*60);width:calc(var(--u)*246);height:calc(var(--u)*382);margin:0;padding:calc(var(--u)*6)}
.sp .a1-side{position:absolute;inset:calc(var(--u)*60) 0 0;padding:0 calc(var(--u)*20) calc(var(--u)*22)}
.sp .a1-copy{position:absolute;right:calc(var(--u)*22);top:calc(var(--u)*10);height:calc(var(--u)*330);margin:0;font-size:calc(var(--u)*27)}
.sp .a1-lead{font-size:calc(var(--u)*13.5);margin-bottom:calc(var(--u)*14)}
.sp .a1-facts{margin-bottom:calc(var(--u)*16)}
.sp .a1-facts dt{font-size:calc(var(--u)*10)}.sp .a1-facts dd{font-size:calc(var(--u)*15)}
.sp .a1-cta{padding:calc(var(--u)*14) calc(var(--u)*2);font-size:calc(var(--u)*15)}
.sp .a1-cta svg{width:calc(var(--u)*24);height:calc(var(--u)*16)}

/* 改善前 2 — 町の小宿: 暗い大きなスライドに「ようこそ」「WELCOME」。館内の写真は丸い小窓とスライドの奥で、予約も見えない */
.b2{background:#fff;color:#444}
.b2-head{display:flex;justify-content:space-between;align-items:center;height:calc(var(--u)*76);padding:0 calc(var(--u)*40)}
.b2-logo{font-size:calc(var(--u)*22);font-weight:300;letter-spacing:.2em;color:#333;line-height:1.3}
.b2-logo span{display:block;font-size:calc(var(--u)*9);letter-spacing:.36em;color:#999}
.b2-right{display:flex;align-items:center;gap:calc(var(--u)*28);font-size:calc(var(--u)*13);color:#555}
.b2-menu{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*5);font-size:calc(var(--u)*9);letter-spacing:.2em}
.b2-menu i{width:calc(var(--u)*28);height:calc(var(--u)*14);border-block:calc(var(--u)*2) solid #333;background:linear-gradient(#333,#333) center/100% calc(var(--u)*2) no-repeat}
.b2-hero{position:relative;height:calc(var(--u)*520)}
.b2-hero img{filter:brightness(.5) saturate(.85)}
.b2-hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-shadow:0 calc(var(--u)*2) calc(var(--u)*10) #0009}
.b2-hero-copy b{font-family:"Case Mincho",serif;font-weight:400;font-size:calc(var(--u)*56);letter-spacing:.3em;line-height:1.3}
.b2-hero-copy span{margin-top:calc(var(--u)*14);font-size:calc(var(--u)*13);letter-spacing:.4em}
.b2-arrow{position:absolute;top:50%;margin-top:calc(var(--u)*-34);font-size:calc(var(--u)*52);line-height:1;color:#ffffffb0}
.b2-l{left:calc(var(--u)*30)}.b2-r{right:calc(var(--u)*30)}
.b2-dots{position:absolute;left:0;right:0;bottom:calc(var(--u)*22);display:flex;justify-content:center;gap:calc(var(--u)*10)}
.b2-dots i{width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;background:#ffffff80}.b2-dots i:first-child{background:#fff}
.b2-concept{text-align:center;padding:calc(var(--u)*34) 0 calc(var(--u)*22)}
.b2-concept b{display:block;font-size:calc(var(--u)*26);font-weight:300;letter-spacing:.32em;color:#555;line-height:1.3}
.b2-concept span{font-size:calc(var(--u)*11);letter-spacing:.2em;color:#999}
.b2-concept p{margin-top:calc(var(--u)*14);font-size:calc(var(--u)*13);color:#777}
.b2-icons{display:flex;justify-content:center;gap:calc(var(--u)*90)}
.b2-icons p{text-align:center;font-size:calc(var(--u)*13)}
.b2-icons img,.b2-icons i{display:block;width:calc(var(--u)*120);height:calc(var(--u)*120);border-radius:50%;margin:0 auto calc(var(--u)*8);background:#e9e5dc}
.sp .b2-head{height:calc(var(--u)*58);padding:0 calc(var(--u)*16)}
.sp .b2-logo{font-size:calc(var(--u)*17)}.sp .b2-tel{display:none}
.sp .b2-hero{height:calc(var(--u)*470)}
.sp .b2-hero-copy b{font-size:calc(var(--u)*34)}.sp .b2-hero-copy span{font-size:calc(var(--u)*9);letter-spacing:.3em}
.sp .b2-arrow{font-size:calc(var(--u)*32);margin-top:calc(var(--u)*-20)}.sp .b2-l{left:calc(var(--u)*10)}.sp .b2-r{right:calc(var(--u)*10)}
.sp .b2-concept{padding:calc(var(--u)*24) calc(var(--u)*20) calc(var(--u)*16)}
.sp .b2-concept b{font-size:calc(var(--u)*20)}.sp .b2-concept p{font-size:calc(var(--u)*12)}
.sp .b2-icons{gap:calc(var(--u)*22)}.sp .b2-icons img,.sp .b2-icons i{width:calc(var(--u)*90);height:calc(var(--u)*90)}

/* 提案 2 — 町の小宿「宿の中へ」: 格子戸から夕ごはんまで、建物の順に歩く（館内を歩く演出の考え方だけを借りる）。
   写真は少し寄りながら入れ替わり、町家の間取りの線の上を点が進む。動きは CSS だけ（16 秒で一巡）。画面外では止め、reduced motion では最初の場所で止まる */
.a2w{--w-paper:#ece3d3;--w-ink:#2b2520;--w-quiet:#6a5f50;--w-line:#cdbfa9;--w-red:#9a3f2b;background:var(--w-paper);color:var(--w-ink)}
.w-top{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*82);display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--u)*64);border-bottom:1px solid var(--w-line)}
.w-mark span{display:block;font-size:calc(var(--u)*11);letter-spacing:.14em;color:var(--w-quiet)}
.w-mark b{display:block;font-family:"Case Gothic",sans-serif;font-weight:700;font-size:calc(var(--u)*28);letter-spacing:.08em;line-height:1.25}
.w-nav{display:flex;align-items:center;gap:calc(var(--u)*30);font-size:calc(var(--u)*13);letter-spacing:.1em}
.w-book{padding:calc(var(--u)*10) calc(var(--u)*20);border:1px solid var(--w-ink)}
.w-menu{display:none}
.w-intro{position:absolute;left:calc(var(--u)*64);top:calc(var(--u)*124);width:calc(var(--u)*340)}
.w-title{font-family:"Case Mincho",serif;font-size:calc(var(--u)*50);line-height:1.3;letter-spacing:.08em}
.w-sub{margin-top:calc(var(--u)*14);font-size:calc(var(--u)*14);color:var(--w-quiet)}
.w-steps{position:absolute;left:calc(var(--u)*64);top:calc(var(--u)*284);width:calc(var(--u)*150)}
.w-steps li{display:flex;gap:calc(var(--u)*14);align-items:baseline;padding:calc(var(--u)*8) 0;font-family:"Case Mincho",serif;font-size:calc(var(--u)*16);color:#9b8f80}
.w-steps li.w-s1{color:var(--w-ink)}
.w-steps span{font-family:"Noto Sans JP",sans-serif;font-size:calc(var(--u)*10);letter-spacing:.1em}
.w-plan{position:absolute;left:calc(var(--u)*226);top:calc(var(--u)*262);width:calc(var(--u)*168);height:calc(var(--u)*324);overflow:visible}
.w-plan path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.w-wall{stroke:#a8987f;stroke-width:2}
.w-thin{stroke:#c7b8a1;stroke-width:1.2}
.w-tree{fill:none;stroke:#8d9a72;stroke-width:1.8}
.w-street{stroke:#a8987f;stroke-width:1.4;stroke-dasharray:2 7}
.w-route{stroke:#b9a88f;stroke-width:2;stroke-dasharray:3 7}
.w-walked{stroke:var(--w-red);stroke-width:3.2;stroke-dasharray:453;stroke-dashoffset:453}
.w-dot{fill:var(--w-red);stroke:none;transform:translate(215px,490px)}
.w-halo{fill:#9a3f2b33}
.w-card{position:absolute;left:calc(var(--u)*444);right:calc(var(--u)*64);top:calc(var(--u)*114);height:calc(var(--u)*562);overflow:hidden;background:#3a332b}
.w-ph{position:absolute;inset:0;opacity:0;transform-origin:50% 60%}
.w-ph.w-p1{opacity:1}
.w-p1{object-position:50% 72%}.w-p2{object-position:50% 62%}.w-p3{object-position:50% 56%}.w-p4{object-position:58% 50%}.w-p5{object-position:50% 62%}
.w-plate{position:absolute;left:0;bottom:0;width:calc(var(--u)*360);height:calc(var(--u)*126);background:var(--w-paper)}
.w-tx{position:absolute;inset:calc(var(--u)*20) calc(var(--u)*26);opacity:0;font-size:calc(var(--u)*13.5);color:var(--w-quiet)}
.w-tx.w-t1{opacity:1}
.w-tx span{display:block;font-size:calc(var(--u)*10);letter-spacing:.16em;color:var(--w-red)}
.w-tx b{display:block;margin:calc(var(--u)*4) 0 calc(var(--u)*6);font-family:"Case Mincho",serif;font-weight:400;font-size:calc(var(--u)*30);line-height:1.25;color:var(--w-ink)}
.w-foot{position:absolute;left:calc(var(--u)*64);right:calc(var(--u)*64);top:calc(var(--u)*700);display:flex;justify-content:space-between;align-items:center}
.w-lead{font-size:calc(var(--u)*14);line-height:1.8;color:var(--w-quiet)}
.w-cta{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*60);min-width:calc(var(--u)*330);padding:calc(var(--u)*20) calc(var(--u)*26);background:var(--w-ink);color:#f4ede1;font-family:"Case Gothic",sans-serif;font-weight:700;font-size:calc(var(--u)*17)}
.w-cta svg{width:calc(var(--u)*28);height:calc(var(--u)*18);stroke-width:2}
@keyframes w-photo{0%{opacity:0;transform:scale(1.03)}5%{opacity:1}20%{opacity:1}25%{opacity:0;transform:scale(1.13)}100%{opacity:0;transform:scale(1.13)}}
@keyframes w-text{0%{opacity:0;transform:translateY(calc(var(--u)*6))}5%{opacity:1;transform:none}19%{opacity:1}21%,100%{opacity:0}}
@keyframes w-step{0%,19%{color:#2b2520}21%,100%{color:#9b8f80}}
@keyframes w-dot{0%,16%{transform:translate(215px,490px)}20%,36%{transform:translate(215px,340px)}40%,56%{transform:translate(165px,255px)}60%,76%{transform:translate(120px,165px)}80%,97%{transform:translate(120px,62px)}100%{transform:translate(215px,490px)}}
@keyframes w-walk{0%,16%{stroke-dashoffset:453}20%,36%{stroke-dashoffset:303}40%,56%{stroke-dashoffset:204}60%,76%{stroke-dashoffset:104}80%,97%{stroke-dashoffset:0}100%{stroke-dashoffset:453}}
.a2w .w-ph,.a2w .w-tx,.a2w .w-steps li{animation:16s linear -.9s infinite both}
.a2w .w-ph{animation-name:w-photo}.a2w .w-tx{animation-name:w-text;animation-timing-function:ease-out}.a2w .w-steps li{animation-name:w-step}
.a2w .w-p2,.a2w .w-t2,.a2w .w-s2{animation-delay:2.3s}
.a2w .w-p3,.a2w .w-t3,.a2w .w-s3{animation-delay:5.5s}
.a2w .w-p4,.a2w .w-t4,.a2w .w-s4{animation-delay:8.7s}
.a2w .w-p5,.a2w .w-t5,.a2w .w-s5{animation-delay:11.9s}
.a2w .w-dot{animation:w-dot 16s cubic-bezier(.45,0,.2,1) -.9s infinite both}
.a2w .w-walked{animation:w-walk 16s cubic-bezier(.45,0,.2,1) -.9s infinite both}
.cases-js .case:not(.in-view) .a2w *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.a2w .w-ph,.a2w .w-tx,.a2w .w-steps li,.a2w .w-dot,.a2w .w-walked{animation:none}}
.sp .w-top{height:calc(var(--u)*58);padding:0 calc(var(--u)*20)}
.sp .w-mark span{font-size:calc(var(--u)*9)}.sp .w-mark b{font-size:calc(var(--u)*20)}
.sp .w-nav{display:none}
.sp .w-menu{display:block;width:calc(var(--u)*24);height:calc(var(--u)*9);border-block:1px solid var(--w-ink)}
.sp .w-intro{left:calc(var(--u)*20);right:calc(var(--u)*90);top:calc(var(--u)*78);width:auto}
.sp .w-title{font-size:calc(var(--u)*30)}.sp .w-sub{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*12)}
.sp .w-plan{left:auto;right:calc(var(--u)*22);top:calc(var(--u)*68);width:calc(var(--u)*44);height:calc(var(--u)*85)}
.sp .w-card{left:calc(var(--u)*20);right:calc(var(--u)*20);top:calc(var(--u)*166);height:calc(var(--u)*346)}
.sp .w-plate{width:calc(var(--u)*232);height:calc(var(--u)*92)}
.sp .w-tx{inset:calc(var(--u)*13) calc(var(--u)*16);font-size:calc(var(--u)*11)}
.sp .w-tx span{font-size:calc(var(--u)*9)}.sp .w-tx b{margin:calc(var(--u)*2) 0 calc(var(--u)*3);font-size:calc(var(--u)*21)}
.sp .w-steps{left:calc(var(--u)*20);right:calc(var(--u)*20);top:calc(var(--u)*524);width:auto;display:flex;justify-content:space-between}
.sp .w-steps li{flex-direction:column;align-items:center;gap:calc(var(--u)*2);padding:0;font-size:calc(var(--u)*12.5)}
.sp .w-steps span{font-size:calc(var(--u)*8.5)}
.sp .w-foot{left:calc(var(--u)*20);right:calc(var(--u)*20);top:auto;bottom:calc(var(--u)*22);display:block}
.sp .w-lead{display:none}
.sp .w-cta{min-width:0;padding:calc(var(--u)*17) calc(var(--u)*20);font-size:calc(var(--u)*16)}
.sp .w-cta svg{width:calc(var(--u)*24);height:calc(var(--u)*16)}

/* 改善前 3 — 山あいの宿: 小さな写真と各ページへの案内。スマホではメニューが縦に積まれて写真が下へ */
.b3{background:#e9e3d6;color:#4a4036}
.b3-page{width:calc(var(--u)*960);min-height:100%;margin:0 auto;background:#fbf8f1;box-shadow:0 0 calc(var(--u)*10) #0000002e}
.b3-head{display:flex;justify-content:space-between;align-items:flex-end;padding:calc(var(--u)*26) calc(var(--u)*30) calc(var(--u)*14);border-bottom:calc(var(--u)*3) double #b9a98b}
.b3-logo{font-family:"Case Mincho",serif;font-size:calc(var(--u)*26);letter-spacing:.08em;color:#5a4630;line-height:1.3}
.b3-size{font-size:calc(var(--u)*11);color:#777}
.b3-size i{display:inline-block;margin-left:calc(var(--u)*4);padding:0 calc(var(--u)*5);border:1px solid #aaa;background:#fff;font-style:normal}
.b3-size .b3-on{background:#7a6a50;color:#fff}
.b3-nav{display:flex;padding:calc(var(--u)*10) calc(var(--u)*30);font-size:calc(var(--u)*13)}
.b3-nav span{padding:0 calc(var(--u)*14);border-left:1px solid #bbb;color:#2a5db0;text-decoration:underline}
.b3-nav span:first-child{padding-left:0;border:0}
.b3-main{display:flex;gap:calc(var(--u)*28);padding:calc(var(--u)*18) calc(var(--u)*30)}
.b3-left{flex:1;min-width:0}
.b3-photo{width:calc(var(--u)*560);height:calc(var(--u)*360);padding:calc(var(--u)*5);border:1px solid #bbb;background:#fff;box-shadow:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*6) #0000004d}
.b3-h{margin:calc(var(--u)*18) 0 calc(var(--u)*8);font-size:calc(var(--u)*18);font-weight:700;color:#5a4630}
.b3-p{font-size:calc(var(--u)*13);line-height:1.9}
.b3-side{width:calc(var(--u)*270);flex:none;font-size:calc(var(--u)*12)}
.b3-side-h{margin-bottom:calc(var(--u)*6);padding:calc(var(--u)*5) calc(var(--u)*8);background:#d9cfbb;font-size:calc(var(--u)*13);font-weight:700}
.b3-side ul{margin-bottom:calc(var(--u)*18)}
.b3-side li{padding:calc(var(--u)*6) 0;border-bottom:1px dashed #c8bda8}
.b3-link{color:#2a5db0;text-decoration:underline}
.sp .b3-page{width:auto;box-shadow:none}
.sp .b3-head{padding:calc(var(--u)*14) calc(var(--u)*14) calc(var(--u)*10)}
.sp .b3-logo{font-size:calc(var(--u)*20)}.sp .b3-size,.sp .b3-side{display:none}
.sp .b3-nav{flex-direction:column;gap:calc(var(--u)*6);padding:calc(var(--u)*10) calc(var(--u)*14)}
.sp .b3-nav span,.sp .b3-nav span:first-child{display:block;padding:calc(var(--u)*11) calc(var(--u)*12);border:1px solid #bbb;background:linear-gradient(#fff,#e9e4da);color:#4a4036;text-decoration:none;font-size:calc(var(--u)*14)}
.sp .b3-main{display:block;padding:calc(var(--u)*8) calc(var(--u)*14)}
.sp .b3-photo{width:auto;height:calc(var(--u)*210)}
.sp .b3-h{font-size:calc(var(--u)*16)}.sp .b3-p{font-size:calc(var(--u)*12)}

/* 提案 3 — 山あいの宿「庭の間」: 白い紙と細い線。写真を引き戸の三枚に割り、条件を写真の横に */
.a3{background:#f6f4ee;color:#2e3a2f}
.a3-top{display:flex;justify-content:space-between;align-items:center;height:calc(var(--u)*88);padding:0 calc(var(--u)*56);border-bottom:1px solid #d8d1c2}
.a3-name{font-family:"Case Mincho",serif;font-size:calc(var(--u)*24);letter-spacing:.26em}
.a3-nav{display:flex;align-items:center;gap:calc(var(--u)*34);font-size:calc(var(--u)*13);letter-spacing:.08em}
.a3-vacancy{padding:calc(var(--u)*10) calc(var(--u)*18);border:1px solid #2e3a2f}
.a3-photo{position:absolute;left:calc(var(--u)*56);top:calc(var(--u)*128);width:calc(var(--u)*700);height:calc(var(--u)*622)}
.a3-photo img{object-position:64% 50%}
.a3-photo i{position:absolute;top:0;bottom:0;width:calc(var(--u)*4);margin-left:calc(var(--u)*-2);background:#f6f4ee}
.a3-photo i:nth-of-type(1){left:33.333%}.a3-photo i:nth-of-type(2){left:66.666%}
.a3-body{position:absolute;left:calc(var(--u)*824);right:calc(var(--u)*56);top:calc(var(--u)*176)}
.a3-copy{margin-bottom:calc(var(--u)*44);font-family:"Case Mincho",serif;font-size:calc(var(--u)*40);line-height:1.75;letter-spacing:.06em}
.a3-facts{margin-bottom:calc(var(--u)*40);border-top:1px solid #cfc8b8}
.a3-facts>div{display:flex;align-items:baseline;padding:calc(var(--u)*16) 0;border-bottom:1px solid #cfc8b8}
.a3-facts dt{width:calc(var(--u)*92);flex:none;font-size:calc(var(--u)*13);letter-spacing:.12em;color:#646a57}
.a3-facts dd{font-size:calc(var(--u)*17)}
.a3-cta{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*22) calc(var(--u)*26);background:#56653f;color:#fff;font-size:calc(var(--u)*17);letter-spacing:.06em}
.a3-cta svg{width:calc(var(--u)*30);height:calc(var(--u)*20)}
.a3-note{margin-top:calc(var(--u)*14);font-size:calc(var(--u)*12);color:#646a57}
.sp .a3-top{height:calc(var(--u)*58);padding:0 calc(var(--u)*18)}
.sp .a3-name{font-size:calc(var(--u)*18);letter-spacing:.2em}
.sp .a3-nav>span:not(.a3-vacancy){display:none}
.sp .a3-vacancy{padding:calc(var(--u)*7) calc(var(--u)*11);font-size:calc(var(--u)*11)}
.sp .a3-photo{left:0;top:calc(var(--u)*58);width:100%;height:calc(var(--u)*252)}
.sp .a3-photo i{width:calc(var(--u)*3);margin-left:calc(var(--u)*-1.5)}
.sp .a3-body{left:calc(var(--u)*20);right:calc(var(--u)*20);top:calc(var(--u)*336)}
.sp .a3-copy{margin-bottom:calc(var(--u)*16);font-size:calc(var(--u)*24)}
.sp .a3-facts{margin-bottom:calc(var(--u)*18)}
.sp .a3-facts>div{padding:calc(var(--u)*9) 0}
.sp .a3-facts dt{width:calc(var(--u)*62);font-size:calc(var(--u)*11)}.sp .a3-facts dd{font-size:calc(var(--u)*14)}
.sp .a3-cta{padding:calc(var(--u)*16) calc(var(--u)*18);font-size:calc(var(--u)*15)}
.sp .a3-cta svg{width:calc(var(--u)*24);height:calc(var(--u)*16)}
.sp .a3-note{display:none}

/* 光の劇場の終わり: 光が形になる「ひとつの宿の画面」に、町の小宿の「宿の中へ」（館内を歩く）を映す。styles.css の位置・拡大・不透明度は残し、
   上の細い帯（宿の名前と「架空の宿による制作例」）＋画面の比に。歩くのは窓が見えてから（.proj-live、cases.js）、戻ると最初から */
.projection-window{display:block;width:min(82%,1050px,calc(104svh - 56px));height:auto;max-height:none;background:#ece3d3}
.proj-bar{display:flex;justify-content:space-between;gap:16px;padding:9px 16px;font-size:11px;line-height:1.4;letter-spacing:.06em;color:#6a5f50;background:#f6f1e7;border-bottom:1px solid #d9cdb9}
.proj-bar span:first-child{font-weight:600;color:#2b2520}
.proj-screen{position:relative;container-type:inline-size;overflow:hidden;aspect-ratio:16/10}
.proj-sp{display:none;aspect-ratio:9/16}
.projection-window:not(.proj-live) .a2w *{animation:none}

/* ---------------------------------------------------------------- 幅 */
@media(max-width:1100px){.compare{grid-template-columns:minmax(0,1fr) minmax(200px,250px);gap:18px 30px}.case-changes{gap:0 28px}}
@media(max-width:1000px){.cases .case-takeaway{display:block}.cases .case-takeaway>.text-link{margin-top:24px}}
@media(max-width:700px){
 .projection-window{width:min(calc(100% - 64px),calc(34svh - 18px));height:auto}
 .proj-pc{display:none}.proj-sp{display:block}
 .proj-bar{padding:7px 10px;font-size:10px}
 .cases{padding-block:62px 60px}
 .cases .section-heading{margin-bottom:16px}.cases .section-heading>p{text-wrap:pretty}.cases .section-heading>p br{display:none}
 .cases-disclosure{font-size:12px;margin-bottom:26px}
 .case-picker{margin-inline:-20px;padding-inline:20px;overflow-x:auto;scrollbar-width:none;margin-bottom:26px}
 .case-picker::-webkit-scrollbar{display:none}
 .case-picker button{flex:none;padding:10px 22px 12px 0;min-height:58px}
 .case-picker strong{font-size:16px}.case-picker span{font-size:11px}
 .compare{grid-template-columns:minmax(0,1fr);gap:22px}
 .device-sp{order:-1;width:min(270px,78%);justify-self:center}
 .compare-control{order:1;justify-content:space-between;gap:12px;margin-top:-4px}
 .compare-control p{display:none}
 .compare-control button{font-size:14px;flex:1}
 .device-pc{order:2}
 .side-tag{font-size:10px;padding:4px 6px}
 .device-pc .knob{left:clamp(18px,var(--pos),calc(100% - 18px));width:36px;height:36px;margin:-18px 0 0 -18px}
 .case-changes{grid-template-columns:minmax(0,1fr);margin-top:30px}
 .case-changes>div{padding-block:18px 2px}
 .case-changes>div+div{border-top:1px solid var(--line);margin-top:16px}
 .case-changes dt{font-size:15px}.case-changes dd{font-size:14px}
 .cases .case-takeaway{margin-top:40px;padding-top:26px}
 .cases .case-takeaway h3{font-size:23px}.cases .case-takeaway p br{display:none}
 .case+.case{margin-top:56px}
}
@media(prefers-reduced-motion:reduce){.side-tag{transition:none}}