@charset "utf-8";
/* 筑後川温泉 清乃屋 公式サイト — 共通スタイル
   白（生成り）ベースの高級路線。動きは motion.js と対で機能する。
   ★演出による非表示は必ず html.mo（motion.js が付与）配下に限定する。
     JSが動かない環境でも内容は必ず見える。prefers-reduced-motion 時は .mo が付かない。 */

:root{
  --bg:#f8f6f1; --ink:#1c1a17; --muted:#6e675d; --line:#e2dcd0; --accent:#8c6f42;
  --serif:"Noto Serif JP","Yu Mincho",YuMincho,"Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* ヘッダーは position:fixed。アンカー移動の着地点を下げないと見出しが隠れる */
#dayuse,.search{scroll-margin-top:clamp(90px,11vw,124px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;
     font-size:16px;line-height:1.9;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}

/* ── オープニング ───────────────── */
#intro{display:none}
.mo #intro{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;
           transition:opacity .8s ease,visibility .8s}
.mo #intro.done{opacity:0;visibility:hidden}
/* 読み込み中はロゴではなくコピーを出す。屋号はこのあとのファーストビュー中央で見せる。 */
.intro__copy{font-family:var(--serif);font-weight:300;color:var(--ink);text-align:center;
             font-size:clamp(21px,3.2vw,38px);line-height:1.9;letter-spacing:.14em;text-indent:.14em}
.intro__copy span{display:block}
.mo .intro__copy span{opacity:0;transform:translateY(14px);
                      animation:introIn 1s cubic-bezier(.16,1,.3,1) forwards}
.mo .intro__copy span:nth-child(1){animation-delay:.12s}
.mo .intro__copy span:nth-child(2){animation-delay:.30s}
@keyframes introIn{to{opacity:1;transform:translateY(0)}}

/* ── ブランド表記（ヘッダー） ─────────────────
   ★大きく出すと、輪郭を平滑化したぶん筆のかすれが失われて機械的に見える。
     ロゴは小さく使うこと。見せ場はコピーに持たせる。 */
