:root{
  --green-900:#0B2345;--green-800:#12315F;--green-700:#18407A;--green-600:#1F5098;--green-500:#2763B3;--green-300:#7FB2F0;
  --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:#18407A;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:#cfdaf0
}

/* ========== 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:#243a6b;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,#F2F6FD 0%,#E9F1FD 40%,#FFFFFF 100%);
  border:1px solid #bcd3f3;color:#0b1b2b;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:#9fbde9
}

/* 略歴タイトル（初回デザイン） */
.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:#0b1b2b;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:#0b1b2b;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:#cfdaf0;--kw-pill-border-hover:#A8D6C9;
  --kw-pill-glow:rgba(23,76,140,.16);--kw-pill-glow-hover:rgba(23,76,140,.28);
  --badge-size:34px;--headline-offset:calc(var(--badge-size) + 14px);
  --headline-grad:linear-gradient(90deg,#8CB6F0 0%, #4C79C5 50%, #2A559E 100%);
  --nbg:#2763B3;--nbg-dark:#18407A;--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:#0b1b2b !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, #2A55A8) !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(180,198,238,.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(180,198,238,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 #18407A;
  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: #18407A;
  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: #0B2345 !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: #18407A;
  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: #18407A !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: #18407A;
  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 #cfdaf0;
  border-radius: 12px;
  color: #2a3d56;
  font-size: 0.95rem;
}
.footnotes-local .fn-title{
  position: relative;
  display: inline-block;
  font-weight: 900;
  color: #0B2345;
  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,#C4DAF5 0%, #9FC0EB 50%, #D6E5FB 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: #1F5098; text-decoration: none;
}
.footnotes-local li .fn-back:hover{ text-decoration: underline dotted; }
.footnotes-local a{ color: #18407A; 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 #9bbbe6; bottom: -4px;
  }
}

/* ================================
   ローカル脚注（横幅いっぱい＆やさしい装飾）
   ================================ */
