/* ===== Block 01 (v2): true fullscreen hero + bright video + fullscreen white menu ===== */
html {
  scrollbar-gutter: stable;
}
.km-toplogo {
  position: fixed;
  z-index: 100;
  left: max(102px, env(safe-area-inset-left));
  top: max(22px, env(safe-area-inset-top));
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.km-toplogo img {
  height: 30px;
  width: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.22));
}

@media (max-width: 768px) {
  .km-toplogo {
    left: max(22px, env(safe-area-inset-left));
    top: max(22px, env(safe-area-inset-top));
  }
}
/* 枠/余白を完全に消す */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
body {
  overflow-x: hidden;
}

/* スクロール固定 */
.km-no-scroll {
  overflow: hidden;
}

/* ========== HERO (true fullscreen) ========== */
.km-hero {
  position: relative;
  width: 100vw;
  height: 100vh; /* PC */
  height: 100svh; /* iOS対策 */
  overflow: hidden;
  background: #000; /* 動画読み込み前の背景 */
}

.km-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 重要：暗くしない（フィルタ無し） */
  filter: none;
  transform: translateZ(0);
}

/* ロゴ中央 */
.km-hero__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  pointer-events: none;
}
.km-hero__logo {
  width: min(160px, 32vw);
  height: auto;
  /* ロゴは見やすさのための影だけ（画面は暗くしない） */
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}

/* ===== Burger (3 lines -> X) ===== */
.km-burger {
  position: fixed;
  z-index: 999;
  right: max(102px, env(safe-area-inset-right));
  top: max(22px, env(safe-area-inset-top));
  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  .km-burger {
    position: fixed;
    z-index: 999;
    right: max(22px, env(safe-area-inset-right));
    top: max(22px, env(safe-area-inset-top));
    width: 52px;
    height: 52px;
  }
}

.km-burger__line {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.35s ease, opacity 0.25s ease, top 0.35s ease,
    background 0.35s ease;
}
.km-burger__line:nth-child(1) {
  top: 17px;
}
.km-burger__line:nth-child(2) {
  top: 25px;
}
.km-burger__line:nth-child(3) {
  top: 33px;
}

/* open時：その場で×に */
.km-burger.is-open .km-burger__line {
  background: rgba(11, 15, 20, 0.7);
  box-shadow: none;
}
.km-burger.is-open .km-burger__line:nth-child(1) {
  top: 25px;
  transform: rotate(45deg);
}
.km-burger.is-open .km-burger__line:nth-child(2) {
  opacity: 0;
}
.km-burger.is-open .km-burger__line:nth-child(3) {
  top: 25px;
  transform: rotate(-45deg);
}

/* ===== Menu (fullscreen, white translucent, slides from right slowly) ===== */
.km-menu {
  position: fixed;
  inset: 0;
  z-index: 998;
}

.km-menu__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
  color: #0b0f14;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: auto;

  transform: translateX(100%);
  opacity: 0.001;
  pointer-events: none;

  transition: transform 0.95s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease;
  will-change: transform;
}

@media (max-width: 768px) {
  .km-menu__surface {
    background: rgba(255, 255, 255, 0.9);
  }
}
.km-menu.is-open .km-menu__surface {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

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

/* layout */
.km-menu__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px 28px;
  font-family: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

.km-menu__head {
  display: flex;
  justify-content: center;
  padding: 22px 0 18px;
}

.km-menu__brand {
  width: min(360px, 64vw);
  height: auto;
  opacity: 0.92;
}

/* “枠なし・細字・見やすい” */
.km-menu__content {
  margin-top: 10px;
  display: grid;
  gap: 18px 22px;
  grid-template-columns: 1fr;
}

@media (min-width: 920px) {
  .km-menu__content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1180px) {
  .km-menu__content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.km-menuSection {
  padding: 0;
}

.km-menuSection__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(11, 15, 20, 0.7);
}

.km-menuList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.km-menuLink {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 0;
  text-decoration: none;
  color: rgba(11, 15, 20, 0.76);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;

  border-bottom: 1px solid rgba(11, 15, 20, 0.1);
}

.km-menuLink:hover {
  color: rgba(11, 15, 20, 1);
}

.km-menuLink__sub {
  font-size: 12px;
  opacity: 0.4;
}

/* nav.php素材は非表示 */
.km-menu__source {
  display: none;
}

/* ===== “ふわっと遅れて出る” ===== */
.km-menu__head,
.km-menuSection,
.km-menuLink {
  opacity: 0;
  transform: translateY(10px);
}

.km-menu.is-open .km-menu__head {
  animation: kmFadeUp 0.8s ease 0.18s both;
}

.km-menu.is-open .km-menuSection {
  animation: kmFadeUp 0.7s ease both;
  animation-delay: calc(var(--i, 0) * 90ms + 260ms);
}

.km-menu.is-open .km-menuLink {
  animation: kmFadeUp 0.62s ease both;
  animation-delay: calc(var(--i, 0) * 90ms + var(--j, 0) * 26ms + 340ms);
}

@keyframes kmFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Burger color control ===== */
:root {
  --km-burger-color: rgba(255, 255, 255, 0.92); /* デフォ：ヒーロー上＝白 */
}

/* ボタン本体（線は currentColor で描く想定） */
.km-burger {
  color: var(--km-burger-color);
}

/* 影（白背景で見えない時の補助） */
.km-burger__line {
  background: currentColor;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); /* ほんのり */
}

/* メニューが開いている間は“黒”に寄せたいなら */
.km-menu.is-open ~ .km-burger,
.km-burger.is-open {
  color: rgba(12, 18, 26, 0.86);
  /* 開いてる時は影いらないなら消してOK */
}

/* ===== Burger micro interaction (hover) ===== */
.km-burger {
  -webkit-tap-highlight-color: transparent;
}

.km-burger__line {
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1),
    width 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.28s ease;
  will-change: transform, width;
}

/* hover時：ちょい動く（上・下が少し右へ、真ん中は少し短く） */
@media (hover: hover) and (pointer: fine) {
  .km-burger:hover .km-burger__line:nth-child(1) {
    transform: translateX(2px);
  }
  .km-burger:hover .km-burger__line:nth-child(2) {
    width: 70%; /* 真ん中だけ短く */
    transform: translateX(-1px);
    opacity: 0.92;
  }
  .km-burger:hover .km-burger__line:nth-child(3) {
    transform: translateX(3px);
  }
}

/* キーボード操作でも気持ちよく */
@media (hover: hover) and (pointer: fine) {
  .km-burger:focus-visible .km-burger__line:nth-child(1) {
    transform: translateX(2px);
  }
  .km-burger:focus-visible .km-burger__line:nth-child(2) {
    width: 70%;
    transform: translateX(-1px);
    opacity: 0.92;
  }
  .km-burger:focus-visible .km-burger__line:nth-child(3) {
    transform: translateX(3px);
  }
}
/* ===== Menu Social Links ===== */
.km-menuSocial {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 15, 20, 0.1);
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.km-menuSocial__a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(11, 15, 20, 0.86);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 400;
  opacity: 0.9;
}

.km-menuSocial__a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.km-menuSocial__ico {
  display: grid;
  place-items: center;
}

/* “ふわっと遅れて出る”をSNSにも適用 */
.km-menuSocial {
  opacity: 0;
  transform: translateY(10px);
}
.km-menu.is-open .km-menuSocial {
  animation: kmFadeUp 0.7s ease 0.55s both;
}

