@charset "utf-8";
/* ===========================================================
   工業高校ってどんなところ？ — 共通スタイル
   すべてのページ（index.html / 01.html …）から読み込みます。
   ページ固有の指定は、各HTMLの <style> に書いてください。
   =========================================================== */
/* ============================================================
   1. デザイントークン
   広い面積 ＝ 水色・緑・薄い黄色
   ピンク・紫 ＝ アクセント（小面積のみ）
   ============================================================ */
:root{
  /* ベース（広い面積で使う色） */
  --c-teal:      #2ab3c0;
  --c-teal-deep: #12909e;
  --c-green:     #57b45c;
  --c-yellow:    #ffe066;
  --c-yellow-pl: #fff6d0;   /* 薄い黄色 */
  --c-mint:      #e8f6f1;
  --c-cream:     #fdfbf2;

  /* アクセント（小面積のみ） */
  --c-purple:    #8a7dc4;
  --c-pink:      #e4677e;

  --c-navy:      #23406e;   /* 「将来の姿」など、締めに使う紺 */
  --c-head:      #b6e4eb;   /* 章見出しの背景（単色） */
  --c-ink:       #2f3640;
  --c-ink-2:     #6b7280;

  --font-display: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;

  --maxw: 1080px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation: none !important; transition: none !important; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-cream);
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-text-size-adjust: 100%;
}

img{ max-width: 100%; height: auto; display: block; }

.wrap{ width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

a:focus-visible, button:focus-visible{
  outline: 3px solid var(--c-teal-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   2. 画像プレースホルダー
   画像が未配置でもレイアウトが崩れないよう場所を確保します。
   images/ に画像を置けば、自動的に枠が消えて表示されます。
   ============================================================ */
.ph{
  position: relative;
  margin: 0;
  aspect-ratio: var(--ratio, 4 / 3);
  border: 2px dashed #c3d5d2;
  border-radius: 16px;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 10px, transparent 10px 20px), #f2f6f4;
  display: grid; place-items: center; overflow: hidden;
}
.ph::after{
  content: attr(data-file);
  font-size: .74rem; color: #9aa5a2; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .4em .8em; line-height: 1.6; white-space: pre-line;
}
.ph img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ph.is-filled{ border: none; background: none; border-radius: 0; }
.ph.is-filled::after{ content: none; }
.ph.is-empty img{ display: none; }

/* ============================================================
   3. ヒーロー（表紙）
   紙面の並び（タイトル → 人物 → 4つの入口 → キャッチ）を
   そのままWebの縦の流れに置き換えています。
   ============================================================ */
.hero{
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 3rem) 0 0;
  background:
    /* 上半分を水色で広く覆う（面積のいちばん大きい層） */
    radial-gradient(95% 62% at 20% -6%, rgba(42,179,192,.46) 0%, rgba(42,179,192,.17) 52%, transparent 82%),
    radial-gradient(75% 55% at 95% 6%,  rgba(42,179,192,.26) 0%, transparent 74%),
    /* 黄色はアクセント程度に縮小 */
    radial-gradient(34% 24% at 90% 3%,  rgba(255,224,102,.34) 0%, transparent 72%),
    radial-gradient(50% 34% at 8% 88%,  rgba(255,246,208,.55) 0%, transparent 72%),
    radial-gradient(55% 42% at 88% 82%, rgba(87,180,92,.16)  0%, transparent 72%),
    linear-gradient(172deg, #d2ecf4 0%, #e0f3f6 42%, var(--c-mint) 100%);
}

/* タイトル行：バッジとロゴを同じ箱に入れて、重ならないようにします。
   狭い画面 → バッジがロゴの上（右寄せ）
   広い画面 → バッジがロゴの右横                                */
.hero__inner{ display: flex; flex-direction: column; }

/* タイトルロゴ */
.hero__logo{
  --ratio: 2702 / 1560;
  width: 100%;
  max-width: 520px;   /* ← スマホ・タブレットでのタイトルの上限 */
  margin: 0 auto;
}
.hero__lead{
  text-align: center;
  max-width: 36em;
  margin: clamp(.8rem, 2.5vw, 1.4rem) auto 0;
  font-size: clamp(.95rem, 2.5vw, 1.06rem);
}

/* 右上の帯（旧・丸バッジ） */
.badge{
  align-self: flex-end;            /* 右寄せ */
  max-width: 100%;
  margin: 0 0 clamp(.6rem, 2vw, 1.2rem);
  padding: .5em 1.5em;
  border-radius: 999px;
  background: var(--c-teal);
  color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.86rem, 2.6vw, 1.22rem);
  line-height: 1.5;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 6px 18px rgba(20,120,130,.20);
}
.badge b{ color: var(--c-yellow); font-weight: 700; }

/* 学生イラスト */
.hero__students{
  --ratio: 3615 / 2179;
  width: 100%;
  max-width: 620px;   /* ← スマホ・タブレットでの人物の上限 */
  margin: clamp(.8rem, 2.5vw, 1.6rem) auto 0;
}

/* ============================================================
   3-b. 1000px以上：タイトルと人物を横並びにし、
        「タイトル＋人物＋4つの入口」が最初の1画面に収まるようにします。
        高さの単位に svh を使い、ウィンドウの高さに追従させています。
   ============================================================ */
@media (min-width: 1000px){
  .hero{
    min-height: 100vh;
    min-height: 100svh;   /* アドレスバーを除いた実際の表示高さ */
    display: flex;
    flex-direction: column;
  }
  .hero__inner{ flex: 1 1 auto; justify-content: center; }

  /* 左にタイトル・右に人物、その下いっぱいにリード文 */
  .hero__main{
    display: grid;
    grid-template-areas:
      "logo students"
      "lead lead";
    grid-template-columns: 1.12fr minmax(0, .88fr);
    align-items: center;
    column-gap: clamp(1rem, 3vw, 2.5rem);
    row-gap: clamp(.6rem, 2svh, 1.4rem);
  }
  .hero__logo{
    grid-area: logo;
    width: 100%;
    /* 画面が低いときは高さ基準で縮めて、1画面に収めます */
    max-width: min(100%, 78svh);
    margin: 0;
  }
  .hero__students{
    grid-area: students;
    width: auto;
    max-width: 100%;
    height: clamp(190px, 44svh, 430px);
    margin: 0 auto;
  }
  .hero__lead{
    grid-area: lead;
    margin: 0;
    max-width: none;
    text-align: left;
    font-weight: 700;
    font-size: clamp(1rem, 2.4svh, 1.24rem);
  }

  .badge{ font-size: clamp(1rem, 2.5svh, 1.3rem); }
}

/* ============================================================
   4. 4つの入口
   紙面では飾りの楕円ですが、Webではここがメインメニューになります。
   ============================================================ */
.gates-band{
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(232,246,250,.6) 26%, #e9f6f9 100%);
}
.gates{
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.7rem, 2.5vw, 1.5rem);
}
@media (min-width: 700px){ .gates{ grid-template-columns: repeat(4, 1fr); } }

