/* ============================================================
   sections.css  ＝ 各セクション固有の見た目
   いまは「ヘッダー」「KV（一番上の大きい写真エリア）」「特長」「利用シーン」「選ばれる理由」「ご利用までの流れ」「FAQ」「アクセス」「お問い合わせ」「フッター」（上から順）。
   区切り⑤でこのファイルの下に「アクセス（施設についてカードを含む）」「お問い合わせ」「フッター」を追加しました。
   ============================================================ */

/* ============================================================
   ヘッダー
   PC：高さ90px・白背景・下に薄い影。ロゴ左／ナビと赤ボタン右。
   960px未満：ロゴ左／メニューボタン右。ナビと赤ボタンは開閉パネルの中へ。
   ============================================================ */
.header {
  position: sticky;                     /* スクロールしても上に貼り付く（設計書に指定なしのため暫定。不要なら static に） */
  top: 0;
  z-index: 100;
  min-height: var(--header-height-pc);
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

/* 中身は画面幅いっぱい（1280pxの枠には収めない）。ロゴ左端は画面から30px、右ボタンは24px */
.header__inner {
  display: flex;
  align-items: center;
  min-height: var(--header-height-pc);
  padding-left: 30px;
  padding-right: 24px;
}

/* ---------- ロゴ＋施設名 ---------- */
.header__brand {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.header__logo {
  width: 100px;
  height: 45px;
}

.header__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header__name-sub {                     /* 上段（小） */
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1.3;
  color: #333333;
  white-space: nowrap;
}

.header__name-main {                    /* 下段（大） */
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  color: var(--color-text);
  white-space: nowrap;
}

/* ---------- ナビ＋赤ボタン ---------- */
.header__menu {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.header__list {
  display: flex;
  align-items: center;
}

.header__list li {
  position: relative;
}

/* 項目と項目の間の縦線（高さ20px・薄グレー） */
.header__list li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 20px;
  background: var(--color-line);
  transform: translateY(-50%);
}

.header__link {
  display: block;
  padding: 0 24px;
  font-size: 15px;
  letter-spacing: .05em;
  line-height: 50px;
  white-space: nowrap;
  transition: color var(--motion-fast) var(--ease-standard);   /* マウスを乗せると赤に */
}

.header__list li:last-child .header__link {
  padding-right: 0;
}

.header__link:hover,
.header__link:focus-visible {
  color: var(--color-red);
}

.header__menu .header-cta {
  margin-left: 28px;
}

/* メニューボタン（PCでは出さない。JSが動くときだけスマホ幅で表示） */
.header__toggle {
  display: none;
}

/* ---------- ヘッダー：1440px未満はPCのまま少しずつ縮める ---------- */
@media (max-width: 1439px) {
  .header__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .header__brand {
    gap: 16px;
  }

  .header__logo {
    width: 80px;
    height: 36px;
  }

  .header__name-sub {
    font-size: 12px;
  }

  .header__name-main {
    font-size: 20px;
  }

  .header__link {
    padding: 0 14px;
    font-size: 14px;
    letter-spacing: .03em;
  }

  .header__menu .header-cta {
    width: 168px;
    height: 46px;
    margin-left: 16px;
    font-size: 15px;
    letter-spacing: .05em;
  }
}

@media (max-width: 1199px) {
  .header__inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header__brand {
    gap: 10px;
  }

  .header__logo {
    width: 64px;
    height: 29px;
  }

  .header__name-sub {
    font-size: 11px;
    letter-spacing: .03em;
  }

  .header__name-main {
    font-size: 17px;
    letter-spacing: .06em;
  }

  .header__link {
    padding: 0 9px;
    font-size: 13px;
    letter-spacing: .02em;
  }

  .header__menu .header-cta {
    width: 136px;
    height: 42px;
    margin-left: 12px;
    font-size: 14px;
    letter-spacing: .03em;
  }
}

/* ---------- ヘッダー：960px未満（タブレット・スマホ） ---------- */
@media (max-width: 959px) {
  .header {
    min-height: var(--header-height-sp);
  }

  .header__inner {
    flex-wrap: wrap;                    /* JSが動かないときは、ナビを下に折り返して普通に見せる */
    min-height: var(--header-height-sp);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .header__brand {
    padding-block: 8px;
    gap: 10px;
  }

  .header__logo {
    width: 64px;
    height: 29px;
  }

  .header__name-sub {
    font-size: 12px;
  }

  .header__name-main {
    font-size: 20px;
  }

  /* JSなし：ナビと赤ボタンを常に見せる（重要なリンクが消えないように） */
  .header__menu {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    padding-bottom: 12px;
    justify-content: space-between;
    gap: 8px;
  }

  .header__list {
    flex-wrap: wrap;
  }

  .header__link {
    padding: 0 12px;
    line-height: 36px;
    font-size: 14px;
  }

  .header__menu .header-cta {
    width: 188px;
    height: 46px;
    margin-left: 0;
    font-size: 16px;
  }

  /* JSあり：メニューボタン＋開閉パネル */
  .js .header__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .js .header__toggle {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    color: var(--color-text);
  }

  .header__toggle .icon {
    grid-area: 1 / 1;
    width: 28px;
    height: 28px;
  }

  .header__toggle .icon--close {
    display: none;
  }

  .header.is-open .header__toggle .icon--menu {
    display: none;
  }

  .header.is-open .header__toggle .icon--close {
    display: block;
  }

  /* 開閉パネル：ヘッダーの下に画面いっぱいの白いパネルが出る */
  .js .header__menu {
    position: fixed;
    top: var(--header-height-sp);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height-sp));
    height: calc(100dvh - var(--header-height-sp));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
    width: auto;
    padding: 8px var(--gutter) 32px;
    overflow-y: auto;
    background: var(--color-white);
    visibility: hidden;                 /* 閉じているあいだはTabキーでも選ばれない */
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-standard),
                visibility 0s linear var(--motion-fast);
  }

  .js .header.is-open .header__menu {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--motion-fast) var(--ease-standard);
  }

  .js .header__list {
    flex-direction: column;
    align-items: stretch;
  }

  .js .header__list li + li::before {   /* パネル内は縦線ではなく横線で区切る */
    left: 0;
    right: 0;
    top: 0;
    width: auto;
    height: 1px;
    transform: none;
  }

  .js .header__link {
    padding: 0;
    font-size: 16px;
    line-height: 56px;
  }

  .js .header__list li:last-child .header__link {
    padding-right: 0;
  }

  .js .header__menu .header-cta {
    width: 100%;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .header__brand {
    gap: 8px;
  }

  .header__logo {
    width: 52px;
    height: 24px;
  }

  .header__name-sub {
    font-size: 10px;
    letter-spacing: .02em;
  }

  .header__name-main {
    font-size: 17px;
    letter-spacing: .06em;
  }
}

