@charset "utf-8";

/* ========================================================
   変数 (Variables)
   ======================================================== */
:root {
  /* --- カラーパレット --- */
  --black: #242323;
  --white: #ffffff;
  --cream: #f4f4e6;
  /* サイト背景色（XD実測値） */
  --nav_bg: #f5f8f7;
  /* ナビオーバーレイ背景 */
  --brown: #903f1b;
  /* メインアクセント（テキスト・見出し・ボタン） */
  --brown_dark: #6b2e12;
  --brown_light: #c9a882;
  /* ベージュ・サブカラー */
  --green_dark: #2c4525;
  /* ダークフォレストグリーン（XD実測値） */
  --green: #5c7a40;
  /* ミドルグリーン */
  --beige_bg: #ede8db;
  /* やや暗いクリーム */

  /* --- XD スペックパレット実測値 --- */
  --taupe: #ded5ce;
  /* NISHIFUNA NOTE パネル・地図背景 */
  --khaki: #e6e6b9;
  /* ACCESS+LOCATION 背景 */
  --brown_deep: #782d19;
  /* 濃ブラウン */
  --terracotta: #a3735d;
  /* フッター背景想定 */
  --salmon: #e5b19a;
  /* サーモン（アクセント） */
  --hover_pink: #e8dbd3;
  /* ボタンホバー背景 */

  /* エイリアス（既存テンプレートとの互換性） */
  --main: var(--brown);
  --accent: var(--green);
  --bg_gray: var(--beige_bg);

  /* --- フォント --- */
  --font_base: "游明朝体", "Noto Serif JP", "Yu Mincho", serif;
  --font_en: "EB Garamond", serif;
  /* 英字見出し */
  --font_deco: "Oranienbaum", serif;
  /* 装飾英字 */

  /* --- ボックスシャドウ --- */
  --shadow_primary: 0.3rem 0.3rem 1.5rem -0.3rem rgba(0, 0, 0, 0.15);

  /* --- Z-index 管理 --- */
  --z_back: -1;
  --z_default: 1;
  --z_header: 100;
  --z_nav: 200;
  --z_modal: 1000;
  --z_toast: 9999;

  /* --- JS 連携用 --- */
  --js_windowWidth: 100vw;
  --js_vw: 1vw;
  --vh: 1vh;

  /* --- MV スケール（1 = 等倍、0.9 = 90%縮小など） --- */
  --mv-scale: 1;
}

@media screen and (max-width: 768px) {
  :root {
    --shadow_primary: 0.2rem 0.2rem 1rem -0.2rem rgba(0, 0, 0, 0.15);
  }
}

/* ========================================================
   リセット & ベース (Reset & Base)
   ======================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(7.5px, 1.344px + 0.6vw, 10px);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  width: 100%;
}

body {
  font-family: var(--font_base);
  color: var(--black);
  font-size: 1.6rem;
  font-weight: 400;
  background-color: var(--cream);
  letter-spacing: 0.05em;
  -webkit-font-smoothing: antialiased;
}

/* ========================================================
   ローディング画面
   白画面 → ロゴがフェードイン → 読み込み完了で画面ごとじわっとフェードアウト
   ======================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  transition: opacity 1.4s ease;
}

.loader_logo {
  width: 22rem;
  aspect-ratio: 235 / 51.93;
  opacity: 0;
  transition: opacity 1.2s ease;
  background-color: var(--brown);
  -webkit-mask-image: url(../img/cmn/logo.svg);
  mask-image: url(../img/cmn/logo.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

@media screen and (max-width: 768px) {
  .loader_logo {
    width: 16rem;
  }
}

.loader.is_logo_visible .loader_logo {
  opacity: 1;
}

.loader.is_hidden {
  opacity: 0;
  pointer-events: none;
}

html.is_loading,
html.is_loading body {
  overflow: hidden;
  height: 100%;
}

/* ========================================================
   下層ページ（index以外）の overflow-x 対策
   ======================================================== */
.page_about,
.page_access,
.page_faq,
.page_note,
.page_roomplan,
.page_spec {
  overflow-x: hidden;
}

.sec_mv,
.sec_intro,
.sec_about,
.sec_spec,
.sec_roomplan,
.sec_access,
.sec_note,
.sec_gallery,
.sec_contact {
  overflow-x: hidden;
}

/* ヘッダーとフッターの overflow-x 対策 */
.header,
.footer {
  overflow-x: hidden;
}

/* ========================================================
   メニュー開閉時の背面スクロール防止
   ======================================================== */
html:has(body.is_hamb_open),
body.is_hamb_open {
  overflow: hidden !important;
  /* スクロールバーの消失によるレイアウトシフトを防ぐ */
  padding-right: var(--scrollbar-width, 0px);
  overscroll-behavior: none;
}

/* ヘッダーも固定要素のため、スクロールバーの消失に合わせて右端を調整 */
body.is_hamb_open .header {
  right: var(--scrollbar-width, 0px);
  width: auto;
  /* rightプロパティを有効にするためwidthをautoに設定 */
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  border-style: none;
}

img[src*=".svg"] {
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    opacity 0.3s,
    color 0.3s;
  cursor: pointer;
}

a:hover {
  opacity: 0.7;
}

input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background-color: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  resize: vertical;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* ========================================================
   レスポンシブ文字サイズ制御 (Fluid Typography)
   ======================================================== */