.brand{display:none;align-items:center;gap:11px;color:var(--ink)}
header.solid .brand{display:flex}
.brand__mark{height:clamp(28px,2.6vw,34px);width:auto;filter:drop-shadow(0 1px 10px rgba(0,0,0,.45))}
.brand__en{font-family:var(--serif);font-size:10px;letter-spacing:.26em;opacity:.85;
           border-left:1px solid currentColor;padding-left:11px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
header.solid .brand{color:var(--ink)}
header.solid .brand__mark{filter:none}
header.solid .brand__en{text-shadow:none;opacity:.7}
@media(max-width:560px){.brand__en{display:none}}

/* ── ヘッダー ─────────────────
   通常時はメニューだけを右に1列。スクロールで帯が出たら左に小さいロゴが入る。
   メニューの位置は両方の状態で変わらないので、切り替わりでガタつかない。 */
header{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:flex-end;
       padding:18px clamp(20px,4vw,48px);transition:background .5s ease,padding .5s ease,box-shadow .5s}
/* 明るい写真の上でもメニューが読めるよう、ヘッダーの背後に暗幕を敷く。
   帯（.solid）が出たら不要になるので消す。 */
header::before{content:"";position:absolute;left:0;right:0;top:0;height:230%;z-index:-1;pointer-events:none;
               background:linear-gradient(to bottom,rgba(20,18,16,.58) 0%,rgba(20,18,16,.28) 45%,rgba(20,18,16,0) 100%);
               transition:opacity .5s ease}
header.solid::before{opacity:0}
header.solid{background:rgba(248,246,241,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line);
             padding-top:10px;padding-bottom:10px;justify-content:space-between}
.nav{display:flex;gap:20px;align-items:center;font-size:14px;letter-spacing:.1em;color:#fff;transition:color .5s}
/* 写真の上に載るので、影を敷いて読めるようにする */
.nav{text-shadow:0 1px 14px rgba(0,0,0,.55),0 0 3px rgba(0,0,0,.3)}
header.solid .nav{color:#4a453d;text-shadow:none}
.nav a{color:inherit}
.nav .btn{border:1px solid currentColor;padding:12px 22px;letter-spacing:.14em;
          transition:background .3s ease,color .3s ease}
.nav .btn:hover{background:#fff;color:var(--ink)}
header.solid .nav .btn:hover{background:var(--ink);color:var(--bg)}
.lnk--act{cursor:pointer;border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .3s}
.lnk--act:hover{border-bottom-color:currentColor}
.langsel{font:inherit;font-size:14px;color:inherit;background:transparent;border:0;cursor:pointer;letter-spacing:.1em}
.langsel option{color:var(--ink)}
@media(max-width:900px){.nav .lnk{display:none}}

/* ── ヒーロー（複数カットの切替） ───────────────── */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
/* ★z-index:0 で重ね順の土俵を閉じる。切り替えのたびに写真の z-index を上げているので、
     これがないと写真が暗幕や屋号を追い越して覆い隠してしまう。 */
.hero__slides{position:absolute;inset:0;z-index:0;background:#1c1a17}
/* ★切り替えは「次の面を上に重ねて透明→不透明」。前の面は不透明のまま下に残し、
     フェードが終わってから伏せる。両方を同時に半透明にすると中間で下地が透けて
     画面がふっと暗くなり、それがカクついて見える原因になる。 */
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 2.6s cubic-bezier(.4,0,.2,1)}
.hero__slide.on{opacity:1}
.hero__slide img{width:100%;height:112%;object-fit:cover;backface-visibility:hidden}
/* 寄り／引きは表示時間(7.5s+フェード2.6s)より長い13sにして、切り替え中も止まらないようにする。
   等速(linear)にするのは、終わりぎわで緩んで「止まった」ように見えるのを避けるため。 */
.mo .hero__slide.on img{animation:kb 13s linear both;will-change:transform}
@keyframes kb{from{transform:scale(1.10)}to{transform:scale(1) translateY(-1.6%)}}
.hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(28,26,23,.52) 0%,rgba(28,26,23,.08) 42%,rgba(28,26,23,.34) 100%)}
.hero__copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
            width:min(92vw,880px);text-align:center;color:#fff}
/* 明るい写真でもコピーが沈まないよう、中央だけやわらかく落とす */
.hero__copy::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:-1;
                    width:150%;height:230%;pointer-events:none;
                    background:radial-gradient(closest-side,rgba(14,12,10,.46),rgba(14,12,10,.18) 62%,rgba(14,12,10,0) 100%)}
/* ── ファーストビュー中央の屋号（筑後川温泉／ロゴ／ローマ字） ─────────────────
   ★ロゴは大きくしないこと。輪郭を平滑化しているので、大きく出すと
     筆のかすれが失われて機械的に見える。 */
.hero__brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin:0}
.hero__area{font-family:var(--serif);font-size:clamp(12px,1.15vw,15px);font-weight:400;
            letter-spacing:.44em;text-indent:.44em;color:rgba(255,255,255,.92);
            text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero__mark{width:clamp(140px,15vw,215px);height:auto;filter:drop-shadow(0 2px 18px rgba(0,0,0,.45))}
.hero__roman{font-family:var(--serif);font-size:clamp(9px,.85vw,11px);letter-spacing:.5em;text-indent:.5em;
             color:rgba(255,255,255,.8);text-shadow:0 1px 14px rgba(0,0,0,.5)}
.mo .hero__brand{opacity:0;animation:up 1.3s cubic-bezier(.16,1,.3,1) .35s forwards}
.hero__rule{width:44px;height:1px;background:rgba(255,255,255,.6);margin:30px auto 22px}
.mo .hero__rule{width:0;animation:ruleIn .9s ease 1.05s forwards}
.hero__sub{font-size:clamp(14px,1.25vw,17px);font-weight:400;line-height:2.1;letter-spacing:.08em;
           color:rgba(255,255,255,.95);margin:0;text-shadow:0 1px 18px rgba(0,0,0,.6)}
.mo .hero__sub{opacity:0;animation:up 1.1s cubic-bezier(.16,1,.3,1) 1.2s forwards}
@keyframes up{to{opacity:1;transform:translateY(0)}}
@keyframes ruleIn{to{width:44px}}
.scrollcue{position:absolute;z-index:3;right:clamp(20px,4vw,48px);bottom:34px;color:#fff;font-size:11px;letter-spacing:.26em;
           writing-mode:vertical-rl;display:flex;align-items:center;gap:12px}
.mo .scrollcue{opacity:0;animation:up 1s ease 2.5s forwards}
.scrollcue i{width:1px;height:64px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:22px;background:#fff}
.mo .scrollcue i::after{animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-24px);opacity:0}30%{opacity:1}100%{transform:translateY(64px);opacity:0}}