/* 360px以下（320pxまで）：施設名とメニューボタンがくっつかないよう、ロゴと施設名を少し小さくする */
@media (max-width: 360px) {
  .header__brand {
    gap: 6px;
  }

  .header__logo {
    width: 44px;
    height: 20px;
  }

  .header__name-sub {
    letter-spacing: 0;
  }

  .header__name-main {
    font-size: 16px;
    letter-spacing: .05em;
  }
}

/* メニューを開いているあいだは、背景のページが動かないようにする */
body.is-menu-open {
  overflow: hidden;
}

/* ============================================================
   KV（メインビジュアル）
   PC：ヘッダーの下に高さ700pxの写真。写真は3枚が1秒でフェード切替。
   左：金茶のタグ／見出し／リード／赤ボタン。右下：360°ビューのカードとサムネ3枚。
   960px未満：写真の上に文字、360°カードとサムネは下に縮小して並べる。
   ============================================================ */
.hero {
  position: relative;
  height: var(--hero-height-pc);
  overflow: hidden;
  background: #2b2f33;                  /* 画像が全部読み込めなかったときの背景色 */
  color: var(--color-white);
}

/* ----- 写真（3枚を重ねて、opacityで切り替える） ----- */
.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-fade) ease,
              visibility 0s linear var(--motion-fade);
}

.hero__slide.is-active {                /* 今表示している写真（一番上でフェードイン） */
  z-index: 3;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--motion-fade) ease;
}

.hero__slide.is-prev {                  /* 直前の写真（新しい写真が完全に重なるまで下に残す＝途中で暗くならない） */
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

.hero__slide.is-broken {                /* 読み込めなかった写真 */
  display: none;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;            /* 写真の下側を基準に切り出す（Figmaの1枚目の見え方に合わせた。上の天井側が多く切れる） */
}

/* 文字が読みやすいように、下に向かって少しだけ暗くする（Figmaには無い追加。不要なら opacity を 0 に） */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 60%);
}

/* ----- 文字ブロック（左端は左余白80px、下端はKV下端の47px上） ----- */
.hero__inner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--side-space) 47px;
  pointer-events: none;                 /* 写真の上の余白でクリックを邪魔しない */
}

.hero__copy {
  /* 文字ブロックの右端が、右下の360°カード（幅323px）＋すき間32pxの手前で止まるようにする。
     画面が狭くて（960〜約1250px）リード文の長い1行がカードにかかるときは、自動で折り返す。1440pxではこの上限に届かないので見た目は変わらない */
  max-width: calc(100% - 323px - 32px);
  pointer-events: auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.hero__copy .btn {
  text-shadow: none;
}

.hero__tag {                            /* 金茶の帯（342x42・白文字・左右余白12px） */
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 12px;
  margin-bottom: 20px;
  font-size: 20px;
  letter-spacing: .1em;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-white);
  background: var(--color-gold);
  text-shadow: none;
}

.hero__title {
  margin-bottom: 20px;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.25;
}

.hero__title-line {                     /* 見出しは2行に分ける */
  display: block;
}

.hero__lead {
  margin-bottom: 24px;
  font-size: 20px;
  letter-spacing: .1em;
  line-height: 1.5;
}

.hero__lead-line {
  display: block;
}

/* ----- 右下：360°ビューのカード（323x199） ----- */
.hero360 {
  position: absolute;
  right: var(--side-space);
  bottom: 130px;                        /* KV下端から130px上 */
  z-index: 5;
  width: 323px;
  aspect-ratio: 323 / 199;
  container-type: inline-size;          /* 中身（丸ピルの文字など）をカード幅に合わせて縮めるため */
  overflow: hidden;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-card);
  background: #666;
}

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

/* 写真の上に重ねる黒60%の丸いピル（246x82） */
.hero360__pill {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 246px;
  height: 82px;
  transform: translate(-50%, -50%);
  font-size: 14px;
  letter-spacing: .05em;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-white);
  background: rgba(0, 0, 0, .6);
  border-radius: 999px;
}

/* 「360°」の英数字はRobotoで表示する。日本語フォントによっては「°」が全角幅になり、後ろに広い隙間ができるため（制作者確認 2026-09-30） */
.hero360__en {
  font-family: var(--font-en);
}

/* 「360°」の丸い矢印アイコン（形はSVG、「360°」の文字はHTML） */
.hero360__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.hero360__mark .icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero360__mark-text {
  position: relative;
  font-family: var(--font-en);
  font-size: 9px;                       /* 円形の矢印の内側に収まる大きさ（11pxだと矢印の線に接していた） */
  font-weight: 500;
  letter-spacing: -.02em;
}

/* カードの幅に合わせて丸ピルの中身を比例縮小（PCの323pxでは上の値と同じ大きさになる） */
@supports (width: 1cqw) {
  .hero360__pill {
    gap: 3.1cqw;
    width: 76.2cqw;
    height: 25.4cqw;
    font-size: max(4.3cqw, 9px);
  }

  .hero360__mark {
    width: 13.6cqw;
    height: 13.6cqw;
  }

  .hero360__mark-text {
    font-size: max(2.8cqw, 6px);
  }
}

/* ----- 右下：サムネ3枚（60x60・間8px・枠2px） ----- */
.hero__thumbs {
  position: absolute;
  right: var(--side-space);
  bottom: 47px;                         /* KV下端から47px上 */
  z-index: 5;
  display: flex;
  gap: 8px;
}

