/* =========================================================
   VFPrep / NewTop 共通スタイル（棄損なし置換版）
   ---------------------------------------------------------
   // 要点
   // 1) ヘッダー：上端/下端を厳密一致。「準備/Prep」だけ水色、他は白。
   //    右側3アイコンは外寸を統一し、言語ピル（JP/EN）の下端を左側に合わせる。
   // 2) Hero：高さ 27vh（min 165px）。ガラス台は小型、ドットは画像直下・□形状。
   // 3) リンク色は常にテーマカラー（visited も同色）。
   // 4) プロフィール：右寄せ固定。背景パネルなし。**2行固定・全文表示**。
   //    右端は“アップデートカードの内側（=パディング＋ボーダー）”と厳密一致。
   // 5) アップデート：見出しはカード外。日付はテーマ色（下線なし）。
   //    直近3件以外はCSSで非表示（.updates.is-collapsed）。
   //    「もっと見る」は**M1の続きを読む形式に統一**（右寄せ/下線なし）。
   // 6) ハンバーガー：右からドロワーが出る（左基準→右基準）。
   // 7) モジュール画像パス（M1/M2/M3）を正規化し404を防止。
   // 8) 右端合わせの基準を完全一致させるため --card-pad-x と
   //    --card-border-w を新設。プロフィールの margin-right を calc() で統一。
   // 9) --edge-nudge-x = 44px（プロフィール右端の最終微調整）
   // 10) .updates .more は**廃止** → .readmore-actions/.readmore-link を使用。
   ========================================================= */

/* -------------------- CSS変数 -------------------- */
:root{
  --w-container: 1120px;

  --ink: #e9f0f6;
  --ink-weak: #c6d2dc;
  --muted: #9fb3c3;
  --bg: #0c1217;
  --surface: #101820;
  --surface-2: #121d27;

  --accent: #5bc3f5;      /* 「準備/Prep」や現在ドット用の水色 */
  --accent-weak: #9bdcfb;

  --card-radius: 16px;
  --card-shadow: 0 10px 24px rgba(0,0,0,.35);

  --border-soft: rgba(255,255,255,.06);
  --dot-inactive: #ffffff;
  --dot-active: var(--accent);

  /* ★ 右上3ボタンの外寸を少しだけ大きく（max を 36px → 40px） */
  --btn-size: clamp(30px, 2.6vw + 24px, 40px);  /* 右上3ボタンの外寸（流体） */
  --icon-size: calc(var(--btn-size) * 0.5);      /* アイコン内寸を外寸比で統一 */
  --lang-nudge-y: 0px;                           /* 下端ズレ防止のため 0 に統一 */

  --header-h: 56px;                              /* ヘッダー行高の基準 */

  --hero-h: clamp(165px, 27vh, 240px);           /* Hero 高さ */

  --avatar: 48px;                                 /* プロフィール画像の一辺 */
  --profile-text-w: 96px;                         /* テキスト枠幅（HTML側で上書き可） */

  --card-pad-x: 10px;                             /* カードの左右パディング基準 */
  --card-border-w: 1px;                           /* ★ カードの枠線幅（右端一致用） */

  --edge-nudge-x: 44px;                           /* ★ 右端の最終微調整（今回 44px） */
}

:root[data-theme="light"]{
  --ink: #0d1a22;
  --ink-weak: #3c5566;
  --muted: #557181;
  --bg: #f7fbff;
  --surface: #ffffff;
  --surface-2: #f3f7fb;
  --border-soft: rgba(0,0,0,.08);
  --dot-inactive: #2a2a2a;
}

/* -------------------- Reset 最小限 -------------------- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* リンクは常にテーマカラー（visitedも同色） */
a, a:visited{ color: var(--accent); }
a:hover{ color: var(--accent-weak); }