/* =========================================================
   Block 03: NEWS（直書き） + Headline Click + Modal
   ========================================================= */

/* ===== NEWS Base ===== */
.km-news {
  padding: clamp(56px, 7vw, 92px) 18px;
  background: #fff;
  color: #0b0f14;
}

.km-news__head {
  max-width: 1100px;
  margin: 0 auto clamp(26px, 3vw, 34px);
  text-align: center;
}

.km-news__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.28em;
  opacity: 0.7;
}

.km-news__title {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.07em;
  font-size: clamp(18px, 2vw, 24px);
}

.km-news__wrap {
  max-width: 800px;
  margin: 0 auto;
  --km-news-gutter: 24px; /* ←ここを増やすほど、全体が中に寄る＆線も短くなる */
}

/* NEWS全体を右に（日時＋本文まとめて） */
/* PCだけ：線はセンターのまま、内容だけ中に寄せる */
@media (min-width: 768px) {
  .km-news__row {
    padding-left: 144px; /* ← ここで全体を中へ（好みで調整） */
    padding-right: 144px; /* ← 左右同じにすると“完全にセンター” */
  }
}

.km-news__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(12, 18, 26, 0.12);
}

.km-news__item {
  border-bottom: 1px solid rgba(12, 18, 26, 0.12);
}

.km-news__row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  padding: 14px 6px;
  align-items: start;
}
@media (min-width: 821px) {
  .km-news__row {
    padding: 14px 86px;
  }
}
@media (max-width: 820px) {
  .km-news__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.km-news__meta {
  display: flex;
  align-items: center;
  min-height: 26px;
}

.km-news__date {
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  white-space: nowrap;
}

.km-news__headline {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: rgba(12, 18, 26, 0.86);
}

.km-news__text {
  color: rgba(12, 18, 26, 0.86);
  font-size: 13px;
  line-height: 1.7;
}
.km-news__text p {
  margin: 0 0 1px;
}
.km-news__text p:last-child {
  margin-bottom: 0;
}

/* link（本文内で使う用） */
.km-news__link {
  margin-top: 12px;
}
.km-news__a {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: inherit;
  opacity: 0.82;
}
.km-news__a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ===== Clickable Headline（button版） =====
   ※HTMLが <button class="km-news__open" type="button"> の前提
*/
.km-news__open {
  all: unset; /* Bootstrap等のbutton装飾を完全リセット */
  display: block;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.km-news__open .km-news__headline {
  margin: 0; /* 見出しだけ表示するので下余白なし */
  padding-right: 22px;
  position: relative;
}

.km-news__open .km-news__headline::after {
  content: '→';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.45;
  transition: opacity 0.25s ease, transform 0.35s ease;
}
@media (min-width: 768px) {
  .km-news__open .km-news__headline::after {
    right: 150px;
  }
}
.km-news__open:hover .km-news__headline::after {
  opacity: 0.9;
  transform: translateY(-50%) translateX(2px);
}

/* ===== NEWS Modal ===== */
.km-newsModal {
  position: fixed;
  inset: 0;
  z-index: 1003; /* menu(998)より上 */
  display: grid;
  place-items: center;
  pointer-events: none; /* 閉じてる間はクリックを拾わない */
}

/* hidden属性は必ず最優先（透明レイヤー事故防止） */
.km-newsModal[hidden] {
  display: none !important;
}

.km-newsModal.is-open {
  pointer-events: auto;
}

.km-newsModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.km-newsModal__panel {
  width: min(980px, 92vw);
  max-height: min(78vh, 720px);
  overflow: auto;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 18px 18px 20px;
  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.km-newsModal.is-open .km-newsModal__surface {
  opacity: 1;
}
.km-newsModal.is-open .km-newsModal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.km-newsModal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}

.km-newsModal__ttl {
  display: block;
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}

.km-newsModal__date {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.km-newsModal__close {
  all: unset;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  opacity: 0.65;
}
.km-newsModal__close:hover {
  opacity: 1;
}

.km-newsModal__headline {
  margin: 14px 0 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.55;
}

.km-newsModal__body {
  color: rgba(12, 18, 26, 0.86);
  font-size: 13px;
  line-height: 1.95;
}
.km-newsModal__body p {
  margin: 0 0 10px;
}
.km-newsModal__body p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .km-newsModal__surface,
  .km-newsModal__panel {
    transition: none !important;
  }
}

/* =========================================================
   Block 04: TOPICS（copy & paste items）
   ========================================================= */
.km-topics {
  padding: clamp(56px, 7vw, 92px) 18px;
  background: #fff;
  color: #0b0f14;
}

.km-topics__head {
  max-width: 1100px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  text-align: center;
}

.km-topics__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.28em;
  opacity: 0.7;
}

.km-topics__title {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.07em;
  font-size: clamp(18px, 2vw, 24px);
}

.km-topics__wrap {
  max-width: 1100px;
  margin: 0 auto;
  --km-topics-gap: clamp(16px, 2vw, 24px);
}

.km-topics__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--km-topics-gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 1件だけのときは中央に“特集感”で出す */
.km-topics__item:only-child {
  display: flex;
  justify-content: center;
}
.km-topics__item:only-child .km-topicCard {
  width: min(760px, 100%);
}

/* ===== card ===== */
.km-topicCard {
  border-top: 1px solid rgba(12, 18, 26, 0.12);
  border-bottom: 1px solid rgba(12, 18, 26, 0.12);
  padding: clamp(16px, 2.2vw, 22px) clamp(14px, 2vw, 18px);
}

.km-topicCard__media {
  margin: 0 auto;
  width: min(320px, 100%);
  border-radius: 14px;
  overflow: hidden;
  /*box-shadow: 0 18px 50px rgba(0,0,0,.10);*/
}

.km-topicCard__media img {
  display: block;
  width: 100%;
  height: auto;
}

.km-topicCard__body {
  width: min(860px, 100%);
  margin: clamp(16px, 2.4vw, 22px) auto 0;
  text-align: center;
}

.km-topicCard__date {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  white-space: nowrap;
  margin-bottom: 10px;
}

.km-topicCard__headline {
  margin: 0;
  font-size: clamp(16px, 2.1vw, 20px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.55;
}

.km-topicCard__sub {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: 0.28em;
  opacity: 0.55;
}

.km-topicCard__rule {
  width: min(820px, 100%);
  margin: clamp(14px, 2vw, 18px) auto;
  border-top: 1px dotted rgba(12, 18, 26, 0.22);
}

.km-topicCard__text {
  text-align: left;
  color: rgba(12, 18, 26, 0.86);
  font-size: 13px;
  line-height: 1.8;
}

.km-topicCard__text p {
  margin: 0 0 0px;
}
.km-topicCard__text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .km-topicCard__text {
    line-height: 1.7;
  }
  .km-topicCard__rule {
    margin: 14px auto;
  }
}

/* =========================================================
   Block 05: LIVE CAM
   ========================================================= */
.km-livecam {
  padding: clamp(56px, 7vw, 92px) 18px;
  background: #fff;
  color: #0b0f14;
}

.km-livecam__head {
  max-width: 1100px;
  margin: 0 auto clamp(22px, 3vw, 34px);
  text-align: center;
}

.km-livecam__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.28em;
  opacity: 0.7;
}

.km-livecam__title {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.07em;
  font-size: clamp(18px, 2vw, 24px);
}

.km-livecam__powered {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.65;
}

.km-livecam__wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.km-livecam__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 22px);
}