.gate{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem;
  padding: clamp(1rem, 3vw, 1.7rem) .6rem;
  background: #fff;
  border-radius: 50% / 24%;
  border: 2px dashed var(--gate-color);
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--font-display); font-weight: 700; text-align: center;
  aspect-ratio: 4 / 4.6;
  box-shadow: 0 6px 18px rgba(20,80,90,.07);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.gate:hover, .gate:focus-visible{
  transform: translateY(-7px);
  box-shadow: 0 16px 30px rgba(20,80,90,.15);
  background: #f7fbfc;   /* 古いSafari用のフォールバック */
}
@supports (background: color-mix(in srgb, red 7%, white)){
  .gate:hover, .gate:focus-visible{
    background: color-mix(in srgb, var(--gate-color) 7%, #fff);
  }
}
.gate__icon{
  --ratio: 1;
  width: clamp(54px, 13.5vw, 88px);   /* ← 4つ共通の基準サイズ */
  border: none; background: none; border-radius: 0;
  overflow: visible;                  /* 個別の拡大がはみ出せるように */
}
.gate__icon::after{ font-size: .48rem; }
/* 元PNGの縦横比が1つずつ違うため、見た目の大きさを揃える微調整です。
   進学（本）は他より平たく、同じ幅でも小さく見えるので拡大しています。 */
.gate__icon img{ transform: scale(var(--icon-scale, 1)); }
.gate__label{ font-size: clamp(.98rem, 3.2vw, 1.18rem); line-height: 1.45; }
.gate__label b{ color: var(--gate-color); font-weight: 900; }
.gate__label span{
  display: block; width: fit-content; margin-inline: auto;
  background: linear-gradient(transparent 60%, var(--c-yellow) 60% 92%, transparent 92%);
}

.gate--shushoku{ --gate-color: var(--c-teal);   --icon-scale: 1;    }
.gate--shingaku{ --gate-color: var(--c-purple); --icon-scale: 1.18; }
.gate--rekishi { --gate-color: var(--c-green);  --icon-scale: 1.02; }
.gate--shikaku { --gate-color: var(--c-pink);   --icon-scale: 1.02; }

/* キャッチコピー */
.catch{
  margin: clamp(1.8rem, 5vw, 2.8rem) 0 0;
  text-align: center;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.3rem, 5.2vw, 2.15rem);
  line-height: 1.5;
}
.catch span{
  background: linear-gradient(transparent 64%, var(--c-yellow) 64% 92%, transparent 92%);
  padding-inline: .35em;
}

