@charset "UTF-8";
/* ==========================================================================
   position.css — POSITIONページ固有のセクション

   レイアウト方式: 通常のレスポンシブ（%・flex/grid・clamp()・メディアクエリ）。
   1920px の等比縮小（zoom）は使わない（.currentPage.js-fluid）。
   航空写真の上に重なるプロット類だけは写真と位置関係が崩せないため、
   写真の枠を基準にした % 座標で置き、文字サイズは vw で追従させる。
   ========================================================================== */

/* ==========================================================================
   p-pos-hero — POSITION メインビジュアル
   ========================================================================== */

.p-pos-hero {
  position: relative;
  width: 100%;
  height: var(--vph, 100vh);
  overflow: hidden;
  background: rgb(222,221,219);
}

.p-pos-hero__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
}

.p-pos-hero__div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  mix-blend-mode: multiply;
  background:
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
    linear-gradient(114.325deg, rgb(132,127,120) 10.77%, rgb(49,46,41) 96.87%);
}

.p-pos-hero__div-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  white-space: nowrap;
}

.p-pos-hero__div-3 {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 5.21vw, 100px);
  line-height: 0.75;
  text-align: center;
  padding-bottom: 8px;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pos-hero__div-4 {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 31px;
  text-align: center;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ==========================================================================
   p-pos-intro — 導入（左テキスト＋右 立地概念図）
   ========================================================================== */

/* fig は左 800 のテキスト＋右 900 の地図。絶対配置をやめて 2 カラムで組む（1024px 以下は縦積み） */
.p-pos-intro {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(48px, 4.9vw, 94px) 0 clamp(48px, 4.9vw, 94px) clamp(24px, 6.25vw, 120px);
  background: linear-gradient(180.95deg, rgb(222,221,219) 9.6%, rgb(219,217,213) 88.8%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 5.21vw, 100px);
}

.p-pos-intro__txt {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.17vw, 80px);
  align-items: flex-start;
}

.p-pos-intro__head {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.54vw, 68px);
  align-items: flex-start;
}

.p-pos-intro__kicker {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 0.75;
  color: rgb(48,47,34);
}

.p-pos-intro__h2 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(26px, 2.6vw, 50px);
  line-height: 1.34;
  padding-bottom: 6px;
  background: linear-gradient(90deg, rgb(44,43,31) 0%, rgb(136,134,105) 50%, rgb(44,43,31) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pos-intro__p {
  margin: 0;
  width: 100%;
  max-width: 800px;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2.05;
  letter-spacing: 0.01em;
  color: rgb(48,47,34);
}

.p-pos-intro__map {
  position: relative;
  flex: 0 0 46.88%;
  min-width: 0;
  /* 立地概念図の実比率（1776 : 1648。焼き込みの灰色枠を切り落とした後の寸法） */
  aspect-ratio: 1776 / 1648;
  overflow: hidden;
  background: rgb(102,102,102);
}

.p-pos-intro__mapImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   p-pos-history — HISTORY（航空写真＋コラージュ）
   ========================================================================== */

.p-pos-history {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(88px, 9.38vw, 180px) clamp(24px, 5.21vw, 100px);
  background: linear-gradient(183.46deg, rgb(222,221,219) 12.05%, rgb(204,198,188) 88.2%);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5.21vw, 100px);
  align-items: center;
}

.p-pos-history__head {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.17vw, 80px);
  align-items: center;
}

.p-pos-history__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(136,134,105) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pos-history__txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.p-pos-history__h3 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 67px;
  letter-spacing: 0.01em;
  text-align: center;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(44,43,31) 0%, rgb(136,134,105) 50%, rgb(44,43,31) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pos-history__p {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 37px;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(48,47,34);
}

/* ---- 現地周辺航空写真 ---- */
/* ラベルは写真の枠に対する % 座標。写真が縮んでも位置関係が崩れない */
.p-pos-air {
  position: relative;
  width: 100%;
  max-width: 1720px;
  aspect-ratio: 1720 / 720;
  overflow: hidden;
  background: rgb(90,88,82);
}

