/* override-critical.css  (2025-08-24)
   既存CSSを崩さず、“メニュー復旧 + ヒーロー可読性”のみを最小上書き。
   使い方：すべてのCSSの最後で読み込む
     <link rel="stylesheet" href="/css/override-critical.css?v=20240824" media="all">
*/

/* ========== ナビ（PC）を元のテーブル型で安定させる / 弾丸リスト解消 ========== */
.global-nav, .global-nav-in { position: relative; z-index: 5000; }
.global-nav-in ul { margin:0; padding:0; list-style:none; }
.global-nav-in li { list-style:none; margin:0; padding:0; }

@media (min-width: 1024px) {
  /* 旧テンプレの table-layout に合わせて“等幅”＆一列配置へ戻す */
  .global-nav-in > ul {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .global-nav-in > ul > li {
    display: table-cell;
    vertical-align: middle;
    position: relative; /* サブメニューの基準 */
  }

  /* サブメニューは親の真下に重ねる（PC） */
  .global-nav-in li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 5100;            /* ヒーローより上 */
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border-left: 0;
  }
  .global-nav-in li:hover > ul,
  .global-nav-in li:focus-within > ul { display: block; }

  /* リンク配色を明確に（濃紺テキスト、ホバーは反転） */
  .global-nav-in li > a {
    display: block;
    min-height: 1.5em;
    padding: 0.8em 1em;
    text-decoration: none;
    background: #FFFFFF;
    color: #1a242f;
  }
  .global-nav-in li > a:hover,
  .global-nav-in li:hover > a,
  .global-nav-in li > a:focus {
    background-color: #1a242f;
    color: #FFFFFF;
  }
}

/* ========== ヒーロー（白カード）の可読性強化 & レイヤー調整 ========== */
/* ヒーロー一帯はナビより下層に。 */
.main-image,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-image-in-text-box { position: relative; z-index: 100; }

/* 文字は濃紺、影は弱め。カードは明るい白の不透明度を上げてコントラスト確保 */
.hero-panel,
.main-image-in-text-cont {
  color: #132232;
  text-shadow: none;
  background-color: rgba(255,255,255,0.90) !important; /* 透過を強めて明るく */
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  padding: clamp(16px, 2vw, 28px);
  backdrop-filter: blur(4px);
}

/* 見出しはやや太く/暗く。リンク色も明確に */
.hero-panel h1, .hero-panel h2,
.main-image-in-text-cont h1, .main-image-in-text-cont h2 {
  color: #0f2233;
  font-weight: 800;
  letter-spacing: .01em;
}
.main-image-in-text-cont a { color: #0a58ca; }
.main-image-in-text-cont a:hover { color:#073d8d; }

/* 「36年」などの強調を視認性高く（マーク風の下線ハイライト） */
.hero-panel em, .hero-panel .em,
.main-image-in-text-cont em, .main-image-in-text-cont .em {
  color: #d5393a;
  font-style: normal;
  background: linear-gradient(transparent 70%, #fde2e1 0);
  padding: 0 .1em;
  border-radius: 4px;
}

/* ========== かつラボ画像の縦伸び防止（念のため） ========== */
.katsu-labo .katsu-labo-media { position:relative; overflow:hidden; aspect-ratio: 16 / 9; }
.katsu-labo .katsu-labo-media > img { width:100%; height:100%; object-fit:cover; object-position:center; }

@media (max-width: 767px){
  .katsu-labo .katsu-labo-media { aspect-ratio: 4 / 3; }
  /* モバイルでも白カードをやや濃くして読みやすく */
  .main-image-in-text-cont { background-color: rgba(255,255,255,0.92) !important; }
}

/* ========== 万一、旧overrideで #menu をflex化していた場合のリセット ========== */
nav.global-nav #menu {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
nav.global-nav #menu > li {
  display: table-cell !important;
  vertical-align: middle !important;
  position: relative !important;
}
nav.global-nav #menu li ul {
  display: none; position: absolute; top:100%; left:0; width:100%;
  background:#fff; z-index: 5100;
}
nav.global-nav #menu li:hover > ul,
nav.global-nav #menu li:focus-within > ul { display:block; }