/* ============================================================
   cms-additions.css — JTB My Liv CMS化工程の追補CSS
   本体CSS（shared/css/*）は変更しない方針のため、追補を本ファイルに分離。
   CMS入稿時は shared/css/cms-additions.css として ZIP に含め、
   テンプレート7枚の <head> 末尾で読み込む（読み込み済み）。
   根拠: 32_cms-design-jtb-myliv.md §2-0-4 / §2-3 / §3
============================================================ */

/* 1) Basicparts18-1 全体リンク（a::after 方式。A-1 の代替実装 / 旧MAJOR-8）
      テキスト変数に設定されたリンクをカード全体へ拡張する */
.b-award__box { position: relative; }
.b-award__box a::after { content: ""; position: absolute; inset: 0; }

/* 2) TOP事務局ロゴ（logoRow 方式 / 旧MAJOR-2）
      2026-09-02 改訂: 高さ基準（max-height）だけにすると3ロゴの高さが均一化され、
      JTBロゴが設計 156×95 に対し 105×64 と約33%小さくなることを実測で確認した
      （設計の3ロゴは高さがバラバラ 95/66/62px なので単一 max-height では再現不能）。
      ユーザー承認のうえ sections.css:917-919/940-942 と同じ nth-child 幅指定に戻し、
      4つ目以降が追加された場合だけ max-height にフォールバックさせる。
      ・ロゴの「追加」「削除」は安全（4つ目以降は max-height 48/64px で収まる）
      ・ロゴの「並べ替え」をすると幅がずれる（運用上ほぼ発生しない想定） */
.p-operation__logos.is-cms li img { width: auto; max-height: 48px; }
.p-operation__logos.is-cms li:nth-child(1) img { width: 117px; max-height: none; }
.p-operation__logos.is-cms li:nth-child(2) img { width: 240px; max-height: none; }
.p-operation__logos.is-cms li:nth-child(3) img { width: 191px; max-height: none; }
@media (min-width: 768px) {
  .p-operation__logos.is-cms li img { width: auto; max-height: 64px; }
  .p-operation__logos.is-cms li:nth-child(1) img { width: 156px; max-height: none; }
  .p-operation__logos.is-cms li:nth-child(2) img { width: 319px; max-height: none; }
  .p-operation__logos.is-cms li:nth-child(3) img { width: 255px; max-height: none; }
}

/* 3) 【廃止】Basicparts16-1 ホットスポットのリンクテキスト不可視化
      2026-08-30 ユーザー指示により、上部の「プログラム参加者／エリアコーディネーター／
      ピースバディ・観光人」はボタンではなく飾りと確定。パーツから
      <ul class="b-area__links"> ごと撤去したため、この上書きは不要になった。
      （撤去前は未入力時に「リンク1名称」等が本文として公開ページに出ていた） */

/* 4) TOPお知らせ PC6件/SP3件 の件数制御（設計書B項目）
      現行の is-pcOnly ×3 はDB出力で表現できないため nth-child 置換。
      DB出力は6件、SPでは4件目以降を非表示 */
@media (max-width: 767px) {
  .p-news__list.is-cmsNews > .c-newsCard:nth-child(n + 4) { display: none; }
}

/* 5) ページ編集画面での MV/ヘッダー固定表示を解除
      → 2026-08-17、本体CSSへ移設済み（ユーザー指示）。
      global.css の `#vcbody-wrapper .l-page` と
      sections.css の `#vcbody-wrapper .p-mv` / `#vcbody-wrapper .l-header` を参照。
      本ファイルには残さない（重複定義を避けるため）。 */

/* --------------------------------------------------------------------------
   BP-tail 末尾余白調整（2026-08-20 新設）
   CMSで入力した数値（10〜200）が class="b-spacer is-h{数値}" として出力される。
   1px刻みの全191クラスを機械生成（生成元: このコメント下のルール群）。
   範囲外・未入力は高さ0にフォールバック。
   -------------------------------------------------------------------------- */
