@charset "UTF-8";

/* --- UTILS --- */
.gsap-hide {
	opacity: 0;
}

/* --- HERO SECTION --- */
.hero {
	height: 100vh;
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* Swiper Settings */
.swiper {
	width: 100%;
	height: 100%;
	margin-top:-80px!important;
}
.swiper-slide {
	position: relative;
	overflow: hidden;
}
.slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-wrapper {height: auto!Important;
margin-top:-160px;}

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

	.sp-only {display:none;}
}


@media screen and (max-width: 768px) {
	.pc-only {display:none;}


	.slide-img {
		object-position: top;
		object-fit: contain;
		margin-top:-80px;
	}

	.swiper-wrapper {margin-top:0px;}


}

/* 画像に重ねるフィルター */
.swiper-slide::after {
	position: absolute;
	inset: 0;
	background: rgba(0, 51, 102, 0.3);
	content: '';
}

/* Hero Text Content */
.hero-content {
	margin: 0;
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	text-align: center;
	color: #FFF;
	transform: translate(-50%, -50%);
}
.hero-title {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
	line-height: 1.2;
	text-align: center;
}
.hero-content p {
	font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}
.delay-300 {
	transition-delay: 0.3s;
}

/* Scroll Down Indicator */
.scroll-down {
	position: absolute;
	bottom: 40px;
	left: 4%;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 1rem;
	transform: rotate(-90deg);
	transform-origin: left;
}
.scroll-line {
	width: 60px;
	height: 1px;
	background: var(--text-main);
}
.scroll-text {
	font-family: var(--font-en-sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: #FFF;
}

/* Swiper Navigation */
.swiper-button-prev::after,
.swiper-button-next::after {
	font-family: 'Material Icons';
	font-size: 72px;
	color: #FFF;
	font-weight: normal;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}
.swiper-button-prev::after {
	content: "\e5cb";
}
.swiper-button-next::after {
	content: "\e5cc";
}
.swiper-button-prev,
.swiper-button-next {
	width: 76px;
	height: 76px;
	background: transparent;
}

/* Responsive */
@media (max-width: 768px) {
	.hero-title {
		font-size: 3.5rem;
	}
	.scroll-down {
		bottom: 65px;
	}
	.swiper-button-prev::after,
	.swiper-button-next::after {
		font-family: 'Material Icons';
		font-size: 62px;
		color: #FFF;
	}
	.swiper-button-prev,
	.swiper-button-next {
		margin-top: 10px;
		width: 64px;
		height: 64px;
		background: transparent;
	}
}

.swiper-wrapper {
	height: 100% !important;
	margin-top: 0 !important;
}

.swiper-slide {
	height: 100%;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
	.swiper {
		margin-top: -80px !important;
	}
}

.swiper-wrapper {
	height: auto !important;
}

.swiper,
.swiper-slide {
	overflow: hidden;
}

@media screen and (max-height: 700px) {
	.swiper {
		margin-top: -40px !important;
	}
}

.hero {
	min-height: 100vh;
	height: auto;
}

.swiper {
	height: auto !important;
}

.swiper-slide,
.slide-img {
	min-height: 100vh;
}

@media screen and (min-aspect-ratio: 16/9) {
	.hero,
	.swiper,
	.swiper-slide,
	.slide-img {
		height: 100vh;
		min-height: 100vh;
	}
}

.hero {
	height: auto;
	min-height: 100vh;
}

.swiper {
	height: auto !important;
}

.swiper-slide {
	min-height: 100vh;
}

.slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (min-aspect-ratio: 4/3) {
	.hero,
	.swiper,
	.swiper-slide {
		height: 100vh;
	}
}

@media screen and (max-width:767px) {
.swiper {
    margin-top: 0px !important;
}
}

@media screen and (max-width: 767px) {
	.swiper-slide::after {
		bottom: auto;
		height: 100%;
	}
}
@media screen and (max-width: 767px) {
	.swiper-slide {
		overflow: hidden;
	}

.hero {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.swiper {
	height: 100%;
}

.swiper-wrapper,
.swiper-slide {
	height: 100%;
	min-height: 100%;
}

}

@media screen and (max-width: 768px) {
	.slide-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		margin-top: 0;
	}
}

@media screen and (max-width: 768px) {
	.slide-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}
}

@media screen and (max-width: 768px) {

  .hero,
  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    height: 100vh;
  }

  .slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .swiper-slide::after {
    inset: 0;
    height: 100%;
  }
}
@media screen and (max-width: 768px) {

  .hero,
  .swiper,
  .swiper-wrapper,
  .swiper-slide {
    height: auto !important;
    min-height: 0 !important;
  }

}

.swiper-slide::after {
    background: transparent !important;
    content: none !important;
  }

.swiper-slide {margin-top:-20vh!important;
margin-bottom:-20vh!important;}

.iphone .swiper-slide {
  margin-top: -17vw !important;
}

@media screen and (min-width: 768px) {
.hero {
    min-height: 50vh!important;
}
}



@media screen and (min-width: 1110px) {
    .hero {
        height: auto!important;
    }
}

@media screen and (min-aspect-ratio: 4 / 3) {
    .hero {
        height: auto;
    }
}


@media screen and (min-width: 1600px) {
.stylish-greeting {
    margin-top: -10%;
}