.p-pos-air__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-pos-air__name {
  position: absolute;
  left: 48.31%;
  top: 65.28%;
  /* 幅は fig の割合を基準に、文字が収まらない狭い画面では中身に合わせて広げる */
  width: max-content;
  min-width: 16.05%;
  box-sizing: border-box;
  padding: clamp(7px, 0.73vw, 14px) clamp(5px, 0.52vw, 10px);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(57px);
  -webkit-backdrop-filter: blur(57px);
  box-shadow: inset 0 0 0 1.4px rgb(163,161,140);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.p-pos-air__nameEn {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(9px, 0.73vw, 14px);
  line-height: 1.4;
  color: rgb(0,0,0);
}

.p-pos-air__nameJa {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(13px, 1.25vw, 24px);
  line-height: 1.4;
  white-space: nowrap;
  color: rgb(0,0,0);
}

.p-pos-air__label {
  position: absolute;
  box-sizing: border-box;
  padding: clamp(4px, 0.36vw, 7px) clamp(7px, 0.73vw, 14px);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(57px);
  -webkit-backdrop-filter: blur(57px);
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(11px, 1.04vw, 20px);
  line-height: 1.2;
  white-space: nowrap;
  color: rgb(0,0,0);
}

.p-pos-air__label--castle { left: 7.44%; top: 18.06%; }
.p-pos-air__label--godo { left: 37.21%; top: 87.22%; }
.p-pos-air__label--park { left: 85.00%; top: 22.64%; }

.p-pos-air__line {
  position: absolute;
  left: 70.58%;
  top: 37.08%;
  width: clamp(10px, 1.05vw, 18px);
  margin: 0;
  /* 縦組み。YakuHanMP（横組み用の約物詰め）と text-orientation:upright は
     「」が横倒しになるため使わない */
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(9px, 0.78vw, 15px);
  line-height: 1.12;
  letter-spacing: 0.02em;
  writing-mode: vertical-rl;
  font-feature-settings: 'vert' 1;
  color: rgb(0,0,0);
  text-shadow: 0 0 12px rgb(255,255,255), 0 0 6px rgb(255,255,255);
}

.p-pos-air__tag {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 5px 8px;
  background: rgba(49,46,42,0.3);
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: rgb(255,255,255);
}

/* ---- 写真コラージュ ---- */
/* fig の重ね配置。枠に対する % 座標で置き、どの幅でも同じ重なりになる */
.p-pos-collage {
  position: relative;
  width: 100%;
  max-width: 1520px;
  aspect-ratio: 1520 / 837;
}

.p-pos-collage__item {
  position: absolute;
  overflow: hidden;
  background: rgb(217,217,217);
}

.p-pos-collage__item--c1 { left: 35.53%; top: 0; width: 59.21%; height: 76.46%; }
.p-pos-collage__item--c2 { left: 0; top: 9.32%; width: 29.61%; height: 35.84%; }
.p-pos-collage__item--c3 { left: 8.16%; top: 56.15%; width: 36.18%; height: 43.85%; }
.p-pos-collage__item--c4 { left: 76.32%; top: 61.29%; width: 23.68%; height: 33.45%; }

.p-pos-collage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   p-pos-value — VALUE（濃色地・実績プロット）
   ========================================================================== */

.p-pos-value {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(88px, 9.9vw, 190px) clamp(24px, 5.21vw, 100px) clamp(96px, 13.02vw, 250px);
  background: linear-gradient(90deg, rgb(49,46,41) 0%, rgb(132,127,120) 53.37%, rgb(49,46,41) 100%);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5.21vw, 100px);
  align-items: center;
}

/* 上段はテキストと航空写真の横並び（fig 260903） */
.p-pos-value__upper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 1717px;
}

