@charset "UTF-8";
/* =====================================================================
   top.css ─ TOPページ専用スタイル
   名古屋医療センター サイトリニューアル
   ---------------------------------------------------------------------
   FV／クイックアクセス／診療科アコーディオン／がん診療／救急／
   トピックス／お知らせ／採用／専門センター／医療支援部門／受付時間
   読み込み順： common.css → top.css
   ===================================================================== */


/* ═══════════════════════════════════════
   0. TOP専用の見出し
   ─ ボタン・丸矢印・英字ラベル等の共通パーツは common.css へ移動
═══════════════════════════════════════ */
/* ── セクション見出し（明朝）──
   common.css の下層ページ用 .sec-title（左バー＋下線）を打ち消してから定義 */
.sec-title { border-bottom: 0; padding-bottom: 0; display: block; }
/* 旧 common.css から引き継いだ余白・リード文の値（TOPの見た目を維持） */
.sec-title { margin-bottom: 1.2rem; }
.sec-lead { font-size: .9rem; color: #1E2D35; font-weight: 300; margin-bottom: 1.2rem; }
.sec-title::before { content: none; display: none; }
.sec-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500; color: var(--ink);
  letter-spacing: .16em; line-height: 1.5;
}

/* ═══════════════════════════════════════
   1. HERO（FV 4枚フェード）
═══════════════════════════════════════ */
.hero {
  --hero-catch-size: clamp(1.7rem, 2.9vw, 2.65rem);  /* キャッチの文字サイズ */
  position: relative; overflow: hidden;
  height: clamp(420px, 44vw, 780px);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.8s ease;
}
.hero-slide.active { opacity: 1; }
/* 横幅は常に 100%（左右に写真の端が出ないようにする）。
   縦方向の動きは要素の高さを増やして吸収し、拡大率は 1 を下回らせない。 */
.hero-slide-bg {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  width: 100%;
  /* ワイド画面でも必ず「中央基準・全面を覆う・繰り返さない」で表示する。
     no-repeat を明示しないと、インラインの background ショートハンド等で
     size/position が初期値に戻ったときに画像がタイル状に繰り返される。 */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  will-change: transform;
}
/* FV1：静止（等倍・幅100%） */
.fv-fix { transform: none; }

/* FV2・FV4：ゆっくり上下移動
   高さを 114% に伸ばし、上下 -7% ずつはみ出させた範囲内で移動させる */
.fv-pan-up {
  top: -7%; bottom: -7%; height: 114%;
  animation: fvPan 22s ease-in-out infinite alternate;
}
@keyframes fvPan {
  0%   { transform: translateY(2.4%); }
  100% { transform: translateY(-2.4%); }
}

/* FV3：ゆっくりズームアウト（1.08 → 1.00。100%を切らない） */
.fv-zoom-out { animation: fvZoom 22s ease-out infinite alternate; }
@keyframes fvZoom {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1.001); }
}

/* 明るい写真に文字を乗せるための白フェード（左下方向） */
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 34%, rgba(255,255,255,0) 62%),
    linear-gradient(0deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%);
}

.hero-content {
  position: absolute; inset: 0;
  max-width: var(--inner); margin-inline: auto;
  padding: 0 var(--px);
  display: flex; flex-direction: column; justify-content: center;
  /* キャッチの文字サイズ1文字分だけ下へ（--hero-catch-size と同値） */
  transform: translateY(var(--hero-catch-size));
}
.hero-catch {
  font-family: var(--font-serif);
  font-size: var(--hero-catch-size);
  font-weight: 500; color: var(--blue);
  letter-spacing: .14em; line-height: 1.75;
  text-shadow: 0 1px 18px rgba(255,255,255,.7);
}

/* インジケーター（4枚切替） */
.hero-sub {
  margin-top: 1.5rem;
  font-size: clamp(.78rem, 1vw, .92rem);
  color: var(--ink-2); letter-spacing: .08em; line-height: 2;
  text-shadow: 0 1px 14px rgba(255,255,255,.85);
}
.hero-dots {
  display: flex; gap: .45rem; margin-top: 2.2rem;
}
.hero-dot {
  width: 26px; height: 2px; border-radius: 2px; padding: 0;
  border: 0; background: rgba(31,36,41,.22); cursor: pointer;
  transition: background .25s;
}
.hero-dot.on { background: var(--blue); }
.hero-dot:hover { background: var(--blue-m); }


