@charset "UTF-8";

/* ==========================================================================
   l-header
   ========================================================================== */
/* メニュー展開中もロゴと閉じるボタンを操作できるよう、
   ヘッダーは .l-globalMenu より上に重ねる。
   スクロールに追従させるため fixed。 */
.l-header {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  width: 100%;
}

.l-header__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 24px var(--pad-sp);
}

/* メニューを開いている間はヘッダーを固定して閉じられるようにする。
   Figma 00_menu ではヘッダーはロゴと閉じるボタンのみになる。 */
.l-page:has(#globalMenu:not([hidden])) .l-header { position: fixed; }

/* 2026-10-09 修正: PC用 .l-header__bar{display:flex!important}（1024px〜, 下記参照）に
   詳細度で負けてメニュー展開中も表示されたままになっていた（クライアント指摘で判明）。
   このルールにも !important を付けて優先させる */
.l-page:has(#globalMenu:not([hidden])) .l-header__bar { display: none !important; }

/* スクロール時はグローバルメニュー（PC横並びナビ+お問い合わせ）を隠し、
   ハンバーガーメニューのみ残す（2026-08-19 クライアント指示：グローバルメニューと
   ハンバーガーメニュー内の内容がほぼ同一のため）。is-scrolled は shared/js/menu.js が付与
   （ファーストビュー高さの8割程度スクロールした時点。カーテンの有無に関わらず
   同じスクロール量を基準にする＝2026-08-19 指示）。
   display だとアニメーションできないため opacity + visibility でフェードさせる
   （PC用 `.l-header__bar { display:flex !important }` はそのまま残す） */
.l-header__bar {
  transition: opacity .3s ease, visibility .3s ease;
}

.l-header.is-scrolled .l-header__bar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .l-header__bar { transition: none; }
}

/* vibit CMS のページ編集画面限定の上書き（global.css の #vcbody-wrapper 注記を参照）。
   ヘッダーが position:fixed のまま画面上に張り付くと、CMS がブロック挿入用に
   出すオレンジ色のバーの上に重なって隠してしまうため、編集画面では通常のフローに戻す。
   本番公開ページの挙動（fixed でスクロール追従）は一切変更しない。 */
#vcbody-wrapper .l-header {
  position: static;
}

/* メニュー展開中のみ fixed になる上の :has() ルールが編集画面でも
   成立してしまう場合に備え、明示的に無効化する */
#vcbody-wrapper .l-page:has(#globalMenu:not([hidden])) .l-header {
  position: static;
}

.l-header__logo { width: 74px; margin-right: auto; }
.l-header__logo img { width: 100%; }

/* PC 用の横並びナビ／お問い合わせは SP では非表示 */
.l-header__bar { display: none; }

/* Figma Header_SP（インスタンス 2001:9572 ＝ x21 y24 / 334×48.097）内の
   menu 203:11451 は x294 y5 の 40×40 ＝ ページ座標で x315..355 / y29..69。
   inner の padding（24 / 20）と align-items:center のまま 40×40 にすれば
   右端 355・左端 315・上端 29.1 で Figma と一致する。 */
.l-header__menuBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--c-brown);
}

/* ハンバーガー：中央のバー本体 + 上下バーを疑似要素で描画。
   開いているときは中央を消し、上下バーを回転させて × にする。

   Figma の書き出し SVG をそのまま数値化している。
   SP  I2001:5324;203:11451 … 40×40 / stroke-width 2 / x 11..29 / 中心間 6.316
   PC  I2001:5665;193:22771 … 60×60 / stroke-width 3 / x 16.5..43.5 / 中心間 9.4737
       （y = 20.5 / 29.9737 / 39.4474、stroke-linecap="round"）
   round cap は線分の両端に半径 stroke/2 の半円が付くので、
   見た目の長さは「線分長 + stroke」。CSS では
     width = 線分長 + stroke, height = stroke, border-radius = stroke/2
   と書くと同じ形になる（SP 18+2=20 / PC 27+3=30）。
   --bar-gap は × に変形するときの移動量にも使う。 */
.l-header__menuIcon {
  --bar-w: 20px;
  --bar-h: 2px;
  --bar-gap: 6.316px;
}

.l-header__menuIcon,
.l-header__menuIcon::before,
.l-header__menuIcon::after {
  display: block;
  width: var(--bar-w);
  height: var(--bar-h);
  border-radius: calc(var(--bar-h) / 2);
  background: var(--c-white);
  transition: transform .3s ease, opacity .2s ease;
}

.l-header__menuIcon { position: relative; }

.l-header__menuIcon::before,
.l-header__menuIcon::after {
  content: "";
  position: absolute;
  left: 0;
}

.l-header__menuIcon::before { top: calc(var(--bar-gap) * -1); }
.l-header__menuIcon::after  { top: var(--bar-gap); }

[aria-expanded="true"] .l-header__menuIcon { background: transparent; }
[aria-expanded="true"] .l-header__menuIcon::before { transform: translateY(var(--bar-gap)) rotate(45deg); }
[aria-expanded="true"] .l-header__menuIcon::after  { transform: translateY(calc(var(--bar-gap) * -1)) rotate(-45deg); }

@media (min-width: 1024px) {
  /* Figma 実測（Header_PC 193:22804 / 1440 幅・ヘッダーは x30..1409 の 1379）
       ロゴ      x30   120x81
       白い帯    x550  780x60・角丸 35（左 padding 37 / 右 padding 13）
       ナビ文字  x587..1147（14px SemiBold・字間 20・#692c1a）
       お問合せ  x1173 144x40・角丸 32・左右 padding 30
       ナビ右端→お問合せ左端 26 ＝ space-between の余り
       帯の右端 1330 → ハンバーガー左端 1349 の 19 が inner の gap */
  .l-header__inner { padding: 26px 30px; gap: 19px; }

  .l-header__logo { width: 120px; }

  .l-header__bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 780px;
    height: 60px;
    padding: 0 13px 0 37px;
    border-radius: 35px;
    background: var(--c-white);
  }

  .l-header__nav ul {
    display: flex;
    gap: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--c-brown);
  }

  .l-header__contact a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 144px;
    height: 40px;
    padding: 0 30px;
    border-radius: 32px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--c-white);
    background: var(--c-floral-red);
  }

  .l-header__menuBtn { width: 60px; height: 60px; }
  .l-header__menuBtn img { width: 26px; }

  /* PC は 60×60 に合わせて線も太く長くなる（Figma I2001:5665;193:22771） */
  .l-header__menuIcon {
    --bar-w: 30px;
    --bar-h: 3px;
    --bar-gap: 9.4737px;
  }
}

