/* 山の湯宿 しじま（制作の見本）
   読む組み（do-lp カード0）：幅1024の絵の値 ×0.38＝スマホ390px。
   本文 15.5px／行 1.85・小見出し 17px／700・見出し 24〜26px／600・区分 12.5px／600・注記 13px。太さは 400・600・700 の3段。
   そろえる線：左右の余白 22px（スマホ）。かたまりのあいだ 28〜40px、節のあいだ 88px。
   大きさの基準：PCは中央の列 560px（左右は和紙の帯）。内容が多い節は、縦に伸ばす。 */
:root{
  --washi:#E9DCCB; --washi-2:#E2D3BF; --ink:#3A2A1E; --ink-2:#5A4636; --moss:#3F4A26; --moss-2:#2F3A1C;
  --tsuchi:#4A3424; --on-dark:#F3EBDD; --line:rgba(58,42,30,.22); --shadow:rgba(74,52,36,.28);
  --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:var(--washi-2) 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}
/* 写真の端を、和紙の地へふわっと溶かす（OKをいただいた絵の端の処理を再現する。四角い枠と影にしない） */
.soft{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
/* 物として置く絵（間取りの絵）だけ、ふわっとした影で浮かせる */
.lift{border-radius:3px;box-shadow:0 14px 30px -10px var(--shadow),0 3px 8px -3px rgba(74,52,36,.2)}
figure{margin:0}
b{font-weight:700}

/* 文字の段 */
.label{font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--ink-2)}
h1,h2{font-weight:600;letter-spacing:.04em;text-wrap:balance;word-break:auto-phrase}
h3,.tl-time{word-break:auto-phrase}
h2{font-size:25px;line-height:1.5;margin:10px 0 18px}
h3{font-size:17px;font-weight:700;line-height:1.5;margin:22px 0 6px;letter-spacing:.03em}
.body,.lead{font-size:15.5px;line-height:1.85;letter-spacing:.02em}
.lead{color:var(--ink-2)}
.note{font-size:13px;line-height:1.7;color:var(--ink-2);margin-top:10px}
.center{text-align:center}

/* 節 */
.sec{position:relative;padding:58px var(--pad) 56px;background-color:var(--bg,var(--washi))}
.sec>.ph,.sec figure{margin-top:22px}
.wide .ph{width:calc(100% + var(--pad)*2);margin-left:calc(var(--pad)*-1);border-radius:0}
.row{display:grid;grid-template-columns:1fr 46%;gap:16px;align-items:center;margin-top:22px}
.row.rev{grid-template-columns:46% 1fr}
.row.rev .row-ph{order:-1}
.row h3{margin-top:0}
.row-ph{margin-top:0!important}

/* 最初の画面 */
.fv{position:relative;padding-bottom:30px}
.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}
.fv-photo .ph{border-radius:0;box-shadow:none;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,.45)}
.logo{margin:14px 0 24px}
.logo img{width:min(210px,56%);height:auto;filter:drop-shadow(0 1px 10px rgba(20,14,8,.45))}
.logo-sub{font-size:12px;letter-spacing:.2em}.logo-main{font-size:30px;font-weight:600;letter-spacing:.18em}
.label.on-photo{color:var(--on-dark)}
.hero{font-size:clamp(25px,7.6vw,34px);line-height:1.5;margin-top:12px;font-weight:600}
.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 var(--line)}
.clue:first-child{border-top:1px solid var(--line)}
.clue-s{font-size:13px;color:var(--ink-2)}.clue-l{font-size:15.5px}
.num{font-size:30px;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)}

/* ボタン：A 和紙の行灯（かおりさんが3案から採用）。栗の框に和紙を貼った灯りの札。重ねると内側の灯りが明るくなる。
   場所ごとに大きさを変える：最初の画面100%／料金の下92%／取り消しの下88%／締め82%。スマホで高さ約70〜90px。 */
.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}}

/* 静けさ */
.plan{position:relative;margin-left:calc(var(--pad)*-1)!important;margin-right:calc(var(--pad)*-1)!important}
.plan .pin{font-size:13px;padding:1px 7px}
.plan .pin-s{font-size:11px;padding:1px 4px;background:rgba(246,240,229,.8)}
.plan{padding-top:26px}
.plan .pin-floor{background:none;font-size:14px;font-weight:700;letter-spacing:.1em;top:0!important}
.fv-small .ph{border-radius:3px}
h3.feature{margin-top:36px}