@media screen and (max-width: 1200px) {
  html {
    font-size: 58.59%;
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 54.69%;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 93.75%;
  }

  body {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 530px) {
  html {
    font-size: 78.13%;
  }
}

@media screen and (max-width: 430px) {
  html {
    font-size: calc(2.551 * var(--js_vw));
  }
}

/* ========================================================
   レイアウト & ユーティリティ
   ======================================================== */
.inner {
  width: 90%;
  max-width: 108rem;
  margin-inline: auto;
}

.inner.is_wide {
  max-width: 1200px;
}

.inner.is_full {
  width: 100%;
  max-width: 1440px;
  padding-inline: 4%;
}

@media screen and (max-width: 768px) {
  .inner {
    width: 94%;
  }
}

.visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pc_only {
  display: block;
}

.sp_only {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc_only {
    display: none !important;
  }

  .sp_only {
    display: block;
  }
}

.bold {
  font-weight: 700;
}

.object_cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ========================================================
   アニメーション & スクロール発火
   ======================================================== */

/* =====
	フェードイン
======================================================== */
.fade, .fade-down, .fade-right, .fade-left{
	opacity: 0;
}

.animation.fade{/* 下から上へ */
	animation: fade-up .7s ease forwards;
}

.animation.fade-down{/* 上から下へ */
	animation: fade-down .7s ease forwards;
}
.animation.fade-right{/* 左から右へ */
	animation: fade-right .7s ease forwards;
}
.animation.fade-left{/* 右から左へ */
	animation: fade-left .7s ease forwards;
}

@keyframes fade-up{
	from {
		opacity: 0;
		transform: translateY(2rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fade-down{
	from {
		opacity: 0;
		transform: translateY(-2rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fade-right{
	from {
		opacity: 0;
		transform: translateX(-2rem);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fade-left{
	from {
		opacity: 0;
		transform: translateX(2rem);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* =====
	アニメーション時間制御
======================================================== */
.animation.delay01{animation-delay:.1s!important;}
.animation.delay02{animation-delay:.2s!important;}
.animation.delay03{animation-delay:.3s!important;}
.animation.delay04{animation-delay:.4s!important;}
.animation.delay05{animation-delay:.5s!important;}
.animation.delay06{animation-delay:.6s!important;}
.animation.delay07{animation-delay:.7s!important;}
.animation.delay08{animation-delay:.8s!important;}
.animation.delay09{animation-delay:.9s!important;}
.animation.delay10{animation-delay:1s!important;}
.animation.delay11{animation-delay:1.1s!important;}
.animation.delay12{animation-delay:1.2s!important;}
.animation.delay13{animation-delay:1.3s!important;}
.animation.delay14{animation-delay:1.4s!important;}
.animation.delay15{animation-delay:1.5s!important;}
.animation.delay16{animation-delay:1.6s!important;}
.animation.delay17{animation-delay:1.7s!important;}
.animation.delay18{animation-delay:1.8s!important;}
.animation.delay19{animation-delay:1.9s!important;}
.animation.delay20{animation-delay:2s!important;}
.animation.delay21{animation-delay:2.1s!important;}
.animation.delay22{animation-delay:2.2s!important;}
.animation.delay23{animation-delay:2.3s!important;}
.animation.delay24{animation-delay:2.4s!important;}
.animation.delay25{animation-delay:2.5s!important;}
.animation.delay26{animation-delay:2.6s!important;}
.animation.delay27{animation-delay:2.7s!important;}
.animation.delay28{animation-delay:2.8s!important;}
.animation.delay29{animation-delay:2.9s!important;}
.animation.delay30{animation-delay:3s!important;}
.animation.delay31{animation-delay:3.1s!important;}
.animation.delay32{animation-delay:3.2s!important;}
.animation.delay33{animation-delay:3.3s!important;}
.animation.delay34{animation-delay:3.4s!important;}
.animation.delay35{animation-delay:3.5s!important;}
.animation.delay36{animation-delay:3.6s!important;}
.animation.delay37{animation-delay:3.7s!important;}
.animation.delay38{animation-delay:3.8s!important;}
.animation.delay39{animation-delay:3.9s!important;}
.animation.delay40{animation-delay:4s!important;}
.animation.clip.delay01{transition-delay:.1s!important;}
.animation.clip.delay02{transition-delay:.2s!important;}
.animation.clip.delay03{transition-delay:.3s!important;}
.animation.clip.delay04{transition-delay:.4s!important;}
.animation.clip.delay05{transition-delay:.5s!important;}
.animation.clip.delay06{transition-delay:.6s!important;}
.animation.clip.delay07{transition-delay:.7s!important;}
.animation.clip.delay08{transition-delay:.8s!important;}
.animation.clip.delay09{transition-delay:.9s!important;}
.animation.clip.delay10{transition-delay:1s!important;}
.animation.clip.delay11{transition-delay:1.1s!important;}
.animation.clip.delay12{transition-delay:1.2s!important;}
.animation.clip.delay13{transition-delay:1.3s!important;}
.animation.clip.delay14{transition-delay:1.4s!important;}
.animation.clip.delay15{transition-delay:1.5s!important;}
.animation.clip.delay16{transition-delay:1.6s!important;}
.animation.clip.delay17{transition-delay:1.7s!important;}
.animation.clip.delay18{transition-delay:1.8s!important;}
.animation.clip.delay19{transition-delay:1.9s!important;}
.animation.clip.delay20{transition-delay:2s!important;}
.animation.clip.delay21{transition-delay:2.1s!important;}
.animation.clip.delay22{transition-delay:2.2s!important;}
.animation.clip.delay23{transition-delay:2.3s!important;}
.animation.clip.delay24{transition-delay:2.4s!important;}
.animation.clip.delay25{transition-delay:2.5s!important;}
.animation.clip.delay26{transition-delay:2.6s!important;}
.animation.clip.delay27{transition-delay:2.7s!important;}
.animation.clip.delay28{transition-delay:2.8s!important;}
.animation.clip.delay29{transition-delay:2.9s!important;}
.animation.clip.delay30{transition-delay:3s!important;}
.animation.clip.delay31{transition-delay:3.1s!important;}
.animation.clip.delay32{transition-delay:3.2s!important;}
.animation.clip.delay33{transition-delay:3.3s!important;}
.animation.clip.delay34{transition-delay:3.4s!important;}
.animation.clip.delay35{transition-delay:3.5s!important;}
.animation.clip.delay36{transition-delay:3.6s!important;}
.animation.clip.delay37{transition-delay:3.7s!important;}
.animation.clip.delay38{transition-delay:3.8s!important;}
.animation.clip.delay39{transition-delay:3.9s!important;}
.animation.clip.delay40{transition-delay:4s!important;}

.animation.duration01{animation-duration:.1s;}
.animation.duration02{animation-duration:.2s;}
.animation.duration03{animation-duration:.3s;}
.animation.duration04{animation-duration:.4s;}
.animation.duration05{animation-duration:.5s;}
.animation.duration06{animation-duration:.6s;}
.animation.duration07{animation-duration:.7s;}
.animation.duration08{animation-duration:.8s;}
.animation.duration09{animation-duration:.9s;}
.animation.duration10{animation-duration:1s;}

@media screen and (max-width: 768px) {
	.animation.delay-pc{animation-delay:0s!important;}
	.animation.clip.delay-pc{transition-delay:0s!important;}
	.animation.delay01sp{animation-delay:.1s!important;}
	.animation.delay02sp{animation-delay:.2s!important;}
	.animation.delay03sp{animation-delay:.3s!important;}
	.animation.delay04sp{animation-delay:.4s!important;}
	.animation.delay05sp{animation-delay:.5s!important;}
	.animation.delay06sp{animation-delay:.6s!important;}
	.animation.delay07sp{animation-delay:.7s!important;}
	.animation.delay08sp{animation-delay:.8s!important;}
	.animation.delay09sp{animation-delay:.9s!important;}
	.animation.delay10sp{animation-delay:1s!important;}
	.animation.delay11sp{animation-delay:1.1s!important;}
	.animation.delay12sp{animation-delay:1.2s!important;}
	.animation.delay13sp{animation-delay:1.3s!important;}
	.animation.delay14sp{animation-delay:1.4s!important;}
	.animation.delay15sp{animation-delay:1.5s!important;}
	.animation.delay16sp{animation-delay:1.6s!important;}
	.animation.delay17sp{animation-delay:1.7s!important;}
	.animation.delay18sp{animation-delay:1.8s!important;}
	.animation.delay19sp{animation-delay:1.9s!important;}
	.animation.delay20sp{animation-delay:2s!important;}
	.animation.delay21sp{animation-delay:2.1s!important;}
	.animation.delay22sp{animation-delay:2.2s!important;}
	.animation.delay23sp{animation-delay:2.3s!important;}
	.animation.delay24sp{animation-delay:2.4s!important;}
	.animation.delay25sp{animation-delay:2.5s!important;}
	.animation.delay26sp{animation-delay:2.6s!important;}
	.animation.delay27sp{animation-delay:2.7s!important;}
	.animation.delay28sp{animation-delay:2.8s!important;}
	.animation.delay29sp{animation-delay:2.9s!important;}
	.animation.delay30sp{animation-delay:3s!important;}
	.animation.delay31sp{animation-delay:3.1s!important;}
	.animation.delay32sp{animation-delay:3.2s!important;}
	.animation.delay33sp{animation-delay:3.3s!important;}
	.animation.delay34sp{animation-delay:3.4s!important;}
	.animation.delay35sp{animation-delay:3.5s!important;}
	.animation.delay36sp{animation-delay:3.6s!important;}
	.animation.delay37sp{animation-delay:3.7s!important;}
	.animation.delay38sp{animation-delay:3.8s!important;}
	.animation.delay39sp{animation-delay:3.9s!important;}
	.animation.delay40sp{animation-delay:4s!important;}
	.animation.clip.delay01sp{transition-delay:.1s!important;}
	.animation.clip.delay02sp{transition-delay:.2s!important;}
	.animation.clip.delay03sp{transition-delay:.3s!important;}
	.animation.clip.delay04sp{transition-delay:.4s!important;}
	.animation.clip.delay05sp{transition-delay:.5s!important;}
	.animation.clip.delay06sp{transition-delay:.6s!important;}
	.animation.clip.delay07sp{transition-delay:.7s!important;}
	.animation.clip.delay08sp{transition-delay:.8s!important;}
	.animation.clip.delay09sp{transition-delay:.9s!important;}
	.animation.clip.delay10sp{transition-delay:1s!important;}
	.animation.clip.delay11sp{transition-delay:1.1s!important;}
	.animation.clip.delay12sp{transition-delay:1.2s!important;}
	.animation.clip.delay13sp{transition-delay:1.3s!important;}
	.animation.clip.delay14sp{transition-delay:1.4s!important;}
	.animation.clip.delay15sp{transition-delay:1.5s!important;}
	.animation.clip.delay16sp{transition-delay:1.6s!important;}
	.animation.clip.delay17sp{transition-delay:1.7s!important;}
	.animation.clip.delay18sp{transition-delay:1.8s!important;}
	.animation.clip.delay19sp{transition-delay:1.9s!important;}
	.animation.clip.delay20sp{transition-delay:2s!important;}
	.animation.clip.delay21sp{transition-delay:2.1s!important;}
	.animation.clip.delay22sp{transition-delay:2.2s!important;}
	.animation.clip.delay23sp{transition-delay:2.3s!important;}
	.animation.clip.delay24sp{transition-delay:2.4s!important;}
	.animation.clip.delay25sp{transition-delay:2.5s!important;}
	.animation.clip.delay26sp{transition-delay:2.6s!important;}
	.animation.clip.delay27sp{transition-delay:2.7s!important;}
	.animation.clip.delay28sp{transition-delay:2.8s!important;}
	.animation.clip.delay29sp{transition-delay:2.9s!important;}
	.animation.clip.delay30sp{transition-delay:3s!important;}
	.animation.clip.delay31sp{transition-delay:3.1s!important;}
	.animation.clip.delay32sp{transition-delay:3.2s!important;}
	.animation.clip.delay33sp{transition-delay:3.3s!important;}
	.animation.clip.delay34sp{transition-delay:3.4s!important;}
	.animation.clip.delay35sp{transition-delay:3.5s!important;}
	.animation.clip.delay36sp{transition-delay:3.6s!important;}
	.animation.clip.delay37sp{transition-delay:3.7s!important;}
	.animation.clip.delay38sp{transition-delay:3.8s!important;}
	.animation.clip.delay39sp{transition-delay:3.9s!important;}
	.animation.clip.delay40sp{transition-delay:4s!important;}

	.animation.duration_pc{animation-duration:0s!important;}
	.animation.duration01sp{animation-duration:.1s;}
	.animation.duration02sp{animation-duration:.2s;}
	.animation.duration03sp{animation-duration:.3s;}
	.animation.duration04sp{animation-duration:.4s;}
	.animation.duration05sp{animation-duration:.5s;}
	.animation.duration06sp{animation-duration:.6s;}
	.animation.duration07sp{animation-duration:.7s;}
	.animation.duration08sp{animation-duration:.8s;}
	.animation.duration09sp{animation-duration:.9s;}
	.animation.duration10sp{animation-duration:1s;}
}

/* ========================================================
   ボタン共通 (Buttons)
   ======================================================== */
.btn_contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border: 1px solid var(--brown);
  border-radius: 100px;
  padding: 0.4rem 2rem 0.2rem;
  line-height: 1;
  font-family: var(--font_deco);
  font-size: 3.5rem;
  color: var(--brown);
  transition:
    background-color 0.3s,
    color 0.3s,
    opacity 0.3s,
    visibility 0.3s;
}

.btn_contact:hover {
  background-color: #e8dad3;
  color: var(--brown);
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .btn_contact {
    font-size: 1.8rem;
    padding: 0.5rem 0.8rem 0.4rem;
  }
}

.btn_contact_nav {
  grid-column: 2;
  width: 516px !important;
  height: 143px !important;
  background: var(--cream);
  border: 1px solid var(--brown);
  border-radius: 100px;
  font-family: var(--font_deco);
  letter-spacing: 0.05em;
  color: var(--brown);
  transition: background-color 0.3s, color 0.3s;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3.5rem !important;
  font-size: 6rem !important;
  padding-inline: 0 !important;
  margin-top: 7rem !important;
  position: relative !important;
}

.nav_contact_arrow {
  display: inline-block;
  position: absolute !important;
  right: 5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4.5rem;
  height: 1px;
  background-color: var(--brown);
  transition: transform 0.35s ease;
}

.nav_contact_arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.4rem;
  height: 1px;
  background-color: var(--brown);
  transform: rotate(35deg);
  transform-origin: right bottom;
}

.btn_contact_nav:hover .nav_contact_arrow {
  transform: translateY(-50%) translateX(1.5rem);
}

.btn_contact_nav:hover {
  background-color: var(--hover_pink);
  color: var(--brown);
  opacity: 1;
}

.btn_contact_nav span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn_contact_nav:hover span {
  transform: translateX(1.5rem);
}

@media screen and (max-width: 1024px) {
  .btn_contact_nav {
    width: 100% !important;
    max-width: 350px !important;
    height: 90px !important;
    font-size: 4rem !important;
  }

  .btn_contact_nav .nav_contact_arrow {
    right: 3rem !important;
    width: 2.5rem !important;
  }
}


@media screen and (max-width: 768px) {
  .btn_contact_nav {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 70px !important;
    padding-inline: 0 !important;
    justify-content: center !important;
    font-size: 3.2rem !important;
    margin-top: 0 !important;
  }

  .btn_contact_nav .nav_contact_arrow {
    position: absolute !important;
    right: 2.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 2rem !important;
  }

  .nav_contact_arrow::after {
    width: 1rem;
  }

  .btn_contact_nav:hover .nav_contact_arrow {
    transform: translateY(-50%) translateX(0.8rem) !important;
  }
}


/* ========================================================
   ヘッダー & ナビゲーションオーバーレイ
   ======================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 250 !important;
  background: transparent;
  transition: background-color 0.4s ease;
}

body.is_scroll .header {
  background-color: var(--cream);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.header_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.1rem 3rem 2rem;
  max-width: 144rem;
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .header_inner {
    padding: 1.6rem 1.8rem;
  }
}

.header_logo {
  width: 16rem;
  flex-shrink: 0;
  line-height: 1;
}

.header_logo a {
  display: block;
}

@media screen and (max-width: 768px) {
  .header_logo {
    width: 14rem;
  }
}

.header_right {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.hamb {
  width: 6.0rem;
  height: 2.2rem;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .header_right {
    gap: 2rem;
  }
  .hamb {
    width: 3.9rem;
    height: 1.4rem;
  }
  body.is_hamb_open .header .hamb .hamb_line:nth-child(1) {
    transform: translateY(0.7rem) rotate(20deg) !important;
  }
  body.is_hamb_open .header .hamb .hamb_line:nth-child(3) {
    transform: translateY(-0.7rem) rotate(-20deg) !important;
  }
}

.hamb_line {
  display: block;
  position: absolute;
  left: 0;
  height: 1px;
  background-color: var(--brown);
  transition:
    transform 0.35s ease,
    opacity 0.35s ease,
    width 0.35s ease,
    left 0.35s ease;
  transform-origin: center;
}

.hamb .hamb_line:nth-child(1) {
  top: 0;
  width: 45%;
}

.hamb .hamb_line:nth-child(2) {
  top: 50%;
  width: 70%;
}

.hamb .hamb_line:nth-child(3) {
  top: 100%;
  width: 100%;
}

.hamb:hover .hamb_line:nth-child(1) {
  opacity: 0;
  width: 0;
  left: 100%;
}

.hamb:hover .hamb_line:nth-child(2) {
  width: 100%;
  left: 0;
}

.hamb:hover .hamb_line:nth-child(3) {
  width: 55%;
  left: 45%;
}

body.is_hamb_open .header .hamb .hamb_line:nth-child(1) {
  opacity: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateY(1.1rem) rotate(20deg);
}

body.is_hamb_open .header .hamb .hamb_line:nth-child(2) {
  opacity: 0;
}

body.is_hamb_open .header .hamb .hamb_line:nth-child(3) {
  width: 100%;
  left: 0;
  top: 100%;
  transform: translateY(-1.1rem) rotate(-20deg);
}

body.is_hamb_open .header {
  background-color: transparent;
  transition: none !important;
  z-index: 250 !important;
}

body.is_hamb_open .header .btn_contact {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.nav_overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z_nav);
  background-color: var(--nav_bg);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  overflow: hidden !important;
}

body.is_hamb_open .nav_overlay {
  opacity: 1;
  pointer-events: auto;
}

.nav_bg_deco {
  position: absolute;
  left: -20rem;
  bottom: -40rem;
  width: 140%;
  z-index: 0;
  pointer-events: none;
  /* transform: rotate(10deg); */
}

.nav_bg_deco img {
  width: 100%;
  height: auto;
}

.nav_overlay_inner {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1200px !important;
  margin-inline: auto;
  padding-top: 12rem !important;
  padding-block: 0 5rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.nav_overlay_top {
  display: none !important;
}

.nav_logo {
  width: 160px;
}

@media screen and (max-width: 768px) {
  .nav_logo {
    width: 120px;
  }

  .nav_overlay {
    height: 100vh !important;
    bottom: auto !important;
  }

  .nav_overlay_inner {
    width: 100% !important;
    padding-top: 8rem !important;
  }

  .nav_overlay_top {
    padding-bottom: 1.6rem 2rem !important;
    min-height: 0 !important;
  }

  .nav_bg_deco {
    bottom: -30vw;
    width: 140%;
    left: -10%;
  }

  .nav_close {
    width: 3.9rem;
    height: 1.4rem;
  }
}

.nav_close {
  width: 6.0rem;
  height: 2.2rem;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

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

.nav_close::before {
  transform: rotate(20deg);
}

.nav_close::after {
  transform: rotate(-20deg);
}

.nav_menu {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 516px);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 10rem;
  width: 100%;
  max-width: 950px;
  margin-inline: auto;
  margin-top: 4rem;
}

.nav_list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 516px);
  column-gap: 10rem;
  row-gap: 6rem;
}

@media screen and (max-width: 768px) {
  .nav_menu {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    grid-template-columns: none !important;
    width: 28rem !important;
    margin-inline: auto !important;
    margin-top: 2rem;
  }

  .nav_list {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 2rem !important;
    width: 100% !important;
    margin-bottom: 3rem !important;
  }

  /* SP版ナビゲーション順序制御 */
  .nav_about { order: 1; }
  .nav_spec { order: 2; }
  .nav_roomplan { order: 3; }
  .nav_access { order: 4; }
  .nav_note { order: 5; }
  .nav_faq { order: 6; }
}

.nav_link {
  font-family: var(--font_deco);
  font-size: 6rem;
  color: var(--brown);
  letter-spacing: 0.06em;
  line-height: 1;
  transition: opacity 0.3s;
  display: block;
  white-space: nowrap;
}

.nav_link:hover {
  opacity: 0.55;
}

@media screen and (max-width: 1024px) {
  .nav_link {
    font-size: 4.2rem;
  }

  .nav_menu {
    grid-template-columns: minmax(300px, 400px) minmax(280px, 350px);
    column-gap: 5rem;
  }

  .nav_list {
    grid-template-columns: minmax(300px, 400px) minmax(280px, 350px);
    column-gap: 5rem;
  }
}

@media screen and (max-width: 768px) {
  .nav_link {
    font-size: 3.6rem;
  }
}

/* ========================================================
   MV（メインビジュアル）
   ======================================================== */
   /* 1455pxのとき1rem=10.1041pxっぽい */
.sec_mv {
  position: relative;
  height: min(100vh, 125.2rem);/* 1265/10.1041 */
  min-height: 86rem;/* 80rem + 6rem（mv_frameで引く分を先に足しておく） */
  background: var(--cream) url(../img/index/bg.png) no-repeat top center/100%;
  z-index: 10;
  overflow: hidden;
}

.mv_frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 144rem;
  height: calc(100% - 5%);
  margin-inline: auto;
}

@media screen and (max-width: 768px) {
  .sec_mv {
    min-height: 0;
    height: 100vh;
    max-height: 190vw;
  }

  .mv_frame{
    height: 100%;
  }
}


/* もっと下のセクションで使ってる。
==================================== */
.deco_frame {
  position: absolute;
  inset: 0;
  max-width: 144rem;
  margin-inline: auto;
  pointer-events: none;
}

/* 飾り
==================================== */
.mv_deco {
  position: absolute;
  pointer-events: none;
}

.mv_deco img {
  display: block;
  width: 100%;
}

.mv_deco_top {
  top: -11.46rem;
  left: 43.8%;
  width: 44.25%;
}

.mv_deco_btm {
  bottom: 22%;
  left: -9%;
  width: 38%;
}

.mv_deco_right_btm {
  top: 72%;
  right: 13%;
  width: 30%;
}

@media screen and (max-width: 768px) {
  .mv_deco_top {
    left: auto;
    right: -36%;
    top: 1%;
    bottom: auto;
    width: 78%;
    transform: rotate(16deg);
  }

  .mv_deco_btm {
    display: block;
    left: -22%;
    top: 46%;
    bottom: auto;
    width: 62%;
    transform: rotate(-6deg);
  }

  .mv_deco_right_btm {
    width: 44%;
    right: -10%;
    top: 79%;
    bottom: auto;
    transform: rotate(5deg);
  }
}

/* 文字
==================================== */
.mv_copy_wrap {
  position: absolute;
  top: 17%;
  left: 22%;
  z-index: 1;
}

/* なんとなく80remでストップ。808.33px */
.mv_copy {
  font-family: var(--font_base);
  font-weight: 800;
  /* 画面高さ1125pxから縮めたい。4.9*10.1041/1125 = 0.044  */
  /* 画面の高さ808.33pxのときフォントサイズ35.552pxでストップ */
  font-size: clamp(3.518rem, 4.4vh, 4.9rem);
  color: var(--brown);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 0 .25em var(--cream), 0 0 .25em var(--cream);
  letter-spacing: .2em;
  line-height: 1.5;
}

.mv_copy span {
  display: block;
}

.mv_copy .mv_copy_line2 {
  padding-top: 2.35em;
}

@media screen and (max-width: 768px){
  .mv_copy_wrap {
    top: 11%;
    left: 3.5%;
  }

  .mv_copy {
    font-size: 6.89vw;
  }

  .mv_copy .mv_copy_line2 {
    padding-top: 2.66em;
  }
}

/* スライド
==================================== */
/* 1455pxのとき1rem=10.1041pxっぽい */

.mv-slide{
  position: absolute;
}
.mv-slide::before{
  content: "";
  display: block;
}

.mv-slide__main-wrap{
  width: min(64.132rem, 50%);/* 最大648px */
  max-height: calc(100vh - (4.5vh + 8.3936rem) - 15rem);/* 100vh - topの位置 - mv_badgeのはみ出し分 */
  min-height: 37.31rem;/* 画面の高さ600px時点の高さ（377px）でストップ */

  /* 1455pxの時のヘッダーの高さ84.81px。84.81/10.1041=8.3936...rem */
  top: calc(4.5vh + 8.3936rem);/* vhは見た目で調整 */
  right: 0;
}
.mv-slide__main-wrap::before{
  padding-top: 123.46%;/* 1296/1600 ※画像の縦横比 */
}

.mv-slide__sub-wrap{
  width: min(54.433rem, 45%);/* 最大550px */
  bottom: 0;
  left: 0;
}
.mv-slide__sub-wrap::before{
  padding-top: 69.18%;/* 761/1100 ※画像の縦横比 */
}

.mv-slide__list{
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.mv-slide__list > li{
  min-width: 100%;
  height: 100%;
  overflow: hidden;
  animation: mv-slide 6s infinite cubic-bezier(.76, 0, .24, 1) 0s both;
}
.mv-slide__list > li img{
  min-width: 106%;
  height: 100%;
  margin-left: -3%;
  object-fit: cover;
  animation: mv-slide-shaking 6s infinite cubic-bezier(.61, 1, .88, 1) 0s both;
}


@keyframes mv-slide {
  0% {
      transform: translateX(0);
  }
  30% {
      transform: translateX(0);
  }
  50% {
      transform: translateX(-100%);
  }
  80% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(-200%);
  }
}
@keyframes mv-slide-shaking {
  0% {
      transform: translateX(0);
  }
  45% {
      transform: translateX(-3%);
  }
  50% {
      transform: translateX(0);
  }
  95% {
      transform: translateX(-3%);
  }
  100% {
      transform: translateX(0);
  }
}

@media screen and (max-width: 768px) {
  .mv-slide__main-wrap{
    width: 70%;
    max-height: 44vh;/* 画面高さ774pxの時338px */
    min-height: 0;
    top: 19.4%;
  }

  .mv-slide__sub-wrap{
    width: 59%;
    max-height: 21vh;/* 画面高さ774pxの時160px */
    bottom: 9.5%;
  }
  .mv-slide__sub-wrap::before{
    padding-top: 69.18%;/* 761/1100 ※画像の縦横比 */
  }
}


/* 受付開始
==================================== */
/* 1455pxのとき1rem=10.1041pxっぽい */

.mv_badge {
  width: 33%;
  max-width: 19.4rem;/* 196/10.1041 */
  pointer-events: none;
  z-index: 1;
  position: absolute;
  bottom: -11rem;
  right: 4%;
}

.mv_badge img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {

  .mv_badge {
    width: 48%;
    max-width: 13rem;/* 375pxの時130pxぐらいで制御 */
    bottom: -57%;
    right: -4%;
  }

}

/* ========================================================
   セクション共通 & パーツスタイル
   ======================================================== */
.c_sec_title_deco-7_margin {
  margin-bottom: 1rem;
}

.sec_heading+.sec_rule {
  width: 4rem;
  height: 1px;
  background-color: var(--brown);
}

@media screen and (max-width: 768px) {
  .sec_heading {
    font-size: 4.4rem;
  }
}

.sec_access,
.sec_note,
.sec_faq,
.sec_contact {
  padding-top: 15rem;
}

.sec_spec,
.sec_about {
  padding-top: 30rem;
}

@media screen and (max-width: 768px) {

  .sec_access,
  .sec_note,
  .sec_faq,
  .sec_contact {
    padding-top: 10rem;
  }

  .sec_spec,
  .sec_about {
    padding-top: 6rem;
  }
}

.btn_more {
  display: inline-block;
  font-family: var(--font_en);
  font-weight: 700;
  font-size: 3.2rem;
  letter-spacing: 0.05em;
  color: var(--brown);
  text-align: center;
  transition: opacity 0.3s;
}

.btn_more .btn_more_line {
  display: block;
  width: 4rem;
  height: 1px;
  background-color: var(--brown);
  margin: 0 auto;
  transition: width 0.4s ease;
}

.btn_more:hover {
  opacity: 1;
}

.btn_more:hover .btn_more_line {
  width: 8rem;
}

.img_zoom_frame {
  overflow: hidden;
  display: block;
}

.img_zoom_frame .js-zoom-target {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.img_zoom_frame .js-zoom-target.is-zoomed {
  transform: scale(1.2);
}

.sec_en_vertical {
  font-family: var(--font_deco);
  font-weight: 400;
  color: var(--brown);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  letter-spacing: 0.08em;
  font-size: 7rem;
}

@media screen and (max-width: 768px) {
  .sec_en_vertical {
    font-size: 4.4rem;
  }

  .btn_more {
    font-size: 1.3rem;
  }
}

/* ========================================================
   INTRO セクション
======================================================== */
#intro {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: calc(var(--vh, 1vh) * 100);
}

.intro-spacer {
  height: calc(var(--vh, 1vh) * 350);
}

.intro_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.intro_bg_overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.intro_text_wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7rem 2rem 4rem;
  transition: opacity .4s, transform .4s;
}
.intro-show-end .intro_text_wrap{
  opacity: 0;
  transform: translateY(-2rem);
}


.intro_text {
  font-family: var(--font_base);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.8;
  text-align: center;
  color: #402d2d;
  letter-spacing: 0.1em;
}

.intro_sentence {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity .4s, transform .4s;
}

.intro_line {
  display: block;
}

.intro_line_second {
  margin-top: 7rem;
}

.intro-show01 .intro_sentence{
  opacity: 1;
  transform: translateY(0);
}

.intro_exterior {
  position: absolute;
  inset: 0;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to top, #000 50%, transparent 75%);
  mask-image: linear-gradient(to top, #000 50%, transparent 75%);
  -webkit-mask-size: 100% 400%;
  mask-size: 100% 400%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
  mask-position: 0% 0%;
  transition: mask-position .8s, -webkit-mask-position .8s;
}

.intro-show-switch .intro_exterior{
  -webkit-mask-position: 0% 100%;
  mask-position: 0% 100%;
}

@media screen and (max-width: 768px) {
  .intro_text {
    font-size: 1.5rem;
  }

  .intro_line_second {
    margin-top: 3rem;
  }
}

/* ========================================================
   ABOUT セクション（PC）
   ======================================================== */
.sec_about {
  position: relative;
  overflow: hidden;
}

.about_deco_wash {
  top: -38.6rem;
  left: -40.4%;
  width: 118%;
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.about_deco_leaf {
  top: 0;
  right: -6%;
  width: 28%;
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  .about_deco_wash {
    top: -12rem;
    left: -14rem;
    width: 120%;
  }

  .about_deco_leaf,
  .spec_deco_leaf {
    display: none;
  }
}

.sec_about .inner {
  position: relative;
  z-index: 1;
}

.about_wrap {
  display: flex;
  align-items: stretch;
  gap: 4rem;
}

.about_text_area {
  flex: 1;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
}

.about_lead,
.spec_lead,
.roomplan_lead {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 2.7rem;
  line-height: 1.6;
  color: var(--brown);
  letter-spacing: 0.01em;
}

.about_body,
.spec_body,
.roomplan_body {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 2.1;
  color: var(--brown);
  letter-spacing: 0.04em;
  margin-top: 2.6rem;
}

.about_en,
.spec_en,
.roomplan_en {
  align-self: flex-start;
  flex-shrink: 0;
  font-family: var(--font_deco);
  font-weight: 400;
  font-size: 11rem;
  line-height: 1;
  color: var(--brown);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.06em;
  transform: rotate(180deg);
}

.roomplan_en {
  font-size: 8rem;
  letter-spacing: 0.04em;
}

/* 縦書き大見出しは transform: rotate() を使っているため、
   トリガーフェード用の opacity/transform は内側の span に適用する */
.about_en > .fade,
.spec_en > .fade,
.roomplan_en > .fade {
  display: inline-block;
}

.about_more {
  margin-top: auto;
  text-align: right;
  padding-top: 3.5rem;
}

.about_photo {
  flex-shrink: 0;
  width: min(50vw, 960px);
  aspect-ratio: 720 / 500;
  margin-left: auto;
  margin-right: calc(50% - min(50vw, 960px));
  margin-top: 5rem;
}

/* ========================================================
   SPEC セクション（PC）
   ======================================================== */
.sec_spec {
  position: relative;
  overflow: hidden;
}

.spec_deco_leaf {
  position: absolute;
  left: -8%;
  top: -15rem;
  width: 38.6%;
  z-index: 0;
  pointer-events: none;
}

.sec_spec .inner {
  position: relative;
  z-index: 1;
}

.spec_wrap {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4rem;
}

.spec_photo {
  flex-shrink: 0;
  width: min(50vw, 960px);
  aspect-ratio: 720 / 500;
  margin-left: calc(50% - min(50vw, 960px));
  margin-top: 5rem;
}

.spec_text_area {
  flex: 1;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
}

.spec_more {
  margin-top: auto;
  text-align: left;
  padding-top: 3.5rem;
}

/* ========================================================
   ROOM PLAN セクション（PC）
   ======================================================== */
.sec_roomplan {
  position: relative;
  overflow: hidden;
  padding-top: 30rem;
}

.sec_roomplan .inner {
  position: relative;
  z-index: 1;
}

.roomplan_wrap {
  display: flex;
  align-items: stretch;
  gap: 4rem;
  padding-bottom: 30rem;
}

.roomplan_text_area {
  flex: 1;
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  padding-top: 5rem;
}

.roomplan_more {
  margin-top: auto;
  text-align: right;
  padding-top: 3.5rem;
}

.roomplan_photo {
  flex-shrink: 0;
  width: min(50vw, 960px);
  aspect-ratio: 720 / 500;
  margin-left: auto;
  margin-right: calc(50% - min(50vw, 960px));
  margin-top: 5rem;
}

.roomplan_bg {
  position: absolute;
  left: -30rem;
  bottom: -30rem;
  width: 150%;
  z-index: 0;
  pointer-events: none;
}

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

/* ========================================================
   ACCESS + LOCATION セクション（PC）
   ======================================================== */
.sec_access {
  background-color: var(--khaki);
  position: relative;
  overflow: hidden;
  padding: 10rem 0;
}

.access_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5rem;
}

.access_info {
  flex-shrink: 0;
  width: auto;
  max-width: 47rem;
}


.access_body {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 2.1;
  color: var(--brown);
  letter-spacing: 0.04em;
  margin-top: 3rem;
}

.access_body .pad_none {
  display: block;
}

.access_aster {
  font-size: 0.5em;
  vertical-align: super;
}

.access_note {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.6;
}

.access_more {
  margin-top: 3.5rem;
  text-align: left;
}

.access_map {
  flex: 1;
  max-width: none;
  margin-right: calc(50% - min(50vw, 960px));
}

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

/* ========================================================
   ACCESS セクション（1024px以下）
   ======================================================== */
@media screen and (max-width: 1024px) {
  .sec_access {
    padding: 8rem 0;
  }

  .access_en .pc_only {
    display: none;
  }

  .access_wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
  }

  .access_info {
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .access_body {
    text-align: center;
  }

  .access_body .pad_none {
    display: none;
  }

  .access_map {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .access_map .map_link,
  .access_map img {
    min-width: 60rem;
    padding-left: 1rem;
  }

  .access_more {
    text-align: center;
    margin-top: 3.5rem;
  }
}

/* ========================================================
   SP専用メディアクエリ（768px以下）
   ======================================================== */
@media screen and (max-width: 768px) {

  /* ACCESS セクション（SP）*/
  .access_aster {
    display: none;
  }

  /* ABOUT / ROOM PLAN セクション（SP） */
  .about_wrap,
  .roomplan_wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "heading photo"
      "text text"
      "more more";
    gap: 3rem 3.5rem;
    align-items: flex-start;
  }

  .roomplan_wrap {
    padding-bottom: 15rem;
    gap: 1.5rem 3.5rem;
  }

  .about_en,
  .roomplan_en {
    grid-area: heading;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 5.2rem;
    letter-spacing: 0.08em;
    margin: 0;
    text-align: right;
  }

  .roomplan_en {
    letter-spacing: 0;
  }

  .about_photo,
  .roomplan_photo {
    grid-area: photo;
    order: 0;
    margin: 0;
    margin-right: -3.38vw;
    width: calc(100% + 3.38vw);
    max-width: none;
  }

  .about_text_area,
  .roomplan_text_area {
    grid-area: text;
    max-width: none;
    padding-top: 0;
  }

  .about_more,
  .roomplan_more {
    grid-area: more;
    text-align: center;
    margin-top: 0;
  }

  .sec_roomplan {
    padding-top: 6rem;
  }

  .sec_roomplan .roomplan_bg {
    left: -10rem;
    bottom: -10rem;
    width: 200%;
  }

  /* SPEC セクション（SP） */
  .spec_wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "photo heading"
      "text text"
      "more more";
    gap: 3rem 3.5rem;
    align-items: flex-start;
  }

  .spec_en {
    grid-area: heading;
    writing-mode: vertical-rl;
    transform: none;
    font-size: 5.2rem;
    letter-spacing: 0.1em;
    margin: 0;
    text-align: left;
  }

  .spec_photo {
    grid-area: photo;
    order: 0;
    margin: 0;
    margin-left: -3.38vw;
    width: calc(100% + 3.38vw);
    max-width: none;
  }

  .spec_text_area {
    grid-area: text;
    max-width: none;
    padding-top: 0;
  }

  .spec_more {
    grid-area: more;
    text-align: center;
    margin-top: 0;
  }

  /* ACCESS + LOCATION セクション（SP） */
  .sec_access {
    padding: 8rem 0;
  }

  .access_wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
  }

  .access_info {
    width: 100%;
    max-width: none;
  }

  .access_en {
    font-size: 4.4rem;
    margin-bottom: 0;
  }

  .access_map {
    max-width: none;
    width: 100%;
    margin-right: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .access_map .map_link,
  .access_map img {
    min-width: 60rem;
  }

  .access_more {
    grid-area: more;
    text-align: center;
    margin-top: 1rem;
  }

  /* テキストサイズ共通（SP） */
  .about_lead,
  .spec_lead,
  .roomplan_lead {
    font-size: 2rem;
    margin-bottom: 0;
    line-height: 1.8;
  }

  .about_body,
  .spec_body,
  .roomplan_body {
    font-size: 1.4rem;
    line-height: 2.1;
    /* leadの下部余白(SP版想定)を移行 */
    margin-top: 2rem;
  }

  .btn_more {
    font-size: 2rem;
  }
}

/* ========================================================
   NISHIFUNA NOTE セクション
   ======================================================== */
.sec_note {
  position: relative;
  overflow: hidden;
  padding-top: 25rem;
}

.note_wrap {
  display: block;
}

.note_panel {
  position: relative;
  z-index: 2;
  margin-right: calc(50% - min(50vw, 960px));
}

.note_clip {
  display: flex;
  align-items: stretch;
  background-color: var(--taupe);
  border-radius: 33.6rem 0 0 33.6rem;
  overflow: hidden;
  min-height: 70.6rem;
}

.note_content {
  flex-shrink: 0;
  width: 50%;
  padding: 12.8rem 0 5rem 16.9rem;
  align-self: flex-start;
}

.note_badge {
  position: absolute;
  top: -7rem;
  left: -1rem;
  width: 21rem;
  height: 21rem;
  z-index: 3;
}

.note_badge_svg {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: noteBadgeSpin 18s linear infinite;
}

.note_badge_text {
  font-family: var(--font_en);
  font-weight: 600;
  font-size: 45px;
  fill: var(--brown);
  letter-spacing: 0;
}

@keyframes noteBadgeSpin {
  to {
    transform: rotate(360deg);
  }
}

.note_en {
  font-family: var(--font_en);
  font-weight: 600;
  font-size: 7rem;
  line-height: 1.086;
  color: var(--brown);
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

.note_body {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1.846;
  color: var(--brown);
  letter-spacing: 0;
  margin-top: 3.6rem;
}

.note_more {
  margin-top: 5rem;
  text-align: right;
}

.note_map {
  flex: 1;
  min-width: 0;
}

.note_map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.map_link {
  display: block;
  cursor: pointer;
}

.note_map .map_link {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .note_panel {
    margin-right: 0;
  }

  .note_clip {
    flex-direction: column;
    border-radius: 3rem;
    min-height: 0;
  }

  .note_content {
    width: 100%;
    padding: 6rem 3rem 3rem;
  }

  .note_badge {
    top: -4rem;
    left: 1rem;
    width: 12rem;
    height: 12rem;
  }

  .note_en {
    font-size: 3.6rem;
    margin-bottom: 0;
  }

  .note_body {
    font-size: 1.8rem;
    line-height: 1.6;
    /* SP用余白を調整して移行 */
    margin-top: 2rem;
  }

  .note_more {
    text-align: left;
    margin-top: 3rem;
  }

  .note_map {
    width: 100%;
  }

  .note_map img {
    height: auto;
    object-fit: unset;
  }
}

/* ========================================================
   FAQ セクション
   ======================================================== */
.faq_head {
  text-align: center;
  margin-bottom: 0;
}


.faq_desc {
  text-align: center;
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.6;
  color: var(--brown);
  letter-spacing: 0.05em;
  margin-bottom: 0;
  margin-top: 2.4rem;
}

.faq_list {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-top: 3.5rem;
}

.faq_item {
  background-color: var(--white);
  border: 1px solid var(--brown);
  scroll-margin-top: 13rem; /* 固定ヘッダーに被らないよう、アンカー着地位置を下げる */
}

.faq_trigger {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 2rem 3rem;
  cursor: pointer;
  text-align: left;
}

.faq_icon {
  font-family: var(--font_en);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--brown);
  flex-shrink: 0;
  font-weight: 800;
  position: relative;
  top: -0.4rem;
  left: -0.4rem;
}

.faq_question {
  flex: 1;
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 2rem;
  color: var(--brown);
  letter-spacing: 0.05em;
}

.faq_arrow {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-right: 2px solid var(--brown);
  border-bottom: 2px solid var(--brown);
  transform: rotate(45deg) translateY(0rem) translateX(-1rem);
  transition: transform 0.3s ease;
}

.faq_trigger.is_open .faq_arrow {
  transform: rotate(225deg) translateY(-0.8rem);
}

.faq_body {
  display: none;
  position: relative;
  padding: 1rem 3.2rem 2.4rem 3.2rem;
}

.faq_icon_a {
  position: absolute;
  left: 3.2rem;
  top: 0.4rem;
}

.faq_answer {
  padding-left: 4.5rem;
  font-family: var(--font_base);
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--black);
}

.faq_more {
  margin-top: 4.5rem;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .faq_title {
    font-size: 4.4rem;
  }

  .faq_desc {
    font-size: 1.5rem;
    line-height: 1.8;
    margin-bottom: 0;
    margin-top: 2rem;
  }

  .faq_list {
    margin-top: 2rem;
    gap: 1rem;
  }

  .faq_trigger {
    padding: 1.4rem 1.6rem;
    gap: 1.2rem;
  }

  .faq_icon {
    font-size: 3rem;
  }

  .faq_question {
    font-size: 1.4rem;
  }

  .faq_body {
    padding: 0 1.6rem 1.6rem 4.4rem;
  }

  .faq_icon_a {
    left: 1.6rem;
  }

  .faq_answer {
    padding-left: 0.8rem !important;
    padding-top: 0.4rem;
  }

  .faq_arrow {
    width: 1.25rem;
    height: 1.25rem;
    border-right: 1.5px solid var(--brown);
    border-bottom: 1.5px solid var(--brown);
    transform: rotate(45deg) translate(-0.5rem, 0rem);
  }
  .faq_trigger.is_open .faq_arrow {
    transform: rotate(225deg) translateY(-0.4rem);
  }
}

/* ========================================================
   物件写真カルーセル
   ======================================================== */
.sec_gallery {
  padding-top: 24rem;
}

.sec_gallery .swiper {
  /* max-width: 144rem; */
  margin-inline: auto;
}

@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--gallery-anim-distance)));
  }
}