/* ==========================================================================
   l-globalMenu / ハンバーガー展開メニュー
   ========================================================================== */
/* Figma 00_Menu 準拠：白ベタ背景＋花びら装飾のフルスクリーンパネル */
.l-globalMenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;   /* 画面が低いときのみスクロール */
  overflow-x: hidden;
  /* 背景＋花びらは Figma 00_menu から一枚画像で書き出したもの */
  background: var(--c-white) url("../img/menu-bg-sp.jpg") no-repeat center top / cover;

  /* ふわっと表示／非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}

/* JS 無効時は hidden 属性が効いたまま＝閉じた状態。JS 有効時に開閉する */
.l-globalMenu[hidden] {
  display: block;   /* フェードさせるため display は保持する */
  opacity: 0;
  visibility: hidden;
}

.l-globalMenu:not([hidden]) {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .l-globalMenu { transition-duration: .01ms; }
}

/* 縦積みのフレックスにし、ユーティリティを常に画面下部へ寄せる */
.l-globalMenu__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100svh;
  padding: 199px 21px 30px;
  padding-top: min(199px, 22svh);   /* 低い画面では詰めて 1 画面に収める */
}

.l-globalMenu__head {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
}

.l-globalMenu__sub {
  margin-top: 11px;
  font-size: 14px;
  font-weight: 400;
  line-height: 2.1;
}

.l-globalMenu__sub li::before { content: "- "; }

.l-globalMenu__list {
  margin-top: 20px;
  display: grid;
  gap: 20px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.45;
}

.l-globalMenu__cta {
  display: grid;
  gap: 7px;
  margin-top: 45px;
}

.l-globalMenu__cta .button-wrap,
.l-globalMenu__cta .button-wrap { max-width: 240px; margin-inline: 0; }

.l-globalMenu__cta .button-wrap a,
.l-globalMenu__cta .button-wrap a {
  min-height: 46px;
  padding: 8px 46px 8px 19px;
  font-size: 14px;
}

.l-globalMenu__cta .button-wrap::after,
.l-globalMenu__cta .button-wrap::after { right: 15px; }

.l-globalMenu__utility {
  margin-top: auto;   /* 常に画面下部へ */
  padding-top: 24px;
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

/* PC は Figma 00_menu_PC の座標をそのまま比率配置
   （ナビ 右 57.6%／ボタン 左 30px・上 50%／ユーティリティ 左下） */
@media (min-width: 1024px) {
  .l-globalMenu { background-image: url("../img/menu-bg-pc.jpg"); }

  .l-globalMenu__inner {
    max-width: 1440px;
    min-height: 640px;                 /* これ以下の低い画面のみスクロール */
    min-height: max(640px, 100svh);    /* 通常は全画面高 */
    margin-inline: auto;
    padding: 0 30px;
  }

  .l-globalMenu__nav {
    position: absolute;
    top: 20.2%;
    left: 57.6%;
    width: 30%;
  }

  .l-globalMenu__head { font-size: 42px; line-height: 1.45; }

  .l-globalMenu__sub  { margin-top: 15px; font-size: 20px; line-height: 1.6; }

  .l-globalMenu__list {
    margin-top: 30px;
    gap: 30px;
    font-size: 42px;
    line-height: 1.45;
  }

  /* 2026-09-14 ユーザー指摘: 資料DL2本→1本化でボタン数が3→2に減り、
     ブロック高が 155px（70+15+70）に縮んで top:50% の下端がナビ最終項目
     （MY LIV PROGRAM）の下端より上に浮いた。ナビは top:20.2%＋固定コンテンツ高
     （実測 502.6px）なので、CTA下端をナビ下端に一致させる top は
     20.2% + (502.6 − 155) = 20.2% + 347.6px。実測 3 点（H750/900/1100）で
     ±1px 一致を確認済み。ボタン高（70px×2+gap15）が変わったら 347.6 を
     `nav下端固定分(502.6) − 新CTA高` に再計算すること。 */
  .l-globalMenu__cta {
    position: absolute;
    top: calc(20.2% + 347.6px);
    left: 30px;
    gap: 15px;
    margin-top: 0;
    width: 300px;
  }

  .l-globalMenu__cta .button-wrap,
  .l-globalMenu__cta .button-wrap { max-width: 300px; }

  .l-globalMenu__cta .button-wrap a,
  .l-globalMenu__cta .button-wrap a {
    min-height: 70px;
    padding: 10px 70px 10px 20px;
    font-size: 18px;
  }

  .l-globalMenu__cta .button-wrap::after,
  .l-globalMenu__cta .button-wrap::after { right: 21px; width: 30px; height: 30px; }

  /* Figma 00_menu_PC: 画面下部 38px の位置に固定 */
  .l-globalMenu__utility {
    position: absolute;
    left: 30px;
    bottom: 38px;
    display: flex;
    gap: 20px;
    margin-top: 0;
    padding-top: 0;
    font-size: 14px;
  }
}

/* ==========================================================================
   p-mv / メインビジュアル
   ========================================================================== */
/* MV は常にウィンドウいっぱいに固定表示。
   スクロールすると後続の .l-mainBg（背景タイル付き）が
   幕のように上へかぶさっていく（カーテン演出）。
   加えて MV 自体もスクロール量の一部だけ上へ動き、視差を出す
   （--mv-y は parallax.js が更新。JS 無効なら 0 のまま＝完全固定）。 */
.p-mv {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100svh;
  /* 上ツラ合わせ。Figma の fill は h132.08% / top-13.83% のズームクロップだが、
     .p-mv が 100vh 可変のため % 指定を写像できない。上端基準なら
     ビューポート高が変わっても絵柄の出方が動かないので、これを正とする。 */
  background: url("../img/mv-bg.jpg") no-repeat center top / cover;
  translate: 0 var(--mv-y, 0px);
  will-change: transform;
}

/* vibit CMS のページ編集画面限定の上書き（global.css の #vcbody-wrapper 注記を参照）。
   MV（TOP の .p-mv、05/06/07 の .p-mv--service も同じ .p-mv 基底クラス）が
   position:fixed で画面上に張り付いたままだと、CMS がブロック挿入用に出す
   オレンジ色のバーの上に重なって隠してしまう。編集画面限定で通常のフローに戻し、
   parallax.js が書き込む視差の translate も見た目上無効化する。
   本番公開ページの挙動（fixed カーテン演出・視差）は一切変更しない。
   .l-globalMenu には同種の上書きをしないこと（[hidden] の display:block 上書きと
   衝突し、非表示のはずのフルスクリーン分の高さがフローに実体として挿入され、
   MV がその分だけ下に押し出される。既定で閉じているため対応不要）。 */
#vcbody-wrapper .p-mv {
  position: static;
  height: auto;
  min-height: 0;
  translate: none;
}

