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

@media screen and (min-width: 801px) {
/*==========================================
 pc/tab
===========================================*/
	
	/*-------------mv-------------*/

	#mv_box_wrap	 {
		margin: 0px auto;
		width: 100%;
		background: url("../images/mv_bg.jpg") no-repeat 0 0 / cover;
	}

	#mv {
		margin: 0px auto;
		width: 1000px;
		text-align: center;
	}

	#mv .tit{
		padding: 50px 0px 30px;
	}

	#mv .performer{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: stretch;
		align-items: stretch;
	}

	#mv .day {
		margin: 0px auto 20px;
		position: relative;
		display: inline-block;
	}

	#mv .day p{
		margin: auto;
		padding: 8px 30px 5px;
		font-size: 2.0em;
		line-height: 1.0;
		color: #FFF;
		position: relative;
		z-index: 1;
	}

	#mv .day:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 0;
		background-color: #212121;
		-webkit-transform: skew(-15deg);
		transform: skew(-15deg);
	}

	#mv .day span {
		font-size: 0.625em;
		font-weight: 600;
	}

	#mv .day .at {
		padding: 0 6px;
		font-size: 0.875em;
		font-weight: 600;
		vertical-align: middle;
	}

	#mv .performer li{
		width: 24%;
	}

	#mv .performer dl dt{
		width: 100%;
		height: 160px;
		overflow: hidden;
		position: relative;
	}

	#mv .performer dl dt img{
		width: 100%;
		height: auto;
		vertical-align: bottom;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	#mv .performer dl dt .posi01{
		width: 150%;
		padding-bottom: 30px;
	}

	#mv .performer .mv_art_name {
		margin: 0 auto;
		position: relative;
		display: inline-block;
		top: -15px;
	}

	#mv .performer .mv_art_name p{
		margin: auto;
		padding: 8px 20px 5px;
		font-size: 1.125em;
		line-height: 1.0;
		font-weight: bold;
		color: #FFF;
		position: relative;
		z-index: 1;
	}

	#mv .performer .mv_art_name:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 0;
		background-color: #212121;
		-webkit-transform: skew(-15deg);
		transform: skew(-15deg);
	}
	
		/*-------------offer-------------*/
 
		#offer_box {
			margin: 0px auto;
			width: 100%;
			background-color: #fff59f;
			background-image: -webkit-linear-gradient(45deg,  #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%),
																					-webkit-linear-gradient(-135deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%);
			background-image: linear-gradient(45deg,  #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%),
																					linear-gradient(-135deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%);
			-webkit-background-size: 8px 8px;
			background-size: 8px 8px;
			background-position: 0 0, 4px 4px;  
		}

		#offer {
			margin: 0px auto;
			padding: 40px 0;
			width: 1000px;
			text-align: center;
			position: relative;
			z-index: 1;
		}

		#offer h2 {
			font-size: 1.625em;
			font-weight: bold;
			color: #ffa200;
			text-shadow: #FFF 1px 1px 0px, #FFF -1px 1px 0px,
																#FFF 1px -1px 0px, #FFF -1px -1px 0px;
		}

		#offer h2 span {
			font-size: 1.154em;
			color: #FF0000;
			text-shadow: #FFF 1px 1px 0px, #FFF -1px 1px 0px,
																#FFF 1px -1px 0px, #FFF -1px -1px 0px;
		}	

		/*-------------lead-------------*/

		.lead_frame {
			margin: 0px auto;
			padding: 0;
			width: 1000px;
			background-color: rgba(255,255,255,0.8);
			border: 2px solid #212121;
	}

		.lead_frame .lead {
			margin: 10px auto;
			padding: 50px 40px 70px;
			width: 980px;
			background-image: url("../images/lead_bg_top.gif"),url("../images/lead_bg_middle.gif"),url("../images/lead_bg_bottom.gif");
			background-repeat: no-repeat, repeat-y, no-repeat;
			background-position: center top, center center,center bottom;
			-webkit-background-size: auto auto;
			background-size: auto auto;
			box-sizing: border-box;
		}

		.lead h2 {
			padding: 0 0 20px;
			font-size: 1.5em;
			font-weight: bold;
			color: #212121;
			text-align: center;
			text-decoration: underline;
		}
	
		/*-------------artist-------------*/
		.art_box{
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-align-items: stretch;
			align-items: stretch;
		} 

		.art_box dl{
			padding: 0 20px 50px 0; 
		}
	
		.art_box dl dt{
			margin: 0 0 30px;
			width: 450px;
			height: 300px;
			-webkit-box-shadow: 20px 20px rgba(255,167,0,1.0);
			box-shadow: 20px 20px rgba(255,167,0,1.0);
			-webkit-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}

		.art_box a:hover dl dt{
			-webkit-box-shadow: none;
			box-shadow: none;
		}

		.art_box dl dd{
			font-size: 1.5em;
			text-align: center;
		} 
 
		/*modal*/
		.remodal-cancel {
			width: 200px;
			color: #212121;
			background: #fff;
			border: 1px solid #212121;
		}
	
		.remodal-cancel:hover, .remodal-cancel:focus {
			background: #212121;
			color: #fff;
		}
	
		.remodal-close,.remodal-close::before {
			right: 0 !important;
			left:auto;
		}

		.modal_img {
			margin: 0px auto;
			padding: 0 0 20px;
		}

		.modal_img img {
			width: 450px;
			height: auto;
			vertical-align: bottom;
		}

		.modal_img .length {
			width: 350px;
			height: auto;
		}
 
 .link_box{
  margin: 0px auto 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
 }
 
 .link_box a{
  margin: 0px 10px;
		font-family: "Josefin Sans", "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;  
  font-weight: bold;
  color: #ffa700;
  border-radius: 4px; 
 }
 
 .link_box a:hover{
  color: #212121;
 }
 
 .link_box .official{
  padding: 5px 8px 5px 5px;
  line-height: 1.0;
  border: 1px solid #ffa700;
 }
 
 .link_box .official:hover{
  border: 1px solid #212121;
 }
 
 .link_box .fa-star{
  margin: 0px 5px 0px 0px;
 }
 
 .link_box .fa-twitter-square{
  font-size: 2.0em;
  line-height: 1.2;
  color: #1B95E0;
 }
 
 .link_box a:hover .fa-twitter-square{
  color: #212121;
 }

	/*-------------access-------------*/
	.map {
		margin: 0px auto;
		width: 850px;
	 display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: flex-start;
  align-items: flex-start;	
	}

	.map dt {
  margin-right: 20px;
		width: 515px;
		text-align: left;
	}
	
	/*-------------ticket-------------*/
 .qr{
  margin: 0px auto 20px;
 }

 .att{
  margin: 0 auto;
  width: 100%;
 }
 
}

