:root {
  --m-ease: cubic-bezier(.22, 1, .36, 1);      /* 出現（ゆっくり止まる） */
  --m-ease-io: cubic-bezier(.76, 0, .24, 1);   /* 幕・クリップ */
}

/* ---------- Lenis（慣性スクロール）推奨CSS ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- オープニング（初回のみ） ---------- */
.m-open { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .m-open,
html.is-leaving .m-open { position: fixed; z-index: 1000; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
.m-open-mark { width: clamp(64px, 6.5vw, 108px); height: auto; clip-path: inset(100% 0 0 0); animation: m-wipe-up 1s var(--m-ease-io) .2s forwards; }
.m-open-word { width: clamp(90px, 8.5vw, 140px); height: auto; margin-top: clamp(18px, 1.8vw, 28px); opacity: 0; animation: m-rise .8s var(--m-ease) .9s forwards; }
.m-open-tag { margin: clamp(20px, 1.8vw, 28px) 0 0; font-family: var(--font-en); font-size: clamp(10px, .8vw, 13px); letter-spacing: .24em; opacity: 0; animation: m-rise .8s var(--m-ease) 1.05s forwards; }
html.is-leaving .m-open { animation: m-curtain .9s var(--m-ease-io) forwards; }
html.is-leaving .m-open > * { animation: m-out .4s ease forwards; }
@keyframes m-wipe-up { to { clip-path: inset(0 0 0 0); } }
@keyframes m-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-out { to { opacity: 0; translate: 0 -16px; } }
@keyframes m-curtain { to { translate: 0 -100%; } }

/* ---------- FV（写真はオープニング明け .m-fv で開始） ---------- */
/* 波：motion.js が最初の形（画面の上の外）にするまで隠す（HTMLに書いてある最後の形が一瞬見えないように） */
.m-ready .fv-wave { visibility: hidden; }
.m-ready .fv-wave.is-on { visibility: visible; }
.m-ready [data-fv="photo"] img { scale: 1.08; }
/* PCの写真は XD では上に73pxの白地がある。最初は上へずらして画面の上端まで写真に（スクロールで元の位置へ：motion.js） */
.m-ready .pc-hero-photo img { translate: 0 -73px; }
.m-ready.m-fv [data-fv="photo"] img { scale: 1; transition: scale 2.8s var(--m-ease); }
.m-ready [data-fv="1"], .m-ready [data-fv="2"], .m-ready [data-fv="3"], .m-ready [data-fv="4"] { opacity: 0; translate: 0 18px; }
.m-ready.m-fvt [data-fv="1"], .m-ready.m-fvt [data-fv="2"], .m-ready.m-fvt [data-fv="3"], .m-ready.m-fvt [data-fv="4"] { transition: opacity 1s ease, translate 1.1s var(--m-ease); }
.m-ready.m-fvt [data-fv="1"] { opacity: 1; translate: 0 0; transition-delay: .05s; }
.m-ready.m-fvt [data-fv="2"] { opacity: 1; translate: 0 0; transition-delay: .15s; }
.m-ready.m-fvt [data-fv="3"] { opacity: 1; translate: 0 0; transition-delay: .25s; }
.m-ready.m-fvt [data-fv="4"] { opacity: 1; translate: 0 0; transition-delay: .32s; }
.m-ready [data-fv="catch"], .m-ready .sp-hero-brand { opacity: 0; }
/* ナビは1項目ずつ */
.m-ready [data-fv="nav"] { border-left-color: transparent; transition: border-color 1s ease .3s; }
.m-ready.m-fvt [data-fv="nav"] { border-left-color: var(--color-text); }
.m-ready [data-fv="nav"] a { opacity: 0; translate: 0 10px; }
.m-ready.m-fvt [data-fv="nav"] a { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .9s var(--m-ease); transition-delay: calc(.25s + var(--i, 0) * .08s); }
/* 縦書きキャッチ：1文字ずつ上から（PCは既存の1文字span、SPは motion.js が分割した .m-c） */
.m-ready .pc-catch span[aria-hidden], .m-ready .sp-catch .m-c { opacity: 0; translate: 0 -.5em; }
.m-ready.m-fvt .pc-catch span[aria-hidden], .m-ready.m-fvt .sp-catch .m-c { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate 1s var(--m-ease); transition-delay: calc(.3s + var(--i, 0) * .06s); }

/* ---------- 共通の出現 ---------- */
[data-m] { --d: 0s; }
.m-ready [data-m="up"], .m-ready [data-m="fade"] { opacity: 0; }
.m-ready [data-m="up"] { translate: 0 36px; }
.m-ready [data-m="up"].is-in, .m-ready [data-m="fade"].is-in { opacity: 1; translate: 0 0; transition: opacity 1s ease var(--d), translate 1.2s var(--m-ease) var(--d); }

/* 右からスライドイン（PCのニュースカード） */
.m-ready [data-m="slide"] { opacity: 0; translate: 80px 0; }
.m-ready [data-m="slide"].is-in { opacity: 1; translate: 0 0; transition: opacity 1s ease var(--d), translate 1.3s var(--m-ease) var(--d); }

/* 子要素を順番に（--i は motion.js） */
.m-ready [data-m="stagger"] > *, .m-ready [data-m="stagger-slide"] > * { opacity: 0; translate: 0 24px; }
.m-ready [data-m="stagger-slide"] > * { translate: 60px 0; }
.m-ready [data-m="stagger"].is-in > *, .m-ready [data-m="stagger-slide"].is-in > * { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate 1.1s var(--m-ease); transition-delay: calc(var(--d) + var(--i, 0) * .09s); }
.m-ready [data-m="stagger"].is-in > [data-m-done], .m-ready [data-m="stagger-slide"].is-in > [data-m-done] { transition-delay: 0s; }

/* 見出し：英字は1文字ずつマスクの下からせり上がる → 「：日本語」 */
.m-c { display: inline-block; }
[data-m="chars"] .m-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.m-ready [data-m="chars"] .m-mask .m-c { translate: 0 110%; }
.m-ready [data-m="chars"].is-in .m-mask .m-c { translate: 0 0; transition: translate 1s var(--m-ease); transition-delay: calc(var(--d) + var(--i, 0) * .045s); }
[data-m="head"] { perspective: 700px; }
[data-m="head"] .en, [data-m="head"] .ja { display: inline-block; transform-origin: 50% 50%; backface-visibility: hidden; }
.m-ready [data-m="head"] .en, .m-ready [data-m="head"] .ja { opacity: 0; transform: translateY(50%) rotateX(-80deg) scaleY(0); }
.m-ready [data-m="head"].is-in .en, .m-ready [data-m="head"].is-in .ja { opacity: 1; transform: none; transition: transform 1.1s var(--m-ease) var(--d), opacity .6s ease var(--d); }
.m-ready [data-m="head"].is-in .ja { transition-delay: calc(var(--d) + .18s); }
/* PC：マウスを乗せると、上へ倒れて消え → 下から起き上がって戻る */
.m-ready [data-m="head"].is-in.m-reflip .en, .m-ready [data-m="head"].is-in.m-reflip .ja { opacity: 0; transform: translateY(-50%) rotateX(80deg) scaleY(0); transition: transform .35s cubic-bezier(.55, 0, .75, .2), opacity .3s ease .05s; }
.m-ready [data-m="head"].is-in.m-reflip .ja { transition-delay: .06s; }

/* 1行ずつ（<br>区切りを motion.js が .m-l に包む） */
.m-l { display: inline; }
.m-ready [data-m="lines"] .m-l { display: inline-block; opacity: 0; translate: 0 18px; }
.m-ready [data-m="lines"].is-in .m-l { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate 1s var(--m-ease); transition-delay: calc(var(--d) + var(--i, 0) * .07s); }
[data-m="marker"] > span { position: relative; z-index: 0; }
[data-m="marker"] > span::after { content: ""; position: absolute; z-index: -1; left: -.15em; right: -.15em; bottom: .02em; height: .5em; background: var(--color-bg-info); transform-origin: left center; }
.m-ready [data-m="marker"] { opacity: 0; }
.m-ready [data-m="marker"] > span::after { scale: 0 1; }
.m-ready [data-m="marker"].is-in { opacity: 1; transition: opacity .8s ease var(--d); }
.m-ready [data-m="marker"].is-in > span::after { scale: 1 1; transition: scale 1.1s var(--m-ease-io) calc(var(--d) + .3s); }

/* 写真：クリップで開く＋中の画像が寄りから戻る（clip-l：左から／clip-r：右から） */
.m-ready [data-m="clip-l"] { clip-path: inset(0 100% 0 0); }
.m-ready [data-m="clip-r"] { clip-path: inset(0 0 0 100%); }
.m-ready [data-m^="clip"] img { scale: 1.18; }
.m-ready [data-m^="clip"].is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--m-ease-io) var(--d); }
.m-ready [data-m^="clip"].is-in img { scale: 1; transition: scale 2s var(--m-ease) var(--d); }
/* 角丸の要素はクリップ後に角丸を保つ */
.pc-photo[data-m^="clip"], .sp-exp-img[data-m^="clip"] { will-change: clip-path; }

