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

a{
	text-decoration: none;
}

img{
	max-width: 140%;
	height: auto;
}

h2.main_title{
	font-family: "Futura Std Medium", "Futura XBlk BT", "FuturaBlack BT",'Hind', sans-serif;
	font-size: 80px;
	color: #0096e0;
	line-height: 0.9em;
	letter-spacing: 15px;
}

h2.main_title .sp{display: none;}
h2.main_title .sp02{display: none;}

.main{
	width: 100%;
	background: #FFFFFF;
}

@media screen and (max-width: 1340px){
	h2.main_title .sp02{display: block;}
}

@media screen and (max-width: 1200px){
	h2.main_title .sp{display: block;}
	h2.main_title .sp02{display: block;}
}

@media screen and (max-width: 700px){
	h2.main_title{
		font-size: 60px;
		text-align: center;
	}
}


/*=================================================================
ここからMV
=================================================================*/
div.mv{
	width: 100%;
	height: 940px;
	position: relative;
}

.mv_tl{
	position: absolute;
	top: 0;
	left: 0;
}

.bg-slider {
	background-position:center center;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mv_tl.sp{display: none;}

@media screen and (max-width: 1400px){
	.mv_tl{width: 500px;}
	div.mv{height: 630px;}
}

@media screen and (max-width: 1000px){
	div.mv{margin-top: 130px;}
}

@media screen and (max-width: 700px){
	div.mv{margin-top: 110px; height: 560px;}
	
	.mv_tl.pc{display: none;}
	.mv_tl.sp{display: inline;}
	
	.mv_tl{
		width: 85%;
		bottom: 0;
		left: 0;
		top: auto;
	}
}

div.mv.mv_ps{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	padding-top: 130px;
}

div.mv_ps img{
	width: 100%;
	height: auto;
}

div.mv_ps img.tb{display: none;}
div.mv_ps img.tb2{display: none;}
div.mv_ps img.sp{display: none;}

@media screen and (max-width: 1300px){
	div.mv.mv_ps{padding-top: 190px;}
}

@media screen and (max-width: 1150px){
	div.mv.mv_ps{padding-top: 180px;}
	div.mv_ps img.pc{display: none;}
	div.mv_ps img.tb{display: inline;}
}

@media screen and (max-width: 1000px){
	div.mv.mv_ps{padding-top: 120px;}
}

@media screen and (max-width: 700px){
	div.mv_ps img.tb{display: none;}
	div.mv_ps img.sp{display: inline;}
}

/*=================================================================
ここから右上ボタン
=================================================================*/
.indextop .mv_top_right ul{
	display:flex;
	position: absolute;
    z-index: 1;
    right: 260px;
    top: 10px;
}

.indextop .mv_top_right ul li:nth-child(2){margin-left: 10px;}

.indextop .mv_top_right ul li img{height: 32px;}

/*=================================================================
ここからカウントダウン
=================================================================*/
#container{
	position: absolute;
	z-index: 1;
	font-size: 2.1vw;
	font-weight: bold;
	color: #0097e0;
	left: 4%;
	bottom:16%;
	width: 100%;
}

.time_box{
	width: 40%;
	display: -webkit-flex;
	display: flex;
}

#container .date{
	font-size: 3vw;
	line-height: 1.2;
	text-align: center;
	font-style: italic;
	padding: 3% 5.5% 5% 4%;
	border-radius: 10px;
	background: #deecf2;
	margin-top: 1.5%;
	margin-right: 1.5%;
	position: relative;
}

#container b{
	display: block;
	font-weight: bold;
	font-size: 0.7vw;
	position: absolute;
	bottom: 7%;
	right: 7%;
}

@media screen and (max-width: 1150px){
	#container{
		left: 11%;
		bottom: 48%;
		font-size: 3vw;
	}
	.time_box{width: 100%;}
	#container .date{font-size: 5vw;}
	#container b{font-size: 1.5vw;}
}

@media screen and (max-width: 1000px){
	#container{bottom: 52%; left: 15%;}
}

@media screen and (max-width: 700px){
	#container{
		left: 0;
		bottom:46%;
		font-size: 4.5vw;
		text-align: center;
	}
	.time_box{width: 100%; justify-content: center;}
	#container .date{font-size: 8vw; padding: 3% 5% 5% 3.7%;}
	#container .date:last-child{margin-right: 0;}
	#container b{font-size: 10px;}
}

/*=================================================================
ここから赤ベタ注意書き
=================================================================*/
.red_kome{
	background: #eb2f25;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	font-size: 140%;
    padding: 50px 20px;
}

