@charset "UTF-8";


/* ==========================================================================
   Content Components（コンテンツページ標準スタイル）
   --------------------------------------------------------------------------
   
   【役割】
   - コンテンツページ内の要素（見出し、リスト、テーブル等）のスタイル定義
   - レイアウトコンテナ（.l-container等）はcommon.cssで管理
   - CSS変数（:root）もcommon.cssで管理
   
   【クラス名の方針】
   - .c-heading-2 / .c-heading-3 / .c-heading-4
     → 互換性のため保持（インクルードファイル等に残存する可能性）
   - .c-heading-lvl2 / .c-heading-lvl3 / .c-heading-lvl4
     → フェーズ6のHTML置換後用（推奨クラス名）
   
   【更新履歴】
   - フェーズ2: 見出し・リスト・テーブルの基本定義
   - フェーズ7-A: ハードコード値をCSS変数に移行、TODOコメント解消
   ========================================================================== */


/* ==========================================================================
   1. 見出し（Headings）｜7-B-3 調整版
   ========================================================================== */

/* --- <h2> レベル2見出し（大見出し）--- */
.c-heading-lvl2 {
  font-size: var(--fs-heading-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-gray-700); 
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-sm);
  border-bottom: 5px solid var(--color-border);
  position: relative;
  display: block; /* 余計な装飾を排除 */
}

/* シンプルな左端アクセント：学科テーマに連動 */
.c-heading-lvl2::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 80px;
  height: 5px;
  background-color: var(--color-main); /* common.cssの判定に連動 */
}

/* 拡張パターン：クラスを追加するだけで色変更が可能 */
.c-heading-lvl2--hygiene::after { background-color: var(--color-hygiene); } /* 歯科衛生 */
.c-heading-lvl2--nursing::after { background-color: var(--color-nursing); } /* 看護 */


/* --- <h3> レベル3見出し（中見出し）--- */
.c-heading-lvl3 {
  font-size: var(--fs-heading-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--color-gray-700);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  padding-left: 0;
  border-left: none; /* 左ラインは削除 */
}

/* 歯科衛生学科（.hyg）の範囲内にあるレベル3見出しを学科カラーに変更 */
.hyg .c-heading-lvl3 {
  color: var(--color-main); /* common.css で定義された青色が適用されます */
}

/* 看護学科（.nrs）の範囲内にあるレベル3見出しを学科カラーに変更 */
.nrs .c-heading-lvl3 {
  color: var(--color-main); /* common.css で定義されたピンク色が適用されます */
}

/* h3に直接学科色を付けるバリアント */
.c-heading-lvl3--hygiene {
  color: var(--color-hygiene);
  font-size: 28px;
}

.c-heading-lvl3--nursing {
  color: var(--color-nursing);
  font-size: 28px;
}

.hyg .c-heading-lvl3--base,
.nrs .c-heading-lvl3--base,
.c-heading-lvl3--base {
  color: var(--color-gray-700);
}

/* 拡張パターン：将来的に「背景付き」や「下線付き」が必要な場合に備える */
.c-heading-lvl3--filled {
  background-color: var(--color-bg-light);
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 6px solid var(--color-main);
}

/* --- <h4> レベル4見出し（小見出し）--- */
.c-heading-lvl4 {
  font-size: var(--fs-heading-h4); /* 1.0625rem */
  font-weight: var(--fw-bold);      /* 700 */
  line-height: var(--lh-normal);    /* 1.6 */
  color: var(--color-gray-700);     /* 濃いグレー */
  margin-top: var(--spacing-lg);    /* 24px */
  margin-bottom: var(--spacing-md); /* 16px */
  display: flex;
  align-items: center;
}


/* ==========================================================================
   2. リスト（Lists）｜行間・アイコン調整決定版
   ========================================================================== */

/* --- リンクリスト（縦並び）--- */
.c-listLink--v {
  list-style: none;
  padding-left: 0;
  margin: var(--spacing-md) 0;
}

.c-listLink--v li {
  margin-bottom: 2px; /* 行間を極限まで狭める */
}

.c-listLink--v a {
  display: inline-block; /* 配置を安定させるため absolute の起点とする */
  position: relative;
  padding-left: 1.5em;    /* アイコンを表示する左側の余白を確保 */
  padding-top: 2px;
  padding-bottom: 2px;
  color: var(--color-link);
  text-decoration: none;
  line-height: var(--lh-tight); /* 1.25 */
  transition: color var(--transition-base);
}

/* ホバー時にテキスト部分のみ下線を出す */
.c-listLink--v a:hover {
  text-decoration: underline;
  text-underline-offset: 3px; /* 線を少し下げて視認性を向上 */
}

/* 先頭アイコン：絶対配置で装飾線から隔離 */
.c-listLink--v a::before {
  position: absolute;
  left: 0;
  top: 0.45em; /* 1行目のテキスト中央（大文字の高さ付近）に固定 */
  
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f111"; /* circle (●) */
  font-size: 0.75em; /* 小さなドットにする */
  color: var(--color-main);
  margin-top: 0.3em;
  
  /* アンダーラインを物理的に拒否 */
  display: inline-block;
  text-decoration: none !important;
  line-height: 1;
}

/* 拡張パターン：別のアイコンを使う場合（位置調整は継承） */
.c-listLink--v--caret a::before { 
  content: "\f0da"; /* caret-right (▶) */
}

/* ==========================================================================
   3. テーブル（Tables）
   --------------------------------------------------------------------------
   【使用方法】
   <div class="c-table-wrapper">
     <table class="c-table c-table--row">
       <thead>...</thead>
       <tbody>...</tbody>
     </table>
   </div>
   ========================================================================== */

/* --- テーブルラッパー（横スクロール対応）--- */
.c-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-bottom: var(--spacing-xl);
  border-radius: var(--radius-md);
  border: none; /* 削除：二重線の原因 */
  box-shadow: 0 0 0 1px var(--color-border-light); /* 外枠をoutline風に変更 */
  -webkit-overflow-scrolling: touch;
}


/* --- 基本テーブル --- */
.c-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-xl) 0;
  background: #ffffff;
  min-width: 600px;
}

.c-table th,
.c-table td {
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-light);
  text-align: left;
  line-height: var(--lh-normal);
}

.c-table th {
  background-color: var(--color-gray-100);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  width: 30%;
}


/* --- ストライプテーブル（偶数行に背景色）--- */
.c-table--row tbody tr:nth-child(even) {
  background-color: var(--color-gray-25);
}


/* ==========================================================================
   3. テーブル（Tables）修正版
   --------------------------------------------------------------------------
/* --- テーブルラッパー（横スクロール対応）--- */

:root {
  --table-head-bg: var(--color-main);  
  --table-side-bg: #f2f2f2; 
  --table-side-text: #666;
}

/* テーブル全体のラッパー（横スクロール制御） */
/* --- テーブルラッパー：外枠と角丸を確実に管理 --- */
.c-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-bottom: var(--spacing-xl);
  border-radius: var(--radius-md);
  /* 8px */
  border: 1px solid var(--color-border-light);
  /* 外枠 */
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.c-table-wrapper ul,
.c-table-wrapper ol {
  margin: 8px 0;
  padding-left: 1.2em;
}

.c-table-wrapper li {
  margin-bottom: 4px;
  line-height: 1.5;
}


/* --- テーブル本体：別々の境界線モデル（separate）で安定させる --- */
.c-table--style-01 {
  width: 100%;
  border-collapse: separate; 
  border-spacing: 0;
  background-color: #fff;
  font-size: var(--fs-sm);
  min-width: 800px;
  border: none;
}


/* ヘッダーセルの境界線 */
.c-table--style-01 thead th {
  background-color: var(--table-head-bg);
  color: #fff;
  font-weight: var(--fw-bold);
  padding: 12px;
  /* 右と下に透過白の線を引く */
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  white-space: nowrap;
}

/* データセルの境界線 */
.c-table--style-01 th,
.c-table--style-01 td {
  padding: 10px 12px;
  border-right: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  line-height: var(--lh-normal);
}

