/* ================================================================
   Variant D : 爽快感（ディープブルー × シアン、モダンSans-serif）
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700;900&family=Sawarabi+Gothic&display=swap');

:root {
  --color-bg:          #f4f7fa;
  --color-bg-sub:      #ffffff;
  --color-bg-header:   #0a2540;
  --color-bg-card:     #ffffff;
  --color-accent:      #00bcd4;
  --color-accent-sub:  #00e5ff;
  --color-accent-deep: #0066cc;
  --color-text-main:   #0a2540;
  --color-text-body:   #1a3550;
  --color-text-muted:  #5a7090;
  --color-text-faint:  #a5b5c5;
  --color-text-on-dark:#ffffff;
}

body {
  font-family: 'Outfit', 'Sawarabi Gothic', 'Hiragino Sans', sans-serif;
  color: var(--color-text-body);
  background-color: var(--color-bg);
  letter-spacing: 0.01em;
}

/* ヘッダー：ダークネイビー + 白文字 + シアンライン */
.site-header {
  background-color: var(--color-bg-header);
  color: #ffffff;
  border-bottom: 2px solid var(--color-accent);
}
.site-header .site-logo { color: var(--color-accent); }

/* フッター：ネイビーで統一 */
.site-footer {
  background-color: var(--color-bg-header);
  color: #ffffff;
}
.footer-links a, .footer-nav__list li a { color: var(--color-accent-sub); text-decoration: none; border-bottom: 1px solid var(--color-accent); }
.footer-copy { color: rgba(255, 255, 255, 0.6); }

