@charset "utf-8";
/* JCS Co.,Ltd. CSS Document */
/* =====================================

----------------------------------------
	INDEX
----------------------------------------
	1.base

	2.container（背景レイヤーを重ねる場合はココ）

	3.header

	4.gNav

	5.contents
		5-1.main
		5-2.sub

	6.footer

	7.ページ固有の指定
	
	8. 問合せフォーム
				
======================================== */
/* 1.base
======================================== */

html {
	clear:both;
	width: 100%;
}

.home .clearfix{
	clear: both;
}

.home .clearfix::after{
	content: ' ';
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}

/* body
---------------------------------------- */
body {
	color: #333;
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13px;
	position: relative;/* backgroundイメージ子の#containerのbox-shadowがieで効かなくなるバグ対策 */
	background-color: #fff;
	text-align: center;
    background-position: center 135px;
    background-repeat: no-repeat;
}

* html body {
	behavior: url("css/csshover3.htc");
}

.black {
	background-color: #000000;
	background-image: none;
}

.black #container{
	background-image: none;
}
	
.white{
    background-repeat: no-repeat;
	 background-image: none;
}

.event_in.lineup.event_end a div.text p.about span{
	font-size: 15px;
position: absolute;
top: 1213px;
}

/* common
---------------------------------------- */
p,li,dt,th,td,dd,span,strong,h1,h2,h3,h4,h5,h6,address {
	line-height: 1.5;
}


@media screen and (min-width:1000px){
    .pc-mode{
        display: block;
    }
    .sp-mode{
        display: none!important;
    }
        
    #headcontents {
        margin: 0 auto;
        max-width: 980px;
        width:100%;
        position: relative;
    }
}

@media screen and (max-width:999px){
        
    #headcontents {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
    }
     .pc-mode{
        display: none!important;
    }
    .sp-mode{
        display: block;
    }
    .responsive .hide{
        display: none!important;
    }
}

header {
	background-repeat: repeat-x;
}


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

a:link,
a:visited,
a:active {
	color: #333;
	text-decoration: none;
}

a:hover {
	color: #ff7500;
}

#main a:hover img,
#main .sideon .boxhover{
	filter: alpha(opacity=80);
	opacity:0.8;
}

#sub .sideon a:hover img,
#sub .sideon .boxhover{
	filter: alpha(opacity=80);
	opacity:0.8;
}

a {
	outline: none;
	overflow: hidden;
}

.margin-top0 {
	margin-top: 0 !important;
}

strong{
	font-weight: bold;
}

.left {
	float: left;
}

.right {
	float: right;
}

.pagetop {
	float: right;
    margin-bottom: 50px;
}

.pan{
	float: right;
    font-size: 10px;
    margin-bottom: 8px;
    margin-right: 10px;
    margin-top: 18px;
}

.pan a:hover {
	color: #000;
	font-style: italic;
	font-weight: bold;
	text-decoration: underline;
}

.bold{
	font-size: 14px;
	font-weight: bold;
}

img {
   vertical-align: auto;
}

/* 2.container
======================================== */
#container{
    margin: 0 auto;
}

#container img{
	vertical-align: bottom;
}


/* 3.header
======================================== */



#headcontents li.logo {
    padding-top: 16px;
}

#headcontents li.tel {
    margin-left: 78px;
    padding-top: 20px;
}

.h_space{
	margin-left: 5px;
    margin-right: 15px;
    margin-top: 20px;
}

/* 4.gNav
======================================== */
#gNav {
	left: 0px;
	overflow: hidden;
	position: absolute;
	top: 90px;
    max-width: 980px;
    width: 100%;
}
	
ul#gNav li {
	list-style-type: none;
		float: left;
}

/* 5.contents
======================================== */
#contents {
	clear: both;
	margin: 0 auto;
    max-width: 1000px;
    width: 100%;;
}