/* 【ここがポイント！】右端の列の線を消す処理を、
   複雑なヘッダー構造（rowspan等）に対応させます 
*/
/* 【修正後】すべてのセルに右ボーダーを統一して残す */
.c-table--style-01 thead tr:first-child th:last-child {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.c-table--style-01 tbody tr td:last-child,
.c-table--style-01 tbody tr th:last-child {
  border-right: 1px solid var(--color-border-light);
}

/* 右端セルのみ打ち消し */
.c-table--style-01 tbody tr td:last-child {
  border-right: none;
}

/* 最後の行の底線を消す（wrapperの底枠と重なるのを防ぐ） */
.c-table--style-01 tr:last-child th,
.c-table--style-01 tr:last-child td {
  border-bottom: none;
}

/* 1列目（区分）のスタイル調整 */
.c-table--style-01 tbody th {
  background-color: var(--table-side-bg);
  color: var(--table-side-text);
  font-weight: var(--fw-bold);
  width: 20%;
}


/* --- 数値・データ用テーブル（中央揃え） --- */
/* th と td の両方をターゲットに含めます */
.c-table--style-01.c-table--center th,
.c-table--style-01.c-table--center td {
  text-align: center;
}

/* 1列目（区分）の固定幅設定は維持しつつ、中央揃えを優先させます */
.c-table--style-01.c-table--center tbody th {
  text-align: center; /* 左揃えを上書き */
}

/* 業績テーブル内の「詳細」リンクなども中央に揃えたい場合はこちらを適用 */
.c-table--style-01.c-table--center a {
  justify-content: center;
}

/* スマホ閲覧時：1列目を固定（Sticky Column） */
@media (max-width: 768px) {
  .c-table--style-01 {
    min-width: 650px; /* スマホでの最小スクロール幅 */
    font-size: var(--fs-sm);
  }

  /* 1列目を固定する設定 */
  .c-table--style-01 thead th:first-child,
  .c-table--style-01 tbody th {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
  }

  /* 固定列の影（スクロール時に重なりを見せる） */
  .c-table--style-01 thead th:first-child::after,
  .c-table--style-01 tbody th::after {
    content: "";
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 5px;
    background: linear-gradient(to right, rgba(0,0,0,0.05), transparent);
    pointer-events: none;
  }

  .c-table--style-01 thead th:first-child {
    z-index: 3; /* ヘッダーかつ固定列なので最前面 */
  }
}



/* 左列をメインカラー固定・白文字にするバリアント */
.c-table--style-01.c-table--side-main tbody th {
  background-color: var(--color-main);
  color: #ffffff;
}

@media (max-width: 768px) {
  .c-table--style-01.c-table--side-main tbody th {
  background-color: var(--color-main);
  }
}

/* --- モディファイア：左列をメインカラー背景・白文字にする --- */
.c-table--style-01.c-table--fill-main tbody th {
  background-color: var(--color-main); /* #12C19E */
  color: #ffffff;
  border-right: 1px solid rgba(255, 255, 255, 0.2); /* 白背景に馴染む薄い線 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* スマホ閲覧時、1列目固定（Sticky）を維持しつつ色を適用 */
@media (max-width: 768px) {
  .c-table--style-01.c-table--fill-main tbody th {
    background-color: var(--color-main) !important;
  }
}



/* スクロールバーのカスタマイズ（理想スマホ.jpgの再現） */
.c-table-wrapper::-webkit-scrollbar {
  height: 8px;
}
.c-table-wrapper::-webkit-scrollbar-thumb {
  background: #aaa;
  border-radius: var(--radius-pill);
}
.c-table-wrapper::-webkit-scrollbar-track {
  background: var(--color-gray-200);
}


/* --- 学科カラー --- */
/* 汎用背景クラス（背景色と白文字をセット） */
.u-bg-main {
  background-color: var(--color-main) !important;
  color: #ffffff !important;
}

.u-bg-hygiene {
  background-color: var(--color-hygiene) !important;
  color: #ffffff !important;
}

.u-bg-nursing {
  background-color: var(--color-nursing) !important;
  color: #ffffff !important;
}


/* rowspan行の線切れ対策：右ボーダーを強制維持 */
.c-table--style-01 tbody tr td.u-border-right,
.c-table--style-01 tbody tr th.u-border-right {
  border-right: 1px solid var(--color-border-light) !important;
}


/* ==========================================================================
   4. テキスト・段落（Typography）
   ========================================================================== */

/* --- 基本段落 --- */
.c-text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin-bottom: 1.5em;
}

/* --- リード文（導入文）--- */
.c-text--lead {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xl);
}

/* --- 段落（グローバル）--- */
p {
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-md);
}

/* --- 段落配置 --- */
.c-para--right  { text-align: right; }
.c-para--center { text-align: center; }
.c-para--left   { text-align: left; }


/* ==========================================================================
   5. アコーディオン（FAQ・情報整理用共通コンポーネント）
   --------------------------------------------------------------------------
   【運用ルール】
   - 構造: .c-accordion > .c-accordion__item > .c-accordion__header + .c-accordion__content
   - アニメーション: JavaScriptで .is-open を付与し、max-heightを制御
   ========================================================================== */

/* ==========================================================================
   5. アコーディオン（FAQ・情報整理用共通コンポーネント）
   ========================================================================== */

/* コンテナ全体 */
.c-accordion {
  width: 100%;
  margin-bottom: var(--spacing-xl);
}

/* 各アイテム：枠線と角丸 */
.c-accordion__item {
  border: 1px solid var(--color-border-light);
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: #ffffff;
  transition: box-shadow var(--transition-base);
}

/* 開いている時の強調 */
.c-accordion__item.is-open {
  box-shadow: var(--shadow-sm);
}

/* ヘッダー：ボタン要素としてのリセットとレイアウト */
.c-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20px 25px;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: background-color var(--transition-fast);
}

.c-accordion__header:hover {
  background-color: var(--color-gray-25);
}

/* Qアイコン（質問：KDUグリーン） */
.c-accordion__icon-q {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-main);
  color: #ffffff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  margin-right: 12px;
}

/* タイトルテキスト */
.c-accordion__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-normal);
  flex-grow: 1;
  padding-right: 12px;
}

/* 右端の矢印アイコン */
.c-accordion__arrow {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-main);
  border-bottom: 2px solid var(--color-main);
  transform: rotate(45deg); /* デフォルト：下向き */
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

/* 開いている時の矢印の回転 */
.c-accordion__item.is-open .c-accordion__arrow {
  transform: rotate(-135deg); /* 上向き */
}

/* コンテンツエリア：アニメーション制御 */
.c-accordion__content {
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff;
  visibility: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

/* 開いている状態のコンテンツ表示 */
.c-accordion__item.is-open .c-accordion__content {
  border-top: 1px solid var(--color-border-light);
  max-height: 1000px; /* 十分な高さを指定 */
  visibility: visible;
  opacity: 1;
}

/* 内部の余白とAアイコンの配置 */
.c-accordion__body {
  padding: 20px 25px 20px 70px; /* 左側にアイコン(32px) + 余白分(計70px)を確保 */
  position: relative;           /* アイコン配置の基準点 */
  display: block;               /* flexを確実に解除 */
}

/* Aアイコン（回答：コーラル） */
.c-accordion__icon-a {
  position: absolute;
  left: 25px;                   /* bodyのpadding左端に合わせる */
  top: 20px;                    /* bodyのpadding上端に合わせる */
  display: flex;                /* アイコン内の文字中央揃え用（これは維持） */
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #ffffff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  flex-shrink: 0;
  margin-right: 0;              /* flexではないためmargin-rightは不要 */
}

/* 回答テキスト */
.c-accordion__text {
  margin: 0 0 var(--spacing-md) 0; /* 下に余白を作り、テーブルとの間隔を空ける */
  padding-top: 4px;                /* アイコンとの高さ微調整 */
}


/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
  /* 既存の c-accordion__header 等の設定は維持 */

  .c-accordion__body {
    /* 左側のパディングを 15px から 55px へ修正し、アイコンスペースを確保 */
    padding: 5px 5px 5px 55px; 
    position: relative;
    display: block;
  }

  .c-accordion__icon-a {
    /* アイコンの絶対位置をスマホ用に微調整 */
    position: absolute;
    left: 15px; 
    top: 15px;
    width: 28px;  /* */
    height: 28px; /* */
    margin-right: 0;
  }

  .c-accordion__text {
    /* アイコンとの垂直方向のバランスを調整 */
    padding-top: 2px;
    margin-bottom: var(--spacing-sm); /* 下の要素（テーブル等）との余白 */
  }
}




/* ==========================================================================
   Grid System (汎用グリッド)
   --------------------------------------------------------------------------
   沿革の画像リストや、複数のカードを並べる際に使用します。
   ========================================================================== */

.c-boxCol2, 
.c-boxCol3, 
.c-boxCol4,
.c-grid,
.c-grid--3col,
.c-grid--4col {
  display: grid;
  gap: var(--spacing-lg); /* 24px */
  margin-bottom: var(--spacing-xl); /* 32px */
}

/* カラム数の定義 */
.c-boxCol2 { grid-template-columns: repeat(2, 1fr); }
.c-boxCol3, .c-grid--3col { grid-template-columns: repeat(3, 1fr); }
.c-boxCol4, .c-grid--4col { grid-template-columns: repeat(4, 1fr); }

/* 子要素 (.c-boxCol) の基本スタイル */
.c-boxCol {
  display: flex;
  flex-direction: column;
}

/* スマホ対応（768px以下は1カラム） */
@media (max-width: 768px) {
  .c-boxCol2,
  .c-boxCol3,
  .c-boxCol4,
  .c-grid,
  .c-grid--3col,
  .c-grid--4col {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md); /* 16px */
  }
}


/* ==========================================================================
   7. アイコン自動付与（ファイル・外部リンク）｜Font Awesome化
   --------------------------------------------------------------------------
   各種ファイルリンクにはファイル種別のアイコンを、
   それ以外の外部リンクには「別ウィンドウ」アイコンを付与します。
   ========================================================================== */

/* --- A. ファイル別アイコン（PDF / Word / Excel） --- */

/* PDFリンク */
a[href$=".pdf"]::after {
  content: "\f1c1"; /* file-pdf */
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  color: var(--color-pdf-badge); /* #cc0000 */
  margin-left: 6px;
  font-size: 1.1em;
  vertical-align: middle;
}

/* Wordリンク (.doc / .docx) */
a[href$=".doc"]::after,
a[href$=".docx"]::after {
  content: "\f1c2"; /* file-word */
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  color: #2b579a; /* Word用ブルー */
  margin-left: 6px;
  font-size: 1.1em;
  vertical-align: middle;
}

/* Excelリンク (.xls / .xlsx) */
a[href$=".xls"]::after,
a[href$=".xlsx"]::after {
  content: "\f1c3"; /* file-excel */
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  color: #1d6f42; /* Excel用グリーン */
  margin-left: 6px;
  font-size: 1.1em;
  vertical-align: middle;
}


/* --- B. 外部リンクアイコン（ファイル以外の別タブリンクに適用） --- */

/* .p-page-content 内の target="_blank" リンクに対し、
   PDF、Word、Excelのいずれでもない場合のみアイコンを付与 
*/
.p-page-content a[target="_blank"]:not([href$=".pdf"]):not([href$=".doc"]):not([href$=".docx"]):not([href$=".xls"]):not([href$=".xlsx"])::after {
  content: "\f35d"; /* external-link-alt */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--color-gray-400);
  margin-left: 6px;
  font-size: 0.8em;
  vertical-align: middle;
}

/* ==========================================================================
   8. レスポンシブ対応（Responsive）
   --------------------------------------------------------------------------
   ブレークポイント: 768px（タブレット/スマホ境界）
   ========================================================================== */