@media (max-width: 860px) {
  .km-livecam__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Card ===== */
.km-livecamCard {
  border: 1px solid rgba(12, 18, 26, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.km-livecamCard__head {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.08);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.km-livecamCard__badge {
  font-size: 11px;
  letter-spacing: 0.22em;
  opacity: 0.7;
  white-space: nowrap;
}

.km-livecamCard__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-align: right;
}

/* ===== LiveCam frame：幅に比例（16:9） + 情報バー分(px) で常に余裕を確保 ===== */
.km-livecamCard__frame {
  position: relative;
  --km-skiday-ui: 184px; /* ←SKI DAY上部バー分（必要なら増やす） */

  height: 0; /* paddingで高さを作る */
  padding-top: calc(56.25% + var(--km-skiday-ui)); /* 56.25% = 16:9 */

  background: rgba(12, 18, 26, 0.04);
  overflow: hidden; /* はみ出しでスクロール出さない */
}

/* 画面が狭い時は上部バーが2段になりやすいので少し増やす */
@media (max-width: 520px) {
  .km-livecamCard__frame {
    --km-skiday-ui: 160px;
  }
}

/* 埋め込みターゲットを枠いっぱいに固定 */
.km-skiday,
#skiday_camera_01,
#skiday_camera_02 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden !important;
}

/* 生成される中身(iframe/div)も強制フィット */
#skiday_camera_01 > *,
#skiday_camera_02 > *,
#skiday_camera_01 iframe,
#skiday_camera_02 iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

/* グリッド内で横はみ出し防止（これ大事） */
.km-livecamCard {
  min-width: 0;
}

/* ===== Standby panel ===== */
.km-standby {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.km-standby__inner {
  text-align: center;
  padding: 14px 16px;
}

.km-standby__label {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(12, 18, 26, 0.12);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.km-standby__sub {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.28em;
  opacity: 0.55;
}

/* ===== Footer ===== */
.km-livecamCard__foot {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(12, 18, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.km-livecamCard__link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  opacity: 0.82;
}

.km-livecamCard__link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.km-livecamCard__link--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: none !important;
}

.km-livecamCard__note {
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

/* =========================================================
   Block 06: CONTACT CTA
   ========================================================= */
.km-contact {
  padding: clamp(44px, 6vw, 72px) 18px;
  background: #fff;
  color: #0b0f14;
  border-top: 1px solid rgba(12, 18, 26, 0.12);
}

.km-contact__wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.km-contact__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 24px;
  align-items: center;
}

@media (max-width: 860px) {
  .km-contact__inner {
    grid-template-columns: 1fr;
  }
}

.km-contact__kicker {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.28em;
  opacity: 0.7;
}

.km-contact__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: clamp(18px, 2.2vw, 22px);
}

.km-contact__lead {
  margin: 10px 0 0;
  color: rgba(12, 18, 26, 0.78);
  font-size: 13px;
  line-height: 1.85;
}

.km-onlyPc {
  display: none;
}
@media (min-width: 861px) {
  .km-onlyPc {
    display: inline;
  }
}

/* Button (minimal) */
.km-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 11px;
  background: rgba(163, 163, 163, 0.92);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.km-btn:hover {
  transform: translateY(-1px);
  opacity: 0.95;
}

/* =========================================================
   Footer
   ========================================================= */
.km-footer {
  background: #f6f7f8;
  color: #0b0f14;
  border-top: 1px solid rgba(12, 18, 26, 0.12);
}

.km-footer__wrap {
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(26px, 3.6vw, 40px) 18px;
}

.km-footer__top {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px 28px;
  align-items: start;
}

@media (max-width: 980px) {
  .km-footer__top {
    grid-template-columns: 1fr;
  }
}

.km-footer__brand img {
  width: min(180px, 52vw);
  height: auto;
  display: block;
  opacity: 0.95;
}

.km-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 22px;
}

@media (max-width: 980px) {
  .km-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .km-footer__grid {
    grid-template-columns: 1fr;
  }
}

.km-footer__ttl {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.75;
  font-weight: 600;
}

.km-footer__p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(12, 18, 26, 0.82);
}

.km-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.km-footer__a {
  color: rgba(12, 18, 26, 0.86);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.8;
  opacity: 0.9;
}
.km-footer__a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.km-footer__muted {
  font-size: 13px;
  color: rgba(12, 18, 26, 0.52);
}

.km-footer__bottom {
  margin-top: clamp(18px, 2.6vw, 26px);
  padding-top: 16px;
  border-top: 1px solid rgba(12, 18, 26, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.km-footer__copy {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.km-footer__social {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.km-footer__s {
  color: rgba(12, 18, 26, 0.78);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.km-footer__s:hover {
  color: rgba(12, 18, 26, 0.95);
  text-decoration: underline;
  text-underline-offset: 4px;
}

:root {
  --km-fab-safe: 140px; /* 天気FAB分 + 余裕（足りなければ 160〜200へ） */
}

/* フッターの後に“余白エリア”を作って、被ってても下へスクロールできるようにする */
.km-bottomSpacer {
  height: var(--km-fab-safe);
  background: #f6f7f8;
}
@media (max-width: 520px) {
  :root {
    --km-fab-safe: 170px;
  }
}

/* ロゴ＋運営会社を上下にまとめる左カラム */
.km-footer__brandCol {
  display: grid;
  gap: 14px;
}

/* 右側のカラム数を3にする（運営会社を左に移したため） */
.km-footer__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .km-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .km-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Footer layout tuning knobs ===== */
.km-footer {
  --km-footer-left: 160px; /* 左カラム幅（ロゴ+運営会社） */
  --km-footer-gapX: 44px; /* 左右の間隔 */
  --km-footer-colGap: 36px; /* 右側3カラムの間隔 */
  --km-footer-colMin: 210px; /* 右側各カラムの最小幅（詰まり防止） */
}

/* 上段：左カラム + 右3カラム */
.km-footer__top {
  display: grid;
  grid-template-columns: var(--km-footer-left) 1fr;
  column-gap: var(--km-footer-gapX);
  align-items: start;
}

/* 右側：3カラム */
.km-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--km-footer-colMin), 1fr));
  column-gap: var(--km-footer-colGap);
  row-gap: 18px;
}

/* 左カラム内（ロゴと運営会社） */
.km-footer__brandCol {
  display: grid;
  gap: 14px;
  justify-items: start; /* 左揃えのまま */
}

/* 全体が左に寄って見える時の“視覚バランス”用：右側を少し広くする */
@media (min-width: 981px) {
  .km-footer {
    --km-footer-left: 320px; /* 左を少し細く */
    --km-footer-colMin: 230px; /* 右の各カラムを少し広く */
  }
}

/* タブレット：2カラムへ */
@media (max-width: 980px) {
  .km-footer__top {
    grid-template-columns: 1fr;
    row-gap: 22px;
  }
  .km-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }
}