.b-spacer { height: 0; }
.b-spacer.is-h10 { height: 10px; }
.b-spacer.is-h11 { height: 11px; }
.b-spacer.is-h12 { height: 12px; }
.b-spacer.is-h13 { height: 13px; }
.b-spacer.is-h14 { height: 14px; }
.b-spacer.is-h15 { height: 15px; }
.b-spacer.is-h16 { height: 16px; }
.b-spacer.is-h17 { height: 17px; }
.b-spacer.is-h18 { height: 18px; }
.b-spacer.is-h19 { height: 19px; }
.b-spacer.is-h20 { height: 20px; }
.b-spacer.is-h21 { height: 21px; }
.b-spacer.is-h22 { height: 22px; }
.b-spacer.is-h23 { height: 23px; }
.b-spacer.is-h24 { height: 24px; }
.b-spacer.is-h25 { height: 25px; }
.b-spacer.is-h26 { height: 26px; }
.b-spacer.is-h27 { height: 27px; }
.b-spacer.is-h28 { height: 28px; }
.b-spacer.is-h29 { height: 29px; }
.b-spacer.is-h30 { height: 30px; }
.b-spacer.is-h31 { height: 31px; }
.b-spacer.is-h32 { height: 32px; }
.b-spacer.is-h33 { height: 33px; }
.b-spacer.is-h34 { height: 34px; }
.b-spacer.is-h35 { height: 35px; }
.b-spacer.is-h36 { height: 36px; }
.b-spacer.is-h37 { height: 37px; }
.b-spacer.is-h38 { height: 38px; }
.b-spacer.is-h39 { height: 39px; }
.b-spacer.is-h40 { height: 40px; }
.b-spacer.is-h41 { height: 41px; }
.b-spacer.is-h42 { height: 42px; }
.b-spacer.is-h43 { height: 43px; }
.b-spacer.is-h44 { height: 44px; }
.b-spacer.is-h45 { height: 45px; }
.b-spacer.is-h46 { height: 46px; }
.b-spacer.is-h47 { height: 47px; }
.b-spacer.is-h48 { height: 48px; }
.b-spacer.is-h49 { height: 49px; }
.b-spacer.is-h50 { height: 50px; }
.b-spacer.is-h51 { height: 51px; }
.b-spacer.is-h52 { height: 52px; }
.b-spacer.is-h53 { height: 53px; }
.b-spacer.is-h54 { height: 54px; }
.b-spacer.is-h55 { height: 55px; }
.b-spacer.is-h56 { height: 56px; }
.b-spacer.is-h57 { height: 57px; }
.b-spacer.is-h58 { height: 58px; }
.b-spacer.is-h59 { height: 59px; }
.b-spacer.is-h60 { height: 60px; }
.b-spacer.is-h61 { height: 61px; }
.b-spacer.is-h62 { height: 62px; }
.b-spacer.is-h63 { height: 63px; }
.b-spacer.is-h64 { height: 64px; }
.b-spacer.is-h65 { height: 65px; }
.b-spacer.is-h66 { height: 66px; }
.b-spacer.is-h67 { height: 67px; }
.b-spacer.is-h68 { height: 68px; }
.b-spacer.is-h69 { height: 69px; }
.b-spacer.is-h70 { height: 70px; }
.b-spacer.is-h71 { height: 71px; }
.b-spacer.is-h72 { height: 72px; }
.b-spacer.is-h73 { height: 73px; }
.b-spacer.is-h74 { height: 74px; }
.b-spacer.is-h75 { height: 75px; }
.b-spacer.is-h76 { height: 76px; }
.b-spacer.is-h77 { height: 77px; }
.b-spacer.is-h78 { height: 78px; }
.b-spacer.is-h79 { height: 79px; }
.b-spacer.is-h80 { height: 80px; }
.b-spacer.is-h81 { height: 81px; }
.b-spacer.is-h82 { height: 82px; }
.b-spacer.is-h83 { height: 83px; }
.b-spacer.is-h84 { height: 84px; }
.b-spacer.is-h85 { height: 85px; }
.b-spacer.is-h86 { height: 86px; }
.b-spacer.is-h87 { height: 87px; }
.b-spacer.is-h88 { height: 88px; }
.b-spacer.is-h89 { height: 89px; }
.b-spacer.is-h90 { height: 90px; }
.b-spacer.is-h91 { height: 91px; }
.b-spacer.is-h92 { height: 92px; }
.b-spacer.is-h93 { height: 93px; }
.b-spacer.is-h94 { height: 94px; }
.b-spacer.is-h95 { height: 95px; }
.b-spacer.is-h96 { height: 96px; }
.b-spacer.is-h97 { height: 97px; }
.b-spacer.is-h98 { height: 98px; }
.b-spacer.is-h99 { height: 99px; }
.b-spacer.is-h100 { height: 100px; }
.b-spacer.is-h101 { height: 101px; }
.b-spacer.is-h102 { height: 102px; }
.b-spacer.is-h103 { height: 103px; }
.b-spacer.is-h104 { height: 104px; }
.b-spacer.is-h105 { height: 105px; }
.b-spacer.is-h106 { height: 106px; }
.b-spacer.is-h107 { height: 107px; }
.b-spacer.is-h108 { height: 108px; }
.b-spacer.is-h109 { height: 109px; }
.b-spacer.is-h110 { height: 110px; }
.b-spacer.is-h111 { height: 111px; }
.b-spacer.is-h112 { height: 112px; }
.b-spacer.is-h113 { height: 113px; }
.b-spacer.is-h114 { height: 114px; }
.b-spacer.is-h115 { height: 115px; }
.b-spacer.is-h116 { height: 116px; }
.b-spacer.is-h117 { height: 117px; }
.b-spacer.is-h118 { height: 118px; }
.b-spacer.is-h119 { height: 119px; }
.b-spacer.is-h120 { height: 120px; }
.b-spacer.is-h121 { height: 121px; }
.b-spacer.is-h122 { height: 122px; }
.b-spacer.is-h123 { height: 123px; }
.b-spacer.is-h124 { height: 124px; }
.b-spacer.is-h125 { height: 125px; }
.b-spacer.is-h126 { height: 126px; }
.b-spacer.is-h127 { height: 127px; }
.b-spacer.is-h128 { height: 128px; }
.b-spacer.is-h129 { height: 129px; }
.b-spacer.is-h130 { height: 130px; }
.b-spacer.is-h131 { height: 131px; }
.b-spacer.is-h132 { height: 132px; }
.b-spacer.is-h133 { height: 133px; }
.b-spacer.is-h134 { height: 134px; }
.b-spacer.is-h135 { height: 135px; }
.b-spacer.is-h136 { height: 136px; }
.b-spacer.is-h137 { height: 137px; }
.b-spacer.is-h138 { height: 138px; }
.b-spacer.is-h139 { height: 139px; }
.b-spacer.is-h140 { height: 140px; }
.b-spacer.is-h141 { height: 141px; }
.b-spacer.is-h142 { height: 142px; }
.b-spacer.is-h143 { height: 143px; }
.b-spacer.is-h144 { height: 144px; }
.b-spacer.is-h145 { height: 145px; }
.b-spacer.is-h146 { height: 146px; }
.b-spacer.is-h147 { height: 147px; }
.b-spacer.is-h148 { height: 148px; }
.b-spacer.is-h149 { height: 149px; }
.b-spacer.is-h150 { height: 150px; }
.b-spacer.is-h151 { height: 151px; }
.b-spacer.is-h152 { height: 152px; }
.b-spacer.is-h153 { height: 153px; }
.b-spacer.is-h154 { height: 154px; }
.b-spacer.is-h155 { height: 155px; }
.b-spacer.is-h156 { height: 156px; }
.b-spacer.is-h157 { height: 157px; }
.b-spacer.is-h158 { height: 158px; }
.b-spacer.is-h159 { height: 159px; }
.b-spacer.is-h160 { height: 160px; }
.b-spacer.is-h161 { height: 161px; }
.b-spacer.is-h162 { height: 162px; }
.b-spacer.is-h163 { height: 163px; }
.b-spacer.is-h164 { height: 164px; }
.b-spacer.is-h165 { height: 165px; }
.b-spacer.is-h166 { height: 166px; }
.b-spacer.is-h167 { height: 167px; }
.b-spacer.is-h168 { height: 168px; }
.b-spacer.is-h169 { height: 169px; }
.b-spacer.is-h170 { height: 170px; }
.b-spacer.is-h171 { height: 171px; }
.b-spacer.is-h172 { height: 172px; }
.b-spacer.is-h173 { height: 173px; }
.b-spacer.is-h174 { height: 174px; }
.b-spacer.is-h175 { height: 175px; }
.b-spacer.is-h176 { height: 176px; }
.b-spacer.is-h177 { height: 177px; }
.b-spacer.is-h178 { height: 178px; }
.b-spacer.is-h179 { height: 179px; }
.b-spacer.is-h180 { height: 180px; }
.b-spacer.is-h181 { height: 181px; }
.b-spacer.is-h182 { height: 182px; }
.b-spacer.is-h183 { height: 183px; }
.b-spacer.is-h184 { height: 184px; }
.b-spacer.is-h185 { height: 185px; }
.b-spacer.is-h186 { height: 186px; }
.b-spacer.is-h187 { height: 187px; }
.b-spacer.is-h188 { height: 188px; }
.b-spacer.is-h189 { height: 189px; }
.b-spacer.is-h190 { height: 190px; }
.b-spacer.is-h191 { height: 191px; }
.b-spacer.is-h192 { height: 192px; }
.b-spacer.is-h193 { height: 193px; }
.b-spacer.is-h194 { height: 194px; }
.b-spacer.is-h195 { height: 195px; }
.b-spacer.is-h196 { height: 196px; }
.b-spacer.is-h197 { height: 197px; }
.b-spacer.is-h198 { height: 198px; }
.b-spacer.is-h199 { height: 199px; }
.b-spacer.is-h200 { height: 200px; }

/* --------------------------------------------------------------------------
   BP-dlList 資料ダウンロード一覧（左画像＋右2列ボタン）2026-08-27 新設
   クライアント追加依頼: ①左寄せ小見出し ②左に画像 ③右にテキスト＋DLボタン
   （Z型に増減）。スマホは ②③ が縦積み、③ は**スマホでも2列のまま**。
   ⚠️ 編集画面はブロックごとに div が挟まる（A-6）ため `ul > li` の直下セレクタは
      使わず、`.b-dlList__item` 等のクラス指定で組む。
   -------------------------------------------------------------------------- */
.b-dlList__h {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-brown);
}

.b-dlList__body {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}

.b-dlList__fig { margin: 0; }
.b-dlList__fig img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* 右側: スマホでも2列（クライアント指示）。Z型（左→右→次の行）で増える */
.b-dlList__l {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
  align-content: start;
}

.b-dlList__label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-brown);
}

/* ボタンは既存 .button-wrap を流用しつつ、2列の枠に収まるサイズへ縮める
   （色・アイコンの指定方法は他のボタンと共通） */
.b-dlList__l .button-wrap { max-width: none; }
.b-dlList__l .button-wrap a {
  min-height: 44px;
  padding: 8px 38px 8px 14px;
  font-size: 12px;
  line-height: 1.4;
}
.b-dlList__l .button-wrap::after { right: 10px; width: 20px; height: 20px; }

@media (min-width: 768px) {
  .b-dlList__h { font-size: 18px; }
  /* PC: 左に画像・右にボタン列 */
  .b-dlList__body {
    grid-template-columns: 310px 1fr;
    gap: 40px;
    align-items: start;
    margin-top: 24px;
  }
  .b-dlList__l { gap: 20px; }
  .b-dlList__label { font-size: 14px; }
  .b-dlList__l .button-wrap a {
    min-height: 50px;
    padding: 10px 46px 10px 18px;
    font-size: 14px;
  }
  .b-dlList__l .button-wrap::after { right: 14px; width: 24px; height: 24px; }
}

/* 6) 画像が未登録のブロックを編集画面でクリックできるようにする
      画像を登録するまで CMS は <img> ごと出力を消す（A-17）。
      その結果 <li> が中身なし＝幅0・高さ0になり、ページ編集画面で
      クリックできず、画像を登録することもできなくなる（詰み状態）。
      編集画面（#vcbody-wrapper）でのみ、当たり判定になる最小サイズを与える。
      公開HTMLに #vcbody-wrapper は存在しないため、本番の表示には影響しない。

      6-a) 画像のみを持つ繰り返し <li>（Basicparts12-1 / 16-1 / TOP-05）
           編集画面ではブロック1個ごとに <div> が1枚挟まる（A-6）ので、
           ラッパー側にも同じ最小サイズを与える。 */