/* ボタン：シャープ、ネイビー基調 */
.btn-primary,
.banner__btn {
  background: var(--color-accent);
  color: var(--color-text-main);
  border-radius: 4px;
  border: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__cta { border-radius: 4px; }
.btn-primary:hover,
.banner__btn:hover {
  background: var(--color-accent-deep);
  color: var(--color-text-on-dark);
}

.btn-outline {
  border: 1px solid var(--color-text-main);
  color: var(--color-text-main);
  background: transparent;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.btn-outline:hover {
  background: var(--color-text-main);
  color: var(--color-text-on-dark);
  border-color: var(--color-text-main);
}

/* purpose グラデ：白→シアン→ネイビー→シアン→白 */
.purpose {
  background: linear-gradient(180deg,
    #f4f7fa 0%,
    #b0e8f0 18%,
    #00bcd4 38%,
    #0a2540 55%,
    #0066cc 75%,
    #b0e8f0 90%,
    #f4f7fa 100%);
}
.purpose__heading { color: #ffffff; }

/* motto 縦書き巨大文字 */
.motto__sticky__text {
  color: var(--color-accent);
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
}
.motto { background: var(--color-bg); }

/* banner */
.banner {
  background: linear-gradient(180deg, #00bcd4 0%, #0066cc 50%, #0a2540 100%);
  color: #ffffff;
}

/* products / news 背景 */
.products { background: var(--color-bg); }
.news { background: var(--color-bg-sub); }

/* product-card NEWバッジ */
.product-card__new {
  background: var(--color-accent);
  color: var(--color-bg-header);
  border-radius: 2px;
  font-weight: 700;
}

/* リンク全般 */
a { color: var(--color-accent-deep); }
a:hover { color: var(--color-accent); }

/* 右固定メニュー & 縦書きストリップ */
.side-nav-right {
  background-color: rgba(244, 247, 250, 0.96);
  border: 1px solid var(--color-accent);
}
.fixed-right-strip { background-color: rgba(10, 37, 64, 0.92); }

.num-badge {
  color: var(--color-accent-deep);
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
}

#hero .hero-catch .hero-catch-date {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 0.1em;
}

.section-title,
.banner__heading,
.news__heading span,
.products__heading span,
.campaign__heading span {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ============================================================
   追加：news 下線 / campaign 全体 / mobile-menu / 文字サイズ
   ============================================================ */
.news__heading { border-bottom-color: var(--color-accent); border-bottom-width: 2px; }
.news__tag { background: var(--color-bg-header); color: #ffffff; border-radius: 2px; letter-spacing: 0.05em; }

.campaign {
  background: linear-gradient(180deg,
    #f4f7fa 0%,
    #00bcd4 18%,
    #0066cc 38%,
    #0a2540 60%,
    #00bcd4 82%,
    #b0e8f0 100%);
}
.campaign__heading::after { background: var(--color-accent); height: 2px; width: 100px; }
.campaign__nav {
  border-color: rgba(255,255,255,0.7);
  color: #ffffff;
  border-radius: 4px;
  background: rgba(255,255,255,0.05);
}
.campaign-card { border-radius: 4px; }

.mobile-menu { background-color: rgba(10, 37, 64, 0.98); }
.mobile-menu .mobile-nav-link {
  color: #ffffff;
  border-bottom: 1px solid rgba(0, 188, 212, 0.3);
  letter-spacing: 0.05em;
}
.mobile-menu .mobile-nav-link:hover { color: var(--color-accent); }
.mobile-menu .mobile-nav-link .arrow { color: var(--color-accent); }
.mobile-menu-close { color: var(--color-accent); letter-spacing: 0.1em; }
.mobile-menu .mobile-message { color: rgba(255, 255, 255, 0.7); }
.mobile-menu .mobile-sub a { color: var(--color-accent-sub); }
.mobile-menu .mobile-cta .cta-text { color: #ffffff; }
.mobile-menu .mobile-cta .cta-link { color: var(--color-accent); letter-spacing: 0.08em; }
.mobile-menu-overlay { background-color: rgba(10, 37, 64, 0.7); }
.mobile-menu .news__item-date,
.mobile-menu .news__item-title,
.mobile-menu .news__item-link,
.mobile-menu .news__item-excerpt,
.mobile-menu .news__tag {
  color: rgba(255, 255, 255, 0.85);
}
.mobile-menu .news__item-link {
  color: var(--color-accent-sub);
}
.mobile-menu .news__item { border-bottom-color: rgba(255, 255, 255, 0.15); }

/* フォントサイズ調整（Outfit は欧文中心 → 見出しはやや大きく、letter-spacing で締める） */
.section-title { font-family: 'Outfit', sans-serif; font-size: 28px; font-weight: 700; letter-spacing: 0.05em; }
.news__heading { font-size: 22px; letter-spacing: 0.04em; font-weight: 700; }
.products__heading { font-size: 26px; font-weight: 700; letter-spacing: 0.04em; }
.campaign__heading { font-size: 34px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.purpose__heading {
  font-size: clamp(30px, 4.4vw, 60px);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-family: 'Outfit', 'Sawarabi Gothic', sans-serif;
}
.banner__heading { font-size: clamp(34px, 5.2vw, 60px); font-weight: 900; letter-spacing: -0.01em; }
.banner__sub { font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase; }

/* ホバー上書き */
.news__more a { border: 1px solid var(--color-text-main); color: var(--color-text-main); background: transparent; letter-spacing: 0.08em; }
.news__more a:hover { background: var(--color-text-main); color: var(--color-text-on-dark); border-color: var(--color-text-main); }
.news__list a:hover { color: var(--color-accent); }

/* フッターホバー：ネイビー背景に対して明シアン */
.footer-links a:hover, .footer-nav__list li a:hover { color: var(--color-accent-sub); }

/* products 見出し下線（追記漏れ修正） */
.products__heading span:first-child::after { background: var(--color-accent); }

/* ============================================================
   走り絵感：新セクション7個の具体的なグラデ上書き（D バリアント専用）
   ============================================================ */
.event-st {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 85%, #eef6f9 100%);
}
.highlights-st {
  background: linear-gradient(180deg, #eef6f9 0%, #ffffff 30%, #ffffff 70%, #eef6f9 100%);
}
.classes-st {
  background: linear-gradient(180deg, #eef6f9 0%, #f4f7fa 40%, #f4f7fa 100%);
}
.course-st {
  background: linear-gradient(180deg, #f4f7fa 0%, #ffffff 30%, #ffffff 100%);
}
.gear-st {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #e8eef5 100%);
}
.flow-st {
  background: linear-gradient(180deg, #e8eef5 0%, #f0f4f9 50%, #e8f4f7 100%);
}
.guideline-st {
  background: linear-gradient(180deg, #e8f4f7 0%, #f4f7fa 30%, #ffffff 100%);
}