/* スマホ：1カラム */
@media (max-width: 560px) {
  .km-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Footer（整理版：変数で調整しやすい）
   ========================================================= */
.km-footer {
  background: #f6f7f8;
  color: #0b0f14;
  border-top: 1px solid rgba(12, 18, 26, 0.12);

  /* ---- Tuning knobs（ここだけ触れば調整できる） ---- */
  --km-footer-max: 1500px; /* 全体の最大幅 */
  --km-footer-padX: 18px; /* 左右パディング */
  --km-footer-padY: clamp(26px, 3.6vw, 40px);

  --km-footer-left: 320px; /* 左カラム幅（ロゴ＋運営会社）←住所改行しないなら広め */
  --km-footer-gapX: 56px; /* 左右カラム間の間隔 */

  --km-footer-colMin: 220px; /* 右側カラムの最小幅（詰まり防止） */
  --km-footer-colGapX: 40px; /* 右側カラム間隔（横） */
  --km-footer-colGapY: 18px; /* 右側カラム間隔（縦） */
}

.km-footer__wrap {
  max-width: var(--km-footer-max);
  margin: 0 auto;
  padding: var(--km-footer-padY) var(--km-footer-padX);
}

/* 上段：左（ロゴ+運営会社）＋右（所在地/グループ/その他） */
.km-footer__top {
  display: grid;
  grid-template-columns: var(--km-footer-left) 1fr;
  column-gap: var(--km-footer-gapX);
  row-gap: 22px;
  align-items: start;
}

/* 左カラム：ロゴと運営会社を上下 */
.km-footer__brandCol {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.km-footer__brand img {
  width: min(180px, 52vw);
  height: auto;
  display: block;
  opacity: 0.95;
}

/* 右側：3カラム（運営会社は左に移した想定） */
.km-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--km-footer-colMin), 1fr));
  column-gap: var(--km-footer-colGapX);
  row-gap: var(--km-footer-colGapY);
}

/* タイトル・本文 */
.km-footer__ttl {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.75;
  font-weight: 600;
}

.km-footer__p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(12, 18, 26, 0.82);
}

/* 住所を改行させたくない場合：運営会社住所にだけ .km-footer__addr を付ける */
@media (min-width: 981px) {
  .km-footer__addr {
    white-space: nowrap;
  }
}

.km-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.km-footer__a {
  color: rgba(12, 18, 26, 0.86);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.8;
  opacity: 0.9;
}
.km-footer__a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.km-footer__muted {
  font-size: 13px;
  color: rgba(12, 18, 26, 0.52);
}

/* 下段：コピーライト + SNS */
.km-footer__bottom {
  margin-top: clamp(18px, 2.6vw, 26px);
  padding-top: 16px;
  border-top: 1px solid rgba(12, 18, 26, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.km-footer__copy {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

.km-footer__social {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.km-footer__s {
  color: rgba(12, 18, 26, 0.78);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.km-footer__s:hover {
  color: rgba(12, 18, 26, 0.95);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 端末別のレイアウト */
@media (max-width: 980px) {
  .km-footer {
    --km-footer-left: 1fr;
  }
  .km-footer__top {
    grid-template-columns: 1fr;
  }
  .km-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
  }
  .km-footer__addr {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .km-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Bottom Spacer（天気FABの被り対策）
   ========================================================= */
:root {
  --km-fab-safe: 140px; /* 天気FAB分 + 余裕 */
}
.km-bottomSpacer {
  height: var(--km-fab-safe);
  background: #f6f7f8;
}
@media (max-width: 520px) {
  :root {
    --km-fab-safe: 170px;
  }
}

/* ===== Lift Operation Modal（整理版）===== */
.km-opModal {
  position: fixed;
  inset: 0;
  z-index: 1004; /* menu(998)より上 */
  display: grid;
  place-items: center;
  pointer-events: none;
}
.km-opModal.is-open {
  pointer-events: auto;
}
.km-opModal[hidden] {
  display: none !important;
}

/* 背景 */
.km-opModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-opModal.is-open .km-opModal__surface {
  opacity: 1;
}

/* パネル */
.km-opModal__panel {
  width: min(1100px, 96vw);
  height: min(86vh, 920px);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);

  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-opModal.is-open .km-opModal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ヘッダー */
.km-opModal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}
.km-opModal__tit {
  display: grid;
  gap: 4px;
}
.km-opModal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.km-opModal__jp {
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.km-opModal__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.km-opModal__close:hover {
  opacity: 1;
}

/* 本文：縦スクロールは出さない（中はiframeに任せる） */
.km-opModal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* iframeは常にパネル内を100%で埋める */
.km-opModal__frame,
.km-opModal__body iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* 注釈（下固定） */
.km-opModal__note {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 12px;
  color: rgba(12, 18, 26, 0.68);
  border-top: 1px solid rgba(12, 18, 26, 0.1);
}
.km-opModal__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .km-opModal__surface,
  .km-opModal__panel {
    transition: none !important;
  }
}

/* スマホ：パネルは縦半分〜少し上（svhでiPhoneのアドレスバー対策） */
@media (max-width: 768px) {
  .km-opModal__panel {
    width: 96vw;
    height: min(79svh, 920px);
  }
}

:root {
  --paper-w: 700px; /* ←スマホでの“拡大表示”横幅。1100〜1600で好み調整OK */
}

/* =========================
   Menu: Weather + Lift buttons（統一・ズレ防止・SP位置調整）
   ※このブロックだけ残す（旧ブロックは削除）
========================= */

/* 2つを完全に同一見た目へ（線は不要＝border無し） */
.km-menu__surface .km-menuWeatherBtn,
.km-menu__surface [data-km-op-open] {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;

  border: 0; /* ← 外のライン無し */
  background: rgba(255, 255, 255, 0.92);
  color: rgba(11, 15, 20, 0.9);
  border-radius: 14px;

  padding: 12px 18px;
  min-height: 52px;

  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  box-sizing: border-box;

  /* 影の濃さを完全統一 */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* ✅ 横移動は transform を使わない（ホバーで横ズレ事故を消す） */
  margin: 0 12px 10px; /* ←ボタン同士が近すぎるのを解消 */

  /* hover/active は縦だけ */
  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    opacity 0.18s ease;
}

/* hover（PCのみ）：縦にちょい浮く。横には動かない */
@media (hover: hover) and (pointer: fine) {
  .km-menu__surface .km-menuWeatherBtn:hover,
  .km-menu__surface [data-km-op-open]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
    background: #fff;
  }
}

/* active（PC/SP）：押し込み */
.km-menu__surface .km-menuWeatherBtn:active,
.km-menu__surface [data-km-op-open]:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* focus */
.km-menu__surface .km-menuWeatherBtn:focus-visible,
.km-menu__surface [data-km-op-open]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 15, 20, 0.18), 0 12px 30px rgba(0, 0, 0, 0.14);
}

/* ✅ スマホ：天気だけ「右にずらす」＝marginで（transformじゃない） */
@media (max-width: 768px) {
  .km-menu__surface .km-menuWeatherBtn {
    margin-left: 24px; /* ←まだ左に張り付くなら 24→32 に上げてOK */
  }
}

.km-op {
  padding: clamp(56px, 7vw, 92px) 18px;
  background: #fff;
  color: #0b0f14;
}
.km-op__head {
  max-width: 1100px;
  margin: 0 auto clamp(22px, 3vw, 30px);
  text-align: center;
}
.km-op__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.28em;
  opacity: 0.7;
}
.km-op__title {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.07em;
  font-size: clamp(18px, 2vw, 24px);
}
.km-op__wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.km-op__card {
  text-align: center;
  border-top: 1px solid rgba(12, 18, 26, 0.12);
  border-bottom: 1px solid rgba(12, 18, 26, 0.12);
  padding: 18px 6px;
}
.km-op__lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(12, 18, 26, 0.86);
}
.km-op__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.km-op__btn {
  border: 0;
  cursor: pointer;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(134, 134, 134, 0.92);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.km-op__btn:hover {
  opacity: 0.92;
}

.km-op {
  padding: clamp(56px, 7vw, 92px) 18px;
  background: #fff;
  color: #0b0f14;
}
.km-op__head {
  max-width: 1100px;
  margin: 0 auto clamp(22px, 3vw, 30px);
  text-align: center;
}
.km-op__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.28em;
  opacity: 0.7;
}
.km-op__title {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.07em;
  font-size: clamp(18px, 2vw, 24px);
}
.km-op__wrap {
  max-width: 1100px;
  margin: 0 auto;
}
.km-op__card {
  text-align: center;
  border-top: 1px solid rgba(12, 18, 26, 0.12);
  border-bottom: 1px solid rgba(12, 18, 26, 0.12);
  padding: 18px 6px;
}
.km-op__lead {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(12, 18, 26, 0.86);
}
.km-op__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.km-op__btn {
  border: 0;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 11px;
  background: rgba(177, 177, 177, 0.92);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.km-op__btn:hover {
  opacity: 0.92;
}

.km-op__alt {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(12, 18, 26, 0.78);
  text-decoration: none;
}
.km-op__alt:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.km-op__actions_t {
  margin-top: 13px;
}

/* ===== Menu CTA row（お問合せだけ追加） ===== */
.km-menuCtas {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 既存ボタンの見た目に合わせる（セレクタ追加） */
.km-menu__surface .km-menuWeatherBtn,
.km-menu__surface [data-km-op-open],
.km-menu__surface .km-menuContactBtn {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;

  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(11, 15, 20, 0.9);
  border-radius: 14px;

  padding: 12px 18px;
  min-height: 52px;

  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  box-sizing: border-box;

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  margin: 0 12px 10px;

  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    opacity 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .km-menu__surface .km-menuWeatherBtn:hover,
  .km-menu__surface [data-km-op-open]:hover,
  .km-menu__surface .km-menuContactBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
    background: #fff;
  }
}

/* =========================================================
   kmMap Modal (PC: 枠内に全体表示 / SP: 縦は枠内 + 横スクロール)
========================================================= */

/* 非表示（JSは .is-open、JS死んでも :target で開く） */
.km-mapModal {
  position: fixed;
  inset: 0;
  z-index: 1004; /* menu(998)より上に */
  display: none; /* デフォルトは閉じる */
  place-items: center;
  pointer-events: none;
}

.km-mapModal.is-open {
  display: grid;
  pointer-events: auto;
}

/* 背景面 */
.km-mapModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
}

.km-mapModal__back {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;

  /* buttonの見た目を消す */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* パネル（運行状況モーダル寄せ） */
.km-mapModal__panel {
  position: relative;
  z-index: 1; /* ★背景より上 */
  width: min(1100px, 96vw);
  height: min(86vh, 920px);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ヘッダー */
.km-mapModal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}

.km-mapModal__tit {
  display: grid;
  gap: 4px;
}
.km-mapModal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.km-mapModal__jp {
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}

/* ×を他モーダルと統一する共通クラス */
.km-modalClose {
  all: unset;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  opacity: 0.65;
  padding: 2px 6px;
  border-radius: 8px;
}
.km-modalClose:hover {
  opacity: 1;
}

/* aタグでも同じ見た目にする */
.km-mapModal__close {
  text-decoration: none;
  color: inherit;
}

/* 本文 */
.km-mapModal__body {
  flex: 1 1 auto;
  min-height: 0; /* ←これ大事（スクロールバー事故防止） */
  padding: 0;
  overflow: hidden; /* 縦スクロールは出さない */
}

/* スクロールの器 */
.km-mapModal__scroll {
  width: 100%;
  height: 100%;
  overflow: hidden; /* PCはスクロールさせない */
  position: relative;
}

/* 画像の紙 */
.km-mapModal__paper {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
}

#kmMapImg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* PCは枠内に全体表示 */
}

/* ヒント（PCは不要） */
.km-mapHint {
  display: none;
}

/* 注釈 */
.km-mapModal__note {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 12px;
  color: rgba(12, 18, 26, 0.68);
  border-top: 1px solid rgba(12, 18, 26, 0.1);
}
.km-mapModal__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== SP：縦は枠内に収めて、横スクロールで全体を見る ===== */
@media (max-width: 768px) {
  .km-mapModal__panel {
    width: 96vw;
    height: min(79svh, 920px);
  }

  .km-mapModal__scroll {
    overflow-x: auto; /* 横だけスクロール */
    overflow-y: hidden; /* 縦は出さない */
    -webkit-overflow-scrolling: touch;
  }

  .km-mapModal__paper {
    width: max-content; /* 中身の幅に合わせて横に伸びる */
    height: 100%;
    padding: 10px;
  }

  /* “縦を枠内に固定”して横へ広げる（横スクロールが効く） */
  #kmMapImg {
    height: 100%;
    width: auto;
    max-height: 100%;
    max-width: none;
    object-fit: contain;
  }

  /* スワイプ案内を出したいなら（必要なら有効化してOK） */
  /* .km-mapHint{ display:block; position:absolute; left:12px; right:12px; bottom:12px; } */
}
/* ===== kmMap：kmOpModalの器を使い、画像だけ最適化 ===== */
#kmMap .km-opModal__body {
  height: min(72vh, 760px);
}
#kmMap .km-mapFrame {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* ===== kmMap（kmOpと同じ器）: 画像を枠内に全体表示 ===== */
#kmMapImg {
  object-fit: contain;
}