.footnotes-local{
  display:block;
  width:100%;
  margin: 22px 0 0;
  padding: 20px 18px 12px;
  background:#fff;
  border:1px dashed #cfdaf0;
  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:#0B2345;
  padding: 2px 4px;
  margin:0 0 10px;
}
.footnotes-local .fn-title::before{
  content:"";
  width:20px; height:20px;
  background:#18407A;               /* アイコン色（テーマグリーン） */
  -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,#C4DAF5 0%, #9FC0EB 50%, #D6E5FB 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:#1F5098; text-decoration:none;
  border:1px solid #cfdaf0; border-radius:999px; background:#F6F9FE;
}
.footnotes-local .fn-back:hover{ background:#EEF5FD; }

/* 文章内のURLにアイコンを付ける（外部リンクっぽく） */
.footnotes-local a[href^="http"]{
  color:#18407A; 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:#2763B3;
  -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:#18407A; 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 #9bbbe6; 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: #566b9b;                    /* コントラストを落とす */
  border: 1px solid #dbe3f3;
  background: #f7f9fd;
}
.footnotes-local .fn-back:hover{
  background: #f1f6f4;
}

/* 本文側の上付き参照番号（^1 など）も控えめトーンに */
sup.footnote-ref{
  color: #566b9b !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; /* 薄い緑。濃くするなら #9fbde9 */

  /* 見た目の基礎（控えめトーンは維持） */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  color: #0B2345;
  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: #18407A !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;  /* 万一の線演出を排除 */
}

/* === Blue override: Keywords panel (force mint → pale blue) === */
ul.keywords{
  background:#F5F8FE !important;        /* 薄いブルーの面 */
  border-color:#18407A !important;       /* ネイビーの枠線 */
}
ul.keywords::before{
  background:#18407A !important;         /* 「● Keywords」タブの色 */
}
ul.keywords li, ul.keywords li .tag{
  color:#0B2345 !important;               /* テキストは濃紺 */
}
ul.keywords li::before{
  color:#18407A !important;               /* ✓ の色も濃紺へ */
}

/* ===== A左カラム：主要目（タイトル無しの本文ブロック） ===== */
.a-spec {
  /* 既存の .qa dd に近いトーンで揃える（左右の詰まりを抑制） */
  margin: 0;
  padding-left: 0;
  color: #0b1b2b; /* 本文色（現行テーマの本文色に近い） */
  line-height: 1.7;
}
.a-spec > p {
  margin: 0 0 8px;
  font-weight: 900;          /* 「測量船「拓洋」主要目」を太字でラベル的に */
}
.a-spec__list {
  margin: 0;
  padding-left: 1.2em;       /* 行頭の字下げを明示（全角スペース不要に） */
  list-style: disc;
}
.a-spec__list li {
  margin: 2px 0 6px;
}

/* 既存のA用ルール（参考：未導入なら有効化） */
.qa-row--A {
  grid-template-columns: minmax(420px, 46%) 1fr;
}
.qa-photo--noRadius img { border-radius: 0 !important; }
.qa-photo--A-wide {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 16px 0 24px !important;
}
.qa-photo--A-wide img {
  width: 100%;
  height: auto;
  aspect-ratio: 21/9;   /* 16/9にしたい場合はここを変更 */
  object-fit: cover;
  border: none;
  border-radius: 0 !important;
}
@media (max-width: 640px) {
  .qa-row--A { grid-template-columns: 1fr !important; }
  .qa-photo--A-wide { margin: 12px 0 18px !important; }
  .qa-photo--A-wide img { aspect-ratio: 16/9; }
}

/* ① 本文をセクション幅いっぱいに（2カラムのグリッドをまたぐ） */
.qa-row--full > .qa { grid-column: 1 / -1 !important; }

/* ② 左テキスト／右写真レイアウト（幅配分は既存と同じ = 左46% / 右残り） */
.qa-row--A { grid-template-columns: minmax(420px, 46%) 1fr; }

/* 角丸なし（ピンポイント適用） */
.qa-photo--noRadius img { border-radius: 0 !important; border: none; }

/* 左カラムの「主要目」の体裁（タイトル無し運用） */
.a-spec { margin: 0; padding-left: 0; color: #0b1b2b; line-height: 1.7; }
.a-spec > p { margin: 0 0 8px; font-weight: 900; }
.a-spec__list { margin: 0; padding-left: 1.2em; list-style: disc; }
.a-spec__list li { margin: 2px 0 6px; }

/* ③ 横長写真：中央寄せ・やや大きめ（角丸なし） */
.qa-photo--A-wide {
  display: block !important;
  width: 100%;
  margin: 18px auto 26px !important; /* 中央寄せ */
}
.qa-photo--A-wide img {
  width: 100%;
  height: auto;
  aspect-ratio: 21/9;          /* 横長感（16/9にしたければ変更） */
  object-fit: cover;
  border-radius: 0 !important;
}

/* 中央寄せ＆サイズ大きめ（セクション中央で最大幅拡大） */
.qa-photo--A-wideCenter { max-width: 980px; } /* 1100px 等に上げてもOK */

/* モバイル最適化 */
@media (max-width: 640px) {
  .qa-row--A { grid-template-columns: 1fr !important; }
  .qa-photo--A-wide img { aspect-ratio: 16/9; }
  .qa-photo--A-wideCenter { max-width: none; } /* SPは画面幅いっぱい */
}

/* 既存：中央寄せ＆サイズ指定（値だけ調整） */
.qa-photo--A-wideCenter {
  max-width: 860px; /* ← 980px から少し小さめに */
}
/* --- Profile: 写真の注記（キャプション） --- */
.profile-figure{
  margin: 0;                 /* figure のデフォルト余白を無効化 */
}

.profile-caption{
  margin-top: 8px;
  font-size: 0.88rem;        /* 本文よりわずかに小さめ */
  line-height: 1.6;
  color: #6b7a90;            /* 既存の muted トーンに近い控えめカラー */
}

@media (max-width: 640px){
  .profile-caption{
    margin-top: 6px;
    font-size: 0.86rem;      /* SP での可読性と収まりのバランス */
  }
}
/* 上部タイトル「職員インタビュー」を非表示にする */
#bukyoku {
  display: none !important;
}
/* =========================================
   SP幅の共通ガター（左右余白）を強制
   - iOSセーフエリアにも対応
   - 既存の .section のpaddingより優先
========================================= */
@media (max-width: 640px){
  :root{
    --sp-gutter: 14px; /* 12〜16pxの範囲で好みに合わせてOK */
  }

  /* セクション全体にガターを適用（上/下は既存を尊重） */
  .section{
    padding-left: max(var(--sp-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--sp-gutter), env(safe-area-inset-right)) !important;
  }

  /* Q&A行の左右はみ出し対策（マージン打ち消し） */
  .qa-row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2枚並びギャラリーやワイド画像が親幅からはみ出さないように */
  .qa-photos,
  .qa,
  .qa-photo,
  .qa-photo--A-wide,           /* 既存：横長ワイド画像のラッパー */
  .qa-photo--A-wideCenter{     /* 既存：中央寄せワイド画像のラッパー */
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ワイド画像自体がガターを無視して画面端で切れないように */
  .qa-photo img,
  .qa-photo--A-wide img,
  .qa-photo--A-wideCenter img{
    display: block;
    width: 100% !important;
    height: auto;
    /* 既存で aspect-ratio は定義済み。object-fit のままでOK */
  }

  /* キャプションなどブロック要素の両端も揃える（過剰なmargin対策） */
  .qa-photo figcaption{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* ------------------------------------
   脚注番号（上付きの数字）を青系に統一
------------------------------------ */
sup.footnote-ref,
sup.footnote-ref a {
  color: #1F5098 !important;   /* 青系（既存デザインと調和） */
  text-decoration: none !important;
}
/* =========================================================
  SP見切れ完全対策（ガター強制＋最大幅制限＋折返し）
  ※ 既存指定を確実に上書きするため末尾に配置
========================================================= */
@media (max-width: 640px){
  :root{
    /* 端末の安全領域も考慮したガター */
    --sp-gutter: 16px;
  }

  /* 1) セクション左右に必ずガターを確保 */
  .section{
    padding-left: max(var(--sp-gutter), env(safe-area-inset-left)) !important;
    padding-right: max(var(--sp-gutter), env(safe-area-inset-right)) !important;
    /* セクション内での横スクロールを抑止（中身がはみ出しても切らない） */
    overflow-x: clip; /* Safari 16+ / 他ブラウザはclipをignoreしても問題なし */
  }

  /* 2) 行・カラム系は左右マージンを打ち消し、最大幅を100%に固定 */
  .profile-slab,
  .qa-row{
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* 3) 内側の主要ブロックとワイド用ラッパーも親幅に収める */
  .qa,
  .qa-photos,
  .qa-photo,
  .qa-photo--A-wide,
  .qa-photo--A-wideCenter{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 4) メディア要素は横幅オーバー禁止（画像は既にaspect-ratioあり） */
  .qa-photo img,
  .qa-photo--A-wide img,
  .qa-photo--A-wideCenter img{
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 5) テキストの食み出し（長い語・URL・全角連続）を強制折返し */
  .headline,
  .intro--circle-title,
  .qa dt,
  .qa dd,
  .footnotes-local{
    overflow-wrap: anywhere;
    word-break: normal;     /* 日本語の不自然な分割を避ける */
    hyphens: auto;          /* 対応ブラウザで英単語を適切に分割 */
  }

  /* 6) 見出しの“下線”擬似要素が親幅をはみ出すのを抑制（SPだけ内側に） */
  body .section .headline::before{
    left: calc(var(--badge-size, 34px) + 20px) !important; /* 番号バッジ＋余白 */
    right: 0 !important;  /* 右端を親の内側に揃える */
  }

  /* 7) テキストだけの行（.qa-row--textOnly）が独自マージンで外へ出ないように */
  .section .qa-row.qa-row--textOnly{
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;  /* .section のガターに委ねる */
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 8) キャプションも左右を揃える（微調整） */
  .qa-photo figcaption{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
/* =========================================================
   SP写真の右側見切れ対策（ボーダー分を含めて100%に収める）
   ─ 画像を border-box にして、ボーダー込みで100%幅に
   ─ 念のためラッパーもはみ出さないよう制御
========================================================= */
@media (max-width: 640px){

  /* 1) 画像そのものの幅計算を border-box に変更 */
  .qa-photo img,
  .qa-photo--A-wide img,
  .qa-photo--A-wideCenter img {
    box-sizing: border-box !important;   /* ← これで border を含めて 100% */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2) 画像ラッパーもはみ出さないように保険を掛ける */
  .qa-photo,
  .qa-photo--A-wide,
  .qa-photo--A-wideCenter {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;   /* 画像は自分で収まるので可視のままでOK */
  }

  /* 3) もし .section の overflow-x: clip が効いている場合に備え、
        ここでは「画像側で収める」前提にして clip の影響を避ける */
  .section {
    overflow-x: visible !important; /* ← clip 由来の右端切れを回避 */
  }

  /* 4) （任意）角丸や枠なし指定のケースも左右端で揃うよう最終ガード */
  .qa-photo img,
  .qa-photo--A-wide img,
  .qa-photo--A-wideCenter img {
    /* 既存で border:1px が付く想定。もしPCで枠ナシならそのままOK */
    /* どうしても気になる端末があれば以下の代替を使ってください：
       max-width: calc(100% - 2px) !important;  */
  }
}
/* =========================================================
   SP写真の右側見切れ対策（ボーダー分を含めて100%に収める）
   ─ 画像を border-box にして、ボーダー込みで100%幅に
   ─ 念のためラッパーもはみ出さないよう制御
========================================================= */
@media (max-width: 640px){

  /* 1) 画像そのものの幅計算を border-box に変更 */
  .qa-photo img,
  .qa-photo--A-wide img,
  .qa-photo--A-wideCenter img {
    box-sizing: border-box !important;   /* ← これで border を含めて 100% */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2) 画像ラッパーもはみ出さないように保険を掛ける */
  .qa-photo,
  .qa-photo--A-wide,
  .qa-photo--A-wideCenter {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;   /* 画像は自分で収まるので可視のままでOK */
  }

  /* 3) もし .section の overflow-x: clip が効いている場合に備え、
        ここでは「画像側で収める」前提にして clip の影響を避ける */
  .section {
    overflow-x: visible !important; /* ← clip 由来の右端切れを回避 */
  }

  /* 4) （任意）角丸や枠なし指定のケースも左右端で揃うよう最終ガード */
  .qa-photo img,
  .qa-photo--A-wide img,
  .qa-photo--A-wideCenter img {
    /* 既存で border:1px が付く想定。もしPCで枠ナシならそのままOK */
    /* どうしても気になる端末があれば以下の代替を使ってください：
       max-width: calc(100% - 2px) !important;  */
  }
}
/* --- 海洋権益確保のための海洋調査の例：写真を中央寄せ --- */
.qa-photo--A-wideCenter {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}
/* --- 海洋調査の写真：トリミングなしで全体を表示する --- */
.qa-photo--noCrop img {
  object-fit: contain !important;      /* ← 全体を見切れなく表示 */
  object-position: center center !important;
  background: #fff !important;         /* 枠内に余白が出る場合の背景 */
  width: 100% !important;
  height: auto !important;

  /* 今の枠サイズ（21:9のワイド）を維持するための比率 */
  aspect-ratio: 21/9 !important;
}
/* --- 海洋調査の写真：無裁ち＆左右余白ナシ（枠の比率固定を解除） --- */
.qa-photo--noCrop img{
  /* 画像は“無裁ち”で本来の比率のまま */
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;

  /* 枠側の固定比率をやめて、画像の自然な比率に合わせる */
  aspect-ratio: auto !important;   /* ← これが余白ゼロの肝 */
  width: 100% !important;
  height: auto !important;
}

/* 念のため：この1枚の親ラッパーにも高さ制約を与えない */
.qa-photo--noCrop{
  max-width: 860px;               /* 既存の見た目の“幅感”は維持（調整可） */
  margin-left: auto !important;
  margin-right: auto !important;
}
/* --- 海洋調査の写真：全体表示＋左右余白なし（既存） --- */
.qa-photo--noCrop img{
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  aspect-ratio: auto !important;  /* ← 余白ゼロの肝。枠の比率固定を解除 */
  width: 100% !important;
  height: auto !important;
}

/* --- 海洋調査の写真：さらにもう少しだけサイズを小さく --- */
.qa-photo--noCrop{
  max-width: 800px !important;   /* ← 820 → 800 に微調整（約 -2.5%） */
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== Hero #6 専用フォーカル（恒久対応。構造が直ったらこれが有効に） ===== */
.hero .slide#hero-slide-6 { background-position: left 44% center !important; background-size: cover !important; }

@media (max-width: 640px){
  .hero .slide#hero-slide-6 { background-position: left 50% center !important; } /* SPはさらに左へ */
}
/* --- 船内案内（sennaiannai.JPG）だけを “トリミングなし” で全面表示 --- */
img[src$="sennaiannai.JPG"],
img[src$="sennaiannai.jpg"],
img[src$="sennaiannai.png"]{
  display: block;
  width: 100%;
  height: auto;                     /* ← アスペクト比を維持して縮小 */
  object-fit: contain !important;   /* ← 画像全体を優先（トリミングしない） */
  aspect-ratio: auto !important;    /* ← 既存の固定比があれば解除して無効化 */
  background: #fff;                 /* 余白が出る場合の下地（任意） */
}

/* 親の figure / コンテナが比率固定や横スクロールを持つ場合の保険 */
img[src$="sennaiannai.JPG"],
img[src$="sennaiannai.jpg"],
img[src$="sennaiannai.png"]{
  max-width: 100%;
}
/* ===== Hero 6枚目：PCで「ごんどう２」の文字を中央に ===== */
/* スマホは既存（やや上寄せ）のまま。PCのみ中央に寄せ直す */
@media (min-width: 641px){
  .hero .slides #hero-slide-6{
    /* X=横位置（左右）、Y=縦位置（上下）
       例：文字が画像のやや右上にある場合 → Xを60〜70%、Yを45〜55%に。
       下の値はまずの推奨値（必要なら数値だけ微調整）。 */
    background-position: 62% 50% !important;
  }
}

/* （任意）タブレット〜大画面での微差が出る場合の保険 */
@media (min-width: 1024px){
  .hero .slides #hero-slide-6{
    background-position: 60% 52% !important;
  }
}
/* ===== Hero 6枚目：PCで「ごんどう２」を中央に見せる強制パッチ ===== */
@media (min-width: 641px){
  .hero .slides div#hero-slide-6,
  .hero .slides #hero-slide-6{
    /* まずは “中央近く” に文字が来る座標へ */
    background-position: 40% 42% !important;  /* ← 左右・上下の順 */

    /* それでも文字が切れる場合の保険（わずかに引き気味に） */
    background-size: 98% auto !important;     /* cover のまま僅かに縮小相当 */
  }
}

/* さらに広い画面で微差が出る場合の保険（任意） */
@media (min-width: 1024px){
  .hero .slides div#hero-slide-6,
  .hero .slides #hero-slide-6{
    background-position: 38% 44% !important;
    background-size: 96% auto !important;
  }
}
/* PC では全体が見えやすい位置に調整 */
@media (min-width: 641px){
  #hero-slide-6{
    background-position: 45% 50% !important;
    background-size: cover !important;  /* coverのままでも見切れにくくなる */
  }
}
/* ===== Hero 6枚目：他と同じ高さのまま、文字が見えて全体感も出る調整 ===== */
/* スマホは現状維持。PC（641px〜）だけ適用 */
@media (min-width: 641px){
  .hero .slides div#hero-slide-6,
  .hero .slides #hero-slide-6{
    /* 文字が概ね中央付近に来るよう重心を合わせる（左右・上下） */
    background-position: 40% 46% !important;

    /* ズームを少し引いて上下の見切れを緩和（高さはそのまま） */
    background-size: 94% auto !important;  /* 96〜92%の範囲で微調整可 */
  }
}

/* 大きなデスクトップでさらに上辺が切れがちなら微調整（任意） */
@media (min-width: 1200px){
  .hero .slides #hero-slide-6{
    background-position: 39% 48% !important;
    background-size: 92% auto !important;
  }
}
/* =========================================================
   QA 写真（スマホだけ）
   - 画像：中央寄せ・トリミング無し（contain）
   - 比率固定を解除して右見切れ防止
   - figcaption：必ず画像の下・中央に揃える
   ========================================================= */
