@charset "UTF-8";

:root {
  --theme-text: #49352C;
  /* Basic content text (intro / gallery / menu / access) */
  --theme-basic-text: #49352C;
  --theme-basic-text-rgb: 73, 53, 44;
  --theme-intro-lead-text: #49352C;
  --theme-text-soft: #49352C;

  /* First-view video shadow */
  --theme-hero-shadow-near: rgba(45, 116, 132, 0.34);
  --theme-hero-shadow-mid: rgba(61, 151, 166, 0.23);
  --theme-hero-shadow-far: rgba(92, 191, 204, 0.16);
  /* Header: background color / opacity / thin line */
  --theme-header-bg-rgb: 238, 249, 250;
  --theme-header-bg-opacity: 0.94;
  --theme-header-bg: rgba(var(--theme-header-bg-rgb), var(--theme-header-bg-opacity));
  --theme-header-text: #49352C;
  --theme-header-line: rgba(73, 53, 44, 0.18);
  --theme-accent: #b69a54;

  /* Common action accent: language switch / WEB reservation / page top */
  --theme-action-accent: #42B2CE;
  --theme-accent-strong: var(--theme-action-accent);
  --theme-button: var(--theme-action-accent);
  --theme-button-text: #fffdf8;
  /* Footer: background / top line / copyright text */
  --theme-footer-bg: #1F667A;
  --theme-footer-line: rgba(235, 248, 251, 0.24);
  --theme-footer-text: #FFFDF8;

  /* Access directions: water / gold-brown theme */
  --theme-access-title: #49352C;
  --theme-access-title-line: rgba(181, 145, 67, 0.92);
  --theme-access-title-line-opacity: 0.82;
  --theme-access-summary-bg: rgba(249, 253, 254, 0.96);
  --theme-access-summary-text: #49352C;
  --theme-access-video-bg: #000;
  --theme-access-video-shadow:
    0 10px 26px rgba(73, 53, 44, 0.16),
    0 3px 10px rgba(73, 53, 44, 0.08);
  --theme-access-card-bg: rgba(249, 253, 254, 0.94);
  --theme-access-card-line: rgba(181, 145, 67, 0.42);
  --theme-access-card-image-bg:
    linear-gradient(135deg, rgba(252,254,255,.96), rgba(232,247,250,.92));
  --theme-access-step-number-bg: #7C5522;
  --theme-access-step-number-text: #FFFDF8;
  --theme-access-card-text: #49352C;
  --theme-access-highlight: #7C5522;
  --theme-access-photo-summary-bg: rgba(249, 253, 254, 0.96);
  --theme-access-photo-summary-line: rgba(181, 145, 67, 0.42);
  --theme-access-photo-summary-shadow:
    0 7px 18px rgba(73, 53, 44, 0.08);

  --theme-panel: rgba(255, 252, 245, 0.78);
  --theme-panel-line: rgba(182, 154, 84, 0.55);

  /* Main section translucent panels: greeting / gallery / menu / access
     Water theme: aqua/cyan inspired by the first-view logo, with a subtle gold edge. */
  --theme-section-panel-bg:
    radial-gradient(
      circle at 8% 5%,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0) 34%
    ),
    radial-gradient(
      circle at 92% 95%,
      rgba(244, 211, 91, 0.10) 0%,
      rgba(244, 211, 91, 0) 38%
    ),
    linear-gradient(
      135deg,
      rgba(226, 248, 250, 0.74) 0%,
      rgba(191, 233, 239, 0.70) 52%,
      rgba(153, 217, 230, 0.68) 100%
    );
  --theme-section-panel-line: rgba(211, 174, 72, 0.62);
  --theme-section-panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    inset 0 0 24px rgba(91, 204, 226, 0.10),
    0 18px 36px rgba(73, 53, 44, 0.12),
    0 5px 14px rgba(73, 53, 44, 0.08);

  /* Basic-info table backgrounds
     Water theme: label color matched to the midpoint of the MENU blue gradient */
  --theme-basic-info-label-bg: #2A7F95;
  --theme-basic-info-value-bg: rgba(249, 253, 254, 0.985);
  --theme-basic-info-line: rgba(181, 145, 67, 0.42);

  /* MENU inner panel: near-white aqua for the water theme */
  --theme-menu-panel-bg:
    linear-gradient(
      135deg,
      rgba(252, 254, 255, 0.96) 0%,
      rgba(246, 252, 254, 0.95) 55%,
      rgba(240, 249, 252, 0.95) 100%
    );
  --theme-menu-panel-line: rgba(181, 145, 67, 0.30);
  --theme-menu-panel-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 10px 28px rgba(73, 53, 44, 0.08),
    0 3px 10px rgba(73, 53, 44, 0.05);

  /* MENU course-name background */
  --theme-menu-course-bg:
    linear-gradient(
      180deg,
      #2E8FA8 0%,
      #256F82 100%
    );
  --theme-fixed-cta-bg: var(--theme-action-accent);
  --theme-fixed-cta-text: #fffdf8;
  --theme-fixed-cta-border: #fffdf4;
  --theme-fixed-cta-meta: rgba(255, 253, 248, 0.9);
}