@media screen and (min-width: 769px) {
  @keyframes infiniteScrollPC {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-1 * var(--gallery-anim-distance)));
    }
  }

  .gallery_list .swiper-wrapper {
    animation: infiniteScrollPC 60s linear infinite !important;
  }
}

@media screen and (max-width: 768px) {
  .gallery_list .swiper-wrapper {
    animation: infiniteScroll 50s linear infinite !important;
  }
}

.gallery_list .swiper-slide {
  aspect-ratio: 500 / 350;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .sec_gallery {
    padding-top: 10rem;
  }
}

/* ========================================================
   CONTACT セクション
   ======================================================== */
.sec_contact {
  position: relative;
  overflow: hidden;
  padding: 20rem 0 6rem;
}

@media screen and (max-width: 768px) {
  .sec_contact {
    padding: 9rem 0 4rem;
  }
}

.contact_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 1200px;
  min-height: 30rem;
  margin-inline: auto;
  border: 2px solid var(--brown);
  border-radius: 15rem;
  padding: 4rem 12rem;
  text-align: center;
  transition: background-color 0.35s ease;
  background-color: var(--cream);
}

.contact_box:hover {
  background-color: var(--hover_pink);
  opacity: 1;
}

.contact_title {
  font-family: var(--font_deco);
  font-weight: 400;
  font-size: 7.8rem;
  line-height: 1.15;
  color: var(--brown);
  letter-spacing: 0;
  margin-bottom: 0;
}