.hero__thumb {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 2px solid transparent;        /* 現在のサムネだけ金茶の枠。他は透明（大きさが変わらないように） */
  background: #444;
  transition: border-color var(--motion-fast) var(--ease-standard);
}

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

/* 現在のもの以外は黒50%で暗くする */
.hero__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.hero__thumb.is-current {
  border-color: var(--color-gold);
}

.hero__thumb.is-current::after {
  opacity: 0;
}

.hero__thumb:hover {                    /* マウスを乗せると枠が付く */
  border-color: var(--color-gold);
}

.hero__thumb[hidden] {
  display: none;
}

/* ----- KV：タブレット・スマホ（960px未満） ----- */
@media (max-width: 959px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: auto;
    min-height: 560px;
  }

  .hero__inner {
    position: relative;
    inset: auto;
    padding: 96px var(--side-space) 32px;
  }

  .hero__copy {
    max-width: none;                    /* この幅ではカードは文字の下に並ぶので、横幅の上限は不要 */
  }

  /* 360°カードとサムネは、文字の下に横並びで縮小配置 */
  .hero__aside {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 12px;
    padding: 0 var(--side-space) 28px;
  }

  .hero360,
  .hero__thumbs {
    position: static;
  }

  .hero360 {
    position: relative;                 /* 中の丸ピルの基準にする */
    right: auto;
    bottom: auto;
    width: 240px;
  }

  /* 文字が写真の上に載るので、PCより広い範囲を少し暗くする（Figmaには無い追加） */
  .hero__shade {
    background: linear-gradient(to top, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .38) 55%, rgba(0, 0, 0, .18) 100%);
  }

  .hero__thumbs {
    margin-left: auto;
    gap: 6px;
  }

  .hero__thumb {
    width: 52px;
    height: 52px;
  }

  .hero__tag {
    height: 36px;
    margin-bottom: 12px;
    font-size: 16px;
  }

  .hero__title {
    margin-bottom: 18px;
    font-size: 38px;
  }

  .hero__lead {
    margin-bottom: 22px;
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 600px;
  }

  .hero__inner {
    padding-top: 72px;
  }

  .hero__tag {
    height: 32px;
    font-size: 13px;
    letter-spacing: .06em;
  }

  .hero__title {
    font-size: 34px;
    line-height: 1.3;
  }

  .hero__lead {
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: .06em;
  }

  .hero360 {
    width: 200px;
  }

  .hero__thumb {
    width: 48px;
    height: 48px;
  }
}

/* 狭いスマホ（480px以下）：見出しを1段階小さく */
@media (max-width: 480px) {
  .hero__title {
    font-size: clamp(24px, 7.4vw, 30px);
  }

  .hero__tag {
    max-width: 100%;
    white-space: normal;
    height: auto;
    min-height: 32px;
    padding-block: 6px;
    line-height: 1.3;
  }
}

/* ============================================================
   特長（Feature）　背景：ベージュ
   PC：数字のカード 3列×2（1枚 約409x123・間26px）、その下に写真スライダー。
   写真スライダー：同じ大きさの写真（740x492・間40px）が並び、真ん中の写真が画面中央。
   左右の写真は画面の端で切れる（中央だけ大きくする加工はしない）。
   768〜959px：カード2列・写真幅560px　767px以下：カード2列×3段・写真幅は画面の84%
   ============================================================ */
.feature {
  background: var(--color-beige);
}

/* ----- 数字のカード ----- */
.feature__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 32px;
}

.spec-card {
  min-height: 123px;
  padding: 24px 24px 18px;
  background: var(--color-white);
  border-radius: var(--radius-card);
}

.spec-card__label {                     /* 項目名（面積など）：14px・薄グレー */
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--color-text-sub);
}

.spec-card__value {                     /* 赤い数字の行（数字と「約」「㎡」などの下端をそろえる） */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 12px;
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1;
  color: var(--color-red);
}

.spec-card__num {                       /* 数字：48px */
  font-size: 48px;
}

.spec-card__unit {                      /* 「約」「最大」や単位：約22px */
  font-size: 22px;
}

.spec-card__unit--pre {
  margin-right: 6px;
}

.spec-card__unit--post {
  margin-left: 4px;
}

/* ----- 写真スライダー（画面の横幅いっぱい） ----- */
.feature-slider {
  margin-top: 60px;                     /* カードの下から写真まで60px */
}

.feature-slider .swiper-slide {         /* 写真1枚の幅（PC 740px） */
  width: 740px;
  height: auto;
}

.feature-slider__img {                  /* 写真は 740x492（3:2）に切り出して表示、角丸8px */
  width: 100%;
  aspect-ratio: 740 / 492;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: #d9d6cf;                  /* 写真が読み込めないときの下地 */
}

/* ◀ ▶ ボタン：写真の下端から16px下・中央・間6px。スライダーが動くときだけ表示 */
.feature-slider__nav {
  display: none;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.feature-slider.is-ready .feature-slider__nav {
  display: flex;
}

/* ----- スライダーが動かないとき（JSなし・Swiperが読み込めない）：写真3枚を並べるだけ ----- */
.feature-slider__viewport:not(.swiper-initialized) .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  box-sizing: border-box;
  padding-inline: var(--side-space);
}

.feature-slider__viewport:not(.swiper-initialized) .swiper-slide {
  width: auto;
}

.feature-slider__viewport:not(.swiper-initialized) .is-clone {   /* ループ用のコピーは出さない */
  display: none;
}

/* ----- 特長：PC幅が狭いとき（960〜1199px）：カードが細くなるので、数字が2行に割れないよう少し小さく ----- */
@media (max-width: 1199px) {
  .spec-card {
    padding-inline: 20px;
  }

  .spec-card__num {
    font-size: 40px;
  }

  .spec-card__unit {
    font-size: 19px;
  }
}

