@charset "UTF-8";
@-ms-viewport {
  width: device-width; }

/*--------------------------------------------------------------------------
CSS　Top Swiper
--------------------------------------------------------------------------*/
/*========= Swiper用CSS ===============*/
/*
    カスタマイズ
    */
.swiper{
  width:100%;
  height:100vh;
  position: relative;
  overflow: hidden;
}

.slider-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100; /* スライドより上 */
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.slider-logo img{
  width:180px;
  height:auto;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
   height: 100vh;
  overflow: hidden;
}

.swiper-slide .image {
  position: absolute;
  top: -10%;  /* ←縦方向の余白追加 */
  left: -10%; /* ←横方向にも同様に */
  width: 120%; /* ←広めに確保 */
  height: 120%;
  overflow: hidden;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  transition: transform 10s linear;
  display: block;
    overflow: hidden;
}

/*各ページスライドイン*/
.swiper-slide .text {
  position: absolute;
  color: white;
  font-size: 5.4rem;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  transition: all 1s ease;
  opacity: 0;
}
.swiper-slide .text small{
  margin:0 0 0 10px;
  font-size:1.6rem;
}

.text2 {
  bottom: 10%;
  left: -100%;
}

.text3 {
  bottom: 10%;
  left: -100%;
}

.swiper-slide-active .text1 {
  opacity: 1;
  transition: opacity 2s ease-in-out;
}

.swiper-slide-active .text2 {
  opacity: 1;
  left: 10%;
}

.swiper-slide-active .text3 {
  opacity: 1;
  left: 10%;
}
/*切り替えタイミングの線*/
.swiper-slide .line {
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 0;
  height: 1px; /* 線の太さ */
  background-color: white;
  transition: width 7.4s ease-in-out; /* 幅の変更にアニメーションを追加 */
  z-index: 20; /* 他のコンテンツの上に表示 */
}

.swiper-slide-active .line {
  width: 100%; /* アクティブなスライドで線が全幅に伸びる */
}

/*===============================
■■　スマホ用　■■
===============================*/
/*------------(XS)------------*/
@media (min-width: 319px) and (max-width: 566px) {
.swiper-slide .text {
  font-size: 4rem;
}
.swiper-slide .text small{
  margin:0 0 0 10px;
  font-size:1.3rem;
  font-weight:400;
}
.text2 {
  bottom: 15%;
}
.text3 {
  bottom: 15%;
}
/*切り替えタイミングの線*/
.swiper-slide .line {
  bottom: 15%;
}
}
/*------------(SM)------------*/
@media (min-width: 567px) and (max-width: 767px) {
}
/*------------(MD)------------*/
@media (min-width: 768px) and (max-width: 1023px) {
}
/*------------(LG)------------*/
@media (min-width: 1024px) and (max-width: 1215px) {
}
/*------------(XL)------------*/
@media (min-width: 1216px) {
}