.p-pos-value__head {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.17vw, 80px);
  align-items: center;
}

.p-pos-value__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 3.65vw, 70px);
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-pos-value__txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.p-pos-value__h3 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(22px, 2.08vw, 40px);
  line-height: 1.68;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(255,255,255);
}

.p-pos-value__p {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2.05;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(255,255,255);
}

.p-pos-value__lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: flex-end;
  gap: clamp(32px, 5.21vw, 100px);
  /* テキストは左カラムの写真群に対して上下センター */
  align-items: center;
  width: 100%;
  max-width: 1720px;
  margin: clamp(56px, 6.25vw, 120px) auto 0;
}

.p-pos-value__lead {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.p-pos-value__h3-2 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: clamp(19px, 1.56vw, 30px);
  line-height: 1.73;
  letter-spacing: 0.08em;
  color: rgb(255,255,255);
}

.p-pos-value__p-2 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 400;
  font-size: clamp(13px, 0.78vw, 15px);
  line-height: 2.27;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.86);
}

/* aun #19 で 3枚目（image photo）を削除したため、残る2枚（各 800x470）を縦積みにする */
.p-pos-value__pics {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.p-pos-value__pic {
  position: relative;
  overflow: hidden;
}

.p-pos-value__picImg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 470;
  object-fit: cover;
}

/* fig の上段は 917（テキスト）: 800（写真）。写真側を割合で固定する */
.p-pos-value__map {
  position: relative;
  flex: 0 0 46.59%;
  width: 46.59%;
  aspect-ratio: 800 / 850;
  overflow: hidden;
}

.p-pos-value__mapImg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 供給物件プロット。航空写真の上に fig のベクター図形とテキストを重ねる。
   写真の枠に対する % 座標で置くため、画面幅が変わっても位置関係は保たれる */
/* 写真の枠いっぱいに広げ、中身は % 座標で置く。写真が縮んでも位置関係が保たれる
   （SVG は viewBox 0 0 800 850 なので自動で追従する） */
.p-pos-plot {
  position: absolute;
  inset: 0;
}

.p-pos-plot__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* fig の Vector 10: 上八丁堀エリアを示す破線の面。写真の直上・プロットの下に置く */
.p-pos-plot__area {
  position: absolute;
  left: 12.288%;
  top: 10.353%;
  width: 74.875%;
  height: 85.294%;
  background: rgba(177,159,0,0.3);
  outline: 2px dashed rgb(255,255,255);
  outline-offset: -1px;
  pointer-events: none;
}

/* fig の「上八丁堀エリア」の金地ラベル（fig 座標 120,108 / 177×40 を % に換算）
   文言を「上八丁堀アドレス」（8文字）に変更したため、金地の幅を 177px→201px 相当に広げる */
.p-pos-plot__zone {
  position: absolute;
  left: 15%;
  top: 12.706%;
  box-sizing: border-box;
  width: 25.125%;
  height: 4.706%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(186,130,0);
  box-shadow: inset 0 0 0 1px rgb(255,255,255);
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(13px, 1.25vw, 24px);
  line-height: 1;
  white-space: nowrap;
  color: rgb(255,255,255);
}

.p-pos-plot__label {
  /* fig の Frame 89。left/top は HTML 側に % で持たせる（800×850 の座標を換算） */
  position: absolute;
  box-sizing: border-box;
  width: max-content;
  padding: clamp(3px, 0.26vw, 5px) clamp(6px, 0.52vw, 10px);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  color: rgb(0,0,0);
  text-align: center;
  white-space: nowrap;
}

.p-pos-plot__name {
  font-weight: 600;
  font-size: clamp(9px, 0.73vw, 14px);
  line-height: 1.29;
}

.p-pos-plot__sub {
  font-weight: 400;
  font-size: clamp(8px, 0.57vw, 11px);
  line-height: 1.09;
}