/* ============================================================
   5. 目次（誌面の章立て）
   InDesignの「章タイトル」から自動的に拾った12章です。
   リンク先は中ページを作ってから差し替えます。
   ============================================================ */
.toc{
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: var(--c-mint);
}
.toc__head{ text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.toc__eyebrow{
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: .18em; font-size: .78rem; color: var(--c-teal-deep);
  margin: 0 0 .5em;
}
.toc__title{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.4rem, 4.5vw, 2rem); margin: 0;
}
.toc__list{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .7rem;
}
@media (min-width: 640px){ .toc__list{ grid-template-columns: repeat(2, 1fr); gap: .8rem 1.2rem; } }

.toc__item a{
  display: flex; align-items: center; gap: 1rem;
  background: #fff;
  border-radius: 14px;
  padding: .9rem 1.2rem;
  text-decoration: none; color: var(--c-ink);
  font-family: var(--font-display); font-weight: 700;
  box-shadow: 0 3px 12px rgba(20,80,90,.06);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.toc__item a:hover, .toc__item a:focus-visible{
  transform: translateX(5px);
  box-shadow: 0 8px 20px rgba(20,80,90,.13);
  background: var(--c-yellow-pl);
}
.toc__num{
  flex: none;
  width: 2.1em; height: 2.1em;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-teal);
  color: #fff;
  font-size: .82rem; letter-spacing: .02em;
}
.toc__item:nth-child(4n+2) .toc__num{ background: var(--c-green); }
.toc__item:nth-child(4n+3) .toc__num{ background: var(--c-purple); }
.toc__item:nth-child(4n+4) .toc__num{ background: var(--c-pink); }
.toc__note{
  margin: clamp(1.2rem, 3vw, 2rem) 0 0;
  text-align: center; font-size: .85rem; color: var(--c-ink-2);
}

/* ============================================================
   6. 章セクション（中ページ共通の型）
   ここから下は、どの章でも使い回せる部品です。
   ============================================================ */
.chapter{ padding: clamp(3rem, 8vw, 5.5rem) 0; }
.chapter + .chapter{ border-top: 1px solid #e6ece9; }

.chapter__head{ text-align: center; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.chapter__num{
  display: inline-grid; place-items: center;
  width: 3em; height: 3em; border-radius: 50%;
  background: var(--c-teal); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  margin-bottom: .7em;
}
.chapter__title{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.6rem, 5.5vw, 2.5rem); line-height: 1.35; margin: 0;
}
.chapter__title span{
  background: linear-gradient(transparent 66%, var(--c-yellow) 66% 92%, transparent 92%);
}
.chapter__lead{
  max-width: 40em; margin: clamp(1rem, 3vw, 1.5rem) auto 0;
  text-align: left;
}

/* キャラクターのひとこと（吹き出し） */
.bubble{
  display: flex; align-items: center; gap: 1rem;
  max-width: 44em; margin: clamp(1.5rem, 4vw, 2.2rem) auto 0;
  background: var(--c-yellow-pl);
  border-radius: 18px;
  padding: 1.1rem 1.4rem;
  position: relative;
}
.bubble__avatar{ --ratio: 1; flex: none; width: clamp(52px, 13vw, 76px); border: none; background: none; }
.bubble__avatar::after{ font-size: .45rem; }
.bubble p{ margin: 0; font-size: .95rem; }

/* 小見出し */
.subhead{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.15rem, 4vw, 1.6rem);
  margin: clamp(2.2rem, 6vw, 3.2rem) 0 clamp(1rem, 3vw, 1.5rem);
  display: flex; align-items: center; gap: .7rem;
}
.subhead::before{
  content: ""; flex: none;
  width: .55em; height: 1.5em; border-radius: 999px;
  background: var(--c-green);
}

