@charset "UTF-8";

/* ============================================================
   NEW NORMAL HOTEL — brand site (merged stylesheet)
     1. design tokens (:root)
     2. base / reset
     3. header / menu / main visual / news   ← phase-header-mv-news.css 由来
     4. concept / hotels grid / location map ← style.css 由来
   ============================================================ */

/* ---------- 1. design tokens ---------- */
:root{
  /* header / MV / news 系が参照するエイリアス */
  --ink:#000; --paper:#fff; --cream:#FBF9F5;
  --gold:#B8963E; --brown:#4A3728; --hair:#E2DBCC;
  --mincho:"Zen Old Mincho", serif;
  --serif-en:"Cormorant Garamond", serif;   /* ※新規追加：注意点[1]参照 */

  /* New Normal パレット（これまでの決定） */
  --land-base:  #F5F0E8;  /* 一番薄いニュートラル */
  --off-white:  #FBF9F5;  /* 温かいオフホワイト（ボタン反転時の文字） */
  --pin-gold:   #B8963E;  /* ブランドゴールド */
  --gold-hover: #D4AF5A;  /* 明るいゴールド */
  --dark-brown: #4A3728;  /* 濃茶：地名・本文 */
  --caption:    #8A8072;  /* 接頭辞など弱い文字 */
  --rule:       #C9BEAB;  /* 罫線 */
  --page-bg:    #FFFFFF;

  --content-max: 1440px;
  --card-gap: 24px;
}