/* ----- 特長：タブレット（768〜959px） ----- */
@media (max-width: 959px) {
  .feature__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
  }

  .spec-card {
    min-height: 112px;
    padding: 20px 20px 16px;
  }

  .spec-card__label {
    font-size: 13px;
  }

  .spec-card__value {
    margin-top: 10px;
  }

  .spec-card__num {
    font-size: 40px;
  }

  .spec-card__unit {
    font-size: 19px;
  }

  .feature-slider {
    margin-top: 48px;
  }

  .feature-slider .swiper-slide {
    width: 560px;
  }
}

/* ----- 特長：スマホ（767px以下）：カードは2列×3段 ----- */
@media (max-width: 767px) {
  .feature__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
  }

  .spec-card {
    min-height: 0;
    padding: 16px 16px 16px;
  }

  .spec-card__value {
    margin-top: 8px;
  }

  .spec-card__num {
    font-size: 32px;
  }

  .spec-card__unit {
    font-size: 16px;
  }

  .spec-card__unit--pre {
    margin-right: 4px;
  }

  .spec-card__unit--post {
    margin-left: 3px;
  }

  .feature-slider {
    margin-top: 36px;
  }

  .feature-slider .swiper-slide {
    width: 84vw;                        /* 隣の写真が左右に少し見える幅 */
  }

  .feature-slider__viewport:not(.swiper-initialized) .swiper-wrapper {
    grid-template-columns: minmax(0, 1fr);   /* 動かないときは縦に並べる */
    gap: 16px;
  }
}

/* ----- 特長：狭いスマホ（480px以下）：2列のカードに「最大300名規模」が1行で収まるよう、数字を小さく・余白を詰める ----- */
@media (max-width: 480px) {
  .spec-card {
    padding: 14px 12px;
  }

  .spec-card__num {                     /* 画面幅に合わせて 24px（320px）〜28px（375px以上） */
    font-size: clamp(24px, 7.5vw, 28px);
  }

  .spec-card__unit {                    /* 同じく 12px〜14px */
    font-size: clamp(12px, 3.75vw, 14px);
  }

  .spec-card__unit--pre {
    margin-right: 3px;
  }

  .spec-card__unit--post {
    margin-left: 2px;
  }
}

/* ============================================================
   利用シーン（Scene）　背景：薄ベージュ
   PC：左リスト560px・間64px・右パネル656px。
     左リスト1項目は高さ164px、上に区切り線。選択中は右端に赤い縦線（幅2px）と赤い三角。
     右パネルは白いカード656x436に画像を1枚ずつ表示。上に金茶の見出し、右下に ◀ ▶ ボタン
     （画像切り替え用。画像が2枚ある項目＝企業式典・社内イベントだけ見える）。
   960px未満：リストが上（各項目は幅いっぱい）、画像が下。
   JSが動かないとき（.is-tabs が付かないとき）：リスト → 画像（計4枚）を縦に並べるだけ。
   ============================================================ */
.scene {
  background: var(--color-light-beige);
}

/* 注記「※写真とレイアウト図面は今後追加」（12px・薄グレー） */
.scene__note {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .05em;
  line-height: 1.5;
  color: var(--color-text-sub);
}

.scene__body {
  margin-top: 34px;
}

/* JSが動いているとき（タブとして使えるとき）：PCは左右2列 */
.scene__body.is-tabs {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 656fr);
  column-gap: 64px;
  align-items: start;
}

/* ----- 左：リスト ----- */
.scene__list {
  border-bottom: 1px solid var(--color-line);
}

.scene__item {
  position: relative;
  min-height: 164px;
  padding: 26px 16px 23px;
  border-top: 1px solid var(--color-line);
}

.scene__label {                         /* 項目の見出し：20px・太字 */
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.4;
}

.scene__desc {                          /* 説明文：14px */
  margin-top: 13px;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1.5;
}

.scene__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

/* 選択中の印：右端の赤い縦線（上下に16pxずつ余白）と、その中央の赤い三角。タブとして動くときだけ出す */
.scene__item::after {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  right: 0;
  width: 2px;
  background: var(--color-red);
  opacity: 0;
}

.scene__mark {
  position: absolute;
  top: 50%;
  right: -7px;
  color: var(--color-red);
  transform: translateY(-50%);
  opacity: 0;
}

.is-tabs .scene__item {
  cursor: pointer;
}

.is-tabs .scene__item.is-current::after,
.is-tabs .scene__item.is-current .scene__mark {
  opacity: 1;
}

/* ----- 右：画像パネル ----- */
.scene__panels {
  min-width: 0;
}

.scene__panel[hidden] {
  display: none;
}

.scene__caption {                       /* 画像の上の金茶の見出し（カード上端の約19px上に文字の中心） */
  margin-bottom: 5px;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--color-gold);
}

.scene__frame {                         /* 白いカード（656x436の比率）。画像は切らずに収める */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 656 / 436;
  overflow: hidden;
  background: var(--color-white);
  border-radius: var(--radius-card);
  font-size: 14px;                      /* 画像が読み込めないときに出る代わりの文字の大きさ */
  color: var(--color-text-sub);
}

.scene__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scene__frame--photo img {              /* 写真（図面ではない）はカードいっぱいに切り出して表示 */
  object-fit: cover;
}

.scene__frame[hidden] {                 /* 同じ項目の2枚目以降（◀ ▶ で切り替え） */
  display: none;
}

/* 切り替えたときの軽いフェード（JSが .is-fading を付ける） */
.scene__body.is-tabs .is-fading {
  animation: scene-fade .25s ease;
}

@keyframes scene-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__body.is-tabs .is-fading {
    animation: none;
  }
}

/* ◀ ▶ ボタン（画像の切り替え）：カードの右端にそろえ、カード下端から10px下。
   タブとして動くとき、かつ画像が2枚以上ある項目を選んでいるときだけ表示（JSが hidden を外す） */
.scene__nav {
  display: none;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 10px;
}

.is-tabs .scene__nav {
  display: flex;
}

.is-tabs .scene__nav[hidden] {          /* 画像1枚の項目：ボタンは見えない・押せない・読まれない。
                                           場所だけ残して、切り替えのたびに下の段がガタつかないようにする */
  visibility: hidden;
}

