/* Home Pc */

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


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

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

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

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

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

#keyvisual h1{
	display: block; position: absolute; left: 5%; top: 0; bottom: 0; margin: auto;
	font-family: "din-2014", sans-serif !important;
    font-weight: 600; font-size: 4.3vmax; letter-spacing: .1em; line-height: 5.8vmax;
	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;
}

#keyvisual span{
	font-family: "din-2014", sans-serif !important; font-weight: 600;
	display: block; position: absolute; left: 5.5%; top: 62.8vh; font-size: 18px;
}

#keyvisual .img_daruma{
	position: absolute; opacity: 1; -webkit-opacity: 1;
    width: calc(100vw * .375);
    height: calc(100vw * .375);
    top: 0; bottom: 0; right: 10%; left: unset !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) / 16) !important;}

#sec01 .divLeft{width: 60%; z-index: 1; padding: 22.5vmax 0 0 9vmax;}
#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: 68%;}

#sec01 .divLeft a.btnCircleArrow{
	display: block;
    position: absolute;
    width: 43.5vmax;
    height: 120px;
    left: 0; z-index: 1;
    bottom: 3vmax;
	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{
	position: absolute;
    z-index: 5;
    width: 35vmax;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 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: 100px 12vmax 100px;
    float: right;
	width: 70vmax;
   	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: 100%, 100%;
}

#sec03 .flRight ul{margin: 50px 20px 45px 0;}


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

#sec04 h2{margin: 100px 0 50px 12.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) - 37.5px); height: calc((((100vw / 4) - 37.5px) * 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:hover{opacity: 1 !important; -webkit-opacity: 1 !important;}

#sec04 .mainbox a span.mask{
	position: relative;/*キラッの基点となる位置を定義*/
	display: block;
	line-height: 0;/*行の高さを0にする*/
	overflow: hidden;/*拡大してはみ出る要素を隠す*/
	height: 100%;
}

#sec04 .mainbox a span.mask::before {
	position: absolute;
	content:"";
	width: 80%;/*キラッの横幅*/
	height: 100%;/*キラッの縦幅*/
	top: 0;/*.shine span.maskのトップ0を基点*/
	left: -200%;/*画面の見えていない左から右へ移動するスタート地点*/
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-45deg);/*背景白透過を斜めに*/
}

#sec04 .mainbox a:hover span.mask::before {/*hoverした時の変化*/
	animation: shine 0.7s;/*アニメーションの名前と速度を定義*/
}

@keyframes shine {
	100% {
		left: 220%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}

#sec04 .mainbox a .sec4content{
	position: absolute; left: 35px;
}

#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: 12px; margin-bottom: 20px;}
#sec04 .mainbox a .sec4content span:nth-of-type(2){font-size: 45px; line-height: 45px; position: relative; padding-right: 26px;}
#sec04 .mainbox a .sec4content span:nth-of-type(2) i{
	display: block; font-size: 20px; position: absolute; bottom: 12px; right: 0; transition: all .3s ease;
	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: 35px !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: 55%;}
#sec04 .mainbox a:nth-of-type(4) .sec4content{top: 80%;}

#sec04 .mainbox a:hover .sec4content span:nth-of-type(2) i{transform: translateX(10px);}

/* https://coco-factory.jp/ugokuweb/move02/7-8/ */