/* Home Sp */


/*====== 共通 =====*/


/*======ヘッダー =====*/

header a.logo{display: block; position: absolute; left: 15px; top: 0; width: 65px; height: 65px;}


/*====== キービジュアル =====*/

#keyvisual{
	width: 100%; height: 100vh; position: relative; margin-bottom: 0vh;
	background-color: #000; z-index: 20;
}

#keyvisual div{
    position: absolute;
    top: -5vmax; left: 0; right: 0; margin: auto;
    font-family: "din-2014", sans-serif !important;
    font-weight: 600; font-size: 34vmax; line-height: 0.68em; color: #fff;
    opacity: .2; -webkit-opacity: .2;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: 100%; word-wrap: break-word;
	
	background: -webkit-linear-gradient(0deg, #5d90b5, #654455);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#keyvisual h1{
	display: block; position: absolute; left: 0; right: 0; bottom: 20vh; margin: auto; width: 90%;
    font-family: "din-2014", sans-serif !important; font-weight: 600; font-size: 5vmax; letter-spacing: .1em; line-height: 1.2em;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#keyvisual span{
	font-family: "din-2014", sans-serif !important; font-weight: 600; font-size: 14px; width: 90%;
	display: block; position: absolute; left: 0; right: 0; bottom: 18vh; margin: auto;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#keyvisual .img_daruma{
	position: absolute; opacity: 1; -webkit-opacity: 1;
    width: calc(100vw * .90);
    height: calc(100vw * .90);
    top: 120px; right: 0; left: 0 !important; margin: auto;
}

body.appear #keyvisual .img_daruma .img_daruma_orange{
	opacity: .1; -webkit-opacity: .5;
	animation: flicker 1s forwards .6s 4;
}

body.appear #keyvisual .img_daruma .img_daruma_yellow{
	opacity: .1; -webkit-opacity: .5;
	animation: flicker2 1.5s forwards .8s 3;
}

@keyframes flicker {
	0% {
		filter:drop-shadow(0 0 6px rgba(231, 31, 25, 1));
		opacity: .5; -webkit-opacity: .5;
	}
	5% {
		filter:drop-shadow(0 0 10px rgba(231, 31, 25, 1));
		opacity: .3; -webkit-opacity: .3;
	}
	8% {
		filter:drop-shadow(0 0 0px rgba(231, 31, 25, 1));
		opacity: .5; -webkit-opacity: .5;
	}
	12% {
		filter:drop-shadow(0 0 20px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	20% {
		filter:drop-shadow(0 0 0px rgba(231, 31, 25, 1));
		opacity: .8; -webkit-opacity: .8;
	}
	22% {
		filter:drop-shadow(0 0 20px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	45% {
		filter:drop-shadow(0 0 50px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	50% {
		filter:drop-shadow(0 0 0px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	60% {
		filter:drop-shadow(0 0 80px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	100% {
		filter:drop-shadow(0 0 60px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
}

@keyframes flicker2 {
	0% {
		filter:drop-shadow(0 0 4px rgba(252, 200, 0, 1));
		opacity: .5; -webkit-opacity: .5;
	}
	7% {
		filter:drop-shadow(0 0 8px rgba(252, 200, 0, 1));
		opacity: .2; -webkit-opacity: .2;
	}
	10% {
		filter:drop-shadow(0 0 0px rgba(252, 200, 0, 1));
		opacity: .5; -webkit-opacity: .5;
	}
	14% {
		filter:drop-shadow(0 0 12px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	22% {
		filter:drop-shadow(0 0 0px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	24% {
		filter:drop-shadow(0 0 20px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	48% {
		filter:drop-shadow(0 0 30px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	52% {
		filter:drop-shadow(0 0 0px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	65% {
		filter:drop-shadow(0 0 40px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	100% {
		filter:drop-shadow(0 0 60px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
}


/*====== SEC1 =====*/

#sec01{width: 100% !important; height: calc((100vw * 9) / 9.5) !important;}

#sec01 .divLeft{
	width: 100%;
    z-index: 1;
    padding: 0 0 0 2vmax;}
#sec01 .divRight{width: 50%; z-index: 2;}

#sec01 .divLeft img.imgbox{top:0; left: 0;}
#sec01 .divRight img.imgbox{bottom:0; right: 0;}

#sec01 .divLeft h2,#sec01 .divLeft p.message{width: 95%;}

#sec01 .divLeft a.btnCircleArrow{
	display: block;
    position: absolute;
    width: 22vmax;
    height: 80px;
    left: 0; z-index: 1;
    bottom: 4vmax;
	background-image: -moz-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: -ms-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
}






/*====== SEC3 =====*/

#sec03 .flLeft{
    width: 100%; z-index: 5; position: relative;
    margin: 0 auto;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}
#sec03 .flLeft .imgbox{width: 100%; position: relative !important;}

#sec03 .flRight{
	position: relative;
    padding: 2vmax 2.5vmax 5vmax;
    width: 100%;
    margin: 0 auto;
    height: fit-content;
    height: -ms-fit-content;
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: -o-fit-content;
    background-image: url(/_common_202212/img/home/sec02_02.png), -moz-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
    background-image: url(/_common_202212/img/home/sec02_02.png), -webkit-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
    background-image: url(/_common_202212/img/home/sec02_02.png), -ms-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: cover, 100%;
    background-position: right -200px bottom, top left;
}

#sec03 .flRight ul{margin: 30px 0;}


/*====== SEC4 =====*/

#sec04 h2{margin: 40px 0 30px 5%;}

#sec04 .mainbox{
	display: flex; width: 100%; justify-content: space-between;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec04 .mainbox a{
	display: block;
    width: calc((100vw / 4) - 3px);
    height: calc((((100vw / 4) - 3px) * 805) / 363.5);
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
}

#sec04 .mainbox a:nth-of-type(1){background-image: url("/_common_202212/img/home/sec04_01.jpg");}
#sec04 .mainbox a:nth-of-type(2){background-image: url("/_common_202212/img/home/sec04_02.jpg");}
#sec04 .mainbox a:nth-of-type(3){background-image: url("/_common_202212/img/home/sec04_03.jpg");}
#sec04 .mainbox a:nth-of-type(4){background-image: url("/_common_202212/img/home/sec04_04.jpg");}

#sec04 .mainbox a span.mask{
	display: none;
}

#sec04 .mainbox a .sec4content{
	position: absolute;
    left: 10%;
}

#sec04 .mainbox a .sec4content span{
	display: block; font-family: "din-2014", sans-serif !important; font-weight: 600; 
}
#sec04 .mainbox a .sec4content span:nth-of-type(1){font-size: 10px; margin-bottom: 5px;}
#sec04 .mainbox a .sec4content span:nth-of-type(2){
	font-size: 18px;
    line-height: 18px;
    position: relative;
    padding-right: 20px;
}
#sec04 .mainbox a .sec4content span:nth-of-type(2) i{
	display: block;
    font-size: 10px;
    position: absolute;
    bottom: 3px; right: 8px;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}

#sec04 .mainbox a:nth-of-type(4) .sec4content span:nth-of-type(2) i{right: 20px !important;}

#sec04 .mainbox a:nth-of-type(1) .sec4content{top: 5%;}
#sec04 .mainbox a:nth-of-type(2) .sec4content{top: 30%;}
#sec04 .mainbox a:nth-of-type(3) .sec4content{top: 50%;}
#sec04 .mainbox a:nth-of-type(4) .sec4content{top: 70%;}