:root{
  --green-900:#0E4335;--green-800:#145A46;--green-700:#1B7059;--green-600:#23846A;--green-500:#2AA07E;--green-300:#7FD3B7;
  --bg:#ffffff;--text:#0b1320;--border:#e5eef7;--muted:#4d5b6a;--glass-bg:rgba(255,255,255,.92);--shadow:0 10px 30px rgba(5,17,33,.12);
  --ff-text:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',sans-serif
}

/* ========== 基本 ========== */
*{box-sizing:border-box}
html{font-size:16px}
/* 横スクロール対策（副作用が出ない最小限） */
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-text);line-height:1.7;overflow-x:hidden;width:100%}
img{max-width:100%;display:block;height:auto}

/* ========== HERO ========== */
.hero{
  position:relative;min-height:56vh;overflow:hidden;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#F3FBF8 0%,#FFFFFF 60%)
}
.hero .slides{position:absolute;inset:0}
.hero .slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .9s ease
}
.hero .slide.active{opacity:1}

/* 初回デザイン（左下の透明カード）を維持 */
.overlay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;background:var(--glass-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:22px 24px;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);z-index:2;max-width:min(760px,92vw)
}
/* 追補：初回の微修正パッチ（左下固定） */
.hero .overlay{
  position:absolute !important;left:24px !important;right:auto !important;bottom:24px !important;top:auto !important;
  transform:none !important;text-align:left !important;background:rgba(255,255,255,0.6) !important;
  -webkit-backdrop-filter:blur(4px) !important;backdrop-filter:blur(4px) !important;
  padding:12px 16px !important;border-radius:12px !important;border:1px solid var(--border) !important;
  box-shadow:0 10px 20px rgba(0,0,0,.14) !important;max-width:min(820px,92vw) !important
}
@media(max-width:640px){
  .hero .overlay{left:12px !important;right:12px !important;bottom:12px !important;max-width:none !important}
}

.brand{font-weight:700;color:#1B7059;opacity:.95;margin-bottom:6px}
.title{font-weight:900;margin:0;color:#0b1320;font-size:clamp(28px,6vw,48px)}
.subtitle{margin-top:8px;color:#23364f;font-weight:700;font-size:clamp(14px,2.6vw,18px)}

.controls{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;z-index:2
}
.dot{
  width:12px;height:12px;border-radius:50%;background:#ffffff;border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(5,17,33,.12);cursor:pointer
}
.dot.active{
  background:linear-gradient(135deg,var(--green-700),var(--green-500));border-color:#cfe6df
}

/* ========== SECTION / HEADLINE ========== */
.section{max-width:1160px;margin:0 auto;padding:32px 18px}
.headline{
  font-weight:800;font-size:clamp(22px,3.6vw,32px);margin:0 0 18px;position:relative;
  display:flex;align-items:center;gap:12px
}
.num-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;border-radius:999px;
  padding:0 10px;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--green-800),var(--green-500))
}
.underline::after{
  content:"";position:absolute;left:0;bottom:-10px;height:6px;width:0%;border-radius:3px;
  background:linear-gradient(90deg,var(--green-900),var(--green-600));animation:underline-grow 900ms ease-out forwards
}
@keyframes underline-grow{from{width:0%}to{width:100%}}

/* ========== PROFILE ========== */
.section--profile{padding-top:22px}
.profile-slab{display:grid;grid-template-columns:minmax(480px,52%) 1fr;gap:32px;align-items:start}
/* 2カラム崩れ防止（グリッド子は縮め可能に） */
.profile-slab>*{min-width:0}

