/* =========================================================
   完全版 CSS（整理済み）
   - 下線はボーダー風（通常は透明、ホバーで表示）
   - 第2/第3階層は visibility/opacity で制御してホバーの隙間を潰す
   - !important を極力排除（既存の強い指定が残る場合は該当セレクタを特定）
========================================================= */

/* -------------------------
   変数（微調整ポイント）
   ------------------------- */
:root{
  --nav-bg: #2e1a47;
  --submenu-bg: #3a2a6a;
  --sub-submenu-bg: #4a3a7a;
  --nav-link-underline-color: rgba(255,255,255,0.9);
  --submenu-offset: 6px; /* 第3階層の右オフセット（正で右寄せ、負で左寄せ） */
  --submenu-overlap: -2px; /* 親→孫の隙間を潰す量（px） */
}

/* =========================================================
   リセット / 基本
========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

body{
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  background: #f8f9fb;
  color: #222;
  line-height: 1.6;
  padding-top: 144px; /* header 84 + nav 60 */
}

img{ max-width:100%; height:auto; display:block; }

.table-image {
  margin: 20px 0;
  text-align: center;
}

.table-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* =========================================================
   ヘッダー
========================================================= */
.header{
  background: linear-gradient(90deg,#3b2b5a,#1e1a3a);
  padding: 12px 20px;
  color: #fff;
  position: fixed;
  top: 0; left: 0; width: 100%;
  z-index: 9999;
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  max-width:1200px; margin:0 auto; overflow:hidden;
}
.header-logo{ height:60px; }
.header-title h1{ margin:0; font-size:1.5rem; font-weight:400; }
.header-title p{ margin:0; font-size:0.85rem; opacity:0.75; }

/* header-link を画像サイズに限定する（安全で最小の修正） */
.header-link {
  display: inline-block;    /* ブロック化はするが幅は内容に合わせる */
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;       /* 必要なら相対位置にして子要素の基準に */
  z-index: 1;               /* ハンバーガーより背面に */
}

/* 画像をブロック化して余白を消す */
.header-link img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* ハンバーガーを確実に前面に出す（クリック可能にする） */
.hamburger {
  position: absolute;       /* 既存のままなら z-index を上げるだけでOK */
  z-index: 99999 !important;
}


/* =========================================================
   ハンバーガー（モバイル）
========================================================= */
.hamburger{
  position:absolute; right:16px; top:18px;
  width:28px; height:22px; cursor:pointer; z-index:20000;
}
.hamburger span{
  display:block; height:3px; background:#fff; margin-bottom:6px; border-radius:2px; transition:0.3s;
}
.hamburger.open span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

/* =========================================================
   ナビ（共通）
   - 下線は border-bottom を使い通常は透明、hover/focus で表示
========================================================= */
.nav ul{ list-style:none; margin:0; padding:0; }

.header .nav > ul > li > a,
.nav > ul > li > a{
  display:block;
  padding:14px 20px;
  color:#fff;
  text-decoration:none;
  border-bottom:2px solid transparent; /* 下線（通常は透明） */
  padding-bottom:10px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

/* ホバー / フォーカスで下線表示（キーボード対応） */
.header .nav > ul > li > a:hover,
.header .nav > ul > li > a:focus,
.nav > ul > li > a:hover,
.nav > ul > li > a:focus{
  border-bottom-color: var(--nav-link-underline-color);
  transform: translateY(-2px);
  outline: none;
}
.nav > ul > li > a:focus{
  box-shadow: 0 0 0 3px rgba(106,79,191,0.12);
}

/* =========================================================
   モバイル（max-width:899px）
========================================================= */
@media (max-width:899px){
  .content-wrapper,
  .main,
  .page-content,
  .article-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* nav（開閉メニュー） */
  .nav{
    position: fixed;
    top: 72px !important;
    left:0;
    width:100%;
    max-height: calc(100vh - 72px);
    overflow-y:auto;
    background: var(--nav-bg);
    display:none;
    padding:10px 0;
    z-index:9999;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
  }
  .nav.open{
    display:block;
    transform: translateY(0);
  }

  /* header（高さ72pxで固定） */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    z-index: 9999;
  }

  /* header-inner */
  .header-inner{
    width: calc(100% - 60px);
    display: flex;
    align-items: center;
    gap:10px;
    margin: 0;
    padding: 0;
  }

  /* ロゴ・学校名 */
  .header-logo {
    width: 38px;
    height: auto;
    display: block;
  }
  .header-title h1 {
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0;
  }
  .header-title p {
    font-size: 0.72rem;
    margin: 2px 0 0;
    line-height: 1.2;
  }
  .header-title-img, .header-logo {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* ---------------------------------------------------------
     ハンバーガー本体
  --------------------------------------------------------- */
  .hamburger {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 26px;
    cursor: pointer;
  }

  /* 3本線（初期状態） */
  .hamburger span {
    display:block;
    width:100%;
    height: 3px;
    background:#fff;
    margin-bottom:6px;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* × に変形するのは open の時だけ */
  .hamburger.open span:nth-child(1){
    transform: translateY(9px) rotate(45deg);
  }
  .hamburger.open span:nth-child(2){
    opacity:0;
  }
  .hamburger.open span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
  }

  /* ---------------------------------------------------------
     MENU / CLOSE の文字
  --------------------------------------------------------- */
  .hamburger-label {
    position: absolute;
    left: -52px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    pointer-events: none;
    transition: opacity 0.25s ease;
    opacity: 1;
  }

  /* open 時も透明にしない（JS で文字を切り替える） */
  .hamburger.open .hamburger-label {
    opacity: 1;
  }

  /* ---------------------------------------------------------
     レイアウト調整
  --------------------------------------------------------- */
  body {
    padding-top: 56px !important;
  }

  .hero {
    margin-top: 0 !important;
    top: 0 !important;
    position: relative;
    height: auto;
    aspect-ratio: 9/7;
  }

  .nav {
    top: 72px !important;
  }

  .news-section {
    margin-top: 10px;
  }

  /* submenu */
  .submenu{
    display:none;
    background: rgba(70, 50, 120, 0.92);
  }
  .submenu li a{
    padding:12px 30px;
    display:block;
    color:#fff !important;
    border-bottom:1px solid rgba(255,255,255,0.15);
    line-height:1.6;
    text-decoration:none;
  }
  .submenu li a:hover{
    background-color: rgba(255,255,255,0.10);
  }
  .submenu li a:focus{
    outline:2px solid rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.15);
  }

  /* sub-submenu */
  .sub-submenu{
    display:none;
    background: rgba(120, 95, 180, 0.25);
  }
  .sub-submenu li a{
    padding:12px 45px;
    display:block;
    color:#fff !important;
    line-height:1.6;
    text-decoration:none;
  }
  .sub-submenu li a:hover{
    background-color: rgba(255,255,255,0.12);
  }
  .sub-submenu li a:focus{
    outline:2px solid rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.18);
  }

}

