@charset "UTF-8";

.js-fadeIn{
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity, transform;
	transform: translate(0, 150px);
}
.is-scrollIn {
	opacity: 1;
	transform: translate(0, 0);
}
.js-fadeIn.left{
	transition-duration: 0.3s;
	transform: translate(-300px, 0);
}
.is-scrollIn.left {
	transform: translate(0, 0);
}

/*-------------------------------------------------------------------------------------
home
--------------------------------------------------------------------------------------*/
#home #Notice{
	max-width: 1220px;
	margin: 0 auto 80px;
	padding: 20px;
	border: 4px solid #fff;
}
#home #Notice h3{
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}
#msHeader{
	background: #101010;
}
#home .ticket-sales{
	margin: 0 0 60px;
	text-align: center;
}
#home .ticket-sales span{
	padding: 0 0 5px;
	font-size: 30px;
	font-weight: bold;
	border-bottom: 5px solid #333;
}
#home .ticket-sales span strong{
	font-size: 42px;
}
#home .ticket-sales p{
	margin-top: 20px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
#home .lead{
	margin: 0 0 30px;
	font-size: 18px;
	text-align: center;
}
#home .bg{
	background: url(../images/bg.png) center center no-repeat;
	-webkit-background-size: cover!important;
	background-size: cover!important;
}

#home #spot-entry{
	margin-top: 60px;
}
#home #spot-entry .contents-inner{
	padding-top: 60px;
	border-top: 1px solid #666;
}

/*-------------------------------------------------------------------------------------
top main visual
--------------------------------------------------------------------------------------*/
#topMainVisual {
	min-width: 980px;
    margin: 0 0 60px;
}
#topMainVisual img {
	width: 100%;
	height: auto;
}

/*-------------------------------------------------------------------------------------
nav
--------------------------------------------------------------------------------------*/
#sitenavi{
	background: none!important;
}
#sitenavi ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-o-justify-content: center;
	justify-content: center;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
}
#sitenavi ul li{
	padding: 0 10px;
}
#sitenavi ul li a{
	text-decoration: none;
	transition: 0.6s;
}
#sitenavi ul li a:hover{
	opacity: 0.5;
}
#sitenavi ul li a .thum{
	display: block;
	width: 130px;
	margin: 0 auto 10px;
}
#sitenavi ul li a .txt{
	display: block;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

/*-------------------------------------------------------------------------------------
Movie
--------------------------------------------------------------------------------------*/
#movie{
	
}
#movie .movie-list{
	
}
#movie .movie-list ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}
#movie .movie-list ul li{
	width: 33.3%;
	padding: 0 10px;
}
#movie .movie-list ul li video{
	width: 100%;
	height: 100%;
}

/*-------------------------------------------------------------------------------------
Driver
--------------------------------------------------------------------------------------*/
#driver{
	
}
#driver .drivers-list{
	overflow: hidden;
}
#driver .drivers-list ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0 -15px;
}
#driver .drivers-list ul li{
	width: 33.3%;
	padding: 15px;
}
#driver .drivers-list ul li .thum{
	position: relative;
}
#driver .drivers-list ul li .thum .rank{
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	padding: 5px 10px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	background: #666;
	z-index: 1;
}
#driver .drivers-list ul li .num{
	font-size: 18px;
	font-weight: bold;
}
#driver .drivers-list ul li .flex{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
#driver .drivers-list ul li .left,
#driver .drivers-list ul li .right{
	width: 50%;
}
#driver .drivers-list ul li .name{
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
#driver .drivers-list ul li .name span{
	display: block;
	font-size: 14px;
}
#driver .drivers-list ul li .en{
	font-size: 13px;
	text-align: center;
}