/* 一晩の流れ */
.timeline{list-style:none;margin-top:22px;border-left:1px solid var(--ink-2);padding-left:20px}
.tl-item{position:relative;margin-bottom:22px}
.tl-item::before{content:"";position:absolute;left:-25px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.tl-time{font-size:17px;font-weight:700;letter-spacing:.04em}
.tl-time.meal{color:#8A3B22}
.tl-body{display:grid;grid-template-columns:1fr 44%;gap:14px;align-items:start;margin-top:6px}
.tl-big .tl-body{grid-template-columns:1fr}
.tl-big .tl-ph{margin-top:10px}

/* 食事 */
.menu{display:grid;grid-template-columns:54% 1fr;gap:14px;align-items:center;margin-top:14px}
.menu-list{list-style:none;font-size:14px;line-height:2.05;letter-spacing:.02em;white-space:nowrap}

/* 季節 */
.collage{position:relative;margin-top:26px;aspect-ratio:1/1.02}
.collage .ph{position:absolute}
.c-autumn{left:24%;top:0;width:76%!important;z-index:1}
.c-spring{left:0;top:6%;width:40%!important;z-index:2}
.c-summer{left:0;top:52%;width:42%!important;z-index:3}
.c-winter{right:0;top:66%;width:44%!important;z-index:3}
.seasons{margin-top:10px}
.season h3{margin-top:22px}

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

/* 部屋 */
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;margin-top:18px}
.room .ph{aspect-ratio:3/2;object-fit:cover}
.room h3{margin-top:12px}
.room .body{font-size:15px}

/* 料金 */
.price-big{text-align:center;margin:8px 0 18px}
.price-big b{display:block;font-size:68px;font-weight:600;letter-spacing:.02em;line-height:1.1}
.price-big span{font-size:16px}
.grid4{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;border:1px solid var(--line)}
.cell{padding:14px 10px;text-align:center;font-size:15px;line-height:1.6;border:1px solid var(--line);display:flex;flex-direction:column}
.cell-s{font-size:13px;color:var(--ink-2)}
.incl{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:6px}
.incl li{padding:14px 8px;text-align:center;font-size:15.5px;border-bottom:1px solid var(--line)}
.incl li:nth-child(odd){border-right:1px solid var(--line)}

/* 行き方 */
.map{position:relative;margin-left:calc(var(--pad)*-1)!important;margin-right:calc(var(--pad)*-1)!important}
.map .ph{border-radius:0;box-shadow:none}
.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}

/* 取り消し */
.cancel{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:28px;position:relative}
.cancel::before{content:"";position:absolute;left:12%;right:12%;top:31px;border-top:1px solid var(--ink-2)}
.cancel li{text-align:center;display:flex;flex-direction:column;gap:18px}
.when{font-size:12.5px;color:var(--ink-2);min-height:20px}
.rate{font-size:22px;font-weight:600;position:relative}
.rate::before{content:"";position:absolute;left:50%;top:-14px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ink)}
.rate.free{font-size:30px}
.qa{margin-top:22px}
.q{font-size:16px;font-weight:700;line-height:1.6}
.a{font-size:15px;line-height:1.85;margin-top:4px}

/* 締め */
.closing{position:relative;margin-top:0;color:var(--on-dark)}
.closing-ph{border-radius:0!important;box-shadow:none!important;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:27px}
.closing .note{color:#E6DCCB;margin-top:22px}
.closing .cta-wrap{margin-top:auto}
.closing .note{margin-top:14px}

@media (min-width:561px){.sec{padding-left:28px;padding-right:28px}}
@media (max-width:360px){.hero{font-size:29px}h2{font-size:22px}}
@media (prefers-reduced-motion:reduce){.cta{transition:none}}

/* ---------- 背景の通し図（ページ全体を1本の帯として、地の色で緩急を付ける） ----------
   FV（写真）→ 静けさ：生成り → 一晩の流れ：夜の藍（濃い・山場1）→ 建物：白い和紙 → 食事：生成り → 季節：灰緑
   → 2人の話：土色（濃い・山場2）→ 合う方：生成り → 部屋：白い和紙 → 料金：灰緑（数字を立てる）→ 行き方：生成り
   → 取り消し：白い和紙 → 締め（写真）。濃い地は2か所だけ。隣どうしで同じ地にしない。
   替わり目は、ちぎった和紙のふち（下の節の紙が、上の節へ少し食いこむ）。直線では切らない。 */
:root{--g-kinari:rgba(233,220,203,.88);--g-shiro:rgba(246,240,229,.9);--g-midori:rgba(214,218,198,.92);--g-ai:rgba(30,42,54,.95);--g-tsuchi:rgba(70,48,31,.95)}
.sec{background:linear-gradient(var(--bg),var(--bg)),url(img/bg-washi.jpg) 0 0/384px}
#shizukesa,#shokuji,#au,#ikikata{--bg:var(--g-kinari)}
#tatemono,#heya,#torikeshi{--bg:var(--g-shiro)}
#kisetsu,#ryokin{--bg:var(--g-midori)}
#hitoban{--bg:var(--g-ai)}
#futari{--bg:var(--g-tsuchi)}
#hitoban,#futari{color:var(--on-dark)}
#hitoban .label,#hitoban .lead,#futari .label{color:#D9CDBA}
#hitoban .timeline{border-left-color:rgba(243,235,221,.45)}
#hitoban .tl-item::before{background:var(--on-dark)}
#hitoban .tl-time.meal{color:#E8AE86}
/* ちぎった和紙のふち：その節と同じ地で、上の節へ食いこませる（形は、ちぎった紙の素材 edge-torn.png の形） */
.sec::before{content:"";position:absolute;left:0;right:0;top:-30px;height:40px;z-index:2;pointer-events:none;
  background:linear-gradient(var(--bg),var(--bg)),url(img/bg-washi.jpg) 0 0/384px;
  -webkit-mask:url(img/edge-torn.png) 0 -92px/900px 225px repeat-x;mask:url(img/edge-torn.png) 0 -92px/900px 225px repeat-x;transform:scaleY(-1)}
#tatemono::before{-webkit-mask-position:-300px -92px;mask-position:-300px -92px}
#kisetsu::before{-webkit-mask-position:-520px -92px;mask-position:-520px -92px}
#heya::before{-webkit-mask-position:-150px -92px;mask-position:-150px -92px}
#ryokin::before{-webkit-mask-position:-680px -92px;mask-position:-680px -92px}
#futari .story-ph .ph{-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 80%,transparent)}
.nots{list-style:none;margin-top:6px}
.nots li{font-size:15.5px;line-height:1.85;padding:12px 0;border-bottom:1px solid var(--line)}
#ryokin .grid4,#ryokin .cell{border-color:rgba(58,42,30,.26)}
.closing{background:#F3ECE0}