@charset "UTF-8";
/* ==========================================================================
   みはるや 公式サイト
   デザイン原本 : 260810_miharuya_Web / 00_みはるや_WEB_TOP.ai
                  アートボード PC 1366 x 11056.8 / SP 375 x 11520.9
   すべての数値はアートボードからの実測値（design px）。
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root{
  /* colour ------------------------------------------------------------- */
  --c-ink:        #333333;
  --c-washi:      #f1f2ed;
  --c-washi-side: #eaebe6;
  --c-ribbon:     #8d8d8d;
  --c-ribbon-dk:  #645344;
  --c-news:       #e7dfc5;
  --c-news-label: #2e2c27;
  --c-gold:       #8d7435;
  --c-reserve:    #968f84;
  --c-footer:     #333333;
  --c-btn-grey:   #999999;
  --c-line:       #333333;
  --c-white:      #ffffff;

  /* type --------------------------------------------------------------- */
  --ff-min: "Shippori Mincho", "Yu Mincho", YuMincho, "游明朝体 Pr6N",
            "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --ff-got: "Zen Kaku Gothic New", "Yu Gothic", YuGothic, "游ゴシック体 Pr6N",
            "Hiragino Sans", "Noto Sans JP", sans-serif;

  /* geometry ----------------------------------------------------------- */
  --wrap:      1002px;  /* 実測: x182 → x1184 */
  --band:      768px;   /* 1画面 = アートボード1バンド */
  --side:      70px;    /* PC 右サイドバー幅（パーツ_みはるや_ヘッダー.ai）*/
  --vh:        100vh;

  /* motion（指示レイヤー「ふわっと」＝ 瞬時ではなくゆっくり） ---------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur:       1.1s;
  --dur-mask:  1.15s;
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:10px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-width:1030px;   /* = コンテンツ幅1002 + 縦組み見出しのはみ出し分 */
  font-family:var(--ff-got);
  font-size:14px;
  line-height:1.8;
  color:var(--c-ink);
  background:var(--c-washi);
  overflow-x:hidden;
  font-feature-settings:"palt" 0, "pkna" 0, "pwid" 0;
  font-kerning:none;
}
img{ max-width:100%; height:auto; border:0; vertical-align:top; }
a{ color:inherit; text-decoration:none; transition:opacity .4s var(--ease), color .4s var(--ease); }
a:hover{ opacity:.62; }
ul,ol{ margin:0; padding:0; list-style:none; }
p,h1,h2,h3,h4,figure,address,form{ margin:0; }
address{ font-style:normal; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
select{ font:inherit; color:inherit; }
time{ font-variant-numeric:lining-nums tabular-nums; }

.u-sr{
  position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; top:-100px; left:0; z-index:999; padding:10px 16px;
  background:var(--c-ink); color:#fff; font-size:13px;
}
.skip-link:focus{ top:0; }

.wrap{ width:var(--wrap); margin-inline:auto; position:relative; }

/* 約物半角: Illustrator の「行中約物半角」に合わせる。
   、。= 後ろのアキを詰める / ・（）= 前後を均等に詰める */
/* 約物半角。全角字形の余白がどちら側にあるかで詰め方が違う。
   、。= 右に余白 → 後ろを詰める / ・= 両側 → 半分ずつ
   （= 左に余白 → 前を詰める  /  ）= 右に余白 → 後ろを詰める */
.hw{ letter-spacing:-.5em; }
.hwc{ margin-inline:-.25em; }
.hwo{ margin-inline-start:-.5em; }
.hwe{ margin-inline-end:-.5em; }

/* 縦中横（10室 など）— 縦組みの1文字ぶんの枡に半角数字を横並びで入れる */
.tcy{
  display:inline-block; writing-mode:horizontal-tb;
  width:1em; height:1em; line-height:1;
  text-align:center; white-space:nowrap;
  font-feature-settings:"palt" 0;
}

/* ======================================================================
   共通ヘッダー — PC: 画面右に固定される幅70pxの縦帯
   ====================================================================== */
.hdr{
  position:fixed; inset:0 0 auto auto; z-index:60;
  width:var(--side); height:100%;
  background:url(../img/bg/washi-plain.jpg) center/cover no-repeat, var(--c-washi-side);
}
.hdr__logo{
  position:absolute; top:30.5px; left:50%; transform:translateX(-50%);
  width:32.5px;
}
.hdr__logo img{ width:100%; }
.hdr__logo-light{ display:none; }
.hdr__nav{ position:absolute; top:245.5px; left:0; width:100%; }
.gnav{ display:flex; flex-direction:column; align-items:center; }
.gnav li + li{ margin-top:11px; }
.gnav a{
  display:block; writing-mode:vertical-rl;
  font-size:11px; line-height:1; letter-spacing:0;
  color:var(--c-ink); font-weight:400; white-space:nowrap;
}
.hdr__cta{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  width:30px; height:70px; border-radius:6px;
  background:var(--c-ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; font-size:12.5px; letter-spacing:.1em; line-height:1; white-space:nowrap;
  transition:background .4s var(--ease), opacity .4s var(--ease);
}
.hdr__cta:hover{ opacity:1; background:var(--c-gold); }
.hdr__burger{ display:none; }
.sform__label--sp{ display:none; }

/* ======================================================================
   FV
   ====================================================================== */
.fv{
  position:relative; height:var(--vh); min-height:var(--band);
  overflow:hidden; background:#0d1512;
}
.fv__media{
  --dim:.06;
  position:absolute; inset:0;
  /* 配置実測: left -313.6 / top -630.8 / 2115.4 x 1410.4 */
  background:url(../img/photo/fv-onsen.jpg) 41.85% 98.19%/154.86% auto no-repeat;
}
.fv__media::after{
  content:""; position:absolute; inset:0; background:#000; opacity:var(--dim,0);
}
.fv__steam{
  position:absolute;
  background:url(../img/photo/steam.jpg) center/cover no-repeat;
  mix-blend-mode:screen; opacity:.30; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 45%, transparent 100%);
          mask-image:radial-gradient(closest-side at 50% 50%, #000 45%, transparent 100%);
}
.fv__steam--a{ left:2.56%;  top:17.37%; width:47.88%; height:56.78%; }
.fv__steam--b{ left:43.43%; top:35.21%; width:46.41%; height:55.04%; }
.fv__steam--c{ left:53.59%; top:-4.27%; width:46.41%; height:55.04%; }
.fv__logo{
  position:absolute; bottom:42px; left:max(24px, calc(50% - 577px));
  width:100px; margin:0;
}

/* ======================================================================
   宿泊検索バー
   ====================================================================== */
.sbar{ background:#fff; padding:29.5px 0 30.5px; }
.sbar__ribbon{
  width:800px; height:30px; margin-inline:auto;
  background:var(--c-ribbon); color:#fff;
  font-family:var(--ff-min); font-weight:500; font-size:16px; letter-spacing:.0906em;
  display:flex; align-items:center; justify-content:center;
  text-indent:.0906em;
}
.sbar__ribbon--dark{ background:var(--c-ribbon-dk); height:30.5px; }

.sform{
  width:800px; margin:10px auto 0; height:40px;
  display:flex; align-items:center;
}
.sform__label{ width:42px; font-family:var(--ff-min); font-weight:500; font-size:14px; letter-spacing:0; white-space:nowrap; }
.sform__group{
  margin-left:28.5px; flex:0 0 570px; height:100%;
  display:flex; background:#fff; border:1px solid #b5b5b0;
}
.sform__cell{ display:flex; align-items:center; height:100%; }
.sform__cell + .sform__cell{ border-left:1px solid #b5b5b0; }
.sform__cell--date{ flex:0 0 359px; padding-left:15px; position:relative; overflow:hidden; }
.sform__cell--sel{ flex:0 0 105px; position:relative; }
.sform__date{
  font-family:var(--ff-min); font-weight:500; font-size:16px; letter-spacing:-.035em; white-space:nowrap;
  font-feature-settings:"palt" 1;
}
.sform__check{ position:absolute; left:255px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; cursor:pointer; }
.sform__check input{
  appearance:none; flex:none; width:20.5px; height:20.5px; margin:0;
  border:1px solid var(--c-ink); background:#fff; cursor:pointer;
}
.sform__check input:checked{ background:var(--c-ink); }
.sform__check span{ margin-left:6.5px; font-family:var(--ff-min); font-weight:500; font-size:14px; letter-spacing:0; white-space:nowrap; }
.sform__cell--sel select{
  appearance:none; width:100%; height:100%; padding:0 0 0 17.5px;
  border:0; background:transparent;
  font-family:var(--ff-min); font-weight:500; font-size:16px; cursor:pointer;
}
.sform__cell--sel::after{
  content:""; position:absolute; right:17px; top:calc(50% - 4px); width:10.6px; height:10.6px;
  border-right:1.4px solid var(--c-ink); border-bottom:1.4px solid var(--c-ink);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
}
.sform__submit{
  margin-left:20px; flex:0 0 140px; height:40px;
  background:var(--c-ink); color:#fff;
  font-family:var(--ff-min); font-weight:500; font-size:16px; letter-spacing:0;
  transition:background .4s var(--ease);
}
.sform__submit:hover{ background:var(--c-gold); }

/* ======================================================================
   お知らせバー
   ====================================================================== */
.nbar{
  position:relative; height:70px; background:var(--c-news);
}
.nbar__label{
  position:absolute; left:0; top:0; z-index:2;
  width:200px; height:100%;
  background:var(--c-news-label);
  clip-path:polygon(0 0, 100% 0, 80% 100%, 0 100%);
  color:#fff; font-weight:500; font-size:14px; letter-spacing:0;
  display:flex; align-items:center;
  padding-left:91.7px;
}
.nbar__inner{ height:100%; display:flex; align-items:center; }
.nbar__list{ display:flex; margin-left:37px; }
.nbar__list li + li{ margin-left:56px; }
.nbar__list a{ display:flex; align-items:baseline; font-weight:500; font-size:14px; letter-spacing:0; white-space:nowrap; }
.nbar__list time{ display:inline-block; width:70px; margin-right:14px;
  /* 正本の実測色は金（#8D7435）。本文だけ #333 */
  color:var(--c-gold);
  letter-spacing:.06em; font-feature-settings:"tnum" 1; }

/* 「詳しくみる」— 下線＋右端の矢羽 */
.hlink{
  position:relative; display:inline-block; padding-bottom:5px;
  font-weight:500; font-size:14px; line-height:1; letter-spacing:0; text-align:center;
}
.hlink::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--c-line);
}
.hlink::after{
  content:""; position:absolute; right:0; bottom:0;
  width:11px; height:1px; background:var(--c-line);
  transform-origin:100% 50%; transform:rotate(45deg);
  transition:transform .5s var(--ease);
}
.hlink:hover::after{ transform:rotate(45deg) translateX(4px); }
.hlink span{ display:block; padding:0 24px; }
.nbar__more{ position:absolute; right:.5px; bottom:23px; width:121.5px; }
.nbar__more span{ padding:0; }
.hlink:hover{ opacity:1; color:var(--c-gold); }

/* ======================================================================
   縦組みの共通パーツ
   ====================================================================== */
/* セクションタグ（囲み罫） */
.vtag{
  position:absolute; top:100.5px; right:2.5px;
  width:30.5px; height:90.5px;
  border:1px solid var(--c-line);
  writing-mode:vertical-rl;
  font-family:var(--ff-min); font-weight:500; font-size:16px; letter-spacing:0;
  display:flex; align-items:center; justify-content:center;
}
.vtag--2{ letter-spacing:.33em; text-indent:.33em; }
/* 縦組み見出し */
.vttl{
  /* ink 右端 x1129 / 上端 T+100.5 に合わせる（half-leading 13.74px を補正）*/
  /* ink 右端 x1129 / 上端 T+100.5（half-leading 14.45px を補正）*/
  position:absolute; top:97.9px; right:40.55px;
  writing-mode:vertical-rl;
  font-family:var(--ff-min); font-weight:400;
  font-size:32px; line-height:1.903; letter-spacing:.05em;
}
.vttl > span:not(.hw,.hwc,.hwo,.hwe,.tcy,.u-sr){ display:block; white-space:nowrap; }
.vttl--step > span:nth-child(2){ padding-top:32px; }
.vttl--step > span:nth-child(3){ padding-top:160px; }

/* 縦組み本文 */
.vbody{
  position:absolute; writing-mode:vertical-rl;
  font-weight:500; font-size:15px; line-height:2.173; letter-spacing:0;
}
.vbody > span:not(.hw,.hwc,.hwo,.hwe,.tcy,.u-sr){ display:block; white-space:nowrap; }
/* PC と SP でデザインの改行位置が違う所だけ改行を出し入れする（原稿は1系統）*/
.br-sp{ display:none; }
.vbody__gap{ margin-right:32.6px; }

/* 写真バンド上の白い縦組みリード */
.vlead{
  /* .feature__visual は全幅。コンテンツ幅(1002px)の右端基準に合わせる */
  position:absolute; z-index:2;
  right:calc((100% - var(--wrap)) / 2 + var(--lead-r, 0px));
  writing-mode:vertical-rl;
  font-family:var(--ff-min); font-size:35px; line-height:1.883;
  letter-spacing:.046em; color:#fff;
  text-shadow:0 0 22px rgba(0,0,0,.28);
}
.vlead > span:not(.hw,.hwc,.hwo,.hwe,.tcy,.u-sr){ display:block; white-space:nowrap; }

/* 縦組みリンク（右に罫＋下向き矢印） */
.vlink{
  position:absolute; bottom:99.5px;
  width:27px; height:113.5px;
  writing-mode:vertical-rl;
  font-weight:500; font-size:13px; letter-spacing:0;
}
.vlink span{
  display:block; padding-top:11px;
  transition:transform .5s var(--ease);
}
.vlink::before{
  content:""; position:absolute; top:0; right:1px;
  width:24px; height:1px; background:var(--c-line);
}
.vlink::after{
  content:""; position:absolute; top:0; right:1px;
  width:1px; height:100%;
  background:var(--c-line);
}
.vlink i{
  position:absolute; right:-3px; bottom:0;
  width:9px; height:9px;
  border-right:1px solid var(--c-line);
  transform:rotate(-45deg); transform-origin:100% 100%;
  transition:transform .5s var(--ease);
}
.vlink:hover{ opacity:1; color:var(--c-gold); }

/* ======================================================================
   特集セクション（写真バンド＋和紙バンド）
   指示レイヤー:「スクロールに連動して画像が固定・切り替わる演出
   （ピン留め・Sticky固定のアニメーション）」ベンチマーク kiyasuya.jp
   ====================================================================== */
.feature{ position:relative; }
.feature__visual{
  position:sticky; top:0; z-index:0;
  height:var(--vh); min-height:var(--band);
  overflow:hidden;
}
.feature__photo{ position:absolute; inset:0; background-repeat:no-repeat; }
/* 白文字の可読性のため、デザイン上で写真に黒を重ねている量（実測）*/
.feature__photo::after{
  content:""; position:absolute; inset:0; background:#000; opacity:var(--dim,0);
}
.feature__body{
  position:relative; z-index:2;
  height:var(--band);
  background:url(../img/bg/washi-splash.jpg) center top/cover no-repeat, var(--c-washi);
}
.feature__body > .wrap{ height:100%; }
.feature--concept .feature__body{
  background:url(../img/bg/washi-plain.jpg) center top/cover no-repeat, var(--c-washi);
}

/* 画像枠（指示:「画像枠の左側からマスクが右へスライドして剥がれるように現れる」） */
.feature__figure{
  position:absolute; left:0; bottom:99.5px;
  width:400px; height:450px; overflow:hidden;
}
.ph{ display:block; width:100%; height:100%; background-repeat:no-repeat; position:relative; }
/* デザイン上で写真に重ねられている黒の量（実測）。--dim を持たない写真は 0 */
.ph::after{
  content:""; position:absolute; inset:0; background:#000;
  opacity:var(--dim,0); pointer-events:none;
}

/* --- 各セクション個別実測値 --------------------------------------- */
/* コンセプト */
.feature--concept .feature__body{ height:var(--band); }
.feature--concept .feature__figure{ top:218px; bottom:auto; }
.feature--concept .vttl{ top:100px; right:-13.24px; }
.feature--concept .vbody{ top:415.4px; right:292.75px; }
.ph--concept{ --dim:.124; background-image:url(../img/photo/concept-noren.jpg);
  background-size:710.8px 473.8px; background-position:-104.7px -19.4px; }

/* 温泉 */
.feature--onsen .feature__photo{
  --dim:.254;
  background-image:url(../img/photo/band-onsen.jpg);
  background-size:107.65% auto; background-position:43.35% 51.39%; }
.feature--onsen .vlead{ top:398.6px; --lead-r:437.25px; }
.feature--onsen .vbody{ top:385.4px; right:243.25px; }
.feature--onsen .vlink{ left:541.5px; }
.ph--onsen{ background-image:url(../img/photo/onsen-spout.jpg);
  background-size:715.7px 477.8px; background-position:-148.8px -4.8px; }

/* 砂風呂 */
.feature--sunaburo .feature__photo{
  background-image:url(../img/photo/band-sunaburo.jpg);
  background-size:127.88% auto; background-position:50.01% 51.44%; }
/* 正本の暗幕は平坦な黒ではなく「中央が明るく左右が沈む」水平グラデーション。
   14分割で 正本/ビルド の明度比を測って必要な不透明度を算出した実測値。 */
.feature--sunaburo .feature__photo::after{
  /* 正本の暗幕は中央が抜けた楕円状で左右非対称。CSSグラデーションでは合わないため、
     「暗幕なしの描画」と正本の明度比を 44x26 で実測し、そのままアルファ画像にした。 */
  background:url(../img/bg/scrim-sunaburo.png) 0 0/100% 100% no-repeat;
  opacity:1;
}
.feature--sunaburo .vlead{ top:487.6px; --lead-r:371.25px; }
.feature--sunaburo .vbody{ top:362.9px; right:229.75px; }
.feature--sunaburo .vlink{ left:458px; }
/* 正本はレベル補正（黒を締める方向）がかかっており黒ベタでは再現できない。
   実測フィット 正本 = 1.14×ビルド − 15 → brightness/contrast に変換した値。 */
.ph--sunaburo{ --dim:.21; filter:brightness(1.023) contrast(1.117);
  background-image:url(../img/photo/sunaburo-woman.jpg);
  background-size:411.8px 617.7px; background-position:-6.7px -120.7px; }

/* お食事 */
.feature--cuisine .feature__photo{
  --dim:.225;
  background-image:url(../img/photo/band-cuisine.jpg);
  background-size:112.06% auto; background-position:64.26% 13.66%; }
.feature--cuisine .vlead{ top:364.6px; --lead-r:436.25px; }
.feature--cuisine .vbody{ top:362.9px; right:324.75px; }
.feature--cuisine .vlink{ left:526px; }
.ph--cuisine{ background-image:url(../img/photo/top-cuisine-nitsuke.jpg);
  background-size:492px 738px; background-position:-77px -187.9px; }

/* お部屋 */
.feature--room .feature__photo{
  background-image:url(../img/photo/band-room.jpg);
  background-size:100.85% auto; background-position:60.34% 26.6%; }
.feature--room .vlead{ top:535.6px; --lead-r:403.75px; }
.feature--room .vbody{ top:362.9px; right:229.75px; }
.feature--room .vlink{ left:556.5px; }
.feature__figure--mosaic{
  width:400px; height:568.5px; overflow:visible;
  display:grid; grid-template-columns:190.5px 190.5px; grid-template-rows:176.5px 176.5px 176.5px;
  gap:19.5px 19px;
}
.feature__figure--mosaic .ph{ overflow:hidden; }
.ph--room1{ grid-column:1 / span 2; background-image:url(../img/photo/room-kiku.jpg);
  background-size:413.8px 275.9px; background-position:-8.3px -89.9px; }
.ph--room2{ background-image:url(../img/photo/room-washi.jpg);
  background-size:363.1px 242.1px; background-position:-171px -35.7px; }
.ph--room3{ background-image:url(../img/photo/room-water.jpg);
  background-size:434.4px 289.6px; background-position:-111.2px -39.8px; }
.ph--room4{ background-image:url(../img/photo/room-lamp.jpg);
  background-size:199px 298.5px; background-position:-3.8px -101.9px; }
.ph--room5{ background-image:url(../img/photo/room-weave.jpg);
  background-size:393.8px 262.6px; background-position:-134.3px -48.1px; }

/* 過ごし方 */
.feature--stay .feature__photo{
  background-image:url(../img/photo/band-stay.jpg);
  background-size:105.42% auto; background-position:29.73% 79.53%; }
/* 暗幕は平坦ではなく上下で強さが変わる（sd比 1.27 で判明）。実測アルファ画像を使う。 */
.feature--stay .feature__photo::after{
  background:url(../img/bg/scrim-stay.png) 0 0/100% 100% no-repeat; opacity:1;
}
.feature--stay .vlead{ top:536.6px; --lead-r:404.25px; }
.feature--stay .vbody{ top:317.9px; right:197.25px; }
.feature--stay .vlink{ left:556.5px; height:126px; }
.ph--stay{ background-image:url(../img/photo/stay-ashiyu.jpg);
  background-size:441.8px 662.7px; background-position:-26.8px -74.8px; }

/* ======================================================================
   ご宿泊予約  (band T=9425 / h=565)
   ====================================================================== */
.reserve{
  position:relative; height:565px;
  background:url(../img/bg/yoyaku.jpg) center/cover no-repeat, var(--c-reserve);
}
.reserve .wrap{ height:100%; }
.reserve__ttl{
  position:absolute; top:133.1px; left:0; right:0;
  font-family:var(--ff-min); font-weight:500; font-size:38px; line-height:1;
  letter-spacing:.16em; text-indent:.16em; text-align:center; color:#fff;
  font-feature-settings:"palt" 0;
}
.reserve .sbar__ribbon{ position:absolute; top:215.5px; left:101px; margin:0; }
.reserve .sform{ position:absolute; top:255.5px; left:101px; margin:0; height:40.5px; }
.reserve .sform__group{ border-color:#fff; }

.reserve__routes{
  position:absolute; top:316.5px; left:101.5px;
  display:flex; align-items:center;
  font-family:var(--ff-min); font-weight:500; font-size:18px; letter-spacing:0; line-height:1;
}
.radio{ display:flex; align-items:center; cursor:pointer; white-space:nowrap; }
.radio + .radio{ margin-left:36px; }
.radio input{
  appearance:none; width:15px; height:15px; margin:0 3px 0 0;
  border:1px solid var(--c-ink); border-radius:50%; position:relative; cursor:pointer;
  flex:none;
}
.radio input:checked::after{
  content:""; position:absolute; inset:2.5px; border-radius:50%; background:var(--c-ink);
}
.reserve__confirm{
  margin-left:36px; position:relative; white-space:nowrap;
}
.reserve__confirm::after{
  content:""; position:absolute; right:-17.5px; top:50%; width:8px; height:8px;
  border-top:1.4px solid var(--c-ink); border-right:1.4px solid var(--c-ink);
  transform:translateY(-50%) rotate(45deg);
  transition:transform .4s var(--ease);
}
.reserve__confirm:hover::after{ transform:translateY(-50%) rotate(45deg) translate(3px,-3px); }

/* 上下 1px 罫で挟まれた電話予約ブロック（実測 y9798.5 / y9858.5）*/
.reserve__tel{
  position:absolute; top:372.5px; left:100.5px; width:801px; height:60px;
  border-top:1px solid var(--c-ink); border-bottom:1px solid var(--c-ink);
  display:flex; align-items:center; padding-left:139.5px;
  font-family:var(--ff-min);
}
.reserve__tel-label{ font-weight:500; font-size:16px; letter-spacing:0; }
.reserve__tel-num{
  margin:0 9px 0 41px; font-family:var(--ff-got); font-weight:600; font-size:30px; letter-spacing:.073em; line-height:1;
  font-variant-numeric:lining-nums;
}
.reserve__tel-time{ font-weight:500; font-size:15px; letter-spacing:0; }

/* ======================================================================
   フッター上ビジュアル
   ====================================================================== */
.closing{
  height:var(--band); position:sticky; top:0; z-index:0;
  background:url(../img/photo/band-yagura.jpg) 29.82% 79.72%/105.42% auto no-repeat, #9db6c8;
}

/* ======================================================================
   フッター  (band T=10757 / h=300)
   ====================================================================== */
.ftr{
  position:relative; z-index:2;
  height:300px; background:var(--c-footer); color:#fff;
}
.ftr__inner{ height:100%; }
.ftr__brand{ position:absolute; left:1px; top:47px; }
.ftr__logo{ width:173.4px; }
.ftr__addr{
  margin-top:15.5px; font-family:var(--ff-min); font-size:15px; line-height:1.8;
  letter-spacing:.01em;
}
.ftr__partners{
  position:absolute; left:0; top:170.8px;
  display:flex; align-items:center; gap:17px;
}
.ftr__partners img:first-child{ width:80.2px; }
.ftr__partners img:last-child{ width:116px; }

.ftr__util{ position:absolute; left:597.5px; top:47px; width:404.5px; }
/* 実測: 2段目の項目インク 136/122/81px → 13px（13.2px では合計が枠を1.2px超えて末尾1文字が折り返す）
   文字色は正本のピーク実測で #D9D9D9（住所・TELは白）*/
.ftr__nav{ display:flex; font-size:13px; line-height:1; letter-spacing:.045em; }
.ftr__nav li,
.ftr__nav a{ white-space:nowrap; }
.ftr__nav a{ color:#d9d9d9; }
.ftr__nav--1 li + li{ margin-left:29.5px; }
.ftr__nav--2{ margin-top:26px; }
.ftr__nav--2 li + li{ margin-left:30.5px; }
.ftr__cta{
  position:absolute; top:77px; left:2.7px; line-height:1; padding-bottom:7px;
  display:flex; align-items:center; justify-content:center;
  width:400px; height:35px;
  background:var(--c-btn-grey); color:#fff;
  font-size:13.5px; letter-spacing:.05em;
  transition:background .4s var(--ease);
}
.ftr__cta:hover{ opacity:1; background:var(--c-gold); }
.ftr__sns{
  position:absolute; right:2px; top:168px;
  display:flex; gap:11px;
}
.ftr__sns img{ width:35px; }
.ftr__copy{
  position:absolute; left:0; right:0; bottom:21px;
  text-align:center; font-size:13.5px; line-height:1; letter-spacing:.02em;
}

/* ======================================================================
   フローティング：公式サイト最低価格保証
   指示レイヤー:「このあたりからスッと現れて、バツマークを押すと消える」
   ====================================================================== */
.fbadge{
  position:fixed; left:0; top:0; z-index:70;
  width:258.8px; height:154.6px;
  opacity:0; transform:translateX(-24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  pointer-events:none;
}
.fbadge.is-in{ opacity:1; transform:none; pointer-events:auto; }
.fbadge__body{
  position:absolute; left:8px; top:14px; width:230px; height:126px;
  display:flex; flex-direction:column; align-items:center;
  background:var(--c-gold);
  border:1px solid #fff; outline:1px solid var(--c-gold); outline-offset:2px;
  font-family:var(--ff-min); color:#fff; text-align:center;
  padding-top:11px;
}
.fbadge__sub{ font-size:13px; letter-spacing:.14em; }
.fbadge__main{ font-size:26px; font-weight:500; letter-spacing:.05em; line-height:1.35; }
.fbadge__off{
  position:absolute; left:-1px; right:-1px; bottom:-1px; height:38px;
  background:var(--c-ink); font-size:13px; letter-spacing:.04em;
  display:flex; align-items:center; justify-content:center;
}
.fbadge__off em{ font-style:normal; font-size:21px; margin-left:2px; letter-spacing:.01em; }
.fbadge__close{
  position:absolute; right:0; top:0; width:34px; height:34px; border-radius:50%;
  background:var(--c-ink);
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.fbadge__close::before,
.fbadge__close::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:1.4px;
  background:#fff; transform-origin:50% 50%;
}
.fbadge__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.fbadge__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.fbadge__close:hover{ background:var(--c-gold); transform:rotate(90deg); }

/* ======================================================================
   スクロール演出
   指示レイヤー:「文字がふわっとあらわれる」
              「画像枠の左側からマスク（カバー）が右へスライドして
                剥がれるように画像が現れる」
   ====================================================================== */
.rv{ opacity:0; transform:translateY(26px); }
.rv.is-in{
  opacity:1; transform:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rv--d1.is-in{ transition-delay:.16s; }

.rv-img .ph{ clip-path:inset(0 100% 0 0); }
.rv-img.is-in .ph{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--dur-mask) var(--ease);
}
.feature__figure--mosaic.is-in .ph:nth-child(2){ transition-delay:.1s; }
.feature__figure--mosaic.is-in .ph:nth-child(3){ transition-delay:.16s; }
.feature__figure--mosaic.is-in .ph:nth-child(4){ transition-delay:.22s; }
.feature__figure--mosaic.is-in .ph:nth-child(5){ transition-delay:.28s; }

@media (prefers-reduced-motion:reduce){
  .rv,.rv-img .ph{ opacity:1; transform:none; clip-path:none; }
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}

/* ======================================================================
   SP ドロワー（パーツ_みはるや_ハンバーガーメニューPOPUP_mobile.ai / 375x768）
   指示レイヤー:「押すとこの表示」= ハンバーガーで開く
   ====================================================================== */
.drawer{
  position:fixed; inset:0; z-index:80;
  background:#666666; color:#fff;
  opacity:0; transition:opacity .45s var(--ease);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.drawer.is-open{ opacity:1; }
.drawer__inner{ position:relative; width:37.5rem; min-height:76.8rem; margin-inline:auto; }
.drawer__logo-mark{ position:absolute; top:3.04rem; right:1.1rem; width:3.28rem; }
.drawer__main{ position:absolute; top:6.2rem; right:6.97rem; }
.drawer__main ul{ display:flex; flex-direction:row-reverse; }
.drawer__main a{
  display:block; writing-mode:vertical-rl; white-space:nowrap;
  font-family:var(--ff-min); font-size:2.5rem; line-height:2.224; letter-spacing:.09em;
}
.drawer__sub{ position:absolute; top:22rem; right:7.63rem; }
.drawer__sub ul{ display:flex; flex-direction:row-reverse; }
.drawer__sub a{
  display:block; writing-mode:vertical-rl; white-space:nowrap;
  font-family:var(--ff-min); font-size:1.5rem; line-height:2.987; letter-spacing:0;
}
.drawer__foot{ position:absolute; top:46.34rem; left:2.5rem; right:2.5rem; }
.drawer__foot::before{
  content:""; position:absolute; top:0; left:0; width:27.25rem; height:1px;
  background:rgba(255,255,255,.85);
}
.drawer__partners{ margin-top:1.68rem; display:flex; align-items:center; gap:2.25rem; }
.drawer__partners img:first-child{ width:8rem; }
.drawer__partners img:last-child{ width:11.25rem; }
.drawer__sns{ margin-top:2.94rem; display:flex; gap:1.05rem; }
.drawer__sns img{ width:3.5rem; }
.drawer__logo{ margin-top:3.16rem; width:17.62rem; }
.drawer__addr{
  margin-top:1.75rem; font-family:var(--ff-min); font-size:1.6rem; line-height:1.5;
  letter-spacing:.01em;
}
html.is-drawer-open{ overflow:hidden; }
/* ドロワーを開いている間も「ご予約」とハンバーガー（＝閉じる）は前面に出す */
html.is-drawer-open .hdr{ z-index:90; background:none; box-shadow:none; }
html.is-drawer-open .hdr__logo{ visibility:hidden; }
html.is-drawer-open .hdr__cta{ border-color:#fff; color:#fff; }

/* ======================================================================
   モバイル（SP アートボード 375px の実測を rem で再現）
   1rem = 10px @375 → どの端末幅でもデザイン比率のまま拡縮する
   ====================================================================== */
@media (max-width:767px){
  html{ font-size:calc(100vw / 37.5); }
  body{ min-width:0; font-size:1.5rem; }
  .wrap{ width:auto; margin-inline:0; }

  /* ---- ヘッダー: 右端 55px の縦帯（写真の上に重なる。背景なし） ---- */
  .hdr{
    width:5.5rem; height:100%;
    background:none;
    pointer-events:none;
  }
  .hdr > *{ pointer-events:auto; }
  .hdr__logo{ top:3.04rem; width:3.28rem; }
  .hdr__logo-dark{ display:none; }
  .hdr__logo-light{ display:block; }
  .hdr.is-solid{
    background:url(../img/bg/washi-plain.jpg) center/cover no-repeat, var(--c-washi-side);
    box-shadow:-1px 0 6px rgba(0,0,0,.06);
  }
  .hdr.is-solid .hdr__logo-dark{ display:block; }
  .hdr.is-solid .hdr__logo-light{ display:none; }
  .hdr__nav{ display:none; }
  .hdr__cta{
    bottom:9.26rem; width:3.12rem; height:6.63rem; border-radius:.6rem;
    background:none; border:1px solid #fff; color:#fff;
    font-family:var(--ff-min); font-size:1.4rem; letter-spacing:.08em;
  }
  .hdr__cta:hover{ background:none; }
  .hdr.is-solid .hdr__cta{ border-color:var(--c-ink); color:var(--c-ink); }
  .hdr__burger{
    display:block; position:absolute; bottom:3.3rem; left:50%;
    transform:translateX(-50%);
    width:2.32rem; height:3.18rem;
  }
  .hdr__burger-lines{ display:block; position:relative; width:100%; height:100%; }
  .hdr__burger-lines i{
    position:absolute; top:0; width:.18rem; height:100%; background:#fff;
    transition:transform .4s var(--ease), opacity .3s var(--ease);
  }
  .hdr__burger-lines i:nth-child(1){ left:0; }
  .hdr__burger-lines i:nth-child(2){ left:1.07rem; }
  .hdr__burger-lines i:nth-child(3){ left:2.14rem; }
  .hdr.is-solid .hdr__burger-lines i{ background:var(--c-ink); }
  .hdr__burger.is-open{ position:fixed; z-index:90; bottom:3.3rem; right:1.6rem; left:auto; transform:none; }
  .hdr__burger.is-open .hdr__burger-lines i{ background:#fff; }

  /* ---- FV ---- */
  .fv{ min-height:0; }
  /* SP は PC と同じ倍率で、写真の別の部分を切り出している（相関で同定）*/
  .fv__media{ background-size:564.11% auto; background-position:58.01% 98.19%; }
  .fv__logo{ left:2.65rem; bottom:4.8rem; width:9.65rem; }
  .fv__steam--a{ left:9.33%; top:17.37%; width:174.4%; height:56.78%; }
  .fv__steam--b,
  .fv__steam--c{ display:none; }

  /* ---- 宿泊検索 ---- */
  .sbar{ padding:.2rem 0 3.9rem; }
  .sbar .wrap{ position:static; }
  .sbar__ribbon{
    width:100%; height:4.8rem; font-size:1.6rem; letter-spacing:.09em; text-indent:.09em;
  }
  .sform{
    width:auto; margin:0; height:auto; display:block;
    padding:0 2rem;
  }
  .sform__label{
    display:block; width:auto; margin-top:1.86rem; line-height:1; font-size:1.4rem;
  }
  .sform__group{
    margin:.84rem 0 0; flex:none; width:100%; height:auto; border:0; background:none;
    display:flex; flex-wrap:wrap; justify-content:space-between;
  }
  .sform__label--sp{
    display:block; width:100%; margin-top:1.48rem; line-height:1;
    font-family:var(--ff-min); font-weight:500; font-size:1.4rem; letter-spacing:0;
  }
  .sform__cell{ height:auto; display:flex; }
  .sform__cell + .sform__cell{ border-left:0; }
  .sform__cell--date{
    flex:none; width:100%; height:3.7rem; padding-left:1.57rem;
    border:1px solid #b5b5b0; align-items:center;
  }
  .sform__date{ font-size:1.5rem; }
  .sform__check{ position:absolute; left:auto; right:1.4rem; }
  .sform__check input{ width:1.9rem; height:1.9rem; }
  .sform__check span{ font-size:1.3rem; }
  .sform__cell--sel{
    flex:none; width:calc(50% - .48rem); height:3.8rem; margin-top:1.52rem;
    border:1px solid #b5b5b0;
  }
  .sform__cell--sel select{ font-size:1.6rem; padding-left:0; text-align:center; text-align-last:center; }
  .sform__cell--sel::after{ right:1.9rem; width:1.06rem; height:1.06rem; }
  .sform__submit{
    margin:2rem 0 0; flex:none; width:100%; height:4rem; font-size:1.6rem;
  }
  .sform__nights{
    display:flex; justify-content:space-between; margin-top:1.2rem;
  }

  /* ---- お知らせ ---- */
  .nbar{ height:auto; background:var(--c-news); }
  .nbar__label{
    position:static; width:100%; height:3rem; clip-path:none;
    padding:0; justify-content:center; font-size:1.4rem; letter-spacing:0;
  }
  .nbar__inner{ height:auto; display:block; padding:2.2rem 2rem 2.05rem; }
  .nbar__list{ display:block; margin:0; }
  .nbar__list li + li{ margin:.66rem 0 0; }
  .nbar__list a{ display:block; font-size:1.4rem; line-height:1.45; white-space:normal; }
  .nbar__list time{
    display:block; width:auto; margin:0; color:var(--c-gold); letter-spacing:.06em;
  }
  .nbar__more{
    position:static; margin:3.12rem auto 0; display:block; width:16.4rem;
    font-size:1.4rem;
  }

  /* ---- 特集セクション ---- */
  .feature__visual{ min-height:0; height:76.85rem; }
  .feature__body{ height:76.6rem; min-height:0; }
  /* 和紙バンドの高さはアートボード実測（セクションごとに微差がある）*/
  .feature--onsen    .feature__body{ height:76.55rem; }
  .feature--sunaburo .feature__body{ height:76.75rem; }
  .feature--cuisine  .feature__body{ height:76.85rem; }
  .feature--room     .feature__body{ height:76.7rem; }
  .feature--stay     .feature__body{ height:76.9rem; }
  .vtag{ top:6.95rem; right:3.2rem; width:3rem; height:9rem; font-size:1.6rem; }
  .vttl{
    top:7rem; right:6.915rem;
    font-size:2.8rem; line-height:1.646; letter-spacing:.017em;
  }
  .vbody{ font-size:1.5rem; line-height:2.173; }
  .br-pc{ display:none; }
  .br-sp{ display:inline; }
  .vbody__gap{ margin-right:0; }
  .vlead{ font-size:2.5rem; line-height:1.984; letter-spacing:.046em; }
  .feature__body .vlink{ left:6.1rem; bottom:6rem; width:2.7rem; height:11.3rem; font-size:1.3rem; }
  .feature--stay .vlink{ height:11.3rem; }
  .feature__body .feature__figure{
    left:auto; right:3.2rem; bottom:6.1rem; width:20.05rem; height:22.55rem; top:auto;
  }
  .ph{ background-size:cover !important; background-position:center !important; }

  /* 縦組みは各バンド（.feature__text）を基準にする */
  .feature__text{ position:relative; height:100%; }
  .feature--concept .feature__text{ height:76.8rem; }
  /* コンセプト: SP は写真が全幅バンド → 和紙バンドの上に出す */
  .feature--concept .feature__body{ height:auto; min-height:0; }
  .feature--concept .wrap{ display:flex; flex-direction:column; }
  .feature--concept .feature__figure{
    position:static; order:-1; width:100%; height:42.25rem; flex:none;
    right:auto; bottom:auto; top:auto;
  }
  .feature--concept .vttl{
    top:7.7rem; right:11.57rem; font-size:2.3rem; line-height:2.102; letter-spacing:.02em;
  }
  .feature--concept .vttl--step > span:nth-child(2){ padding-top:2.3rem; }
  .feature--concept .vttl--step > span:nth-child(3){ padding-top:11.5rem; }
  .feature--concept .vbody{ top:48.77rem; right:4.09rem; }

  /* 各セクションの実測値（SP アートボード） */
  .feature--onsen    .vlead{ top:47.28rem; right:auto; --lead-r:0; right:13.78rem; }
  .feature--onsen    .vbody{ top:6.93rem; right:20.43rem; }
  .feature--sunaburo .vlead{ top:54.28rem; right:8.84rem; }
  .feature--sunaburo .vbody{ top:7.13rem; right:17.28rem; }
  .feature--cuisine  .vlead{ top:44.88rem; right:11.33rem; }
  .feature--cuisine  .vbody{ top:7.13rem; right:23.8rem; }
  .feature--room     .vlead{ top:58.05rem; right:11.33rem; }
  .feature--room     .vbody{ top:7.03rem; right:17.43rem; }
  .feature--stay     .vlead{ top:58.1rem; right:11.33rem; }
  .feature--stay     .vbody{ top:7.08rem; right:17.28rem; }

  .feature__figure--mosaic{
    width:20.05rem; height:28.45rem;
    grid-template-columns:9.55rem 9.55rem;
    grid-template-rows:8.85rem 8.85rem 8.85rem;
    gap:.95rem .95rem;
    bottom:6.15rem;
  }

  /* ---- ご宿泊予約 ---- */
  .reserve{ height:56.45rem; }
  .reserve__ttl{ top:3.99rem; font-size:2.5rem; letter-spacing:.16em; text-indent:.16em; }
  .reserve .sbar__ribbon{ top:7.85rem; left:0; width:100%; height:5rem; }
  .reserve .sform{ position:absolute; top:13.95rem; left:0; width:100%; height:auto; }
  .reserve .sform__label{ color:var(--c-ink); }
  .reserve .sform__cell--date,
  .reserve .sform__cell--sel{ border-color:#b5b5b0; background:#fff; }
  .reserve__routes{
    position:absolute; top:35.16rem; left:2.09rem; width:33.5rem; right:auto;
    display:block; font-size:1.5rem; line-height:1.57;
  }
  .radio{ display:inline-flex; }
  .radio input{ width:1.5rem; height:1.5rem; margin-right:0; }
  .radio + .radio{ margin-left:3rem; }
  .reserve__confirm{ display:block; margin:0; }
  .reserve__confirm::after{ right:auto; margin-left:1rem; position:static; display:inline-block; }
  .reserve__tel{
    position:absolute; top:44.15rem; left:2rem; width:33.5rem; height:9.15rem;
    border-top:0; border-bottom:1px solid var(--c-ink);
    display:block; padding:0; text-align:center;
  }
  .reserve__tel-label{ display:block; font-size:1.6rem; }
  .reserve__tel-num{ margin:.6rem 0 0; display:inline-block; font-size:3rem; }
  .reserve__tel-time{ display:block; font-size:1.5rem; }

  /* ---- フッター上ビジュアル / フッター ---- */
  .closing{ height:50.05rem; background-size:cover; background-position:60% 50%; }
  .ftr{ height:30rem; text-align:center; }
  .ftr__inner{ display:block; }
  .ftr__brand{ position:static; padding-top:5.04rem; }
  .ftr__logo{ width:17.19rem; margin-inline:auto; }
  .ftr__addr{
    margin-top:2.3rem; font-size:1.6rem; line-height:1.5;
  }
  .ftr__partners,
  .ftr__util{ display:none; }
  .ftr__copy{ bottom:1.76rem; font-size:1.3rem; }

  /* ---- フローティングバナー ---- */
  .fbadge{ width:15.8rem; height:9.44rem; }
  .fbadge__body{ left:.5rem; top:.85rem; width:14.05rem; height:7.7rem; padding-top:.7rem; }
  .fbadge__sub{ font-size:.9rem; }
  .fbadge__main{ font-size:1.6rem; }
  .fbadge__off{ height:2.3rem; font-size:.9rem; }
  .fbadge__off em{ font-size:1.3rem; }
  .fbadge__close{ width:2.1rem; height:2.1rem; }
  .fbadge__close::before,.fbadge__close::after{ width:.9rem; }
}