/* ==========================================================================
   トップページ（v4）
   大きなメッセージ、広い余白、色面のリズム、点在する小さなイラスト。
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */
.phn-hero {
  position: relative;
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 5rem) clamp(2.5rem, 1.75rem + 3vw, 5rem);
  background: var(--phn-white);
  overflow: hidden;
}
/* 青空：イラストのまわりのやわらかな光。面ではなく空気として置く。
   `farthest-side` ＋「100% で alpha 0」なので、ヒーローの上端・下端に届いた時点で
   色は消えている。切り口（横線）はどこにもできない。 */
.phn-hero::before {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  inset: 0 0 0 auto; inline-size: min(715px, 62vw);
  background: radial-gradient(farthest-side at 59% 50%,
    rgba(154, 214, 247, 0.34),
    rgba(154, 214, 247, 0.21) 26%,
    rgba(154, 214, 247, 0.08) 54%,
    rgba(154, 214, 247, 0.02) 78%,
    rgba(154, 214, 247, 0) 100%);
}

.phn-hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center;
}
.phn-hero__inner { max-width: 50em; }
.phn-hero__ill { display: flex; justify-content: flex-end; align-items: center; }
.phn-hero__ill .phn-ill { inline-size: 100%; max-width: 430px !important; }

.phn-hero__title {
  margin-top: var(--phn-space-4);
  font-size: clamp(2.5rem, 1.4rem + 3.1vw, 3.875rem);
  line-height: 1.3; letter-spacing: 0.04em;
  color: var(--phn-deep);
}
/* 見出しを手書きの画像にしたときの大きさ（文字のままでも崩れないよう併記） */
.phn-hero__title .phn-hero__copy { inline-size: min(100%, 760px); block-size: auto; }
.phn-hero__line { display: block; }
.phn-hero__line + .phn-hero__line { margin-top: 0.1em; }
.phn-hero__accent { color: var(--phn-sky-ink); }
.phn-hero__body { margin-top: var(--phn-head-gap); max-width: 34em; font-size: var(--phn-text-md); color: var(--phn-ink); }
.phn-hero__actions { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }


@media (max-width: 899px) {
  .phn-hero { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) clamp(3rem, 2.5rem + 3vw, 4.5rem); }
  .phn-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--phn-space-5); }
  /* スマートフォンでは文章の下・右寄りに置き、本文を圧迫しない */
  .phn-hero__ill { justify-content: flex-end; order: 0; margin-top: calc(var(--phn-space-4) * -1); }
  /* イラストが文章の下に回るため、光の枠も下半分へ移す（外周で alpha 0 のまま）*/
  .phn-hero::before { inset: 58% 0 0 auto; inline-size: min(360px, 92vw); }
  .phn-hero__ill .phn-ill { max-width: min(74%, 280px) !important; }
}
@media (max-width: 899px) {
  .phn-hero__title .phn-hero__copy { inline-size: min(100%, 560px); }
}
@media (max-width: 480px) {
  .phn-hero__title { font-size: 2.125rem; letter-spacing: 0.03em; }
}

/* --- 2. 研究室について（左に文章、右にイラスト。色面は使わない）--------- */
.phn-intro-section { padding-block: var(--phn-section) var(--phn-section-end); }
.phn-intro__wash { inline-size: min(560px, 42vw); block-size: min(560px, 42vw); right: -2%; top: 50%; transform: translateY(-50%); }
.phn-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); align-items: center;
}
.phn-intro__ill { display: flex; justify-content: center; }
.phn-intro__ill .phn-ill { max-width: 280px !important; }
@media (max-width: 899px) {
  .phn-intro { grid-template-columns: minmax(0, 1fr); }
  .phn-intro__wash { inline-size: 300px; block-size: 300px; right: -12%; top: auto; bottom: 0; transform: none; }
  .phn-intro__ill { justify-content: flex-start; }
  .phn-intro__ill .phn-ill { max-width: 200px !important; }
}

/* --- 3. 公衆衛生看護とは＋個人から地域へ広がる ---------------------------- */
.phn-whatis { max-width: 46em; }
.phn-whatis__circle { inline-size: min(620px, 48vw); block-size: min(620px, 48vw); top: 8%; right: -12%; }
.phn-whatis__corner { inline-size: min(240px, 18vw); bottom: clamp(3rem, 6vw, 6rem); right: clamp(2rem, 6vw, 7rem); }