/* JSが動かないとき：画像（項目1は2枚）をリストの下に縦に並べる */
.scene__body:not(.is-tabs) .scene__panels {
  max-width: 656px;
  margin-top: 40px;
}

.scene__body:not(.is-tabs) .scene__panel + .scene__panel {
  margin-top: 32px;
}

.scene__body:not(.is-tabs) .scene__frame + .scene__frame {
  margin-top: 16px;
}

/* ----- 下：相談の呼びかけ＋赤い大ボタン（中央） ----- */
.scene__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-top: 120px;
  text-align: center;
}

.scene__cta-lead {
  font-size: 20px;
  letter-spacing: .06em;
  line-height: 1.5;
  color: #333333;
}

/* ----- 利用シーン：PC幅が狭いとき（960〜1199px）は左右の間を少し詰める ----- */
@media (max-width: 1199px) {
  .scene__body.is-tabs {
    column-gap: 40px;
  }
}

/* ----- 利用シーン：タブレット・スマホ（960px未満）：リストが上、画像が下 ----- */
@media (max-width: 959px) {
  .scene__body {
    margin-top: 28px;
  }

  .scene__body.is-tabs {
    display: block;
  }

  .scene__body.is-tabs .scene__panels {
    margin-top: 32px;
  }

  .scene__item {
    min-height: 0;
  }

  .scene__label {
    font-size: 18px;
  }

  .scene__cta {
    margin-top: 72px;
  }

  .scene__cta-lead {
    font-size: 18px;
  }
}

/* ----- 利用シーン：スマホ（767px以下） ----- */
@media (max-width: 767px) {
  .scene__item {
    padding: 20px 14px 20px 12px;
  }

  .scene__label {
    font-size: 17px;
  }

  .scene__desc {
    margin-top: 8px;
    font-size: 13px;
  }

  .scene__tags {
    gap: 6px;
    margin-top: 14px;
  }

  .scene__body:not(.is-tabs) .scene__panels {
    margin-top: 32px;
  }

  .scene__cta {
    gap: 20px;
    margin-top: 56px;
  }

  .scene__cta-lead {
    font-size: 16px;
  }
}

/* ============================================================
   選ばれる理由（Reason）　背景：白
   ・理由が3つ縦に並ぶ。各理由の左上に、金茶15%の大きな数字（01〜03）。
     見出し（h3）は数字の左端から60px右に置き、数字の下側に重ねる（数字の高さ104pxぶんの箱に、見出しを上へ引き上げて重ねている）
   ・01：本文の下に写真2枚（各624x416・間32px）
   ・02：8項目（PC 4列×2段・幅290px・列の間40px）＋上下に線のある一文
   ・03：本文が左（幅750pxまで）、写真が右（480x320）
   ============================================================ */

/* ----- 理由ひとつぶんのまとまり。まとまりの間はPCで72px（Figma実測） ----- */
.reason__block {
  margin-top: 72px;
}

/* 01だけ、リード文との間を詰める（数字の箱の上側に余白があるため） */
.reason__block--first {
  margin-top: 24px;
}

/* ----- 大きな数字＋見出し ----- */
.reason__num {
  display: block;
  font-family: var(--font-en);
  font-size: 104px;                     /* Figma基準（設計書§4）。タブレット88px・スマホ72px */
  font-weight: 700;
  line-height: 1;
  margin-left: -.047em;                 /* 左端揃え：Roboto Boldの「0」の左サイドベアリング（0.0466em・canvas実測）を打ち消し、数字のグリフの左端を本文の左端に合わせる（01〜03とも先頭は「0」で共通・em指定なので文字サイズに追従） */
  color: var(--color-gold-15);
  user-select: none;
}

.reason__title {
  position: relative;                   /* 数字より手前に表示する */
  margin: -56px 0 28px 60px;            /* 上：数字に重ねる（見出しの文字中心が数字の下端の約22px上・Figma実測）／左：数字の左端から60px右／下：本文との間 */
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.4;
}

/* ----- 本文（01と03）：15px・行の高さ1.55・字間広め。2つの段落は改行だけでつなぐ（間の余白なし） ----- */
.reason__text {
  font-size: 15px;
  letter-spacing: .15em;
  line-height: 1.55;
}

/* ----- 01：写真2枚（横並び・間32px。縦横比は3:2で切り取る） ----- */
.reason__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.reason__photos img,
.reason__support-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ----- 02：8項目（1440px以上＝4列×2段／960〜1439px＝3列（3・3・2）／768〜959px＝2列／スマホ＝1列） ----- */
.reason__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;                            /* 列の間40px・行の間40px（1行ぶんの高さで行ピッチ180pxになる） */
  margin-top: 43px;                     /* 見出しの下端からアイコンの上端まで（見出しの下の余白28pxと重なるので、実際はこの値がそのまま間隔になる） */
}

.reason-item {
  min-width: 0;
}

/* アイコン＋項目名（横並び。項目名が2行になるときは2行の真ん中にアイコンが揃う） */
.reason-item__head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
}

/* 赤い角丸四角のアイコン（44x44。中の線アイコンは白22px） */
.reason-item__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: var(--radius-icon);
}

.reason-item__icon .icon {
  width: 22px;
  height: 22px;
}

.reason-item__name {
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.3;
}

/* 外部リンクの項目名：マウスを乗せると色が変わる（0.2秒） */
.reason-item__link {
  transition: color var(--motion-fast) var(--ease-standard);
}

.reason-item__link:hover,
.reason-item__link:focus-visible {
  color: var(--color-red);
}

/* 項目名の右の小さな↗（制作者指示 2026-09-30：文字より控えめに、細く小さく）
   アイコンの箱が文字の0.7倍（幅・高さ .7em。制作者が開発ツールで確認して指定した値）、文字との間は4px、線の太さは1.0（例外の細さ。sprite.svg 参照）。
   縦の位置は基準線より0.15em下げている。見た目の位置が合わなければ vertical-align だけ調整する */
.reason-item__ext {
  display: inline-block;
  width: .7em;                      /* 箱そのものが文字の0.7倍（制作者指定 2026-09-30：ブラウザの開発ツールで確認した値） */
  height: .7em;
  margin-left: 4px;                 /* 文字との間 4px（箱の左端から） */
  vertical-align: -.15em;
}