/* ロゴ・タグラインのワイプ */
.m-ready [data-m="wipe-up"] { clip-path: inset(100% 0 0 0); }
.m-ready [data-m="wipe-r"] { clip-path: inset(0 100% 0 0); }
.m-ready [data-m^="wipe"].is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--m-ease-io) var(--d); }

/* Experienceの色バー：上から伸びる → テキスト */
.m-ready [data-m="bar"] .bar { scale: 1 0; transform-origin: top; }
.m-ready [data-m="bar"].is-in .bar { scale: 1 1; transition: scale 1s var(--m-ease-io) var(--d); }
.m-ready [data-m="bar-l"] { border-left-color: transparent !important; opacity: 0; translate: 0 20px; position: relative; }
.m-ready [data-m="bar-l"]::before { content: ""; position: absolute; left: -5px; top: 0; bottom: 0; width: 5px; background: var(--bar); scale: 1 0; transform-origin: top; }
.m-ready [data-m="bar-l"].is-in { opacity: 1; translate: 0 0; transition: opacity .9s ease var(--d), translate 1s var(--m-ease) var(--d); }
.m-ready [data-m="bar-l"].is-in::before { scale: 1 1; transition: scale 1s var(--m-ease-io) calc(var(--d) + .15s); }

/* 視差（data-px）：motion.js が --m-py を更新 */
[data-px] { translate: 0 var(--m-py, 0px); }
.m-ready [data-m="up"][data-px] { translate: 0 calc(var(--m-py, 0px) + 36px); }
.m-ready [data-m="up"][data-px].is-in { translate: 0 var(--m-py, 0px); transition: opacity 1s ease var(--d), translate 1.2s var(--m-ease) var(--d); }
.m-ready [data-m="up"][data-px].is-in.m-settled { transition: opacity 1s ease; }