html { scroll-behavior: smooth; }
body { color: var(--theme-text); }

.cb-header {
  background-color: var(--theme-header-bg);
  border-bottom-color: var(--theme-header-line);
}
.cb-header ul li { border-color: var(--theme-header-line); }
.cb-header ul li a, .cb-header h1 { color: var(--theme-header-text); }
.cb-header ul li:last-child { background: var(--theme-accent-strong); }
.cb-header ul li:last-child a { color: var(--theme-button-text); }

footer {
  background-color: var(--theme-footer-bg);
  border-top-color: var(--theme-footer-line);
}
.copy p small,
.copy p small a {
  color: var(--theme-footer-text);
}
#pageTop a, .menu.fixed p a.yoyaku {
  background: var(--theme-button);
  color: var(--theme-button-text);
}

.hero-brand {
  position: relative;
  z-index: 110;
  width: min(92vw, 920px);
  margin: 0 auto;
  padding: 28px 24px;
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0,0,0,.48);
}
.hero-brand__name {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: clamp(2.2rem, 8vw, 5.6rem);
  line-height: 1.05;
}
.hero-brand__reading {
  display: block;
  margin-top: .7rem;
  font-size: clamp(.95rem, 2.4vw, 1.3rem);
  letter-spacing: .08em;
}

.site-logo .site-reading {
  font-size: 60%;
  margin-left: .5em;
}

[hidden] { display: none !important; }

.template-note {
  width: min(92%, 980px);
  margin: 1.5rem auto;
  padding: .75rem 1rem;
  border: 1px dashed var(--theme-panel-line);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: var(--theme-text-soft);
  font-size: .86rem;
  text-align: center;
}

.access-step-list {
  width: 92%;
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.access-step {
  overflow: hidden;
  border: 1px solid var(--theme-access-card-line);
  border-radius: 10px;
  background: var(--theme-access-card-bg);
}
.access-step__image {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--theme-access-card-image-bg);
  color: var(--theme-text-soft);
  font-size: .85rem;
  letter-spacing: .04em;
}
.access-step__body { padding: 1rem; }
.access-step__number {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: .55rem;
  border-radius: 50%;
  background: var(--theme-access-step-number-bg);
  color: var(--theme-access-step-number-text);
  font-weight: 700;
}
.access-step__title { margin: 0 0 .35rem; font-size: 1rem; }
.access-step__text {
  margin: 0;
  color: var(--theme-access-card-text);
  font-size: .92rem;
  line-height: 1.7;
}
.map-placeholder {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(255,255,255,.66);
  border: 1px dashed var(--theme-panel-line);
  color: var(--theme-text-soft);
  text-align: center;
}
.reserve-text-button {
  display: inline-block;
  min-width: min(84vw, 420px);
  padding: .9rem 1.4rem;
  border: 2px solid #fff;
  border-radius: 6px;
  background: var(--theme-button);
  color: var(--theme-button-text);
  font-weight: 700;
  letter-spacing: .06em;
}