.phn-scope { margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
.phn-scope__title {
  margin: 0 0 var(--phn-space-6);
  font-family: var(--phn-font-head); font-size: var(--phn-h4); font-weight: 700; color: var(--phn-green-ink);
}

/* 個人 → 家族 → 組織 → 地区 → 社会。円が段々と大きくなり、点線でつながる。
   円は下端で揃えるので、右へ進むほど上に伸びて「広がり」が見える。 */
.phn-scope__list {
  --phn-scope-max: clamp(152px, 13vw, 228px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: var(--phn-scope-max) auto auto auto;
  column-gap: clamp(0.5rem, 1.2vw, 1.5rem);
  row-gap: var(--phn-space-2);
}
/* 円の下の方をつらぬく点線。円の裏を通るので、すき間だけに見える */
.phn-scope__list::before {
  content: "";
  position: absolute; z-index: 0;
  left: 4%; right: 4%;
  top: calc(var(--phn-scope-max) - 2.5rem);
  border-top: 2px dotted var(--phn-sky-soft);
}
.phn-scope__item {
  position: relative; z-index: 1;
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--phn-space-2);
  justify-items: center; text-align: center;
}
.phn-scope__circle {
  align-self: end;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--phn-scope-size); block-size: var(--phn-scope-size);
  border-radius: 50%;
  transition: transform var(--phn-duration) var(--phn-ease);
}
.phn-scope__circle .phn-scope__icon { inline-size: 62%; block-size: auto; }
.phn-scope__circle .phn-ill { inline-size: 84%; max-width: 100% !important; }
.phn-scope__item--1 { --phn-scope-size: clamp(88px, 7vw, 116px); }
.phn-scope__item--2 { --phn-scope-size: clamp(104px, 8.5vw, 144px); }
.phn-scope__item--3 { --phn-scope-size: clamp(120px, 10vw, 172px); }
.phn-scope__item--4 { --phn-scope-size: clamp(136px, 11.5vw, 200px); }
.phn-scope__item--5 { --phn-scope-size: var(--phn-scope-max); }
/* 同系色の濃淡だけで段階を表す */
.phn-scope__item--1 .phn-scope__circle { background: #F4FAF1; }
.phn-scope__item--2 .phn-scope__circle { background: #EAF6E3; }
.phn-scope__item--3 .phn-scope__circle { background: #E0F1D6; }
.phn-scope__item--4 .phn-scope__circle { background: #D5ECC8; }
.phn-scope__item--5 .phn-scope__circle { background: #C9E7BA; }

.phn-scope__en { align-self: start; font-family: var(--phn-font-en); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phn-sky-ink); margin-top: var(--phn-space-3); }
.phn-scope__label { align-self: start; font-family: var(--phn-font-head); font-size: var(--phn-text-sm); font-weight: 700; color: var(--phn-deep); line-height: 1.5; line-break: strict; }
.phn-scope__desc { align-self: start; max-width: 13em; font-size: var(--phn-text-xs); line-height: 1.8; color: var(--phn-ink-muted); }

.phn-scope__span {
  display: inline-block; margin: var(--phn-space-6) 0 0;
  padding: 0.6em 1.8em; border-radius: var(--phn-radius-pill);
  background: var(--phn-green-ink); color: #fff;
  font-family: var(--phn-font-head); font-size: var(--phn-text-sm); font-weight: 700; letter-spacing: 0.08em;
}

/* subgrid が使えない環境では、行の高さ揃えをあきらめて縦積みにする */
@supports not (grid-template-rows: subgrid) {
  .phn-scope__list { grid-template-rows: none; align-items: end; }
  .phn-scope__item { grid-row: auto; display: flex; flex-direction: column; align-items: center; gap: var(--phn-space-2); }
  .phn-scope__list::before { display: none; }
}

/* スマートフォンでは縦に並べ、左の縦線で「広がり」を示す */
@media (max-width: 899px) {
  .phn-scope__list {
    --phn-scope-col: 104px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--phn-space-5);
  }
  .phn-scope__list::before {
    inset: 0 auto 0 calc(var(--phn-scope-col) / 2 - 1px);
    top: 1.5rem; bottom: 1.5rem; right: auto;
    inline-size: 0; border-top: 0; border-left: 2px dotted var(--phn-sky-soft);
  }
  .phn-scope__item {
    grid-row: auto; grid-template-rows: none;
    grid-template-columns: var(--phn-scope-col) minmax(0, 1fr);
    column-gap: var(--phn-space-4); row-gap: 0.15rem;
    justify-items: start; text-align: left; align-items: center;
  }
  .phn-scope__circle { grid-row: 1 / 4; align-self: center; justify-self: center; }
  .phn-scope__en, .phn-scope__label, .phn-scope__desc { grid-column: 2; align-self: center; margin-top: 0; }
  .phn-scope__desc { max-width: none; }
  .phn-scope__item--1 { --phn-scope-size: 58px; }
  .phn-scope__item--2 { --phn-scope-size: 68px; }
  .phn-scope__item--3 { --phn-scope-size: 78px; }
  .phn-scope__item--4 { --phn-scope-size: 90px; }
  .phn-scope__item--5 { --phn-scope-size: 102px; }
}

/* --- 4. 研究室の特徴（4 列。白いカードで統一し、タイトルを主役にする）----
   4 枚のラベル・タイトル・説明文・下線の位置を揃えるため、行を subgrid で共有する。 */
.phn-features__band { inline-size: min(700px, 54vw); block-size: min(700px, 54vw); right: -16%; bottom: 4%; }
/* 左下の人物イラストはカードより前面に出す（本文には重ならない位置に置く） */
.phn-corner.phn-features__corner { z-index: 3; inline-size: min(168px, 12.5vw); bottom: clamp(0.75rem, 1.5vw, 1.5rem); }

.phn-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(3.5rem, 1fr);
  column-gap: var(--phn-card-gap);
  row-gap: var(--phn-space-4);
}
.phn-features__item {
  position: relative;
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--phn-space-4);
  padding: var(--phn-card-pad);
  padding-bottom: calc(var(--phn-card-pad) + 1.25rem);
  border-radius: var(--phn-radius-lg);
  background: var(--phn-surface);
}
/* subgrid が使えない環境では、これまでどおり縦積みにする */
@supports not (grid-template-rows: subgrid) {
  .phn-features { grid-template-rows: none; }
  .phn-features__item { display: flex; flex-direction: column; grid-row: auto; min-height: 19rem; }
  .phn-features__body { margin-top: auto; }
}
/* POINT 表記は補助ラベル：小さく、薄く、タイトルの直上に */
.phn-features__num {
  display: inline-flex; align-items: center; gap: 0.5em; align-self: start;
  font-family: var(--phn-font-en); font-size: 0.75rem; font-weight: 800; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--phn-green-ink); opacity: .75;
}
.phn-features__num::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--phn-green); }
.phn-features__num small { font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.phn-features__title { align-self: start; font-size: var(--phn-card-title); color: var(--phn-deep); line-height: 1.5; letter-spacing: 0.03em; }
.phn-features__body { align-self: start; margin: 0; color: var(--phn-ink-muted); font-size: var(--phn-card-body); line-height: 1.9; }
.phn-features__item::after {
  content: ""; position: absolute; left: var(--phn-card-pad); right: var(--phn-card-pad); bottom: var(--phn-card-pad);
  block-size: 4px; border-radius: 4px; background: #E4EFDC;
}
@media (max-width: 1099px) {
  .phn-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phn-features__item { min-height: 0; }
}
@media (max-width: 599px) { .phn-features { grid-template-columns: minmax(0, 1fr); } }

/* --- 5. 研究テーマ（3 件のカード）--------------------------------------- */
.phn-section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--phn-space-6); }
.phn-section__head-ill { flex: 0 0 180px; inline-size: 180px; }
.phn-section__head-ill .phn-ill { inline-size: 100%; max-width: 180px !important; }
/* 4 枚。幅・高さ・余白・文字サイズはすべて共通 */
.phn-research { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--phn-card-gap); align-items: stretch; }
.phn-research__item { display: flex; flex-direction: column; padding: var(--phn-card-pad); background: var(--phn-surface) !important; }
.phn-research__item .phn-card__title { font-size: var(--phn-card-title); line-height: 1.5; letter-spacing: 0.03em; }
.phn-research__circle { inline-size: min(560px, 44vw); block-size: min(560px, 44vw); bottom: 5%; left: -16%; }
.phn-research__item .phn-research__icon { inline-size: 56px; block-size: 56px; margin-bottom: var(--phn-space-5); }
.phn-research__item .phn-card__title { margin-bottom: var(--phn-space-4); }
.phn-research__owner {
  display: inline-flex; align-items: center; gap: 0.45em; margin: 0;
  font-size: var(--phn-card-body); font-weight: 700; color: var(--phn-ink-muted); letter-spacing: 0.04em;
}
.phn-research__owner svg { inline-size: 1em; block-size: 1em; flex: none; }
.phn-research__item .phn-card__foot { margin-top: auto; padding-top: var(--phn-space-6); }
@media (max-width: 1279px) { .phn-research { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .phn-research { grid-template-columns: minmax(0, 1fr); } .phn-research__item { max-width: 640px; } }
@media (max-width: 899px) { .phn-section__head--row { flex-direction: column; align-items: flex-start; } .phn-section__head-ill { flex-basis: 140px; inline-size: 140px; } }

/* --- 6. 教員（写真に名前ラベルを少し重ねる）------------------------------ */
.phn-members__blob { inline-size: min(600px, 46vw); block-size: min(600px, 46vw); right: -12%; bottom: 5%; }
.phn-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.7fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }

