@charset "UTF-8";


/* index ---------------------------------------*/

/*キービジュアル*/

.topKv{
	width:100%;
	height: 560px;
	position: relative;
	background: url(../img/index/keyvisual.png) no-repeat top center,url(../img/index/kv_bg.png) repeat-x top center;
}

.topKvWrapper{
	width: 1080px;
	margin: 0 auto;
}
.topKvRight{
	float: right;
	background-color: #fff;
	margin: 20px 0px;
	text-align: center;
	width: 302px;
	padding: 20px 20px 0;
}
.topKvRight p{
	font-size: 13px;
	text-align: left;
	font-weight: bold;
	padding: 5px 0px 10px 0;
}
.topKvRight iframe{
	display: block;
	margin: 0 auto;
}
.topKvRight img{
	margin-bottom: 10px;
	display: flex;
}
.topKvLeft{
	position: relative;
	width: 441px;
/*	height: 172px;*/
	height: 190px;
	top: 340px;
/*	background: url(../img/index/iconCheck_201102.png) no-repeat top center;*/
	background: url(../img/index/iconCheck_20220601.png) no-repeat top center;
}
.topKvLeft .topKvContent{
	position: absolute;
/*	top: 58px;*/
	top: 61px;
	left: 25px;
}
/*.topKvLeft a{
	padding: 18px 16px;
	background: linear-gradient(#009C94 50%, #356D6C 50%);
	color: #fff;
	border: solid;
	border-radius: 8px;
	display: block;
	font-size: 19px;
	font-weight: bold;
	line-height: 1;
}*/
.topKvLeft a{
}
.topKvLeft a:hover{
	opacity: 0.7;
}
/*.topKvLeft h1{
	font-size: 30px;
	font-weight: bold;
	line-height: 1.4;
	margin-left: 100px;
}
*/
/*.topKvLeft h1:before{
	content:url(../img/index/iconCheck.png);
	vertical-align: middle;
	position: absolute;
	left: 20px;
}*/
.topKvLeft p{
	font-size: 15px;
	font-weight: bold;
	line-height: 2;
}

.topInfo{
	padding: 20px 0 30px;
	display: flex;
	width: 1080px;
	margin: 0 auto;
}
.topInfoLeft{
	border-left: 3px solid #B6000F;
	width: 195px;
	margin-right: 60px;
}
.topInfoLeft img{
	padding: 20px 20px 20px;
}
.topInfoLeft p{
	padding: 0 0 0 20px;
	font-size: 13px;
}
.topInfoRight{
	width: 100%;
}
.topInfoRight ul li{
	padding: 15px 0;
	border-top: 1px solid #C6C6C6;
}
.topInfoRight ul li:last-child{
	border-bottom: 1px solid #C6C6C6;
}
.topInfoRight ul li p{
	display: inline-block;
	margin-top: 10px;
	margin-left: 116px;
	line-height: 28px;
}
.topInfoRight ul li span{
	color: #B6000F;
	vertical-align: top;
}
.topInfoNav{
	padding: 40px 0 40px 0;
	display: flex;
	justify-content: space-between;
	width: 1080px;
	margin: 0 auto;
}
.topInfoNavContent{
	width: 245px;
	height: 220px;
	/*border: 5px solid #B6000F;*/
	align-items: center;
	display: inline-flex;
	justify-content: center;
	flex-direction: column;
	position: relative;
}
.topInfoNavContent.bnr01{
	background: url(../img/index/bnr_01.png) no-repeat top left;
	background-size: 100%;
}
.topInfoNavContent.bnr01:hover{
	background: url(../img/index/bnr_01_on.png) no-repeat top left;
	background-size: 100%;
}
.topInfoNavContent.bnr02{
	background: url(../img/index/bnr_02.png) no-repeat top left;
	background-size: 100%;
}
.topInfoNavContent.bnr02:hover{
	background: url(../img/index/bnr_02_on.png) no-repeat top left;
	background-size: 100%;
}
.topInfoNavContent.bnr03{
	background: url(../img/index/bnr_03.png) no-repeat top left;
	background-size: 100%;
}
.topInfoNavContent.bnr03:hover{
	background: url(../img/index/bnr_03_on.png) no-repeat top left;
	background-size: 100%;
}
.topInfoNavContent.bnr04{
	background: url(../img/index/bnr_04.png) no-repeat top left;
	background-size: 100%;
}
.topInfoNavContent.bnr04:hover{
	background: url(../img/index/bnr_04_on.png) no-repeat top left;
	background-size: 100%;
}


