/* ==========================================================
   FlipSilverlining — Custom CSS
   テンプレートCSS（main.css）の後に読み込む上書き専用ファイル
   design-spec.md に基づく変更差分のみを記述
   ========================================================== */

/* ==========================================================
   1. フォント
   index.html の <link> で Google Fonts を読み込み済み
   テンプレートの Roboto / Montserrat / Poppins を上書き
   英字 → Inter、日本語 → Noto Sans JP
   ========================================================== */
:root {
  --default-font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: "Inter", "Noto Sans JP", sans-serif;
  --nav-font: "Inter", "Noto Sans JP", sans-serif;
}

/* ==========================================================
   2. アクセントカラー
   テンプレート既定: #008374（ティール系）
   → 落ち着いたブルー系に変更
   ========================================================== */

/* グローバルカラー */
:root {
  --accent-color: #2c6fbb;
}

/* ナビゲーションカラー */
:root {
  --nav-hover-color: #2c6fbb;
  --nav-dropdown-hover-color: #2c6fbb;
  --nav-dropdown-color: #1a3d5c;
}

/* accent-background（Hero・Footer で使用） */
.accent-background {
  --background-color: #1a3d5c;
  --surface-color: #24568a;
}

/* ==========================================================
   3. 共通ボタン — .btn-get-started
   テンプレートでは .hero 内でしか定義されていないため、
   hero 以外のセクションで使えるベーススタイルを追加
   ========================================================== */
.btn-get-started {
  color: #ffffff;
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 50px;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
}

.btn-get-started:hover {
  background: transparent;
  color: var(--accent-color);
}

/* ==========================================================
   4. Hero セクション — 星の背景画像
   テンプレートの accent-background 単色 → 写真に差し替え
   ========================================================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: url("../img/header-bg.jpg") center center / cover no-repeat;
  position: relative;
}

/* ダークオーバーレイ — 白テキストの可読性を確保 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.hero .container {
  z-index: 2;
}

/* タイトル */
.hero h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* サブタイトル（「AI教育コンサルティング」） */
.hero .hero-subtitle {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.9);
}

/* キャッチコピー */
.hero p {
  font-size: 18px;
}

/* Hero 内ボタンは背景写真に合わせて白半透明に上書き */
.hero .btn-get-started {
  background-color: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.hero .btn-get-started:hover {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

/* モバイル調整 */
@media (max-width: 768px) {
  .hero h2 {
    font-size: 28px;
  }
  .hero .hero-subtitle {
    font-size: 18px;
  }
  .hero p {
    font-size: 16px;
  }
}

/* ==========================================================
   5. Stats セクション — SVG削除後の横並び中央配置
   ========================================================== */
.stats .stats-item {
  text-align: center;
  flex-direction: column;
  align-items: center;
}

.stats .stats-item i {
  margin-right: 0;
  margin-bottom: 10px;
}

/* 数字の中央配置 */
.stats .stats-number {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

/* ==========================================================
   6. Services セクション — アイコン背景円の修正
   テンプレート既定: .icon 48×48, icon i 56px, :before 48×48
   → コンテナを 64×64 に拡大し、円を中央配置
   ========================================================== */
.services .service-item .icon {
  width: 64px;
  height: 64px;
}

.services .service-item .icon:before {
  width: 72px;
  height: 72px;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
}

.services .service-item .icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==========================================================
   7. Books セクション（テンプレートに無い独自セクション）
   ========================================================== */
.books {
  padding: 60px 0;
}

.books .book-item {
  padding: 30px 20px;
}

.books .book-item img {
  max-width: 220px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s;
}

.books .book-item img:hover {
  transform: translateY(-4px);
}

.books .book-item h4 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 10px;
  color: var(--heading-color);
}

.books .book-item p {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
}

.books .btn-get-started {
  font-size: 13px;
  padding: 8px 24px;
}

/* ==========================================================
   7. Contact セクション
   ========================================================== */
.contact .btn-get-started {
  font-size: 16px;
  padding: 14px 40px;
}