.genba{
    text-align: center;
    padding: 45px 0;
}



	/* 5-1.main
	---------------------------------------- */
	#main {
	float: left;
    margin-top: 5px;
    padding-left: 25px;
    text-align: left;
	}
	
	#main #layer,
	#main .layer {
		padding-bottom: 55px;
		width: 700px;
	}
		
	#main img{
	vertical-align: bottom;
	}
			
	/* 5-2.sub
	---------------------------------------- */
	#sub {
	display: block;
    float: right;
    font-size: 12px;
    margin-bottom: 50px;
    padding-right: 25px;
    text-align: left;
    width: 230px;
	}
	
	#sub ul.subbtn {
		padding-top: 27px;
	}
	
	#sub ul.info li{
		margin-top: 0;
	}
		
	#sub ul li {
	margin-bottom: 8px;
    margin-left: 4px;
    margin-top: 8px;
	}
	
	#sub ul li.sideon {
    margin-bottom: 15px;
    margin-top: 15px;
	}
	
	#sub ul li.contact {
	margin-bottom: 7px;
    margin-left: 6px;
    margin-top: 3px;
	}
		
	#sub ul.info{
		margin-bottom: 10px;
    margin-top: 10px;
	}
		
	#sub ul.info li.address{
	background-image: url("../images/sub_li.png");
	background-position: 2px 6px;
	background-repeat: no-repeat;
	border-left: 1px solid #FDB246;
	border-right: 1px solid #FDB246;
	margin-bottom: -3px;
	margin-left: 5px;
	margin-top: -9px;
	padding-bottom: 5px;
	padding-left: 25px;
	padding-top: 10px;
	width: 193px;
	line-height: 1.2;
	}
	
	#sub ul.info li.address2{
	border-left: 1px solid #FDB246;
    border-right: 1px solid #FDB246;
    font-size: 11px;
    line-height: 1.2;
    margin-bottom: -5px;
    margin-left: 5px;
    margin-top: 0;
    padding-bottom: 15px;
    padding-left: 25px;
    padding-top: 0;
    width: 193px;
	}
	
	#sub ul.info li.address span{
		font-weight: bold;
		font-size: 14px;
	}
	
	#sub ul.info li.address2 span{
		color: #F60;
	}

	.home .event_in .text{
		text-align: left;
	}


/* 6.footer
======================================== */
	footer{
		font-size: 14px;
	}
	
	footer .fnav .fnav_in li a{
		color: #fff;
	}
	
	footer h4{
		background-position: left center;
		background-repeat: no-repeat;
		text-align: left;
		font-weight: bold;
		margin-bottom: 15px;
	}
	
	
	footer .eventlist li{
		background-position: left 10px;
		background-repeat: no-repeat;
		line-height: 1.8;
		text-align: left;
	}
	
	footer .jcsgroup{
		background-color: #fff;
    background-position: center bottom;
    background-repeat: repeat-x;
    border-top: 1px solid #ddd;
	}
	
	footer .jcsgroup .p15{
		padding-top: 15px;
	    padding-bottom: 30px;
	}
	
	.border{
		 border-top: 1px solid #ccc;
	}
	
	p.copyright_in{
		margin: 0 auto;
    text-align: right;
	}
	
/* 7.ページ固有の指定
======================================== */
	/* /
	---------------------------------------- */
	.home{
		background-color: #f2f1eb;
		background-image: none;
	}
	
	#flashBox{
		background-color: #000;
		clear: both;
	}
	
	.flashBox_in {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
	}
 
	.flashBox_in iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
	}
    
   
    .main-video{
        width:100%;
        margin:auto;
        padding:0;
    }

    .twitter_box{
        margin-bottom: 60px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0;
        clear: both;
        width: 100%;
    }

    .twitter_box .box{
        width: 48%;
    }
	
	.freestylebtn{
	margin: 45px auto;
	}
	
	.freestylebtn a:hover{
		opacity: 0.8
	}
	
	.contents{
		margin: 0 auto;
		position: relative
	}
	
	.home .title{
		background-image: url("../images/title_icon.png");
		background-position: center bottom;
		background-repeat: no-repeat;
		font-family: "Yu Gothic UI";
		font-size: 35px;
		margin-top: 65px;
		padding-bottom: 15px;
	}
	
	.home h1{
		padding-top: 15px;
	}
	
	.home p.eng{
		font-family: "Yu Gothic UI";
		color: #9d9d9d;
		font-size: 20px;
		padding-top: 10px;
		margin-bottom: 50px;
	}
	
	.home .event {
	   width: 100%;
       margin-bottom: 20px;
	}
	
	.home .event_in{
		background-color: #fff;
		margin-right: 15px;
	}

	
	
	.home .event_two {
    float: left;
    margin-right: 15px;
    width: 322px;
	}
	
	.home .btm{
		margin-top: 18px;
	}
				
	.home .event_in .text{
		border-right: 4px solid #cecece;
		padding: 20px 20px;
		/*height: 132px;*/
		min-height: 132px;
		position: relative;
	}
	
	.home .lineup .text{
		height: 100px;
	}

		
	.home .small .text{
		float: right;
		height: 136px;
		padding-left: 0;
		padding-right: 10px;
		width: 110px;
	}
		
	.home .event_in p.about{
		font-weight: bold;
		line-height: 1.2;
		margin-bottom: 7px;
	}
	
	.home .small p.about {
		font-size: 17px;
	}
	
	.home .lineup p.about {
    font-size: 18px;
	}
	
	.home .event_in p.about2 {
		font-size: 12px;
	}
	
	.home .lineup p.about2 {
    	font-size: 10px;
	}
	
	.home .small p.about2 {
		font-size: 10px;
	}

	.home .event_in .morebtn{
		text-align: right;
		height: auto;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 2;
	}

	.home .event .morebtn{
		text-align: right;
		height: auto;
		position: absolute;
		right: -4px;
		bottom: 0;
		z-index: 2;
	}
	
	.home .event_end{
		margin-right: 0px;
	}
	
	.home .event_in .imgbox {
	  background: #ff7500;
	  position: relative;
	  overflow: hidden;
	}
	
	.home .small .imgbox{
		float: left;
		width: 182px;
	}
	
	.home .imgbox img {
	  display: block;
	  max-width: 100%;
	  opacity: 1;
	  -webkit-transition: opacity 0.4s, transform 0.4s;
	  transition: opacity 0.4s, transform 0.4s;
	  -webkit-transform: scale3d(1, 1, 1);
	  transform: scale3d(1, 1, 1);
	}
	
	.home .imgbox:hover img {
	  opacity: 0.3;
	  -webkit-transform: scale3d(1.2, 1.2, 1.2);
	  transform: scale3d(1.2, 1.2, 1.2);
	}
	
	.home .img-overlay {
	  opacity: 0;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  -webkit-transform: translate(-50%, -50%);
	  transform: translate(-50%, -50%);
	  width: 100%;
	  text-align: center;
	  -webkit-transition: opacity 0.4s;
	  transition: opacity 0.4s;
	}
	
	.home .imgbox:hover .img-overlay:hover {
	  opacity: 1;
	}
	
	
	.more {
    background: #ccc none repeat scroll 0 0;
    border: 3px solid #fff;
    border-radius: 6px;
    color: #333;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    margin: 45px auto 50px;
    padding: 20px 150px 18px;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	}
	
	.home .news,
	.home .link,
	.home .sns,
	.lineup{
		background-image: url("../images/hr.png");
		background-repeat: no-repeat;
		background-position: top center;
		padding-top: 5px;
	}

	.news{
		position: relative;
	}
	
 
 .kc_instagram{
	background: none;
}

