@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: contents.css
 * Summary:   各コンテンツ用スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    home
 *     =2    youtube
 *
 * ===============================================================
*/



/** =1
 * ========================================
 * home
 * ========================================
 */

#home {
}
/*--------intro-------- */
#home #main article#intro p.senkou{
	text-align:center;
}


		/*--------intro-------- */
		#home #main article .banner#bnr_l p{
			margin-bottom:0;
			text-align:center;
			padding:0 0;
		}

		#home #main article .banner#bnr_s p{
			margin-bottom:0;
			margin-top:1rem;
			text-align:center;
			padding:0 0;
		}


		#home #main article .banner p a{
			display:inline-block;
			width:98%;
			padding:0 1%;
			margin:0 0 3% 0 ;
		}


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

		#home #main article .banner#bnr_l p a{
			width: 80%;
			margin:0 auto 2% auto;
		}

		#home #main article .banner#bnr_s p a{
			width: 48%;
			margin:0 0 2% 0;
		}

}



/*--------band-------- */
#home #main article#band .band_area{
}
#home #main article#band .band_area ul{
	text-align: center
}
#home #main article#band .band_area ul li{
	position:relative;
	width:32.3333%;
	display:inline-block;
	margin-bottom:20px;
	margin-top:20px;
}
#home #main article#band .band_area ul li:before{
	display:inline-block;
	width:172px;
	height:60px;
	position: absolute;
	top:-26px;
	left:-5px;
	content:" ";
	background-size:contain;
	vertical-align:middle;
	background-repeat: no-repeat;
}

@media screen and (max-width:768px){
#home #main article#band .band_area ul li {
	margin:20px 1% 10px;
	width:47%;
}

#home #main article#band .band_area ul li:before{
    width: 126px;
    height: 43px;
    top: -20px;
    left: -5px;
}


}



#home #main article#band .band_area ul li:nth-child(1):before{background-image:url(../src/band/order_1.png)}
#home #main article#band .band_area ul li:nth-child(2):before{background-image:url(../src/band/order_2.png)}
#home #main article#band .band_area ul li:nth-child(3):before{background-image:url(../src/band/order_3.png)}
#home #main article#band .band_area ul li:nth-child(4):before{background-image:url(../src/band/order_4.png)}
#home #main article#band .band_area ul li:nth-child(5):before{background-image:url(../src/band/order_5.png)}
#home #main article#band .band_area ul li:nth-child(6):before{background-image:url(../src/band/order_6.png)}
#home #main article#band .band_area ul li:nth-child(7):before{background-image:url(../src/band/order_7.png)}
#home #main article#band .band_area ul li:nth-child(8):before{background-image:url(../src/band/order_8.png)}
#home #main article#band .band_area ul li:nth-child(9):before{background-image:url(../src/band/order_9.png)}


#home #main article#band .band_area ul li img{
	width:100%;
	height:auto;
}
#home #main article#band .band_area ul li.new a,
#home #main article#band .band_area ul li.add a{
	position:relative;
}
#home #main article#band .band_area ul li.new a:before{
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    background: url(../src/band/new.png) no-repeat 0 0;
    background-size: 100%;
    height: 25%;
    width: 25%;
    z-index: 100;
}
#home #main article#band .band_area ul li.add a:before{
    position: absolute;
    top: 0;
    left: 0;
    content: " ";
    background: url(../src/band/add.png) no-repeat 0 0;
    background-size: 100%;
    height: 25%;
    width: 25%;
    z-index: 100;
}

@media screen and(min-width:768px){
	#home #main article#band .band_area ul li.new a:before,
	#home #main article#band .band_area ul li.add a:before{
    height: 55px;
    width: 64px;
	}

}
/*--------bandOther-------- */
#home #main article#band .bandOther_area{}
#home #main article#band .bandOther_area .artist{
	margin-bottom: 20px;
}
#home #main article#band .bandOther_area .artist img{
	width: 100%;
}

/*--------ticket map-------- */