.reason-item__text {
  margin-top: 16px;
  font-size: 13px;
  letter-spacing: .12em;
  line-height: 1.55;
}

/* 02の下：上下に薄い線がある一文 */
.reason__closing {
  margin-top: 40px;
  padding-block: 22px;
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1.6;
  border-block: 1px solid var(--color-line);
}

/* ----- 03：文章（左）＋写真（右）。文章は写真の縦の真ん中に揃える ----- */
.reason__split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 17px;                     /* Figmaでは03だけ、見出しと写真の間が01の本文より少し広い */
}

.reason__split .reason__text {
  flex: 1 1 0;
  min-width: 0;
  max-width: 750px;
  font-size: 16px;                      /* Figma実測：03の本文は01より大きく、行の間・字間も広い（16px・行の高さ1.75・字間0.2em）。設計書§4の「01/03とも15px」とは違う（要確認） */
  letter-spacing: .2em;
  line-height: 1.75;
}

.reason__support-img {
  flex: 0 0 clamp(300px, 40vw, 480px);  /* PCでは480px。画面が狭いと縮む */
  width: clamp(300px, 40vw, 480px);
}

/* ----- 選ばれる理由 02：画面幅1440px未満（中身が1280px未満）の960〜1439pxは 3列（3・3・2）。
   4列だと1項目が細くなって説明文が細かく折り返すため（制作者指示 2026-09-30）。最後の行は2項目で左寄せ（gridなので自然にそうなる） ----- */
@media (max-width: 1439px) {
  .reason__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

/* 960〜1199px：3列でも少し窮屈なので、列の間と項目名を少し小さく */
@media (max-width: 1199px) {
  .reason__items {
    column-gap: 32px;
  }

  .reason-item__name {
    font-size: 16px;
  }
}

/* ----- 選ばれる理由：タブレット（768〜959px）：数字88px（104pxを比例縮小）・02は2列 ----- */
@media (max-width: 959px) {
  .reason__block {
    margin-top: 56px;
  }

  .reason__block--first {
    margin-top: 24px;
  }

  .reason__num {
    font-size: 88px;
  }

  .reason__title {
    margin: -47px 0 22px 55px;
    font-size: 21px;
  }

  .reason__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    margin-top: 32px;
  }

  .reason-item__name {
    font-size: 16px;
  }

  .reason__photos {
    gap: 24px;
  }

  .reason__split {
    margin-top: 12px;
  }

  .reason__split .reason__text {
    font-size: 15px;
  }
}

/* ----- 選ばれる理由：スマホ（767px以下）：1列の縦積み・数字72px ----- */
@media (max-width: 767px) {
  .reason__block {
    margin-top: 48px;
  }

  .reason__block--first {
    margin-top: 20px;
  }

  .reason__num {
    font-size: 72px;
  }

  .reason__title {
    margin: -39px 0 18px 45px;
    font-size: 18px;
  }

  .reason__text {
    font-size: 14px;
    letter-spacing: .1em;               /* スマホは字間を少し詰めて読みやすく（設計書に指定なし・暫定） */
  }

  /* 01の写真：縦に積む */
  .reason__photos {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 28px;
  }

  /* 02：1列 */
  .reason__items {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 22px;
  }

  .reason__closing {
    margin-top: 32px;
    padding-block: 18px;
    font-size: 13px;
    letter-spacing: .06em;              /* 設計書に指定なし・暫定 */
  }

  /* 03：本文 → 写真 の縦並び */
  .reason__split {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    margin-top: 0;
  }

  .reason__split .reason__text {
    flex: none;
    max-width: none;
    font-size: 14px;
    letter-spacing: .1em;
  }

  .reason__support-img {
    flex: none;
    width: 100%;
  }
}

/* ----- 選ばれる理由：狭いスマホ（480px以下）：数字は72pxのまま、見出しだけ1段階小さく ----- */
@media (max-width: 480px) {
  .reason__title {
    margin: -38px 0 16px 45px;
    font-size: 17px;
  }
}

/* ============================================================
   ご利用までの流れ（How to Use）　背景：薄ベージュ
   ・白いカード6枚（180x206・角丸8px）。カードの間40pxに灰色の「>」
   ・カードの中：番号（01〜06）→ 赤丸アイコン（44px）→ 太字の見出し → 説明。すべて中央揃え
   ・1440px以上：6列（中身の幅が1280pxになりカードが180px）／768〜1439px：3列×2段／スマホ（767px以下）：縦並び（矢印は下向き）
   ============================================================ */
.flow {
  background: var(--color-light-beige);
}

/* カードの列。--flow-gap ＝カード間（矢印が入る幅）。画面幅で切り替える */
.flow__list {
  --flow-gap: 40px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px var(--flow-gap);
  margin-top: 24px;                     /* 見出しの下端からカードの上端まで24px（Figma実測） */
}

.flow-step {
  position: relative;
  display: flex;
}

/* 白いカード（列の中で高さをそろえる。最低206px） */
.flow-step__card {
  flex: 1;
  min-width: 0;
  min-height: 206px;
  padding: 19px 14px 25px;
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-card);
}

/* 番号（Roboto・14px・薄グレー） */
.flow-step__num {
  display: block;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  color: var(--color-text-sub);
}

/* 赤い丸（44px）と、中の白い線アイコン（22px） */
.flow-step__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 7px auto 0;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: var(--radius-round);
}

.flow-step__icon .icon {
  width: 22px;
  height: 22px;
}

.flow-step__title {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 20px;
}

.flow-step__text {
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.5;
  color: #333333;
}

/* カードの間の矢印「>」。カードの右側の隙間（幅＝--flow-gap）の真ん中に置く（飾り） */
.flow-step__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  display: grid;
  place-items: center;
  width: var(--flow-gap);
  color: #8C8C8C;                       /* 灰色（Figma目視の暫定値） */
  pointer-events: none;
}

.flow-step__arrow .icon {
  width: 20px;
  height: 20px;
}

