/* style.css - 岡山大学 職員募集サイト（青基調・公式風メニュー版 改・スライダー対応/白飛び対策済） */
/* 岡山大学BLUE = DIC183近似（C90/M37）をWeb用に調整 */

:root{
  --ou-blue: #1AA1FF;
  --ou-blue-mid: #2A74CC;
  --ou-blue-deep: #004A8F;
  --ou-blue-soft: #E9F4FF;

  --c-bg:#FFFFFF;
  --c-text:#1A345B;
  --c-sub:#3B8CD3;
  --max:1200px;

  /* メニュー用 */
  --nav-bg: var(--ou-blue-soft);
  --nav-fg: var(--ou-blue-deep);
  --nav-active-bg: var(--ou-blue-mid);
  --nav-active-fg: #fff;
  --nav-border: rgba(42,116,204,.35);
  --nav-shadow: 0 4px 20px rgba(0,0,0,.08);

  --header-offset: 0px;
  --nav-height: 48px;
  --alt-odd-bg: #fff;
  --alt-even-bg: var(--ou-blue-soft);
}

/* ===================== */
/* 基本レイアウト */
/* ===================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--c-bg);color:var(--c-text)}
body{
  font-family:'Zen Kaku Gothic New',system-ui,-apple-system,'Noto Sans JP',sans-serif;
  line-height:1.8;
  /* 白飛び対策：初期から可視。全体フェード無効化 */
  opacity:1;
  transition:none;
}
/* 旧クラスが残っても白飛びしないよう保険 */
body.fade-in{opacity:1;transition:none}

h1,h2,h3{font-family:'Noto Serif JP',serif;line-height:1.35;margin:0 0 .6rem}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,3vw,24px)}
.section{padding-block:clamp(40px,6vw,80px)}
.center{text-align:center}
a{color:var(--ou-blue-mid);text-decoration:underline;text-underline-offset:2px}
a:focus-visible{outline:2px solid #2563eb;outline-offset:2px}

/* ===================== */
/* ヘッダー */
/* ===================== */
.site-header{
  width:100%;
  z-index:100;
  position:relative;
  background:#fff;
  border-bottom:1px solid #e6eef8;
}

/* 新ヘッダー（#head.header-main 用） */
.header-main{
  width:100%;
  z-index:100;
  position:relative;
  background:#fff;
  border-bottom:1px solid #e6eef8;
}
.header-main-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  max-width:var(--max);
  margin:0 auto;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.logo img{height:40px;width:auto;}
.header-links ul{
  display:flex;
  gap:16px;
  list-style:none;
  margin:0;
  padding:0;
}
.header-links a{
  text-decoration:none;
  color:#0f172a;
  font-weight:600;
  font-size:0.95rem;
}
.header-links a:hover,
.header-links a:focus{
  text-decoration:underline;
}

/* スマホ用ヘッダー調整 */
@media (max-width:640px){
  .header-main-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .header-links ul{
    gap:8px;
  }
  .header-links img{
    width:44px;
    height:44px;
  }
}

/* ===================== */
/* ヒーロー（共通） */
/* ===================== */
.hero-image-only{position:relative;overflow:hidden}
.hero-image-only .hero-art{display:block;width:100%;height:auto}

/* ===================== */
/* ヒーロー直下メニュー（ベース） */
/* ===================== */
.section-nav{
  position:sticky;
  top:var(--header-offset);
  z-index:50;
  background:var(--nav-bg);
  border-top:1px solid var(--nav-border);
  border-bottom:3px solid var(--ou-blue-mid);
  transition:box-shadow .3s ease;
}
.section-nav.is-stuck{box-shadow:var(--nav-shadow);}
.section-nav .container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:.6rem 0;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.section-nav a{
  flex:0 0 auto;
  display:inline-block;
  padding:.65rem 1.1rem;
  font-weight:700;
  color:var(--nav-fg);
  text-decoration:none;
  border-right:1px solid var(--nav-border);
  transition:background .2s,color .2s,transform .12s;
}
.section-nav a:first-child{border-left:1px solid var(--nav-border);}
.section-nav a:hover{
  background:rgba(42,116,204,.15);
  color:#002e64;
  transform:translateY(-1px);
}
.section-nav a.is-active{
  background:var(--nav-active-bg);
  color:var(--nav-active-fg);
  box-shadow:inset 0 -3px 0 rgba(255,255,255,.4);
}
@media(max-width:640px){
  .section-nav a{padding:.65rem .85rem;}
}

/* ===================== */
/* News */
/* ===================== */
#news{background:#fff}
.newslist{list-style:none;margin:0;padding:0;border-top:1px solid #e6eef8}
.newslist li{
  display:flex;gap:16px;align-items:flex-start;
  padding:14px 8px;border-bottom:1px solid #e6eef8
}
.newslist time{white-space:nowrap;color:#475569;font-weight:700;min-width:96px}
@media(max-width:600px){.newslist li{flex-direction:column;gap:6px}}

/* ===================== */
/* 共通要素 */
/* ===================== */
.title{font-size:clamp(22px,2.4vw,32px);font-weight:700}
.subtitle{color:var(--c-sub);margin:.25rem 0 .2rem;letter-spacing:.06em}
.leads{color:#374151}
.columns{display:grid;gap:clamp(12px,2.5vw,24px)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
}
.titles{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(16px,3vw,28px);align-items:end}
@media(max-width:900px){.titles{grid-template-columns:1fr}}
.titles .imgs{border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.08)}

/* ===================== */
/* About the Work（フォント調整） */
/* ===================== */
#work .titles { text-align:center; display:block; margin-bottom:40px; }
#work .titles .subtitle {
  font-family:'Zen Kaku Gothic New',system-ui,-apple-system,'Noto Sans JP',sans-serif;
  font-size:.9rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--c-sub); margin:0 0 .2rem;
}
#work .titles .title {
  font-family:'Noto Serif JP',serif;
  font-size:clamp(22px,2.4vw,32px); font-weight:700; line-height:1.35;
  margin:0; color:var(--c-text);
}

