@charset "UTF-8";

/*--------------------------------------------
	ローディング Section
	ローディング画面設定
--------------------------------------------*/
#loading {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center
}

.loading-image {
	width: 150px;
	height: auto;
	animation: rotate 3s linear infinite
}

@keyframes rotate {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

/*--------------------------------------------
	Full View Section
	トップ画像を画面いっぱいに表示
	pc用：136:49、スマホ用：31:50
--------------------------------------------*/
#fv {
	position: relative;
	overflow: hidden
}

.first-text,
.second-text {
	font-weight: bold;
	font-family: var(--font-family-sub);
	position: absolute;
	z-index: 3;
	font-size: 3em;
	font-weight: bold;
	writing-mode: vertical-rl;
	opacity: 0;
	transform: translateY(20px);
	/*text-shadow: 5px 5px 7px rgba(255, 255, 255, 0.6)*/
	text-shadow: 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF
}

.first-text {
	top: 15%;
	right: 30%
}

.second-text {
	top: 25%;
	left: 30%
}

.slide {
	position: relative;
	width: 100%;
	height: 100vh
}

#fv .slide li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	animation-duration: 1s
}

#fv .slide .img1 {
	background-image: url('../img/home/fv/1pc.jpg');
	filter: brightness(1.2)
}

#fv .slide .img2 {
	background-image: url('../img/home/fv/2pc.jpg')
}

#fv .slide .img3 {
	background-image: url('../img/home/fv/3pc.jpg');
	filter: brightness(1.2)
}

#fv .slide li.active {
	z-index: 2
}

#fv .slide li.next {
	z-index: 1
}

#fv .slide li.close {
	animation-name: slide-out;
	opacity: 0
}

@keyframes slide-out {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(20px)
	}

	100% {
		opacity: 1;
		transform: translateY(0)
	}
}

@media not all and (min-width: 600px) {
	#main {
		bottom: 16%;
		left: 20px;
		max-width: inherit;
		width: inherit
	}

	#fv .slide .img1 {
		background-image: url('../img/home/fv/1sp.jpg');
		filter: brightness(1.2)
	}

	#fv .slide .img2 {
		background-image: url('../img/home/fv/2sp.jpg')
	}

	#fv .slide .img3 {
		background-image: url('../img/home/fv/3sp.jpg');
		filter: brightness(1.2)
	}
}

/*--------------------------------------------
	ヒーロー Section
	文字を浮かび上がらせ、オシャンティー
--------------------------------------------*/
.hero {
	margin: 0
}

.hero .bg {
	background-image: url(../img/home/hero/hero-bg.jpg);
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 7vw;
	background-position: 50%
}

.hero .text {
	line-height: 1.6;
	letter-spacing: 0.05em;
	width: 90%
}

.hero .text p {
	display: inline-block;
	font-weight: bold;
	font-family: var(--font-family-sub);
	font-size: 1.2em;
	text-shadow: 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF, 0px 0px 3px #FFF
}

.hero .text .sub-title {
	width: 100%;
	font-size: 5em;
	margin: 3vw 0
}

@media (max-width: 1000px) {
	.hero .text .sub-title {
		font-size: 4em
	}
}

@media (max-width: 680px) {
	.hero .text .sub-title {
		font-size: 2em
	}
}

.fade p {
	opacity: 0;
	transform: translateY(11px);
	transition: opacity 1s ease, transform 1s ease
}

.fade p.active {
	opacity: 1;
	transform: translateY(0)
}

/*--------------------------------------------
	ヒーロー2 Section
	船の出航時刻や距離、地理的な画像を配置
--------------------------------------------*/
.hero2 {
	display: flex;
	width: 95%;
	max-width: 1000px;
	margin-right: 0;
	margin-left: auto;
	align-items: center
}

.hero2 img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 10px
}

.left,
.right {
	display: flex;
	justify-content: center;
	align-items: center
}

.left {
	width: 60%;
	flex-direction: column;
	gap: 1rem
}

.left img:first-child {
	width: 50%
}

.right {
	width: 40%
}

.schedule-img {
	display: none
}


@media (max-width: 450px) {
	.left img:first-child {
		width: 90%
	}

	.left :nth-child(2) {
		display: none
	}

	.schedule-img {
		display: block;
		margin: var(--dynamic-margin-small) auto;
		width: 95%
	}
}