.content{
	display: flex;
	flex-flow: wrap;
}



@media screen and (min-width:961px){

	header {
    	height: 135px;
	}
	
	.contents{
    	width: 998px;
	}

	.news_in{
		width: 766px;
	}

	
	.sns .sns_list{
		height: 106px;
	}	
	
	.link .link_list li{
		box-sizing: border-box;
		width: 33.333%;
		display: block;
		margin-bottom: 1%;
	}

	.home .event{
		display: flex;
	}

	

	
	.home .event_in p.about2 {
		font-size: 12px;
	}
	
	.home .lineup p.about2 {
    	font-size: 10px;
	}
	
	.home .small p.about2 {
    	font-size: 10px;
	}


		
	#headcontents li {
		float: left;
	}

	
	.home .event_in{
		max-width: 320px;
	}

	
	.home .img-title{
		width:110px; 
		margin-left:107px;
	}

	.home .small .img-title {
    	margin-left: 40px;
	}




	.link .link_list li a{
		display: block;
	}
	.sns .sns_list{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	
	.link .link_list, .sns .sns_list {
		position: relative;
		margin: 0 auto;
	}
	
	footer .fnav .fnav_in{
		width: 1000px;
		margin: 0 auto;
		text-align: left;
	}
	
	footer .fnav .fnav_in li{
		background-position: left center;
		background-repeat: no-repeat;
		float: left;
		margin-right: 24px;
		padding-left: 20px;
	}
	
	.news_in{
		background-color: #fff;
		border-right: 4px solid #cecece;
		margin: 0 auto;
		min-height: 250px;
		padding: 25px 115px;
		text-align: left;
	}
	
	.news_in li{
		border-bottom: 1px dotted #ccc;
		font-size: 14px;
		list-style: outside none none;
		padding: 15px 50px;
	}
	
	.news .news_in li span{
		font-weight: bold;
		margin-right: 15px;
	}
	
	
	.home .link,
	.home .sns{
		margin-bottom: 75px;
    	margin-top: 70px;
	}	
	
	
	
	.link .link_list li.end,
	.sns .sns_list li.end{
		margin-right: 0px;
	}

	#map {
	width: 1000px;
	height: 420px;
	background-color: grey;
	margin: 0 auto;
	}

	
	footer h4{
		padding-left: 20px;
	}
	
	.controls .filter{
		width: 320px;
	}
	
	
}


/**
	各端末フォント指定
	
	PCの設定
	フォントサイズ
	大タイトル：35px（下の英語：20）
	中タイトル：17px（最新イベント・ラインナップ中のタイトル）以下同様
	本文：10px（最新イベント・ラインナップ中の本文）以下同様

	ブレークポイント①
	タブレットの設定 : 960px未満 
	フォントサイズ
	大タイトル：30px（下の英語：18）
	中タイトル：17px
	本文：10px


	ブレークポイント②
	スマホの設定 : 560px未満
	フォントサイズ
	大タイトル：20px（下の英語：16）
	中タイトル：15px
	本文：10px

**/