.contact_text {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--brown);
  letter-spacing: 0.05em;
  margin-top: 1.2rem;
}

.contact_note {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.2rem;
}

.contact_arrow {
  position: absolute;
  right: 7rem;
  top: 50%;
  width: 6rem;
  height: 1px;
  background-color: var(--brown);
  transform: translateY(-50%);
  transition: transform 0.35s ease;
}

.contact_arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1.4rem;
  height: 1px;
  background-color: var(--brown);
  transform: rotate(35deg);
  transform-origin: right bottom;
}

.contact_box:hover .contact_arrow {
  transform: translate(30px, -50%);
}

.contact_disclaimer {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 17rem auto 0;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--brown);
  text-align: left;
}

.contact_disclaimer p + p {
  margin-top: 13px;
}

@media screen and (max-width: 768px) {
  .contact_disclaimer {
    margin-top: 9rem;
  }

  .contact_disclaimer p + p {
    margin-top: 15px;
  }
}

.contact_wash {
  pointer-events: none;
}

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

.contact_bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 110%;
  z-index: 0;
  pointer-events: none;
}

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

@media screen and (max-width: 768px) {
  .contact_box {
    border-radius: 14rem;
    min-height: 0;
    padding: 4rem 3rem 5.5rem;
  }

  .contact_title {
    font-size: 3.6rem;
    margin-bottom: 0;
  }

  .contact_text {
    font-size: 1.4rem;
    margin-top: 1rem;
  }

  .contact_arrow {
    right: 50%;
    top: auto;
    bottom: 2.8rem;
    transform: translateX(50%);
    width: 5rem;
  }

  .contact_box:hover .contact_arrow {
    transform: translateX(calc(50% + 30px));
  }

  .contact_wash {
    margin-top: 0;
  }
}

/* ========================================================
   フッター (Footer)
   ======================================================== */
.footer {
  background-color: var(--terracotta);
  color: var(--white);
  padding-top: 6rem;
  padding-bottom: 2.5rem;
}

.footer_inner {
  width: 90%;
  max-width: 1080px;
  margin-inline: auto;
}

.footer_logo {
  width: 448px;
  margin-bottom: 0;
}

.footer_logo a {
  display: block;
}

.footer_logo img {
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

/* 物件名・住所（リンクなし・ホバー効果なし） */
.footer_address {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.06em;
  color: var(--white);
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  /* 下部余白を移行 */
  margin-bottom: 0;
  /* footer_logo から移行 */
  margin-top: 2rem;
}

/* ナビ＋会社情報 2カラム */
.footer_cols {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4rem;
  /* footer_address から移行 */
  margin-top: 3.5rem;
}

/* ナビ 2列グリッド（行優先: TOP|ACCESS / ABOUT|NISHIFUNA NOTE ...） */
.footer_nav_list {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 3.8rem 7rem;
}

.footer_nav_list a {
  font-family: var(--font_deco);
  font-weight: 400;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--white);
  letter-spacing: 0;
  transition: opacity 0.3s;
}

.footer_nav_list a:hover {
  opacity: 0.5;
}

/* 会社情報（XD実測: ラベル/住所16px・会社名20px・游明朝Extrabold） */
.footer_company_item {
  font-family: var(--font_base);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--white);
  /* 下部余白を移行 */
  margin-bottom: 0;
}

/* 隣接要素用の余白定義を追加 */
.footer_company_item+.footer_company_item {
  margin-top: 2.4rem;
}

.footer_company_label,
.footer_company_name,
.footer_company_addr {
  display: block;
}

.footer_company_label {
  font-size: 1.6rem;
}

.footer_company_name {
  font-size: 2rem;
}

.footer_company_addr {
  font-size: 1.6rem;
}

.footer_copy {
  font-family: var(--font_base);
  font-size: 1.4rem;
  color: var(--white);
  letter-spacing: 0.08em;
  text-align: center;
  margin-top: 4rem;
  font-weight:  500;
}

@media screen and (max-width: 768px) {

  /* ========================================================
       フッター セクション (Footer) - SP版サイズ＆レイアウト微調整
       ======================================================== */
  .footer {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .footer_inner {
    text-align: left;
  }

  .footer_logo {
    width: 150px;
    margin-inline: 0;
    margin-bottom: 0;
  }

  .footer_address {
    font-size: 1.2rem;
    text-align: left;
    margin-top: 2rem;
    margin-bottom: 3rem;
  }

  .footer_cols {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    margin-top: 0;
  }

  .footer_nav {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 2.8rem;
  }

  .footer_nav_list {
    grid-template-columns: repeat(2, max-content);
    justify-content: flex-start;
    gap: 2rem 5rem;
  }

  .footer_nav_list a {
    font-size: 2.6rem;
  }

  .footer_company {
    width: 100%;
    max-width: none;
    gap: 2rem;
    margin-top: 2.8rem;
  }

  .footer_company_item {
    text-align: left;
    margin-bottom: 0;
  }

  .footer_company_item+.footer_company_item {
    margin-top: 2rem;
  }

  .footer_company_label {
    font-size: 1.2rem;
  }

  .footer_company_name {
    font-size: 1.4rem;
  }

  .footer_company_addr {
    font-size: 1.2rem;
  }

  .footer_copy{
    font-size: 0.9rem;
  }
}

/* ========================================================
   ACCESS + LOCATION セクション（SP完全版）
   ======================================================== */
@media screen and (max-width: 768px) {
  .sec_access {
    text-align: center;
    padding: 6rem 0;
  }

  .access_wrap {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  .access_info {
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .access_en {
    font-size: 4.4rem;
    text-align: center;
    margin-bottom: 0;
  }

  .access_body {
    font-size: 1.4rem;
    line-height: 2.1;
    text-align: center;
    margin-top: 3rem;
  }

  .access_body .pad_none {
  display: block;
  }

  .access_note {
    display: block;
    margin-top: 1.5rem;
    font-size: 1rem;
  }

  .access_map {
    width: calc(100% + 3.38vw) !important;
    max-width: none !important;
    margin-right: -3.38vw !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  .access_map .map_link,
  .access_map img {
    min-width: 0 !important;
    width: 100% !important;
  }

  .access_more {
    text-align: center;
    margin-top: 2.5rem;
  }

  /* ========================================================
       NISHIFUNA NOTE セクション（SP完全版）
       ======================================================== */
  .sec_note {
    text-align: center;
    padding-top: 13rem !important;
  }

  .note_panel {
    margin-inline: 15px !important;
    width: calc(100% - 30px) !important;
    max-width: none !important;
    position: relative;
  }

  .note_clip {
    flex-direction: column;
    align-items: center;
    background-color: var(--taupe);
    border-radius: 180px !important;
    overflow: hidden;
    min-height: 0 !important;
    padding: 8rem 2.4rem 5rem !important;
  }

  .note_badge {
    position: absolute !important;
    width: 120px !important;
    height: 120px !important;
    left: 0rem !important;
    top: -5rem !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 3;
  }

  .note_content {
    width: 100% !important;
    padding: 0 !important;
    text-align: center;
  }

  .note_en {
    font-size: 4.4rem !important;
    text-align: center;
    margin-bottom: 0 !important;
  }

  .note_body {
    font-size: 1.4rem !important;
    line-height: 2.1 !important;
    text-align: center;
    margin-top: 2rem !important;
  }

  .note_more {
    text-align: center !important;
    margin-top: 2.5rem !important;
    margin-bottom: 4rem !important;
  }

  .note_map {
    width: 90% !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  .note_map .map_link,
  .note_map img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* =======================================================
   共通コンポーネント：下層ページ共通MV（メインビジュアル）構造
   ======================================================= */
.c_subpage_mv {
  position: relative;
  width: 100%;
  padding-top: 8rem;
}

/* 背景の水彩JPG（最背面・全幅） */
.c_subpage_mv_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}

.c_subpage_mv_bg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: unset;
}

/* 前面のコンテンツ配置用フレーム */
.c_subpage_mv_frame {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 12rem;
}

@media screen and (max-width: 768px) {
  .c_subpage_mv_frame {
    padding-top: 1rem;
    width: 100%;
  }
  .c_subpage_mv_frame > .inner {
    width: 100%;
    max-width: none;
  }
  .c_subpage_mv {
    padding-bottom: 0;
  }
}

/* =======================================================
   共通コンポーネント：下層ページ共通大見出し（MVタイトル）
   ======================================================= */
.c_page_title_area {
  text-align: center;
  margin-bottom: 0;
}

.c_page_title {
  font-family: var(--font_deco);
  font-weight: 400;
  font-size: 10rem;
  line-height: 1;
  color: var(--brown);
  letter-spacing: 0;
}

.c_page_rule {
  width: 8.5rem;
  height: 2px;
  background-color: var(--brown);
  border: none;
  margin: 1.8rem auto 0;
}

/* ========================================================
   共通：装飾見出し (c_sec_title_deco)
   ======================================================== */
.c_sec_title_deco {
  font-family: var(--font_deco);
  font-weight: 400;
  line-height: 1;
  color: var(--brown);
  letter-spacing: 0;
}

.c_sec_title_deco-11 {
  font-size: 11rem;
}

.c_sec_title_deco-9 {
  font-size: 9rem;
}

.c_sec_title_deco-8 {
  font-size: 8rem;
}

.c_sec_title_deco-7 {
  font-size: 7rem;
}

.c_sec_title_deco-6 {
  font-size: 6rem;
}

/* SP版：画面幅に合わせて綺麗に縮小 */
@media screen and (max-width: 768px) {
  .c_page_title_area {
    margin-bottom: 0;
  }

  .c_page_title {
    font-size: 5.8rem;
  }

  .c_page_rule {
    width: 4rem;
    margin-top: 0.8rem;
  }

  .c_sec_title_deco {
    font-size: 4.8rem !important;
  }
}

/* ========================================================
   共通：副見出し (c_sub_heading)
   ======================================================== */
.c_sub_heading {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 2rem;
  color: var(--brown);
  letter-spacing: 0.05em;
  padding-top:0.5rem;
}

@media screen and (max-width: 768px) {
  .c_sub_heading {
    font-size: 1.5rem;
    padding-top: 0.8rem;
  }
}

/* ========================================================
   共通：タイトル (c_title_text)
   ======================================================== */
.c_title_text {
  font-family: var(--font_base);
  font-size: 3.2rem;
  line-height: 1.6;
  font-weight: 800;
  text-align: center;
  color: var(--brown);
  padding-top: 9rem;
}

@media screen and (max-width: 768px) {
  .c_title_text {
    font-size: 1.8rem;
    padding-top: 4.5rem;
    letter-spacing: 0.01em;
  }

  .c_title_text_24sp {
    font-size: 2.4rem;
  }
}

/* ========================================================
   ABOUTページ：冒頭ヘッダー＆イントロ（下層専用）
   ======================================================== */

/* ② 1920px頭打ちフレーム */
.about_mv_frame {
  position: relative;
  z-index: 1;
  max-width: 144rem;
  width: 100%;
  margin-inline: auto;
}
/* ────────────────────────────────────────────────────────
   PC版限定：外側マージン優先 ＋ 1025px以下から自動等比スケール発動
   ──────────────────────────────────────────────────────── */
@media screen and (min-width: 769px) {

  /* ─── 【重要】1025px〜769pxの間だけ動的にスケール率を計算する設定 ─── */
  .sec_about_mv {
    /* 縮小を開始する基準の画面幅（1025px） */
    --scale-base: 1025;
    /* 現在の画面幅に合わせた縮小率をリアルタイム計算 */
    --scale-factor: calc(var(--js_windowWidth) / (var(--scale-base) * 1px));
    padding-top: 12rem;
  }

  /* 1025px以下（〜769pxまで）になったら等比縮小（scale）をオンにする */
  @media screen and (max-width: 1025px) {
    .sec_about_mv .about_mv_frame {
      transform: scale(var(--scale-factor)) !important;
      transform-origin: top center !important;
      /* スケール縮小によって生じる下の余白の隙間をネガティブマージンで自動吸収 */
      margin-bottom: calc((1 - var(--scale-factor)) * -100%) !important;
    }
  }

  /* ① 大元のインナー：1440px〜1026pxの間は、左右の外側マージン（余白）が最優先で縮みます */
  .sec_about_mv .inner {
    width: 100% !important;
    max-width: 94rem !important; /* 1440px時は940px */
    padding-inline: 0 !important;
    margin-inline: auto !important;
    position: relative !important;
  }

  /* 左右50%ずつのグリッド。1025px以下ではこれが丸ごと等比縮小されます */
  .about_mv_upper_grid,
  .about_mv_lower_grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 9rem !important;
    align-items: center !important;
    width: 100% !important;
  }

  .about_mv_upper_grid {
    margin-bottom: 0 !important;
  }

  /* 【上段左】テキスト領域 */
  .about_mv_upper_text {
    text-align: right !important;
    font-family: var(--font_base);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.8;
    color: var(--brown);
    letter-spacing: 0.06em;
  }

  .about_mv_upper_text p + p {
    margin-top: 4rem !important;
  }

  /* 【上段右】大木写真：グリッド枠にきれいに収める */
  .about_mv_upper_photo {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 424 / 512 !important;
    overflow: hidden !important;
  }

  .about_mv_lower_grid {
    margin-top: 12rem !important;
  }

  /* 【下段左】公園写真：グリッド枠から2rem内側に引っ込める */
  .about_mv_lower_photo {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 2rem !important;
    margin: 0 !important;
    aspect-ratio: 400 / 300 !important;
    overflow: hidden !important;
  }

  /* 【下段右】本文テキスト：右側へ60px（6rem）正確にはみ出させる
     1025px以下からは要素全体が縮小するため、固定値（rem）のまま比率が維持されます */
  .about_mv_lower_text {
    font-family: var(--font_base);
    color: var(--brown);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.8;
    letter-spacing: 0.06em;

    width: calc(100% + 10rem) !important; /* 100px固定はみ出し */
    max-width: none !important;
    margin-right: -10rem !important;
    padding-right: 1.5rem !important;
  }

  .about_mv_lower_text p + p {
    margin-top: 4rem !important;
  }
}

/* ========================================================
   ABOUTページ：SP版レスポンシブ（768px以下）
   ======================================================== */
@media screen and (max-width: 768px) {
  .sec_about_mv {
    padding-top: 0;
    padding-bottom: 0;
  }

  .about_mv_head {
    margin-bottom: 0;
  }

  .about_page_title {
    font-size: 5.2rem;
  }

  .about_mv_upper_grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 3rem;
    margin-bottom: 0;
    margin-top: 5rem;
  }

  .about_mv_upper_text {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: center;
  }

  .about_mv_upper_text p+p {
    margin-top: 0;
  }

  .about_mv_upper_photo {
    width: 100% !important;
    max-width: 27.5rem !important;
    margin-inline: auto !important;
    aspect-ratio: 424 / 512;
  }

  .about_mv_lower_grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-top: 6rem;
  }

  /* 【SP版】公園写真：最大230px幅にして中央寄せ */
  .about_mv_lower_photo {
    width: 100% !important;
    max-width: 23rem !important;
    margin-inline: auto !important;
    aspect-ratio: 540 / 380;
  }

  .about_mv_lower_text {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: center;
  }

  .about_mv_lower_text p+p {
    margin-top: 0;
  }

  .about_mv_upper_text,
  .about_mv_lower_text {
    font-family: var(--font_base);
    color: var(--brown);
    font-weight: 800;
    letter-spacing: 0.06em;
  }
}

/* ========================================================
   ABOUTページ：Featuresセクション（PC・共通ベース）
   ======================================================== */
.sec_features {
  padding: 7.5rem 0 20.5rem;
  background-color: var(--white);
  margin-top: 11rem;
}

@media screen and (max-width: 768px) {
  .sec_features {
    padding: 8rem 0;
    margin-top: 4rem;
  }
}

.features_main_head {
  text-align: center;
  margin-bottom: 0;
}

.feat_message_wrap {
  position: relative;
  text-align: center;
  margin-top: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22rem;
}

.feat_message_title {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 3.2rem;
  color: var(--brown);
  letter-spacing: 0.06em;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.feat_bg_number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font_deco);
  font-size: 22rem;
  font-weight: 400;
  color: #e5ccbe;
  opacity: 0.45;
  z-index: 1;
  line-height: 1;
  pointer-events: none;
}

