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

/* 汎用 */
h1,h2,h3,h4,h5{
	line-height: 1.4;
}

.btn1{
	display: block;
	width: 70vw;
	box-sizing: border-box;
	border-radius: 9999px;
	background-color: #FFF;
	padding: 18px 40px 16px 40px;
	font-family: var(--font-dongle);
	position: relative;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1;
}

.btn1:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	transform:translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: var(--color2);
}

.btn1.jp{
	font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 1.6rem;
	padding: 18px 40px 20px 40px;
}

.btn2{
	display: block;
	width: 70vw;
	box-sizing: border-box;
	border-radius: 9999px;
	background-color: var(--color3);
	padding: 16px 40px 13px 40px;
	font-family: var(--font-dongle);
	position: relative;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
	font-size: 2.4rem;
	font-weight: bold;
}

.btn3{
	display: block;
	width: 70vw;
	box-sizing: border-box;
	border-radius: 9999px;
	background-color: var(--color4);
	padding: 18px 40px 16px 40px;
	font-family: var(--font-dongle);
	position: relative;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1;
}

.btn3:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	transform:translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: var(--color2);
}

.scrollFire.fade{
	opacity: 0;
	transform: translateY(20px);
	transition: all 1.5s;
	position: relative;
}

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

.scrollFire.fade.d05{
	transition-delay: 500ms;
}

.scrollFire.fade.d1{
	transition-delay: 1s;
}

.scrollFire.fade.d2{
	transition-delay: 2s;
}

.scrollFire.fadeM > *{
	opacity: 0;
	transform: translateY(20px);
	transition: all 1.5s;
	position: relative;
}

.scrollFire.fadeM.active > *{
	opacity: 1;
	transform: translateY(0);
}

.scrollFire.fadeM > *:nth-child(2){
	transition-delay: 1s;
}

.scrollFire.fadeM > *:nth-child(3){
	transition-delay: 2s;
}

.scrollFire.fadeM > *:nth-child(4){
	transition-delay: 3s;
}

.scrollFire.fadeM > *:nth-child(5){
	transition-delay: 4s;
}

.scrollFire.fadeM > *:nth-child(6){
	transition-delay: 5s;
}


/* テンプレート */

#container {
	width:100%;
	text-align:left;
	transition: all 0.5s;
	font-size: 1.4rem;
}

/* ヘッダ */

.head{
	width: 100%;
	overflow: hidden;
}

header{
	background-color: var(--color4);
}

h1{
	font-size:0;
}

#TOP header{
	height: 315px;
	position: relative;
}

header h1 img{
	width: 140px;
	height: auto;
	padding: 40px 0 0 40px;
}

.headWave{
	position: absolute;
	bottom: 0;
	width: 100%;
	overflow: hidden;
}

.headWave div{
	display: flex;
	width: 400vw;
}

.headWave div img{
	width: 200vw;
	height: auto;
}


.headWave.hw1 div img:nth-of-type(1){
	animation: topWave 52s -26s linear infinite;
}

.headWave.hw1 div img:nth-of-type(2){
	animation: topWave2 52s linear infinite;
}

.headWave.hw2 div img:nth-of-type(1){
	animation: topWave 84s -42s linear infinite;
}

.headWave.hw2 div img:nth-of-type(2){
	animation: topWave2 84s linear infinite;
}

@keyframes topWave {
	0% {
	  transform: translateX(-100%);
	}
	to {
	  transform: translateX(100%);
	}
}

@keyframes topWave2 {
	0% {
	  transform: translateX(-200%);
	}
	to {
	  transform: translateX(0%);
	}
}

.headWave.hw1{
	/*上下アニメーション*/
	transform-origin: bottom center;
	animation: topWaveUD 5s ease-in-out infinite alternate;
}

.headWave.hw2{
	/*上下アニメーション*/
	transform-origin: bottom center;
	animation: topWaveUD 8s ease-in-out infinite alternate-reverse;
}


@keyframes topWaveUD{
	0% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0.5);
	}
}

.headMoon{
	position: absolute;
	bottom: 50%;
	right: 25%;
	animation: topMoon 3s ease-in-out infinite alternate;

}

.headMoon span{
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 23px;
	background-color: #EABF4B;
	animation: topMoon2 1s ease-in-out infinite alternate;
}

@keyframes topMoon {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(10px);
	}
}

@keyframes topMoon2 {
	0% {
	  transform: translateY(0);
	}
	100% {
	  transform: translateY(5px);
	}
}