/* ── スクロールで現れる ─────────────────
   ★隠すのは JS が .pre を付けた要素だけ（＝初期表示で画面外にあるものだけ）。
     JSが動かない／観測に失敗した場合は .pre が付かず、常に見えたままになる。 */
.rv{transition:opacity 1s ease,transform 1.15s cubic-bezier(.16,1,.3,1)}
.rv.pre{opacity:0;transform:translateY(26px)}
.rv.pre.on{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
.mask{transition:clip-path 1.25s cubic-bezier(.76,0,.24,1)}
.mask.pre{clip-path:inset(0 100% 0 0)}
.mask.pre.on{clip-path:inset(0 0 0 0)}
.zoomwrap{overflow:hidden}
.zoomwrap img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.zoomwrap:hover img{transform:scale(1.06)}

/* ── 空室検索（予約番ウィジェットの受け皿） ───────────────── */
.search{max-width:1080px;margin:clamp(30px,4vw,46px) auto 0;padding:0 clamp(20px,4vw,48px)}
.search__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.search__head span{font-size:12px;letter-spacing:.3em;color:var(--accent);white-space:nowrap}
.search__head::after{content:"";flex:1;height:1px;background:var(--line)}
/* ★中身は予約番のスクリプトが実行時に生成する HTML。実際の構造は
     form > dl.date_489ban ／ div.inbox_489ban > dl（泊数・部屋数／大人・子供）／ button
   既定では dl が縦に積まれるので、flex で横一列に組み替える。
   入りきらない画面では折り返す（潰さない）。
   ・body の line-height:1.9 と img{display:block} は素の値へ戻す（表組みが伸びるため）
   ・テキスト入力欄は無く select と checkbox だけなので、iOS のフォーカス拡大は起きない */
#search_489ban{background:#fff;border:1px solid var(--line);padding:clamp(18px,2.4vw,26px);
               line-height:normal}
#search_489ban img{display:inline-block;vertical-align:middle}

#search_489ban form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 20px;margin:0}
#search_489ban .inbox_489ban{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 20px}
#search_489ban dl{margin:0;display:flex;flex-direction:column;gap:7px}
#search_489ban dt,#search_489ban dd{margin:0}
#search_489ban dd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#search_489ban dt label{font-size:13px;letter-spacing:.1em;color:var(--muted)}
#search_489ban dd > label{display:inline-flex;align-items:center;gap:6px;
                          font-size:14px;color:var(--ink);white-space:nowrap;cursor:pointer}
#search_489ban dd input[type="checkbox"]{width:17px;height:17px;accent-color:var(--ink);margin:0}
#search_489ban dd span{font-size:14px;color:var(--muted)}

#search_489ban select{
  font-family:var(--sans);font-size:15px;color:var(--ink);background:#fff;
  border:1px solid #ddd6c9;border-radius:0;padding:9px 10px;max-width:100%}
#search_489ban button[name="searchButton489ban"]{
  font-family:var(--sans);background:var(--ink);color:var(--bg);border:0;border-radius:0;
  padding:13px 34px;font-size:15px;letter-spacing:.14em;cursor:pointer;align-self:flex-end}
#search_489ban button[name="searchButton489ban"]:hover{background:#000}
/* flex アイテムの既定 min-width:auto は中身の最小幅で、狭い画面ではみ出す */
#search_489ban form,#search_489ban .inbox_489ban,#search_489ban dl,#search_489ban dd{min-width:0}
@media(min-width:1000px){
  /* 横幅に余裕がある画面では検索ボタンを右端へ寄せる */
  #search_489ban button[name="searchButton489ban"]{margin-left:auto}
}
@media(max-width:760px){
  /* 狭い画面は「宿泊日」「泊数・部屋数」「大人・子供」で行を分ける */
  #search_489ban .inbox_489ban{flex:1 1 100%}
  #search_489ban dl.date_489ban{flex:1 1 100%}
  #search_489ban button[name="searchButton489ban"]{width:100%;padding:15px 20px}
}
#search_489ban a{color:var(--accent)}