/* カードのグリッド */
.cards{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1rem, 3vw, 1.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px){ .cards--3{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px){ .cards--2{ grid-template-columns: repeat(2, 1fr); } }

.card{
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(20,80,90,.07);
  display: flex; flex-direction: column;
}
.card > .ph{ border-radius: 0; }
.card > .ph.is-filled img{ object-fit: cover; }
.card__body{ padding: 1.1rem 1.3rem 1.4rem; }
.card__tag{
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .1em; color: #fff;
  background: var(--card-color, var(--c-teal));
  border-radius: 999px; padding: .25em 1em; margin: 0 0 .6em;
}
.card__title{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.05rem, 3.4vw, 1.22rem); line-height: 1.5; margin: 0 0 .4em;
}
.card__text{ margin: 0; font-size: .92rem; }
.card__src{ margin: .8em 0 0; font-size: .8rem; color: var(--c-ink-2); }

.card--green{ --card-color: var(--c-green); }
.card--purple{ --card-color: var(--c-purple); }
.card--pink{ --card-color: var(--c-pink); }

/* 卒業生カード（写真が横長なので横並びに） */
.grad{
  background: var(--c-mint); border-radius: 18px; overflow: hidden;
  display: grid; gap: 0;
}
@media (min-width: 720px){ .grad{ grid-template-columns: 1fr 1fr; align-items: stretch; } }
.grad > .ph{ border-radius: 0; --ratio: 892 / 460; }
.grad > .ph.is-filled img{ object-fit: cover; }
.grad__body{ padding: clamp(1.2rem, 3vw, 1.8rem); align-self: center; }
.grad__role{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem); margin: 0 0 .5em; color: var(--c-teal-deep);
}
.grad__text{ margin: 0; font-size: .93rem; }
.grad__school{
  margin: .9em 0 0; font-size: .82rem; color: var(--c-ink-2);
  display: flex; align-items: baseline; gap: .5em;
}
.grad__school .no{
  flex: none;
  display: inline-grid; place-items: center;
  width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--c-teal-deep); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: .78em; line-height: 1; transform: translateY(.1em);
}

.schools{
  list-style: none; padding: 0;
  margin: clamp(1.2rem, 3vw, 1.8rem) 0 0;
  display: grid; gap: .45rem .5rem; font-size: .85rem; color: var(--c-ink-2);
}
@media (min-width: 640px){ .schools{ grid-template-columns: repeat(2, 1fr); } }
.schools li{ display: flex; align-items: baseline; gap: .5em; }
/* 写真番号。以前は❶と➍で字形の系統が違い大きさがバラついていたため、
   文字ではなくCSSで丸を描いて統一しています。                        */
.schools .no{
  flex: none;
  display: inline-grid; place-items: center;
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  background: var(--c-teal-deep); color: #fff;
  font-family: var(--font-display); font-weight: 700;
  font-size: .78em; line-height: 1;
  transform: translateY(.1em);
}

/* ============================================================
   6-b. 1000px以上：4つの入口とキャッチも画面高さに合わせて詰め、
        「タイトル＋人物＋4つの入口」が最初の1画面に収まるようにします。
        ※ このブロックは、上の .gate などより後ろに置く必要があります
          （後から書いたルールが勝つため）
   ============================================================ */
@media (min-width: 1000px){
  .gates-band{ padding: clamp(.6rem, 2svh, 1.8rem) 0 clamp(.8rem, 2.5svh, 2.2rem); }
  .gate{
    aspect-ratio: auto;
    padding: clamp(.7rem, 2svh, 1.5rem) .6rem;
    gap: clamp(.3rem, 1svh, .6rem);
  }
  .gate__icon{ width: clamp(44px, 7.5svh, 82px); }
  .gate__label{ font-size: clamp(.95rem, 2.2svh, 1.18rem); }
  .catch{
    margin-top: clamp(.6rem, 2.2svh, 1.6rem);
    font-size: clamp(1.15rem, 3.2svh, 2.1rem);
  }
}