.phn-person { position: relative; display: block; }
/* 写真：やわらかい楕円。写真がない間は若葉の印が入る */
.phn-person__photo {
  position: relative; margin: 0 0 0 auto;
  inline-size: min(100%, 230px); aspect-ratio: 1;
  margin-inline-start: clamp(0.75rem, 2vw, 2rem);
  border-radius: 52% 48% 46% 54% / 50% 44% 56% 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--phn-green-pale);
}
.phn-person:nth-child(2) .phn-person__photo { border-radius: 46% 54% 52% 48% / 54% 48% 52% 46%; }
.phn-person:nth-child(3) .phn-person__photo { border-radius: 50% 50% 46% 54% / 46% 54% 46% 54%; }
.phn-person__photo .phn-ill {
  inline-size: 100% !important; block-size: 100%; max-width: none !important;
  object-fit: cover; object-position: 50% 30%;
}
/* 写真が置かれるまでの仮表示（若葉の印）は小さく中央に置く */
.phn-person__photo .phn-ill--mark { inline-size: 44% !important; block-size: auto; opacity: .9; }
/* 名前ラベル：写真の左下に少しだけ重ねる。枠線は使わず、ごく薄い影だけ */
.phn-person__label {
  position: relative; z-index: 2;
  display: inline-block;
  margin-top: -3.25rem; margin-inline-end: clamp(1rem, 3vw, 3rem);
  padding: var(--phn-space-4) var(--phn-space-5);
  border-radius: var(--phn-radius-md);
  background: var(--phn-surface);
  box-shadow: 0 10px 28px rgba(47, 79, 62, 0.07);
}
.phn-person__role {
  display: block; margin-bottom: 0.15rem;
  font-family: var(--phn-font-en); font-size: var(--phn-text-xs); font-weight: 800;
  letter-spacing: 0.1em; color: var(--phn-green-ink);
}
.phn-person__name { font-size: var(--phn-card-title); color: var(--phn-deep); line-height: 1.4; }
.phn-person__en { margin: 0.15rem 0 0; font-family: var(--phn-font-en); font-size: var(--phn-text-xs); font-weight: 700; letter-spacing: 0.04em; color: var(--phn-ink-muted); }

