/* =========================
   ヘッダー
========================= */
.l-header {
  position: absolute;
  top: 0;
  z-index: 99;

  width: 100%;
  height: 126px;
}

/* =========================
   レイアウト共通
========================= */
.inner {
  box-sizing: border-box;

  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

/* =========================
   フォント設定
========================= */
body .contents {
  margin-bottom: 3vw;

  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: clamp(14px, 1.6vw, 18px);
  font-feature-settings: "palt" 1;
  font-weight: 400;
  color: #333;
}

/* 見出し・強調 */
.lead-strong,
.future-title {
  padding: 1em 0;

  font-size: 2em;
  font-weight: 700;
}

strong { font-weight: inherit; }
.bold { font-weight: 700; }

/* =========================
   ヒーロー
========================= */
.hero-wrapper {
  position: relative;

  width: 100%;
  overflow: visible;
}

.hero {
  position: relative;
  z-index: 1;

  width: 100%;
  height: 580px;
  background: url('img/hero-bg.jpg') no-repeat center top / cover;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2vw;

  height: 100%;
}

.hero-deco-inline {
  position: absolute;
  top: 0;
  left: 5%;
}

.hero-title-svg {
  position: absolute;
  left: 28%;

  max-width: 30rem;
}

.hero-img-right {
  position: absolute;
  top: 50%;
  right: -80px;
  z-index: 1;

  width: 46%;
  transform: translateY(-50%);
  opacity: 0;

  animation: float-up 2.5s ease-out forwards;
}

@keyframes float-up {
  from {
    transform: translateY(-30%) translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(-30%) translateY(0);
    opacity: 1;
  }
}

/* =========================
   赤背景セクション
========================= */
.hero-red {
  padding: 6em 0;

  text-align: center;
  color: #fff;
  background-color: #e60012;
}

/* =========================
   グレー背景
========================= */
.bg-gray-wrap {
  position: relative;
  z-index: 1;

  margin: 0 3vw;
  padding: 1em 0 3em;

  background-color: #f8f6f6;
  border-radius: 2rem;
}

/* =========================
   カードセクション
========================= */
.card-section {
  max-width: 1200px;
  margin: -9vw auto 0;
  padding: 0 2%;
}

/* =========================
   カードエリア
========================= */
.card-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2vw;

  padding-bottom: 2em;
  border-bottom: 1px solid #D6D6D6;
}

/* =========================
   カード
========================= */
.card {
  padding: 1em;

  text-decoration: none;
  background: transparent;
  border-radius: 0.5em;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card img {
  display: block;
  width: 100%;

  border: 1px solid #000;
  border-radius: 10px;
}

.card .caption {
  display: flex;
  align-items: center;
  gap: 0.3em;

  padding: 0.7em 0;
  font-size:  1.1em;
  font-weight: 500;
  line-height: 1.6;
  color: #111;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.ext-icon {
  font-size: 0.8em;
  transform: translateY(-1px);
}

/* =========================
   noteバナー
========================= */
.note-banner {
  margin-top: 4vw;
  text-align: center;
}

.note-banner img {
  max-width: 88%;
  transition: opacity 0.3s ease;
}

.note-banner a:hover img {
  opacity: 0.7;
}

/* =========================
   テキストセクション
========================= */
.center-text {
  padding: 3em 1em;

  text-align: center;
  font-size: 1.5em;
  line-height: 2.25em;
}

.lead-message,
.future-message {
  padding: 4em 0;

  text-align: center;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 2.25em;
  color: #333;
}

.lead-message .lead-strong {
  font-size: 1.6em;
  line-height: 1.8em;
  letter-spacing: 3px;
  color: #3d3d3c;
}

.future-message {
  position: relative;
  z-index: 1;
  padding: 6em 0 0;

  background: url('img/future-bg.svg') no-repeat bottom center / cover;
}

.future-message .inner {
  padding: 0 0 20vw;
}

.future-title {
  margin-bottom: 0;

  font-size: 2em;
  font-weight: 700;
}

/* =========================
   カラー
========================= */
.color-pink   { color: #e84e87; }
.color-orange { color: #e5a23c; }
.color-green  { color: #4aa77b; }
.color-blue   { color: #5cb3e5; }

/* =========================
   フッター
========================= */
.footer-text-section {
  padding: 3em 0 8em;

  text-align: center;
  background: url('footer-bg.png') no-repeat bottom center / cover;
}

.bg-white {
  padding-bottom: 200px;
  background-color: #fff;
}

/* =========================
   PC / SP 切り替え
========================= */
.pc-only { display: inline; }
.sp-only { display: none; }

/* =========================
   タブレット
========================= */
@media screen and (max-width: 1024px) {
  .card-section {
    margin-top: -7vw;
  }

  .card-area {
    gap: 3vw;
  }

  .card .caption {
    font-size: 1.05em;
  }

  .note-banner img {
    max-width: 70%;
  }
}

/* =========================
   スマホ
========================= */
@media screen and (max-width: 768px) {

  .inner {
    padding: 0 15px;
  }

  body .contents {
    font-size: 4vw;    
      padding-top: 0;
  }

  .hero-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .hero-img-right {
    top: 76%;
    right: -84px;
    width: 65%;
  }

  .hero-deco-inline {
    left: -50%;
  }

  .hero-title-svg {
    position: static;
    z-index: 99;
  }

  .card-section {
    margin-top: 0;
  }

  .card-area {
    grid-template-columns: 1fr;
    gap: 2em;
  }

  .note-banner {
    margin-top: 2.5em;
  }

  .note-banner img {
    max-width: 90%;
  }
  .future-title{
    font-size: 1.5em;
    letter-spacing: 0px;
    line-height: 45px;
    }
  .lead-message,
  .future-message {
    padding: 4em 1em;
    text-align: left;
  }
  .future-message {
    background-size: contain;
}
  .lead-message .lead-strong {
    font-size: 1.5em;
    letter-spacing: 1px;
    line-height: 45px;
  }

  .bg-white {
    padding-bottom: 0;
  }

  .pc-only { display: none; }
  .sp-only { display: inline; }
}