/* ============================================================
   7. フッター
   ============================================================ */
.footer{
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  background: #fff;
  text-align: center;
  font-size: .9rem; color: var(--c-ink-2);
  border-top: 6px solid var(--c-yellow-pl);
}
.footer__org{
  font-family: var(--font-display); font-weight: 700;
  color: var(--c-ink); font-size: 1.08rem; margin: 0 0 .4em;
}
.footer__links{
  list-style: none; padding: 0; margin: 1.4em 0 0;
  display: flex; flex-wrap: wrap; gap: .6em 1.8em; justify-content: center;
}
.footer__links a{ color: var(--c-teal-deep); text-decoration: none; border-bottom: 1px solid currentColor; }
.footer__links a:hover{ color: var(--c-ink); }

/* ============================================================
   8. 章ページ共通（01.html / 02.html …）
   ============================================================ */
.page-head{
  padding: clamp(.7rem, 2vw, 1rem) 0 clamp(1.4rem, 3.5vw, 2.2rem);
  background: var(--c-head);   /* 単色。以前のグラデーションの左上の色 */
}
.backlink{
  display: inline-flex; align-items: center; gap: .4em;
  font-size: .86rem; color: var(--c-teal-deep); text-decoration: none;
  font-weight: 700;
}
.backlink:hover{ text-decoration: underline; }

.page-head__inner{ text-align: center; margin-top: clamp(.5rem, 1.6vw, .9rem); }
.page-head__num{
  display: inline-grid; place-items: center;
  width: 3em; height: 3em; border-radius: 50%;
  background: var(--c-teal); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  margin-bottom: .4em;
}
.page-head__title{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.7rem, 6vw, 2.8rem); line-height: 1.3; margin: 0;
}
.page-head__title span{
  background: linear-gradient(transparent 66%, var(--c-yellow) 66% 92%, transparent 92%);
}
.page-head__lead{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  margin: clamp(.4rem, 1.4vw, .7rem) 0 0;
  color: var(--c-teal-deep);
}

/* 章ページの最初のセクションは、見出しとの間隔を詰めます */
.page-head + main > .chapter:first-child,
.page-head + main > .step:first-child{
  padding-top: clamp(1.6rem, 4vw, 2.6rem);
}

/* 前後の章へ */
.pager{
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: clamp(2.5rem, 7vw, 4rem) 0 0;
}
.pager a{
  font-family: var(--font-display); font-weight: 700;
  color: var(--c-teal-deep); text-decoration: none;
  background: #fff; border-radius: 999px;
  padding: .7em 1.4em; box-shadow: 0 4px 14px rgba(20,80,90,.08);
}
.pager a:hover{ text-decoration: underline; }

/* ============================================================
   9. 3人ストーリー（01章・08章で共通）
      なおや・だいき・ゆいの3人を横に並べて見せる部品です。
   ============================================================ */
/* --- 3人の紹介 --- */
.persons{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1.2rem, 3vw, 1.8rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .persons{ grid-template-columns: repeat(3, 1fr); } }

.person{
  background: #fff; border-radius: 22px;
  padding: clamp(1.2rem, 3vw, 1.6rem);
  box-shadow: 0 4px 16px rgba(20,80,90,.07);
  border-top: 6px solid var(--p-color);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.person__say{
  align-self: stretch;
  background: var(--c-yellow-pl);
  border-radius: 999px;
  padding: .5em 1em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.92rem, 3vw, 1.02rem);
  margin: 0 0 1rem;
}
.person__photo{ --ratio: 1; width: min(62%, 190px); border: none; background: none; margin: 0; }
.person__photo.is-filled img{ object-fit: contain; }
.person__name{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.25rem, 4.5vw, 1.5rem);
  margin: .6rem 0 0; color: var(--p-color); line-height: 1.3;
}
.person__name span{
  display: block;
  font-size: .55em; letter-spacing: .18em; color: var(--c-ink-2);
  font-weight: 700;
}
.person__school{ font-size: .82rem; color: var(--c-ink-2); margin: .5em 0 0; }
.person__like{
  margin: 1rem 0 0; align-self: stretch;
  border-top: 1px dashed #d8e3e6; padding-top: .9rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.95rem, 3.2vw, 1.05rem);
}
.person__like b{ color: var(--p-color); }

