/* ==========================================================================
   Variables / Design Tokens
   ========================================================================== */
:root {
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Noto Serif JP", Georgia, "Times New Roman", serif;

  --font-jakarta: 'Plus Jakarta Sans', sans-serif;
  --font-script: 'Oooh Baby', cursive;
  --font-poppins: 'Poppins', sans-serif;

  --max-w: 1920px;
  --inner-w: 1200px;
  --gutter: 120px;

  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 40px;
  
  --color-accent: #d96b82;
  --color-accent-hover: #c4576e;
  --color-text-main: #333333;
  --color-text-sub: #666666;
  --color-bg-light: #faf2f4;
  --color-border: #f3dcd0;
  --color-border-light: #fde4e8;
  --color-white: #ffffff;
  --clr-white: #FFFFFF;

  --grad-start: #fde4e8;
  --grad-end: #fdebd9;

  --container-max-width: 1040px;
  --container-padding: 24px;
  --clr-navy: #0C1C37;
  --clr-navy-mid: #2c3e50;
  --clr-gold: #d4af37;
  --clr-blue: #2563eb;
  --clr-blue-bg: #eff6ff;
  --clr-blue-dark: #1e40af;
  --clr-gray: #6b7280;
  --clr-gray-light: #e5e7eb;
  --clr-key-1: #d96b82;
  --clr-accent: #d96b82;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-main);
  background-color: var(--color-white);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ==========================================================================
   Layout / Container Component
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  .section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}


/* ========================================
  Base
   ======================================== */
   
/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  max-width: 1920px;
  margin-inline: auto;
  background-color: var(--clr-white);
  color: var(--clr-navy);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .06em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 1. カード全体を縦Flexboxにして高さを引き伸ばす */
.company-courses__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2. カード内部をいっぱいに広げる */
.company-courses__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 3. ボタンを一番下に固定する */
.company-courses__card .p-contact__action {
  margin-top: auto;
  padding-top: 24px;
}

/* タイトルエリアの最小高さを2行分（約3.2em）に固定して揃える */
.company-courses__title {
  min-height: 3.2em;
  display: flex;
  align-items: center; /* 1行のタイトルも上下中央に配置される */
}

/* ========================================
   HERO / TOP Section
   ======================================== */

.hero {
  position: relative;
  background: var(--clr-bg, #FFFFF6);
  overflow: visible; /* カードや影を切らずに下部へ通す */
}

.hero__inner {
  max-width: var(--max-w, 1920px);
  margin-inline: auto;
  position: relative;
}

/* ── 背景画像エリア (PC) ── */
.hero__image {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 520px;
  /* ★ CSSファイルからの相対パス・拡張子（.png / .jpg）を正確に指定してください */
  background-image: url('../images/hero-bg.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

/* ── 上部白グラデーション ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 40px);
  pointer-events: none;
  z-index: 1;
}

/* ── 白タイトルカード (PC) ── */
.hero__badges {
  position: absolute;
  right: 5%;
  bottom: 8%;
  width: 42%;
  max-width: 600px;
  min-width: 320px;
  background-color: #ffffff;
  padding: 40px;
  border-radius: var(--radius-md, 20px);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.12));
  z-index: 2;
}

.hero__badges img {
  width: 100%;
  height: auto;
}

.hero__badges h1 {
  width: 100%;
  margin: 0 auto 20px;
}


/* ========================================
   Responsive (1024px以下 / スマホ・画面幅縮小時)
   ======================================== */

@media (max-width: 1024px) {
  .hero {
    padding-top: 60px; /* 固定ヘッダー分の余白 */
  }

  .hero__inner {
    padding: 0;
  }

  /* 写真を潰さず比率に応じて表示 */
  .hero__image {
    height: 55vw;
    min-height: 280px;
    max-height: 420px;
    background-position: center top;
  }

  /* カードを絶対配置から解除し、下部に余白を持たせて次セクションを押し下げる */
  .hero__badges {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 40px);
    max-width: 640px;
    margin: -60px auto 30px; /* 写真上に60px重ね、下に30pxの空間を作って下のコンテンツを押す */
    padding: 28px 20px;
    border-radius: var(--radius-md, 20px);
  }

  .hero__badges h1 {
    width: 100%;
    margin-bottom: 16px;
  }
}