.p-mv__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(72%, 400px);
  margin: 0;
  padding-top: 6%;
}

.p-mv__mark { width: 100%; }
.p-mv__text { width: 79%; margin-top: 4%; }

@media (min-width: 768px) {
  .p-mv__logo { width: min(35%, 492px); padding-top: 2%; }
}

/* ==========================================================================
   TOP の見出し級数（c-heading / c-headingSub の TOP 限定上書き）
   ========================================================================== */
/* c-heading / c-headingSub は現状 top.html だけが使っているが、
   共通コンポーネント名なので TOP 固有の値はセクション側にスコープして持たせる
   （下層 12 ページを巻き込まないため）。
   Figma 実測:
     2001:5475 お知らせ            PC 54px SemiBold / 行ボックス 78
     2001:5358 マイリブの旅のかたち  PC 54px SemiBold / 行ボックス 78
     2001:5450 提供サービス         PC 32px **Bold(700)**
     2001:5136 提供サービス         SP 20px **Bold(700)**
   ※「提供サービス」だけウェイトが Bold。ほかの見出しは SemiBold のまま。
      過去の「一律 SemiBold 化」（HANDOVER §5）の巻き添えになっていた。 */
.p-service__white > .c-headingSub { font-weight: 700; }

/* Figma SP 2001:5203 / 5081 ＝ 24px SemiBold・行ボックス 35（auto 行送り）。
   1.4（33.6）だと 1 見出しあたり 1.4px 詰まり、SP の縦位置が積み上がってずれる。 */
.p-news > .c-heading,
.p-service > .c-heading { line-height: 35px; }

@media (min-width: 768px) {
  .p-news > .c-heading,
  .p-service > .c-heading { font-size: 54px; line-height: 78px; }

  .p-service__white > .c-headingSub { font-size: 32px; }
}

/* ==========================================================================
   p-about
   ========================================================================== */

/* 白い円は SP ではビューポート幅を超えてはみ出す（Figma 準拠 / .l-page で clip） */
/* Figma SP: MV 下端 640 → About フレーム上端 717（77）＋ 円上端 764（47）＝ 124。
   137 は「77＋60」という足し算違いで、SP 全体が 13px 下がる原因だった。
   margin だと .l-mainBg の背景タイルが途切れるため padding で確保する。 */
.p-about {
  position: relative;
  padding: 124px 0 0;
}

/* 円と花びらを同じ座標系にまとめるステージ。花びらの % 指定はこの箱基準。 */
/* Figma 準拠：円は 600px 固定で、狭い画面では左右にはみ出す。
   はみ出しても中央に来るよう left+translate で centering する。 */
.p-about__stage {
  position: relative;
  left: 50%;
  width: 600px;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
}

/* Figma のレイヤー順は 円(Ellipse 1) → 花びら → テキスト・ボタン・人物。
   z-index を持たせず（＝重ね合わせ文脈を作らず）、子要素を花びらより上に出す。 */
/* Figma の中身は円の天地中央ではなく、やや下寄せ（上下非対称）。
     PC 円 1025..1765（740）・中身 505 → 上 125 / 下 110（中央なら 117.5）
     SP 円  764..1364（600）・中身 361 → 上 133 / 下 106（中央なら 119.5）
   justify-content:center のまま padding-top だけ入れると
   「中身が padding-top の半分だけ下がる」ので、必要な差の 2 倍を入れる
   （PC 7.5×2 = 15 / SP 13.5×2 = 27）。02 の .b-mvvCircle と同じ組み方。 */
.p-about__circle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 27px 15% 0;
  border-radius: 50%;
  text-align: center;
  background: rgba(255, 255, 255, .92);
}

/* 円の中身は花びらより上のレイヤー */
.p-about__circle > * { position: relative; z-index: 3; }

/* Figma: 人物は 101×130px で、頭が円の上端から少しはみ出す配置 */
.p-about__circle > .p-about__walk {
  position: absolute;
  top: -37px;
  left: 50%;
  width: 101px;
  transform: translateX(-50%);
}

.p-about__title {
  font-size: 42px;
  font-weight: 500;
  line-height: 1.43;
  white-space: nowrap;
}

.p-about__lead {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 2.43;
  white-space: nowrap;
}

.p-about .c-btnPill { margin-top: 40px; }   /* Figma: 本文下端→ボタン 40px */

@media (min-width: 768px) {
  /* Figma PC: MV 下端 845 → About フレーム上端 936（91）＋ 円上端 1025（89）＝ 180 */
  .p-about { padding-top: 180px; }
  .p-about__stage { width: 740px; max-width: 100%; }
  .p-about__circle { padding: 15px 10% 0; }
  .p-about__circle > .p-about__walk { top: -32px; }
  /* Figma 2001:5613 ＝ 54px SemiBold・行ボックス 72（2 行で h144）
     Figma 2001:5612 ＝ 24px Medium・行ボックス 54（4 行で h216） */
  .p-about__title { font-size: 54px; line-height: 72px; }
  .p-about__lead { margin-top: 30px; font-size: 24px; line-height: 54px; }
  .p-about .c-btnPill { margin-top: 55px; } /* Figma PC: 本文下端→ボタン 55px */
}

