@charset "UTF-8";
/*
Theme Name : 桝一客殿 - Masuichi Kyakuden
*/

/* ------------------
base
------------------ */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.7;
  /* clip はスクロールコンテナを作らないので position: sticky を殺さない。
     非対応ブラウザは上の hidden が効く（横スクロール防止はどちらでも同じ） */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition), color var(--transition);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

:where(h1, h2, h3, h4) {
  font-weight: 400;
}

address {
  font-style: normal;
}

.en {
  font-family: var(--font-en);
}

.txt-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (min-width: 768.1px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
    color: inherit;
  }
}

/* PC/SP 出し分け */
@media screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768.1px) {
  .sp {
    display: none !important;
  }
}

/* ------------------
layout
------------------ */
.inner {
  position: relative;
  width: var(--width-inner);
  margin-inline: auto;
}

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

.sec {
  position: relative;
  /* clip はスクロールコンテナを作らないので、中の position: sticky を殺さない。
     非対応ブラウザは上の hidden が効く（はみ出しを切る効果は同じ） */
  overflow: hidden;
  overflow: clip;
  padding: var(--space-9) 0;
}
.sec > * {
  position: relative;
  z-index: 1;
}

/* パンくず（Breadcrumb NavXT）はSEO用に出力だけして、画面には見せない。
   display:none だと検索エンジンに隠しコンテンツと見られる恐れがあるため、画面外に追い出す */
.breadcrumbs {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ::before のノイズを自分の中に閉じ込めるため、position の基準を自前で持つ
   （.sec と併用しないケースがあるため .sec 側の position には頼らない） */
.bg-navy {
  position: relative;
  background-color: var(--color-navy);
  color: var(--color-white);
}
.bg-light {
  position: relative;
  background-color: var(--color-bg);
  color: var(--color-ink);
}
.bg-white {
  background-color: var(--color-white);
}
/* 背景ノイズ（Figma: ノイズ Duo / サイズ1px / 密度100%）
   Figmaのノイズ板（120×120）を書き出し → 背景色ぶんを透過にした透過PNGを敷いて再現する。
   ベース色は各セクションの background-color 側で指定 */
.bg-navy::before,
.bg-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  background-repeat: repeat;
  background-size: 120px 120px;
}

.bg-navy::before {
  background-image: url("../img/noise_navy.png");
}

.bg-light::before {
  background-image: url("../img/noise_light.png");
}

/* 進行度 --shift-p（0 = 紺 / 1 = 明るい地）を GSAP が <main> に対して動かし、
   継承で両セクションが同じ値を参照する。これで境目をまたいで背景全体が変化する。
   背景色とノイズだけを変え、文字色は各セクションで固定。
   --shift-p-off は JS が動かなかったときの値（#about は紺、#explore は明るい地のまま）。 */
.bg-shift {
  --p: var(--shift-p, var(--shift-p-off, 1));
  background-color: color-mix(in srgb, var(--color-bg) calc(var(--p) * 100%), var(--color-navy));
}

#about {
  --shift-p-off: 0;
  color: var(--color-white);
}

#explore {
  --shift-p-off: 1;
}

/* ノイズは2枚重ねて入れ替える（background-image は補間できないため）。
   中間のグレー背景に薄く乗せるとかえって粒が目立つ。
   そこで前半で紺用を消し切り、後半から明用を出す（中央では両方0）。 */
.bg-shift::before,
.bg-shift::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
  background-size: 120px 120px;
}

.bg-shift::before {
  background-image: url("../img/noise_navy.png");
  opacity: clamp(0, 1 - var(--p) * 2, 1);
}

.bg-shift::after {
  background-image: url("../img/noise_light.png");
  opacity: clamp(0, var(--p) * 2 - 1, 1);
}

/* ------------------
Header
------------------ */
/* ヘッダーは箱を作らない（display: contents）。
   ヘッダー全体に mix-blend-mode を掛けるとスタッキングコンテキスト（合成の隔離グループ）が
   できてしまい、ドロワー表示中にロゴだけ合成を残せないため、
   .h-logo / .nav-toggle をそれぞれ fixed で置き、個別に背景と合成する（.sidemenu と同じ考え方）。 */
.header {
  display: contents;
}

.h-logo {
  position: fixed;
  top: var(--space-3);
  left: var(--space-5);
  z-index: 100;
  width: 160px;
  height: 52px;
  transition: filter var(--transition);
}
.h-logo.is-dark {
  filter: invert(1);
}

.h-logo a {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-toggle {
  position: fixed;
  top: var(--space-4);
  right: var(--space-5);
  z-index: 102;
  display: block;
  width: 46px;
  height: 46px;
  mix-blend-mode: difference;
}

@media screen and (max-width: 768px) {
  .h-logo {
    top: 16px;
    left: 16px;
    width: min(145px, 37.17vw);
    height: auto;
  }
  .nav-toggle {
    top: 16px;
    right: 20px;
    width: 30px;
    height: 30px;
  }
}

.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-white);
  transition: transform var(--transition), opacity var(--transition), background-color var(--transition);
}

.nav-toggle span:nth-child(1) {
  top: 41%;
}

.nav-toggle span:nth-child(2) {
  top: 59%;
}

.is-open .nav-toggle span,
.is-closing .nav-toggle span {
  background-color: #e6e6e6;
}

.is-open .nav-toggle span:nth-child(1) {
  transform: translateY(4px) rotate(10deg);
}

.is-open .nav-toggle span:nth-child(2) {
  transform: translateY(-4px) rotate(-10deg);
}
@media screen and (max-width: 768px) {
  .is-open .nav-toggle span:nth-child(1) {
    transform: translateY(2.5px) rotate(10deg);
  }
  .is-open .nav-toggle span:nth-child(2) {
    transform: translateY(-2.5px) rotate(-10deg);
  }
}

/* drawer */
.gnav {
  position: fixed;
  z-index: 101;
  top: var(--space-3);
  right: var(--space-3);
  width: 600px;
  background: var(--color-white);
  color: var(--color-ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  max-height: calc(100vh - var(--space-3) * 2);
  max-height: calc(100svh - var(--space-3) * 2);
  overflow-y: auto;
  /* スクロールし切ったあと背後のページが動かないようにする */
  overscroll-behavior: contain;
}

.is-open .gnav {
  opacity: 1;
  visibility: visible;
}

.gnav-inner {
  padding: var(--space-6) var(--space-7);
}

.gnav-logo{
  width: 55px;
}
@media screen and (max-width: 768px) {
  .gnav {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    /* PC用の上下余白ぶんの max-height を解除（下に隙間ができるため） */
    max-height: 100vh;
    max-height: 100svh;
  }
  .gnav-inner {
    padding: var(--space-8) var(--space-7) 40px;
  }
  .gnav-logo{
    margin-inline: auto;
  }
}
.menu {
  margin-block: var(--space-5);
  line-height: 1;
}
.menu > li + li{
  margin-top: 32px;
}

.menu span{
  display: inline-block;
}
.menu > li > a{
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu .ja {
  font-size: var(--font-22);
  font-weight: 700;
}

.menu .en {
  color: var(--color-gray);
  font-size: var(--font-14);
}
@media screen and (max-width: 768px) {
  .menu .ja {
    font-size: var(--font-26);
  }
  .menu .en {
    font-size: var(--font-16);
  }
}
.submenu {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: var(--font-14);
}

.gnav-btm{
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: end;
  gap: var(--space-2);
}


.menu-sub{
  font-size: var(--font-14);
}
.gnav-sns{
  display: flex;
  gap: 8px;
}
.gnav-sns li{ width: 24px;}
.gnav-sns img {
  filter: invert(1);
}
.gnav-btn{
  background-color: var(--color-gold);
  border-radius: 2px;
  color: var(--color-white);
  text-align: center;
  padding: .5em 1.5em;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);

}
.gnav-btn .ja{
  font-size: var(--font-20);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.gnav-btn .en{
  font-size: var(--font-14);
}
@media (hover: hover) {
  .gnav-btn:hover{
    background-color: var(--color-gold-h);
  }
}

@media screen and (max-width: 768px) {
  .gnav-btm{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gnav-btn{
    width: fit-content;
    margin-inline: auto;
    margin-top: 2em;
  }
}
/* ------------------
MV
------------------ */
.mv {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.mv-img,
.mv-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* mv-vide */
.mv-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate; 
}

/* 1サイクル10.0秒：フェードイン0.80秒 → 保持8.00秒 → フェードアウト0.70秒 → 黒0.50秒。
   秒数は js/mv-video.js と合わせる */
.mv-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 画面比率が違っても余白を出さずに切り抜く */
  object-position: bottom;
  opacity: 0;
  visibility: hidden;
  /* フェードアウト。消え終わってから非表示にする */
  transition: opacity .7s linear, visibility 0s linear .7s;
}

.mv-video video.is-show {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  /* フェードイン */
  transition: opacity .8s linear, visibility 0s linear 0s;
}

/* 動画より手前に出す要素（キャッチコピーなど） */
/* .mv > :not(.mv-video) {
  position: relative;
  z-index: 1;
} */

/* ------------------
mv-video-fade（黒を挟まないクロスフェード版：index2.html 専用）
保持 → 次の動画を手前に重ねて切り替え。秒数は js/mv-video-fade.js と合わせる
（ひとまず0秒でパッと切り替え。フェードで馴染ませたくなったら秒数を戻す）
------------------ */
.mv-video-fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
}

.mv-video-fade video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0s linear;
}

.mv-video-fade video.is-show {
  opacity: 1;
  z-index: 1;
}

.mv-nav {
  position: absolute;
  left: 7.81%;
  top: 25%;
  color: var(--color-white);
}

.mv-nav > ul {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.mv-nav a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.mv-nav .ja {
  font-size: var(--font-22);
  letter-spacing: 0.19em;
  line-height: 1;
}

.mv-nav .en {
  font-size: var(--font-12);
  letter-spacing: 0.13em;
  line-height: 1;
}

/* サブメニュー：hoverでふんわり展開（背景なし・テキストのみ） */
.mv-nav .mv-sub {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  transition: grid-template-rows var(--ease-soft), margin-top var(--ease-soft);
}

.mv-nav .has-sub:hover .mv-sub,
.mv-nav .has-sub:focus-within .mv-sub {
  grid-template-rows: 1fr;
  margin-top: 16px;
}

.mv-nav .mv-sub > ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  padding-left: 1.2em;
  font-size: var(--font-13);
  letter-spacing: 0.13em;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(3px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
}

.mv-nav .has-sub:hover .mv-sub > ul,
.mv-nav .has-sub:focus-within .mv-sub > ul {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-delay: 0.1s;
}

.mv-note{
  color: var(--color-gold);
  position: absolute;
  left: var(--space-6);
  right: var(--space-6);
  bottom: var(--space-2);
}
.mv-note dt{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-14);
  margin-bottom: 4px;
}
.mv-note dt span{
  display: inline-block;
  width: .8em;
}
.mv-note dd{
  font-size: var(--font-10);
}
@media screen and (max-width: 768px) {
  .mv-nav {
    left:  50%;
    top: 50%;
    width: max-content;
    transform: translate(-50%, -50%);
  }
  .mv-nav .ja {
    font-size: var(--font-30);
    letter-spacing: 0.05em;
  }
  .mv-nav .en {
    font-size: var(--font-16);
  }

  .mv-nav > ul {
    gap: 40px;
  }
  .mv-nav .mv-sub {
    display: none;
  }
  .mv-note{
    left: 6%;
    right: 6%;
    bottom: 48px;
  }
  .mv-note dt{ font-size: var(--font-16);}
}

