@charset "UTF-8";
.swiper-slide {
  /* 表示させる高さの調整 */
  position: relative;
  height: 70vh;
  overflow: hidden;
}
.swiper-slide .main-visual {
  width: 100%;
  height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transform: scale(1);
  transition: transform 9s ease;
}
.swiper-slide-active .main-visual {
  transform: scale(1.2);
}
.swiper-slide-active .hero__title {
  transform: translateX(-50%);
  opacity: 1;
}
.swiper-slide-active .hero__btn {
  transform: translateX(-50%);
  opacity: 1;
}

.hero {
  position: relative;
  overflow: hidden;
}
.hero__title {
  position: absolute;
  top: 30%;
  left: 50%;
  color: #fff;
  text-align: center;
  width: 90vw;
  transform: translate(-50%, 20px);
  transition: opacity 1.2s ease 1.5s, transform 1.2s ease 1.5s;
  z-index: 1;
  opacity: 0;
}
.hero__title h2 {
  font-size: 36px;
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.8);
  line-height: 2em;
}
.hero__btn {
  position: absolute;
  bottom: 30%;
  left: 50%;
  font-size: 16px;
  color: #fff;
  transform: translate(-50%, 20px);
  transition: opacity 1.2s ease 2.5s, transform 1.2s ease 2.5s;
  opacity: 0;
  z-index: 1;
}
.hero__btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
  width: 300px;
  height: 60px;
  border-radius: 30px;
}

.hero__btn .btn-primary {
  background-color: #65BA1E;
}

.hero__btn .btn-secondary {
  background-color: #fbb224;
}

/* ==========================================
   提案1: 文字装飾による強調
   ========================================== */

/* 強調テキスト用のクラス */
.hero__title .highlight-text {
    font-weight: bold;
    color: #65BA1E;
    text-decoration: underline;
    text-decoration-color: #fbb224;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
    text-shadow: none;
}

/* ==========================================
   提案8: ネオン風効果
   ========================================== */

/* ネオン効果用のクラス */
.hero__title .neon-text {
    color: #fff;
    font-weight: bold;
    text-shadow: 
        0 0 5px #65BA1E,
        0 0 10px #65BA1E,
        0 0 15px #65BA1E,
        0 0 20px #65BA1E,
        0 0 35px #65BA1E;
    animation: neonFlicker 3s ease-in-out infinite alternate;
}

@keyframes neonFlicker {
    0%, 100% {
        text-shadow: 
            0 0 5px #65BA1E,
            0 0 10px #65BA1E,
            0 0 15px #65BA1E,
            0 0 20px #65BA1E,
            0 0 35px #65BA1E;
        opacity: 1;
    }
    25% {
        text-shadow: 
            0 0 2px #65BA1E,
            0 0 5px #65BA1E,
            0 0 8px #65BA1E,
            0 0 12px #65BA1E,
            0 0 20px #65BA1E;
        opacity: 0.8;
    }
    50% {
        text-shadow: 
            0 0 8px #65BA1E,
            0 0 15px #65BA1E,
            0 0 20px #65BA1E,
            0 0 25px #65BA1E,
            0 0 40px #65BA1E;
        opacity: 1;
    }
    75% {
        text-shadow: 
            0 0 3px #65BA1E,
            0 0 7px #65BA1E,
            0 0 10px #65BA1E,
            0 0 15px #65BA1E,
            0 0 25px #65BA1E;
        opacity: 0.9;
    }
}

/* ==========================================
   レスポンシブ対応
   ========================================== */

@media (max-width: 1023px) {
    .hero__title .highlight-text {
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }
    
    .hero__title .neon-text {
        text-shadow: 
            0 0 3px #65BA1E,
            0 0 6px #65BA1E,
            0 0 9px #65BA1E,
            0 0 12px #65BA1E,
            0 0 20px #65BA1E;
    }
}

@media (max-width: 640px) {
    .hero__title .highlight-text {
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }
    
    .hero__title .neon-text {
        text-shadow: 
            0 0 2px #65BA1E,
            0 0 4px #65BA1E,
            0 0 6px #65BA1E,
            0 0 8px #65BA1E,
            0 0 12px #65BA1E;
    }
}

/* 第1バレットがアクティブのとき */
.swiper-pagination .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {
  background-color: #65BA1E ;
}

/* 第2バレットがアクティブのとき */
.swiper-pagination .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {
  background-color: #65BA1E;
}

/* 第3バレットがアクティブのとき */
.swiper-pagination .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active {
  background-color: #fbb224;
}

@media (max-width: 1023px) {
  .hero__title h2 {
    font-size: 32px;
  }
  .hero .swiper-slide {
    height: 80vh;
  }
}
@media (max-width: 640px) {
  .hero__title {
    top: 15%;
  }
  .hero__title h2 {
    font-size: 24px;
  }
  .hero__btn {
    bottom: 20%;
  }
  .hero__btn a {
    width: 260px;
    height: 45px;
  }
}