: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 に */
}
/* 2枚ブロック専用の“上部キャプション” */
.qa-photos.qa-photos--two > .qa-blockCaption {
grid-column: 1 / -1; /* 2カラムを横断して上に1行で表示 */
font-size: 0.95rem;
color: var(--muted, #4d5b6a);
margin-bottom: 0; /* ← 4px → 0（まずはここ） */
line-height: 1.4; /* 1.6 → 1.4 で縦密度も少し締める */
text-align: center; /* お好みで center / right に変更可 */
}
/* モバイルでの写真下余白をやや広めに */
@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,\
') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,\
') 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,\
') no-repeat center/contain;
mask: url('data:image/svg+xml;utf8,\
') 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,\
') no-repeat center/contain !important;
mask: url('data:image/svg+xml;utf8,\
') 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; /* 万一の線演出を排除 */
}
/* ==========================================================
Orange Theme Patch (override-only)
- styles.css の末尾に貼るだけで、全体をオレンジ系へ換装
- 既存の赤系(#7A0019 / #C73A47など)やvar(--green-*)系を上書き
========================================================== */
/* --- 1) パレット再定義（変数） --- */
:root {
/* Orange scale */
--orange-900: #7A2E00; /* 深いコッパー */
--orange-800: #9C3F00;
--orange-700: #BF5A00; /* アクセント濃色 */
--orange-600: #D86E00;
--orange-500: #F28300; /* 主要アクセント */
--orange-300: #FFD1A6; /* 淡い飾り */
/* 既存の赤系っぽい変数名を “オレンジ” に再マップ */
--green-900: var(--orange-900);
--green-800: var(--orange-800);
--green-700: var(--orange-700);
--green-600: var(--orange-600);
--green-500: var(--orange-500);
--green-300: var(--orange-300);
/* バッジや見出し帯の基調色を差し替え */
--headline-grad: linear-gradient(90deg, #FFDAB8 0%, #F6A34D 50%, #F28300 100%);
--nbg: var(--orange-500); /* バッジ背景 */
--nbg-dark: var(--orange-900); /* バッジ外枠 */
--qa-underline-color: #D86E00; /* Q見出しの点線下線色 */
--kw-pill-glow: rgba(242,131,0,.16);
--kw-pill-glow-hover: rgba(242,131,0,.28);
}
/* --- 2) ヒーロー & 基本部品のオレンジ化（既存ハードコード対策） --- */
body .brand { color: var(--orange-900) !important; }
.hero { background: linear-gradient(180deg, #FFF7F0 0%, #FFFFFF 60%) !important; }
.dot.active {
background: linear-gradient(135deg, var(--orange-700), var(--orange-500)) !important;
border-color: #ffe7cc !important;
}
.qa .qa-icon,
.section .qa dt .qa-icon {
background: linear-gradient(135deg, var(--orange-800), var(--orange-500)) !important;
box-shadow: 0 6px 14px rgba(191, 90, 0, .25) !important;
}
body .section .headline .num-badge {
background: var(--nbg) !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;
}
/* --- 3) 脚注UI（アイコン/色）をオレンジへ --- */
.footnotes-local .fn-title { color: var(--orange-900) !important; }
.footnotes-local .fn-title::before {
background: var(--orange-900) !important;
}
.footnotes-local a[href^="http"]::before {
background: var(--orange-500) !important;
}
.footnotes-local .fn-back {
border: 1px solid #F6BF90 !important;
background: #FFF4E8 !important;
}
.footnotes-local .fn-back::before {
background: linear-gradient(135deg, var(--orange-800), var(--orange-500)) !important;
}
/* --- 4) プロフィール見出し帯/下線の色味 --- */
.section--profile .profile-card .bio-title {
background: linear-gradient(90deg, var(--orange-800), var(--orange-500)) !important;
}
.section--profile .profile-card .name::after,
.section--profile .profiles .profile-card h2.name.name--xl::after {
background: linear-gradient(90deg, var(--orange-900), var(--orange-600)) !important;
}
/* 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;
}
/* --- 5) キーワード枠（オレンジ版）--- */
/* ※ すでに赤系で復活パッチを当てている場合でも、下記が最終的に勝ちます */
body ul.keywords.keywords--show {
border: 2px solid var(--orange-500) !important;
background: #FFF4E8 !important; /* 薄いオレンジ */
box-shadow: 0 10px 26px rgba(191, 90, 0, .12) !important;
}
body ul.keywords.keywords--show::before {
background: var(--orange-900) !important;
}
body ul.keywords.keywords--show > li::before {
color: var(--orange-500) !important;
}
/* --- 6) ボタンやリンク用に“軽い”オレンジ影（必要パーツに効く） --- */
.tag:hover {
background: linear-gradient(135deg, var(--orange-300) 0%, #ffffff 100%) !important;
border-color: #F3C8AB !important;
box-shadow: 0 8px 18px rgba(191, 90, 0, .12) !important;
}
/* --- 7) 細かい赤ハードコードのケア（後勝ちで潰す） --- */
.footnotes-local .fn-title::after {
background: linear-gradient(90deg, #FFE4CC 0%, #FFD4AD 50%, #FFEBDC 100%) !important;
}
/* ==========================================================
Orange Dots / Bullets – Sitewide Final Override
（丸アイコン/丸風アイコンを一括でオレンジ統一）
- 貼る場所：styles.css の最末尾
- ポイント：セレクタを太らせ、!important で後勝ちさせる
========================================================== */
/* 0) カラーパレット（既存パッチと整合させる） */
:root {
--orange-900: #7A2E00;
--orange-700: #BF5A00;
--orange-600: #D86E00;
--orange-500: #F28300;
--orange-300: #FFD1A6;
}
/* 1) キーワードのタブ（"● Keywords" の塗りを統一） */
body ul.keywords.keywords--show::before,
body ul.keywords::before {
background: var(--orange-900) !important;
color: #fff !important;
}
/* 2) 「デジタル技術の活用で…」等の導入見出しの丸（circle title） */
body .section .intro--circle-title {
color: var(--orange-900) !important;
text-shadow: 0 0 2px #fff !important;
}
body .section .intro--circle-title::before {
/* ◯ 塗り（淡いオレンジの半透明） */
background: rgba(242,131,0,.38) !important; /* = --orange-500 38% */
}
/* 2’) bracket タイプの導入見出しを使っている場合（保険） */
body .section .intro--bracket { color: var(--orange-900) !important; }
body .section .intro--bracket::before {
background: rgba(242,131,0,.38) !important;
}
/* 3) Q アイコン（丸風・グラデの強調点） */
body .qa .qa-icon,
body .section .qa dt .qa-icon {
background: linear-gradient(135deg, var(--orange-700), var(--orange-500)) !important;
box-shadow: 0 6px 14px rgba(191,90,0,.25) !important;
}
/* 4) セクション見出しの番号バッジ（角丸） */
body .section .headline .num-badge {
background: var(--orange-500) !important;
color: #fff !important;
}
body .section .headline .num-badge::after {
border-color: var(--orange-900) !important;
}
/* 5) Qテキストの下線色（丸アイコンとトーンを合わせる） */
body .section .qa .qa-q-text {
text-decoration-color: var(--orange-600) !important;
}
/* 6) キーワード内のチェック（丸っぽい記号の色味合わせ） */
body ul.keywords.keywords--show > li::before {
color: var(--orange-500) !important;
}
/* 7) 脚注ラベル（丸ではないが色統一のため） */
body .footnotes-local .fn-title { color: var(--orange-900) !important; }
body .footnotes-local .fn-title::before { background: var(--orange-900) !important; }
body .footnotes-local a[href^="http"]::before { background: var(--orange-500) !important; }
/* ==========================================================
FINAL OVERRIDES – Keywords & Footnotes to Orange
置き場所：styles.css の最末尾（これが最後に解釈されること）
========================================================== */
/* パレット（必要なら共通変数にマップ） */
:root{
--orange-900:#7A2E00; /* 濃いオレンジ（タブ/強調） */
--orange-700:#BF5A00;
--orange-600:#D86E00; /* 下線色など */
--orange-500:#F28300; /* 枠・チェック・バッジ */
--orange-300:#FFD1A6;
}
/* ========== 1) キーワード「枠」そのものをオレンジへ ========== */
/* 枠線・背景・影・グリッド。緑の枠/背景に勝つため body + クラス指定 + !important */
body ul.keywords.keywords--show{
display:grid !important;
position:relative !important;
margin:24px 0 0 !important;
padding:12px 20px !important;
border:2px solid var(--orange-500) !important; /* ← 枠線オレンジ */
border-radius:10px !important;
background:#FFF4E8 !important; /* ← ごく薄いオレンジ */
box-shadow:0 10px 26px rgba(191,90,0,.12) !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
column-gap:28px !important;
row-gap:6px !important;
align-items:center !important;
list-style:none !important; /* ● 黒点を全消し */
}
/* タブ（● Keywords）の塗り：濃いオレンジへ固定 */
body ul.keywords.keywords--show::before,
body ul.keywords::before{ /* 念のため通常の ul.keywords にも効かせる */
content: "● Keywords" !important; /* テキストが上書きされているケースも固定 */
background:var(--orange-900) !important;
color:#fff !important;
}
/* キーワード1件の見た目：緑の pill 装飾や角丸を全リセット */
body ul.keywords.keywords--show li,
body ul.keywords.keywords--show li .tag{
display:inline-flex !important;
align-items:center !important;
gap:0 !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
padding:0 !important;
color:#1b1b1b !important; /* 文字は本文色で締める */
font-weight:800 !important;
white-space:nowrap !important;
}
/* ✔ チェックの色をオレンジへ（緑上書きを無効化） */
body ul.keywords.keywords--show > li::before{
content:"✔" !important;
position:static !important;
margin-right:6px !important;
color:var(--orange-500) !important; /* ← チェックの色 */
font-size:1.02rem !important;
line-height:1 !important;
font-weight:900 !important;
pointer-events:none !important;
}
/* .tag 側の擬似で色を被せてくるケースを完全無効化 */
body ul.keywords.keywords--show li .tag::before,
body ul.keywords.keywords--show li .tag::after{
content:none !important;
}
/* レスポンシブはそのまま踏襲 */
@media (max-width:960px){
body ul.keywords.keywords--show{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:560px){
body ul.keywords.keywords--show{ grid-template-columns:1fr !important; }
body ul.keywords.keywords--show li{ white-space:normal !important; }
}
/* ========== 2) 脚注の「下線」をオレンジへ ========== */
/* 既存CSSでは色違いの下線を ::after や text-decoration で付けています。
それらをまとめて “オレンジ” に固定。 */
body .footnotes-local .fn-title{
color:var(--orange-900) !important;
text-decoration-line:underline !important;
text-decoration-thickness:2px !important;
text-underline-offset:3px !important;
text-decoration-color:var(--orange-500) !important; /* ← 下線の色 */
}
/* ::after のグラデ下線が残っている場合を上書きで殺す（透明にする or 同系色へ） */
body .footnotes-local .fn-title::after{
height:0 !important; /* 完全に無効化したい場合 */
background:none !important; /* 透明 */
box-shadow:none !important;
border:0 !important;
}
/* ラベル左のアイコン色もオレンジで統一（書籍アイコン風） */
body .footnotes-local .fn-title::before{
background:var(--orange-900) !important;
}
/* 外部リンクアイコン */
body .footnotes-local a[href^="http"]::before{
background:var(--orange-500) !important;
}
/* ==========================================================
FINAL OVERRIDES – Keywords Box & Footnotes (Orange)
- すべての緑系を上から潰して、オレンジ系に統一
- 置き場所：styles.css の最末尾
========================================================== */
:root{
--orange-900:#7A2E00; /* 濃いオレンジ（タブ/強調） */
--orange-700:#BF5A00;
--orange-600:#D86E00; /* 下線・アクセント */
--orange-500:#F28300; /* 枠・チェック・アイコン */
--orange-300:#FFD1A6;
}
/* ========== 1) キーワード枠（外枠・中身・タブ） ========== */
/* 枠そのもの（緑枠/緑影/緑背景を潰す） */
body ul.keywords.keywords--show{
display:grid !important;
position:relative !important;
margin:24px 0 0 !important;
padding:12px 20px !important;
border:2px solid var(--orange-500) !important; /* ← 外枠：オレンジ */
border-radius:10px !important;
background:#FFF4E8 !important; /* ← 薄オレンジ */
box-shadow:0 10px 26px rgba(191,90,0,.12) !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
column-gap:28px !important;
row-gap:6px !important;
align-items:center !important;
list-style:none !important; /* 黒ポチを完全に無効化 */
}
/* 「● Keywords」のタブ（塗りを濃いオレンジに） */
body ul.keywords.keywords--show::before,
body ul.keywords::before{ /* 念のため通常の ul.keywords にも効かせる */
content:"● Keywords" !important;
background:var(--orange-900) !important;
color:#fff !important;
}
/* キーワード項目の中身（pill装飾/緑色/角丸を全リセット） */
body ul.keywords.keywords--show li,
body ul.keywords.keywords--show li .tag{
display:inline-flex !important;
align-items:center !important;
gap:0 !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
padding:0 !important;
color:#1b1b1b !important; /* 文字色は本文色に統一 */
font-weight:800 !important;
white-space:nowrap !important;
}
/* ✔ の色（緑上書きを無効化してオレンジ固定） */
body ul.keywords.keywords--show > li::before{
content:"✔" !important;
position:static !important;
margin-right:6px !important;
color:var(--orange-500) !important;
font-size:1.02rem !important;
font-weight:900 !important;
line-height:1 !important;
pointer-events:none !important;
}
/* .tag 側の疑似で色や丸が被るケースを完全停止 */
body ul.keywords.keywords--show li .tag::before,
body ul.keywords.keywords--show li .tag::after{
content:none !important;
}
/* レスポンシブ（従来どおり） */
@media (max-width:960px){
body ul.keywords.keywords--show{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:560px){
body ul.keywords.keywords--show{ grid-template-columns:1fr !important; }
body ul.keywords.keywords--show li{ white-space:normal !important; }
}
/* ========== 2) 脚注：下線と“矢印”アイコン ========== */
/* ラベル文字＆ “テキストの下線” をオレンジ固定 */
body .footnotes-local .fn-title{
color:var(--orange-900) !important;
text-decoration-line:underline !important;
text-decoration-thickness:2px !important;
text-underline-offset:3px !important;
text-decoration-color:var(--orange-500) !important; /* ← 下線色を固定 */
}
/* 旧デザインの ::after 下線グラデが残っている場合を停止（ゼロ高にして透明） */
body .footnotes-local .fn-title::after{
height:0 !important;
background:none !important;
box-shadow:none !important;
border:0 !important;
}
/* ラベル左の“本”アイコン色をオレンジ */
body .footnotes-local .fn-title::before{
background:var(--orange-900) !important;
}
/* “矢印”アイコン（各脚注の末尾/右側に付く丸矢印）をオレンジ固定
多くの場合、li::after / a[href^="http"]::after / ::before のいずれかで描画。*/
body .footnotes-local li::after,
body .footnotes-local li::before,
body .footnotes-local a[href^="http"]::after,
body .footnotes-local a[href^="http"]::before{
/* マスクで描いている場合：塗り色は background で決まる */
background: var(--orange-500) !important; /* ← 矢印の塗り（オレンジ） */
color: var(--orange-500) !important; /* テキストベースの矢印にも効くよう保険 */
/* 既存の位置/サイズ指定はそのまま活かす（上書き不要） */
}
/* もし“丸付き矢印”の丸だけが緑のまま残る場合は、丸背景も潰す */
body .footnotes-local li .arrow,
body .footnotes-local li .circle,
body .footnotes-local li .dot{
background: rgba(242,131,0,.18) !important; /* 薄オレンジ系の丸背景 */
border-color: var(--orange-500) !important;
}
/* 外部リンクの小アイコン（既存は緑）もオレンジに */
body .footnotes-local a[href^="http"]::before{
background: var(--orange-500) !important;
}
/* ==========================================================
FINAL OVERRIDES (High Specificity + !important)
- 貼り付け位置：styles.css の一番最後
- 目的：キーワード枠が緑に戻る/脚注アイコンが緑のまま → すべてオレンジ固定
========================================================== */
:root{
--orange-900:#7A2E00; /* 濃いオレンジ（見出し/タブ） */
--orange-700:#BF5A00;
--orange-600:#D86E00; /* 下線/アクセント */
--orange-500:#F28300; /* 枠/チェック/アイコン */
--orange-300:#FFD1A6;
}
/* ========== 1) キーワード「枠」：あらゆる親連結に勝つ指定で固定 ========== */
/* 外枠・背景・影・レイアウト（※親連結を複数用意して特異性で上回る） */
body ul.keywords.keywords--show,
body .section--profile ul.keywords.keywords--show,
body .section--profile .profiles ul.keywords.keywords--show,
body .section--profile .profiles .profile-card ul.keywords.keywords--show,
body .section--profile .profiles .profile-card:first-of-type ul.keywords.keywords--show{
display:grid !important;
position:relative !important;
margin:24px 0 0 !important;
padding:12px 20px !important;
border:2px solid var(--orange-500) !important; /* ← 緑枠より強く上書き */
border-radius:10px !important;
background:#FFF4E8 !important; /* ← 薄オレンジ */
box-shadow:0 10px 26px rgba(191,90,0,.12) !important;
grid-template-columns:repeat(3,minmax(0,1fr)) !important;
column-gap:28px !important;
row-gap:6px !important;
align-items:center !important;
list-style:none !important; /* 黒ポチを全消し */
}
/* タブ（● Keywords）塗りを濃いオレンジへ */
body ul.keywords.keywords--show::before,
body .section--profile .profiles .profile-card:first-of-type ul.keywords.keywords--show::before,
body ul.keywords::before{ /* 念のため通常のul.keywordsにも */
content:"● Keywords" !important;
background:var(--orange-900) !important;
color:#fff !important;
}
/* 中のテキスト/Pill装飾を完全リセット（緑の角丸/影を無効化） */
body ul.keywords.keywords--show li,
body ul.keywords.keywords--show li .tag,
body .section--profile .profiles .profile-card:first-of-type ul.keywords.keywords--show li,
body .section--profile .profiles .profile-card:first-of-type ul.keywords.keywords--show li .tag{
display:inline-flex !important;
align-items:center !important;
gap:0 !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
border-radius:0 !important;
padding:0 !important;
color:#1b1b1b !important; /* 本文色で締める */
font-weight:800 !important;
white-space:nowrap !important;
}
/* ✔ の色（緑→オレンジ）。親連結でさらに強く */
body ul.keywords.keywords--show > li::before,
body .section--profile .profiles .profile-card:first-of-type ul.keywords.keywords--show > li::before{
content:"✔" !important;
position:static !important;
margin-right:6px !important;
color:var(--orange-500) !important; /* ← ここがチェック色 */
font-size:1.02rem !important;
font-weight:900 !important;
line-height:1 !important;
pointer-events:none !important;
}
/* .tag 側の疑似が上から被るケースを停止 */
body ul.keywords.keywords--show li .tag::before,
body ul.keywords.keywords--show li .tag::after,
body .section--profile .profiles .profile-card:first-of-type ul.keywords.keywords--show li .tag::before,
body .section--profile .profiles .profile-card:first-of-type ul.keywords.keywords--show li .tag::after{
content:none !important;
}
/* タブレット/スマホの列数は従来どおり */
@media (max-width:960px){
body ul.keywords.keywords--show{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:560px){
body ul.keywords.keywords--show{ grid-template-columns:1fr !important; }
body ul.keywords.keywords--show li{ white-space:normal !important; }
}
/* ========== 2) 脚注：下線 & 右側の“丸矢印”をオレンジへ ========== */
/* ラベル文字と「テキストの下線」 */
body .footnotes-local .fn-title{
color:var(--orange-900) !important;
text-decoration-line:underline !important;
text-decoration-thickness:2px !important;
text-underline-offset:3px !important;
text-decoration-color:var(--orange-500) !important; /* ← オレンジ下線 */
}
/* 旧下線（::after の帯/グラデ）を無効化 */
body .footnotes-local .fn-title::after{
height:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
}
/* 左の本アイコン色 */
body .footnotes-local .fn-title::before{ background:var(--orange-900) !important; }
/* 末尾の“丸矢印”（li や a の ::before/::after で描画されることが多い） */
body .footnotes-local li::after,
body .footnotes-local li::before,
body .footnotes-local a[href^="http"]::after,
body .footnotes-local a[href^="http"]::before{
/* マスク利用でも、テキスト矢印でも効くよう双方指定 */
background:var(--orange-500) !important;
color:var(--orange-500) !important;
}
/* “丸付き矢印”で丸だけ緑が残るケースの保険 */
body .footnotes-local .arrow,
body .footnotes-local .circle,
body .footnotes-local .dot{
background:rgba(242,131,0,.18) !important;
border-color:var(--orange-500) !important;
}
/* === Global Orange Theme Patch (color-only; layout untouched) === */
:root {
/* Orange palette */
--orange-900: #7A2E00; /* deep accent */
--orange-800: #9C3F00;
--orange-700: #BF5A00;
--orange-600: #D86E00; /* underline/accent */
--orange-500: #F28300; /* primary accent */
--orange-300: #FFD1A6;
/* Map existing green tokens to orange */
--green-900: var(--orange-900);
--green-800: var(--orange-800);
--green-700: var(--orange-700);
--green-600: var(--orange-600);
--green-500: var(--orange-500);
--green-300: var(--orange-300);
/* Accents used by components */
--headline-grad: linear-gradient(90deg, #FFDAB8 0%, #F6A34D 50%, #F28300 100%);
--nbg: var(--orange-500);
--nbg-dark: var(--orange-900);
--qa-underline-color: var(--orange-600);
}
/* Small accents (no layout properties changed) */
body .brand { color: var(--orange-900); }
.hero { background: linear-gradient(180deg, #FFF7F0 0%, #FFFFFF 60%); }
.dot.active {
background: linear-gradient(135deg, var(--orange-700), var(--orange-500));
border-color: #ffe7cc;
}
.qa .qa-icon, .section .qa dt .qa-icon {
background: linear-gradient(135deg, var(--orange-800), var(--orange-500));
box-shadow: 0 6px 14px rgba(191, 90, 0, .25);
}
.section .headline .num-badge { background: var(--nbg); }
.section .headline .num-badge::after { border-color: var(--nbg-dark); }
.section .qa .qa-q-text { text-decoration-color: var(--qa-underline-color); }
/* Footnotes small accents */
.footnotes-local .fn-title { color: var(--orange-900); }
.footnotes-local a[href^="http"]::before { background: var(--orange-500); }
/* === Keywords (Orange unified) === */
ul.keywords { border: 2px solid var(--orange-500); background: #FFF4E8; }
ul.keywords::before { content: '● Keywords'; background: var(--orange-900); color:#fff; }
ul.keywords > li::before { content: '✔'; margin-right: 6px; color: var(--orange-500); font-weight: 900; }
/* ===== Keywords – inside the box: unify to orange (color-only) ===== */
ul.keywords {
/* in-box palette */
--kw-bg: #FFF4E8; /* ごく薄いオレンジ（背景） */
--kw-text: #7A2E00; /* 文字の基本色（やや濃い） */
--kw-accent: #F28300; /* チェック・枠などのアクセント */
--kw-strong: #9C3F00; /* 強調用（見出し/太字時など） */
background: var(--kw-bg); /* ← すでに設定済みなら上書き */
border-color: var(--kw-accent); /* 枠のオレンジは維持 */
}
/* 文字色を“濃いオレンジ”に統一（本文色より強め） */
ul.keywords > li,
ul.keywords > li .tag {
color: var(--kw-text) !important;
font-weight: 800; /* 既存の太さを維持/強調 */
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
/* ✔ チェックアイコンをオレンジ（枠と同系）に */
ul.keywords > li::before {
content: "✔" !important;
color: var(--kw-accent) !important;
font-weight: 900 !important;
margin-right: 6px !important; /* 0–6pxでお好み調整可 */
position: static !important; /* 通常フローにしてズレを防止 */
transform: none !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* 強調（など）が入った場合は、さらに濃いオレンジで締める */
ul.keywords strong {
color: var(--kw-strong);
}
/* タブラベル（● Keywords）は“濃いオレンジ”のまま・白文字で可読性確保 */
ul.keywords::before {
content: "● Keywords"; /* 「● キーワード」に変える場合はここを変更 */
background: #7A2E00; /* = var(--kw-text) と同系の濃色 */
color: #fff;
}
/* レスポンシブ（列落ち）は従来通り（変更なし） */
@media (max-width: 960px) {
ul.keywords { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
ul.keywords { grid-template-columns: 1fr; }
ul.keywords > li { white-space: normal; }
}
/* ===== Keywords: 強制オレンジ化（背景・文字・アイコン・影）===== */
/* 枠そのもの（背景・枠線・影） */
body .section--profile ul.keywords,
body ul.keywords {
--kw-bg: #FFF4E8; /* ごく薄いオレンジ */
--kw-text: #7A2E00; /* 濃いめの文字色 */
--kw-accent: #F28300; /* チェック/枠などのアクセント */
background: var(--kw-bg) !important; /* ← 緑の #F7FCFA を上書き */
border-color: var(--kw-accent) !important; /* 既定の枠オレンジを維持 */
box-shadow: 0 10px 26px rgba(191, 90, 0, .12) !important; /* 影もオレンジ系に */
}
/* タブラベル（● Keywords）— 濃いオレンジ地＋白文字 */
body ul.keywords::before {
content: "● Keywords";
background: #7A2E00 !important;
color: #fff !important;
}
/* 項目（文字と✔）— 文字は濃いオレンジ、✔はアクセントオレンジ */
body ul.keywords > li,
body ul.keywords > li .tag {
color: var(--kw-text) !important;
font-weight: 800;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
body ul.keywords > li::before {
content: "✔" !important;
color: var(--kw-accent) !important;
font-weight: 900 !important;
margin-right: 6px !important;
position: static !important;
transform: none !important;
line-height: 1 !important;
pointer-events: none !important;
}
/* （保険）“pill風”の丸背景や擬似要素が重なっても消す */
body ul.keywords > li .tag::before,
body ul.keywords > li .tag::after { content: none !important; }
/* レスポンシブは既存を踏襲（列落ちはそのまま） */
@media (max-width: 960px) {
body ul.keywords { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 560px) {
body ul.keywords { grid-template-columns: 1fr !important; }
body ul.keywords > li { white-space: normal !important; }
}
/* ===== Keywords（背景だけ、さらに薄く）======================== */
/* 推奨トーンA：#FFF7F0（ごく薄い、ほんのり温かい） */
body .section--profile ul.keywords,
body ul.keywords {
--kw-bg: #FFF7F0; /* ← ここを薄く */
background: var(--kw-bg) !important;
/* 既存の枠線や影はそのまま（前回パッチが活きます） */
}
/* 参考トーンB：#FFFAF5（さらに白寄り。Aよりわずかに明るい）
body .section--profile ul.keywords,
body ul.keywords {
--kw-bg: #FFFAF5;
background: var(--kw-bg) !important;
}
*/
/* 既存の文字・チェックのオレンジは維持されます（変更不要） */
/* ul.keywords > li { color: var(--kw-text) !important; } */
/* ul.keywords > li::before { color: var(--kw-accent) !important; } */
/* === 01セクション用：Q&Aを幅いっぱい + 写真2枚を上下 ============= */
/* 1) Q&A（テキスト部）をセクション幅いっぱいに */
.section .qa-row.qa-row--fullwidth {
display: block !important; /* 2カラムグリッドを解除して1カラムに */
width: 100% !important;
margin: 26px 0 !important; /* 既存の余白感を踏襲 */
}
.section .qa-row.qa-row--fullwidth .qa {
max-width: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
/* 2) 写真を“上下（縦1列）”に。セクション幅いっぱいで並べる */
.section .qa-photos.qa-photos--stackFull {
display: flex !important;
flex-direction: column !important;
gap: 16px !important; /* 上下間の余白：お好みで 12–24px */
width: 100% !important;
margin: 12px 0 0 !important; /* Q&A本文との距離 */
}
/* 3) 角丸なし（四角） & トリミングなし（縮小のみ） */
.section .qa-photos.qa-photos--stackFull .qa-photo,
.section .qa-photos.qa-photos--stackFull .qa-photo img,
.qa-photo--noRadius,
.qa-photo--noRadius img {
border-radius: 0 !important; /* 角丸を打ち消し */
}
.section .qa-photos.qa-photos--stackFull .qa-photo img,
.qa-photo--noCrop img {
width: 100% !important;
height: auto !important; /* 画像の縦横比を保持 */
object-fit: contain !important; /* 切り抜かない（画像全体を収める） */
aspect-ratio: auto !important; /* 既存の比率固定(16/10,21/9等)を解除 */
background: #fff; /* 余白が出る場合は白地で自然に */
border: 1px solid var(--border); /* 既存の枠トーンに合わせる（任意） */
box-shadow: none; /* 影は不要ならOFF（お好み） */
}
/* 4) モバイル時は写真間の間隔を少し詰める（任意） */
@media (max-width: 640px) {
.section .qa-photos.qa-photos--stackFull { gap: 12px !important; }
}
/* === Normalize one-line QA to match default QA look =================== */
/* 1) 「現在の業務内容を教えて下さい。」の QA が textOnly の影響を受けても揃うよう保険 */
.section .qa-row .qa {
max-width: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
/* 2) Q見出しの色・太さ・並び（通常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;
color: #0b1f33 !important; /* ← 通常QAの本文色に合わせる */
}
/* 3) Qテキストの下線色も他QAと同系（オレンジに統一している場合は変数で） */
.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, #D86E00) !important;
}
/* 4) Qアイコン（左の丸）も他QAと同じグラデ/サイズ */
.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(--orange-800, #9C3F00), var(--orange-500, #F28300)) !important;
box-shadow: 0 6px 14px rgba(191,90,0,.25) !important;
font-size: 0 !important;
line-height: 0 !important;
}
/* 5) 回答本文（dd）の左インデント/色も通常形へ */
.section .qa dd {
margin: 0 0 12px !important;
padding-left: 38px !important; /* 通常QAと同じインデント幅 */
color: #2a3d56 !important; /* 通常本文色 */
}
/* 6) 仮に qa-row--textOnly が残っていても、幅と余白感を通常へ寄せる */
.section .qa-row.qa-row--textOnly {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 26px 0 !important; /* 18pxの左右マージンを消して中央寄せ感を回避 */
}
.section .qa-row.qa-row--textOnly .qa {
max-width: none !important;
padding-left: 0 !important;
margin: 0 !important;
}
/* === 写真を“小さく見せる”ための最大幅コントロール（縦1列ブロックのみ） === */
/* 1) 画像の最大幅を制限して中央寄せ（値はお好みで調整） */
.section .qa-photos.qa-photos--stackFull .qa-photo img {
max-width: 560px !important; /* ← 例：560pxまでに縮める */
width: 100% !important; /* 親幅に応じて縮小は許可 */
height: auto !important; /* 縦横比は保持 */
object-fit: contain !important; /* トリミングしない（全体表示） */
display: block;
margin: 0 auto; /* 画像を中央揃え */
}
/* 2) figure 自体も最大幅に合わせて中央に（枠や影を使う場合に均整が取れる） */
.section .qa-photos.qa-photos--stackFull .qa-photo {
max-width: 560px !important; /* 画像と同じ数値にしておくと枠線も揃う */
margin: 0 auto; /* figure を中央寄せ */
border-radius: 0 !important; /* 角丸OFF（四角） */
}
/* 3) モバイルは自然に“全幅”で見せる（可読性のため） */
@media (max-width: 640px) {
.section .qa-photos.qa-photos--stackFull .qa-photo,
.section .qa-photos.qa-photos--stackFull .qa-photo img {
max-width: 100% !important; /* 端末幅に追従（= 縮め過ぎない） */
}
}
/* ==========================================================
Blue Theme Patch (override-only; place at the very end)
- 既存の --green-* トークンや Orange Patch を青系へ再マップ
- レイアウトの数値変更は一切ありません（色のみ）
========================================================== */
/* 1) パレット定義 & 既存トークン再マップ */
:root {
/* Blue scale */
--blue-900: #0B3A6E; /* 深い藍色（強調・見出し・タブ） */
--blue-800: #144D8C;
--blue-700: #1E63B1; /* 主要アクセント濃色 */
--blue-600: #2A79D6; /* 下線・アクセント */
--blue-500: #3D8BFF; /* プライマリアクセント */
--blue-300: #CFE1FF; /* 淡色アクセント（ホバー/背景） */
/* 既存の “緑” トークンを青へ再マップ（構成そのまま） */
--green-900: var(--blue-900);
--green-800: var(--blue-800);
--green-700: var(--blue-700);
--green-600: var(--blue-600);
--green-500: var(--blue-500);
--green-300: var(--blue-300);
/* コンポーネントが使う派生トークンも青へ */
--headline-grad: linear-gradient(90deg, #D8E7FF 0%, #82B1FF 50%, #3D8BFF 100%);
--nbg: var(--blue-500);
--nbg-dark: var(--blue-900);
--qa-underline-color: var(--blue-600);
/* キーワードボックス内の色（既存指定に合わせて定義） */
--kw-pill-glow: rgba(61,139,255,.16);
--kw-pill-glow-hover: rgba(61,139,255,.28);
}
/* 2) ベースの小要素（ブランド、ヒーロー背景、スライドドット、QAアイコンなど） */
body .brand { color: var(--blue-900) !important; }
.hero { background: linear-gradient(180deg, #F5F9FF 0%, #FFFFFF 60%) !important; }
.dot.active {
background: linear-gradient(135deg, var(--blue-700), var(--blue-500)) !important;
border-color: #e6efff !important;
}
.qa .qa-icon,
.section .qa dt .qa-icon {
background: linear-gradient(135deg, var(--blue-800), var(--blue-500)) !important;
box-shadow: 0 6px 14px rgba(30, 99, 177, .25) !important;
}
.section .headline .num-badge { background: var(--nbg) !important; color:#fff !important; }
.section .headline .num-badge::after { border-color: var(--nbg-dark) !important; }
.section .qa .qa-q-text { text-decoration-color: var(--qa-underline-color) !important; }
/* 見出しの下・帯グラデ（既存の :before アニメと連動） */
body .section .headline::before {
background: var(--headline-grad) !important;
}
/* 3) “緑やオレンジでハードコード”されがちな箇所の色を青で上書き */
.name::after {
/* プロフィール名下の帯 */
background: linear-gradient(90deg, var(--blue-900), var(--blue-600)) !important;
box-shadow: 0 2px 6px rgba(30,99,177,.25) !important;
}
.bio-title {
background: linear-gradient(90deg, var(--blue-800), var(--blue-500)) !important;
}
.section .intro--circle-title,
.section .intro--bracket {
color: var(--blue-900) !important;
text-shadow: 0 0 2px #fff !important;
}
.section .intro--circle-title::before,
.section .intro--bracket::before {
background: rgba(61,139,255,.38) !important; /* = --blue-500 38% */
}
/* 4) キーワード枠（ul.keywords）— 枠・タブ・チェック・文字を青へ統一 */
body .section--profile ul.keywords,
body ul.keywords {
--kw-bg: #F7FAFF; /* ごく薄いブルー背景 */
--kw-text: #0B3A6E; /* 文字の基本色（濃い藍） */
--kw-accent: #3D8BFF; /* 枠や✔のアクセント */
background: var(--kw-bg) !important;
border-color: var(--kw-accent) !important;
box-shadow: 0 10px 26px rgba(30, 99, 177, .12) !important;
}
body ul.keywords::before {
content: "● Keywords";
background: var(--blue-900) !important;
color: #fff !important;
}
body ul.keywords > li,
body ul.keywords > li .tag {
color: var(--kw-text) !important;
font-weight: 800;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
body ul.keywords > li::before {
content: "✔" !important;
position: static !important;
margin-right: 6px !important;
color: var(--kw-accent) !important;
font-weight: 900 !important;
line-height: 1 !important;
pointer-events: none !important;
}
body ul.keywords > li .tag::before,
body ul.keywords > li .tag::after { content: none !important; }
/* 5) 脚注UI（タイトル・下線・外部リンクアイコン等） */
.footnotes-local .fn-title {
color: var(--blue-900) !important;
text-decoration-line: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
text-decoration-color: var(--blue-500) !important;
}
.footnotes-local .fn-title::after {
/* 旧来の帯グラデを確実に無効化 */
height: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
.footnotes-local .fn-title::before {
/* 左の“本”アイコンの塗り */
background: var(--blue-900) !important;
}
.footnotes-local a[href^="http"]::before {
/* 外部リンクの小アイコンの塗り */
background: var(--blue-500) !important;
}
/* 6) 既存の Orange Patch 群よりも強く“青”で確定させる最終上書き（保険） */
body ul.keywords.keywords--show,
body .section--profile ul.keywords.keywords--show,
body .section--profile .profiles .profile-card ul.keywords.keywords--show {
border: 2px solid var(--blue-500) !important;
background: #F5F9FF !important; /* さらに白寄りの薄青 */
box-shadow: 0 10px 26px rgba(30, 99, 177, .12) !important;
}
body ul.keywords.keywords--show::before { background: var(--blue-900) !important; color:#fff !important; }
body ul.keywords.keywords--show > li::before { color: var(--blue-500) !important; }
/* QA の“点線下線色”を青に固定（旧パッチが残っても勝つ） */
body .section .qa .qa-q-text { text-decoration-color: var(--blue-600) !important; }
/* ==========================================================
Blue Kill‑Switch (place at the very end of styles.css)
- 既存の Orange Patch よりも後勝ちさせて “青” で固定
- レイアウト値は変更しません（色のみ）
========================================================== */
/* 0) “オレンジ変数” 自体を青へ再マップ（網羅的に置換） */
:root {
--blue-900: #0B3A6E; /* 濃い藍 */
--blue-800: #144D8C;
--blue-700: #1E63B1;
--blue-600: #2A79D6;
--blue-500: #3D8BFF;
--blue-300: #CFE1FF;
/* Orange tokens → Blue */
--orange-900: var(--blue-900);
--orange-800: var(--blue-800);
--orange-700: var(--blue-700);
--orange-600: var(--blue-600);
--orange-500: var(--blue-500);
--orange-300: var(--blue-300);
/* 既存 “緑” トークンも青へ（念のため二重マップ） */
--green-900: var(--blue-900);
--green-800: var(--blue-800);
--green-700: var(--blue-700);
--green-600: var(--blue-600);
--green-500: var(--blue-500);
--green-300: var(--blue-300);
/* 帯・バッジ・下線の派生トークンを青に固定 */
--headline-grad: linear-gradient(90deg, #D8E7FF 0%, #82B1FF 50%, #3D8BFF 100%);
--nbg: var(--blue-500);
--nbg-dark: var(--blue-900);
--qa-underline-color: var(--blue-600);
/* キーワード用の発光色も青 */
--kw-pill-glow: rgba(61,139,255,.16);
--kw-pill-glow-hover: rgba(61,139,255,.28);
}
/* 1) 見出しバッジ（01…）・見出し帯 */
body .section .headline .num-badge {
background: var(--blue-500) !important; color:#fff !important;
}
body .section .headline .num-badge::after {
border-color: var(--blue-900) !important;
}
body .section .headline::before {
background: var(--headline-grad) !important;
}
/* 2) QAアイコン（左の丸）・下線色 */
body .qa .qa-icon,
body .section .qa dt .qa-icon {
background: linear-gradient(135deg, var(--blue-800), var(--blue-500)) !important;
box-shadow: 0 6px 14px rgba(30,99,177,.25) !important;
}
body .section .qa .qa-q-text { text-decoration-color: var(--blue-600) !important; }
/* 3) プロフィール系の帯やラベル（「略歴」など） */
body .bio-title {
background: linear-gradient(90deg, var(--blue-800), var(--blue-500)) !important;
}
body .name::after {
background: linear-gradient(90deg, var(--blue-900), var(--blue-600)) !important;
box-shadow: 0 2px 6px rgba(30,99,177,.25) !important;
}
/* 4) キーワード枠（枠/タブ/✔/文字）— オレンジ最終パッチより強く */
body ul.keywords,
body .section--profile ul.keywords,
body ul.keywords.keywords--show,
body .section--profile ul.keywords.keywords--show {
--kw-bg: #F5F9FF; /* 白寄り薄青 */
--kw-text: #0B3A6E; /* 藍 */
--kw-accent: #3D8BFF; /* 枠・✔ */
background: var(--kw-bg) !important;
border: 2px solid var(--kw-accent) !important;
box-shadow: 0 10px 26px rgba(30,99,177,.12) !important;
}
body ul.keywords::before,
body ul.keywords.keywords--show::before {
content: "● Keywords" !important;
background: var(--blue-900) !important;
color: #fff !important;
}
body ul.keywords > li,
body ul.keywords > li .tag {
color: var(--kw-text) !important;
background: transparent !important; border:0 !important; box-shadow:none !important;
}
body ul.keywords > li::before {
content: "✔" !important;
color: var(--kw-accent) !important;
position: static !important; margin-right: 6px !important; line-height:1 !important;
}
/* 5) 脚注（ラベル色・下線・左の本アイコン・外部リンク） */
body .footnotes-local .fn-title {
color: var(--blue-900) !important;
text-decoration-line: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
text-decoration-color: var(--blue-500) !important;
}
body .footnotes-local .fn-title::after {
height:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
}
body .footnotes-local .fn-title::before { background: var(--blue-900) !important; }
body .footnotes-local a[href^="http"]::before { background: var(--blue-500) !important; }
/* 6) “オレンジのハードコード”を青で潰す（既存パッチの具体色対策） */
body .tag:hover {
background: linear-gradient(135deg, var(--blue-300) 0%, #ffffff 100%) !important;
border-color: #BFD4FF !important;
box-shadow: 0 8px 18px rgba(30,99,177,.12) !important;
}
/* オレンジ系の淡背景 #FFF4E8 を使う箱を薄青へ置換（保険） */
body ul.keywords,
body ul.keywords.keywords--show {
background: #F5F9FF !important;
}
/* オレンジ系の境界 #F6BF90 など → 青寄りに */
body .footnotes-local .fn-back {
border-color: #BFD4FF !important;
background: #EFF5FF !important;
}
/* === Leftover orange pill → force blue (last resort) === */
body .section :is(.pill, .label, .chip, .badge, .tag--emphasis, .intro--chip, .intro--label) {
background: linear-gradient(135deg, var(--blue-800), var(--blue-500)) !important;
color: #fff !important;
border-color: #BFD4FF !important;
box-shadow: 0 6px 14px rgba(30,99,177,.18) !important;
}
/* === FINAL FIX: intro circle orange killer === */
body .section .intro--circle-title::before {
background: rgba(61,139,255,.38) !important; /* blue-500 38% */
}
/* ==========================================================
Water-Blue (Mizuiro) Patch – color-only; place at the very end
- 既存の Blue/Green/Orange トークンを “水色” スケールへ再マップ
- レイアウトには一切触れません（色のみ）
========================================================== */
/* 1) パレット：水色スケール */
:root {
/* Mizuiro scale */
--sky-900: #01609A; /* 濃い水色（見出しタブ/強調） */
--sky-800: #1E8ED6;
--sky-700: #2AAEF2;
--sky-600: #48BFFF; /* 下線や細いアクセント */
--sky-500: #5CC8FF; /* 主アクセント（バッジ/アイコン） */
--sky-300: #DFF3FF; /* 淡い背景/ホバー */
/* 既存トークンを水色へ再マップ（後勝ちで全体を統一） */
--blue-900: var(--sky-900);
--blue-800: var(--sky-800);
--blue-700: var(--sky-700);
--blue-600: var(--sky-600);
--blue-500: var(--sky-500);
--blue-300: var(--sky-300);
--green-900: var(--sky-900);
--green-800: var(--sky-800);
--green-700: var(--sky-700);
--green-600: var(--sky-600);
--green-500: var(--sky-500);
--green-300: var(--sky-300);
--orange-900: var(--sky-900);
--orange-800: var(--sky-800);
--orange-700: var(--sky-700);
--orange-600: var(--sky-600);
--orange-500: var(--sky-500);
--orange-300: var(--sky-300);
/* 帯・バッジ・下線などの派生も水色系へ */
--headline-grad: linear-gradient(90deg, #EAF6FF 0%, #AEE3FF 50%, var(--sky-500) 100%);
--nbg: var(--sky-500);
--nbg-dark: var(--sky-900);
--qa-underline-color: var(--sky-600);
/* キーワード用の発光（影）の色 */
--kw-pill-glow: rgba(92,200,255,.16);
--kw-pill-glow-hover: rgba(92,200,255,.28);
}
/* 2) よく残りがちなハードコード色の最終上書き（水色固定） */
body .brand { color: var(--sky-900) !important; }
.hero { background: linear-gradient(180deg, #F7FBFF 0%, #FFFFFF 60%) !important; }
.dot.active {
background: linear-gradient(135deg, var(--sky-700), var(--sky-500)) !important;
border-color: #e9f5ff !important;
}
.qa .qa-icon,
.section .qa dt .qa-icon {
background: linear-gradient(135deg, var(--sky-800), var(--sky-500)) !important;
box-shadow: 0 6px 14px rgba(30, 140, 200, .25) !important;
}
.section .headline .num-badge { background: var(--nbg) !important; color:#fff !important; }
.section .headline .num-badge::after { border-color: var(--nbg-dark) !important; }
.section .qa .qa-q-text { text-decoration-color: var(--qa-underline-color) !important; }
body .section .headline::before { background: var(--headline-grad) !important; }
.name::after {
background: linear-gradient(90deg, var(--sky-900), var(--sky-600)) !important;
box-shadow: 0 2px 6px rgba(30,140,200,.25) !important;
}
.bio-title { background: linear-gradient(90deg, var(--sky-800), var(--sky-500)) !important; }
/* 3) キーワード枠（背景/枠/✔/タブラベルの水色化） */
body .section--profile ul.keywords,
body ul.keywords,
body ul.keywords.keywords--show {
--kw-bg: #F2FAFF; /* さらに白寄りの淡水色 */
--kw-text: var(--sky-900);
--kw-accent: var(--sky-500);
background: var(--kw-bg) !important;
border: 2px solid var(--kw-accent) !important;
box-shadow: 0 10px 26px rgba(30,140,200,.12) !important;
}
body ul.keywords::before,
body ul.keywords.keywords--show::before {
content: "● Keywords" !important;
background: var(--sky-900) !important;
color: #fff !important;
}
body ul.keywords > li,
body ul.keywords > li .tag { }
/* =========================================================
専用レイアウト：snowRow（左：写真／右：テキスト）
対象：images/帯広市内積雪状況.jpg のブロックのみ
ポイント：
- 既存 .qa-row / .qa-photo の指定と競合させない
- 画像は 10/12（=5:6）に固定。cover/contain切替も用意
- PCは2カラム、SPは1カラム
- 必ず styles.css の最末尾に置く
========================================================= */
/* 行の骨組み（PC：2カラム） */
.snowRow {
display: grid;
align-items: start;
margin: 26px 0;
padding-left: 12px; /* 外側18px + 12px = 左30px相当 */
box-sizing: border-box;
gap: 40px;
grid-template-columns: minmax(340px, 36%) 1fr !important;
}
/* 左：写真 */
.snowRow__photo {
margin: 0;
padding: 0;
min-width: 0;
}
/* 画像：10/12（=5:6）に固定。既存の16/10 !important を無効化する */
.snowRow__photo img {
width: 100% !important;
height: auto !important;
aspect-ratio: 10 / 12 !important; /* ← ここが最重要（固定比率）*/
object-fit: cover !important; /* 既定：トリミング優先 */
object-position: 50% 50% !important; /* 必要に応じて 50% 42% などへ */
border-radius: 20px; /* 既存の角丸に揃える */
border: 1px solid var(--border);
box-shadow: 0 10px 28px rgba(5,17,33,.14);
max-height: 720px; /* PC安全弁（640–780pxで調整可）*/
}
/* 全体表示（トリミング無し）に切り替えたい時のオプション */
.snowRow__photo--contain img {
object-fit: contain !important;
background: #fff;
box-shadow: none;
}
/* キャプション（既存トーンに合わせる） */
.snowRow__photo figcaption {
margin-top: 8px;
color: var(--muted, #4d5b6a);
font-size: 0.92rem;
line-height: 1.5;
text-align: center;
}
/* 右：テキスト側（既存 qa の見た目を利用しつつ、はみ出し防止） */
.snowRow__text { min-width: 0; }
/* タブレット：読みやすさ優先で少し緩める */
@media (max-width: 1024px) {
.snowRow {
padding-left: 8px;
gap: 32px !important;
grid-template-columns: minmax(320px, 40%) 1fr !important;
}
.snowRow__photo img { max-height: 540px !important; }
}
/* スマホ：1カラム落ち（既存動作）。左余白加算は解除 */
@media (max-width: 640px) {
.snowRow { padding-left: 0; gap: 18px !important; }
.snowRow__photo img { max-height: none !important; }
}
/* === 強制上書き（gap・左余白・列幅を確実に適用）=== */
.snowRow {
padding-left: 16px !important; /* 左側スペース: 18px(セクション) + 16px = 見かけ34px相当 */
gap: 40px !important; /* 写真-テキスト間の横ギャップを広めに強制 */
grid-template-columns: minmax(360px, 38%) 1fr !important; /* 写真カラムを一回り細く（＝写真は小さく） */
}
.snowRow__photo img {
max-height: 600px !important; /* 縦の占有も少し抑える（お好みで 580〜620px） */
/* 必要なら被写体の見せ方微調整：
object-position: 50% 42% !important;
*/
}
/* タブレット以下（読みやすさ優先で緩め） */
@media (max-width: 1024px) {
.snowRow {
padding-left: 8px !important;
gap: 32px !important;
grid-template-columns: minmax(320px, 40%) 1fr !important;
}
.snowRow__photo img { max-height: 540px !important; }
}
/* スマホ（1カラム） */
@media (max-width: 640px) {
.snowRow {
padding-left: 0 !important;
gap: 22px !important;
}
.snowRow__photo img { max-height: none !important; }
}
/* === 強制上書き（gap・左余白・列幅を確実に適用）=== */
.snowRow {
padding-left: 16px !important; /* 左側スペース: 18px(セクション) + 16px = 見かけ34px相当 */
gap: 46px !important; /* 写真-テキスト間の横ギャップを広めに強制 */
grid-template-columns: minmax(360px, 36%) 1fr !important; /* 写真カラムを一回り細く（＝写真は小さく） */
}
.snowRow__photo img {
max-height: 580px !important; /* 縦の占有も少し抑える（お好みで 580〜620px） */
/* 必要なら被写体の見せ方微調整：
object-position: 50% 42% !important;
*/
}
/* タブレット以下（読みやすさ優先で緩め） */
@media (max-width: 1024px) {
.snowRow {
padding-left: 8px !important;
gap: 32px !important;
grid-template-columns: minmax(320px, 40%) 1fr !important;
}
.snowRow__photo img { max-height: 540px !important; }
}
/* スマホ（1カラム） */
@media (max-width: 640px) {
.snowRow {
padding-left: 0 !important;
gap: 18px !important;
}
.snowRow__photo img { max-height: none !important; }
}
/* 資料用画像：角丸なし・影なし・トリミングなし（共通） */
.qa-docs-figure img,
.qa-docs-wide img,
.qa-docs-single img {
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid var(--border, #e5eef7);
background: #fff;
object-fit: contain !important; /* ← トリミングしない */
width: 100%;
height: auto;
aspect-ratio: auto !important; /* 既存比率強制を上書き */
image-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* ====== 新規追加2：単独画像を“少し小さく”＆中央寄せ ====== */
/* ベースは既存の .qa-docs-single の見た目（角丸/影なし/contain）を継承 */
.qa-docs-single.qa-docs-single--sm {
/* 画像ブロック全体を中央寄せ */
display: block;
max-width: 72%; /* ← PCで少し小さめに見せる主値（目安：68〜78%） */
margin: 18px auto 0; /* 上に少し余白＋中央寄せ */
}
.qa-docs-single.qa-docs-single--sm img {
width: 100%;
height: auto;
object-fit: contain !important; /* ← トリミングなし */
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid var(--border, #e5eef7);
background: #fff;
/* 画面が広すぎる場合の“縦の暴れ”防止（任意で微調整） */
max-height: 640px; /* 560〜720pxで調整可。文字量に応じて変更 */
}
/* タブレット：やや大きめ（可読性重視） */
@media (max-width: 1024px) {
.qa-docs-single.qa-docs-single--sm {
max-width: 84%;
}
}
/* スマホ：1カラムで等倍（横幅いっぱいいっぱい） */
@media (max-width: 640px) {
.qa-docs-single.qa-docs-single--sm {
max-width: 100%;
}
.qa-docs-single.qa-docs-single--sm img {
max-height: none; /* スマホは自然な高さでOK */
}
}
/* ====== 単独画像のキャプション（中央寄せ・控えめ） ====== */
/* キャプション要素 */
.qa-docs-caption {
margin-top: 8px;
text-align: center;
color: var(--muted, #4d5b6a);
font-size: 0.92rem;
line-height: 1.5;
}
/* ベースが figure であることを明示（将来の拡張用） */
.qa-docs-single.qa-docs-single--sm {
display: block; /* 既存指定を再掲（保険） */
max-width: 72%; /* PCで少し小さめ */
margin: 18px auto 0; /* 上に少し余白＋中央寄せ */
}
/* 画像ルールは既存のまま（角丸なし/影なし/contain/枠あり）でOK */
.qa-docs-single.qa-docs-single--sm img {
width: 100%;
height: auto;
object-fit: contain !important;
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid var(--border, #e5eef7);
background: #fff;
max-height: 640px; /* 560〜720pxで調整可 */
}
/* タブレット：少しだけ大きめ */
@media (max-width: 1024px) {
.qa-docs-single.qa-docs-single--sm { max-width: 84%; }
}
/* スマホ：横幅いっぱいに。キャプションは読みやすく維持 */
@media (max-width: 640px) {
.qa-docs-single.qa-docs-single--sm { max-width: 100%; }
.qa-docs-single.qa-docs-single--sm img { max-height: none; }
.qa-docs-caption { font-size: 0.9rem; }
}
.footnotes-local a {
color: #666 !important; /* 薄いグレー（本文になじむ） */
text-decoration: underline;
text-decoration-color: #999; /* 控えめな薄グレー下線 */
text-underline-offset: 2px;
}
.footnotes-local a:hover {
text-decoration-color: #777;
}
/* 外部リンクの小アイコンもグレーで統一 */
.footnotes-local a[href^="http"]::before {
background: #777 !important;
}
/* 本文側の上付き脚注番号(^1)もニュートラル化＆寄せ */
sup.footnote-ref,
sup.footnote-ref a {
color: #666 !important;
text-decoration: none;
}
/* ===== FIX#3: 脚注「↩」をSVGに固定（端末差ゼロ） ===== */
.footnotes-local .fn-back{
position: relative;
color: transparent !important; /* テキストは不可視 */
-webkit-text-fill-color: transparent !important;
overflow: hidden;
}
.footnotes-local .fn-back::before{
content:"";
position:absolute; inset:0; margin:auto;
width:12px; height:12px;
background: var(--orange-500, #F28300);
-webkit-mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
}
/* ========== 脚注番号（上付き）の視覚位置を揃える ========== */
.section--profile .profile-meta .role .footnote-ref {
position: relative;
top: -1px; /* 0〜-2pxで微調整可。上ずりを抑える */
margin-left: 3px; /* 役職文との密着を回避 */
font-size: 0.72em;
line-height: 0;
}
.section--profile .profile-meta .role .footnote-ref a {
color: #666; /* ニュートラルグレー（ご指定方針） */
text-decoration: 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;
}
}
/* ===== FIX#4: SPでは縦レイアウトに合わせて「下向き」矢印に ===== */
@media (max-width: 640px){
.before-after__arrow,
.before-after__arrow--bold{
justify-self: center;
width: min(84px, 18vw);
height: min(84px, 18vw);
background: var(--nbg, var(--orange-500, #F28300));
-webkit-mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
filter: drop-shadow(0 6px 14px rgba(5,17,33,.18));
}
}
/* ====== FIX: 帯広「積雪状況」図版をSPで崩さない・containで中央寄せ ====== */
/* 1) 該当ブロックの画像はグローバル aspect-ratio 強制をキャンセル */
.obihiro-snow img{
aspect-ratio: auto !important; /* ← 16/10 や 16/9 の強制を無効化 */
width: 100% !important;
height: auto !important; /* 画像の本来比率を維持 */
object-fit: contain !important; /* トリミングをやめて全体を見せる */
object-position: 50% 50% !important; /* 中央寄せ */
border-radius: 0 !important; /* 図版なので角丸/影はオフ（任意） */
box-shadow: none !important;
border: 1px solid var(--border, #e5eef7);
background: #fff;
max-height: 70vh; /* PCで縦に伸び過ぎない安全弁（任意） */
}
/* 2) ブロック自体を“少し小さめ・中央寄せ”で表示（PC） */
.obihiro-snow{
display: block;
max-width: 72%;
margin: 18px auto 0; /* 上に少し余白＋中央寄せ */
}
/* 3) スマホは全幅・高さ制限解除で自然表示 */
@media (max-width: 640px){
.obihiro-snow{
max-width: 100%;
margin: 14px 0 0;
}
.obihiro-snow img{
max-height: none; /* 画面縦に追随させる */
}
}
/* ====== snowRow（最終ミニマム版）— 競合一掃＆SPで縦並び ====== */
/* PC：2カラム / タブレット：緩め / スマホ：1カラム落ち */
.snowRow{
display: grid;
align-items: start;
gap: 40px;
margin: 26px 0;
grid-template-columns: minmax(360px, 36%) 1fr; /* PCは2カラム */
}
.snowRow__photo{ margin: 0; min-width: 0; }
.snowRow__text { min-width: 0; }
/* 資料系画像はトリミングせず全体を見せる（グローバルの比率強制を局所で打ち消し） */
.snowRow__photo img{
width: 100% !important;
height: auto !important;
aspect-ratio: auto !important; /* ← 16/10 や 16/9 の強制を無効化 */
object-fit: contain !important; /* 全体表示（地図/図版向け） */
object-position: 50% 50% !important; /* 中央寄せ */
background: #fff;
border: 1px solid var(--border, #e5eef7);
box-shadow: none !important;
border-radius: 0 !important;
}
/* タブレットで少し緩めに（任意） */
@media (max-width: 1024px){
.snowRow{
gap: 28px;
grid-template-columns: minmax(320px, 40%) 1fr;
}
}
/* スマホは1カラム（＝縦に並ぶ） */
@media (max-width: 640px){
.snowRow{
grid-template-columns: 1fr;
gap: 18px;
}
}
/* ====== SNOWROW: KILL-SWITCH (place at the very end of styles.css) ====== */
/* 親コンテキストが何であっても勝てるように #wrapper を前置（必要なら他IDに変更） */
#wrapper .snowRow{
display: grid !important;
align-items: start !important;
gap: 40px !important;
margin: 26px 0 !important;
grid-template-columns: minmax(360px, 36%) 1fr !important; /* PCは2カラム */
}
/* 子要素の最小幅起因のはみ出し防止 */
#wrapper .snowRow__photo,
#wrapper .snowRow__text{
min-width: 0 !important;
margin: 0 !important;
}
/* 図版は“トリミング禁止・中央寄せ・本来比率維持”に固定 */
#wrapper .snowRow__photo img{
width: 100% !important;
height: auto !important;
aspect-ratio: auto !important; /* ← 16/10, 16/9 などの強制を打消し */
object-fit: contain !important; /* 全体表示 */
object-position: 50% 50% !important; /* 中央 */
border-radius: 0 !important;
box-shadow: none !important;
background: #fff !important;
border: 1px solid var(--border, #e5eef7) !important;
}
/* タブレットは少し緩め（任意） */
@media (max-width: 1024px){
#wrapper .snowRow{
gap: 28px !important;
grid-template-columns: minmax(320px, 40%) 1fr !important;
}
}
/* スマホは必ず 1 カラム落ち（＝縦に並ぶ） */
@media (max-width: 640px){
#wrapper .snowRow{
grid-template-columns: 1fr !important;
gap: 18px !important;
}
}
/* --- snowRowの写真に“写真風”の影＆角丸を追加 --- */
#wrapper .snowRow__photo img{
/* 表示ロジックは維持（トリミング無し・中央寄せ） */
aspect-ratio: auto !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
object-position: 50% 50% !important;
/* 装飾（既存の写真と同じ雰囲気） */
border-radius: 20px !important;
border: 1px solid var(--border, #e5eef7) !important;
background: #fff !important;
box-shadow: 0 10px 28px rgba(5,17,33,.14) !important;
}
/* snowRow スマホ：1カラム＋中央寄せ＋“少し小さめ” */
@media (max-width: 640px){
.snowRow{
grid-template-columns: 1fr;
justify-items: center; /* ← Grid 子を中央 */
gap: 18px;
}
.snowRow__photo{
max-width: 78%; /* ← ここを 90〜94% で微調整 */
margin: 0 auto; /* 念のための中央寄せ（非Gridでも効く） */
}
.snowRow__photo img{
width: 100% !important; /* ブロックの中で100%に収まる */
height: auto !important;
}
}
/* --- ページ上部の濃い帯（職員インタビュー）を完全非表示 --- */
.pageTitle01 {
display: none !important;
}
/* =======================
Breadcrumb – SPで見切れない最小パッチ
方針：折返し可 + 最悪は横スクロール
======================= */
/* 共通：パンくずコンテナは親幅に収める */
#breadcrumb {
max-width: 100% !important;
overflow: visible; /* 通常は可視。SPで必要に応じて横スクロールに切替 */
}
/* 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;
}
}