@charset "UTF-8";
/*--------------------------------------------------------------
# ブレイクポイント
-------------------------------------------------------------- */
/*========= ローディング画面のためのCSS ===============*/
#splash {
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		background: #000000;
		background: -moz-linear-gradient(top, #000000 0%, #01002d 100%);
		background: -webkit-linear-gradient(top, #000000 0%, #01002d 100%);
		background: linear-gradient(to bottom, #000000 0%, #01002d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#01002d',GradientType=0 );
		z-index: 9999999;
		text-align: center;
		color: #fff;
}

#splash-logo {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 32rem;
		height: auto;
}

/*========= 画面遷移のためのCSS ===============*/
body {
		background: #000000;
		background: -moz-linear-gradient(top, #000000 0%, #01002d 100%);
		background: -webkit-linear-gradient(top, #000000 0%, #01002d 100%);
		background: linear-gradient(to bottom, #000000 0%, #01002d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#01002d',GradientType=0 );
}

body.appear {
		background: #dfdfe0;
		/*画面を開いた後の背景色を指定*/
}

/*画面遷移アニメーション*/
.splashbg1,
.splashbg2 {
		display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg1,
body.appear .splashbg2 {
		display: block;
}

/*右に消えるエリア*/
body.appear .splashbg1 {
		animation-name: PageAnime;
		animation-duration: 1.2s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		content: "";
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 50%;
		transform: scaleX(1);
		background: #000000;
		background: -moz-linear-gradient(top, #000000 0%, #01002d 100%);
		background: -webkit-linear-gradient(top, #000000 0%, #01002d 100%);
		background: linear-gradient(to bottom, #000000 0%, #01002d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#01002d',GradientType=0 );
}

@keyframes PageAnime {
		0% {
				transform-origin: left;
				transform: scaleX(1);
		}
		50% {
				transform-origin: right;
		}
		100% {
				transform-origin: right;
				transform: scaleX(0);
		}
}

/*左に消えるエリア*/
body.appear .splashbg2 {
		animation-name: PageAnime2;
		animation-duration: 1.2s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;
		content: "";
		position: fixed;
		z-index: 999;
		width: 100%;
		height: 100vh;
		top: 0;
		right: 50%;
		transform: scaleX(1);
		background: #000000;
		background: -moz-linear-gradient(top, #000000 0%, #01002d 100%);
		background: -webkit-linear-gradient(top, #000000 0%, #01002d 100%);
		background: linear-gradient(to bottom, #000000 0%, #01002d 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#01002d',GradientType=0 );
}

@keyframes PageAnime2 {
		0% {
				transform-origin: right;
				transform: scaleX(1);
		}
		50% {
				transform-origin: left;
		}
		100% {
				transform-origin: left;
				transform: scaleX(0);
		}
}

/*画面遷移の後現れるコンテンツ設定*/
#page {
		opacity: 0;
		/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #page {
		animation-name: PageAnimeAppear;
		animation-duration: 1s;
		animation-delay: 0.2s;
		animation-fill-mode: forwards;
		opacity: 0;
}

@keyframes PageAnimeAppear {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}

/*--------------------------------------------------------------
# キービジュアル
--------------------------------------------------------------*/
.slick-dotted.slick-slider {
		margin-bottom: 0;
}

/*キービジュアルスライダー*/
.top-keyvisual {
		position: relative;
		height: 100rem;
}

@media (max-width: 991px) {
		.top-keyvisual {
				height: 80vh;
		}
}

.top-keyvisual .bg-act__img.key .key-slick.slick-slider {
		top: -74px;
}

@media (max-width: 991px) {
		.top-keyvisual .bg-act__img.key .key-slick.slick-slider {
				top: -26px;
		}
}

.top-keyvisual .bg-act__img.key .key-slick.slick-slider img {
		display: block;
		width: 100vw;
		height: 100rem;
		object-fit: cover;
		font-family: "object-fit: cover;";
}

@media (max-width: 991px) {
		.top-keyvisual .bg-act__img.key .key-slick.slick-slider img {
				height: 80vh;
		}
}

.top-keyvisual .bg-act__img.key .keytext {
		position: absolute;
		width: 100%;
		top: 48%;
		left: 0;
		transform: translate(0, -50%);
		text-align: center;
		color: #fff;
		line-height: 1.2;
}

.top-keyvisual .bg-act__img.key .keytext p.sub {
		font-size: 4rem;
		font-style: italic;
		font-weight: 500;
		text-shadow: 0 0 2rem rgba(0, 0, 0, 0.8), 0 0 2rem rgba(0, 0, 0, 0.8), 0 0 2rem rgba(0, 0, 0, 0.8);
		margin-top: -5rem;
}

.top-keyvisual .bg-act__img.key .keytext h1 {
		font-size: 7.5rem;
		font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
		font-weight: 800;
		text-shadow: 0 0 2rem rgba(0, 0, 0, 0.8), 0 0 2rem rgba(0, 0, 0, 0.8), 0 0 2rem rgba(0, 0, 0, 0.8);
}

@media (max-width: 991px) {
		.top-keyvisual .bg-act__img.key .keytext h1 {
				font-size: 6.5rem;
		}
}

.slide-animation {
		animation: fadezoom 8s 0s forwards;
}

@keyframes fadezoom {
		0% {
				transform: scale(1);
		}
		100% {
				transform: scale(1.1);
		}
}

/*--------------------------------------------------------------
# コンセプト
--------------------------------------------------------------*/
#concept .section-content {
		text-align: center;
}

#concept .section-content p {
		font-size: 2rem;
}


/*--------------------------------------------------------------
# アクセス
--------------------------------------------------------------*/
#access {
	background: #fff;
}