@media (max-width: 768px) {

  /* --- 見出し --- */
  .c-heading-2,
  .c-heading-lvl2 {
    margin-top: var(--spacing-xl);
    padding-bottom: 10px;
  }

  .c-heading-3,
  .c-heading-lvl3 {
    font-size: 1.25rem;
    margin-top: var(--spacing-lg);
    padding-left: 12px;
    border-left-width: 4px;
  }

  .c-heading-4,
  .c-heading-lvl4 {
    font-size: var(--fs-md);
    margin-top: 1.25rem;
  }

  .c-heading-4::before,
  .c-heading-lvl4::before {
    width: 10px;
    height: 10px;
    margin-right: 8px;
  }

  /* --- リスト --- */
  .c-listLink--v a {
    padding: 0.4rem 0 0.4rem 1.5em !important;
    display: inline-block;
  }
  .c-listLink--v a::before {
    top: 0.52em !important; 
    line-height: 1; 
  }

  /* --- テーブル --- */
  .c-table {
    font-size: var(--fs-sm);
  }

  .c-table th,
  .c-table td {
    padding: 10px;
  }

  /* --- アコーディオン --- */
  .c-accordion__title {
    padding: 12px 40px 12px 15px;
    font-size: 0.9375rem;
  }

  .c-accordion__title::after {
    right: 15px;
    font-size: var(--fs-sm);
  }

  .c-accordion__content {
    padding: 15px;
  }

  /* --- 画像ギャラリーのSP対応 --- */
  .c-image-gallery {
    grid-template-columns: 1fr !important;
  }

}



/* ==========================================================================
   Step List Component（ルート案内・工程リスト）
   ========================================================================== */

/* リスト全体のコンテナ */
.c-step-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl); /* ステップごとの垂直方向の余白（48px） */
  margin-top: var(--spacing-xl);
}

/* 各ステップのアイテム */
.c-step-item {
  display: flex;
  align-items: flex-start; /* 上揃え */
  gap: var(--spacing-xl);  /* 画像とテキストの間隔（32px） */
}

/* 画像エリア */
.c-step-item__img {
  flex: 0 0 35%; /* 横幅の35%を占有 */
  max-width: 340px; /* PCでの最大幅を制限 */
}

.c-step-item__img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm); /* 角を少し丸める */
  box-shadow: var(--shadow-sm);    /* 軽い影で視認性を向上 */
}

/* テキストエリア */
.c-step-item__body {
  flex: 1; /* 残りの幅をすべて使用 */
}

.c-step-item__text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed); /* 1.8倍の行送り */
  color: var(--color-text);
}

/* --- レスポンシブ対応（タブレット・スマホ） --- */
@media (max-width: 768px) {
  .c-step-list {
    gap: var(--spacing-xl); /* スマホでは間隔を少し詰める */
  }

  .c-step-item {
    flex-direction: column; /* 縦並びに変更 */
    gap: var(--spacing-sm);  /* 画像とテキストを近づける */
  }

.c-step-item__img {
    flex: 0 0 100%;
    max-width: 300px;
    margin-inline: auto; /* これを追加：左右の余白を等しくして中央寄せにする */
  }

  .c-step-item__body {
    width: 100%; /* テキストエリアは幅いっぱいに広げる */
    text-align: left; /* 説明文は左揃えを維持（読みやすさのため） */
  }

  .c-step-item__text {
    font-size: var(--fs-sm); /* スマホでは14px相当に */
  }
}

/* --- content.css --- */

/* 入居までの流れセクション全体のコンテナ設定 */
#flow {
  position: relative;
  counter-reset: flow-step; /* ステップ番号のカウンターを初期化 */
  padding-left: 20px;       /* タイムラインのラインを表示するための余白 */
}

/* 垂直のタイムライン（線） */
#flow::before {
  content: "";
  position: absolute;
  top: 10px;               /* h2見出しの下あたりから開始 */
  bottom: 50px;             /* 最後のステップで止める */
  left: 36px;               /* 数字アイコンの中央に合わせる */
  width: 2px;
  background-color: var(--color-border); /* 薄いグレーの線 */
  z-index: 0;
}

/* ステップごとの見出し（h3） */
#flow .c-heading-lvl3 {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-sm);
  padding-left: 50px;       /* 数字アイコン用のスペース */
  border-left: none;        /* 既存のボーダーがあれば解除 */
  color: var(--color-primary); /* 大学のメインカラー（紺）を使用 */
}

/* 数字アイコンの作成 */
#flow .c-heading-lvl3::before {
  counter-increment: flow-step;         /* カウンターを増加 */
  content: counter(flow-step);          /* 数字を表示 */
  position: absolute;
  left: 0;
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  z-index: 1;
}

/* 既存のテキスト内にある「1. 」などの数字を非表示にする（任意） 
   ※HTML修正を避けるため、文字色を透明にするか、
     デザインとして許容できるならそのまま残します。
*/

/* 本文テキスト（p）の調整 */
#flow .c-text {
  padding-left: 50px;       /* 見出しの数字アイコンと垂直ラインを揃える */
  margin-bottom: var(--spacing-lg);
  color: var(--color-gray-700);
}

/* モバイル対応 */
@media (max-width: 768px) {
  #flow {
    padding-left: 0;
  }
  #flow::before {
    left: 16px;             /* モバイルでは端に寄せる */
  }
  #flow .c-heading-lvl3 {
    padding-left: 40px;
    font-size: var(--fs-base);
  }
  #flow .c-heading-lvl3::before {
    width: 28px;
    height: 28px;
  }
  #flow .c-text {
    padding-left: 40px;
    font-size: var(--fs-sm);
  }
}

/* ==========================================================================
   Googleマップのレスポンシブ対応
   ========================================================================== */

.p-access-map {
  width: 100%;
  margin-top: var(--spacing-md);    /* 16px */
  margin-bottom: var(--spacing-xl); /* 32px */
}

.p-access-map iframe {
  width: 100%;
  height: 450px; /* PCでの表示高さ */
  border: 0;
  vertical-align: bottom;
}

/* スマートフォン表示（768px以下）での調整 */
@media (max-width: 768px) {
  .p-access-map {
    /* コンテナの左右パディング（16px）を無視して画面幅いっぱいに広げる設定 */
    margin-inline: calc(50% - 50vw);
    width: 100vw;
  }

  .p-access-map iframe {
    /* モバイルで見やすいように縦方向を400px程度に確保 */
    height: 400px;
  }
}


/* ==========================================================================
   President Page Specific
   ========================================================================== */

/* 2カラムレイアウト（Flexbox） */
.p-president-intro {
  display: flex;
  gap: var(--spacing-xl); /* 32px */
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
}

/* 学長写真：角丸と影 */
.p-president-intro__img {
  flex: 0 0 320px; /* PCでの写真幅を固定 */
}

.p-president-intro__img img {
  width: 100%;
  box-shadow: var(--shadow-md);
}

.p-president-intro__body {
  flex: 1;
}

/* キャッチコピー */
.p-president-intro__catch {
  font-size: var(--fs-xl); /* 22px相当 */
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--spacing-md);
}

/* 署名 */
.p-president-sign {
  margin-top: var(--spacing-lg);
  line-height: var(--lh-normal);
}

.p-president-sign__name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  display: inline-block;
  margin-top: 5px;
}

/* プロフィール全体のコンテナ */
.p-profile-grid {
  width: 100%;
}

/* プロフィールリスト（DL要素） */
.p-profile-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* プロフィール各項目 */
.p-profile-list__item {
  display: flex;
  gap: var(--spacing-md);
  padding-block: var(--spacing-sm);
  margin-bottom: 0;
  border-bottom: 1px dotted var(--color-border-light);
}

.p-profile-list__item:last-child {
  border-bottom: none;
}

/* ラベル（左側：項目名） */
.p-profile-list dt {
  flex: 0 0 13em;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: 0;
  line-height: 1.2;
}

/* データ（右側：内容） */
.p-profile-list dd {
  margin: 0;
  flex: 1;
  line-height: var(--lh-normal);
}

/* --- スマホ対応（768px以下） --- */
@media (max-width: 768px) {
  .p-president-intro {
    flex-direction: column;
    align-items: center;
  }

  .p-president-intro__img {
    flex: 0 0 auto;
    max-width: 300px;
  }

  .p-profile-grid {
    width: 100%;
  }

  .p-profile-list {
    margin: 0;
    padding: 0;
  }

  .p-profile-list__item {
    flex-direction: column;
    gap: 2px;
    padding-block: var(--spacing-sm);
    margin-bottom: 0;
  }

  .p-profile-list dt {
    flex: 0 0 auto;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.2;
    font-weight: var(--fw-bold);
  }

  .p-profile-list dd {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
  }
}


/* ==========================================================================
   My campus lifeページ専用スタイル
   --------------------------------------------------------------------------
   対象ファイル: /college/campuslife/schedule/index.html
   依存CSS    : common.css, content.css
   ========================================================================== */


/* ==========================================================================
   1. 2カラムレイアウト (.c-boxCol2 / .c-boxCol)
   --------------------------------------------------------------------------
   PCでは左右2カラム（写真＋テキスト）、SPでは縦積みに切り替え
   ========================================================================== */

/* 2カラムコンテナ：Flexboxで左右に並べる */
.c-boxCol2 {
  display: flex;
  gap: var(--spacing-xl);       /* 列間 32px */
  align-items: flex-start;
  margin-bottom: var(--spacing-xl);
}

/* type1 バリアント：左カラム幅を固定（写真エリア） */
.c-boxCol2--type1 > .c-boxCol:first-child {
  flex: 0 0 250px;              /* 写真列：固定幅 220px */
  max-width: 250px;
}

/* 右カラム（テキストエリア）：残幅をすべて使用 */
.c-boxCol2--type1 > .c-boxCol:last-child {
  flex: 1;
  min-width: 0;                 /* flex子要素のテキスト折り返しを保証 */
}

/* 写真下のプロフィールテキスト */
.c-boxCol p:not(.column_img_left_default):not(.c-boxCol__title):not(.c-boxCol__para) {
  font-size: var(--fs-base);        /* 16px */
  line-height: var(--lh-normal);
  margin-top: var(--spacing-sm);
  margin-bottom: 0;
}