/* ===== kmMap：SPは横スワイプで全体を見る ===== */
.km-mapBody {
  position: relative;
}

/* スクロール器（PCはそのまま、SPだけ横スクロール） */
.km-mapScroll {
  width: 100%;
  height: 100%;
  overflow: hidden; /* PC */
}

/* 画像はPCは枠内に収める */
.km-mapImg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .km-mapScroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .km-mapScroll::-webkit-scrollbar {
    display: none;
  }

  /* SPは縦を固定して、横に広げる（=横スクロールが発生） */
  .km-mapImg {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
  }

  /* スワイプヒント */
  .km-mapHint {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .km-mapHint.is-show {
    opacity: 1;
    transform: translateY(0);
  }
  .km-mapHint.is-hide {
    opacity: 0;
    transform: translateY(8px);
  }
  .km-mapHint__ico {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    opacity: 0.9;
  }
  .km-mapHint__txt {
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0.85;
  }
}

/* ===== Kiyaku modal：本文を縦スクロールにする ===== */
#kmKiyaku .km-opModal__body--scroll {
  overflow: auto; /* ←縦スクロール */
  -webkit-overflow-scrolling: touch;
  padding: 14px; /* 余白 */
  background: #fff;
}

/* 画像は幅100%で縦に伸びる（長文OK） */
#kmKiyaku .km-kiyakuImg {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   メニュー一覧の「data-km-op-open 付きリンク」だけ
   “ボタン風”を無効化して、他の .km-menuLink と完全に揃える
========================================================= */
.km-menuList a.km-menuLink[data-km-op-open] {
  /* ボタン風だけ殺す（下線や余白は .km-menuLink 側に任せる） */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* 念のため：行幅を他と同じに */
  width: 100%;
}

/* =========================================================
   メニュー一覧：リフト運行状況（data-km-op-open）だけ
   他のリンクと100%同じ行レイアウト＆下線に矯正する
========================================================= */
.km-menuList a.km-menuLink[data-km-op-open] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  text-align: left !important;

  /* ボタン風だけ無効化 */
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  /* “丸い下線”っぽい装飾が当たってる時の保険 */
  background-image: none !important;
}