.feat_photo_grid.col_2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6rem;
  row-gap: 4rem;
  margin-bottom: 0;
  margin-top: 4rem;
}

.feat_photo_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.feat_photo_img {
  width: 100%;
  aspect-ratio: 570 / 400;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid rgba(144, 63, 27, 0.15);
}

.feat_photo_caption {
  font-family: var(--font_base);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--black);
  letter-spacing: 0.05em;
  flex-grow: 1;
  padding-top: 1.5rem;
}

/* ─── 特長1：間取り図 ─── */
.feat_plan_area {
  text-align: center;
  max-width: 80rem;
  margin-inline: auto;
  margin-top: 6.5rem;
}

.feat_plan_title {
  font-family: var(--font_en);
  font-size: 3.6rem;
  color: var(--brown);
  letter-spacing: 0;
}

.feat_plan_img {
  width: 100%;
  max-width: 1048px;
  margin-inline: auto;
  padding-top: 4.5rem;
}

.feat_plan_labels {
  margin-top: 5rem;
  color: var(--brown);
  font-size: 1.7rem;
  font-weight: 800;
}

.feat_plan_labels p {
  display: flex;
  justify-content: flex-start;
  gap: 2%;
  line-height: 2.5rem;
}

.feat_plan_labels p:not(:first-child) {
  margin-top: 1.5rem;
}

.feat_plan_labels p span {
  width: 49%;
  text-align: left;
}

.feat_plan_labels p span:only-child {
  width: auto;
  white-space: nowrap;
}

/* ─── 特長2：Plus Pointパネル ─── */
.feat_plus_panel {
  max-width: 108rem;
  margin-inline: 8%;
  margin-top: 12rem;
}

.feat_plus_clip {
  background-color: #E8DBD3;
  border-radius: 16rem 0 16rem 0;
  padding: 6rem 8rem 8rem;
  text-align: center;
}

.feat_plus_title {
  position: relative;
  display: inline-block;
  margin: 0 auto 8rem;
  border-bottom: 2px solid var(--brown);
  padding-bottom: 1rem;
  text-align: center;
}

.feat_plus_title span {
  display: inline-block;
  font-family: var(--font_en);
  font-size: 3.2rem;
  color: var(--brown);
  letter-spacing: 0.04em;
}

.feat_plus_title::before,
.feat_plus_title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
}

.feat_plus_title::before {
  bottom: -30px;
  border-width: 28px 15px 0 15px;
  border-color: var(--brown) transparent transparent transparent;
}

.feat_plus_title::after {
  bottom: -27px;
  border-width: 28px 15px 0 15px;
  border-color: var(--taupe) transparent transparent transparent;
}

.plus_photo_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  margin-bottom: 0;
}

.plus_photo_item {
  width: 100%;
  aspect-ratio: 440 / 280;
  overflow: hidden;
}

.plus_panel_desc {
  font-family: var(--font_base);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2;
  color: var(--black);
  letter-spacing: 0.04em;
  text-align: left;
  margin-inline: auto;
  margin-top: 2rem;
}

/* ─── 特長3：MOREリンク ─── */
.feat_item_link_wrap {
  margin-top: 3rem;
  text-align: right;
}

.btn_features_more {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 2rem;
  color: var(--brown);
  letter-spacing: 0.05em;
  position: relative;
  padding-bottom: 0.8rem;
}

.btn_features_more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--brown);
  transition: transform 0.4s ease;
  transform-origin: left center;
}

.features_more_arrow {
  display: inline-block;
  transition: transform 0.35s ease;
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1;
  vertical-align: middle;
}

.features_more_arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.btn_features_more:hover {
  opacity: 1 !important;
}

.btn_features_more:hover::after {
  transform: scaleX(0.4);
  transform-origin: right center;
}

.btn_features_more:hover .features_more_arrow {
  transform: translateX(1.2rem);
}

.features_border {
  border: none;
  height: 1px;
  background-color: rgba(144, 63, 27, 0.25);
  max-width: 1200px;
  margin: 12rem 0 7.5rem;
  margin-inline: auto;
}

/* ========================================================
   ABOUTページ：Featuresセクション（SP版：768px以下完全同期）
   ======================================================== */
@media screen and (max-width: 768px) {
  .sec_features {
    padding-top: 6rem;
  }

  .features_main_head {
    margin-bottom: 0;
  }

  .features_main_title {
    font-size: 5.2rem;
    margin-bottom: 1rem;
  }

  .features_main_sub {
    font-size: 1.5rem;
  }

  .features_border {
    margin-top: 6rem;
    margin-bottom: 0;
  }

  .feat_message_wrap {
    margin-bottom: 0;
    padding: 0;
    margin-top: 6rem;
    min-height: 13rem;
  }

  .feat_badge_text {
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .feat_message_title {
    font-size: 1.7rem;
    line-height: 1.55;
    letter-spacing: 0.001em;
  }

  .feat_bg_number {
    font-size: 13rem;
    transform: translate(-50%, -50%);
  }

  .feat_photo_grid {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin-bottom: 0;
    margin-top: 8rem;
  }

  .feat_photo_img {
    aspect-ratio: 1 / 0.72;
  }

  .feat_photo_caption {
    font-size: 1.5rem;
    line-height: 2;
    padding-top:1.5em;
  }

  .feat_plan_area {
    margin-top: 4rem;
  }

  .feat_plan_img {
    /* 画面幅392pxの時に左右8rem相当（=80px）となるよう、実測比率(80/392)で画面幅に比例させる */
    padding-inline: calc(100vw * 0.20408);
  }

  .feat_plan_title {
    font-size: 3rem;
  }

  .feat_plus_panel {
    margin-top: 5rem;
    margin-inline: auto;
  }

  .feat_plus_clip {
    border-radius: 11rem 0 11rem 0;
    padding: 8rem 4rem;
  }

  .feat_plus_title {
    font-size: 2rem;
    margin-bottom: 5rem;
  }

  .plus_photo_grid {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 0;
  }

  .plus_photo_item {
    aspect-ratio: 1 / 0.72;
  }

  .plus_panel_desc {
    font-size: 1.4rem;
    line-height: 2;
    text-align: left;
    margin-top: 2.5rem;
  }

  .feat_item_link_wrap {
    margin-top: 3rem;
    text-align: center;
  }

  .btn_features_more {
    font-size: 1.6rem;
  }
}

/* ========================================================
   ABOUTページ：Designセクション（PC・共通ベース）
   ======================================================== */
.sec_about_design {
  background-color: var(--cream);
  padding-top: 10rem;
}

@media screen and (max-width: 768px) {
  .sec_about_design {
    padding-top: 8rem;
  }
}

.design_main_head {
  text-align: center;
  margin-bottom: 0;
}



.design_hero_photo {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  aspect-ratio: 1440 / 600;
  overflow: hidden;
  margin-top: 8rem;
}

.design_hero_text_area {
  max-width: 1200px;
  margin-inline: auto;
  text-align: left;
  margin-top: 5rem;
}

.design_hero_lead {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1.6;
  color: var(--brown);
  letter-spacing: 0.01em;
}

.design_hero_body {
  font-family: var(--font_base);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2.1;
  color: var(--black);
  letter-spacing: 0.04em;
  padding-top: 1rem;
}

.design_night_block {
  padding-top: 10rem;
}

.design_night_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin-inline: auto;
}

.design_night_photo {
  width: 100%;
  aspect-ratio: 560 / 380;
  overflow: hidden;
}

.design_night_text {
  text-align: left;
}

.design_night_title {
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1.6;
  color: var(--brown);
  letter-spacing: 0.01em;
}

.design_night_body {
  font-family: var(--font_base);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2.1;
  color: var(--black);
  letter-spacing: 0.04em;
  padding-top: 1rem;
}

/* ========================================================
   ABOUTページ：Designセクション（SP版：768px以下）
   ======================================================== */
@media screen and (max-width: 768px) {
  .design_main_head {
    margin-bottom: 0;
  }

  .design_main_title {
    font-size: 5.2rem;
  }

  .design_main_sub {
    font-size: 1.5rem;
  }

  .design_hero_photo {
    margin-top: 5rem;
    margin-bottom: 0;
    aspect-ratio: 1 / 0.7;
  }

  .design_hero_text_area {
    margin-top: 2.5rem;
    margin-bottom: 0;
  }

  .design_hero_lead {
    font-size: 1.8rem;
    line-height: 1.8;
  }

  .design_hero_body {
    font-size: 1.4rem;
    line-height: 2.1;
  }

  .design_night_block {
    padding-top: 5rem;
  }

  .design_night_grid {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .design_night_photo {
    aspect-ratio: 1 / 0.7;
  }

  .design_night_text {
    text-align: center;
  }

  .design_night_title {
    font-size: 1.8rem;
    line-height: 1.8;
    text-align: left;
  }

  .design_night_body {
    font-size: 1.4rem;
    line-height: 2.1;
    text-align: left;
    padding-top: 1.5rem;
  }
}

/* ========================================================
   ABOUTページ：Stayセクション（PC・共通ベース）
   ======================================================== */
.sec_about_stay {
  padding: 15rem 0;
  background-color: #D9E6C3;
  margin-top: 12rem;
}

.stay_main_head {
  text-align: center;
  margin-bottom: 0;
}



.stay_lifestyle_list {
  max-width: 1200px;
  margin-inline: auto;
  margin-bottom: 0;
  margin-top: 20rem;
}

.stay_item {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 0;
}

.stay_item+.stay_item {
  margin-top: 8rem;
}

.stay_item.type_illust_left .stay_illust_part {
  order: 0;
  text-align: center;
}

.stay_item.type_illust_left .stay_text_part {
  order: 1;
  text-align: left;
}

.stay_item.type_illust_right .stay_illust_part {
  order: 1;
  text-align: center;
}

.stay_item.type_illust_right .stay_text_part {
  order: 0;
  text-align: right;
}

.stay_illust_part {
  flex-shrink: 0;
  width: 50%;
  aspect-ratio: 560 / 380;
  overflow: hidden;
  background-color: #D9E6C3;
}

.stay_illust_part img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
}

/* How to stay：PC版のみイラストごとの最大幅を指定 */
.stay_img_01 {
  max-width: 350px;
  margin-inline: auto;
}

.stay_img_02 {
  max-width: 400px;
  margin-inline: auto;
}

.stay_img_03 {
  max-width: 410px;
  margin-inline: auto;
}

.stay_img_04 {
  max-width: 300px;
  margin-inline: auto;
}

.stay_img_05 {
  max-width: 370px;
  margin-inline: auto;
}

.stay_img_06 {
  max-width: 330px;
  margin-inline: auto;
}

.stay_text_part {
  flex: 1;
  font-family: var(--font_base);
  font-weight: 800;
  font-size: 2rem;
  line-height: 2.1;
  color: var(--brown);
  letter-spacing: 0.05em;
}

.stay_text_part p+p {
  margin-top: 2rem;
}

.stay_foot_summary {
  text-align: center;
  margin-top: 12rem;
}

.stay_summary_en {
  font-family: var(--font_en);
  font-weight: 400;
  font-size: 4.6rem;
  line-height: 1.5;
  color: var(--brown);
  letter-spacing: 0;
  margin-bottom: 1rem;
}


/* ========================================================
   ABOUTページ：Stayセクション（SP版：768px以下）
   ======================================================== */
@media screen and (max-width: 768px) {
  .sec_about_stay {
    padding-top: 6rem;
    margin-top: 6rem;
  }

  .stay_main_head {
    margin-bottom: 0;
  }

  .stay_main_title {
    font-size: 5.2rem;
  }

  .stay_main_sub {
    font-size: 1.5rem;
  }

  .stay_lifestyle_list {
    margin-top: 5rem;
    margin-bottom: 0;
  }

  .stay_item {
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 0;
  }

  .stay_item+.stay_item {
    margin-top: 11rem;
  }

  .stay_item.type_illust_right .stay_illust_part {
    order: 0;
  }

  .stay_item.type_illust_right .stay_text_part {
    order: 1;
    text-align: left;
  }

  .stay_illust_part {
    width: 80%;
    aspect-ratio: 1 / 0.8;
  }

  .stay_img_01,
  .stay_img_02,
  .stay_img_03,
  .stay_img_04,
  .stay_img_05,
  .stay_img_06 {
    max-width: none;
  }

  .stay_text_part {
    font-size: 1.4rem;
    line-height: 2.1;
    text-align: center !important;
  }

  .stay_foot_summary {
    margin-top: 12rem;
  }

  .stay_summary_en {
    font-size: 3.2rem;
    margin-bottom: 1.4rem;
    line-height: 1.2;
  }

  .stay_summary_ja {
    font-size: 1.4rem;
  }
}

/* ========================================================
   共通グリッドシステム (SEO・パフォーマンス最適化)
   ======================================================== */
@media screen and (max-width: 768px) {
  .col_2 {
    display: block;
  }

  .col_2>*+* {
    margin-top: 0;
  }

  .feat_photo_grid.col_2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 5rem !important;
    margin-top: 1.5rem;
  }
}

/* ========================================================
   SPECセクション
   ======================================================== */


.spec_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10rem 4rem;
  list-style: none;
}

@media screen and (max-width: 768px) {
  .spec_grid {
    grid-template-columns: 1fr;
    gap: 7.5rem;
  }
}

.sec_spec_list {
  padding-top: 16rem;
}

.spec_list_head {
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央に寄せる */
  width: fit-content;
  margin: 0 auto;      /* 画面の中央に配置 */
}

.spec_list_title {
  font-family: var(--font_base);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--brown);
  letter-spacing: 0.05em;
  line-height: 1;
}

.spec_list_rule {
  width: 100%;
  height: 1.5px;
  background-color: var(--brown);
  border: none;
  margin: 2.2rem auto 0;
}

.spec_list_head+.spec_grid {
  margin-top: 10rem;
}

/* ─── SP版（768px以下） ─── */
@media screen and (max-width: 768px) {
  .sec_spec_list {
    padding-top: 14rem;
  }

  .spec_list_title {
    font-size: 2.4rem;
  }

  .spec_list_rule {
    margin-top: 1.2rem;
  }

  .spec_list_head+.spec_grid {
    margin-top: 8rem;
  }
}

.spec_img_box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  display: block;
}

.spec_item {
  display: grid;
  grid-template-rows: 26rem 9rem auto;
  text-align: center;
}

.spec_item .spec_img_box {
  align-self: end; /* 画像行内でアイコンを下寄せ（既存デザインを踏襲） */
}

.spec_item .spec_item_title {
  align-self: center; /* タイトル行の高さ(9rem)に対して自身の高さは伸ばさない */
}

@media screen and (max-width: 768px) {
  .spec_item {
    display: block; /* SPは1カラムで揃える意味が無いため、元の縦積み(block)に戻す */
  }
}

.link_underline {
  text-decoration: underline;
}

.link_underline:hover {
  text-decoration: none;
  opacity: 1;
}

.spec_item_title {
  color: var(--brown);
  font-size: 2.4rem;
}

.spec_item_text {
  color: var(--black);
  font-size: 1.4rem;
  line-height: 1.8;
  font-weight: 600;
}

.spec_grid .spec_item_text {
  text-align: left;
}

@media screen and (min-width: 769px) {
  .spec_map_wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 7rem;
    padding-top: 16rem;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
  }

  .spec_list_left,
  .spec_list_right {
    width: 30rem;
    flex-shrink: 0;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  .spec_map_image {
    width: 310rem;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .spec_list_left {
    text-align: right;
  }

  .spec_list_right {
    text-align: left;
  }

  .spec_map_image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 31rem;
    flex-shrink: 0;
  }

  .spec_map_image img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
  }

  .spec_item_title {
    font-size: 2.4rem;
    margin-top: 2rem;
  }
}

  /* ========================================================
     SVGコネクタ：PC版で綺麗に表示し、SP版で完全に消すプロ設計
     ======================================================== */
  .spec_map_image {
    position: relative;
  }

  /* マップの画像自体を少し背面に設定 */
  .spec_map_image img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
  }