/* 写真のラッパー段落（余白リセット） */
.column_img_left_default {
  margin: 0;
}

/* 写真本体 */
.column_img_left_default img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);  /* 軽く角丸 */
}


/* ==========================================================================
   2. テキストエリア内パーツ (.c-boxCol__title / .c-boxCol__para)
   --------------------------------------------------------------------------
   右カラムのキャッチコピーと本文テキスト
   ========================================================================== */
   
.c-copy-hygiene{
  display: inline;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
    color: #ffffff;
  background: linear-gradient(transparent 0%, #00a0e9 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.c-copy-nursing{
  display: inline;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4em;
  padding: 5px;
    color: #ffffff;
  background: linear-gradient(transparent 0%, #f47ca2 0%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.c-boxCol__title {
  display: inline;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4em;
}

.c-boxCol__para {
  margin-top: 1.5em; /* タイトルがinlineになった分、本文の上側に余白を足す */
  clear: both;       /* 回り込み防止 */
}




/* ==========================================================================
   3. スケジュール画像・収支画像（右カラム内に並べて表示）
   --------------------------------------------------------------------------
   campuslife_13/14/15/16/18/20.png など
   タイムライン画像（横長） → .c-boxCol__schedule-img で幅制御
   収支表画像              → .c-boxCol__income-wrap + img で幅制御
   ★ 幅を変えたいときは max-width の値を調整してください
   ========================================================================== */

/* ── タイムライン図（上の画像）──────────────────
   横長グラフィックのため幅は広めに取る。
   max-width で「これ以上は広げない」上限を設定。
   ★ 調整値: max-width（推奨 480px〜600px） */
.c-boxCol__schedule-img {
  display: block;
  width: 100%;              /* 親カラム幅に追従 */
  max-width: 700px;         /* ★ 上限サイズ（大きすぎる場合はここを小さく） */
  height: auto;
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

/* ── 収支表ラッパー（下の画像群）────────────────
   inline-flex で左揃えにし、画像が親幅いっぱいに
   広がらないよう fit-content で自然な幅に抑える。  */
.c-boxCol__income-wrap {
  display: inline-flex;     /* コンテンツ幅に合わせて収縮 */
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
  max-width: 100%;          /* 親からはみ出し防止 */
}

/* ── 収支表の個々の画像（下の画像）─────────────
   タイムラインより明確に小さく表示する。
   ★ 調整値: max-width（推奨 180px〜260px） */
.c-boxCol__income-wrap img {
  display: block;
  width: auto;
  height: auto;
  max-width: 500px;   
}

/* ── 汎用フォールバック（クラス未付与 img への安全策）── */
.c-boxCol img:not([class]) {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--spacing-sm);
}


/* ==========================================================================
   4. セクション区切り (hr)
   --------------------------------------------------------------------------
   デザイン画像のシンプルな水平線
   ========================================================================== */

.p-page-content hr {
  border: none;
  border-top: 1px solid var(--color-border);  /* var(--color-gray-300) */
  margin-block: var(--spacing-xl);             /* 上下 32px */
}


/* ==========================================================================
   5. 部活セクション（写真2枚：プロフィール写真＋活動写真）
   --------------------------------------------------------------------------
   右カラム内に活動写真を表示する際の調整
   ========================================================================== */

/* 活動写真（右カラム下部）：最大幅を制限して見やすく */
.c-boxCol .c-boxCol__club-photo {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin-top: var(--spacing-md);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-sm);
}





/* ==========================================================================
   7. レスポンシブ対応
   --------------------------------------------------------------------------
   ブレークポイント: 768px（スマートフォン）
   ========================================================================== */

@media (max-width: 768px) {

  /* 2カラム → 縦積みに変更 */
  .c-boxCol2 {
    flex-direction: column;
    gap: var(--spacing-md);       /* 縦積み時は間隔を詰める 16px */
  }

  /* 写真エリア：幅制限を解除して全幅表示 */
  .c-boxCol2--type1 > .c-boxCol:first-child {
    flex: 0 0 auto;
    max-width: 100%;
    width: 100%;
  }

  /* 写真サイズをSPで適切に抑制 */
  .column_img_left_default img {
    max-width: 240px;             /* SP時は中央揃え用に最大幅を設定 */
    margin-inline: auto;          /* 写真を中央寄せ */
  }

  /* プロフィールテキストをSPで中央揃え */
  .c-boxCol2--type1 > .c-boxCol:first-child p:not(.column_img_left_default) {
    text-align: center;
  }

  /* キャッチコピー：SPでやや小さく */
  .c-boxCol__title {
    font-size: var(--fs-base);    /* 16px */
    padding: var(--spacing-sm);
  }

  /* タイムライン図：SP時は全幅まで広げる（max-width制限を解除） */
  .c-boxCol__schedule-img {
    max-width: 100%;
  }

  /* 収支表ラッパー：SP時も横並びを維持 */
  .c-boxCol__income-wrap {
    max-width: 100%;
  }

  /* 収支表の個々の画像：SP時は少し小さく抑える */
  .c-boxCol__income-wrap img {
    max-width: 100%;
  }

  /* 部活写真：SP時は全幅 */
  .c-boxCol .c-boxCol__club-photo {
    max-width: 100%;
  }

}

/* ==========================================================================
   追加：箇条書きリスト（カレンダー・部活で使用）
   ========================================================================== */

.c-list-bullet {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md) 0;
}

.c-list-bullet li {
  position: relative;
  padding-left: 1.2em; /* ドット分の余白 */
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  margin-bottom: 0.25em;
}

/* デザイン画像の「●」を再現 */
.c-list-bullet li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--color-text); /* 文字色と合わせる */
  font-size: 0.8em;
  top: 0.1em;
}

/* ==========================================================================
   調整：既存グリッドシステムの補足
   ========================================================================== */

/* 画像下のマージンを共通化 */
.u-mb-sm { margin-bottom: var(--spacing-sm) !important; }

/* PC時：学生会セクションの左右比率と順序の入れ替え */
@media (min-width: 769px) {
  .c-boxCol2--reverse {
    display: flex;
    flex-direction: row-reverse; /* 画像を右、テキストを左に配置 */
    align-items: center;
    gap: var(--spacing-xl);
  }

  .c-boxCol2--reverse > .c-boxCol:first-child {
    flex: 0 0 40%; /* 画像カラムの幅 */
  }

  .c-boxCol2--reverse > .c-boxCol:last-child {
    flex: 1; /* テキストカラムが残りを占有 */
  }
}

/* スマホ時：画像の中央寄せと余白調整 */
@media (max-width: 768px) {
  .c-grid--3col, .c-grid--4col {
    gap: var(--spacing-xl) !important; /* 月ごとの間隔を広めに確保 */
  }

  .c-boxCol img {
    margin-inline: auto; /* 画像を中央へ */
  }

  .c-list-bullet li {
    font-size: var(--fs-sm); /* スマホでは文字を少し小さく */
  }
}



/* ==========================================================================
   学生サポートページ専用スタイル
   --------------------------------------------------------------------------
   対象: /college/campuslife/support/index.html
   依存: common.css, content.css
   ========================================================================== */


/* ==========================================================================
   1. ユーティリティ補完
   ========================================================================== */

/* 下余白 2xl（48px）*/
.u-mb-2xl { margin-bottom: var(--spacing-2xl); }

/* 下余白 lg（24px）*/
.u-mb-lg  { margin-bottom: var(--spacing-lg); }


/* ==========================================================================
   2. リードテキスト（ページ冒頭の説明文）
   --------------------------------------------------------------------------
   中央揃え・少し大きめ・薄いグレー背景で読みやすく
   ========================================================================== */

/* リードテキストを包むヘッダー */
.p-page-content > header {
  margin-bottom: var(--spacing-2xl);
}

/* リード本文 */
.c-text--lead {
  font-size: var(--fs-md);          /* 18px */
  line-height: var(--lh-relaxed);   /* 1.8 */
  color: var(--color-gray-700);
  text-align: left;
  display: block;
  margin: 0;
}


/* ==========================================================================
   3. サポートカード共通 (.c-card--support)
   --------------------------------------------------------------------------
   画像（上）＋テキスト（下）の縦積みカード
   ========================================================================== */

/* カード本体：影と背景、全体の角丸設定を解除 */
.c-card--support {
  background-color: transparent; /* 背景を透過に */
  border-radius: 0;              /* 全体の角丸を解除 */
  box-shadow: none;              /* 影（ライン）を削除 */
  overflow: visible;             /* 子要素の角丸を個別管理するため解除 */
  display: flex;
  flex-direction: column;
}

/* 画像エリア：ここで4隅を角丸にする */
.c-card--support .c-card__media {
  margin: 0;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 6 / 4;
  border-radius: var(--radius-lg); /* 既存の変数(15px)で4隅を角丸に */
}

.c-card--support .c-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 比率維持でトリミング */
  display: block;
  transition: transform var(--transition-slow);
}

/* テキストエリア：枠がなくなるため、左右の余白を画像と揃える */
.c-card--support .c-card__body {
  padding: var(--spacing-lg) 0;    /* 上下は維持、左右を0にして画像と整列 */
  flex: 1;
}