/* 右下フロート（左から JP/EN → ご予約 の横並び）
   .lang-switch の文字をページ背景と合成するため、包む要素にスタッキングコンテキストを
   作らせない（display: contents）。各要素を個別に fixed で置く。
   位置の基準値は変数で共有する（display: contents でもカスタムプロパティは子に継承される）。 */
.sidemenu {
  display: contents;
  --side-right: 20px;
  --side-bottom: 20px;
  --side-h: 46px;
  --side-gap: 24px;
  --reserve-w: 180px;
}
@media screen and (max-width: 768px) {
  .sidemenu {
    --side-right: 0;
    --side-bottom: 52px;
    --side-h: 52px;
    --reserve-w: 110px;
  }
}

/* 右下に固定するもの（サイドメニューのご予約・言語切替）
   高さを揃えることで、JP/EN とご予約ボタンの中心線が合う */
.btn-reserve-fix,
.lang-switch {
  position: fixed;
  bottom: var(--side-bottom);
  height: var(--side-h);
  z-index: 90;
}

.btn-reserve-fix {
  right: var(--side-right);
}

/* ボタンの見た目。固定・本文中のどちらでも使う。
   幅と高さはサイドメニュー内では変数、本文中では既定値（Figma 188×47）になる */
.btn-reserve {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 2px 8px;
  width: var(--reserve-w, 188px);
  height: var(--side-h, 47px);
  border-radius: 2px;
  background: var(--color-gold);
  color: var(--color-white);
  transition: var(--transition);
}

@media screen and (max-width: 768px) {
  /* 固定のものだけ、画面端に寄せた縦組みのタブにする */
  .btn-reserve-fix {
    grid-template-columns: 1fr;
    align-content: center;
    justify-items: center;
    border-radius: 2px 0 0 2px;
  }
}

.btn-reserve .ja {
  font-size: var(--font-18);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
}
.btn-reserve .en {
  font-size: var(--font-14);
  letter-spacing: 0.02em;
  line-height: 1;
}
@media (hover: hover) {
  .btn-reserve:hover{
    background-color: var(--color-gold-h);
  }
}

/* 文字をページ背景と反転合成。ご予約の左隣に置く */
.lang-switch {
  list-style: none;
  margin: 0;
  padding: 0;
  right: calc(var(--side-right) + var(--reserve-w) + var(--side-gap));
  z-index: 91;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: var(--font-16);
  line-height: 1;
  mix-blend-mode: difference;
}

.lang-switch li + li {
  padding-left: 12px;
  border-left: 1px solid currentColor;
}

.lang-switch a {
  text-transform: uppercase;
  opacity: 0.4;
  transition: var(--transition);
}
.lang-switch .current-lang a {
  opacity: 1;
  pointer-events: none;
}
@media (hover: hover) {
  .lang-switch a:hover{
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .lang-switch {
    top: 14px;
    bottom: auto;
    right: calc(20px + 36px + 16px);
    height: 36px;
    font-size: var(--font-14);
  }
}

/* ------------------
Common parts
------------------ */
/* 縦組み見出し（辿る / 巡る / 過ごす / 味わう） */
.sec-ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
  /* Figma: 見出しブロックとリード文の間 73px */
  margin-bottom: clamp(40px, 5.7vw, 73px);
}

.sec-ttl .ja {
  width: 1em;
  font-size: var(--clamp-34);
  line-height: 1.5;
}

.sec-ttl .en {
  font-size: var(--font-16);
  letter-spacing: 0.14em;
  line-height: 1;
}
/* リード文の上の一文（桝一客殿を辿る。ほか） */
.sec-ttl + h3 {
  text-align: center;
  font-size: var(--clamp-22);
  letter-spacing: 0.19em;
  line-height: 2.01;
  margin-bottom: clamp(16px, 2.42vw, 31px);
}

.sec-lead {
  line-height: 2.1;
  font-size: var(--clamp-16);
}
@media screen and (max-width: 768px) {
  .sec-lead{
    line-height: 1.7;
  }
}

/* 下層ページの導入部（縦組みのキャッチ＋添えるリード文）
   巡る / 過ごす / 客室詳細 で共通 */
.intro-copy {
  /* 縦組みでは width が列の積み上がる方向のサイズになる。
     内容ぶんに縮めないと左右autoマージンが効かない */
  width: fit-content;
  max-width: 100%;
  writing-mode: vertical-rl;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--clamp-24);
  letter-spacing: 0.2em;
}
html[lang="en-US"] .intro-copy{
  writing-mode: horizontal-tb;
  max-width: var(--width-inner);
}

/* 縦組みでは p が右から左へ積まれるので、これが列の間隔になる */
.intro-copy p + p {
  margin-block-start: 1em;
}

.intro-lead {
  width: min(520px, 100%);
  margin: var(--space-6) auto 0;
  font-size: var(--clamp-16);
  line-height: 1.7;
}

@media screen and (max-width: 768px) {
  .intro-copy {
    font-size: var(--font-22);
  }
  .intro-lead {
    font-size: var(--font-14);
  }
}

/* 下線付きテキストリンク */
.link-more {
  font-size: var(--font-16);
  position: relative;
  display: inline-block;
  padding-bottom: .2em;
  min-width: 160px;
}

/* 下線。hoverで右方向に消え、解除で左から戻る */
.link-more::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .5px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--transition);
}

@media (hover: hover) {
  .link-more:hover::before,
  .link-more:focus-visible::before {
    transform: scaleX(0);
    transform-origin: right;
  }
}
.link-more-sm {
  min-width: 125px;
  position: relative;
}
.more-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
}

/* 罫線付きリンク（ポップアップ内など） */
.link-line {
  display: inline-block;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  font-size: var(--font-14);
}

.block-ttl {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  margin-bottom: var(--space-4);
}

/* ページの見出しとして使うときは一回り大きく */
.block-ttl.is-lg {
  margin-bottom: var(--space-7);
}

.block-ttl.is-lg .ja {
  font-size: var(--clamp-30);
}

/* MVを持たないページ。固定ヘッダーのぶん、上に余白を確保する */
.sec-plain {
  padding-block: var(--space-10);
}

/* アンカーで着地したときに上へ少し余裕を持たせる。
   padding と違い、見た目の余白は増やさずスクロール位置だけをずらす */
.explore-item,
.room,
.ski,
.stay-block {
  scroll-margin-top: var(--space-7);
}
.block-ttl .ja{
  font-size: var(--font-24);
}
.block-ttl .en{
  font-size: var(--font-16);
}

/* ------------------
animation
------------------ */
.ink-wrap{
  position: relative;
  width: min(1440px, 100%);
  margin-inline: auto;
}
/* 墨が広がるコマ送りアニメーション
   ※ 1コマ目は完全に空なので、再生前は visibility で隠さなくても見えない。
      display:none にすると IntersectionObserver が反応しないので使わないこと。 */