/* ── 検索窓の下の「日帰り」リンク ─────────────────
   日帰りは需要があるが宿泊に対する追加なので、入口は控えめにする。
   リンク先は予約番の日帰りプラン一覧（別タブ）。ページ内の DAY USE
   セクションは、探していない人にも内容が伝わるよう最下部に置いている。 */
.search__day{display:inline-block;margin-top:14px;font-size:14px;letter-spacing:.08em;
             color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:4px;
             transition:color .3s ease,border-color .3s ease}
.search__day::after{content:" ↗"}   /* 別タブで予約番へ出る */
.search__day:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ── 日帰り ───────────────── */
.dayuse{max-width:1180px;margin:clamp(70px,9vw,120px) auto 0;padding:0 clamp(20px,4vw,48px)}
.dayuse__in{border-top:1px solid var(--line);padding:clamp(34px,5vw,54px) 0 0}
.dayuse__head{max-width:760px}
.dayuse__ttl{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,28px);
             line-height:1.8;letter-spacing:.1em;margin:14px 0 16px}
.dayuse__txt{font-size:clamp(16px,1.15vw,17px);line-height:2.1;color:#4f4a42;margin:0}
.dayplans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,34px);
          margin:clamp(30px,4vw,44px) 0}
@media(max-width:760px){.dayplans{grid-template-columns:1fr}}
.dayplan{border-top:1px solid var(--line);padding-top:20px}
.dayplan__ttl{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.5vw,19px);
              line-height:1.8;letter-spacing:.06em;margin:0}
