/* ============================================================
   小松旅館 sections.css
   header / KV墨流し / 導入カード / 館内 / 客室 / 宿の景色 / 東上野 / 方針 / 確認事項 / アクセス / CTA / footer
   ============================================================ */

/* ============================================================
   ヘッダー(absolute透過・KV上に載るだけ・追従しない)
   ============================================================ */
.site-header {
  position: absolute;
  top: 3rem;
  left: var(--gutter);
  z-index: 30;
}
.site-header__logo {
  display: inline-block;
  color: var(--sumi); /* KVが紙地(#F0F0ED)になったため墨で載せる */
  transition: opacity 0.25s ease-out;
}
.site-header__logo:hover { opacity: 0.7; }
.site-header__logo img {
  display: inline-block;
  vertical-align: middle;
  width: 4.4rem;
  min-width: 30px;
  height: auto;
}

/* ============================================================
   [KV] 墨流しオープニング
   画面へ1枚だけ固定し、全編の地として残す
   ============================================================ */
.kv {
  position: fixed;
  inset: 0;
  width: 100%;
  height: calc(var(--fvh, 1vh) * 100);
  min-height: 480px;
  z-index: 0;
  overflow: hidden;
  background-color: #f0f0ed; /* 生成りの紙(W1実測値) */
}

/* 固定した墨より本文を確実に前へ置く。導入カードとCTAの個別z-indexは
   各セクション側の指定をそのまま優先する */
main > section:not(.kv-logo) {
  position: relative;
  z-index: 4;
}
/* WebGL失敗・読込前の静的フォールバック: 紙地に流線状の墨。
   丸いボケ玉は煤汚れに見えるため、細長い楕円を重ねて墨流しの流れを描く。
   濃度も一段上げ、紙カード被さり時に「墨をカードが覆う」が成立する濃さにする。
   createSuminagashi成功時はこの上にcanvas(absolute inset 0)が被さる */
.kv__ink {
  position: absolute;
  inset: 0;
  background-color: #f0f0ed;
  background-image:
    radial-gradient(56% 9% at 42% 47%, rgba(26, 26, 26, 0.20), rgba(26, 26, 26, 0) 72%),
    radial-gradient(72% 7% at 56% 55%, rgba(26, 26, 26, 0.16), rgba(26, 26, 26, 0) 72%),
    radial-gradient(46% 6% at 33% 61%, rgba(26, 26, 26, 0.12), rgba(26, 26, 26, 0) 70%),
    radial-gradient(64% 5% at 60% 41%, rgba(26, 26, 26, 0.10), rgba(26, 26, 26, 0) 70%),
    radial-gradient(38% 4% at 47% 67%, rgba(26, 26, 26, 0.08), rgba(26, 26, 26, 0) 70%);
}

/* 中央ロックアップ(紋+屋号。スクロールで昇華退場・地は.kvの紙) */
.kv-logo {
  position: relative;
  height: calc(var(--fvh, 1vh) * 100);
  min-height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  pointer-events: none;
}
.kv-logo__inner {
  text-align: center;
  color: var(--sumi); /* 紙#f0f0edの上の墨 */
  opacity: var(--hero-opacity, 1);
  transform: translate3d(0, var(--hero-shift, 0), 0);
  will-change: transform, opacity;
}