.ink {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 399 / 225;
  background: var(--ink-color, #07121E);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  animation-name: ink;
  animation-duration: var(--ink-duration, 2s);
  animation-fill-mode: forwards;
  /* 画面に入るまで1コマ目で停止 */
  animation-play-state: paused;
}

.ink.is-show {
  animation-play-state: running;
}

/* 辿るセクション */
.ink1-1 {
  --ink-duration: 2s;
  top: -240px;
  left: calc(var(--space-10) * -1);
  width: min(925px, 100%);
  -webkit-mask-image: url(../img/bg_ink1.webp);
  mask-image: url(../img/bg_ink1.webp);
  animation-timing-function: steps(29);
}

.ink1-2 {
  --ink-duration: 2s;
  bottom: -52px;
  left: calc(var(--space-10) * -1);
  width: min(723px, 80%);
  -webkit-mask-image: url(../img/bg_ink1.webp);
  mask-image: url(../img/bg_ink1.webp);
  animation-timing-function: steps(29);
}
@media screen and (max-width: 768px) {
  .ink1-1 {
    top: -120px;
  }
  .ink1-2 {
    bottom: -40px;
    left: auto;
    right: calc(var(--space-10) * -1);
  }
}

/* 過ごすセクション */
.ink2 {
  --ink-duration: 2s;
  top: calc(var(--space-10) * -1);
  right: calc(var(--space-10) * -1);
  width: min(812px, 100%);
  /* 墨の形を上下反転（コマ送りの順番は変わらない） */
  transform: scaleY(-1);
  -webkit-mask-image: url(../img/bg_ink2.webp);
  mask-image: url(../img/bg_ink2.webp);
  animation-timing-function: steps(29);
}
@media screen and (max-width: 768px) {
  .ink2{
    right: -100px;
  }
}

/* 味わうセクション */
.ink3 {
  --ink-color: #000;
  --ink-duration: 2.5s;
  top: var(--space-8);
  left: 50%;
  transform: translate(-50%, 0);
  width: min(775px, 100%);
  -webkit-mask-image: url(../img/bg_ink3.webp);
  mask-image: url(../img/bg_ink3.webp);
  animation-timing-function: steps(38);
}

@keyframes ink {
  from {
    -webkit-mask-position: 0 0%;
    mask-position: 0 0%;
  }
  to {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ink {
    animation: none;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
  }
}

.fade-up{
  opacity: 0;
  transform: translateY(40px);
  filter: blur(5px);
  transition: opacity 1s ease-out, transform 1s ease-out, filter 1s ease-out;
}
.fade-up.is-show{
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.blur {
  opacity: 0;
  filter: blur(10px);
  transition: opacity .6s ease-out, filter .6s ease-out;
}
.blur.is-show {
  opacity: 1;
  filter: blur(0);
}

.fade > * {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(5px);
  transition: opacity 1s ease-out, transform 1s ease-out, filter 1s ease-out;
}
.fade.is-show > * {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.fade.is-show > *:nth-child(2) {
  transition-delay: 0.15s;
}
.fade.is-show > *:nth-child(3) {
  transition-delay: 0.3s;
}
.fade.is-show > *:nth-child(4) {
  transition-delay: 0.45s;
}
.fade.is-show > *:nth-child(n + 5) {
  transition-delay: 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .blur,
  .fade > * {
    transition: none;
    transition-delay: 0s;
  }
}

/* ------------------
辿る / About
------------------ */

/* リード文と日本地図の重ね合わせ。
   地図は本文の背面に絶対配置し、下端は次の画像帯に潜り込ませる。
   min-height で地図ぶんの高さ（Figma: 1004px）を確保する。 */
.about-intro {
  position: relative;
  min-height: min(1000px, 78.125vw);
}

.about-intro .inner-narrow {
  z-index: 1;
}

.about-map {
  position: absolute;
  z-index: 0;
  top: min(74px, 5.78vw);
  left: 50%;
  width: min(876px, 68.44vw);
  transform: translateX(-30%);
  aspect-ratio: 876 / 1018;
}

.about-map-base {
  width: 100%;
}

/* 画面に入ったら、ピン側（右）から文字側（左）へ線が伸び、
   伸びきってからラベルがブラーで現れる（js/main.js の IntersectionObserver で .is-show） */
.about-map-line {
  position: absolute;
  left: 34%;
  top: 63%;
  width: 20%;
  height: 1px;
  background: var(--color-white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.8s ease-out;
}

.about-map-line.is-show {
  transform: scaleX(1);
}

/* 線（兄）が出たらラベル（弟）を遅れて表示する */
.about-map-line.is-show ~ .about-map-label {
  opacity: 1;
  filter: blur(0);
}.about-map-line {
  position: absolute;
  left: 34%;
  top: 63%;
  width: 20%;
  height: 1px;
  background: var(--color-white);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.8s ease-out;
}

.about-map-line.is-show {
  transform: scaleX(1);
}

/* 線（兄）が出たらラベル（弟）を遅れて表示する */
.about-map-line.is-show ~ .about-map-label {
  opacity: 1;
  filter: blur(0);
}

.about-map-pin {
  position: absolute;
  left: 53.7%;
  top: 62.8%;
  width: 0.64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-white);
}

.about-map-label {
  position: absolute;
  right: 68%;
  top: 59.2%;
  font-size: var(--font-16);
  letter-spacing: 0.08em;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  /* 線が伸びきる 0.8秒後から */
  transition: opacity 0.6s ease-out 0.8s, filter 0.6s ease-out 0.8s;
}

@media (prefers-reduced-motion: reduce) {
  .about-map-line,
  .about-map-label {
    transition: none;
  }
}
@media screen and (max-width: 768px) {
  .about-intro {
    min-height: min(840px,200vw);
    overflow: hidden;
  }

  .about-map {
    top: 260px;
    left: 50%;
    width: min(500px, 125%);
    transform: translateX(-50%);
  }

  /* 線の右端（ピン側 54%）は固定のまま、左を短くして画面外に出にくくする。
     ラベルは線の左端（40%）の 2% 左に付ける */
  .about-map-line {
    left: 40%;
    width: 14%;
  }

  .about-map-label {
    right: 62%;
    font-size: var(--font-14);
  }
}

.about-photo{
  margin: 0 calc(50% - 50vw) var(--space-8);
}
.about-photo ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 768px) {
  .about-photo ul li{
    overflow: hidden;
  }
  .about-photo ul li img{
    aspect-ratio: 130 / 157;
    object-fit: cover;
  }
}

.carousel-wrap {
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--space-8);
}
/* Safari対策：動き続ける要素に filter を残さない（blur(0)でも再描画が走るため） */
.carousel-wrap.fade-up {
  filter: none;
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.carousel {
  display: flex;
  width: max-content;
  animation: carousel-scroll var(--carousel-duration, 40s) linear infinite;
}
.carousel li {
  flex: none;
}
.carousel li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1枚の実寸をCSSで確定させる（画像の読み込み状況に左右されないようにする）
   --item-pitch = 画像1枚が占める横幅。25vw = 画面に4枚、50vw = 画面に2枚
   大型モニタで大きくなりすぎないよう min() で上限460pxを設定（超えると4枚以上見える）
   --carousel-shift = 1セット分の幅 = 1枚の占有幅 × 5枚
   HTMLには3セット並べてあるので、1セット分だけ動かすとループが繋がる */
.carousel.top-savor{
  --item-pitch: min(25vw, 460px);
  --item-gap: 1px;
  --item-w: calc(var(--item-pitch) - var(--item-gap));
  --item-h: calc(var(--item-w) * 740 / 624);
  --carousel-shift: calc(var(--item-pitch) * 5);
  --carousel-duration: 90s;
  margin-top: var(--space-8);
}
.carousel.top-savor li{
  width: var(--item-w);
  height: var(--item-h);
  margin-right: var(--item-gap);
}

@keyframes carousel-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(var(--carousel-shift, 33.3333%) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel {
    animation: none;
  }
}
@media screen and (max-width: 768px) {

  .carousel.top-savor {
    --item-pitch: 50vw;
    --carousel-duration: 60s;
  }
}

/* ------------------
味わい空間
------------------ */
.ajiwai {
  padding: var(--space-9) var(--space-6);
  background: var(--color-white);
  color: var(--color-ink);
}

.ajiwai-txt {
  width: 85%;
  margin-inline: auto;
}
.ajiwai-ttl {
  font-size: var(--clamp-28);
  letter-spacing: 0.21em;
  line-height: 1.4;
  margin-bottom: var(--space-3);
}
html[lang="en-US"] .ajiwai-ttl {
  letter-spacing: 0.05em;
}
.ajiwai-txt p {
  font-size: var(--clamp-16);
  line-height: 2.1;
}

.ajiwai-map {
  margin: var(--space-4) 0 0;
}

/* 界隈図（PC 905×672 / SPは番号入りの別画像に差し替え） */
.ajiwai-map-fig {
  position: relative;
  z-index: 2;
}

.ajiwai-map-img,
.ajiwai-map-img img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768.1px) {
  .ajiwai .more-wrap{
    margin-top: var(--space-1);
  }
}
@media screen and (max-width: 768px) {
  .ajiwai {
    padding: var(--space-5) var(--space-3);
  }
  .ajiwai-txt {
    width: 100%;
  }
  .ajiwai-map-fig {
    width: 100%;
  }
}


/* 凡例 */
.ajiwai-num {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(9, auto);
  grid-auto-flow: column;
  justify-content: start;
  counter-reset: number;
  gap: 8px 40px;
  margin-top: 40px;
  padding-left: min(68px, 5.3vw);
}

.ajiwai-num li {
  counter-increment: number;
  position: relative;
  padding-left: 26px;
  font-size: var(--font-14);
  line-height: 1.5;
}

.ajiwai-num li::before {
  content: counter(number);
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: var(--font-14);
  letter-spacing: -0.05em;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .ajiwai-num {
    display: none;
  }
}

/* --------------------------------
スポット
PC : 地図上の番号マーカー ＋ ポップアップ
SP : 地図の下のアコーディオン（番号は地図画像に焼き込み済み）
-------------------------------- */
.spot-num {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-en);
  letter-spacing: -0.05em;
  line-height: 1;
}

.spot-panel-img img {
  width: 100%;
  height: auto;
}

.spot-panel-ttl {
  font-size: var(--clamp-18);
  line-height: 1.84;
}

.spot-panel-txt {
  font-size: var(--clamp-13);
  line-height: 1.7;
}

/* ===== PC ===== */
@media screen and (min-width: 768.1px) {
  .spot-list {
    position: absolute;
    inset: 0;
  }

  .spot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: clamp(24px, 2.656vw, 34px);
  }

  .spot-head {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    transition: transform var(--transition);
  }

  .spot-head:hover {
    transform: scale(1.08);
  }

  .spot-num {
    width: 100%;
    height: 100%;
    font-size: clamp(17px, 1.875vw, 24px);
    transition: background-color var(--transition);
  }

  /* 開いているスポットのマーカー（34px → 40px / 濃赤） */
  .spot.is-open .spot-num {
    background: #9d0000;
  }

  /* マーカー上では名前と矢印は出さない */
  .spot-name,
  .spot-arrow {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ポップアップ（470×292 / マーカーの左上に出す） */
  .spot-panel {
    position: absolute;
    left: max(-80px, -6.25vw);
    bottom: calc(100% + min(24px, 1.875vw));
    z-index: 3;
    display: flex;
    gap: min(24px, 1.88vw);
    width: min(470px, 50vw);
    padding: min(44px, 3.44vw) min(36px, 2.81vw) min(43px, 3.36vw) min(40px, 3.13vw);
    background: var(--color-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: left;
    transition: opacity var(--ease-soft), transform var(--ease-soft),
      filter var(--ease-soft), visibility var(--ease-soft);
  }

  /* 地図の右端／上端に寄ったスポットは反対側へ逃がす */
  .spot.is-left .spot-panel {
    left: auto;
    right: max(-80px, -6.25vw);
  }

  .spot.is-below .spot-panel {
    top: calc(100% + min(24px, 1.875vw));
    bottom: auto;
  }

  /* hidden 属性で開閉。display:none だとトランジションが効かないため
     visibility + opacity + translateY でふわっと出し入れする */
  .spot-panel[hidden] {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    filter: blur(3px);
    pointer-events: none;
  }

  .spot-panel-img {
    flex: none;
    width: min(160px, 12.5vw);
    overflow: hidden;
  }

  .spot-panel-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .spot-panel-txt {
    margin-top: 13px;
  }

  .spot-panel .link-line {
    margin: .5em 0 0 auto;
  }

  .spot-close {
    position: absolute;
    right: 4.68%;
    top: min(18px, 1.4vw);
    width: 12px;
    height: 12px;
  }

  .spot-close::before,
  .spot-close::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: var(--color-black);
  }

  .spot-close::before {
    transform: rotate(45deg);
  }

  .spot-close::after {
    transform: rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spot-panel,
  .spot-head,
  .spot-num {
    transition: none;
  }
}

/* ===== SP：アコーディオン ===== */
@media screen and (max-width: 768px) {

  .spot-list {
    margin-top: var(--space-5);
  }

  .spot {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
  }

  .spot:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }

  .spot-head {
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 16px 8px 16px 0;
    text-align: left;
  }

  .spot-num {
    width: 20px;
    height: 20px;
    font-size: var(--font-16);
  }

  .spot-name {
    font-size: var(--font-16);
    line-height: 1.5;
  }

  .spot-arrow {
    flex: none;
    width: 8px;
    height: 8px;
    margin: -4px 2px 0 auto;
    border-right: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    rotate: 45deg;
    /* 上下位置は margin ではなく translate で。margin だと開いた瞬間にカクッと沈む */
    transition: rotate var(--transition), translate var(--transition);
  }

  .spot.is-open .spot-arrow {
    translate: 0 8px;
    rotate: -135deg;
  }

  /* 開閉は JS が実寸を測って height をアニメーションさせる（インラインstyleで上書き） */
  .spot-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* 余白は開いた時だけ。閉じている間は0 */
    padding-bottom: 0;
    height: 0;
    overflow: hidden;
    transition: height var(--transition), padding-bottom var(--transition);
  }

  /* 高さが変わる途中で中身が潰れないように（潰れると一度沈んでから開く動きになる） */
  .spot-panel > * {
    flex: none;
  }

  .spot.is-open .spot-panel {
    padding-bottom: 24px;
  }

  /* hidden は閉じるアニメーションが終わってから JS が付ける。
     display:none にすると次に開けないので、visibility でフォーカス不可にする */
  .spot-panel[hidden] {
    display: flex;
    visibility: hidden;
  }

  .spot-panel-img {
    overflow: hidden;
  }

  .spot-panel-txt {
    font-size: var(--font-14);
  }

  /* inline-block のままだと margin:auto が効かないのでブロック化して右寄せ */
  .spot-panel .link-line {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-top: 1em;
  }

  /* SPは閉じるボタンではなく見出しのタップで閉じる */
  .spot-close {
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .spot-panel,
    .spot-arrow {
      transition: none;
    }
  }
}


/* ------------------
巡る / Explore
------------------ */


.band {
  margin-block: var(--space-7);
  aspect-ratio: 1920 / 816;
  overflow: hidden;
}

.band img,
.band video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explore-card {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 1px;
}

.explore-card a {
  position: relative;
  display: block;
  overflow: hidden;
}

/* hover時の暗幕 */
.explore-card a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity var(--transition);
}

.explore-card img {
  transition: filter var(--transition);
}


.explore-card h3 {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  z-index: 2;
  writing-mode: vertical-rl;
  color: var(--color-white);
  font-size: var(--clamp-22);
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* hoverで下からふんわり出るテキスト */
.explore-card span {
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-1);
  z-index: 2;
  transform: translateY(10px);
  color: var(--color-white);
  font-size: var(--clamp-14);
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
}
/* 英語 */
html[lang="en-US"] .explore-card h3 {
  top: auto;
  bottom: var(--space-1);
  left: 4px;
}
html[lang="en-US"] .explore-card span {
  left: var(--space-5);
}



@media (hover: hover) {
  .explore-card a:hover::before,
  .explore-card a:focus-visible::before {
    opacity: 1;
  }

  .explore-card a:hover span,
  .explore-card a:focus-visible span {
    opacity: 1;
    transform: translateY(0);
  }

  .explore-card a:hover img,
  .explore-card a:focus-visible img {
    filter: brightness(0.9) contrast(0.9);
  }
}