/* -------------------- レイアウト共通 -------------------- */
.container{
  width:min(100% - 32px, var(--w-container));
  margin-inline:auto;
}
.section-title{
  margin:28px 0 12px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.2px;
  /* ★ アクセントバーぶんだけ左に余白をつける */
  position: relative;
  padding-left: 0.9em;
}
/* ★ 全セクションタイトル共通：左側に水色の縦バー */
.section-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:4px;
  height:1.3em;
  border-radius:999px;
  background: var(--accent);
  box-shadow:0 0 8px rgba(91,195,245,.55);
}
.section-title.is-major{ margin-top:8px; }

/* -------------------- Header -------------------- */
.site-header{
  position: sticky;
  top:0;
  z-index:1000;
  /* ヘッダーと背景の差を強める濃いめグラデーション（dark 基本） */
  background:
    linear-gradient(
      to bottom,
      rgba(4,8,12,.96) 0%,
      rgba(4,8,12,.8) 42%,
      rgba(4,8,12,0) 100%
    );
  backdrop-filter: blur(6px);
  margin-top: 0;
  margin-bottom: 36px;
  padding-top: 22px;                 /* 上の余白 */
  padding-bottom: 6px;
  box-shadow: 0 12px 26px rgba(0,0,0,.55); /* 下方向の影だけ残す */
}
.header-inner{
  display:flex;
  justify-content:space-between;
  gap:clamp(6px, 1.6vw, 16px);
  min-height: var(--header-h);   /* 行高の基準。必要なら伸びてよい */
  align-items:flex-end;          /* 子要素の「下端」を揃える */
  padding: 0;
  min-width: 0;
}

/* 左：ロゴ＋タグライン */
.brand,
.header-actions{
  display:flex;
  align-items:center;
  min-width: 0;
}

.brand{
  gap:clamp(6px, 1.6vw, 10px);
  text-decoration:none;
  color:inherit;
}