#ticket a#btn_reserve{
	background:#e51555;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #e51555), color-stop(0.00, #ed5483));
	background: -webkit-linear-gradient(#ed5483, #e51555);
	background: -moz-linear-gradient(#ed5483, #e51555);
	background: -o-linear-gradient(#ed5483, #e51555);
	background: -ms-linear-gradient(#ed5483, #e51555);
	background: linear-gradient(#ed5483, #e51555);
	line-height:1;
	font-size:24px;
	padding: 24px 3% 24px 10%;
  display: block;
  width: 87%;
  text-align:center;
	font-weight:bold;
	color:#fff;
	text-decoration:none;
	margin:10px auto 0;
	border-radius:10px;
	transition:width .05s linear,background .05s linear ;
	-webkit-transition:width .05s linear,background .05s linear ;
	-moz-transition:width .05s linear,background .05s linear ;
	position: relative;
}

#ticket a#btn_reserve:hover{
	background:#ed5d8a;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #ed5d8a), color-stop(0.00, #ed5483));
	background: -webkit-linear-gradient(#ed5483, #ed5d8a);
	background: -moz-linear-gradient(#ed5483, #ed5d8a);
	background: -o-linear-gradient(#ed5483, #ed5d8a);
	background: -ms-linear-gradient(#ed5483, #ed5d8a);
	background: linear-gradient(#ed5483, #ed5d8a);

}

#ticket a#btn_reserve:before{
	content:"▶︎";
	position:absolute;
	left:3%;
	top:45px;
	font-size:32px;

}

#ticket a#btn_reserve span{
    display: block;
    font-size: 18px;
    margin-top: 12px;
    line-height: 1.2;
    background: #fff;
    padding: 5px;
    border-radius: 5px;
    color: #e51555;
    margin:10px 3% 0;
    text-align: center;
}

@media screen and (min-width:768px){
	#ticket a#btn_reserve span{
	    margin:10px 0 0;
	}
}

#ticket table{border-collapse: collapse;background:#fcf6e8;}
#ticket th,#ticket td{padding:10px;vertical-align: middle;text-align: left;border:solid 2px #f7ecd0;border-left:none;border-right:none;}
#ticket th{color:#fff;}
#ticket td{background:#fff;}
#ticket th.eplus{background: #e95098;}
#ticket th.lawson{background: #009ee0;}
#ticket th.pia{background: #3366cc;}
#ticket th.yunakama{background: #f14b4b;}
#ticket th.rakuten{background: #C00;}
#ticket th.cn{background: #ea1d2b;}
#ticket th.yahoo{background: #00aeb1;}
#ticket th.hanshin{background: #00694f;}
#ticket th.seven{background: #f85294;}


#ticketbtn{
	display:block;
	margin: 0;
	width: 100%;
	background: #e51555;
	color: #fff;
	position:fixed;
	right: 0;
	z-index: 1000;
	text-align: center;
	text-decoration: none;
	font-weight: xbold;
	transition:bottom 0.5s,font-size .05s;
	-webkit-transition:bottom 0.5s,font-size .05s;
	-moz-transition:bottom 0.5s,font-size .05s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transition-timing-function:ease-out;
	padding:1rem 0;
	bottom: -130px;
}

#ticketbtn.fig{	bottom:0;}
#ticketbtn.big{	font-size:24px;}


#ticketbtn a{
	transition:color 0.5s,background .05s;
	-webkit-transition: color 0.5s,background .05s;
	-moz-transition:color 0.5s,background .05s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transition-timing-function:ease-out;
margin:0 0.5%;
	padding:15px 5%;
	display:inline-block;
	color:#e51555;
	text-decoration: none;
	line-height: 1;
	text-align: center;
	border-radius: 5px;
	background: #fff;	
}
#ticketbtn a:hover{
	color:#111;
	background: #fefe39;	
}

#ticketbtn p{
	font-size: 22px;
}
@media screen and (min-width:769px){
	#ticketbtn p{
		display:inline-block;
	}
	#ticketbtn{
		bottom: -90px;
	}
}


#home #main article#ticket ul li,
#home #main article#map ul li{
	margin-bottom:5px;
	padding-left:25px;
	background:url(../src/common/icon.png) 0 4px no-repeat;
	background-size:20px 20px;
}

/*--------map-------- */
#home #main article#map h3{
	color:#c22558;
	font-weight:bold;
	border-bottom:solid 2px #c22558;
	padding-bottom:3px;
	margin-bottom:10px;
	font-size:120%;
}

/*--------banner_otodama-------- */