@media (min-width: 768px) {
  .access-step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .access-step-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/*
 元サイトCSSには ../fonts/ の @font-face 定義があります。
 この配布ZIPにはフォントファイルを含めていません。
 必要な場合は、ユーザー自身が保有する元サイトの fonts/ を
 site/fonts/ に配置してください。
*/


/* v0.2：下固定予約ボタンを元サイト同様に出す */
.menu.fixed {
  display: block;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform .45s ease, opacity .35s ease;
}
.menu.fixed.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.menu.fixed {
  text-align: center;
  padding: 0 10px 8px;
}

.menu.fixed .fixed-cta__wrap {
  margin: 0;
}

.menu.fixed .fixed-cta__link {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;

  width: min(94vw, 560px);
  min-height: 56px;

  margin: 0 auto !important;
  padding: 0.55rem 1.2rem !important;

  background: var(--theme-fixed-cta-bg) !important;
  color: var(--theme-fixed-cta-text) !important;

  border: 2px solid var(--theme-fixed-cta-border) !important;
  border-radius: 8px !important;

  box-shadow: 0 5px 16px rgba(31, 25, 17, 0.22) !important;

  text-decoration: none;
  line-height: 1.3;

  transition:
    transform .2s ease,
    opacity .2s ease,
    box-shadow .2s ease;
}

.menu.fixed .fixed-cta__link:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.menu.fixed .fixed-cta__label {
  display: block !important;
  font-size: clamp(1rem, 3.8vw, 1.18rem);
  font-weight: 700;
  letter-spacing: .06em;
}

.menu.fixed .fixed-cta__meta {
  display: block !important;
  margin-top: .15rem;
  color: var(--theme-fixed-cta-meta);
  font-size: clamp(.72rem, 2.8vw, .86rem);
  letter-spacing: .02em;
}

.menu.fixed .fixed-cta__meta[hidden] {
  display: none !important;
}

@media (min-width: 768px) {
  .menu.fixed {
    padding-bottom: 10px;
  }

  .menu.fixed .fixed-cta__link {
    min-height: 62px;
    padding: .65rem 1.5rem !important;
  }
}
.coupon-inner img {
  display: block;
  max-width: min(92vw, 760px);
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* TOPロゴ画像へ差し替える時に使用 */
.hero-logo-image {
  display: block;
  max-width: min(82vw, 820px);
  max-height: 42vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}


/* =========================================================
   v0.3 店舗情報テーブル / Map / ACCESSレスポンシブ調整
   ========================================================= */

/* 元サイトの固定幅・余白を上書きし、右側の不自然な空白をなくす */
#access .info-wrap,
#access .info-inner,
#access .info,
#access table.tbl-r02 {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

#access .info-wrap {
  margin-left: auto;
  margin-right: auto;
}

#access table.tbl-r02 {
  table-layout: fixed;
  border-collapse: collapse;
}

#access table.tbl-r02 th {
  width: 32%;
}

#access table.tbl-r02 td {
  width: 68%;
  overflow-wrap: anywhere;
}

/* 店舗別Map画像の仮枠。順番3以降で店舗画像へ差し替える */
.map-image-placeholder {
  width: 100%;
  min-height: 220px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px dashed var(--theme-panel-line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(230,224,208,.72));
  color: var(--theme-text-soft);
  text-align: center;
  padding: 1rem;
}

.map-image-placeholder strong {
  display: block;
  margin-bottom: .3rem;
}

/* Google Map 仮枠もtdいっぱいに使う */
.map-placeholder {
  width: 100%;
  min-height: 260px;
  box-sizing: border-box;
}

/*
 ACCESS写真
 smartphone : 1枚ずつ横スクロール
 tablet     : 2枚ずつ横スクロール
 PC         : 4枚/行、スクロールなし
*/
.access-step-list {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

/* smartphone */
@media (max-width: 767px) {
  #access table.tbl-r02 th {
    width: 34%;
  }

  #access table.tbl-r02 td {
    width: 66%;
  }

  .access-step-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 2px;
    -webkit-overflow-scrolling: touch;
    padding: .5rem 2px 1rem;
  }

  .access-step-list .access-step {
    flex: 0 0 calc(100% - 4px) !important;
    width: calc(100% - 4px) !important;
    min-width: calc(100% - 4px) !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
}

/* tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .access-step-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: .5rem 2px 1rem;
  }

  .access-step-list .access-step {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    min-width: calc(50% - 8px) !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
}

/* PC */
@media (min-width: 1025px) {
  .access-step-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    overflow: visible;
    padding: .5rem 0 1rem;
  }

  .access-step-list .access-step {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}


/* =========================================================
   v0.4 スマホ店舗情報の横空白修正
   元サイトはスマホで th / td を縦積みにするため、
   それぞれ100%幅に戻す。
   ========================================================= */
@media (max-width: 599px) {
  #access table.tbl-r02,
  #access table.tbl-r02 tbody,
  #access table.tbl-r02 tr,
  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #access table.tbl-r02 tr {
    display: block;
  }

  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    display: block;
  }

  #access .map-image-placeholder,
  #access .map-placeholder {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   v0.5 店舗情報レスポンシブ最終調整
   - Smartphone / Tablet は見出し→内容の縦積み
   - PC は元サイト同様の中央寄せテーブル幅へ戻す
   ========================================================= */

