@charset "UTF-8";
/* ============================================================
   3分でわかる北九州ウォーターサービス（3min）
   フォント：見出し=Zen Kaku Gothic New ／ 英字=Inter ／ 本文=Noto Sans JP
   （このページ内で webfont を読み込む）
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800;900&family=Noto+Sans+JP:wght@700;900&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap');

.p-3min {
  /* ── 色 ─────────────────── */
  --m-cyan-35: #0f9ba6;  /* 濃シアン：英字ラベル／アクセント */
  --m-cyan-45: #21b9c2;
  --m-cyan-56: #4ccdd3;
  --m-cyan-73: #95d4dd;
  --m-cyan-83: #b8edf1;  /* 淡シアン：ボックスグラデ起点 */
  --m-cyan-89: #cff2f5;
  --m-grey-94: #e6f7f9;  /* 極淡：ボックスグラデ終点 */
  --m-grey-97: #f2fbfc;
  --m-ink:      #0a2340; /* 見出し濃紺 */
  --m-ink-soft: #3d5866; /* 本文スレート */
  --m-accent:   #076baf; /* リード文の青 */

  /* ── フォント ─────────────────────────────── */
  --m-font-heading: "Zen Kaku Gothic New", var(--font-base);
  --m-font-en: "Inter", var(--font-base);
  /* 本文は var(--font-base)（Noto Sans JP）を使用 */

  /* ── レイアウト ── */
  --m-container: 1072px; /* セクション内コンテンツの最大幅 */

  font-family: var(--font-base);
  color: var(--m-ink-soft);
  line-height: 1.8;
}

/* ── セクションの器 ───────────────────────────
   セクションは全幅（背景帯を全幅に出すため）。
   padding-inline の max() で、背景は全幅のままコンテンツだけ --m-container 幅に中央寄せ。 */
.p-3min-point {
  padding: 96px max(24px, calc((100% - var(--m-container)) / 2));
  background: #ffffff;   /* 既定は白。色付きは modifier で上書き */
}

/* ── 共通パーツ ─────────────────────────────── */

/* 英字ラベル（POINT 0X ／ OUR MISSION 等） */
.p-3min-point-label {
  margin: 0;
  font-family: var(--m-font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.86px;
  line-height: 1.75;
  color: #00c2cb;
  text-align: center;
}

/* 大見出し（ひとことで言うと？ 等） */
.p-3min-point-title {
  margin: 8px 0 0;
  font-family: var(--m-font-heading);
  font-weight: 900;
  font-size: 40px;
  line-height: 1.75;
  letter-spacing: 0.8px;
  color: var(--m-ink);
  text-align: center;
}

/* リード（淡シアン→極淡のグラデ角丸ボックス＋青の太字） */
.p-3min-lead {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 17px 40px;
  border-radius: 9999px;       /* 完全なピル型 */
  background: linear-gradient(128.9deg, var(--m-cyan-83) 0%, var(--m-grey-94) 100%);
  font-family: var(--m-font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.7;
  color: var(--m-accent);
  text-align: center;
}

/* ＼ … ／ バナーラベル（政策連携団体とは？ ／ KWSならではの強み 等） */
.p-3min-banner {
  margin: 0 0 16px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 1.3px;
  line-height: 1.14;
  color: var(--m-cyan-35);
  text-align: center;
}

/* PC 最大幅時の改行 */
.p-3min-br { display: inline; }
/* SP/タブレット（縦積み）専用の改行。PC では無効 */
.p-3min-br-sp { display: none; }

/* ── 改行フレーム ──
   br-pc  : PC指定位置（≥1077pxで改行）
   br-m   : スマホ＠位置（≤600pxで改行）
   br-both: PC・SP両方の位置（≥1077 と ≤600 の両方で改行）
   その間(600〜1077px)は全てOFF＝自然折り返し（流動的） */
.p-3min-br-pc, .p-3min-br-m, .p-3min-br-both { display: none; }
@media (min-width: 1077px) { .p-3min-br-pc, .p-3min-br-both { display: inline; } }
@media (max-width: 600px)  { .p-3min-br-m, .p-3min-br-both { display: inline; } }

/* ============================================================
   ヒーロー（淡シアン帯＋下部白波／左テキスト・右写真・水滴2つ）
   ============================================================ */
.p-3min-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #cff2f5 0%, #b8edf1 100%); /* 帯の色 */
}
.p-3min-hero-inner {
  position: relative;
  display: flex;
  align-items: stretch;       /* ギャップ列を全高に。body/visual は align-self で個別指定 */
  gap: 0;                     /* ギャップは中央のスペーサー列で表現 */
  max-width: 1275px;
  margin: 0 auto;
  padding: 34px 0 100px;      /* 下は白波100px分の余白 */
}

/* 左：テキスト */
.p-3min-hero-body {
  flex: 454 1 0;
  min-width: 0;
  align-self: center;   /* テキストは縦中央 */
}

/* 中央：ギャップ列。中に雫グループ */
.p-3min-hero-gap {
  flex: 134 1 0;
  position: relative;
}
.p-3min-hero-title {
  margin: 0;
  font-family: var(--font-base); /* 「3」と「分」を同フォントで揃える */
  font-weight: 900;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: 0.64px;
  color: #ffffff;
}
.p-3min-hero-title-min {
  color: var(--m-cyan-45);       /* 「3分」= シアン・大きめ（font-family/weight はタイトルを継承） */
  font-size: 48px;
}
.p-3min-hero-en {
  margin: 12px 0 0;
  font-family: var(--m-font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.86px;
  line-height: 1.75;
  color: var(--m-cyan-35);
}
.p-3min-hero-text {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.78;
  color: var(--m-ink-soft);
}

/* 右：写真（制御室） */
.p-3min-hero-visual {
  flex: 687 1 0;
  min-width: 0;
  margin: 0;
  align-self: flex-start; /* 上寄せ（下端が波に接する） */
}
.p-3min-hero-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 21px;
  box-shadow: 0 18px 40px rgba(12, 77, 162, 0.12);
}

/* 雫グループ（ギャップ列内）。2つの相対位置を保った1ユニット */
.p-3min-hero-drops {
  position: absolute;
  top: 24.6%;   /* ギャップ上部寄り */
  left: 3%;     /* 文章のすぐ右（ギャップ左寄り） */
  width: 58px;
  height: 126px;
  pointer-events: none;
}
.p-3min-hero-drop {
  position: absolute;
}
.p-3min-hero-drop--big {  /* 大きい雫 */
  left: 0;
  top: 0;
  width: 42px;
}
.p-3min-hero-drop--mid {  /* 中くらいの雫（大の右下） */
  left: 31px;
  top: 79px;
  width: 27px;
}

/* 下端の白波（2層：後波0.55＋前波1.0／いずれも白・下端揃え） */
.p-3min-hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 100px;          /* 後波の高さを基準に領域確保 */
  line-height: 0;
  pointer-events: none;
}
.p-3min-hero-wave svg {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
}
.p-3min-hero-wave-back  { height: 100px; } /* 後波（不透明度0.55・上に出る） */
.p-3min-hero-wave-front { height: 60px; }  /* 前波（不透明度1.0・下） */