.brand-logo{
  display:block;
  inline-size: var(--header-h);   /* 幅 = 高さ = ヘッダー基準 */
  block-size:  var(--header-h);
  border-radius:10px;
  aspect-ratio: 1 / 1;            /* 縦横比 1:1 を厳守 */
  object-fit: contain;            /* 比率を壊さず収める */
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* テキストロゴ：2行を中央寄せ */
.tagline{
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:0;
  padding:0;
  line-height:1.12;
  /* ★ 文字を一段階大きく（ヘッダー高さは据え置き） */
  font-size: clamp(18px, 2.5vw + 11px, 24px);
  font-weight:800;
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:visible;
  text-overflow:ellipsis;
  /* ★ ロゴと同じ高さ枠にして上下を厳密に揃える */
  height: var(--header-h);
}
.tagline .accent{ color:var(--accent); } /* 「準備/Prep」だけ水色 */
.tagline :not(.accent){ color:#fff; }     /* 残りは白 */

/* ★ Light 時はロゴ文字を濃いインク色にして飛びを防ぐ */
:root[data-theme="light"] .tagline .accent{
  color: var(--accent);
}
:root[data-theme="light"] .tagline :not(.accent){
  color: var(--ink-main);
}

/* 右：言語ピル / テーマ / バーガー。外寸統一＋ボタン感強化 */
.header-actions{
  gap:10px;
  align-items:flex-end; /* ★ 3ボタンの下端を厳密に揃える */
}

.lang-pill,
.btn-icon{
  inline-size: var(--btn-size);
  block-size:  var(--btn-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.12);
  color:var(--ink);
  border-radius:16px;
  box-shadow:
    0 3px 10px rgba(0,0,0,.35),
    inset 0 10px 16px rgba(255,255,255,.05),
    inset 0 -8px 12px rgba(0,0,0,.25);
  cursor:pointer;
  user-select:none;
  transition:
    transform .1s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease;
}

/* ★ JP/EN テキストピル：高さは他と共通・中身は中央寄せ */
.lang-pill{
  transform: translateY(var(--lang-nudge-y));
  width:auto;
  padding:0 10px;
  gap:6px;
  font-weight:700;
  letter-spacing:.3px;
  line-height:1;
}

/* ★ hover 時の浮き上がり（全ボタン共通） */
.lang-pill:hover,
.btn-icon:hover{
  transform: translateY(calc(var(--lang-nudge-y, 0px) - 1px));
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    inset 0 12px 18px rgba(255,255,255,.06),
    inset 0 -8px 14px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.18);
}

/* 言語ピル：JP / EN（スラッシュ自動挿入） */
.lang-pill span{
  font-size:12px;
  opacity:.95;
  line-height:1;
}
.lang-pill span + span{
  position:relative;
  padding-left:10px;
}
.lang-pill span + span::before{
  content:"/";
  position:absolute;
  left:2px;
  top:0;
  opacity:.9;
}

/* テーマ：月/太陽 */
.btn-icon.theme{ padding:0; }
.icon-theme{
  width:var(--icon-size);
  height:var(--icon-size);
  display:block;
  background:currentColor;
}
:root[data-theme="dark"] .icon-theme{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 1 0 21 12.79z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 1 0 21 12.79z'/></svg>") no-repeat center/contain;
}
:root[data-theme="light"] .icon-theme{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g fill='black' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><line x1='12' y1='1' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='1' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='23' y2='12'/><line x1='4.2' y1='4.2' x2='6.8' y2='6.8'/><line x1='17.2' y1='17.2' x2='19.8' y2='19.8'/><line x1='4.2' y1='19.8' x2='6.8' y2='17.2'/><line x1='17.2' y1='6.8' x2='19.8' y2='4.2'/></g></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g fill='black' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><line x1='12' y1='1' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='1' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='23' y2='12'/><line x1='4.2' y1='4.2' x2='6.8' y2='6.8'/><line x1='17.2' y1='17.2' x2='19.8' y2='19.8'/><line x1='4.2' y1='19.8' x2='6.8' y2='17.2'/><line x1='17.2' y1='6.8' x2='19.8' y2='4.2'/></g></svg>") no-repeat center/contain;
}
/* バーガー内SVGのサイズ統一 */
.btn-icon svg{
  width:var(--icon-size);
  height:var(--icon-size);
  display:block;
}

/* -------------------- ナビドロワー（右から出す） -------------------- */
.nav-drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:260px;
  transform:translateX(100%);
  background:var(--surface);
  color:var(--ink);
  padding:18px;
  z-index:9500;
  box-shadow:-8px 0 24px rgba(0,0,0,.45);
  transition:transform .25s ease;
}
.nav-drawer.is-open{ transform:translateX(0); }
.nav-drawer .vfp-link{
  display:block;
  padding:10px 6px;
  border-radius:10px;
  color:var(--ink);
  text-decoration:none;
}
.nav-drawer .vfp-link:hover{
  background:rgba(255,255,255,.06);
}

/* ドロワー背面のディム */
.nav-dim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  opacity:0;
  pointer-events:none;
  z-index:9400;
  transition:opacity .2s ease;
}
.nav-dim.is-show{
  opacity:1;
  pointer-events:auto;
}

/* -------------------- Hero（27vh・ドット直下） -------------------- */
.hero{
  position:relative;
  margin-top:6px;
  border-radius:22px;
  overflow:hidden;
  background:var(--surface-2);
  box-shadow:var(--card-shadow);
  /* ★ ヘッダー以外フル幅禁止：Hero もコンテナ幅に揃える */
  width: min(100% - 32px, var(--w-container));
  margin-inline: auto;
}
.hero-track{
  display:flex;
  gap:0;
  inline-size:100%;
  block-size:var(--hero-h);
  overflow:hidden;
  scroll-snap-type:x mandatory;
}
.hero-slide{
  position:relative;
  min-inline-size:100%;
  block-size:100%;
  scroll-snap-align:center;
  display:grid;
  grid-template-columns:1fr;
}