/*-------------------------------------------------------------------------------------
event
--------------------------------------------------------------------------------------*/
.event-list ul li{
	margin: 0 0 30px;
}
.event-list ul li .flex{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-align-items: center;
	align-items: center;
}
.event-list ul li .flex .thum{
	width: 300px;
}
.event-list ul li .flex .box{
	width: calc(100% - 300px);
	padding-left: 20px;
}
.event-list ul li .flex .box .title{
	margin: 0 0 20px;
	font-size: 26px;
	font-weight: bold;
}
.event-list ul li .flex .box .txt{
	font-size: 16px;
}
.event-list ul li .pickup{
	display: block;
	max-width: 640px;
	margin: 0 auto;
}
.event-list ul li .pickup .thum,
.event-list ul li .pickup .box,
.event-list ul li .pickup .accordion-content{
	width: auto;
	padding: 0;
}

.event-list ul li .event-more{
	margin-left: 10px;
	text-align: left;
}
.event-list ul li .event-more.active{
	content: "close";
}
.event-list ul li .more-txt{
	display: none;
}
.event-list ul li .more-txt.pc{
	display: inline!important;
}
.event-list ul li .more-txt.active{
	display: inline!important;
}
.event-list ul li .accordion-content{
	width: calc(100% - 300px);
	margin-left: auto;
	padding-left: 20px;
}
.event-list ul li .accordion-content ul li{
	margin: 0;
}

/*-------------------------------------------------------------------------------------
timetable
--------------------------------------------------------------------------------------*/
.timetable-group{
	margin: 0 0 30px;
	padding: 20px;
	font-size: 16px;
	background: #fff;
}
.timetable-group .ttl{
	margin: 0 0 15px;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}
.timetable-group dl{
	max-width: 480px;
	margin: 0 auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-o-flex-wrap: wrap;
	flex-wrap: wrap;
	font-weight: bold;
	border-top: 1px dotted #333;
}
.timetable-group dt,
.timetable-group dd{
	padding: 5px 0;
}
.timetable-group dt{
	width: 110px;
	border-bottom: 1px dotted #333;
}
.timetable-group .gr-1{
	color: #0f2563;
}
.timetable-group .gr-2{
	color: #c21825;
}
.timetable-group dd{
	width: calc(100% - 110px);
	border-bottom: 1px dotted #333;
}
#timetable .schedule{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	-o-justify-content: space-between;
	justify-content: space-between;
}
#timetable .schedule .sat,
#timetable .schedule .sun{
	width: 48%;
}
#timetable .schedule .ttl{
	margin: 0 0 10px;
}
#timetable .schedule .schedule-more{
	display: none;
	margin: 20px 0 0;
}
#timetable .schedule .schedule-more table{
	width: 100%;
	border-collapse:collapse;
	border-spacing:0;
}
#timetable .schedule .schedule-more table th,
#timetable .schedule .schedule-more table td{
	padding: 8px;
	color: #333;
	font-size: 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #d4d4d4;
}
#timetable .schedule .schedule-more table th{
	width: 150px;
	background: #eee;
}
#timetable .schedule .schedule-more table td{
	background: #fff;
}

/*-------------------------------------------------------------------------------------
food
--------------------------------------------------------------------------------------*/
#food .food-map{
	max-width: 640px;
	margin: 30px auto 0;
}

/*-------------------------------------------------------------------------------------
other
--------------------------------------------------------------------------------------*/
#other{
	margin: 60px 0 0;
}

/*-------------------------------------------------------------------------------------
RSS表示
--------------------------------------------------------------------------------------*/

.rssFeedWrap {
    margin: 25px auto 0;
    text-align: center;
    /*width: 48%;*/
}

.rssFeedWrap .updateTitle {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
}

.rssFeedWrap ul {
    border-top: 1px solid #888888;
    max-height: 310px;
    overflow: auto;
    width: 100%;
}

.rssFeedWrap ul li a {
    display: block;
    padding: 15px 0;
    text-decoration: none !important;
}

.rssFeedWrap ul li:last-child a:after {
    border-bottom: none;
}