/* 丘のイラストは名前カードの下端より少し低い位置に置き、地面のように見せる */
.phn-people__ill { display: flex; justify-content: flex-end; align-self: end; transform: translateY(1.75rem); }
/* 横長のイラストなので、他の枠より少しだけ広く取る（研究テーマにあったときの約 7 割）*/
.phn-people__ill .phn-ill { max-width: 192px !important; }

@media (max-width: 899px) {
  .phn-people { grid-template-columns: minmax(0, 1fr); gap: var(--phn-space-8); }
  .phn-person__photo { inline-size: min(60%, 200px); margin-inline-start: clamp(0.5rem, 3vw, 1.5rem); }
  .phn-person__label { margin-top: -2.75rem; margin-inline-start: 0; }
  .phn-people__ill { justify-content: flex-start; transform: none; }
  .phn-people__ill .phn-ill { max-width: 148px !important; }
}
@media (max-width: 420px) { .phn-person__photo { inline-size: 72%; } }

/* --- 7. 進学（大きな 1 枚のカード）------------------------------------- */
.phn-admission__wash { inline-size: min(680px, 52vw); block-size: min(680px, 52vw); left: -16%; top: 4%; }
.phn-admission {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
  gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center;
  padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) clamp(2rem, 1.5rem + 2.5vw, 4rem);
}
.phn-admission__quote {
  margin: var(--phn-space-5) 0 var(--phn-space-6);
  font-family: var(--phn-font-head); font-size: var(--phn-text-lg); font-weight: 700; line-height: 1.9;
  color: var(--phn-deep);
}
.phn-admission__corner { bottom: 0.75rem; left: clamp(1rem, 3vw, 3rem); }
.phn-admission__steps { margin-top: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); }
.phn-admission__ill { display: flex; justify-content: center; }
.phn-admission__ill .phn-ill { max-width: 280px !important; }
@media (max-width: 899px) {
  .phn-admission { grid-template-columns: minmax(0, 1fr); }
  .phn-admission__ill { justify-content: flex-start; }
  .phn-admission__ill .phn-ill { max-width: 210px !important; }
}

