@charset "UTF-8";
/* ==========================================================================
   top.css — トップページ専用（メインビジュアル／USP／SECTIONS／ADDRESS）
   共通部は css/common.css。
   ========================================================================== */
/* 上端の地図キャプション（広島城・縮景園・JR「広島」駅）
   ヘッダーの背景グラデーションより前面に出す必要があるため、メインビジュアルの中ではなく
   画面に固定した層として置く。中の1920px盤面は空撮と同じ倍率で拡縮させる（js/function.js） */
.heroCapsTop {
  position: fixed;
  left: 0;
  top: 0;
  /* ヘッダーの背景グラデーションより前面、かつ CVメニュー（10）・コンテンツメニュー（99）より背面。
     メニューを開いたときにキャプションが重なって見えないようにする */
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.heroCapsTop__label {
  position: absolute;
  padding: 5px 10px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(40px);
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 17px;
  white-space: nowrap;
  color: rgb(0,0,0);
}

.heroCapsTop__label--castle {
  left: 555px;
  top: 143px;
}

.heroCapsTop__label--garden {
  left: 1312px;
  top: 110px;
}

.heroCapsTop__label--station {
  right: 90px;
  top: 105px;
}

/* ==========================================================================
   uspBand — USPエリア（発売告知の帯＋3項目）
   1920px設計。js/function.js が zoom を掛けて画面幅に合わせる
   ========================================================================== */

.uspBand {
  overflow-x: clip;
}

.uspBand__stage {
  width: 1920px;
  margin: 0 auto;
}

.uspBand__notice {
  position: relative;
  width: 1920px;
  height: 105px;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgb(50,47,42) 0%, rgb(127,122,115) 53.37%, rgb(50,47,42) 100%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.uspBand__noticeTtl {
  color: rgb(255,255,255);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}


.uspBand__list {
  position: relative;
  width: 1920px;
  display: flex;
}

.uspBand__item {
  width: 640px;
  height: 104px;
  box-sizing: border-box;
  background: linear-gradient(98.84deg, rgb(222,221,219) 6.67%, rgb(180,175,166) 79.44%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.uspBand__itemKicker {
  color: rgb(48,47,34);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.uspBand__itemTtl {
  color: rgb(48,47,34);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}

/* ==========================================================================
   p-top-gallery — TOP SECTIONS（全画面ギャラリー）
   ========================================================================== */

.p-top-gallery {
  position: relative;
  width: 1920px;
  /* ADDRESS の退場が始まる前に背景でピン留めを完了させるための引き上げ量。
     ADDRESS(3.1vh) の退場開始 1.76vh より前に top:0 に達する必要がある */
  margin-top: calc(var(--vph, 100vh) * -1.5);
  height: calc(var(--vph, 100vh) * 6.2);
}

.p-top-gallery__g-stage {
  position: sticky;
  top: 0;
  width: 1920px;
  height: var(--vph, 100vh);
  overflow: hidden;
  background: rgb(20,18,14);
}

.p-top-gallery__a-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.p-top-gallery__a-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.p-top-gallery__div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(76deg, rgba(8,8,10,0.66) 0%, rgba(8,8,10,0.3) 46%, rgba(8,8,10,0.1) 100%), linear-gradient(180deg, rgba(8,8,10,0) 55%, rgba(8,8,10,0.45) 100%);
  pointer-events: none;
}

/* 導入の地。ADDRESS の地と同じベージュ。退場に同期してノイズ縁のマスクで上へ晴れる（js/function.js） */
.p-top-gallery__a-veil {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(189deg, rgb(222,221,219) 23.94%, rgb(204,198,188) 85.24%);
  pointer-events: none;
}

/* 終幕の白幕（廃止。背景写真の明度をスクロールで変えないため常に非表示） */
.p-top-gallery__a-white {
  display: none;
}

.p-top-gallery__a-content {
  position: absolute;
  left: 96px;
  bottom: 130px;
  width: 760px;
  color: rgb(255,255,255);
  will-change: transform, opacity;
}

.p-top-gallery__a-line {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-size: 110px;
  line-height: 1.06;
  letter-spacing: 0.02em;
  margin-top: 14px;
  padding-bottom: 6px;
  background: linear-gradient(180deg, rgb(255,255,255) 20%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-top-gallery__div-3 {
  margin-top: 14px;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}

.p-top-gallery__div-4 {
  width: 54px;
  height: 1px;
  background: rgb(255,255,255);
  opacity: 0.4;
  margin: 30px 0;
}

.p-top-gallery__div-5 {
  font-size: 15px;
  font-weight: 600;
  line-height: 2.1;
  text-shadow: 0 1px 10px rgba(0,0,0,0.4);
}

.p-top-gallery__span-2 {
  color: rgb(255,255,255);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.p-top-gallery__h-navwrap {
  position: fixed;
  left: 50%;
  bottom: 40px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 6px;
  background: rgba(20,18,14,0.28);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.16);
}

.p-top-gallery__h-pill {
  position: absolute;
  left: 0;
  top: 6px;
  height: calc(100% - 12px);
  width: 0;
  border-radius: 4px;
  background: rgba(255,255,255,0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 2px 10px rgba(0,0,0,0.18);
  transition: transform 0.55s cubic-bezier(0.3, 1.35, 0.36, 1), width 0.55s cubic-bezier(0.3, 1.35, 0.36, 1);
  will-change: transform, width;
  pointer-events: none;
}

.p-top-gallery__h-go {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgb(255,255,255);
  opacity: 0.62;
  transition: opacity 0.35s;
}

.p-top-gallery__h-go {
  transition: color 320ms ease, text-shadow 320ms ease, opacity 320ms ease;
}

.p-top-gallery__h-go:hover {
  opacity: 1;
  color: rgb(252,250,244);
  text-shadow: 0 0 12px rgba(226,206,158,0.55);
}

.p-top-gallery__h-go:focus {
  outline: none;
}

.p-top-gallery__h-go:focus-visible {
  outline: none;
  color: rgb(252,250,244);
  box-shadow: inset 0 0 0 1px rgba(226,206,158,0.7);
}

.p-top-gallery__h-go-2 {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgb(255,255,255);
  opacity: 0.62;
  transition: opacity 0.35s;
}

.p-top-gallery__h-go-2 {
  transition: color 320ms ease, text-shadow 320ms ease, opacity 320ms ease;
}

.p-top-gallery__h-go-2:hover {
  opacity: 1;
  color: rgb(252,250,244);
  text-shadow: 0 0 12px rgba(226,206,158,0.55);
}

.p-top-gallery__h-go-2:focus {
  outline: none;
}

.p-top-gallery__h-go-2:focus-visible {
  outline: none;
  color: rgb(252,250,244);
  box-shadow: inset 0 0 0 1px rgba(226,206,158,0.7);
}

.p-top-gallery__h-go-3 {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgb(255,255,255);
  opacity: 0.62;
  transition: opacity 0.35s;
}

.p-top-gallery__h-go-3 {
  transition: color 320ms ease, text-shadow 320ms ease, opacity 320ms ease;
}

.p-top-gallery__h-go-3:hover {
  opacity: 1;
  color: rgb(252,250,244);
  text-shadow: 0 0 12px rgba(226,206,158,0.55);
}

.p-top-gallery__h-go-3:focus {
  outline: none;
}

.p-top-gallery__h-go-3:focus-visible {
  outline: none;
  color: rgb(252,250,244);
  box-shadow: inset 0 0 0 1px rgba(226,206,158,0.7);
}

.p-top-gallery__h-go-4 {
  all: unset;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  cursor: pointer;
  padding: 12px 24px;
  border-radius: 4px;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  line-height: 1;
  color: rgb(255,255,255);
  opacity: 0.62;
  transition: opacity 0.35s;
}

.p-top-gallery__h-go-4 {
  transition: color 320ms ease, text-shadow 320ms ease, opacity 320ms ease;
}

.p-top-gallery__h-go-4:hover {
  opacity: 1;
  color: rgb(252,250,244);
  text-shadow: 0 0 12px rgba(226,206,158,0.55);
}

.p-top-gallery__h-go-4:focus {
  outline: none;
}

.p-top-gallery__h-go-4:focus-visible {
  outline: none;
  color: rgb(252,250,244);
  box-shadow: inset 0 0 0 1px rgba(226,206,158,0.7);
}

.c-contents__div-8 {
  width: 1000px;
  margin: 115px auto 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c-contents__div-9 {
  font-family: 'YakuHanMP', 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.02em;
  color: rgba(11,11,11,0.65);
}

.p-top-hero__hero-fit {
  position: relative;
  width: 1920px;
  height: 923px;
  flex: 0 0 auto;
  transform-origin: 50% 50%;
  will-change: transform;
}

.p-top-hero__hero-par {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 923px;
  will-change: transform;
}

.p-top-hero__hero-zoom {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 923px;
  will-change: transform, filter;
  filter: brightness(0.1);
  transform: scale(1.18);
}

.p-top-hero__img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
  height: var(--vph, 923px);
  min-height: 923px;
  object-fit: cover;
}

/* fig02: ロゴの背後、右端へ向かって落ちる暗いグラデーション（乗算・不透明度 0.5） */
.p-top-hero__hero-shade {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 598px;
  height: var(--vph, 923px);
  min-height: 923px;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
  pointer-events: none;
}

.p-top-hero__hero-caps {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 7;
  width: 1920px;
  height: 923px;
  transform: scale(var(--hero-k, 1));
  transform-origin: 50% 50%;
  opacity: 0;
  pointer-events: none;
}

.p-top-hero__div {
  position: absolute;
  left: 761px;
  top: 272px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(40px);
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 17px;
  white-space: nowrap;
  color: rgb(0,0,0);
}

.p-top-hero__div-2 {
  position: absolute;
  left: 649px;
  top: 613px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(40px);
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 17px;
  white-space: nowrap;
  color: rgb(0,0,0);
}

.p-top-hero__div-3 {
  position: absolute;
  left: 754px;
  top: 371px;
  width: 47px;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
  color: rgb(0,0,0);
  filter: drop-shadow(0 0 10px rgb(255,255,255)) drop-shadow(0 0 10px rgb(255,255,255)) drop-shadow(0 0 6px rgb(255,255,255));
}

.p-top-hero__div-4 {
  position: absolute;
  left: 754px;
  top: 825px;
  width: 47px;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
  color: rgb(0,0,0);
  filter: drop-shadow(0 0 10px rgb(255,255,255)) drop-shadow(0 0 10px rgb(255,255,255)) drop-shadow(0 0 6px rgb(255,255,255));
}

.p-top-hero__div-5 {
  position: absolute;
  left: 1098px;
  top: 456px;
  width: 15px;
  height: 128px;
  writing-mode: vertical-rl;
  /* YakuHanMP は横組み用に詰めた括弧字形を持つため、縦組みでは横向きのまま残る。
     縦組みのキャプションだけ本文用の明朝に任せ、縦書き字形（縦カギ括弧）を使わせる */
  font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;
  letter-spacing: 0.09em;
  white-space: nowrap;
  color: rgb(0,0,0);
  filter: drop-shadow(0 0 10px rgb(255,255,255)) drop-shadow(0 0 10px rgb(255,255,255)) drop-shadow(0 0 6px rgb(255,255,255));
}

.p-top-hero__div-6 {
  position: absolute;
  left: 859px;
  top: 206px;
  width: 192px;
  height: 49px;
  box-sizing: border-box;
  padding: 2px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(40px);
}

.p-top-hero__div-7 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgb(163,161,140);
}

.p-top-hero__span {
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  color: rgb(0,0,0);
}

.p-top-hero__span-2 {
  margin-top: -3px;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 28px;
  white-space: nowrap;
  color: rgb(0,0,0);
}

/* fig 最新版: 光柱は空撮素材に焼き込み済み。地図キャプションは使わない */
.p-top-hero__hero-caps,
.heroCapsTop {
  display: none;
}

.p-top-hero__hero-logo {
  /* fig 旧データ由来の影は使わない（明るい空撮上で汚れに見えるため） */
  filter: none;
  text-shadow: none;
  position: absolute;
  left: 0;
  top: 0;
  /* 右の暗部（shade）や上グラデより前面に置く。PC・SP 共通 */
  z-index: 20;
  width: 1920px;
  height: 923px;
  opacity: 0;
  color: rgb(255,255,255);
  pointer-events: none;
  will-change: opacity;
}

.p-top-hero__div-8 {
  position: absolute;
  left: 1556px;
  top: 248px;
  width: 175px;
  height: 485px;
  overflow: hidden;
}

.p-top-hero__div-9 {
  position: absolute;
  left: -43.56px;
  top: 0px;
  width: 218.561px;
  height: 542.055px;
  overflow: hidden;
}

.p-top-hero__div-10 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 218.561px;
  height: 542.055px;
  overflow: hidden;
}

.p-top-hero__div-11 {
  background: url(../imgs/top/hero-name.png) 50% 50% / 100% 100% no-repeat;
  position: absolute;
  left: 0px;
  top: 118.073px;
  width: 144.095px;
  height: 423.982px;
}

.p-top-hero__div-12 {
  position: absolute;
  left: 43.56px;
  top: 0px;
  width: 133.257px;
  height: 110.274px;
  overflow: hidden;
  }

.p-top-hero__svg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 133.257px;
  height: 110.274px;
}

.p-top-hero__svg-2 {
  position: absolute;
  left: 61.162px;
  top: 33.327px;
  width: 60.877px;
  height: 8.462px;
}

.p-top-hero__div-13 {
  position: absolute;
  left: 103.016px;
  top: 253.78px;
  width: 79.995px;
  height: 79.189px;
  overflow: hidden;
  }

.p-top-hero__svg-3 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 79.995px;
  height: 79.189px;
}

.p-top-hero__div-14 {
  position: absolute;
  left: 108.782px;
  top: 157.462px;
  width: 85.667px;
  height: 83.672px;
  overflow: hidden;
  }

.p-top-hero__svg-4 {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 85.667px;
  height: 83.672px;
}

.p-top-hero__div-15 {
  position: absolute;
  left: 55.711px;
  top: 173.975px;
  width: 30.004px;
  height: 309.856px;
  overflow: hidden;
}

.p-top-hero__svg-5 {
  position: absolute;
  left: 12.34px;
  top: 0px;
  width: 5.498px;
  height: 28.038px;
}

.p-top-hero__svg-6 {
  position: absolute;
  left: 0px;
  top: 41.268px;
  width: 29.783px;
  height: 29.585px;
}

.p-top-hero__svg-7 {
  position: absolute;
  left: 1.122px;
  top: 79.457px;
  width: 28.882px;
  height: 29.885px;
}

.p-top-hero__svg-8 {
  position: absolute;
  left: 4.882px;
  top: 117.426px;
  width: 21.156px;
  height: 26.238px;
}

.p-top-hero__svg-9 {
  position: absolute;
  left: 22.467px;
  top: 152.489px;
  width: 7.157px;
  height: 6.41px;
}

.p-top-hero__svg-10 {
  position: absolute;
  left: 6.194px;
  top: 174.054px;
  width: 18.628px;
  height: 26.412px;
}

.p-top-hero__svg-11 {
  position: absolute;
  left: 0.537px;
  top: 207.413px;
  width: 29.072px;
  height: 30.722px;
}

.p-top-hero__svg-12 {
  position: absolute;
  left: 4.835px;
  top: 246.028px;
  width: 21.567px;
  height: 22.623px;
}

.p-top-hero__svg-13 {
  position: absolute;
  left: 12.34px;
  top: 281.802px;
  width: 5.498px;
  height: 28.054px;
}

.p-top-hero__div-16 {
  position: absolute;
  left: 76.835px;
  top: 58.081px;
  width: 141.726px;
  height: 105.127px;
  overflow: hidden;
  }

.p-top-hero__svg-14 {
  position: absolute;
  left: 42.486px;
  top: 0px;
  width: 99.239px;
  height: 91.345px;
}

.p-top-hero__svg-15 {
  position: absolute;
  left: 0px;
  top: 28.654px;
  width: 76.108px;
  height: 76.473px;
}

.p-top-hero__hero-grad {
  display: none;
}


/* ==========================================================================
   p-top-usp — TOP USP（3項目）
   ========================================================================== */

.p-top-usp {
  position: relative;
  width: 1920px;
  display: flex;
}

.p-top-usp__div-2 {
  width: 640px;
  height: 104px;
  box-sizing: border-box;
  background: linear-gradient(98.84deg, rgb(222,221,219) 6.67%, rgb(180,175,166) 79.44%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.p-top-usp__div-3 {
  color: rgb(48,47,34);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}

.p-top-usp__div-4 {
  color: rgb(48,47,34);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
}



/* ==========================================================================
   addrCinema — KAMIHATCHOBORI ADDRESS（スクロール連動の演出）
   流れ: カラー3連写真 → モノクロへ退色 → 暗転 → 見出し・コピー・DETAIL が浮かぶ
   js/function.js の _initAddrCinema がスクロール量で filter と不透明度を駆動する
   ========================================================================== */

.addrCinema {
  position: relative;
  width: 1920px;
  /* 3段階（01→02→03）→ 退色 → 暗転 → コピー → 下の縁から溶けて抜ける、までを通しで（間延びしない長さ） */
  height: calc(var(--vph, 100vh) * 5.6);
  /* 抜けた先が薄いベージュだと画像の際が立つため、地はギャラリーと同じ暗色にする */
  background: rgb(20,18,14);
}

.addrCinema__sticky {
  position: sticky;
  top: 0;
  /* 退場中は下の SECTIONS が背景でピン留めされている。その手前に重ねる */
  z-index: 2;
  width: 1920px;
  height: var(--vph, 100vh);
  overflow: hidden;
}

/* fig 04 の地: ベージュのグラデーション。退場の進み（--addr-bg）で透かして
   背景でピン留めされた SECTIONS を見せる */
.addrCinema__sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(189deg, rgb(222,221,219) 23.94%, rgb(204,198,188) 85.24%);
  opacity: var(--addr-bg, 1);
  pointer-events: none;
}

.addrCinema__panels,
.addrCinema__veil,
.addrCinema__copy {
  z-index: 1;
}

/* 航空写真1枚。退色・暗転はこの層にまとめて掛ける */
.addrCinema__panels {
  position: absolute;
  inset: 0;
  will-change: filter, transform;
}

/* 写真の箱。登場演出（js が panel に transform を掛ける）と衝突しないよう、
   位置合わせ・拡大は中の .addrAir（カメラ）側で持つ */
.addrCinema__panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* 登場（ノイズ縁のマスクで下から立ち上がる。js/function.js）が始まるまで伏せておく */
  opacity: 0;
}

/* ---- カメラ（PC）----
   fig 版面 1920×804 を画面の上下センターに置き、この箱に fig 01/02 の座標で写真とゾーニングを置く。
   02→03 の拡大は js が transform: scale() を掛ける。原点は fig 02 と 03 の写真配置から求めた固定点
   （写真の同じ点が両方の版面で同じ画面位置に来る点）。拡大率 3356/2372.683 = 1.414432 */
.addrAir {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1920px;
  height: 804px;
  margin-top: -402px;
  transform-origin: 503.83px 44.03px;
  will-change: transform;
}

/* 写真3層は同じ切り出し（元画像の横 16〜99%・縦 10〜88%）なので同じ箱に重ねる。
   fig 01/02 の写真配置（left -401 / top -364.655 / 幅 2372.683）に切り出し分を掛けた値 */
.addrAir__base,
.addrAir__glow,
.addrAir__light {
  display: block;
  position: absolute;
  left: -21.37px;
  top: -206.39px;
  width: 1969.33px;
  max-width: none;
  height: auto;
}

/* 道の光（fig 02 から）と現地の光（fig 03 から）。出現は js が不透明度で駆動 */
.addrAir__glow {
  opacity: 0;
}

.addrAir__light {
  opacity: 0;
  mix-blend-mode: screen;
}

/* fig 02: ゾーニング。版面座標のまま。カメラと一緒に拡大されつつ消えていく */
.addrAir__zones {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* 不透明度は js が毎フレーム書く。合成レイヤーに載せて再描画を避ける */
  will-change: opacity;
}

.addrAir__zone {
  position: absolute;
  display: block;
  mix-blend-mode: hard-light;
  /* fig の見た目に合わせて縁をぼかす。saturate は4エリア共通の彩度（1=fig のまま、小さいほど淡い） */
  filter: blur(22px) saturate(0.45);
  /* blur 済みの塗りを各ゾーン独自のレイヤーに固定する。
     これが無いとカメラの拡大・不透明度の変化ごとに blur を再計算してカクつく
     （とくに path 形状の上幟町ゾーン） */
  transform: translateZ(0);
  will-change: filter, transform;
  backface-visibility: hidden;
}

.addrAir__zone--kami {
  left: 562px;
  top: 44px;
  width: 385.5px;
  height: 472.5px;
  background: rgba(255,245,191,0.7);
}

.addrAir__zone--kaminobori {
  left: 988.5px;
  top: 38px;
  width: 512.5px;
  height: 491.801px;
  fill: rgba(255,191,192,0.7);
}

.addrAir__zone--hatchobori {
  left: 388px;
  top: 563px;
  width: 572px;
  height: 461px;
  background: rgba(191,255,191,0.7);
}

.addrAir__zone--nobori {
  left: 995.5px;
  top: 568px;
  width: 491.5px;
  height: 432px;
  fill: rgba(191,255,242,0.7);
}

/* SP だけで使う帯の上下ぼかし（PC では出さない）。fig 164 の Rectangle 394 と同じ黒フェード */
.addrAirFade {
  display: none;
}

.addrAir__area {
  position: absolute;
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 39px;
  text-align: center;
  color: rgb(0,0,0);
}

.addrAir__area--kami {
  left: 700px;
  top: 284px;
  width: 120px;
}

.addrAir__area--kaminobori {
  left: 1151px;
  top: 284px;
  width: 90px;
}

.addrAir__area--hatchobori {
  left: 715px;
  top: 651px;
  width: 90px;
}

.addrAir__area--nobori {
  left: 1151px;
  top: 651px;
  width: 90px;
}

/* fig と同じ乗算グラデーションを半分の明度に（最終の暗さを約2倍に）。中央がわずかに明るく、左右が沈む */
.addrCinema__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(25,23,21) 0%, rgb(66,64,60) 53.37%, rgb(25,23,21) 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  will-change: opacity;
}

.addrCinema__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* fig04: 見出しブロック → DETAIL は 49px */
  gap: 49px;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}

/* fig04: 見出し群 → 本文は 40px */
.addrCinema__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* fig04: 連番 → 英字 → 見出しはいずれも 20px */
.addrCinema__headTop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 英字は小さなキッカー、主見出しは和文70px（fig 04 の組み） */
.addrCinema__kicker {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 0.88;
  letter-spacing: -0.07em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgb(238,232,218) 0%, rgb(196,186,162) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.addrCinema__ttl {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 78px;
  white-space: nowrap;
  white-space: pre;
  background: linear-gradient(180deg, rgb(238,232,218) 0%, rgb(196,186,162) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.addrCinema__txt {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 31px;
  letter-spacing: 0;
  white-space: pre-line;
  color: rgb(255,255,255);
}

.addrCinema__btnTxt {
  position: relative;
  z-index: 1;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  transition: text-shadow 460ms cubic-bezier(0.22, 1, 0.36, 1);
  font-weight: 600;
  font-size: 14px;
  line-height: 31px;
  letter-spacing: 0;
  white-space: nowrap;
  color: rgb(255,255,255);
}
@media screen and (max-width: 767px) {

  .p-top-hero__hero-fit {
    transform: scale(var(--sp-hero-k, 1)) translate(var(--sp-hero-dx, 0px), var(--sp-hero-dy, 0px));
    transform-origin: 50% 50%;
  }

  .p-top-hero__img {
    /* SP 専用の縦構図素材（光柱焼き込み済み）を、盤面のうち画面に見えている
       縦長の窓に下詰めで当てこむ（空の見え方は端末の画面比で変わる） */
    left: var(--sp-img-x, 50%);
    top: 0;
    transform: none;
    width: var(--sp-img-w, 1920px);
    height: 923px;
    min-height: 0;
    object-fit: cover;
    object-position: 50% 100%;
  }

  /* 右へ落ちる暗部は PC 版面の構図。SP では使わない */
  .p-top-hero__hero-shade {
    display: none;
  }

  /* 縦組みロゴ: PC の 70% サイズ。定位置は画面の左右センター・上寄せ。
     空撮は横に送られているため、画面センターにあたる設計座標を JS が --sp-logo-x で配る
     ※結像から定位置へ動く演出の座標は js/function.js の SPGEO と対応させている */
  .p-top-hero__div-8 {
    left: var(--sp-logo-x, 730px);
    top: 110px;
    width: 122.5px;
    height: 339.5px;
  }

  .p-top-hero__div-9 {
    left: -30.49px;
    width: 152.99px;
    height: 379.44px;
  }

  .p-top-hero__div-10 {
    width: 218.561px;
    height: 542.055px;
    transform: scale(0.7);
    transform-origin: 0 0;
  }
}

/* SP（〜767px）とタブレット（768〜1279px）共通: zoom を掛けず画面幅で組む。
   値は SP 基準。タブレットはこの下の @media (min-width: 768px) and (max-width: 1279px) で
   PC の組み（USP 3列・ギャラリー左下配置）と文字サイズに戻す */
@media screen and (max-width: 1279px) {

  /* ---- USPエリア ---- */
  /* 1920px 設計の土台。SP では画面幅に収める（これを外すと子の width:100% が
     1920px を基準にしてしまい、帯だけが見えて中の文字が画面外に出る） */
  .uspBand__stage {
    width: 100%;
  }

  .uspBand__notice {
    width: 100%;
    height: auto;
    padding: 17px 20px;
    gap: 5px;
  }

  .uspBand__noticeTtl {
    white-space: nowrap;
    letter-spacing: 0.02em;
    font-size: clamp(12px, 4.15vw, 16px);
    line-height: 26px;
  }

  
  .uspBand__list {
    width: 100%;
    flex-direction: column;
  }

  .uspBand__item {
    width: 100%;
    height: auto;
    padding: 15px 20px;
    gap: 4px;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.45);
  }

  .uspBand__itemKicker {
    font-size: 12px;
    line-height: 18px;
  }

  .uspBand__itemTtl {
    font-size: 19px;
    line-height: 28px;
  }

  /* ---- POSITION（addrCinema）: 航空写真1枚で全画面 ---- */
  .addrCinema,
  .addrCinema__sticky {
    width: 100%;
  }

  .addrCinema__copy {
    gap: 30px;
    padding: 0 24px;
    box-sizing: border-box;
  }

  .addrCinema__head {
    gap: 22px;
  }

  .addrCinema__headTop {
    gap: 13px;
  }

  .addrCinema__kicker {
    font-size: 17px;
  }

  .addrCinema__ttl {
    font-size: 30px;
    line-height: 44px;
  }

  .addrCinema__txt {
    font-size: 14px;
    line-height: 28px;
  }

  .addrCinema__btnTxt {
    font-size: 14px;
  }

  /* ---- SECTIONS（全画面ギャラリー） ---- */
  .p-top-gallery,
  .p-top-gallery__g-stage {
    width: 100%;
  }

  .p-top-gallery__a-content {
    left: 24px;
    right: 24px;
    bottom: 104px;
    width: auto;
  }

  .p-top-gallery__a-line {
    margin-top: 8px;
    font-size: 48px;
    line-height: 1.04;
  }

  .p-top-gallery__div-3 {
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.62;
  }

  /* 背景の夜景がゆっくり左へ流れる。わずかに寄せた状態で横に送り、縁が出ないようにする。
     規定 2.2.2: 自動で動き続けるため prefers-reduced-motion では止める */
  .p-top-gallery__a-bg {
    will-change: transform;
    animation: spGalleryPan 44s ease-in-out infinite alternate;
  }

  .p-top-gallery__div-4 {
    margin: 18px 0;
    width: 40px;
  }

  .p-top-gallery__div-5 {
    font-size: 14px;
    line-height: 2;
  }

  .p-top-gallery__span-2 {
    font-size: 14px;
  }

  /* 下部のセクション送りは SP では使わない: 画面下部固定の CV ボタン（bottomCV）と
     重なり、どちらの操作も損なうため。進行は各章の連番（0X - 05）が伝え、
     移動はスクロールが担う（PC はレールを維持） */
  .p-top-gallery__h-navwrap {
    display: none;
  }

  .c-contents__div-8 {
    width: auto;
    margin: 40px 24px 0;
    gap: 6px;
  }

  .c-contents__div-9 {
    font-size: 11px;
    line-height: 19px;
  }
}


/* SP ギャラリー背景の横送り（右→左。寄せてから送ることで縁を出さない） */
@keyframes spGalleryPan {
  from { transform: scale(1.14) translateX(3.4%); }
  to { transform: scale(1.14) translateX(-3.4%); }
}


/* ---- ノイズ縁のワイプ（js/function.js の Wipe）----
   imgs/noise-wipe.png は縦 4 段のタイル（透明／不透明／透明）。JS が mask-position を動かして
   縁を要素に走らせる。章送り・ADDRESS の 3 枚・ページ遷移の幕が同じ縁を使う */
.noiseWipe {
  -webkit-mask-image: url('../imgs/top/noise-wipe.png');
  mask-image: url('../imgs/top/noise-wipe.png');
  -webkit-mask-size: 100% 400%;
  mask-size: 100% 400%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* セクション送りのホバー: 文字の明度をわずかに上げ（0.92／選択中の 1.0 とは区別）、
   極細のアンダーラインが左から引かれ、文字の下に淡い上向きの光が差す。
   面は光らせない（選択中を示すピルの役割と競合させないため）。
   規定「リンクと分かる表現」「色の違いだけで情報を伝えない」に沿い、
   下線＝形の手がかりを主、光＝気配を従とする */
.p-top-gallery__h-go::before,
.p-top-gallery__h-go-2::before,
.p-top-gallery__h-go-3::before,
.p-top-gallery__h-go-4::before {
  content: '';
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 9px;
  height: 1px;
  background: rgba(238,224,192,0.85);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.p-top-gallery__h-go::after,
.p-top-gallery__h-go-2::after,
.p-top-gallery__h-go-3::after,
.p-top-gallery__h-go-4::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 22px;
  background: linear-gradient(to top, rgba(238,224,192,0.16) 0%, rgba(238,224,192,0) 100%);
  opacity: 0;
  transition: opacity 0.24s ease-out;
  pointer-events: none;
}

.p-top-gallery__h-go:hover,
.p-top-gallery__h-go-2:hover,
.p-top-gallery__h-go-3:hover,
.p-top-gallery__h-go-4:hover {
  opacity: 0.92;
}

.p-top-gallery__h-go:hover::before,
.p-top-gallery__h-go-2:hover::before,
.p-top-gallery__h-go-3:hover::before,
.p-top-gallery__h-go-4:hover::before,
.p-top-gallery__h-go:focus-visible::before,
.p-top-gallery__h-go-2:focus-visible::before,
.p-top-gallery__h-go-3:focus-visible::before,
.p-top-gallery__h-go-4:focus-visible::before {
  transform: scaleX(1);
}

.p-top-gallery__h-go:hover::after,
.p-top-gallery__h-go-2:hover::after,
.p-top-gallery__h-go-3:hover::after,
.p-top-gallery__h-go-4:hover::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .p-top-gallery__h-go::before,
  .p-top-gallery__h-go-2::before,
  .p-top-gallery__h-go-3::before,
  .p-top-gallery__h-go-4::before,
  .p-top-gallery__h-go::after,
  .p-top-gallery__h-go-2::after,
  .p-top-gallery__h-go-3::after,
  .p-top-gallery__h-go-4::after {
    transition: none;
  }
}


.p-top-gallery__span-2 {
  position: relative;
  z-index: 1;
  transition: text-shadow 460ms cubic-bezier(0.22, 1, 0.36, 1);
}


/* 灯りのゆらめき。明滅の幅は画面の4分の1に達しないため、
   3回のせん光の規定（WCAG 2.3.1）に触れない */
@keyframes dtlLightSway {
  0% { opacity: 0.84; }
  23% { opacity: 1; }
  47% { opacity: 0.89; }
  68% { opacity: 0.98; }
  100% { opacity: 0.84; }
}

/* 稜線は面より遅く、浅く息をする（金属の照りは急に変わらない） */
@keyframes dtlRingSway {
  0% { opacity: 0.88; }
  34% { opacity: 1; }
  61% { opacity: 0.93; }
  100% { opacity: 0.88; }
}

/* 空撮の注釈は左下へ。右下は CV、左下の上段は演出中の SKIP が使う */
.imgCap--hero {
  right: auto;
  left: calc(44px * var(--stage-zi, 1));
  bottom: calc(16px * var(--stage-zi, 1));
  max-width: none;
  text-align: left;
  z-index: 12;
  opacity: 0;
  transition: opacity 700ms ease;
}
@media (max-width: 767px) {
  .imgCap--hero {
    left: 14px;
    right: 14px;
    bottom: 64px;
  }
}


/* POSITION: 航空写真の注釈は版面の右下に1点 */
.addrCinema__caps {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

.addrCinema__cap {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---- fig（Frame 72）の航空写真プロット ----------------------------------
   fig 版面 1920×804 の座標をそのまま使い、縦は版面中心を画面中心に合わせて置く
   （写真の縦位置と同じ規則なので、画面が高くなっても写真とラベルはずれない）。
   SP は版面を等倍縮小して出すため、倍率 --plotS を js/function.js が与える */
.addrAirPlots {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1920px;
  margin-left: -960px;
  transform: scale(var(--plotS, 1));
  transform-origin: 50% 50%;
  /* PC は拡大が終わってから js が出す */
  opacity: 0;
}

.addrAirPlots > * {
  position: absolute;
  top: 50%;
  margin: 0;
  box-sizing: border-box;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  color: rgb(0,0,0);
}

/* 施設名のタグ */
.addrAirTag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8.011px 16.022px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(64.088px);
  font-size: 22.306px;
  line-height: 27.237px;
  white-space: nowrap;
}

.addrAirTag--castle {
  left: 298px;
  margin-top: -67px;
}

.addrAirTag--garden {
  left: 1391px;
  margin-top: -176px;
  width: 92.928px;
  height: 41.657px;
}

.addrAirTag--gov {
  left: 651px;
  margin-top: 225px;
  font-size: 20.829px;
}

/* 電停名は縦組み。白い滲みで写真から起こす */
.addrAirRail {
  left: 1166px;
  margin-top: -115px;
  width: 20.028px;
  height: 170.902px;
  writing-mode: vertical-rl;
  /* YakuHanMP は横組み用に詰めた括弧字形を持つため、縦組みでは「」が横倒しのまま残る。
     縦組みのラベルだけ本文用の明朝に任せ、縦書き字形（縦カギ括弧）を使わせる */
  font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
  font-feature-settings: 'vert' 1;
  font-size: 17.357px;
  line-height: 18.692px;
  white-space: nowrap;
  filter: drop-shadow(0 0 13.352px rgb(255,255,255));
}

/* 物件名。内側に1本の罫を持つ白箱 */
.addrAirName {
  left: 814px;
  margin-top: 83px;
  width: 307.624px;
  height: 78.508px;
  padding: 3.204px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(64.088px);
}

.addrAirName__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1.602px rgb(163,161,140);
}

.addrAirName__en {
  display: block;
  font-size: 16.022px;
  line-height: 22.431px;
  white-space: nowrap;
}

.addrAirName__ja {
  display: block;
  margin-top: -9.613px;
  font-size: 27.237px;
  line-height: 44.862px;
  white-space: nowrap;
}
/* 帯1枚の航空写真（SP 素材）で描く描き方。タブレット（〜1279px）も同じ（js/top.js の isSp / _initPlotScale と揃える） */
@media (max-width: 1279px) {
  /* 帯の上下ぼかし（.addrAirFade）が rgb(0,0,0) へ落ちるので、
     その外側の地色も同じ黒に揃える（以前は rgb(11,12,13) で色味が違って見えていた） */
  .addrCinema__panels {
    background: rgb(0,0,0);
  }

  /* SP も PC と同じ 3 段階（fig 01→02→03）。写真・道の光・現地の光は SP 版面で書き出した帯を
     画面幅に合わせて上下センター。カメラの寄りは現地の光（帯内座標 130.7, 342.8）を原点にする */
  .addrAir {
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    /* 寄りの原点は赤枠の中心（帯内座標 159.5, 225.6）。プロットも同じ点を原点に寄る。
       寄ったあと左の広島城・合同庁舎が画面に入るよう、進み（--airT）に応じて右へ 50（帯単位）振る */
    transform-origin: calc(50% - 33.206px * var(--plotS, 1)) calc(50% - 111.269px * var(--plotS, 1));
    transform: translateX(calc(50px * var(--plotS, 1) * var(--airT, 0))) scale(var(--airZoom, 1));
  }

  .addrAir__base,
  .addrAir__glow,
  .addrAir__light {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
  }

  /* ゾーニングは PC 版面（1920×804）の座標のまま。fig の写真配置から求めた
     倒率 0.35543 で SP 帯に重ねる（帯ごと --plotS で画面幅に拡縮）*/
  .addrAir__zones {
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 804px;
    transform-origin: 0 0;
    transform: translate(calc(-354.616px * var(--plotS, 1)), calc(-154.1185px * var(--plotS, 1))) scale(calc(var(--plotS, 1) * 0.35543));
  }

  /* エリア名は倒率が掛かるので、実機で読める大きさ（実効 約 15px）になる値を直接指定。
     「○○エリア」の 2 行に収め、箱幅も同じ 1.4 倍にして 2 行をセンター揃えに保つ
     （左値は箱の中心が PC と同じ位置になるよう広がった分の半分を戻してある）*/
  .addrAir__area {
    font-size: 42px;
    line-height: 55px;
    white-space: nowrap;
  }

  .addrAir__area--kami {
    left: 676px;
    width: 168px;
  }

  .addrAir__area--kaminobori {
    left: 1133px;
    width: 126px;
  }

  .addrAir__area--hatchobori {
    left: 697px;
    width: 126px;
  }

  .addrAir__area--nobori {
    left: 1133px;
    width: 126px;
  }

  /* 帯の上下を黒でぼかす。写真の絵柄の端（帯内 53.146 〜 615.627）に合わせ、
     カメラの中に置いて寄りに追従させる */
  .addrAirFade {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: calc(120px * var(--plotS, 1));
    pointer-events: none;
  }

  .addrAirFade--top {
    top: calc(50% - 283.7225px * var(--plotS, 1));
    background: linear-gradient(180deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
  }

  .addrAirFade--bottom {
    bottom: calc(50% - 278.7585px * var(--plotS, 1));
    background: linear-gradient(0deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
  }

  /* プロットは帯そのものを箱にして、fig の帯内座標をそのまま使う */
  .addrAirPlots {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 385.411px;
    height: 673.737px;
    margin-left: -192.706px;
    transform: translate(0, -50%) scale(var(--plotS, 1)) translateX(calc(50px * var(--airT, 0))) translate(-33.206px, -111.269px) scale(var(--airZoom, 1)) translate(33.206px, 111.269px);
    transform-origin: 50% 50%;
  }

  .addrAirPlots > * {
    top: 0;
  }

  .addrAirTag {
    padding: 3.486px 6.971px;
    backdrop-filter: blur(27.885px);
    font-size: 10px;
    line-height: 11.851px;
  }

  .addrAirTag--castle {
    left: 6px;
    margin-top: 242.892px;
  }

  .addrAirTag--garden {
    left: 244px;
    margin-top: 236.892px;
    width: 40.433px;
    height: 18.125px;
  }

  .addrAirTag--gov {
    left: 11px;
    margin-top: 334.892px;
    width: auto;
    height: auto;
    font-size: 10px;
  }

  .addrAirRail {
    left: 182px;
    margin-top: 280.892px;
    width: 9.618px;
    height: 82.07px;
    font-size: 8.335px;
    line-height: 8.976px;
    filter: drop-shadow(0 0 6.412px rgb(255,255,255));
  }

  .addrAirName {
    left: 26px;
    margin-top: 285.892px;
    width: 141px;
    height: 34px;
    padding: 1.394px;
    backdrop-filter: blur(27.885px);
  }

  .addrAirName__in {
    box-shadow: inset 0 0 0 0.697px rgb(163,161,140);
  }

  .addrAirName__en {
    font-size: 6.971px;
    line-height: 9.76px;
  }

  .addrAirName__ja {
    margin-top: -4.183px;
    font-size: 13px;
    line-height: 19.519px;
  }
}


/* SECTIONS は WebGL 描画のため、注釈はステージに1本置いて章ごとに差し替える */
.imgCap--gallery {
  z-index: 8;
}



/* ヘッダー上端のグラデーションは支給 common.css の指定をそのまま使う（規定: ヘッダー部に
   グラデーションを敷き、シンボル・物件名の視認性を担保する）。自サイト側で打ち消さない */

.p-top-hero__hero-topmask {
  display: none;
}


/* ==========================================================================
   タブレット（768〜1279px・iPad 等）
   1920px 設計の等比縮小では文字が 6〜12px に潰れて規定の最小 10px を割るため、
   js/common.js が .currentPage に js-fluid を付けて zoom を外し（下層ページと同じ方式）、
   ここで PC の組みを画面幅に合わせて組み直す。上の (max-width: 1279px) の SP 基準の値を上書きする。
   sticky のスクロール演出（POSITION・ギャラリー）は SP と同じ画面幅基準の版で動かす
   ========================================================================== */@media screen and (min-width: 768px) and (max-width: 1279px) {

  /* ---- メインビジュアル: zoom なし。PC の横構図素材を画面いっぱいに cover ---- */
  .p-top-hero__hero-fit,
  .p-top-hero__hero-par,
  .p-top-hero__hero-zoom,
  .p-top-hero__hero-logo {
    width: 100%;
    height: var(--vph, 100vh);
  }

  .p-top-hero__img {
    width: 100%;
    height: var(--vph, 100vh);
    min-height: 0;
  }

  .p-top-hero__hero-shade {
    width: 31%;
    height: var(--vph, 100vh);
    min-height: 0;
  }

  /* 縦組みロゴ: PC と同じ右寄せ（PC は 1920 盤面で右端から 189px・上から 248px = 27%）を比率で */
  .p-top-hero__div-8 {
    left: auto;
    right: clamp(40px, 9.8vw, 189px);
    top: 24%;
  }

  .imgCap--hero {
    left: 24px;
    bottom: 12px;
    font-size: 11px;
  }

  /* ---- USP: PC と同じ「告知帯＋3項目横並び」 ---- */
  .uspBand__notice {
    padding: 26px 24px;
  }

  .uspBand__noticeTtl {
    white-space: normal;
    font-size: clamp(20px, 2.5vw, 28px);
    line-height: 1.4;
  }

  .uspBand__list {
    flex-direction: row;
  }

  .uspBand__item {
    width: 33.3333%;
    padding: 22px 12px;
    box-shadow: none;
  }

  .uspBand__itemKicker {
    font-size: 14px;
    line-height: 1.3;
  }

  .uspBand__itemTtl {
    font-size: clamp(19px, 2.2vw, 26px);
    line-height: 1.3;
    text-align: center;
  }

  /* ---- POSITION のコピー ---- */
  .addrCinema__copy {
    gap: 40px;
    padding: 0 48px;
  }

  .addrCinema__kicker {
    font-size: clamp(22px, 2.6vw, 30px);
  }

  .addrCinema__ttl {
    font-size: clamp(40px, 4.7vw, 56px);
    line-height: 1.25;
  }

  .addrCinema__txt {
    font-size: 15px;
    line-height: 2;
  }

  /* ---- ギャラリー: PC と同じ左下配置。幅は画面に合わせる ---- */
  .p-top-gallery__a-content {
    left: clamp(40px, 5vw, 96px);
    right: auto;
    bottom: clamp(96px, 12vh, 130px);
    width: min(640px, calc(100% - 2 * clamp(40px, 5vw, 96px)));
  }

  .p-top-gallery__a-line {
    font-size: clamp(64px, 7.3vw, 92px);
  }

  .p-top-gallery__div-3 {
    font-size: clamp(18px, 1.9vw, 22px);
  }

  /* 背景の横送りは SP のもの。PC と同じく静止 */
  .p-top-gallery__a-bg {
    animation: none;
  }

  .p-top-gallery__div-4 {
    margin: 24px 0;
    width: 54px;
  }

  .p-top-gallery__div-5 {
    font-size: 15px;
    line-height: 2;
  }

  .c-contents__div-8 {
    margin: 60px 40px 0;
  }
}

.cvMenu__bg {
  background-color: #12110e;
}