@charset "UTF-8";
/* =================================================
   vision.css - ビジョン（8つの約束）
   SP: XD SPモック（AB 390）/ PC: XD "Vision"（AB 1200x6642）実測

   PC主要座標: ヘッダー緑罫y168 -> MV y168-879(1200x711)
     白パネル (100,430) 483x323 角丸10px(天のみ) / 緑帯 (0,753) 1200x126
     見出しベースラインy825（❽のみ30px）/ MVクレジット 右端x1071 y858
     ❶写真 (277,921) 665x626 / ❷写真 (277,1941)
     ❸❹写真 y3027・❺❻ y3594・❼❽ y4176（各 437x233 / x=100,663 段間126）
     バトン帯 (0,4813) 1200x491 / 写真 (100,4860) 242x390 / 右カラム x406 幅694
   ================================================= */

/* ---------- MV ---------- */
/* MVは画面幅100%・縦横比1200:711 固定（クライアント指定）。上限幅は掛けない。
   白パネルと緑帯は写真の地に張り付く帯なので高さは固定のまま。
   写真の中の横位置だけ % にして、画面幅が変わっても比率が保たれるようにしている */
.vision-mv {
  position: relative;
  /* SPはヘッダー（お問い合わせボタン地y119）とMV天y133の間に14pxの余白がある。PCは緑罫に接する */
  margin-top: 14px;
}

.vision-mv-photo {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 493;
  object-fit: cover;
}

/* 写真の下部に重なる白パネル（天のみ角丸10px）
   SP実測: (0,406) 390x220・不透明度80% / 写真は133-626 なので下端が写真の地に合う */
.vision-mv-panel {
  position: absolute;
  right: 0;
  bottom: 130px; /* 緑帯の高さぶん上 = 写真の地 */
  left: 0;
  height: 220px;
  padding: 32px 25px 0;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.8);
}

/* XD実測 charSpacing 500（1/1000em単位）= 0.5em。23px・字間11.5pxで
   最長行「地域と人との絆を強め」(10字)が333.5px＝コンテンツ幅340pxにギリギリ収まる。
   つまりこのコピーは**アートボード幅390px専用の詰め**で、375pxや360pxの端末では
   折り返して白パネルからあふれる。
   そこで390px未満では文字サイズを幅に比例させ、XDの見た目（14.5em＝最長行が
   コンテンツ幅の98.1%）をどの端末幅でも保つようにしている。
     f = (100vw - パネル左右余白50px) x 0.06766   ※390pxのとき f = 23px
   letter-spacing と行送りはemで持たせているので自動で追従する。
   CSSは最後の1文字の後ろにも字間を入れてしまうため、負のマージンで打ち消す */
.vision-mv-copy {
  font-size: min(23px, calc(6.766vw - 3.38px));
  font-weight: 900;
  line-height: min(40px, calc(11.767vw - 5.88px)); /* 文字サイズの40/23倍。390px以上でXD実測の40px */
  letter-spacing: 0.5em;
  margin-right: -0.5em;
  color: var(--color-primary);
}

/* 見出し帯。SPは写真の下に続き、PCは写真の下部に重なる */
.vision-mv-band {
  position: relative;
  height: 130px;
  background: var(--color-primary);
}

.vision-title {
  padding-top: 51px; /* ❽が30pxで行boxが伸びるぶんを差し引いてベースラインy704に合わせる */
  color: var(--color-white);
  font-size: 20px;
  font-weight: 900;
  line-height: 29px;
  text-align: center;
}

/* 「❽」だけ30px（XDの混在テキスト） */
.vision-title-num {
  font-size: 30px;
}

/* MV写真のクレジット。SPは帯の上部・PCは帯の下部（XDで上下が入れ替わっている） */
.vision-mv-credit {
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: var(--color-white);
}

/* ---------- 約束セクション ---------- */
.promise {
  padding: 36px 25px 0;
}