.kv-logo__name {
  font-size: max(18px, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* 字間ぶんの中央補正 */
  color: var(--sumi);
}
.kv-logo__catch {
  margin-top: 2.4rem;
  font-size: max(11.5px, 1.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--sumi); /* 紙#f0f0edの上の墨 */
}

.kv-logo__en {
  margin-top: 2rem;
  font-size: max(10px, 1.3rem);
  line-height: 1.7;
  letter-spacing: 0.16em;
  color: var(--sumi-soft);
}

/* ============================================================
   [導入] 白紙カード(W1移植: 影・枠線・角丸なし)
   ============================================================ */
.intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: calc(100vw - 28px);        /* W1実測: SP値 */
  margin: 18vw auto 0;              /* ロゴ退場後すぐ紙が入り始める */
  padding: 5.6rem 2rem 3.8rem;
  z-index: 10;
  color: var(--sumi);
}
@media (min-width: 820px) {
  .intro {
    gap: 4.8rem;
    width: max(36.5vw, 560px);      /* W1実測: PC値 */
    margin-top: min(6vw, 90px);
    padding: 2.36vw 2.36vw 3.5vw;
  }
}
.intro__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--kinari);  /* KVの紙#f0f0edと同色だと被さり演出が消えるため、
                                       カードは生成り#efe9ddに半段ずらして縁を判別可能にする */
  z-index: 0;
}
.intro__pic-mask {
  position: relative;
  width: 60%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  z-index: 10;
}
.intro__pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 縦書きコピー(W1原典技法: vertical-lr + column-reverse) */
.intro__copies {
  position: relative;
  z-index: 10;
  writing-mode: vertical-lr;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.intro__body {
  display: flex;
  flex-direction: column-reverse;   /* 行が右→左に読める要 */
  align-items: flex-start;
  font-size: max(12px, 1.4rem);
  line-height: 1.9;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sumi);               /* 紙#f0f0edの上の墨 */
}
.intro__titles {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  margin-left: 3.6rem;
  line-height: normal;
  z-index: 10;
}
@media (min-width: 820px) {
  .intro__titles { margin-left: 9%; }
}
.intro__ttl {
  font-size: max(17px, 2.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.5em;
  color: var(--sumi);
}
.intro__char { display: inline-block; }

/* 初期隠し状態(FOUC防止)。html.opening は opening.js が
   必要な導入要素を確認し、reduced-motionでない時だけ付与する。
   付与されない環境(JS死亡/古いブラウザ/reduce)では最初から全表示 */
html.opening .intro__body > span {
  opacity: 0;
  transform: translateY(2em);
  filter: blur(3px);
}
html.opening .intro__char {
  opacity: 0;
  transform: translateY(100%);
  filter: blur(5px);
}
html.opening .intro__bg,
html.opening .intro__pic-mask {
  will-change: clip-path;
}
html.opening .intro__pic {
  will-change: transform;
}
html.opening .intro__copies.is-copy-visible .intro__body > span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition:
    opacity 1.8s var(--ease-out),
    transform 1.8s var(--ease-out),
    filter 1.8s var(--ease-out);
}
html.opening .intro__copies.is-copy-visible .intro__char {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition:
    opacity 1.6s var(--ease-out),
    transform 1.6s var(--ease-out),
    filter 1.6s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html.opening .intro__body > span,
  html.opening .intro__char {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ============================================================
   浮遊予約ピル(左下fixed・機能ボタンのため例外的にピル形状)
   JSがCTA到達で .is-hidden を付与して消す
   ============================================================ */
.float-reserve {
  position: fixed;
  left: 2.4rem;
  bottom: 2.4rem;
  z-index: 40;
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.float-reserve.is-hidden {
  opacity: 0;
  transform: translate3d(0, 1.2rem, 0);
  pointer-events: none;
}
.float-reserve__btn {
  display: inline-block;
  background-color: var(--kinari);
  color: var(--sumi);
  font-size: max(11.5px, 1.4rem);
  line-height: 1;
  letter-spacing: 0.1em;
  padding: 1.5rem 2.8rem;
  border-radius: 99px;
  box-shadow: 0 4px 18px rgba(12, 8, 5, 0.35);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.float-reserve__btn:hover { transform: translate3d(0, -0.2rem, 0); }
.float-reserve__btn .en {
  font-size: max(9px, 1.1rem);
  margin-left: 1rem;
  color: var(--sumi-soft);
}

/* ============================================================
   [コラージュ] 中央集合から四隅散開と液体変位
   sticky 200画面 + 中央集合→四隅散開 + 液体歪みスライドショー輪唱。
   動きの定数(サイズ・ease・delay)は本物コードに忠実。
   固定した墨流しを背面に残すため、セクション自身は透明にする。
   デモはhtml 10px基準remのため、デスクトップはサイトrem(1440で10px)をそのまま、
   1023px以下はデモのrem=2.565vwを vw に換算して寸法を等価に保つ
   ============================================================ */
.collage {
  position: relative;
  z-index: 5;
  margin-top: 16rem;
  background-color: transparent;
  background-image: none;
  /* デモ原典のease(サイト--ease-outとは別物。動き定数のため変更しない) */
  --collage-ease: cubic-bezier(0.55, 0.05, 0.22, 0.99);
}
.collage__sticky {
  height: calc(var(--fvh, 1vh) * 140); /* 200→140に短縮(2026-08-02 スクロールしても動かない時間が長く高齢者に分かりづらい対策) */
}
.collage__intro {
  height: calc(var(--fvh, 1vh) * 100);
  min-height: 640px;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.collage__frame {
  position: relative;
  width: min(132rem, 94vw);
  aspect-ratio: 1320 / 840;
  max-height: calc(100% - 6rem);
}
@media (max-width: 1023px) {
  /* 写真の大きさを保ち、上下に広げて中央との重なりを抑える。 */
  .collage__frame { aspect-ratio: 390 / 600; }
}
.collage__tile {
  position: absolute;
  overflow: hidden;
  transition:
    top 1.2s var(--collage-ease) 0.6s,
    left 1.2s var(--collage-ease) 0.6s,
    right 1.2s var(--collage-ease) 0.6s,
    bottom 1.2s var(--collage-ease) 0.6s,
    margin 1.2s var(--collage-ease) 0.6s,
    opacity 0.6s var(--collage-ease) 0.6s;
  background-color: #dedcd4; /* 読込前の地(紙より半段沈む) */
}
.collage__tile canvas,
.collage__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collage__tile canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* 初期: 中央集合。負マージンで中央を合わせ、散開後も主役の写真を大きく残す。 */
.collage__tile--1 { width: 32rem; height: 32rem; right: 50%; top: 50%;    margin-top: -16rem;  margin-right: -16rem; }
.collage__tile--2 { width: 38rem; height: 38rem; right: 50%; bottom: 50%; margin-bottom: -19rem; margin-right: -19rem; }
.collage__tile--3 { width: 30rem; height: 30rem; left: 50%;  bottom: 50%; margin-bottom: -15rem; margin-left: -15rem; }
.collage__tile--4 { width: 36rem; height: 36rem; left: 50%;  top: 50%;    margin-top: -18rem;    margin-left: -18rem; }
.collage__tile--5 { width: 62rem; height: 62rem; left: 50%;  top: 50%;    margin-top: -31rem;    margin-left: -31rem; z-index: 1; }
/* 散開後(中央のtile-5だけ上書きしない=中央残留) */
.is-open .collage__tile--1 { top: 3rem; right: 6rem; margin: 0; }
.is-open .collage__tile--2 { right: 0; bottom: 0; margin: 0; }
.is-open .collage__tile--3 { bottom: 3rem; left: 6rem; margin: 0; }
.is-open .collage__tile--4 { left: 0; top: 0; margin: 0; }
@media (max-width: 1023px) {
  /* 四隅も内容が分かる大きさにし、中央との重なりで一つの景色にまとめる。 */
  .collage__tile--1 { width: 44vw; height: 44vw; margin-top: -22vw; margin-right: -22vw; }
  .collage__tile--3 { width: 44vw; height: 44vw; margin-bottom: -22vw; margin-left: -22vw; }
  .collage__tile--2 { width: 48vw; height: 48vw; margin-bottom: -24vw; margin-right: -24vw; }
  .collage__tile--4 { width: 48vw; height: 48vw; margin-top: -24vw; margin-left: -24vw; }
  .collage__tile--5 { width: 70vw; height: 70vw; margin-top: -35vw; margin-left: -35vw; }
  .is-open .collage__tile--1 { top: 4vw; right: 0; margin: 0; }
  .is-open .collage__tile--3 { bottom: 4vw; left: 0; margin: 0; }
}
/* 導入1枚(全画面) → 縮小 → フェードで中央タイルへ引き継ぐ */
.collage__op {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--collage-ease) 1.1s;
}
.collage__op-img {
  width: 100%;
  height: 100%;
  transition:
    width 1.2s var(--collage-ease) 0.2s,
    height 1.2s var(--collage-ease) 0.2s;
}
.collage__op-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.is-open .collage__op { opacity: 0; pointer-events: none; }
.is-open .collage__op-img { width: 62rem; height: 62rem; }
@media (max-width: 1023px) {
  .is-open .collage__op-img { width: 70vw; height: 70vw; }
}
.collage__label {
  position: absolute;
  right: -4rem;
  top: 0;
  writing-mode: vertical-rl;
  font-size: max(11.5px, 1.4rem);
  letter-spacing: 0.3em;
  line-height: 1;
  color: var(--sumi); /* 生成り地の墨(AA) */
}
@media (max-width: 1023px) {
  .collage__label {
    right: auto;
    left: 0;
    top: -7.7vw;
    writing-mode: horizontal-tb;
  }
}
/* reduced-motion: 演出を止めても散開後の静的配置で内容が読める */
@media (prefers-reduced-motion: reduce) {
  .collage__tile canvas { visibility: hidden; }
  .collage__tile,
  .collage__op,
  .collage__op-img { transition: none; }
  html.js .collage__op { opacity: 0; }
  .collage__tile--1 { top: 3rem; right: 6rem; margin: 0; }
  .collage__tile--2 { right: 0; bottom: 0; margin: 0; }
  .collage__tile--3 { bottom: 3rem; left: 6rem; margin: 0; }
  .collage__tile--4 { left: 0; top: 0; margin: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023px) {
  .collage__tile--1 { top: 4vw; right: 0; }
  .collage__tile--3 { bottom: 4vw; left: 0; }
}

/* ============================================================
   [湯] 湯にほどける(左テキストsticky+右写真・右端裁ち落とし)
   固定背景を透かし、墨の気配を全編へつなぐ
   ============================================================ */
.yu,
.rooms {
  position: relative;
  z-index: 5;
  background-color: transparent;
  background-image: none;
}
.yu {
  margin-top: 16rem;
  padding-top: 18rem;
}
.yu__text {
  grid-column: 1 / span 6;
  padding-top: 4rem;
}
.yu__text .txt { margin-top: 3.2rem; }
.yu__pics {
  grid-column: 8 / span 11;
  margin-right: calc(var(--gutter) * -1); /* gridの余白を打ち消して右ブリード */
}
/* 低解像度素材のため小さめ面積(大面積禁止)。
   素材右側の焼き込み文字帯(約x62%以降)と左下の「湯」文字(約x13%まで)を
   縦位置トリミングで切り落とす(可視窓 = x約13〜61%) */
.yu__bath {
  position: relative;
  max-width: 64rem;
  margin-left: auto;
  overflow: hidden;
}
.yu__bath img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
/* 湯気: 白のぼかしをopacity/transformだけで揺らす */
.yu__steam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 26% 78%, rgba(244, 239, 230, 0.32), rgba(244, 239, 230, 0) 70%),
    radial-gradient(30% 26% at 62% 64%, rgba(244, 239, 230, 0.22), rgba(244, 239, 230, 0) 70%);
  animation: yu-steam 7s ease-in-out infinite alternate;
}
@keyframes yu-steam {
  from { opacity: 0.5; transform: translate3d(0, 0.6rem, 0); }
  to   { opacity: 1;   transform: translate3d(0, -1.4rem, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .yu__steam { animation: none; opacity: 0.7; }
}

/* ============================================================
   [客室] 眠る(鏡面反転: 左写真ブリード+右テキストsticky)
   ============================================================ */
.rooms {
  padding-top: 20rem;
}
.rooms__pics {
  grid-column: 1 / span 10;
  margin-left: calc(var(--gutter) * -1); /* 左端裁ち落とし */
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--kinari-2); /* 読込前の地 */
}
/* JSスライダー: 前面フェードイン方式。
   前の1枚はopacity:1のまま残し、次の1枚をJSの付与するz-index上でフェードイン
   →完了後にJSが前の1枚を下げる(クロスフェードだと中間点で合計opacityが1を割り、
   地色が透けて白帯ゴーストが出るため禁止・実測) */
.rooms__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* out側を遅らせて中間点の合計opacity低下(白帯ゴースト)を防ぐ */
  transition: opacity 0.6s var(--ease-out) 0.25s;
}
.rooms__slide.is-active {
  opacity: 1;
  transition-delay: 0s;
}
/* ラベル背面のコーナースクリム(左下角だけ淡く暗く。全面暗幕は写真が死ぬ) */
.rooms__slide::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  height: 55%;
  background: radial-gradient(115% 115% at 0% 100%, rgba(12, 8, 5, 0.42), rgba(12, 8, 5, 0) 72%);
  pointer-events: none;
}
.rooms__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 縦書き白ラベル(写真上・text-shadowで可読性確保) */
.rooms__label {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  z-index: 1; /* コーナースクリム(::after)より前面 */
  font-size: max(15px, 2.9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  color: #ffffff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.5);
}
.rooms__label .en {
  font-size: max(10px, 1.3rem);
  letter-spacing: 0.12em;
  margin-top: 1.2rem;
  display: inline-block;
}
.rooms__text {
  grid-column: 13 / span 6;
  padding-top: 4rem;
}
.rooms__text .txt { margin-top: 3.2rem; }

/* ============================================================
   [食事] 朝を食べる(Z字対角: 左大写真、右テキスト、右下に2枚食い込み)
   ============================================================ */
.kappo {
  padding-top: 20rem;
}
/* 左大写真: 横長素材(1600x659)を縦長トリミングで使う */
.kappo__pic1 {
  grid-column: 1 / span 7;
  grid-row: 1;
  margin-left: calc(var(--gutter) * -1);
}
.kappo__pic1 img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center; /* 新素材(1122x1402縦)は全面が絵になるため中央 */
}
.kappo__text {
  grid-column: 10 / span 9;
  grid-row: 1;
  padding-top: 15rem; /* テキストを右側余白の重心に落とす(上寄りの置き忘れ感を消す) */
}
.kappo__text .txt { margin-top: 3.2rem; }
/* 2行目の写真2枚を上の行に食い込ませる(列重複+負マージン) */
.kappo__pic2 {
  grid-column: 6 / span 6;
  grid-row: 2;
  margin-top: -6rem;
  position: relative;
  z-index: 2;
}
.kappo__pic2 img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.kappo__pic3 {
  grid-column: 13 / span 6;
  grid-row: 2;
  margin-top: 6rem;
  margin-right: calc(var(--gutter) * -1); /* 右端裁ち落とし */
}
.kappo__pic3 img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ============================================================
   [界隈] 周辺情報(駅名+分数のタイポ強弱・カード枠なし・余白で組む)
   ============================================================ */
.around {
  padding-top: 22rem;
}

/* ============================================================
   [アクセス] たどり着く
   ============================================================ */
.access {
  padding: 22rem 0 20rem;
}
.access__head {
  grid-column: 2 / span 5;
}
.access__body {
  grid-column: 8 / span 10;
  padding-top: 1.5rem;
}

/* ============================================================
   [予約CTA] 締め(暗転・提灯の再登場・白ロックアップ)
   ============================================================ */
.cta {
  position: relative;
  padding: 22rem 0;
  background-color: var(--dark-2);
  color: var(--shiro);
  overflow: hidden;
}
.cta__bg {
  position: absolute;
  inset: 0;
}
.cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.cta__overlay {
  position: absolute;
  inset: 0;
  background: rgba(12, 8, 5, 0.72);
}
.cta__inner {
  position: relative;
  z-index: 1;
  margin: 0 var(--gutter);
  text-align: center;
}

.cta__logo-name {
  font-size: max(13px, 1.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--shiro); /* 暗転地(.cta --dark-2+オーバーレイ)の上の白 */
  margin-bottom: 5rem;
}
.cta__copy {
  font-size: max(18px, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--shiro);
}
.cta__btns {
  margin-top: 6rem;
}
.cta__btn {
  display: inline-block;
  font-size: max(11.5px, 1.5rem);
  line-height: 1;
  letter-spacing: 0.12em;
  padding: 1.9rem 4.6rem;
  margin: 0 1rem;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.cta__btn:hover { transform: translate3d(0, -0.2rem, 0); }
.cta__btn--main {
  background-color: var(--kinari);
  color: var(--sumi);
}
.cta__btn--main .en {
  font-size: max(9px, 1.1rem);
  margin-left: 1.2rem;
  color: var(--sumi-soft);
}
.cta__btn--sub {
  background-color: rgba(12, 8, 5, 0.3);
  color: var(--shiro);
  border: 1px solid var(--line-light);
}
.cta__btn--sub:hover { opacity: 0.75; }
.cta__tel {
  margin-top: 5rem;
  font-size: max(11.5px, 1.4rem);
  letter-spacing: 0.1em;
  color: var(--shiro-soft);
}
.cta__tel-link {
  color: var(--shiro);
  border-bottom: 1px dotted var(--shiro-soft);
  padding-bottom: 0.2rem;
  transition: opacity 0.25s ease-out;
}
.cta__tel-link:hover { opacity: 0.7; }

/* ============================================================
   フッター(生成り地・黒版ロックアップ)
   ============================================================ */
.site-footer {
  position: relative;
  z-index: 4;
  padding: 10rem var(--gutter) 4rem;
  text-align: center;
  color: var(--sumi);
}

.site-footer__name {
  font-size: max(12px, 1.6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--sumi); /* 生成り地の墨 */
  margin-bottom: 3.5rem;
}
.site-footer__addr {
  font-size: max(11.5px, 1.4rem);
  letter-spacing: 0.08em;
  line-height: 2.2;
  color: var(--sumi);
}
.site-footer__tel {
  border-bottom: 1px dotted var(--sumi-soft);
  padding-bottom: 0.2rem;
  transition: opacity 0.25s ease-out;
}
.site-footer__tel:hover { opacity: 0.6; }
.site-footer__copy {
  margin-top: 4rem;
  font-size: max(10px, 1.2rem);
  letter-spacing: 0.18em;
  color: var(--sumi-soft);
}

/* ============================================================
   SP(819px以下): gridはblock化済(base.css)。縦積みと余白半減
   ============================================================ */
@media screen and (max-width: 819px) {

  .site-header { top: 2rem; }
  .site-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header__logo img { width: 3.6rem; }

  .kv-logo__name { font-size: max(16px, 2.2rem); }
  .kv-logo__catch { margin-top: 2rem; font-size: max(11px, 1.3rem); }
  
.kv-logo__en { margin-top: 1.6rem; font-size: max(10px, 1.15rem); }

  .intro__body { font-size: max(11.5px, 1.3rem); }
  .intro__ttl { font-size: max(15px, 2.1rem); }

  .float-reserve { left: 1.6rem; bottom: 1.6rem; }
  .float-reserve__btn { padding: 1.3rem 2.2rem; }

  .yu { margin-top: 10rem; padding-top: 10rem; }
  .yu__text { padding-top: 0; margin-bottom: 4rem; }
  .yu__pics { margin-right: calc(var(--gutter) * -1); }
  .yu__bath { max-width: 100%; }

  .rooms { padding-top: 11rem; }
  .rooms__pics { margin-left: calc(var(--gutter) * -1); margin-right: 0; }
  .rooms__label { font-size: max(14px, 2.2rem); left: 1.4rem; bottom: 1.4rem; }
  .rooms__text { padding-top: 0; margin-top: 4rem; }

  .kappo { padding-top: 11rem; }
  .kappo__pic1 { margin-left: calc(var(--gutter) * -1); width: 82%; }
  .kappo__pic1 img { aspect-ratio: 4 / 5; }
  .kappo__text { padding-top: 0; margin: 4rem 0 5rem; }
  .kappo__pic2 { margin-top: 0; width: 76%; }
  .kappo__pic3 { margin-top: 2.4rem; margin-left: 24%; margin-right: calc(var(--gutter) * -1); }

  .around { padding-top: 12rem; }

  .access { padding: 12rem 0 10rem; }
  .access__head { margin-bottom: 3rem; }
  .access__body { padding-top: 0; }

  .cta { padding: 13rem 0; }
  /* SPは提灯の明部が文字と交差するためオーバーレイを一段深く */
  .cta__overlay { background: rgba(12, 8, 5, 0.82); }
  
  .cta__logo-name { font-size: max(12px, 1.5rem); margin-bottom: 4rem; }
  .cta__copy { font-size: max(16px, 2.4rem); }
  .cta__btns { margin-top: 4.5rem; }
  .cta__btn {
    display: block;
    max-width: 30rem;
    margin: 0 auto;
    padding: 1.7rem 2rem;
  }
  .cta__btn--sub { margin-top: 1.6rem; }
  .cta__tel { margin-top: 3.5rem; }

  .site-footer { padding: 6rem var(--gutter) 3rem; }
  
  .site-footer__name { font-size: max(11px, 1.4rem); margin-bottom: 2.5rem; }
}

/* ===== UX磨き(2026-08-02 監査反映) ===== */
/* 電話リンク: 見た目を変えずタップ領域を44px相当へ */
.cta__tel-link,
.site-footer__tel {
  display: inline-block;
  padding: 1rem 0.6rem;
  margin: -1rem -0.6rem;
}
/* テキストリンクのヒット領域拡張 */
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.2rem;
  margin: -0.5rem -0.2rem;
}
/* 浮遊ピルSPで44px確保 */
@media (max-width: 819px) {
  .float-reserve__btn { padding: 1.5rem 2.4rem; }
}
/* focus-visible共通(生成り地=墨リング・暗部=生成りリング) */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--sumi);
  outline-offset: 3px;
}
.cta a:focus-visible {
  outline-color: var(--shiro);
}