/* Smartphone + Tablet:
   ブラウザを狭めた場合も実機と同じ縦積み表示にする */
@media (max-width: 1024px) {
  #access table.tbl-r02,
  #access table.tbl-r02 tbody,
  #access table.tbl-r02 tr,
  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #access table.tbl-r02 tr,
  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    display: block !important;
  }

  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    width: 100% !important;
  }

  #access .map-image-placeholder,
  #access .map-placeholder {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* PC:
   v0.3で全幅にした指定を戻し、元サイトの見え方に近い中央900pxへ */
@media (min-width: 1025px) {
  #access .access-inner {
    width: 85% !important;
    max-width: none !important;
    margin-left: auto;
    margin-right: auto;
  }

  #access table.tbl-r02 {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    table-layout: fixed;
  }

  #access table.tbl-r02 th {
    width: 32% !important;
  }

  #access table.tbl-r02 td {
    width: 68% !important;
  }
}


/* =========================================================
   v0.6 ブレークポイント統一
   TOP動画の判定と合わせて
   Smartphone: < 768
   Tablet    : 768 - 1199
   PC        : >= 1200
   とする。
   ========================================================= */

/* Narrow desktop / Tablet は縦積み */
@media (max-width: 1199px) {
  #access .access-inner {
    width: 95% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #access .info-wrap,
  #access .info-inner,
  #access .info,
  #access table.tbl-r02,
  #access table.tbl-r02 tbody,
  #access table.tbl-r02 tr,
  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #access table.tbl-r02 tr,
  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    display: block !important;
  }

  #access .map-image-placeholder,
  #access .map-placeholder {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* PC通常幅のみ元サイト風の中央寄せ */
@media (min-width: 1200px) {
  #access .access-inner {
    width: 85% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #access table.tbl-r02 {
    display: table !important;
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    table-layout: fixed;
  }

  #access table.tbl-r02 tbody {
    display: table-row-group !important;
  }

  #access table.tbl-r02 tr {
    display: table-row !important;
  }

  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    display: table-cell !important;
  }

  #access table.tbl-r02 th {
    width: 32% !important;
  }

  #access table.tbl-r02 td {
    width: 68% !important;
  }
}


/* =========================================================
   v0.7 599px以下：tbodyもblock化し、匿名テーブルの縮みを防ぐ
   451〜599px付近で発生していた右側空白への最小修正。
   ========================================================= */
@media (max-width: 599px) {
  #access table.tbl-r02 tbody {
    display: block !important;
  }
}


/* =========================================================
   v0.8 見た目調整
   v0.7までのレスポンシブ修正を維持したまま、
   3点のみ調整する。
   ========================================================= */

/* 1) Smartphone / Tablet:
   GALLERY直後の予約バナーを少しだけ離す */
@media (max-width: 1199px) {
  .accent {
    padding-top: 22px;
  }
}

/* 2) Tablet:
   店舗基本情報をPC同様「左：見出し / 右：内容」にする。
   Smartphone (<768px) は縦積みのまま維持。
   PC (>=1200px) はv0.7の表示を維持。 */
@media (min-width: 768px) and (max-width: 1199px) {
  #access table.tbl-r02 {
    display: table !important;
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    table-layout: fixed;
  }

  #access table.tbl-r02 tbody {
    display: table-row-group !important;
    width: auto !important;
  }

  #access table.tbl-r02 tr {
    display: table-row !important;
    width: auto !important;
  }

  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    display: table-cell !important;
    max-width: none !important;
    vertical-align: middle;
  }

  #access table.tbl-r02 th {
    width: 30% !important;
  }

  #access table.tbl-r02 td {
    width: 70% !important;
  }
}

/* 3) ACCESSカード:
   Tablet / PCでも、番号 → 見出し → 説明文の順に改行する。
   元CSSの768px以上でh3がinline-blockになる指定だけを上書き。 */
.access-step__number {
  display: grid;
  margin-left: auto;
  margin-right: auto;
}

.access-step__title {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  white-space: normal !important;
}


/* =========================================================
   v0.9 1列表示時の中央揃え統一
   600〜767px付近で発生していた「1列・左寄せ」をなくす。
   767px以下は1列中央揃え、768px以上はv0.8の2列表示を維持。
   ========================================================= */