#vcbody-wrapper .p-operation__logos > *:not(.vcms_editTemp),
#vcbody-wrapper .p-operation__logos li,
#vcbody-wrapper .b-logoRow__box > *:not(.vcms_editTemp),
#vcbody-wrapper .b-logoRow__box li,
#vcbody-wrapper .b-area__l > *:not(.vcms_editTemp),
#vcbody-wrapper .b-area__l li {
  min-width: 120px;
  min-height: 50px;
  box-sizing: border-box;
  list-style: none;
  outline: 2px dashed rgba(214, 118, 42, .55);
  outline-offset: -4px;
  cursor: pointer;
}

/* 6-a2) 上記3コンテナは grid（justify-items:center・auto 列）のため、
        中に入る挿入バー（.vcms_editTemp）は高さ5pxのまま幅だけ潰れる。
        高さ・色は CMS 標準（5px / #ff6633）に触らず、幅の確保だけ行う。 */
#vcbody-wrapper .p-operation__logos > .vcms_editTemp,
#vcbody-wrapper .b-logoRow__box > .vcms_editTemp,
#vcbody-wrapper .b-area__l > .vcms_editTemp {
  grid-column: 1 / -1;
  justify-self: stretch;
  min-width: 120px;
}

/* 6-b) 上記以外でも、子要素を1つも持たない <li> は同じ理由で潰れうる。
        高さは変えず（テキストの <li> を巻き込まないため）幅だけ確保する。 */
#vcbody-wrapper li:not(:has(*)) {
  min-width: 50px;
}

/* 6-c) 【撤回 2026-08-30】.vcms_editTemp への min-height 付与は誤りだった。
        この要素は「ブロック0件エリア専用」ではなく、全ブロックの間に挟まる
        挿入バー（CMS標準で height:5px のオレンジの線）そのもの。
        min-height:40px を掛けた結果、編集画面の全挿入バーが 40px に太った。
        0件エリアの当たり判定は 6-a の `> *` セレクタが .vcms_editTemp にも
        効くため、個別指定は不要。CMS標準の 5px に手を加えないこと。 */


/* ==========================================================================
   7) 静的HTMLの <section> が持っていた余白クラスの補完（2026-09-01）
      パーツ化の際に b-gap-* が落ちたページ固有パーツを、ブロックパーツを
      CMS に再登録せずにこのファイルだけで元の余白に戻す。

      ・値は静的HTML（クラスが付いている状態）のブラウザ実測値
      ・`:not([class*="b-gap-"])` … CMS でブロックに b-gap-* を足せばそちらが優先
      ・`.b-spacer + …`          … 直前に BP-spacer が入っている場合は補完しない
        （運用側が spacer で手当て済みのため、二重に効かせない安全弁）
        → 該当の BP-spacer を削除すると、この補完が働いて Figma 通りになる
   ========================================================================== */

/* --- SP（〜767px）------------------------------------------------------- */
@media (max-width: 767px) {
  /* Basicparts10-1 声カード = b-gap-btn */
  .b-cols:has(.b-voice):not([class*="b-gap-"]) { padding-top: 40px; }
  /* Basicparts14-1 MY LIV WAY = b-gap-sm */
  .b-way:not([class*="b-gap-"]) { padding-top: 20px; }
  /* Basicparts15-1 社会課題割合 = b-gap-fig */
  .b-ratio:not([class*="b-gap-"]) { padding-top: 30px; }
  /* Basicparts18-1 アワード = b-gap-md */
  .b-award:not([class*="b-gap-"]) { padding-top: 80px; }
  /* Basicparts19-1 パネル = b-gap-sv */
  .b-cols:has(.b-panel):not([class*="b-gap-"]) { padding-top: 140px; }
  /* Basicparts20-1 白枠 = b-gap-md */
  .b-whiteBox.is-pd:not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts25-1 白枠 = b-gap-md */
  .b-whiteBox.is-kq:not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts28-1 白枠 = b-gap-md */
  .b-whiteBox.is-mlp:not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts22-1/23-1 = b-gap-btn */
  .b-cols:has(.b-progCard.is-pillCard):not([class*="b-gap-"]) { padding-top: 40px; }
  /* Basicparts24-1 プログラムの対象 = b-gap-lg */
  .b-target:not([class*="b-gap-"]) { padding-top: 140px; }
  /* Basicparts27-1 フロー = b-gap-btn */
  .b-cols:has(.b-step):not([class*="b-gap-"]) { padding-top: 40px; }
  /* Basicparts29-1 サークル背景 = b-gap-btn */
  .b-circleText:not([class*="b-gap-"]) { padding-top: 30px; }
  /* Basicparts30-1 マップ = b-gap-btn */
  .b-themeGrid:not([class*="b-gap-"]) { padding-top: 40px; }
  /* Basicparts31-1 グリーンボックス = b-gap-md */
  .b-greenBox:not([class*="b-gap-"]) { padding-top: 40px; }
  /* Basicparts33-1 運営団体カード = b-gap-orgCards */
  .b-orgCards:not([class*="b-gap-"]) { padding-top: 140px; }
  /* Basicparts16-1 エリアコーディネーター = b-gap-btn */
  .b-area:not([class*="b-gap-"]) { padding-top: 30px; }
  /* Basicparts17-1 コレクティブインパクト = b-gap-btn */
  .b-impact:not([class*="b-gap-"]) { padding-top: 30px; }

  /* BP-spacer で既に間隔を作っている箇所は補完しない（二重防止） */
  .b-spacer + .b-cols:has(.b-voice):not([class*="b-gap-"]),
  .b-spacer + .b-way:not([class*="b-gap-"]),
  .b-spacer + .b-ratio:not([class*="b-gap-"]),
  .b-spacer + .b-award:not([class*="b-gap-"]),
  .b-spacer + .b-cols:has(.b-panel):not([class*="b-gap-"]),
  .b-spacer + .b-whiteBox.is-pd:not([class*="b-gap-"]),
  .b-spacer + .b-whiteBox.is-kq:not([class*="b-gap-"]),
  .b-spacer + .b-whiteBox.is-mlp:not([class*="b-gap-"]),
  .b-spacer + .b-cols:has(.b-progCard.is-pillCard):not([class*="b-gap-"]),
  .b-spacer + .b-target:not([class*="b-gap-"]),
  .b-spacer + .b-cols:has(.b-step):not([class*="b-gap-"]),
  .b-spacer + .b-circleText:not([class*="b-gap-"]),
  .b-spacer + .b-themeGrid:not([class*="b-gap-"]),
  .b-spacer + .b-greenBox:not([class*="b-gap-"]),
  .b-spacer + .b-orgCards:not([class*="b-gap-"]),
  .b-spacer + .b-area:not([class*="b-gap-"]),
  .b-spacer + .b-impact:not([class*="b-gap-"])
  { padding-top: var(--b-gap); }

  /* Basicparts14-1 は is-about（余白ではなくレイアウトの根幹）も落ちている。
     .b-way は about.html のこのブロックにしか使われないため is-about 無しでも効かせる */
  /* 2026-10-15 修正: max-content だと行（li）ごとに独立したgridとして評価され、
     列1がアイコン実寸（134.6/151.1/162.8px）でバラバラになり、ピル・本文の左端が
     169/185/197pxとズレていた（クライアント指摘：3項目のテキストを左揃えで合わせる）。
     列1を2行目（Mission）のアイコン幅151pxに固定し、全行の左端を185pxに揃える
     （Valueのアイコンは列を約12pxはみ出すが、列間14pxの内側に収まり本文と干渉しない）。 */
  .b-way .b-way__row { grid-template-columns: 151px 1fr; }
  /* 2026-10-15 修正: SP幅でも画面が広いと（〜767px）ブロックが左に寄っていた
     （クライアント指摘）。リストの幅を中身なり（アイコン列151＋間14＋本文最大202＝367px）
     にして中央寄せする。375px幅など中身より狭い画面では従来どおり全幅になる。 */
  .b-way .b-cols__l { width: fit-content; margin-inline: auto; }
  /* アイコンは blocks.css 側で zoom による実寸基準に統一（2026-09-01）。ここでは幅を触らない */
}