/* 背景画像（3枚） */
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: center/cover no-repeat;
  filter: brightness(.92) saturate(1.05);
}
.hero-slide.is-1::before{ background-image:url("../images/hero/hero1.webp"); }
.hero-slide.is-2::before{ background-image:url("../images/hero/hero2.webp"); }
.hero-slide.is-3::before{ background-image:url("../images/hero/hero3.webp"); }

/* 斜めストライプのデコ（背景の上、ガラスの下） */
.hero .decor{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.045) 0 14px,
      rgba(0,0,0,.045) 14px 28px
    );
}

/* ガラス台（小型化） */
.hero-copy{
  position:absolute;
  inset:auto clamp(10px,3vw,14px) 18px clamp(10px,3vw,14px);
  z-index:2;
  padding:14px 16px;
  color:#fff;
  background: linear-gradient(180deg, rgba(18,24,32,.35), rgba(18,24,32,.65));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px) saturate(1.05);
  font-size: clamp(13px, 1.2vw + 10px, 15px);
  max-inline-size: min(92%, 680px);
  overflow-wrap:anywhere;
}
.hero-copy h1{
  margin:0 0 4px;
  font-size: clamp(18px, 1.8vw + 12px, 20px);
  font-weight:800;
  letter-spacing:.3px;
}
.hero-copy p{
  margin:0 0 6px;
  color:#e9f2fa;
}
.hero-ctas{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* ドット：画像の直下（重ねない）／□形状 */
.hero .dots{
  position: static;
  transform: none;
  margin: 8px auto 6px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: auto;
}
.hero .dot{
  width:clamp(8px, 1.4vw, 10px);
  height:clamp(8px, 1.4vw, 10px);
  border-radius:3px;
  background:var(--dot-inactive);
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 2px 6px rgba(0,0,0,.25) inset;
  opacity:.95;
}
.hero .dot.is-active{ background:var(--dot-active); }

/* -------------------- グリッド/カード -------------------- */
.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.card{
  background:var(--surface);
  border: var(--card-border-w) solid var(--border-soft);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  padding:10px var(--card-pad-x);
}

/* Update 本体：縦flexにして“続きを読む”を右下へ */
.updates{
  display:flex;
  flex-direction:column;
  padding-top:6px;
  padding-bottom:10px;
}

.action-item{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
}
.action-item + .action-item{
  margin-top:4px;
}
.action-item .desc strong{
  font-size:13px;
  font-weight:700;
}
.action-item .desc{
  color:var(--ink);
  /* ★ 日付との間隔を少しだけ詰める */
  margin:4px 0 0;
}
.action-item .desc br{ line-height:1; }
.action-item .desc span{
  display:inline-block;
  margin-top:2px;
}
.updates .date{
  color: var(--accent);
  text-decoration: none;
  margin:2px 0 4px;
}

/* 折りたたみ：直近3件以外を非表示（is-collapsed時のみ） */
.updates.is-collapsed .action-item:nth-of-type(n+4){
  display:none;
}

/* M1と共通の “続きを読む” UI（右寄せ／下線なし） */
.readmore{
  --lh:1.55;
  --lines:2.5;
  line-height:var(--lh);
  overflow:hidden;
  position:relative;
  margin-top:12px;
}
.readmore::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2.2em;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.45) 70%,
    rgba(0,0,0,.7) 100%
  );
}
:root[data-theme="light"] .readmore::after{
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,.65) 70%,
    rgba(255,255,255,.9) 100%
  );
}
.readmore.is-open{
  max-height:none;
}
.readmore.is-open::after{
  display:none;
}

/* アップデート専用：1.5件見せ。max-heightはJSで --rm-items-max をセット */
.readmore[data-mode="items"]{
  max-height: var(--rm-items-max, 160px);
}