/* 右矢印が「文字の直後」に来る症状の最終保険（::after運用のサイト向け） */
.km-menuList a.km-menuLink[data-km-op-open]::after {
  margin-left: auto;
}
/* =========================================================
   メニュー一覧：リフト運行状況（data-km-op-open）が
   “ボタン用スタイル”を食らって中央寄せ/丸み/固定幅になるのを無効化し、
   他の .km-menuLink と同じ見た目に揃える
========================================================= */
#kmMenu #kmMenuContent .km-menuList a[data-km-op-open] {
  /* 行を100%に戻す（中央寄せ・固定幅を殺す） */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  /* 文字リンクとして揃える */
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;

  /* “ボタンっぽさ”を無効化（丸み・背景・影） */
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  /* 下線を強制（他と同じ） */
  border-bottom: 1px solid rgba(12, 18, 26, 0.1) !important;

  /* 行の高さを他と揃える（必要なら数値だけ微調整） */
  padding: 14px 0 !important;
}

/* 右矢印が text の直後に来る症状の最終保険 */
#kmMenu #kmMenuContent .km-menuList a[data-km-op-open]::after {
  margin-left: auto;
}
/* =========================================================
   Menu：見出しの上（段と段の間）スペース調整
   HOME/ゲレンデ案内/営業案内（上段）と
   施設案内/ACCESS（下段）の間の余白
========================================================= */
:root {
  --km-menu-row-gap: 68px; /* ←ここを増減（例：20〜44px） */
}