/* --- タイムライン --- */
.step{ padding: clamp(1.1rem, 2.6vw, 1.7rem) 0 0; }
/* ▼ の前後が空きすぎないように、直前のセクションの下余白を打ち消します */
main > .chapter{ padding-bottom: 0; }

.step__title{
  display: flex; align-items: center; justify-content: center;
  gap: .7em; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.3rem, 4.6vw, 1.85rem);
  margin: 0 0 clamp(1.2rem, 3.5vw, 1.8rem);
}
.step__when{
  background: var(--c-teal-deep); color: #fff;
  border-radius: 999px; padding: .15em .9em;
  font-size: .78em;
}
.step__note{
  max-width: 34em;
  margin: clamp(1.4rem, 4vw, 2rem) auto 0;
  background: var(--c-yellow-pl);
  border-radius: 16px; padding: 1rem 1.4rem;
  text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.15rem);
}
.step__note a{ color: var(--c-teal-deep); }

/* ステップ間の矢印 */
.arrow{
  display: block; text-align: center;
  color: var(--c-teal); font-size: 1.5rem; line-height: 1;
  margin: clamp(1rem, 2.4vw, 1.4rem) 0 0;
}

/* --- 3人分の会話カラム --- */
.talks{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1.2rem, 3vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 800px){ .talks{ grid-template-columns: repeat(3, 1fr); } }

.talk{
  background: #fff; border-radius: 20px;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  box-shadow: 0 4px 16px rgba(20,80,90,.07);
}
.talk__head{
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: .8rem; margin-bottom: 1rem;
  border-bottom: 2px solid var(--p-color);
}
.talk__ic{ --ratio: 1; flex: none; width: 44px; border: none; background: none; }
.talk__ic::after{ font-size: .4rem; }
.talk__name{
  font-family: var(--font-display); font-weight: 900;
  color: var(--p-color); font-size: 1.05rem;
}