/* ============================================================
   POINT セクション共通
   ============================================================ */
/* POINT 04：上から下へのグラデーション */
.p-3min-point--cyan { background: linear-gradient(180deg, #fafdfe 0%, #baedf1 100%); }
/* POINT 06：白→極淡シアン→白の微グラデ */
.p-3min-point--tint06 { background: linear-gradient(180deg, #ffffff 0%, #f2fbfc 60%, #ffffff 100%); }

/* POINT 02：上端を白波・背景を上→下グラデーション */
.p-3min-point--cyan02 {
  position: relative;
  /* 上が薄く、下に向かって濃く */
  background: linear-gradient(180deg, #e6f7f9 0%, #b8edf1 100%);
  padding-top: 124px;          /* 上端の白波の下にコンテンツを置く余白 */
}
/* 上端の白波（上の白セクションがシアンに垂れ込む形・1層） */
.p-3min-wave-top {
  position: absolute;
  top: -1px;                   /* 上のセクションと隙間なく繋ぐ */
  left: 0;
  width: 100%;
  height: 70px;
  line-height: 0;
  pointer-events: none;
}
.p-3min-wave-top svg {
  display: block;
  width: 100%;
  height: 100%;
}

.p-3min-point-title { margin-top: 6px; }
.p-3min-point .p-3min-lead { margin: 36px auto 44px; }

/* ── 吹き出し（マスコットの語り・P01/02/05） ── */
.p-3min-text {
  --bubble-border: var(--m-cyan-45);   /* 既定（吹き出しごとに上書き可） */
  position: relative;
  max-width: 880px;
  margin: 0 auto 18px;
  padding: 19px 28px;
  background: #ffffff;
  border: 1px solid var(--bubble-border);
  border-radius: 18px;
  font-size: 15px;                     /* 全吹き出し統一 */
  line-height: 1.78;
  color: var(--m-ink);
  box-shadow: 0 18px 40px -18px rgba(15, 43, 61, 0.18);
}
/* しっぽ：枠線色の三角（外）＋白い三角（内）の縁取りしっぽ（マスコット側へ） */
.p-3min-text::before {
  content: "";
  position: absolute;
  left: -12px; top: 26px;
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid var(--bubble-border);
}
.p-3min-text::after {
  content: "";
  position: absolute;
  left: -10px; top: 28px;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #ffffff;
}
/* 枠線・しっぽを #4ccdd3 にする吹き出し（P01・P02 の2つ目） */
.p-3min-text--alt { --bubble-border: var(--m-cyan-56); }
/* 吹き出しでない中央寄せ本文（POINT 03 のリード文など） */
.p-3min-text--plain {
  max-width: 760px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 18px;
  color: var(--m-ink-soft);
  text-align: left;         /* 箱(max-width760px)は中央寄せのまま、中身は左寄せ */
}
.p-3min-text--plain::before,
.p-3min-text--plain::after { display: none; }

/* 吹き出し内のハイライト語（太字） */
.p-3min-em {
  color: var(--color-cyan);
  font-weight: 700;
}

/* セクションのキャプション（ルーツ／知ると） */
.p-3min-cap {
  max-width: 760px;
  margin: 10px auto 40px;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.75;
  color: var(--m-ink-soft);
  text-align: center;
}

/* 大きめ見出し文（実は…） */
.p-3min-headline {
  max-width: var(--m-container);
  margin: 36px auto 44px;
  padding: 60px 40px;
  background: #ffffff;
  border: 1px solid #8dd0d9;
  border-radius: 28px;
  box-shadow: 0 18px 40px -18px rgba(15, 43, 61, 0.18);
  font-family: var(--font-base);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.5;
  color: var(--m-ink);
  text-align: center;
}
.p-3min-headline-em {
  color: var(--m-cyan-35);    /* 「大きく動いている」 */
}

/* マスコット＋吹き出しの並び。
   吹き出しの右端をカード（タイムライン等）右端に合わせ、マスコットは左へインセット
   （コンテンツ幅より少し狭くして右寄せ＝カードと左端が揃わない）。 */
.p-3min-talk {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1021px;          /* 1072 − 51px：マスコットがカード/グリッド左端と揃わないようインセット */
  margin: 0 0 18px auto;      /* 右寄せ（右端＝カード右端） */
}
.p-3min-talk-icon {
  flex: 0 0 auto;
  width: 93px;
  height: auto;
}
.p-3min-talk .p-3min-text {
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
}
/* POINT 01 一番下(b3)：吹き出しを本文幅に合わせて狭め、マスコットごと中央寄せ。
   基底が右寄せのため、ここで margin:0 auto に戻して中央に。 */
.p-3min-talk--center {
  width: fit-content;
  margin: 0 auto 18px;
}
.p-3min-talk--center .p-3min-text {
  flex: 0 1 auto;          /* 伸びず、本文幅にフィット */
}

/* ── 水の循環フロー（POINT 01） ── */
.p-3min-flow-box {
  max-width: var(--m-container);
  margin: 0 auto 44px;
  padding: 36px 40px 40px;
  background: #ffffff;                 /* 外枠（STEPカードを含む）は白 */
  border: 1px solid #9ddae2;
  border-radius: 28px;
  box-shadow: 0 18px 40px -18px rgba(15, 43, 61, 0.18);
}
.p-3min-flow-heading {
  box-sizing: border-box;
  width: 627px;
  max-width: 100%;
  margin: 0 auto 28px;                 /* 中央寄せ */
  padding: 12px 24px;
  background: #e6f7f9;
  border-radius: 14px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 20px;
  line-height: 35px;
  color: var(--m-accent);
  text-align: center;
}
.p-3min-flow {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.p-3min-flow-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* ステップ円アイコン：各PNGの円を 88px 枠に収めて正規化。
   背景サイズ/位置を % 指定にすることで、枠サイズを変えるだけで円が自動スケール＆中心一致。 */
.p-3min-flow-icon {
  width: 88px; height: 88px;
  margin-bottom: 12px;
  background-repeat: no-repeat;
}
.p-3min-flow-icon--1 { background-image: url("../../images/3min/step1.webp"); background-size: 136.36%; background-position: 50% 25%; }
.p-3min-flow-icon--2 { background-image: url("../../images/3min/step2.webp"); background-size: 131.82%; background-position: 50% 7.14%; }
.p-3min-flow-icon--3 { background-image: url("../../images/3min/step3.webp"); background-size: 100%;    background-position: center; }
.p-3min-flow-icon--4 { background-image: url("../../images/3min/step4.webp"); background-size: 131.82%; background-position: 50% 7.14%; }
.p-3min-flow-icon--5 { background-image: url("../../images/3min/step5.webp"); background-size: 136.36%; background-position: 50% 25%; }
/* STEP 2/4（水色）：ベイク影が88px枠で直線的に切れるため、円形クリップで切り、円状の水色影(box-shadow)を付け直す */
.p-3min-flow-icon--2,
.p-3min-flow-icon--4 { border-radius: 50%; box-shadow: 0 12px 24px -10px rgba(33, 185, 194, 0.6); }
.p-3min-flow-item:not(:last-child)::after { /* ステップ間の矢印 arrow.webp */
  content: "";
  position: absolute;
  top: 40px; right: -26px;             /* 円(88px)の縦中心≈44px に合わせる */
  width: 52px; height: 9px;
  background: url("../../images/3min/arrow.webp") no-repeat center / contain;
}
.p-3min-flow-num {
  display: block;
  font-family: var(--m-font-en);
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  color: #21b9c2;
}
.p-3min-flow-name {
  display: block;
  margin-top: 2px;
  font-family: var(--m-font-heading);
  font-weight: 700; font-size: 16px;
  color: var(--m-ink);
}
.p-3min-flow-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--m-ink-soft);
}

/* ── 政策連携 callout（POINT 01） ── */
.p-3min-callout { max-width: var(--m-container); margin: 0 auto 24px; }
.p-3min-callout-box {
  margin-top: 14px;
  padding: 32px 32px;
  background: #ffffff;
  border: 1px solid #00c2cb;
  border-radius: 18px;
}
.p-3min-callout-visual {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; margin-bottom: 16px;
}
.p-3min-callout-x { font-size: 20px; color: var(--m-cyan-35); }
.p-3min-callout-logo { height: 46px; width: auto; }
.p-3min-callout-text {
  margin: 0;
  font-size: 18px; line-height: 1.78;
  color: var(--m-ink);
  text-align: center;
}

/* ── タイムライン（POINT 02・白カード／年表） ── */
.p-3min-timeline-card {
  max-width: var(--m-container);
  margin: 0 auto 36px;
  padding: 36px 40px 40px;
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 18px 40px -18px rgba(15, 43, 61, 0.18);
}
/* TIMELINE ラベル：枠内・左上 */
.p-3min-timeline-heading {
  margin: 34px 0 -10px;      /* 下マージンをマイナスにして年表にぴったり寄せる */
  font-family: var(--m-font-en);
  font-size: 12px; font-weight: 800; letter-spacing: 2.4px;
  color: var(--m-cyan-45);
  text-align: left;
}
/* 年表（左）＋写真（右） */
.p-3min-timeline-body {
  display: flex;
  align-items: flex-start;
  gap: 44px;
}
.p-3min-timeline {
  list-style: none;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.p-3min-timeline-photo {
  flex: 0 0 auto;
  width: 48%;
  max-width: 480px;
  height: auto;
  border-radius: 12px;
}
.p-3min-timeline-item {
  display: flex; align-items: baseline; gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--m-cyan-89);
}
.p-3min-timeline-item:last-child { border-bottom: 0; }
.p-3min-timeline-year {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;  /* 数字を等幅化→年号4桁の幅が全行同じになり、内容列の開始位置が揃う */
  font-family: var(--m-font-en);
  font-weight: 800; font-size: 28px;
  color: var(--m-cyan-45);
}
.p-3min-timeline-event { font-size: 16px; color: var(--m-ink-soft); }

/* ── 強み（POINT 02）。バナー＋3カードを白箱で囲む ── */
.p-3min-strengths-card {
  max-width: var(--m-container);
  margin: 16px auto 0;
  padding: 28px 32px;
  background: #ffffff;
  border: 1px solid #00c2cb;
  border-radius: 18px;
}
.p-3min-strengths {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 0;
  padding: 0;
}
.p-3min-strength {
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #d3edf0;
  border-radius: 14px;
  box-shadow: 0 8px 24px -8px rgba(15, 43, 61, 0.12);
  text-align: left;
}
.p-3min-strength-title {
  display: block;
  font-family: var(--font-base);
  font-weight: 900; font-size: 18px; line-height: 1.55;
  color: var(--m-ink);
}
.p-3min-strength-desc {
  display: block; margin-top: 4px;
  font-size: 16px; line-height: 1.3;
  color: var(--m-ink-soft);
}

/* ── 地図（POINT 03・2枚） ── */
.p-3min-map {
  display: flex; justify-content: center; gap: 40px;
  max-width: var(--m-container);
  margin: 40px auto 0;
}
.p-3min-map-area { flex: 1 1 0; }
.p-3min-map-label {
  margin: 0 0 12px;
  padding-left: 1em;          /* 左寄せ後、全角1文字分のインデント */
  font-family: var(--m-font-en);
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: var(--m-cyan-35);
  text-align: left;           /* 画像の左端に合わせて左寄せ */
}
.p-3min-map-area img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* 地図の注釈（説明文と地図の間。地図のキャプションとして地図寄りに配置） */
.p-3min-map-note {
  max-width: var(--m-container);
  margin: 32px auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--m-ink-soft);
  text-align: center;
}
.p-3min-map-note + .p-3min-map {
  margin-top: 12px;
}
@media (max-width: 768px) {
  .p-3min-map-note { font-size: 12px; }
}

/* ── 数字（POINT 04・6カード 3×2） ── */
.p-3min-facts {
  list-style: none;
  /* 201px の正方形カードを 3×2・中央寄せ */
  display: grid; grid-template-columns: repeat(3, 201px); gap: 24px;
  justify-content: center;
  max-width: var(--m-container);
  margin: 0 auto;
  padding: 0;
}
.p-3min-fact {
  box-sizing: border-box;              /* height:201px に padding を含める＝正方形に */
  height: 201px;                       /* 正方形（固定） */
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 3px 3px 13px -3px rgba(0, 0, 0, 0.25);
  text-align: left;
  overflow: hidden;
}
.p-3min-fact-no {                      /* 左上 */
  margin: 0 0 6px;
  font-family: var(--m-font-en);
  font-size: 11px; font-weight: 800; letter-spacing: 2.2px; line-height: 1.3;
  color: var(--m-cyan-35);
}
/* ラベル（創業から 等）。高さを2行分で固定し、6枚の数字が同じ高さに揃うようにする */
.p-3min-fact-label {
  margin: 0 0 4px;
  min-height: 46px;                    /* 2行分。数字を全カード同じ高さに揃える */
  display: flex; flex-direction: column; justify-content: center; /* ラベルを枠内で縦中央 */
  font-family: var(--font-base); font-weight: 900;
  font-size: 16px; line-height: 1.4;
  color: var(--m-ink);
}
/* 数字＋単位：x軸中央寄せ（ラベル固定高で全カード一致） */
.p-3min-fact-value {
  margin: 0;
  align-self: center;                  /* 横方向：カード中央 */
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  color: var(--m-cyan-35);
}
/* 接頭（市内 等）。ベースラインではなく数字の縦中央に揃える */
.p-3min-fact-prefix {
  align-self: center;
  font-family: var(--font-base); font-weight: 900;
  font-size: 18px; line-height: 1.2; color: var(--m-ink);
}
/* FACT 02：数字「5」をカードのx軸中央に固定し、市内=左・ヶ所=右に振り分け（3列グリッド） */
.p-3min-fact-value--prefix {
  align-self: stretch;                 /* 全幅にして中央列(=5)をカード中央へ */
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
}
.p-3min-fact-value--prefix .p-3min-fact-prefix {
  justify-self: end; margin-right: 8px; /* 5のすぐ左 */
}
.p-3min-fact-value--prefix .p-3min-fact-unit {
  justify-self: start; margin-left: 4px; /* 5のすぐ右 */
}
.p-3min-fact-num {
  font-family: var(--m-font-en);
  font-weight: 900; font-size: 72px; line-height: 1; letter-spacing: 0.72px;
}
.p-3min-fact-decimal { font-size: 48px; } /* 小数(.5/.3)は48px */
/* 単位（年以上/ヶ所 等） */
.p-3min-fact-unit {
  font-family: var(--font-base); font-weight: 900;
  font-size: 18px; color: var(--m-ink);
  white-space: nowrap;                 /* 「年以上」が年/以上に折り返さないよう1行固定 */
}
/* 注記：右下（margin-top:auto で下端へ・align-self で右寄せ） */
.p-3min-fact-note {
  margin: auto 0 0;
  align-self: flex-end;
  font-size: 12px; line-height: 1.4;
  color: var(--m-ink-soft);
  text-align: right;
}

/* FACT 04：事業所数カード。福岡県内10ヶ所の所在地マップ（ピン＋地名ラベル入り＝fukuoka-map.png）を
   カードに敷き、「FACT 04／事業所数」は上、「10 箇所」は左下にオーバーレイ。
   ・≤900px（2列/SP）＝通常の正方形カード（下記の base 値）。
   ・PC（≥901px）＝下の @media で 2×2 の大カードにして地図と数字を大きく見せる（Figma node 653-93）。 */
.p-3min-fact--map { position: relative; }
.p-3min-fact-map {
  position: absolute;
  left: 50%;
  top: 25%;                    /* 224pxカードで top56px ≒ 上から25%（FACT 05/事業所数の下） */
  transform: translateX(-50%);
  width: 94.5%;                /* 212/224。左右ほぼ全幅で中央 */
  height: 68.7%;               /* 154/224 */
  object-fit: cover;
  object-position: center;
  border-radius: 5px;
  z-index: 0;                  /* テキストの背面へ */
  pointer-events: none;
}
/* テキストはマップより前面に */
.p-3min-fact--map .p-3min-fact-no,
.p-3min-fact--map .p-3min-fact-label,
.p-3min-fact--map .p-3min-fact-value { position: relative; z-index: 1; }
/* 「10 箇所」を左下へ（通常カードの中央寄せを上書き） */
.p-3min-fact-value--map {
  margin-top: auto;            /* カード下端へ押し下げ */
  align-self: flex-start;      /* 左寄せ */
  justify-content: flex-start;
}
.p-3min-fact-value--map .p-3min-fact-num { font-size: 45px; }  /* 49.961/1.115 */

/* 人物アイコン（FACT03）は PC（653-93）には無く、SP/タブレット（655-96）のみ。既定は非表示 */
.p-3min-fact-emp-icon { display: none; }

/* PC：事業所数カードを 2×2（426×426）の大カードにして地図を大きく見せる（Figma node 653-93）。
   3列グリッドで col1-2 × row2-3 を占有し、右列に FACT 05／06 が縦積みになる。 */
@media (min-width: 901px) {
  .p-3min-fact--map { grid-column: span 2; grid-row: span 2; height: 426px; }  /* 201×2 + gap24 = 2行分の高さ */
  .p-3min-fact--map .p-3min-fact-map {
    top: 93px;                 /* FACT 04／事業所数ラベルの下 */
    width: 402px; height: 292px;   /* 448×325(Figma)/1.115。カード幅426にほぼ全幅 */
    object-fit: contain;       /* 全ピン・地名ラベルを欠けさせない */
    border-radius: 8px;
  }
  .p-3min-fact--map .p-3min-fact-value--map {
    position: absolute; left: 62px; bottom: 40px; margin: 0;   /* 地図の左下に「10箇所」を重ねる */
  }
  .p-3min-fact--map .p-3min-fact-value--map .p-3min-fact-num  { font-size: 84px; }  /* 95(Figma高)基準で大きく */
  .p-3min-fact--map .p-3min-fact-value--map .p-3min-fact-unit { font-size: 32px; }
}

/* ── 業界の課題（POINT 05・3カード） ── */
.p-3min-issues {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: var(--m-container);
  margin: 0 auto 20px;        /* 下に矢印が入るので余白を縮小 */
  padding: 0;
}
.p-3min-issue {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 22px;
  background: #e6f7f9;                  /* 淡シアン背景（枠線なし） */
  border-radius: 16px;
}
.p-3min-issue-no {
  font-family: var(--m-font-en);
  font-size: 11px; font-weight: 800; letter-spacing: 2.2px;
  color: var(--m-cyan-35);
}
.p-3min-issue-title {
  font-family: var(--font-base);
  font-weight: 900; font-size: 16.3px; line-height: 1.55;
  color: var(--m-ink);
}
.p-3min-issue-desc { margin-top: 2px; font-size: 12px; line-height: 1.8; color: var(--m-ink-soft); }

/* POINT 05：ISSUE → リードへの下向き矢印（arrow.webp を90°回転） */
.p-3min-arrow-down {
  display: flex; justify-content: center; align-items: center;
  height: 52px;               /* 回転後の縦長分を確保 */
  margin: 0 auto;
}
.p-3min-arrow-down img {
  width: 52px; height: auto;  /* 横向き arrow.webp を縦（下向き）に */
  transform: rotate(90deg);
}
.p-3min-arrow-down + .p-3min-lead { margin-top: 20px; } /* 矢印直後のリードは上余白を詰める */

/* ── 向いている人（POINT 06・4カード 2×2／上にマスコット枠） ── */
.p-3min-types {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  grid-auto-rows: 1fr;          /* 上下の段で枠の高さを統一（最も文章が長いカードに揃える） */
  max-width: var(--m-container);
  margin: 0 auto;
  padding: 0;
}
/* マスコット（左・カード外）＋吹き出し（右）。吹き出しは .p-3min-text の形を流用 */
.p-3min-type {
  display: flex; align-items: stretch; gap: 14px;
}
.p-3min-type-icon { /* マスコット man/woman（吹き出しの外＝左） */
  flex: 0 0 auto;
  align-self: flex-start;
  width: 93px;
  height: auto;
}
.p-3min-type .p-3min-text {     /* 吹き出し本体（枠線・しっぽ・影は .p-3min-text を継承） */
  flex: 1 1 auto;
  max-width: none;
  margin: 0;
  padding: 24px 32px;           /* タイトル＋本文が入るので少し広め */
}
.p-3min-type-title {
  margin: 0 0 12px;
  font-family: var(--font-base);
  font-weight: 700; font-size: 18px; line-height: 1.78;
  color: var(--m-accent);
}
.p-3min-type-text { margin: 0; font-size: 15px; line-height: 1.78; color: var(--m-ink); } /* 全吹き出し統一 15px（タイトルは18pxのまま） */

/* ============================================================
   レスポンシブ（ブレイクポイント：≤900=タブレット/SP、≤600=スマホ）
   方針＝ハイブリッド：ヒーローは比例縮小(901–1350)＋900未満で縦積み、他はリフロー。
   ============================================================ */

/* ── ヒーロー：PC狭め(901–1350px)で文字・写真の比率と改行を保ったまま比例縮小（両端余白あり） ── */
@media (min-width: 901px) and (max-width: 1350px) {
  .p-3min-hero { --u: calc(100vw / 1350); } /* 1350pxで等倍、狭めるほど比例縮小 */
  .p-3min-hero-inner {
    max-width: calc(1275 * var(--u));        /* コンテンツ幅を比例縮小＝両端に余白(約2.8vw)を保つ */
    padding: calc(34 * var(--u)) 0 calc(100 * var(--u));
  }
  .p-3min-hero-title { font-size: calc(32 * var(--u)); letter-spacing: calc(0.64 * var(--u)); }
  .p-3min-hero-title-min { font-size: calc(48 * var(--u)); }
  .p-3min-hero-en { margin-top: calc(12 * var(--u)); font-size: calc(13 * var(--u)); letter-spacing: calc(2.86 * var(--u)); }
  .p-3min-hero-text { margin-top: calc(14 * var(--u)); font-size: calc(18 * var(--u)); }
  .p-3min-hero-drops { width: calc(58 * var(--u)); height: calc(126 * var(--u)); }
  .p-3min-hero-drop--big { width: calc(42 * var(--u)); }
  .p-3min-hero-drop--mid { left: calc(31 * var(--u)); top: calc(79 * var(--u)); width: calc(27 * var(--u)); }
  .p-3min-hero-wave, .p-3min-hero-wave-back { height: calc(100 * var(--u)); }
  .p-3min-hero-wave-front { height: calc(60 * var(--u)); }
}

@media (max-width: 900px) {
  /* ── ヒーロー：縦積み（タイトル→英字→画像→本文）。両端24px余白。
       下を広げ、背景の白波と本文が被らないよう余裕を持たせる ── */
  .p-3min-hero-inner {
    flex-direction: column; align-items: stretch;
    max-width: 600px; margin: 0 auto; padding: 40px 24px 150px;
  }
  .p-3min-hero-body { display: contents; } /* 子(title/en/text)を直接アイテム化し order で並べ替え */
  .p-3min-hero-title { order: 1; font-size: 28px; }
  .p-3min-hero-en { order: 2; }
  /* 画像＋本文をウィンドウ幅に比例拡縮（拡大も縮小もする）。縦積みの内側最大幅600pxで頭打ち */
  .p-3min-hero { --u: calc(min(100vw, 600px) / 402); }
  .p-3min-hero-visual {
    order: 3; align-self: center; flex: 0 0 auto; min-width: 0;
    width: calc(348 * var(--u)); margin-top: calc(22 * var(--u)); /* 英字→画像 */
  }
  .p-3min-hero-photo { aspect-ratio: 348 / 196; object-fit: cover; border-radius: calc(21 * var(--u)); } /* 横長クロップ */
  .p-3min-hero-text {
    order: 4; align-self: center; flex: 0 0 auto;
    width: calc(330 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.75;
    margin-top: calc(14 * var(--u)); /* 画像→本文 */
  }
  .p-3min-hero-gap { display: none; }      /* 雫グループは非表示（SP） */
  .p-3min-hero-title-min { font-size: 40px; }
  /* 背景の白波を大きく＋下へ。下パディング150pxと合わせ本文が波に被らない */
  .p-3min-hero-wave, .p-3min-hero-wave-back { height: 130px; }
  .p-3min-hero-wave-front { height: 84px; }

  /* PC用の改行をSP/タブレットで解除＝自然折り返しに
     （市内/FACT04ラベルの構造的改行は .p-3min-text/.p-3min-hero-text 外なので維持される） */
  .p-3min-hero-text .p-3min-br,
  .p-3min-text .p-3min-br { display: none; }
  /* 縦積み時、英字を「…SERVICE / IN 3 MINUTES」で改行 */
  .p-3min-br-sp { display: inline; }

  /* ── 吹き出し：全幅・マスコットを右下へ・左しっぽ非表示 ── */
  .p-3min-talk, .p-3min-talk--center {
    position: relative; width: auto; max-width: 600px; margin: 0 auto 30px;
  }
  /* 上を広く・下にマスコット用の余白帯(48px)。文章は帯の上で終わるのでマスコットと重ならない */
  .p-3min-talk .p-3min-text { flex: 1 1 auto; max-width: none; padding: 28px 28px 48px; }
  .p-3min-talk-icon { position: absolute; bottom: -16px; right: 6px; width: 56px; z-index: 1; }
  .p-3min-text::before, .p-3min-text::after { display: none; } /* 左しっぽ非表示（SP） */

  /* タイプ（POINT 06）も同様にマスコット右下 */
  /* width:100% 必須：グリッドアイテムは auto マージンだと内容幅に縮み、カード毎に枠幅がバラつく */
  .p-3min-type { position: relative; width: 100%; max-width: 600px; margin: 0 auto; }
  .p-3min-type .p-3min-text { padding: 28px 28px 48px; } /* 上を広く・下にマスコット帯 */
  .p-3min-type-icon { position: absolute; bottom: -16px; right: 6px; width: 56px; z-index: 1; }

  /* ── 数字（POINT 04）＝ Figma 655-96 の構成（SP/タブレット共通）：
       FACT01|02（2列）／FACT03 全幅＋人物アイコン（右）／FACT04 全幅（地図右・10箇所左）／FACT05|06（2列）。
       設計幅426px(2×201+24gap)を内容幅(100vw-48)に --u で比例（≈474px以上で等倍・中央寄せ、以下は縮小）。 ── */
  .p-3min-facts {
    --u: min(1px, calc((100vw - 48px) / 426));
    grid-template-columns: repeat(2, calc(201 * var(--u)));
    gap: calc(24 * var(--u)); justify-content: center;
  }
  .p-3min-fact {
    width: auto; height: calc(201 * var(--u));
    padding: calc(16 * var(--u)) calc(18 * var(--u));
    border-radius: calc(15 * var(--u));
  }
  .p-3min-fact-no    { margin-bottom: calc(6 * var(--u)); font-size: calc(11 * var(--u)); letter-spacing: calc(2.2 * var(--u)); }
  .p-3min-fact-label { min-height: calc(46 * var(--u)); margin-bottom: calc(4 * var(--u)); font-size: calc(16 * var(--u)); }
  .p-3min-fact-value { gap: calc(4 * var(--u)); }
  .p-3min-fact-num     { font-size: calc(72 * var(--u)); letter-spacing: calc(0.72 * var(--u)); }
  .p-3min-fact-decimal { font-size: calc(48 * var(--u)); }
  .p-3min-fact-unit, .p-3min-fact-prefix { font-size: calc(18 * var(--u)); }
  .p-3min-fact-note    { font-size: calc(12 * var(--u)); }
  .p-3min-fact-value--prefix .p-3min-fact-prefix { margin-right: calc(8 * var(--u)); }
  .p-3min-fact-value--prefix .p-3min-fact-unit   { margin-left: calc(4 * var(--u)); }

  /* FACT03：全幅。左にテキスト（従業員数／252人）、右に人物アイコン */
  .p-3min-fact--emp { grid-column: 1 / -1; height: calc(201 * var(--u)); position: relative; }
  .p-3min-fact--emp .p-3min-fact-value { align-self: flex-start; justify-content: flex-start; }
  .p-3min-fact--emp .p-3min-fact-note  { align-self: flex-start; margin-top: calc(4 * var(--u)); }
  .p-3min-fact-emp-icon {
    display: block; position: absolute;
    right: calc(48 * var(--u)); top: 50%; transform: translateY(-40%);
    width: calc(141 * var(--u)); height: auto; pointer-events: none;
  }

  /* FACT04：全幅。左に見出し＋「10箇所」、右に事業所マップ */
  .p-3min-fact--map { grid-column: 1 / -1; height: calc(268 * var(--u)); }
  .p-3min-fact--map .p-3min-fact-map {
    top: calc(20 * var(--u)); left: auto; right: calc(14 * var(--u)); transform: none;
    width: calc(320 * var(--u)); height: calc(232 * var(--u));
    object-fit: contain; border-radius: calc(6 * var(--u));
  }
  .p-3min-fact--map .p-3min-fact-value--map {
    position: absolute; left: calc(22 * var(--u)); bottom: calc(26 * var(--u)); margin: 0;
    align-self: auto; justify-content: flex-start;
  }
  .p-3min-fact--map .p-3min-fact-value--map .p-3min-fact-num  { font-size: calc(52 * var(--u)); }
  .p-3min-fact--map .p-3min-fact-value--map .p-3min-fact-unit { font-size: calc(30 * var(--u)); }

  /* ── グリッドの段組み削減 ── */
  .p-3min-issues, .p-3min-types, .p-3min-strengths { grid-template-columns: 1fr; }
  .p-3min-types { grid-auto-rows: auto; } /* 縦積みでは高さ統一を解除（各カードは内容なりの高さ） */
  .p-3min-map { flex-direction: column; align-items: center; }
  .p-3min-map-area { width: 100%; max-width: 480px; }
  /* 水の循環は横並びを維持（縦積みにしない）。狭幅では下の ≤768 で箱ごと縮小 */
  /* 年表(timeline)の縮小・縦積みは末尾の専用ブロック（≤960 縮小／≤720 縦積み）で制御 */

  /* ── 見出し・セクション余白の縮小 ── */
  .p-3min-point-title { font-size: 28px; line-height: 1.4; }
  .p-3min-point { padding-top: 56px; padding-bottom: 56px; }
  .p-3min-headline { font-size: 20px; padding: 32px 24px; }
}

/* ── 水の循環：約768px以下で「箱ごと」比例縮小（横並び維持・内容幅で中央寄せ＝ズームアウト） ── */
@media (max-width: 768px) {
  /* POINT 02 上端の白波を薄く。70pxだと上端を白く覆い本文(56px)と重なるため */
  .p-3min-wave-top { height: 20px; }
  .p-3min-flow-box {
    --u: min(1px, calc((100vw - 48px) / 704)); /* 内容幅704pxが収まるよう比例縮小 */
    width: fit-content; max-width: 100%;
    margin-left: auto; margin-right: auto;
    padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
  }
  .p-3min-flow-heading {
    width: auto; max-width: none;
    margin-bottom: calc(28 * var(--u));
    font-size: calc(20 * var(--u)); line-height: 1.5;
    padding: calc(12 * var(--u)) calc(24 * var(--u));
  }
  .p-3min-flow { justify-content: center; gap: calc(56 * var(--u)); }
  .p-3min-flow-item { flex: 0 0 auto; }
  .p-3min-flow-icon { width: calc(88 * var(--u)); height: calc(88 * var(--u)); margin-bottom: calc(10 * var(--u)); } /* 円は%背景なので枠縮小で自動スケール */
  .p-3min-flow-num { font-size: calc(11 * var(--u)); letter-spacing: calc(1.5 * var(--u)); }
  .p-3min-flow-name { font-size: calc(16 * var(--u)); margin-top: calc(2 * var(--u)); }
  .p-3min-flow-desc { font-size: calc(12 * var(--u)); margin-top: calc(2 * var(--u)); }
  .p-3min-flow-item:not(:last-child)::after {
    width: calc(52 * var(--u)); height: calc(9 * var(--u));
    right: calc(-54 * var(--u)); top: calc(32 * var(--u)); /* 矢印を縮小・ステップ間ギャップ中央へ */
  }
}

@media (max-width: 600px) {
  /* FACTカード（数字）は上の @media(max-width:900px) で SP構成(--u比例)を一括制御 */

  /* ── 見出し系をSPサイズに ── */
  .p-3min-hero-title { font-size: 24px; }
  .p-3min-hero-title-min { font-size: 34px; }
  .p-3min-hero-en { font-size: 11px; line-height: 1.44; }
  .p-3min-point-title { font-size: 24px; }
  .p-3min-point-label,
  .p-3min-map-label { font-size: 11px; letter-spacing: 2.86px; }
  .p-3min-cap { font-size: 14px; line-height: 1.875; }
  .p-3min-type-title { font-size: 16px; line-height: 2; }
  .p-3min-headline { font-size: 13px; line-height: 1.5; }

  /* ── 本文フォントをSPサイズに（PCより小さい） ── */
  /* ヒーロー本文(サイズ/幅/余白)は ≤900 の比例拡縮(--u)で制御済み。ここでは他の本文のみ */
  .p-3min-text, .p-3min-type-text { font-size: 13px; line-height: 1.6; } /* ＠区切りを1行に収める */
  .p-3min-callout-text { font-size: 13px; line-height: 1.6; }            /* 政策リード：＠を1行に */
  /* ＠区切りが1行に収まるよう吹き出しの左右余白を詰める（上28/下48のマスコット帯は維持） */
  .p-3min-talk .p-3min-text, .p-3min-type .p-3min-text { padding-left: 16px; padding-right: 16px; }
  .p-3min-text--plain { line-height: 1.875; }
  .p-3min-lead { font-size: 16px; line-height: 1.5; }
  .p-3min-issue-title { font-size: 15px; line-height: 1.84; }
  .p-3min-issue-desc { font-size: 11px; line-height: 1.8; }

  /* ── 水の循環：本来のスマホデザイン（縦並び・アイコン左/テキスト右/縦矢印）。≤768の横並び縮小を上書き ── */
  .p-3min-flow-box {
    width: auto; max-width: none; margin: 0 auto 44px;
    padding: 28px 20px 32px;
  }
  .p-3min-flow-heading { font-size: 16px; line-height: 1.5; padding: 10px 20px; margin-bottom: 24px; }
  .p-3min-flow {
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 44px; width: fit-content; max-width: 100%; margin: 0 auto; /* 列ごと中央寄せ（アイコンのx軸は揃ったまま） */
  }
  .p-3min-flow-item {
    display: grid; grid-template-columns: auto auto; column-gap: 16px;
    align-items: center; text-align: center;
  }
  .p-3min-flow-icon { grid-column: 1; grid-row: 1 / 4; width: 88px; height: 88px; margin-bottom: 0; }
  .p-3min-flow-num  { grid-column: 2; grid-row: 1; font-size: 12px; letter-spacing: 1.6px; }
  .p-3min-flow-name { grid-column: 2; grid-row: 2; font-size: 18px; margin-top: 2px; }
  .p-3min-flow-desc { grid-column: 2; grid-row: 3; font-size: 14px; margin-top: 2px; }
  /* 縦の下向き矢印（arrow.webp を90°回転）。アイコン(88px)の中央(44px)の下・ステップ間に配置 */
  .p-3min-flow-item:not(:last-child)::after {
    left: 28px; right: auto; top: calc(100% + 20px);
    width: 32px; height: 9px;
    transform: rotate(90deg);
    background: url("../../images/3min/arrow.webp") no-repeat center / contain;
  }

  /* ── タイプカード（POINT 06）：SP実寸へ。
     見出し＋本文を322px列として全カード同位置で中央寄せ。
     枠は左右マージン16pxを全幅に適用（上限600px） ── */
  .p-3min-types { margin-inline: -8px; gap: 32px; }
  .p-3min-type-text { font-size: 14px; line-height: 1.5; }
  .p-3min-type .p-3min-text {
    padding: 28px 23px 32px;
    display: grid; grid-template-columns: min(322px, 100%); justify-content: center;
  }
  /* マスコット位置（本文との接触を避けるクリアランス確保も兼ねる） */
  .p-3min-type-icon { right: 4px; bottom: -20px; }

  /* ── 政策連携 callout：PC値のままだとロゴ行が縮まず箱がビューポートからはみ出すため、
        402px未満は --cu で箱ごと比例縮小 ── */
  .p-3min-callout { margin-inline: -8px; }
  .p-3min-callout-box {
    --cu: min(1px, calc(100vw / 410)); /* 410：スクロールバー幅や360px端末でもロゴ行が収まる安全マージン */
    padding: calc(32 * var(--cu)) calc(24 * var(--cu)) calc(28 * var(--cu));
  }
  .p-3min-callout-visual { gap: calc(12 * var(--cu)); margin-bottom: calc(16 * var(--cu)); }
  .p-3min-callout-logo { height: calc(52 * var(--cu)); }
  .p-3min-callout-x { font-size: calc(16 * var(--cu)); }

  /* ── 語り吹き出し（8個）：タイプカードと同じSP実寸へ。
     上44px（語りはタイトルがない分、頭上が深い）。
     下56px＝マスコット帯：アイコン（幅56px・bottom:-20px）は吹き出し底から約51px
     食い込むため、下余白がそれ未満だと右端まで届く最終行（POINT 01末尾の
     「…なんだ！」等）がマスコットに隠れる。文章は必ず帯の上で終わらせる ── */
  .p-3min-talk, .p-3min-talk--center { margin-inline: -8px; }
  .p-3min-talk .p-3min-text { font-size: 14px; line-height: 1.6; padding: 44px 20px 56px; }
  /* マスコットはタイプカードと同一仕様（56px）。長い行との被り回避を優先して56pxに統一 */
  .p-3min-talk-icon { width: 56px; right: 4px; bottom: -20px; }
}

/* タイプカード：402px未満は14pxの最長行(322px)が物理的に入らないため13pxへ */
@media (max-width: 401px) {
  .p-3min-type-text { font-size: 13px; line-height: 1.6; }
  /* 語り：14pxの最長行が402px未満では入らないため13pxへ */
  .p-3min-talk .p-3min-text { font-size: 13px; }
  /* 政策リード（callout）：＠改行の行が375〜401pxで入りきらない端末向けに比例縮小 */
  .p-3min-callout-text { font-size: calc(13 * 100vw / 402); }
}

/* ============================================================
   年表カード（POINT 02）：960px以下で箱ごと比例縮小／720px以下でスマホ縦積み
   ============================================================ */
/* 960→縮小：横並びのまま中身(フォント・余白・写真)を --u で比例縮小（比率/配置を保つ） */
@media (max-width: 960px) {
  .p-3min-timeline-card {
    --u: min(1px, calc(100vw / 960));     /* 960pxで実寸、それ以下は比例縮小 */
    padding: calc(36 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u));
    border-radius: calc(28 * var(--u));
  }
  .p-3min-timeline-heading {
    margin: calc(34 * var(--u)) 0 calc(-10 * var(--u));
    font-size: calc(12 * var(--u)); letter-spacing: calc(2.4 * var(--u));
  }
  .p-3min-timeline-body { gap: calc(44 * var(--u)); }
  .p-3min-timeline-item { gap: calc(16 * var(--u)); padding: calc(14 * var(--u)) 0; } /* 年↔イベント間隔を詰め、長い行も1行に収める */
  .p-3min-timeline-year { font-size: calc(28 * var(--u)); }
  .p-3min-timeline-event { font-size: calc(16 * var(--u)); line-height: 1.4; white-space: nowrap; } /* 縮小範囲は1行固定 */
  .p-3min-timeline-photo { border-radius: calc(12 * var(--u)); }
}
/* ≤720：スマホデザイン＝縦積み（画像 上 → TIMELINE → 年表 下）。HTML改変なし(display:contents+order) */
@media (max-width: 720px) {
  .p-3min-timeline-card {
    --u: 1px;                       /* 縮小を解除（固定px運用に戻す） */
    display: flex; flex-direction: column;
    padding: 28px 24px 32px; border-radius: 18px;
  }
  .p-3min-timeline-body { display: contents; }   /* 子をカード直下へ＝orderで並べ替え */
  .p-3min-timeline-photo { order: 1; width: 100%; max-width: 480px; height: auto; margin: 0 auto 24px; border-radius: 12px; }
  .p-3min-timeline-heading { order: 2; margin: 0 0 8px; font-size: 12px; letter-spacing: 2.4px; }
  .p-3min-timeline { order: 3; }
  .p-3min-timeline-item { gap: 14px; padding: 12px 0; }
  .p-3min-timeline-year { font-size: 28px; }
  .p-3min-timeline-event { font-size: 14px; line-height: 1.5; white-space: normal; }  /* 縦積みは全幅で1行に収まり、狭い端末では折返し可 */
}

/* 年表：402px未満は年号・本文を比例縮小。長い行（1973・2015）は折返す
   （flexの本文列内で折り返すため、2行目は自動的に本文の左端に揃う＝ぶら下げ）。
   年号は28→22相当に少し下げ、本文列の幅を確保する。nowrapで1行維持する方式は
   固定余白96px（セクション24×2＋カード24×2）が縮まないため全幅でカードから溢れ、廃止。
   （このブロックは ≤720 の固定px指定より後に置くこと＝カスケードで勝たせる） */
@media (max-width: 401px) {
  .p-3min-timeline-year { font-size: calc(22 * 100vw / 402); }
  .p-3min-timeline-event { font-size: calc(14 * 100vw / 402); }
}