/* 右寄せリンク（下線なし） */
.readmore-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}
.readmore-link{
  display:inline-block;
  color:var(--accent);
  text-decoration:none;
  line-height:1.2;
}
.readmore-link:hover{
  color:var(--accent-weak);
}

/* -------------------- 自己紹介（右寄せ固定・2行表示・全文） -------------------- */
aside[aria-label="自己紹介と連絡先"]{
  justify-self:end;
  place-self:start end;
  margin-left:auto;
  margin-right: calc(var(--card-pad-x) + var(--card-border-w) - var(--edge-nudge-x));
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: grid;
  grid-template-columns: var(--avatar) var(--profile-text-w);
  align-items: center;
  column-gap: 10px;
  padding: 2px 0 8px 0 !important;
  margin-top: 10px;
}
aside[aria-label="自己紹介と連絡先"] img{
  inline-size: var(--avatar);
  block-size:  var(--avatar);
  border-radius: 12px;
  object-fit: cover;
  display:block;
}
aside[aria-label="自己紹介と連絡先"] p{
  inline-size: var(--profile-text-w);
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  white-space: normal;
  overflow: visible;
}
aside[aria-label="自己紹介と連絡先"] p a{
  color: var(--accent);
  text-decoration: underline;
}

/* -------------------- モジュール区切り（M1/M2/M3） -------------------- */

/* アップデートとモジュール題字＋背景との距離を少し詰める */
.modules-row{
  margin-top: 16px; /* 旧 24px 相当から少しだけ短縮 */
}

/* ★ モジュールカードもアップデートカードと同じ横幅感に統一 */
.actions.single{
  padding:10px var(--card-pad-x);
}
.actions .ph-img{
  block-size:160px;
  border-radius:12px;
  background:#0b131a center/cover no-repeat;
  border:1px solid var(--border-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.actions .ph-img.sec-1{ background-image:url("../images/modules/M1/M1.png"); }
.actions .ph-img.sec-2{ background-image:url("../images/modules/M2/M2.png"); }
.actions .ph-img.sec-3{ background-image:url("../images/modules/M3/M3.png"); }

.actions .btns{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content: space-between;
  margin:12px 0 6px;
}
.actions .desc{
  margin-top:6px;
  color:var(--ink);
}
.actions .desc p{
  margin:6px 0;
}

/* -------------------- フッター -------------------- */
footer{
  color: var(--muted);
}

/* -------------------- スクロールバー（控えめ） -------------------- */
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:10px;
}
*::-webkit-scrollbar-track{
  background:rgba(0,0,0,.12);
  border-radius:10px;
}

/* ========================================================================
   Patch 2025-11-11（サブピクセル対策＋Drawer微調整）
   ======================================================================== */
.header-inner{
  align-items:flex-end;
}

/* Drawer：説明テキストの明度差＋Close右寄せ */
.nav-drawer .vfp-link strong{
  display:block;
  margin-bottom:2px;
  font-weight:700;
  opacity:.98;
}
.nav-drawer .vfp-link .sub{
  display:block;
  font-size:.92rem;
  opacity:.66;
}
.nav-drawer .drawer-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

/* ========================================================================
   Patch 2025-11-12: Hero 2/3 非表示対策 + scrollLeft 対応
   ======================================================================== */
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}
.hero-track{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.hero-track::-webkit-scrollbar{ display:none; }
.hero-track{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-slide{
  flex: 0 0 100%;
}

/* Drawer：Back to Top を他メニューと同じトーンに */
.nav-drawer .drawer-actions .vfp-btn{
  background: none;
  color: var(--ink);
  border: none;
  box-shadow: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
}
.nav-drawer .drawer-actions .vfp-btn:hover{
  background: rgba(255,255,255,0.06);
}

/* =========================================================
   M4: 公式リソース（Official Resources）
   ---------------------------------------------------------
   // 要点
   // 1) 3つの公式画像を縦1列で並べる（PC/モバイル共通）。
   // 2) 画像の縦横比は維持しつつ、同じ横幅のボックスに収める。
   // 3) 画像全体がクリック可能なリンク領域になる。
   ========================================================= */

/* M4 全体のリストコンテナ */
.vfp-m4-resources {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;           /* 画像ボタン同士の縦間隔 */
}

/* 各画像ボタン（リンク） */
.vfp-m4-resource-link {
  display: block;
  text-decoration: none;
}

/* 画像を入れる共通ボックス
   - 横幅はカードに合わせて100%
   - 高さは固定（比率そのまま縮小／余白は出てOK）
*/
.vfp-m4-resource-imgWrap {
  width: 100%;
  height: 110px;          /* 仮値：大きすぎ/小さすぎなら後で微調整 */
  border-radius: 0.5rem;  /* 角丸（既存カードと馴染ませる） */
  overflow: hidden;       /* 画像がはみ出さないように */
}

/* 実際の画像
   - 縦横比を維持しつつボックス内に収める
   - 黒帯or余白が出てもOKな「contain」を採用
*/
.vfp-m4-resource-imgWrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* ★ここで縦横比を維持してリサイズ */
}

/* =========================================================
   VFPrep / NewTop Light Theme Layout Overrides
   ---------------------------------------------------------
   // 要点
   // 1) ヘッダー / 本編 / モジュール / フッターの背景と文字色だけを上書き。
   // 2) data-theme="dark" の見た目は変えない（ベースCSSはそのまま）。
   // 3) スティッキーフッターはヘッダーと同系色のバーで上下を挟むイメージ。
   ========================================================= */

/* ---- Light theme tokens --------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  /* Base / text */
  --bg-page: #f5f6fa;
  --ink-main: #151922;
  --ink-sub:  #4a4f59;

  /* Header */
  --bg-header: #eef1f7;
  --bg-header-border: #d2d7e3;

  /* Modules / cards */
  --bg-module: #ffffff;
  --bg-module-soft: #f8f9fc;

  /* Footer */
  --bg-footer: #f5f6fa;
  --bg-footer-sticky: #eef1f7;
  --footer-border-top: #d2d7e3;
}