/* ==========================================================================
   p-news
   ========================================================================== */
.p-news {
  width: 100%;
  max-width: calc(var(--w-content) + var(--pad-sp) * 2);
  margin-inline: auto;
  padding: 140px var(--pad-sp) 0;
}

/* Figma SP: 見出し下端 1538.71 → カード上端 1578.71 ＝ 40 */
.p-news__list {
  display: grid;
  gap: 20px;
  margin-top: 40px;
}

.p-news .c-btnPill { margin-top: 40px; }

@media (min-width: 768px) {
  .p-news { padding-top: 240px; }   /* Figma: 円下端 1765 → 見出し上端 2005 */

  /* Figma: カード 310 × 3 ＋ 列間 25 × 2 ＝ 980（x = 230 / 565 / 900）。
     35 だと 1 枚 303.33 になり右 2 列が右へずれる。行間も 25。 */
  .p-news__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 80px;   /* Figma: 見出し下端 2083 → カード上端 2163 */
  }

  /* PC は 6 件表示（is-pcOnly はここで grid item に戻す） */
  .p-news__list .is-pcOnly { display: flex; }

  .p-news .c-btnPill { margin-top: 80px; }   /* Figma: カード下端 3228 → ボタン上端 3308 */
}

/* ==========================================================================
   p-service
   ========================================================================== */
/* Figma では Petal レイヤーが Service 枠より下にあるため、
   お知らせ側からはみ出した花びらが見出しに被らないよう上に重ねる */
.p-service {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--w-content) + var(--pad-sp) * 2);
  margin-inline: auto;
  padding: 140px var(--pad-sp) 0;
}

/* Figma SP: 見出し下端 3169 → リード上端 3209 ＝ 40 */
.p-service__lead {
  margin-top: 40px;
  font-size: 14px;
  font-weight: 500;
  line-height: 2;
  text-align: justify;
}

/* Figma SP: 提供サービス見出しの行ボックス下端 4313.66 → カード上端 4349 */
.p-service__cards {
  display: grid;
  gap: 20px;
  margin-top: 35.34px;
}

/* Figma SP: 箇条書き下端 4211.47 → 提供サービス見出しの行ボックス上端 4285.66
   （Figma の y4294 は cap 上端。20px/行28 では cap 上端が箱上端の 8.34px 下） */
.p-service .c-headingSub { margin-top: 74.19px; }

@media (min-width: 768px) {
  .p-service { padding-top: 240px; } /* Figma: もっと見る下端 3368 → 見出し上端 3608 */

  /* Figma 2001:5449 ＝ 16px Medium・行ボックス 32・w780・両端揃え。
     SP 側で justify を指定しているのに PC だけ center で上書きしていた。 */
  .p-service__lead {
    max-width: 780px;
    margin-top: 50px;   /* Figma: 見出し下端 3686 → リード上端 3736 */
    margin-inline: auto;
    font-size: 16px;
    line-height: 32px;
  }

  /* Figma: 箇条書き下端 → 提供サービス見出し / 見出し → カード上端 5736。
     見出しは Figma 側が cap ボックス（5663..5686）なので、
     ブラウザの行ボックスに合わせて実測で追い込んだ値 */
  .p-service .c-headingSub { margin-top: 156px; }
  .p-service__cards { gap: 20px; margin-top: 41.5px; }
}

/* --------------------------------------------------------------------------
   p-framework / マイリブ・フレームワーク図
   -------------------------------------------------------------------------- */
/* Figma SP: リード下端 3349 → 人物上端 3409 ＝ 60 */
.p-framework {
  position: relative;
  margin-top: 60px;
  text-align: center;
}

/* 上から降りてくる放射状の白背景（Figma: マイリブ・フレームワーク内 Vector）。
   フルブリードで敷き、下端の白が p-service__white へ連続する。 */
/* 扇状の白背景。Figma の縦横比（732.5:724.5）を保ったまま
   セクションの高さいっぱいに敷く。幅は比率から自動算出され、
   Figma と同じ「上が大きく開いた扇」のバランスになる。 */
.p-framework::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  /* 1層目：扇の曲線。auto 100% で Figma の縦横比を保ったまま中央配置する。
     2層目：扇の裾（SVG の 82.46% 以降は全幅の矩形）を画面端まで白で延長。
     ウィンドウを広げても左右が切れず、白が際限なく続く。 */
  background:
    url("../img/fw-arc.svg") no-repeat center / auto 100%,
    linear-gradient(to bottom, transparent 82.46%, #fff 82.46%);
  pointer-events: none;
}

/* 提供サービスの白ゾーン（Figma: Rectangle 46）。放射状背景の裾を受け継ぐ。 */
.p-service__white { position: relative; }

/* 白ゾーンは見出し・カードより下のレイヤーに置く */
.p-service__white > * { position: relative; z-index: 1; }

.p-service__white::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -79px;   /* .c-headingSub の margin-top(74.19) と合わせて放射状背景の裾に接続 */
  bottom: 0;    /* 白ベタはセクション境界まで。以降は .p-contact のグラデーションが受け継ぐ */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: #fff;
  pointer-events: none;
}

@media (min-width: 768px) {
  .p-service__white::before { top: -160px; }   /* .c-headingSub の margin-top(155) + 5 */
}

/* Figma SP 2001:5086 ＝ 104.5×133（fw-person-top.svg の等倍） */
.p-framework__person {
  width: 104.5px;
  margin-inline: auto;
}

/* ベン図。円周に沿う説明文・ラベルまで含めて 1 枚に書き出した画像。
   幅は Figma 実寸（円 3 つ分：SP 274px / PC 548px）に合わせる。 */
/* SP は常に 350px 以上を確保。画面が狭い場合は左右に均等にはみ出す */
/* Figma SP 2001:5102 ＝ 349.114×289.034（上端 3532.91 ＝ 人物下端 3542 と 9.09 重なる） */
.p-framework__venn {
  display: block;
  position: relative;
  left: 50%;
  width: 349.11px;
  max-width: none;   /* リセットの max-width:100% を解除し幅を保証 */
  margin: -9.09px 0 0;
  transform: translateX(-50%);
}

