@charset "UTF-8";

/* ==========================================================================
   Project: Parents Page（保護者・高校教員向けページ）
   File:    parents.css
   対象:    /hygiene/parents/ / /nursing/parents/
   依存:    common.css（デザイントークン）
   --------------------------------------------------------------------------
   【カラー連動】
   - var(--color-main) は .hyg / .nrs クラスにより学科カラーに自動切替
   - var(--color-primary) は常にネイビー（#004098）
   ========================================================================== */


/* ==========================================================================
   1. KVエリア
   ========================================================================== */

.p-parents-kv {
  display: flex;
  align-items: stretch;
  min-height: 360px;
  margin-bottom: 48px; /* --spacing-2xl */
}

/* 画像カラム */
.p-parents-kv__img-col {
  flex: 0 0 62%;
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-100);
}

.p-parents-kv__img-col img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* キャッチコピーカラム */
.p-parents-kv__catch-col {
  flex: 0 0 38%;
  background: linear-gradient(
    to right,
    #B2EAE0 0%,
    #ffffff 50%,
    #A0CCF0 100%
  );
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px; /* --spacing-sm */
  padding: 48px 32px; /* --spacing-2xl --spacing-xl */
}

/* 看護学科*/
.nrs .p-parents-kv__catch-col {
  background: linear-gradient(
    to right,
    #B2EAE0 0%,
    #ffffff 50%,
    #FDE8F3 100%
  );
}

/* 各行のハイライトボックス */
.p-parents-kv__catch-line {
  display: inline-block;
  background-color: var(--color-main);
  color: #ffffff;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  padding: 6px 16px;
  margin: 0;
}

@media (max-width: 768px) {
  .p-parents-kv {
    flex-direction: column;
    min-height: auto;
    margin-bottom: 32px; /* --spacing-xl */
  }

  .p-parents-kv__img-col {
    flex: none;
    height: 260px;
  }

  .p-parents-kv__img-col img {
    min-height: 260px;
  }

  .p-parents-kv__catch-line {
    font-size: var(--fs-xl);
  }

  .p-parents-kv__catch-col {
    flex: none;
    padding: 32px; /* --spacing-xl */
  }
}


/* ==========================================================================
   2. リード文（カラーバー）
   ========================================================================== */

.p-parents-lead {
  display: block;
  background-color: var(--color-main);
  color: #ffffff;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  padding: 10px 16px;
  margin-top: 16px; /* --spacing-md */
  margin-bottom: 24px; /* --spacing-lg */
  line-height: var(--lh-tight);
}


/* ==========================================================================
   3. 比較表セクション
   ========================================================================== */

/* 比較表：1カラム縦並び */
.p-parents-comparison__inner {
  display: block;
  margin-top: 24px; /* --spacing-lg */
}

/* テーブルラッパー：角丸対応 */
.p-parents-comparison__table-wrap {
  overflow: hidden;
  margin-bottom: 32px; /* --spacing-xl */
}

/* テーブル全体：セル間の隙間を水色で表現 */
.p-parents-comparison .c-table--style-02 {
  border-collapse: separate;
  border-spacing: 1px;
  background-color: var(--color-main);
  width: 100%;
}

/* 全セル共通：ボーダーをリセット */
.p-parents-comparison .c-table--style-02 th,
.p-parents-comparison .c-table--style-02 td {
  border: none;
  padding: 14px 20px;
  text-align: center;
}