/* ---- Page background / base text ------------------------ */
:root[data-theme="light"] body {
  background-color: var(--bg-page);
  color: var(--ink-main);
}

/* ---- Header background ---------------------------------- */
:root[data-theme="light"] .site-header {
  background: var(--bg-header); /* グラデをやめてフラットに */
  color: var(--ink-main);
  border-bottom: 1px solid var(--bg-header-border);
  box-shadow: 0 6px 14px rgba(15,23,42,0.12); /* 境目の影を軽くして不自然さを軽減 */
}

/* ---- Updates / cards / modules 背景 ---------------------- */
/* アップデートや汎用カード */
:root[data-theme="light"] .card {
  background-color: var(--bg-module);
  color: var(--ink-main);
}

/* ---- Footer (リーガル側) -------------------------------- */
:root[data-theme="light"] .vfp-footer {
  background-color: var(--bg-footer);
  color: var(--ink-sub);
}

/* ---- Sticky footer (©バー) ------------------------------ */
/* インラインstyleの background / border を上書きするため !important を付与 */
:root[data-theme="light"] .vfp-footer-sticky {
  background-color: var(--bg-footer-sticky) !important;
  border-top: 1px solid var(--footer-border-top) !important;
  color: var(--ink-sub);
}

/* ========================================================================
   Patch: IndexGemini3 Integration & Design Refinement (Consolidated Final)
   ======================================================================== */

/* --- 1. ヘッダー微調整 --- */
.header-inner {
  align-items: flex-end !important;
  padding-bottom: 10px !important;
}
.tagline {
  height: var(--header-h) !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 4px 0 !important;
  line-height: 1 !important;
}
.header-actions {
  align-self: flex-end !important;
  padding-bottom: 0px !important;
}
.lang-pill, .btn-icon {
  transform: none !important;
  margin-bottom: 0 !important;
}