.profile-photo{
  width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:24px;border:1px solid var(--border);
  box-shadow:0 14px 34px rgba(5,17,33,.16)
}
.profile-photo--emphasis{transform:scale(1.02)}
.name{position:relative;font-weight:900;margin:0;display:inline-block}
.name--xl{font-size:2.4rem}
.name::after{
  content:"";position:absolute;left:0;bottom:-8px;height:6px;width:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--green-900),var(--green-600));
  box-shadow:0 2px 6px rgba(26,112,89,.25)
}
.role{color:#263b56;font-weight:800;margin:12px 0 18px}
.role--xl{font-size:1.3rem}
.keywords{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0}
.keywords--xl .tag{font-size:1.02rem}
.tag{
  padding:12px 16px;border-radius:999px;background:linear-gradient(135deg,#F2FBF7 0%,#E8F6F0 40%,#FFFFFF 100%);
  border:1px solid #b7e1d3;color:#0b1f33;font-weight:800;box-shadow:0 8px 18px rgba(5,17,33,.12)
}
.tag--lg{padding:12px 18px}
.tag:hover{
  background:linear-gradient(135deg,var(--green-300) 0%,#ffffff 100%);border-color:#9bd4c2
}

/* 略歴タイトル（初回デザイン） */
.bio-title{
  display:inline-block;font-weight:900;font-size:1.4rem;color:#fff;
  background:linear-gradient(90deg,var(--green-800),var(--green-500));
  padding:8px 16px;border-radius:12px;margin:32px 0 16px
}
/* 略歴リスト（初回デザイン） */
.bio-list.vertical{list-style:none;padding:8px 0;margin:0;display:flex;flex-direction:column;gap:6px}
.bio-list--plain li{
  border:1px dashed #f0f6fb;border-radius:10px;padding:6px 8px;display:flex;align-items:center;gap:10px;
  background:#fff;font-size:.95rem
}
.year{
  display:inline-block;min-width:56px;padding:6px 8px;border-radius:10px;
  background:linear-gradient(135deg,#EEF6FF,#FFFFFF);color:#0b1f33;font-weight:900;text-align:center;font-size:.9rem
}

/* ========== QA（左：写真／右：テキスト） ========== */
.qa-row{
  display:grid;grid-template-columns:minmax(420px,46%) 1fr;gap:28px;align-items:start;margin:26px 0
}
/* スマホ崩れ対策：子要素は縮め可能に、長文で押し出さない */
.qa-row>*{min-width:0}
.qa-photos,.qa{min-width:0}

/* 本文中の写真（初回デザインを維持） */
.qa-photo img{
  width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(5,17,33,.14)
}
.qa dt{
  position:relative;margin:0 0 10px;padding-left:0;font-weight:900;color:#0b1f33;display:flex;align-items:center
}
.qa dd{margin:0 0 12px;padding-left:38px;color:#2a3d56}
.qa-icon{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-right:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--green-800),var(--green-500));box-shadow:0 6px 14px rgba(26,112,89,.25)
}

/* セクション末尾の大きめ写真（初回の 21:9 を維持） */
:where(.section) :where(.qa-photo--section){
  display:block !important;width:100% !important;max-width:640px !important;margin:16px auto !important
}
:where(.section) :where(.qa-photo--section) img{
  width:100%;height:auto;aspect-ratio:21/9 !important;object-fit:cover;border-radius:20px;border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(5,17,33,.14)
}
@media(max-width:640px){
  :where(.section) :where(.qa-photo--section){max-width:100% !important}
}

/* ========== Appear アニメ ========== */
.appear{opacity:0;transform:translateY(18px)}
.appear.in{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s ease}
.stagger>*{opacity:0;transform:translateY(18px)}
.stagger.in>*{opacity:1;transform:translateY(0)}
.stagger.in>*{transition:opacity .6s ease,transform .6s ease}

/* ========== レスポンシブ ========== */
@media(max-width:640px){
  .hero{min-height:48vh}
  /* モバイルは1カラムへ（優先度を上げて確実に） */
  .profile-slab,.qa-row{grid-template-columns:1fr !important}
  /* 長文での押し出し防止（再念押し） */
  .profile-slab>*, .qa-row>*, .qa-photos, .qa{min-width:0}
  .name--xl{font-size:2.0rem}
  .role--xl{font-size:1.15rem}
  .tag{font-size:.98rem}
  .bio-title{font-size:1.2rem;padding:6px 12px}
  .bio-list--plain li{font-size:.9rem}
  /* モバイルはインデント控えめで詰まり防止 */
  .qa dd{padding-left:20px}
}

/* ========== 動きの抑制設定 ========== */
@media (prefers-reduced-motion: reduce){
  .hero .slide{transition:none}
}

/* ========== 既存パッチ群（デザインを崩さない範囲で維持） ========== */
/* キーワードのマーカー消し */
:where(ul.keywords){
  list-style:none !important;list-style-type:none !important;padding-inline-start:0 !important;margin:0 !important;
  display:flex !important;flex-wrap:wrap !important;gap:12px !important
}
:where(ul.keywords>li){
  list-style:none !important;list-style-type:none !important;padding:0 !important;margin:0 !important;display:inline-flex !important
}
:where(ul.keywords>li)::marker{content:'' !important}
:where(ul.keywords>li)::before{content:none !important}

/* テキストのみ行の体裁 */
.section .qa-row.qa-row--textOnly{
  display:block !important;width:100% !important;max-width:none !important;margin:26px 18px !important;grid-template-columns:none !important
}
.section .qa-row.qa-row--textOnly .qa{
  max-width:none !important;padding-left:0 !important;margin:0 !important
}

/* QA見出しのスタイル強化（初回の見え方を維持） */
.section .qa dt{
  display:flex !important;align-items:flex-start !important;gap:10px !important;font-size:1.12rem !important;line-height:1.5 !important;
  font-weight:800 !important
}
.section .qa dt .qa-icon{
  flex:0 0 22px !important;width:22px !important;height:22px !important;min-width:22px !important;min-height:22px !important;
  border-radius:50% !important;background:linear-gradient(135deg,var(--green-800),var(--green-500)) !important;
  box-shadow:0 6px 14px rgba(26,112,89,.25) !important;font-size:0 !important;line-height:0 !important
}

/* Anti-regression guards（PC/タブレットは2カラム） */
:where(.section) :where(.qa-row){
  display:grid !important;
  grid-template-columns:minmax(420px,46%) 1fr !important;
  gap:28px !important;
  align-items:start !important
}

/* 見出しの下・丸グラデ線／番号バッジ（初回版の見栄えを維持） */
:root{
  --kw-pill-bg:#F4FBF8;--kw-pill-bg-hover:#E8F6F1;--kw-pill-border:#CFE6DF;--kw-pill-border-hover:#A8D6C9;
  --kw-pill-glow:rgba(33,131,107,.16);--kw-pill-glow-hover:rgba(33,131,107,.28);
  --badge-size:34px;--headline-offset:calc(var(--badge-size) + 14px);
  --headline-grad:linear-gradient(90deg,#87D7C2 0%, #4FB39A 50%, #21836B 100%);
  --nbg:#2AA07E;--nbg-dark:#1B7059;--badge-radius:6px;--badge-font:0.95rem;
}
:where(ul.keywords)>li> :where(.tag){
  position:relative !important;width:var(--kw-pill-w,220px) !important;height:var(--kw-pill-h,56px) !important;
  padding:0 18px !important;display:flex !important;align-items:center !important;justify-content:center !important;
  text-align:center !important;color:#0b1f33 !important;font-weight:900 !important;line-height:1.4 !important;font-size:0.98rem !important;
  background:radial-gradient(120% 120% at 30% 20%, #FFF 0%, var(--kw-pill-bg) 100%) !important;
  border-radius:999px !important;border:1px solid var(--kw-pill-border) !important;
  box-shadow:0 10px 26px var(--kw-pill-glow) !important;transition:background .25s ease, border-color .25s ease, box-shadow .25s ease
}
:where(ul.keywords)>li> :where(.tag) .kw-bg{display:none !important}
body .section .headline{position:relative !important}
body .section .headline::before{
  content:"";position:absolute;left:var(--headline-offset);right:0;bottom:-8px;height:10px;border-radius:999px;z-index:0 !important;
  background:var(--headline-grad) !important;transform:scaleX(0);transform-origin:left center;transition:transform .7s ease-out
}
body .section .appear.in .headline::before,
body .section .headline.appear.in::before{transform:scaleX(1) !important}
body .section .headline > *{position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){
  body .section .headline::before{transition:none !important;transform:none !important}
}
body .section .headline .num-badge{
  all:unset;position:relative !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:var(--badge-size) !important;height:var(--badge-size) !important;min-width:var(--badge-size) !important;
  background:var(--nbg) !important;color:#fff !important;border-radius:var(--badge-radius) !important;
  font-weight:900 !important;font-size:var(--badge-font) !important;letter-spacing:.02em;line-height:1;margin-right:10px !important
}
body .section .headline .num-badge::after{
  content:"";position:absolute;width:100%;height:100%;right:-6px;bottom:-6px;border-radius:var(--badge-radius);
  border:2px solid var(--nbg-dark) !important;background:transparent !important
}
body .section .qa .qa-q-text{
  text-decoration-line:underline !important;text-decoration-style:dotted !important;text-decoration-thickness:2px !important;
  text-underline-offset:4px !important;text-decoration-color:var(--qa-underline-color, #2A8C74) !important
}

/* Intro（グリーンの丸タイトル）初回風味を維持 */
.section .intro--bracket{
  position:relative;display:inline-block;color:var(--green-900);font-weight:900;font-size:1.15rem;padding-left:10px;margin:18px 0 22px;
  text-shadow:0 0 2px #fff
}
.section .intro--bracket::before{
  content:"";position:absolute;background:rgba(170,236,200,.60);width:46px;height:46px;border-radius:50%;top:50%;left:-14px;
  transform:translateY(-50%);z-index:-1
}
.section .intro--title{position:relative;z-index:2;color:var(--green-900);font-weight:900;font-size:1.15rem}
.section .intro--circle-title{
  position:relative;display:inline-block;color:var(--green-900);font-weight:900;font-size:1.15rem;padding-left:10px;margin:18px 0 22px;
  text-shadow:0 0 2px #fff
}
.section .intro--circle-title::before{
  content:"";position:absolute;background:rgba(170,236,200,0.60);
  width:46px;height:46px;border-radius:50%;top:50%;left:-14px;transform:translateY(-50%);z-index:-1
}
.section .intro--circle-title{margin-left:18px;font-size:clamp(1.18rem, 2.2vw, 1.38rem);line-height:1.35}
.section .intro--circle-title::before{left:-6px;width:48px;height:48px}
@media (max-width:640px){
  .section .intro--circle-title{margin-left:12px;font-size:1.22rem}
  .section .intro--circle-title::before{left:-8px;width:44px;height:44px}
}

/* =========================================
   キーワード専用・追加パッチ（最小差分）
   -----------------------------------------
   ・タブ → 「● Keywords」
   ・背景 → 白寄りミント
   ・アイコン → ✔
   ・アイコンと文字の間を詰める
   ・横一列3つは維持
   ========================================= */

/* ボックス（背景を白寄りミントに・影そのまま・下げ幅も維持） */
ul.keywords {
  position: relative;
  margin-top: 64px !important;                /* 役職名としっかり離す */
  padding: 10px 22px 10px 22px !important;    /* 上下の余白をさらに薄めに */
  border: 2px solid #1B7059;
  border-radius: 10px;
  background: #F7FCFA !important;             /* ← 白寄りミント（新要望） */
  box-shadow: 0 10px 26px rgba(10,40,30,0.15);
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  column-gap: 38px !important;                /* キーワード間を広めに */
  row-gap: 0 !important;
  align-items: center;
}

/* タブ（● Keywords） */
ul.keywords::before {
  content: "●  Keywords";                    /* ← タブを新デザインに変更 */
  position: absolute;
  left: 14px;
  bottom: 100%;
  transform: translateY(8px);                 /* 役職と被らないよう強めに下げる */
  background: #1B7059;
  color: #fff;
  padding: 6px 12px;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 2px 6px rgba(10,40,30,0.18);
  white-space: nowrap;
}

/* 各キーワード（左のチェックと文字の距離を詰める） */
ul.keywords li,
ul.keywords li .tag {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  padding-left: 24px !important;              /* ← 各キーワード左余白を狭く */
  font-weight: 800;
  color: #0E4335 !important;
  line-height: 1.45;
  white-space: nowrap;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ✔ のアイコン（左寄せ強制） */
ul.keywords li::before {
  content: "✔" !important;                   /* ← ここを「✔」へ変更！ */
  position: absolute !important;
  left: 6px !important;                       /* ← アイコンを近づける */
  top: 50% !important;
  transform: translateY(-50%);
  color: #1B7059;
  font-size: 1.05rem;
  font-weight: 900;
  pointer-events: none;
}

/* タブレット幅：2列 */
@media (max-width: 960px){
  ul.keywords {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    column-gap: 28px !important;
    row-gap: 10px !important;
  }
}

/* スマホ幅：1列 */
@media (max-width: 560px){
  ul.keywords {
    grid-template-columns: 1fr !important;
  }
  ul.keywords li {
    white-space: normal !important;
  }
}

/* ======================================================
   キーワード専用 追いパッチ：✔ と文字をほぼくっつける
   ------------------------------------------------------
   ポイント：
   - li をフレックス化して、擬似要素を通常フローで並べる
   - アイコン余白は margin-right で 2px（お好みで 0〜4px）
   - 既存指定より優先されるように !important を併用
   ====================================================== */

/* 各キーワードをアイコン＋文字の横並びに（超タイト） */
ul.keywords li,
ul.keywords li .tag {
  display: inline-flex !important;
  align-items: center !important;
  /* 左のパディングは最小限に（擬似要素を絶対配置しないため 0 に） */
  padding-left: 0 !important;
  gap: 0 !important; /* 念のためギャップ無効 */
}

/* ✔ アイコンを通常フローで前置し、余白を 2px に固定 */
ul.keywords li::before {
  content: "✔" !important;
  position: static !important;       /* ← absolute をやめる */
  transform: none !important;
  margin-right: 2px !important;      /* ← ここを 0〜4px で微調整可 */
  color: #1B7059 !important;
  font-size: 1.02rem !important;     /* 少しだけ控えめ。必要なら 0.98rem〜1.08rem */
  line-height: 1 !important;
  font-weight: 900 !important;
  pointer-events: none !important;
}

/* .tag を使っているマークアップにも同じ見え方を強制 */
ul.keywords li .tag::before {
  content: none !important;          /* .tag 側の擬似は使わない（衝突回避） */
}

/* PC で 3 カラムの均等配置は維持（念のため） */
ul.keywords {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* スマホ/タブレットも既存の列落ち設定はそのまま（触らない） */

/* --- 写真キャプション（汎用） --- */
.qa-photo {
  display: block;
}
.qa-photo figcaption {
  margin-top: 8px;
  color: var(--muted, #4d5b6a);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;      /* 必要なら center に */
}

/* モバイルでの写真下余白をやや広めに */
@media (max-width: 640px) {
  .qa-photo figcaption { margin-top: 10px; }
}

/* ============================
   略歴の「年号」と「役職名」の間隔を広げる
   ============================ */

/* 行全体のレイアウト調整（gap を広げる） */
.bio-list--plain li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;   /* ← ここを 16px → 24px にして間隔を広げる */
  line-height: 1.7 !important;
}

/* 年号部分（現状維持：ここは触らない） */
.bio-list--plain .year {
  width: 115px !important;
  flex-shrink: 0 !important;
  text-align: right !important;
  padding: 6px 10px !important;
  margin: 0 !important;
}

/* =========================
   横長写真の“縦幅を少し深く”する最小差分
   ※ 既存は 16/9（通常）／21/9（セクション末尾の大きめ）
   ========================= */

/* 1) 通常の横長写真（.qa-photo img）をほんの少し縦長に：16/10 */
.qa-photo img{
  aspect-ratio: 16/10 !important; /* つぶれ感を軽減。歪みなし（object-fit: cover のまま） */
}

/* 2) セクション末尾の大きめ写真（.qa-photo--section）を 21/9 → 16/9 に緩和 */
.section .qa-photo--section img{
  aspect-ratio: 16/9 !important; /* 縦を確保して“ぺったり”感を解消 */
}

/* =========================================================
   HP 2カラムに合わせた“縦感”の最適化（災害対応の写真向け）
   - デスクトップ：3/2（横に伸びすぎず、縦情報を確保）
   - タブレット   ：4/3（やや縦深め）
   - スマホ        ：5/4（さらに縦深めで見やすく）
   - 重要被写体（人物・ドローン）をやや上寄せに表示
   ========================================================= */
.qa-photo.qa-photo--hpPortrait img,
.section .qa-photo--section.qa-photo--hpPortrait img{
  aspect-ratio: 3/2 !important;     /* PC基準の比率：縦をしっかり確保 */
  width: 100%;
  height: auto;                      /* 歪み防止 */
  object-fit: cover;                 /* 自然なトリミング（引き伸ばし無し） */
  object-position: 50% 45%;          /* 少し上に寄せ、人物＆ドローンを活かす */
  /* 画像が高くなり過ぎるのを防ぐ安全マージン（任意で調整OK） */
  max-height: 640px;
}

/* タブレット：もう少し縦を深く（4:3） */
@media (max-width: 1024px){
  .qa-photo.qa-photo--hpPortrait img,
  .section .qa-photo--section.qa-photo--hpPortrait img{
    aspect-ratio: 4/3 !important;
    max-height: 560px;
  }
}

/* スマホ：さらに縦を深く（5:4）— テキスト量とのバランスを取りやすい */
@media (max-width: 640px){
  .qa-photo.qa-photo--hpPortrait img,
  .section .qa-photo--section.qa-photo--hpPortrait img{
    aspect-ratio: 5/4 !important;
    max-height: 520px;
    object-position: 50% 42%; /* 顔が切れないように上寄せを少し強める */
  }
}

/* =========================================
   写真キャプション（figcaption）を中央寄せ
   - 既存では left 指定があるため、末尾に上書き
   ========================================= */
.qa-photo figcaption{
  text-align: center !important;
}

/* =========================================
   2枚横並びギャラリー（このページ専用の最小ユーティリティ）
   ========================================= */
.qa-photos.qa-photos--two{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;              /* 画像間の余白：12〜24pxで好み調整 */
  align-items: start !important;
}

/* スマホは自動で1列に */
@media (max-width: 640px){
  .qa-photos.qa-photos--two{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* 念のため：各 figure のはみ出し防止 */
.qa-photos.qa-photos--two .qa-photo{
  min-width: 0 !important;
}

/* 本文中の参照番号（上付き） */
sup.footnote-ref {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  color: #1B7059;
  font-weight: 800;
  text-decoration: none;
}
sup.footnote-ref a{
  color: inherit;
  text-decoration: none;
  outline: none;
}
sup.footnote-ref a:focus{
  box-shadow: 0 0 0 3px rgba(33,131,107,.25);
  border-radius: 4px;
}

/* ローカル脚注（かわいい下線付き） */
.footnotes-local{
  margin: 18px 0 0;
  padding: 16px 14px 8px;
  background: #ffffff;
  border: 1px dashed #cfe6df;
  border-radius: 12px;
  color: #2a3d56;
  font-size: 0.95rem;
}
.footnotes-local .fn-title{
  position: relative;
  display: inline-block;
  font-weight: 900;
  color: #0E4335;
  padding: 2px 4px;
  margin: 0 0 8px;
}
.footnotes-local .fn-title::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg,#BFEBDD 0%, #9AD9C3 50%, #CDEFE4 100%);
  box-shadow: 0 2px 6px rgba(33,131,107,.15);
}
.footnotes-local ol{ margin: 14px 0 0; padding-left: 1.3em; }
.footnotes-local li{ margin: 0 0 8px; line-height: 1.65; }
.footnotes-local li .fn-back{
  margin-left: 8px; font-size: 0.9em; color: #23846A; text-decoration: none;
}
.footnotes-local li .fn-back:hover{ text-decoration: underline dotted; }
.footnotes-local a{ color: #1B7059; word-break: break-all; }
@media print{
  .footnotes-local{ border: none; padding-top: 10px; }
  .footnotes-local .fn-title::after{
    height: 0; background: none; box-shadow: none; border-bottom: 1px solid #95cdbb; bottom: -4px;
  }
}

/* ================================
   ローカル脚注（横幅いっぱい＆やさしい装飾）
   ================================ */
.footnotes-local{
  display:block;
  width:100%;
  margin: 22px 0 0;
  padding: 20px 18px 12px;
  background:#fff;
  border:1px dashed #cfe6df;
  border-radius:14px;
  box-shadow: 0 8px 18px rgba(5,17,33,.06);
  color:#2a3d56;
  font-size:0.95rem;
}

/* .qa-row 内に置いた場合でも2カラムをまたいで全幅に（方式②用） */
.qa-row .footnotes-local--full{
  grid-column: 1 / -1 !important;
}

/* タイトル（かわいい帯下線＋アイコン） */
.footnotes-local .fn-title{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:900;
  color:#0E4335;
  padding: 2px 4px;
  margin:0 0 10px;
}
.footnotes-local .fn-title::before{
  content:"";
  width:20px; height:20px;
  background:#1B7059;               /* アイコン色（テーマグリーン） */
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000">\
<path d="M6 2h9a3 3 0 0 1 3 3v17l-7.5-3.75L3 22V5a3 3 0 0 1 3-3z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000">\
<path d="M6 2h9a3 3 0 0 1 3 3v17l-7.5-3.75L3 22V5a3 3 0 0 1 3-3z"/></svg>') no-repeat center / contain;
}
.footnotes-local .fn-title::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:8px; border-radius:999px;
  background: linear-gradient(90deg,#BFEBDD 0%, #9AD9C3 50%, #CDEFE4 100%);
  box-shadow:0 2px 6px rgba(33,131,107,.15);
}

/* リスト */
.footnotes-local ol{ margin: 16px 0 0; padding-left: 1.35em; }
.footnotes-local li{ margin: 0 0 10px; line-height:1.7; }

/* 本文へ戻るの「↩」を丸タブっぽく */
.footnotes-local .fn-back{
  display:inline-flex; align-items:center; justify-content:center;
  width: 22px; height: 22px; margin-left:10px;
  font-size:0.9em; color:#23846A; text-decoration:none;
  border:1px solid #cfe6df; border-radius:999px; background:#F6FBF9;
}
.footnotes-local .fn-back:hover{ background:#ECF9F3; }

/* 文章内のURLにアイコンを付ける（外部リンクっぽく） */
.footnotes-local a[href^="http"]{
  color:#1B7059; text-underline-offset:2px;
  position:relative; padding-left:18px;
  word-break: break-all;
}
.footnotes-local a[href^="http"]::before{
  content:"";
  position:absolute; left:0; top:0.22em;
  width:14px; height:14px; background:#2AA07E;
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000">\
<path d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000">\
<path d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H7v10h10v-4h2v6H5V5z"/></svg>') no-repeat center/contain;
}

/* 本文側の参照番号（上付き） */
sup.footnote-ref{
  font-size:0.72em; vertical-align:super; line-height:0;
  color:#1B7059; font-weight:800; text-decoration:none;
}
sup.footnote-ref a{ color:inherit; text-decoration:none; outline:none; }
sup.footnote-ref a:focus{ box-shadow:0 0 0 3px rgba(33,131,107,.25); border-radius:4px; }

/* 印刷時：帯を細線に */
@media print{
  .footnotes-local{ border: none; box-shadow:none; }
  .footnotes-local .fn-title::after{
    height:0; background:none; box-shadow:none; border-bottom:1px solid #95cdbb; bottom:-4px;
  }
}

/* =========================================================
   Footnotes: セクション幅に合わせる（フルブリード解除）
   ========================================================= */

/* すべての脚注を本文コンテナ幅に揃える */
.footnotes-local{
  /* 文字は小さめは維持 */
  font-size: 0.88rem;
  line-height: 1.65;

  /* フルブリード（ビューポート全幅）を解除して通常幅へ */
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;

  /* セクション内の見た目に合わせた余白と丸み（既存と整合） */
  border-radius: 12px; /* お好みで 10〜14px */
  padding-left: 18px;
  padding-right: 18px;
}

/* .qa-row（2カラムレイアウト）内に置いた脚注は、
   カラムをまたいで本文いっぱいに広げる */
.qa-row .footnotes-local{
  grid-column: 1 / -1 !important;
  justify-self: stretch;
}

/* もし、過去に .footnotes-local--bleed を付けていた場合の保険：
   付いていても本文幅に揃うように同じ解除処理を適用 */
.footnotes-local--bleed{
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  border-radius: 12px;
}

/* 印刷時の調整は現状維持（必要ならここで再調整可能） */
@media print{
  .footnotes-local{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================
   脚注の控えめスタイル（小さめ文字・枠なし・影なし）
   ============================================ */
.footnotes-local{
  /* 文字をさらに小さく：0.88rem → 0.84rem（必要なら 0.82rem まで可） */
  font-size: 0.84rem;
  line-height: 1.6;

  /* 目立たせない：枠線・影・背景の主張を弱める */
  border: none !important;           /* 既存の dashed 枠を打ち消し */
  box-shadow: none !important;       /* 影を消す */
  background: transparent !important;/* 背景色を透過（親の白に溶け込む） */

  /* 角丸もゼロにして“本文の一部”として馴染ませる */
  border-radius: 0 !important;

  /* 周囲との距離感はそのまま、内側は少し詰める */
  padding: 10px 0 6px !important;    /* 左右パディングを0にして段落風に */
}

/* タイトルの帯やアイコンも存在感を控えめに */
.footnotes-local .fn-title{
  font-size: 0.86rem;
  color: #2a3d56;                    /* 濃すぎない文字色へ */
  padding: 0;                        /* パディング除去 */
  margin: 0 0 6px;
}

/* タイトル下の太いグラデ下線を消す */
.footnotes-local .fn-title::after{
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* タイトル左のアイコンも非表示（よりフラットに） */
.footnotes-local .fn-title::before{
  content: none !important;
}

/* リスト本文の余白と文字サイズを揃える（やや詰め） */
.footnotes-local ol{
  margin: 6px 0 0;
  padding-left: 1.2em;
}
.footnotes-local li{
  margin: 0 0 6px;
  line-height: 1.6;
}

/* 本文への戻る「↩」の丸タブ風ボタンを薄く・小さく */
.footnotes-local .fn-back{
  width: 18px;
  height: 18px;
  margin-left: 6px;
  font-size: 0.8em;                 /* 小ぶりに */
  color: #5b7c72;                    /* コントラストを落とす */
  border: 1px solid #dbe8e3;
  background: #f7faf9;
}
.footnotes-local .fn-back:hover{
  background: #f1f6f4;
}

/* 本文側の上付き参照番号（^1 など）も控えめトーンに */
sup.footnote-ref{
  color: #5b7c72 !important;
  font-weight: 700 !important;
}

/* =========================================================
   脚注：アイコンを確実に表示＋「脚注」文字の直下だけ下線
   ・ボックス下のライン（::after）は無効化
   ========================================================= */

/* 1) ボックス下に出てしまう全幅の下線を確実に消す */
.footnotes-local::after{
  content: none !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* 2) タイトル「脚注」：テキストのみに下線（帯ではなく“文字下線”） */
.footnotes-local .fn-title{
  /* テキストレベルの下線を明示 */
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  text-decoration-color: #bfe0d7 !important; /* 薄い緑。濃くするなら #9bd4c2 */

  /* 見た目の基礎（控えめトーンは維持） */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  color: #0E4335;
  font-size: 0.86rem;
  padding: 0;
  margin: 0 0 8px;
}

/* 3) タイトル左のブックマーク風アイコンを“確実に”復活 */
.footnotes-local .fn-title::before{
  content: "" !important;             /* ← 以前の content:none を打ち消す */
  display: inline-block !important;    /* inline-flex 中でも確実に表示 */
  width: 18px !important;
  height: 18px !important;
  background: #1B7059 !important;      /* 落ち着いた深緑。調整可 */
  vertical-align: middle;

  /* SVGマスクでアイコン（ブックマーク形）を描画 */
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M6 2h9a3 3 0 0 1 3 3v17l-7.5-3.75L3 22V5a3 3 0 0 1 3-3z"/></svg>') no-repeat center/contain !important;
  mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M6 2h9a3 3 0 0 1 3 3v17l-7.5-3.75L3 22V5a3 3 0 0 1 3-3z"/></svg>') no-repeat center/contain !important;
}

/* 4) 念のため：タイトルの“帯下線”を使っていた旧指定があれば無効化 */
.footnotes-local .fn-title::after{
  content: none !important;
  height: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* 5) 本文リスト側に下線が出ないよう、li への下線演出を明示的に無効化 */
.footnotes-local li{
  border: 0 !important;
  background-image: none !important;  /* 万一の線演出を排除 */
}


/* === Global Yellow Theme Patch (color-only; layout untouched) === */
:root {
  /* Yellow palette */
  --yellow-900: #7A5B00;  /* deep amber/brownish for text accents */
  --yellow-800: #8C6D00;
  --yellow-700: #A88200;  /* strong accent */
  --yellow-600: #C89A00;  /* underline/accent */
  --yellow-500: #F2C200;  /* primary accent (brand) */
  --yellow-300: #FFE68A;  /* light tint */

  /* Map existing green tokens to yellow (color only) */
  --green-900: var(--yellow-900);
  --green-800: var(--yellow-800);
  --green-700: var(--yellow-700);
  --green-600: var(--yellow-600);
  --green-500: var(--yellow-500);
  --green-300: var(--yellow-300);

  /* Component accents */
  --headline-grad: linear-gradient(90deg, #FFF2B3 0%, #F5D24D 50%, #F2C200 100%);
  --nbg: var(--yellow-500);
  --nbg-dark: var(--yellow-900);
  --qa-underline-color: var(--yellow-600);
}

/* Brand & hero tints */
body .brand { color: var(--yellow-900) !important; }
.hero { background: linear-gradient(180deg, #FFFBE6 0%, #FFFFFF 60%) !important; }

/* Dots / icons / badges / underlines */
.dot.active {
  background: linear-gradient(135deg, var(--yellow-700), var(--yellow-500)) !important;
  border-color: #fff4c6 !important;
}
.qa .qa-icon, .section .qa dt .qa-icon {
  background: linear-gradient(135deg, var(--yellow-800), var(--yellow-500)) !important;
  box-shadow: 0 6px 14px rgba(200, 154, 0, .25) !important;
}
body .section .headline .num-badge { background: var(--nbg) !important; color:#fff !important; }
body .section .headline .num-badge::after { border-color: var(--nbg-dark) !important; }
body .section .qa .qa-q-text { text-decoration-color: var(--qa-underline-color) !important; }

/* Footnotes small accents */
.footnotes-local .fn-title { color: var(--yellow-900) !important; }
.footnotes-local a[href^="http"]::before { background: var(--yellow-500) !important; }

/* Keywords box: switch to yellow */
ul.keywords { border-color: var(--yellow-500) !important; background: #FFFBE8 !important; }
ul.keywords::before { background: var(--yellow-900) !important; color:#fff !important; }
ul.keywords > li::before { color: var(--yellow-500) !important; }

/* ================================
   SoftBank Hawks Color Patch
   (color-only; no layout changes)
   ================================ */

/* 1) パレット定義 ＆ 既存トークンの黄系マップ */
:root{
  /* Hawks palette */
  --hawks-yellow: #FFDE00;     /* ホークスイエロー（ビビッド） */
  --hawks-yellow-300: #FFF3A6; /* 淡い黄（背景/ハイライト） */
  --hawks-black:  #000000;     /* ブラック（ロゴ基調） */
  --hawks-ink:    #1A1A1A;     /* 文字用の濃い黒 */
  --hawks-amber:  #FFC700;     /* 濃い黄（アクセント予備） */

  /* 既存の緑トークンを黄系にマッピング（色のみ） */
  --green-900: var(--hawks-ink);
  --green-800: #232323;
  --green-700: #2e2e2e;
  --green-600: var(--hawks-amber);
  --green-500: var(--hawks-yellow);
  --green-300: var(--hawks-yellow-300);

  /* コンポーネント用のアクセント（見出し帯/バッジ/下線） */
  --headline-grad: linear-gradient(90deg, #FFF3C4 0%, #FFE166 45%, var(--hawks-yellow) 100%);
  --nbg: var(--hawks-yellow);        /* 見出しの番号バッジ背景 */
  --nbg-dark: var(--hawks-ink);      /* バッジ外枠の罫線色 */
  --qa-underline-color: #E5B800;     /* Qテキストの点線下線 */
}

/* 2) ヒーロー/ブランドの色味だけ黄×白トーンへ */
body .brand{ color: var(--hawks-ink) !important; }  /* 以前の緑文字を黒系へ */
.hero{ background: linear-gradient(180deg, #FFFBEF 0%, #FFFFFF 60%) !important; }

/* 3) スライドドット/QAアイコン/バッジ/下線を黄系へ */
.dot.active{
  background: linear-gradient(135deg, #FFC700, var(--hawks-yellow)) !important;
  border-color: #FFF3C4 !important;
}
.qa .qa-icon, .section .qa dt .qa-icon{
  background: linear-gradient(135deg, #3a3a3a, var(--hawks-yellow)) !important; /* 黒→黄グラデ */
  box-shadow: 0 6px 14px rgba(0,0,0,.25) !important;
}
body .section .headline .num-badge{
  background: var(--nbg) !important; color:#fff !important;
}
body .section .headline .num-badge::after{
  border-color: var(--nbg-dark) !important;
}
body .section .qa .qa-q-text{
  text-decoration-color: var(--qa-underline-color) !important;
}

/* 4) キーワード枠：枠/タブ/✔/文字をホークス配色に。
      ※特に「キーワード内の文字色」が緑のまま → 黒で確実に上書き */
ul.keywords{
  border-color: var(--hawks-yellow) !important;
  background: #FFFBEF !important;                 /* ごく淡い黄の背景 */
  box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
}
ul.keywords::before{
  background: var(--hawks-ink) !important; color:#fff !important; /* 黒地に白 */
}
ul.keywords > li,
ul.keywords > li .tag{
  color: var(--hawks-ink) !important;             /* ★ 文字色を黒系で固定 */
  background: transparent !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
ul.keywords > li::before{
  content: "✔" !important;
  color: var(--hawks-yellow) !important;          /* チェックは黄 */
  margin-right: 6px !important; font-weight: 900 !important;
  position: static !important; transform: none !important; line-height: 1 !important;
}

/* 5) 脚注（ラベル/リンク/戻る矢印/上付き番号）の緑を排除し黄×黒へ */
.footnotes-local .fn-title{
  color: var(--hawks-ink) !important;             /* タイトル文字は黒 */
  text-decoration-color: var(--hawks-yellow) !important; /* 文字下線を黄 */
}
.footnotes-local .fn-title::before{
  background: var(--hawks-ink) !important;        /* 左アイコンを黒に */
}
/* 本文中の脚注参照（上付き/リンク色） */
sup.footnote-ref{ color: var(--hawks-ink) !important; } /* 緑→黒 */
sup.footnote-ref a{ color: inherit !important; }
/* リンク前アイコン（→ 外部リンク小アイコン）を黄に */
.footnotes-local a[href^="http"]::before{
  background: var(--hawks-yellow) !important;
}
/* 戻るボタン（↩）の枠/背景/色 */
.footnotes-local .fn-back{
  border: 1px solid #FFE166 !important;
  background: #FFF9D6 !important;
  color: var(--hawks-ink) !important;
}

/* 6) 補助：イントロ丸背景や “緑” を想定した微装飾の色だけ差し替え */
.section .intro--circle-title{
  color: var(--hawks-ink) !important; text-shadow: 0 0 2px #fff !important;
}
.section .intro--circle-title::before{
  background: rgba(255, 222, 0, .38) !important;  /* 半透明の黄円 */
}
.section .intro--bracket{ color: var(--hawks-ink) !important; }
.section .intro--bracket::before{
  background: rgba(255, 222, 0, .38) !important;
}

/* === Global Soft Yellow Theme Patch (color-only; layout untouched) === */
:root{
  /* ソフト黄（黄土色を避け、くすまない黄） */
  --y-500:#FFD600;        /* メイン黄 */
  --y-600:#E6C200;        /* 下線/アクセント */
  --y-300:#FFF3A6;        /* 淡黄 */

  /* 既存の --green-* を黄系にマップ（色だけ） */
  --green-500:var(--y-500); --green-600:var(--y-600); --green-300:var(--y-300);
  --green-700:#8C7400; --green-800:#6A5A00; --green-900:#5A4A00;

  /* コンポーネントのアクセント */
  --headline-grad: linear-gradient(90deg,#FFF7C2 0%, #FFE35C 50%, var(--y-500) 100%);
  --nbg:var(--y-500);
  --nbg-dark:#1A1A1A;
  --qa-underline-color:var(--y-600);
}
.hero{ background: linear-gradient(180deg,#FFFBEF 0%,#FFFFFF 60%) !important; }
.dot.active{ background: linear-gradient(135deg,#8C7400,var(--y-500)) !important; border-color:#FFF2C8 !important; }
.qa .qa-icon,.section .qa dt .qa-icon{ background: linear-gradient(135deg,#2b2b2b,var(--y-500)) !important; }
body .section .headline .num-badge{ background:var(--nbg) !important; color:#000 !important; }
body .section .headline .num-badge::after{ border-color:var(--nbg-dark) !important; }
body .section .qa .qa-q-text{ text-decoration-color:var(--qa-underline-color) !important; }

/* キーワード：内側テキストも黒で固定（✔は黄） */
ul.keywords{ border-color:var(--y-500) !important; background:#FFFBEF !important; }
ul.keywords::before{ background:#1A1A1A !important; color:#fff !important; }
ul.keywords>li,ul.keywords>li .tag{ color:#1A1A1A !important; background:transparent !important; }
ul.keywords>li::before{ content:"✔" !important; color:var(--y-500) !important; }

/* 脚注：緑を排除して黄×黒へ */
.footnotes-local .fn-title{ color:#1A1A1A !important; text-decoration-color:var(--y-500) !important; }
.footnotes-local .fn-title::before{ background:#1A1A1A !important; }
.footnotes-local a[href^="http"]::before{ background:var(--y-500) !important; }
sup.footnote-ref{ color:#1A1A1A !important; }
.footnotes-local .fn-back{ border:1px solid #FFE266 !important; background:#FFF9D6 !important; color:#1A1A1A !important; }

/* ============================================
   Soft Yellow Theme – no black, no ochre
   (color-only; layout untouched)
   ============================================ */

/* 1) パレット & 既存 green トークンを黄系に再マップ（色のみ） */
:root{
  --y-500: #FFD600;   /* メイン黄（鮮やか、黄土化しない） */
  --y-600: #E6C200;   /* アクセント黄（下線など） */
  --y-350: #FFF7C2;   /* ごく淡い黄（帯/背景） */
  --y-300: #FFF3A6;   /* 淡黄（背景/ハイライト） */

  /* 既存の --green-* を黄系へ（色だけ） */
  --green-500: var(--y-500);
  --green-600: var(--y-600);
  --green-300: var(--y-300);
  --green-700: #E6C200;   /* 濃い黄系で代替（黒/茶系は使わない） */
  --green-800: #FFD600;
  --green-900: #E6C200;

  /* コンポーネントのアクセント */
  --headline-grad: linear-gradient(90deg, var(--y-350) 0%, #FFE35C 50%, var(--y-500) 100%);
  --nbg: var(--y-500);              /* 見出し番号バッジ */
  --nbg-dark: #E6C200;              /* バッジ外縁（濃黄でコントラスト） */
  --qa-underline-color: var(--y-600);
}

/* 2) ヒーローの背景：淡黄 → 白のやさしいグラデ（黒は使わない） */
.hero{
  background: linear-gradient(180deg, #FFFBEF 0%, #FFFFFF 60%) !important;
}

/* 3) ドット/QAアイコン/バッジ/下線を黄系へ統一（黒なし） */
.dot.active{
  background: linear-gradient(135deg, #FFE35C, var(--y-500)) !important;
  border-color: #FFF3C4 !important;
}
.qa .qa-icon,
.section .qa dt .qa-icon{
  background: linear-gradient(135deg, #FFE35C, var(--y-500)) !important;
  box-shadow: 0 6px 14px rgba(230, 194, 0, .22) !important; /* 濃黄の影 */
}
body .section .headline .num-badge{
  background: var(--nbg) !important;
  color: #ffffff !important;                 /* 黄に白字（黒は使わない） */
}
body .section .headline .num-badge::after{
  border-color: var(--nbg-dark) !important;  /* 外縁は濃い黄 */
}
body .section .qa .qa-q-text{
  text-decoration-color: var(--qa-underline-color) !important;
}

/* 4) キーワード枠（中の文字も含め黄系化・緑残り排除） */
ul.keywords{
  border-color: var(--y-500) !important;
  background: #FFFBEF !important;                 /* ごく淡い黄 */
  box-shadow: 0 10px 26px rgba(230, 194, 0, .10) !important;
}
ul.keywords::before{
  background: #FFE35C !important;                 /* ラベル地も黄 */
  color: #7A5C00 !important;                      /* 文字は濃黄系（黒不使用） */
}
ul.keywords > li,
ul.keywords > li .tag{
  color: #7A5C00 !important;                      /* ★ 内側文字の最終色（濃黄） */
  background: transparent !important;
  border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
ul.keywords > li::before{
  content: "✔" !important;
  color: var(--y-500) !important;                 /* ✔ はメイン黄 */
  margin-right: 6px !important; font-weight: 900 !important;
  position: static !important; transform: none !important; line-height: 1 !important;
}

/* 5) 脚注（緑の残りを排除し、黄系のみで統一） */
.footnotes-local .fn-title{
  color: #7A5C00 !important;                      /* タイトル文字を濃黄 */
  text-decoration-color: var(--y-500) !important; /* 文字下線を黄 */
}
.footnotes-local .fn-title::before{
  background: #FFE35C !important;                 /* 左アイコンも黄 */
}
.footnotes-local a[href^="http"]::before{
  background: var(--y-500) !important;            /* 外部リンク小アイコンを黄 */
}
sup.footnote-ref{
  color: #7A5C00 !important;                      /* 上付き参照番号も濃黄 */
}
.footnotes-local .fn-back{
  border: 1px solid #FFE266 !important;
  background: #FFF9D6 !important;
  color: #7A5C00 !important;                      /* 黒は使わない */
}

/* === Add-on: Hero brand / Bio title / Intro subtitle – Yellow only === */

/* 1) ヒーロー枠の「国土交通省九州地方整備局」を“黄色”に */
.hero .overlay .brand,
.brand {
  color: #FFD600 !important;            /* メイン黄（黒系は使わない） */
  opacity: 1 !important;                /* 既存の僅かな透過を解除（任意） */
}

/* 2) 略歴タイトルの文字色（白→濃い黄系） */
.bio-title {
  color: #CFA500 !important;            /* 濃い黄。白より可読性が高く、黒は不使用 */
  /* 背景は既存の黄系グラデのまま／変更不要。
     もし背景も淡くしたい場合は以下を有効化
     background: linear-gradient(90deg, #FFF7C2, #FFE35C) !important; */
}

/* 3) サブタイトル（intro--circle-title）の文字色を黄系へ
      ※ “黒ではなく” の指定に合わせ、黒は使わず濃い黄で統一 */
.section .intro--circle-title {
  color: #CFA500 !important;            /* 濃い黄（黒の代替） */
  text-shadow: 0 0 2px #FFFBEF !important; /* 黄背景での視認性補助。黒は使わない */
}
/* 丸背景の色味も黄系に（既存は緑） */
.section .intro--circle-title::before {
  background: rgba(255, 214, 0, .38) !important;  /* メイン黄の半透明 */
}

/* （参考）キーワードや脚注の緑残りを完全に黄系へ固定した前回パッチと整合します */

/* ★ ヒーロー枠のラベルを #fcc800 に */
.hero .overlay .brand,
.brand {
  color: #fcc800 !important;
}

/* ★ 略歴タイトル（白→鮮やか黄） */
.bio-title {
  color: #fcc800 !important;
}

/* ★ 01以降のサブタイトル */
.section .intro--circle-title {
  color: #fcc800 !important;
}
.section .intro--circle-title::before {
  background: rgba(252, 200, 0, 0.35) !important;
}

/* === Bio Title (略歴) の背景を薄く、文字をくっきり === */
.bio-title {
  /* 背景：濃い黄 → 薄い黄へ（明るい #FFF7C2 系） */
  background: linear-gradient(
      90deg,
      #FFFBEA 0%,   /* とても淡い黄 */
      #FFF3A6 50%,  /* 少しだけ濃い淡黄 */
      #FFE96B 100% /* 強すぎない柔らかい黄 */
  ) !important;

  /* 文字：完全黄系で、視認性の高い濃い黄 */
  color: #D8A800 !important;   /* #fcc800 を少し濃くした視認性重視の黄 */

  /* パディングや丸みは既存を使用、そのままでOK */
}

/* ======================================
   ★ ヒーロー枠の「国土交通省九州地方整備局」
      → もっと濃い黄色に
   ====================================== */
.hero .overlay .brand,
.brand {
  color: #EAB800 !important;   /* #fcc800 より少し濃い “はっきり黄” */
}


/* ======================================
   ★ 略歴タイトル (.bio-title)
      ・文字色：白
      ・背景：濃い黄色（はっきり読める）
   ====================================== */
.bio-title {
  color: #ffffff !important;   /* 文字をしっかり白に */
  background: linear-gradient(
      90deg,
      #FFCE00 0%,   /* 濃い黄 */
      #FFC300 40%,  /* やや濃い */
      #FFB700 100%  /* さらに締まった黄 */
  ) !important;
}


/* ======================================
   ★ サブタイトル（intro--circle-title）
      → 黒を使わず “別の色（濃い黄）” に
   ====================================== */
.section .intro--circle-title {
  color: #D8A800 !important;   /* 濃くて視認性の高い黄 */
  text-shadow: 0 0 2px #FFF7C2 !important; /* 黄系で可読性補助（黒不使用） */
}

.section .intro--circle-title::before {
  background: rgba(255, 200, 0, 0.40) !important; /* 半透明の黄丸 */
}

/* 1) パネル強化 */
.hero .overlay {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(6px) !important;
}

/* 2) ヒーロー枠のブランド文字：濃い黄で固定（黒なし） */
.hero .overlay .brand,
.brand {
  color: #cc9a00 !important;  /* 濃い黄：黄土色に転ばないレンジ */
  font-weight: 800;
}

/* 3) ハイコントラスト要求時の底上げ */
@media (prefers-contrast: more) {
  .hero .overlay { background: rgba(255,255,255,0.96) !important; }
  .hero .overlay .brand, .brand { color: #c18f00 !important; }
}

/* ===== プロフィール・2カラムの安定配置 ===== */
.section--profile .profile-slab {
  /* 既存の grid-template-columns/gap 等はそのままでOK */
}

/* 1行目・左：写真 */
.section--profile .profile-slab .profile-photo {
  grid-column: 1;
  grid-row: 1;
}

/* 2行目・左：注意書き（写真の直下） */
.section--profile .profile-slab .profile-note {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  margin: 8px 0 0;
  color: var(--muted, #4d5b6a);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* 1行目・右：名前／役職／キーワード（写真と同じ“行の頭”に来る） */
.section--profile .profile-slab .profile-meta {
  grid-column: 2;
  grid-row: 1;            /* ← これがズレ防止の決め手 */
  align-self: start;
  min-width: 0;           /* 長文でのはみ出し防止 */
}

/* --- 役職のすぐ下に余白を作る（キーワードが密着しない） --- */
.section--profile .profile-meta .role {
  margin: 0 0 14px;       /* お好みで 12〜18px に調整可 */
  line-height: 1.55;
  word-break: break-word;
}

/* --- 脚注番号（上付き）の視覚位置調整 --- */
.section--profile .profile-meta .role .footnote-ref {
  position: relative;
  top: -1px;              /* 0〜-2px で微調整可 */
  margin-left: 2px;
  font-size: 0.72em;
  line-height: 0;
}
.section--profile .profile-meta .role .footnote-ref a {
  color: #666;            /* ニュートラルグレー */
  text-decoration: none;
  outline: none;
}

/* スマホ（1カラム化）では固定を解除して自然な縦積みに */
@media (max-width: 640px) {
  .section--profile .profile-slab .profile-photo,
  .section--profile .profile-slab .profile-note,
  .section--profile .profile-slab .profile-meta {
    grid-column: auto;
    grid-row: auto;
  }
  .section--profile .profile-slab .profile-note {
    font-size: 0.95rem;
    margin-top: 10px;
  }
}

/* ====== Name（氏名） ====== */
.name{
  position: relative;
  font-weight: 900;
  margin: 0;
  display: inline-block;
  line-height: 1.1;                  /* 行間をやや詰めて下線との一体感 */
}

/* 下線（グラデーション＋アニメ起点） */
.name::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;                       /* -8px → -4px にして “氏名に寄せる” */
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green-900), var(--green-600));
  box-shadow: 0 2px 6px rgba(26,112,89,.25);

  /* アニメーションのための初期状態（横幅を0にしておく） */
  transform: scaleX(0);
  transform-origin: left center;
}

/* ===========================
   氏名（.name）の下線
   ・色：既存の下線色（トークン）をそのまま使用
   ・アニメーション：左→右に “伸びる” だけ（1回）
   ・文字との距離を詰める
   =========================== */

/* ベース：氏名 */
.name{
  position: relative;
  display: inline-block;
  font-weight: 900;
  line-height: 1.1;                 /* 下線と一体感を出す */
}

/* 下線（初期は幅0：伸びる準備） */
.name::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;                          /* 氏名幅いっぱいに */
  bottom: -4px;                      /* 文字に寄せたい場合は -3〜-5px で微調整 */
  height: 6px;
  border-radius: 3px;

  /* 既存の“下線色”に合わせた塗り。ここはテーマのトークンを素直に使用 */
  background: linear-gradient(90deg, var(--green-900), var(--green-600));
  /* もし黄テーマ等で --green-* がマッピング済みなら自動で追従します */

  box-shadow: 0 2px 6px rgba(26,112,89,.25);

  /* 伸びアニメ前提（幅0 → 幅100%） */
  transform: scaleX(0);
  transform-origin: left center;
}

/* === 伸びアニメの発火（.appear.in をトリガ） === */
/* プロフィール塊に appear/in が付与されたら下線が伸びる */
.profile-slab.appear.in .name::after,
.name.appear.in::after{
  animation: name-underline-grow 700ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* 伸びる（左→右） */
@keyframes name-underline-grow{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 動きを抑制（ユーザー設定に従う） */
@media (prefers-reduced-motion: reduce){
  .name::after{
    transform: none;
    animation: none;
  }
}

/* =========================================
   Name（氏名）の下線：質感アップ版 + 伸びるだけ
   - 既存トークン（--green-* or 黄テーマのマップ）に追従
   - グラデは落ち着いた3色＋薄いハイライトで“こなれ感”
   - アニメは「伸びる」1回のみ（シマーは無し）
   - 下線と役職の余白もここで調整
   ========================================= */

/* 好みに応じて微調整しやすい変数（任意） */
:root{
  --name-underline-height: 6px;      /* 5〜7px 推奨 */
  --name-underline-offset: -4px;     /* 文字との距離（-3〜-5pxで調整） */
  --name-role-gap: 14px;             /* 氏名と役職の間の余白（既定より少し広め） */
}

/* 氏名本体：余白・行間の微調整 */
.name{
  position: relative;
  display: inline-block;
  font-weight: 900;
  line-height: 1.08;                 /* 下線との一体感を少し強める */
  padding-bottom: calc(var(--name-underline-height) + 6px);
  /* ↑ 役職との間隔のベース。下線の高さぶん + α を確保 */
  margin: 0 0 var(--name-role-gap) 0;/* 役職との間にさらに余白を追加 */
}

/* 下線（常時“見える”＋伸びアニメ前提：幅0→1） */
.name::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;                          /* 氏名のテキスト幅いっぱい */
  bottom: var(--name-underline-offset);
  height: var(--name-underline-height);
  border-radius: 999px;              /* 角を強めに丸めて上品に */
  box-shadow: 0 2px 6px rgba(0,0,0,.08);  /* 影はごく控えめに */

  /* --- スタイリッシュな下線グラデーション（既存トークンに追従） --- */
  /* 緩やかな3色＋薄ハイライトで“質感”。黄テーマでも既存の --green-* マップに追従します */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--green-900) 88%, #000 0%) 0%,
    color-mix(in srgb, var(--green-700) 92%, #fff 8%) 50%,
    color-mix(in srgb, var(--green-500) 90%, #fff 10%) 100%
  );

  /* ここ重要：最初は幅0（伸びるアニメの初期状態） */
  transform: scaleX(0);
  transform-origin: left center;

  /* 背景は固定。シマー（流れる）は付けない */
  background-size: 100% 100%;
  background-position: 0 0;
}

/* 伸びアニメのトリガ（.appear.in 到達時に1回だけ） */
.profile-slab.appear.in .name::after,
.name.appear.in::after{
  animation: name-underline-grow 680ms cubic-bezier(.2,.8,.2,1) forwards;
}

/* 伸びる（左→右） */
@keyframes name-underline-grow{
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 動きの抑制（ユーザー設定に追従） */
@media (prefers-reduced-motion: reduce){
  .name::after{
    transform: none;
    animation: none;
  }
}

/* =========================================
   脚注（footnotes-local）内のリンク色をグレーベースに統一
   ========================================= */

.footnotes-local a {
  color: #6e6e6e !important;          /* 落ち着いた中間グレー */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footnotes-local a:hover,
.footnotes-local a:focus {
  color: #4d4d4d !important;          /* 少し濃くするだけで主張させない */
  text-decoration-thickness: 2px;
}

.footnotes-local .fn-back {
  color: #6e6e6e !important;          /* 「↩」も同じ色に */
}

.footnotes-local .fn-back:hover {
  color: #4d4d4d !important;
}

/* =========================================
   セクション幅いっぱいのQ&A（1カラム）の横幅を統一
   ・対象： .qa.qa--full と .qa-row.qa-row--textOnly
   ・左右の余白（gutter）と最大幅（content max）を共通化
   ========================================= */

/* セクション共通のガター＆最大幅（既存と整合） */
.section{
  --section-gutter: 18px;          /* 左右の内側余白（= 画像の例と同値） */
  --section-max:    1160px;        /* .section の max-width と同じにする */
}

/* 1) 幅いっぱい用の .qa.qa--full を統一 */
.section .qa.qa--full{
  display: block !important;
  width: 100% !important;

  /* 左右の見え方を “テキストOnlyの項目” と揃える */
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left:  var(--section-gutter) !important;
  margin-right: var(--section-gutter) !important;

  /* セクションの最大幅からガター分を差し引いた見え幅を担保 */
  max-width: calc(var(--section-max) - (var(--section-gutter) * 2)) !important;
}

/* 2) テキストOnly（.qa-row.qa-row--textOnly）も同じ見え幅に固定 */
.section .qa-row.qa-row--textOnly{
  display: block !important; /* 1カラム化の念押し */
  width: 100% !important;
  margin-left:  var(--section-gutter) !important;
  margin-right: var(--section-gutter) !important;
  max-width: calc(var(--section-max) - (var(--section-gutter) * 2)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Q/Aのインデント差で“幅が違って見える”のを抑える調整 */
.section .qa.qa--full dt,
.section .qa-row.qa-row--textOnly .qa dt{
  padding-left: 0 !important;      /* Qの左端を統一 */
}
.section .qa.qa--full dd,
.section .qa-row.qa-row--textOnly .qa dd{
  padding-left: 20px !important;    /* Aのアイコン余白だけ軽く付ける（必要なら 0 に） */
}

/* 4) 1カラム項目内の脚注も同じ幅に（はみ出し防止） */
.section .qa.qa--full .footnotes-local,
.section .qa-row.qa-row--textOnly .footnotes-local{
  margin-left:  0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* ========= ① 脚注と次のQ&A(幅いっぱい)の間隔を統一 ========= */

/* セクションで使う基準の縦リズム（既存のセクション余白感と合わせる） */
.section{
  --v-gap-sm: 12px;  /* 小さめ */
  --v-gap-md: 18px;  /* 標準 */
  --v-gap-lg: 26px;  /* 大きめ（Q&Aブロック間の目安） */
}

/* 脚注ブロックの下に余白をしっかり入れる（他と同じ感覚） */
.section .footnotes-local{
  margin-bottom: var(--v-gap-lg) !important;
}

/* すぐ下が “幅いっぱいQ&A” のときは、さらに気持ち広めに（見出しとのメリハリ） */
.section .footnotes-local + .qa.qa--full,
.section .footnotes-local + .qa-row.qa-row--textOnly{
  margin-top: var(--v-gap-md) !important; /* 直上に脚注がある場合の上マージン */
}

/* 念押し：幅いっぱいQ&Aどうしの上下もそろえる */
.section .qa.qa--full{
  margin-top: var(--v-gap-lg) !important;
  margin-bottom: var(--v-gap-lg) !important;
}
.section .qa-row.qa-row--textOnly{
  margin-top: var(--v-gap-lg) !important;
  margin-bottom: var(--v-gap-lg) !important;
}

/* =========================================
   「センター内での講習風景」など大きめのセクション写真
   - 横長に潰れて見えるのを防ぎ、縦をやや深く（4:3）見せる
   - 画像は中央を活かして自然にトリミング
   ========================================= */

/* figure 自体のレイアウト（幅はほどよく、中央寄せ） */
.section .qa-photo--section{
  width: 100%;
  max-width: 580px !important;   /* ← ここが “小さくする” 本体！今より 1ランク小さめ */
  margin: 18px auto 14px !important;
}

/* 画像の描画ルール：縦をしっかり確保（4:3） */
.section .qa-photo--section img{
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;   /* ← 自然な縦横比を維持 */
  object-fit: cover !important;     /* ← 拡大や歪みを防ぐ */
  object-position: 50% 50%;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(5,17,33,.14);
}

/* モバイルは横幅いっぱいでOK（4:3維持で潰れません） */
@media (max-width: 640px){
  .section .qa-photo--section{
    max-width: 100% !important;
    margin: 14px auto 12px !important;
  }
}

/* 横2枚のギャラリー（共通） */
.qa-photos.qa-photos--two{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: start;
}

/* モバイルは自動で1列に */
@media (max-width: 640px){
  .qa-photos.qa-photos--two{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── 角丸なし（このブロックだけ） */
.qa-photos.qa-photos--flat .qa-photo img{
  border-radius: 0 !important;      /* 角丸なし */
  border: 1px solid var(--border);   /* 枠は残す（不要なら削除） */
  box-shadow: none;                  /* 影を消したい場合。残したいならこの行を削除 */
  width: 100%;
  height: auto;                      /* 自然な比率で表示 */
  object-fit: cover;                 /* 必要に応じて contain に変更可 */
}

/* キャプションの整え（任意） */
.qa-photos.qa-photos--two .qa-photo figcaption{
  margin-top: 8px;
  color: var(--muted, #4d5b6a);
  font-size: 0.92rem;
  line-height: 1.5;
  text-align: left;                  /* 中央寄せにしたい場合は center に */
}

/* 横長に見せる専用（この1枚だけ） */
.section .qa-photo--section.qa-photo--wider{
  width: 100%;
  max-width: 580px !important;        /* ← 大きさの微調整値。600〜640pxなど好みで */
  margin: 16px auto 12px !important;
}

.section .qa-photo--section.qa-photo--wider img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2 !important;     /* ★ 少し横長（3:2）。さらに横長にしたければ 16/10 などへ */
  object-fit: cover !important;       /* 歪みは出さずに自然にフィット */
  object-position: 50% 50%;           /* 見せたい位置に寄せるなら 45%/55% などに調整 */
  border-radius: 20px;                 /* 角丸が不要なら 0 に変更可 */
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(5,17,33,.14);
}

/* =========================================
   Qgi-Hornets 横2枚ギャラリー（角丸あり・ひと回り大きく）
   ========================================= */

/* 横2枚のレイアウトは既存どおり。最大幅を広げてサイズUP */
.qgi-gallery{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;                 /* 12〜20pxでお好み */
  align-items: start;
  max-width: 1120px !important;         /* ← 960px → 1120px に拡大（1080〜1160の範囲で調整可） */
  margin: 14px auto !important;
}

/* 画像は“角丸あり”を明示、比率は少しワイドで見栄え良く */
.qgi-gallery .qa-photo img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10 !important;     /* 3/2 でもOK。つぶれず少し横長に見せる */
  object-fit: cover;                     /* 自然にフィット（歪みなし） */
  object-position: 50% 50%;             /* 必要なら 48%/52% で微調整 */
  border-radius: 16px !important;        /* 角丸あり（全体のトーンに合わせて 14〜20px） */
  border: 1px solid var(--border);
  box-shadow: 0 10px 20px rgba(5,17,33,.10);  /* 軽めの影（不要なら削除） */
}

/* キャプションはそのまま。中央のほうがバランス良ければ center に */
.qgi-gallery .qa-photo figcaption{
  margin-top: 8px;
  color: var(--muted, #4d5b6a);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

/* モバイルは1列へ */
@media (max-width: 640px){
  .qgi-gallery{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin: 12px auto !important;
  }
}

/* 屋外での講習風景：白枠なし＋“少しだけ縦を長く” */
.section .qa-photo--section.qa-photo--outdoor{
  width: 100%;
  max-width: 600px !important;          /* ← 表示サイズはそのまま（580〜640pxで微調整可） */
  margin: 16px auto 12px !important;
}

.section .qa-photo--section.qa-photo--outdoor img{
  width: 100%;
  height: auto !important;

  /* ★ cover に戻して白枠をなくす ＋ アスペクト比を“縦深め”へ */
  aspect-ratio: 3 / 2 !important;       /* ← 16/10 より“ほんの少し”縦長に。4/3 だとさらに縦深く */
  object-fit: cover !important;          /* 欠けは出るが白枠は出ない。自然なフィットで歪みなし */
  object-position: 50% 50% !important;   /* 見せたい位置の微調整は 48%/52% などへ */

  /* 枠・角丸は従来どおり（不要なら調整） */
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(5,17,33,.14);
}

/* もし“もう一段だけ”縦を足したい時の候補（片方だけ有効化）
.section .qa-photo--section.qa-photo--outdoor img{ aspect-ratio: 5 / 3 !important; }   // さらに縦深く（1.67）
.section .qa-photo--section.qa-photo--outdoor img{ aspect-ratio: 4 / 3 !important; }   // かなり縦深く（1.33）
*/

/* モバイルは自動で幅優先（白枠は出ません） */
@media (max-width: 640px){
  .section .qa-photo--section.qa-photo--outdoor{
    max-width: 100% !important;
  }
  .section .qa-photo--section.qa-photo--outdoor img{
    width: 100% !important;
    height: auto !important;
    object-position: 50% 50% !important;
  }
}

/* =========================
   モバイル（〜640px）：QA幅の統一
   ========================= */
@media (max-width: 640px){

  /* セクション共通の左右ガター（必要に応じて12〜18pxで好み調整） */
  .section{
    --m-gutter: 14px;
  }

  /* 2カラムの qa-row を確実に1カラムへ統一 */
  .section .qa-row{
    display: block !important;
    width: 100% !important;
    margin-left:  var(--m-gutter) !important;
    margin-right: var(--m-gutter) !important;
    max-width: calc(100% - (var(--m-gutter) * 2)) !important;
  }

  /* テキストのみの qa-row も同じ見え幅に */
  .section .qa-row.qa-row--textOnly{
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left:  var(--m-gutter) !important;
    margin-right: var(--m-gutter) !important;
    max-width: calc(100% - (var(--m-gutter) * 2)) !important;
  }

  /* フル幅QA（qa--full）も同じ見え幅に固定 */
  .section .qa.qa--full{
    display: block !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left:  var(--m-gutter) !important;
    margin-right: var(--m-gutter) !important;
    max-width: calc(100% - (var(--m-gutter) * 2)) !important;
  }

  /* QとAのインデント差を抑えて“幅が違うように見える”のを防ぐ */
  .section .qa dt{
    padding-left: 0 !important;
    margin-left:  0 !important;
  }
  .section .qa dd{
    padding-left: 12px !important;   /* アイコン分の最小インデント。完全に揃えたいなら 0 に */
    margin-left:  0 !important;
  }

  /* QAの中の脚注も、はみ出さずに同じ幅に */
  .section .qa .footnotes-local{
    margin-left:  0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* === 省内テンプレの「ページタイトル帯」を非表示（最小差分） === */
.pageTitle01 { 
  display: none !important;
}
/* 余白が過剰に残る場合の保険（任意） */
#breadcrumb { margin-top: 0 !important; }

/* ===== Breadcrumb: モバイルで見切れないようにする最小パッチ ===== */

/* 共通：パンくず本体はコンテナ幅内で完結させる */
#breadcrumb {
  max-width: 100% !important;
  overflow: visible; /* デフォは可視。モバイルでは下の @media で上書き */
}

/* ULをフレックス化：折返しを許可（=見切れ防止の第一手段） */
#breadcrumb > ul {
  display: flex;
  flex-wrap: wrap;              /* 折り返し可 */
  align-items: center;
  gap: 6px 10px;                /* 行間/列間の最小余白 */
  margin: 0;
  padding: 6px 10px;
  list-style: none;
  max-width: 100%;
}

/* 各LIは最小幅0で縮む＆中身は横並びで自然に折返し */
#breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-width: 0;                 /* はみ出し防止 */
  white-space: nowrap;          /* デフォは1行扱い */
}

/* 区切り矢印は常に隣接アイテムに付く（行頭で孤立しづらく） */
#breadcrumb .arrow {
  display: inline-block;
  margin: 0 6px;
  flex: 0 0 auto;
}

/* ------ スマホ（～640px）：さらに堅く見切れ対策 ------ */
@media (max-width: 640px) {

  /* 折返しを維持しつつ、必要時は横スクロール許容（両取り） */
  #breadcrumb {
    overflow-x: auto !important;          /* 横はスクロール可 */
    -webkit-overflow-scrolling: touch;    /* iOS慣性スクロール */
  }

  /* 折返し優先：語が長いときだけスクロールが出る */
  #breadcrumb > ul {
    flex-wrap: wrap;       /* まずは折り返す */
  }

  /* 長い語（例：英数や長いページ名）で詰まり過ぎないよう微調整 */
  #breadcrumb li {
    min-width: auto;
    max-width: 100%;
  }

  /* 文字サイズをほんの少し控えめに（可読性を損なわない範囲） */
  #breadcrumb, #breadcrumb li, #breadcrumb a, #breadcrumb .arrow {
    font-size: 0.95em;
  }
}