@media screen and (max-width: 768px) {
  .spec_map_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* コンテナ全体は中央寄せ（マップを真ん中に置くため） */
    padding-top: 4rem;
    gap: 3rem;
  }

  /* ─── ① マップ画像を170px（17rem）程度にコンパクト化 ─── */
  .spec_map_image {
    order: 1;            /* マップ画像を一番上に */
    width: 17rem !important;
    max-width: 17rem !important;
    margin: 0 auto;
  }

  .spec_map_image img {
    width: 100%;
    height: auto;
  }

  /* ─── ② リスト全体の幅と位置のリセット ─── */
  .spec_list_left,
  .spec_list_right {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    text-align: left !important;
    /* padding-inline: 4%; 画面の端に文字がキツキツに張り付かないための安全な左右余白 */
  }

  .spec_list_left {
    order: 2;            /* 左リスト（キッチン等）を二番目に */
  }

  .spec_list_right {
    order: 3;            /* 右リスト（浴室乾燥等）を一番下に */
  }

  /* ─── ③ リスト項目（li）ごとの間隔を4rem（40px）にする ─── */
  .spec_list_item {
    width: 100%;
  }

  .spec_map_wrapper .spec_item_text {
    margin-top: 0;
  }

  .spec_grid .spec_item_title {
    margin-top: 3rem;
    text-align: left;
  }

  .spec_grid .spec_item_text {
    margin-top: 1.5rem;
  }

  .spec_list_item + .spec_list_item {
    margin-top: 3rem !important;
  }

  .spec_list_right > .spec_list_item:first-child > .spec_item_title {
    margin-top: 0;
  }

  .spec_item_title {
    font-size: 1.8rem;
  }
}

.spec_img_box {
  max-width: 23rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: multiply;
  background-color: var(--cream);
}

@media screen and (min-width: 769px) {
  /* ウォークインクローゼットのアイコンのみ小さめに表示（PC版のみ） */
  .spec_grid li:nth-child(3) .spec_img_box img,
  .spec_grid li:nth-child(5) .spec_img_box img,
  .spec_grid li:nth-child(6) .spec_img_box img {
    max-width: 20rem;
  }

  /* 共有ラウンジ・テラス／ペット飼育可フロア／プロジェクター／バイク置き場／自転車置き場のアイコン（PC版のみ） */
  .spec_grid li:nth-child(1) .spec_img_box,
  .spec_grid li:nth-child(2) .spec_img_box,
  .spec_grid li:nth-child(8) .spec_img_box,
  .spec_grid li:nth-child(9) .spec_img_box {
    max-width: 26rem;
  }

  /* 1段目・3段目のアイコンをPC版のみ下寄せに（object-fit:containで中身が中央寄せされるためobject-positionで制御） */
  .spec_grid li:nth-child(-n+3) .spec_img_box img,
  .spec_grid li:nth-child(5) .spec_img_box img,
  .spec_grid li:nth-child(6) .spec_img_box img,
  .spec_grid li:nth-child(n+7) .spec_img_box img {
    object-position: center bottom;
  }
}

@media screen and (max-width: 768px) {
  /* SP版ではPC版の下寄せを解除し中央寄せに戻す */
  .spec_grid li:nth-child(-n+3) .spec_img_box img,
  .spec_grid li:nth-child(n+7) .spec_img_box img {
    object-position: center;
  }

  /* SP版は全アイコン共通で正方形の枠を解除し、max-width19rem・max-height17remに収める */
  .spec_grid .spec_img_box {
    aspect-ratio: auto;
    width: auto;
    max-width: none;
    max-height: none;
  }

  .spec_grid .spec_img_box img {
    width: auto;
    height: auto;
    max-width: 19rem;
    max-height: 17rem;
  }
}

/* ========================================================
   中画面（960px以下〜SP切り替えまで）のマップエリア自動縮小
   ======================================================== */
@media screen and (max-width: 960px) and (min-width: 769px) {
  .sec_spec_map .inner {
    /* 全体をはみ出さないよう包む */
    overflow: visible;
  }

  .spec_map_wrapper {
    /* ➔ 画面幅が狭くなるにつれて、全体を最大15%（0.85倍）まで滑らかに自動縮小 */
    transform: scale(0.85);
    transform-origin: center top;
    margin-bottom: -10rem;       /* スケール縮小によって生じる下の余白の隙間を吸収 */
    padding-top: 10rem;
    gap: 5.5rem;                   /* 隙間も少し狭めて文字枠を確保 */
  }
}

/* ========================================================
   SPEC：注釈（span）のフォント指定
   ======================================================== */
.spec_item_text span {
  font-family: var(--font_base);
  font-size: 1.2rem;       /* 12px */
  font-weight: 600;        /* Demibold (一般的に明朝体は600番) */
  display: block;
  margin-top: 0.5rem;
}

/* ========================================================
   SPEC：ROOM PLAN リンクボタン（横640px × 縦120px）
   ======================================================== */
.spec_btn_wrap {
  text-align: center;
  margin-top: 10rem;
}

.btn_roomplan {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64rem;
  height: 12rem;
  background-color: var(--brown);
  color: var(--cream);
  border-radius: 0;
  position: relative;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.btn_roomplan_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: -0.4rem;
}

/* 「ROOM PLAN」フォント指定 */
.btn_roomplan_text .en {
  font-family: var(--font_deco);
  font-size: 4.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* 「ルームプランの詳細を見る」フォント指定 */
.btn_roomplan_text .ja {
  font-family: var(--font_base);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
}

/* 矢印（横31 × 縦20）の絶対配置 */
.btn_roomplan_arrow {
  position: absolute;
  right: 6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.1rem;
  height: 2rem;
  transition: transform 0.35s ease;
}

/* ─── HOVER ─── */
.btn_roomplan:hover {
  background-color: var(--hover_pink) !important;
  color: var(--brown) !important;
  opacity: 1 !important;
}

.btn_roomplan:hover .btn_roomplan_arrow {
  transform: translateY(-50%) translateX(1.5rem);
}

/* ─── SP版レスポンシブ（768px以下） ─── */
@media screen and (max-width: 768px) {
  .spec_btn_wrap {
    margin-top: 6rem;
    padding-inline: 0;
  }

  .btn_roomplan {
    width: 100%;
    max-width: 100%;
    height: 8rem;
  }

  .btn_roomplan_text .en {
    font-size: 2.6rem;
  }

  .btn_roomplan_text .ja {
    font-size: 1.3rem;
  }

  .btn_roomplan_arrow {
    right: 4%;
    width: 2.4rem;
    height: 1.5rem;
  }
}

/* ========================================================
   ROOM PLAN ページスタイル (下層専用)
   ======================================================== */



/* ─── 絞り込みフィルター (ROOM PLAN NAVI) ─── */
.roomplan_filter {
  margin-top: 8rem;
  text-align: center;
}

.filter_title_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin-bottom: 3.5rem;
  color: var(--brown);
}

.filter_icon {
  font-family: var(--font_deco);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
}

.filter_title {
  font-family: var(--font_base);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
}

.filter_btn_list {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  list-style: none;
}

.btn_filter {
  display: inline-block;
  padding: 1.2rem 3rem;
  border: 1px solid var(--brown);
  color: var(--brown);
  font-family: var(--font_base);
  font-weight: 700;
  font-size: 1.5rem;
  background-color: var(--white);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn_filter:hover,
.btn_filter.is_active {
  background-color: var(--brown);
  color: var(--cream);
}

@media screen and (max-width: 768px) {
  .roomplan_filter {
    margin-top: 5rem;
    padding-inline: 2%;
  }
  .filter_title_wrap {
    margin-bottom: 2.5rem;
  }
  .filter_title {
    font-size: 1.8rem;
  }
  .filter_btn_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .filter_item:first-child {
    grid-column: 1 / -1; /* SP版画像に合わせ「すべて」ボタンを上部全幅配置 */
  }
  .btn_filter {
    width: 100%;
    padding: 1.2rem 1rem;
    font-size: 1.3rem;
    text-align: center;
  }
}

/* ─── 間取りカードグリッド ─── */
.sec_roomplan_main {
  padding-top: 6rem;
}

.roomplan_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6rem 4rem;
  margin-top: 5rem;
}

.plan_card.is_filtered_out {
  display: none;
}

@media screen and (min-width: 769px) {
  /* PC版はフィルターUIが無いため、絞り込み状態に関わらず常に全カードを表示する */
  .plan_card.is_filtered_out {
    display: flex !important;
  }
}

.card_header {
  width: 100%;
}

.card_title {
  color: var(--brown);
  padding-bottom: 0;
  margin-bottom: 2.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.card_title .en {
  font-family: var(--font_deco);
  font-size: 3.8rem;
  font-weight: 400;
  line-height: 1;
}

.card_title .type {
  font-family: var(--font_deco);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1;
  margin-left: 0.4rem;
}

.card_title .size {
  font-family: var(--font_base);
  font-size: 1.6rem;
  font-weight: 800;
  margin-left: auto;
}

.card_body_flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
}

.card_left_col {
  flex: 1;
}

.card_copy {
  font-family: var(--font_base);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--brown);
  letter-spacing: 0.03em;
}

.card_points {
  list-style: none;
}

.card_points li {
  font-family: var(--font_base);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--black);
}

.card_points li + li {
  margin-top: 0;
}

.card_zoom_btn.is_lupe {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 4rem;
  height: 4rem;
  z-index: 5;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.card_zoom_btn.is_lupe:hover {
  opacity: 0.75 !important;
}

.card_title_area {
  width: 100%;
}

.plan_img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.card_footer {
  border-top: 1px dashed rgba(144, 63, 27, 0.4);
  padding-top: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
}

.card_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  list-style: none;
  margin-top: 2rem;
}

.card_note {
  font-size: 1.4rem;
  color: var(--black);
  margin-top: 1.5rem;
  line-height: 1.8;
  font-weight: 800;
}

@media screen and (max-width: 768px) {
  .card_note {
    font-size: 1.1rem;
    font-weight: 600;
  }
}

.tag_item {
  font-family: var(--font_base);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.5rem 1.4rem;
  color: var(--white);
  border-radius: 2px;
  line-height: 1;
  white-space: nowrap;
}

/* 新規共通タグカラーの追加 */
.tag_item.tag_storage {
  background-color: #1A8980; /* 共用収納カラー */
}
.tag_item.tag_wic_add {
  background-color: #9B578E; /* WIC付きカラー */
}

/* サイト固有のスペックパレット実測値と共通エイリアスから展開 */
.tag_south { background-color: var(--green); }       /* ミドルグリーン */
.tag_corner { background-color: var(--brown); }       /* メインアクセント */
.tag_wicl { background-color: var(--terracotta); }     /* テラコッタ */
.tag_outframe { background-color: var(--brown_deep); } /* 濃ブラウン */
.tag_srv { background-color: var(--green_dark); }     /* ダークフォレストグリーン */
.tag_compact { background-color: var(--brown_dark); }  /* ダークブラウン */
.tag_kitchen { background-color: var(--salmon); color: var(--brown_deep); } /* サーモンアクセント */

.card_floor_area {
  text-align: left;
}

.card_floor_label {
  font-family: var(--font_base);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--black);
  text-align: left;
}

.card_minimap {
  width: 13rem;
  flex-shrink: 0;
  border: 1px solid var(--brown);
  background-color: var(--nav_bg);
  padding: 0.6rem;
}

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


/* ========================================================
   ROOM PLAN：PC版限定レイアウト (769px以上)
   ======================================================== */
@media screen and (min-width: 769px) {

  /* ① 大元のインナー：左右に2remずつ（計4rem）の余白を「最初から引いた幅」で可変させます */
  #roomplan_main .inner.is_wide {
    width: calc(100% - 4rem) !important;
    max-width: 1200px !important;        /* 1440px時は1200px幅 */
    padding-inline: 0 !important;
    margin-inline: auto !important;      /* 中央寄せ */
    box-sizing: border-box !important;
  }

  .roomplan_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem;
    margin-top: 5rem;
    width: 100% !important;
  }

  .plan_card {
    position: relative;
    padding: 4rem 0.5rem 4rem 3rem;
    background-color: var(--white);
    border: 1px solid var(--brown);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* 右上lupeはpaddingを無視して絶対配置をキープ */
  .card_zoom_btn.is_lupe {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 4rem;
    height: 4rem;
    z-index: 5;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .card_zoom_btn.is_lupe:hover {
    opacity: 0.75 !important;
  }

  /* タイトルフォント：Oranienbaum 70レギュラー */
  .card_title .en {
    font-family: var(--font_deco);
    font-size: 7rem;
    font-weight: 400;
    line-height: 1;
  }

  .card_title .type {
    font-family: var(--font_base);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    margin-left: 1.5rem;
    letter-spacing: -0.01em;
    position: relative;
    top: -0.6rem;  /* 値を調整してちょうどいい位置を探す */
  }

  .card_title {
    border-bottom: none;
    margin-bottom: 0;
  }

  .card_body_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 2rem;
  }

  /* 2カラム左側（テキスト領域） */
  .card_left_col {
    flex: 1;
  }

  /* キャッチコピー：游明朝体26エクストラボールド */
  .card_copy {
    font-family: var(--font_base);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--brown);
    letter-spacing: 0.01em;
  }

  /* 箇条書き：游明朝体16エクストラボールド */
  .card_points {
    margin-top: 2rem;
    list-style: none;
  }

  .card_points li {
    font-family: var(--font_base);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.8;
    color: var(--black);
  }

  .card_points li + li {
    margin-top: 0;
  }

  .card_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 3rem;
  }

  .tag_item {
    font-family: var(--font_base);
    font-size: 1.8rem;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
    color: var(--white);
    border-radius: 2px;
    line-height: 1;
    white-space: nowrap;
  }

  /* 新規共通タグカラーの追加 */
  .tag_item.tag_storage {
    background-color: #1A8980;
  }
  .tag_item.tag_wic_add {
    background-color: #9B578E;
  }

  /* 2カラム右側：間取り図スペース（横220/縦310、内側padding 30px、画像縮小） */
  .card_zoom_btn.is_img_box {
    background: none !important;
    border: none !important;
    outline: none !important;
    padding-right: 1rem !important;
    padding-block: 0 !important;
    width: 20rem !important;
    height: 30rem !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: opacity 0.3s ease !important;
  }

  .card_zoom_btn.is_img_box:hover {
    opacity: 0.75 !important;
  }

  .card_zoom_btn.is_img_box .plan_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .card_floor_area {
    margin-top: 2rem;
    text-align: center;
    width: 100%;
  }

  .card_floor_area img {
    display: inline-block;
    max-width: 100%;
    height: auto;
  }

  .card_floor_area .card_zoom_btn.is_floor_box {
    background: none !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
    transition: opacity 0.3s ease !important;
  }

  .card_floor_area .card_zoom_btn.is_floor_box:hover {
    opacity: 0.75;
  }
}

/* ========================================================
   ROOM PLAN：タブレット版（1024px～769px最適化）
   レイアウト: SP版 / フォント: PC版
   ======================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .roomplan_grid {
    grid-template-columns: 1fr;
    gap: 2rem !important;
    margin-top: 2rem;
  }
  .card_copy br,
  .card_points br {
    display: none !important;
  }
  .plan_card {
    position: relative;
    padding: 3.5rem 4rem;
    background-color: var(--white);
    border: 1px solid var(--brown);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-inline: 4rem;
  }

  .card_body_flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 1rem !important;
    gap: 0;
  }

  .card_left_col {
    width: 100% !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 間取り図をタイトルの直下に配置 */
  .card_zoom_btn.is_img_box {
    order: -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 25rem !important;
    height: auto !important;
    aspect-ratio: 1 / 1.3;
    margin-top: 1rem !important;
    margin-inline: auto !important;
    background: none;
    border: none;
    padding-inline: 1rem !important;
    padding-block: 0 !important;
  }

  .card_zoom_btn.is_img_box .plan_img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* PC版フォントサイズを適用 */
  .card_title .en {
    font-size: 7rem !important;
  }

  .card_title .type {
    font-size: 3.2rem !important;
  }

  .card_copy {
    font-size: 2.6rem !important;
    margin-top: 3rem !important;
  }

  .card_points {
    margin-top: 2rem !important;
    list-style: none;
  }

  .card_points li {
    font-size: 1.6rem !important;
    font-weight: 800;
    line-height: 1.8;
  }

  .tag_item {
    font-size: 1.8rem !important;
  }

  .card_floor_area {
    margin-top: 4rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  .card_floor_area .card_zoom_btn.is_floor_box {
    background: none !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: block !important;
    margin: 0 auto !important;
    width: auto !important;
  }
}

/* ========================================================
   ROOM PLAN：間取りカード（SP版 768px以下最適化）
   ======================================================== */
