@charset "UTF-8";
/* ==========================================================================
   R8メインプロジェクト（/main-project/ 配下）専用CSS
   - 2026-10 新設。既存ページには読み込まない（既存 style.css の後に読み込む）
   - 主な値：本文16px・行間1.6・段落24／見出し→本文24（下層）・40（導入/油津/DENKEN）
     ブロック80／セクション120／写真1枚の段＝文章560＋40＋写真420
   ========================================================================== */

/* ── 共通の土台（.mp＝新ページの body）────────────────────────────── */
.mp {
  --mp-navy: #1b657d;
  --mp-ink: #282e30;
  --mp-beige: #ffefd6;
  /* 動きの語彙：触れた反応は既存サイトと同じ0.4s・減速だけで弾まない／入場は主役1つだけ、ゆっくり減速 */
  --mp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mp-dur-touch: .4s;
  --mp-dur-enter: .7s;
  --mp-dur-leave: .25s; /* 離したときは速く戻す */
  --mp-hot: #c0561f; /* 油津マップで選んでいる地点の色（地図のラベル・右リストの番号）。カンプの4番オレンジ＝選んだ状態の見本 */
}
.main-project {
  margin-bottom: 0; /* 既存 main の下100pxを消す（帯からそのままお問い合わせへ） */
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mp-ink);
  overflow-x: clip;
}
.main-project *,
.main-project *::before,
.main-project *::after { box-sizing: border-box; }
/* 既存 style.css の要素まるごと指定（p, li の文字サイズなど）を、このページの中だけ打ち消す。:where() で詳細度を抑え、下のクラス指定が勝つ */
:where(.main-project) :is(p, span, a, div, li, ul, figure, figcaption, h2, h3, article) {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.main-project img { display: block; max-width: 100%; height: auto; }
.main-project a { color: inherit; text-decoration: none; }

/* 内側の幅＝1020（グリッド 208〜1232 の内側） */
.mp-inner {
  max-width: 1052px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* 見出し：白地の大見出し 40px／帯の中の見出し 32px */
.mp-ttl-l,
.mp-ttl-m {
  font-weight: 700;
  color: var(--mp-navy);
  text-align: center;
  line-height: 1.45;
}
.mp-ttl-l { font-size: 40px; }
.mp-ttl-m { font-size: 32px; }

/* 本文：16px・行間1.6・段落24・両端揃え */
.mp-txt > p + p { margin-top: 24px; }
.mp-txt p { text-align: justify; }
.mp-txt--center p { text-align: center; }

/* 写真の枠＝既存 .box_img と同じ */
.mp-photo img {
  width: 100%;
  border-radius: 16px;
  border: 2px solid #1B657D;
  object-fit: cover;
}

/* 帯（既存 .focus-area01 を使う）。帯のあとはそのままお問い合わせへつなぐので、下の波は出さない */
.main-project .focus-area01.mp-band { margin-top: 54px; padding-bottom: 0; }
.main-project .focus-area01.mp-band::after { display: none; }
.main-project .focus-area01.mp-band .bg_wrapper { padding-bottom: 120px; }
/* フッター上の波の背後を帯と同じ色にする（既存 footer::before の波はページの地色の上に描かれるため） */
.mp footer { background: linear-gradient(var(--mp-beige) 0 7.8vw, transparent 7.8vw); }

@media (max-width: 768px) {
  .mp-ttl-l { font-size: 26px; }
  .mp-ttl-m { font-size: 22px; }
  .main-project .focus-area01.mp-band .bg_wrapper { padding-bottom: 80px; }
}

/* ── 導入ページ（/main-project/）──  ─────────── */
.mp-intro-flow { margin-top: 175px; }
.mp-intro-flow__row {
  display: grid;
  grid-template-columns: 580px 400px;
  justify-content: space-between;
  margin-top: 40px;
}
.mp-intro-flow__main { display: flex; flex-direction: column; }
.mp-intro-flow__photos {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 40px;
}
.mp-intro-flow__photos .mp-photo,
.mp-intro-flow__photos .mp-photo img { height: 100%; }
.mp-intro-flow__map img { width: 400px; border-radius: 16px; border: 2px solid #1B657D; }

.mp-intro-heritage { margin-top: 120px; }
.mp-intro-heritage .mp-txt { margin-top: 40px; }
.mp-intro-heritage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.mp-intro-heritage__grid img { aspect-ratio: 3 / 2; }
.mp-intro-heritage__grid figcaption {
  margin-top: 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--mp-navy);
  text-align: center;
}

.mp-intro-goal { margin-top: 80px; }
.mp-intro-goal__src { margin-top: 6px; font-size: 14px; text-align: center; }
.mp-intro-goal__nums {
  display: flex;
  justify-content: center;
  gap: 122px;
  margin-top: 40px;
  text-align: center;
}
.mp-intro-goal__nums dt { font-size: 17px; font-weight: 700; }
.mp-intro-goal__nums dd { margin: 8px 0 0; color: var(--mp-navy); }
.mp-num { font-family: "Nunito", sans-serif; font-weight: 800; font-style: italic; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.mp-num-unit { font-size: 20px; font-weight: 700; }
.mp-intro-goal__nums .mp-r7 { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; }
.mp-intro-goal__photos {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}
.mp-intro-goal__photos img { aspect-ratio: 3 / 2; }
.mp-intro-goal__msg { margin-top: 40px; }
.mp-intro-goal__msg > * + * { margin-top: 40px; }
.mp-intro-goal__em { font-size: 22px; font-weight: 700; line-height: 1.8; text-align: center; }

.mp-intro-projects { margin-top: 80px; }
.mp-intro-projects__cards {
  display: grid;
  grid-template-columns: repeat(2, 480px);
  justify-content: space-between;
  margin-top: 40px;
}
.mp-card {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid #1B657D;
  background: #fff;
  transition: transform var(--mp-dur-leave) var(--mp-ease);
}
/* 既存 style.css の a:hover img（画像だけ1.02倍に拡大）をカードの中では止める＝動くのはカード全体だけ */
.mp-card img { transition: none; }
.mp-card:hover img { transform: none; }
.mp-card img { width: 100%; aspect-ratio: 480 / 260; object-fit: cover; }
.mp-card__ttl {
  padding: 18px 16px 18px;
  font-size: 22px;
  font-weight: 700;
  color: var(--mp-navy);
  text-align: center;
  line-height: 1.45;
}
@media (hover: hover) and (pointer: fine) {
  .mp-card:hover { transform: translateY(-4px); transition-duration: var(--mp-dur-touch); }
}

@media (max-width: 1024px) {
  .mp-intro-flow__row { grid-template-columns: 1fr; gap: 40px; }
  .mp-intro-flow__map { justify-self: center; }
  .mp-intro-flow__photos .mp-photo img { aspect-ratio: 282 / 270; height: auto; }
  .mp-intro-goal__nums { gap: 40px; flex-wrap: wrap; }
  .mp-intro-goal__photos { grid-template-columns: repeat(3, 1fr); }
  .mp-intro-projects__cards { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 768px) {
  .mp-intro-flow { margin-top: 80px; }
  .mp-intro-heritage { margin-top: 80px; }
  /* 4つの場所を一覧で見せる＝SPも2列×2段 */
  .mp-intro-heritage__grid { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .mp-intro-heritage__grid figcaption { margin-top: 8px; font-size: 16px; }
  /* 写真3枚は横スライド（指でスワイプ・1枚ずつ止まる）。画面の端まで抜き、次の写真が少しのぞく */
  .mp-intro-goal__photos {
    display: flex;
    justify-content: flex-start; /* PC用の center が残ると1枚目が左にはみ出して見えなくなる */
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mp-intro-goal__photos::-webkit-scrollbar { display: none; }
  .mp-intro-goal__photos .mp-photo { flex: 0 0 78%; scroll-snap-align: start; }
  .mp-intro-goal__em { font-size: 18px; }
  /* 地図はSPでも「添える図」の大きさに（画面いっぱいにすると平らな絵の粗さが目立つ） */
  .mp-intro-flow__map img { width: 100%; max-width: 240px; margin-inline: auto; }
  /* 写真2枚と地図を「画像3つのまとまり」に見せる：間を写真どうしと同じ16に */
  .mp-intro-flow__row { gap: 16px; }
  .mp-intro-projects__cards { grid-template-columns: 1fr; }
  .mp-card__ttl { font-size: 18px; }
  .mp-txt--center p { text-align: justify; }
  .mp-txt--center p br { display: none; }
  .mp-txt--center-sp p { text-align: center; } /* 帯の中の文章はSPでも中央揃え */
}

/* 改行位置：意味のある語を途中で折り返さない。nowrapは使わない＝1行より長いときは中で折り返す */
.mp-nw { display: inline-block; font-size: inherit; font-weight: inherit; color: inherit; } /* MVなど main の外でも既存の span 一括指定を受けない */
/* SPの本文段落ではまとめない。見出しはSPでもまとめる */
@media (max-width: 768px) {
  .mp-txt p .mp-nw { display: inline; }
}

/* ── 油津ページ（/main-project/aburatsu/）── ──────────帯は既存 .focus-area01（上下の波も既存） */
.mp-page-aburatsu footer { background: none; } /* 導入は帯からそのままお問い合わせへつなぐが、油津は白地の締めから */

/* リード：大見出し40（左揃え）→40→ 文章580（28px・210%・両端揃え）＋40＋写真400 */
.mp-ab-lead { margin-top: 175px; }
.mp-ab-lead__ttl { font-size: 40px; font-weight: 700; line-height: 1.45; color: var(--mp-navy); }
.mp-ab-lead__row {
  display: grid;
  grid-template-columns: 580px 400px;
  justify-content: space-between;
  align-items: start;
  margin-top: 40px;
}
.mp-ab-lead__txt { font-size: 28px; line-height: 2.1; color: #232722; text-align: justify; }
.mp-ab-lead__img img { aspect-ratio: 1 / 1; }

/* ポテンシャル：見出し→段40／文章530＋40＋写真450（大1＋小2・間16） */
.mp-ab-potential { margin-top: 120px; }
.mp-ab-potential__row {
  display: grid;
  grid-template-columns: 530px 450px;
  justify-content: space-between;
  align-items: end;
  margin-top: 40px;
}
.mp-ab-potential__sub { font-size: 36px; font-weight: 700; line-height: 1.33; color: var(--mp-navy); margin-bottom: 24px; }
.mp-ab-potential__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mp-ab-potential__photos .is-big { grid-column: 1 / 3; }
.mp-ab-potential__photos .is-big img { aspect-ratio: 450 / 240; }
.mp-ab-potential__photos img { aspect-ratio: 217 / 140; }

/* 帯：既存 .focus-area01 の overflow-x:hidden は縦も切ってしまう（マップが上の波にまたがるため）→ clip に */
.main-project .focus-area01.mp-ab-band { margin-top: 211px; overflow-x: clip; overflow-y: visible; }
.main-project .focus-area01.mp-ab-band .bg_wrapper { padding-bottom: 106px; }

/* 事業マップ：帯の上端から65px上にはみ出す。注記は削除 */
.mp-ab-mapwrap {
  position: relative;
  z-index: 11; /* 既存の波（z-index:10）より上 */
  max-width: 1060px;
  margin: calc(-60px - 7.78vw - 65px) auto 0; /* カード上端＝帯の上端−65 */
  padding: 0 16px;
}
.mp-ab-mapnote {
  position: absolute;
  top: 0;
  left: -16px;
  z-index: 1;
  background: #e94b20;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  padding: 8px 16px;
  border-radius: 30px;
}
.mp-ab-mapcard {
  background: #f5fdff;
  border: 6px solid var(--mp-navy);
  border-radius: 32px;
  padding: 54px;
}
.mp-ab-mapcard__ttl { font-size: 36px; font-weight: 700; line-height: 1.33; color: var(--mp-navy); text-align: center; }
.mp-ab-mapcard__grid {
  display: grid;
  grid-template-columns: minmax(0, 504px) 360px;
  gap: 32px;
  justify-content: center;
  align-items: start;
  margin-top: 32px;
}

/* 地図とピン（位置と大きさは地図枠504×719を基準にした単位 --u で持つ。Figmaの座標そのまま） */
.mp-ab-map {
  position: relative;
  width: 100%;
  aspect-ratio: 504 / 719;
  container-type: inline-size;
  --u: calc(100cqw / 504);
}
.main-project .mp-ab-map__base { position: absolute; left: 0; top: calc(5 * var(--u)); width: 100%; height: auto; }
.mp-ab-pin {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* 当たり判定は丸とラベルだけ */
}
.mp-ab-pin__body { position: absolute; inset: 0; filter: drop-shadow(0 4px 16px rgba(62, 41, 2, .2)); }
.main-project .mp-ab-pin__disc,
.mp-ab-pin__lbl { pointer-events: auto; position: absolute; transition: transform var(--mp-dur-leave) var(--mp-ease), background-color var(--mp-dur-leave) var(--mp-ease); }
.main-project .mp-ab-pin__disc {
  left: calc(var(--dx) * var(--u));
  top: calc(var(--dy) * var(--u));
  width: calc(var(--dw) * var(--u));
  height: calc(var(--dh) * var(--u));
  max-width: none;
  transform-origin: 50% 100%;
}
.mp-ab-pin__lbl {
  left: calc((var(--lx) + var(--lw) / 2) * var(--u));
  top: calc(var(--ly) * var(--u));
  transform: translateX(-50%);
  transform-origin: 50% 0;
  background: var(--mp-navy);
  color: #fff;
  font-weight: 700;
  font-size: max(11px, calc(14 * var(--u)));
  line-height: 1;
  letter-spacing: .03em;
  padding: max(4px, calc(8 * var(--u))) max(9px, calc(18 * var(--u)));
  border-radius: 40px;
  white-space: nowrap;
}
.mp-ab-pin.is-hot { z-index: 3; }
.mp-ab-pin.is-hot .mp-ab-pin__disc { transform: translateY(-6px); transition-duration: var(--mp-dur-touch); }
.mp-ab-pin.is-hot .mp-ab-pin__lbl { transform: translateX(-50%) translateY(-6px); background: var(--mp-hot); transition-duration: var(--mp-dur-touch); }
@media (hover: hover) and (pointer: fine) {
  a.mp-ab-pin:hover { z-index: 3; }
  a.mp-ab-pin:hover .mp-ab-pin__disc { transform: translateY(-6px); transition-duration: var(--mp-dur-touch); }
  a.mp-ab-pin:hover .mp-ab-pin__lbl { transform: translateX(-50%) translateY(-6px); background: var(--mp-hot); transition-duration: var(--mp-dur-touch); }
}
a.mp-ab-pin:focus-visible { outline: none; }
a.mp-ab-pin:focus-visible .mp-ab-pin__lbl { outline: 3px solid #D68600; outline-offset: 3px; }
span.mp-ab-pin * { cursor: default; }

/* 右リスト */
.mp-ab-legend__main { list-style: none; margin: 0; padding: 0; }
.mp-ab-legend__main li { border-bottom: 2px solid #dfe7ea; }
.mp-ab-legend__it { position: relative; isolation: isolate; display: flex; align-items: center; border-radius: 8px; }
.mp-ab-legend__it::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(27, 101, 125, .07);
  opacity: 0;
  transition: opacity var(--mp-dur-leave) var(--mp-ease);
}
.mp-ab-legend__main .mp-ab-legend__it { gap: 16px; padding: 14px 12px 14px 12px; /* 数字の左に余白 */ font-size: 22px; font-weight: 700; color: var(--mp-navy); line-height: 1.45; }
.mp-ab-legend__badge {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--mp-navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  transition: background-color var(--mp-dur-leave) var(--mp-ease);
}
.mp-ab-legend__it.is-hot::after { opacity: 1; transition-duration: var(--mp-dur-touch); }
.mp-ab-legend__it.is-hot .mp-ab-legend__badge { background: var(--mp-hot); transition-duration: var(--mp-dur-touch); }
@media (hover: hover) and (pointer: fine) {
  a.mp-ab-legend__it:hover::after { opacity: 1; transition-duration: var(--mp-dur-touch); }
  a.mp-ab-legend__it:hover .mp-ab-legend__badge { background: var(--mp-hot); transition-duration: var(--mp-dur-touch); }
}
span.mp-ab-legend__it { cursor: default; }
a.mp-ab-legend__it:focus-visible { outline: 3px solid #D68600; outline-offset: 2px; }
.mp-ab-legend__sub { margin-top: 28px; }
.mp-ab-legend__sub p { font-size: 16px; font-weight: 700; color: var(--mp-navy); }
.mp-ab-legend__sub ul { list-style: none; margin: 0; padding: 0; }
.mp-ab-legend__sub .mp-ab-legend__it { gap: 14px; padding: 8px 8px 8px 6px; font-size: 18px; }
.mp-ab-legend__sub .mp-ab-legend__it::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mp-navy);
}

/* 入場の動き＝このページで動くのはピンだけ。右リスト・下の3項目は読むものなので最初から出しておく
   - 上から落とさず、下から静かに着地（減速のみ・弾まない）
   - 出る間隔は運河を下る順に少しずつ詰まり、最後の油津港（世界からの入口）だけひと呼吸おいて、少し長く着地する
   - JSが動く環境でだけ .is-armed を付けて隠す（JSなしは最初から完成形）。遅れは JS が --d に入れる */
/* 隠すときは動かさない（transition は出すときだけに付ける＝隠す瞬間にフェードアウトが見えないように） */
.is-armed .mp-ab-pin { opacity: 0; transform: translateY(12px); transition: none; } /* 既存 a の transition(0.4s) も切る */
.is-armed .mp-ab-pin.is-port { transform: translateY(18px); }
.is-armed .mp-ab-pin.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--mp-dur-enter) var(--mp-ease) var(--d, 0ms), transform var(--mp-dur-enter) var(--mp-ease) var(--d, 0ms);
}
.is-armed .mp-ab-pin.is-port.is-in { transition-duration: .9s; }
/* 動きを減らす設定：移動はなし・同時にフェードだけ（ゼロにせず弱く） */
@media (prefers-reduced-motion: reduce) {
  .is-armed .mp-ab-pin, .is-armed .mp-ab-pin.is-port { transform: none; }
  .is-armed .mp-ab-pin.is-in, .is-armed .mp-ab-pin.is-port.is-in { transition: opacity .4s linear 0ms; }
  .mp-ab-pin.is-hot .mp-ab-pin__disc, .mp-ab-pin.is-hot .mp-ab-pin__lbl { transition: none; }
}

/* 事業詳細：マップ→見出し120／見出し→カード40／カード間40／グループ間80。カード＝写真360＋40＋文章620（上下中央） */
.mp-ab-detail { margin-top: 120px; }
.mp-ab-detail__list { display: flex; flex-direction: column; gap: 40px; margin-top: 40px; }
.mp-ab-detail__grp2 { margin-top: 80px; }
.mp-ab-card { position: relative; display: grid; grid-template-columns: 360px minmax(0, 620px); justify-content: space-between; align-items: center; scroll-margin-top: 120px; }
.mp-ab-card__ph img { aspect-ratio: 3 / 2; }
.mp-ab-card__ttl { font-size: 20px; font-weight: 700; line-height: 1.45; color: var(--mp-navy); }
.mp-ab-card__tx .mp-txt { margin-top: 12px; }
.mp-ab-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  background: #fff;
  border: 1.5px solid var(--mp-navy);
  border-radius: 30px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  box-shadow: 0 0 8px rgba(40, 46, 48, .1);
  transition: transform .4s, border-color .4s;
}
.main-project .mp-ab-more img { width: 14px; height: 14px; }
.mp-ab-more:hover img { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .mp-ab-more:hover { transform: scale(1.1); border-color: #D68600; }
}
/* 着いた先を光らせる枠は外した */

/* 締め：見出し→文40／段落24／写真270×180を文の左右に（上2枚＝文の上端・下2枚＝文の下端）→ お問い合わせ120 */
.mp-ab-close { max-width: 1156px; margin: 131px auto 120px; padding-inline: 16px; }
.mp-ab-close__body { position: relative; margin-top: 40px; }
.mp-ab-close__ph { position: absolute; width: 270px; }
.mp-ab-close__ph img { aspect-ratio: 3 / 2; }
.mp-ab-close__ph.is-l1 { left: 0; top: 0; } /* Figma x158（1440）＝帯の内側の端 */
.mp-ab-close__ph.is-r1 { right: 0; top: 0; }
.mp-ab-close__ph.is-l2 { left: 0; bottom: 0; }
.mp-ab-close__ph.is-r2 { right: 0; bottom: 0; }

@media (max-width: 1180px) {
  /* 文の左右に写真を置く幅が無くなったら、文の下に4枚並べる */
  .mp-ab-close__body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .mp-ab-close__txt { grid-column: 1 / 5; margin-bottom: 24px; }
  .mp-ab-close__ph { position: static; width: auto; }
}
@media (max-width: 1024px) {
  .mp-ab-lead__row { grid-template-columns: 1fr minmax(0, 320px); gap: 40px; }
  .mp-ab-lead__txt { font-size: 22px; }
  .mp-ab-potential__row { grid-template-columns: 1fr; gap: 40px; }
  .mp-ab-potential__photos { max-width: 560px; }
  .mp-ab-mapcard { padding: 44px 32px; }
  .mp-ab-mapcard__grid { grid-template-columns: minmax(0, 504px) minmax(0, 340px); gap: 28px; }
  .mp-ab-legend__main .mp-ab-legend__it { font-size: 19px; }
  .mp-ab-legend__sub .mp-ab-legend__it { font-size: 16px; }
  .mp-ab-card { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 860px) {
  .mp-ab-mapcard__grid { grid-template-columns: minmax(0, 504px); }
  .mp-ab-legend { width: 100%; max-width: 504px; justify-self: center; }
}
@media (max-width: 768px) {
  .mp-ab-lead { margin-top: 80px; }
  .mp-ab-lead__ttl { font-size: 26px; }
  .mp-ab-lead__row { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .mp-ab-lead__txt { font-size: 18px; line-height: 2; }
  .mp-ab-lead__img { width: min(100%, 400px); justify-self: center; }
  .mp-ab-potential { margin-top: 80px; }
  .mp-ab-potential__row { margin-top: 32px; }
  .mp-ab-potential__sub { font-size: 22px; margin-bottom: 16px; }
  .main-project .focus-area01.mp-ab-band { margin-top: 166px; }
  .main-project .focus-area01.mp-ab-band .bg_wrapper { padding-bottom: 64px; }
  .mp-ab-mapwrap { margin-top: calc(-40px - 6.7vw - 40px); padding-top: 0; }
  .mp-ab-mapnote { left: 0; font-size: 13px; padding: 6px 12px; }
  .mp-ab-mapcard { border-width: 4px; border-radius: 20px; padding: 28px 16px; }
  .mp-ab-mapcard__ttl { font-size: 21px; }
  .mp-ab-mapcard__grid { margin-top: 20px; }
  .mp-ab-legend__main .mp-ab-legend__it { font-size: 16px; gap: 12px; padding: 11px 10px 11px 10px; }
  .mp-ab-legend__badge { width: 28px; height: 28px; font-size: 15px; }
  .mp-ab-legend__sub { margin-top: 18px; }
  .mp-ab-legend__sub p { font-size: 14px; }
  .mp-ab-legend__sub .mp-ab-legend__it { font-size: 15px; }
  .mp-ab-detail { margin-top: 80px; }
  .mp-ab-detail__list { gap: 40px; margin-top: 24px; }
  .mp-ab-detail__grp2 { margin-top: 64px; }
  .mp-ab-card { grid-template-columns: 1fr; gap: 16px; }
  .mp-ab-card__ttl { font-size: 18px; }
  .mp-ab-more { margin-top: 16px; }
  .mp-ab-close { margin-top: 96px; margin-bottom: 80px; }
  /* 締め（SP）：写真を文章の途中へ。PCの配置はそのまま
     1段落→［花峯橋・河野］→2〜4段落→［堀川橋・クルーズ船］→5〜7段落（転換とお願いは文章だけで締める） */
  .mp-ab-close__body { grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 0; margin-top: 24px; }
  .mp-ab-close__txt { display: contents; }
  .mp-ab-close__txt > p { grid-column: 1 / -1; order: 3; }
  .mp-ab-close__txt > p:nth-child(1) { order: 1; }
  .mp-ab-close__txt > p:nth-child(n+5) { order: 6; }
  .mp-ab-close__ph { margin: 32px 0 8px; } /* 後ろの段落の上24と足して32 */
  .mp-ab-close__ph.is-l1, .mp-ab-close__ph.is-r1 { order: 2; }
  .mp-ab-close__ph.is-r2 { order: 4; } /* 堀川橋（歩いて巡る）を先に */
  .mp-ab-close__ph.is-l2 { order: 5; } /* クルーズ船（賑わい） */
  .mp-ab-close__txt > p:last-child { font-weight: 700; color: var(--mp-navy); } /* 締めの言葉 */
  .mp-ab-close__txt p .mp-nw { display: inline-block; } /* このセクションだけSPでも固有名詞を途中で折り返さない */
}

/* ── DENKENページ（/main-project/denken/）── ──────────
   組み方は油津にそろえる（リード＝油津と同じ型／帯は導入と同じ「帯のあとはそのままお問い合わせへ」）
   値は Figma の実測：リード175／段の間120／見出し→段40／段落24／写真は角丸16＋枠線 */

/* リード：見出し40（左・字間4%）→40→ 文章580（28px・210%）＋40＋写真400 */
.mp-dk-lead { margin-top: 175px; }
.mp-dk-lead__ttl { font-size: 40px; font-weight: 700; line-height: 1.6; letter-spacing: .04em; color: var(--mp-navy); }
.mp-dk-lead__row {
  display: grid;
  grid-template-columns: 580px 400px;
  justify-content: space-between;
  align-items: start;
  margin-top: 40px;
}
.mp-dk-lead__txt { font-size: 28px; line-height: 2.1; color: #232722; text-align: justify; }
.mp-dk-lead__img img { aspect-ratio: 400 / 267; }

/* DENKEN WEEKとは：見出し40 →40→ 本文560（段落24）｜写真470（本文の上端にそろえる）。Figmaは写真の右端が1280（グリッドの外へ48） */
.mp-dk-about {
  display: grid;
  grid-template-columns: 560px 470px; /* 左端はグリッド210にそろえ、写真だけ右へ48はみ出す（Figmaどおり） */
  column-gap: 40px;
  align-items: start;
  row-gap: 40px;
  max-width: 1052px;
  margin: 120px auto 0;
  padding-inline: 16px;
}
.mp-dk-about__ttl { grid-column: 1; font-size: 40px; font-weight: 700; line-height: 1; color: var(--mp-navy); }
.mp-dk-about__txt { grid-column: 1; grid-row: 2; }
.mp-dk-about__img { grid-column: 2; grid-row: 2; }
.mp-dk-about__img img { aspect-ratio: 470 / 313; }

/* 目指すもの：写真の下端から87 →見出し40 →40→ 小見出し22 →24→ 本文（中央）→40→ 写真390×2（間40）。写真は帯の上の波にまたがる */
.mp-dk-goal { margin-top: 87px; }
.mp-dk-goal__sub { margin-top: 40px; font-size: 22px; font-weight: 700; line-height: 1.45; text-align: center; }
.mp-dk-goal__txt { margin-top: 24px; }
.mp-dk-goal__photos {
  position: relative;
  z-index: 11; /* 既存の波（z-index:10）より上 */
  display: grid;
  grid-template-columns: repeat(2, 390px);
  justify-content: center;
  gap: 40px;
  margin-top: 40px;
}
.mp-dk-goal__photos img { aspect-ratio: 3 / 2; }

/* 帯：写真の下端から98上で波が始まり、帯の見出しは写真の下端から92（Figma 2285→2187／2377） */
.main-project .focus-area01.mp-dk-band { margin-top: -98px; }
.main-project .focus-area01.mp-dk-band .bg_wrapper { padding-top: calc(190px - 7.78vw); }

/* パートナー募集：見出し32 →40→ 本文816（中央・段落24）→40→ ボタン。写真270×180を文の左右に（上2枚＝文の上端・下2枚＝文の下端）＝油津の締めと同じ型 */
.mp-dk-cta { max-width: 1156px; margin-inline: auto; padding-inline: 16px; }
.mp-dk-cta__body { position: relative; margin-top: 40px; }
.mp-dk-cta__txt { max-width: 816px; margin-inline: auto; }
.mp-dk-cta__ph { position: absolute; width: 270px; }
.mp-dk-cta__ph img { aspect-ratio: 3 / 2; }
.mp-dk-cta__ph.is-l1 { left: 0; top: 0; } /* Figma x158／1282 */
.mp-dk-cta__ph.is-r1 { right: 0; top: 0; }
.mp-dk-cta__ph.is-l2 { left: 0; bottom: 0; }
.mp-dk-cta__ph.is-r2 { right: 0; bottom: 0; }
.main-project .mp-dk-btn { margin-top: 40px; } /* 既存 .btn（触れたときの拡大も既存のまま） */

@media (max-width: 1180px) {
  /* 文の左右に写真を置く幅が無くなったら、文の下に4枚並べる（油津の締めと同じ） */
  .mp-dk-cta__body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .mp-dk-cta__txt { grid-column: 1 / 5; margin-bottom: 24px; }
  .mp-dk-cta__ph { position: static; width: auto; }
}
@media (max-width: 1180px) {
  .mp-dk-about { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
}
@media (max-width: 1024px) {
  .mp-dk-lead__row { grid-template-columns: 1fr minmax(0, 320px); gap: 40px; }
  .mp-dk-lead__txt { font-size: 22px; }
}
@media (max-width: 768px) {
  .mp-dk-lead { margin-top: 80px; }
  .mp-dk-lead__ttl { font-size: 26px; }
  .mp-dk-lead__row { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .mp-dk-lead__txt { font-size: 18px; line-height: 2; }
  .mp-dk-lead__img { width: min(100%, 400px); justify-self: center; }
  .mp-dk-about { grid-template-columns: 1fr; row-gap: 24px; margin-top: 80px; }
  .mp-dk-about__ttl { font-size: 26px; }
  .mp-dk-about__img { grid-column: 1; grid-row: 3; width: min(100%, 470px); justify-self: center; }
  .mp-dk-goal { margin-top: 80px; }
  .mp-dk-goal__sub { margin-top: 24px; font-size: 18px; }
  .mp-dk-goal__txt { margin-top: 16px; }
  .mp-dk-goal__photos { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 32px; }
  .main-project .focus-area01.mp-dk-band { margin-top: -48px; }
  .main-project .focus-area01.mp-dk-band .bg_wrapper { padding-top: calc(96px - 6.7vw); }
  /* パートナー募集（SP）：写真を文章の途中へ（油津の締めと同じ考え方・HTMLの順は変えない）
     1〜2段落（場・作品）→［金魚・橙の作品］→3段落（訪れ・宿泊や飲食）→［杉木立の客席・夜の食事］→4〜5段落（お願い） */
  .mp-dk-cta__body { grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 0; margin-top: 24px; }
  .mp-dk-cta__txt { display: contents; }
  .mp-dk-cta__txt > p { grid-column: 1 / -1; order: 1; }
  .mp-dk-cta__txt > p:nth-child(3) { order: 3; }
  .mp-dk-cta__txt > p:nth-child(n+4) { order: 5; }
  .mp-dk-cta__ph { margin: 32px 0 8px; } /* 後ろの段落の上24と足して32 */
  .mp-dk-cta__ph.is-l1, .mp-dk-cta__ph.is-l2 { order: 2; }
  .mp-dk-cta__ph.is-r1, .mp-dk-cta__ph.is-r2 { order: 4; }
  .mp-dk-cta__txt > p:last-child { font-weight: 700; color: var(--mp-navy); } /* 締めの言葉 */
  .mp-dk-cta__txt p .mp-nw { display: inline-block; } /* 中央揃えなので字間は開かない＝SPでも固有名詞をまとめる */
  .main-project .mp-dk-btn { margin-top: 32px; }
}

/* ── 下層4ページ（/main-project/aburatsu/r8-○○/）── 
   4ページ同じ型：リード（ラベル16＋見出し34・中央）→71→ 1段目（白地）→54→ 帯（2段目〜戻るボタン）→ お問い合わせ
   1段目＝見出し（左）→24→ 文章560＋40＋写真420（写真は本文の高さ）／帯の中＝見出し→本文24・見出し→写真の段40・段内の2つの間40・段→段80・最後の段→戻る80・戻る→お問い合わせ120 */

/* MVの注記（資料館「※完成イメージ」）＝写真の右下。既存MVは左右20の余白つき（1024以下は余白0） */
.mv_img-lower-layer .mp-sub-mvnote {
  position: absolute;
  right: 40px;
  bottom: 15px;
  margin: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
}

/* リード：MVの下端から89→ ラベル16 →13（花峯橋16）→ 見出し34 */
.mp-sub-lead { margin-top: 89px; text-align: center; }
.mp-sub-lead__label { font-size: 16px; line-height: 1.45; text-align: center; } /* style.css の SP（768以下）p{justify} に負けて左寄せに見えるのを防ぐ */
.mp-sub-lead__ttl { margin-top: 13px; font-size: 34px; font-weight: 700; line-height: 1.45; color: var(--mp-navy); }
.mp-sub--hanamine .mp-sub-lead__ttl { margin-top: 16px; }

/* 見出し28（1段目は左・帯の中は中央が基本） */
.mp-sub-ttl { font-size: 28px; font-weight: 700; line-height: 1.45; color: var(--mp-navy); }
.mp-sub-ttl.is-center { text-align: center; }

/* 1段目：リードの下端から71 */
.mp-sub-s1 { margin-top: 71px; }

/* 段＝文章560＋40＋写真420（写真が左なら 420＋40＋560）。見出しが段の中にあるときは見出し→本文24 */
.mp-sub-row {
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 42fr);
  column-gap: 40px;
  row-gap: 24px;
  align-items: start;
}
.mp-sub-row.is-ph-l { grid-template-columns: minmax(0, 42fr) minmax(0, 56fr); }
.mp-sub-row.is-mid { align-items: center; } /* 文章を写真の上下中央に */
.mp-sub-row > .mp-sub-ttl { grid-column: 1 / -1; }
.mp-sub-row__ph img { aspect-ratio: 3 / 2; }
/* 1段目：写真の高さ＝本文の高さ（写真が行の高さを決めないように絶対配置） */
.mp-sub-row.is-fit .mp-sub-row__ph { position: relative; align-self: stretch; }
.mp-sub-row.is-fit .mp-sub-row__ph img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }

/* 中央の列600（帯の中の本文・資料館の1段目） */
.mp-sub-col { max-width: 600px; margin-inline: auto; }
.mp-sub-col > .mp-sub-ttl + .mp-txt { margin-top: 24px; }

/* 帯：上の波の始まりから見出しまで127（Figma 1220→1347）。帯の手前は1段目から54（.mp-band の既定） */
.main-project .focus-area01.mp-sub-band .bg_wrapper { padding-top: calc(127px - 7.78vw); }
.mp-sub-blk + .mp-sub-blk { margin-top: 80px; }
.mp-sub-ttl + .mp-sub-col { margin-top: 24px; }
.mp-sub-ttl + .mp-sub-row { margin-top: 40px; }
.mp-sub-row + .mp-sub-row { margin-top: 40px; }
.mp-sub-col + .mp-sub-pair,
.mp-sub-col + .mp-sub-solo,
.mp-sub-solo + .mp-sub-col { margin-top: 40px; }

/* 写真2枚組（240×160・間16・中央）／1枚（480×320・中央） */
.mp-sub-pair { display: grid; grid-template-columns: repeat(2, 240px); justify-content: center; gap: 16px; }
.mp-sub-pair img,
.mp-sub-solo img { aspect-ratio: 3 / 2; }
.mp-sub-solo { max-width: 480px; margin-inline: auto; }

/* 写真の注記（資料館「※画像はすべて完成イメージです」）＝写真の下8・右揃え */
.mp-sub-note { margin-top: 8px; font-size: 13px; line-height: 1.45; text-align: right; }

/* 戻る：最後の段から80（既存 .btn。触れたときの拡大も既存のまま） */
.main-project .mp-sub-back { margin-top: 80px; }

@media (max-width: 1024px) {
  .mv_img-lower-layer .mp-sub-mvnote { right: 20px; }
  /* 1024以下は1列。2列のままだと1段目の写真が字丈に合わせて縦長に切られるため。行の長さと写真の拡大を抑えるため列は640まで */
  .mp-sub-row,
  .mp-sub-row.is-ph-l { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .mp-sub-row.is-fit .mp-sub-row__ph img { position: static; height: auto; } /* 写真の元の比率（width/height属性）で */
}
@media (max-width: 960px) {
  .mp-sub-br-pc { display: none; } /* Figmaの改行（PCの列幅560用）。960以下では「る」1字だけの行になるため外す（1024では残す＝改行の手前の行は両端揃えで伸びない） */
}
@media (max-width: 768px) {
  .mp-sub-lead { margin-top: 64px; }
  .mp-sub-lead__ttl,
  .mp-sub--hanamine .mp-sub-lead__ttl { margin-top: 10px; font-size: 22px; } /* 導入のSP見出し22と同じ */
  .mp-sub-ttl { font-size: 20px; }
  .mp-sub-s1 { margin-top: 56px; }
  .main-project .focus-area01.mp-sub-band .bg_wrapper { padding-top: calc(88px - 6.7vw); }
  .mp-sub-blk + .mp-sub-blk { margin-top: 56px; }
  .mp-sub-ttl + .mp-sub-row,
  .mp-sub-row + .mp-sub-row,
  .mp-sub-col + .mp-sub-pair,
  .mp-sub-col + .mp-sub-solo,
  .mp-sub-solo + .mp-sub-col { margin-top: 32px; }
  .mp-sub-pair { grid-template-columns: 1fr 1fr; gap: 10px; }
  .main-project .mp-sub-back { margin-top: 56px; }
}
@media (max-width: 400px) {
  .main-project .mp-sub-back { padding-inline: 24px; } /* 「油津まちづくり計画事業へ戻る」は既存のボタンより長く、360で2行になるため */
}
@media (max-width: 374px) {
  .mp-sub-lead__ttl,
  .mp-sub--hanamine .mp-sub-lead__ttl { font-size: 20px; }
  .mp-sub-ttl { font-size: 19px; } /* 「「まちへ出かけたくなる資料館」へ。」（17字）が1行に収まる大きさ */
}