.red_kome h6{
	font-weight: bold;
	font-size: 30px;
	margin-bottom: 15px;
}

@media screen and (max-width: 700px){
	.red_kome{
		padding: 30px 20px 40px; 
		text-align: justify; 
		font-size: 100%; 
		margin-bottom: 40px;
		margin-top: -20px;
	}
	.red_kome h6{font-size: 20px; text-align: center;}
	.red_kome br{display: none;}
}


/*=================================================================
ここからNews
=================================================================*/
section.indexnews{
	background-color: #FFFFFF;
	max-width: 1150px;
	width: 90%;
	margin: 0 auto;
	padding: 110px 0 60px;
}

section.indexnews div.inner{
    padding: 40px 0;
	display: flex;
	flex-direction: row-reverse;
}

section.indexnews div.inner div.right{
	display: none;
	
	position: relative;
    width: 27%;
    background: #fff;
    border: 20px solid #0096e0;
}

section.indexnews div.inner div.right div.swiper-container{
    overflow: hidden;
}

.news_img{
	width: 100%;
	height: 300px;
}

.news_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

section.indexnews div.inner div.right div.swiper-container .txt{
	padding: 1em;
}

section.indexnews div.inner div.right div.swiper-container .txt h3{
	margin-top: 15px;
}

section.indexnews div.inner div.left{
	/*width: 70%;
    padding-right: 40px;*/
	
	width: 100%;
	padding-right: 0;
	
	
	box-sizing: border-box;
}

section.indexnews div.inner div.left ul.news_list{
	background: #fff;
    border: 3px solid #005680;
	padding: 30px;
	margin-bottom: 38px;
}

section.indexnews div.inner div.left ul.news_list li{
	display: flex;
	color: #005680;
	align-items: center;
	margin-bottom: 45px;
}

section.indexnews div.inner div.left ul.news_list li:last-child{
	margin-bottom: 0;
}

section.indexnews div.inner div.left ul.news_list li time{
	font-weight: bold;
	width: 115px;
}

section.indexnews div.inner div.left ul.news_list li img{
	width: 50px;
	color: #005680;
	margin-right: 15px;
	opacity: 0;
}

section.indexnews div.inner div.left ul.news_list li img.display{
	opacity: 1;
}

 section.indexnews div.inner div.left ul.news_list li .title{
    position: relative;
    width: calc(100% - 180px);
}

section.indexnews div.inner div.left ul.news_list li .title a p{
	position: relative;
    display: block;
    white-space: nowrap;
    overflow: hidden;
	width: 90%;
	text-overflow: ellipsis;
}

section.indexnews div.inner div.left ul.news_list li .title a p:hover{
	opacity: 0.7;
}

section.indexnews div.inner div.left ul.news_list li .title span{
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #005680;
	border-right: solid 2px #005680;
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -4px;
	transform: rotate(45deg);
}

section.indexnews div.inner div.left .list_btn{
	text-align: center;
}

section.indexnews div.inner div.left .list_btn a{
	display: inline-block;
	position: relative;
	background-color: #005680;
	color: #FFFFFF;
	padding: 15px 60px;
}
section.indexnews div.inner div.left .list_btn a:after{
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -4px;
	transform: rotate(45deg);
}

@media screen and (max-width: 1300px){
	section.indexnews{
		padding: 40px 5% 60px;
	}
	section.indexnews div.inner{
		display: block;
		max-width: 760px;
		margin: 0 auto;
	}
	section.indexnews div.inner div.right{
		width: 50%;
		margin-bottom: 30px;
		box-sizing: border-box;
		margin: 0 auto 30px;
	}
	
	section.indexnews div.inner div.left{
		width: 100%;
		padding-right: 0;
	}
	section.indexnews div.inner div.left ul.news_list li{
		display: block;
		margin-bottom: 30px; 
	}
	section.indexnews div.inner div.left ul.news_list li .title{
    	width: 100%;
	}
	section.indexnews div.inner div.left ul.news_list li img{
		vertical-align:middle;
	}
}
@media screen and (max-width: 700px){
	section.indexnews{padding-top: 20px; padding-bottom: 10px;}
	section.indexnews div.inner{padding: 20px 0;}
	section.indexnews div.inner div.right{width: 80%;}
	
	section.indexnews div.inner div.left ul.news_list{padding: 20px; margin-bottom: 20px;}
	section.indexnews div.inner div.left ul.news_list li{margin-bottom: 20px}
}

/*=================================================================
ここからPick Up
=================================================================*/
section.indexpickup{
	background-color: #0096e0;
	padding: 110px 5% 60px;
}