/* ===================== */
/* カード（共通ベース） */
/* ===================== */
.card{
  border:1px solid #e6eef8;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(2,6,23,.06);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  text-decoration:none;color:inherit;
}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(2,6,23,.1);border-color:#d7e6f8}
.card .txts{padding:14px 14px 16px}

/* ===================== */
/* CTAボタン */
/* ===================== */
.entrybtn{display:flex;justify-content:center;margin:24px auto}
.entrybtn .btn{
  min-width:240px;
  padding:14px 18px;
  background:var(--ou-blue-deep);
  color:#fff;
  border-radius:14px;
  text-decoration:none;
  text-align:center;
  font-weight:700;
  box-shadow:0 6px 20px rgba(0,74,143,.25);
  transition:background .2s ease;
}
.entrybtn .btn:hover{background:#0b5bb6}

/* ===================== */
/* ページトップ */
/* ===================== */
#pagetop{position:fixed;right:16px;bottom:16px;z-index:50;opacity:0;visibility:hidden;transition:.25s}
#pagetop a{display:inline-block;padding:.6rem .9rem;background:#0b2440;color:#fff;border-radius:999px;text-decoration:none;font-size:.9rem}
#pagetop.show{opacity:1;visibility:visible}

/* ===================== */
/* フッター */
/* ===================== */
.footer{text-align:center;padding:48px 16px;color:#5b6f8a}

/* ===================== */
/* 交互背景 */
/* ===================== */
main > .section{background:var(--alt-odd-bg)!important;}
main > .section:nth-of-type(even){background:var(--alt-even-bg)!important;}
.section .section{background:transparent;}

/* ===========================
   レイアウト調整（横に広がりすぎ対策）
   =========================== */
#work .columns{
  max-width:960px;
  margin-inline:auto;
  gap:clamp(14px, 2.2vw, 20px);
}
#work .career-grid,
#work .container.narrow{ max-width:960px; margin-inline:auto; }
@media (max-width:768px){
  #work .columns.grid-3, #work .columns.grid-2{
    grid-template-columns:1fr;
    max-width:92%;
  }
}

/* ===========================
   FINAL OVERRIDES（最終上書き）
   - メニュー：常にソリッド（全面青）
   =========================== */
.section-nav,
.section-nav.theme-solid{
  position:sticky;
  top:var(--header-offset, 0px);
  z-index:50;
  background:var(--ou-blue-mid);
  border:0;
  border-bottom:0;
  box-shadow:0 4px 16px rgba(32,105,196,.25);
}
.section-nav.is-stuck{
  box-shadow:0 8px 22px rgba(32,105,196,.28);
}