/* 約束どうしの間隔。XD SPモックは前の本文の地から次の写真の天まで
   71/58/58/58/48/48/55px とばらついているので平均値の57pxで統一する */
.promise + .promise {
  padding-top: 57px;
}

.promise-media {
  position: relative;
}

.promise-photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* XD実測: アイコンはキャプションと見出しの間に中央配置。
   高さが47〜70pxとまちまちなので、2カラム段で見出しがそろうよう
   71pxの固定スロットの中央に置く（XDも段内で上下中心をそろえている） */
.promise-icon-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 71px;
  margin: 18px 0 13px;
}

.promise-icon {
  display: block;
}

.promise-caption {
  margin-top: 0;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: #6e6e6e;
}

/* SPの見出しはXD実測どおりの位置で改行させたい（改行はマークアップ側の <br class="sp-only">）。
   ただし最長行の❼「❼ 豊かな自然環境が守られている三重」は345.6pxあり、
   コンテンツ幅340pxに収まらない（XD上も左右の余白を2.8pxずつはみ出している）。
   そこで左右に3pxずつ出したうえで、390px未満では文字サイズを幅に比例させ、
   どの端末幅でもXDと同じ位置で改行されるようにしている。
     最長行 = 17.28em（345.6 / 20px）/ 使える幅 = 100vw - 50px + 6px
     f = (100vw - 44px) / 17.28   ※390pxのとき f = 20px
   行送りはその1.7倍（20pxのとき34px）。PCは @media 側で固定値に戻す */
.promise-title {
  margin-top: 0; /* 上の余白は .promise-icon-slot が持つ */
  margin-inline: -3px;
  font-size: min(20px, calc(5.787vw - 2.546px));
  font-weight: 900;
  line-height: min(34px, calc(9.838vw - 4.328px));
  text-align: center;
  color: var(--color-primary);
}

/* 小見出し（～〜～）は同じ行送りで16px Bold＝見出しの0.8倍。
   emで持たせて見出しと一緒に縮むようにする */
.promise-sub {
  font-size: 0.8em;
  font-weight: 700;
}

/* ❽の小見出しだけXDで charSpacing -60（= -0.06em）が掛かっている（PC・SPとも）。
   行を収めるための手当てと思われるが、実測値どおりに再現しておく */
.promise-sub--tight {
  letter-spacing: -0.06em;
}

.promise-body {
  margin-top: 26px;
  font-size: 14px;
  font-weight: 700; /* XD実測: 本文はBold */
  line-height: 28px;
  color: var(--color-text);
}

/* ---------- バトンセクション ---------- */
.vision-baton {
  margin-top: 56px;
  padding: 40px 25px;
  background: var(--color-bg-tint);
}

.vision-baton-photo {
  display: block;
  width: 200px;
  aspect-ratio: 242 / 390;
  margin-inline: auto;
  object-fit: cover;
}

.vision-baton-credit {
  margin-top: 4px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: #6e6e6e;
}

.vision-baton-title {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 900;
  line-height: 34px;
  color: var(--color-primary);
}

.vision-baton-name {
  font-size: 14px;
}

.vision-baton-text {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
}

.vision-baton .button {
  margin: 24px auto 0;
}

/* =================================================
   PC（768px〜）XD "Vision" 実測
   ================================================= */