/* Figma 2059:2498 KATACHI_01 ＝ 699.198×578.563（素材 fw-venn-full.png は 700×579 で比率一致）。
   563px は書き出し比率の誤読で、図だけが 80.5% に縮んでいた。 */
@media (min-width: 768px) {
  .p-framework__venn { width: 699.2px; }
}

/* Figma SP: ベン図下端 3821.94 → 矢印上端 3841 ＝ 19.06 */
.p-framework__arrow {
  width: 91px;
  margin-top: 19.06px;
}

/* Figma はブロブ 2 つを上端そろえではなく 5px（PC 10px）ずらして置いている。
   & はブロブの間ではなく「ワク」の右端に重なる位置なので、行の中央に絶対配置する。
     PC  ワク 372..703.15 / モヤ 750..1059.84 / & 中心 719.5（≒コンテンツ中央 720）
     SP  ワク 13.5..179.08 / モヤ 202.5..357.42 / & 中心 187.5（＝画面中央） */
.p-framework__blobs {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 23.43px;
  margin-top: -5px;   /* Figma SP: 矢印下端 3958 → モヤ上端 3953 */
}

.p-framework__blob {
  position: relative;
  container-type: inline-size;
}

/* Figma SP: ワク 165.575×149.955（上端 3958）/ モヤ 154.921×157.028（上端 3953） */
.p-framework__blob--waku { flex: 0 0 165.58px; margin-top: 5px; }
.p-framework__blob--moya { flex: 0 0 154.92px; }

.p-framework__blob img { width: 100%; }

/* 「ワク／ワク」「モヤ／モヤ」は Figma 同様、2 つに分けて角度をつけて配置。
   文字サイズは図形の幅に追従させる（cqw）。 */
.p-framework__blobTxt {
  position: absolute;
  font-weight: 500;
  line-height: 1;
  color: var(--c-white);
  white-space: nowrap;
}

.p-framework__blob--waku .p-framework__blobTxt { font-size: 11.5cqw; }
.p-framework__blob--moya .p-framework__blobTxt { font-size: 12.3cqw; }

.p-framework__blob--waku .is-1 { left: 41.7%; top: 40.6%; transform: translate(-50%, -50%) rotate(-11.85deg); }
.p-framework__blob--waku .is-2 { left: 56.6%; top: 55.2%; transform: translate(-50%, -50%) rotate(7.86deg); }

.p-framework__blob--moya .is-1 { left: 42.3%; top: 41.8%; transform: translate(-50%, -50%) rotate(-8.5deg); }
.p-framework__blob--moya .is-2 { left: 56.1%; top: 57.2%; transform: translate(-50%, -50%) rotate(13.96deg); }

/* Figma はテキストを cap ボックス（cap 上端〜ベースライン）の中心で置いているが、
   CSS の translate(-50%) は行ボックスの中心で揃う。その差は
     (ascent − descent)/2 − capHeight/2
   で、Noto Sans JP では約 0.125em。PC(64px)・SP(32px) とも同じ em 量なので
   em で引けばサイズに依存せず一致する（PC 残差 0.17px / SP 0.05px）。 */
.p-framework__amp {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  transform: translate(-50%, calc(-50% - 0.125em));
}

/* Figma SP 2001:5120 ＝ 139.286×32.5・角丸 65 / 2001:5121 ＝ SemiBold 16px（幅 112）。
   padding と行送りで組むと 168×40.8 になるので、行ボックスを 32.5 に固定して
   左右 padding は (139.286-112)/2 で取る。PC（214×50）は下の PC ブロックで上書き。 */
.p-framework__badge {
  display: inline-block;
  margin-top: 9.22px;   /* Figma SP: ブロブ下端 4110.03 → ピル上端 4119.25 */
  padding: 0 13.64px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 32.5px;
  color: var(--c-white);
  background: var(--c-brown);
}

/* Figma SP: ピル下端 4151.75 → 箇条書きの行ボックス上端 4167.47
   （Figma の y4174.5 は cap 上端。14px/行22 では cap 上端が箱上端の 7.03px 下） */
.p-framework__points {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  /* Figma SP 実測（PNG のマーカー位置）: 1列目 ul 30..163 / 2列目 213.5..346.5。
     ul 幅は「マーカー字下げ 21 ＋ 本文 112」＝ 133 なので列間は 50.5。 */
  gap: 10px 50.5px;
  margin-top: 15.72px;
  text-align: left;
}

/* Figma SP 2001:5123 ＝ 14px SemiBold・行ボックス 22（cap トリム後 2 行で h32） */
.p-framework__points ul {
  list-style: disc;
  padding-left: 21px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

/* PC のフレームワーク図は Figma 上で要素どうしが「意図的に重なって」いる。
   margin-top を正の値で積み上げると全部離れてしまうので、
   Figma の絶対 Y をそのまま margin-top（負値を含む）に落とす。
   フローレイアウトのままなので JS OFF でも成立し、SP には影響しない。

   .p-framework 上端（＝人物上端 3951.99）を 0 とした相対 Y:
     人物       0        209×266     (fw-person-top.svg 104.5×133 の 2 倍)
     ベン図     247.33   699.198×578.563   → 人物と −18.68 重なる
     矢印       864.01   181.995×234       → ベン図から +38.12
     モヤ       1088.01  309.841×314.057   → 矢印と −10 重なる
     ワク       1098.01  331.151×299.910
     &          1219.01  64px SemiBold（ワクの右端に被る）
     ピル       1388.01  214×50            → ブロブと −14.06 重なる
     箇条書き   1471.01  28px/行ボックス42 */
@media (min-width: 768px) {
  .p-framework { margin-top: 120px; }  /* Figma: リード下端 3832 → 人物上端 3951.99 */

  .p-framework__person { width: 209px; }

  .p-framework__venn   { margin-top: -18.68px; }
  .p-framework__arrow  { width: 182px; margin-top: 38.12px; }

  /* ワク 331.151 ＋ 間 46.849 ＋ モヤ 309.841 ＝ 687.84。
     & は Figma でワクの右端に重なるので、行の中央に絶対配置する
     （Figma の & 中心 719.5 ≒ コンテンツ中央 720）。 */
  .p-framework__blobs { gap: 46.85px; margin-top: -10px; }

  /* Figma PC: モヤ 5040（行の上端）/ ワク 5050 なので 10px ずらす */
  .p-framework__blob--waku { flex: 0 0 331.15px; margin-top: 10px; }
  .p-framework__blob--moya { flex: 0 0 309.84px; }

  .p-framework__amp { font-size: 64px; }

  /* Figma 2001:5396 ＝ ピル 214×50 / 2001:5397 ＝ SemiBold 25px */
  .p-framework__badge {
    margin-top: -14.06px;
    padding: 0;
    min-width: 214px;
    font-size: 25px;
    line-height: 50px;
    text-align: center;
  }

  /* Figma 2001:5399 / 5400 ＝ SemiBold 28px・行ボックス 42・マーカー字下げ 42 */
  .p-framework__points { gap: 10px 100px; margin-top: 20px; }
  .p-framework__points ul { padding-left: 42px; font-size: 28px; line-height: 42px; }
}

/* ==========================================================================
   p-contact
   ========================================================================== */
/* Figma SP: サービスカード3下端 5710 → DL/Contact 上端 5775 ＝ 65。
   100px だったのが SP のドリフトが +36 から +70 に跳ね上がる正体だった。 */
.p-contact {
  display: grid;
  gap: 15px;
  padding: 65px var(--pad-sp) 0;
}

/* 提供サービスの白から背景のブルーへ抜けるグラデーション（Figma 準拠）。
   上端は前セクションの白ベタに 160px 重ねて（白×白なので見えない）、
   途切れず滑らかにフェードさせる。 */
.p-contact::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -160px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, #fff 0%, #fff 26%, rgba(255, 255, 255, 0) 78%);
  pointer-events: none;
}

