/* ============================================
   Slow IKI island stay - スタイルシート
   ============================================ */

/* ---------- リセット & 基本設定 ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg:       #ffffff;
  --color-text:     #1a1a1a;
  --color-accent:   #7B5038;   /* 宿泊予約ボタン（コンプのブラウン） */
  --color-btn-lang: #111111;
  --color-border:   #c9c5c0;   /* 区切り線（コンプの薄グレー） */
  --color-muted:    #888888;
  --color-bg-note:  #f5f3f1;

  --font-en: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-ja: 'Sawarabi Gothic', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  --header-h: 60px;

  /* 汎用サイドパディング（セクション本文など） */
  --side-pad: 24px;
  /* ガイドリスト専用（コンプに合わせた大きめパディング） */
  --guide-pad: 24px;
}

/* デスクトップ：ガイドパディングを大きく */
@media (min-width: 769px) {
  :root {
    --side-pad:  clamp(40px, 6vw, 80px);
    --guide-pad: clamp(60px, 17vw, 220px);
    --header-h:  100px;   /* PSDは120px。クライアント要望で100pxに縮小 */
  }
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;   /* メニューを開いてスクロールを止めてもスクロールバー分の幅を保ち、ヘッダーが横にずれないようにする */
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ja);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-break: strict;          /* 日本語の禁則処理 */
  overflow-wrap: anywhere;
}

/* テキスト選択色：ブランドカラー */
::selection {
  background: rgba(123, 80, 56, 0.18);
  color: var(--color-text);
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

/* 欧文：リガチャ・カーニング有効化 */
.guide-item__title .en,
.guide-item__num .num,
.hero-copy h1,
.tel-number,
.footer-tel__num,
.checkin-td,
.intro-sub {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-synthesis: none;  /* 合成斜体・合成ボールドを禁止 */
}

/* 数字：等幅・プロポーショナルの明示指定 */
.tel-number,
.footer-tel__num,
.checkin-td {
  font-variant-numeric: proportional-nums lining-nums;
}

/* ============================================
   ヘッダー（PSD実寸：幅1600pxアートボード）
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--color-bg);
  transition: box-shadow 0.2s;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* ロゴ＋サイト名 */
.site-logo {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-left: 33px;
  color: #000;
  flex-shrink: 0;
}
.site-logo__img { width: 110px; height: auto; }

.logo-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.25;
  white-space: nowrap;
}
.sp-only { display: none; }
.pc-only { display: inline; }

/* ナビゲーション */
.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;               /* PSD：アイコン〜ボタン間・ボタン同士 20px */
}

.nav-icon {
  display: block;
  width: 40px;
  height: 40px;
  color: #231815;
  transition: opacity 0.2s;
}
.nav-icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.nav-icon:hover { opacity: 0.6; }

/* Language / 宿泊予約 ボタン：120×40 */
.btn-lang,
.btn-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;            /* PSD実測：塗り部分 120×40 */
  height: 40px;
  font-size: 16px;
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn-lang {
  background: #000;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0;
}
.btn-reserve {
  background: #91613c;
  font-family: 'Sawarabi Gothic', var(--font-ja);
  letter-spacing: 0;
}
.btn-lang:hover,
.btn-reserve:hover { opacity: 0.78; }

/* 宿泊予約ボタン：一旦非表示（再表示するときはこのルールを削除するだけでOK。
   Language がメニュー枠の直前に来るので、右側の間隔は元の「宿泊予約〜メニュー線」と同じになる） */
.btn-reserve { display: none; }