.dayplan__price{font-family:var(--serif);font-size:clamp(21px,2vw,25px);color:var(--ink);margin:10px 0 12px}
.dayplan__txt{font-size:15px;line-height:2;color:#5c564d;margin:0}
.dayspec{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0 0 30px;
         font-size:15px;line-height:1.9}
.dayspec dt{color:var(--muted);letter-spacing:.08em;white-space:nowrap}
.dayspec dd{margin:0;color:#4f4a42}
@media(max-width:520px){.dayspec{grid-template-columns:1fr;gap:2px 0}
                        .dayspec dd{margin-bottom:12px}}
.dayuse__btn{display:inline-block;background:var(--ink);color:var(--bg);
             font-size:16px;letter-spacing:.18em;padding:16px 42px}
.dayuse__btn:hover{background:#000;color:var(--bg)}
.dayuse__note{font-size:13px;line-height:1.9;color:var(--muted);margin:14px 0 0;max-width:640px}

/* ── 背景の流水（筑後川） ─────────────────
   リード〜数値の裏をゆっくり流れる。文字の可読性を落とさないよう
   線は細く薄く、上下はマスクで消す。動きは .mo 配下＝
   prefers-reduced-motion:reduce の環境では静止画として出る。 */
.riverband{position:relative;overflow:hidden}
.riverband > *:not(.river){position:relative;z-index:1}
/* 文字が乗る中央は地色で鎮める。流水は左右と上下の余白側にだけ見せる */
.riverband::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(115% 62% at 50% 50%,
    rgba(248,246,241,.95) 0%, rgba(248,246,241,.86) 38%, rgba(248,246,241,0) 74%)}
.river{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.34;
       -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
               mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.river i{position:absolute;top:50%;left:0;display:block;height:460px;
         width:calc(100% + 1400px);transform:translate3d(0,-50%,0);will-change:transform;
         background:url(/images/river.svg) repeat-x left center;background-size:1400px 460px}
.mo .river i{animation:riverflow 110s linear infinite}
@keyframes riverflow{to{transform:translate3d(-1400px,-50%,0)}}

/* ── リード ───────────────── */
.lead{max-width:820px;margin:0 auto;padding:clamp(70px,9vw,120px) 24px 0;text-align:center}
.lead p{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.7vw,20px);line-height:2.5;letter-spacing:.12em;color:#35302a;margin:0;text-wrap:pretty}

/* ── 流れる帯（文字） ───────────────── */
.marquee{margin-top:clamp(56px,7vw,92px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:14px 0}
.marquee__inner{display:flex;gap:44px;width:max-content}
.mo .marquee__inner{animation:flow 34s linear infinite}
.marquee span{font-family:var(--serif);font-size:14px;letter-spacing:.26em;color:#7f7566;white-space:nowrap}
@keyframes flow{to{transform:translateX(-50%)}}

/* ── 数値 ───────────────── */
.stats{max-width:1080px;margin:0 auto;padding:clamp(56px,7vw,84px) 24px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}}
.stat{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.stat b{font-family:var(--serif);font-weight:200;font-size:clamp(26px,3.4vw,36px);line-height:1}
.stat b em{font-style:normal;font-size:.44em;margin-left:2px}
.stat small{font-size:13px;letter-spacing:.16em;color:var(--muted);line-height:1.8}

/* ── 章（見出しが貼り付く） ───────────────── */
.chapter{max-width:1180px;margin:clamp(80px,10vw,140px) auto 0;padding:0 clamp(20px,4vw,48px);
         display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:900px){.chapter{grid-template-columns:1fr;gap:26px}}
.chapter__head{position:sticky;top:100px}
@media(max-width:900px){.chapter__head{position:static}}
.chapter__en{font-size:11px;letter-spacing:.3em;color:var(--accent)}
.chapter__ttl{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.5vw,29px);line-height:1.8;letter-spacing:.1em;margin:14px 0 16px}
.chapter__txt{font-size:clamp(16px,1.15vw,17px);font-weight:400;line-height:2.1;color:#4f4a42;margin:0}
.chapter__more{display:inline-block;margin-top:22px;font-size:14px;letter-spacing:.12em;border-bottom:1px solid #d9d0bf;padding-bottom:6px}
.chapter__body{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,28px)}
.chapter__body figure{margin:0}
.chapter__body img{width:100%;height:clamp(230px,32vw,380px);object-fit:cover}
.chapter__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,18px)}
.chapter__grid img{height:clamp(160px,20vw,240px)}
@media(max-width:560px){.chapter__grid{grid-template-columns:1fr}}
.cap{font-size:13px;letter-spacing:.1em;color:var(--muted);margin-top:10px;line-height:1.8}

/* ── 写真ギャラリー（横に流れる） ───────────────── */
.gallery{margin-top:clamp(80px,10vw,140px);overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(18px,2.4vw,26px) 0}
.gallery__row{display:flex;gap:clamp(10px,1.4vw,16px);width:max-content}
.mo .gallery__row{animation:flow 70s linear infinite}
.gallery__row img{height:clamp(150px,17vw,220px);width:auto;object-fit:cover}

/* ── フッター ───────────────── */
footer{max-width:1180px;margin:clamp(80px,10vw,130px) auto 0;padding:42px clamp(20px,4vw,48px) 74px;border-top:1px solid var(--line);
       display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
/* ファーストビュー中央と同じ縦組み。ロゴが「清乃屋」なので、横に施設名を
   並べると「清乃屋」が二重に出てしまう。 */
.fbrand{display:flex;flex-direction:column;align-items:flex-start;gap:11px;
        color:var(--ink);margin-bottom:22px}
.fbrand__area{font-family:var(--serif);font-size:13px;letter-spacing:.42em;text-indent:.42em;color:var(--muted)}
.fbrand__mark{width:96px;height:auto}   /* 上下の文字（筑後川温泉／KIYONOYA）と同じ幅に揃える */
.fbrand__roman{font-family:var(--serif);font-size:10px;letter-spacing:.48em;text-indent:.48em;color:var(--muted)}
.faddr{font-size:15px;font-weight:400;line-height:2.05;color:#5a544b}
.fbtn{display:inline-block;background:var(--ink);color:var(--bg);padding:18px 44px;
      font-size:16px;letter-spacing:.18em;transition:background .3s ease}
.fbtn:hover{background:#000;color:var(--bg)}