/* 山の湯宿 しじま（制作の見本）— アフター版
   「私っぽい？」の添削（やわらかい・親しみやすい・洗練された／全項目 度合い5）を反映。修正の指示は _watashippoi/screens/20261111-shijima-yado/shuusei-prompt.md
   変えた事：節ごとに主役の写真1枚を大きく／節の入り方を変える／線と格子を和紙の札に／ちぎった和紙の境目を形違いで／明るい地3色を見分けられる色に／暗い地は夜の藍とあたたかい深い苔／差し色は行灯の灯り1色／見出しの強弱と文節の改行
   残した事：最初の画面・行灯のボタン・写真の端のふわっとしたぼかし・宿を営む2人の構図・大きな38,000・地図と間取り図・ロゴ・暗い地2か所・1書体 */
:root{
  --washi:#E9DCCB; --ink:#3A2A1E; --ink-2:#5A4636; --on-dark:#F3EBDD; --line:rgba(58,42,30,.18); --shadow:rgba(74,52,36,.28);
  --akari:#8A4A1C;          /* 差し色（行灯の灯りの系統。紙の上で読める濃さ）。CTA・食事の時刻・「無料」だけに使う */
  --akari-l:#F1CD93;        /* 同じ系統の、暗い地で読める明るさ */
  --g-kinari:rgba(233,220,203,.9); --g-shiro:rgba(249,245,237,.94); --g-koke:rgba(203,211,180,.95);
  --g-ai:rgba(43,52,76,.97); --g-mori:rgba(50,55,38,.97);
  --col:560px; --pad:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:"Shippori Mincho",serif;color:var(--ink);background:#E2D3BF url(img/bg-washi.jpg) repeat;background-size:384px;
  display:grid;grid-template-columns:1fr minmax(0,var(--col)) 1fr;font-feature-settings:"palt";line-break:strict}