@media (max-width: 640px){

  /* QAの figure は “ブロック” として扱い、はみ出しを防止 */
  .qa-photo,
  .qa-photo--doc{
    display: block !important;     /* ← flex化はやめる */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto 10px !important; /* 下に数px余白 */
    overflow-x: clip !important;    /* 横スクロール保険 */
    text-align: center !important;  /* 子要素のデフォルト整列 */
  }

  /* 画像：中央寄せ・トリミング無し・比率固定解除 */
  .qa-photo img,
  .qa-photo--doc img{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;        /* ← 全体を収める */
    object-position: center center !important; /* ← 常に中央 */
    aspect-ratio: auto !important;         /* ← 固定比率を解除 */
  }

  /* セクション全体の「代表写真」等に .qa-photo--section がある場合も同様に */
  .section .qa-photo--section img{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
  }

  /* キャプション：画像の下で中央寄せ。回り込みを確実に無効化 */
  .qa-photo figcaption,
  .qa-photo--doc figcaption,
  .section .qa-photo--section figcaption{
    display: block !important;
    margin-top: 8px !important;
    text-align: center !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* 複数枚レイアウト（2枚・4枚）のスマホ1列時も余白確保＆見切れ防止 */
  .qa-photos,
  .qa-photos.qa-photos--two,
  .qa-photos.qa-photos--four{
    grid-template-columns: 1fr !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    overflow-x: clip !important;
  }
}

/* =======================
   Breadcrumb – SPで見切れない最小パッチ
   方針：折返し可 + 最悪は横スクロール
   ======================= */

/* 共通：パンくずコンテナは親幅に収める */
#breadcrumb {
  max-width: 100% !important;
  overflow: visible; /* 通常は可視。SPは下の @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は縮め可能・中身は横並び。長い語でも押し出さない */
#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;
}

/* --- SP（～640px）：折返し優先＋横スクロール保険 --- */
@media (max-width: 640px) {

  /* 必要時のみ横スクロールを許可（親の overflow-x:hidden を局所回避） */
  #breadcrumb {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 折返しは維持。英数や長い語で詰まる時だけスクロールが出る */
  #breadcrumb > ul {
    flex-wrap: wrap;
  }

  /* 長い項目が詰まり過ぎないよう微調整 */
  #breadcrumb li {
    min-width: auto;
    max-width: 100%;
  }

  /* 可読性を保ちつつ、ほんの少しだけ凝縮 */
  #breadcrumb, #breadcrumb li, #breadcrumb a, #breadcrumb .arrow {
    font-size: 0.95em;
  }
}