@charset "UTF-8";
/* ==========================================================================
   top.css — トップページ（index.html）専用スタイル
   ========================================================================== */

/* --------------------------------------------------------------------------
   メインビジュアル
   -------------------------------------------------------------------------- */
/* 40.625vw = 画像（1600×650）の比率。
   ※ aspect-ratio と max-height を併用すると、高さが上限に達したときに
      幅もその比率まで縮み、右側に余白ができてしまいます。
      それを避けるため height を clamp で指定しています。 */
.hero {
  width: 100%;
  height: clamp(220px, 40.625vw, 650px);
}

/* --------------------------------------------------------------------------
   リード文 ＋ 設立バッジ
   -------------------------------------------------------------------------- */
.intro {
  background: var(--pale-blue);
  padding-block: 52px 44px;
}

.intro__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* リード文は1行ずつ <p> に分けて、デザイン案の改行位置を固定しています。
   どの画面幅でも行が折り返さないよう、文字サイズを画面幅に連動させます。

     24px           … デザイン案の文字サイズ（幅に余裕があるとき）
                      ※全体の基準（html の font-size）に左右されないよう px で固定
     3.55vw         … 最長行（24文字）が左右の余白を除いた幅に収まる値
     11px           … これ以上小さくしない下限

   ※上限を変えると、狭い幅で折り返す／広い幅で行間が合わなくなります。
     変更する場合は 320px〜1600px で改行位置を確認してください。 */
.intro__text {
  font-size: clamp(11px, 3.55vw, 24px);
  font-weight: 700;
  line-height: 2.15;   /* デザイン案の行送り 52px ÷ 24px */
  /* デザイン案の文字色 */
  color: var(--blue-deep);
  letter-spacing: .03em;
}

/* --- 設立バッジ（画像） ------------------------------------------------
   assets/img/intro-badge.png（242×241）を表示しています。
   --badge-w … 表示する幅。ここだけ変えれば大きさが変わります。
   掲載をやめる場合は index.html の <p class="intro__badge"> を
   削除してください（このCSSは残しておいても影響ありません）。
   --------------------------------------------------------------------- */
.intro__badge {
  --badge-w: 242px;

  flex-shrink: 0;
  line-height: 0;   /* 画像の下に余白が出ないようにします */
}

.intro__badge img {
  width: var(--badge-w);
  height: auto;
}

/* --------------------------------------------------------------------------
   新着情報
   -------------------------------------------------------------------------- */
.news__list {
  border-top: 1px solid var(--line);
}

.news__list li { border-bottom: 1px solid var(--line); }

/* 日付・カテゴリー・見出しの3列。
   1列目と2列目を auto にして、カテゴリーバッジを日付のすぐ右に置きます
   （em などで固定幅にすると、日付との間に余白ができてしまいます）。 */
.news__list a {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0 10px;
  padding: 18px 4px;
}

.news__list a:hover { opacity: 1; }
.news__list a:hover .news__title { text-decoration: underline; text-underline-offset: 3px; }

.news__date {
  font-size: .82rem;
  color: #5a6570;
  letter-spacing: .02em;
}

/* カテゴリーラベル
   min-width は「お知らせ」（4文字）が収まる幅です。
   これでどのラベルも同じ幅になり、右の見出しの開始位置がそろいます。 */
.news__tag {
  justify-self: start;
  display: inline-block;
  min-width: 6em;
  padding: 2px 10px;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: .08em;
  border-radius: 3px;
}

.news__tag--class { color: var(--tag-class-text); background: var(--tag-class-bg); }
.news__tag--info  { color: var(--tag-info-text);  background: var(--tag-info-bg); }

.news__title {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.7;
  color: #1c5a9c;
}

/* --------------------------------------------------------------------------
   街並みシルエット（装飾帯）
   -------------------------------------------------------------------------- */
/* townscape.png（600×59）は背景が透明です。
   建物のすき間から下の background-color が見えるため、
   上の新着情報セクションと同じ白を敷いています。
   高さは画像の実寸（59px）に合わせ、拡大せず鮮明に表示します。 */
.townscape {
  height: 59px;
  background-color: var(--white);
  /* 帯の下部が教育部門セクションにつながります（横方向に繰り返し） */
  background-image: url("../img/townscape.png");
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 59px;
}

/* --------------------------------------------------------------------------
   教育部門
   -------------------------------------------------------------------------- */
.education {
  background: var(--edu-blue);
  color: var(--white);
  padding-block: 24px 64px;
}

.education__inner {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "head   body"
    "illust btn";
  align-items: start;
  gap: 28px 40px;
}

.education__head { grid-area: head; }

.education__circle {
  display: grid;
  place-content: center;
  width: 190px;
  height: 190px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.education__body {
  grid-area: body;
  /* 濃い青の背景で読みやすいよう、少し大きく・少し太くしています */
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 2.05;
}

.education__body p + p { margin-top: 22px; }

.education__illust {
  grid-area: illust;
  text-align: center;
}

.education__illust img { width: 152px; }

.education__btn {
  grid-area: btn;
  align-self: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
/* リード文（24文字＝約600px）と設立バッジ（242px）が横に並びきらなくなる
   幅で縦積みにします。960px より狭いと横並びでは行が折り返してしまいます。 */
@media (max-width: 960px) {
  .intro__inner { flex-direction: column; align-items: flex-start; }
  .intro__badge { align-self: center; }
}

@media (max-width: 900px) {
  /* 円とイラストを横並びにし、本文とボタンを下に置きます */
  .education__inner {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "head   illust"
      "body   body"
      "btn    btn";
    justify-items: center;
    align-items: center;
    gap: 20px 24px;
  }

  .education__illust { align-self: center; }
  .education__btn    { justify-self: stretch; }
  .education__btn .btn { width: 100%; min-width: 0; }
}

@media (max-width: 640px) {
  .intro { padding-block: 36px 32px; }

  /* 文字が小さくなる幅では行間も詰めます（文字サイズの指定は上部にあります） */
  .intro__text { line-height: 2; }

  /* スマホでは少し小さく表示します */
  .intro__badge { --badge-w: 190px; }

  .education__circle { width: clamp(120px, 38vw, 170px); height: clamp(120px, 38vw, 170px); font-size: clamp(1.05rem, 4.4vw, 1.4rem); }
  .education__illust img { width: clamp(110px, 34vw, 160px); }

  /* スマホでも日付とバッジは横に並べ、見出しだけ2段目に置きます */
  .news__list a {
    grid-template-columns: auto 1fr;
    gap: 6px 10px;
    padding-block: 16px;
  }
  .news__title { grid-column: 1 / -1; }
}