/* --- PC（768px〜）------------------------------------------------------- */
@media (min-width: 768px) {
  /* Basicparts10-1 声カード = b-gap-btn */
  .b-cols:has(.b-voice):not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts14-1 MY LIV WAY = b-gap-sm */
  .b-way:not([class*="b-gap-"]) { padding-top: 30px; }
  /* Basicparts15-1 社会課題割合 = b-gap-fig */
  .b-ratio:not([class*="b-gap-"]) { padding-top: 25.3px; }
  /* Basicparts18-1 アワード = b-gap-md */
  .b-award:not([class*="b-gap-"]) { padding-top: 102px; }
  /* Basicparts19-1 パネル = b-gap-sv */
  .b-cols:has(.b-panel):not([class*="b-gap-"]) { padding-top: 120px; }
  /* Basicparts20-1 白枠 = b-gap-md */
  .b-whiteBox.is-pd:not([class*="b-gap-"]) { padding-top: 80px; }
  /* Basicparts25-1 白枠 = b-gap-md */
  .b-whiteBox.is-kq:not([class*="b-gap-"]) { padding-top: 80px; }
  /* Basicparts28-1 白枠 = b-gap-md */
  .b-whiteBox.is-mlp:not([class*="b-gap-"]) { padding-top: 80px; }
  /* Basicparts22-1/23-1 = b-gap-btn */
  .b-cols:has(.b-progCard.is-pillCard):not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts24-1 プログラムの対象 = b-gap-lg */
  .b-target:not([class*="b-gap-"]) { padding-top: 160px; }
  /* Basicparts27-1 フロー = b-gap-btn */
  .b-cols:has(.b-step):not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts29-1 サークル背景 = b-gap-btn */
  .b-circleText:not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts30-1 マップ = b-gap-btn */
  .b-themeGrid:not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts31-1 グリーンボックス = b-gap-md */
  .b-greenBox:not([class*="b-gap-"]) { padding-top: 80px; }
  /* Basicparts33-1 運営団体カード = b-gap-orgCards */
  .b-orgCards:not([class*="b-gap-"]) { padding-top: 160px; }
  /* Basicparts16-1 エリアコーディネーター = b-gap-btn */
  .b-area:not([class*="b-gap-"]) { padding-top: 60px; }
  /* Basicparts17-1 コレクティブインパクト = b-gap-btn */
  .b-impact:not([class*="b-gap-"]) { padding-top: 60px; }

  /* BP-spacer で既に間隔を作っている箇所は補完しない（二重防止） */
  .b-spacer + .b-cols:has(.b-voice):not([class*="b-gap-"]),
  .b-spacer + .b-way:not([class*="b-gap-"]),
  .b-spacer + .b-ratio:not([class*="b-gap-"]),
  .b-spacer + .b-award:not([class*="b-gap-"]),
  .b-spacer + .b-cols:has(.b-panel):not([class*="b-gap-"]),
  .b-spacer + .b-whiteBox.is-pd:not([class*="b-gap-"]),
  .b-spacer + .b-whiteBox.is-kq:not([class*="b-gap-"]),
  .b-spacer + .b-whiteBox.is-mlp:not([class*="b-gap-"]),
  .b-spacer + .b-cols:has(.b-progCard.is-pillCard):not([class*="b-gap-"]),
  .b-spacer + .b-target:not([class*="b-gap-"]),
  .b-spacer + .b-cols:has(.b-step):not([class*="b-gap-"]),
  .b-spacer + .b-circleText:not([class*="b-gap-"]),
  .b-spacer + .b-themeGrid:not([class*="b-gap-"]),
  .b-spacer + .b-greenBox:not([class*="b-gap-"]),
  .b-spacer + .b-orgCards:not([class*="b-gap-"]),
  .b-spacer + .b-area:not([class*="b-gap-"]),
  .b-spacer + .b-impact:not([class*="b-gap-"])
  { padding-top: var(--b-gap); }

  /* Basicparts14-1 の is-about 相当（同上） */
  .b-way .b-cols__l { width: 833px; margin-left: 80px; }
  .b-way .b-way__row { grid-template-columns: 218px 1fr; column-gap: 0; row-gap: 9px; align-items: start; }
  /* 同上。width を書くと HTML の width 属性も blocks.css の zoom も打ち消してしまう */
  .b-way .b-way__t { font-size: 32px; line-height: normal; max-width: var(--way-t-w, none); }
  /* ピルの縦位置は blocks.css 側で行別に指定（2026-09-01）。ここでは触らない */
}

/* ==========================================================================
   8) パーツ化で落ちた余白クラスの補完 第2弾 ─ BP-spacer では直せない10箇所
      （2026-09-02）

   §7 は「BP-spacer を入れれば直る箇所」も含めて広く補完したが、こちらは
   公開版と静的HTML（Figma準拠の正本）を全ページ実測比較して残った10箇所。
   運用側の BP-spacer 調整（32件）完了後に再測定して確定させたもの。

   ■ 二重適用の防止について
     8) のセレクタはすべて隣接兄弟結合子（+）で「直前のブロック」を指定して
     いる。運用側が BP-spacer を挿入すると隣接関係が切れてセレクタ自体が
     マッチしなくなるため、§7 のような `.b-spacer + X` の安全弁は不要。
     ブロックに b-gap-* を付ければ `:not([class*="b-gap-"])` で無効化される。

   ■ ページ判別の手がかり（クラス名にページ識別子が無いため）
     .b-way  … 02私たちについて にのみ存在
     .b-tag  … 03社会課題 にのみ存在
     .l-mainBg.is-kankojin … 06観光人クエスト
   ========================================================================== */

/* ---- SP（〜767px） ------------------------------------------------------ */
@media (max-width: 767px) {

  /* ページ見出し直下のリード文 = b-gap-lead（186px）
     対象: 04マイリブ・コミュニティ / 11個人情報保護方針 / 14資料ダウンロード
     ※14はFigmaに該当ページが無いため、他ページのリード文と揃える方針 */
  .b-pageTitle + .b-text:not([class*="b-gap-"]) { padding-top: 186px; }

  /* 03社会課題 だけは b-gap-lead-sm（140px）。b-tag の有無で切り分ける */
  .b-pageTitle + .b-text:has(~ .b-tag):not([class*="b-gap-"]) { padding-top: 140px; }

  /* 13運営団体 ページ見出し直下のMLPロゴ = b-gap-lead-lg（209px） */
  .b-pageTitle + .b-img:not([class*="b-gap-"]) { padding-top: 209px; }

  /* 02私たちについて 末尾ボタン2つ目「運営団体」= b-gap-md（15px）
     ※現状40pxで広すぎる側。BP-spacer では詰められないためCSSで対応 */
  .b-btns + .b-btns:not([class*="b-gap-"]) { padding-top: 15px; }

  /* 03社会課題 2つ目の左中見出し = b-gap-term（60px）
     12サイトのご利用について も同じ並びだが b-gap-term 付きのため除外される */
  .b-text + .b-h2L:not([class*="b-gap-"]) { padding-top: 60px; }

  /* 03社会課題 アプローチ図 = b-gap-fig（30px）※現状40pxで広すぎる側 */
  .b-h2L + .b-img:not([class*="b-gap-"]) { padding-top: 30px; }

  /* 06観光人クエスト 展開地域マップ = b-gap-btn（30px）※現状40pxで広すぎる側 */
  .l-mainBg.is-kankojin .b-text + .b-img:not([class*="b-gap-"]) { padding-top: 30px; }

  /* SPで既に正しい箇所（変更しない）
     ・02私たちについて 本文→図版 …… 40px = b-gap-md SP値と一致
     ・05ピースダイアログ もっと見る … 40px = b-gap-md SP値と一致 */
}