/* --- 8. お知らせ（見出し列＋一覧列）------------------------------------- */
.phn-news { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.phn-news__head { position: sticky; top: calc(var(--phn-header-h) + 2rem); }
.phn-news__ill { margin-top: var(--phn-space-6); }
.phn-news__ill .phn-ill { max-width: 150px !important; }
.phn-news__more { margin-top: var(--phn-space-5); }
.phn-news__list { display: grid; gap: 0; border-top: 2px dotted var(--phn-sky-soft); }
.phn-news__item { border-bottom: 2px dotted var(--phn-sky-soft); }
.phn-news__link {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto 1.5rem;
  gap: var(--phn-space-2) var(--phn-space-4);
  align-items: center; padding: var(--phn-space-4);
  min-block-size: 68px; text-decoration: none; color: var(--phn-ink);
  border-radius: var(--phn-radius-md);
  transition: background-color var(--phn-duration) var(--phn-ease), color var(--phn-duration) var(--phn-ease);
}
/* 遷移できることが分かるよう、右端に矢印を置いて hover でわずかに動かす */
.phn-news__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 1.5rem; block-size: 1.5rem; color: var(--phn-green-ink); opacity: .5;
  transition: transform var(--phn-duration) var(--phn-ease), opacity var(--phn-duration) var(--phn-ease);
}
.phn-news__arrow svg { inline-size: 1.1em; block-size: 1.1em; }
.phn-news__link:hover, .phn-news__link:focus-visible { color: var(--phn-green-ink); background: var(--phn-green-pale); }
.phn-news__link:hover .phn-news__arrow, .phn-news__link:focus-visible .phn-news__arrow { transform: translateX(4px); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .phn-news__link:hover .phn-news__arrow { transform: none !important; } }
.phn-news__list { border-top-color: #DDEBD4; }
.phn-news__item { border-bottom-color: #DDEBD4; }
.phn-news__link:hover .phn-news__text { text-decoration: underline; text-underline-offset: 0.3em; }
.phn-news__date { font-family: var(--phn-font-en); font-size: var(--phn-text-sm); font-weight: 800; color: var(--phn-green-ink); letter-spacing: 0.06em; }
.phn-news__text { font-size: var(--phn-text-base); }
@media (max-width: 899px) {
  .phn-news { grid-template-columns: minmax(0, 1fr); }
  .phn-news__head { position: static; }
  .phn-news__ill { display: none; }
}
@media (max-width: 640px) {
  .phn-news__link { grid-template-columns: minmax(0, 1fr) auto 1.25rem; padding: var(--phn-space-4) var(--phn-space-3); }
  .phn-news__date { grid-column: 1 / -1; }
}

/* --- 9. アクセス・お問い合わせ ------------------------------------------ */
/* イラストを外し、文章とボタンだけを左に置く 1 カラム。
   行長が伸びすぎないよう、ブロック全体に上限をつける。 */
.phn-contact__text { max-width: 46em; }
.phn-contact__circle { inline-size: min(620px, 48vw); block-size: min(620px, 48vw); top: 4%; right: -14%; }

/* --- 装飾イラスト（家並み・丘・木・自転車：各 1 回、位置を散らす）----------
   本文より背面（z-index 0）に置き、1200px 未満では表示しない。 */
.phn-deco { position: absolute; z-index: 0; pointer-events: none; }
.phn-hero .phn-deco { z-index: 1; }
.phn-deco .phn-ill { max-width: 100% !important; }
.phn-deco--houses { right: clamp(2rem, 6vw, 6rem); bottom: clamp(1rem, 3vw, 2.5rem); inline-size: min(210px, 15vw); z-index: 1; }
.phn-deco--trees  { left: 61%; bottom: 0.25rem; inline-size: min(170px, 12vw); }
.phn-deco--bike   { right: clamp(2rem, 6vw, 6rem); bottom: clamp(1.25rem, 3vw, 2.5rem); inline-size: min(210px, 15vw); }
@media (max-width: 1199px) { .phn-deco { display: none; } }

/* --- スマートフォン（2026-09-26）----------------------------------------- */
@media (max-width: 767px) {
  /* トップのメッセージは 30px（ページタイトルと同じ大きさ） */
  .phn-hero__title { font-size: var(--phn-h1); letter-spacing: 0.03em; }
  /* 進学の大きなカードも、内側余白は他のカードと同じ 24px */
  .phn-admission { padding: var(--phn-card-pad); }
  /* 1 カラムになったグリッドの子要素が、内容の幅で広がらないようにする */
  .phn-hero__inner, .phn-intro__text, .phn-admission__text, .phn-news__body,
  .phn-features__item, .phn-research__item, .phn-person { min-width: 0; }
}

/* --- スマートフォン：トップページの再構成（2026-09-26 第 2 回）------------
   ボタンの横並び・POINT の下線・研究テーマ・教員 2 列・お知らせの順番。
   すべて 767px 以下だけに効く。PC の値は上の各節のまま。 */
@media (max-width: 767px) {
  /* 1. ファーストビューと進学カードの 2 つのボタンは 1 行に横並び（均等幅・間隔 8px） */
  .phn-hero__actions,
  .phn-admission .phn-btn-row {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem;
  }
  .phn-hero__actions .phn-btn,
  .phn-admission .phn-btn-row .phn-btn {
    min-height: 48px; padding: 0.5em 0.5em; gap: 0.3em;
    font-size: 0.8125rem; letter-spacing: 0.02em; white-space: nowrap;
  }
  /* 「進学を考えている方へ」は 360px 幅では矢印を入れると収まらないため、ファーストビューだけ矢印を省く */
  .phn-hero__actions .phn-btn__arrow { display: none; }

  /* 2. 研究室の特徴：カード下部の緑の短い線は出さず、その分の余白も戻す */
  .phn-features { grid-template-rows: none; row-gap: 0.75rem; }
  .phn-features__item { padding: 1.25rem 1.5rem; row-gap: 0.5rem; }
  .phn-features__item::after { display: none; }

  /* 3. 研究テーマ：イラストは出さない。カードは題名と担当だけの軽いものにする */
  .phn-section__head--row .phn-section__head-ill { display: none; }
  .phn-section__head--row { gap: 0; }
  .phn-research { gap: 0.75rem; }
  .phn-research__item {
    max-width: none; min-height: 0;
    /* 右は山形（chevron）の分だけ広めに空ける */
    padding: 1.125rem 2.25rem 1.125rem 1.25rem;
  }
  .phn-research__item .phn-card__title { margin-bottom: 0.4rem; }

  /* 4. 「詳しく見る」は出さない。リンクがカード全体を覆い、右端に小さな山形だけを置く */
  .phn-research__item .phn-card__foot {
    position: absolute; inset: 0; margin: 0; padding: 0;
    min-height: 0; font-size: 0; line-height: 0; color: transparent;
    border-radius: inherit;
  }
  .phn-research__item .phn-card__foot .phn-textlink__circle { display: none; }
  .phn-research__item .phn-card__foot::before {
    content: ""; position: absolute; right: 1.1rem; top: 50%;
    inline-size: 9px; block-size: 9px;
    border-top: 2px solid #9CC48F; border-right: 2px solid #9CC48F;
    transform: translateY(-50%) rotate(45deg);
  }
  /* タップ中は背景をわずかに変える。PC の hover の浮き上がりは使わない */
  .phn-research__item:active { background: var(--phn-green-pale) !important; }
  .phn-card--link:hover, .phn-card--link:focus-within { transform: none; box-shadow: 0 2px 12px rgba(47, 79, 62, 0.04); }

  /* 5. 教員：2 列。教授／准教授、助教／丘のイラスト。写真と氏名はセルの中央 */
  .phn-members__blob { display: none; }
  .phn-people {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 0.75rem; align-items: start;
  }
  .phn-person { text-align: center; }
  .phn-person__photo { inline-size: min(100%, 124px); margin: 0 auto; }
  .phn-person__label {
    display: block; margin: -0.9rem auto 0; margin-inline-end: auto;
    padding: 0.55rem 0.4rem 0.6rem; max-inline-size: 150px;
  }
  .phn-person__role { font-size: 0.6875rem; }
  .phn-person__name { font-size: 1rem; }
  .phn-person__en { font-size: 0.6875rem; }
  .phn-people__ill { justify-content: center; align-self: center; transform: none; }
  .phn-people__ill .phn-ill { max-width: 124px !important; opacity: 0.9; }

  /* 6. お知らせ：見出し → 3 件 → 「すべて見る」の順。見出しブロックを展開して並べ替える */
  .phn-news__head { display: contents; }
  .phn-news__body { order: 2; }
  .phn-news .phn-heading { margin-bottom: 0.75rem; }
  .phn-news__more { order: 3; margin-top: 1.25rem; text-align: center; }
  .phn-news__more .phn-textlink {
    min-height: 44px; padding: 0 1.25rem;
    border: 2px solid var(--phn-green-ink); border-radius: var(--phn-radius-pill);
    font-size: 0.8125rem; letter-spacing: 0.04em;
  }
  .phn-news__more .phn-textlink__circle { display: none; }
  .phn-news__link { min-block-size: 0; padding: 0.75rem 0.5rem; gap: 0.25rem 0.75rem; }
}

/* --- スマートフォン：トップページの追加修正（2026-09-26 第 3 回）------------
   ファーストビューのボタン削除とイラストの中央寄せ、「広がり」の図の非表示、
   研究室の特徴のカード高さの統一、丘と進学イラストの位置。すべて 767px 以下だけ。 */
@media (max-width: 767px) {
  /* 1. ファーストビューの 2 つのボタンは出さない（余白ごと消える。下層ページの同名ボタンは対象外） */
  .phn-hero__actions { display: none; }

  /* 2. 人物イラストは通常フローのまま中央に。899px の負の margin（ボタンに寄せる指定）は使わない。
        画像の透明余白は左 3.0%・右 2.1% とほぼ対称なので、枠を中央に置けば人物群も中央に見える */
  .phn-hero__ill { justify-content: center; margin-top: var(--phn-space-5); }
  .phn-hero { padding-bottom: var(--phn-space-6); }
  /* 光もイラストの後ろ（中央）へ */
  .phn-hero::before { inset: 58% auto 0 50%; transform: translateX(-50%); }

  /* 3. 「働きかける対象は…」の文言と図は、トップページでは出さない（研究室についてのページでは表示する）。
        直後の「詳しく見る」導線の上の余白（テンプレートのインライン指定 3rem）を導入文に続く 1.5rem に詰める */
  .home .phn-scope { display: none; }
  .home .phn-scope + p { margin-top: var(--phn-space-5) !important; }

  /* 4. 研究室の特徴：4 枚を同じ高さにそろえる。1 列では subgrid で行を共有できないため、
        行の高さを 1fr にして最も長いカードにそろえ、内側の余白と行間を詰めて全体を低く保つ */
  .phn-features { grid-auto-rows: 1fr; }
  .phn-features__item {
    display: flex; flex-direction: column; grid-row: auto;
    gap: 0.4rem; padding: 1.125rem 1.25rem; min-height: 0;
  }
  .phn-features__body { line-height: 1.7; }

  /* 5. 丘のイラストは 2 段目右のまま、セルの下端（助教の名札の下端）にそろえる。
        画像の下 16% は透明なので、その分だけ下げて見た目の下端を合わせる */
  .phn-people__ill { align-self: end; }
  /* transform は外側の .phn-reveal.is-visible（transform: none）に上書きされるため、画像側に付ける */
  .phn-people__ill .phn-ill { transform: translateY(15%); }

  /* 6. 進学カードの人物イラストは右寄せ（画像に透明余白はない） */
  .phn-admission__ill { justify-content: flex-end; }
}

/* --- スマートフォン：リンクとボタンの整理（2026-09-26 第 4 回）--------------
   リンク文言の短縮、単独ボタンの中央寄せ、一覧ボタンの大きさの統一、
   進学カードのイラスト、特徴セクションの緑の光。
   すべて 767px 以下だけに効く。PC の文言・位置・大きさは変えない。 */
@media (max-width: 767px) {
  /* 1. 「○○について」の前置きは表示しない（読み上げ用の名前は a の aria-label に持たせている）*/
  .phn-hide-sp { display: none; }

  /* 2. 「詳しく見る」の見た目をそろえる。
        丸い水色の面は文字より目立つため、文字色の小さな矢印にして間隔も詰める */
  .phn-textlink { gap: 0.4em; font-size: 0.9375rem; }
  .phn-textlink__circle {
    inline-size: 1.25em; block-size: 1.25em;
    background: transparent; color: var(--phn-green-ink);
  }
  .phn-textlink__circle svg { inline-size: 100%; block-size: 100%; }
  .phn-textlink:hover .phn-textlink__circle,
  .phn-textlink:active .phn-textlink__circle { background: transparent; transform: none; }

  /* 3. 単独で置かれたボタンは中央に。横並びの 2 つはグループごと中央に */
  .phn-btn-row { justify-content: center; }
  /* 段落を flex にすると、行の高さ（行間 1.8 分）が余白として残らず、
     上下の間隔が margin の値そのままになる */
  .phn-section p:has(> .phn-btn) { display: flex; justify-content: center; }

  /* 4. 一覧へ移動するボタンは 1 種類の大きさにそろえる。
        「お知らせをすべて見る」だけはテキストリンクなので、同じ見た目に寄せる */
  .phn-btn--list,
  .phn-news__more .phn-textlink {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
    min-height: 40px; padding: 0.5rem 1.125rem;
    border: 2px solid var(--phn-green-ink); border-radius: var(--phn-radius-pill);
    background: transparent; color: var(--phn-green-ink);
    font-family: var(--phn-font-head); font-size: 0.8125rem; font-weight: 500;
    letter-spacing: 0.04em; line-height: 1.4; text-decoration: none;
  }
  /* 見た目は 40px のまま、指で押せる範囲だけ 44px に広げる */
  .phn-btn--list::after,
  .phn-news__more .phn-textlink::after { content: ""; position: absolute; inset: -2px 0; }
  .phn-btn--list .phn-btn__arrow,
  .phn-news__more .phn-textlink__circle {
    display: inline-flex; inline-size: 1.15em; block-size: 1.15em;
    background: transparent; color: inherit; flex: none;
  }
  .phn-btn--list:hover, .phn-btn--list:active,
  .phn-news__more .phn-textlink:hover, .phn-news__more .phn-textlink:active {
    background: var(--phn-green-ink); color: #fff; transform: none;
  }

  /* 5. セクション末尾のボタンの余白をそろえる（本文→ボタン 22px、ボタン→次のセクション 52px）。
        テンプレート側に style="margin-top:3rem" が直接書かれているため !important で上書きする */
  .phn-section .phn-container > p:has(> .phn-btn) { margin-top: 1.375rem !important; }
  .phn-section:has(> .phn-container > p > .phn-btn),
  .phn-section:has(.phn-news__more),
  .phn-section:has(> .phn-container > .phn-contact__text) { padding-bottom: 3.25rem; }

  /* 6. 進学カード：見出し → 文章 → ボタン → イラストの順。イラストは中央に、少し小さく */
  .phn-admission { gap: 1.125rem; }
  .phn-admission .phn-btn-row {
    display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.5rem;
  }
  .phn-admission .phn-btn-row .phn-btn {
    flex: 0 1 auto; min-height: 44px; padding: 0.5em 0.75em; gap: 0.3em;
    font-size: 0.8125rem; letter-spacing: 0.02em; white-space: nowrap;
  }
  .phn-admission__ill { justify-content: center; }
  .phn-admission__ill .phn-ill { max-width: 176px !important; }

  /* 7. 研究室の特徴：緑の光が画面の右で切れて帯に見えるため、画面内に収める */
  .phn-features__band { inline-size: 260px; block-size: 260px; right: 0; bottom: 8%; }
}

/* --- 8. Facebook（お知らせの直前）-----------------------------------------
   研究室の雰囲気を伝える補助の節。主役はあくまで本文なので、
   文章を左、Facebook の枠を右に置き、枠はサイト側のカードで受ける。 */
.phn-fb {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center;
}
/* PC だけ：枠をプラグインの上限（500px）まで広げ、見出しより少し下から始める。
   上下中央そろえだと枠が見出しより上にはみ出すため、上そろえにして 40px 下げる。 */
@media (min-width: 900px) {
  .phn-fb { align-items: start; }
  .phn-fb__feed { margin-block-start: 2.5rem; }
}
.phn-fb__more { margin-top: var(--phn-space-5); }
/* 枠は白いカードの中に収め、Facebook の画面が急に現れたように見せない */
.phn-fb__feed {
  --phn-fb-height: 420px;   /* site.js がこの値を読んで iframe の高さにする */
  position: relative;
  min-block-size: var(--phn-fb-height);
  border-radius: var(--phn-radius-lg);
  background: var(--phn-surface); box-shadow: 0 2px 12px rgba(47, 79, 62, 0.04);
  overflow: hidden;
}
.phn-fb__frame { inline-size: 100%; block-size: var(--phn-fb-height); margin-inline: auto; display: block; border: 0; }
@media (max-width: 899px) {
  .phn-fb { grid-template-columns: minmax(0, 1fr); gap: var(--phn-space-5); }
  /* 1 カラムでは枠が広がりすぎないよう、プラグインの上限（500px）に合わせる */
  .phn-fb__feed { --phn-fb-height: 400px; max-inline-size: 500px; }
}
@media (max-width: 767px) {
  .phn-fb__feed { --phn-fb-height: 380px; border-radius: var(--phn-radius-md); }
}