@media (max-width: 767px) {
  #access table.tbl-r02 th,
  #access table.tbl-r02 td {
    text-align: center !important;
  }
}


/* =========================================================
   v1.0 shop.json 基本情報接続
   レイアウトはv0.9を維持。リンク表示だけ整える。
   ========================================================= */
#access #shopPhone a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .16em;
}

#access #shopAddress,
#access #shopAccess {
  line-height: 1.8;
}


/* =========================================================
   v1.2 shop.json MENU / 料金接続
   既存MENUレイアウトを保ったまま動的データを入れる。
   ========================================================= */
.menu-data {
  width: 100%;
}

.menu-course + .menu-course {
  margin-top: 2rem;
}

.menu-description,
.menu-note {
  margin: .35rem 0 .7rem;
  line-height: 1.7;
}

.menu-price-note {
  display: block;
  width: 100%;
  margin-top: .25rem;
  font-size: .85em;
}

.menu-regular-price {
  margin-right: .6em;
  text-decoration: line-through;
  opacity: .68;
}

.menu-loading,
.menu-empty {
  padding: 1.25rem 0;
  text-align: center;
}
/* =========================================================
   HP01 hero logo: shop.json / images logo_ja_sp + logo_ja_pc
   ========================================================= */
.hero-brand--logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.hero-brand__logo {
  display: block;
  width: min(54vw, 280px);
  max-height: 46vh;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.28));
}

.hero-brand__fallback {
  width: 100%;
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .hero-brand__logo {
    width: min(34vw, 360px);
    max-height: 48vh;
  }
}

@media screen and (min-width: 1200px) {
  .hero-brand__logo {
    width: min(28vw, 460px);
    max-height: 52vh;
  }
}
/* =========================================================
   HP01 TOP logo center fix (tablet / PC only)
   画像自体ではなく、配置基準を .bg-slider の中央へ固定する
   ========================================================= */
@media screen and (min-width: 768px) {
  .bg-slider .hero-brand--logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
  }
}

/* =========================================================
   HP01 ACCESS photo card width v0.1
   写真ACCESSカードを少し広くする
   ========================================================= */

/* Smartphone:
   すでにほぼ1画面幅なので現状を維持 */
@media (max-width: 767px) {
  .access-step-list .access-step {
    flex: 0 0 calc(100% - 4px) !important;
    width: calc(100% - 4px) !important;
    min-width: calc(100% - 4px) !important;
  }
}

/* Tablet / narrow desktop:
   2枚を詰めて見せるのではなく、1枚を広めにして横スクロール */
@media (min-width: 768px) and (max-width: 1199px) {
  .access-step-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .access-step-list .access-step {
    flex: 0 0 64% !important;
    width: 64% !important;
    min-width: 64% !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }
}

/* PC:
   4列 → 3列にして、1カードを広くする */
@media (min-width: 1200px) {
  .access-step-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px;
    overflow: visible !important;
  }

  .access-step-list .access-step {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* =========================================================
   HP01 ACCESS photo layout v0.2
   スマホのみ：
   - 写真カードを動画に近い横幅へ広げる
   - 駅徒歩メッセージから写真までの空白を縮める
   ========================================================= */
@media (max-width: 767px) {
  /* 写真ブロック自体をスマホ幅いっぱいに近づける */
  #accessImg.access-photo-block {
    width: calc(100% - 0.5rem) !important;
    max-width: 390px !important;
    margin: 2.4rem auto 0 !important;
    padding-top: 0 !important;
  }

  /* 旧CSSの ul 上余白・padding をリセットして、
     summary → 写真の距離を一定にする */
  #accessImg.access-photo-block .access-step-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 1カードを写真ブロックいっぱいに使用 */
  #accessImg.access-photo-block .access-step-list .access-step {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
  }
}

/* =========================================================
   HP01 water theme ACCESS photo-step heading fix v0.3
   実際の「7番出口」等の見出しは #accessImg h3 で指定されているため、
   テーマ変数で明示的に上書きする。
   ========================================================= */
#accessImg h3 {
  color: #49352C;
  background: rgba(249, 253, 254, 0.97);
  border-color: rgba(181, 145, 67, 0.55);
  box-shadow:
    0 6px 16px rgba(73, 53, 44, 0.08);
}

/* =========================================================
   Water theme: short underline beneath section subheadings
   Match the line exactly to the heading text color (#49352C).
   ========================================================= */
.gallery-title::after,
.access-title::after {
  background: var(--theme-basic-text) !important;
  opacity: 1 !important;
}