/* ▼ここから：1段・中央寄せナビ（できるだけスクロール無し） */
.section-nav .container{
  display:flex;
  align-items:center;
  justify-content:center;              /* 中央寄せ */
  gap:.3rem;
  padding:.35rem .4rem;
  flex-wrap:nowrap;                    /* 1段固定 */
  overflow-x:auto;                     /* どうしても足りない場合だけ横スクロール */
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.section-nav a{
  border:0 !important;
  color:#eaf3ff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.01em;
  font-size:clamp(0.65rem, 2.4vw, 0.9rem);  /* 画面が狭いほど自動で小さく */
  padding:.3rem .45rem;                      /* 余白もギリギリまで詰める */
  border-radius:10px;
  text-align:center;
  white-space:nowrap;                        /* テキストの折り返し禁止＝1行 */
  flex:0 1 auto;                             /* 必要に応じて少しだけ縮む */
  transition:background .18s ease, color .18s ease, transform .12s ease;
}
.section-nav a:hover{
  background:rgba(255,255,255,.16);
  color:#fff;
  transform:translateY(-1px);
}
.section-nav a.is-active{
  background:#003a88;
  color:#fff;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.35);
}

/* さらに細い端末用に、もう一段階だけ圧縮 */
@media (max-width:480px){
  .section-nav a{
    font-size:clamp(0.6rem, 2.2vw, 0.8rem);
    padding:.25rem .35rem;
  }
}

/* アンカー到達の食い込み対策 */
:target{
  scroll-margin-top: calc(var(--header-offset, 0px) + var(--nav-height, 48px) + 12px);
}

/* ===========================
   Workセクション：制度／アンケート／キャリア形成
   =========================== */
#work .work-subtitle{
  font-family:'Noto Serif JP',serif; font-weight:700;
  font-size:clamp(18px,1.8vw,22px); color:var(--c-text);
  text-align:center; margin:8px auto 6px; letter-spacing:.02em;
}
#work .divider{
  width:min(700px,90%); height:3px; margin:8px auto 18px; border-radius:999px;
  background:linear-gradient(90deg, rgba(42,116,204,.2), rgba(42,116,204,.55), rgba(42,116,204,.2));
}
#work .columns.grid-3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
#work .columns.grid-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
#work .card > img{ width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; background:#f2f6fb; }
#work .card .txts{
  padding:12px 16px 14px; display:flex; flex-direction:column; gap:.45rem;
}
#work .card .txts h3{
  font-family:'Noto Serif JP',serif; font-weight:700;
  font-size:clamp(15px,1.6vw,18px); line-height:1.35; margin:0; color:#0b2440;
}
#work .card .txts p{ margin:0; color:#394b63; font-size:.95rem; line-height:1.7; letter-spacing:.01em; }

/* 細身カード */
#work .columns.grid-3 > a.card{
  min-height:auto; border:1px solid #e8edf3; border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.03); padding:0;
}
#work .columns.grid-3 > a.card:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.06); border-color:#cfe0f7; }
#work .columns.grid-3 > a.card .txts{ padding:12px 14px 14px; }
#work .columns.grid-3 > a.card .txts h3{ font-size:clamp(15px,1.5vw,17px); }
#work .columns.grid-3 > a.card .txts p{ font-size:.93rem; line-height:1.6; }

/* アンケート：後日リンク非表示 */
#work .columns.grid-2 .card .btn-small{ display:none !important; }

/* キャリアカード */
#work .career-grid{max-width:960px;margin-inline:auto}
#work .career-card{
  border-radius:16px; border:1px solid #e6eef8; box-shadow:0 6px 18px rgba(2,6,23,.06);
  padding:clamp(14px,2.2vw,20px);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  text-decoration:none; color:inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#work .career-card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(2,6,23,.1); border-color:#d7e6f8; }
#work .career-card h3{
  font-family:'Noto Serif JP',serif; font-weight:700;
  font-size:clamp(17px,1.8vw,21px); margin:0 0 .2rem;
}
#work .career-card p{ margin:0; color:#394b63; line-height:1.75; }
#work .career-card-cta{ white-space:nowrap; font-weight:800; letter-spacing:.02em; opacity:.9; }
@media (max-width:768px){
  #work .columns{ max-width:92%; }
  #work .career-card{ flex-direction:column; align-items:flex-start; }
}

