@charset "UTF-8";
/* ============================================
   Feプロ 下層ページ共通スタイル
   assets/css/page-common.css
   ※ 変数・ボタン・CTA・フッターは style.css（全ページ共通）に定義
   ※ トップページは front-page.css 側に同等の部品を持つため非読み込み
   下層ページ（固定ページ・アーカイブ等）で共通利用するレイアウト部品
   ============================================ */

/* ===== 下層共通ベース ===== */
.fp-page {
  font-family: "BIZ UDPGothic", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color: var(--fp-text);
  line-height: 1.8;
}
.fp-container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ===== セクション見出し（トップと同一トンマナ） ===== */
.fp-section-label {
  display: inline-block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
  margin-bottom: 12px;
  font-weight: 700;
}
.fp-section-title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.fp-section-title .accent { color: var(--gold-dark); }
.fp-section-subtitle {
  color: var(--fp-text-sub);
  font-size: 15px;
  margin-bottom: 48px;
  line-height: 1.9;
}
.fp-section-header { text-align: center; margin-bottom: 56px; }
.fp-section-header .fp-section-title,
.fp-section-header .fp-section-label,
.fp-section-header .fp-section-subtitle { text-align: center; }
.fp-section-btn { text-align: center; margin-top: 40px; }

/* ===== ページヒーロー（コンパクト・ネイビー） ===== */
.fp-page-hero {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding: 88px 0 80px;
  --fp-hero-photo: url("../images/hero-baseball.jpg"); /* 差し替え用。各ページで上書き可 */
}
.fp-page-hero::before {
  /* 背景右に敷く写真（高さフィットで捕手の全身を表示）。
     フェードは ::after の紺グラデベールで行うため、ここではマスク・opacityを使わない
     （マスク切り抜きだと画像左端が線として出るため） */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--fp-hero-photo);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}
.fp-page-hero::after {
  /* 写真の上に重ねるベール：左＝濃紺（写真の左端を隠す）→右＝薄紺（写真を出す）。
     ＋右上のゴールドのグロー装飾。グラデなので画面幅が変わっても線が出ない */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 90% 14%, rgba(184,160,99,0.16) 0%, rgba(184,160,99,0) 42%),
    linear-gradient(to right, var(--navy) 0%, var(--navy) 55%, rgba(31,42,68,0.82) 74%, rgba(31,42,68,0.58) 100%);
}
.fp-page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.fp-page-hero__label {
  font-family: "Bebas Neue", sans-serif;
  color: var(--gold);
  letter-spacing: 0.22em;
  font-size: 15px;
  font-weight: 700;
  display: block;
  margin-bottom: 14px;
}
.fp-page-hero__title {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.02em;
  margin: 0 0 18px;
  color: #fff;
}
.fp-page-hero__title .accent { color: var(--gold); }
.fp-page-hero__lead {
  font-size: clamp(14px, 1.5vw, 16px);
  color: rgba(255,255,255,0.82);
  line-height: 2;
  max-width: 720px;
  margin: 0;
}

/* ===== パンくず（ヒーロー直下に薄く） ===== */
.fp-breadcrumb {
  background: var(--fp-bg-sub);
  font-size: 12.5px;
  color: var(--fp-text-mute);
}
.fp-breadcrumb__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 24px;
}
.fp-breadcrumb a { color: var(--fp-text-sub); text-decoration: none; }
.fp-breadcrumb a:hover { color: var(--gold-dark); }
.fp-breadcrumb span { margin: 0 8px; color: var(--gray-mid); }

/* ===== スクロールアニメーション（トップと同一） ===== */
.fp-fadeup { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fp-fadeup.is-visible { opacity: 1; transform: translateY(0); }

/* ===== レスポンシブ ===== */
@media (max-width: 600px) {
  .fp-page-hero { padding: 60px 0 52px; }
  .fp-section-header { margin-bottom: 40px; }
  /* スマホは画面が狭いため、捕手が右の可視域に入る位置に寄せて表示（球審側は切れてよい）。
     PCと同じベール方式。文字が多いぶんベールはやや濃いめにして可読性を確保 */
  .fp-page-hero::before {
    background-position: 42% top;
  }
  .fp-page-hero::after {
    background:
      radial-gradient(circle at 90% 12%, rgba(184,160,99,0.14) 0%, rgba(184,160,99,0) 40%),
      linear-gradient(to right, var(--navy) 0%, var(--navy) 30%, rgba(31,42,68,0.86) 60%, rgba(31,42,68,0.66) 100%);
  }
}