/* ---- PC（768px〜） ------------------------------------------------------ */
@media (min-width: 768px) {

  /* ページ見出し直下のリード文 = b-gap-lead / b-gap-lead-sm（PCはどちらも80px）
     対象: 03社会課題 / 04マイリブ・コミュニティ / 11個人情報保護方針 / 14資料DL */
  .b-pageTitle + .b-text:not([class*="b-gap-"]) { padding-top: 80px; }

  /* 13運営団体 MLPロゴ = b-gap-lead-lg（160px）※サイト最大のズレ −130px */
  .b-pageTitle + .b-img:not([class*="b-gap-"]) { padding-top: 160px; }

  /* 02私たちについて 本文→図版 = b-gap-md（80px）
     .b-way を起点にして 03社会課題 の .b-text + .b-img（正30px）と切り分ける */
  .b-way ~ .b-text + .b-img:not([class*="b-gap-"]) { padding-top: 80px; }

  /* 02私たちについて 末尾ボタン2つ目「運営団体」= b-gap-md（80px） */
  .b-btns + .b-btns:not([class*="b-gap-"]) { padding-top: 80px; }

  /* 03社会課題 2つ目の左中見出し = b-gap-term（80px） */
  .b-text + .b-h2L:not([class*="b-gap-"]) { padding-top: 80px; }

  /* 03社会課題 アプローチ図 = b-gap-fig（25.3px）
     ※現状30pxで広すぎる側。BP-spacer では物理的に詰められない箇所 */
  .b-h2L + .b-img:not([class*="b-gap-"]) { padding-top: 25.3px; }

  /* 06観光人クエスト 展開地域マップ = b-gap-btn（60px） */
  .l-mainBg.is-kankojin .b-text + .b-img:not([class*="b-gap-"]) { padding-top: 60px; }

  /* 05ピースダイアログ お知らせ「もっと見る」= b-gap-md（80px）
     06/07 の同じ並びは直前に BP-spacer があるため隣接せず、対象外になる */
  .b-news + .b-btnPill:not([class*="b-gap-"]) { padding-top: 80px; }
}

/* ==========================================================================
   9) BP-spacer を残す箇所の SP 補正（2026-09-02）

   §7 が担当する12箇所は BP-spacer を削除すれば PC/SP とも正値になるため、
   ここでは扱わない（運用側で削除する）。
   §9 が扱うのは §7 に対応セレクタが無い汎用ブロック（見出し・ボタン・タグ・
   画像）で、これらは「汎用パーツに余白クラスは付けない」方針のため
   パーツ側では直せず、BP-spacer を残したまま SP だけ補正する必要がある。

   ■ PC は補正不要
     BP-spacer は PC で 30(--b-gap) + N となり、運用側の調整で既に正値。
     ズレているのは SP（40 + N）だけなので、本節は SP 専用。

   ■ 必ず :not([class*="b-gap-"]) を付けること
     `.b-spacer.is-hN + X` の詳細度は (0,4,0) で、運用者が正しく選んだ
     `.b-gap-*`(0,1,0) に勝ってしまう。ガードが無いと設計値を破壊する。
     §7・§8 と同じ家内標準。

   ■ 自動的に無効化される
     セレクタが隣接兄弟（+）なので、BP-spacer を削除するとマッチしなくなり
     §7 側の補完に切り替わる。二重適用は起きない。
   ========================================================================== */

@media (max-width: 767px) {

  /* is-h130（PC 30+130=160 ✓ / SP 40+130=170、正140）→ 130 + 10 = 140
     対象: 02私たちについて / 03社会課題 / 04コミュニティ / 05ピースダイアログ
           06観光人クエスト / 07MY LIV PROGRAM の見出し・ボタン・タグ・画像 計24箇所 */
  .b-spacer.is-h130 + .b-h1:not([class*="b-gap-"]),
  .b-spacer.is-h130 + .b-h1sub:not([class*="b-gap-"]),
  .b-spacer.is-h130 + .b-btns:not([class*="b-gap-"]),
  .b-spacer.is-h130 + .b-tag:not([class*="b-gap-"]),
  .b-spacer.is-h130 + .b-img:not([class*="b-gap-"]) { padding-top: 10px; }

  /* is-h50 + 左中見出し（正60）→ 50 + 10 = 60　対象: 03社会課題 1箇所 */
  .b-spacer.is-h50 + .b-h2L:not([class*="b-gap-"]) { padding-top: 10px; }

  /* 06観光人クエスト パネル群 = 正168px
     （リードが3行で28px短い分をデザイン側で意図的に補償している値。
       他2ページの同じ並びは正140px なので、ページ限定で上書きする）
     BP-spacer を残した場合と削除した場合の両方に対応させる。 */
  .l-mainBg.is-kankojin .b-spacer.is-h90 + .b-cols:not([class*="b-gap-"]) { padding-top: 78px; }
  .l-mainBg.is-kankojin .b-cols:has(.b-panel):not([class*="b-gap-"]):not(.b-spacer + *) { padding-top: 168px; }

  /* 11個人情報保護方針 ボタン（正SP60）→ padding 0 で 62px
     PC は 30+62=92 で正値のため触らない。SP は 62px となり正60に対し +2px 残るが
     知覚できない差なので、負のマージンを使わずここで打ち止めにする。
     ※ 当初「spacer を削除すれば直る」と判断したが、削除すると PC が 30px（正92）に
        なって悪化することを実測で確認したため、削除対象から外して §9 で扱う */
  .b-spacer.is-h62 + .b-btns:not([class*="b-gap-"]) { padding-top: 0; }

  /* 補正しない高さ（記録）
     ・is-h100 + .b-h1 …… SP 40+100=140 で既に正値。触ると壊れる */
}

/* ==========================================================================
   10) パーツ化で落ちた「見た目クラス（is-*）」の補完（2026-09-02）

   §7〜§9 は余白クラス（b-gap-*）の欠落を扱ったが、公開HTMLと静的HTML（正本）を
   全ページ突合したところ、見た目のモディファイア（is-*）も19箇所で落ちていた。
   うち描画に実差が出ているものをここで補完する。

   ■ 当初「余白のズレ」として洗い出した6件のうち5件は、実はこの is-* 欠落が
     真因だった（例: 03社会課題の図版が +5.6px ずれるのは、見出しの is-issue が
     持つ cap 補正 margin-bottom:-5.63px が効いていないため）。
     padding で辻褄を合わせるのではなく、欠けているクラスの効果そのものを戻す。

   ■ ページ判別（クラス名にページ識別子が無いため）
     .b-tag   … 03社会課題 にのみ存在
     .b-area  … 04コミュニティ にのみ存在
     .b-way   … 02私たちについて にのみ存在
     .b-pageTitle + .b-img … 13運営団体 のみ
     .l-mainBg.is-peace / .is-kankojin / .is-program … 05 / 06 / 07

   ■ is-iwe は CSS に定義が無く描画差ゼロのため対象外。
   ========================================================================== */

/* ---- 03社会課題 .b-h2L の is-issue（見出し 20px/24px＋cap 基準補正） -------
   blocks.css:310,321,376 と同値。公開版は 18px/22px で描画されていた。 */
.b-tag ~ .b-h2L .b-h2L__t { font-size: 20px; line-height: normal; }
@media (max-width: 767px) {
  .b-tag ~ .b-h2L .b-h2L__t { margin-top: -8.56px; margin-bottom: -5.63px; }
}
@media (min-width: 768px) {
  .b-tag ~ .b-h2L .b-h2L__t { font-size: 24px; line-height: normal; margin-top: -10.27px; }
}

/* ---- 03社会課題 .b-h1 の is-multi（2行見出しの SP 行間） ---- */
@media (max-width: 767px) {
  .b-tag + .b-h1 .b-h1__t { line-height: 26.5px; }
}

/* ---- 03社会課題 .b-img の is-boxed（白地・角丸） ---- */
.b-tag ~ .b-img .b-img__f {
  border-radius: 16px;
  background: var(--c-white);
  overflow: hidden;
}
@media (min-width: 768px) { .b-tag ~ .b-img .b-img__f { border-radius: 20px; } }

/* ---- 04コミュニティ .b-pageTitle の is-nowrap（見出しを折り返さない） ---- */
main:has(.b-area) .b-pageTitle .b-inner { padding-inline: 0; }
main:has(.b-area) .b-pageTitle .b-pageTitle__t { white-space: nowrap; }

/* ---- 13運営団体 .b-img の is-orgLogo（MLPロゴの最大幅） ---- */
.b-pageTitle + .b-img .b-img__f { max-width: 270px; margin-inline: auto; }
@media (min-width: 768px) { .b-pageTitle + .b-img .b-img__f { max-width: 491px; } }