section.indexpickup .inner{
	padding: 40px 0;
	margin: 0 auto;
	max-width: 1045px;
}

section.indexpickup h2.main_title{
	color: #FFFFFF;
	max-width: 1150px;
    width: 100%;
    margin: 0 auto;
	text-align: right;
}

.banner{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 100%;
	flex-wrap: wrap;
}

.banner_list{
	position: relative;
	width: 48%;
	margin-bottom: 2%;
}

.banner .banner_list img{
	width: 98%;
	border: 3px solid #fff;
}

.banner .banner_list p{
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	white-space: nowrap;
	text-align: center;
}

@media screen and (max-width: 1000px){
	.banner{display: block!important;}
	.banner_list{margin: 0 auto 2%;}
	.banner_list{
		max-width: 564px;
		width: 100%;
	}
}

@media screen and (max-width: 700px){
	section.indexpickup .inner{padding: 20px 0;}
	section.indexpickup{padding: 40px 5% 10px;}
	section.indexpickup h2.main_title{text-align: center;}
}


/*=================================================================
ここからcourse
=================================================================*/
section.indexmovie{
	padding: 110px 0 0;
	background-color: #ffffff;
}

section.indexmovie h2.main_title{
	max-width: 1150px;
	width: 100%;
	margin: 0 auto;
}

section.indexmovie .inner{
	max-width: 854px;
	padding: 40px 0 0;
	margin: 0 auto;
}

section.indexmovie .inner .youtube{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

section.indexmovie .inner .youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1500px){
	section.indexmovie{padding: 110px 3% 60px;}
}

@media screen and (max-width: 1000px){
	section.indexmovie{padding-top: 60px;}
}

@media screen and (max-width: 700px){
	section.indexmovie .inner{padding: 20px 0 0;}
	section.indexmovie{
		padding: 40px 5% 60px;
	}
}



/*=================================================================
ここからイメージソング
=================================================================*/
section.indexsong{
	width: 100%;
	padding: 110px 0 60px;
	background-color: #ffffff;
	background: url("../img/map_run_way.jpg");
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center bottom;
}

section.indexsong{
	padding: 110px 0 50%;
	background-color: #ffffff;
}

section.indexsong h2.main_title{
	max-width: 1150px;
	width: 100%;
	margin: 0 auto;
}

section.indexsong .inner{
	max-width: 854px;
	padding: 40px 0 0;
	margin: 0 auto;
}

section.indexsong .inner .youtube{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

section.indexsong .inner .youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1500px){
	section.indexsong{padding: 110px 3% 60px; width: 94%;}
}

@media screen and (max-width: 1000px){
	section.indexsong{padding-top: 60px;}
}

@media screen and (max-width: 700px){
	section.indexsong .inner{padding: 20px 0 30%;}
	section.indexsong{
		padding: 40px 5% 60px;
	}
}






/*=================================================================
ここからother races
=================================================================*/
section.indexrace{
	background-color: #0096e0; 
	/*display: flex;*/
}

section.indexrace h2{
	color: #FFFFFF;
	font-size: 50px;
	width: 44%;
	margin:0 auto ;
	text-align: right;
	display: inline-block;
	vertical-align: middle;
}

section.indexrace ul.other_races{
	width: 50%;
	max-width: 615px;
	height: auto;
	padding: 20px 30px 10px;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: middle;
}

section.indexrace ul.other_races li{
	display: inline-block;
	margin: 0 10px 10px 0;
}
section.indexrace ul.other_races li img{
	width: 170px;
}
@media screen and (max-width: 1200px){
	section.indexrace h2{margin-right: -12px;}
}

@media screen and (max-width: 1110px){
	section.indexrace ul.other_races li img{width: 140px;}
}

@media screen and (max-width: 1000px){
	.naka_head{display: none;}
	
	section.indexrace{
		padding: 40px 0;
		display: block;
		
	}
	section.indexrace h2{
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}
	section.indexrace ul.other_races{
		max-width: 100%;
		width: 100%;
		text-align: center;
	}
	section.indexrace ul.other_races li{
		width: 25%;
	}
	
	section.indexrace ul.other_races li img{width: 170px;}

}
@media screen and (max-width: 700px){
	
	section.indexrace ul.other_races{padding: 20px 0px 10px;}
	section.indexrace ul.other_races li:nth-child(2n){
		margin-right: 0;
	}
	section.indexrace ul.other_races li{
		width: 40%;
	}
}

@media screen and (max-width: 500px){
	section.indexrace ul.other_races li img{width: 150px;}
}