/* カード内の見出し（h3）*/
.c-card--support .c-heading-lvl3 {
  font-size: var(--fs-xl);          /* 18px */
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

/* カード内本文 */
.c-card--support .c-text {
  font-size: var(--fs-base);          /* 14px */
  line-height: var(--lh-relaxed);
  margin-bottom: var(--spacing-sm);
  color: var(--color-gray-700);
}


/* ==========================================================================
   4. チューター制度：1カラム（画像＋テキスト 縦積み・中央揃え）
   --------------------------------------------------------------------------
   デザイン画像では 1枚カードを中央に配置
   ========================================================================== */

/* 2カラムグリッドと同じ構造で左寄せ表示 */
.c-grid--single {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2列グリッドを維持 */
  gap: var(--spacing-xl);
}

/* 1枚だけのカードをグリッドの左列に収める */
.c-grid--single .c-card--support--single {
  grid-column: 1 / 2;             /* 左列（1列目）に配置 */
  justify-self: start;            /* 左寄せ */
  width: 100%;                    /* 列幅いっぱいに広げる */
  max-width: none;                /* 以前の max-width を解除 */
}

/* チューター制度カードの画像比率 */
.c-card--support--single .c-card__media {
  aspect-ratio: 3 / 2;
}

/* カード内テキストは左揃え */
.c-card--support--single .c-card__body {
  text-align: left;
}


/* ==========================================================================
   5. スタディサポート：レスポンシブグリッド (.c-grid--support-study)
   --------------------------------------------------------------------------
   PC: 2列（左右）→ 5枚目のみ中央に1列
   デザイン準拠: 2×2グリッド ＋ 下段1枚中央
   ========================================================================== */

/* スタディサポートグリッド：2列ベース */
.c-grid--support-study {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);          /* 32px */
}

/* 5枚目のカード（ラーニング広場）を中央に表示 */
.c-grid--support-study > .c-card--support:last-child:nth-child(odd) {
  grid-column: 1 / -1;             /* 全幅を占有 */
  max-width: calc(50% - var(--spacing-xl) / 2);  /* 1枚分の幅に制限 */
  justify-self: start;
}


/* ==========================================================================
   6. キャリアサポート・2列グリッド (.c-grid--2col)
   ========================================================================== */

.c-grid--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
}


/* キャリアサポートのリンク（円形矢印アイコン付きバリアント） */
/* --- content.css --- */

/* リンク本体の修正 */
.c-link-icon-blue {
  display: inline-flex;
  align-items: center;
  color: var(--color-hygiene);
  font-size: var(--fs-base);
  text-decoration: none;
  font-weight: var(--fw-bold);
  transition: opacity var(--transition-base);
  white-space: nowrap; 
}

/* ホバー時の下線設定 */
.c-link-icon-blue:hover {
  text-decoration: underline;
  text-underline-offset: 4px; /* 線を少し下げて視認性を向上 */
  opacity: 0.8;
}

/* アイコン（擬似要素）の修正 */
.c-link-icon-blue::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f054"; /* chevron-right */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background-color: var(--color-hygiene);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.6rem;
  margin-right: 8px;
  
  /* 【重要】アイコンが縮小・改行されるのを防ぐ */
  flex-shrink: 0; 
  text-decoration: none !important; /* 下線を完全に拒否 */
  transition: transform var(--transition-base);
}

/* ==========================================================================
   7. 学生生活サポート：テキストのみのセクション
   --------------------------------------------------------------------------
   箇条書き風のリンクを持つシンプルなテキストブロック
   ========================================================================== */

/* サブセクション（h3＋テキスト）の区切り */
.p-support-block {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.p-support-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* 学生生活サポート内のテキスト */
.p-support-block .c-text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-sm);
}

/* 学生生活サポート内のリンク（青丸アイコン付き）*/
.p-support-block a.c-link-icon-blue {
  display: block;                  /* 1行1リンク */
  margin-bottom: var(--spacing-xs);
  font-size: var(--fs-base);
}


/* ==========================================================================
   8. レスポンシブ対応（SP: 768px以下）
   ========================================================================== */

@media (max-width: 768px) {

  /* リードテキスト：SPでパディングを抑制 */
  .c-text--lead {
    font-size: var(--fs-base);     /* 16px */
    padding: var(--spacing-md);
  }

  /* スタディサポートグリッド：SP時は1列 */
  .c-grid--support-study {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* 5枚目のカード：SP時は制限解除して全幅 */
  .c-grid--support-study > .c-card--support:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: 100%;
    justify-self: auto;
  }

  /* キャリアサポートグリッド：SP時は1列 */
  .c-grid--2col {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  /* チューター制度1カラムグリッド：SP時は1列化 */
  .c-grid--single {
    grid-template-columns: 1fr;
  }

  /* カードのgrid-column指定をSPでリセット */
  .c-grid--single .c-card--support--single {
    grid-column: auto;
  }

  /* カードの見出し：SP時も中央揃えを維持 */
  .c-card--support .c-heading-lvl3 {
    font-size: var(--fs-base);
  }

  /* チューターカード：SP時はmax-width解除 */
  .c-card--support--single {
    max-width: 100%;
  }

}


/* ==========================================================================
   Portal Banner Component (Overlap Style)
   ========================================================================== */

.p-portal-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 5px solid var(--color-border-light);
  margin-bottom: var(--spacing-xl);
}

.p-portal-banner__inner {
  display: grid;
  grid-template-areas: "overlay"; /* 画像とコンテンツを同じ場所に重ねる */
  min-height: 400px; /* バナーの存在感を出すための高さ */
}

/* 画像エリア：背景として全幅に広げる */
.p-portal-banner__img {
  grid-area: overlay;
  width: 100%;
  height: 100%;
}

.p-portal-banner__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* コンテンツエリア：右側に重ねるパネル */
.p-portal-banner__content {
  grid-area: overlay;
  justify-self: end; /* 右側に配置 */
  width: 45%;        /* 重なり幅を調整 */
  background-color: rgba(255, 255, 255, 0.92); /* 透明度を微調整 */
  padding: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
  /* 背景のブラー効果（モダンブラウザ対応） */
  backdrop-filter: blur(4px);
}

/* 見出しのウェイトと余白の微調整 */
.p-portal-banner__content .c-heading-lvl2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  padding-bottom: 0;
  border-bottom: none;
  color: var(--color-gray-900);
}

.p-portal-banner__content .c-heading-lvl2::after {
  content: none;
}

/* テキストの行間を少し詰める */
.p-portal-banner__content .c-text {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  margin-bottom: var(--spacing-lg);
  color: var(--color-gray-700);
}

/* ボタンサイズの微調整 */
.p-portal-banner__content .btn2 {
  min-width: 220px; /* PCでのボタン幅を適切に */
  padding: 12px 24px;
}

/* --- レスポンシブ対応 (SP) --- */
@media (max-width: 768px) {
  .p-portal-banner__inner {
    display: flex; /* スマホでは重ねずに縦並びに戻す */
    flex-direction: column;
    min-height: auto;
  }

  .p-portal-banner__img {
    height: 200px;
  }

  .p-portal-banner__content {
    width: 100%;
    padding: var(--spacing-lg);
    background-color: #ffffff; /* スマホでは可読性優先で不透明 */
    backdrop-filter: none;
  }
}


/* --- 歯科衛生学科 --- */

.c-icon-plus {
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  position: relative;
}

.c-icon-plus::before,
.c-icon-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-main); /* 学科カラー（青）が自動適用されます */
  border-radius: 2px;
}

/* 横棒：太さを 8px に変更 */
.c-icon-plus::before {
  width: 100%;
  height: 8px;
}

/* 縦棒：太さを 8px に変更 */
.c-icon-plus::after {
  width: 8px;
  height: 100%;
}


/* --- content.css：リスト（.c-list）の調整 --- */

.c-list {
  list-style: none; /* デフォルトのドットを非表示 */
  padding-left: 0;  /* リスト全体の左余白を削除 */
  margin: var(--spacing-md) 0; /* 前後の余白を調整 */
}

.c-list li {
  position: relative;
  padding-left: 1.2em; /* ドットを表示するスペース（インデント）を確保 */
  line-height: var(--lh-normal); /* 1.6 */
  margin-bottom: 0.5em; /* 項目間の余白 */
  font-size: var(--fs-base); /* 16px */
}

/* 小さなドットの描画 */
.c-list li::before {
  content: "";
  position: absolute;
  left: 0.2em;    /* 左端からの距離 */
  top: 0.65em;    /* テキストの1行目中央に配置（フォントサイズに合わせて調整） */
  width: 5px;     /* ドットの幅：縮小 */
  height: 5px;    /* ドットの高さ：縮小 */
  background-color: currentColor;
  border-radius: 50%; /* 正円にする */
  opacity: 0.8; /* 少し透過させると、より馴染みが良くなります（任意） */
}


/* ==========================================================================
   学科長紹介セクション専用レイアウト (.p-intro-grid)
   ========================================================================== */

.p-intro-grid {
  display: grid;
  gap: var(--spacing-lg); /* スマホ時の余白 24px */
}

@media (min-width: 769px) {
  .p-intro-grid {
    /* PC時：テキストを 1fr、画像を 320px に固定 */
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-xl); /* PC時の余白 32px */
    align-items: start;
  }

  /* 視覚的順序の入れ替え：画像を右、文章を左へ */
  .p-intro-figure {
    order: 2;
  }
  .p-intro-body {
    order: 1;
  }
}

/* 紹介キャプション（右揃え） */
.p-intro-caption {
  text-align: center; 
  margin-top: 10px;
  color: var(--color-gray-700);
}

/* ==========================================================================
   3年間の流れ (Process Flow Section) - 調整版
   ========================================================================== */

/* --- PC版：パズル型（重なりあり） --- */
.p-flow__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; 
  margin-top: var(--spacing-xl); /* 32px */
}

.p-flow__item {
  display: flex;
  flex-direction: column;
}

/* 2番目以降の要素を左に重ねる */
@media (min-width: 769px) {
  .p-flow__item:not(:first-child) {
    margin-left: -15px;
  }
}

/* PC版ラベル：パズル型（右凸・左凹） */
.p-flow__header {
  background-color: var(--color-main);
  color: #ffffff;
  font-weight: var(--fw-bold);
  padding: 12px 0;
  text-align: center;
  position: relative;
  /* 右に凸、左に凹みの形状 */
  clip-path: polygon(calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%, 0 0);
  z-index: 2;
}

/* 1番目のラベルだけ左の凹みを無くす */
.p-flow__item:first-child .p-flow__header {
  clip-path: polygon(calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 0 0);
}

.p-flow__body {
  padding: var(--spacing-lg) var(--spacing-md);
}