/* ひとこと（アイコン＋吹き出し） */
.say{ display: flex; gap: .6rem; margin: 0 0 .9rem; align-items: flex-start; }
.say:last-child{ margin-bottom: 0; }
.say__ic{ --ratio: 1; flex: none; width: 40px; border: none; background: none; }
.say__ic::after{ font-size: .4rem; }
.say__body{ min-width: 0; flex: 1; }
.say__who{
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: .72rem; color: var(--c-ink-2); margin-bottom: .2em;
}
.say__text{
  margin: 0; padding: .7em 1em;
  border-radius: 14px;
  background: #f1f5f6;
  font-size: clamp(.9rem, 3vw, .96rem); line-height: 1.75;
}
/* 本人のせりふ＝キャラクターの色 */
.say--self .say__text{
  background: color-mix(in srgb, var(--p-color) 12%, #fff);
}
@supports not (background: color-mix(in srgb, red 12%, white)){
  .say--self .say__text{ background: #eef7f8; }
}
/* 心の声（気持ちが動いた瞬間） */
.say--feel{ justify-content: flex-end; }
.say--feel .say__text{
  background: var(--c-yellow);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(.98rem, 3.4vw, 1.08rem);
}

/* --- 3人の色 --- */
.p--naoya{ --p-color: var(--c-teal-deep); }
.p--daiki{ --p-color: var(--c-green); }
.p--yui  { --p-color: var(--c-purple); }

/* --- 学校名・企業名のリンク --- */
.school-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
.school-link:hover, .school-link:focus-visible{
  color: var(--c-teal-deep);
  border-bottom-color: currentColor;
}
@supports not (color: color-mix(in srgb, red 45%, transparent)){
  .school-link{ border-bottom-color: #b9c6c8; }
}

/* --- カードの学校名を下ぞろえに（09章 課題研究・部活動） ---
   見出しや説明文の行数がカードごとに違っても、学校名の行が
   カードの下端でそろうようにします。 */
.card__body{ display: flex; flex-direction: column; flex: 1 1 auto; }
.card__body .grad__who{ margin-top: auto; }
/* 学校名が2行に折り返しても区切り線の高さがそろうように、
   横並びのときだけ2行分の高さを確保します */
@media (min-width: 640px){
  .cards--3 .card__body .grad__who{ min-height: calc(1.7em * 2 + .9rem);   /* .9rem は上の余白ぶん */ }
}

/* ============================================================
   表紙の4つの入口（就職・進学・歴史・資格）のページ
   4ページで共通の体裁です。ページごとの色は
   .feat--shushoku / --shingaku / --rekishi / --shikaku で切り替えます。
   ============================================================ */
.feat-head{ position: relative; }
.feat-head .page-head__title span{
  background: linear-gradient(transparent 64%, var(--c-yellow) 64% 92%, transparent 92%);
}
.feat-head__lead{
  margin: .7em 0 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem, 3.4vw, 1.2rem); color: var(--c-teal-deep);
}

/* キャラクター（狭い画面では見出しの下、広い画面では左右） */
.feat-mascots{
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(.5rem, 3vw, 1.5rem); margin-top: clamp(.8rem, 2.5vw, 1.2rem);
}
.feat-mascot{
  --ratio: 300 / 374;
  width: clamp(92px, 24vw, 130px);
  border: none; background: none; margin: 0;
}
.feat-mascot.is-filled img{ object-fit: contain; }
@media (min-width: 860px){
  /* キャラクターを置くぶん、見出し帯を高くします。
     min-height でキャラクターの背丈ぶんの高さを確保し、
     「トップにもどる」に重ならないようにしています。 */
  .feat-head{ padding: 1.2rem 0 2rem; }
  .feat-head .wrap{ position: relative; min-height: 195px; }
  .feat-mascots{
    position: absolute; inset: auto 0 -1.2rem 0;
    justify-content: space-between; margin: 0; pointer-events: none;
  }
  /* 「トップにもどる」に重ならないよう、幅ではなく高さで大きさを決めます */
  .feat-mascot{ width: auto; height: clamp(118px, 15vw, 158px); }
}

/* 各節（白いカード） */
.feats{ list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1.2rem, 3.5vw, 1.8rem); }
.feat{
  background: #fff; border-radius: 22px;
  padding: clamp(1.4rem, 4vw, 2.2rem) clamp(1.3rem, 4vw, 2.4rem);
  box-shadow: 0 4px 16px rgba(20,80,90,.07);
  border-top: 6px solid var(--feat-color, var(--c-teal));
}
.feat__title{
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.15rem, 4.2vw, 1.5rem); line-height: 1.5;
  word-break: auto-phrase;          /* 意味の切れ目で折り返します */
  margin: 0 0 .7em; padding-bottom: .5em;
  border-bottom: 2px dashed #dfe9ea;
}
.feat__title em{
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--c-yellow) 62% 94%, transparent 94%);
}
.feat p{ margin: 0; font-size: clamp(.95rem, 3.1vw, 1.02rem); line-height: 1.95; }
.feat p em{
  font-style: normal; font-weight: 700;
  background: linear-gradient(transparent 62%, var(--c-yellow) 62% 94%, transparent 94%);
}
.feat__more{ text-align: right; margin-top: 1.2rem; }
.feat__more a{
  display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  color: #fff; background: var(--feat-color, var(--c-teal));
  border-radius: 999px; padding: .6em 1.6em; text-decoration: none;
}
.feat__more a:hover{ filter: brightness(.92); }

.feat--shushoku{ --feat-color: var(--c-teal); }
.feat--shingaku{ --feat-color: var(--c-purple); }
.feat--rekishi { --feat-color: var(--c-green);  }
.feat--shikaku { --feat-color: var(--c-pink);   }
.feat--shingaku .feat-head__lead{ color: var(--c-purple); }
.feat--rekishi  .feat-head__lead{ color: var(--c-green); }
.feat--shikaku  .feat-head__lead{ color: var(--c-pink); }

/* --- ページが短いときもフッターを最下部に置きます --- */
body{ min-height: 100vh; display: flex; flex-direction: column; }
body > main{ flex: 1 0 auto; }
body > .footer{ flex: none; }