/* ---- 02私たちについて 1枚目の図版 is-hiraku（SP の最大幅） ----
   2026-10-14 修正: max-widthのみでmargin-inline:autoが無く、320pxに収まった
   画像が中央寄せされず左に寄っていた（クライアント指摘：中央揃えになっていない）。
   他の同種ルール（13運営団体 is-orgLogo 等）に合わせてmargin-inline:autoを追加。 */
@media (max-width: 767px) {
  .b-way ~ .b-text + .b-img .b-img__f { max-width: 320px !important; margin-inline: auto; }
}

/* ---- 02私たちについて 2枚目の図版（is-iwe と対になる b-gap-fig の欠落） ----
   .b-way ~ .b-text + .b-img + .b-img で「連続する図版の2枚目」だけを指す。
   3枚目（about-wellbeing）は現状で正値のため対象外。 */
@media (max-width: 767px) {
  .b-way ~ .b-text + .b-img + .b-img:not([class*="b-gap-"]) { padding-top: 30px; }
}
@media (min-width: 768px) {
  /* 25.3px は is-boxed と組んだ場合の値（03社会課題）。ここは素の b-gap-fig なので 30px */
  .b-way ~ .b-text + .b-img + .b-img:not([class*="b-gap-"]) { padding-top: 30px; }
}

/* ---- 05/06/07 サービスページ帯図の is-band + is-pd/is-kq/is-mlp ----
   blocks.css:698-700 の「パネル下端 → ▼ 上端 = 28px」。SP は Figma 実測で
   ページごとに 35 / 34 / 35。 */
@media (min-width: 768px) {
  .l-mainBg.is-peace    .b-cols + .b-img:not([class*="b-gap-"]),
  .l-mainBg.is-kankojin .b-cols + .b-img:not([class*="b-gap-"]),
  .l-mainBg.is-program  .b-cols + .b-img:not([class*="b-gap-"]) { padding-top: 28px; }
}
@media (max-width: 767px) {
  .l-mainBg.is-peace    .b-cols + .b-img:not([class*="b-gap-"]) { padding-top: 35px; }
  .l-mainBg.is-kankojin .b-cols + .b-img:not([class*="b-gap-"]) { padding-top: 34px; }
  .l-mainBg.is-program  .b-cols + .b-img:not([class*="b-gap-"]) { padding-top: 35px; }
}

/* ==========================================================================
   11) 運用反映後の残差（2026-09-02・最終確認で検出）

   BP-spacer の削除・SP画像の設定・spacer の入れ替えが反映された状態で
   全13ページ×SP/PC を再突合し、残った2箇所を補完する。
   どちらも隣接兄弟セレクタで、全13ページ中この1箇所ずつにしかマッチしない
   （公開HTMLを実測して確認済み）。
   ========================================================================== */

/* ---- 05ピースダイアログ「体験のラインナップ」= b-gap-lg ----
   他の大見出しには BP-spacer(130) が入っているが、ここだけ入っていない。
   .b-cols + .b-h1 は全13ページでこの1箇所のみ。
   後から BP-spacer を入れた場合は隣接が切れて自動的に無効になる。 */
.b-cols + .b-h1:not([class*="b-gap-"]) { padding-top: 140px; }
@media (min-width: 768px) {
  .b-cols + .b-h1:not([class*="b-gap-"]) { padding-top: 160px; }
}

/* ---- 02私たちについて 出典表記 = b-annot 相当 ----
   注記（b-annot）のブロックパーツが存在しないため、運用者はテキストパーツで
   登録するしかない。見た目だけ注記スタイルに揃える。
   blocks.css:497,499（12px/24 ・ PC 14px/28 ・ opacity .85）と
   .b-annot.is-about.b-gap-xs（SP26 / PC24）に合わせる。
   .b-img + .b-text は全13ページでこの1箇所のみ。 */
.b-img + .b-text:not([class*="b-gap-"]) { padding-top: 26px; }
.b-img + .b-text .b-text__t { font-size: 12px; line-height: 24px; opacity: .85; }
@media (min-width: 768px) {
  .b-img + .b-text:not([class*="b-gap-"]) { padding-top: 24px; }
  .b-img + .b-text .b-text__t { font-size: 14px; line-height: 28px; }
}

/* ==========================================================================
   12〜14 は 2026-09-02 に本体CSSへ移設した（このファイルからは削除）

   §12 for Student / for Business ピル … blocks.css .b-tag__t
        Inter SemiBold / SP 20px・PC 30px / padding 6px 32.965px・6px 50px
   §13 体験者の声ラベル               … blocks.css .b-voice__label
        SP 16px / PC 20px・行高32・padding 9px 24px
   §14 フォントウェイト一段軽く       … global.css body 400
        ＋ components/sections/blocks の font-weight:600 → 500（86ルール）
        除外: .b-tag__t / .b-h1sub__t（Figma が Inter Semi Bold で確定しており、
              Inter は wght@600 のみ読み込んでいるため 600 を維持）

   移設理由: これらは「CMS出力を静的HTMLに合わせるための補正」ではなく
   デザイン値そのものの修正。静的HTML（正本）は cms-additions.css を
   読み込まない構成のため、本体CSSに置かないと正本と公開サイトが乖離し、
   以後の突合検証が成り立たなくなる。
   ========================================================================== */

/* ==========================================================================
   15) vibit CMS 標準パーツ（default1〜15）のスタイル（2026-09-03）

   CMS 同梱の基本パーツは HTML が固定（module-* / block-section / defaultN）で
   変数も既定のため、当案件の設計パーツ default-01〜15（blocks.css の
   .b-h1 / .b-h2 / .b-h3 / .b-text / .b-imgText / .b-img / .b-cols / .b-list /
   .b-olist / .b-table / .b-btns）と**同じ見た目**になるよう、土台違いを CSS で吸収する。
   値はすべて blocks.css / components.css の該当ルールから転記（独自値は使わない）。

   ■ 土台の違いと吸収方法
     ・設計パーツ: <section class="b"> ＋ <div class="b-inner b-inner-s/m"> の2層
       標準パーツ: ルート要素が #Area-MainColum 直下に 1 層で置かれる
       → ルート自身に .b（padding-top）＋ .b-inner（max-width / padding-inline）を
         合成して当てる。幅は設計パーツと同じ（小=780 / 中=980、SP 左右 20）
     ・default4「テキスト」はクラス無しの素の <p>。#Area-MainColum > p:not([class])
       で拾う（公開13ページを走査し、他に該当する素の p が無いことを確認済み）
     ・default3 の .module-3rd-lebel-head は default7/8 の中にも（default3 無しで）
       現れるため、単独は .default3、内包は .block-section 配下で分けて当てる
     ・default14 は <table> ではなく dl/dt/dd → grid で 30% / 70% の表組みに
     ・default15 のボタンは色/アイコン/位置の変数が無い → 緑・中央寄せを既定にし、
       href が http(s) で始まる外部リンクだけ外部アイコン、それ以外は矢印
     ・default7/8（画像＋見出し＋テキスト）は設計パーツ未作成のため、default5/6 に
       blocks.css の .b-imgText__h（見出し 17/20px・下 8px）を組み合わせて構成

   ■ §7〜§11 の「隣接ブロック依存の補正」（.b-img + .b-text の注記化、.b-h2L + .b-img 等）は
     ページ固有の補正であり、標準パーツには複製しない（=「同じ見た目」の例外）
   ■ 対象クラスは既存 CSS のどこにも無い（衝突なし。grep 済み）
   ■ 編集画面対策: ルートが `#Area-MainColum` の直下でなく、A-6 の `<div class="vcms_pageBlock_*">`
     に包まれても効くよう、クラスを持つルートは子孫結合子で指定する。
     素の `p`（default4）だけは誤爆防止のため `>`（直下）のまま＝編集画面では幅指定が
     当たらないが、運用マニュアルどおり編集画面の見た目は対象外。
   ========================================================================== */