.topInfoNavContent img:nth-child(2){
	margin: 20px 0 10px 0;
}
.topInfoNavContent span.btn{
	padding: 14px;
	background: #B6000F;
	color: #fff;
	border: solid;
	border-radius: 25px;
	display: block;
	font-size: 15px;
	font-weight: bold;
	line-height: 1;
}
.contactBar{
	background-color: #F8E5E7;
	height: 160px;
	width: 100%;
	display: flex;
}
.contactbarWapper{
	width: 1080px;
	margin: 0 auto;
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.contactBar .contactBarContact a{
	padding: 32px 65px;
	background: linear-gradient(#B6000F 50%, #AB000E 50%);
	color: #fff;
	border-radius: 5px;
	width: 400px;
	display: block;
	font-size: 22px;
	font-weight: bold;
}
.contactBar .contactBarContact a:hover{
	opacity: 0.7;
}
.topCatch{
	padding: 40px 0 40px;
}
.topCatchWapper{
	width: 1080px;
	margin: 0 auto;
}
.topCatch img{
	width: 100%;
}

@media screen and (max-width: 768px){

	.topKv.sp{
		background: none;
		width: 100%;
		position: relative;
		height: auto;
		border-bottom: 2px solid #c01c19;
		padding-bottom: 15px;
	}
	.topKv.sp img{
		width: 100%;
		margin-top: -17px;
	}

	.topKv.sp .forSimulatorBlock{
/*		background: url(/img/index/iconCheck_sp_201102.png) no-repeat top left;*/
		background: url(/img/index/iconCheck_sp_20220601.png) no-repeat top left;
		background-size: 100%;
/*		padding: 11.5vw 0 9vw;*/
		padding: 11.5vw 0 15vw;
		margin-bottom: 20px;
	}
	.topKv.sp .forSimulatorBlock a{
		background: url(/img/index/iconCheckButton_sp.png) no-repeat top center;
		background-size: 100%;
		width: 325px;
		display: block;
		margin: 0 auto;
		height: 63px;
		text-indent: -999em;
	}

	.topKv.sp .youtubeArea{
		display: block;
		margin:0 32.5px;
	}
	.topKv.sp .youtubeArea h4{margin-bottom: 15px;}

	.topKv.sp .youtubeArea p{
		text-align:center;
		font-size:14px;
		font-weight:bold;
		margin: 5px 0 10px;
	}

	.topKv.sp .youtubeArea .youtubeInner{
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}
	.topKv.sp .youtubeArea .youtubeInner iframe{
		position: absolute;
		top: 0;
		right: 0;
		width: 100% !important;
		height: 100% !important;
	}

	.topKvWrapper{width: 100%;}

	.topKvRight{
		float: none;
		width: 100%;
	}
	.topKvLeft{
		float: none;
		width: 100%;
	}

	.topInfo{
		width: 100%;
		display: block;
	}
	.topInfoLeft{
		float: none;
		width: 100%;
		border-left: none;
		padding: 0 0 20px 0;
	}
	.topInfoLeft img{
		display: block;
		margin:0 auto 10px;
		padding: 0;
		width: 141px;
	}
	.topInfoLeft p{
		font-size: 12px;
		padding: 0;
		text-align:center;
	}

	.topInfoRight{
		float: none;
		display: block;
		width : -webkit-calc(100% - 40px) ;
		width : calc(100% - 40px) ;
		margin: 0 auto;
	}

	.topInfoRight ul li{
		padding: 10px 0 10px;
	}
	.topInfoRight ul li span{
		font-size: 13px;
	}
	.topInfoRight ul li p{
		display: block;
		margin: 0;
		font-size: 14px;
	}

	.topInfoNav{
		width : -webkit-calc(100% - 40px) ;
		width : calc(100% - 40px) ;
		display: block;
		padding: 0;
		margin-bottom: 25px;
		margin-top: 35px;
	}

	.topInfoNavContent{
		width: 100%;
		height: auto;
		padding-top: 31.4%;
	}
	.topInfoNavContent.bnr01{
		background: url(../img/index/bnr_01_sp.png) no-repeat top center;
		background-size:100%;
	}
	.topInfoNavContent.bnr01:hover{
		background: url(../img/index/bnr_01_sp.png) no-repeat top center;
		background-size:100%;
	}
	.topInfoNavContent.bnr02{
		background: url(../img/index/bnr_02_sp.png) no-repeat top center;
		background-size:100%;
	}
	.topInfoNavContent.bnr02:hover{
		background: url(../img/index/bnr_02_sp.png) no-repeat top center;
		background-size:100%;
	}
	.topInfoNavContent.bnr03{
		background: url(../img/index/bnr_03_sp.png) no-repeat top center;
		background-size:100%;
	}
	.topInfoNavContent.bnr03:hover{
		background: url(../img/index/bnr_03_sp.png) no-repeat top center;
		background-size:100%;
	}
	.topInfoNavContent.bnr04{
		background: url(../img/index/bnr_04_sp.png) no-repeat top center;
		background-size:100%;
	}
	.topInfoNavContent.bnr04:hover{
		background: url(../img/index/bnr_04_sp.png) no-repeat top center;
		background-size:100%;
	}

	.topCatch {
		padding: 30px 0 0;
	}


}