/* ----- 流れ：1439px以下（画面幅が1440px未満＝中身が1280px未満のPC幅〜タブレット）：3列×2段。6枚だと1枚が細くて読みにくいため（制作者指示）。
   3枚目の後ろ（段の右端）には矢印を出さない＝1段目から2段目への折り返しで矢印が変な位置に出ない。
   文字・余白は1440px以上と同じ標準サイズのまま（カードが広くなるので縮めない） ----- */
@media (max-width: 1439px) {
  .flow__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .flow-step:nth-child(3) .flow-step__arrow {
    display: none;
  }
}

/* ----- 流れ：タブレット（959px以下）：見出しとカードの間を少し詰める ----- */
@media (max-width: 959px) {
  .flow__list {
    margin-top: 20px;
  }
}

/* ----- 流れ：スマホ（767px以下）：縦並び。矢印は次のカードとの間に、下向きで ----- */
@media (max-width: 767px) {
  .flow__list {
    --flow-gap: 36px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--flow-gap);
  }

  .flow-step {
    width: 100%;
    max-width: 480px;                   /* 広いスマホで間延びしないように（設計書に指定なし・暫定） */
    margin-inline: auto;
  }

  .flow-step:nth-child(3) .flow-step__arrow {
    display: grid;                      /* タブレットで消した3枚目の矢印を戻す */
  }

  .flow-step__arrow {
    top: 100%;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--flow-gap);
  }

  .flow-step__arrow .icon {
    transform: rotate(90deg);           /* 「>」を下向きの「v」にする */
  }
}

/* ============================================================
   FAQ（よくあるご質問）　背景：白
   ・白いカード（幅1280px・角丸8px・薄い影）の中に質問5行（部品は components.css の .accordion）
   ・下に「よくあるご質問 →」ボタン（中央。カードとの間24px）
   ============================================================ */
.faq__list {
  margin-top: 40px;                     /* 見出しの下端からカードの上端まで（Figma実測 約39px） */
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .1);   /* 薄い影（Figma目視の暫定値） */
}

.faq__more {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

@media (max-width: 959px) {
  .faq__list {
    margin-top: 32px;
  }
}

@media (max-width: 767px) {
  .faq__list {
    margin-top: 24px;
  }
}

/* ----- 見出しの英語ラベルが日本語の下の段に落ちるとき（スマホ）：縦線をやめ、左端にそろえて2段目に置く ----- */
@media (max-width: 540px) {
  .faq .sec-head__en {                  /* 「会議室についてよくあるご質問」は長く、540px前後以下では英語が下の段に落ちる */
    flex-basis: 100%;
    margin: 8px 0 0;
    padding-left: 0;
  }

  .faq .sec-head__en::before {
    display: none;
  }
}

@media (max-width: 340px) {
  .flow .sec-head__en {                 /* 320px前後では「ご利用までの流れ」の右に英語が入り切らない */
    flex-basis: 100%;
    margin: 8px 0 0;
    padding-left: 0;
  }

  .flow .sec-head__en::before {
    display: none;
  }
}

/* ============================================================
   アクセス（Access）　背景：ベージュ（下の「施設について」カードまで同じ背景）
   ・PC：左510px（施設名・住所・交通の白いボックス）／右656px（Google地図。縦横比 656:437＝3:2）。左右の間は約114px
   ・960px未満：住所 → 交通 → 地図 の順に縦積み（地図の縦横比は 4:3）
   ・施設について：白い大カード（幅1280px・角丸16px・内側の余白80px）
   ・下の余白：Figmaでは約200px空いていたが、制作者指示（2026-09-30）で「他のセクションの間と同じ」に揃えた。
     他のセクション間（前の中身の下端〜次の中身の上端）は PC160px／タブレット128px／スマホ96px（＝上下の余白の合計）。
     下の「お問い合わせ」は上の余白が section-space−4px なので、こちらは section-space＋4px にして合計を同じにしている
   ============================================================ */
.access.l-section {
  padding-bottom: calc(var(--section-space) + 4px);   /* 「お問い合わせ」の中身までが他のセクション間と同じ（PC160px・タブレット128px・スマホ96px） */
  background: var(--color-beige);
}

.access__grid {
  display: grid;
  grid-template-columns: minmax(0, 510fr) minmax(0, 656fr);
  column-gap: min(114px, 8vw);          /* 1440pxで114px（左510＋間114＋右656＝1280）。画面が狭くなると詰める */
  margin-top: 30px;                     /* 見出しの下端から地図の上端まで（Figma実測 約31px） */
}

.access__info {
  min-width: 0;
  padding-top: 48px;                    /* 施設名の行の上端が地図の上端より約48px下（Figma実測） */
}

.access__name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
}

.access__addr {
  margin-top: 24px;
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 1.7;
}

/* 交通リスト（白いボックス。510x207・角丸なし・行の高さ40px・赤い電車アイコン） */
.access__lines {
  margin-top: 42px;
  padding: 23.5px 32px 23.5px 31px;
  background: var(--color-white);
}

.access__line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 40px;
  padding-block: 6.4px;
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 1.7;
}

.access__line-icon {
  width: 18px;
  height: 18px;
  margin-top: 4.6px;                    /* 1行目の文字の中心に揃える */
  color: var(--color-red);
}

/* Google地図（縦横比 3:2＝656x437） */
.access__map {
  min-width: 0;
}

.access__map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 656 / 437;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-white);       /* 地図が読み込めないときも白い枠として場所が残る */
}

/* ----- 施設について（白い大カード） ----- */
.about {
  margin-top: 72px;                     /* 地図の下端からカードの上端まで（Figma実測 72px） */
  padding: 80px 80px 83px;
  background: var(--color-white);
  border-radius: var(--radius-panel-lg);
}

.about__label {
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1.7;
  color: var(--color-gold);
}

.about__title {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
}

.about__text {
  margin-top: 24px;
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 2;
}