@media (min-width: 768px) {
  .p-contact { gap: 20px; padding-top: 160px; }   /* Figma: カード3下端 6586 → DL/Contact 上端 6746 */
}

/* ==========================================================================
   p-operation / 事務局
   ========================================================================== */
/* Figma SP: DL/Contact 下端 5985 → 見出しの行ボックス上端 6116.66（cap 上端 6125）
   ／白箱下端 6500 → フッター上端 6640 ＝ 140 */
.p-operation {
  width: 100%;
  max-width: calc(var(--w-content) + var(--pad-sp) * 2);
  margin-inline: auto;
  padding: 131.66px var(--pad-sp) 140px;
  text-align: center;
}

.p-operation__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

/* Figma SP 2001:5075 ＝ 335×330。中のロゴ列（2001:5076）は 6207..6453.69 なので
   上 37 / 下 46.31。上下 37 だと 321 にしかならない。 */
.p-operation__box {
  margin-top: 25.34px;   /* Figma SP: 見出しの行ボックス下端 6144.66 → 白箱上端 6170 */
  padding: 37px 20px 46px;
  border-radius: 20px;
  background: var(--c-white);
}

.p-operation__logos {
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 40px;
}

.p-operation__logos li:nth-child(1) img { width: 117px; }
.p-operation__logos li:nth-child(2) img { width: 240px; }
.p-operation__logos li:nth-child(3) img { width: 191px; }

@media (min-width: 768px) {
  /* Figma: DL/Contact 下端 7026 → 見出し 7186（160） / 見出し → 白箱 7259
     見出し 2001:5356 ＝ 32px **Bold(700)**（cap ボックス 7186..7209）
     白箱 2001:5350 ＝ 980×240（上 73 / 下 72 / 左右 75・ロゴ列 gap 50） */
  /* Figma の見出し 2001:5356 は cap ボックス（7186..7209）で記録されている。
     ブラウザの行ボックス上端は cap 上端より 13.4px 上（32px / 行 44.8 実測）なので、
     「DL/Contact 下端 7026 → cap 上端 7186 = 160」は padding-top 146.6 に相当する。 */
  .p-operation { padding: 146.6px var(--pad-sp) 160px; }
  .p-operation__title { font-size: 32px; }

  /* Figma: 見出しベースライン 7209 → 白箱上端 7259（50）。行ボックス下端からは 41.6 */
  .p-operation__box { margin-top: 41.6px; padding: 73px 75px 72px; }

  .p-operation__logos {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    gap: 50px;
  }

  .p-operation__logos li:nth-child(1) img { width: 156px; }
  .p-operation__logos li:nth-child(2) img { width: 319px; }
  .p-operation__logos li:nth-child(3) img { width: 255px; }
}

/* ==========================================================================
   l-footer
   ========================================================================== */
/* フッターは .l-mainBg の内側にあるため、テーマ文字色（is-peace / is-program 等）を
   継承してページごとに色が変わってしまう。Figma はどのページも #692c1a なので断ち切る */
.l-footer {
  position: relative;
  z-index: 1;
  border-radius: 40px 40px 0 0;
  color: var(--c-brown);
  background: var(--c-white);
}

/* Figma SP 実測（Footer_SP 2001:5072 / 375×700・text-box-trim なし＝h は行ボックス）
     白地 0..670 ＋ 帯 670..700（30）
     ロゴ      x20  y34   109.238×74
     Frame617  x20  y145  幅196（私たちについて 16px SemiBold 行23 ＋ 間10
                          ＋ サブ 12px Regular 行28×2）→ 内容は 234 で終わる
     Frame618  x20  y248  お知らせ／3サービスが 行23・間10 の等ピッチ 33
     ボタン    x20  y407/460/513  240×46（間 7・文字 x39・アイコン x225 22.5）
     ユーティリティ x20 y588 行17 ピッチ22
     ↑ボタン   610..650（design_context の inset。metadata の y は回転前コーナーで不正確）
     コピーライト x20 y677 行16
   ↑ は absolute なので padding-bottom は「白地下端 670 まで」を確保する値にする */
.l-footer__inner {
  position: relative;
  max-width: calc(var(--w-content) + var(--pad-sp) * 2);
  margin-inline: auto;
  padding: 34px var(--pad-sp) 16.14px;
}

.l-footer__logo { width: 109.24px; }
/* img の width/height 属性（120×81）のままだと枠だけ広がって画像が小さいまま */
.l-footer__logo img { width: 100%; height: auto; }

/* Figma SP: ロゴ下端 108 → Frame617 上端 145 */
.l-footer__nav { margin-top: 37px; display: grid; gap: 10px; }