@media screen and (max-width: 768px) {
  .explore-card {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }

  .explore-card li {
    flex: 0 0 calc(50% - 1px);
  }

  /* SPはhoverがないため、暗幕とテキストを常時表示 */
  .explore-card a::before {
    opacity: 1;
  }

  .explore-card img {
    filter: brightness(0.95) contrast(0.9);
  }

  .explore-card span {
    left: var(--space-1);
    right: var(--space-1);
    opacity: 1;
    transform: translateY(0);
  }
}
/* ------------------
過ごす / Stay
------------------ */
.top-stay {
  display: grid;
  grid-template-areas: "photo ttl" "photo txt";
  grid-template-columns: 61% 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--color-white);
  color: var(--color-ink);
  margin-top: var(--space-5);
}
@media screen and (max-width: 768px) {
  .top-stay {
    grid-template-areas: "ttl" "photo" "txt";
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    gap: var(--space-3);
    padding: var(--space-3);
  }
}

.top-stay-photo{
  grid-area: photo;
}
.stay-slide {
  aspect-ratio: 640 / 427;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .stay-slide{
    margin-inline: calc(var(--space-3) * -1)
  }
}

/* Splide（type: fade）：トラックを枠いっぱいに広げる */
.stay-slide .splide__track,
.stay-slide .splide__list,
.stay-slide .splide__slide {
  width: 100%;
  height: 100%;
}

.stay-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-thumbs {
  display: flex;
  gap: 1px;
  margin-top: var(--space-2);
}

.slide-thumbs li {
  width: 11.4%;
  aspect-ratio: 73 / 49;
  overflow: hidden;
  cursor: pointer;
  transition: opacity var(--transition);
}

@media screen and (max-width: 768px) {
  .slide-thumbs li {
    width: calc(20% - 1px);
  }
}

.slide-thumbs li.is-current {
  opacity: 0.5;
}

.slide-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-stay h3 {
  grid-area: ttl;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--space-6) auto;
  font-size: var(--clamp-20);
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.top-stay h3 .ja {
  writing-mode: vertical-rl;
}
.top-stay h3 .en{
  color: var(--color-gray);
  font-size: var(--font-12);
  letter-spacing:0;
  margin-top: 1em;
}

.top-stay-txt {
  grid-area: txt;
  display: flex;
  flex-direction: column;
}
.top-stay-txt p {
  font-size: var(--font-14);
  line-height: 1.8;
}
@media screen and (min-width: 768.1px) {
  .top-stay-txt p {
    padding-inline: 1em 2em;
  }
}
.top-stay-txt .link-more {
  margin: 60px 0 0 auto;
}


/* ------------------
NEWS
------------------ */ 
/* お知らせ一覧 */
.news-list a {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 1em 0 .5em;
  border-bottom: 1px solid var(--color-line);
}
@media screen and (max-width: 768px) {
  .news-list a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1em 0 .2em;
  }
}

/* お知らせ一覧ページ用。1件ごとの間隔を広く取る */
.news-list.is-page a {
  padding: var(--space-2) 0;
}

.news-date {
  flex: none;
  font-family: var(--font-en);
  font-size: var(--clamp-16);
}

.news-ttl {
  font-size: var(--clamp-18);
}

/* お知らせ詳細 */
.inner-article{
  width: min(940px, 88%);
  margin-inline: auto;
}

.article-ttl {
  font-size: var(--clamp-24);
  font-weight: 600;
  line-height: 1.2;
}

.article-date {
  display: block;
  margin-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--clamp-18);
}

.article-cont {
  margin-top: var(--space-8);
  font-size: var(--font-16);
  line-height: 2.1;
  color: var(--color-black);
}

.article-cont > * + * {
  margin-top: var(--space-6);
}

.article-cont > p + p {
  margin-top: 1em;
}

.article-cont img {
  width: 100%;
  height: auto;
}
.article-cont a{
  font-weight: 400;
  text-decoration: underline;
}
.article-cont a:hover{
  text-decoration: none;
}

/* 前の記事 / 記事一覧 / 次の記事。一覧が常に中央に来るよう両脇は同幅にする */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: var(--space-8);
  font-size: var(--clamp-16);
}

.pager-list {
  padding-inline: var(--space-2);
  border-inline: 1px solid var(--color-ink);
  line-height: 1;
  padding-block: .2em;
}

.pager-prev,
.pager-next {
  display: flex;
  align-items: center;
  gap: .5em;
  padding-inline: var(--space-2);
}

.pager-prev {
  justify-self: end;
}

.pager-next {
  justify-self: start;
}

/* 矢印は border で作る（下向きの「v」を回して左右にする） */
.pager-prev::before,
.pager-next::after {
  content: "";
  width: 9px;
  aspect-ratio: 1;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid   currentColor;
}

.pager-prev::before {
  transform: rotate(135deg);
}

.pager-next::after {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
  .article-cont {
    margin-top: var(--space-6);
  }
  .pager-prev,
  .pager-next {
    padding-inline: var(--space-1);
  }
  .pager-list {
    padding-inline: var(--space-1);
  }
}

@media (hover: hover) {
  .pager a:hover,
  .pager a:focus-visible {
    opacity: .6;
  }
}

/* ページ送り（the_posts_pagination） */
.pagination {
  margin-top: var(--space-7);
}

.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5em var(--space-1);
}

.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5em;
  height: 2.5em;
  padding: 0 .5em;
  font-family: var(--font-en);
  font-size: var(--clamp-16);
  line-height: 1;
  transition: background-color var(--transition), color var(--transition);
}

.pagination .page-numbers.current {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.pagination .page-numbers.dots {
  min-width: 0;
}

.pagination .prev,
.pagination .next {
  font-family: var(--font-serif);
  font-size: var(--clamp-14);
}

@media (hover: hover) {
  .pagination a.page-numbers:hover,
  .pagination a.page-numbers:focus-visible {
    background-color: var(--color-navy);
    color: var(--color-white);
  }
}


/* アクセス */
.access {
  margin-top: var(--space-9);
}

.access-address {
  font-size: var(--clamp-18);
  line-height: 1.7;
}

.access-map {
  margin-block: var(--space-3);
  aspect-ratio: 1040 / 320;
  overflow: hidden;
}

.access-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0);
}

.access-btm {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .access-map{
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 390 / 228;
  }
  .access-btm {
    flex-direction: column;
    gap: var(--space-3);
  }

  .access-btm .btn-map {
    align-self: flex-end;
  }
}

.access-note {
  font-size: var(--font-14);
}

.btn-map {
  display: grid;
  place-items: center;
  border: 0.5px solid var(--color-black);
  background: var(--color-white);
  font-family: var(--font-en);
  padding: .5em 2em;
  transition: all var(--transition);
}
.btn-map:hover{
  color: var(--color-white);
  background-color: var(--color-black);
}




/* ------------------
footer
------------------ */
.footer {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) 0 var(--space-2);
  background: var(--color-black);
  color: var(--color-white);
}

.footer > * {
  position: relative;
  z-index: 1;
}

.ft-wrap{
  display: grid;
  gap: var(--space-6) var(--space-1);
}
@media screen and (min-width: 768.1px) {
  .ft-wrap{
    grid-template-areas: "menu menu" "info bnr";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .ft-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}
@media screen and (max-width: 768px) {
  .ft-wrap{
    grid-template-areas: "info info" "menu bnr";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
}
    
.ft-nav{
  grid-area: menu;
}


.ft-menu > li:not(.ft-menu-sns) {
  flex: none;
  min-width: 3em;
}
@media screen and (max-width: 768px) {
  .ft-menu > li{
    margin-bottom: .5em;
  }
}

.ft-menu > li > a {
  font-size: var(--font-16);
  font-weight: 500;
  white-space: nowrap;
}

.ft-menu ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-12);
  white-space: nowrap;
}
@media screen and (min-width: 768.1px) {
  .ft-menu ul {
    margin-top: 16px;
  }
}

.ft-menu-sns a{ 
  padding-top: 4px;
  width: 24px;
  display: block;
}
li:not(.ft-menu-sns) + .ft-menu-sns {
  margin-left: auto;
}
.ft-menu-sns + .ft-menu-sns{
  margin-left: -16px;
}

@media screen and (max-width: 768px) {
  .ft-menu-sns {
    display: inline-block;
  }
  .ft-menu > li.ft-menu-sns {
    margin-bottom: 0;
  }
  .ft-menu-sns + .ft-menu-sns{
    margin-left: 4px;
  }
}


.ft-info {
  grid-area: info;
}

.ft-logo {
  width: 56px;
  margin-bottom: 8px;
}

.ft-address {
  font-size: var(--clamp-14);
  white-space: nowrap;
}
.ft-address span{
  display: block;
  font-size: var(--clamp-20);
}