.p-pos-plot__here {
  position: absolute;
  left: 32.725%;
  top: 62.471%;
  box-sizing: border-box;
  width: 34.475%;
  height: 8.282%;
  padding: 3px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
}

.p-pos-plot__here::before {
  content: '';
  position: absolute;
  inset: 3px;
  box-shadow: inset 0 0 0 1.4px rgb(163,161,140);
}

.p-pos-plot__hereEn,
.p-pos-plot__hereJa {
  position: relative;
  display: block;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  text-align: center;
  color: rgb(0,0,0);
}

.p-pos-plot__hereEn {
  margin-top: 1.06%;
  font-size: clamp(9px, 0.73vw, 14px);
  line-height: 1.43;
}

.p-pos-plot__hereJa {
  font-size: clamp(13px, 1.25vw, 24px);
  line-height: 1.33;
  letter-spacing: 0.02em;
}


/* ==========================================================================
   タブレット（〜1024px）— 導入と VALUE を縦積みに組み替える
   ========================================================================== */

@media screen and (max-width: 1024px) {
  .p-pos-intro {
    flex-direction: column;
    padding: 56px 24px;
    gap: 32px;
  }

  .p-pos-intro__txt,
  .p-pos-intro__map {
    width: 100%;
    flex: 0 0 auto;
  }

  .p-pos-value__upper {
    flex-direction: column;
    gap: 40px;
  }

  .p-pos-value__map {
    flex: 0 0 auto;
    width: 100%;
  }

  .p-pos-value__lower {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}


/* ==========================================================================
   SP（〜767px）— 規定ブレークポイント。zoom は掛からず実寸で組む
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* SP は支給画像にモノクロ・明暗の加工が焼き込まれているため、実装側の画像処理（luminosity 合成・
     multiply の暗幕・明るさ補正）は行わず、画像をそのまま表示する */
  .p-pos-hero__img {
    filter: none;
    mix-blend-mode: normal;
  }

  .p-pos-hero__div {
    display: none;
  }


  #mainVisual .p-pos-hero,
  .p-pos-hero {
    width: 100%;
    height: var(--vph, 100vh);
  }

  .p-pos-hero__div-2 {
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 0 24px;
    white-space: normal;
  }

  .p-pos-hero__div-3 {
    font-size: 54px;
    padding-bottom: 6px;
  }

  .p-pos-hero__div-4 {
    font-size: 15px;
    line-height: 24px;
    /* SP はキャッチコピーを白にする（支給画像の上での可読性を確保）。
       PC のグラデーション文字は打ち消す */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: rgb(255,255,255);
  }

  /* ---- 導入: テキスト → 概念図の縦積み ---- */
  .p-pos-intro {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 88px 0 64px;
  }

  .p-pos-intro__txt {
    position: static;
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px;
    gap: 40px;
  }

  .p-pos-intro__head {
    gap: 32px;
  }

  .p-pos-intro__kicker {
    font-size: 15px;
  }

  .p-pos-intro__h2 {
    font-size: 27px;
    line-height: 44px;
  }

  .p-pos-intro__p {
    width: 100%;
    font-size: 15px;
    line-height: 31px;
  }

  /* PC の絶対配置は解くが、注釈（.imgCap）の基準はこの箱のままにする。
     static にすると .p-pos-intro が基準になり、注釈がセクション最下部まで落ちる */
  .p-pos-intro__map {
    position: relative;
    width: 100%;
    height: auto;
    /* SP 用画像の実比率（730 : 673） */
    aspect-ratio: 730 / 673;
    margin-top: 40px;
  }

  /* 画像の右下に方位記号が焼き込まれているため、SP では注釈を左下に逃がす */
  .p-pos-intro__map > .imgCap {
    right: auto;
    left: 10px;
    text-align: left;
  }

  .p-pos-intro__mapImg {
    width: 100%;
    height: auto;
    aspect-ratio: 730 / 673;
  }

  /* ---- HISTORY ---- */
  .p-pos-history {
    width: 100%;
    padding: 88px 16px;
    gap: 48px;
  }

  .p-pos-history__head {
    gap: 32px;
  }

  .p-pos-history__h2 {
    font-size: 34px;
    line-height: 0.9;
    white-space: normal;
  }

  .p-pos-history__h3 {
    font-size: 22px;
    line-height: 38px;
  }

  .p-pos-history__p {
    font-size: 15px;
    line-height: 31px;
    text-align: left;
  }

  .p-pos-history__p br:not(.only-sp) {
    display: none;
  }

  /* ---- 航空写真: SPはPC版面（1720x720）をそのまま等倍縮小する ----
     ラベルの配置・書体サイズをSP用に組み替えるとPCと別物になるため、
     版面ごと scale して見た目を完全に保つ。--air-s は画面幅から算出 */
  /* ---- 航空写真: SP は支給 fig の版面（1918x1079）をそのまま等倍縮小する ----
     ラベルの配置・書体サイズを SP 用に組み替えると fig と別物になるため、
     版面ごと scale して見た目を完全に保つ（文字も同じ比率で小さくなる）。
     --air-s = 画面幅 ÷ 1918 を position/js/script.js が付与する
     （CSS だけでは「長さ ÷ 長さ」で無次元の倍率を作れないため）。
     写真は index.html の <source> で SP 用（imgs/sp/air.webp）に差し替える */
  .p-pos-air {
    /* セクションの左右パディング（16px）を打ち消して画面いっぱいに出す */
    margin-left: -16px;
    width: 1918px;
    height: 1079px;
    max-width: none;
    flex: none;
    align-self: flex-start;
    transform: scale(var(--air-s, 0.2));
    transform-origin: top left;
    margin-bottom: calc(1079px * var(--air-s, 0.2) - 1079px);
  }

  /* 以下は fig（1918x1079）の座標・寸法・号数をそのまま px で置いたもの。
     版面ごと縮小されるので、実画面では --air-s 倍で見える */
  .p-pos-air__label {
    padding: 8.011px 16.022px;
    font-size: 22.306px;
    line-height: 27.237px;
  }

  .p-pos-air__label--castle { left: 298px; top: 335px; }
  .p-pos-air__label--park   { left: 1391px; top: 226px; }

  .p-pos-air__label--godo {
    left: 651px;
    top: 627px;
    font-size: 20.829px;
  }

  .p-pos-air__line {
    left: 1166px;
    top: 287px;
    width: 20.028px;
    font-size: 16.022px;
    line-height: 1.12;
  }

  .p-pos-air__name {
    left: 814px;
    top: 485px;
    width: 307.624px;
    min-width: 0;
    padding: 3.204px;
    box-shadow: inset 0 0 0 1.602px rgb(163,161,140);
    gap: 0;
  }

  .p-pos-air__nameEn {
    font-size: 16.022px;
    line-height: 22.431px;
  }

  .p-pos-air__nameJa {
    font-size: 27.238px;
    line-height: 44.862px;
  }

  /* 注釈は fig に無い自社追加。版面の縮小に巻き込まれて 2px 相当になってしまうため、
     倍率を打ち消して実効 11px を保つ（規定の最小 10px を満たす） */
  .p-pos-air__tag {
    padding: calc(5px * var(--air-si, 5)) calc(8px * var(--air-si, 5));
    font-size: calc(11px * var(--air-si, 5));
  }

  /* ---- コラージュ: SPはワンカラムの単純な並び ---- */
  .p-pos-collage {
    width: 100%;
    height: auto;
    /* PC の aspect-ratio（1520/837）が残ると iOS Safari では枠の高さが確定値になり、
       4行がその高さに押し込まれて写真が帯状に潰れる。枠は行の合計高さに任せる */
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .p-pos-collage__item--c1,
  .p-pos-collage__item--c2,
  .p-pos-collage__item--c3,
  .p-pos-collage__item--c4 {
    /* static にするとキャプション（絶対配置）の基準が .p-pos-collage になり、
       4枚ぶんの注釈が最後の画像の下に重なって出る。relative なら
       グリッドの流れは変えずに各画像が自分の基準になる。
       ただし relative は PC 用の left / top（コラージュの絶対座標）を拾って
       画像が横にずれるため、ここで打ち消す */
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .p-pos-collage__item--c1 {
    grid-column: auto;
  }

  .p-pos-collage__img {
    /* PC の height:100% は親（height:auto）に対して iOS Safari で不定になるため、
       画像自身の aspect-ratio で高さを決める */
    height: auto;
    aspect-ratio: 3 / 2;
  }

  /* ---- VALUE ---- */
  .p-pos-value {
    width: 100%;
    padding: 88px 16px;
    gap: 48px;
  }

  .p-pos-value__head {
    gap: 32px;
  }

  .p-pos-value__h2 {
    font-size: 34px;
    line-height: 0.9;
    white-space: normal;
  }

  .p-pos-value__h3 {
    font-size: 22px;
    line-height: 38px;
  }

  .p-pos-value__p {
    font-size: 15px;
    line-height: 31px;
    text-align: left;
  }

  .p-pos-value__p br:not(.only-sp) {
    display: none;
  }

  .p-pos-value__lower {
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
    margin-top: 56px;
  }

  .p-pos-value__lead {
    gap: 20px;
    padding-top: 0;
  }

  .p-pos-value__h3-2 {
    font-size: 22px;
    line-height: 38px;
  }

  .p-pos-value__p-2 {
    font-size: 15px;
    line-height: 31px;
  }

  .p-pos-value__pics {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .p-pos-value__picImg {
    height: auto;
    aspect-ratio: 800 / 470;
  }

  .p-pos-value__upper {
    width: 100%;
    flex-direction: column;
    gap: 40px;
  }

  .p-pos-value__head {
    width: 100%;
  }

  .p-pos-value__map {
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 850;
  }

  /* プロットの位置は % 座標なので写真に追従するが、文字サイズは clamp の下限で
     止まってラベルが写真からはみ出す。SP では PC（fig の写真幅 800px）と同じ比率で
     縮小するよう、「fig の文字サイズ ÷ 800」を写真幅に掛けた値を与える。
     SP の写真幅 = 100vw − 32px（.p-pos-value の左右 padding 16px） */
  .p-pos-plot__zone,
  .p-pos-plot__hereJa {
    font-size: calc((100vw - 32px) * 0.03);
  }

  .p-pos-plot__name,
  .p-pos-plot__hereEn {
    font-size: calc((100vw - 32px) * 0.0175);
  }

  .p-pos-plot__sub {
    font-size: calc((100vw - 32px) * 0.01375);
  }

  .p-pos-plot__label {
    padding: calc((100vw - 32px) * 0.00625) calc((100vw - 32px) * 0.0125);
  }

  /* SPではPC用の改行を解除（ボディコピーは折り返しに任せる） */
  .p-pos-intro__p br:not(.only-sp),
  .p-pos-value__p-2 br:not(.only-sp) {
    display: none;
  }
}

/* 広島城の注釈だけ写真の右上へ（空が広く抜けている位置） */
.p-pos-collage .imgCap--tr {
  top: 6px;
  bottom: auto;
}


/* ==========================================================================
   SP: コラージュは4枚を縦積みにするので、注釈は4枚とも右下に揃える
   （PC の c1 だけ右上（.imgCap--tr）という置き方は SP では使わない）。
   上の PC 用 .p-pos-collage .imgCap--tr より後ろに置いて上書きする
   ========================================================================== */

@media screen and (max-width: 767px) {
  .p-pos-collage .imgCap,
  .p-pos-collage .imgCap--tr {
    left: auto;
    right: 10px;
    top: auto;
    bottom: 6px;
    text-align: right;
  }
}