.side{background:url(img/bg-washi.jpg) repeat;background-size:384px;filter:brightness(.92) sepia(.08)}
.page{background:var(--washi) url(img/bg-washi.jpg) repeat;background-size:384px;box-shadow:0 0 40px var(--shadow);overflow:hidden}
img{display:block;max-width:100%}
.ph{width:100%;height:auto}
figure{margin:0}
b{font-weight:700}
/* 写真の端を、地へふわっと溶かす（かおりさんが求めた仕上げ。ビフォー版より広く、ゆっくり溶かす） */
.soft{-webkit-mask-image:linear-gradient(to right,transparent,#000 13%,#000 87%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 13%,#000 87%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
/* 画面の端で切れる辺は、硬くしてよい（地と接する辺だけを溶かす） */
.bleed-l .soft{-webkit-mask-image:linear-gradient(to right,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.bleed-r .soft{-webkit-mask-image:linear-gradient(to left,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to left,#000 80%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.bleed .soft,.hero-ph .soft{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent)}

/* ---------- 文字 ---------- */
h1,h2,h3,.label,.fuda,.q,.rc-floor{word-break:keep-all;overflow-wrap:anywhere}
.label{font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--ink-2)}
h1,h2{font-weight:600;letter-spacing:.03em}
h2{font-size:29px;line-height:1.42;margin:10px 0 18px}
.dark h2{font-size:29px;letter-spacing:.01em}
h3{font-size:18px;font-weight:700;line-height:1.5;margin:0 0 6px;letter-spacing:.03em}
.body,.lead{font-size:15.5px;line-height:1.85;letter-spacing:.02em;text-wrap:pretty}
.lead{color:var(--ink-2)}
.note{font-size:13px;line-height:1.7;color:var(--ink-2);margin-top:10px}
.center{text-align:center}
.item{margin-top:22px}

/* ---------- 節 ---------- */
.sec{position:relative;padding:60px var(--pad) 58px;background:linear-gradient(var(--bg),var(--bg)),url(img/bg-washi.jpg) 0 0/384px}
#shizukesa,#shokuji,#ikikata{--bg:var(--g-kinari)}
#tatemono,#heya,#torikeshi{--bg:var(--g-shiro)}
#kisetsu,#ryokin{--bg:var(--g-koke)}
#au{--bg:var(--g-kinari)}
#hitoban{--bg:var(--g-ai)}
#futari{--bg:var(--g-mori)}
.dark{color:var(--on-dark)}
.dark .label,.dark .lead{color:#DCD2C2}
.sec figure{margin-top:24px}
.bleed{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)}
.bleed-l{margin-left:calc(var(--pad)*-1);width:78%}
.bleed-l.tall{width:74%}
.bleed-r{margin-right:calc(var(--pad)*-1);margin-left:auto;width:88%}
.bleed-r.mid{width:84%}

/* ---------- ちぎった和紙の境目（形違い4本＋大きな2本。紙の形で、その節の地を切り抜く） ---------- */
.tear-up,.tear-down{position:absolute;left:-40px;right:-40px;height:64px;z-index:3;pointer-events:none}
.tear-up{top:-40px;filter:drop-shadow(0 -4px 5px rgba(74,52,36,.16))}
.tear-up::before,.tear-down::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--bg),var(--bg)),var(--washi) url(img/bg-washi.jpg) 0 0/384px;
  -webkit-mask:var(--edge) 0 0/100% 100% no-repeat;mask:var(--edge) 0 0/100% 100% no-repeat}
.tear-up::after,.tear-down::after{content:"";position:absolute;inset:0;background:var(--edge) 0 0/100% 100% no-repeat;mix-blend-mode:multiply;opacity:.18}
.tear-up,.tear-down{-webkit-mask:linear-gradient(to top,transparent,#000 26%);mask:linear-gradient(to top,transparent,#000 26%)}
.t1{--edge:url(img/edge-2.png)}
.t2{--edge:url(img/edge-3.png)}
.t3{--edge:url(img/edge-2.png);left:-160px}
.t4{--edge:url(img/edge-3.png);right:-140px}
.t3::before,.t3::after,.t4::before,.t4::after{transform:scaleX(-1)}
/* 暗い地に出入りする所だけ、大きくちぎる */
.tear-down{height:96px;bottom:-62px;transform:scaleY(-1);filter:drop-shadow(0 -7px 8px rgba(10,16,22,.5))}
#shizukesa .tear-down{--edge:url(img/edge-1.png);--ex:50%}
#kisetsu .tear-down{--edge:url(img/edge-4.png);--ex:40%}
#tatemono .tear-up.t1,#au .tear-up.t4{height:96px;top:-60px;filter:drop-shadow(0 -6px 7px rgba(10,16,22,.42))}
#tatemono .tear-up.t1{--edge:url(img/edge-4.png);--ex:65%}
#au .tear-up.t4{--edge:url(img/edge-1.png);--ex:25%}
#hitoban,#futari{padding-top:84px}
#tatemono,#au{padding-top:72px}

/* ---------- あしらい（宿の物を、境目をまたいで節の端からのぞかせる。文字の下に重ねない） ---------- */
.deco{position:absolute;z-index:4;pointer-events:none;height:auto}
.d-ishi{width:132px;right:-30px;bottom:-56px;filter:drop-shadow(0 8px 8px rgba(30,30,30,.3))}
.d-kuri{width:170px;right:-44px;bottom:-64px;transform:rotate(-14deg);filter:drop-shadow(0 10px 10px rgba(30,30,20,.35))}
.d-andon{width:74px;left:6px;bottom:-40px;filter:drop-shadow(0 10px 10px rgba(74,52,36,.3))}
.d-ishi2{width:104px;left:-24px;bottom:-46px;transform:scaleX(-1);filter:drop-shadow(0 8px 8px rgba(74,52,36,.28))}

/* ---------- 最初の画面 ---------- */
.fv{position:relative;padding-bottom:8px}
.demo-band{position:relative;z-index:3;background:rgba(58,42,30,.82);color:var(--on-dark);font-size:12px;line-height:1.6;text-align:center;padding:7px 14px;letter-spacing:.04em;word-break:keep-all;overflow-wrap:anywhere}
.fv-photo .ph{width:100%;aspect-ratio:1024/1240;object-fit:cover;object-position:50% 35%;
  -webkit-mask-image:linear-gradient(#000 70%,transparent 100%);mask-image:linear-gradient(#000 70%,transparent 100%)}
.fv-text{position:absolute;left:0;right:0;top:34px;padding:0 var(--pad);color:var(--on-dark);text-shadow:0 1px 14px rgba(20,14,8,.5)}
/* 見出しの後ろだけを、少し落として読ませる（画面全体には幕をかけない） */
.fv-text::before{content:"";position:absolute;left:0;right:0;top:120px;height:150px;z-index:-1;
  background:radial-gradient(70% 60% at 45% 55%,rgba(24,18,12,.36),transparent 72%)}
.logo{margin:14px 0 22px}
.logo img{width:min(210px,56%);height:auto;filter:drop-shadow(0 1px 10px rgba(20,14,8,.45))}
.label.on-photo{color:var(--on-dark)}
.hero{font-size:clamp(28px,8.6vw,38px);line-height:1.42;margin-top:12px;letter-spacing:.01em}
.fv-bottom{display:grid;grid-template-columns:1fr 42%;gap:14px;align-items:end;padding:0 var(--pad);margin-top:-56px;position:relative;z-index:2}
.clue{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px solid rgba(58,42,30,.22)}
.clue:first-child{border-top:1px solid rgba(58,42,30,.22)}
.clue-s{font-size:13px;color:var(--ink-2)}.clue-l{font-size:15.5px}
.num{font-size:25px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.fv-small .ph{aspect-ratio:4/3;object-fit:cover}
.fv-cta{padding:0 var(--pad)}
.fv .cta-note{margin-top:8px}
#shizukesa{padding-top:40px}

/* ---------- ボタン（行灯。変えない） ---------- */
.cta-wrap{margin-top:24px;text-align:center}
.cta{position:relative;display:flex;align-items:center;justify-content:center;width:100%;margin:0 auto;aspect-ratio:900/249;
  background:url(img/cta-andon.png) 0 0/100% 100% no-repeat;color:#3A2A1E;text-decoration:none;
  font-family:"Shippori Mincho",serif;font-size:19px;font-weight:700;letter-spacing:.14em;
  filter:drop-shadow(0 10px 14px rgba(110,70,30,.38)) drop-shadow(0 2px 3px rgba(80,50,25,.32));transition:transform .18s,filter .18s}
.cta::after{content:"";position:absolute;inset:16% 4% 22% 4%;background:radial-gradient(closest-side,rgba(255,214,140,.55),transparent);opacity:.35;transition:opacity .25s;pointer-events:none}
.cta-text{position:relative;z-index:1;margin-top:-3%}
.cta:hover::after,.cta:focus-visible::after{opacity:.95}
.cta:hover{transform:translateY(-1px)}
.cta:active{transform:translateY(1px);filter:drop-shadow(0 5px 8px rgba(110,70,30,.38))}
.cta:focus-visible{outline:3px solid #C9B27A;outline-offset:4px}
#ryokin .cta{width:92%;font-size:18px}
#torikeshi .cta{width:88%;font-size:18px}
.closing .cta{width:82%;font-size:17px}
.cta-note{font-size:13px;color:var(--ink-2);margin-top:9px}
@media (prefers-reduced-motion:reduce){.cta,.cta::after{transition:none}}

/* ---------- 和紙の札 ---------- */
.fuda{display:inline-flex;align-items:center;min-height:42px;padding:8px 22px 9px 20px;background:url(img/fuda.png) center/100% 100% no-repeat;
  color:var(--ink);font-weight:700;font-size:16.5px;letter-spacing:.04em;filter:drop-shadow(0 6px 8px rgba(8,12,18,.32))}
.fuda.meal{color:var(--akari)}

/* ---------- 静けさ ---------- */
h3.feature{margin-top:34px}
.plan{position:relative;margin-left:calc(var(--pad)*-1)!important;margin-right:calc(var(--pad)*-1)!important;padding-top:26px}
.plan .pin{font-size:13px;padding:1px 7px}
.plan .pin-s{font-size:11px;padding:1px 4px;background:rgba(246,240,229,.8)}
.plan .pin-floor{background:none;font-size:14px;font-weight:700;letter-spacing:.1em;top:0!important}
.pin{position:absolute;transform:translateX(-50%);font-size:13px;font-weight:600;background:rgba(233,220,203,.86);padding:2px 7px;border-radius:3px;white-space:nowrap}
#shizukesa .bleed-l{margin-top:34px}

/* ---------- 一晩の流れ ---------- */
.timeline{list-style:none;margin-top:28px}
.tl-item{margin-bottom:34px}
.tl-item .body{margin-top:12px}
.tl-ph.small{width:64%;margin-top:14px}
.tl-ph.small.right{margin-left:auto}
.tl-ph.bleed{margin-top:16px}

/* ---------- 建物 ---------- */
.hero-ph{margin:-12px calc(var(--pad)*-1) 0!important}
.over-edge{position:relative;margin-top:-58px;z-index:2}
.over-edge h2{font-size:30px}
.print{background:url(img/fuda.png) center/100% 100% no-repeat;padding:7px 8px 9px;filter:drop-shadow(0 10px 12px rgba(74,52,36,.3))}
.print img{width:100%;height:100%;object-fit:cover}
.pair{position:relative;margin-top:30px;height:236px}
.pair .print{position:absolute;margin:0}
.pair .p-a{left:-6px;top:0;width:58%;aspect-ratio:4/5;transform:rotate(-1.5deg)}
.pair .p-b{right:-4px;top:58px;width:48%;aspect-ratio:1/1;transform:rotate(1.8deg)}
.pair{height:auto;aspect-ratio:346/250}
.pair-rev{aspect-ratio:auto;height:auto}
.pair-rev .bleed-r{margin-top:0}
.pair-rev .p-c{position:relative;width:52%;aspect-ratio:4/3;margin:-62px 0 0 -4px;transform:rotate(-1.6deg)}

/* ---------- 食事 ---------- */
.menu-ph{margin-top:22px!important}
.menu-card{position:relative;margin-top:-40px;z-index:2;background:rgba(249,245,237,.92);padding:18px 20px 16px;margin-left:24px;
  filter:drop-shadow(0 10px 14px rgba(74,52,36,.22))}
.menu-card h3.feature{margin-top:0}
.menu-list{list-style:none;font-size:14.5px;line-height:2;columns:2;column-gap:14px}
.menu-list li{break-inside:avoid}
#shokuji .bleed-r.mid{margin-top:34px}

/* ---------- 季節 ---------- */
.season{margin-top:30px;display:flow-root}
.season .print{width:56%;aspect-ratio:1725/1475;margin-top:0}
.s-summer .print{margin-left:auto;transform:rotate(1.4deg)}
.s-spring .print{transform:rotate(-1.4deg)}
.s-winter .print{transform:rotate(-1deg)}
.season .item{margin-top:14px}
.s-autumn .bleed{margin-top:0}

/* ---------- 2人の話 ---------- */
.story-ph{position:relative;margin:18px calc(var(--pad)*-1) 26px!important}
.story-ph .ph{-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent)}
.story-ph h2{position:absolute;left:var(--pad);top:10%;color:var(--on-dark);text-shadow:0 1px 16px rgba(10,8,6,.65)}
.story .body{margin-top:18px}

/* ---------- 合う方 ---------- */
.panel{position:relative;padding:20px 20px 18px;margin-top:22px}
.head-panel{background:rgba(249,245,237,.9);margin:0 0 18px -6px;padding:18px 20px 4px;filter:drop-shadow(0 8px 12px rgba(74,52,36,.16))}
.head-panel h2{margin-bottom:12px}
.yes{background:rgba(203,211,180,.75)}
.no{background:rgba(249,245,237,.85)}
.nots{list-style:none;margin-top:4px}
.nots li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start;font-size:15.5px;line-height:1.85;padding:12px 0}
.nots li:first-child{grid-template-columns:1fr}
.nots li+li{background:url(img/obi.png) center/100% 100% no-repeat;background-blend-mode:normal;padding:12px 10px;margin:4px -10px}
.nots li:nth-child(3){background:none;padding:12px 0;margin:0}
.icon{width:40px;height:40px;object-fit:contain}

/* ---------- 部屋 ---------- */
.floor{margin-top:30px}
.floor-ph{position:relative}
.floor-ph .r-wide{margin:0 0 0 calc(var(--pad)*-1);width:82%}
.floor-ph .r-tall{position:relative;width:46%;aspect-ratio:4/5;margin:-86px 0 0 auto;transform:rotate(1.6deg)}
.f2 .floor-ph .r-wide{margin:0 calc(var(--pad)*-1) 0 auto}
.f2 .floor-ph .r-tall{margin:-86px auto 0 0;transform:rotate(-1.6deg)}
.f2 .floor-ph{display:flex;flex-direction:column}
.room{margin-top:18px}
.room h3{margin-bottom:4px}

/* ---------- 料金 ---------- */
h2.pre{font-size:20px;line-height:1.6;margin-bottom:4px}
.price-big{text-align:center;margin:4px 0 18px}
.price-big b{display:block;font-size:72px;font-weight:600;letter-spacing:.02em;line-height:1.1}
.price-big span{font-size:16px}
.rcards{display:grid;gap:12px;margin-top:20px}
.rcard{background:url(img/ryokin-fuda.png) center/100% 100% no-repeat;padding:16px 20px 18px;filter:drop-shadow(0 8px 10px rgba(50,60,30,.22))}
.rc-floor{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:.06em}
.rc-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.rc-col{display:flex;flex-direction:column}
.rc-day{font-size:13px;color:var(--ink-2)}
.rc-amt{font-size:14px}.rc-amt b{font-size:23px;font-weight:700;letter-spacing:.02em}
#ryokin h3{margin-top:28px}
.incl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;margin-top:12px}
.incl li{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:15px;line-height:1.5;gap:6px}
.incl .icon{width:52px;height:52px}

/* ---------- 行き方 ---------- */
.map{position:relative;margin:14px calc(var(--pad)*-1) 4px!important}
#ikikata h2{margin-top:18px}

/* ---------- 取り消し・質問 ---------- */
.cancel{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:24px}
.cancel li{text-align:center}
.fuda.sm{display:flex;justify-content:center;font-size:12.5px;padding:7px 4px;min-height:34px;filter:drop-shadow(0 5px 7px rgba(74,52,36,.26))}
.rate{display:block;font-size:24px;font-weight:600;margin-top:10px}
.cancel .free .fuda{font-size:13.5px}
.cancel .free .rate{font-size:31px;color:var(--akari)}
.faq{margin-top:40px;background:rgba(233,220,203,.6);padding:22px 20px 24px;margin-left:-6px;margin-right:-6px}
.faq h3{margin-bottom:4px}
.qa{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.qa:first-of-type{border-top:0;padding-top:0}
.q{font-size:17px;font-weight:700;line-height:1.55}
.a{font-size:15px;line-height:1.85;margin-top:6px}

/* ---------- 締め（変えない） ---------- */
.closing{position:relative;color:var(--on-dark);background:#F3ECE0}
.closing-ph{width:100%;-webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%)}
.closing-text{position:absolute;left:0;right:0;top:16%;bottom:3.5%;display:flex;flex-direction:column;padding:0 var(--pad);text-shadow:0 1px 14px rgba(10,8,6,.55)}
.closing h2{font-size:29px}
.closing .note{color:#E6DCCB;margin-top:14px}
.closing .cta-wrap{margin-top:auto}

@media (min-width:561px){.sec{padding-left:28px;padding-right:28px}:root{--pad:28px}}
@media (max-width:360px){.hero{font-size:28px}h2{font-size:25px}.dark h2{font-size:27px}.price-big b{font-size:62px}}

/* 帯の紙は、地より少しだけ明るく見せる */
.nots li+li{position:relative;background:none}
.nots li+li::before{content:"";position:absolute;inset:0;z-index:-1;background:url(img/obi.png) center/100% 100% no-repeat;filter:brightness(1.18) saturate(.8)}
.nots{position:relative;z-index:0}
.hero-ph{margin-top:14px!important}

.head-panel h2{font-size:25px;line-height:1.45}
@media (max-width:360px){.head-panel h2{font-size:22px}}