/* ═══════════════════════════════════════
   2. クイックアクセス（FV下・6枚カード）
═══════════════════════════════════════ */
.quick-wrap {
  max-width: var(--inner); margin-inline: auto;
  padding: 0 var(--px);
  margin-top: clamp(-5.4rem, -3.8vw, -3rem);
  position: relative; z-index: 5;
}
.quick-bar {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(.6rem, 1.6vw, 1.55rem);
}
.qb {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.5rem .7rem 1.1rem;
  background: #fff; border-radius: 10px;
  box-shadow: 0 1px 3px rgba(31,36,41,.07), 0 10px 26px rgba(31,36,41,.07);
  position: relative; min-height: 166px;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* 画像（アイコン）付き角丸ボタン：hover でごくわずかに拡大 */
.qb:hover { transform: scale(1.028); box-shadow: 0 2px 6px rgba(31,36,41,.09), 0 16px 34px rgba(31,36,41,.1); }
.qb-icon { width: 44px; height: 44px; margin-bottom: 1.1rem; }
.qb-label { font-size: .92rem; font-weight: 500; color: var(--ink); letter-spacing: .04em; text-align: center; }
.qb-sub   { font-size: .62rem; color: var(--gray-l); letter-spacing: .06em; margin-top: .12rem; }
.qb .c-arrow { position: absolute; right: .8rem; bottom: .8rem; }
.qb:hover .c-arrow { border-color: var(--blue); }
.qb:hover .c-arrow::before { border-color: var(--blue); }


/* ═══════════════════════════════════════
   3. 診療科のご案内（アコーディオン）
═══════════════════════════════════════ */
.dept-section {
  max-width: var(--inner); margin-inline: auto;
  padding: clamp(3.4rem, 6vw, 6.4rem) var(--px) clamp(4rem, 8vw, 8rem);
  display: grid; grid-template-columns: minmax(240px, 1fr) 2.45fr;
  gap: clamp(2rem, 4vw, 4.4rem); align-items: start;
}
.dept-intro .sec-title { margin-bottom: 1.9rem; }
.dept-intro .sec-lead  { margin-bottom: 2rem; }

/* 「一覧」ボタン＝内科系／外科系／その他をまとめて開閉（WG3決定の“すべて開く”を統合）
   開いている間は矢印を反転させて状態を示す */
.btn-pill.is-open { background: var(--blue-bg); border-color: var(--blue-m); color: var(--blue); }
.btn-pill.is-open::after { transform: rotate(-135deg); border-color: var(--blue); }

.acc-wrap { display: flex; flex-direction: column; gap: 1rem; }
.acc-item {
  position: relative;
  background: #fff; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(31,36,41,.05), 0 8px 24px rgba(31,36,41,.05);
  overflow: hidden;
}
/* カード上端の装飾ライン（右寄せ・約半分幅） */
.acc-item::before {
  content: ''; position: absolute; top: 0; right: 0;
  width: 46%; height: 2px; background: var(--blue-m);
}
.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.5rem clamp(1.2rem, 2.2vw, 2.1rem);
  cursor: pointer; transition: background .15s;
}
.acc-head:hover { background: #FAFBFC; }
.acc-head-left { display: flex; align-items: center; gap: 1.1rem; }
.acc-title {
  font-size: 1.02rem; font-weight: 500; color: var(--ink);
  letter-spacing: .06em; line-height: 1.35; transition: color .18s;
}
.acc-head.on .acc-title { color: var(--blue-m); }
.acc-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 4.6rem; padding: .3rem .9rem;
  background: var(--chip); border-radius: 2rem;
  font-size: .76rem; color: var(--ink); letter-spacing: .04em;
}
/* 開閉インジケーター */
.acc-ind {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1px solid #C9CED4; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.acc-ind::before {
  content: ''; width: 6px; height: 6px; margin-top: -2px;
  border-bottom: 1.3px solid var(--gray); border-right: 1.3px solid var(--gray);
  transform: rotate(45deg); transition: transform .25s, border-color .2s;
}
.acc-head.on .acc-ind { background: var(--blue); border-color: var(--blue); }
.acc-head.on .acc-ind::before {
  border-color: #fff; margin-top: 2px; transform: rotate(-135deg);
}