@media screen and (max-width: 800px) {
/*==========================================
 smp
===========================================*/

	/*-------------mv-------------*/

	#mv_box_wrap	 {
		margin: 0px auto;
		height: auto;
		background: url("../images/mv_bg.jpg") no-repeat 0 0 / cover;
	}

	#mv {
		margin: 0px auto;
		width: 94%;
		text-align: center;
	}

	#mv .tit{
		padding: 80px 0px 16px;
	}

	#mv .day {
		margin: 0px auto 20px;
		position: relative;
		display: inline-block;
		width: 90%
	}

	#mv .day p{
		margin: auto;
		padding: 8px 4% 5px;
		font-size: 1.142em;
		line-height: 1.0;
		color: #FFF;
		position: relative;
		z-index: 1;
	}

	#mv .day:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 0;
		background-color: #212121;
		-webkit-transform: skew(-15deg);
		transform: skew(-15deg);
	}

	#mv .day span {
		font-size: 0.625em;
		font-weight: 600;
	}

	#mv .day .at {
		padding: 0 6px;
		font-size: 0.875em;
		font-weight: 600;
		vertical-align: middle;
	}
	
	#mv .performer{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: stretch;
		align-items: stretch;
	}

	#mv .performer li{
		width: 48%;
	}

	#mv .performer dl dt{
		width: 100%;
		height: 100px;
		overflow: hidden;
		position: relative;
	}

	#mv .performer dl dt img{
		width: 100%;
		height: auto;
		vertical-align: bottom;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	#mv .performer dl dt .posi01{
		width: 150%;
		padding-bottom: 30px;
	}

	#mv .performer .mv_art_name {
		margin: 0 auto;
		position: relative;
		display: inline-block;
		top: -15px;
	}

	#mv .performer .mv_art_name p{
		margin: auto;
		padding: 8px 20px 5px;
		font-size: 1.071em;
		line-height: 1.0;
		font-weight: bold;
		color: #FFF;
		position: relative;
		z-index: 1;
	}

	#mv .performer .mv_art_name:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 0;
		background-color: #212121;
		-webkit-transform: skew(-15deg);
		transform: skew(-15deg);
	}
	
		/*-------------offer-------------*/
 
		#offer_box {
			margin: 0px auto;
			width: 100%;
			background-color: #fff59f;
			background-image: -webkit-linear-gradient(45deg,  #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%),
																					-webkit-linear-gradient(-135deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%);
			background-image: linear-gradient(45deg,  #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%),
																					linear-gradient(-135deg, #fff 25%, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff 75%);
			-webkit-background-size: 8px 8px;
			background-size: 8px 8px;
			background-position: 0 0, 4px 4px;  
		}

		#offer {
			margin: 0px auto;
			padding: 20px 0;
			width: 94%;
			text-align: center;
		}

		#offer h2 {
			margin: 0px auto 20px;
			font-size: 1.143em;
			font-weight: bold;
			color: #ffa200;
			text-shadow: #FFF 1px 1px 0px, #FFF -1px 1px 0px,
																#FFF 1px -1px 0px, #FFF -1px -1px 0px;
		}

		#offer h2 span {
			font-size: 1.1875em;
			color: #FF0000;
			text-shadow: #FFF 1px 1px 0px, #FFF -1px 1px 0px,
																#FFF 1px -1px 0px, #FFF -1px -1px 0px;
		}	
	
		/*-------------lead-------------*/

		.lead_frame {
			margin: 0px auto;
			padding: 0;
			width: 100%;
			background-color: rgba(255,255,255,0.8);
			border: 2px solid #212121;
	}

		.lead_frame .lead {
			margin: 10px auto;
			padding: 25px 4% 35px;
			width: 96%;
			background-image: url("../images/lead_bg_top.gif"),url("../images/lead_bg_middle.gif"),url("../images/lead_bg_bottom.gif");
			background-repeat: no-repeat, repeat-y, no-repeat;
			background-position: center top, center center,center bottom;
			-webkit-background-size: 100% auto;
			background-size: 100% auto;
			box-sizing: border-box;
		}

		.lead h2 {
			padding: 0 0 20px;
			font-size: 1.1em;
			font-weight: bold;
			color: #212121;
			text-align: center;
			text-decoration: underline;
		}
	
			/*-------------artist-------------*/
		.art_box{
			display: -webkit-flex;
			display: flex;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-align-items: stretch;
			align-items: stretch;
		}
	
		.art_box a{
			margin: 0px 0px 20px;
			width: 48%;
		}
	
		.art_box dl{
			padding: 0 10px;
			width: 100%;
			box-sizing: border-box;
		}

		.art_box dl dt{
			margin: 0 0 20px;
			-webkit-box-shadow: 10px 10px rgba(255,167,0,1.0);
			box-shadow: 10px 10px rgba(255,167,0,1.0);
		}

		.art_box dl dd{
			font-size: 1.143em;
			text-align: center;
		}
	
			/*modal*/
  .remodal {
   padding: 35px 4%
  } 
 
		.remodal-cancel {
   margin: 10px auto 0;
			padding: 8px 0;
			width: 50%;
			color: #fff;
			background: #212121;
		}
	
		.remodal-cancel:hover, .remodal-cancel:focus {
			background: #212121;
		}

		.remodal-close,.remodal-close::before {
			right: 0 !important;
			left:auto;
		}

		.modal_img {
			margin: 0px auto;
			padding: 0 0 20px;
		}

		.modal_img img {
			width: 80%;
			height: auto;
			vertical-align: bottom;
		}

		.modal_img .length {
			width: 65%;
			height: auto;
		}
 
 .link_box{
  margin: 0px auto 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
 }
 
 .link_box a{
  margin: 0px 2%;
		font-family: "Josefin Sans", "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;  
  font-weight: bold;
  color: #ffa700;
  border-radius: 4px; 
 }
 
 .link_box .official{
  padding: 5px 8px 4px 5px;
  line-height: 1.0;
  border: 1px solid #ffa700;
 }
 
 .link_box .fa-star{
  margin: 0px 5px 0px 0px;
 }
 
 .link_box .fa-twitter-square{
  font-size: 2.2em;
  line-height: 1.2;
  color: #1B95E0;
 }
 

			/*-------------access-------------*/
		
	.map {
		margin: 0px auto;
	 align-items: center;	
	}
	
	.map dt{
		margin: 0px auto 10px;
	}
	
	.map dd iframe{
		width: 100%;	
	}
 
	/*-------------ticket-------------*/
 .qr{
  margin: 0px auto 10px;
  width: 40%;
 }

}