.about__link {
  display: inline-flex;
  align-items: center;
  margin-top: 28px;
  font-size: 14px;
  letter-spacing: .1em;
  line-height: 1.7;
  color: var(--color-red);
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.about__link:hover {
  opacity: .7;
}

/* 「施設の詳細を見る」の右の↗：項目名の↗と同じ作り（箱は文字と同じ1em＝14px、矢印は約0.7倍＝約9.8px、線1.0） */
.about__link-icon {
  width: .7em;                      /* 項目名の↗と同じ：箱が文字の0.7倍 */
  height: .7em;
  margin-left: 4px;                 /* 文字との間 4px */
}

/* ----- アクセス：タブレット・スマホ（960px未満）：住所 → 交通 → 地図 の縦積み ----- */
@media (max-width: 959px) {
  .access__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }

  .access__info {
    padding-top: 0;
  }

  .access__name {
    font-size: 20px;
  }

  .access__addr {
    margin-top: 16px;
    font-size: 15px;
  }

  .access__lines {
    margin-top: 24px;
  }

  .access__line {
    font-size: 15px;
  }

  .access__map {
    margin-top: 32px;
  }

  .access__map iframe {
    aspect-ratio: 3 / 2;
  }

  .about {
    margin-top: 48px;
    padding: 48px 40px 52px;
  }

  .about__title {
    font-size: 20px;
  }

  .about__text {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .access__name {
    font-size: 18px;
    letter-spacing: .08em;
  }

  .access__addr,
  .access__line {
    font-size: 14px;
    letter-spacing: .06em;              /* スマホは字間を少し詰める（設計書に指定なし・暫定） */
  }

  .access__lines {
    padding: 16px 16px 16px 15px;
  }

  .access__map iframe {
    aspect-ratio: 4 / 3;                /* スマホは4:3（設計書§3） */
  }

  .about {
    margin-top: 40px;
    padding: 32px 20px 36px;
  }

  .about__title {
    font-size: 18px;
    letter-spacing: .06em;
  }

  .about__text {
    font-size: 14px;
    letter-spacing: .06em;
    line-height: 1.9;
  }
}

/* 狭いスマホ（480px以下）：左右の余白を詰める */
@media (max-width: 480px) {
  .about {
    padding-inline: 16px;
  }
}

/* ============================================================
   お問い合わせ（Contact）　背景：薄ベージュ
   ・PC：幅800pxの塊を中央に。左＝見出し（32px）と一言、右＝赤い大ボタン（426x80）。高さ約240px
   ・960px未満：左揃えで縦に並べる。スマホ（480px以下）はボタンが幅いっぱい（部品 .btn--large）
   ============================================================ */
.contact {
  padding: calc(var(--section-space) - 4px) var(--gutter);   /* PCで高さ約242px（Figma実測 約241px） */
  background: var(--color-light-beige);
  scroll-margin-top: var(--header-height-pc);
}

.contact__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(800px, 100%);
  margin-inline: auto;
}

.contact__title {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.5;
  color: #333333;
}

.contact__lead {
  margin-top: 12px;
  font-size: 20px;
  letter-spacing: .06em;
  line-height: 1.5;
  color: #333333;
}

.contact .btn--large {
  flex: none;
}

@media (max-width: 959px) {
  .contact {
    scroll-margin-top: var(--header-height-sp);
  }

  .contact__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .contact__title {
    font-size: 26px;
  }

  .contact__lead {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .contact__title {
    font-size: 24px;
  }

  .contact__lead {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .contact__inner {
    align-items: stretch;               /* ボタンを幅いっぱいに */
  }
}

/* ============================================================
   フッター　背景：濃いグレー #3F3F3F（貸会議室ネットと同じ）
   ・PC：中身の幅1080px（左右180px）・高さ313px。文字は白
   ・TKPのサービス16件（12px・行ピッチ32px・「 / 」区切り・下線）→ 区切り線（1px #9C9C9C）→ 下段リンク6件（暫定11px）
     → SNS（白丸40px・間8px）と (C) TKP Corporation（右端）
   ・スマホ：リンクは自然に折り返す（1行1リンクにはしない）。区切りの「/」は直前のリンクの後ろに付くので、行の終わりに残ることがある
   ============================================================ */
.footer {
  padding: 60px max(var(--gutter), calc((100% - 1080px) / 2)) 69px;
  color: var(--color-white);
  background: var(--color-footer);
}

.footer__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* リンクの並び（折り返しあり）。各リンクの後ろに「/」を付け、最後のリンクだけ付けない */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 400;
  line-height: 32px;                    /* 行ピッチ32px */
}

.footer__links a {
  text-decoration: underline;
  transition: opacity var(--motion-fast) var(--ease-standard);
}

.footer__links a:hover {
  text-decoration: none;                /* マウスを乗せると下線が消える */
}

.footer__links li:not(:last-child)::after {
  content: "/";
  margin-inline: 9px;                   /* 「/」の左右（Figma実測：リンクの端から「/」の中心まで約11px） */
}

.footer__links--legal {
  font-size: 11px;                      /* 暫定（Figma実測は10px。小さすぎるので+1px。要確認） */
}

/* 区切り線の下の下段（線 1px #9C9C9C。線の上は26px空ける） */
.footer__bottom {
  margin-top: 26px;
  border-top: 1px solid var(--color-footer-line);
}

.footer__sns-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.footer__sns {
  display: flex;
  gap: 8px;
}

.footer__sns-link {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
}

.footer__sns-icon {
  width: 40px;
  height: 40px;
  stroke: none;                         /* 共通の .icon は線で描く設定なので、色付きのSNSアイコンでは線を消す */
}

.footer__copy {
  font-size: 12px;
  line-height: 22px;
  font-weight: 400;
}

@media (max-width: 959px) {
  .footer {
    padding-block: 48px 72px;           /* 下は、右下に固定されるページトップボタンとコピーライトが重ならないよう広めに */
  }
}

@media (max-width: 767px) {
  .footer__links {
    line-height: 28px;
  }

  .footer__bottom {
    margin-top: 20px;
  }

  .footer__sns-row {
    margin-top: 8px;
    gap: 12px;
  }
}

/* 狭いスマホ（480px以下）：区切りの「/」の左右を少し詰める */
@media (max-width: 480px) {
  .footer__links li:not(:last-child)::after {
    margin-inline: 6px;
  }
}