.l-footer__head {
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}

/* Figma SP 203:11428: 12px Regular・行ボックス 28・見出しとの間隔 10。
   Frame617 の内容下端 234 → Frame618 上端 248 は 14 だが、
   お知らせ〜サービス間は 10 なので、差の 4 をサブ側に持たせる
   （:first-child 等の兄弟セレクタをレイアウトに使わないため） */
.l-footer__sub {
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 28px;
}

.l-footer__sub li::before { content: "- "; }

.l-footer__list {
  margin-top: 0;
  display: grid;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
}

/* Figma SP: サービスリンク下端 369.83 → ボタン上端 407（37.17）／ボタン間 7 */
.l-footer__cta {
  display: grid;
  gap: 7px;
  margin-top: 37.17px;
}

.l-footer__cta .button-wrap { max-width: 240px; margin-inline: 0; }

/* Figma SP: 文字 x39（ボタン x20 ＝ 左 19）／アイコン x225 22.5（右 12.5） */
.l-footer__cta .button-wrap a { min-height: 46px; padding-left: 19px; font-size: 14px; }

.l-footer__cta .button-wrap::after { right: 12.5px; }

/* Figma SP 203:11407 ＝ y588・各行 h17（12px の leading normal）・gap 5 ＝ ピッチ 22。
   line-height:22 でピッチを作ると、実コンテンツ高 17.38 との差の半分
   （(22-17.38)/2 ＝ 2.31）が half-leading として行の上に付き、グリフが 2.3px 下がる。
   ブロック総高 66 は一致するので機械検査に出ないタイプのズレ。
   行ボックスは Figma どおり 17 にして、間隔は gap で作る。
   行送り 22→17 で失う 5px は padding-bottom で戻し、以降（帯・©）の位置を保つ。 */
.l-footer__utility {
  margin-top: 29px;
  display: grid;
  gap: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}

/* ページトップへ戻る。Figma は SP 40px / PC 60px の円に上向き矢印
   （書き出しアイコンは右向きのため -90° 回転して上向きに）。
   Figma 実測: ボタン下端との間隔 SP 51px / PC 63px、
   円下端〜コピーライト帯 SP 20px / PC 27px。
   位置は absolute なので、重ならないよう .l-footer__inner の
   padding-bottom（SP）/ min-height（PC）で場所を確保している。 */
.l-footer__pagetop {
  position: absolute;
  right: var(--pad-sp);
  bottom: 20px;
  width: 40px;
}

.l-footer__pagetop img {
  width: 100%;
  height: auto;
  transform: rotate(-90deg);
}

/* Figma: 帯は SP 30（文字 10px・行 16・上下 7）/ PC 50（文字 12px・行 17・上 15 下 18）。
   line-height 未指定だと body の 1.8 を継承して帯が SP 34 / PC 54.6 になっていた
   （フッター実高が SP +8.66 / PC +4.59 だった主因）。 */
.l-footer__copyright {
  padding: 7px var(--pad-sp);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
  color: var(--c-white);
  background: var(--c-brown);
}

/* <small> のUA既定（0.8333em）で SP 8.33px / PC 10px に縮んでいた */
.l-footer__copyright small { font-size: inherit; }

@media (min-width: 768px) {
  /* Figma 実測（Footer_PC 128:2943 / 1440×540）
       白地 0..490 ＋ コピーライト帯 490..540（50）
       ロゴ      x30   240×163（y96）
       ナビ 3 列 x430 / x696 / x846（列間 70・上端 y95）
         1列目 私たちについて 20px SemiBold ＋ サブ 14px Regular 行28（間隔 15）
         2列目 お知らせ 20px SemiBold
         3列目 ピースダイアログ / 観光人クエスト / MY LIV PROGRAM 20px SemiBold 行間 20
       ボタン    x1110 300×70・角丸 55・18px SemiBold（y100 / 185 / 270 ＝ 間隔 15）
       ユーティリティ x30 y443 14px Medium 字間 20
       ↑ボタン   x1350 y403 60×60
       コピーライト 12px Medium 白 */
  .l-footer__inner {
    /* フッターだけはコンテンツ幅 960 ではなく全幅（Figma: ロゴ x30 〜 ボタン右端 1410） */
    max-width: 1440px;
    display: grid;
    /* 1 列目の 400px はロゴ（240）＋ Figma の余白であって固有の寸法ではない。
       固定にすると 1440 未満でナビ列（196+80+166+70×2 ＝ 582）が入らなくなるので、
       余白側だけを可変にする。1440 では 400 のままなので見た目は変わらない。 */
    grid-template-columns: minmax(280px, 400px) 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "logo nav cta"
      "utility utility cta";
    column-gap: 0;
    row-gap: 40px;
    min-height: 490px;
    /* padding-bottom は「ユーティリティ下端 463」から逆算（490 − 463 = 27） */
    padding: 96px 30px 27px;
  }

  .l-footer__logo    { grid-area: logo; width: 240px; }
  .l-footer__nav     { grid-area: nav; margin-top: 0; }

  /* Figma はロゴ y96 / ナビ y95 に対しボタン列だけ y100。列ごとの手置き差なので
     ボタン列にだけ 4px の下げを持たせる（間隔は 15：100 → 185 → 270） */
  /* `auto` 列は中身の max-content で決まるため、ボタンの文字量が変わると
     列幅＝ボタン幅が 300 から縮む（padding-left を 20 にしたら 290 になった）。
     Figma のボタンは 300 固定なので列側に幅を持たせる。 */
  .l-footer__cta     { grid-area: cta; align-self: start; width: 300px; margin-top: 4px; gap: 15px; }

  .l-footer__utility {
    grid-area: utility;
    align-self: end;
    display: flex;
    gap: 20px;
    margin-top: 0;
    padding-bottom: 0;   /* SP の行送り補正用 padding をここで打ち消す */
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;   /* Figma 128:2930 ＝ y443 h20（leading normal） */
  }

  /* ロゴ（240×163）が grid の 1 行目を 162.58 まで押し上げ、
     nav → l-footer__list と stretch が連鎖して auto 行が 40.86 に伸び、
     サービス 3 件の行送りが 49 ではなく 60.86 になっていた。
     Figma 128:2938 はブロック 127（20px / 行ボックス 29 ＋ 行間 20 ＝ 行送り 49）。
     nav を上寄せし、リスト側も行を伸ばさないようにする。 */
  /* 列幅は Figma の固定フレーム幅（196 / 80 / 166・列間 70）をそのまま入れる。
     `repeat(3, auto)` は内容幅に依存し、1 列目のサブ文字列が Figma より 6px 狭いために
     2・3 列目が 6px 左へずれていた。
     さらに auto 列は min-content まで縮めるため、幅が足りなくなると
     日本語見出しが 1 文字ずつ縦積みになる（1024px 以下で発生していた）。
     固定幅にすると縮まないので、ブレークポイントを跨いだ瞬間に破綻する形にできる。 */
  .l-footer__nav {
    display: grid;
    grid-template-columns: 196px 80px 166px;
    justify-content: start;
    align-self: start;
    /* Figma はロゴ列だけ y96、ナビ 3 列（Frame617 / お知らせ / Frame618）は y95。
       ボタン列の +4 と同じ「列ごとの手置き差」なので −1 で再現する。
       align-self:start なので grid の行高（ロゴ 162.58）には影響しない。 */
    margin-top: -1px;
    gap: 70px;
  }

  .l-footer__head { font-size: 20px; font-weight: 500; line-height: 29px; }
  .l-footer__sub  { margin-top: 15px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 28px; }

  .l-footer__list {
    margin-top: 0;
    align-content: start;
    gap: 20px;
    font-size: 20px;
    font-weight: 500;
    line-height: 29px;
  }

  .l-footer__cta .button-wrap { max-width: 300px; }

  /* Figma 128:2922 ＝ 文字 x1130（ボタン x1110 ＝ 左 20）／アイコン x1359 30（右 21） */
  .l-footer__cta .button-wrap a {
    min-height: 70px;
    padding-left: 20px;
    font-size: 18px;
  }

  .l-footer__cta .button-wrap::after { right: 21px; }

  .l-footer__pagetop { right: 30px; bottom: 27px; width: 60px; }

  /* Figma: コピーライト帯は 50 高（文字 12px・行 17・上 15 / 下 18） */
  .l-footer__copyright { padding: 15px 30px 18px; font-size: 12px; line-height: 17px; }
}