/* ---------- フロアマップ：線が描かれる → 文字 → ピンが01→06の順に ---------- */
.m-ready [data-m="draw"] .fl-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-ready [data-m="draw"].is-in .fl-l { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--m-ease-io); transition-delay: calc(var(--d) + var(--li, 0) * .012s); }
.m-ready [data-m="draw"] .fl-t { opacity: 0; }
.m-ready [data-m="draw"].is-in .fl-t { opacity: 1; transition: opacity .8s ease 1.4s; }
.fl-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.m-ready [data-m="draw"] .fl-pin { opacity: 0; scale: .2; }
.m-ready [data-m="draw"].is-in .fl-pin { opacity: 1; scale: 1; transition: opacity .4s ease, scale .7s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(1.5s + var(--i, 0) * .12s); }
.m-marquee { overflow: hidden; white-space: nowrap; pointer-events: none; user-select: none; }
.m-marquee-track { display: inline-flex; align-items: center; will-change: transform; }
.m-marquee-track > * { flex: none; }
.m-mq-fill, .m-mq-line { font-family: var(--font-en); font-weight: 500; letter-spacing: .01em; }
.m-mq-fill { color: var(--color-bg-info); }
.m-mq-line { color: transparent; -webkit-text-stroke: 1.5px var(--color-bg-info); }
.m-mq-dot { display: inline-block; width: .16em; height: .16em; margin: 0 .55em; border-radius: 50%; background: var(--color-bg-info); }
.pc-marquee { position: absolute; left: 0; top: 2540px; width: 1920px; height: 140px; font-size: 104px; line-height: 140px; }
.sp-marquee { padding: 8px 0 40px; font-size: clamp(44px, 12vw, 80px); line-height: 1.3; }
.sp-marquee .m-mq-line { -webkit-text-stroke-width: 1px; }
.m-mq-dot--line { box-sizing: border-box; background: transparent; border: 1.5px solid var(--color-bg-info); }
.sp-marquee .m-mq-dot--line { border-width: 1px; }
/* タッチ端末：自動で流れる帯は CSS アニメーション（--mq-unit・--mq-dur は motion.js） */
.m-marquee--css .m-marquee-track { animation: m-mq var(--mq-dur, 40s) linear infinite; }
.m-marquee--css.is-paused .m-marquee-track { animation-play-state: paused; }
@keyframes m-mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--mq-unit, 0px) * -1), 0, 0); } }
.m-ready .m-marquee { opacity: 0; transition: opacity 1.2s ease; }
.m-ready .m-marquee.is-in { opacity: 1; }