.acc-panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.acc-panel.open { max-height: 1200px; }
.acc-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .7rem; padding: .4rem clamp(1.2rem, 2.2vw, 2.1rem) clamp(1.6rem, 2.6vw, 2.4rem);
}
.adept {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .95rem 1.05rem;
  background: var(--chip); border-radius: 7px;
  transition: background .2s;
}
.adept:hover { background: var(--blue-bg); }
.adept:hover .c-arrow { border-color: var(--blue); }
.adept:hover .c-arrow::before { border-color: var(--blue); }
.adept-name { font-size: .8rem; color: var(--ink); letter-spacing: .02em; line-height: 1.45; }


/* ═══════════════════════════════════════
   4. がん診療 ／ 5. 救急（2カラム）
═══════════════════════════════════════ */
.split-section {
  max-width: var(--inner); margin-inline: auto;
  padding: clamp(3.4rem, 6vw, 6.6rem) var(--px);
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.62fr);
  gap: clamp(2rem, 5vw, 5.4rem); align-items: center;
}
.split-section.rev { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
.split-section.rev .split-media { order: 2; }

/* 画像ブロック（内部はスライダー） */
.split-media {
  position: relative; border-radius: 6px; overflow: hidden;
  aspect-ratio: 24 / 25; background: var(--chip);
}
.split-section.rev .split-media { aspect-ratio: 5 / 4; }
.feat-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.2s ease;
}
.feat-slide.active { opacity: 1; }
.feat-slide-dots {
  position: absolute; right: .9rem; bottom: .9rem;
  display: flex; gap: .38rem; z-index: 2;
}
.feat-slide-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s;
}
.feat-slide-dot.active { background: #fff; }

.split-body .sec-title-lg { margin-bottom: 1.5rem; }
.split-body .sec-lead { margin-bottom: 2.4rem; }

/* がん診療：6枚のアイコンカード */
.icon-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1vw, .8rem);
}
.ic {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.6rem .8rem 1.5rem;
  background: #fff; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(31,36,41,.06), 0 8px 20px rgba(31,36,41,.06);
  min-height: 158px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ic:hover { transform: scale(1.028); box-shadow: 0 2px 6px rgba(31,36,41,.08), 0 14px 30px rgba(31,36,41,.1); }
.ic-icon { width: 38px; height: 38px; margin-bottom: 1.1rem; }
.ic-label {
  font-size: .8rem; color: var(--ink); text-align: center;
  letter-spacing: .02em; line-height: 1.6;
}
.ic .en-sub { text-align: center; margin-top: .2rem; }
.ic .c-arrow { position: absolute; right: .65rem; bottom: .65rem; }
.ic:hover .c-arrow { border-color: var(--blue); }
.ic:hover .c-arrow::before { border-color: var(--blue); }
/* がん相談窓口：がんセンター内で強調表示（WG3決定） */
.ic.ic-emph { background: var(--blue-bg); box-shadow: 0 0 0 1px var(--blue-l) inset, 0 8px 20px var(--emph-shadow); }
.ic.ic-emph .ic-label { color: var(--blue-d); font-weight: 500; }


/* ═══════════════════════════════════════
   6. トピックス（横スクロールカルーセル）
═══════════════════════════════════════ */
.topics-section { background: var(--bg-warm); padding: clamp(3.2rem, 5.5vw, 5.4rem) 0 clamp(3.4rem, 6vw, 5.8rem); }
.topics-head {
  max-width: var(--inner); margin-inline: auto;
  padding: 0 var(--px) clamp(1.8rem, 3vw, 2.8rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* 送り／戻しボタン（マウス操作用。タッチ・トラックパッドはスワイプでも動きます） */
.topics-nav { display: flex; gap: .55rem; flex-shrink: 0; }
.tn-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  position: relative; padding: 0;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease;
}
.tn-btn::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  border-top: 1.6px solid var(--blue-d); border-right: 1.6px solid var(--blue-d);
  transition: border-color .2s ease;
}
.tn-btn.is-next::before { margin-left: -6px; transform: rotate(45deg); }
.tn-btn.is-prev::before { margin-left: -3px; transform: rotate(-135deg); }
.tn-btn:hover { background: var(--blue-bg); border-color: var(--blue-l); }
.tn-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tn-btn[disabled] { opacity: .32; cursor: default; }
.tn-btn[disabled]:hover { background: #fff; border-color: var(--line); }
@media (max-width: 768px) {
  .tn-btn { width: 38px; height: 38px; }
}

/* コンテナ左端から始めて右端はビューポート外へ流す */
.topics-scroll {
  /* 左端はコンテンツ幅の左端に揃え、右端はビューポート外へ流す */
  --topics-pad: max(var(--px), calc((100vw - var(--inner)) / 2 + var(--px)));
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-left: var(--topics-pad);
  padding-right: var(--px);
  /* スナップ位置も同じ分だけずらす（これが無いと初期表示で左に寄ってしまう） */
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--topics-pad);
}
.topics-scroll::-webkit-scrollbar { display: none; }
.topics-track { display: flex; gap: clamp(.8rem, 1.6vw, 1.55rem); width: max-content; padding-bottom: .6rem; }
.topic-card {
  /* コンテンツ幅に4枚がちょうど収まる幅（残りは右へスライド） */
  width: clamp(250px, calc((min(100vw, var(--inner)) - 2 * var(--px) - 3 * 1.55rem) / 4), 358px);
  flex-shrink: 0;
  background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(31,36,41,.07), 0 8px 22px rgba(31,36,41,.07);
  scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.topic-card:hover { transform: scale(1.02); box-shadow: 0 2px 6px rgba(31,36,41,.09), 0 14px 30px rgba(31,36,41,.1); }
.tc-img {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--chip) center/cover no-repeat;
}
.tc-body { position: relative; padding: 1.1rem 1.2rem 1.5rem; }

/* ── カテゴリラベル（写真の左上）──
   トピックスは必ず1枚につき1カテゴリ。色はカテゴリごとに固定する。
   ・診療・医療（いちばん多い）＝白地＋グレー文字で目立たせない
   ・そのほかのカテゴリ＝色地＋白文字 */
.tc-cat {
  position: absolute; left: .7rem; top: .7rem; z-index: 2;
  display: inline-flex; align-items: center;
  font-size: .64rem; font-weight: 500; letter-spacing: .08em;
  color: #fff; background: rgba(31,36,41,.72);
  padding: .25rem .75rem; border-radius: 2rem;
  border: 1px solid transparent;
}
.tc-cat.cat-care {                             /* 診療・医療 */
  background: #fff; color: var(--ink-2); border-color: #D8DCE0;
  box-shadow: 0 1px 2px rgba(31,36,41,.08);
}
.tc-cat.cat-recruit  { background: var(--blue); }   /* 採用・研修（ブランドカラー） */
.tc-cat.cat-research { background: #0E7AC4; }       /* 研究・治験 */
.tc-cat.cat-pr       { background: #7C3AED; }       /* 広報・イベント */
.tc-cat.cat-info     { background: #5A6570; }       /* その他のお知らせ */

/* ── 写真がないときのロゴサムネイル ──
   .tc-img に is-logo と、カテゴリのクラス（bg-care など）を足すだけ。
   画像ファイルを用意しなくても、統一した見た目のサムネイルになる。 */
.tc-img.is-logo {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg, #F2F7F6 0%, #FFFFFF 55%, #EAF4F1 100%);
  border-bottom: 1px solid var(--line);
}
.tc-img.is-logo img { width: clamp(46px, 22%, 68px); height: auto; opacity: .92; }
.tc-img.is-logo span:not(.tc-cat) {   /* カテゴリラベルには効かせない */
  font-size: .62rem; color: var(--gray); letter-spacing: .18em;
}
.tc-img.is-logo.bg-care     { background: linear-gradient(135deg, #F5F7F7 0%, #FFFFFF 58%, #EDF1F1 100%); }
.tc-img.is-logo.bg-research { background: linear-gradient(135deg, #EAF4FB 0%, #FFFFFF 58%, #DCEDF8 100%); }
.tc-img.is-logo.bg-recruit  { background: linear-gradient(135deg, #E9F7F4 0%, #FFFFFF 58%, #DCF1EB 100%); }
.tc-img.is-logo.bg-pr       { background: linear-gradient(135deg, #F4F1FE 0%, #FFFFFF 58%, #EBE5FB 100%); }
.tc-img.is-logo.bg-info     { background: linear-gradient(135deg, #F3F4F6 0%, #FFFFFF 58%, #E9EBEE 100%); }
.tc-date { font-size: .72rem; color: var(--gray-l); letter-spacing: .06em; margin-bottom: .5rem; }
.tc-title { font-size: .8rem; color: var(--ink); line-height: 1.7; letter-spacing: .02em; padding-right: 1.6rem; }
.tc-body .c-arrow { position: absolute; right: 1rem; bottom: 1rem; }
.topic-card:hover .c-arrow { border-color: var(--blue); }
.topic-card:hover .c-arrow::before { border-color: var(--blue); }

/* スクロールバー（右寄せ・JSで位置同期） */
.topics-bar {
  max-width: var(--inner); margin: clamp(1.4rem, 2.5vw, 2.4rem) auto 0;
  padding: 0 var(--px);
  display: flex; justify-content: flex-end;
}
.topics-bar-track {
  position: relative; width: 32%; min-width: 180px; height: 2px;
  background: #DCDAD5; border-radius: 2px;
}
.topics-bar-thumb {
  position: absolute; top: 0; left: 0; height: 2px;
  background: var(--blue); border-radius: 2px;
  transition: left .15s linear;
}
.topics-bar.is-hidden { visibility: hidden; }


/* ═══════════════════════════════════════
   7. お知らせ
═══════════════════════════════════════ */
.news-section[id] { scroll-margin-top: var(--stick-top); }
.news-section {
  max-width: var(--inner); margin-inline: auto;
  padding: clamp(3.4rem, 6vw, 6.4rem) var(--px) clamp(3.4rem, 6vw, 6rem);
}
.news-head { margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.news-head .sec-title { display: block; padding-bottom: 1.1rem; border-bottom: 1px solid var(--blue-m); }
.centers-section .sec-title, .topics-head .sec-title, .dept-intro .sec-title { border-bottom: 0; }
.news-body {
  display: grid; grid-template-columns: minmax(200px, 1fr) 3.1fr;
  gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start;
}
.news-tabs { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 2.2rem; }
.ntab {
  font-size: .82rem; color: var(--ink-2); letter-spacing: .04em;
  padding: .42rem 0; cursor: pointer; transition: color .15s;
  background: none; border: 0; font-family: inherit; text-align: left;
}
.ntab:hover { color: var(--blue); }
.ntab.on { color: var(--blue); font-weight: 500; }

.news-list { border-top: 1px solid var(--line); }
.news-empty { font-size: .82rem; color: var(--gray); padding: 1.6rem 0; letter-spacing: .02em; }
.news-empty a { color: var(--blue); text-decoration: underline; }
.news-row {
  display: grid; grid-template-columns: 6.4rem 6.2rem 1fr;
  align-items: center; gap: 1rem;
  padding: 1.05rem .4rem;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.news-row:hover { background: #FAFBFC; }
.ndate { font-size: .78rem; color: var(--ink-2); letter-spacing: .06em; }
.ncat {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .22rem .7rem; border-radius: 2rem;
  font-size: .66rem; letter-spacing: .04em; white-space: nowrap;
}
.nc-imp  { background: var(--badge-imp-bg);  color: var(--badge-imp-fg); }
.nc-norm { background: var(--badge-norm-bg); color: var(--badge-norm-fg); }
.nc-rec  { background: var(--badge-rec-bg);  color: var(--badge-rec-fg); }
.nc-pat  { background: #EAF4EF; color: #2A7C5E; }   /* 一般・患者さんへ */
.nc-med  { background: #EAF2FB; color: #2A5E9E; }   /* 医療機関の方へ */
.nc-chop { background: var(--chip); color: var(--gray); }
.ntitle { font-size: .84rem; color: var(--ink); line-height: 1.7; letter-spacing: .02em; }


/* ═══════════════════════════════════════
   8. 採用・研修
═══════════════════════════════════════ */
.recruit-section {
  position: relative; overflow: hidden;
  padding: clamp(3.4rem, 6vw, 6.2rem) 0;
  background: var(--recruit-base);
}
/* 背景写真：ぼかしをかけ、ぼけ足が端に出ないよう少し拡大して配置 */
.recruit-bg {
  position: absolute; inset: -3%;
  background-image: inherit;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: blur(9px); transform: scale(1.08);
}
.recruit-section::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--recruit-veil-1) 0%, var(--recruit-veil-2) 48%, var(--recruit-veil-3) 100%);
}
.recruit-grid {
  position: relative; z-index: 1;
  max-width: var(--inner); margin-inline: auto;
  padding: 0 var(--px);
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.6rem); align-items: center;
}
.rec-heading {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.7vw, 2.2rem);
  font-weight: 500; color: #fff;
  letter-spacing: .12em; line-height: 1.7;
  margin-bottom: 1.6rem;
  text-shadow: 0 1px 16px rgba(31,54,80,.4);
}
.rec-body {
  font-size: .82rem; color: rgba(255,255,255,.94);
  line-height: 2.1; letter-spacing: .03em; margin-bottom: 2.4rem;
  text-shadow: 0 1px 12px rgba(31,54,80,.5);
}
.rec-btns { display: flex; flex-wrap: wrap; gap: .9rem; }
/* 卒後教育研修センターへの導線は、白ボタンのなかでも一段強める */
.rec-btns .btn-pill.is-emph {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.85); color: #fff;
}
.rec-btns .btn-pill.is-emph::after { border-color: rgba(255,255,255,.9); }
.rec-btns .btn-pill.is-emph:hover { background: #fff; color: var(--blue); border-color: #fff; }
.rec-btns .btn-pill.is-emph:hover::after { border-color: var(--blue); }

/* ── B案：下段をテキストリンクにして、さらに差をつける ── */
.rec-links {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0 clamp(1rem, 2.4vw, 2.2rem);
}
.rec-link {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .75rem 0; color: #fff; font-size: .8rem; letter-spacing: .03em;
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: padding-left .2s, opacity .2s;
}
.rec-link::after {
  content: ''; width: 5px; height: 5px; flex-shrink: 0;
  border-top: 1.2px solid rgba(255,255,255,.8); border-right: 1.2px solid rgba(255,255,255,.8);
  transform: rotate(45deg);
}
.rec-link:hover { padding-left: .4rem; opacity: .85; }
@media (max-width: 1100px) { .rec-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .rec-links { grid-template-columns: 1fr; } }

/* ── 2段構成（A案）──
   上段に大きな入口2枚、下段に職種別の小さなカード。
   左右分割だと右の枚数に視線を持っていかれるため、
   「大きさ」と「上下」で優先順位をつける。 */
.recruit-section.is-stack { padding-bottom: clamp(3rem, 5.4vw, 5.4rem); }
/* グローバルナビ「採用・研修」からのスクロール先。固定ヘッダーのぶん手前で止める */
.recruit-section[id] { scroll-margin-top: var(--stick-top); }
.rec-wrap {
  position: relative; z-index: 1;
  max-width: var(--inner); margin-inline: auto; padding-inline: var(--px);
}
.rec-intro { max-width: 44em; margin-bottom: clamp(1.8rem, 3vw, 2.6rem); }
.rec-intro .rec-body { margin-bottom: 0; }

.rec-mains {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.8rem, 1.6vw, 1.3rem);
}
.rec-main {
  display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.4rem);
  padding: clamp(1.25rem, 2.4vw, 1.85rem) clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20,40,60,.18), 0 16px 34px rgba(20,40,60,.18);
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.rec-main:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(20,40,60,.22), 0 22px 44px rgba(20,40,60,.24); }
.rec-main.is-primary { background: linear-gradient(100deg, var(--grad-a) 0%, var(--grad-b) 100%); color: #fff; }
.rec-main.is-primary:hover { filter: brightness(1.06); }
.rec-main.is-secondary { background: #fff; color: var(--ink); }
.rec-main-icon {
  width: clamp(44px, 4.2vw, 56px); height: clamp(44px, 4.2vw, 56px); flex-shrink: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.rec-main-icon svg { width: 54%; height: 54%; }
.rec-main.is-primary .rec-main-icon { background: rgba(255,255,255,.2); }
.rec-main.is-primary .rec-main-icon svg { stroke: #fff; }
.rec-main.is-secondary .rec-main-icon { background: var(--blue-bg); }
.rec-main.is-secondary .rec-main-icon svg { stroke: var(--blue); }
.rec-main-txt { flex: 1; min-width: 0; }
.rec-main-label {
  display: block; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 500;
  letter-spacing: .08em; line-height: 1.5;
}
.rec-main-sub { display: block; font-size: .74rem; line-height: 1.8; letter-spacing: .03em; margin-top: .35rem; }
.rec-main.is-primary .rec-main-sub { color: rgba(255,255,255,.88); }
.rec-main.is-secondary .rec-main-sub { color: var(--gray); }
.rec-main.is-primary .c-arrow { border-color: rgba(255,255,255,.75); }
.rec-main.is-primary .c-arrow::before { border-color: rgba(255,255,255,.9); }
.rec-main.is-secondary .c-arrow { border-color: var(--blue-l); }
.rec-main.is-secondary .c-arrow::before { border-color: var(--blue); }

/* 下段の小見出し */
.rec-sub-head {
  display: flex; align-items: center; gap: .9rem;
  margin: clamp(2rem, 3.4vw, 2.9rem) 0 .9rem;
  font-size: .72rem; color: rgba(255,255,255,.92); letter-spacing: .16em;
  text-shadow: 0 1px 10px rgba(31,54,80,.45);
}
.rec-sub-head::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.3); }

/* 下段カード（4列・小さめ） */
.rec-cards.is-small { grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.rec-cards.is-small .rc { padding: .9rem 1rem; background: rgba(255,255,255,.9); }
.rec-cards.is-small .rc-label { font-size: .76rem; }
.rec-cards.is-small .rc-sub { font-size: .6rem; margin-top: .15rem; }

@media (max-width: 1100px) {
  .rec-cards.is-small { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .rec-mains { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rec-cards.is-small { grid-template-columns: 1fr; }
}


.rec-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.rc {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: 1.15rem 1.3rem;
  background: rgba(255,255,255,.96); border-radius: 6px;
  transition: background .2s, transform .2s;
}
.rc:hover { background: #fff; transform: translateX(3px); }
.rc:hover .c-arrow { border-color: var(--blue); }
.rc:hover .c-arrow::before { border-color: var(--blue); }
.rc > span:first-child { display: block; min-width: 0; }
.rc-label { display: block; font-size: .82rem; color: var(--ink); letter-spacing: .03em; line-height: 1.5; }
.rc-sub   { display: block; font-size: .64rem; color: var(--gray); letter-spacing: .03em; margin-top: .1rem; }


/* ═══════════════════════════════════════
   9. 専門センター・部門
═══════════════════════════════════════ */
.centers-section {
  max-width: var(--inner); margin-inline: auto;
  padding: clamp(3.4rem, 6vw, 6.4rem) var(--px) clamp(3.6rem, 6vw, 6.4rem);
}
.centers-section .sec-title { display: block; margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
.centers-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.7rem);
}
.cc {
  background: #fff; border-radius: 5px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(31,36,41,.07), 0 8px 22px rgba(31,36,41,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* 画像付き角丸カード：hover でごくわずかに拡大 */
.cc:hover { transform: scale(1.022); box-shadow: 0 2px 6px rgba(31,36,41,.09), 0 16px 34px rgba(31,36,41,.11); }
.cc-img {
  position: relative; aspect-ratio: 16 / 10;
  background: var(--chip) center/cover no-repeat;
}
.cc-body { position: relative; padding: 1.15rem 1.3rem 1.6rem; }
.cc-title { font-size: .86rem; font-weight: 500; color: var(--ink); letter-spacing: .03em; line-height: 1.5; }
.cc-sub   { font-size: .74rem; color: var(--gray); letter-spacing: .02em; margin-top: .4rem; line-height: 1.6; padding-right: 1.6rem; }
.cc-body .c-arrow { position: absolute; right: 1rem; bottom: 1rem; }
.cc:hover .c-arrow { border-color: var(--blue); }
.cc:hover .c-arrow::before { border-color: var(--blue); }


/* ═══════════════════════════════════════
   10. 医療支援部門 ／ 11. 受付時間（グレー帯）
═══════════════════════════════════════ */
.gray-band { background: var(--bg-gray); padding: clamp(3rem, 5vw, 5rem) 0 clamp(3.4rem, 6vw, 6rem); }

.support-wrap { max-width: var(--inner); margin-inline: auto; padding: 0 var(--px); }
.support-title {
  text-align: center; font-size: .92rem; font-weight: 500;
  color: var(--ink); letter-spacing: .1em;
  margin-bottom: clamp(1.4rem, 2.4vw, 2.1rem);
}
.dept-list-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.7rem, 1.6vw, 1.4rem);
}
.dlc {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: #fff; border-radius: 6px;
  box-shadow: 0 1px 2px rgba(31,36,41,.05), 0 5px 16px rgba(31,36,41,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dlc:hover { transform: scale(1.025); box-shadow: 0 2px 6px rgba(31,36,41,.08), 0 10px 24px rgba(31,36,41,.09); }
.dlc-icon { width: 34px; height: 34px; flex-shrink: 0; }
.dlc > span { display: block; min-width: 0; }
.dlc-name { display: block; font-size: .86rem; font-weight: 500; color: var(--ink); letter-spacing: .03em; line-height: 1.4; }
.dlc-sub  { display: block; font-size: .7rem; color: var(--gray); letter-spacing: .02em; margin-top: .1rem; }

/* ── 受付時間カード ── */
.reception {
  max-width: var(--inner); margin: clamp(2.6rem, 5vw, 5rem) auto 0;
  padding: 0 var(--px);
}
.reception-card {
  background: #fff; border-radius: 6px;
  padding: clamp(2rem, 4vw, 3.4rem) clamp(1.2rem, 3vw, 2.6rem) clamp(2.2rem, 4vw, 3.2rem);
  text-align: center;
}
.rcp-cols {
  display: flex; justify-content: center; align-items: stretch;
  gap: clamp(1.4rem, 5vw, 5rem);
  margin-bottom: 1.5rem;
}
.rcp-col { padding-inline: clamp(.6rem, 3vw, 3rem); }
.rcp-col + .rcp-col { border-left: 1px solid var(--line); }
.rcp-lbl { font-size: 1.08rem; font-weight: 500; letter-spacing: .1em; margin-bottom: .9rem; }
.rcp-lbl.first { color: var(--rcp-first); }
.rcp-lbl.re    { color: var(--rcp-re); }
.rcp-time {
  display: flex; align-items: baseline; justify-content: center; gap: .7rem;
  color: var(--ink);
}
.rcp-time small { font-size: .84rem; letter-spacing: .06em; }
.rcp-time b {
  font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  letter-spacing: .06em; white-space: nowrap;
}
.rcp-note { font-size: .78rem; color: var(--ink-2); letter-spacing: .04em; margin-bottom: 1.7rem; }


/* ═══════════════════════════════════════
   12. レスポンシブ
═══════════════════════════════════════ */
@media (max-width: 1100px) {
  .dept-section { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: repeat(3, 1fr); }
  .centers-grid { grid-template-columns: repeat(2, 1fr); }
  .dept-list-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-bar { grid-template-columns: repeat(3, 1fr); }
  .quick-wrap { margin-top: -3.4rem; }
}

@media (max-width: 860px) {
  /* .split-section.rev は基本指定の方が詳細度が高いため、
     ここで明示的に打ち消さないと1カラムに戻らない */
  .split-section,
  .split-section.rev { grid-template-columns: 1fr; }
  .split-section.rev .split-media { order: 0; }
  .split-media, .split-section.rev .split-media { aspect-ratio: 16 / 10; }
  .icon-cards { grid-template-columns: repeat(2, 1fr); }
  .news-body { grid-template-columns: 1fr; }
  .news-tabs { flex-direction: row; flex-wrap: wrap; gap: .3rem 1.2rem; margin-bottom: 1.4rem; }
  .recruit-grid { grid-template-columns: 1fr; }
  .rec-cards { grid-template-columns: 1fr; }
  .dept-list-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .quick-bar { grid-template-columns: repeat(2, 1fr); }
  .qb { min-height: 140px; padding: 1.1rem .6rem .9rem; }
  .qb-icon { width: 34px; height: 34px; margin-bottom: .7rem; }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
  .centers-grid { grid-template-columns: 1fr; }
  .dept-list-grid { grid-template-columns: 1fr; }
  .icon-cards { grid-template-columns: repeat(2, 1fr); }
  /* 日付・カテゴリを1行目、タイトルを2行目に折り返す。
     3列目に 1fr を残しておかないと、タイトルが1・2列目の幅までしか
     広がらず、右半分が余白になってしまう */
  .news-row {
    grid-template-columns: 5.4rem auto 1fr;
    column-gap: .7rem; row-gap: .45rem;
  }
  .ntitle { grid-column: 1 / -1; }
  .rcp-cols { flex-direction: column; gap: 1.4rem; }
  .rcp-col + .rcp-col { border-left: 0; border-top: 1px solid var(--line); padding-top: 1.4rem; }
}

/* 動きを減らす設定の尊重 */
@media (prefers-reduced-motion: reduce) {
  .fv-pan-up, .fv-zoom-out { animation: none; }
}