/* ========================================
   TOP PAGE - HERO
   ======================================== */

/* ────────────────────────────────────────
   【調整方法】hero-contentの上下の空き間隔
   ────────────────────────────────────────
   
   PC版の調整:
   .hero {
     --hero-padding-top: 360px;    ← ヘッダーからコンテンツまで
     --hero-padding-bottom: 170px; ← コンテンツからIntroまで
   }
   
   タブレット版の調整:
   @media (max-width: 900px) {
     .hero {
       --hero-padding-top: 200px;
       --hero-padding-bottom: 150px;
     }
   }
   
   スマホ版の調整:
   @media (max-width: 600px) {
     .hero {
       --hero-padding-top: 140px;
       --hero-padding-bottom: 150px;
     }
   }
   ──────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #A8D5F2;
  
  /* 調整用CSS変数 */
  --hero-padding-top: 360px;     /* ヘッダーからコンテンツまで */
  --hero-padding-bottom: 170px;   /* コンテンツからIntroまで */
  
  padding-top: var(--hero-padding-top);
  padding-bottom: var(--hero-padding-bottom);
}

/* ── 背景スライド（2層構造）────────────── */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* 空スライダー（奥・ゆっくり）*/
.hero-slide-sky {
  position: absolute;
  top: 88px;
  left: 0;
  height: 200px;
  display: flex;
  animation: heroSlideSkyReverse 120s linear infinite;
}

.hero-slide-sky img {
  width: 1600px; /* 固定幅1600px */
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* 観光地スライダー（手前・速い）*/
.hero-slide-ground {
  position: absolute;
  top: 288px; /* 88px + 200px */
  left: 0;
  height: 530px;
  display: flex;
  animation: heroSlideGroundReverse 32s linear infinite;
}

.hero-slide-ground img {
  width: 1600px; /* 固定幅1600px */
  height: 100%;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
}

/* アニメーション（左から右へ滑らかにループ）*/
@keyframes heroSlideSkyReverse {
  0%   { transform: translateX(-50%); } /* -50% = 2枚分戻った位置からスタート */
  100% { transform: translateX(0); }    /* 0% = 元の位置に戻る → 無限ループ */
}

@keyframes heroSlideGroundReverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* ── 中央コンテンツ ────────────────────── */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 吹き出し（CSSで作成）*/
.hero-speech-bubble {
  background: var(--clr-white);
  padding: 24px 48px;
  border-radius: 20px;
  position: relative;
  margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* 吹き出しの三角 */
.hero-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 18px solid var(--clr-white);
}

.hero-speech-top {
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--clr-text);
  font-weight: 700; /* Bold */
  display: block;
  margin-bottom: 4px;
}

.hero-speech-main {
  font-size: 28px;
  letter-spacing: 0.05em;
  color: var(--clr-primary);
  font-weight: 700;
  display: block;
}

/* ロゴ */
.hero-logo {
  margin-bottom: 24px;
}

.hero-logo-symbol {
  width: 360px; /* PC版サイズ */
  height: auto;
  margin: 0 auto 16px;
}

.hero-logo-type-img {
  width: 380px; /* PC版サイズ */
  height: auto;
  margin: 0 auto;
}

/* CTAボタン */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 32px;
}

/* ── レスポンシブ ────────────────────────── */
@media (max-width: 900px) {
  .hero {
    --hero-padding-top: 200px;
    --hero-padding-bottom: 150px;
  }

  /* 空：150px、ヘッダー72px分下げる */
  .hero-slide-sky {
    top: 72px;
    height: 150px;
  }

  .hero-slide-sky img {
    width: 1200px; /* タブレットは1200px */
  }

  /* 観光地：398px */
  .hero-slide-ground {
    top: 222px; /* 72px + 150px */
    height: 398px;
  }

  .hero-slide-ground img {
    width: 1200px; /* タブレットは1200px */
  }

  .hero-speech-bubble {
    padding: 20px 32px;
  }

  .hero-speech-top {
    font-size: 16px;
  }

  .hero-speech-main {
    font-size: 24px;
  }

  .hero-logo-symbol {
    width: 280px; /* タブレット版サイズ */
  }

  .hero-logo-type-img {
    width: 330px; /* タブレット版サイズ */
  }
}

@media (max-width: 600px) {
  .hero {
    --hero-padding-top: 140px;
    --hero-padding-bottom: 150px;
  }

  .hero-content {
    padding: 0 16px;
  }

  /* 空：100px、ヘッダー68px分下げる */
  .hero-slide-sky {
    top: 68px;
    height: 100px;
  }

  .hero-slide-sky img {
    width: 800px; /* スマホは800px */
  }

  /* 観光地：265px */
  .hero-slide-ground {
    top: 168px; /* 68px + 100px */
    height: 265px;
  }

  .hero-slide-ground img {
    width: 800px; /* スマホは800px */
  }

  .hero-speech-bubble {
    padding: 16px 24px;
    margin-bottom: 24px;
  }

  .hero-speech-top {
    font-size: 14px;
  }

  .hero-speech-main {
    font-size: 20px;
  }

  .hero-logo-symbol {
    width: 230px; /* スマホ版サイズ */
    margin-bottom: 12px;
  }

  .hero-logo-type-img {
    width: 280px; /* スマホ版サイズ */
  }

  .hero-buttons {
    flex-direction: column;
    gap: 16px;
  }

  .hero-buttons .btn {
    width: 100%;
    max-width: 320px;
  }
}