a.flex-box{
	position: relative;
	display: block;
}

.controls{
	width: 100%;
}

.controls::after{
	content: ' ';
	clear: both;
	height: 0;
	visibility: hidden;
	display: block;
}

.controls .row{
	display: flex;
	flex-flow: wrap;
	box-sizing: border-box;
}

/** 修正前
.controls .filter{
	text-align: center;
	margin: auto auto 20px auto;
	color: #fff;
	padding: 10px;
	font-size: 20px;
	font-weight: bold;
	border-radius: 3px;
	border: none;
	box-sizing: border-box;
}

.controls .filter.c01{
	background-color:#f39800;
}
.controls .filter.c02{
	background-color:#8fc31f;
}
.controls .filter.c03{
	background-color:#e60012;
}
.controls .filter.c04{
	background-color:#9a9a9a;
}
.controls .filter.c05{
	background-color:#52a5dc;
}
.controls .filter.c06{
	background-color:#796baf;
}

.controls .filter.mixitup-control-active{
	opacity: 0.5;
}
**/
.controls .filter {
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	padding: 12px;
  display: inline-block;
	margin: auto auto 20px auto;
	border: none;
	box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  outline: none;
	border-radius: 8px;
	background-color: none;
}
.controls .filter::before,
.controls .filter::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.controls .filter,
.controls .filter::before,
.controls .filter::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.controls .filter.c01{
  background-color: #f39800;
  border: 3px solid #f39800;
  color: #fff;
  line-height: 40px;
}
.controls .filter.c01:hover {
  background-color: #fff;
  border-color: #f39800;
  color: #f39800;
}

.controls .filter.c02{
  background-color: #8fc31f;
  border: 3px solid #8fc31f;
  color: #fff;
  line-height: 40px;
}
.controls .filter.c02:hover {
  background-color: #fff;
  border-color: #8fc31f;
  color: #8fc31f;
}

.controls .filter.c03{
  background-color: #e60012;
  border: 3px solid #e60012;
  color: #fff;
  line-height: 40px;
}
.controls .filter.c03:hover {
  background-color: #fff;
  border-color: #e60012;
  color: #e60012;
}

.controls .filter.c04{
  background-color: #9a9a9a;
  border: 3px solid #9a9a9a;
  color: #fff;
  line-height: 40px;
}
.controls .filter.c04:hover {
  background-color: #fff;
  border-color: #9a9a9a;
  color: #9a9a9a;
}

.controls .filter.c05{
  background-color: #52a5dc;
  border: 3px solid #52a5dc;
  color: #fff;
  line-height: 40px;
}
.controls .filter.c05:hover {
  background-color: #fff;
  border-color: #52a5dc;
  color: #52a5dc;
}

.controls .filter.c06{
  background-color: #796baf;
  border: 3px solid #796baf;
  color: #fff;
  line-height: 40px;
}
.controls .filter.c06:hover {
  background-color: #fff;
  border-color: #796baf;
  color: #796baf;
}

#ytplayer{
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	max-width: 980px;
	margin-left:auto;
	margin-right:auto;
	display: none;
	z-index: 1;
}

#poster{
	max-width: 980px;
	height: auto;
	position: relative;
	margin-left:auto;
	margin-right:auto;
	z-index: 2;
}



@media screen and (min-width:961px){


	#ytplayer{
		top: -10vw;
	}


	.home .event_in p.about{
		font-size: 22px;
	}
	.controls{
		margin-bottom: 70px;
	}
	
	.event span{
		font-size: 54%
	}

}

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

	
	#ytplayer{
		top: -20vw;
	}


	.home .event_in p.about,
	.home .lineup p.about{
		font-size: 17px;
	}

	.home .event_in p.about2,
	.home .lineup p.about2{
		font-size: 12px;
	}

    .home .title{
        font-size: 30px;
	}
	
	.home p.eng{
		font-size: 18px;
	}

	.controls{
		margin-bottom: 45px;
	}



}



@media screen and (max-width: 720px){
	#ytplayer {
    	top: -30vw;
	}
}


@media screen and (max-width: 640px){
	#ytplayer {
    	top: -40vw;
	}
}

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


	#ytplayer{
		top: -50vw;
	}



	p,span,ul{
		font-size: 10px;
	}

	.home .event_in p.about,
	.home .lineup p.about{
		font-size: 15px;
	}

	.home .event_in p.about2,
	.home .lineup p.about2{
		font-size: 10px;
	}

    .home .title{
        font-size: 20px;
	}
	
	.home p.eng{
		font-size: 16px;
	}

}



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


	#ytplayer{
		top: -60vw;
	}

}

@media screen and (max-width: 330px){
	#ytplayer {
	    top: -75vw;
	}
}