/* =========================================================
   PC（min-width:900px）
   - 第2/第3階層は visibility/opacity で制御してホバーの隙間を潰す
   - position の基準を明確にする（第1階層 li / 第2階層 li）
========================================================= */
@media (min-width:900px){
  .content-wrapper,
  .main,
  .page-content,
  .article-body {
    padding-left: 40px;
    padding-right: 40px;
  }

  .hamburger{ display:none; }

  .nav{
    position: fixed; top:84px; left:0; width:100%;
    background: var(--nav-bg); padding:0; z-index:9998; height:60px; overflow:visible;
  }

  .nav > ul{
    display:flex; justify-content:center; gap:20px; height:60px; align-items:center; white-space:nowrap;
  }

  .nav ul ul{ display:block; flex-direction:column; }

  /* 親リンク（PC） */
  .nav > ul > li > a{
    padding:0 20px; height:60px; line-height:60px; display:flex; align-items:center;
    border:none; font-weight:400; letter-spacing:0.04em; transition:0.25s ease;
    border-bottom:2px solid transparent; padding-bottom:0;
  }
  .nav > ul > li > a:hover{ background: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.25); }

  /* 第1階層 li を基準にする */
  .nav > ul > li{ position: relative; }

  /* 第2階層（submenu）: visibility/opacity 制御 */
  .nav > ul > li > .submenu{
    position: absolute; top:60px; left:0; min-width:220px;
    background: var(--submenu-bg); padding:6px 0; border-radius:6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.28);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 0.08s linear; z-index:1000; overflow: visible;
  }

  /* 第2階層の li を基準にする（第3階層の基準） */
  .nav > ul > li > .submenu > li{
    position: relative; box-sizing: border-box; margin:0; padding:0; background: var(--submenu-bg);
  }

  .nav > ul > li > .submenu > li a{
    display:block; padding:10px 16px; color:#fff; line-height:1.2;
    border-bottom:1px solid rgba(255,255,255,0.06);
  }

  /* 第3階層（孫）: 親との隙間を潰すため少し重ねる */
  .nav > ul > li > .submenu > li > .sub-submenu{
    position: absolute;
    top: 0;
    left: calc(100% + var(--submenu-overlap)); /* var(--submenu-overlap) は負値で重ねる */
    min-width: 220px;
    background: var(--sub-submenu-bg);
    padding:6px 0; border-radius:6px; box-shadow:0 8px 20px rgba(0,0,0,0.28);
    visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity 0.08s linear; z-index:2000; white-space:nowrap;
  }

  .sub-submenu li a{ padding:10px 16px; display:block; color:#fff; border-bottom:1px solid rgba(255,255,255,0.06); }

  /* 表示トリガー（親 li / submenu / sub-submenu のいずれかに hover/focus があれば表示を維持） */
  .nav > ul > li:hover > .submenu,
  .nav > ul > li:focus-within > .submenu,
  .nav > ul > li > .submenu:hover,
  .nav > ul > li > .submenu:focus-within{
    visibility: visible; opacity: 1; pointer-events: auto;
  }

  .nav > ul > li > .submenu > li:hover > .sub-submenu,
  .nav > ul > li > .submenu > li:focus-within > .sub-submenu,
  .nav > ul > li > .submenu > li > .sub-submenu:hover,
  .nav > ul > li > .submenu > li > .sub-submenu:focus-within{
    visibility: visible; opacity: 1; pointer-events: auto;
  }

  /* 安全策：親要素が overflow を持つ場合に切られないようにする（必要なら有効化） */
  /* .nav, .nav > ul, .nav > ul > li, .nav > ul > li > .submenu { overflow: visible; } */

  /* stacking context の影響を避ける（通常は不要だが問題が残る場合に検討） */
  /* .nav, .nav * { transform: none; -webkit-transform: none; } */
}