@media screen and (max-width: 768px) {
  .plan_card {
    position: relative;
    background-color: var(--white);
    border: 1px solid var(--brown);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .card_zoom_btn.is_lupe {
    display: none !important;
    position: absolute !important;
    top: 1rem !important;
    right: 1.2rem !important;
    left: auto !important;
    width: 3rem !important;
    height: 3rem !important;
    z-index: 5;
    margin: 0 !important;
  }

  .card_title_area {
    width: 100%;
    text-align: left;
  }

  .card_title {
    display: flex;
    align-items: baseline;
    border-bottom: none !important; /* 下線を完全にトル */
    margin-bottom: 0 !important;
    width: 100%;
  }

  /* タイトル：間取りタイプ（英字） */
  .card_title .en {
    font-family: var(--font_deco);
    font-size: 4.4rem !important;
    font-weight: 400;
    line-height: 1;
    color: var(--brown);
  }

  /* タイトル：タイプ名・面積 */
  .card_title .type {
    font-family: "Noto Serif JP", serif;
    font-size: 1.8rem !important;
    font-weight: 700;
    line-height: 1;
    margin-left: 1rem !important;
    color: var(--brown);
    position: relative;
    top: -0.5rem;  /* 値を調整してちょうどいい位置を探す */
  }

  .card_body_flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 0 !important; /* 全体のマージンを一度リセット */
    gap: 0;
  }

  .card_left_col {
    width: 100% !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ─── 1. 間取り図スペース（タイトルの直下に配置） ─── */
  .card_zoom_btn.is_img_box {
    order: -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: 21rem !important;
    margin-top: 1rem !important;
    margin-inline: auto !important;
    background: none;
    border: none;
    padding-inline: 1rem !important;
    padding-block: 0 !important;
  }

  .card_zoom_btn.is_img_box .plan_img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* ─── 2. キャッチコピー ─── */
  .card_copy {
    font-family: var(--font_base); /* 游明朝体 */
    color: var(--brown);
    font-weight: 800;
    font-size: 2rem !important;
    line-height: 1.5;
    text-align: left;
    margin-top: 3rem !important;
  }

  /* ─── 3. 箇条書きポイント ─── */
  .card_points {
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
    list-style: none;
    padding: 0;
    text-align: left;
  }

  .card_points li {
    font-family: var(--font_base); /* 游明朝体 */
    color: var(--black);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.6;
  }

  /* 箇流書きの子要素同士の隙間 */
  .card_points li + li {
    margin-top: 1rem !important;
  }

  /* ─── 4. スペックタグエリア ─── */
  .card_footer {
    border-top: none !important;   /* PC版の点線をトル */
    padding-top: 0 !important;
    margin-top: 0 !important;
    display: block !important;     /* フレックスを解除 */
    width: 100%;
  }

  /* ─── 5. 所在階案内図（最下部） ─── */
  .card_floor_area {
    margin-top: 4rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  .card_floor_label {
    font-size: 1.4rem;
  }

  .card_floor_area .card_zoom_btn.is_floor_box {
    display: inline-block !important;
    width: 100% !important;
    max-width: 20rem; /* カンプの比率に合わせて程よい大きさに制限 */
    height: auto;
    padding: 0 !important;
  }
}

/* ========================================================
   ROOM PLAN ページスタイル (下層専用・最新調整版)
   ======================================================== */


/* ─── 拡大案内エリア (PC/SP共通) ─── */
.roomplan_guide {
  display: flex;
  align-items: center;
  margin-top: 10rem;
  margin-bottom: 5rem;
}

.roomplan_guide .guide_lupe {
  width: 4rem;
  height: auto;
  margin-right: 1rem;
}

.roomplan_guide .guide_text {
  font-family: var(--font_base);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brown);
  line-height: 1;
}

/* ========================================================
   ROOM PLAN：絞り込みフィルター（SP版 768px以下最適化）
   ======================================================== */
@media screen and (max-width: 768px) {
  /* 親セクション側のトップ余白を相殺 */
  .sec_roomplan_main {
    padding-top: 0 !important;
  }

  .roomplan_filter {
    margin-top: 6rem;
    padding-inline: 0;
    text-align: center;
  }

  /* タイトルが消えたため、ボタンリストをダイレクトに配置 */
  .filter_btn_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    list-style: none;
    padding: 0;
    max-width: 100%;     /* 幅いっぱいに広げる */
    margin-inline: auto;
  }

  .filter_item {
    grid-column: auto !important;
    width: 100%;
  }

  .btn_filter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 5rem;
    padding: 0 1rem;
    font-family: var(--font_base);
    font-weight: 600;
    font-size: 1.8rem;
    color: var(--brown);
    background-color: var(--white);
    border: 1px solid var(--brown);
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
  }

  .btn_filter:hover,
  .btn_filter.is_active {
    background-color: var(--brown);
    color: var(--cream);
  }

  /* 【重要ルール】次の案内エリアへの押し下げ */
  .roomplan_guide {
    margin-top: 5rem !important;
    margin-bottom: 0 !important;
    display:none;
  }
}

/* ─── 図面拡大モーダルウインドウ (最新カスタム) ─── */
.roomplan_modal {
  position: fixed;
  inset: 0;
  z-index: var(--z_modal);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.roomplan_modal.is_active {
  opacity: 1;
  pointer-events: auto;
}

.modal_overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(36, 35, 35, 0.85); /* 暗幕（もしここも白透過にしたい場合は rgba(255,255,255,0.9) 等に変えてね） */
  backdrop-filter: blur(4px);
}

.modal_wrapper {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: 90vw;     /* スマホや低解像度で画面からはみ出さないためのストッパー */
  max-height: 85vh;
}

.modal_content {
  background-color: var(--white);
  border: 1px solid var(--brown);
  padding: 4rem;
  box-shadow: var(--shadow_primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal_img {
  max-width: 100%;
  max-height: 70vh;    /* 縦がキツキツにならないように制限 */
  width: auto;         /* 画像本来の比率（縦横比）を完全維持 */
  height: auto;
  display: block;
}

.modal_close_btn {
  position: absolute;
  top: -5rem;
  right: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 4.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
}

.modal_close_btn:hover {
  color: var(--hover_pink);
}

/* ─── レスポンシブ調整 ─── */
@media screen and (max-width: 768px) {
  .roomplan_guide .guide_lupe {
    width: 3rem; /* スマホ版は4remからさらに少しコンパクトに */
  }
  .roomplan_guide .guide_text {
    font-size: 1.5rem;
  }
  .roomplan_grid {
    grid-template-columns: 1fr;
    gap: 2rem !important;
    margin-top: 5rem;
  }
  .plan_card {
    padding: 3rem 2.4rem;
  }
  .card_title .size { font-size: 1.4rem; }
  .card_copy { letter-spacing: 0.03em; }
  .card_points { font-size: 1.3rem; }
  .card_figure { margin-bottom: 3.5rem; }

  .card_footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    padding-top: 2.5rem;
  }
  .card_tags {
    max-width: 100%;
    margin-top: 1rem;
  }
  .card_minimap {
    width: 100%;
    max-width: 16rem;
    margin-inline: auto;
  }
  .modal_content {
    padding: 2rem; /* スマホだと4remは余白が広すぎるので、安全のため2remに自動縮小 */
  }
  .modal_close_btn {
    top: -4rem;
    font-size: 3.5rem;
  }
}

/* ========================================================
   OUTLINE (物件概要) スタイル
   ======================================================== */

.sec_outline {
  background-color: var(--cream);
  padding-top: 28rem;
  padding-bottom: 0;
}

.outline_head {
  text-align: center;
}

.outline_title {
  font-family: var(--font_deco);
  font-weight: 400;
  font-size: 7rem;
  color: var(--brown);
  letter-spacing: -0.01em;
  line-height: 1;
}

.outline_hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  margin-top: 4.5rem;
  box-sizing: border-box;
}

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


.outline_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8rem;
  max-width: 1200px;
  margin-inline: auto;
  margin-top: 6rem; /* 物件概要の見出しからの余白 */
  align-items: start;
}

.outline_list {
  list-style: none;
  padding: 0;
  margin: 0;
  letter-spacing: 0.01em;
}

.outline_list li {
  font-family: var(--font_base);
  font-size: 2rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.7;
  text-align: left;
  padding-left: 1em;
  text-indent: -1em;
}

.outline_list li + li {
  margin-top: 2.4rem !important;
}

/* 「西船橋」駅まで徒歩15分の行だけ、liのpadding-leftを打ち消して字下げを解除 */
.outline_no_indent {
  display: block;
  margin-left: 0;
}

/* 「※詳細はルームプラン参照」の下線装飾 */
.outline_list .outline_note {
  border-bottom: 1px solid var(--black);
  padding-bottom: 0.1rem;
  margin-left: 2em;
  display: inline-block;
}

.outline_list .outline_note:hover {
  border-bottom-color: transparent;
  opacity: 1;
}

/* ─── SP版レスポンシブ（768px以下） ─── */
@media screen and (max-width: 768px) {
  .sec_outline {
    padding-top: 20rem;
  }
  .outline_title {
    font-size: 4.4rem;
  }
  .outline_hero {
    margin-top: 4rem;
  }
  .outline_grid {
    grid-template-columns: 1fr; /* スマホでは縦1カラムに */
    margin-top: 3rem;
    gap: 0;
  }
  /* スマホ版では文字サイズを読みやすく1.5rem(15px)程度に自動最適化 */
  .outline_list li {
    font-size: 1.4rem;
    line-height: 1.2;
  }
  .outline_list .outline_note {
    display: inline-block;
    margin-top: 0.4rem;
  }
  .outline_list li + li {
    margin-top: 1.5rem !important; /* スマホ用の行間調整 */
  }
  /* 左カラムのリストの底に、右カラムと繋がるときの隙間をあける */
  .outline_grid .outline_list:first-child {
    margin-bottom: 2rem;
  }
}

/* ========================================================
   ACCESS ページ：メインコンテンツ（PC版ベース・最新最適化）
   ======================================================== */
.access_lead_block {
  text-align: center;
}

.access_sub_lead {
  font-family: var(--font_base);
  font-size: 2.7rem;
  line-height: 1.6;
  font-weight: 800;
  color: var(--brown);
  margin-top: 10rem;
}

/* 本文テキスト：游明朝デミボールド16ブラック */
.access_main_body {
  font-family: var(--font_base);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.1;
  color: var(--black);
  text-align: center;
  margin-top: 5rem;
  letter-spacing: 0.04em;
  max-width: 79rem;
  margin-inline: auto;
}

.access_jp_map_wrap {
  width: 100%;
  max-width: 90rem;
  margin-inline: auto;
  margin-top: 12rem;
  text-align: center;
}

.access_jp_map {
  width: 100%;
  height: auto;
  display: block;
}

.access_box_container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 9rem;
  width: 100%;
}

.access_khaki_box {
  background-color: var(--khaki);
  width: 100%;
  position: relative;
  padding-top: 0 !important;
  padding-inline: 3rem !important;
  padding-bottom: 6rem;
  box-sizing: border-box;
}

/* アイコン：白抜けていないので乗算を付与 */
.access_icon_wrap {
  text-align: center;
  padding-top: 4rem;
  width: 100%;
}

.access_icon_img {
  display: inline-block;
  height: auto;
  max-width: 15rem;
  mix-blend-mode: multiply;
}

.access_icon_train {
  max-width: 21rem; /* 210px */
}

.access_icon_bus {
  max-width: 15rem; /* 150px */
}

.access_corner_note {
  position: absolute;
  right: 2rem;   /* 20px */
  bottom: 2rem;  /* 20px */
  font-family: var(--font_base);
  font-weight: 500;
  color: var(--black);
  font-size: 1.4rem; /* 14px */
  text-align: right;
}

.access_box_title {
  font-family: var(--font_base);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--brown);
  text-align: center;
  margin-top: 2.5rem;
  letter-spacing: 0.03em;
}

.access_station_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6rem;
  max-width: 104rem;
  margin-inline: auto;
  margin-top: 6rem;
}

@media screen and (min-width: 981px) {
  /* bus側のみ、画面幅1440px時点で実寸590px相当になるよう左右marginで幅を絞る */
  .access_station_grid.access_station_grid_bus {
    max-width: 59rem; /* 590px @1440px viewport */
    margin-inline: auto;
  }
}

.access_station_list {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.access_station_list li {
  font-family: var(--font_base);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--black);
  display: flex;
  align-items: center;
  line-height: 1.5;
}

.access_station_list .dot {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: var(--brown);
  border-radius: 50%;
  margin-right: 1.5rem;
  flex-shrink: 0;
}

.access_box_note {
  font-family: var(--font_base);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--black);
  text-align: left;
  max-width: 104rem; /* コンテンツ幅に完全同期 */
  margin-inline: auto;
  margin-top: 3rem;
}


/* ========================================================
   ACCESS ページ：スマートフォン版（768px以下最適化）
   ======================================================== */
/* ─── 980px以下：縦積みレイアウト（font-sizeはPC版） ─── */
@media screen and (max-width: 980px) {
  .access_station_grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 4rem;
    padding-inline: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .access_sub_lead {
    font-size: 2rem;
    margin-top: 5rem;
  }

  .access_main_body {
    font-size: 1.4rem;
    line-height: 2;
    text-align: left; /* スマホ長文は左寄せが読みやすい */
    margin-top: 3rem;
  }

  .access_jp_map_wrap {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    max-width: none !important;
    margin-top: 6rem;
  }

  .access_box_container {
    margin-top: 6rem;
    gap: 2.5rem;
  }

  /* スマホ版カーキボックス：bottomのみ残すルールをキープ */
  .access_khaki_box {
    padding-top: 0 !important;
    padding-inline: 0.5rem !important;
    padding-bottom: 5rem;
  }

  .access_icon_train {
    max-width: 12rem; /* 120px */
  }

  .access_icon_bus {
    max-width: 8.5rem; /* 85px */
  }

  .access_corner_note {
    right: 1.5rem;
    bottom: 1.5rem;
    font-size: 1.2rem; /* 12px */
  }

  .access_box_title {
    font-size: 1.8rem;
    line-height: 1.8;
    white-space: nowrap;
  }

  .access_station_grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 4rem;
    padding-inline: 2rem; /* 文字が画面端に張り付かないための左右安全地帯 */
  }

  .access_station_list {
    gap: 2rem;
  }

  .access_station_list li {
    font-size: 1.5rem;
  }

  .access_station_list .dot {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 1.2rem;
  }

  .access_box_note {
    font-size: 1.3rem;
    margin-top: 2.5rem;
    padding-inline: 2rem;
  }
}

/* ========================================================
   LOCATION（周辺環境）セクション：ブロック①（PC版ベース）
   ======================================================== */
.sec_location_main {
  padding-top: 20rem;
  padding-bottom: 0;
}

.location_lead_text {
  font-family: var(--font_base);
  font-size: 3.2rem;
  line-height: 1.6;
  font-weight: 800;
  color: var(--brown);
  text-align: center;
  margin-top: 10rem;
}

.location_photo_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 綺麗な横2カラム */
  column-gap: 5rem;
  row-gap: 10rem;
  width: 100%;
  margin-top: 12rem;
}

/* スポットカード単体：左右で文字数が違ってもカード自体の高さを自動で揃える */
.location_spot_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100%; /* 親のgridセルの高さ（最大値）に強制同期 */
}

/* 写真枠（ホバーズーム対応） */
.location_spot_img {
  width: 100%;
  aspect-ratio: 570 / 380; /* カンプに合わせた美しい横長比率 */
  overflow: hidden;
}

/* スポットタイトル：游明朝30エクストラボールド(800)ブラウン、上余白3rem */
.location_spot_title {
  font-family: var(--font_base);
  font-size: 2.7rem; /* 30px */
  font-weight: 800; /* エクストラボールド */
  color: var(--brown);
  text-align: left;
  margin-top: 3rem;
  line-height: 1.3;
}

/* スポット説明文：游明朝16デミボールド(600)ブラック、上余白トル（0） */
.location_spot_desc {
  font-family: var(--font_base);
  font-size: 1.6rem; /* 16px */
  font-weight: 600;  /* デミボールド */
  color: var(--black);
  text-align: left;
  line-height: 1.8;
  letter-spacing: 0.04em;
  margin-top: 1.2rem;
}


/* ========================================================
   LOCATION（周辺環境）セクション：ブロック①（SP版 768px以下）
   ======================================================== */
@media screen and (max-width: 768px) {
  /* 他の下層ページの空気感に合わせて、スマホ版のセクション頭余白を最適化 */
  .sec_location_main {
    padding-top: 10rem;
  }

  .location_lead_text {
    font-size: 1.8rem;
    line-height: 1.8;
    margin-top: 5rem;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* スマホ版写真グリッド：それなりに対応（美しい1カラムにスイッチ） */
  .location_photo_grid {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 6rem; /* スマホ用に上下の間隔を程よく調整 */
    margin-top: 6rem;
  }

  .location_spot_img {
    aspect-ratio: 1 / 0.68;
  }

  .location_spot_title {
    font-size: 1.8rem;
    margin-top: 2rem;
  }

  .location_spot_desc {
    font-size: 1.4rem;
    line-height: 2;
    margin-top: 1rem;
  }
}

/* ========================================================
   LOCATION：ブロック② その他の周辺情報（PC版千鳥配置）
   ======================================================== */
.location_others_block {
  margin-top: 12rem; /* 6枚グリッドの底辺からゆったり引き離す */
  width: 100%;
}

/* 小見出し：ROOM PLANのOUTLINE見出しスタイルをインスパイア */
.others_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
}


.others_title_rule {
  width: 100%;
  height: 1.5px;
  background-color: var(--brown);
  border: none;
  margin-top: 2rem;
}