/* ヘッダー：通常列 */
.p-parents-comparison .c-table--style-02 thead th {
  background-color: var(--color-sub);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

/* ヘッダー：本学列（やや濃い水色） */
.p-parents-comparison .c-table--style-02 thead th.is-highlight {
  background-color: #C5DCF5;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

/* ヘッダー：本学列（看護学科） */
.nrs .p-parents-comparison .c-table--style-02 thead th.is-highlight {
  background-color: #F9BDD4;
}

/* ボディ：通常列 */
.p-parents-comparison .c-table--style-02 tbody td {
  background-color: #ffffff;
  color: var(--color-text);
}

/* ボディ：本学列（薄い水色） */
.p-parents-comparison .c-table--style-02 tbody td.is-highlight {
  background-color: var(--color-sub);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.p-parents-comparison__img-wrap {
  width: 100%;
  text-align: center;
}

.p-parents-comparison__img-wrap img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}


/* ==========================================================================
   4. いいとこ取りバナー
   ========================================================================== */

.p-parents-feature {
  background-color: var(--color-main);
  padding: 20px 32px; /* --spacing-2xl --spacing-xl */
  margin-top: 48px; /* --spacing-2xl */
  margin-bottom: 48px; /* --spacing-2xl */
    border-radius: 10px; /* --radius-md */
}

.p-parents-feature__title {
  color: #ffffff;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  text-align: center;
  margin-bottom: 32px; /* --spacing-xl */
  line-height: var(--lh-tight);
}

.p-parents-feature__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 960px;
  margin: 0 auto;
}

/* アイテムカード：白背景・角丸 */
.p-parents-feature__item {
  color: var(--color-primary);
  background-color: #ffffff;
  border-radius: 15px; /* --radius-lg */
  padding: 24px; /* --spacing-lg */
}

/* 番号＋見出し */
.p-parents-feature__num {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: 8px; /* --spacing-sm */
  color: var(--color-main);
  border-bottom: none;
  padding-bottom: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 説明文 */
.p-parents-feature__text {
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

@media (max-width: 768px) {
  .p-parents-feature__grid {
    grid-template-columns: 1fr;
    gap: 24px; /* --spacing-lg */
  }

  .p-parents-feature__title {
    font-size: var(--fs-md);
  }
}


/* ==========================================================================
   5. 魅力カード（2×2グリッド）
   ========================================================================== */

.p-parents-merit {
  margin-bottom: 48px; /* --spacing-2xl */
}

.p-parents-merit__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px; /* --spacing-xl */
  margin-top: 24px; /* --spacing-lg */
}

/* カード */
.p-parents-merit__card {
  border: 2px solid var(--color-main);
  border-radius: 10px; /* --radius-md */
  overflow: hidden;
}

/* カードタイトルバー */
.p-parents-merit__card-title {
  background-color: var(--color-main); /* 上書き：var(--color-sub) → メインカラー */
  color: #ffffff;                      /* 上書き：var(--color-main) → 白 */
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);         /* 既存：維持 */
  padding: 20px 16px;                  /* 既存：維持 */
  line-height: var(--lh-tight);        /* 既存：維持 */
  margin: 0;                           /* 既存：維持 */
}

/* 2枚並び画像 */
.p-parents-merit__images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.p-parents-merit__images img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background-color: var(--color-gray-100);
}

/* カード本文 */
.p-parents-merit__body {
  padding: 16px; /* --spacing-md */
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin: 0;
}

@media (max-width: 1023px) and (min-width: 769px) {
  .p-parents-merit__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .p-parents-merit__grid {
    grid-template-columns: 1fr;
    gap: 24px; /* --spacing-lg */
  }
}


/* ==========================================================================
   6. 体験プログラムセクション
   ========================================================================== */

.p-parents-program {
  margin-top: 48px; /* --spacing-2xl */
  margin-bottom: 48px; /* --spacing-2xl */
}

/* 法人体験プログラムリンク */
.p-parents-program__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border: 2px solid var(--color-main);
  border-radius: 999px; /* --radius-pill */
  color: var(--color-main);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background-color 250ms ease-in-out, color 250ms ease-in-out; /* --transition-base */
}

.p-parents-program__link::after {
  content: "\f35d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8em;
}

.p-parents-program__link:hover {
  background-color: var(--color-main);
  color: #ffffff;
}

@media (max-width: 768px) {
  .p-parents-program__link {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
  }
}