@media screen and (max-width: 768px) {
  .ft-logo{ 
    width: 70px;
    margin-inline: auto;
  }
  .ft-address {
    width: 100%;
  }
    
  .ft-info{
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

.ft-bnr {
  grid-area: bnr;
  display: flex;
  gap: 8px;

}

@media screen and (min-width: 768.1px) {
  .ft-bnr {
    justify-content: flex-end;
    align-self: self-end;
  }
  .ft-bnr li {
    width: min(148px, calc(100% / 3));
  }
}
@media screen and (max-width: 768px) {
  .ft-bnr{
    flex-direction: column;
    align-items: flex-end;
  }
  .ft-bnr li{
    width: min(134px, 100%);
  }
}

.copyright {
  font-family: var(--font-en);
  font-size: var(--font-12);
  letter-spacing: 0.03em;
  text-align: center;
  margin-top: var(--space-4);
}


/* ==================================================
下層ページ共通
================================================== */

/* ------------------
下層MV
------------------ */
.page-mv {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

.page-img,
.page-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* .page-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.413);
} */

/* SPは #696969 を50%で乗算 → 黒29.4%と等価 */
@media screen and (max-width: 768px) {
  .page-img.page-savor img {
    object-position: 35% center;
  }
}

.page-ttl {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  text-align: center;
}

.page-ttl .ja {
  writing-mode: vertical-rl;
  font-size: var(--font-42);
  letter-spacing: .2em;
}

.page-ttl .en {
  font-size: var(--font-18);
  letter-spacing: 0.1em;
  line-height: 1;
}

.page-ttl.is-house {
  color: var(--color-yellow);
}
/* ------------------
下層の見出し＋本文（想い / 紐解く / 味わい空間）
------------------ */
.lead-block {
  display: flex;
  align-items: center;
  gap: var(--space-9);
}

.lead-ttl {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lead-ttl .ja {
  font-size: var(--clamp-34);
  white-space: nowrap;
}

.lead-ttl .en {
  font-size: var(--font-16);
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
}

.lead-txt p {
  font-size: var(--clamp-16);
  line-height: 2.1;
}

@media screen and (max-width: 768px) {
  .lead-block {
    display: block;
  }
  .lead-ttl {
    margin-bottom: clamp(32px, 14.6vw, 57px);
  }
  .lead-txt p {
    font-size: var(--font-14);
    line-height: 1.7;
  }
}

/* ------------------
全幅の帯写真
------------------ */
.photo-band {
  width: 100%;
  aspect-ratio: 1279 / 385;
  overflow: hidden;
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media screen and (max-width: 768px) {
  .photo-band {
    aspect-ratio: 428 / 281;
  }
}


/* ==================================================
辿る / About
================================================== */

/* ------------------
写真＋縦書きコピーのモンタージュ
Figmaの1280×1737の版面をそのまま%に置き換えて絶対配置している。
比率を固定しているので、画面幅が変わっても組みが崩れない。
------------------ */
.pad0 {
  padding-block: 0;
}

.about-visual {
  position: relative;
  width: min(1280px, 100%);
  margin-inline: auto;
  aspect-ratio: 1280 / 1737;
  padding-top: var(--space-8);
}

.about-visual figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 768.1px) {
  .about-visual figure {
    position: absolute;
    margin: 0;
    overflow: hidden;
  }

  .about-visual .v1 {
    left: 9%;
    top: 7.6%;
    width: 40.6%;
    aspect-ratio: 520 / 644;
  }

  .about-visual .v2 {
    right: 0;
    top: 41.1%;
    width: 43.6%;
    aspect-ratio: 558 / 413;
  }

  .about-visual .v3 {
    left: 0;
    top: 56.25%;
    width: 42.3%;
    aspect-ratio: 542 / 540;
  }

  .about-visual .v4 {
    right: 0;
    bottom: 0;
    width: 50%;
    aspect-ratio: 644 / 260;
  }
}

@media screen and (max-width: 768px) {
  .about-visual {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
  }
  .about-visual figure {
    aspect-ratio: 390 / 200;
    overflow: hidden;
  }
  .about-visual figure,
  .about-copy {
    width: 100%;
  }
  /* SPデザインでは廊下の写真は使わない */
  .about-visual .v3 {
    display: none;
  }
  .about-copy.c1 { order: 1; }
  .about-visual .v1 { order: 2; }
  .about-copy.c2 { order: 3; }
  .about-visual .v2 { order: 4; }
  .about-copy.c3 { order: 5; }
  .about-visual .v4 { order: 6; }
}

/* コピー（縦書き＋英文） */
.about-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.about-copy .ja{
    font-size: var(--clamp-24);
    letter-spacing: 0.3em;
}
.about-copy .en{
  font-size: var(--clamp-16);
  white-space: nowrap;
  color: var(--color-gray);
}
@media screen and (min-width: 768.1px) {
  .about-copy{
    position: absolute;
  }
  .about-copy .ja {
    writing-mode: vertical-rl;
  }
  .about-copy.c3 .en {
    margin-top: -10px;
  }

  .about-copy.c1 {
    left: 75%;
    top: 15%;
    transform: translateX(-50%);
  }
  .about-copy.c2 {
    right: 50%;
    top: 48%;
    align-items: flex-end;
    gap: 0;
  }
  .about-copy.c2 .ja {
    writing-mode: horizontal-tb;
    line-height: 1.4;
  }
  .about-copy.c3 {
    left: 75%;
    top: 69%;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 768px) {
  /* SPのコピーは横組み・中央揃え */
  .about-copy {
    align-items: center;
    gap: var(--space-1);
    text-align: center;
  }
  .about-copy .ja,
  .about-copy.c2 .ja {
    writing-mode: horizontal-tb;
    font-size: var(--font-20);
    line-height: 1.4;
  }
}

/* ------------------
年表（紐解く）
Figmaの注記どおり、各ブロックを position: sticky で画面に留め、
次のブロックが下から重なって上がってくる紙芝居にしている。
------------------ */
.history-item {
  position: sticky;
  top: 0;
  background: #F1F1F1;
  color: var(--color-ink);
  border-top: 1px solid #fff;
}

.history-inner {
  display: grid;
  grid-template-columns: min(375px, 34%) minmax(0, 551px);
  grid-template-areas:
    "fig year"
    "fig ttl"
    "fig txt";
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: var(--space-5) var(--space-6);
  padding-block: var(--space-7) var(--space-9);
}
@media screen and (min-width: 768.1px) {
  .history-inner {
    min-height: 100dvh;
  }
}

.history-fig {
  grid-area: fig;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
}

.history-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.history-fig picture {
  display: block;
  width: 100%;
  height: 100%;
}

.history-year {
  grid-area: year;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-gold);
  font-size: var(--clamp-20);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
}

.history-year img {
  width: 14px;
  height: 14px;
}

.history-ttl {
  grid-area: ttl;
  font-size: var(--clamp-30);
  line-height: 1.6;
}

.history-txt {
  grid-area: txt;
}

.history-txt p + h4{
  margin-top: var(--space-4);
}

.history-txt h4 {
  font-size: var(--clamp-20);
  margin-bottom: .5em;
}

.history-txt p {
  font-size: var(--clamp-16);
  line-height: 1.7;
}

@media screen and (max-width: 768px) {
  /* SPは1ブロックが画面より高くなり、stickyだと下部が読めなくなるので通常スクロール */
  .history-item {
    position: static;
  }
  /* 年 → 画像 → 見出し → 本文 の縦並びに組み替える */
  .history-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "year"
      "fig"
      "ttl"
      "txt";
    grid-template-rows: auto;
    justify-items: center;
    gap: 24px;
    border-bottom: 1px solid #fff;
  }
  .history-ttl{
    margin-top: .5em;
  }
  .history-fig {
    width: min(90%, 400px);
  }
  .history-ttl {
    font-size: var(--font-20);
    font-weight: 500;
    text-align: center;
  }

  .history-txt h4 {
    font-size: var(--font-16);
    font-weight: 500;
  }
  .history-txt p {
    font-size: var(--font-14);
  }
}

/* 界隈図だけを単体で置くとき（下層ページ用。index.htmlの .ajiwai と同じ横幅に揃える） */
.ajiwai-only {
  padding-inline: var(--space-6);
}

@media screen and (max-width: 768px) {
  .ajiwai-only {
    padding-inline: 0;
  }
}


/* ==================================================
巡る / Explore
================================================== */

/* ------------------
リード文（墨の上に重なる）
------------------ */

.explore-lead {
  padding-block: var(--space-8);
  font-size: var(--clamp-20);
  line-height: 2.15;
  text-align: center;
}
.explore-lead span{
  display: block;
}
@media screen and (max-width: 768px) {
  .explore-list {
    margin-block: var(--space-4) var(--space-10);
  }
}

.explore-item {
  position: relative;
  display: grid;
  grid-template-columns: 55.7% minmax(0, 1fr);
  grid-template-areas:
    "fig ttl"
    "fig txt"
    "fig link";
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-6);
  margin-bottom: var(--space-9);
}

.explore-item:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 55.7%;
  grid-template-areas:
    "ttl fig"
    "txt fig"
    "link fig";
}

.explore-fig {
  grid-area: fig;
  aspect-ratio: 580 / 360;
  overflow: hidden;
}

.explore-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explore-item-ttl {
  grid-area: ttl;
  font-size: var(--clamp-28);
  letter-spacing: 0.06em;
  margin-bottom: 1em;
  line-height: 1;
}

.explore-desc {
  grid-area: txt;
}

.explore-desc p {
  font-size: var(--clamp-16);
  line-height: 1.7;
}

.explore-item .link-more {
  grid-area: link;
  justify-self: end;
  align-self: end;
}

@media screen and (max-width: 768px) {
  .explore-item,
  .explore-item:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "ttl"
      "fig"
      "txt"
      "link";
    grid-template-rows: auto;
    justify-items: center;
    row-gap: 32px;
    padding: 40px 24px;
    margin-bottom: 0;
  }
  .explore-item-ttl {
    margin-bottom: 0;
    font-size: var(--font-26);
    text-align: center;
  }
  .explore-fig {
    width: 100%;
    aspect-ratio: 344 / 206;
  }
  .explore-desc {
    width: 100%;
  }
  .explore-desc p {
    font-size: var(--font-14);
  }
}
.deco-kanji {
  position: absolute;
  z-index: -1;
  left: var(--x);
  top: var(--y);
  pointer-events: none;
  user-select: none;
  color: #1d2734;
  font-size: clamp(128px, 12.5vw, 160px);
  letter-spacing: 0.1em;
  line-height: 1;
  opacity: 0.06;
}
@media screen and (max-width: 768px) {
  /* SPは配置が変わるので --sp-x / --sp-y を優先する（未指定ならPCの値） */
  .deco-kanji {
    left: var(--sp-x);
    top: var(--sp-y);
    font-size: clamp(80px, 25.64vw, 100px);
  }
}


/* ==================================================
過ごす / Stay（下層）
================================================== */

/* ------------------
導入（リード文と2つの入口）
------------------ */
.stay-nav {
  display: flex;
  justify-content: center;
  gap: clamp(40px, 8.1vw, 104px);
  margin-top: var(--space-8);
}

.stay-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stay-nav-ja {
  font-size: var(--clamp-24);
  font-weight: 500;
  line-height: 1.1;
}

.stay-nav-en {
  font-family: var(--font-en);
  font-size: var(--font-12);
  color: var(--color-gray);
  letter-spacing: 0.12em;
  line-height: 2.75;
}

/* 丸ボタン（下向き矢印） */
.btn-circle {
  display: grid;
  place-items: center;
  width: clamp(110px, 11.3vw, 145px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  transition: background var(--transition), transform var(--transition);
}

/* 矢印はマスクで抜いて色をCSSから当てる。
   <img> で読み込んだSVGは外側のCSSが効かず、中の currentColor も黒になるため。 */
.btn-circle::before {
  content: "";
  width: clamp(20px, 2vw, 26px);
  aspect-ratio: 26 / 27;
  background: currentColor;
  -webkit-mask: url(../img/icon_arrow_down.svg) no-repeat center / contain;
  mask: url(../img/icon_arrow_down.svg) no-repeat center / contain;
}

@media (hover: hover) {
  .stay-nav a:hover .btn-circle,
  .stay-nav a:focus-visible .btn-circle {
    transform: translateY(6px);
  }
}

@media screen and (max-width: 768px) {
  .stay-nav {
    gap: var(--space-5);
    margin-top: var(--space-6);
  }
  .btn-circle {
    width: 54px;
  }
  .btn-circle::before {
    width: 12px;
  }
}

/* ------------------
桝一客殿 / 桝一ハウス のブロック
------------------ */
.stay-block {
  display: grid;
  grid-template-columns: 1fr 63%;
  align-items: start;
  column-gap: var(--space-4);
}

.stay-ttl {
  font-size: var(--clamp-28);
  letter-spacing: 0.25em;
  text-align: center;
  /* 字間ぶん右にずれるので、中央に見えるよう戻す */
  text-indent: 0.25em;
  margin-bottom: 1em;
}

.stay-txt p {
  font-size: var(--clamp-16);
  line-height: 2.1;
}


.stay-fig {
  aspect-ratio: 656 / 369;
  overflow: hidden;
}

.stay-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stay-block ~ .stay-block {
  margin-top: var(--space-10);
}

@media screen and (max-width: 768px) {
  .stay-block {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .stay-fig {
    order: -1;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 390 / 300;
  }
  .stay-txt {
    margin-top: 60px;
  }
}

/* ------------------
客室サムネイル
------------------ */
.room-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: var(--space-6);
}

.house-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-6);
}

.room-list li,
.house-list li {
  position: relative;
  overflow: hidden;
}

/* 画像は書き出したサイズの比率のまま見せる（PC / SP それぞれの画像に従う） */
.room-list li a,
.house-list li a,
.room-list li picture,
.house-list li picture {
  display: block;
}

.room-list li img,
.house-list li img {
  width: 100%;
  height: auto;
  filter: saturate(0.85) brightness(0.75);
  transition: filter var(--transition);
}

/* hoverで写真の彩度を上げる */
@media (hover: hover) {
  .room-list li a:hover img,
  .room-list li a:focus-visible img,
  .house-list li a:hover img,
  .house-list li a:focus-visible img {
    filter: saturate(1) brightness(1.3);
  }
}

/* 画像の左上に置く縦組みのラベル */
.room-name {
  position: absolute;
  left: 20px;
  top: 20px;
  writing-mode: vertical-rl;
  color: var(--color-white);
  font-size: var(--clamp-18);
  font-weight: 600;
  letter-spacing: 0.2em;
}

.tcy {
  text-combine-upright: all;
  margin-bottom: .25em;
}

@media screen and (max-width: 768px) {
  .stay-sec {
    padding-top: 0;
  }

  .room-list,
  .house-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .room-name {
    writing-mode: horizontal-tb;
    left: 16px;
    top: 16px;
    letter-spacing: 0.04em;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  }
  .tcy {
    margin-bottom: 0;
  }
}