/* --------------------------------------------------------------------------
   l-footer 中間幅の破綻対策（2026-08-27 クライアント指摘）
   PCレイアウト（768px〜）は Figma 実測の固定寸で組んでいるため、成立には
     ロゴ列 280 ＋ ナビ 582（196+80+166＋列間70×2）＋ ボタン 300 ＋ 左右 padding 60
     ＝ **1222px** が必要。
   これを下回る中間幅（例 1116px）では CTA ボタンが右端から溢れて切れていた
   （実測: ボタン右端 1192px に対しビューポート 1116px）。
   そこで **1220px 未満だけ** 固定寸を伸縮値に置き換える。
   1220px 以上（＝Figma基準の 1440 を含む）の見た目は一切変更しない。
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1219px) {
  .l-footer__inner {
    /* ロゴ列は下限を下げ、余った幅はナビ側へ渡す */
    grid-template-columns: minmax(180px, 1fr) auto auto;
    column-gap: clamp(16px, 2.5vw, 40px);
    padding-inline: clamp(16px, 2.2vw, 30px);
  }

  /* ロゴは幅に追従（240 を上限に縮む） */
  .l-footer__logo { width: clamp(160px, 17vw, 240px); }

  /* ナビ 3 列は固定幅をやめて内容幅ベースに。列間も可変にする。
     見出しは折り返さない（幅が詰まったとき日本語が 1 文字ずつ縦積みになるのを防ぐ）。
     サブ項目（マイリブが向き合う社会課題 等）は従来どおり折り返してよい。 */
  .l-footer__nav {
    grid-template-columns: repeat(3, auto);
    gap: clamp(20px, 3.4vw, 70px);
  }
  .l-footer__head { white-space: nowrap; }
  .l-footer__list { white-space: nowrap; }

  /* CTA ボタンは 300 を上限に縮む（列幅もボタン幅に追従させる） */
  .l-footer__cta { width: clamp(210px, 22vw, 300px); }
  .l-footer__cta .button-wrap { max-width: none; }
  .l-footer__cta .button-wrap a {
    min-height: clamp(56px, 5vw, 70px);
    padding-left: clamp(14px, 1.4vw, 20px);
    padding-right: clamp(42px, 4.4vw, 56px);
    font-size: clamp(14px, 1.4vw, 18px);
  }
  .l-footer__cta .button-wrap::after { right: clamp(12px, 1.5vw, 21px); }

  /* ユーティリティは幅が詰まったら折り返す（横一列固定で溢れさせない） */
  .l-footer__utility { flex-wrap: wrap; row-gap: 8px; }

  .l-footer__pagetop { right: clamp(16px, 2.2vw, 30px); }
  .l-footer__copyright { padding-inline: clamp(16px, 2.2vw, 30px); }
}

/* 960px 未満（タブレット〜小さめPC）は 3 列が物理的に入りきらないため
   「ロゴ＋ナビ」→「ボタン3つ横並び」→「ユーティリティ」の 3 段組みにする。
   （上の伸縮だけでは 768〜959px で CTA が最大 114px 溢れていた・実測） */
@media (min-width: 768px) and (max-width: 959px) {
  .l-footer__inner {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "logo nav"
      "cta cta"
      "utility utility";
    row-gap: 36px;
    min-height: 0;
    padding: 64px clamp(20px, 3vw, 30px) 27px;
  }

  /* ボタンは横並びにして幅を使い切る（縦積みだと間延びするため）。
     2026-09-14: 資料ダウンロード2種を1ボタンに統合したため 3列→2列 */
  .l-footer__cta {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
  }
  .l-footer__cta .button-wrap { width: 100%; max-width: none; }
  .l-footer__cta .button-wrap a {
    min-height: 56px;
    padding-left: 16px;
    padding-right: 44px;
    font-size: 14px;
  }
  .l-footer__cta .button-wrap::after { right: 14px; }

  .l-footer__pagetop { bottom: 20px; }
}