.p-flow__title {
  font-size: var(--fs-md); /* 18px */
  font-weight: var(--fw-bold);
  margin-bottom: var(--spacing-md);
  line-height: var(--lh-tight);
    text-align: center;
}

/* ==========================================================================
   スマホ版：直線ラベル（768px以下）
   ========================================================================== */
@media (max-width: 768px) {
  .p-flow__container {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .p-flow__item {
    flex-direction: row;
    align-items: stretch;
    background-color: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  /* スマホ版ラベル：直線の垂直バー */
  .p-flow__header {
    width: 60px; /* 幅を少しスリムに調整 */
    padding: 15px 5px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.2em;
  }

.p-flow__item .p-flow__header {
  clip-path: polygon(calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 0 0);
}

  .p-flow__body {
    flex: 1;
    padding: 20px 15px;
    text-align: left;
  }

  .p-flow__title {
    font-size: var(--fs-base); /* 16px */
    text-align: left;
    margin-bottom: 8px;
  }
}



/* content.css */

/* ==========================================================================
   カリキュラム表：2列同時固定（Sticky）対応 修正版
   ========================================================================== */

/* --- 1列目：大分類（縦書き） --- */
html body .p-curriculum-table tbody th[rowspan] {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 12; /* 2列目(11)より上に配置 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: 50px !important;     /* テーブルの幅計算を固定するため!importantを維持 */
  min-width: 50px !important;
  background-color: var(--color-main);
  color: #ffffff;
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
}

/* --- 2列目：小分類（横書き） --- */
html body .p-curriculum-table tbody th:not([rowspan]) {
  position: -webkit-sticky;
  position: sticky;
  left: 50px; /* 1列目の幅(50px)の分だけずらして固定 */
  z-index: 11;
  width: 140px !important;
  min-width: 140px !important;
  background-color: var(--color-gray-50);
  border-left: 1px solid var(--color-border-light);
  box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.1);
}

/* --- ヘッダー：1列目の固定 --- */
html body .p-curriculum-table thead th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 15; /* 最前面：ボディの1列目(12)より高い値 */
  background-color: var(--color-main);
  width: 50px !important;
}

/* --- ヘッダー：2列目の固定（めり込み防止用） --- */
html body .p-curriculum-table thead th:nth-child(2) {
  position: -webkit-sticky;
  position: sticky;
  left: 50px; /* 1列目の幅分オフセット */
  z-index: 14; /* ボディの2列目(11)より高く、ヘッダー1列目(15)より低い値 */
  background-color: var(--color-main);
  width: 140px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* スマホ閲覧時の最小幅確保（横スクロールを発生させるために必須） */
@media (max-width: 768px) {
  html body .p-curriculum-table {
    min-width: 850px !important;
  }
}

/* ==========================================================================
   Project: Student Voice (学生インタビュー) 統合・整理版
   ========================================================================== */

/* --- 1. 見出し（Headings） --- */
.p-student-voice .c-heading-lvl3 {
  display: flex;
  align-items: flex-start;
  border-left: none;
  padding-left: 0;
  color: var(--color-main);
  font-size: var(--fs-2xl); /* 25px相当 */
  margin-top: var(--spacing-2xl);
}

.p-student-voice .c-heading-lvl3::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: var(--color-main);
  margin-right: 12px;
  margin-top: 10px; /* テキスト1行目中央への微調整 */
  flex-shrink: 0;
}

.p-student-voice .c-heading-lvl4 {
  display: flex;
  align-items: center;
  border-left: none;
  padding-bottom: 8px;
  color: var(--color-main);
  font-size: var(--fs-lg);
  margin-top: 0;
}

/* --- 2. レイアウト（Layout / Alignment） --- */
.p-student-voice .c-grid.c-grid--2col {
  align-items: start !important;
  margin-bottom: var(--spacing-2xl);
}

.p-student-voice .c-card__body {
  padding-top: 0 !important;
}

.p-student-voice .c-card__body > *:first-child {
  margin-top: 0 !important;
}

.p-student-voice .c-card__media {
  line-height: 0;
}

/* --- 3. 要素別調整（Images / UI） --- */
.p-student-voice .u-mt-40 img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
}

@media (min-width: 769px) {
  .p-student-voice .c-grid--2col {
    grid-template-columns: 250px 1fr;
    gap: var(--spacing-2xl);
  }

  .p-student-voice .c-card__media img {
    width: 100%;
    max-width: 250px;
    border-radius: var(--radius-sm);
  }
}

.p-student-voice .u-mb-20 {
  margin-bottom: 24px !important;
}


/* ==========================================================================
   Project: Career Voice（理想.jpg準拠：50:50最適化版）
   ========================================================================== */

/* --- 1. 全体設定：50%:50%の比率を強制 --- */
.p-career-voice .c-grid.c-grid--2col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* 等分割 */
  gap: var(--spacing-2xl) !important;       /* 理想通りのゆとり(48px) */
  align-items: start !important;            /* 天面を揃える */
}

/* --- 2. キャッチコピー（理想通りのベタ塗りマーカー） --- */
.p-career-voice .c-copy-hygiene,
.p-career-voice .c-copy-nursing {
  display: inline;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.8;
  padding: 4px 10px;
  color: #ffffff;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 学科カラーの適用 */
.p-career-voice .c-copy-hygiene { background: var(--color-hygiene); }
.p-career-voice .c-copy-nursing { background: var(--color-nursing); }

/* --- 3. 画像とキャプションの整列 --- */
.p-career-voice figure {
  margin: 0;
  width: 100%;
}

.p-career-voice figure img {
  width: 100% !important;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.p-career-voice figcaption {
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--color-gray-700);
  margin-top: 10px;
}

/* --- 4. プロフィールとレイアウト微調整 --- */
@media (min-width: 769px) {
  /* 上段の本文・プロフィールも50:50をベースに調整 */
  .p-career-voice .c-grid--2col:first-of-type {
    grid-template-columns: 1fr 1fr !important;
  }

  .p-career-voice .p-voice-profile .u-mt-15 {
    text-align: left;
  }
}

/* Voice 01 アイコン */
.p-voice-icon {
  max-width: 140px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .p-career-voice .c-grid.c-grid--2col {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-lg) !important;
  }
}

/* ==========================================================================
   Project: Facility (学科の施設・設備ページ固有スタイル)
   ========================================================================== */

/* --- 1. レイアウト調整 --- */

/* 全2カラムグリッドを上端揃えに固定 */
.p-facility .c-grid.c-grid--2col {
  align-items: start !important;
}

/* 右カラムの開始位置を写真天面に合わせる */
.p-facility .c-card__body {
  padding-top: 0 !important;
}

/* 右カラム内の最初の要素の上余白をリセット */
.p-facility .c-card__body > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 左カラム（写真）の下部隙間を排除 */
.p-facility .c-card__media {
  line-height: 0;
}


/* --- 2. 見出し・テキスト装飾 --- */

/* リード文：大きく太字で強調 */
.p-facility .c-text--lead {
  display: block;
  font-size: var(--fs-xl) !important;      /* 22px相当 */
  font-weight: var(--fw-bold) !important;   /* 700 */
  color: var(--color-gray-700);
  line-height: var(--lh-tight) !important;  /* 1.25 */
  margin-top: 0 !important;
  margin-bottom: var(--spacing-xl) !important; /* 32px */
}

/* H3: 学科カラーの正方形アイコン付与（2行時の上付き対応） */
.p-facility .c-heading-lvl3 {
  display: flex;
  align-items: flex-start;
  border-left: none;
  padding-left: 0;
  color: var(--color-hygiene);
  font-size: var(--fs-heading-h3); /* 24px相当 */
  margin-top: var(--spacing-xl);  /* 32px */
}

.p-facility .c-heading-lvl3::before {
  content: "";
  display: block;
  width: 20px;                     /* 指示通りのサイズ */
  height: 20px;
  background-color: var(--color-hygiene);
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 0.4em;               /* 上付き調整 */
}

/* H4: 小見出しを学科カラーに */
.p-facility .c-heading-lvl4 {
  color: var(--color-main);
  margin-top: 0;
}


/* --- 3. レスポンシブ設定 --- */

/* PC版：臨床実習セクションの比率調整 */
@media (min-width: 769px) {
  .p-facility .c-grid--2col.u-mt-40 {
    grid-template-columns: 300px 1fr;
    gap: var(--spacing-2xl);       /* 48px */
    align-items: start;
  }

  .p-facility .c-grid--2col.u-mt-40 .c-card__media img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .p-facility .c-grid--2col.u-mt-40 .c-card__body .c-text {
    margin-bottom: var(--spacing-lg); /* 24px */
    line-height: var(--lh-relaxed);   /* 1.8 */
  }
}

/* スマホ版：リード文の調整 */
@media (max-width: 768px) {
  .p-facility .c-text--lead {
    font-size: var(--fs-md) !important; /* 18px相当 */
    margin-bottom: var(--spacing-lg) !important;
  }
}



/* ==========================================================================
   Project: Exams (入試カテゴリ専用スタイル)
   --------------------------------------------------------------------------
   理想.jpgに基づいた、歯科衛生学科入試ページのブラッシュアップ
   ========================================================================== */

/**
 * 0. 競合解消（2重ドット防止）
 * -------------------------------------------------------------------------- */
/* content.css 側の a::before ドットを無効化 */
.p-exams .c-listLink--h a::before,
.p-exams .c-listLink--v a::before {
  display: none !important;
}

/**
 * 1. リンクテキスト ＋ 円形青アイコン
 * -------------------------------------------------------------------------- */