/* ジグザグ（千鳥型）グリッドシステム：全体幅1200px(120rem)を想定し、横6カラムで割る */
.location_others_zigzag_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 8rem;     /* 上下段の間の隙間 */
  column-gap: clamp(1.5rem, 1.39vw, 2rem);  /* 1440px以上は2remでフラット、以下は滑らかに縮小 */
  max-width: 1200px;
  margin-inline: auto;
  margin-top: 10rem;  /* 見出しからの押し下げ */
}

.others_item {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 1.74vw, 2.5rem); /* 丸とテキストの間の距離：1440px以上は2.5remでフラット、以下は滑らかに縮小 */
  width: 100%;
}

/* 1440px以上は13remでフラット、そこから画面幅に応じて9.5remまで滑らかに縮小 */
.others_icon_circle {
  width: clamp(10rem, 9.03vw, 14rem);
  height: clamp(10rem, 9.03vw, 14rem);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.others_icon_circle img {
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 130px;
  object-fit: contain;
  object-position: bottom;
}

.others_info_text {
  text-align: left;
}

/* カテゴリ名：游明朝ブラウン */
.others_cat_name {
  font-family: var(--font_base);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--brown);
  line-height: 1.3;
}

/* 詳細説明文：游明朝ブラックデミボールド */
.others_detail_desc {
  font-family: var(--font_base);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--black);
  line-height: 1.6;
  margin-top: 1rem;
  white-space: nowrap;
}

.indent_walk {
  display: inline-block;
  padding-left: 0;
}
.indent_walk.sp_only {
  padding-left: 0;
}


/* ────── 1024px以下：SPレイアウト（font-sizeはPC版） ────── */
@media screen and (max-width: 1024px) {
  .location_others_zigzag_grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 4rem !important;
    row-gap: 4rem !important;
    margin-top: 5rem;
  }

  .others_item {
    grid-column: auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100%;
    text-align: center !important;
  }

  .others_icon_circle {
    width: 14rem;
    height: 14rem;
    margin-inline: auto !important;
  }

  .others_info_text {
    width: 100% !important;
    margin-inline: 0 !important;
    padding: 2rem 5% 0;
  }

  .others_detail_desc br:nth-of-type(odd) {
    display: none;
  }
}

/* ========================================================
   LOCATION：ブロック② その他の周辺情報（SP版 768px以下・最新カスタム）
   ======================================================== */
@media screen and (max-width: 768px) {
  .location_others_block {
    margin-top: 10rem;
  }


  .others_title_rule {
    margin-top: 1rem;
    width: 130%;
  }

  .location_others_zigzag_grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 4rem !important;
    row-gap: 3rem !important;
    margin-top: 5rem;
  }

  .others_item {
    grid-column: auto !important; /* PC版の千鳥配置設定を完全リセット */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important; /* 横フレックス時のgapを相殺 */
    width: 100%;
    text-align: center !important;
  }

  .others_icon_circle {
    width: 10rem !important;
    height: 10rem !important;
    margin-inline: auto !important;
  }

  .others_info_text {
    width: fit-content !important;
    margin-inline: auto !important;
    padding: 0 3%;
  }

  .others_cat_name {
    font-size: 1.8rem;
    margin-top: 2rem !important;
    text-align: left !important;
  }

  .others_detail_desc {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-top: 0.8rem;
    white-space: normal !important;
    text-align: left !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
  }

  .others_detail_desc .sp_walk {
    display: block !important;
    margin-bottom: -1rem !important;
  }

  /* スマホ版中央寄せのバランスを保つため、改行後のインデントスパンを通常リセット */
  /* .indent_walk {
    display: inline !important;
    padding-left: 0 !important;
  } */

  .indent_walk.sp_only {
    padding-left: 0 !important;
  }
}

/* ========================================================
   下層FAQページ専用スタイル (faq.php)
   ======================================================== */

/* ─── 1. サブページMV内の導入リード文 ─── */
.page_faq .faq_title_text {
  text-align: center;
  font-family: var(--font_base); /* 游明朝体 */
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2;
  color: var(--black);
  letter-spacing: 0.05em;
  /* 厳守ルール：大見出しエリアからの美しい押し下げ距離 */
  margin-top: 3rem;
}

/* ─── 2. メインコンテンツエリア全体の頭余白 ─── */
.page_faq #faq_main {
  padding-top: 6rem;
}

/* ─── 3. カテゴリセクションの縦積み＆押し下げ制御 ─── */
.page_faq .faq_category_section {
  width: 100%;
}

/* 厳守ルール：2つ目以降のカテゴリを上方向マージンだけで均等に押し下げる */
.page_faq .faq_category_section + .faq_category_section {
  margin-top: 8rem;
}

/* ─── 4. カテゴリ見出し（カンプ準拠の左寄せ・太明朝） ─── */
.page_faq .faq_category_title {
  font-family: var(--font_base); /* 游明朝体 */
  font-size: 2.8rem;
  font-weight: 800; /* カンプのエクストラボールドな高級感 */
  color: var(--brown);
  text-align: left;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* ─── 5. 厳守ルール：最下部CONTACTセクションへのマージン押し下げ ─── */
.page_faq .sec_contact {
  /* 直前のメインコンテンツ（最後のカテゴリ）の末尾から、margin-top側だけで完璧に距離をとる設計 */
  margin-top: 15rem;
  padding: 0 0 20rem 0; /* 既存のpadding-topをmargin-topに完全移譲し、底の空気感だけを残す */
}


/* ────────────────────────────────────────────────────────
   PC版限定：外側マージン優先 ＋ 1025px以下から自動等比スケール発動
   ──────────────────────────────────────────────────────── */
@media screen and (min-width: 769px) {

  /* ABOUTやROOM PLANで確立した、中画面での崩れを100%防ぐ等比縮小機構 */
  .page_faq #faq_main {
    --scale-base: 1025;
    --scale-factor: calc(var(--js_windowWidth) / (var(--scale-base) * 1px));
  }

  @media screen and (max-width: 1025px) {
    .page_faq #faq_main .faq_container {
      transform: scale(var(--scale-factor)) !important;
      transform-origin: top center !important;
      /* スケール縮小によって生じる下の隙間をネガティブマージンで動的に自動吸収 */
      margin-bottom: calc((1 - var(--scale-factor)) * -100%) !important;
    }
  }
}


/* ========================================================
   下層FAQページ：スマートフォン版レスポンシブ（768px以下）
   ======================================================== */
@media screen and (max-width: 768px) {

  .page_faq .faq_title_text {
    font-size: 1.4rem;
    line-height: 1.8;
    margin-top: 3rem;
    padding-inline: 4%;          /* 画面端への吸着を防ぐ安全マージン */
  }

  .page_faq #faq_main {
    padding-top: 6rem;
  }

  .page_faq .faq_category_section + .faq_category_section {
    margin-top: 6rem;
  }

  .page_faq .faq_category_title {
    font-size: 2rem;
    padding-inline: 2%; /* 左右にわずかな空気感を持たせる */
  }

  /* 既存の `.faq_list` が持つスマホ用 `margin-top: 3rem;` と自動連動し、
    タイトル下部がスマホでもカンプ通りの完璧なバランスに整います。
  */

  .page_faq .sec_contact {
    margin-top: 8rem;
    padding: 0 0 10rem 0;
  }
}

/* ========================================================
   下層NISHIFUNA NOTEページ専用スタイル (note.php)
   ======================================================== */

.page_note {
  background-color: var(--taupe) !important;
  width: 100%;
}
.page_note .c_subpage_mv,
.page_note .sec_note_main,
.page_note .sec_contact {
  background-color: transparent !important;
}

@media screen and (min-width: 769px) {
  .page_note .c_subpage_mv_frame {
    padding-top: 5rem;
  }
}

/* ─── 大見出し（h1）特殊仕様：PCは半円状に歪曲したSVGタイトル、SPは通常テキスト ─── */
.page_note .c_page_title {
  font-family: var(--font_en) !important; /* EB Garamond */
  font-size: 9rem !important;            /* 90px */
  font-weight: 700 !important;           /* ボールド */
  color: var(--brown) !important;
  letter-spacing: 0em;
  line-height: 1;
}
.page_note .note_title_curve {
  display: block;
  width: min(1000px, 100%);
  height: auto;
  margin-inline: auto;
}
.page_note .note_title_curve text,
.page_note .note_title_curve textPath {
  font-family: var(--font_en);
  font-size: 6.4rem;
  font-weight: 700;
  fill: var(--brown);
  letter-spacing: 0.12em;
}
.page_note .note_title_flat {
  display: none; /* PCではSVG曲線表示のみ、通常テキストは非表示 */
}

@media screen and (max-width: 768px) {
  .page_note .note_title_curve {
    display: none; /* SPは曲線化せず通常テキストのまま */
  }
  .page_note .note_title_flat {
    display: block;
  }
}

/* ─── サブページMV内の導入リード文 ─── */
.page_note .note_title_text {
  text-align: center;
  font-family: var(--font_base);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.8;
  color: var(--brown);
  letter-spacing: 0.05em;
  margin-top: 0;
}

/* ─── メインコンテンツエリア全体の頭余白 ─── */
.page_note #note_main {
  padding-top: 7.5rem;
}

/* ─── 最上部イラストマップの制御 ─── */
.page_note .note_map_wrapper {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}
.page_note .note_page_map {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── スポットカード全体のコンテナ ─── */
.page_note .note_spot_container {
  margin-top: 20rem;
  width: 100%;
}

/* ─── 記事1件のラッパー（罫線は末尾に配置。一番最後の記事だけ罫線なし） ─── */
.page_note .note_spot_group {
  width: 100%;
  border-bottom: 1px solid var(--brown); /* ご指示：各記事の最後（3行組みの下）に罫線 */
  padding-bottom: 9rem;
}
.page_note .note_spot_group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.page_note .note_spot_group + .note_spot_group {
  margin-top: 11rem;
}

/* ─── タイトル群（記事カードの外・数字＋タイトル＋サブタイトル） ─── */
.page_note .spot_title_block {
  display: flex;
  align-items: center;
  gap: 4rem;
}
.page_note .type_odd .spot_title_block  { justify-content: flex-start; }
.page_note .type_even .spot_title_block {
  width: calc(50% - clamp(2rem, 6.94vw, 10rem));   /* .spot_cell_textの幅と同じ計算式に統一 */
  min-width: max-content;   /* 幅が足りない場合はタイトルの折り返しより1行優先で自身の内容幅まで広がる */
  margin-left: auto;
  justify-content: flex-start;
}

.page_note .spot_num_svg {
  height: 11rem;
  width: auto;
  flex: none;
}
.page_note .note_svg_num {
  height: 100%;
  width: auto;
  display: block;
}
.page_note .spot_title_text {
  display: flex;
  flex-direction: column;
}

/* ─── 店舗名見出し ─── */
.page_note .spot_title {
  font-family: var(--font_base);
  font-size: 3.6rem;
  font-weight: 800;                     /* エクストラボールド */
  color: var(--brown);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin-top: 0;
}

/* ─── サブタイトル（新規・無い場合は要素ごと省略） ─── */
.page_note .spot_subtitle {
  font-family: var(--font_base);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--brown);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-top: 0.5rem;
}

/* ─── 記事本文カード（画像a/b/cとテキストの3段交互組み） ─── */
.page_note .note_spot_item {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10rem;
  margin-top: 3rem;
}
.page_note .spot_row {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 6.94vw, 10rem);   /* 1440px時点で最大10rem・最小2remになるよう調整 */
}
.page_note .type_even .spot_row {
  flex-direction: row-reverse;
}
.page_note .spot_cell_img {
  width: 50%;
  flex: none;
  min-width: 0;
}
.page_note .spot_cell_text {
  flex: 1 1 auto;     /* 固定50remをやめ、残り幅いっぱいまで可変に */
  min-width: 0;
  text-align: left;
}

/* ─── 店舗説明文 ─── */
.page_note .spot_desc {
  font-family: var(--font_base);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--brown);
  line-height: 1.85;
  letter-spacing: 0.03em;
}

/* 画像フレーム基本サイズ（3行とも同一比率） */
.page_note .spot_img_frame { width: 100%; aspect-ratio: 60 / 44; height: auto; }

/* ─── 最下部CONTACTへの完璧な押し下げ ─── */
.page_note .sec_contact {
  margin-top: 20rem;
  padding: 0 0 6rem 0;
}

/* ─── 7.5. 1024px以下：note_spot_containerの中身のみ縦積み（文字サイズ・余白はPCのまま） ─── */
@media screen and (max-width: 1024px) {
  .page_note .spot_row {
    flex-direction: column;
    align-items: stretch;
    gap: 3rem;
  }
  .page_note .type_even .spot_row {
    flex-direction: column;
  }
  .page_note .spot_cell_img,
  .page_note .spot_cell_text {
    width: 100%;
  }
  .page_note .spot_cell_img {
    order: 1;      /* SPと同様、縦積み時は全行を画像→テキストの順に統一 */
  }
  .page_note .spot_cell_text {
    order: 2;
  }
  .page_note .type_even .spot_title_block {
    width: auto;   /* 縦積みでは左右の面合わせが不要なため、PC用の狭い幅指定を解除 */
  }
}

/* ─── 8. スマートフォン版レスポンシブ（768px以下） ─── */
@media screen and (max-width: 768px) {
  /* 見出しのスマホサイズ調整 */
  .page_note .c_page_title {
    font-size: 5.2rem !important;
  }

  .page_note .note_title_text {
    font-size: 1.6rem;
    line-height: 2;
    margin-top: 3rem;
    padding-inline: 4%;
  }

  .page_note #note_main {
    padding-top: 3.5rem;
  }

  /* ─── 【重要修正】インナーの余白消失を完全解決 ───
     `.inner.is_wide` の幅を100%にする記述を完全に排除。
     これによりインナー本来の幅（94%）と左右の美しい余白が復活し、テキストやメイン画像が画面端に張り付くバグを解消します。 */
  .page_note .sec_note_main .inner.is_wide {
    width: 94% !important;
    margin-inline: auto !important;
  }

  .page_note .note_map_wrapper {
    width: calc(100vw - 30px) !important;
    margin-left: calc(50% - 50vw + 15px) !important;
    max-width: none !important;
  }

  .page_note .note_spot_container {
    margin-top: 12rem;
  }

  /* ─── 記事ラッパー（SP版・罫線は末尾） ─── */
  .page_note .note_spot_group {
    padding-bottom: 6rem;
  }
  .page_note .note_spot_group + .note_spot_group {
    margin-top: 8rem;
  }

  /* ─── タイトル群（SP：数字は中央、タイトル・サブタイトルはその下に左寄せ） ─── */
  .page_note .spot_title_block {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .page_note .type_odd .spot_title_block,
  .page_note .type_even .spot_title_block {
    justify-content: flex-start;
    width: auto;      /* PCのtype_even用50rem指定をSPでは解除 */
    margin-left: 0;
  }
  .page_note .spot_num_svg {
    height: 5.5rem;                     /* SPは5.5rem */
  }
  .page_note .spot_title_text {
    align-items: flex-start;
    width: 100%;
    margin-top: 3.5rem;
  }
  .page_note .spot_title {
    font-size: 2.6rem;
    text-align: left;
  }
  .page_note .spot_subtitle {
    font-size: 1.8rem;
    text-align: left;
    margin-top: 0.5rem;
  }

  /* ─── 記事本文（SP：必ず 画像→テキスト の順で縦積み） ─── */
  .page_note .note_spot_item {
    gap: 0;
    margin-top: 0;                      /* PCの3remは使わず、最初の画像側のmargin-topで制御 */
  }
  .page_note .spot_row,
  .page_note .type_even .spot_row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .page_note .spot_cell_img {
    order: 1;
    width: 100%;
    margin-top: 6rem;
  }
  .page_note .spot_cell_text {
    order: 2;
    width: 100%;
    margin-top: 3rem;
  }
  .page_note .note_spot_item .spot_row:first-child .spot_cell_img {
    margin-top: 2rem;
  }

  .page_note .spot_desc {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: left;
  }

  .page_note .sec_contact {
    margin-top: 10rem;
    padding: 0 0 4rem 0;
  }
}

/* ─── 9. 最下部の締めテキストブロック（スポット8の直下） ─── */
.page_note .note_closing_text {
  text-align: center;
  font-family: var(--font_base);  /* 游明朝体 */
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--brown);            /* ページの世界観に合わせた美しいブラウン */
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin-top: 17rem;
}

/* ─── 締めテキスト下のイラスト ─── */
.page_note .note_illust_wrapper {
  text-align: center;
  margin-top: 60px;
}
.page_note .note_illust_img {
  display: inline-block;
  width: 200px;
  height: auto;
}

/* スマホ版レスポンシブ（768px以下） */
@media screen and (max-width: 768px) {
  .page_note .note_closing_text {
    font-size: 2.6rem;
    margin-top: 14rem;
    line-height: 1.7;
  }

  .page_note .note_illust_img {
    width: 110px;
  }
}