/* ---- 共通: ブロック外枠（.b）＋ 内枠（.b-inner）の合成 ---- */
#Area-MainColum .module-1st-lebel-head,
#Area-MainColum .module-2nd-lebel-head,
#Area-MainColum .module-3rd-lebel-head.default3,
#Area-MainColum > p:not([class]),
#Area-MainColum .block-section,
#Area-MainColum .module-c,
#Area-MainColum ul.default12,
#Area-MainColum ol.default13 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
  padding-top: var(--b-gap);
  padding-inline: var(--pad-sp);
}
/* 中幅（980）: 大見出し / 中見出し / 画像幅中 / 2列3列 / ボタン */
#Area-MainColum .module-1st-lebel-head,
#Area-MainColum .module-2nd-lebel-head,
#Area-MainColum .module-c,
#Area-MainColum .block-section.default10,
#Area-MainColum .block-section.default11,
#Area-MainColum .block-section.default15 {
  max-width: calc(var(--w-m) + var(--pad-sp) * 2);
}
/* 小幅（780）: 小見出し / テキスト / 画像+テキスト / リスト / 表 */
#Area-MainColum .module-3rd-lebel-head.default3,
#Area-MainColum > p:not([class]),
#Area-MainColum .block-section.default5,
#Area-MainColum .block-section.default6,
#Area-MainColum .block-section.default7,
#Area-MainColum .block-section.default8,
#Area-MainColum .block-section.default14,
#Area-MainColum ul.default12,
#Area-MainColum ol.default13 {
  max-width: calc(var(--w-s) + var(--pad-sp) * 2);
}

/* ---- default1 大見出し（= .b-h1__t） ---- */
/* 行送りは設計パーツ .b-h1__t（0.75 ＝ 18px）そのままだと 2 行目が重なる（設計側は
   .is-multi で 26.5px に逃がしているが、標準パーツはクラスを持てない）。
   → 行送りを Figma の多行値 26.5px（SP .is-multi 実測 335×53）にし、
     増分 (26.5−18)/2 = 4.25 を上下の負マージンで打ち消す。1 行時の箱高・cap 位置は
     従来と同一、2 行以上は 26.5px ピッチで重ならない。
   ルートを flow-root にして負マージンを箱内に閉じ込める（次ブロックの位置を不変にする） */
.module-1st-lebel-head { display: flow-root; }
.module-1st-lebel-head > h3 {
  margin: -4.25px 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 26.5px;
  text-align: center;
}

/* ---- default2 中見出し（= .b-h2__t） ---- */
.module-2nd-lebel-head > h4 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* ---- default3 小見出し（= .b-h3__t） ---- */
.module-3rd-lebel-head.default3 > h5 {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

/* ---- default4 テキスト（= .b-text__t） ---- */
#Area-MainColum > p:not([class]) {
  font-size: 14px;
  line-height: 2;
}

/* ---- default5〜8 画像＋テキスト（= .b-imgText） ----
   SP は画像が上・本文が下の 1 列。PC は 300px ＋ 1fr の 2 列（6/8 は画像が右）。
   7/8 は「画像 / 見出し / 本文」の 3 兄弟なので、画像を 2 行ぶん縦に貫通させ、
   見出しと本文を右列の 1 行目・2 行目に置く。 */
/* SP は「画像 → 本文」の縦積み。画像→本文の 16px は画像側の margin-bottom で持ち、
   本文段落どうしは 0（設計パーツの .b-imgText__body 内の p と同じ） */
.block-section.default5, .block-section.default6,
.block-section.default7, .block-section.default8 {
  display: flow-root;
  font-size: 14px;
  line-height: 2;
}
.block-section .module-fl-img,
.block-section .module-fr-img { margin: 0 0 16px; }
.block-section .module-fl-img img,
.block-section .module-fr-img img {
  display: block;
  width: 100%;      /* width/height 属性（CMS 登録値 300×200 など）を打ち消す */
  height: auto;
}
.block-section.default5 > p:not(.module-fl-img),
.block-section.default6 > p:not(.module-fr-img),
.block-section.default7 > p:not(.module-fl-img),
.block-section.default8 > p:not(.module-fr-img) { margin: 0; }
/* 7/8 の内包見出し（= .b-imgText__h）。画像→見出し 16 は画像の margin-bottom、
   見出し→本文 8 は h4 の margin-bottom（= .b-imgText__h） */
.block-section .module-3rd-lebel-head { margin: 0; }
.block-section .module-3rd-lebel-head > h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---- default9 画像幅中（= .b-img__f） ----
   設計パーツ（default-09）の実描画は「<img> の width 属性（CMS が登録画像の px を
   書き込む・A-4）をそのまま使い、コンテナ幅 980 で頭打ち（max-width:100%）」。
   小さい画像は引き伸ばさず中央に置く。同じ挙動にするため width は指定しない
   （width:auto にすると属性を打ち消して natural 幅になり、設計パーツと挙動が変わる）。 */
.module-c.default9 { margin-block: 0 0; }
.module-c.default9 img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* ---- default10/11 画像＋テキスト 2列/3列（= .b-cols） ---- */
.block-section .module-flex-img {
  display: grid;
  gap: 20px;
}
.block-section .module-flex-img-item {
  float: none;              /* vcmsFL（CMS 既定の float）を無効化 */
  width: auto;
  margin: 0;
}
.block-section .module-flex-img-item > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 10px;          /* = .b-cols__img の下 10px */
}
.block-section .module-flex-img-item-txt {
  margin: 0;
  font-size: 13px;
  line-height: 1.9;
}

/* ---- default12 リスト（= .b-list__l） ---- */
ul.default12 { font-size: 14px; line-height: 2; list-style: none; }
ul.default12 > li { padding-left: 1.2em; text-indent: -1.2em; }
ul.default12 > li::before { content: "・"; }

/* ---- default13 順序付きリスト（= .b-olist__l） ---- */
ol.default13 { font-size: 14px; line-height: 2; list-style: none; counter-reset: n; }
ol.default13 > li { padding-left: 1.8em; text-indent: -1.8em; counter-increment: n; }
ol.default13 > li::before { content: counter(n) "."; margin-right: .4em; }

/* ---- default14 テーブル2列（= .b-table__tbl / th 30%） ----
   dl を 30% / 70% の grid にし、罫線は「.module-like-table の上外枠」＋「dl の左外枠」
   ＋「各セルの右と下」で table の border-collapse と同じ見た目にする。
   dl が複数並んでも、dt/dd の組が 1 つの dl に複数入っても、dt だけ／dd が連続しても
   同じ格子になる（並び順に依存しない）。 */
.block-section .module-like-table {
  border-top: 1px solid rgba(105, 44, 26, .25);
  font-size: 14px;
  line-height: 1.8;
}
/* 罫線は「dl の左外枠」＋「各セルの右と下」。dt/dd の並び順や組数に依存しない */
.block-section .module-like-table dl {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);   /* 本文列は長い URL 等で押し広げない */
  margin: 0;
  border-left: 1px solid rgba(105, 44, 26, .25);
}
.block-section .module-like-table dt,
.block-section .module-like-table dd {
  margin: 0;
  padding: 12px 16px;
  border-right: 1px solid rgba(105, 44, 26, .25);
  border-bottom: 1px solid rgba(105, 44, 26, .25);
  text-align: left;
  overflow-wrap: anywhere;
}
.block-section .module-like-table dt {
  font-weight: 500;
  background: rgba(255, 255, 255, .5);
}

/* ---- default15 ボタン大（= .b-btns + .button-wrap.btn-green） ----
   .b-btns__l > li（max 420・中央）と .button-wrap（max 305 / PC 420）を p.link-btn に合成。 */