/* ==================================================
巡る：テーマ詳細ページ（食と酒 ほか）
================================================== */

/* ------------------
左右分割のMV（左＝コピー / 右＝写真）
.page-mv の中に置いて使う。背景色と文字色は .bg-navy 側が持つ。
------------------ */
.subpage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100dvh;
}

.subpage-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 6.25vw, 80px) 0 clamp(24px, 9.37vw, 120px);
}


.subpage-ttl .ja {
  font-size: var(--clamp-34);
  letter-spacing: .08em;
}

.subpage-ttl .en {
  display: block;
  font-size: var(--font-16);
  letter-spacing: 0.1em;
}

.subpage-lead {
  margin-top: var(--space-3);
  font-size: var(--clamp-16);
  line-height: 2.1;
}

.subpage-img{
  width: 100%;
  height: 100dvh;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .subpage {
    grid-template-columns: 1fr;
    grid-template-rows: 40% 60%;
  }
  .subpage-img {
    order: -1;
    height: 100%;
  }
  .subpage-img.is-snow{
    object-position: center 70%;
  }
  .subpage-txt {
    justify-content: start;
    padding: var(--space-2) 6%;
  }
  .subpage-lead {
    font-size: var(--font-14);
    line-height: 1.7;
  }
}

/* ------------------
本文セクション
------------------ */
.detail {
  display: flex;
  gap: var(--space-6);
}
.detail:not(:first-child){ 
  margin-top: var(--space-9);
}
.detail-ttl {
  color: var(--color-gold);
  font-size: var(--clamp-34);
  line-height: 1.4;
  margin-bottom: .8em;
}
.detail-txt {
  flex: 1;
  min-width: 0;
}
.detail-txt p {
  font-size: var(--clamp-16);
  line-height: 2.1;
}
.detail-fig {
  flex: 0 0 46%;
  position: relative;
  align-self: stretch;
  overflow: hidden;
}
.detail-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 比率は --ratio でページごとに上書きできる（既定は 1042:400） */
.detail-wide {
  aspect-ratio: var(--ratio, 1042 / 400);
  overflow: hidden;
  margin: var(--space-6) 0 0;
}

.detail-wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .detail {
    flex-direction: column;
  }
  .detail.detail-top{
    flex-direction: column-reverse;
    margin-top: calc(var(--space-9) * -1);
  }
  .detail-top .detail-fig{
    margin-inline: calc(50% - 50vw);

  }
  /* SPは縦積みで高さの基準がなくなるため、比率で高さを持たせる */
  .detail-fig {
    flex: none;
    aspect-ratio: 390 / 220;
  }
  .detail-txt p {
    font-size: var(--font-14);
    line-height: 1.7;
  }
  .detail-wide {
    aspect-ratio: 3 / 2;
    margin: var(--space-4) 0 0;
  }
}

/* ------------------
施設の紹介（写真＋テキスト＋リンク）
------------------ */
.place {
  display: grid;
  grid-template-areas: 'img txt';
  grid-template-columns: 28% 1fr;
  gap: 1em 2em;
  margin-top: var(--space-6);
  background-color: #fff;
}
@media screen and (min-width: 768.1px) {

  .place + .place {
    margin-top: 8px;
  }
}

@media screen and (max-width: 768px) {
  .place {
    grid-template-columns: 1fr;
    grid-template-areas:"ttl" "img" "txt" "btn";
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    padding-block: 2em 1em;
  }

  .place + .place {
    margin-top: 0;
  }
}

.place-fig {
  grid-area: img;
  position: relative;
  overflow: hidden;
}
.place-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* トリミングできない画像用。切り抜かずに全体を中央に収め、余った部分は黒背景にする */
.place-fig.is-contain {
  background: #000;
}
.place-fig.is-contain img {
  object-fit: contain;
  object-position: center;
}

.place-ttl {
  grid-area: ttl;
  font-size: var(--font-20);
  font-weight: 500;
  line-height: 1;
}
.place-txt p{
  font-size: var(--font-14);
  line-height: 1.7;
}

@media screen and (min-width: 768.1px) {
  .place-txt{
    grid-area: txt;
    padding: 2em var(--space-4) 2em 0;
  }
  .place:has(a) .place-txt{
    padding-bottom: 1.5em;
  }
  .place-txt p {
    margin-top: 1em;
  }
  .place-txt .more-wrap{
    margin-top: 1em;
  }
}
@media screen and (max-width: 768px) {
  .place-txt {
    display: contents;
  }
  .place-txt p{
    grid-area: txt;
  }
  .place-txt .more-wrap{
    grid-area: btn;
    margin-top: 0;
    margin-bottom: var(--space-4);
  }
  .place-fig {
    aspect-ratio: 346 / 180;
  }
}

/* ------------------
ページ下部のテーマ切り替え
------------------ */
.explore-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: var(--space-9);
}

.explore-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  gap: .5em;
  background-color: rgba(16, 29, 42, 0.6);
  color: var(--color-white);
  text-align: center;
  transition: background-color var(--transition);
}
@media screen and (max-width: 768px) {
  .explore-nav {
    grid-template-columns: 1fr;
  }
  .explore-nav a {
    aspect-ratio: auto;
    padding: var(--space-2) 0;
  }
}

.explore-nav .ja {
  font-size: var(--clamp-18);
  line-height: 1;
}

.explore-nav .en {
  font-size: var(--font-12);
  line-height: 1;
}

.explore-nav .is-current a {
  background: #101D2A;
  pointer-events: none;
}

@media (hover: hover) {
  .explore-nav a:hover,
  .explore-nav a:focus-visible {
    background: #101D2A;
  }
}




/* ------------------
雪山への基点：スキー場の地図とピン
------------------ */
.snow {
  margin-block: var(--space-8);
}

.snow-wrap {
  display: grid;
  grid-template-columns: 32% 1fr;
  gap: var(--space-6);
}

.snow-txt p {
  font-size: var(--clamp-16);
  line-height: 2.1;
}

.snow-txt p.snow-note {
  margin-top: 1em;
  font-size: var(--font-14);
  line-height: 1.6;
}

/* 日本地図 ＋ スキー場の位置関係（access / explore_5 共通）
   Figma（幅1040px）の配置を % に直して置く。文字サイズも幅に合わせて縮む。
   SPは日本地図が上、スキー場の地図が下 */
.snow-map {
  position: relative;
  min-width: 0;
  aspect-ratio: 1040 / 416;
  container-type: inline-size;
}
.snow-japan,
.snow-ski {
  position: absolute;
}
.snow-japan {
  left: 6.63%;
  top: 1.32%;
  width: 34.29%;
  aspect-ratio: 356.611 / 409.994;
}
.snow-ski {
  left: 35.67%;
  top: 0;
  width: 63.37%;
  aspect-ratio: 659 / 405;
  overflow: hidden; /* 県の輪郭は下にはみ出す形で置いてあり、Figma のマスクと同じく切り取る */
}
.snow-abs {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  max-width: none;
}
.snow-spot {
  display: contents;
}
.snow-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translateY(-50%);
  font-size: max(10px, 1.731cqw); /* 幅1040pxで18px */
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-black);
}
/* 注釈は地図の下・右端 */
.snow-map > .snow-note {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.8em;
  font-size: var(--font-14);
  line-height: 1.6;
}
.snow-label.is-right {
  left: auto;
  right: var(--r);
}
.snow-label.is-center {
  transform: translate(-50%, -50%);
}

@media (hover: hover) {
  a.snow-spot:hover .snow-label,
  a.snow-spot:focus-visible .snow-label {
    color: var(--color-gold);
  }
}

@media screen and (max-width: 768px) {
  .snow-wrap {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .snow-map {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    aspect-ratio: auto;
  }
  .snow-japan,
  .snow-ski {
    position: relative;
    left: auto;
    top: auto;
  }
  .snow-japan {
    width: min(200px, 55%);
    align-self: center;
  }
  .snow-ski {
    width: 100%;
    margin-top: -12%; /* 地図の上側にある空白（高さの約25%）を詰める。% は親の幅基準 */
  }
  .snow-map > .snow-note {
    position: static;
    align-self: flex-end;
    margin-top: 1em;
  }
  .snow-label {
    font-size: var(--font-12);
  }
  .snow-japan .snow-label {
    font-size: var(--font-14);
  }
  .snow-txt p {
    font-size: var(--font-14);
    line-height: 1.7;
  }
}

/* ------------------
雪山への基点：スキー場の紹介
------------------ */
.ski {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.ski + :not(.ski) {
  margin-top: var(--space-8);
}

.ski-fig {
  flex: 0 0 42%;
  aspect-ratio: 431 / 277;
  overflow: hidden;
  margin: 0;
}

.ski-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ski-txt {
  flex: 1;
  min-width: 0;
}

.ski-ttl {
  font-size: var(--clamp-24);
  font-weight: 600;
  line-height: 1;
  margin-bottom: .8em;
}

.ski-txt > p {
  font-size: var(--font-14);
}

/* 移動方法などの一覧 */
.ski-spec {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5em 2em;
  margin-block: var(--space-3);
  font-size: var(--font-14);
}

.ski-spec dt {
  white-space: nowrap;
}
.ski-spec dd {
  margin: 0;
}
.ski-spec + a{
  font-size: var(--font-14);
}

@media screen and (max-width: 768px) {
  .ski {
    flex-direction: column;
  }
  .ski-fig {
    flex: none;
    width: 100%;
  }
  .ski-spec {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .ski-spec dt {
    font-weight: 500;
  }
}



/* ==================================================
過ごす：客室詳細（桝一客殿 / 桝一ハウス）
================================================== */

/* ------------------
MV（上部に写真、下は紺地。SPは写真を全面に）
------------------ */
.room-mv .page-img {
  height: 37.5%;
}
.room-mv .page-ttl .ja{
  font-size: var(--font-30);
}

@media screen and (min-width:768.1px) {
  .room-mv .page-ttl {
    top: 30%;
    transform: translateX(-50%);
  }
}

/* 客室への入口（丸ボタン） */
.room-nav {
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  z-index: 1;
  width: min(1040px, 92%);
}

.room-nav ul {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

.room-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 9em;
  color: var(--color-white);
  font-size: var(--clamp-16);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* 白丸＋下向き矢印。矢印はマスクで抜いて色をCSSから当てる */
.room-nav a span:last-child {
  display: grid;
  place-items: center;
  width: clamp(50px, 5vw, 65px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-ink);
  transition: transform var(--transition);
}

.room-nav a span:last-child::before {
  content: "";
  width: 21%;
  aspect-ratio: 26 / 27;
  background: currentColor;
  -webkit-mask: url(../img/icon_arrow_down.svg) no-repeat center / contain;
  mask: url(../img/icon_arrow_down.svg) no-repeat center / contain;
}



.room-nav.is-house a {
  color: var(--color-yellow);
}

.room-nav.is-house a span:last-child {
  background: var(--color-yellow);
}

@media (hover: hover) {
  .room-nav a:hover span:last-child,
  .room-nav a:focus-visible span:last-child {
    transform: translateY(4px);
  }
}

@media screen and (max-width: 768px) {
  /* SPは写真を全面に敷き、客室への入口はその下（紺地）に置く */
  .room-mv {
    height: auto;
  }
  .room-mv .room-mv-visual {
    position: relative;
    height: 100vh;
    height: 100dvh;
  }
  .room-mv .page-img {
    height: 100%;
  }
  .room-nav {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(308px, 88%);
    margin-inline: auto;
    padding-block: var(--space-7);
  }
  .room-nav ul {
    flex-wrap: wrap;
    gap: 41px 20px;
  }
  .room-nav li {
    width: 144px;
  }
  .room-nav li:last-child {
    margin-inline: auto;
  }
}

/* ------------------
本文（左に目次、右に客室）
------------------ */
.room-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

/* 左の目次。スクロールに追従し、いま見ている客室を強調する */
.room-index {
  position: sticky;
  top: var(--space-9);
  /* 親の align-items に頼らず、この要素自身でも高さを内容ぶんに留める
     （伸び切ると sticky が動く余地を失うため） */
  align-self: flex-start;
  flex: 0 0 200px;
  font-size: var(--font-14);
  line-height: 2.2;
}

.index-ttl {
  font-size: var(--font-16);
  font-weight: 500;
  margin-top: var(--space-3);
  margin-bottom: .5em;
}

.index-ttl:first-child {
  margin-top: 0;
}

.room-index a {
  display: inline-block;
  color: #aeaeae;
  font-weight: 500;
  transition: color var(--transition);
}

.room-index a:hover,
.room-index a:focus-visible,
.room-index .is-active a {
  color: var(--color-ink);
}

.room-detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8.6vw, 110px);
}

@media screen and (max-width: 768px) {
  .room-body {
    display: block;
  }
  .room-index {
    display: none;
  }
}

/* ------------------
客室ブロック
------------------ */
.room + .room{ margin-top: var(--space-8);}
.room-ttl {
  font-size: var(--clamp-24);
  margin-bottom: var(--space-4);
}

/* 客室写真のスライダー。
   Splideが生成する矢印とドットを、写真の下に「‹ ドット ›」の一列で並べる */
.room-slider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
@media screen and (max-width: 768px) {
  .room-slider{
    margin-bottom: var(--space-4);
  }
}
/* トラックだけで1行を占有し、操作系は2行目に折り返す */
.room-slider .splide__track {
  flex: 0 0 100%;
  aspect-ratio: 731 / 489;
}

.room-slider .splide__list,
.room-slider .splide__slide {
  height: 100%;
}

.room-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 矢印の入れ物をたたんで、2つのボタンを直接並べる */
.room-slider .splide__arrows {
  display: contents;
}

.room-slider .splide__arrow {
  order: 1;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-gray);
  cursor: pointer;
  transition: color var(--transition);
}

/* Splide既定のSVGは線が太いので使わず、1pxの矢羽根をCSSで描く */
.room-slider .splide__arrow svg {
  display: none;
}

.room-slider .splide__arrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}