.rssFeedWrap ul li {
    display: block;
    font-size: 16px;
    overflow: hidden;
    width: 100%;
	border-bottom: 1px solid #888888;
}

.rssFeedWrap ul li dl {
    margin: 0 0 0 10px;
    text-align: left;
    text-decoration: none !important;
}

.rssFeedWrap ul li dl dt {
    display: inline-block;
    vertical-align: text-top;
    text-decoration: none !important;
    width: 130px;
}

/*.rssFeedWrap ul li dl dt:after {
    content: '\00bb';
    margin-left: 6px;
}*/

.rssFeedWrap ul li dl dd {
    display: inline-block;
    text-decoration: none !important;
    vertical-align: text-top;
    width: -webkit-calc(100% - 140px);
    width: calc(100% - 140px);
}

.rssFeedWrap ul li a:hover dl dd {
    text-decoration: underline !important;
}

/*-------------------------------------------------------------------------------------
other
--------------------------------------------------------------------------------------*/
#other{
	
}
#other .otherlink{
	overflow: hidden;
}
#other .otherlink ul{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin: 0 -8px;
}
#other .otherlink ul li{
	width: 33.3%;
	padding: 8px;
}
#other .otherlink ul li a{
	display: block;
	color: #333;
	text-decoration: none;
	border-radius: 10px;
	background: #fff;
	transition: 0.6s;
}
#other .otherlink ul li a:hover{
	opacity: 0.5;
}
#other .otherlink ul li a span{
	display: block;
}
#other .otherlink ul li a .thum img{
	border-radius: 10px 10px 0px 0px;
}
#other .otherlink ul li a .caption{
	padding: 10px 15px;
}


/*-------------------------------------------------------------------------------------
開催概要
--------------------------------------------------------------------------------------*/
#outline{
	margin: 60px 0 0;
}
.eventOutline {
	padding: 40px;
	color: #333;
	border-radius: 10px;
	background: #fff;
}

.eventOutline .eventOutlineTitle {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 30px;
}

.eventOutline ul {
    margin: 20px auto 0;
}

.eventOutline ul li {
    display: block;
    padding: 5px 0;
    text-decoration: none !important;
}

.eventOutline ul li {
    display: block;
    font-size: 16px;
    overflow: hidden;
    width: 960px;
}

.eventOutline ul li dl {
    margin: 0 20px;
    text-align: left;
}

.eventOutline ul li dl dt {
    display: inline-block;
    vertical-align: text-top;
    width: 130px;
}

.eventOutline ul li dl dd {
    display: inline-block;
    vertical-align: text-top;
    width: 780px;
}

/*-----------------------------------------
summer
-----------------------------------------*/
#msContent .summer{
	margin: 60px 0 0;
	padding: 50px 0;
	color: #333;
	background: #fff;
}
#msContent .summer a{
	color: #333;
}
#msContent .summer h1{
	margin: 40px 0;
	font-size: 40px;
	line-height: 1.2;
	text-align: center;
	background: -webkit-gradient(linear, top left, top right, from(#027cc4), to(#09a045));
    background: linear-gradient(to right, #027cc4 0%, #09a045 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#msContent .summer h2 span{
	font-size: 26px;
	line-height: 1.4;
}
#msContent .summer .btn a{
	color: var(--color-bg);
	border: 2px solid var(--color-main);
	background: var(--color-txt);
}
#msContent .summer .btn a:hover{
	color: var(--color-txt);
	border: 2px solid var(--color-bg);
	background: var(--color-bg);
}
#msContent .summer .btn a:after{
	color: var(--color-txt);
}
#msContent .summer .btn a:hover:after{
	color: var(--color-txt);
}
#msContent .summer .guide-bnr{
	margin: 50px 0 0;
	text-align: center;
}
#msContent .summer .btn-red a{
	color: #fff;
}
#msContent .summer .btn-red a:hover{
	color: #333;
	background: #f5f5f5;
}