.p-exams .c-linkTextArrow {
  display: inline-flex;
  align-items: flex-start;
  gap: 15px;
  color: var(--color-gray-900);
  font-size: 1.25rem; /* 20px相当 */
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.p-exams .c-linkTextArrow:hover {
  opacity: 0.7;
  color: var(--color-main);
}

/* 青い円形アイコン */
.p-exams .c-linkTextArrow::before {
  content: "\f054"; /* FontAwesome chevron-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-main); /* 学科カラー(青)と連動 */
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.8rem;
  flex-shrink: 0;
  text-decoration: none !important;
  margin-top: 0.15em;
}

/**
 * 2. リンクリスト共通（ドット装飾）
 * -------------------------------------------------------------------------- */
.p-exams .c-listLink--h,
.p-exams .c-listLink--v {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-exams .c-listLink--h li {
  position: relative;
  padding-left: 22px;/* ドット位置を考慮したインデント */
}

  .p-exams .c-listLink--v li {
  position: relative;
  padding-left: 0;/* ドット位置を考慮したインデント */
}

/* 青いドット装飾の統一 */
.p-exams .c-listLink--h li::before,
.p-exams .c-listLink--v li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 15px;
  height: 15px;
  background-color: var(--color-main);
  border-radius: 50%;
}

.p-exams .c-listLink--h a,
.p-exams .c-listLink--v a {
  color: var(--color-gray-600);
  text-decoration: none;
  font-size: var(--fs-base);
  transition: color var(--transition-base);
}

.p-exams .c-listLink--h a:hover,
.p-exams .c-listLink--v a:hover {
  text-decoration: underline;
  color: var(--color-main);
}

/**
 * 3. 各リスト固有レイアウト
 * -------------------------------------------------------------------------- */

/* 横並びリスト（選抜区分） */
.p-exams .c-listLink--h {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px; /* 折り返し時の上下左右の間隔 */
}

/* 縦並びリスト（個別書類） */
.p-exams .c-listLink--v li {
  margin-bottom: 12px;
}

.p-exams .c-listLink--v li:last-child {
  margin-bottom: 0;
}

/**
 * 4. テキスト領域の調整
 * -------------------------------------------------------------------------- */
.p-exams .u-mt-15 {
  margin-top: 15px !important;
}

.p-exams .u-mt-15 p {
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--color-gray-700);
  margin-bottom: 0;
}

/* PDFアイコンとの微調整 */
.p-exams a[href$=".pdf"]::after {
  margin-left: 8px;
}


/* ==========================================================================
   Project: Nursing Job Section（看護師の仕事セクション）
   ========================================================================== */

/* 看護学科ページ内の「看護師の仕事」セクション */
.nrs article {
  margin-bottom: var(--spacing-xl); /* 40px */
}

/* h3は学科カラー（ピンク）に自動適用される（.nrs内で） */
.nrs article .c-heading-lvl3 {
  margin-top: 0;
  margin-bottom: var(--spacing-lg); /* 24px */
}

/* 2カラムグリッドの構造：左に画像、右にテキスト */
.nrs article .c-grid--2col {
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-2xl); /* 48px */
  align-items: start; /* 上揃え */
}

/* 画像カラムの調整 */
.nrs article .c-card__media {
  margin-bottom: 0;
}

.nrs article .c-card__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* PC版：画像幅を固定 */
@media (min-width: 769px) {
  .nrs article .c-grid--2col {
    grid-template-columns: 280px 1fr;
    gap: 60px;
  }

  .nrs article .c-card__media {
    max-width: 280px;
  }
}

/* スマートフォン版：1カラム化 */
@media (max-width: 768px) {
  .nrs article .c-grid--2col {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg); /* 24px */
  }

  .nrs article .c-card__media {
    width: 100%;
    max-width: 100%;
  }

  .nrs article .c-heading-lvl3 {
    font-size: var(--fs-lg); /* モバイルでやや小さく */
  }
}

/* ==========================================================================
   Project: Nursing Job Section（看護師の仕事セクション）修正
   ========================================================================== */

/* 看護学科（.nrs）内の article 要素における 2カラムグリッドの調整 */
.nrs article .c-grid--2col {
  grid-template-columns: 300px 1fr;
  gap: var(--spacing-2xl); /* 48px */
  /* 画像とテキストの天面を確実に揃える */
  align-items: start !important; 
}

/* テキストエリア内部の最初の要素の上余白をリセットし、画像天面と物理的に揃える */
.nrs article .c-card__body > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* PC版：画像幅と余白の最適化 */
@media (min-width: 769px) {
  .nrs article .c-grid--2col {
    /* 黄金比に近いバランスへ微調整（300pxから280pxへ） */
    grid-template-columns: 280px 1fr;
    gap: 60px;
  }

  .nrs article .c-card__media {
    max-width: 280px;
  }
}

/* スマートフォン版：1カラム化と余白の維持 */
@media (max-width: 768px) {
  .nrs article .c-grid--2col {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg); /* 24px */
  }
}


/* ==========================================================================
   Project: Site Map (.p-site-map)
   --------------------------------------------------------------------------
   サイトマップ専用のレイアウトとスタイル定義
   ========================================================================== */

.p-site-map {
  margin-top: var(--spacing-md);
}

.p-site-map__inner {
  display: grid;
  /* PC：4カラム、1024px以下で調整 */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-2xl) var(--spacing-lg);
  align-items: start;
}

/* 各カテゴリのカラム */
.p-site-map__column {
  margin-bottom: 0;
}

/* カテゴリ見出し */
.p-site-map__heading {
  font-size: var(--fs-lg); /* 20px */
  font-weight: var(--fw-bold);
  color: var(--color-text); /* #222222 */
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 5px solid var(--color-main);
  line-height: var(--lh-tight);
}

.p-site-map__heading a {
  color: inherit;
  text-decoration: none;
}

.p-site-map__heading a:hover {
  text-decoration: underline;
}

/* リスト構造 */
.p-site-map__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-site-map__item {
  margin-bottom: var(--spacing-sm); /* 8px */
}

/* リンクテキスト */
.p-site-map__item a {
  display: inline-block;
  font-size: var(--fs-sm); 
  color: var(--color-text); /* #222222 */
  text-decoration: none;
  line-height: var(--lh-normal);
  transition: color var(--transition-base), transform var(--transition-fast);
}

.p-site-map__item a:hover {
  color: var(--color-main);
  text-decoration: underline;
  transform: translateX(4px);
}

/* サブリンク（右端・下段用）の調整 */
.p-site-map__column--sub {
  grid-column: 1 / -1;
  background-color: var(--color-gray-100);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-top: var(--spacing-md);
}

.p-site-map__list--sub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-sm) var(--spacing-md);
}

/* レスポンシブ対応 */
@media (min-width: 1024px) {
  .p-site-map__column--sub {
    grid-column: auto;
    background-color: transparent;
    padding: 0;
    margin-top: 0;
  }
  
  .p-site-map__list--sub {
    display: block;
  }
}

@media (max-width: 768px) {
  .p-site-map__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }
  
  .p-site-map__item a {
    font-size: var(--fs-base); /* 16px */
    padding-block: var(--spacing-xs);
  }
  
  .p-site-map__column--sub {
    padding: var(--spacing-md);
  }
}

/* ==========================================================================
   Component: Tabs (.c-tabs) - Unified Main Color Version
   -------------------------------------------------------------------------- */

.c-tabs {
  margin-bottom: var(--spacing-2xl);
}

/* 1. タブリスト：下線を引いて土台を作る */
.c-tabs__list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid var(--color-border-light);
  gap: 4px; /* タブ同士のわずかな隙間 */
}

/* 2. タブボタン：基本はグレー背景 */
.c-tabs__trigger {
  flex: 1;
  padding: 16px 20px;
  background-color: var(--color-gray-100);
  border: 1px solid var(--color-border-light);
  border-bottom: none; /* 下の線はリスト側に任せる */
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  margin-bottom: -2px; /* リストのborder-bottomと重ねる */
  z-index: 1;
}

/* 3. 選択中の状態：白背景 ＋ メインカラーの上線 */
.c-tabs__trigger.is-active {
  background-color: #ffffff; /* パネルと一体化 */
  color: var(--color-main);   /* 常にメインカラーを使用 */
  border-color: var(--color-border-light);
  border-top: 4px solid var(--color-main); /* 上端にアクセントライン */
  padding-top: 13px; /* border-topが増えた分、高さを調整 */
  z-index: 2; /* 境界線を隠すために最前面へ */
}

/* ホバー時の挙動 */
.c-tabs__trigger:hover:not(.is-active) {
  background-color: var(--color-gray-200);
  color: var(--color-text);
}

/* 4. パネルエリア：タブと地続きに見せる */
.c-tabs__content {
  background-color: #ffffff;
  padding-top: var(--spacing-xl);
}

.c-tabs__panel {
  display: none;
  animation: tabFadeIn 0.3s ease-out;
}

.c-tabs__panel.is-active {
  display: block;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* レスポンシブ：スマホでは文字サイズを最適化 */
@media (max-width: 768px) {
  .c-tabs__trigger {
    padding: 12px 10px;
    font-size: var(--fs-base);
  }
  .c-tabs__trigger.is-active {
    padding-top: 9px;
  }
}


.p-news-header__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.p-news-header__category {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  padding: 3px 28px;
  line-height: 1.6;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;
}

/* お知らせ（緑） */
.p-news-header__category--info {
  border-color: #12C19E;
  color: #12C19E;
  background: rgba(18, 193, 158, 0.08);
}

/* 入試情報・入試関連（赤） */
.p-news-header__category--exam {
  border-color: #f25a5c;
  color: #f25a5c;
  background: rgba(242, 90, 92, 0.08);
}

.p-news-header__date {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-gray-700);
  letter-spacing: 0.05em;
}

/* 詳細ページヘッダー：日付とカテゴリを白文字に統一 */
.p-news-header__meta .p-news-header__category {
  color: #ffffff;
  border-color: #ffffff;
}

.p-news-header__meta .p-news-header__date {
  color: #ffffff;
}


/* ==========================================================================
   ScrollHintの表示調整（潜り込み防止策 & はみ出し防止）
   ========================================================================== */

/* 1. 基準点の確保と、コンテキストの初期化 */
.js-scroll-hint,
.scroll-hint {
  position: relative !important;
  z-index: 0 !important; /* 新しい重ね合わせコンテキストを生成し、他への影響を抑える */
}