/* 回転で角が寄るぶん、光学的な中央に寄せ戻す */
.room-slider .splide__arrow--prev::before {
  transform: rotate(-135deg);
  margin-left: 3px;
}

.room-slider .splide__arrow--next {
  order: 3;
}

.room-slider .splide__arrow--next::before {
  transform: rotate(45deg);
  margin-right: 3px;
}

@media (hover: hover) {
  .room-slider .splide__arrow:hover {
    color: var(--color-ink);
  }
}

.room-slider .splide__pagination {
  order: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

/* li が既定の stretch で縦に伸びると、中のボタンが上に寄ってしまう */
.room-slider .splide__pagination li {
  display: flex;
  align-items: center;
}

.room-slider .splide__pagination__page {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-line);
  cursor: pointer;
  transition: background-color var(--transition);
}

.room-slider .splide__pagination__page.is-active {
  background-color: var(--color-gray);
}


/* 説明文と予約ボタン */
@media screen and (min-width: 768.1px) {
  .room-desc {
    display: grid;
    grid-template-areas: "txt btn" "spec spec";
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: var(--space-5) var(--space-7);
    margin-top: var(--space-5);
  }
  .room-desc .room-txt {
    grid-area: txt;
  }
  .room-desc .room-spec {
    grid-area: spec;
  }
  .room-desc .btn-reserve {
    grid-area: btn;
  }
}

.room-txt p {
  font-size: var(--clamp-16);
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .room-desc .btn-reserve {
    width: 100%;
    height: 40px;
    margin-top: var(--space-3);
  }
}


/* メタ情報と基本情報ボタンを同じセルに重ね、行の高さを高い方に合わせる */
.room-spec {
  display: grid;
}

.room-spec > * {
  grid-column: 1;
}

.room-spec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-row: 1;
  width: 100%;
  padding: var(--space-2) var(--space-1);
  font-size: var(--clamp-16);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  border-block: 1px solid var(--color-line);
}

/* ボタンの外に出たメタ情報を、PCではボタン行の中に重ねて配置する */
.room-spec-meta {
  position: relative;
  z-index: 1;
  grid-row: 1;
  padding: var(--space-2) 0 var(--space-2) calc(4em + var(--space-6));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-size: var(--clamp-16);
  pointer-events: none;
}
@media screen and (min-width: 768.1px) {
  html[lang^="en"] .room-spec-meta {
    padding-left: calc(8em + var(--space-6));
  }
}

/* <br>で2行になった項目は中央揃え */
.room-spec-meta span {
  display: inline-block;
  line-height: 1.4;
  text-align: center;
}

/* 項目のあいだの縦罫。2行の項目でも縦中央に来るよう、絶対配置で中央に置く */
.room-spec-meta span + span {
  position: relative;
  padding-left: calc(var(--space-2) + 1px);
}
.room-spec-meta span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 14px;
  background: var(--color-line);
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  /* SPではボタンの外にいる .room-spec-meta は通常フローで表示 */
  .room-spec {
    display: block;
  }
  .room-spec-head {
    grid-row: auto;
  }
  .room-spec-meta {
    position: static;
    display: block;
    grid-row: auto;
    padding: 0;
    margin-block: var(--space-2);
    pointer-events: auto;
  }
  /* 項目の区切りは縦罫ではなく「/」 */
  .room-spec-meta span + span {
    position: static;
    padding-left: 0;
  }
  .room-spec-meta span + span::before {
    content: "/";
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    background: none;
    transform: none;
  }
}

/* 開閉のしるし。横棒と縦棒を重ね、開くときに縦棒を右へ90度回して「−」にする */
.room-spec-mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
}

.room-spec-mark::before,
.room-spec-mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
}

/* 縦棒。閉じているあいだは90度、開くと180度＝横棒に重なって見えなくなる */
.room-spec-mark::after {
  transform: rotate(90deg);
  transition: transform var(--ease-soft);
}

.room-spec-head[aria-expanded="true"] .room-spec-mark::after {
  transform: rotate(180deg);
}

/* 開閉する枠。高さをJSで測ってアニメーションさせる */
.room-spec-panel {
  overflow: hidden;
  transition: height var(--ease-soft);
}

.room-spec-body {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: var(--space-3);
  padding-top: var(--space-4);
  font-size: var(--clamp-16);
  line-height: 1.9;
}

.room-spec-body dt {
  color: #9c9c9c;
}

.room-spec-body dd {
  margin: 0;
  color: var(--color-ink);
}

@media screen and (max-width: 768px) {
  .room-spec-body {
    grid-template-columns: 1fr;
    row-gap: 0;
    font-size: var(--font-14);
  }
  .room-spec-body dt {
    margin-top: 1em;
  }
}

/* ------------------
特集ブロック（建築 / 客室空間 / おもてなし）
------------------ */
/* 1組 = .feature。中を上段（.feature-head）と下段（.feature-body）に分ける */
.feature + .feature {
  margin-top: var(--space-10);
}


.feature-head {
  display: grid;
  grid-template-columns: 1fr 61.3%;
  gap: var(--space-6);
  align-items: start;
}

/* 下段：縦長写真｜小見出し｜写真 */
.feature-body {
  display: grid;
  grid-template-columns: 23% 1fr 31%;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-5);
}

.feature-ttl {
  font-size: var(--font-24);
  margin-bottom: 1em;
}

.feature-lead p{
  font-size: var(--clamp-16);
  line-height: 2.1;
}

.feature-hero {
  aspect-ratio: 638 / 333;
  overflow: hidden;
  margin: 0;
}

.feature-thumb {
  aspect-ratio: 238 / 394;
  overflow: hidden;
  margin: 0;
}

/* 右下の写真は縦長写真の下端に揃える */
.feature-sub {
  aspect-ratio: 330 / 245;
  overflow: hidden;
  margin: 0;
  align-self: end;
}

.feature-hero img,
.feature-thumb img,
.feature-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* picture は中身の img と同じ箱として振る舞わせる（中身は上の img ルールが効く） */
.feature-thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}

.feature-body dl {
  font-size: var(--font-14);
  align-self: end;
}
.feature-body dl dt{
  margin-block: 2em .3em;
}

/* 桝一ハウス：下段は 写真｜小見出し｜写真 を同サイズ（310×314）で並べる */
.feature.is-house .feature-body {
  grid-template-columns: 1fr 32.2% 1fr;
  gap: var(--space-4);
}
.feature.is-house .feature-thumb,
.feature.is-house .feature-sub {
  aspect-ratio: 310 / 314;
}
.feature.is-house .feature-body dl {
  align-self: start;
}
.feature.is-house .feature-body dl dt:first-child {
  margin-top: 0;
}

/* 桝一ハウス：上段に写真2枚を並べるパターン（リード｜写真｜写真） */
.feature-head.is-double {
  grid-template-columns: 1fr 29.9% 29.9%;
  gap: var(--space-1);
}
.feature-head.is-double .feature-lead {
  padding-right: var(--space-3);
}
.feature-head.is-double .feature-hero {
  aspect-ratio: 310 / 314;
}



@media screen and (max-width: 768px) {
  .feature + .feature {
    margin-top: var(--space-7);
  }
  .feature-head,
  .feature-body {
    grid-template-columns: 1fr;
  }
  .feature-body {
    gap: 1px;
    margin-top: 1px;
  }
  .feature-ttl{
    margin-bottom: .5em;
  }
  .feature-body dl{
    margin-bottom: var(--space-5);
  }
  .feature-thumb {
    aspect-ratio: 344 / 220;
  }
  .feature-sub {
    align-self: auto;
    aspect-ratio: 344 / 220;
  }

  .feature-body.is-reverse dl {
    order: 1;
  }
  .feature-body.is-reverse .feature-thumb {
    order: 2;
  }
  .feature-body.is-reverse .feature-sub {
    order: 3;
  }

  /* 桝一ハウス：写真はすべて 344:220 */
  .feature.is-house .feature-hero,
  .feature.is-house .feature-thumb,
  .feature.is-house .feature-sub {
    aspect-ratio: 344 / 220;
  }
  /* 下段：小見出し → 写真 → 写真 */
  .feature.is-house .feature-body {
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: var(--space-6);
  }
  .feature.is-house .feature-body dl {
    order: -1;
    margin-bottom: calc(var(--space-6) - 1px);
  }

  /* 下段（is-split）：小見出し1 → 写真 → 小見出し2 → 写真 の交互 */
  .feature.is-house .feature-body.is-split dl {
    display: contents;
  }
  .feature.is-house .feature-body.is-split dt:nth-of-type(1) { order: 1; }
  .feature.is-house .feature-body.is-split dd:nth-of-type(1) { order: 2; }
  .feature.is-house .feature-body.is-split .feature-thumb   { order: 3; }
  .feature.is-house .feature-body.is-split dt:nth-of-type(2) { order: 4; }
  .feature.is-house .feature-body.is-split dd:nth-of-type(2) { order: 5; }
  .feature.is-house .feature-body.is-split .feature-sub     { order: 6; }
  .feature.is-house .feature-body.is-split dd {
    margin-bottom: var(--space-4);
  }
  .feature.is-house .feature-body.is-split dt:nth-of-type(2) {
    margin-top: var(--space-6);
  }

  /* 上段に写真2枚：リード → 写真 → 写真 の縦積み */
  .feature-head.is-double {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .feature-head.is-double .feature-lead {
    padding-right: 0;
    margin-bottom: calc(var(--space-6) - 1px);
  }
}

/* ------------------
次の宿泊施設へのリンク
------------------ */
.room-next {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-10);
}