/* kmMenuContent は grid なので row-gap が効く */
#kmMenuContent {
  row-gap: var(--km-menu-row-gap) !important;
}
/* =========================================================
   SP Menu Hint（下向き：スクロール案内）
========================================================= */
.km-menuHint {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 5;

  display: none; /* PCは出さない */
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: rgba(12, 18, 26, 0.86);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.km-menuHint__hand {
  width: 22px;
  height: 22px;
}
.km-menuHint__arrow {
  width: 20px;
  height: 20px;
}

.km-menuHint__txt {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 表示状態 */
.km-menuHint.is-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* 消える状態（フェードアウト） */
.km-menuHint.is-hide {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* SPのみ有効 */
@media (max-width: 768px) {
  .km-menuHint {
    display: flex;
  }
}

/* 動き（矢印だけ） */
@media (prefers-reduced-motion: no-preference) {
  .km-menuHint__arrow {
    animation: kmMenuHintDown 1.1s ease-in-out infinite;
  }
  @keyframes kmMenuHintDown {
    0%,
    100% {
      transform: translateY(-1px);
      opacity: 0.9;
    }
    50% {
      transform: translateY(4px);
      opacity: 1;
    }
  }
}

/* =========================================================
   Ticket Modal (kmTicket)  ※kmOpと同系
========================================================= */
.km-ticketModal {
  position: fixed;
  inset: 0;
  z-index: 1004;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.km-ticketModal.is-open {
  pointer-events: auto;
}
.km-ticketModal[hidden] {
  display: none !important;
}

/* 背景 */
.km-ticketModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-ticketModal.is-open .km-ticketModal__surface {
  opacity: 1;
}

/* パネル */
.km-ticketModal__panel {
  width: min(1100px, 96vw);
  height: min(86vh, 920px);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);

  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-ticketModal.is-open .km-ticketModal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ヘッダー */
.km-ticketModal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}
.km-ticketModal__tit {
  display: grid;
  gap: 4px;
}
.km-ticketModal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.km-ticketModal__jp {
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.km-ticketModal__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.km-ticketModal__close:hover {
  opacity: 1;
}

/* 本文：ここは縦スクロールOK */
.km-ticketModal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 16px 20px;
}
.km-ticketModal__section {
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.08);
}
.km-ticketModal__section:last-child {
  border-bottom: 0;
  padding-bottom: 6px;
}

.km-ticketModal__h {
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.km-ticketModal__sub {
  margin: 0 0 12px;
  font-size: 12px;
  opacity: 0.7;
}
.km-ticketModal__lead {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.75;
  opacity: 0.9;
}

/* テーブル（横スクロール許容） */
.km-ticketModal__tableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(12, 18, 26, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}
.km-priceTable,
.km-discountTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px; /* SPで横スクロールになる */
}
.km-discountTable {
  min-width: 520px;
}

.km-priceTable th,
.km-priceTable td,
.km-discountTable th,
.km-discountTable td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
  font-size: 13px;
}
.km-priceTable thead th,
.km-discountTable thead th {
  background: rgba(12, 18, 26, 0.04);
  font-weight: 700;
  text-align: center;
}
.km-priceTable tbody th,
.km-discountTable tbody th {
  background: rgba(12, 18, 26, 0.02);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.km-priceTable tbody tr:nth-child(even) td,
.km-discountTable tbody tr:nth-child(even) td {
  background: rgba(12, 18, 26, 0.015);
}

.km-priceTable .km-num,
.km-discountTable .km-num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.km-priceTable .km-note {
  text-align: left;
}

.km-col-item {
  width: 22%;
}
.km-col-note {
  width: 28%;
}

.km-noteBox {
  width: 675px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(12, 18, 26, 0.04);
  border: 1px solid rgba(12, 18, 26, 0.08);
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.92;
}

@media (max-width: 768px) {
  .km-ticketModal__panel {
    width: 96vw;
    height: min(79svh, 920px);
  }
  .km-ticketModal__body {
    padding: 16px 14px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .km-ticketModal__surface,
  .km-ticketModal__panel {
    transition: none !important;
  }
}

/* =========================================================
   Ticket：SP 横スクロール ヒント（指＋左右矢印）
========================================================= */

/* 既存の tableWrap に relative を付与（ヒントを重ねる） */
.km-ticketModal__tableWrap {
  position: relative;
}

/* ヒント本体（PCは出さない） */
.km-ticketHint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;

  display: none; /* SPのみ */
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  color: rgba(12, 18, 26, 0.86);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.km-ticketHint__hand {
  width: 22px;
  height: 22px;
}
.km-ticketHint__ar {
  width: 22px;
  height: 22px;
}
.km-ticketHint__txt {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 表示/非表示 */
.km-ticketHint.is-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.km-ticketHint.is-hide {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* SPのみ有効 */
@media (max-width: 768px) {
  .km-ticketHint {
    display: flex;
  }
}

/* 矢印だけ左右に揺らす */
@media (prefers-reduced-motion: no-preference) {
  .km-ticketHint__ar {
    animation: kmTicketHintLR 1.15s ease-in-out infinite;
  }
  @keyframes kmTicketHintLR {
    0%,
    100% {
      transform: translateX(-1px);
      opacity: 0.9;
    }
    50% {
      transform: translateX(5px);
      opacity: 1;
    }
  }
}

/* =========================================================
   Hours Modal (kmHours)  ※kmTicketと同系（縦スクロールOK）
========================================================= */
.km-hoursModal {
  position: fixed;
  inset: 0;
  z-index: 1004;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.km-hoursModal.is-open {
  pointer-events: auto;
}
.km-hoursModal[hidden] {
  display: none !important;
}

/* 背景 */
.km-hoursModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-hoursModal.is-open .km-hoursModal__surface {
  opacity: 1;
}

/* パネル */
.km-hoursModal__panel {
  width: min(750px, 96vw);
  height: min(86vh, 920px);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);

  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-hoursModal.is-open .km-hoursModal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ヘッダー */
.km-hoursModal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}
.km-hoursModal__tit {
  display: grid;
  gap: 4px;
}
.km-hoursModal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.km-hoursModal__jp {
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.km-hoursModal__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.km-hoursModal__close:hover {
  opacity: 1;
}

/* 本文：縦スクロールOK */
.km-hoursModal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 16px 20px;
}
.km-hoursModal__section {
  padding: 14px 0 18px;
}
.km-hoursModal__h {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 0.04em;
}

/* テーブル（横スクロール許容） */
.km-hoursModal__tableWrap {
  width: 700px;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(12, 18, 26, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.km-hoursTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px; /* SPで横スクロール */
}

.km-hoursTable th,
.km-hoursTable td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
  font-size: 13px;
}

.km-hoursTable thead th {
  background: rgba(12, 18, 26, 0.04);
  font-weight: 700;
  text-align: center;
}

.km-hoursTable tbody th {
  background: rgba(12, 18, 26, 0.02);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.km-hoursTable tbody tr:nth-child(even) td {
  background: rgba(12, 18, 26, 0.015);
}

.km-center {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* SP横スクロール ヒント（指＋左右矢印） */
.km-hoursHint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;

  display: none; /* SPのみ */
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  color: rgba(12, 18, 26, 0.86);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.km-hoursHint__hand {
  width: 22px;
  height: 22px;
}
.km-hoursHint__ar {
  width: 22px;
  height: 22px;
}
.km-hoursHint__txt {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.km-hoursHint.is-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.km-hoursHint.is-hide {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (max-width: 768px) {
  .km-hoursModal__panel {
    width: 96vw;
    height: min(79svh, 920px);
  }
  .km-hoursModal__body {
    padding: 16px 14px 18px;
  }
  .km-hoursHint {
    display: flex;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .km-hoursHint__ar {
    animation: kmHoursHintLR 1.15s ease-in-out infinite;
  }
  @keyframes kmHoursHintLR {
    0%,
    100% {
      transform: translateX(-1px);
      opacity: 0.9;
    }
    50% {
      transform: translateX(5px);
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .km-hoursModal__surface,
  .km-hoursModal__panel {
    transition: none !important;
  }
}

/* =========================================================
   School Modal (kmSchool)  ※kmOp/kmHoursと同系
========================================================= */
.km-schoolModal {
  position: fixed;
  inset: 0;
  z-index: 1004;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.km-schoolModal.is-open {
  pointer-events: auto;
}
.km-schoolModal[hidden] {
  display: none !important;
}

/* 背景 */
.km-schoolModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-schoolModal.is-open .km-schoolModal__surface {
  opacity: 1;
}

/* パネル */
.km-schoolModal__panel {
  width: min(1100px, 96vw);
  height: min(86vh, 920px);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);

  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-schoolModal.is-open .km-schoolModal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ヘッダー */
.km-schoolModal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}
.km-schoolModal__tit {
  display: grid;
  gap: 4px;
}
.km-schoolModal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.km-schoolModal__jp {
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.km-schoolModal__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.km-schoolModal__close:hover {
  opacity: 1;
}

/* 本文：縦スクロールOK */
.km-schoolModal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 18px 16px 22px;
}

.km-schoolSec {
  padding: 14px 0 22px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.08);
}
.km-schoolSec:last-child {
  border-bottom: 0;
  padding-bottom: 6px;
}

.km-schoolH {
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.km-schoolLead {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(12, 18, 26, 0.7);
}

.km-schoolBlock {
  margin: 14px 0 18px;
}
.km-schoolSub {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}

/* 横スクロールの器（複数テーブル共通） */
.km-xWrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(12, 18, 26, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

/* カレンダー */
.km-cal {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px; /* SPで横スクロール */
}
.km-cal th,
.km-cal td {
  padding: 11px 10px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.km-cal thead th {
  background: rgba(12, 18, 26, 0.04);
  font-weight: 700;
}
.km-cal tbody tr:last-child td {
  border-bottom: 0;
}

/* 共通テーブル（スケジュール/料金） */
.km-schoolTbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px; /* SPで横スクロール */
}
.km-schoolTbl th,
.km-schoolTbl td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
  font-size: 13px;
}
.km-schoolTbl thead th {
  background: rgba(12, 18, 26, 0.04);
  font-weight: 700;
  text-align: center;
}
.km-schoolTbl tbody th {
  background: rgba(12, 18, 26, 0.02);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.km-schoolTbl tbody tr:last-child th,
.km-schoolTbl tbody tr:last-child td {
  border-bottom: 0;
}

.km-col-item {
  width: 20%;
}
.km-center {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 開催色（bgcolorの代わり） */
.is-both {
  background: rgba(255, 165, 0, 0.22);
}
.is-ski {
  background: rgba(203, 255, 120, 0.4);
}

/* 凡例 */
.km-legend {
  display: grid;
  gap: 8px;
  margin: 10px 0 4px;
}
.km-legend__item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.km-legend__swatch {
  width: 34px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;
}
.km-legend__txt {
  font-size: 13px;
  color: rgba(12, 18, 26, 0.86);
}

/* 外部リンクカード */
.km-linkCard {
  border: 1px solid rgba(12, 18, 26, 0.1);
  border-radius: 14px;
  background: rgba(12, 18, 26, 0.03);
  padding: 14px 14px 12px;
}
.km-linkCard__a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}
.km-linkCard__a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.km-linkCard__sub {
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(12, 18, 26, 0.7);
}

/* 横スクロール ヒント（指＋左右矢印） */
.km-xHint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;

  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

  color: rgba(12, 18, 26, 0.86);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.km-xHint__hand {
  width: 22px;
  height: 22px;
}
.km-xHint__ar {
  width: 22px;
  height: 22px;
}
.km-xHint__txt {
  font-size: 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.km-xHint.is-show {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.km-xHint.is-hide {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

@media (max-width: 768px) {
  .km-schoolModal__panel {
    width: 96vw;
    height: min(79svh, 920px);
  }
  .km-schoolModal__body {
    padding: 16px 14px 18px;
  }
  .km-xHint {
    display: flex;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .km-xHint__ar {
    animation: kmXHintLR 1.15s ease-in-out infinite;
  }
  @keyframes kmXHintLR {
    0%,
    100% {
      transform: translateX(-1px);
      opacity: 0.9;
    }
    50% {
      transform: translateX(5px);
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .km-schoolModal__surface,
  .km-schoolModal__panel {
    transition: none !important;
  }
}

/* =========================================================
   Rental Modal (kmRental)  ※kmOp/kmHoursと同系
========================================================= */
.km-rentalModal {
  position: fixed;
  inset: 0;
  z-index: 1004;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.km-rentalModal.is-open {
  pointer-events: auto;
}
.km-rentalModal[hidden] {
  display: none !important;
}

.km-rentalModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-rentalModal.is-open .km-rentalModal__surface {
  opacity: 1;
}

.km-rentalModal__panel {
  position: relative;
  width: min(1100px, 96vw);
  height: min(86vh, 920px);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);

  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-rentalModal.is-open .km-rentalModal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.km-rentalModal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}
.km-rentalModal__tit {
  display: grid;
  gap: 4px;
}
.km-rentalModal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.km-rentalModal__jp {
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.km-rentalModal__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.km-rentalModal__close:hover {
  opacity: 1;
}

.km-rentalModal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* ←縦スクロールOK */
  padding: 18px 16px 22px;
}

.km-rentalSec {
  padding: 14px 0 8px;
}
.km-rentalH {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.km-rentalLead {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(12, 18, 26, 0.7);
}
.km-rentalNote {
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(12, 18, 26, 0.7);
}
.km-muted {
  color: rgba(12, 18, 26, 0.55);
}

/* table（縦に長い用：2列なので横スクロール不要） */
.km-rentalTbl {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(12, 18, 26, 0.1);
  border-radius: 14px;
  overflow: hidden;
}
.km-rentalTbl th,
.km-rentalTbl td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
  font-size: 13px;
  vertical-align: middle;
}
.km-rentalTbl thead th {
  background: rgba(12, 18, 26, 0.04);
  font-weight: 800;
  text-align: center;
}
.km-rentalTbl tbody tr:last-child th,
.km-rentalTbl tbody tr:last-child td {
  border-bottom: 0;
}

.km-rentalTbl__stub {
  width: 44%;
  text-align: left;
}
.km-rentalTbl__item {
  text-align: left;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.km-center {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ===== SP：縦スクロール指案内 ===== */
.km-yHint {
  display: none;
}
@media (max-width: 768px) {
  .km-rentalModal__panel {
    width: 96vw;
    height: min(79svh, 920px);
  }
  .km-rentalModal__body {
    padding: 16px 14px 18px;
  }

  .km-yHint {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(12, 18, 26, 0.1);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);

    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .km-yHint.is-show {
    opacity: 1;
    transform: translateY(0);
  }
  .km-yHint.is-hide {
    opacity: 0;
    transform: translateY(8px);
  }

  .km-yHint__hand,
  .km-yHint__ar {
    width: 22px;
    height: 22px;
    color: rgba(12, 18, 26, 0.72);
  }
  .km-yHint__txt {
    font-size: 12px;
    letter-spacing: 0.06em;
    color: rgba(12, 18, 26, 0.78);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .km-rentalModal__surface,
  .km-rentalModal__panel,
  .km-yHint {
    transition: none !important;
  }
}

/* =========================================================
   Access Modal (kmAccess)  ※kmOpと同系
========================================================= */
.km-accessModal {
  position: fixed;
  inset: 0;
  z-index: 1004;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.km-accessModal.is-open {
  pointer-events: auto;
}
.km-accessModal[hidden] {
  display: none !important;
}

.km-accessModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-accessModal.is-open .km-accessModal__surface {
  opacity: 1;
}

.km-accessModal__panel {
  position: relative;
  width: min(1100px, 96vw);
  height: min(86vh, 920px);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);

  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-accessModal.is-open .km-accessModal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.km-accessModal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}
.km-accessModal__tit {
  display: grid;
  gap: 4px;
}
.km-accessModal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.km-accessModal__jp {
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.km-accessModal__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.km-accessModal__close:hover {
  opacity: 1;
}

.km-accessModal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* ←縦スクロール */
  padding: 18px 16px 22px;
}

.km-accessModal__note {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 12px;
  color: rgba(12, 18, 26, 0.68);
  border-top: 1px solid rgba(12, 18, 26, 0.1);
}
.km-accessModal__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== Access contents ===== */
.km-accessSec {
  padding: 12px 0 10px;
}
.km-accessH {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.km-accessCard {
  border: 1px solid rgba(12, 18, 26, 0.1);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 14px 14px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}
.km-accessH2 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.km-accessP {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(12, 18, 26, 0.84);
}
.km-accessAlert {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(12, 18, 26, 0.04);
  border: 1px solid rgba(12, 18, 26, 0.1);
  font-size: 13px;
  color: rgba(12, 18, 26, 0.82);
}
.km-accessList {
  margin: 0;
  padding-left: 1.1em;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(12, 18, 26, 0.84);
}
.km-accessGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

/* map */
.km-accessMapFrame {
  margin-top: 10px;
  width: 100%;
  height: min(56vh, 520px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(12, 18, 26, 0.1);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}
.km-accessMapFrame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 768px) {
  .km-accessModal__panel {
    width: 96vw;
    height: min(79svh, 920px);
  }
  .km-accessModal__body {
    padding: 16px 14px 18px;
  }
  .km-accessGrid {
    grid-template-columns: 1fr;
  }
  .km-accessMapFrame {
    height: min(42svh, 420px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .km-accessModal__surface,
  .km-accessModal__panel {
    transition: none !important;
  }
}

/* =========================================================
   Dining Modal (kmDining)  ※kmOpと同系
========================================================= */
.km-diningModal {
  position: fixed;
  inset: 0;
  z-index: 1004;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.km-diningModal.is-open {
  pointer-events: auto;
}
.km-diningModal[hidden] {
  display: none !important;
}

.km-diningModal__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-diningModal.is-open .km-diningModal__surface {
  opacity: 1;
}

.km-diningModal__panel {
  position: relative;
  width: min(850px, 96vw);
  height: min(86vh, 920px);
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);

  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.km-diningModal.is-open .km-diningModal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.km-diningModal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(12, 18, 26, 0.1);
}
.km-diningModal__tit {
  display: grid;
  gap: 4px;
}
.km-diningModal__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  opacity: 0.72;
}
.km-diningModal__jp {
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.km-diningModal__close {
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}
.km-diningModal__close:hover {
  opacity: 1;
}

/* 縦横どちらもスクロールOK（スマホで2Dスワイプ） */
.km-diningModal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto; /* ← 縦横両方 */
  padding: 14px 14px 18px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; /* ← iOSで“指で動かす”感を安定 */
}

.km-diningModal__paper {
  margin: 0;
  width: max-content; /* ← 中身サイズに合わせて横に伸びる */
  height: max-content;
  display: grid;
  place-items: start center;
}

#kmDiningImg {
  display: block;
  width: min(980px, 100%); /* PCは読みやすく“収まり”優先 */
  height: auto;
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(12, 18, 26, 0.1);
  background: #fff;
}

.km-diningModal__note {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 12px;
  color: rgba(12, 18, 26, 0.68);
  border-top: 1px solid rgba(12, 18, 26, 0.1);
}
.km-diningModal__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
:root {
  --dining-w: 700px; /* スマホでの“拡大表示”横幅。1100〜1600で好み調整OK */
}

@media (max-width: 768px) {
  .km-diningModal__panel {
    width: 96vw;
    height: min(79svh, 920px);
  }

  .km-diningModal__body {
    padding: 12px 12px 16px;
  }

  /* スマホは“画像を大きめにして”縦横スクロールで見る */
  #kmDiningImg {
    width: max(100%, var(--dining-w)); /* ← 横に大きくして横移動できる */
    max-width: none; /* ← ここ重要：縮めない */
    height: auto;
  }
}

/* ▼下スクロール案内（既に別モーダルで入れてるなら重複してもOK） */
.km-yHint {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(12, 18, 26, 0.72);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.km-yHint__hand,
.km-yHint__ar {
  width: 22px;
  height: 22px;
}
.km-yHint__txt {
  font-size: 12px;
  letter-spacing: 0.06em;
}

.km-yHint.is-show {
  opacity: 1;
  transform: translateY(0);
}
.km-yHint.is-hide {
  opacity: 0;
  transform: translateY(10px);
}

@media (max-width: 768px) {
  .km-diningModal.is-open .km-yHint--dining {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .km-diningModal__surface,
  .km-diningModal__panel,
  .km-yHint {
    transition: none !important;
  }
}