@charset "UTF-8";
/* =================================================
   top.css - トップページ
   実測(XDアートボード座標): キャッチ天y207 / MV y335-920 / ビジョン導入 白
         プロフィール写真 y1344-1777(1200:433) / 活動報告 帯#EFF8F0 y1777-2357
   ================================================= */

/* ---------- キャッチコピー ---------- */
.top-catch {
  width: min(1040px, 100% - var(--content-pad) * 2);
  margin-inline: auto;
  padding: 39px 0 41px; /* 緑罫y168 -> 文字ボックス天y207 / 地y294 -> MV天y335 */
}

.top-catch-text {
  font-size: 60px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--color-primary);
}

/* 「を」のみ50px（デザイン実測値） */
.top-catch-small {
  font-size: 50px;
}

/* ---------- メインビジュアル ---------- */
/* MVは画面幅100%・縦横比1200:585 固定（クライアント指定）。
   上限幅（--hero-max）は掛けない。重ねている文字は、画面幅が変わっても
   写真の中での位置が変わらないよう px ではなく % で置いている
   （1200px時: 左x100 = 8.3333% / 地から145px = 24.7863%） */
.top-mv {
  position: relative;
}

.top-mv-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 585;
  object-fit: cover;
}

/* MV文字組はヘッダーロゴと同じロックアップ（白）
   実測: 「くさふか」Black60 x100 / 「英治」Black30 x349 / ルビ「えいじ」Black20 x349
   　　　肩書のみ x109（9px右にオフセット） */
.top-mv-text {
  position: absolute;
  left: 8.3333%; /* 1200px時 x=100 */
  bottom: 24.7863%; /* 1200px時 地から145px（写真高585） */
  color: var(--color-white);
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.top-mv-role {
  margin-left: 9px; /* 実測 x109 */
  font-size: 25px;
  font-weight: 900;
  line-height: 36px; /* XD実測 */
}

.top-mv-name {
  position: relative;
  margin-top: 4px;
  font-size: 60px;
  font-weight: 900;
  line-height: 87px; /* XD実測 */
}

.top-mv-name-kanji {
  margin-left: 9px; /* 実測 x340 -> x349 */
  font-size: 30px;
  line-height: 1; /* 親の87px行送りを継承して行boxを押し広げないように */
  vertical-align: -3px; /* 「英治」のベースラインは「くさふか」より3px下 */
}

/* ルビ「えいじ」: 実測 x349（=「英治」と左端揃え）/ ベースライン y727（「英治」の34px上） */
.top-mv-ruby {
  position: absolute;
  top: 16px;
  left: 249px;
  font-size: 20px;
  font-weight: 900;
  line-height: 29px;
}

/* ---------- ビジョン導入 ---------- */
.top-vision {
  padding: 76px 20px 87px;
  text-align: center;
}

.top-vision-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 29px;
  color: var(--color-primary);
}

/* 本文はプロフィール導入と違い Bold（XDの実測差） */
.top-vision-text {
  width: min(283px, 100%);
  margin: 25px auto 0;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  line-height: 28px;
  color: var(--color-primary);
}

.top-vision .button {
  margin-top: 37px;
}

/* ---------- プロフィール導入 ---------- */
/* プロフィール導入も画面幅100%・縦横比1200:433 固定（クライアント指定） */
.top-profile {
  position: relative;
}

.top-profile-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 433; /* XD実測 */
  object-fit: cover;
}

/* テキスト塊は写真の天から 32.74%（実測 y1485.8 / 写真 y1344-1777）。上下中央ではない */
.top-profile-body {
  position: absolute;
  z-index: 1; /* ::before の白パネルを写真より前・本文より後ろに置くため */
  top: 32.74%;
  left: 68.75%; /* 1200px時 x=825 */
  width: 283px;
}

/* 半透明白パネルはXDには無い可読性確保のための追加（v0.2.1）。
   文字座標を動かさないよう ::before で外側に敷く */
.top-profile-body::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.85);
}

.top-profile-title {
  font-size: 20px;
  font-weight: 900;
  line-height: 29px;
  color: var(--color-text);
}

.top-profile-text {
  margin-top: 25px;
  font-size: 14px;
  font-weight: 500;
  line-height: 28px;
}

.top-profile .button {
  margin-top: 25px;
}

/* ---------- 活動報告 ---------- */
.top-news {
  padding: 87px 0;
  background: var(--color-bg-tint);
}

/* 見出しと同じテキストオブジェクトの2行目。Black 14px・字間なし */
.top-news-sub {
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 20px;
}

.top-news-sub-news {
  color: var(--color-primary);
}

/* 中黒はテキスト色（青ではない） */
.top-news-sub-dot {
  color: var(--color-text);
}

.top-news-sub-blog {
  color: var(--color-accent);
}

.top-news .post-card-grid {
  margin-top: 30px;
}

.top-news-button {
  margin-top: 30px;
  text-align: center;
}

/* ---------- SP（〜767px）SP版XD実測 ---------- */
@media (max-width: 767px) {
  /* 実測: 文字ボックス天y129.2 / 左端x46 / 地y166.2 -> MV天y182 */
  .top-catch {
    padding: 10px 0 16px 21px;
  }

  .top-catch-text {
    font-size: 26px;
    line-height: 37px;
  }

  /* SPも「を」だけ小さい（実測 26px に対して 22px） */
  .top-catch-small {
    font-size: 22px;
  }

  /* MV写真は390x493（縦長クロップ） */
  .top-mv-photo {
    aspect-ratio: 390 / 493;
  }

  .top-mv-text {
    left: 39.2308%; /* 390px時 x=153 */
    bottom: 3.854%; /* 390px時 地から19px（写真高493） */
  }

  .top-mv-role {
    margin-left: 6px;
    font-size: 17px;
    line-height: 25px;
  }

  .top-mv-name {
    margin-top: 0;
    font-size: 41px;
    line-height: 60px;
  }

  .top-mv-name-kanji {
    margin-left: 8px;
    font-size: 20px;
    vertical-align: -1px;
  }

  .top-mv-ruby {
    top: 11px;
    left: 172px;
    font-size: 13px;
    line-height: 19px;
  }

  .top-profile-photo {
    aspect-ratio: 390 / 292;
  }

  .top-profile-body {
    position: static;
    z-index: auto;
    top: auto;
    left: auto;
    width: auto;
    padding: 40px 25px 41px; /* ボタン地y1569 -> 活動報告帯天y1610 */
    background: none;
  }

  .top-profile-body::before {
    display: none;
  }

  /* 実測: MV地y675 -> 見出しボックス天y729.3 / ボタン地y957.5 -> プロフ写真天y1003 */
  .top-vision {
    padding: 52px 25px 46px;
  }

  .top-vision .button {
    margin-top: 32px;
  }

  .top-vision-text {
    width: auto;
  }

  /* 実測: 帯天y1610 -> 見出しボックス天y1661.8 / ボタン地y2297 -> 帯地y2354 */
  .top-news {
    padding: 52px 0 57px;
  }

  /* SPではプロフィール導入のボタンも中央（実測 x127・幅137・本文地y1501 -> 天y1539） */
  .top-profile .button {
    display: block;
    margin: 38px auto 0;
  }

  /* 実測: 副題地y1710.9 -> カード天y1727 / カード地y2225 -> ボタン天y2267 */
  .top-news .post-card-grid {
    margin-top: 16px;
  }

  .top-news-button {
    margin-top: 42px;
  }
}