/* ---------- 見出し：右へ伸びる線 ---------- */
[data-m="head"]::after { content: ""; display: inline-block; height: 1px; background: currentColor; transform-origin: left center; opacity: .55; }
.pc-h2[data-m="head"]::after { width: 120px; margin-left: 18px; vertical-align: middle; }
.sp-h2[data-m="head"] { display: flex; align-items: baseline; }
.sp-h2[data-m="head"]::after { flex: 1 1 auto; min-width: 24px; margin-left: 14px; align-self: center; }
.m-ready [data-m="head"]::after { scale: 0 1; }
.m-ready [data-m="head"].is-in::after { scale: 1 1; transition: scale 1.2s var(--m-ease-io) calc(var(--d) + .5s); }

/* ---------- Space：番号で写真を切り替える（space.js） ---------- */
.js-space-btn { cursor: pointer; }
button.js-space-btn { position: relative; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; transition: color .4s ease; -webkit-tap-highlight-color: transparent; }
.pc-space-list button.js-space-btn { display: inline-flex; align-items: baseline; line-height: inherit; }
.sp-space-list button.js-space-btn { display: flex; align-items: baseline; gap: 8px; width: 100%; }
.sp-space-list li { padding: 0; }
.sp-space-list button.js-space-btn { padding: 8px 0; }
/* 選択中：ティール＋左に短いバー */
button.js-space-btn::before { content: ""; position: absolute; top: 50%; height: 2px; background: var(--color-teal-deep); scale: 0 1; transform-origin: right center; transition: scale .5s var(--m-ease-io); }
.pc-space-list button.js-space-btn::before { left: -30px; width: 18px; }
.sp-space-list button.js-space-btn::before { left: -14px; width: 8px; }
button.js-space-btn.is-active { color: var(--color-teal-deep); }
button.js-space-btn.is-active::before { scale: 1 1; transform-origin: left center; }
button.js-space-btn:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 4px; }
@media (hover: hover) { button.js-space-btn:not(.is-active):hover { color: var(--color-teal); } }
/* ピン：選択中はXDの01と同じ緑の塗り＋白文字、ほかは白地＋線 */
.fl-pin path { fill: #fff; stroke: var(--color-text); stroke-width: .9; transition: fill .4s ease, stroke .4s ease; }
.fl-pin text { fill: var(--color-text); transition: fill .4s ease; }
.fl-pin.is-active path { fill: var(--color-green); stroke: var(--color-green); }
.fl-pin.is-active text { fill: #fff; }
@media (hover: hover) { .fl-pin:not(.is-active):hover path { fill: #eef3cf; } }
.fl-pin:focus { outline: none; }
.fl-pin:focus-visible path { stroke: var(--color-teal); stroke-width: 2; }
/* 写真：新しい写真が左からクリップで重なって開き、拡大から戻る */
.sp-space-photo { position: relative; }
.space-layer { position: absolute; inset: 0; overflow: hidden; }
.js-space-photo .space-layer img.is-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.space-layer.is-enter { animation: space-in 1.1s var(--m-ease-io) both; }
.space-layer.is-enter > * { animation: space-zoom 1.6s var(--m-ease) both; }
@keyframes space-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes space-zoom { from { scale: 1.12; } to { scale: 1; } }
.space-layer.is-empty { display: flex; align-items: center; justify-content: center; background: #f6f9e2; }
.space-ph { display: flex; flex-direction: column; align-items: center; color: rgba(26, 19, 17, .45); }
.js-space-photo .space-ph img { position: static; width: 96px; height: auto; max-width: none; opacity: .12; object-fit: contain; }
.space-ph-no { margin-top: 18px; font-family: var(--font-en); font-weight: 500; font-size: 44px; line-height: 1; color: var(--color-teal-deep); }
.space-ph-tx { margin-top: 12px; font-size: 16px; letter-spacing: .3em; }
.sp-space-photo .space-ph img { width: 52px; }
.sp-space-photo .space-ph-no { margin-top: 10px; font-size: 26px; }
.sp-space-photo .space-ph-tx { margin-top: 8px; font-size: 12px; }
/* キャプション：番号 → 部屋名 → 説明の順に入れ替わる */
.js-space-cap.is-swap > * { animation: space-cap .8s var(--m-ease) both; }
.js-space-cap.is-swap > :nth-child(2) { animation-delay: .08s; }
.js-space-cap.is-swap > :nth-child(3) { animation-delay: .16s; }
@keyframes space-cap { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

/* ---------- ホバー ---------- */
@media (hover: hover) {
  .pc-nav a .en, .sp-foot-nav a .en { position: relative; }
  .pc-nav a .en::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; scale: 0 1; transform-origin: right center; transition: scale .5s var(--m-ease-io); }
  .pc-nav a:hover .en::after { scale: 1 1; transform-origin: left center; }
  .pc-nav a { transition: opacity .3s; }
  .pc-nav a .ja { transition: opacity .3s; }
  .pc-nav a:hover .ja { opacity: .55; }
  /* ニュースカード：写真が寄る＋少し浮く */
  .pc-card, .sp-card { transition: translate .6s var(--m-ease), box-shadow .6s ease, opacity 1s ease; }
  .pc-card:hover, .sp-card:hover { translate: 0 -6px; box-shadow: 0 18px 40px rgba(26, 19, 17, .08); }
  .pc-card-img img, .sp-card-img img { transition: scale 1s var(--m-ease); }
  .pc-card:hover .pc-card-img img, .sp-card:hover .sp-card-img img { scale: 1.06; }
  /* View all：背景が左から右へスイープ＋矢印が右へ */
  .pc-viewall, .sp-viewall { isolation: isolate; overflow: hidden; }
  .pc-viewall::before, .sp-viewall::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--color-teal); scale: 0 1; transform-origin: right center; transition: scale .6s var(--m-ease-io); }
  .pc-viewall:hover::before, .sp-viewall:hover::before { scale: 1 1; transform-origin: left center; }
  .pc-viewall::after, .sp-viewall::after { transition: translate .5s var(--m-ease); }
  .pc-viewall:hover::after, .sp-viewall:hover::after { translate: 6px 0; }
  /* ロゴ */
  .pc-logo-mark img { transition: scale .8s var(--m-ease); }
  .pc-logo-mark:hover img { scale: 1.04; }
}
/* タップ時（SP） */
.sp-drawer-nav a, .sp-foot-nav a { transition: opacity .2s; }
.sp-drawer-nav a:active, .sp-foot-nav a:active { opacity: .5; }
/* ドロワーの項目も順番に */
.sp-drawer-nav a { transition: transform .6s var(--m-ease), opacity .2s; }
.is-menu-open .sp-drawer-nav a { transition-delay: calc(var(--i, 0) * .05s + .1s); }

/* ---------- SPのページトップボタン ---------- */
.sp-pagetop { translate: 0 12px; transition: opacity .3s, visibility .3s, translate .5s var(--m-ease); }
.sp-pagetop.is-show { translate: 0 0; }

.m-scrolldown { position: fixed; z-index: 50; right: 32px; bottom: 0; margin-bottom: 28px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(0, 0, 0, .12); color: #fff; pointer-events: none; overflow: hidden; transition: opacity .6s ease, visibility .6s; }
.m-scrolldown svg { width: 26px; height: 26px; animation: m-scrolldown 2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes m-scrolldown { 0% { transform: translateY(-140%); opacity: 0; } 30%, 60% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(140%); opacity: 0; } }
.m-scrolled .m-scrolldown { opacity: 0; visibility: hidden; }
html.is-sp-locked .m-scrolldown { opacity: 0; visibility: hidden; }
@media (max-width: 1024px) {
  .m-scrolldown { right: 16px; margin-bottom: 20px; width: 50px; height: 50px; }
  .m-scrolldown svg { width: 22px; height: 22px; }
}
.m-sound { position: fixed; z-index: 50; left: 32px; bottom: 0; margin: 0 0 28px; padding: 0; display: flex; align-items: center; gap: 14px; border: 0; background: none; color: #fff; font: inherit; cursor: pointer; transition: opacity .6s ease, visibility .6s; -webkit-tap-highlight-color: transparent; }
.m-sound-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(0, 0, 0, .12); transition: background .3s; }
.m-sound:hover .m-sound-icon, .m-sound:focus-visible .m-sound-icon { background: rgba(0, 0, 0, .3); }
.m-sound svg { width: 26px; height: 26px; }
.m-sound-on, .m-sound[aria-pressed="true"] .m-sound-off { display: none; }
.m-sound[aria-pressed="true"] .m-sound-on { display: block; }
.m-sound-label { font-size: 12px; letter-spacing: .16em; line-height: 1; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.m-sound-label b { font-weight: inherit; }
.m-scrolled .m-sound, html.is-sp-locked .m-sound { opacity: 0; visibility: hidden; }
@media (max-width: 1024px) {
  .m-sound { left: 16px; margin-bottom: 20px; gap: 10px; }
  .m-sound-icon { width: 50px; height: 50px; }
  .m-sound svg { width: 22px; height: 22px; }
  .m-sound-label { font-size: 11px; }
}
.space-arrow { position: absolute; z-index: 3; top: 50%; width: 56px; height: 56px; margin-top: -28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); box-shadow: 0 4px 14px rgba(26, 19, 17, .12); cursor: pointer; transition: background .3s, transform .3s var(--m-ease); -webkit-tap-highlight-color: transparent; }
.space-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-top: 2px solid var(--color-teal-deep); border-right: 2px solid var(--color-teal-deep); }
.space-arrow--next { right: 20px; }
.space-arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.space-arrow--prev { left: 20px; }
.space-arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.space-arrow:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 3px; }
@media (hover: hover) {
  .space-arrow:hover { background: #fff; }
  .space-arrow--next:hover { transform: translateX(3px); }
  .space-arrow--prev:hover { transform: translateX(-3px); }
}
.space-dots { display: flex; gap: 10px; }
.space-dots button { width: 11px; height: 11px; margin: 0; padding: 0; border: 1.5px solid var(--color-teal-deep); border-radius: 50%; background: transparent; cursor: pointer; transition: background .3s; -webkit-tap-highlight-color: transparent; }
.space-dots button.is-active { background: var(--color-teal-deep); }
.space-dots button:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 3px; }
/* PC：写真の右下の外（説明文と同じ高さの右端） */
.pc-space-dots { position: absolute; right: 64px; top: 6255px; gap: 14px; }
.pc-space-dots button { width: 14px; height: 14px; }
/* SP：写真のすぐ下の右端 */
.sp-space-dots { justify-content: flex-end; margin-top: 12px; padding-right: var(--sp-gutter); }
.sp-space-photo .space-arrow { width: 40px; height: 40px; margin-top: -20px; }
.sp-space-photo .space-arrow::before { width: 9px; height: 9px; }
.sp-space-photo .space-arrow--next { right: 12px; }
.sp-space-photo .space-arrow--prev { left: 12px; }