/* --- 2. メイン画面レイアウト調整 --- */
#main-screen {
  padding-top: 0 !important;
  min-height: auto !important;
  height: auto !important;
  padding-bottom: 60px !important;
}
#main-screen > .container:first-child {
  margin-top: 0 !important; 
}
.site-header {
  margin-bottom: 40px !important;
}
footer.vfp-footer {
  position: static !important;
  width: auto !important;
  background: transparent !important;
}

/* --- 3. セクションタイトル --- */
.section-title {
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  line-height: 1.3 !important;
  padding-left: 0.7em !important;
  color: var(--ink) !important;
}
.section-title::before {
  height: 1em !important;
  width: 5px !important;
  border-radius: 4px !important;
  top: 52% !important;
  transform: translateY(-50%) !important;
}

/* --- 4. アップデートカード --- */
.card.updates .action-item,
.card.updates .desc,
.card.updates .date {
  text-align: left !important;
  align-items: flex-start;
}

/* --- 5. モジュールカード（モニター風エフェクト適用） --- */
.mod-frame .mod-img {
  /* サイズ強制 */
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: center top !important;

  /* モニター風エフェクト（強め） */
  filter: contrast(1.1) brightness(1.1) saturate(1.1);
  border: 1px solid rgba(91, 195, 245, 0.6) !important;
  
  /* 発光と影 */
  box-shadow: 
    0 0 0 1px #000,
    0 0 12px rgba(91, 195, 245, 0.4),
    0 20px 50px rgba(0, 0, 0, 0.7) !important;
  
  border-radius: 6px;
  image-rendering: -webkit-optimize-contrast;
}

/* ライトモード時の調整 */
:root[data-theme="light"] .mod-frame .mod-img {
  border-color: rgba(21, 25, 34, 0.2) !important;
  box-shadow: 
    0 0 0 1px rgba(255,255,255,0.5),
    0 4px 12px rgba(0,0,0,0.15) !important;
  filter: contrast(1.05) brightness(1.02);
}

/* メインボタン復元 */
.actions.single .btns .vfp-btn:not(.ghost) {
  background: linear-gradient(135deg, #5ec3f5 0%, #3a7bd5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(94,195,245,0.35);
  border: none !important;
}

/* --- 6. 公式リソース (M4) --- */
.vfp-m4-resource-imgWrap img {
  object-fit: contain !important; 
  background-color: var(--bg-module); 
}
.vfp-m4-resource-imgWrap--logo {
  background-color: #ffffff !important;
}

/* --- 7. ドロワーメニュー --- */
.nav-drawer .vfp-link {
  text-align: left !important;
  padding: 12px 20px !important;
  margin-bottom: 6px;
}
.nav-drawer .vfp-link strong {
  font-size: 18px;
}
:root[data-theme="light"] .nav-drawer .vfp-link:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* --- 8. 背景・ヘッダー透過 --- */
:root[data-theme="light"] body::before {
  background-color: rgba(245, 247, 250, 0.92) !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] .site-header {
  background: linear-gradient(
    to bottom,
    rgba(238, 241, 247, 0.90) 0%,
    rgba(238, 241, 247, 0.75) 100%
  ) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(210, 215, 227, 0.6) !important;
}
/* =========================================================
   Patch: サブページ（機能ページ）統合用のリセット設定
   ========================================================= */
/* ヘッダー下の強制余白をゼロにする */
body.subpage .site-header {
  margin-bottom: 0 !important;
}

/* もし既存ページ側で body に padding-top を入れている場合、それを打ち消す */
body.subpage {
  padding-top: 0 !important;
}

/* 必要であればメインコンテナの余白も調整（状況に応じて有効化してください） */
/* body.subpage main,
body.subpage .container {
  margin-top: 0 !important;
}
*/