.block-section.default15 .link-btn {
  position: relative;
  width: 100%;
  max-width: 305px;
  margin: 0 auto;
}
.block-section.default15 .link-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--c-floral-green);    /* = .btn-green */
  pointer-events: none;
}
.block-section.default15 .link-btn > a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;               /* = .btn-text-center（標準パーツは位置を選べないため中央固定。2026-09-03 ユーザー指示） */
  min-height: 60px;
  padding: 10px 48px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  color: var(--c-white);
}
.block-section.default15 .link-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 22.5px;
  height: 22.5px;
  transform: translateY(-50%);
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='22.5' height='22.5' rx='11.25' fill='white'/%3E%3Cpath d='M5.625 10.5C5.21079 10.5 4.875 10.8358 4.875 11.25C4.875 11.6642 5.21079 12 5.625 12V11.25V10.5ZM17.4053 11.7803C17.6982 11.4874 17.6982 11.0126 17.4053 10.7197L12.6324 5.9467C12.3395 5.65381 11.8646 5.65381 11.5717 5.9467C11.2788 6.23959 11.2788 6.71447 11.5717 7.00736L15.8143 11.25L11.5717 15.4926C11.2788 15.7855 11.2788 16.2604 11.5717 16.5533C11.8646 16.8462 12.3395 16.8462 12.6324 16.5533L17.4053 11.7803ZM5.625 11.25V12H16.875V11.25V10.5H5.625V11.25Z' fill='%233fa07c'/%3E%3C/svg%3E");   /* = .btn-green.btn-icon-arrow */
  pointer-events: none;
}
/* ホバー: 文字とアイコンは固定でフレーム（::before）だけ拡大（= .button-wrap、2026-08-19 クライアント指示） */
@media (hover: hover) {
  .block-section.default15 .link-btn::before { transition: transform .25s ease; }
  .block-section.default15 .link-btn:hover::before { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .block-section.default15 .link-btn::before { transition: none; transform: none; }
}

/* ボタンが連続する場合の間隔 = 1 ブロック内の複数ボタン（.b-btns__l の gap: SP 12 / PC 20）
   に寄せる（2026-09-03 ユーザー指示）。共通ルールが #ID 付きなので同じ詳細度で上書き */
#Area-MainColum .block-section.default15 + .block-section.default15 { padding-top: 12px; }
/* 外部リンク（http/https）は外部アイコン（= .btn-green.btn-icon-external） */
/* 自サイト（www.edunet.or.jp）の絶対 URL は内部リンク扱い＝矢印のまま */
.block-section.default15 .link-btn:has(> a[href^="http"]:not([href*="edunet.or.jp/"]))::after {
  background-image: url("data:image/svg+xml,%3Csvg width='22.5' height='22.5' viewBox='0 0 22.5 22.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.25' cy='11.25' r='11.25' fill='white'/%3E%3Cpath d='M12.8 6.6h3.1v3.1' stroke='%233fa07c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.9 6.6l-4.4 4.4' stroke='%233fa07c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14.4 12.4v2.9c0 .3-.2.5-.5.5H7.2c-.3 0-.5-.2-.5-.5V8.6c0-.3.2-.5.5-.5h2.9' stroke='%233fa07c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- SP（〜767px）だけの指定 ---- */
@media (max-width: 767px) {
  /* default9: 設計パーツは SP で画像をコンテナ幅いっぱいに（PC は width 属性のまま） */
  .module-c.default9 img { width: 100%; }
}

/* ---- PC（768px〜） ---- */
@media (min-width: 768px) {
  /* .b-h1__t PC = 42px × 0.74 = 31.08px。多行ピッチは Figma に PC の実測が無いため
     SP の比率（26.5 / 24 = 1.104）を適用して 46.4px。(46.4−31.08)/2 = 7.66 を打ち消す */
  .module-1st-lebel-head > h3 { margin: -7.66px 0; font-size: 42px; line-height: 46.4px; }
  .module-2nd-lebel-head > h4 { font-size: 28px; }                        /* .b-h2__t PC */
  .module-3rd-lebel-head.default3 > h5 { font-size: 20px; }               /* .b-h3__t PC */
  #Area-MainColum > p:not([class]) { font-size: 16px; }                   /* .b-text__t PC */

  /* 画像＋テキスト: 画像 300px ＋ 列間 30 ＋ 本文（= .b-imgText__row の 300px / 1fr / gap 30）。
     grid だと「画像が本文 1 段落目より背が高い × 段落が複数」のとき 2 段落目が
     画像下端まで押し下げられる（行トラックが画像高になる）ため、PC は float で組む。
     画像を float し、本文側の全要素に margin 330 を持たせるので、画像高・段落数に
     依存せず常に 300 + 30 の 2 列になる（設計パーツと同じ幾何）。 */
  .block-section.default5, .block-section.default6,
  .block-section.default7, .block-section.default8 {
    display: flow-root;      /* float を内包（ブロック高 = max(画像, 本文)） */
    font-size: 16px;
  }
  .block-section.default5 .module-fl-img,
  .block-section.default7 .module-fl-img { float: left; width: 300px; margin-bottom: 0; }
  .block-section.default6 .module-fr-img,
  .block-section.default8 .module-fr-img { float: right; width: 300px; margin-bottom: 0; }
  .block-section.default5 > p:not(.module-fl-img),
  .block-section.default7 > p:not(.module-fl-img),
  .block-section.default7 .module-3rd-lebel-head { margin-left: 330px; }
  .block-section.default6 > p:not(.module-fr-img),
  .block-section.default8 > p:not(.module-fr-img),
  .block-section.default8 .module-3rd-lebel-head { margin-right: 330px; }

  .block-section .module-3rd-lebel-head > h4 { font-size: 20px; }        /* .b-imgText__h PC */

  /* 2列 / 3列 */
  .block-section .module-flex-img.module-2column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block-section .module-flex-img.module-3column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block-section .module-flex-img-item-txt { font-size: 15px; }           /* .b-cols__t PC */

  /* リスト */
  ul.default12, ol.default13 { font-size: 16px; }

  /* 表（.b-table__tbl PC: 16px / 行間 1.8 / セル 16×24） */
  .block-section .module-like-table { font-size: 16px; }
  .block-section .module-like-table dt,
  .block-section .module-like-table dd { padding: 16px 24px; }

  #Area-MainColum .block-section.default15 + .block-section.default15 { padding-top: 20px; }
  /* ボタン: 420×80 / 22px / アイコン 30px */
  .block-section.default15 .link-btn { max-width: 420px; }
  .block-section.default15 .link-btn > a {
    min-height: 80px;
    padding-inline: 56px;                /* = .btn-text-center PC */
    font-size: 22px;
  }
  .block-section.default15 .link-btn::after { width: 30px; height: 30px; }
}

/* ==========================================================================
   16) サービス3ページ（05/06/07）関連お知らせ 0件時のメッセージ（2026-09-10）

   DBparts1-1（各ページのタグに合致するお知らせのみをCMSがサーバー側で抽出して
   出力するブロック）は、該当件数が0のとき <ul class="b-news__l"></ul> を
   空のまま出力する（news.html の JS 絞り込みとは別物。JS は関与しない）。
   CMS 出力にはタグ内に改行・インデント（空白のテキストノード）が入るため、
   CSS の :empty は不成立（:empty は空白のテキストノードも「中身あり」と
   判定する）。:has() で「li を1つも持たない」ことを判定する。

   本文言は news.html の .p-news__empty と統一（「該当するお知らせはありません」）。
   ========================================================================== */
.b-news__l:not(:has(li)) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.b-news__l:not(:has(li))::after {
  content: "該当するお知らせはありません";
  padding: 40px 20px;
  font-size: 14px;
  text-align: center;
}

/* ==========================================================================
   17) コミュニティページ「エリアコーディネーターの役割」見出しの2行折返し
       （2026-09-14 ユーザー指摘・SPで文字が重なる）

   .b-h1__t は SP で line-height:0.75（＝18px）を font-size 24px に対して
   使っている（cap ボックスをそのまま行送りにした値。blocks.css:227-240 に
   既知の潜在バグとして記録済み）。1行なら Figma と ±1px 一致するが、
   `line-height < font-size` のため2行に折れた瞬間に行が重なる。
   このページの見出しは Figma で2行想定（「教育×Well-being…」等の
   .is-multi と同じ 26.5px／PC 46.4px。今回追加確認）。

   ページ内に .b-h1 が2つあり（もう1つは「コレクティブインパクト」系）、
   かつ運用側が直前に BP-spacer を挿し込むため「直前」の目印は使えない。
   「直後が b-text → b-area と続く」のはこの見出しだけなので、後方の並びで
   一意に特定する（前方に spacer が増減しても影響を受けない）。

   1行時は現状の描画から ±0px（負マージンで cap 位置を保存）。
   flow-root は負マージンが次ブロックの間隔に漏れ出さないようにするため。 */
.b-h1:has(+ .b-text + .b-area) .b-inner { display: flow-root; }
.b-h1:has(+ .b-text + .b-area) .b-h1__t {
  line-height: 26.5px;
  margin-block: -4.25px;
}
@media (min-width: 768px) {
  .b-h1:has(+ .b-text + .b-area) .b-h1__t {
    line-height: 46.4px;
    margin-block: -7.66px;
  }
}