/* ---------- 2. base / reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background: var(--page-bg);
  color: var(--dark-brown);
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

/* ---------- 3. header / menu / main visual / news ---------- */
/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 88px;
  color: var(--ink, #000);
  transition:
    background-color .45s ease,
    color .45s ease,
    border-color .45s ease,
    transform .45s cubic-bezier(.2,.7,.2,1);
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  background: rgba(255,255,255,.94);
  border-bottom-color: var(--hair, #E2DBCC);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header__inner {
  width: min(100% - 48px, 1440px);
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.site-brand {
  color: inherit;
  text-decoration: none;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: clamp(20px, 1.65vw, 28px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.3vw, 38px);
}

.site-nav a,
.menu-trigger {
  position: relative;
  color: inherit;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-decoration: none;
}

.site-nav a::after,
.menu-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.menu-trigger:hover::after,
.menu-trigger:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 12px 0;
  cursor: pointer;
}

/* ---------- full screen menu ---------- */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--cream, #FBF9F5);
  color: var(--ink, #000);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.menu-panel.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.menu-panel__inner {
  width: min(100% - 64px, 1440px);
  min-height: 100%;
  margin-inline: auto;
  padding: 30px 0 48px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.menu-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 13px;
  letter-spacing: .18em;
  padding: 12px 0;
}

.menu-panel__body {
  align-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: clamp(56px, 8vw, 140px);
  padding: 64px 0;
}

.menu-main {
  display: grid;
  gap: 12px;
}

.menu-main a {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: baseline;
  color: inherit;
  text-decoration: none;
  padding: 8px 0;
}

.menu-main .num {
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 12px;
  letter-spacing: .12em;
  color: #9a9184;
}

.menu-main .label {
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: clamp(44px, 6vw, 92px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: .98;
}

.menu-hotels__title {
  margin: 0 0 20px;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 12px;
  letter-spacing: .24em;
  color: #8a8172;
}

.menu-hotels {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hair, #E2DBCC);
}

.menu-hotels li {
  border-bottom: 1px solid var(--hair, #E2DBCC);
}

.menu-hotels a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .06em;
}

.menu-hotels a span:last-child {
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.menu-hotels a:hover span:last-child,
.menu-hotels a:focus-visible span:last-child {
  transform: translateX(5px);
}

.menu-panel__foot {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hair, #E2DBCC);
  font-size: 11px;
  letter-spacing: .1em;
  color: #8a8172;
}

body.menu-open {
  overflow: hidden;
}

/* ---------- main visual ---------- */
.mv {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper, #fff);
  color: var(--ink, #000);
  isolation: isolate;
}

.mv__inner {
  position: relative;
  width: min(100% - 48px, 1440px);
  min-height: 100svh;
  margin-inline: auto;
  padding-top: 88px;
}

.mv__media {
  position: absolute;
  z-index: 0;
  top: clamp(118px, 15vh, 160px);
  right: 0;
  width: min(58vw, 840px);
  height: min(70vh, 720px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(74,55,40,.08), rgba(184,150,62,.08)),
    #d9d4ca;
  clip-path: inset(0 0 100% 0);
}

.mv__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 40%);
  pointer-events: none;
}

.mv__slides,
.mv__slide,
.mv__slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mv__slides {
  overflow: hidden;
}

.mv__slide {
  z-index: 0;
  visibility: hidden;
  clip-path: inset(0);
}

.mv__slide.is-active {
  z-index: 1;
  visibility: visible;
}

.mv__slide-image {
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  will-change: transform;
}

/* Replace these four files with the final brand / stay-scene photos. */
.mv__slide-image--01 {
  background-image:
    linear-gradient(135deg, rgba(74,55,40,.12), rgba(184,150,62,.04)),
    url("../images/mv-01.webp");
}

.mv__slide-image--02 {
  background-image:
    linear-gradient(135deg, rgba(74,55,40,.10), rgba(184,150,62,.05)),
    url("../images/mv-02.webp");
}

.mv__slide-image--03 {
  background-image:
    linear-gradient(135deg, rgba(74,55,40,.11), rgba(184,150,62,.04)),
    url("../images/mv-03.webp");
}

.mv__slide-image--04 {
  background-image:
    linear-gradient(135deg, rgba(74,55,40,.09), rgba(184,150,62,.05)),
    url("../images/mv-04.webp");
}

.mv__counter {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 92px;
  padding: 14px 18px 12px;
  background: rgba(255,255,255,.92);
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .12em;
}

.mv__counter-current {
  font-size: 18px;
}

.mv__counter-separator,
.mv__counter-total {
  opacity: .55;
}

.mv__title {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  transform: translateY(-51%);
  margin: 0;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-weight: 400;
  font-size: clamp(76px, 11.5vw, 184px);
  letter-spacing: -.055em;
  line-height: .73;
  text-transform: uppercase;
  pointer-events: none;
}

.mv__title-line {
  display: block;
  overflow: hidden;
  padding-right: .08em;
}

.mv__title-text {
  display: block;
  transform: translateY(112%);
}

.mv__title-line:nth-child(2) {
  margin-left: clamp(20px, 4.5vw, 72px);
}

.mv__title-line:nth-child(3) {
  margin-left: clamp(72px, 10vw, 160px);
}

.mv__meta {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: clamp(34px, 6vh, 72px);
  max-width: 420px;
}

.mv__eyebrow {
  margin: 0 0 18px;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.mv__copy {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.95;
  letter-spacing: .08em;
}

.mv__scroll {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: clamp(34px, 6vh, 72px);
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 10px;
  letter-spacing: .24em;
  writing-mode: vertical-rl;
}

.mv__scroll::after {
  content: "";
  width: 1px;
  height: 58px;
  background: currentColor;
  opacity: .45;
}

/* ---------- news ---------- */
.news-section {
  background: var(--cream, #FBF9F5);
  color: var(--ink, #000);
  padding: clamp(84px, 10vw, 148px) clamp(20px, 5vw, 80px);
}

.news-section__inner {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
}

.news-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 42px;
}

.news-heading {
  margin: 0;
  line-height: 1;
}

.news-heading .en {
  display: block;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 400;
  letter-spacing: -.025em;
}

.news-heading .ja {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .18em;
  color: #8a8172;
}

.news-all {
  color: inherit;
  text-decoration: none;
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 12px;
  letter-spacing: .16em;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hair, #E2DBCC);
}

.news-item {
  border-bottom: 1px solid var(--hair, #E2DBCC);
}

.news-item__link {
  display: grid;
  grid-template-columns: 110px minmax(160px, 220px) 1fr 28px;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  min-height: 104px;
  padding: 18px 2px;
  color: inherit;
  text-decoration: none;
}

.news-item__date {
  font-family: var(--serif-en, "Cormorant Garamond", serif);
  font-size: 16px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: #756d62;
}

.news-item__facility {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #b7ad9e;
  font-family: var(--mincho, "Zen Old Mincho", serif);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.news-item__title {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.8;
  letter-spacing: .05em;
}

.news-item__arrow {
  font-size: 18px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}

.news-item__link:hover .news-item__arrow,
.news-item__link:focus-visible .news-item__arrow {
  transform: translateX(6px);
}

/* JS initial states */
.js .mv__eyebrow,
.js .mv__copy,
.js .mv__scroll {
  opacity: 0;
}

.js .news-section__head,
.js .news-item {
  opacity: 0;
}

@media (max-width: 960px) {
  .site-header__inner,
  .mv__inner {
    width: min(100% - 40px, 1440px);
  }

  .site-nav {
    display: none;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
  }

  .menu-panel__body {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 52px;
  }

  .menu-hotels-wrap {
    max-width: 640px;
  }

  .mv__media {
    top: 16vh;
    width: 70vw;
    height: 64vh;
  }

  .mv__title {
    top: 49%;
    font-size: clamp(76px, 14.8vw, 138px);
  }
}

@media (max-width: 680px) {
  .site-header {
    height: 72px;
  }

  .site-header__inner,
  .mv__inner,
  .menu-panel__inner {
    width: calc(100% - 36px);
  }

  .site-brand {
    font-size: 19px;
  }

  .mv__inner {
    padding-top: 72px;
  }

  .mv__media {
    top: 22vh;
    right: -18px;
    width: calc(100% - 28px);
    height: 56vh;
  }

  .mv__counter {
    min-width: 78px;
    padding: 11px 14px 10px;
    font-size: 10px;
  }

  .mv__counter-current {
    font-size: 16px;
  }

  .mv__title {
    top: 31%;
    transform: translateY(-50%);
    font-size: clamp(58px, 20.5vw, 92px);
    line-height: .79;
  }

  .mv__title-line:nth-child(2) {
    margin-left: 18px;
  }

  .mv__title-line:nth-child(3) {
    margin-left: 48px;
  }

  .mv__meta {
    left: 0;
    bottom: 30px;
    width: calc(100% - 50px);
  }

  .mv__copy {
    font-size: 14px;
    line-height: 1.85;
  }

  .mv__scroll {
    display: none;
  }

  .menu-panel__inner {
    padding-top: 18px;
  }

  .menu-panel__body {
    padding: 32px 0 44px;
    gap: 38px;
  }

  .menu-main a {
    grid-template-columns: 34px 1fr;
  }

  .menu-main .label {
    font-size: clamp(42px, 15vw, 68px);
  }

  .menu-hotels a {
    font-size: 12px;
  }

  .menu-panel__foot {
    display: block;
  }

  .menu-panel__foot span:last-child {
    display: block;
    margin-top: 8px;
  }

  .news-section__head {
    align-items: flex-start;
  }

  .news-item__link {
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    min-height: 0;
    padding: 24px 0;
  }

  .news-item__date {
    grid-column: 1;
    grid-row: 1;
  }

  .news-item__facility {
    grid-column: 1;
    grid-row: 2;
    margin: 3px 0 8px;
  }

  .news-item__title {
    grid-column: 1;
    grid-row: 3;
  }

  .news-item__arrow {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-nav a::after,
  .menu-trigger::after,
  .menu-hotels a span:last-child,
  .news-item__arrow {
    transition: none !important;
  }

  .mv__media {
    clip-path: inset(0) !important;
  }

  .mv__slide-image,
  .mv__title-text,
  .js .mv__eyebrow,
  .js .mv__copy,
  .js .mv__scroll,
  .js .news-section__head,
  .js .news-item {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- 4. concept / hotels grid / location map ---------- */

 
  .section{
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
    padding: 120px 40px;
  }
 
  /* --- セクション見出し --- */
  .section-head{
    margin-bottom: 64px;
  }
  .section-head .en{
    font-size: 13px;
    letter-spacing: 0.35em;
    color: var(--pin-gold);
    display: block;
    margin-bottom: 16px;
  }
  .section-head .jp{
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--dark-brown);
  }

  /* ============================================================
     CONCEPT SECTION  ここから本番に移植する部分
     ============================================================ */
  .concept{ padding:80px clamp(16px,2vw,32px); }
  .concept__stage{
    position:relative;
    width:100%; max-width:1440px; margin:0 auto;
    aspect-ratio: 1440 / 1422;   /* デザイン実寸（モック解析）。写真の縦横比と重なりを保って拡縮 */
  }

  /* --- 写真プレースホルダ（実写真<img>に差し替え）--- */
  .concept__photo{
    position:absolute;
    background:#E7E1D5;                 /* 画像読み込み中の下地 */
    overflow:hidden;
  }
  .concept__photo img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .concept__photo span{
    font-size:11px; letter-spacing:.22em; color:#9a9184;
    font-family:var(--serif-en);
  }
  /* 位置＝モック(グループ_6.jpg 1440×1422)を解析した実測%。z-indexはXDレイヤー順（room-01が最前面の写真）*/
  .p-sea    { left:8.19%;  top:6.54%;  width:33.89%; height:48.24%; z-index:2; }  /* sea-01      488×686 */
  .p-street { left:53.75%; top:2.81%;  width:20.14%; height:28.69%; z-index:3; }  /* street-01   290×408 */
  .p-biz    { left:71.04%; top:0%;     width:28.96%; height:20.32%; z-index:7; }  /* business-01 417×289 */
  .p-tree   { left:73.61%; top:16.53%; width:26.39%; height:37.55%; z-index:8; }  /* street-02   380×534（主役）*/
  .p-room   { left:80%; top:35.86%; width:17.99%; height:12.66%; z-index:9; }  /* room-01     259×180 */
  .p-sofa   { left:0%;     top:61.04%; width:39.38%; height:27.57%; z-index:6; }  /* room-02     567×392 */
  .p-beach  { left:48.26%; top:80.38%; width:25.56%; height:19.48%; z-index:4; }  /* beach-01    368×277 */
  .p-dining { left:74.51%; top:80.52%; width:25.49%; height:19.48%; z-index:5; }  /* room-03     367×277 */

  /* --- テキストカード（静かな中心・写真の上）--- */
  .concept__card{
    position:absolute; left:31.53%; top:24.33%; width:45%; min-height:51.69%;  /* 648×735（モック実測）*/
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;  /* 上下中央・左寄せ */
    background:var(--paper);
    padding:clamp(28px,3vw,48px) clamp(24px,2.6vw,44px);
    box-shadow:0 24px 60px rgba(74,55,40,.08);
    z-index:100;   /* 全写真より前面（room-01=9 より上）*/
  }
  .concept__card p{ margin:0; }
  .concept__group{ margin-top:1.6em; }
  .concept__line{
    display:block;
    text-align:left;
    font-size:clamp(18px, 1.95vw, 28px);   /* 設計幅1440で28px。狭い幅では縮小して行の折り返しを防止 */
    line-height:1.95;
    letter-spacing:.06em;
    color:var(--ink);
  }
  .concept__line--lead{
    letter-spacing:.08em;                  /* サイズは本文と統一（28px）*/
  }
  .concept__line .brand{
    font-family:var(--serif-en);
    font-size:1.12em; letter-spacing:.02em;
  }

  /* --- 初期状態（JS有効時のみ隠す）--- */
  .js .concept__photo, .js .concept__line{ opacity:0; }

  /* reduced-motion：動きを止めて即表示 */
  @media (prefers-reduced-motion: reduce){
    .js .concept__photo, .js .concept__line{ opacity:1 !important; transform:none !important; }
  }

  /* --- responsive：collageの "らしさ" を残して枚数を絞る --- */
  @media (max-width:860px){
    .concept{ padding:64px 20px; }
    .concept__stage{
      height:auto; aspect-ratio:auto; position:relative;
      display:flex; flex-direction:column; align-items:stretch; gap:0;
    }
    /* テキストは全幅の独立ブロックで先に読ませる（最優先）*/
    .concept__card{
      position:static; order:-1; width:100%; margin:0 0 6px;
      box-shadow:0 12px 30px rgba(74,55,40,.08);
    }
    /* 間引き：sea-01 / street-01 / beach-01 / room-03 を非表示（主役 street-02 は残す）*/
    .p-sea, .p-street, .p-beach, .p-dining{ display:none; }
    /* 残す4枚＝street-02(主役) / business-01 / room-01 / room-02(sofa) を互い違いに */
    .concept__photo{ position:static; width:auto; height:auto; }
    .p-tree  { width:66%; aspect-ratio:380/534; align-self:flex-start; }               /* street-02：縦長の主役 */
    .p-biz   { width:56%; aspect-ratio:417/289; align-self:flex-end;   margin-top:-30px; margin-right:4%; }
    .p-room  { width:60%; aspect-ratio:259/180; align-self:flex-start; margin-top:-26px; margin-left:8%; }
    .p-sofa  { width:78%; aspect-ratio:567/392; align-self:flex-end;   margin-top:-14px; }
  }

  /* ============================================================
     やちむん帯（Yachimun band）
     フルブリード写真＋左→右の白グラデ（可読性）＋黒明朝の2ビート出し。
     背景はJSで yPercent -6→6 のパララックス（サイト内で唯一許可のscrub）。
     ※テキストは既定で表示。文字の初期非表示はGSAPが実行時に行う。
     ============================================================ */
  .ymt{
    position:relative;
    overflow:hidden;                          /* 背景の動きを内側で切る */
    min-height:clamp(600px, 88svh, 960px);
    display:flex;
    align-items:center;
  }
  /* 背景写真：帯より縦に大きく（±10%）。JSのパララックス(±約7%)でも端が出ない */
  .ymt__bg{
    position:absolute; left:0; right:0; top:-10%;
    height:120%;
    background:url("../images/ytm.webp") center / cover no-repeat;
    will-change:transform;
    z-index:0;
  }
  /* 可読性用の白グラデ（左→右／静止レイヤー：写真が動いても左は明るいまま）*/
  .ymt::before{
    content:"";
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(to right,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.70) 24%,
      rgba(255,255,255,.30) 46%,
      rgba(255,255,255,0)   64%);
    pointer-events:none;
  }
  .ymt__copy{
    position:relative; z-index:2;
    margin-left:clamp(24px, 8vw, 140px);
    max-width:min(90%, 760px);
  }
  .ymt__line{
    margin:0;
    overflow:hidden;                          /* .ch のせり上がりをマスク */
    font-family:var(--mincho);
    color:var(--ink);
    font-weight:500;
    line-height:1.6;
    letter-spacing:.06em;
    font-size:clamp(28px, 4.4vw, 56px);
  }
  .ymt__line .ch{
    display:inline-block;                     /* yPercent 変形を効かせる */
    white-space:pre;                          /* 全角スペース等を保持 */
  }

  @media (max-width:860px){
    .ymt{ min-height:clamp(440px, 72svh, 680px); }
    .ymt__bg{ background-position: 85% center; }   /* スマホは女性が入る右寄り（85%）。%で入り具合を微調整可 */
    .ymt__copy{ margin-left:clamp(20px, 6vw, 40px); }
    .ymt__line{ font-size:clamp(24px, 7vw, 34px); }
    /* スマホは右の人物に文字が寄るので、白グラデを広めに効かせる */
    .ymt::before{
      background:linear-gradient(to right,
        rgba(255,255,255,.95) 0%,
        rgba(255,255,255,.82) 40%,
        rgba(255,255,255,.30) 74%,
        rgba(255,255,255,0)  100%);
    }
  }

  /* --- エリア見出し（那覇市 / 名護市） --- */
  .area-head{
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 32px;
  }
  .area-head:not(:first-of-type){ margin-top: 128px; }  /* エリア間（那覇↔名護）の区切りを明確に */
  .area-head .area-en{
    font-size: 20px;
    letter-spacing: 0.2em;
    color: var(--dark-brown);
    font-weight: 500;
  }
  .area-head .area-jp{
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--caption);
  }
  .area-head .area-line{
    flex: 1;
    height: 1px;
    background: var(--rule);
  }
 
  /* --- グリッド --- */
  .grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64px var(--card-gap);   /* 行間64px / 列間24px：縦の余白を確保 */
  }
 
  /* --- カード --- */
  .card{
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .card__media{
    position: relative;
    width: 100%;
    aspect-ratio: 708 / 440;   /* 写真主役の比率 */
    overflow: hidden;          /* ホバーズームを枠内に */
    background: #b3aeaa;
  }
  .card__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .card:hover .card__media img{
    transform: scale(1.05);
  }
  /* 画像プレースホルダ（ダミー） */
  .card__media .ph{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    color: rgba(255,255,255,.65);
    font-size: 12px; letter-spacing:.2em;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .card:hover .card__media .ph{ transform: scale(1.05); }
 
  .card__body{
    padding: 24px 4px 0;
  }
  .card__pre{
    font-size: 14px;
    letter-spacing: 0.04em;
    color: var(--caption);
    margin-bottom: 4px;
  }
  .card__place{
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--dark-brown);
    line-height: 1.25;
    margin-bottom: 14px;
  }
  /* あとで足す一言のための余白（今は空） */
  .card__lead{
    font-size: 14px;
    color: var(--dark-brown);
    line-height: 1.9;
    min-height: 0;         /* 一言を入れるときに調整 */
    margin-bottom: 20px;
  }
 
  /* --- ボタン：ゴールドが左から伸びる --- */
  .btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    width: 216px;
    height: 49px;
    padding: 0 20px;
    border: 1px solid var(--pin-gold);
    color: var(--dark-brown);
    font-family: "Zen Old Mincho", serif;
    font-size: 15px;
    letter-spacing: 0.18em;
    text-decoration: none;
    overflow: hidden;
    transition: color .4s ease;
    justify-content: space-between;
  }
  .btn::before{
    content:"";
    position:absolute; inset:0;
    background: var(--pin-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    z-index: 0;
  }
  .btn span, .btn .arw{ position: relative; z-index: 1; }
  .btn:hover{ color: var(--off-white); }
  .card:hover .btn::before,
  .btn:hover::before{ transform: scaleX(1); }
  .btn .arw{
    font-size: 18px;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
  }
  .card:hover .btn .arw,
  .btn:hover .arw{ transform: translateX(4px); }
 
  /* --- レスポンシブ --- */
  @media (max-width: 768px){
    .section{ padding: 72px 20px; }
    .grid{ grid-template-columns: 1fr; gap: 40px; }
    .card__place{ font-size: 26px; }
    .btn{ width: 100%; }              /* SPは押しやすくfull width */
    .area-head:not(:first-of-type){ margin-top: 56px; }
  }
 
  @media (prefers-reduced-motion: reduce){
    .card__media img, .card__media .ph,
    .btn::before, .btn .arw{ transition: none; }
  }


  .nnh-locate{
    font-family:var(--mincho); background:var(--paper); color:var(--ink);
    padding:96px clamp(20px,5vw,80px);
  }
  .nnh-locate .section-head{ max-width:1240px; margin:0 auto 56px; }
  .nnh-inner{
    width:100%; max-width:1240px; margin:0 auto;
    display:grid; grid-template-columns:1.3fr 1fr;
    gap:clamp(24px,3.5vw,64px); align-items:center;
  }

  .nnh-eyebrow{ grid-column:1/-1; display:flex; align-items:baseline; gap:14px; margin-bottom:2px; }
  .nnh-eyebrow .en{ font-size:12px; letter-spacing:.34em; font-weight:500; }
  .nnh-eyebrow .ja{ font-size:12px; letter-spacing:.12em; color:#8a8172; }
  .nnh-eyebrow .rule{ flex:1; height:1px; background:var(--hair); }

  /* ---- map ---- */
  .nnh-map{ width:100%; }
  .nnh-map svg{ width:100%; height:auto; display:block; overflow:visible; }
  .nnh-map .nnh-svg--sp{ display:none; }   /* 既定(PC)ではSP版を隠す */

  /* pins (実SVGのゴールド円に後付け) */
  .nnh-pin{ cursor:pointer; }
  .nnh-pin:focus{ outline:none; }

  /* 連動fxレイヤー */
  .nnh-fx-halo{
    fill:var(--gold); opacity:0; pointer-events:none;
    transition:opacity .45s ease;
  }
  .nnh-fx-ring{
    fill:none; stroke:var(--gold); stroke-width:1.6; opacity:0; pointer-events:none;
    transform-box:fill-box; transform-origin:center; transform:scale(.72);
    transition:opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .nnh-fx-halo.is-active{ opacity:.16; }
  .nnh-fx-ring.is-active{ opacity:.95; transform:scale(1); }

  /* ---- list ---- */
  .nnh-list{ align-self:center; }
  .nnh-group + .nnh-group{ margin-top:32px; }
  .nnh-group-head{
    display:flex; align-items:baseline; gap:12px;
    padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--hair);
  }
  .nnh-group-head .en{ font-size:12px; letter-spacing:.3em; font-weight:500; }
  .nnh-group-head .ja{ font-size:12px; letter-spacing:.1em; color:#8a8172; }

  .nnh-row{
    display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:16px;
    padding:15px 4px; text-decoration:none; color:var(--ink);
    border-bottom:1px solid transparent; transition:border-color .3s ease; outline:none;
  }
  .nnh-row:hover, .nnh-row:focus-visible{ border-bottom-color:var(--hair); }
  .nnh-row .idx{ font-size:12px; color:#b0a898; font-variant-numeric:tabular-nums; transition:color .3s ease; }
  .nnh-row .name{ line-height:1.15; }
  .nnh-row .name .pre{ display:block; font-size:11px; letter-spacing:.12em; color:#9a9184; margin-bottom:3px; }
  .nnh-row .name .place{ font-size:clamp(21px,2.2vw,27px); font-weight:400; letter-spacing:.05em; transition:color .35s ease; }
  .nnh-row .name .place .en-sm{ font-size:.62em; letter-spacing:.08em; }
  .nnh-row .arrow{ font-size:15px; color:#c3bcae; transform:translateX(0); transition:color .35s ease, transform .4s cubic-bezier(.2,.7,.2,1); }

  .nnh-row.is-active .place{ color:var(--gold); }
  .nnh-row.is-active .idx{ color:var(--gold); }
  .nnh-row.is-active .arrow{ color:var(--gold); transform:translateX(5px); }

  @media (prefers-reduced-motion:no-preference){
    .nnh-map,.nnh-list{ animation:nnhFade .8s ease both; }
    .nnh-list{ animation-delay:.08s; }
    @keyframes nnhFade{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
  }
  @media (max-width:860px){
    .nnh-inner{ grid-template-columns:1fr; }
    .nnh-locate{ min-height:auto; padding:56px 20px; }
    /* スマホは番号が大きいSP版インラインSVGを表示（PC版は隠す）*/
    .nnh-map{ max-width:420px; margin:0 auto; }
    .nnh-map .nnh-svg--pc{ display:none; }
    .nnh-map .nnh-svg--sp{ display:block; }
  }

  /* ---------- News archive / single ---------- */
.news-archive,
.news-single {
  padding: 160px clamp(20px, 6vw, 96px) 120px;
  background: var(--paper);
  color: var(--ink);
}
.news-archive__inner,
.news-single__inner {
  width: min(100%, 1240px);
  margin: 0 auto;
}
.news-archive__head {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: flex-end;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--hair);
}
.news-archive__title .en,
.news-single__eyebrow {
  display: block;
  font-family: var(--serif-en);
  font-size: clamp(48px, 7vw, 92px);
  line-height: .95;
  font-weight: 400;
}
.news-archive__title .ja {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--caption);
}
.news-filter select {
  min-width: 210px;
  padding: 12px 38px 12px 0;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  letter-spacing: .12em;
}
.news-archive__list { list-style: none; margin: 0; padding: 0; }
.news-archive__item { border-bottom: 1px solid var(--hair); }
.news-archive__link {
  display: grid;
  grid-template-columns: 130px 160px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 30px 0;
  color: inherit;
  text-decoration: none;
}
.news-archive__date,
.news-archive__facility { font-size: 12px; letter-spacing: .08em; color: var(--caption); }
.news-archive__article-title { font-size: clamp(16px, 1.5vw, 20px); font-weight: 400; }
.news-archive__arrow { transition: transform .3s ease; }
.news-archive__link:hover .news-archive__arrow { transform: translateX(5px); }
.news-pagination { margin-top: 56px; }
.news-pagination .nav-links { display: flex; gap: 20px; align-items: center; }
.news-pagination a, .news-pagination span { color: inherit; text-decoration: none; font-size: 13px; }

.news-single__head { padding-bottom: 56px; border-bottom: 1px solid var(--hair); }
.news-single__meta { display: flex; gap: 20px; margin: 32px 0 18px; font-size: 12px; letter-spacing: .08em; color: var(--caption); }
.news-single__title {
  max-width: 1050px;
  margin: 0;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: .02em;
}
.news-single__body {
  width: min(100%, 760px);
  margin: 72px auto 0;
  font-size: 15px;
  line-height: 2.15;
}
.news-single__body > * + * { margin-top: 1.7em; }
.news-single__body img { max-width: 100%; height: auto; }
.news-single__back {
  width: min(100%, 760px);
  margin: 72px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
}
.news-single__back a { color: inherit; text-decoration: none; font-size: 12px; letter-spacing: .14em; }

@media (max-width: 1024px) {
  .site-footer__inner { grid-template-columns: 190px minmax(0, 1fr); column-gap: 50px; }
  .site-footer__hotels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-archive__link { grid-template-columns: 110px 140px minmax(0, 1fr) auto; gap: 20px; }
}
@media (max-width: 767px) {
  .site-footer { padding: 56px 24px 28px; }
  .site-footer__inner { display: block; }
  .site-footer__brand { text-align: center;}
  .site-footer__brand-link{display: inline-block;}
  .site-footer__logo { width: 190px; }
  .site-footer__hotels { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__hotel-prefix { font-size: 12px; }
  .site-footer__hotel-name { font-size: 16px; }
  .site-footer__bottom { margin-top: 56px; }
  .site-footer__copyright { text-align: left; font-size: 11px; }
  .news-archive, .news-single { padding: 120px 20px 80px; }
  .news-archive__head { display: block; }
  .news-filter { margin-top: 36px; }
  .news-filter select { width: 100%; }
  .news-archive__link { grid-template-columns: 1fr auto; gap: 8px 18px; padding: 24px 0; }
  .news-archive__date, .news-archive__facility { grid-column: auto; }
  .news-archive__article-title { grid-column: 1 / 2; margin-top: 6px; }
  .news-archive__arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .news-single__head { padding-bottom: 40px; }
  .news-single__meta { flex-wrap: wrap; }
  .news-single__body { margin-top: 48px; }
}


  /* ========================================
   Footer
======================================== */

.site-footer {
    background: #000;
    color: #fff;
    padding: 70px 6vw 32px;
}

.site-footer__inner {
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 240px 1fr;
    column-gap: 80px;
    row-gap: 60px;
}

/* Logo
---------------------------------------- */

.site-footer__logo {
    display: block;
    width: 220px;
}

.site-footer__logo img {
    display: block;
    width: 100%;
    height: auto;
}


/* Hotels
---------------------------------------- */

.site-footer__hotels {
    margin: 0;
    padding: 0;

    list-style: none;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 70px;
}

.site-footer__hotel {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__hotel::marker {
    content: "";
}

.site-footer__hotel a {
    display: inline-block;

    color: #fff;
    text-decoration: none;

    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;

    transition: opacity .3s ease;
}

.site-footer__hotel a:hover {
    opacity: .55;
}

.site-footer__hotel-label {
    display: block;
    margin-bottom: 4px;

    font-size: 13px;
    line-height: 1.5;
    letter-spacing: .01em;
}

.site-footer__hotel-name {
    display: block;

    font-size: 17px;
    line-height: 1.45;
    letter-spacing: .01em;
}


/* Bottom
---------------------------------------- */

.site-footer__bottom {
    grid-column: 1 / -1;

    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.site-footer__copyright {
    margin: 0;

    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: .01em;

    color: rgba(255,255,255,.9);
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .08em;
  text-decoration: none;
  color: inherit;
  transition: opacity .3s ease;
}

.back-to-top:hover {
  opacity: .5;
}


/* ========================================
   Tablet
======================================== */

@media (max-width: 1024px) {

    .site-footer {
        padding: 64px 5vw 30px;
    }

    .site-footer__inner {
        grid-template-columns: 190px 1fr;
        column-gap: 50px;
    }

    .site-footer__logo {
        width: 180px;
    }

    .site-footer__hotels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 40px;
    }
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

    .site-footer {
        padding: 56px 24px 28px;
    }

    .site-footer__inner {
        display: block;
    }

    .site-footer__logo {
        width: 190px;
        margin-bottom: 48px;
    }

    .site-footer__hotels {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .site-footer__hotel-label {
        font-size: 12px;
    }

    .site-footer__hotel-name {
        font-size: 16px;
    }

    .site-footer__bottom {
        margin-top: 56px;
    }

    .site-footer__copyright {
        font-size: 11px;
    }
}