.topScroll{
	display: none;
}

.menu{
	position: fixed;
	top: 40px;
	right: 40px;
	cursor: pointer;
	z-index: 100;
}

.menu svg, .menu img{
	width: 34px;
	height: 18px;
	vertical-align: top;
}


.menu #menu1 rect{
	transition: all 0.3s;
}

.menu:hover rect#line2{
	transform: translateX(-10px);	
}

.menu:hover rect#line1{
	transform: translateX(-20px);	
}


.navi{
	position: fixed;
	background-color: var(--color2);
	color: #FFF;
	z-index: 10000;
	width: 100%;
	height: 100%;
	top: 50px;
	right: 50px;
	transition: all 500ms;
	transform: scale(0);
	padding: 10vw;
	box-sizing: border-box;
	overflow: auto;
	transform-origin: top right ;
}

.navi.on{
	transform: scale(1);
	top: 0;
	right: 0;
}

.navi ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.navi ul li{
	margin-bottom: 40px;
	padding-bottom: 10px;
	position: relative;
}

.navi ul li:after{
	display: block;
	width: 40px;
	border-top: solid 1px #FFF;
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.navi ul li a{
	font-family: var(--font-dongle);
	line-height: 0;
	font-size: 4rem;
	text-decoration: none;
	color: #FFF;
	font-weight: 300;
}

.navi .naviLogo{
	margin-bottom: 20vw;
	text-align: left;
}

.navi .naviLogo svg, .navi .naviClose img{
	width: auto;
	height: 20px;
	vertical-align: top;
}

.navi .naviLogo svg .a{
	fill: #FFF;
}

.navi .naviClose{
	position: fixed;
	top: 10vw;
	right: 10vw;
	cursor: pointer;
}

/* コンテンツ領域コンテナ */


/* フッター */
footer{
	background-color: var(--color4);
	padding: 50px 40px;
	border-top: solid 2px #D3D1D0;
}

footer dl dt img{
	width: 80%;
	margin-bottom: 20px;
}

footer dl dd address{
	font-style: normal;
	line-height: 1.6;
	padding-bottom: 50px;
	font-size: 1.6rem;
}

div.footLeft{
	padding-bottom: 50px;
}

div.footLeft .recruitBtn{
	display: block;
	width: 100%;
	box-sizing: border-box;
	border-radius: 5px;
	background-color: #FFF;
	padding: 20px 40px 18px 60px;
	font-family: var(--font-dongle);
	position: relative;
	text-align: left;
	text-decoration: none;
	margin: 0 auto;
	font-size: 2.7rem;
	font-weight: bold;
	line-height: 20px;
}

div.footLeft .recruitBtn em{
	font-size: 1.2rem;
	font-weight: normal;
}

div.footLeft .recruitBtn:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 20px;
	transform:translateY(-50%);
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: var(--color2);
}

div.footLeft ul{
	display: none;
}

/* 下層 */

#LOW header{
	height: 120px;
}


#LOW{
	background-color: var(--color4);
}

#LOW h2{
	font-family: var(--font-dongle);
	font-weight: 300;
	font-size: 5rem;
	color: var(--color2);
	text-align: center;
	margin: 0 0 30px 0;
	padding: 0;
	line-height: 1;
}

#LOW main{
	padding: var(--section-bottom) 0;
}

#LOW main section{
	padding: 0 var(--section-side) 180px;
}

#LOW main section:last-of-type{
	padding: 0 var(--section-side) 100px;
}

#LOW main section.wide{
	padding: 0 0 180px;
}

#LOW main ul{
	padding: 0 0 0 1.5em;
	margin: 0;
}

#LOW main ul li{
	line-height: 1.6;
}

#LOW main h3{
	font-family: var(--font-dongle);
	font-weight: 300;
	font-size: 6.5rem;
	text-align: center;
	margin: 0 0 50px 0;
	padding: 0 0 20px 0;
	line-height: 28px;
	background: url(../img/common/h2.svg) no-repeat bottom center;
	background-size: 50px auto;
}

#LOW main h4{
	font-weight: bold;
	text-align: center;
	margin-bottom: 30px;
	font-size: 1.9rem;
}

#LOW main h3.type2{
	font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
	font-weight: bold;
	font-size: 1.9rem;
	margin: 0 0 30px 0;
	padding:0;
	line-height: 1;
	background: none;
	text-align: left;
}