/* 言語切替ドロップダウン（PSD：Language の下に 120×40 の項目を縦に並べる・#bb8657・区切り線は黒） */
.lang-switch { position: relative; display: flex; }
.lang-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 110;
}
.lang-switch.is-open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu li + li { border-top: 2px solid #000; }
.lang-menu__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border: none;
  background: #bb8657;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.lang-menu__item:hover { opacity: 0.8; }
.lang-menu__item--ja { font-family: 'Sawarabi Gothic', var(--font-ja); }
.lang-menu__item--en { font-family: 'Montserrat', sans-serif; }
.lang-menu__item[aria-current="true"] { text-decoration: underline; text-underline-offset: 4px; }

/* メニューボタン：120×120の領域に2本線（62×3） */
.btn-menu {
  position: relative;
  width: 120px;
  height: var(--header-h);
  margin-left: -20px;       /* 宿泊予約ボタンとの間隔をPSDに合わせる */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}
.btn-menu span {
  position: absolute;
  left: 30px;
  width: 60px;
  height: 4px;
  background: #3b1b07;
}
.btn-menu span:first-child { top: 38px; }
.btn-menu span:last-child  { top: 58px; }
.btn-menu:hover { opacity: 0.6; }
.btn-menu span {
  transition: transform 0.25s ease, top 0.25s ease, left 0.25s ease, width 0.25s ease;
}
/* 閉じる：PSDは浅い角度の×（外形60×28） */
.btn-menu.is-active span { top: 48px; left: 30px; width: 61px; }
.btn-menu.is-active span:first-child { transform: rotate(19deg); }
.btn-menu.is-active span:last-child  { transform: rotate(-19deg); }

body.menu-open { overflow: hidden; }

/* ============================================
   メニューオーバーレイ
   ============================================ */
.menu-overlay {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--color-bg);
  overflow-y: auto;
  border-top: 2px solid #000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu-nav__item { border-bottom: 2px solid #000; }

.menu-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 156px;         /* 実測調整：comp158pxに合わせ */
  max-width: min(1003px, calc(100% - var(--side-pad) * 2));  /* PSD実測：行内コンテンツ幅1003px（両端300px弱で中央寄せ） */
  margin: 0 auto;
  padding: 0;
  transition: opacity 0.2s;
}
.menu-nav__link:hover { opacity: 0.6; }

.menu-nav__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-nav__title .en {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.2;
  color: #000;
}
.menu-nav__title .ja {
  font-family: 'Sawarabi Gothic', var(--font-ja);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: #000;
}

.menu-nav__arrow {
  flex-shrink: 0;
  width: 60px;             /* PSD実測：外径60px */
  height: 60px;
  margin-right: 2px;
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
}
.menu-nav__arrow svg { width: 24px; height: 26px; margin-left: 4px; }

