: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;
}
/* タブレット幅：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;
}
}
/* PC で 3 カラムの均等配置は維持（念のため） */
ul.keywords {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
/* スマホ/タブレットも既存の列落ち設定はそのまま（触らない） */
/* --- 写真キャプション（汎用） --- */
.qa-photo {
display: block;
}
.qa-photo figcaption {
margin-top: 8px;
color: var(--muted, #4d5b6a);
font-size: 0.92rem;
line-height: 1.5;
text-align: left; /* 必要なら center に */
}
/* モバイルでの写真下余白をやや広めに */
@media (max-width: 640px) {
.qa-photo figcaption { margin-top: 10px; }
}
/* ============================
略歴の「年号」と「役職名」の間隔を広げる
============================ */
/* 行全体のレイアウト調整（gap を広げる） */
.bio-list--plain li {
display: flex !important;
align-items: flex-start !important;
gap: 24px !important; /* ← ここを 16px → 24px にして間隔を広げる */
line-height: 1.7 !important;
}
/* 年号部分（現状維持：ここは触らない） */
.bio-list--plain .year {
width: 115px !important;
flex-shrink: 0 !important;
text-align: right !important;
padding: 6px 10px !important;
margin: 0 !important;
}
/* =========================
横長写真の“縦幅を少し深く”する最小差分
※ 既存は 16/9（通常）／21/9（セクション末尾の大きめ）
========================= */
/* 1) 通常の横長写真（.qa-photo img）をほんの少し縦長に：16/10 */
.qa-photo img{
aspect-ratio: 16/10 !important; /* つぶれ感を軽減。歪みなし（object-fit: cover のまま） */
}
/* 2) セクション末尾の大きめ写真（.qa-photo--section）を 21/9 → 16/9 に緩和 */
.section .qa-photo--section img{
aspect-ratio: 16/9 !important; /* 縦を確保して“ぺったり”感を解消 */
}
/* =========================================================
HP 2カラムに合わせた“縦感”の最適化（災害対応の写真向け）
- デスクトップ：3/2（横に伸びすぎず、縦情報を確保）
- タブレット ：4/3（やや縦深め）
- スマホ ：5/4（さらに縦深めで見やすく）
- 重要被写体（人物・ドローン）をやや上寄せに表示
========================================================= */
.qa-photo.qa-photo--hpPortrait img,
.section .qa-photo--section.qa-photo--hpPortrait img{
aspect-ratio: 3/2 !important; /* PC基準の比率：縦をしっかり確保 */
width: 100%;
height: auto; /* 歪み防止 */
object-fit: cover; /* 自然なトリミング（引き伸ばし無し） */
object-position: 50% 45%; /* 少し上に寄せ、人物＆ドローンを活かす */
/* 画像が高くなり過ぎるのを防ぐ安全マージン（任意で調整OK） */
max-height: 640px;
}
/* タブレット：もう少し縦を深く（4:3） */
@media (max-width: 1024px){
.qa-photo.qa-photo--hpPortrait img,
.section .qa-photo--section.qa-photo--hpPortrait img{
aspect-ratio: 4/3 !important;
max-height: 560px;
}
}
/* スマホ：さらに縦を深く（5:4）— テキスト量とのバランスを取りやすい */
@media (max-width: 640px){
.qa-photo.qa-photo--hpPortrait img,
.section .qa-photo--section.qa-photo--hpPortrait img{
aspect-ratio: 5/4 !important;
max-height: 520px;
object-position: 50% 42%; /* 顔が切れないように上寄せを少し強める */
}
}
/* =========================================
写真キャプション（figcaption）を中央寄せ
- 既存では left 指定があるため、末尾に上書き
========================================= */
.qa-photo figcaption{
text-align: center !important;
}
/* =========================================
2枚横並びギャラリー（このページ専用の最小ユーティリティ）
========================================= */
.qa-photos.qa-photos--two{
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important; /* 画像間の余白：12〜24pxで好み調整 */
align-items: start !important;
}
/* スマホは自動で1列に */
@media (max-width: 640px){
.qa-photos.qa-photos--two{
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
/* 念のため：各 figure のはみ出し防止 */
.qa-photos.qa-photos--two .qa-photo{
min-width: 0 !important;
}
/* 本文中の参照番号（上付き） */
sup.footnote-ref {
font-size: 0.72em;
vertical-align: super;
line-height: 0;
color: #1B7059;
font-weight: 800;
text-decoration: none;
}
sup.footnote-ref a{
color: inherit;
text-decoration: none;
outline: none;
}
sup.footnote-ref a:focus{
box-shadow: 0 0 0 3px rgba(33,131,107,.25);
border-radius: 4px;
}
/* ローカル脚注（かわいい下線付き） */
.footnotes-local{
margin: 18px 0 0;
padding: 16px 14px 8px;
background: #ffffff;
border: 1px dashed #cfe6df;
border-radius: 12px;
color: #2a3d56;
font-size: 0.95rem;
}
.footnotes-local .fn-title{
position: relative;
display: inline-block;
font-weight: 900;
color: #0E4335;
padding: 2px 4px;
margin: 0 0 8px;
}
.footnotes-local .fn-title::after{
content:"";
position:absolute;
left: 0;
right: 0;
bottom: -6px;
height: 8px;
border-radius: 999px;
background: linear-gradient(90deg,#BFEBDD 0%, #9AD9C3 50%, #CDEFE4 100%);
box-shadow: 0 2px 6px rgba(33,131,107,.15);
}
.footnotes-local ol{ margin: 14px 0 0; padding-left: 1.3em; }
.footnotes-local li{ margin: 0 0 8px; line-height: 1.65; }
.footnotes-local li .fn-back{
margin-left: 8px; font-size: 0.9em; color: #23846A; text-decoration: none;
}
.footnotes-local li .fn-back:hover{ text-decoration: underline dotted; }
.footnotes-local a{ color: #1B7059; word-break: break-all; }
@media print{
.footnotes-local{ border: none; padding-top: 10px; }
.footnotes-local .fn-title::after{
height: 0; background: none; box-shadow: none; border-bottom: 1px solid #95cdbb; bottom: -4px;
}
}
/* ================================
ローカル脚注（横幅いっぱい＆やさしい装飾）
================================ */
.footnotes-local{
display:block;
width:100%;
margin: 22px 0 0;
padding: 20px 18px 12px;
background:#fff;
border:1px dashed #cfe6df;
border-radius:14px;
box-shadow: 0 8px 18px rgba(5,17,33,.06);
color:#2a3d56;
font-size:0.95rem;
}
/* .qa-row 内に置いた場合でも2カラムをまたいで全幅に（方式②用） */
.qa-row .footnotes-local--full{
grid-column: 1 / -1 !important;
}
/* タイトル（かわいい帯下線＋アイコン） */
.footnotes-local .fn-title{
position:relative;
display:inline-flex;
align-items:center;
gap:6px;
font-weight:900;
color:#0E4335;
padding: 2px 4px;
margin:0 0 10px;
}
.footnotes-local .fn-title::before{
content:"";
width:20px; height:20px;
background:#1B7059; /* アイコン色（テーマグリーン） */
-webkit-mask: url('data:image/svg+xml;utf8,\
') 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;
}
/* --- 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 – 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; /* 端末幅に追従（= 縮め過ぎない） */
}
}
/* ===== プロフィール・2カラムの安定配置 ===== */
.section--profile .profile-slab {
/* 既存の grid-template-columns/gap 等はそのままでOK */
}
/* 1行目・左：写真 */
.section--profile .profile-slab .profile-photo {
grid-column: 1;
grid-row: 1;
}
/* 2行目・左：注意書き（写真の直下） */
.section--profile .profile-slab .profile-note {
grid-column: 1;
grid-row: 2;
align-self: start;
margin: 8px 0 0;
color: var(--muted, #4d5b6a);
font-size: 0.92rem;
line-height: 1.5;
}
/* 1行目・右：名前／役職／キーワード（写真と同じ“行の頭”に来る） */
.section--profile .profile-slab .profile-meta {
grid-column: 2;
grid-row: 1; /* ← これがズレ防止の決め手 */
align-self: start;
min-width: 0; /* 長文でのはみ出し防止 */
}
/* --- 役職のすぐ下に余白を作る（キーワードが密着しない） --- */
.section--profile .profile-meta .role {
margin: 0 0 14px; /* お好みで 12〜18px に調整可 */
line-height: 1.55;
word-break: break-word;
}
/* --- 脚注番号（上付き）の視覚位置調整 --- */
.section--profile .profile-meta .role .footnote-ref {
position: relative;
top: -1px; /* 0〜-2px で微調整可 */
margin-left: 2px;
font-size: 0.72em;
line-height: 0;
}
.section--profile .profile-meta .role .footnote-ref a {
color: #666; /* ニュートラルグレー */
text-decoration: none;
outline: none;
}
/* スマホ（1カラム化）では固定を解除して自然な縦積みに */
@media (max-width: 640px) {
.section--profile .profile-slab .profile-photo,
.section--profile .profile-slab .profile-note,
.section--profile .profile-slab .profile-meta {
grid-column: auto;
grid-row: auto;
}
.section--profile .profile-slab .profile-note {
font-size: 0.95rem;
margin-top: 10px;
}
}
/* ========== 名前の下線を文字に寄せる（離れ対策） ========== */
.section--profile .name.name--xl {
position: relative;
display: inline-block; /* 疑似要素の基準を文字列に */
}
.section--profile .name.name--xl::after {
/* 既存の太いグラデ下線を“近づける” */
bottom: -4px !important; /* 例：-8px → -4px。まだ離れて見えれば -3px/-2px */
height: 6px; /* 既存と同じ太さを前提（必要なら微調整） */
}
/* ========== 役職とキーワードの間隔を拡張 ========== */
.section--profile .profile-meta .role {
margin-bottom: 18px !important; /* 14px → 18px（もう少し離したい要望に対応） */
line-height: 1.55;
}
.section--profile .profile-meta .keywords {
margin-top: 10px !important; /* 二重ガード。合算で十分なゆとりに */
}
/* ========== 脚注番号（上付き）の視覚位置を揃える ========== */
.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;
}
/* ========== Gridの“行”位置を固定してズレを根本防止 ========== */
.section--profile .profile-slab .profile-photo { grid-column: 1; grid-row: 1; }
.section--profile .profile-slab .profile-note { grid-column: 1; grid-row: 2; align-self: start; }
.section--profile .profile-slab .profile-meta { grid-column: 2; grid-row: 1; align-self: start; min-width: 0; }
@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;
}
}
/* ===== Role（役職）と Keywords の間隔をさらに拡大 ===== */
.section--profile .profile-meta .role {
margin-bottom: 24px !important; /* ← 18px → 24px。必要なら 28px まで拡張OK */
line-height: 1.6; /* 折返し時の詰まり防止 */
}
.section--profile .profile-meta .keywords {
margin-top: 12px !important; /* 役職側の margin-bottom と二重ガードで確実に空ける */
}
/* ===== Footnotes（脚注）リンクのニュートラル化（薄いグレー系） ===== */
.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;
}
/* =========================================================
A) Role と Keywords 枠の「被り」対策（強制的に距離を空ける）
- 枠(ul.keywords)の上にタブ(::before)がせり出すので、
「タブの高さ + 任意の間隔」ぶん、上マージンを大きく確保する
========================================================= */
/* PC幅：タブ高さ(約24px) + 間隔(16px) ≒ 40px を基準に */
.section--profile .profile-meta .keywords {
margin-top: 40px !important; /* ← “被り”が消えるまで 44px / 48px に増やしてOK */
}
/* 役職行の下にも念のため広めに余白を確保（ダブルガード） */
.section--profile .profile-meta .role {
margin-bottom: 20px !important; /* 18px→20px。さらに離すなら 24px へ */
line-height: 1.6;
}
/* タブの z-index を下げ、役職テキストより前面に出ないよう保険（不要なら削除可） */
.section--profile .profile-meta .keywords::before {
position: absolute; /* 既存と同じ前提 */
z-index: 0; /* 親の背景上で十分。もし見えなくなれば 1 に戻す */
}
/* モバイルは行間が詰まるので、少し控えめに（見た目で再調整可） */
@media (max-width: 640px) {
.section--profile .profile-meta .keywords { margin-top: 28px !important; }
.section--profile .profile-meta .role { margin-bottom: 16px !important; }
}
/* =========================================================
B) 名前の下線が離れて見える対策（近づける）
========================================================= */
.section--profile .name.name--xl {
position: relative;
display: inline-block; /* 下線の基準をテキスト幅に */
}
.section--profile .name.name--xl::after {
bottom: -3px !important; /* -4px でもOK。フォント描画で微調整：-2〜-5px */
height: 6px; /* 既存の太さ前提（必要なら 5px / 4px に） */
}
/* =========================================================
C) 脚注（footnotes）リンク色を薄いグレーへ（緑を完全上書き）
========================================================= */
.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;
}
/* ========== Profile: 役職とキーワード枠の間隔を“画像例”レベルまで拡大 ========== */
/* タブの張り出し高さ（サイトの見た目に合わせて調整可） */
:root {
--kw-tab-overhang: 28px; /* タブが枠の上に出ている分（例：24〜30px） */
--kw-gap-extra: 22px; /* さらに欲しい余白（例：18〜26px） */
}
.section--profile .profile-meta .role {
margin-bottom: 20px !important; /* 役職行自身の下マージン（保険） */
line-height: 1.6;
}
/* “タブ張り出し” + “余白”を合算して、枠全体を強制的に下げる */
.section--profile .profile-meta .keywords {
margin-top: calc(var(--kw-tab-overhang) + var(--kw-gap-extra)) !important;
}
/* タブが手前に出過ぎて“被って見える”のを抑える保険（必要なければ削除可） */
.section--profile .profile-meta .keywords::before {
position: absolute; /* 既存前提 */
z-index: 0; /* タブを親背景と同じ層に。必要なら 1→2 に調整 */
}
/* モバイルは行間が詰まるので少し控えめ（見た目で再調整可） */
@media (max-width: 640px) {
:root {
--kw-tab-overhang: 24px;
--kw-gap-extra: 16px;
}
.section--profile .profile-meta .role {
margin-bottom: 16px !important;
}
}
/* ========== A) 役職 ↓↓↓ Keywords枠 を“確実に”離す（超高特異性＋!important） ========== */
/* 1) 役職行そのものに十分な下マージン（まず兄弟間で確実に空ける） */
body .section.section--profile .profile-slab .profile-meta .role {
margin-bottom: 28px !important; /* ← 足りなければ 32px / 36px に段階UP */
line-height: 1.6;
word-break: break-word;
}
/* 2) タブの張り出しを見込んで、枠全体をさらに下げる（上書きに強い指定） */
body .section.section--profile .profile-slab .profile-meta > ul.keywords.keywords--show {
/* タブ高さ(約24px) + 余白(20px) = 44px を初期値に */
margin-top: 44px !important; /* ← 変わらなければ 48px / 52px に増やす */
position: relative; /* 念のため（::beforeの基準） */
}
/* 3) 親ラッパーにも“上パディング”を与えて margin 折り畳みの影響を回避（保険） */
body .section.section--profile .profile-slab .profile-meta {
display: block; /* grid 子でも block でOK */
padding-top: 4px !important; /* ← 0〜6px で微調整（見た目には出ない程度） */
}
/* 4) タブ（● Keywords）が前面に出過ぎて“被って見える”のを抑える保険 */
body .section.section--profile .profile-slab .profile-meta > ul.keywords.keywords--show::before {
z-index: 0; /* 必要に応じて 1→2 に上げてもOK（見え方で調整） */
}
/* 5) モバイルは少し控えめ（行間が狭いため） */
@media (max-width: 640px) {
body .section.section--profile .profile-slab .profile-meta .role {
margin-bottom: 20px !important;
}
body .section.section--profile .profile-slab .profile-meta > ul.keywords.keywords--show {
margin-top: 36px !important; /* ← 32〜40px で端末実機に合わせて */
}
}
/* ============================================
Keywords 内テキストを濃いオレンジ系に統一
（既存の緑系・黒系の上書きを強制）
============================================ */
.section--profile .profile-meta ul.keywords.keywords--show li,
.section--profile .profile-meta ul.keywords.keywords--show li .tag {
color: #C65A00 !important; /* 濃いオレンジ（推奨：#C65A00 / #BF5A00） */
}
/* ✓ マーカー（✔）の色も統一したい場合は以下を追加 */
.section--profile .profile-meta ul.keywords.keywords--show li::before {
color: #C65A00 !important;
}
/* === 写真を“角丸なし”に強制（既存の角丸指定に確実に勝つ） === */
.qa-photo--noRadius,
.qa-photo--noRadius img {
border-radius: 0 !important; /* ← 角丸リセット */
}
/* 念のため：影や枠が丸みと一緒に見える場合は下も有効化（必要な方だけ） */
/*
.qa-photo--noRadius img {
box-shadow: none !important;
border: 1px solid var(--border, #e5eef7); // 枠が必要なら
}
*/
/* “縦積み（stackFull）”系のパッチが角丸を戻してしまう場合の保険 */
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--noRadius,
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--noRadius img {
border-radius: 0 !important;
}
/* 角丸“あり”を明示（最終上書き） */
.qa-photo.qa-photo--sm.qa-photo--noCrop img {
border-radius: 20px !important; /* サイトの基準角丸に合わせて 16/20/24px で調整可 */
}
/* ====== 画像サイズ ユーティリティ ====== */
/* かなり小さく（“2回り” 小さくする目安） */
.qa-photo--xs,
.qa-photo--xs img {
max-width: 400px !important; /* ← もっと小さくするなら 360px/380px へ */
}
.section .qa-photos .qa-photo--xs {
margin: 0 auto !important; /* センター寄せ */
}
/* ひと回り小さく（参考：すでに使っている sm があればそのままでOK） */
.qa-photo--sm,
.qa-photo--sm img {
max-width: 560px !important; /* 既定値。520/540/580 など微調整可 */
}
.section .qa-photos .qa-photo--sm {
margin: 0 auto !important;
}
/* 少し大きめ（“表示をもう少し大きく”） */
.qa-photo--lg,
.qa-photo--lg img {
max-width: 960px !important; /* セクション幅に収まる上限の目安 */
width: 100%; /* 包含コンテナに合わせて拡大 */
}
.section .qa-photos .qa-photo--lg {
margin: 12px auto !important; /* 余白を少し足して見栄え調整 */
}
/* stackFull（縦積み）でもサイズ指定を尊重 */
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--lg img,
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--xs img,
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--sm img {
width: 100% !important;
height: auto !important;
}
/* トリミングなし（全体表示）の最終確定：noCrop 併用時も維持 */
.qa-photo--noCrop img {
object-fit: contain !important;
aspect-ratio: auto !important;
width: 100% !important;
height: auto !important;
background: #fff;
}
/* 角丸なしを明確化（必要箇所のみ適用） */
.qa-photo--noRadius,
.qa-photo--noRadius img {
border-radius: 0 !important;
}
/* モバイルは自然に全幅表示（過小/過大を避ける） */
@media (max-width: 640px) {
.qa-photo--xs,
.qa-photo--xs img,
.qa-photo--sm,
.qa-photo--sm img,
.qa-photo--lg,
.qa-photo--lg img {
max-width: 100% !important;
}
}
/* =========================
1) 図表向け：特大サイズ（XL）
========================= */
.qa-photo--xl,
.qa-photo--xl img {
/* セクション最大幅に合わせて拡大（既存の --lg=960px を上回る） */
max-width: 1160px !important;
width: 100% !important;
height: auto !important;
}
/* 図表のトリミング禁止・比率固定の解除（文字つぶれ防止） */
.qa-photo--xl img {
object-fit: contain !important;
aspect-ratio: auto !important;
/* 背景白だと図の余白が自然に見える */
background: #fff;
}
/* モバイルは自然に全幅で表示 */
@media (max-width: 640px) {
.qa-photo--xl,
.qa-photo--xl img {
max-width: 100% !important;
}
}
/* ============================================
2) Before/After レイアウト（左右＋中央矢印）
============================================ */
.before-after {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
align-items: center;
margin: 16px 0;
}
/* 両側の写真：トリミングしない（全体を見せる） */
.qa-photo--ba img {
width: 100%;
height: auto;
object-fit: contain;
aspect-ratio: auto; /* 既存の比率固定を無効化 */
background: #fff;
border: 1px solid var(--border, #e5eef7);
box-shadow: none;
border-radius: 0; /* 既存の丸みを避けたい場合は0、丸みを残すなら削除 */
}
/* キャプションは中央寄せ・少し余白 */
.qa-photo--ba figcaption {
margin-top: 8px;
color: var(--muted, #4d5b6a);
font-size: 0.92rem;
text-align: center;
}
/* 中央の大きめ右向き矢印（SVGマスクでくっきり表示） */
.before-after__arrow {
width: min(96px, 10vw); /* 目安：PCで約96px。必要なら 112px などに拡大可 */
height: min(96px, 10vw);
background: var(--green-700, #1B7059); /* オレンジテーマ時は変数により自動で置換 */
-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));
}
/* モバイル：縦積みにして矢印は中央 */
@media (max-width: 640px) {
.before-after {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 12px;
}
.before-after__arrow {
justify-self: center;
}
}
/* 参考：オレンジテーマを採用している場合、トークンに自動追従 */
:root {
/* 既存のトークン再マッピングがあるため、矢印色は var(--green-700)→オレンジ系に置換されます */
}
/* === FINAL OVERRIDE: 図表（文字つぶれ防止の特大表示） ================== */
/* 1) figure自体の最大幅をセクション最大(1160px)に、画像はトリミング無しで全体表示 */
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--xl,
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--xl img {
max-width: 1160px !important;
width: 100% !important;
height: auto !important;
}
/* 2) 既存の固定アスペクト比(16/10,16/9,21/9 など)を“この要素に限り”無効化 */
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--xl img {
object-fit: contain !important; /* トリミング禁止＝図表の文字が潰れない */
aspect-ratio: auto !important; /* 比率固定を解除して原図優先 */
background: #fff; /* 余白が出る場合の背景 */
box-shadow: none; /* 必要なければ影は外す */
border: 1px solid var(--border, #e5eef7); /* 罫線で引き締め（任意） */
}
/* 3) 既存の“stackFull 時は 560px まで”の縮小指定を打ち消す */
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--xl img {
max-width: 1160px !important; /* 上で再宣言：確実に勝たせる */
}
/* 4) モバイルでは自然に全幅 */
@media (max-width: 640px) {
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--xl,
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--xl img {
max-width: 100% !important;
}
}
/* === Before/After レイアウト（左右＋中央矢印） =========================== */
.before-after {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 18px;
align-items: center;
margin: 16px 0;
}
.qa-photo--ba img {
width: 100%; height: auto;
object-fit: contain; aspect-ratio: auto;
background: #fff;
border: 1px solid var(--border, #e5eef7);
border-radius: 0;
box-shadow: none;
}
.qa-photo--ba figcaption {
margin-top: 8px; color: var(--muted, #4d5b6a);
font-size: 0.92rem; text-align: center;
}
/* === 大きめ“太い”右向きブロック矢印（サンプル形状） ===================== */
/* 形状：太い軸(長方形) ＋ 大きな矢じり(三角) を一体化したSVGマスク */
.before-after__arrow--bold {
width: min(120px, 12vw);
height: min(120px, 12vw);
background: #2A78C3; /* ← サンプルの青系。テーマ色に合わせるならここを変更 */
filter: drop-shadow(0 6px 14px rgba(5,17,33,.18));
-webkit-mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
}
/* モバイルでは縦積み＋矢印は中央 */
@media (max-width: 640px) {
.before-after { grid-template-columns: 1fr; gap: 12px; }
.before-after__arrow--bold { justify-self: center; }
}
/* === 太い右向きブロック矢印（サイト色追従＋形状調整版） =============== */
/* 棒を短く（幅を詰める）＋ 矢じりを大きく（張り出しを拡大） */
.before-after__arrow--bold {
/* サイズはお好みで。より大きくしたい場合は 120→140px などへ */
width: min(120px, 12vw);
height: min(120px, 12vw);
/* ★ サイトアクセント色に自動追従（既存トークンに準拠） */
background: var(--nbg, var(--orange-500, #F28300));
/* 視認性のドロップシャドウ */
filter: drop-shadow(0 6px 14px rgba(5,17,33,.18));
/* マスク：棒を短く、矢じりを相対的に大きくしたSVG形状 */
-webkit-mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
}
/* === FINAL OVERRIDE: 図表“少し小さめ”（解像度優先） ===================== */
/* セクション幅いっぱいではなく 920px 上限で見せる */
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--lgPlus,
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--lgPlus img {
max-width: 920px !important; /* ← 必要なら 880/960 に微調整可 */
width: 100% !important;
height: auto !important;
}
/* トリミング禁止・比率固定の解除で図中の文字つぶれ防止 */
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--lgPlus img {
object-fit: contain !important;
aspect-ratio: auto !important;
background: #fff;
border: 1px solid var(--border, #e5eef7);
box-shadow: none;
}
/* モバイルは自然に全幅 */
@media (max-width: 640px) {
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--lgPlus,
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--lgPlus img {
max-width: 100% !important;
}
}
/* ====== 自然接合版：太いオレンジ矢印（左→右グラデ + アニメ） ====== */
/* HTMLは のままでOK */
.before-after__arrow--bold {
/* サイズ（必要に応じて 128→140/160pxに） */
width: min(128px, 12.5vw);
height: min(128px, 12.5vw);
/* オレンジ系グラデ（サイトトークンに追従しつつfallback） */
background: linear-gradient(
90deg,
var(--orange-300, #FFD1A6) 0%,
var(--orange-500, #F28300) 55%,
var(--orange-600, #D86E00) 100%
);
filter: drop-shadow(0 6px 14px rgba(5,17,33,.18));
/* 形状マスク：棒と三角を“ピッタリ＋ごくわずか重ね”で接続 */
-webkit-mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,\
') no-repeat center / contain;
/* やさしい呼吸アニメ＋ハイライト流し */
animation: arrow-breathe 2.6s ease-in-out infinite;
position: relative;
isolation: isolate;
}
.before-after__arrow--bold::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.0) 100%);
-webkit-mask: inherit; mask: inherit;
animation: arrow-sheen 2.6s ease-in-out infinite;
pointer-events: none;
mix-blend-mode: screen;
}
/* “ふわっ”とした存在感（拡大量はごく小さく） */
@keyframes arrow-breathe {
0% { transform: scale(1); }
50% { transform: scale(1.045); }
100% { transform: scale(1); }
}
/* ハイライトが左→右へ流れる */
@keyframes arrow-sheen {
0% { opacity: .0; transform: translateX(-15%); }
30% { opacity: .55; }
60% { opacity: .0; transform: translateX(15%); }
100% { opacity: .0; transform: translateX(15%); }
}
/* 視覚効果を減らす設定ではアニメ停止 */
@media (prefers-reduced-motion: reduce) {
.before-after__arrow--bold,
.before-after__arrow--bold::after {
animation: none !important;
}
}
/* SPは中央寄せ */
@media (max-width: 640px) {
.before-after__arrow--bold { justify-self: center; }
}
/* ===== Tall Contain（この写真だけ“縦長で見切れ防止”）================== */
/* 目的：
- 縦長の比率に（4:5 を基準）※必要なら 3:4 / 2:3 へ変更可
- トリミング禁止（contain）で見切れを防止
- 既存の横長固定(16/10, 16/9, 21/9 など)をこの要素に限り上書き
*/
.qa-photo.qa-photo--tallContain img {
/* トリミングしない（画像全体を収める） */
object-fit: contain !important;
/* “縦を深く”見せる：4:5（お好みで 3/4 や 2/3 に変更可能） */
aspect-ratio: 4 / 5 !important;
/* 背景（余白が出るときの下地） */
background: #fff;
/* 既存スタイルの固定幅/比率/影などを無効化する保険 */
width: 100% !important;
height: auto !important;
box-shadow: none;
/* 角丸は figure 側の .qa-photo--noRadius を継承（念のため画像側も） */
border-radius: 0 !important;
}
/* さらに“原寸優先で縦感を最大化”したいときは下を有効化（片方だけ使う）
.qa-photo.qa-photo--tallContain img {
aspect-ratio: auto !important; // ← 画像の実比率をそのまま
}
*/
/* PCで縦を少し伸ばして見やすくする安全マージン（任意） */
@media (min-width: 1024px) {
.qa-photo.qa-photo--tallContain img {
max-height: 640px; /* 必要に応じて 680/720px など */
}
}
/* スマホは幅に合わせて自然に縮む */
@media (max-width: 640px) {
.qa-photo.qa-photo--tallContain img {
max-height: none;
}
}
/* ================================
画像をさらに小さく（縦を浅めに）
================================ */
.qa-photo.qa-photo--tallContain.qa-photo--tight img {
max-height: 480px !important; /* ← 560 → 480 に縮小。460px も可 */
aspect-ratio: 4 / 5 !important;
object-fit: contain !important;
}
/* ================================
右側のテキストを上揃えに修正
================================ */
.qa-row.qa-row--compact {
align-items: flex-start !important; /* ← 中央揃え → 上揃えへ */
margin: 14px 0 !important;
gap: 20px !important;
}
/* ================================
キャプション/画像の余白をさらに縮める
================================ */
.qa-photo.qa-photo--tight figcaption {
margin-top: 4px !important; /* 6px → 4px にさらに縮小 */
line-height: 1.35;
font-size: 0.88rem;
}
/* モバイルは読みやすさ優先 */
@media (max-width: 640px) {
.qa-row.qa-row--compact {
align-items: flex-start !important;
margin: 12px 0 !important;
}
.qa-photo.qa-photo--tallContain.qa-photo--tight img {
max-height: none !important;
}
}
/* ======================================================
脚注(footnotes-local) と次のQAブロックの間隔を整える
====================================================== */
/* デフォルトでは上下が詰まり気味なので、
この脚注ブロックの下に標準行間と同じゆとりを作る */
.footnotes-local {
margin-bottom: 24px !important; /* 22〜28px がおすすめ */
}
/* もし、次のQAが .qa--full や .qa-row なら、
その上マージンを標準化して整える */
.footnotes-local + .qa--full,
.footnotes-local + .qa-row,
.footnotes-local + .qa {
margin-top: 24px !important;
}
/* ==== 資料用 画像レイアウト（角丸なし・トリミングなし） ==== */
/* figure 自体の余白をやや詰め気味にして脚注との間隔を整える */
.qa-photo.qa-photo--doc {
margin: 16px 0 18px !important; /* 上下の見え方は 14–20px で微調整OK */
}
/* 画像：トリミングなし（全体表示）＋角丸なし＋影なし＋枠あり */
.qa-photo.qa-photo--doc img {
object-fit: contain !important; /* 重要：トリミングせず全体表示 */
aspect-ratio: auto !important; /* 元画像の比率を尊重 */
width: 100% !important;
height: auto !important;
background: #fff;
border-radius: 0 !important;
box-shadow: none !important;
border: 1px solid var(--border, #e5eef7); /* 書類っぽく淡い罫線 */
}
/* キャプションも控えめに（資料の雰囲気） */
.qa-photo.qa-photo--doc figcaption {
margin-top: 6px;
font-size: 0.9rem;
line-height: 1.45;
color: var(--muted, #4d5b6a);
text-align: center;
}
/* 脚注との間が詰まって見える場合の保険（上下24px基準） */
.qa-photo.qa-photo--doc + .footnotes-local {
margin-top: 20px !important; /* 必要に応じ 18–24px に調整 */
}
/* 調圧水槽見学会：角丸＋白帯ゼロ＋サイズ控えめ */
.qa-photo.qa-photo--roundedContain {
border-radius: 16px !important;
overflow: hidden !important;
/* ★ 追加：写真全体の最大幅を制限（PCでも大きくなりすぎない） */
max-width: 420px !important; /* お好みで 420px / 500px など調整可 */
margin: 0 auto !important; /* 中央寄せ */
}
.qa-photo.qa-photo--roundedContain img {
aspect-ratio: auto !important;
width: 100% !important;
height: auto !important;
object-fit: unset !important;
background: transparent !important;
border-radius: inherit !important;
}
/* ===== 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;
}
/* ===== 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));
}
}
/* =========================================================
Keywords ✔ を PC/スマホ共通で「空白ゼロ・1個だけ」に統一
- 余白：gap / margin / padding を強制ゼロ
- 表示：::before だけで SVG を描画（::after は常に無効化）
- 絵文字化対策：テキスト"✔"は使わず SVG マスク描画
========================================================= */
/* キーワード項目はインラインフレックスで詰める */
ul.keywords li,
ul.keywords li .tag{
display:inline-flex !important;
align-items:center !important;
gap:0 !important;
padding-left:0 !important;
margin-left:0 !important;
white-space:nowrap !important; /* 折返しは必要ワードのみ個別解除 */
}
/* これまで使っていた ::after 側の疑似アイコンは“常に”無効化 */
ul.keywords li::after,
ul.keywords li .tag::after{
content:none !important;
}
/* ✔（SVGアイコン）を ::before に一本化。文字直前で“空白ゼロ”表示 */
ul.keywords li::before{
content:"" !important;
display:inline-block !important;
width:0.9em !important; /* アイコン幅（文字に近い自然な幅） */
height:1em !important; /* ベースラインに合う高さ */
margin-right:0 !important; /* ← 決定：空白ゼロ */
background:var(--orange-500, #F28300) !important;
/* 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;
/* ベースライン微調整（端末差に合わせて 0〜0.08em 範囲で調整可） */
transform: translateY(0.02em);
}
/* “左にタブ” っぽい余白が残る場合の保険（列子要素のはみ出し無効化） */
ul.keywords > *{ min-width:0 !important; }
/* ※ 任意：折返しを許可したい語（例：防災地下神殿）だけは個別解除
HTML側で 防災地下神殿 にしている前提。
もし HTML を触れない場合はこのブロックは省略してOK。
*/
@media (max-width: 640px){
ul.keywords li.kw-wrap,
ul.keywords li.kw-wrap .tag{
white-space:normal !important;
word-break:break-word !important;
line-height:1.45 !important;
}
}
/* =========================================================
Keywords（決着版）
1) ✔ の色を“一色”に固定
2) 2つ目の✔が前語に被るのを根絶
3) 1/2/3 の「✔→文字」間隔を完全一致（= 2つ目基準）
※ 既存の似た指定より「後ろ」に置くこと
========================================================= */
/* A) 余白の“ばらつき源”をゼロに：li/.tagの内側余白とgapを全て0に固定 */
ul.keywords li,
ul.keywords li .tag{
display:inline-flex !important;
align-items:center !important;
gap:0 !important;
padding:0 !important;
margin:0 !important;
line-height:1.45 !important;
white-space:nowrap !important; /* 折返しは個別指定で制御 */
}
/* B) 旧パッチで作られる ::after 偽アイコンを完全無効化（重複/被りの原因） */
ul.keywords li::after,
ul.keywords li .tag::after{
content:none !important;
}
/* C) ✔ の“形・間隔・色”を一箇所で一元管理
- 色は #F28300 に固定（端末・疑似要素の影響を受けない）
- 3つとも同じ margin-right（= --kw-gap）で完全一致
- チェックは “太め” の塗りパス
*/
:root{
--kw-icon-w: 1.22em; /* ✔ 幅（もっと太く見せたいなら 1.26em などへ） */
--kw-icon-h: 1.12em; /* ✔ 高さ */
--kw-gap: 0.30em; /* ✔→文字の間隔（＝2つ目の見え方に揃える値） */
--kw-color: #F28300; /* ← 色を“一色”に固定：テーマのオレンジ */
}
ul.keywords > li::before{
content:"" !important;
display:inline-block !important;
width: var(--kw-icon-w) !important;
height:var(--kw-icon-h) !important;
margin-right: var(--kw-gap) !important; /* ← 1/2/3 すべて同一 */
background: var(--kw-color) !important; /* ← 一色固定（グラデ/透過を排除） */
box-shadow: none !important; /* ← 旧パッチの影が残っても無効化 */
filter: none !important;
/* 太めチェック（面を広くとる塗り形状） */
-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;
/* ベースライン微調整（端末差が出たら ±0.02em 程度で調整） */
transform: translateY(0.02em);
}
/* D) SP：2列グリッド化し、3つ目を2段目の先頭へ（＝明示改行） */
@media (max-width: 640px){
ul.keywords{
display:grid !important;
grid-template-columns: 1fr 1fr !important;
column-gap: 16px !important; /* ← 2語目が前語に被らない“安全な”余白幅 */
row-gap: 8px !important;
}
ul.keywords > li{
justify-content:flex-start !important;
min-width:0 !important; /* ← テキストがはみ出して次要素に接触するのを防止 */
}
/* ★3つ目だけ改行（2列中の左・2段目） */
ul.keywords > li:nth-child(3){
grid-column: 1 !important;
grid-row: 2 !important;
}
/* 3つ目の語を折返し可能にする場合（例：防災地下神殿） */
ul.keywords > li:nth-child(3),
ul.keywords > li:nth-child(3) .tag{
white-space: normal !important;
word-break: break-word !important;
}
}
/* --- ページ上部のタイトル帯を非表示（影響はこの帯のみ） --- */
#bukyoku.pageTitle01,
.pageTitle01 {
display: none !important;
}
/* 図表向け・中間サイズ（860px → 900px に微増） */
.qa-photo--mdPlus,
.qa-photo--mdPlus img{
max-width: 900px !important; /* ★ここを 900px に */
width: 100% !important;
height: auto !important;
}
.qa-photo--mdPlus img{
object-fit: contain !important; /* 文字つぶれ防止（トリミング禁止） */
aspect-ratio: auto !important; /* 元比率を尊重 */
background: #fff;
border: 1px solid var(--border, #e5eef7);
box-shadow: none;
}
@media (max-width: 640px){
.qa-photo--mdPlus, .qa-photo--mdPlus img{ max-width: 100% !important; }
}
/* === FINAL OVERRIDE: stackFull + mdPlus を強制的に上書き === */
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--mdPlus,
.section .qa-photos.qa-photos--stackFull .qa-photo.qa-photo--mdPlus img{
max-width: 860px !important; /* ← 880/900/920 など希望に変更可 */
}
/* === SPだけ：.qa-row--textAfter は「テキスト → 写真」の順に並べる === */
@media (max-width: 640px){
/* 1カラム化は既存ルールを踏襲。順序だけ指定して入れ替え */
.qa-row.qa-row--textAfter{
grid-template-columns: 1fr !important;
}
/* テキスト(qa)を上段、写真(qa-photos)を下段へ */
.qa-row.qa-row--textAfter .qa{
grid-column: 1 !important;
grid-row: 1 !important;
}
.qa-row.qa-row--textAfter .qa-photos{
grid-column: 1 !important;
grid-row: 2 !important;
}
}
/*************************************************
* FIX: Keywords（最終固定）– モバイルで✔が前行テキストに被る問題を根絶
* ポイント：
* - 疑似要素は「通常フロー」で表示（position: static）
* - 右側に十分な余白（--kw-gap）を常時確保
* - 競合し得る古い absolute 指定を明示的に無効化
* - SPでは2列→1列のときも行間/列間ギャップを確保
*************************************************/
:root {
--kw-icon-w-fix: 1.1em; /* ✔ 幅（端末差吸収用にやや太め） */
--kw-icon-h-fix: 1em; /* ✔ 高さ */
--kw-gap-fix: .38em; /* ✔→テキスト間の余白（被り防止の主役） */
--kw-color-fix: #F28300; /* テーマに合わせたオレンジ */
}
ul.keywords > li,
ul.keywords > li .tag{
display:inline-flex !important;
align-items:center !important;
gap:0 !important;
padding:0 !important;
margin:0 !important;
line-height:1.45 !important;
white-space:nowrap !important;
min-width:0 !important; /* 折り返し時のはみ出し抑止 */
}
/* ✔ アイコン（“通常フローで”前置） */
ul.keywords > li::before{
content:"" !important;
display:inline-block !important;
width:var(--kw-icon-w-fix) !important;
height:var(--kw-icon-h-fix) !important;
margin-right:var(--kw-gap-fix) !important;
background:var(--kw-color-fix) !important;
/* 競合の芽を摘む（古い absolute 指定などを無効化） */
position:static !important;
left:auto !important;
top:auto !important;
transform:none !important;
box-shadow:none !important;
filter:none !important;
/* ✔ の形は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;
}
/* 旧来の ::after 疑似や余白系を完全停止（重複/被りの温床） */
ul.keywords > li::after,
ul.keywords > li .tag::before,
ul.keywords > li .tag::after{
content:none !important;
}
/* レイアウトの安全マージン（列間/行間） */
@media (max-width:960px){
ul.keywords{
column-gap:20px !important;
row-gap:10px !important;
}
}
@media (max-width:560px){
ul.keywords{
grid-template-columns:1fr !important; /* 1列化時も重なりを回避 */
column-gap:0 !important;
row-gap:10px !important;
}
/* 3つ目が長文でも自然に折り返せるように */
ul.keywords > li:nth-child(3),
ul.keywords > li:nth-child(3) .tag{
white-space:normal !important;
word-break:break-word !important;
}
}
/*************************************************
* FIX: パンくず（#breadcrumb）– スマホで「インタビュー」が見切れる
* ポイント：
* - Flex + 折り返し可（wrap）
* - 長文は自然改行、必要なら横スクロールも許容
* - 既存サイトCSS（外部読み込み）より優先されるように詳細度を上げる
*************************************************/
#breadcrumb{
overflow-x:auto; /* 狭い端末での保険（横スクロール許容） */
-webkit-overflow-scrolling:touch;
}
#breadcrumb > ul{
display:flex !important;
flex-wrap:wrap !important; /* ← 1行固定を解除して折り返し */
gap:6px 8px !important; /* 行/列ギャップ */
padding:0 12px !important;
margin:0 !important;
}
#breadcrumb > ul > li{
white-space:normal !important; /* 日本語は単語区切り不要、自然改行を許可 */
word-break:break-word !important;
line-height:1.5;
}
#breadcrumb .arrow{
margin:0 4px;
}
@media (max-width:640px){
#breadcrumb{ padding:0 10px !important; }
#breadcrumb > ul{ gap:4px 6px !important; }
}
/*************************************************
* PC での Keywords ✔ → 文字 の間隔を「完全統一」
* 競合している旧ルール（2px 等）を確実に無効化
*************************************************/
@media (min-width: 961px){
:root{
--kw-gap-pc: .42em; /* お好みで .38〜.48em */
}
/* 詳細度を上げて “常に” この余白を適用 */
body .section--profile .profile-meta ul.keywords > li::before,
body .section--profile .profiles .profile-card ul.keywords > li::before {
margin-right: var(--kw-gap-pc) !important;
position: static !important; /* 念のため：絶対配置を無効化 */
left: auto !important;
top: auto !important;
transform: none !important;
}
/* li / .tag 側に残っている左パディング・ギャップをゼロで固定 */
body .section--profile .profile-meta ul.keywords > li,
body .section--profile .profile-meta ul.keywords > li .tag,
body .section--profile .profiles .profile-card ul.keywords > li,
body .section--profile .profiles .profile-card ul.keywords > li .tag{
padding-left: 0 !important;
gap: 0 !important;
}
}
/* === Keywords: チェックアイコンの余白を完全統一（最終固定） === */
/* 置き場所：styles.css の一番最後（既存 FINAL OVERRIDES の後） */
:root{
--kw-icon-w-final: 1.12em; /* ✔の横幅（太めで視認性）*/
--kw-icon-h-final: 1.0em; /* ✔の高さ */
--kw-gap-final: .42em; /* ←→ ここが “アイコン→文字” の固定余白 */
--kw-color-final: #F28300; /* テーマのオレンジに合わせる */
}
ul.keywords > li,
ul.keywords > li .tag{
/* テキスト側の内側余白/ギャップはゼロで固定（重複余白を排除） */
padding-left: 0 !important;
margin-left: 0 !important;
gap: 0 !important;
white-space: nowrap !important;
min-width: 0 !important;
}
ul.keywords > li::before{
content: "" !important;
display: inline-block !important;
width: var(--kw-icon-w-final) !important;
height: var(--kw-icon-h-final) !important;
margin-right: var(--kw-gap-final) !important;
/* “常に通常フローで前置” → どの項目でも同じ見え方に */
position: static !important;
left: auto !important;
top: auto !important;
transform: translateY(0.02em) !important; /* ベースライン微調整 */
box-shadow: none !important;
filter: none !important;
background: var(--kw-color-final) !important;
/* 太めのチェック（ベタ塗り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;
}
/* 念のため：疑似要素::after系や .tag 側の擬似を無効化（重複アイコン防止） */
ul.keywords > li::after,
ul.keywords > li .tag::before,
ul.keywords > li .tag::after{
content: none !important;
}
/* =========================================================
* FINAL-FINAL OVERRIDE (Keywords + Footnote Colors)
* 置き場所：styles.css の一番最後（これが“必ず”勝つ）
* =======================================================*/
/* --- 1) キーワード ✔ を“太く大きく”＋余白完全統一 ---------------- */
:root{
/* サイズと余白（ここを調整すれば全項目が一括で揃います） */
--kw-check-w: 1.28em; /* 横幅：太めに（従来 1.10〜1.12em 程度） */
--kw-check-h: 1.12em; /* 高さ：やや大きめ */
--kw-check-gap: .46em; /* アイコン→文字の右余白（統一値） */
--kw-check-color: #F28300; /* テーマのオレンジ */
}
/* li / .tag 側の内側余白とギャップはゼロに固定（重複余白を根絶）*/
ul.keywords > li,
ul.keywords > li .tag{
display: inline-flex !important;
align-items: center !important;
padding: 0 !important;
margin: 0 !important;
gap: 0 !important;
white-space: nowrap !important;
min-width: 0 !important;
}
/* ✔ 本体（常に通常フローで前置・absolute指定を無効化）*/
ul.keywords > li::before{
content: "" !important;
display: inline-block !important;
/* 太く大きいチェックに見えるマスク（塗りパスで面積を確保）*/
width: var(--kw-check-w) !important;
height: var(--kw-check-h) !important;
margin-right: var(--kw-check-gap) !important;
position: static !important; /* ← absolute/left/top を完全停止 */
left: auto !important;
top: auto !important;
transform: translateY(0.02em) !important; /* ベースライン微調整 */
box-shadow: none !important;
filter: none !important;
background: var(--kw-check-color) !important;
-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;
}
/* .tag 側や ::after 系の疑似アイコンを“常に”無効化（重複防止）*/
ul.keywords > li::after,
ul.keywords > li .tag::before,
ul.keywords > li .tag::after{
content: none !important;
}
/* モバイル時も行・列ギャップを安定化（被り防止）*/
@media (max-width: 640px){
ul.keywords{
column-gap: 16px !important;
row-gap: 8px !important;
}
}
/* --- 2) 脚注の上付き番号（本文中・脚注内とも）をオレンジへ --------- */
/* 本文中の上付き参照 (^1 など) */
sup.footnote-ref,
sup.footnote-ref a{
color: #F28300 !important; /* オレンジ系 */
text-decoration: none !important;
outline: none !important;
}
/* 脚注ブロック内の番号色も統一（既存のグレー系を上書き） */
.footnotes-local ol > li::marker{
color: #F28300 !important;
}
.footnotes-local li{
counter-increment: fn; /* ブラウザ依存対策の保険：番号色をmarkerで制御 */
}
/* ===========================================================
Mobile Fix for Keywords
- チェックアイコンと文字の被り解消
- スマホ時は縦並び（1カラム）
- 既存の before/after・absolute 配置を完全停止
=========================================================== */
@media (max-width: 640px){
/* 1) コンテナ：1カラムに固定＋ギャップは読みやすい安全値 */
body ul.keywords{
display: grid !important;
grid-template-columns: 1fr !important; /* ← 縦並び */
column-gap: 0 !important; /* 横方向の余白はゼロでOK */
row-gap: 10px !important; /* 項目間の縦余白 */
padding: 12px 16px !important; /* 枠内のゆとり（任意） */
}
/* 2) 各項目：折返し可＋左アイコンと水平に並べる */
body ul.keywords > li,
body ul.keywords > li .tag{
display: inline-flex !important;
align-items: flex-start !important; /* アイコンと複数行テキストの頭を揃える */
gap: 0 !important; /* 余白はアイコン側で管理 */
padding: 0 !important;
margin: 0 !important;
white-space: normal !important; /* ← 折返し許可（重要） */
line-height: 1.55 !important; /* モバイルでの行間を少し広めに */
min-width: 0 !important;
}
/* 3) チェックアイコン：常に通常フロー前置き＋固定余白＋大きめで視認性UP */
:root{
--kw-mob-icon-w: 1.20em; /* アイコン横幅（お好みで 1.10〜1.28em） */
--kw-mob-icon-h: 1.05em; /* アイコン高さ */
--kw-mob-gap: .46em; /* アイコン→文字の右余白（被り防止の要） */
--kw-mob-color: #F28300; /* テーマのオレンジ（既存トークンと整合） */
}
body ul.keywords > li::before{
content: "" !important;
display: inline-block !important;
width: var(--kw-mob-icon-w) !important;
height: var(--kw-mob-icon-h) !important;
margin-right: var(--kw-mob-gap) !important;
/* 競合を“確実に”止める（absolute/transform/影など旧指定を全無効化） */
position: static !important;
left: auto !important; top: auto !important; transform: none !important;
box-shadow: none !important; filter: none !important;
background: var(--kw-mob-color) !important;
/* 太めのチェック（塗りパス）を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) 旧 after/擬似のアイコン・装飾は常に無効化（重複防止） */
body ul.keywords > li::after,
body ul.keywords > li .tag::before,
body ul.keywords > li .tag::after{
content: none !important;
}
}
/* =========================================================
Mobile Keywords: 縦3つ表示 & チェック被りゼロ（オレンジのまま）
- 640px以下で1カラムに固定（縦に3つ）
- ✓は常に“通常フロー前置き”＋小さめ余白で被り根絶
- 先頭に「・」が“文字として”入っていても視覚的に抑止
========================================================= */
@media (max-width: 640px){
/* 1) コンテナ：1カラム化（縦並び）。行間は読みやすい安全値 */
body ul.keywords{
display: grid !important;
grid-template-columns: 1fr !important; /* ← スマホは縦に1列固定 */
column-gap: 0 !important;
row-gap: 12px !important; /* 項目間の縦余白（10〜16pxで好み調整可） */
padding: 12px 16px !important;
list-style: none !important;
list-style-type: none !important;
padding-inline-start: 0 !important;
margin: 0 !important;
}
/* 2) 各項目：折返し可＋行頭揃え（チェックと複数行の頭を合わせる） */
body ul.keywords > li,
body ul.keywords > li .tag{
display: inline-flex !important;
align-items: flex-start !important;
gap: 0 !important; /* 余白は✓側で管理 */
padding: 0 !important;
margin: 0 !important;
white-space: normal !important; /* ← 折返し許可（被り根絶の要） */
line-height: 1.6 !important; /* スマホは少し広めが読みやすい */
min-width: 0 !important;
}
/* 3) ✓アイコン：通常フロー前置き＋固定余白＋オレンジ色 */
:root{
--kw-mob-icon-w: 1.08em; /* アイコン幅（見本の“適度に大きい”雰囲気に寄せる） */
--kw-mob-icon-h: 0.98em; /* 高さ。端末間の滲みを避けてわずかに低め */
--kw-mob-gap: .28em; /* ✓→文字の右余白（詰め気味：.24〜.34で微調整OK） */
--kw-mob-color: #F28300; /* ← 現行オレンジを厳守 */
}
body ul.keywords > li::before{
content: "" !important;
display: inline-block !important;
width: var(--kw-mob-icon-w) !important;
height: var(--kw-mob-icon-h) !important;
margin-right: var(--kw-mob-gap) !important;
/* 旧指定の absolute/transform/影 を完全停止して“被り”の芽を摘む */
position: static !important;
left: auto !important; top: auto !important; transform: none !important;
box-shadow: none !important; filter: none !important;
background: var(--kw-mob-color) !important;
/* 太めの✓（塗りパス）を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) 旧 after/擬似の装飾を常に無効化（重複・競合を断つ） */
body ul.keywords > li::after,
body ul.keywords > li .tag::before,
body ul.keywords > li .tag::after{
content: none !important;
}
/* 5) テキストに「・」が“直打ち”されているときの応急抑止（ある場合のみ効く） */
body ul.keywords > li .tag{
position: relative;
}
/* 先頭の中点が見出し風に残るケースがあるため、疑似的に詰める */
body ul.keywords > li .tag::first-letter{
visibility: hidden;
margin-left: -0.6em; /* 端末差で-0.50〜-0.68emの微調整余地 */
}
}
/* =========================================
HOKKAIDO-COMPAT • Tweak v2
目的：
- ✓を太く濃く（SVGマスクで塗りアイコン化）
- ✓→文字の余白を最小化（約2〜3px相当）
- 既存の "✔" テキスト表示を無効化して確実に前置
========================================= */
/* 0) 色（既存のオレンジ変数があればそれを優先） */
:root{
--kwc-orange-900: var(--kwc-orange-900, #7A2E00);
--kwc-orange-500: var(--kwc-orange-500, #F28300);
}
/* 1) ✓アイコン：テキストの "✔" をやめて、塗りアイコンに置換（太め） */
body ul.keywords > li::before{
/* ← 前の content:"✔" を打ち消し、塗りアイコンへ */
content: "" !important;
display: inline-block !important;
/* サイズ：やや大きめ＆正方（端末差で滲みにくい値） */
width: 1.08em !important;
height: 1.08em !important;
/* 余白：最少（詰め気味）…お好みで .10em〜.18em で微調整可 */
margin-right: .14em !important;
/* 視認性：主アクセントのオレンジでベタ塗り */
background: var(--kwc-orange-500) !important;
/* 位置衝突の芽を完全に摘む（通常フロー前置） */
position: static !important;
left: auto !important;
top: auto !important;
transform: translateY(.01em) !important; /* ベースライン微調整 */
line-height: 1 !important;
box-shadow: none !important;
filter: none !important;
pointer-events: none !important;
/* ✓の形：太めストロークの塗りパス（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;
}
/* 2) 行の並び＆高さ：✓と複数行テキストの頭をぴったり揃える */
body ul.keywords > li,
body ul.keywords > li .tag{
display: inline-flex !important;
align-items: flex-start !important; /* 行頭が揃う */
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
white-space: normal !important; /* 折返しOK（被り防止） */
line-height: 1.58 !important; /* 読みやすさを保ちつつタイトに */
min-width: 0 !important;
}
/* 3) スマホは縦積み（1カラム）のまま。さらに詰めたい場合の微調整（任意） */
@media (max-width: 560px){
body ul.keywords{
row-gap: 10px !important; /* 項目間の縦余白 */
}
body ul.keywords > li,
body ul.keywords > li .tag{
line-height: 1.6 !important; /* モバイルは少しだけゆったり */
}
}
/* =========================================================
Keywords – PC整形（pill固定幅を解除＋✓と文字をタイトに）
置き場所：styles.css の最末尾（既存より必ず後勝ちさせる）
========================================================= */
@media (min-width: 961px){
/* 1) 改行の元凶：pill風の固定幅/固定高さ/装飾を“確実に”無効化 */
body ul.keywords > li .tag{
display: inline !important; /* inline-flex → inline で自然な文字幅に */
width: auto !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
line-height: 1.56 !important; /* 行の高さはややタイトに */
white-space: nowrap !important; /* PCは基本1行に揃える */
}
/* 2) li自体も1行キープ（長文でもできるだけ折返さない） */
body ul.keywords > li{
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important; /* ← pillの固定幅を外した上で効かせる */
gap: 0 !important;
min-width: 0 !important;
}
/* 3) ✓：PCは“少しだけ小さめ”＋“ほんの少しだけ余白”で締まって見せる */
body ul.keywords > li::before{
content: "" !important; /* 文字の "✔" を打消し、塗りアイコンで表示 */
display: inline-block !important;
width: 1.00em !important;
height: 1.00em !important;
margin-right: .16em !important; /* ← 余白は最小限（.14〜.20で好み微調整） */
background: var(--kwc-orange-500, #F28300) !important;
position: static !important;
transform: translateY(.02em) !important; /* ベースライン微調整 */
line-height: 1 !important;
box-shadow: none !important; filter: none !important; pointer-events: none !important;
/* 太めの塗り✓（端末差に強い） */
-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) コンテナは3カラムを維持。行間は詰め気味に（任意） */
body ul.keywords{
grid-template-columns: repeat(3, minmax(0,1fr)) !important;
row-gap: 0 !important;
align-items: center !important;
}
}
/* =========================================================
Keywords – “枠だけ”をゆったり（✓と文字の間隔は現状維持）
置き場所：styles.css の最末尾
目的：ボックス内の上下左右の余白＆列間ギャップを増やす
========================================================= */
/* PC（デスクトップ） */
@media (min-width: 961px){
/* ボックス内側のパディングを増やす */
body ul.keywords{
padding: 18px 32px !important; /* 12px 20px → 16px 28px に増量 */
column-gap: 40px !important; /* 28px → 36px ：項目どうしの横間隔を広く */
row-gap: 10px !important; /* 念のため縦余白も少しだけ */
}
/* タブ（● Keywords）と枠の“間”を少し広げる（見本に近づける） */
body ul.keywords::before{
transform: translateY(12px) !important; /* 8px → 12px：タブをもう少し下げる */
}
/* 見た目の“ふっくら感”補助（角丸＆影をほんの少し強める） */
body ul.keywords{
border-radius: 12px !important; /* 10px → 12px */
box-shadow: 0 14px 28px rgba(191,90,0,.12) !important;
}
}
/* タブレット（必要なら少しゆとり） */
@media (min-width: 641px) and (max-width: 960px){
body ul.keywords{
padding: 14px 24px !important;
column-gap: 28px !important; /* 既定値を維持しつつ、ゆとりが欲しければ 32px */
row-gap: 10px !important;
border-radius: 12px !important;
}
body ul.keywords::before{
transform: translateY(10px) !important;
}
}
/* スマホ（縦1列のまま、窮屈さだけ解消） */
@media (max-width: 640px){
body ul.keywords{
padding: 14px 16px !important; /* 12px → 14px：上下左右をほんの少しだけ増やす */
row-gap: 12px !important; /* 項目間の縦余白を広げる */
border-radius: 12px !important;
}
body ul.keywords::before{
transform: translateY(10px) !important; /* タブと枠の間をすこし広く */
}
}
/* =========================================================
Mobile Chrome 対策：SVGマスクが効かない環境でのフォールバック
- マスクが使えない（or ブロックされる）場合のみ “✔” を表示
- 既存の余白・サイズ・色を保ったまま置き換える
- 置き場所：styles.css の一番最後（必ず後勝ち）
========================================================= */
/* マスクが使える環境（Edge/PC等）は既存の指定が働くので何もしない */
/* マスクが使えない環境だけ、このブロックが有効になる */
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
body ul.keywords > li::before{
/* 既存の “content:"" + mask” をテキスト“✔”へ置換 */
content: "✔" !important;
/* マスク前提の装飾を無効化して文字として描画 */
background: none !important;
-webkit-mask: none !important;
mask: none !important;
/* 見た目（大きさ/位置/余白/色）はこれまでの調整値に寄せる */
display: inline-block !important;
font-weight: 900 !important;
line-height: 1 !important;
color: var(--kwc-orange-500, #F28300) !important;
/* 直前の調整値に準拠：サイズと右余白（詰め気味） */
font-size: 1.00em !important; /* もう少し大きくしたい場合は 1.04em へ */
margin-right: .16em !important; /* さらに詰めるなら .14em、ゆるめるなら .18em */
transform: translateY(.02em) !important; /* ベースライン微調整（端末差対策） */
position: static !important;
left: auto !important;
top: auto !important;
box-shadow: none !important;
filter: none !important;
pointer-events: none !important;
}
}
/* === Fix: PCだけ、ヒーロー5枚目のトリミング位置を下寄りに === */
@media (min-width: 641px){
.hero #hero-slide-5{
/* cover のまま、縦の見切れを緩和するため被写体の下側を優先して見せる */
background-position: center 85%; /* 例: 80–90%で微調整可 */
/* 必要に応じて下をもう少し見せたい場合は 90% 前後へ */
}
}
/* === PCだけ：5枚目を「下の文字まで」＋「全体も少し多め」に見せる === */
@media (min-width: 641px){
.hero #hero-slide-5{
/* 1) 被写体の重心を下寄りに（下の文字を優先表示） */
background-position: center 92%;
/* 2) 背景の拡大率を少しだけ下げて、全体をもう少し見せる
- cover のままだと常に四辺どこかがトリミングされます。
- “枠のサイズ”は変えず、5枚目だけ画像の見える量を増やすため、
「高さ96%」相当の contain 表示に寄せます（白の余白は最小限）。
→ 96%〜100% の範囲で微調整します。 */
background-size: auto 96%;
background-repeat: no-repeat;
background-color: #fff; /* 余白が出た場合の下地。サイト背景に合わせて白 */
}
}