@media (min-width: 768px) {
  .vision-mv {
    margin-top: 0;
  }

  .vision-mv-photo {
    aspect-ratio: 1200 / 711;
  }

  /* 白パネル: x100起点・幅483・高さ323。天のみ角丸10px */
  .vision-mv-panel {
    right: auto;
    bottom: 126px; /* 緑帯の高さぶん上 */
    left: 8.3333%; /* 1200px時 x=100 */
    width: 483px;
    height: 323px;
    padding: 43px 0 0 31px; /* 文字ボックス天y472.8 / 左x131 */
    background: var(--color-white);
  }

  .vision-mv-copy {
    font-size: 28px;
    line-height: 60px;
    letter-spacing: 0.5em; /* 28px x 0.5em = 字送り14px（XD実測） */
  }

  .vision-mv-band {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 126px;
  }

  .vision-title {
    padding-top: 45px; /* 帯天y753 -> ベースラインy825。❽が30pxで行boxが伸びるぶんを差し引く */
  }

  .vision-mv-credit {
    top: auto;
    right: 10.75%; /* 1200px時 右端x1071 */
    bottom: 18px;
  }

  /* ❶❷=全幅(665) / ❸〜❽=437pxの2カラム（段間126px・段の間隔83px） */
  .vision-promises {
    display: grid;
    grid-template-columns: 437fr 437fr;
    column-gap: 126px;
    row-gap: 83px;
    width: min(var(--content-width), 100% - var(--content-pad) * 2);
    margin: 42px auto 0; /* MV地y879 -> ❶写真天y921 */
  }

  .promise,
  .promise + .promise {
    padding: 0;
  }

  .promise--wide {
    grid-column: 1 / -1;
    width: 665px;
    margin-inline: auto;
  }

  /* 全幅→2カラムへ切り替わる箇所だけ間隔が広い（実測187px）。
     グリッド段の両方に付けないと段内で高さがずれる */
  .promise:nth-child(3),
  .promise:nth-child(4) {
    margin-top: 104px; /* row-gap 83 + 104 = 187 */
  }

  .promise-title {
    margin-inline: 0;
    font-size: 20px; /* PCはカラム幅に余裕があるのでXD実測の固定値 */
    line-height: 34px;
    text-align: left;
  }

  /* 2カラム段（❸〜❽）の最長行は❻の小見出し448pxで、カラム幅437pxを11pxはみ出す。
     XD上も段間126pxのアキへはみ出して1行で組まれているので、右だけ広げて同じにする。
     左揃えなので左端の位置は変わらない。中央寄せの❶❷（全幅665px）は対象外 */
  .promise:not(.promise--wide) .promise-title {
    margin-right: -12px;
  }

  .promise--wide .promise-title {
    text-align: center;
  }

  .promise-body {
    margin-top: 26px;
  }

  /* ---------- バトン ---------- */
  .vision-baton {
    display: grid;
    grid-template-columns: 242px 694px;
    column-gap: 64px; /* 写真右端x342 -> 右カラムx406 */
    justify-content: center;
    margin-top: 107px;
    padding: 47px 0 37px; /* 帯天y4813 -> 写真天y4860 / 帯地y5304 */
  }

  .vision-baton-media {
    grid-row: 1 / 3;
  }

  .vision-baton-photo {
    width: 242px;
    margin-inline: 0;
  }

  .vision-baton-body {
    grid-column: 2;
  }

  .vision-baton-credit {
    margin-top: 0; /* 写真地y5250 の直下 */
  }

  .vision-baton-title {
    margin-top: 18px; /* 本文地 -> 次の見出しボックス天 */
  }

  .vision-baton-body > .vision-baton-title:first-child {
    margin-top: -5px; /* 見出し1ボックス天y4855 = 写真天y4860 の5px上 */
  }

  .vision-baton-text {
    margin-top: 10px;
  }

  .vision-baton .button {
    margin: 23px 0 0;
  }

  .page-vision .sns-section {
    margin-top: 100px;
  }

  /* 2カラム段（❸〜❽）は左右が同じ段＝同じY座標なので、そのままだと同時に出てしまう。
     右カラム（4・6・8番目）だけ少し遅らせて左→右の順に見せる。
     ❶❷は全幅（.promise--wide）なので対象外。SPは1カラムなので遅延なし */
  .has-reveal .promise:nth-child(2n):not(.promise--wide).is-revealed {
    transition-delay: 0.12s;
  }
}