#footer .banner_otodama{
	float:left;
	width:200px;
	margin:10px auto 10px auto;
}
#footer .banner_otodama a:hover{
	filter: alpha(opacity=65);
	-moz-opacity:0.65;
	opacity:0.65;
}


		#home #main article#band .band_area ul li a{
			display:block;
			width:100%;
			height:100%;
		}

	/* -- >>> styles for narrow layout ----- */


	@media screen and (max-width: 767px) {
		#home {
		}

		#home #main article#intro .btn{
			clear:both;
			position:relative;
			overflow:hidden;
		}
		#home #main article#intro .btn ul{
			position:relative;
			left:50%;
			float:left;
		}
		#home #main article#intro .btn ul li{
			position:relative;
			left:-50%;
			float:left;
			width:47%;
			margin:0 1.5% 10px 1.5%;
		}


		/*--------ticket map-------- */
		#home #main article#ticket ul li span{
			display:block;
		}
		
		}
		/*--------map-------- */
		#home #main article#map .gmap{
			position: relative;
			padding-bottom: 75%; // これが縦横比
			height: 0;
			overflow: hidden;
			margin:0 10px;
		}
		#home #main article#map .gmap iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
		}
		#footer .banner_otodama{
			width:150px;
		}
	}



	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 768px) {
		#home {
		}
		/*--------intro-------- */

		#home #main article#intro .banner ul li{
			text-align:center;
			margin:0 auto 10px auto;
		}
		#home #main article#intro .banner ul li.ticket{
			margin-top:20px;
		}
		
		#home #main article#intro p.senkou a:hover{
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
		}

		#home #main article#intro .banner p:hover{
			filter: alpha(opacity=75);
			-moz-opacity:0.75;
			opacity:0.75;
		}
		#home #main article#intro .btn{
			clear:both;
			position:relative;
			overflow:hidden;
		}
		#home #main article#intro .btn ul{
			position:relative;
			left:50%;
			float:left;
		}


		/*--------band-------- */
		#home #main article#band .band_area ul li {
			/*4列
			margin:0 0.5% 10px 0.5%;
			width:24%;
			*/
			margin:0 1% 10px 2%;
			width:30%;

		}
		#home #main article#band .band_area ul li a img:hover{
	     filter: alpha(opacity=75);
	    -moz-opacity:0.75;
	    opacity:0.75;
		}
		#home #main article#band .band_area ul li span.new{
			width:50px;
		}
		/*--------bandOther-------- */
		#home #main article#band .bandOther_area .artist {
			margin-bottom: 50px;
		}
		/*--------map-------- */
		#home #main article#map section{
			float:left;
			width:45%;
		}
		#home #main article#map .gmap{
			float:right;
		}
	}


/** =2
 * ========================================
 * youtube
 * ========================================
 */

#youtube #main article h3{
	color:#c22558;
	font-weight:bold;
	font-size:120%;
	margin:0 0 10px 0;
	padding-bottom:10px;
	border-bottom:solid 2px #c22558;
	line-height:1.2;
}
#youtube #main article h3 div{
	font-size:80%;
}
#youtube #main article div.video-container{
	width:100%;
    height: auto;
    background:#F2F2F2;
    margin:0 auto;
}

#youtube #main article div.video{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
	z-index:0;
}

#youtube #main article div.video iframe,
#youtube #main article div.video object,
#youtube #main article div.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		#youtube #main article .field{
			margin:0 10px 20px 10px;
			padding-bottom:20px;
			border-bottom:dotted 1px #666;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 768px) {
		#youtube #header {
			width: 1000px;
			height: 250px;
			margin-top:10px;
			background:url(../src/youtube/header_back.png) 0 0 no-repeat;
		}
		#youtube #header h1 .logo{
			position:absolute;
			right:80px;
			top:0px;
		}
		#youtube #main article .field{
			margin:0 1% 40px 1%;
			float:left;
			width:31.3%;
		}

	}
	
	

	
/*preview*/
#preview h3{
	background: #008793;
    color: #FFF;
    font-weight: bold;
    padding: 4px 0 4px 35px;
    margin: 20px 0 10px 0;
    text-align: center;
}
#preview ul {
    display: block;
    list-style: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
	
	
#preview li.youtube-videogallery-item {
  border-radius: 5px;
  display: inline-block;
  list-style: none;
  width: 48%;
  padding:1%;
}


		#ticket a:hover img{
				filter: alpha(opacity=65);
	-moz-opacity:0.65;
	opacity:0.65;
}