/* =====================================================================
   index.html 専用CSS — 「白の規律」トップページ
   トークンは css/style.css のみで定義（本ファイルでの再定義禁止・AAAゲート④）。
   本ファイルはページ固有コンポーネントの組み立てのみを行う。
   セクションリズムは DESIGN_SYSTEM.md §9 の index規範例に準拠：
   FV(duotone) → stats(panel) → entry(base+grid8) → reasons(mist) →
   departments(base) → photo-band(duotone) → parents(panel) → oc(base) →
   shakaijin(mist) → access(panel) → cta-band(deep) → footer(deep)
   ===================================================================== */

/* =====================================================================
   FV（デュオトーン写真フルブリード・コピー左・下辺目盛・アーク）
   ===================================================================== */
.fv {
  position: relative;
  overflow: hidden;
  background: var(--c-steel);                /* 画像ロード前の下地（duotone同系） */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(560px, 92svh);
  padding-top: calc(var(--header-h) + var(--sp-8));
  padding-bottom: var(--sp-10);
}
.fv__media,
.fv__media .ph-duotone-wrap {
  position: absolute;
  inset: 0;
  display: block;
}
.fv__media picture {
  display: block;                            /* インラインのままだとimgの%高さ解決が不安定（Safari対策） */
  width: 100%;
  height: 100%;
}
.fv__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}
/* 臨床白スクリム（コピー可読域。PC=左→右、SP=下→上） */
.fv__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(247, 249, 250, .97) 0%,
    rgba(247, 249, 250, .93) 34%,
    rgba(247, 249, 250, .58) 58%,
    rgba(247, 249, 250, .10) 82%,
    rgba(247, 249, 250, 0) 100%);
}
/* ヘッダー可読用の上端白フェード（透過ヘッダーの下地） */
.fv::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(247, 249, 250, .92) 0%, rgba(247, 249, 250, 0) 100%);
  pointer-events: none;
  z-index: 1;
}
/* 角度アーク（深鋼面用・白線版。style.cssの.u-arcは鋼青線のため写真上では不可視） */
.fv__arc {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22640%22%20height%3D%22640%22%20viewBox%3D%220%200%20640%20640%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23FFFFFF%22%20opacity%3D%220.5%22%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%220%22%20r%3D%22600%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%220%22%20r%3D%22480%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%22640%22%20cy%3D%220%22%20r%3D%22560%22%20stroke-width%3D%2224%22%20stroke-dasharray%3D%222%2046.9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right -10% top -20%;
  background-size: 60vmin auto;
  opacity: .3;
}
.fv__inner { position: relative; z-index: 2; }
.fv__copy { max-width: 640px; }             /* コピーは左1〜7col相当（§9） */
.fv__title { color: var(--c-ink); }          /* ink/base 16.86:1 */
.fv__sub {
  margin-top: var(--sp-3);
  max-width: 32em;
  font-weight: 500;
  line-height: 1.9;
}
/* OC直近日程チップ */
.fv__oc { margin-top: var(--sp-5); }
.fv__oc-head {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .04em;
}
.fv__oc-head .en--label { color: var(--c-steel); font-size: .75rem; margin-right: var(--sp-1); }
.oc-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1);
}
.oc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;               /* .plate と同メトリクス */
  border: 1px solid var(--c-steel);
  border-radius: var(--r-0);
  background: var(--c-panel);
  color: var(--c-steel);                    /* steel/panel 10.33:1 */
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.6;
}
.oc-chip .en { font-weight: 700; letter-spacing: .04em; }
.oc-chip--next {
  background: var(--c-steel);
  color: #fff;                              /* #fff/steel 10.33:1 */
}
.fv__actions {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.fv__ticks { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }

@media (max-width: 899px) {
  .fv {
    justify-content: flex-end;
    min-height: max(600px, 94svh);
    padding-bottom: var(--sp-8);
  }
  .fv__media img { object-position: 50% top; }  /* SP専用クロップ（hero_fv_sp.webp＝手元センター987x987）に合わせ中央基準 */
  .fv__scrim {
    background: linear-gradient(180deg,
      rgba(247, 249, 250, .10) 0%,
      rgba(247, 249, 250, .55) 34%,
      rgba(247, 249, 250, .94) 58%,
      rgba(247, 249, 250, .97) 100%);
  }
  .fv__arc { background-size: 78vmin auto; }
  .fv__actions .btn { flex: 1 1 100%; }
}

/* =====================================================================
   ダイレクトナビ（FV直下・mist細帯・サイト骨格8項目）
   REFERENCES.md §3-2：新潟医療福祉大型。メニューを開かせずに全体像を渡し、
   「情報量を多くしたい」と「迷わせない」を両立させる。
   罫線はグリッドのgapを --c-line で塗る方式（立体でなく線で区切る・DS §3）
   ===================================================================== */
.directnav {
  background: var(--c-mist);
  border-bottom: var(--bd-hair);
  padding-block: var(--sp-3);
}
.directnav__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.directnav__head .en--label { color: var(--c-steel); font-size: .6875rem; }
.directnav__title {
  font-family: var(--font-display);
  font-feature-settings: "palt";
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: .06em;
}
.directnav__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: var(--bd-hair);
}
.directnav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  min-height: 56px;
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-panel);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.5;
  transition: background-color var(--dur-1) var(--ease-expo);
}
.directnav__list a:hover { background: var(--c-mist); }
.directnav__list a .en { color: var(--c-steel); font-weight: 600; flex: none; }
@media (min-width: 900px) {
  .directnav__list { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   計器型実績ブロック（panel地・不等幅4/3/5・上下目盛・アーク）
   ===================================================================== */
.stats-grid { gap: 0; }
.stats-grid .stat { border-top: var(--bd-hair); }
.stats-grid .stat:first-child { border-top: 0; }
@media (min-width: 900px) {
  .stats-grid .stat { border-top: 0; border-left: var(--bd-hair); }
  .stats-grid .stat:first-child { border-left: 0; }
}
.stats-follow { margin-top: var(--sp-5); align-items: center; }
.pending-box {
  background: var(--c-mist);
  border: var(--bd-hair);
}
.pending-note { font-size: var(--fs-small); color: var(--c-text-sub); line-height: 1.8; }

/* =====================================================================
   選ばれる理由（mist地・写真カード7：テキスト縦積み5の非対称）
   ※campuslife系2点は装飾フレーム・キャプション焼き込みのため写真は
     包帯固定実技のみ（DESIGN_SYSTEM.md §5の割当内で選定）
   ===================================================================== */
.reasons-grid { align-items: stretch; }
.reasons-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.reasons-stack .reason { flex: 1; }
.reason {
  background: var(--c-panel);
  border: var(--bd-hair);
  border-radius: var(--r-1);
  box-shadow: var(--sh-1);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.reason__no {
  position: relative;
  font-family: var(--font-en);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--c-steel);
  padding-bottom: var(--sp-1);
}
.reason__no::after {                         /* 計測開始線のエコー */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--c-steel);
}
.reason__title { font-size: var(--fs-h3); }
.reason__cond { font-size: var(--fs-small); color: var(--c-text-sub); }
/* 写真カードの残余高を写真が引き受ける（カード内の中吊り余白を作らない） */
.reason__media {
  margin-top: auto;
  padding-top: var(--sp-2);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.reason__media img {
  width: 100%;
  flex: 1;
  min-height: 0;
  aspect-ratio: 927 / 620;
  object-fit: cover;
}
.reason__media .figure__cap { margin-top: var(--sp-1); }

/* 訪問者別の補助3分岐（主要3カードの下段） */
.entry-subs {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
@media (min-width: 900px) {
  .entry-subs { grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-3); }
}

/* 汎用：改行させない語（アクセス見出しの「徒歩約15分」等） */
.nowrap { white-space: nowrap; }

/* =====================================================================
   学科入口（base地・dept-card 6/6＋W併修バー）
   ===================================================================== */
.wlicense {
  background: var(--c-panel);
  border: var(--bd-hair);
  border-radius: var(--r-1);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
@media (min-width: 900px) {
  .wlicense { grid-template-columns: 5fr 7fr; gap: var(--sp-6); align-items: center; }
}
.wlicense__title { font-size: var(--fs-h3); margin-top: var(--sp-2); }
.wlicense__body { font-size: var(--fs-body); }
.wlicense__body .link-text { font-weight: 700; }
.dept-lead { margin-bottom: var(--sp-5); max-width: 44em; }

/* =====================================================================
   フルブリード写真帯（duotone・世界観面積）
   ===================================================================== */
.photo-band {
  position: relative;
  overflow: hidden;
  background: var(--c-steel);
}
.photo-band .ph-duotone-wrap { display: block; }
.photo-band img {
  width: 100%;
  height: clamp(240px, 34vw, 440px);
  object-fit: cover;
}
.photo-band__cap {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--sp-3);
  z-index: 1;
}
.photo-band__ticks { position: absolute; left: 0; right: 0; top: 0; }

/* =====================================================================
   保護者セクション（panel地・表7:FAQ5）
   ===================================================================== */
.parents-side { display: flex; flex-direction: column; gap: var(--sp-3); }
.parents-side__cta { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.parents-side__cta .btn { align-self: stretch; }
@media (min-width: 900px) {
  .parents-side__cta .btn { align-self: flex-start; }
}

/* =====================================================================
   オープンキャンパス（base地・テキスト5:日程7）
   ===================================================================== */
.oc-program { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-2); }
.oc-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); align-items: stretch; }
.oc-dates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.oc-date {
  background: var(--c-panel);
  border: var(--bd-hair);
  border-radius: var(--r-1);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.oc-date--next { outline: 2px solid var(--c-steel); outline-offset: -2px; }
.oc-date .plate { align-self: flex-start; padding: 2px 10px 2px 8px; }
.oc-date__day {
  font-size: clamp(1.75rem, 1.30rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-steel);                     /* steel/panel 10.33:1 */
}
.oc-date__day .oc-date__wd {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  margin-left: var(--sp-1);
  color: var(--c-ink);
}
.oc-date__time { font-size: var(--fs-small); color: var(--c-text-sub); }
.oc-dates-note { margin-top: var(--sp-2); }

/* =====================================================================
   社会人・既卒（mist地・stat5:テキスト7）
   ===================================================================== */
.sha-stat {
  background: var(--c-panel);
  border: var(--bd-hair);
}
.sha-body { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }

/* =====================================================================
   アクセス（panel地・経路6:住所5）
   ===================================================================== */
.access-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.access-addr {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border-left: 2px solid var(--c-steel);
  padding-left: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.8;
}