@charset "UTF-8";
/* CSS Document */


/* ---------------------------------------------------------------------------------------------

　   ローディングアニメーション

--------------------------------------------------------------------------------------------- */





/* ---------------------------------------------------------------------------------------------

　   header

--------------------------------------------------------------------------------------------- */


header#header{
	position: relative;
	/*margin-bottom: 85vh;
	margin-bottom: 85svh;*/
	height: calc(75vh + 90px);
	/*padding-top: calc(75vh + 90px);*/
	}


/*--------------------

　ファーストビュー

--------------------*/

.top_main{
	position: absolute;
	top: 90px;
	width: 100%;
	height: 75vh;
	z-index: -1;
	}

.top_main___slider{
	width: 80%;
	margin: 0 0 0 auto;
	object-fit: cover;
	}

.top_main___slider div.img01 {
	background-image: url("../img/slideimage01.jpg");
	background-position: center center;
	}
.top_main___slider div.img02 {
	background-image: url("../img/slideimage02.jpg");
	}
.top_main___slider div.img03 {
	background-image: url("../img/slideimage03.jpg");
	}
.top_main___slider div {
	border-radius: 20px 0 0 20px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	height: 70vh;
	height: 70svh;
	margin: 0;
	transition: .3s;
	}

/*　キャッチ・リード 囲み　*/
.top_main___lead{
	position: absolute;
	top: 15%;
	right: 0;
	bottom: auto;
	left: 0;
	margin: auto;
	width: 92%;
	height: 3.2rem;
	z-index: 10;
	}
/*キャッチコピー*/
.top_main___lead .catch{}
.top_main___lead .catch .item{
	margin-bottom: 1rem;
	transform: skewX(-7deg);
	}
.top_main___lead .catch .item span{
	font-size: var(--ft64);
	font-weight: bold;
	line-height: 1.2;
	padding: 0.4rem 0.7rem;
	}
/*英語*/
.top_main___lead .en{
	margin-left: 1rem;
	}
.top_main___lead .en p{
	font-size: var(--ft12);
	font-family: var(--ft-sansjp);
	font-weight: 600;
	letter-spacing: 1px;
	}
/*日本語*/
.top_main___lead .tx{
	margin-top: 2.5rem;
	margin-left: 1rem;
	}
.top_main___lead .tx p{
	font-size: var(--ft16);
	font-weight: bold;
	line-height: 2;
	}
	@media only screen and (max-width: 900px) {
		/*　キャッチ・リード 囲み　*/
		.top_main___lead{
			top: 40%;
			}
		.top_main___lead .catch .item span{
			font-size: var(--ft48);
			line-height: 1.1;
			}
		.top_main___lead .en p{
			font-size: var(--ft10);
			}
		.top_main___lead .tx{
			margin-top: 1rem;
			}
		}
	@media only screen and (max-width: 767px) {
		header#header{
			height: calc(85vh + 70px);
			}
		.top_main{
			top: 70px;
			height: 85vh;
			}
		/*　キャッチ・リード 囲み　*/
		.top_main___lead{
			top: 55%;
			}
		}
	@media only screen and (max-width: 600px) {
		header#header{
			height: calc(80vh + 65px);
			}
		.top_main{
			top: 65px;
			height: 80vh;
			}
		/*　キャッチ・リード 囲み　*/
		.top_main___lead{
			top: 52%;
			}
		.top_main___lead .catch .item span{
			font-size: var(--ft36);
			}
		.top_main___lead .tx p{
			font-size: var(--ft18);
			}
		}
	@media only screen and (max-width: 480px) {
		header#header{
			height: calc(80vh + 60px);
			}
		.top_main{
			top: 60px;
			height: 80vh;
			}
		/*　キャッチ・リード 囲み　*/
		.top_main___lead{
			top: 46%;
			}
		}
	@media only screen and (max-width: 360px) {
		/*　キャッチ・リード 囲み　*/
		.top_main___lead{
			top: 38%;
			}
		.top_main___lead .catch .item span{
			font-size: var(--ft32);
			}
		.top_main___lead .tx p{
			font-size: var(--ft16);
			}
		.top_main___lead .tx p br{
			display: none;
			}
		}
	@media only screen and (max-width: 260px) {}











/* ---------------------------------------------------------------------------------------------

　   main

--------------------------------------------------------------------------------------------- */



	@media only screen and (max-width: 900px) {}
	@media only screen and (max-width: 767px) {}
	@media only screen and (max-width: 600px) {}
	@media only screen and (max-width: 480px) {}
	@media only screen and (max-width: 360px) {}
	@media only screen and (max-width: 260px) {}





/* ---------------------------------------------------------------------------------------------

　   footer

--------------------------------------------------------------------------------------------- */



	@media only screen and (max-width: 900px) {}
	@media only screen and (max-width: 767px) {}
	@media only screen and (max-width: 600px) {}
	@media only screen and (max-width: 480px) {}
	@media only screen and (max-width: 360px) {}
	@media only screen and (max-width: 260px) {}