.menu-footer {
  text-align: center;
  padding: 57px var(--side-pad) 85px;   /* PSD実測（information group） */
}
.menu-footer__tel {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 54px;   /* PSD実測：レイヤーに1.5倍の変形が付いているため36px×1.5 */
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #000;
  transition: opacity 0.2s;
}
.menu-footer__tel:hover { opacity: 0.6; }
.menu-footer__tel svg { width: 46px; height: 46px; fill: #231815; }  /* PSD：アイコン色 */
.menu-footer__address {
  margin-top: 18px;
  font-family: 'Sawarabi Gothic', var(--font-ja);
  font-size: 26px;
  letter-spacing: 0.05em;
  color: #000;
}

/* メニュー（PC）：画面の高さに収まるよう縦方向を縮める
   --s = 1デザインpxあたりの長さ（ヘッダー下の中身は約900px。これより低い画面では比例縮小、最小0.5倍） */
@media (min-width: 769px) {
  .menu-overlay { --s: clamp(0.5px, (100vh - var(--header-h) - 12px) / 892, 1px); }
  .menu-nav__link { min-height: calc(156 * var(--s)); }
  .menu-nav__title { gap: calc(8 * var(--s)); }
  .menu-nav__title .en { font-size: calc(48 * var(--s)); }
  .menu-nav__title .ja { font-size: calc(24 * var(--s)); }
  .menu-nav__arrow { width: calc(60 * var(--s)); height: calc(60 * var(--s)); }
  .menu-nav__arrow svg { width: calc(24 * var(--s)); height: calc(26 * var(--s)); margin-left: calc(4 * var(--s)); }
  .menu-footer { padding-top: calc(57 * var(--s)); padding-bottom: calc(85 * var(--s)); }
  .menu-footer__tel { font-size: calc(54 * var(--s)); gap: calc(20 * var(--s)); }
  .menu-footer__tel svg { width: calc(46 * var(--s)); height: calc(46 * var(--s)); }
  .menu-footer__address { margin-top: calc(18 * var(--s)); font-size: calc(26 * var(--s)); }
}

/* ============================================
   ダミー画像（.img-ph）
   ============================================ */
.img-ph {
  width: 100%;
  background: #c8bfb5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.img-ph::before {
  content: "🖼";
  font-size: 2rem;
  opacity: 0.25;
}
.img-ph::after {
  content: attr(data-label);
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: rgba(0,0,0,0.4);
  font-family: monospace;
}

/* ============================================
   ヒーロー
   ============================================ */
.hero {
  position: relative;
  margin: 0 clamp(10px, 12.375%, 198px);  /* PSD：幅1600で左右198px */
  aspect-ratio: 2400 / 1080;           /* mv画像の比率 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e2da;
}

/* スライドショー：フェード切り替え */
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .hero { aspect-ratio: 1420 / 1080; margin: 0 10px; }  /* SP用mv画像の比率・PSD：左右10px */
  .hero-copy h1 { font-size: 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

.hero-copy {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}

.hero-copy h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(30px, 3.75vw, 60px);   /* PSD：60px（幅1600時） */
  font-weight: 200;
  letter-spacing: 0.1em;
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================
   イントロ
   ============================================ */
.intro {
  padding: 152px var(--side-pad) 152px;   /* PSD：画像下〜見出し／本文下〜01見出し 158px */
  text-align: center;
  color: #000;
}

.intro-heading {
  font-family: 'Sawarabi Gothic', var(--font-ja);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 36px;
}

.intro-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 20px;
  margin-top: 2px;
}

.intro-body {
  margin-top: 36px;
  font-family: 'Sawarabi Gothic', var(--font-ja);
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 28px;
}
.intro-body p + p { margin-top: 28px; }   /* PSD：空行1行分 */

/* ============================================
   ガイドセクション（01〜04）
   ※カンプ基準：幅1440px時に本文カラム900px
   ============================================ */
.guide-list {
  --g-ink:     #000;      /* PSD：文字・罫線は黒 */
  --g-icon:    #231815;   /* PSD：ベクターアイコンの色 */
  --g-line:    2px;       /* 罫線の太さ */
  --g-col:     900px;     /* 本文カラム幅（PCは下のPSD実寸ブロックで1002px） */
  --g-font-en: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --g-font-ja: 'Sawarabi Gothic', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

  color: var(--g-ink);
  font-family: var(--g-font-ja);
}

/* セクション見出し帯：上下に全幅の罫線 */
.guide-item__header {
  border-top: var(--g-line) solid var(--g-ink);
  border-bottom: var(--g-line) solid var(--g-ink);
  padding: 0 var(--side-pad);
}
.guide-item + .guide-item .guide-item__header { margin-top: calc(var(--g-line) * -1); }

.guide-item__header-inner {
  max-width: var(--g-col);
  margin: 0 auto;
  min-height: 140px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 24px;
}

/* タイトル（左） */
.guide-item__title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-weight: 400;
  padding-bottom: 4px;
}

.guide-item__title .en {
  font-family: var(--g-font-en);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0.075em;
  margin-left: -5px;
  line-height: 1.2;
}

.guide-item__title .ja {
  font-family: var(--g-font-ja);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* 番号ブロック（右）：左右に縦罫線 */
.guide-item__num {
  flex-shrink: 0;
  width: 160px;
  margin: 8px 0;
  padding: 12px 8px 0 0;
  border-left: var(--g-line) solid var(--g-ink);
  border-right: var(--g-line) solid var(--g-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.guide-item__num .num {
  font-family: var(--g-font-en);
  font-size: 76px;
  font-weight: 200;
  line-height: 0.8;
  letter-spacing: 0.12em;
  margin-right: -0.12em;
}

.guide-item__num .brand {
  font-family: var(--g-font-en);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 6px 0 0 6px;
  white-space: nowrap;
}

/* 本文エリア */
.guide-item__content {
  max-width: calc(var(--g-col) + var(--side-pad) * 2);
  margin: 0 auto;
  padding: 66px var(--side-pad) 145px;
}

/* ============================================
   ガイドコンテンツ共通：サブセクション
   ============================================ */
.info-section + .info-section { margin-top: 66px; }
.info-section--tight { margin-top: 39px !important; }

.info-section__title {
  font-family: var(--g-font-ja);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.4;
  text-align: center;
}

/* 見出し下の短い装飾ライン */
.info-section__line {
  width: 36px;
  height: var(--g-line);
  background: var(--g-ink);
  margin: 14px auto 16px;
}

/* 共通ボーダーボックス */
.info-section__box {
  border: var(--g-line) solid var(--g-ink);
  padding: 26px 32px;
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1.5;
  text-align: center;
}

/* 丸枠アイコン共通 */
.icon-circle {
  width: 63px;
  height: 63px;
  flex-shrink: 0;
  color: var(--g-icon);
}
.icon-circle .stroke { fill: none; stroke: currentColor; stroke-width: 1.8; }
.icon-circle .stroke.hair { stroke-width: 0.9; }
.icon-circle .stroke.wifi { stroke-width: 3.4; stroke-linecap: round; }
.icon-circle .fill { fill: currentColor; }

/* ============================================
   チェックイン／アウトテーブル
   ============================================ */
.checkin-box { padding: 0; }

.checkin-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.checkin-col + .checkin-col { border-left: var(--g-line) solid var(--g-ink); }

.checkin-th {
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 400;
  border-bottom: var(--g-line) solid var(--g-ink);
}

.checkin-td {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 17px;
  letter-spacing: 0.05em;
  font-variant-numeric: lining-nums;
}

.clock {
  width: 63px;
  height: 63px;
  color: var(--g-icon);
  flex-shrink: 0;
}
.clock line { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.clock .fill { fill: currentColor; }

/* ============================================
   注意事項ボックス
   ============================================ */
.info-caution {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 13px;
  padding-bottom: 12px;
}
.info-caution__text { text-align: left; }

/* ============================================
   住所／電話番号ボックス
   ============================================ */
.info-contact { padding-top: 19px; padding-bottom: 16px; }

.info-contact__address {
  font-size: 17px;
  margin-bottom: 4px;
}

.info-contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  vertical-align: top;
}

.tel-number {
  font-family: var(--g-font-en);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ============================================
   設備情報ボックス
   ============================================ */
.info-facility { padding-top: 22px; padding-bottom: 17px; }

.info-facility__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 7px;
  padding-right: 8px;
}
.info-facility > p { letter-spacing: 0.04em; padding-left: 28px; }

/* ============================================
   Access コンテンツ
   ============================================ */
.map-wrapper {
  width: 100%;
  aspect-ratio: 900 / 324;
  background: #e0ddd9;
  overflow: hidden;
}
.map-wrapper iframe { width: 100%; height: 100%; border: none; display: block; }

.access-directions {
  padding-top: 21px;
  padding-bottom: 21px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* ============================================
   Room / Other Facilities 共通コンテンツ
   ============================================ */

/* 単体画像：カフェグリッド1枚分と同じ幅 */
.room-img-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 38px;
}
.room-img {
  display: block;
  width: calc((100% - 36px) / 2);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* カフェ：2列×3行グリッド */
.cafe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 38px;
}
.cafe-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.room-img img,
.cafe-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facility-desc-box {
  padding-top: 20px;
  padding-bottom: 18px;
}

/* ============================================
   ガイドセクション PC：PSD実寸（幅1600pxアートボード・本文カラム1002px）
   ※SPは下の max-width:768px ブロックで上書き
   ============================================ */
@media (min-width: 769px) {
  .guide-list { --g-col: 1002px; }

  .guide-item__header-inner { min-height: 156px; gap: 24px; }
  .guide-item__title { gap: 0; padding-bottom: 0; }
  .guide-item__title .en { font-size: 48px; letter-spacing: 0.092em; margin-left: -3px; line-height: 1.2; }
  .guide-item__title .ja { font-size: 24px; letter-spacing: 0.1em; line-height: 1.4; }

  .guide-item__num { width: 180px; margin: 8px 1px 3px 0; padding: 8px 0 0; gap: 0; }
  .guide-item__num .num { font-size: 84px; font-weight: 300; letter-spacing: 0.15em; margin-right: calc(-0.15em + 6px); }
  .guide-item__num .brand { font-size: 14px; margin: 20px 0 0; }

  .guide-item__content { padding-top: 74px; padding-bottom: 158px; }

  .info-section + .info-section { margin-top: 74px; }
  .info-section__title { font-size: 24px; letter-spacing: 0; line-height: 1.4; }
  .info-section__line { width: 40px; margin: 15px auto 19px; }
  .info-section__box { font-size: 18px; letter-spacing: 0.05em; line-height: 28px; }

  .icon-circle, .clock { width: 68px; height: 68px; }

  .checkin-th { height: 60px; font-size: 18px; letter-spacing: 0; }
  .checkin-td { height: 98px; font-size: 18px; letter-spacing: 0.05em; gap: 20px; }

  .info-caution { padding: 15px 0 15px 10px; gap: 20px; }

  .info-contact { padding: 19px 0 24px; }
  .info-contact__address { font-size: 18px; margin-bottom: 9px; }
  .info-contact__tel { gap: 20px; vertical-align: top; padding-left: 4px; }
  .tel-number { font-size: 36px; letter-spacing: 0.012em; line-height: 1; }

  .info-facility { padding: 26px 0 16px; }
  .info-facility__row { gap: 20px; margin-bottom: 10px; padding-right: 5px; }
  .info-facility > p { letter-spacing: 0.05em; padding-left: 20px; }

  /* 02〜04 */
  .map-wrapper { aspect-ratio: 1002 / 363; }
  .access-directions { padding: 21px 0 25px 12px; }
  .room-img, .cafe-img { aspect-ratio: 483 / 273; }
  .cafe-grid { gap: 37px 36px; }
  .facility-desc-box { padding: 21px 0 21px 12px; }
}

/* タブレット幅（769〜900px）：ヘッダーが横にはみ出さないようサイト名テキストを省略 */
@media (min-width: 769px) and (max-width: 900px) {
  .logo-name { display: none; }
}

/* ページトップボタン（PSD：外径60px円・線2px） */
.page-top {
  position: fixed;
  right: clamp(16px, 6.25vw, 100px);
  bottom: 40px;
  width: 60px;             /* PSD実測：円の外径60px */
  height: 60px;
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  background: rgba(255, 255, 255, 0.85);
  z-index: 50;
  transition: opacity 0.2s;
}
.page-top:hover { opacity: 0.6; }
.page-top svg { width: 26px; height: 23px; margin-top: -3px; }

/* ============================================
   フッター（PSD実寸）
   ============================================ */
.site-footer {
  background: #362013;
  color: #fff;
  padding: 80px var(--side-pad) 40px;
}

.footer-inner {
  max-width: 1262px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

/* 左：ロゴ＋名称＋住所 */
.footer-left {
  display: flex;
  align-items: center;
  gap: 21px;
  padding-left: 2px;
}
.footer-logo img { width: 137px; height: auto; display: block; }

.footer-info { display: flex; flex-direction: column; gap: 19px; padding-top: 4px; }

.footer-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  letter-spacing: 0.1em;
  line-height: 1;
}

.footer-address {
  font-family: 'Sawarabi Gothic', var(--font-ja);
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* 右：電話＋Instagram＋Copyright */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-tel {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
}
.footer-tel__icon { width: 30px; height: 30px; fill: currentColor; }
.footer-tel__num {
  font-family: 'Montserrat', sans-serif;
  font-size: 36px;
  letter-spacing: 0.025em;
  line-height: 30px;
}

.footer-instagram {
  display: block;
  width: 40px;
  height: 40px;
  margin-top: 58px;
  color: #fff;
  transition: opacity 0.2s;
}
.footer-instagram svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.footer-instagram:hover { opacity: 0.7; }

.footer-copy {
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 16px;
}

/* ============================================
   レスポンシブ（モバイル ≤ 768px）
   ============================================ */
@media (max-width: 768px) {

  /* ヘッダー（PSD SP：幅750px基準。画面幅に比例して拡大縮小＝1px = 0.2667vw）
     cqw＝スクロールバーを除いた本文幅基準（PCブラウザを狭めて見たときに
     vwだとスクロールバー分はみ出して重なるため）。未対応ブラウザは vw で表示 */
  body { container-type: inline-size; }
  :root { --header-h: 16vw; --header-h: 16cqw; }                      /* 60px @375 */
  .site-logo { gap: 1.333vw; gap: 1.333cqw; padding-left: 2.667vw; padding-left: 2.667cqw; }
  .site-logo__img { width: 14.667vw; width: 14.667cqw; }             /* 55px */
  .logo-name { font-size: 2.667vw; font-size: 2.667cqw; letter-spacing: 0; line-height: 1.15; }  /* 10px */
  .sp-only { display: inline; }
  .header-inner { gap: 2vw; gap: 2cqw; }   /* サイト名〜Instagramの最低余白（重なり防止） */
  .header-nav { gap: 2.8vw; gap: 2.8cqw; }                      /* 10.5px */
  .nav-icon { width: 6.4vw; width: 6.4cqw; height: 6.4vw; height: 6.4cqw; margin-right: -0.267vw; margin-right: -0.267cqw; }  /* 24px */
  .btn-lang, .btn-reserve { width: 18.667vw; width: 18.667cqw; height: 6.4vw; height: 6.4cqw; font-size: 3.2vw; font-size: 3.2cqw; }  /* 70×24 / 12px */
  .btn-lang { padding-bottom: 1.067vw; padding-bottom: 1.067cqw; }
  .lang-menu__item { height: 6.4vw; height: 6.4cqw; font-size: 3.2vw; font-size: 3.2cqw; }
  .lang-menu li + li { border-top-width: 1px; }           /* Montserratの文字位置を上げる */
  .btn-menu { width: 16.267vw; width: 16.267cqw; margin-left: -3.067vw; margin-left: -3.067cqw; }  /* 61px */
  .btn-menu span { left: 50%; width: 8vw; width: 8cqw; height: max(2px, 0.533vw); height: max(2px, 0.533cqw); transform: translateX(-50%); }
  .btn-menu span:first-child { top: 6.4vw; top: 6.4cqw; }       /* 24px */
  .btn-menu span:last-child  { top: 9.067vw; top: 9.067cqw; }     /* 34px */
  .btn-menu.is-active span { top: 7.733vw; top: 7.733cqw; left: 50%; width: 8vw; width: 8cqw; }
  .btn-menu.is-active span:first-child { transform: translateX(-50%) rotate(19deg); }
  .btn-menu.is-active span:last-child  { transform: translateX(-50%) rotate(-19deg); }

  .pc-only { display: none; }

  /* メニューオーバーレイ（PSD SP：幅750÷2） */
  .menu-nav__link { min-height: 77px; max-width: none; gap: 10px; padding: 0 20px; }
  .menu-nav__title { gap: 4px; }
  .menu-nav__title .en { font-size: min(21px, 5.6vw); letter-spacing: 0.075em; }
  .menu-nav__title .ja { font-size: 13px; letter-spacing: 0.1em; line-height: 1.3; }
  .menu-nav__arrow { width: 30px; height: 30px; margin-right: 0; border-width: 1.5px; }
  .menu-nav__arrow svg { width: 12px; height: 13px; margin-left: 1.5px; }
  .menu-footer { padding: 27px 20px 39px; }
  .menu-footer__tel { font-size: 27px; gap: 10px; }
  .menu-footer__tel svg { width: 23px; height: 23px; }
  .menu-footer__address { margin-top: 6.5px; font-size: 13px; letter-spacing: 0.05em; }

  /* イントロ（PSD SP） */
  .intro { padding: 73px 18px 76px; }
  .intro-heading { font-size: 24px; line-height: 30px; }
  .intro-sub { font-size: 12px; line-height: 16px; margin-top: 4px; }
  .intro-body { margin-top: 28px; font-size: min(13px, 3.467vw); line-height: 20px; }
  .intro-body p + p { margin-top: 20px; }

  /* ガイドセクション（PSD SP：幅750÷2） */
  .guide-list { --g-line: 1px; }
  .guide-item__header {
    border-width: 1.5px;
    padding: 0 9px 0 20px;
  }
  .guide-item__header-inner { min-height: 78px; gap: 10px; }
  .guide-item__title { gap: 0; padding-bottom: 2px; }
  .guide-item__title .en { font-size: min(24px, 6.4vw); letter-spacing: 0.07em; margin: 2px 0 0 -2px; line-height: 1.2; white-space: nowrap; }
  .guide-item__title .ja { font-size: 13px; line-height: 1.3; }
  .guide-item__num {
    width: min(91px, 24.27vw);
    margin: 2.5px 0;
    padding: 10px 0 0;
    gap: 0;
    border-width: 2px;
  }
  .guide-item__num .num { font-size: min(42px, 11.2vw); font-weight: 300; letter-spacing: 0.15em; margin-right: calc(-0.15em - 2px); }
  .guide-item__num .brand { font-size: 12px; margin: 4.5px 0 0; }

  .guide-item__content { padding: 36.5px 19px 78px; }
  .info-section + .info-section { margin-top: 37px; }
  .info-section--tight { margin-top: 19px !important; }
  .info-section__title { font-size: 18px; letter-spacing: 0; }
  .info-section__line { width: 21px; height: 2px; margin: 15px auto 18px; }
  .info-section__box {
    font-size: min(14px, 3.733vw);   /* 375px幅で14px、それより狭い端末では縮小して改行位置を保つ */
    letter-spacing: 0.05em;
    line-height: 22px;
    padding: 12px 8px;
  }
  .icon-circle, .clock { width: 51px; height: 51px; }

  /* チェックイン：SPは2つの箱に分ける */
  .checkin-box { border: none; padding: 0; }
  .checkin-table { grid-template-columns: 1fr; gap: 19px; }
  .checkin-col,
  .checkin-col + .checkin-col { border: var(--g-line) solid var(--g-ink); }
  .checkin-th { height: 40px; font-size: 14px; }
  /* PSD：時計は左寄せ固定、時刻は中央寄り */
  .checkin-td { position: relative; height: 69px; font-size: 14px; padding-left: 62px; }
  .checkin-td .clock { position: absolute; left: 93px; top: 50%; transform: translateY(-50%); }

  /* 注意事項：アイコン左・文字左揃え */
  .info-caution {
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 8px 12px 28px;
  }

  /* 住所／電話 */
  .info-contact { padding: 12px 8px 15px; }
  .info-contact__address { font-size: 14px; margin-bottom: 4px; }
  /* PSD SP：アイコン左端を揃える（枠内左から20px）・アイコン〜文字17px */
  .info-contact__tel { display: flex; justify-content: flex-start; gap: 16px; margin-left: 20px; }
  .tel-number { font-size: 30px; letter-spacing: 0.01em; }

  /* 設備 */
  .info-facility { padding: 16.5px 8px 9px; }
  .info-facility__row { justify-content: flex-start; gap: 17px; margin: 0 0 4.5px 20px; padding-right: 0; }
  .info-facility > p { padding-left: 8px; letter-spacing: 0.06em; }

  /* Access：地図は16:9 */
  .map-wrapper { aspect-ratio: 16 / 9; }
  .access-directions { padding: 10.5px 8px; line-height: 22px; }

  /* 画像：SPは全幅・1カラム */
  .room-img-wrap { margin-bottom: 19px; }
  .room-img { width: 100%; }
  .cafe-grid { grid-template-columns: 1fr; gap: 18.5px; margin-bottom: 19px; }
  .facility-desc-box { padding: 10px 4px; letter-spacing: 0.03em; }

  .page-top { width: 30px; height: 30px; right: 10px; bottom: 20px; border-width: 1px; }
  .page-top svg { width: 13px; height: 12px; margin: -3px 0 0 -0.5px; }
  .info-caution__text { min-width: 0; }

  /* フッター（PSD SP：中央揃え1カラム） */
  .site-footer { padding: 34px 20px 18px; }
  .footer-inner { flex-direction: column; align-items: center; gap: 0; text-align: center; }
  .footer-left { flex-direction: column; gap: 8px; padding: 0; }
  .footer-logo img { width: 112px; }
  .footer-info { align-items: center; gap: 15px; padding-top: 0; }
  .footer-name { font-size: 13px; }
  .footer-address { font-size: 13px; }
  .footer-right { align-items: center; margin-top: 20px; }
  .footer-tel { gap: 10px; }
  .footer-tel__icon { width: 23px; height: 23px; }
  .footer-tel__num { font-size: 27px; line-height: 23px; }
  .footer-instagram { width: 30px; height: 30px; margin-top: 18px; }
  .footer-copy { font-size: 10px; letter-spacing: 0.02em; margin-top: 18px; }
}

/* ============================================
   英語表示（html[lang="en"]）：和文フォント指定の箇所を Montserrat に
   ============================================ */
html[lang="en"] .intro-heading,
html[lang="en"] .intro-body,
html[lang="en"] .btn-reserve,
html[lang="en"] .menu-nav__title .ja,
html[lang="en"] .menu-footer__address,
html[lang="en"] .footer-address {
  font-family: 'Montserrat', sans-serif;
}
html[lang="en"] .guide-list { --g-font-ja: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
html[lang="en"] .intro-heading { letter-spacing: 0.05em; }
html[lang="en"] .intro-body,
html[lang="en"] .info-section__box { letter-spacing: 0.02em; }
html[lang="en"] .guide-item__title .ja,
html[lang="en"] .menu-nav__title .ja { letter-spacing: 0.05em; }
html[lang="en"] body { overflow-wrap: break-word; line-break: auto; }   /* 英単語の途中で折り返さない */
html[lang="en"] .info-facility__row p,
html[lang="en"] .info-caution__text { text-align: left; }