/* =========================================================
   hero / その他（既存を維持）
========================================================= */
.hero{
  width:100%; height:700px; overflow:hidden; position:relative; margin-top:0 !important; padding-top:0 !important;
}
.slick-hero, .slick-hero div{ height:100%; }
.slick-hero img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-copy{
  position:absolute; bottom:10%; left:5%; z-index:3; color:#fff;
  font-size:clamp(18px,4vw,40px); font-weight:300; text-shadow:0 3px 10px rgba(0,0,0,0.4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:768px){
  .hero-copy{ font-size:clamp(16px,5vw,28px); left:50%; transform:translateX(-50%); text-align:center; max-width:95%; }
}

/* =========================================================
   新着 / サイド / フッター（既存維持）
========================================================= */
.news-section{ max-width:1100px; margin:60px auto; padding:0 20px; }
.section-title{ font-size:1.8rem; margin-bottom:20px; padding-left:10px; border-left:6px solid #6a4fbf; color:#2e1a47; font-weight:600; }
.news-list{ display:grid; grid-template-columns:1fr; gap:20px; }
.news-card{ background:#fff; padding:26px; border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,0.12); }
.news-date{ font-size:0.9rem; color:#6a4fbf; font-weight:bold; }
.news-text{ margin:10px 0; }
.news-link{ color:#4a3fa3; font-weight:bold; text-decoration:none; }
.news-link:hover{ text-decoration:underline; }
.news-list .news-card:nth-of-type(n+4){ display:none; }
.news-more-toggle{ text-align:center; margin:20px 0; padding:12px; background:#eee; border-radius:6px; cursor:pointer; font-weight:bold; }
.news-archive{ display:none; margin-top:20px; }
@media (min-width:900px){ .news-list{ grid-template-columns:1fr 1fr; } }

.side-banners{ max-width:1100px; margin:60px auto; padding:0 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .side-banners{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .side-banners{ grid-template-columns:1fr; } }

.banner-card{ display:block; background:#fff; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); overflow:hidden; text-align:center; transition: transform 0.3s ease; }
.banner-card:hover{ transform:scale(1.03); }
.banner-thumb{ width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; }
.banner-title{ padding:12px; font-weight:600; color:#2e1a47; }

.footer{ background:var(--nav-bg); padding:30px 10px; text-align:center; color:#fff; }
.footer-logo{ max-width:300px; margin:0 auto; }

/* アクセシビリティ / フォーカス可視化 */
.nav a:focus, .nav a:active{
  outline: 3px solid rgba(106,79,191,0.25);
  outline-offset: 2px;
  background: rgba(255,255,255,0.02);
}

/* モバイルの開閉は display を直接操作しているため transition を抑制 */
.nav, .nav .submenu { transition: none !important; }

@media (max-width:768px){ .hero{ height:320px; } }

/* サブメニューのリンクは下線を消して統一 */
.nav .submenu a,
.nav .sub-submenu a {
  border-bottom: none !important;
  text-decoration: none !important;
  color: inherit; /* 親の色継承、必要なら明示的に指定 */
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.12s ease;
  display: block;
  padding: 10px 16px; /* 既存と合わせる */
  border-radius: 6px; /* 浮いたときの角丸 */
}

/* ホバー時の「少し浮く」演出（マウス） */
.nav .submenu a:hover,
.nav .sub-submenu a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  background-color: rgba(255,255,255,0.03); /* 軽い背景で可視化 */
  text-decoration: none;
}

/* キーボードフォーカス時は同じ視覚変化を付与（アクセシビリティ） */
.nav .submenu a:focus,
.nav .sub-submenu a:focus {
  outline: 3px solid rgba(106,79,191,0.18);
  outline-offset: 2px;
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
  background-color: rgba(255,255,255,0.03);
}

/* 親メニュー（リンクが # や空 href の場合）の見た目安定化 */
.nav > ul > li.parent > a,
.nav > ul > li.has-child > a {
  cursor: pointer;
}

/* 親にリンクが無くてもキーボードでフォーカス可能にする（必要なら） */
.nav > ul > li.parent > a[href="#"],
.nav > ul > li.parent > a[href=""] {
  /* 見た目はそのまま、フォーカス可能に */
}

/* モバイルでは transform を抑える（タッチでの誤動作防止） */
@media (max-width: 899px) {
  .nav .submenu a,
  .nav .sub-submenu a {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
  }
}

/* DESKTOP: 単一の統一ブロック（ロゴ・header・body padding・hero を一箇所で管理） */
@media (min-width:900px){
  .header-title-img, .header-logo {
    height: 68px !important;
    max-height: 68px !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .header {
    padding: 10px 20px !important;
    box-sizing: border-box;
  }

  /* header(84) + nav(60) を想定した body padding（必要なら +/−4px で微調整） */
  body {
    padding-top: calc(84px + 60px) !important;
  }

  .hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

.nav { z-index: 10050 !important; }
.header-inner { overflow: visible !important; }
.header-link { display: inline-block !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; position: relative !important; z-index: 1 !important; }
.hamburger { z-index: 10060 !important; }
@media (max-width:899px) {
  .nav { transform: none !important; visibility: visible !important; opacity: 1 !important; }
  .nav.open { transform: translateY(0) !important; display: block !important; }
}
/* ロゴ崩れの最小修正（devtools で先に試す） */
.header-link img,
.header-logo,
.header-title-img {
  display: block !important;
  width: auto !important;
  max-height: 68px !important;   /* デスクトップ基準の高さ */
  height: auto !important;
  object-fit: contain !important;
  vertical-align: middle !important;
}

/* モバイル用（ハンバーガー領域を考慮） */
@media (max-width:899px) {
  .header-link img,
  .header-logo,
  .header-title-img {
    max-height: 50px !important;  /* モバイルで小さくする */
  }
  .header-inner { align-items: center !important; }
}

/* ============================
   汎用写真ブロック（全ページ共通）
   ============================ */
.photo-block {
  margin: 30px auto;
  text-align: center;
}

/* PC・スマホ共通の基本スタイル */
.photo-block img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* スマホ最適化（横幅が狭いときの余白調整） */
@media (max-width: 899px) {
  .photo-block {
    margin: 20px auto;
  }
  .photo-block img {
    max-width: 100%;
    border-radius: 6px;
  }
}

/* 部活一覧テーブルの調整 */
.club-table {
  width: 100%;
  table-layout: fixed;
}

.club-table td {
  padding: 2px 0px;
  text-align: center;
}

.club-table a {
  display: inline-block;
}

.club-table img {
  width: 200px;
  height: 50px;
  object-fit: cover;
}

/* スマホは2列 */
@media (max-width: 600px) {
  .club-table td {
    display: inline-block;
    width: 48%;
    margin-bottom: 10px;
  }
  .club-table tr {
    display: block;
  }
}


/* 見出し画像の余白調整 */
.club-table img[alt*="運動部"],
.club-table img[alt*="文化部"] {
  margin-bottom: 10px;
}

.club-hero img {
  width: 100%;
  max-width: 800px; /* ← PCでの最大サイズを制限 */
  height: auto;
  display: block;
  margin: 0 auto 20px; /* 中央寄せ */
  border-radius: 8px;
}

/* 汎用：中央寄せ */
.text-center {
  text-align: center;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 汎用：セクション見出し */
.section-title {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  margin: 40px 0 20px;
  padding-bottom: 6px;
  border-bottom: 2px solid #ccc;
}

/* 部活動ページ上部の画像 */
.club-hero img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
  border-radius: 8px;
}

.club-section-title {
  display: block;
  margin-top: 40px;        /* 運動部→文化部の切り替わりの余白 */
  margin-bottom: 10px;     /* 下のパネルとの距離を確保 */
  width: auto !important;  /* テンプレの max-width:100% を無効化 */
  max-width: none !important;
}


/* 部活動に関するお知らせブロック */
.club-notice {
  background: #f7f7f7;
  border-left: 4px solid #888;
  padding: 16px 20px;
  margin: 30px 0;
  line-height: 1.7;
}

.club-notice ul {
  margin: 8px 0 16px 20px;
}

.philosophy-text {
  line-height: 1.8;
  margin-bottom: 20px;
}

.sub-title {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 30px 0 10px;
  border-left: 4px solid #888;
  padding-left: 8px;
}

.philosophy-image {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 20px auto;
}

.facility-map {
  max-width: 568px;      /* 画像幅に合わせる（任意） */
  margin: 20px auto;     /* 左右 auto で中央寄せ */
}

.facility-map img {
  display: block;
  width: 100%;
  height: auto;
}

/* VR導線（テキストリンクを“ボタンっぽく”） */
.vr-links {
  max-width: 800px;
  margin: 20px auto 30px;
}

.vr-link {
  display: block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 10px;
  text-decoration: none;
  color: #333;
  background: #fafafa;
  transition: background 0.2s;
}

.vr-link:hover {
  background: #f0f0f0;
}

.vr-tag {
  display: inline-block;
  font-size: 0.8rem;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 3px;
  background: #0074c2;
  color: #fff;
}

#main-body .text-center {
  text-align: center;
}

.philosophy-text p.note-center {
  text-align: center;
}

.submenu,
.sub-submenu {
  display: none;
}

.submenu.open,
.sub-submenu.open {
  display: block;
}

/* ========================================
   進路実績ページ 強化版
======================================== */

/* 全体余白 */
.career-result-section {
  max-width: 1000px;
  margin: 0 auto 80px;
}

/* メイン見出し */
.career-result-section h2 {
  font-size: 2rem;
  color: #2e1a47;
  margin-bottom: 30px;
  padding-bottom: 12px;
  border-bottom: 3px solid #2e1a47;
}

/* 数字ブロック */
.career-highlight {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 35px 0 45px;
}

.career-card {
  background: linear-gradient(135deg, #ffffff, #f6f3ff);
  border-left: 6px solid #2e1a47;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.25s ease;
}

.career-card:hover {
  transform: translateY(-4px);
}

.career-number {
  display: block;
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 700;
  color: #2e1a47;
  line-height: 1;
}

.career-label {
  display: block;
  margin-top: 14px;
  font-size: 1rem;
  color: #444;
  letter-spacing: 0.04em;
}

/* 本文 */
.career-result-section p {
  line-height: 2;
  margin-bottom: 20px;
}

/* リスト */
.career-list {
  margin: 20px 0 35px;
  padding-left: 1.4em;
}

.career-list li {
  margin-bottom: 10px;
  line-height: 1.8;
}

/* PDFブロック */
.pdf-preview {
  margin: 20px 0 50px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  background: #fff;
}

/* PDFリンク */
.career-result-section a {
  color: #3c3cb4;
  font-weight: 600;
}

.career-result-section a:hover {
  text-decoration: underline;
}

/* 小見出し */
.sub-title {
  margin-top: 45px;
  margin-bottom: 18px;
  font-size: 1.35rem;
  border-left: 5px solid #2e1a47;
  padding-left: 12px;
  color: #2e1a47;
}

/* =========================
   スマホ最適化
========================= */

@media (max-width: 768px) {

  .career-result-section {
    margin-bottom: 50px;
  }

  .career-result-section h2 {
    font-size: 1.6rem;
  }

  .career-highlight {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .career-card {
    padding: 24px 18px;
  }

  .career-number {
    font-size: 3rem;
  }

  .career-label {
    font-size: 0.95rem;
  }

  .pdf-preview embed {
    height: 420px;
  }

}