/* 2. 【最重要】アイコンの「ラッパー要素」をth（z-index: 3）より確実に上にする */
.scroll-hint-icon-wrap {
  z-index: 10 !important;
}

/* * 3. 【今回の問題解決】アイコンがテーブルの外枠（.scroll-hint の overflow）で隠れないように、
 * アイコンの配置を少し内側に移動させる。
 */
.scroll-hint-icon-wrap {
  right: 15px !important; /* ★右端から15pxほど内側に離す */
}

/* 4. アイコンの色をメインカラー等に合わせる（既存のまま） */
.scroll-hint-icon {
  background-color: rgba(102, 102, 102, 0.9) !important;
}

/* 5. 縦スクロール時のガタつき防止 */
.c-table-wrapper.js-scroll-hint,
.scroll-hint-scrollable-wrap {
  overflow-y: hidden !important;
}

/* ==========================================================================
   卒業生Voice レイアウト（career ページ）
   ========================================================================== */

@media (max-width: 768px) {

  /* 1カラム化 */
  .p-voice-unit .c-grid--2col {
    grid-template-columns: 1fr;
  }

  /* 写真・氏名を先に表示 */
  .p-voice-unit .p-voice-profile {
    order: -1;
  }
}

/* ==========================================================================
   Component: Info Cards（3列インフォカード）修正版
   ========================================================================== */

.c-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}

.c-info-card {
  border: 5px solid var(--color-main);   /* PC: 5px */
  border-radius: 35px;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
}

/* 「3」の大きな数字 */
.c-info-card__num {
  font-size: 4rem;               /* 64px：目立つサイズ */
  font-weight: var(--fw-bold);
  color: var(--color-main);      /* ピンク */
  line-height: 1;
}

/* 「年制」部分 */
.c-info-card__unit {
  font-size: var(--fs-2xl);      /* 25px */
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

/* 「3年制」を含む段落 */
.c-info-card__main {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-normal);
  margin: 0;
  display: flex;
  align-items: baseline;         /* 「3」と「年制」をベースライン揃え */
  gap: 2px;
}

/* ラベル行 */
.c-info-card__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 0 var(--spacing-sm);
  line-height: var(--lh-normal);
}

/* カラー強調 */
.c-info-card__em {
  color: var(--color-main);
}

/* 本文テキスト */
.c-info-card__text {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  margin: 0;
  text-align: left;
}

/* SP：3列固定・フォント縮小 */
@media (max-width: 768px) {
  .c-info-cards {
    gap: var(--spacing-sm);
  }

  .c-info-card {
    padding: var(--spacing-lg) var(--spacing-sm);
    min-height: 100px;
  }

  .c-info-card__num {
    font-size: 2.5rem;           /* SP時は少し縮小 */
  }

  .c-info-card__unit {
    font-size: var(--fs-md);
  }

  .c-info-card__main {
    font-size: var(--fs-md);
  }

  .c-info-card__label {
    font-size: var(--fs-xs);
  }

  .c-info-card__text {
    font-size: var(--fs-xs);
  }
}

/* SP */
@media (max-width: 768px) {
  .c-info-card {
    border-width: 2px;                 /* SP: 2px */
    padding: var(--spacing-md) var(--spacing-sm);
    min-height: 0;
  }

  .c-info-card__label {
    font-size: var(--fs-md);           /* SP: 18px に縮小 */
  }
}



/* ==========================================================================
   Component: c-table--style-02（時間割専用テーブル）
   ========================================================================== */

.c-table--style-02 {
  width: 100%;
  border-collapse: collapse;
  background-color: #B3DAF5;
  font-size: var(--fs-sm);
  min-width: 560px;
}

/* ヘッダー行：学科カラー背景・白文字・フォント大きく */
.c-table--style-02 thead th {
  background-color: var(--color-main);
  color: #ffffff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);    /* 16px */
   padding: 5px 8px;
  text-align: center;
  border: 2px solid var(--color-main);
}

/* 時間列（tbody の th）：サブカラー背景・フォント大きく */
.c-table--style-02 tbody th {
   background-color: var(--color-sub);  
  color: var(--color-gray-700);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);    /* 16px */
  text-align: center;
  padding: 4px 12px;
  white-space: nowrap;
  min-width: 130px;
  border: 2px solid var(--color-main);
}

/* データセル：サブカラー背景 */
.c-table--style-02 tbody td {
   background-color: var(--color-sub);  
  text-align: center;
  vertical-align: middle;
  padding: 4px; 
  border: 2px solid var(--color-main);
  line-height: var(--lh-normal);
 font-size: var(--fs-base);    /* 16px */
}

/* rowspanセルの縦中央揃え */
.c-table--style-02 td[rowspan] {
  vertical-align: middle;
}

/* wrapper：角丸なし・外枠をmainカラー2px */
.c-table-wrapper:has(.c-table--style-02) {
  border: 2px solid var(--color-main);
  border-radius: 0;
  box-shadow: none;
}


/* --- フローチャート・2カラム構成 (.c-flow-list) --- */
.c-flow-list {
  border: 4px solid var(--color-main);
  border-radius: var(--radius-md);
  padding: 0;
  margin-bottom: 80px;
  list-style: none;
}

/* PC版：幅80%・中央寄せ */
@media (min-width: 769px) {
  .c-flow-list {
    width: 80% !important;
    margin-inline: auto !important;
  }
}

.c-flow-list__item {
  padding: 40px;
  position: relative;
}

.c-flow-list__item:not(:last-child) {
  border-bottom: 4px solid var(--color-main);
}

/* ステップ間の矢印（三角形） */
.c-flow-list__item:not(:last-child)::before,
.c-flow-list__item:not(:last-child)::after {
  content: "";
  border: solid transparent;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.c-flow-list__item:not(:last-child)::before {
  border-width: 20px;
  border-top-color: var(--color-main);
}

.c-flow-list__item:not(:last-child)::after {
  border-width: 17px;
  border-top-color: #ffffff;
  margin-top: -3px;
}

.c-flow-list dl {
  margin: 0;
  display: flex;
  align-items: flex-start; /* 天面揃え */
  gap: 40px;
}

/* 左カラム：STEPバッジ */
.c-flow-list dt {
  flex: 0 0 120px; /* バッジの幅を固定 */
  margin: 0;
  text-align: center;
}

/* 右カラム：タイトル＋説明文 */
.c-flow-list dd {
  flex: 1;
  margin: 0;
  text-align: left;
}

/* STEPバッジのスタイル */
.c-flow-list .icon {
  display: block;
  font-size: var(--fs-lg);
  color: #ffffff;
  background: linear-gradient(to right, var(--color-main) 0%, #5ED9C1 100%);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
}

/* 右カラム内のタイトル */
.c-flow-list__title {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-main);
  margin-bottom: 8px;
}

/* 右カラム内の説明文 */
.c-flow-list__text {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-700);
}

/* 追加：アイコンバッジ（レッド/参加許可書用） */
.c-flow-list .icon2 {
  display: table;           /* 幅を中身に合わせる */
  margin: 20px 0 0;     /* 本文の下で中央に配置 */
  font-size: var(--fs-base);
  color: #ffffff;
  background: linear-gradient(to right, #D9363E 0%, #FF7F7F 100%);
  padding: 8px 50px;
  border-radius: var(--radius-pill);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
}

/* レスポンシブ (SP) */
@media (max-width: 768px) {
  .c-flow-list__item {
    padding: 30px 20px;
  }
  
  .c-flow-list dl {
    flex-direction: column;
    gap: 15px;
  }

  .c-flow-list dt {
    flex: 0 0 auto;
    width: 100px;
  }
}


/* --- 理想.jpg 準拠：スケジュールグリッド (.c-schedule-grid) --- */
.c-schedule-grid {
  display: grid;
  /* PC: 5列固定 */
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: var(--spacing-xl);
}

/* PC版：幅80%・中央寄せ */
@media (min-width: 769px) {
  .c-schedule-grid {
    width: 95% !important;
    margin-inline: auto !important;
  }
}

.c-schedule-grid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 20px;
  background-color: #f0f4f9; /* 理想.jpg の淡いブルー */
  border-radius: 20px;       /* 理想.jpg の深い角丸 */
  text-decoration: none !important;
  color: #474dff;            /* 理想.jpg の鮮やかなブルー */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ホバー効果 */
a.c-schedule-grid__item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(71, 77, 255, 0.15);
  opacity: 1;
}

/* 終了した日程 */
.c-schedule-grid__item.is-ended {
  background-color: #ccd2da; /* 理想.jpg のグレー */
  color: #555555;
  pointer-events: none;
}

/* 日付テキスト：大きく強調 */
.c-schedule-grid__date {
  font-size: 3rem;           /* 約32px */
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.c-schedule-grid__time {
  display: block;
  font-size: 1rem; /* 曜日より一回り小さく設定 */
  font-weight: 500;
  color: inherit;
  margin-top: -2px;   /* 曜日との距離を詰める */
  margin-bottom: 10px;
  line-height: 1.2;
}

/* 曜日：日付のすぐ下に配置 */
.c-schedule-grid__dow {
  font-size: 0.9rem;
  font-weight: 700;
  margin-top: 4px;
  margin-bottom: 12px;
}

/* 参加バッジ：白い背景のピル型 */
.c-schedule-grid__badge {
  display: block;
  width: 100%;
  max-width: 150px;
  padding: 5px 0;
  background-color: #ffffff;
  color: #474dff;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 終了バッジ：グレー背景 */
.is-ended .c-schedule-grid__badge {
  background-color: #8c97a8;
  color: #ffffff;
  box-shadow: none;
}

/* 2027年タグ：左上に配置 */
.c-schedule-grid__year {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 11px;
  font-weight: 800;
  background-color: #474dff;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 12px 0 12px 0; /* 特徴的な角の形状 */
}

/* レスポンシブ (SP)：2列 */
@media (max-width: 768px) {
  .c-schedule-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .c-schedule-grid__date {
    font-size: 2.5rem;
  }
}