/* 微調整：制度＆アンケートのカードを少しだけ太く */
#work .columns.grid-3 > a.card{
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  border-color:#dbe7f6;
}
#work .columns.grid-3 > a.card .txts{ padding:16px 18px 18px; }
#work .columns.grid-3 > a.card .txts h3{ font-size:clamp(16px,1.6vw,18.5px); }
#work .columns.grid-3 > a.card .txts p{ line-height:1.68; }
#work .columns.grid-2 .card{
  box-shadow:0 7px 18px rgba(0,0,0,.06);
  border-color:#dbe7f6;
}
#work .columns.grid-2 .card .txts{ padding:16px 18px 18px; }
#work .columns.grid-2 .card .txts h3{ font-size:clamp(16px,1.7vw,19px); }
#work .columns.grid-2 .card .txts p{ line-height:1.72; }

/* =========================================================
   toc-dots：ラベルを左側に常時表示＋文字もクリック可（CSSのみ）
   ========================================================= */
html.toc-dots body .dept-toc{
  position:fixed !important; right:16px !important; bottom:24px !important;
  z-index:1100 !important; border:none !important; background:transparent !important; box-shadow:none !important;
}
html.toc-dots body .dept-toc .container{
  display:grid !important; gap:10px !important; padding:0 !important; overflow:visible !important;
}
html.toc-dots body .dept-toc a{
  display:inline-flex !important; flex-direction:row-reverse !important;
  align-items:center !important; gap:8px !important;
  text-decoration:none !important; color:#0b2440 !important;
  font-weight:600 !important; font-size:13px !important; line-height:1.3 !important;
  background:none !important; border:0 !important; padding:0 !important; cursor:pointer !important;
}
html.toc-dots body .dept-toc a::before{
  content:"" !important; display:inline-block !important; width:14px !important; height:14px !important;
  border-radius:50% !important; flex-shrink:0 !important; background:#cbd5e1 !important;
}
html.toc-dots body .dept-toc a::after{
  content:attr(data-label) !important; position:static !important; transform:none !important;
  margin:0 !important; padding:0 !important; background:transparent !important; border:none !important;
  box-shadow:none !important; white-space:nowrap !important; opacity:1 !important; pointer-events:auto !important;
}
html.toc-dots body .dept-toc a[data-slug="soumu"]::before    { background:#A3E635 !important; }
html.toc-dots body .dept-toc a[data-slug="kikaku"]::before   { background:#FACC15 !important; }
html.toc-dots body .dept-toc a[data-slug="zaimu"]::before    { background:#60A5FA !important; }
html.toc-dots body .dept-toc a[data-slug="shisetsu"]::before { background:#D8D8D8 !important; }
html.toc-dots body .dept-toc a[data-slug="kenkyu"]::before   { background:#A78BFA !important; }
html.toc-dots body .dept-toc a[data-slug="kokusai"]::before  { background:#D9F99D !important; }
html.toc-dots body .dept-toc a[data-slug="byoin"]::before    { background:#3B82F6 !important; }
html.toc-dots body .dept-toc a[data-slug="gakumu"]::before   { background:#F472B6 !important; }
html.toc-dots body .dept-toc a[data-slug="anzen"]::before    { background:#7DD3FC !important; }
html.toc-dots body .dept-toc a[data-slug="joho"]::before     { background:#34D399 !important; }
html.toc-dots body .dept-toc a[data-slug="tosho"]::before    { background:#FB923C !important; }
/* ★追加：出向ドットも以前の赤に統一 */
html.toc-dots body .dept-toc a[data-slug="shukko"]::before   { background:#F87171 !important; }

html.toc-dots body .dept-toc a:hover{ text-decoration:underline !important; text-underline-offset:3px !important; }
html.toc-dots body .dept-toc a.is-active{ font-weight:700 !important; text-decoration:underline !important; text-underline-offset:3px !important; }
@media (max-width:768px){
  html.toc-dots body .dept-toc{ right:12px !important; bottom:18px !important; }
  html.toc-dots body .dept-toc .container{ gap:8px !important; }
  html.toc-dots body .dept-toc a{ font-size:12.5px !important; gap:6px !important; }
}
/* 実テキストを不可視化し、擬似要素ラベルを表示 */
html.toc-dots body .dept-toc a{ color:transparent !important; font-size:0 !important; text-decoration:none !important; text-shadow:none !important; }
html.toc-dots body .dept-toc a::after{ font-size:13px !important; color:#0b2440 !important; }
html.toc-dots body .dept-toc a:hover::after{ text-decoration:underline !important; text-underline-offset:3px !important; }
html.toc-dots body .dept-toc a.is-active::after{ text-decoration:underline !important; text-underline-offset:3px !important; font-weight:700 !important; }

/* ===================== */
/* Hero Slider（画像のみ版） */
/* ===================== */
.hero-image-only { padding:0; }
.hero-slider{
  width:100%;
  aspect-ratio:21 / 9;                 /* 高さ確保（白フレーム防止） */
  background:#e9f4ff;                  /* ロード下地 */
  overflow:hidden;
  border-radius:clamp(0px, 1.8vw, 20px);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  position:relative;
}
@media (max-width:959px){
  .hero-slider{ aspect-ratio:16 / 9; border-radius:0; box-shadow:none; }
}
.hero-slider .swiper-slide img{
  display:block; width:100%; height:100%;
  object-fit:cover; background:#f2f6fb; /* さらなる白飛び防止 */
}
/* 矢印／ドット */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next{
  color:#fff; width:42px; height:42px;
  background:rgba(0,0,0,.3);
  border-radius:999px; backdrop-filter:blur(6px);
  box-shadow:0 4px 10px rgba(0,0,0,.25);
}
.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after{ font-size:18px; }
.hero-slider .swiper-pagination-bullet{
  width:10px; height:10px; opacity:1;
  background:rgba(255,255,255,.7);
  transition:transform .25s ease, background .25s ease;
}
.hero-slider .swiper-pagination-bullet-active{ background:#fff; transform:scale(1.2); }

/* ===================== */
/* 最終白飛びブロッカー（念のため） */
/* ===================== */
.hero, .effect{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

/* 仕事紹介リンクカード（シンプル版／フォント統一＋文字大きめ） */
#orgmap .org-links .card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px; /* 少し余白を増やして文字が映えるように */
  min-height: 110px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.05);
  background: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; /* 「仕事について」と統一 */
}

#orgmap .org-links .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  background: #f9fafb;
}

/* タイトル文字を大きく、中央寄せでバランスよく */
#orgmap .org-links .card h3 {
  margin: 0;
  font-size: 20px; /* ← ★ここでサイズUP（18px→20px） */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111827;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 640px) {
  #orgmap .org-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* スマホ時も読みやすく大きめ維持 */
  #orgmap .org-links .card h3 {
    font-size: 19px;
  }
}

/* レガシーheaderの余白調整（横幅一杯・スマホでの詰まり防止） */
#head .all.no-icon { max-width: 1100px; margin: 0 auto; padding: 8px 16px; }
#head h1 img { height: auto; max-height: 56px; }

/* レガシーglobal navの折返し対策 */
nav.menu ul.all { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }

/* レガシーフッターの整え（中心寄せ・行間） */
#foot { text-align: center; padding: 20px 12px; }
#foot nav ul { list-style: none; margin: 0 0 8px; padding: 0; }
#foot nav li { display: inline-block; margin: 0 8px; }
#foot address { font-style: normal; line-height: 1.7; }

/* フッター全体を黒に */
#foot {
  background-color: #000;     /* 背景を黒 */
  color: #fff;                /* テキストを白 */
  padding: 24px 0;            /* 上下余白 */
}

/* フッター内のリンクも白に */
#foot a {
  color: #fff;
  text-decoration: none;
}

/* ホバー時に少し明るく */
#foot a:hover {
  color: #ddd;
  text-decoration: underline;
}

/* 住所部分の整形 */
#foot address {
  text-align: center;
  font-style: normal;
  margin-top: 10px;
  font-size: 0.9rem;
}

/* ナビ部分の調整 */
#foot nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

#foot nav li {
  display: inline;
}

/* orgmap note 見出し */
#orgmap .orgmap-note{
  margin: 0 0 12px;
  text-align: center;
  font-weight: 700;
  color: #0b2440;
}

/* =====================
   グリッドのスマホ最適化
   ===================== */
@media (max-width:640px){
  .grid-4,
  .grid-3{
    grid-template-columns:1fr;
  }
}