.room-next a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.room-next-ja {
  display: block;
  font-size: var(--clamp-24);
  line-height: 1.2;
  text-align: right;
}

.room-next-en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--font-12);
  color: var(--color-gray);
  letter-spacing: 0.12em;
  text-align: right;
}

/* 金色の丸ボタン。矢印は右向き */
.room-next-circle {
  display: grid;
  place-items: center;
  width: clamp(40px, 4.375vw, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  transition: transform var(--transition);
}

/* 行き先が桝一ハウスのときは金色 */
.room-next-circle.is-house {
  background: var(--color-yellow);
}

.room-next-circle::before {
  content: "";
  width: 20%;
  aspect-ratio: 26 / 27;
  background: currentColor;
  rotate: -90deg;
  -webkit-mask: url(../img/icon_arrow_down.svg) no-repeat center / contain;
  mask: url(../img/icon_arrow_down.svg) no-repeat center / contain;
}

@media (hover: hover) {
  .room-next a:hover .room-next-circle,
  .room-next a:focus-visible .room-next-circle {
    transform: translateX(px);
  }
}


/* ==================================================
下層ページ
================================================== */
.doc-sec {
  margin-top: var(--space-9);
}
/* 罫線付きの小見出し */
.doc-ttl {
  padding-bottom: var(--space-1);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--clamp-20);
  line-height: 1.6;
}

:where(.doc-sec) p {
  font-size: var(--clamp-16);
  line-height: 1.9;
}
.doc-sec > p + *{
  margin-top: 1em;
}

.doc-sec ol li {
  margin-block: 0 1em;
  margin-left: 1.5em;
  list-style: decimal;
  font-size: var(--clamp-16);
  line-height: 1.9;
}
.doc-sec .snow-map {
  width: 100%;
  margin: var(--space-4) auto var(--space-8);
}
.doc-sec > h3{
  font-weight: 500;
  font-size: var(--clamp-18);
  padding-bottom: var(--space-1);
  margin-top: var(--space-3);
}
/* スキー場の見出しにだけ罫線を足す */
.doc-sec .ski-ttl {
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--clamp-20);
}

/* 住所とGoogle Mapボタンを左右に置く */
.access-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}
@media screen and (max-width: 768px) {
  .access-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

.box-border{
  border: 1px solid var(--color-line);
  padding: 16px var(--space-4);
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .box-border{
    width: 100%;
  }
}
.desc dt{
  font-weight: 500;
  padding-bottom: .2em;
  margin-bottom: .5em;
  border-bottom: 1px solid var(--color-line);
}
/* ==================================================
味わう / Savor（下層）
================================================== */

/* ------------------
店舗紹介（左＝写真 / 右＝本文）
------------------ */
.shop {
  display: grid;
  grid-template-columns: 50% 1fr;
  align-items: start;
  column-gap: var(--space-6);
}
.shop + .shop {
  margin-top: var(--space-10);
}
@media screen and (max-width: 768px) {
  .shop {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 768.1px) {
  .shop-fig {
    position: sticky;
    top: var(--space-9);
  }
  /* .shop-txt の先頭を .shop-fig 内の figure（写真）の先頭に揃える。
     .shop-ttl ぶん（font-size × line-height + margin-bottom）を先頭に空ける */
  .shop-txt {
    margin-top: calc(var(--font-24) * 1.7 + var(--font-24));
  }
}
@media screen and (max-width: 768px) {
  .shop-fig {
    margin-inline: calc(50% - 50vw);
    margin-bottom: var(--space-4);
  }
}

.shop-txt {
  color: var(--color-ink);
  font-size: var(--clamp-16);
  line-height: 1.9;
  padding-bottom: var(--space-2);
}
.shop-ttl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-24);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
  .shop-ttl {
    justify-content: center;
    padding-inline: 6vw;
    align-items: flex-start; /* 2行になったとき、アイコンを1行目の高さに置く */
  }
  .shop-ttl::before {
    margin-top: .55em; /* 1行目の中央に合わせる（行の高さ 1.7em の半分 − アイコン高さ 18px の半分） */
  }
}
.shop-txt figure{
  margin-top: var(--space-2);
}
@media screen and (max-width: 768px) {
  .shop-txt figure {
    aspect-ratio: 344 / 200;
  }
  .shop-txt figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
  

/* 見出しの3つの点 */
.shop-ttl::before {
  content: "";
  flex: none;
  width: 19px;
  aspect-ratio: 19 / 18;
  background: url(../img/icon_dots_ink.svg) no-repeat center / contain;
}

.shop-sub-ttl {
  font-size: var(--font-20);
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1em;
}

/* レストランと栗菓子おかいものの区切り線 */
.shop-sub + .shop-sub {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.shop-info{
  margin-top: var(--space-1);
}

.shop-note {
  font-size: var(--font-12);
  line-height: 1.7;
  padding-left: 1em;
  text-indent: -1em;
  margin-top: var(--space-2);
}
.shop-info .shop-note{
  margin-top: 0;
}

.shop-txt a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* 桝一市村酒造場の中に続けて置く「手盃」 */
.shop-txt > .shop-extra {
  margin-top: var(--space-7);
}


@media screen and (max-width: 768px) {
  /* 見出しは .shop-fig 側に移ったので、DOM順（見出し+写真 → 本文）のままでよい */
  .shop-txt {
    line-height: 1.7;
  }
}

/* ==================================================
お問い合わせ（下層ページ）
================================================== */
.inner .inner-form{
  width: min(794px, 100%);
}
.contact-lead {
  text-align: center;
  width: min(794px, 100%);
  margin-inline: auto;
}
.contact-lead > p{
  font-size: var(--clamp-30);
}
.contact-box{
  font-size: var(--clamp-16);
  margin-top: 40px;
  padding: 2em;
  background: #ebebeb;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: min(794px, 100%);
  margin: var(--space-7) auto 0;
}

.form-label {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: var(--font-16);
  font-weight: 500;
  margin-bottom: .5em;
}

.form-req {
  color: #D10000;
  font-size: var(--font-14);
}



input[type=text],
input[type=email],
input[type=tel],
input[type=number],
textarea {
  vertical-align: middle;
  width: 100%;
  padding: .5em 1.5em;
  background: var(--color-white);
  border: .5px solid #909090;
  color: var(--color-ink);
  font-size: var(--font-16);
  line-height: 2;
  transition: border-color var(--transition), box-shadow var(--transition);
}

input[type=text]:focus-visible,
input[type=email]:focus-visible,
input[type=tel]:focus-visible,
input[type=number]:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--color-gold-h);
  box-shadow: 0 0 0 1px var(--color-gold-h);
}

input::placeholder {
  color: var(--color-line);
}

textarea{
  resize: vertical;
  min-height: 180px;
}

.form-agree {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}

input[type="checkbox"] {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1px solid var(--color-ink);
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--color-gold-h);
  box-shadow: 0 0 0 1px var(--color-gold-h);
}

/* チェック時のレ点。線は太らせず細めのまま */
input[type="checkbox"]::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 7px;
  height: 4px;
  border: solid var(--color-ink);
  border-width: 0 0 1px 1px;
  transform: rotate(-45deg);
  opacity: 0;
}

input[type="checkbox"]:checked::before {
  opacity: 1;
}

.btn-black {
  margin-inline: auto;
  width: min(300px, 100%);
  height: 64px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--font-16);
  font-weight: 600;
  border-radius: 2px;
  transition: opacity var(--transition);
}

@media (hover: hover) {
  .btn-black:hover {
    opacity: .8;
  }
}

@media screen and (max-width: 768px) {
  .contact-form {
    margin-top: var(--space-5);
  }
}

/* ==================================================
404
================================================== */
.notfound {
  padding-bottom: var(--space-9);
  color: #101d2a;
  text-align: center;
}
.notfound-code {
  font-size: clamp(64px, 7.8125vw, 100px);
  line-height: 1.3;
}
.notfound-sub {
  font-size: clamp(20px, 2.343vw, 30px);
  line-height: 1.3;
}
.notfound-ttl {
  margin-block: var(--space-5) var(--space-2);
  font-size: var(--clamp-30);
  font-weight: 600;
  line-height: 1.71;
}
.btn-gold {
  display: grid;
  place-items: center;
  width: min(322px, 100%);
  height: 53px;
  margin-top: var(--space-6);
  margin-inline: auto;
  border-radius: 2px;
  background: var(--color-gold);
  color: var(--color-white);
  font-size: var(--font-16);
  font-weight: 500;
  transition: background-color var(--transition);
}
@media (hover: hover) {
  .btn-gold:hover {
    background: var(--color-gold-h);
  }
}

/* ==================================================
お問い合わせ完了
================================================== */
.thanks {
  padding-bottom: var(--space-9);
  color: #101d2a;
  text-align: center;
}
.thanks-ttl {
  font-size: var(--clamp-30);
  font-weight: 600;
}
.thanks-txt {
  margin-block: var(--space-4);
}
@media screen and (max-width: 768px) {
  .thanks {
    text-align: left;
  }
}
.thanks-tel {
  margin-top: .5em;
  color: var(--color-ink);
  font-size: var(--font-24);
  margin-inline: auto;
  width: fit-content;
}
.thanks-tel-label {
  margin-right: 12px;
  font-size: var(--font-16);
}

.thanks .box-border{
  margin-inline: auto;
}
.soon-ttl{
  font-size: var(--clamp-42);
  text-align: center;
}

/* ==================================================
ご予約
================================================== */
/* 右下固定のご予約ボタンは出さない。.langを右寄せ */
@media screen and (min-width: 768.1px) {
  .is-reserve .lang-switch {
    right: var(--side-right);
  }
}

.reserve-ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-7);
  color: var(--color-ink);
  text-align: center;
}
.reserve-ttl .ja {
  writing-mode: vertical-rl;
  font-size: var(--font-30);
  letter-spacing: 0.1em;
}
.reserve-ttl .en {
  font-size: var(--clamp-18);
  letter-spacing: 0.1em;
}

.reserve-panel {
  padding: var(--space-6) var(--space-8) var(--space-5);
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 768px) {
  .reserve-panel {
    padding: var(--space-4);
  }
}

.reserve-note{
  margin-bottom: var(--space-4);
  color: var(--color-gold);
  text-align: center;
}
.reserve-note dt{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--font-24);
  font-weight: 600;
  margin-bottom: 4px;
}
.reserve-note dt span{
  display: inline-block;
  width: 12px;
}
.reserve-note dd{
  font-size: var(--clamp-16);
}

.reserve-tel {
  margin-top: var(--space-4);
  color: var(--color-ink);
  font-size: var(--font-16);
  text-align: center;
}
.reserve-tel span{
  margin-right: 1em;
}
.reserve-tel .en {
  font-size: var(--font-24);
}
@media screen and (max-width: 768px) {
  .reserve-tel span{
    display: block;
  }
}

/* プランから予約 / お部屋から予約 / 空室カレンダー */
.reserve-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.reserve-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding-block: 1em;
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: 0 0 16.25px rgba(0, 0, 0, 0.05);
  font-size: var(--font-16);
  transition: opacity var(--transition);
}
.reserve-links a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  rotate: -45deg;
}
@media (hover: hover) {
  .reserve-links a:hover {
    opacity: .6;
  }
}

/* 一休.com / Booking.com / Yahoo!トラベル */
.reserve-ota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 40px;
}
.reserve-ota img {
  width: auto;
  height: 28px;
}

@media screen and (max-width: 768px) {
  .reserve-links {
    grid-template-columns: 1fr;
  }
}