@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{
	border-bottom:dotted 1px #999;
}
#home #main article#intro .btn ul li img{
	width:100%;
}
#home #main article#intro p.senkou{
	text-align:center;
}
/*--------band-------- */
#home #main article#band .band_area{
	position:relative;
	overflow:hidden;
}
#home #main article#band .band_area ul{
	position:relative;
	left:50%;
	float:left;
}
#home #main article#band .band_area ul li{
	position:relative;
	left:-50%;
	float:left;
}
#home #main article#band .band_area ul li span.new{
	position:absolute;
	top:0;
	left:0;
}

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

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

/*--------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;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#home {
		}
		/*--------intro-------- */
		#home #main article#intro .banner ul li{
			margin-bottom:10px;
			text-align:center;
		}

		#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%;
		}

		/*--------band-------- */
		#home #main article#band .band_area ul{
			margin-bottom:10px;
		}
		#home #main article#band .band_area ul li {
			margin:0 0.5%;
			width:32%;
		}
		#home #main article#band .band_area ul li span.new{
			width:30px;
		}
		/*--------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 medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 979px) {
		#home {
		}
		/*--------intro-------- */
		#home #main article#intro .banner ul li{
			margin-bottom:10px;
			text-align:center;
		}

		#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:44%;
			margin:0 3% 10px 3%;
		}

		/*--------band-------- */
		#home #main article#band .band_area ul{
			margin-bottom:10px;
		}
		#home #main article#band .band_area ul li {
			margin:0 1.5%;
			width:30%;
		}
		#home #main article#band .band_area ul li span.new{
			width:50px;
		}
		/*--------map-------- */
		#home #main article#map .gmap{
			position: relative;
			padding-bottom: 45%; // これが縦横比
			height: 0;
			overflow: hidden;
			margin:0 30px;
		}
		#home #main article#map .gmap iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100% !important;
			height: 100% !important;
		}
		#footer .banner_otodama .banner_younglion{
			width:150px;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 980px) {
		#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;
		}
		#home #main article#intro .btn ul li{
			position:relative;
			left:-50%;
			float:left;
			margin:0 5px 10px 5px;
		}
		#home #main article#intro .btn ul li.johnny{width:230px;}
		#home #main article#intro .btn ul li.btn_youtube{width:230px;}
		#home #main article#intro .btn ul li.twitter{width:180px;}
		#home #main article#intro .btn ul li.last_year{width:180px;}

		#home #main article#intro .banner{
			clear:both;
			position:relative;
			overflow:hidden;
		}

		#home #main article#intro .banner ul{
			position:relative;
			left:50%;
			float:left;
		}

		#home #main article#intro .banner ul li{
			position:relative;
			left:-50%;
			float:left;
			width:48%;
			margin:0 1% 10px 1%;
		}
		#home #main article#intro .banner ul li.report{
			margin-top:20px;
		}
		
		/*--------band-------- */
		#home #main article#band .band_area ul li {
			margin:0 0.5% 10px 0.5%;
			width:24%;
		}
		#home #main article#band .band_area ul li a{
			display:block;
			width:100%;
			height:100%;
		}
		#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;
		}
		/*--------map-------- */
		#home #main article#map section{
			float:left;
		}
		#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: 599px) {
		#youtube #main article .field{
			margin:0 10px 20px 10px;
			padding-bottom:20px;
			border-bottom:dotted 1px #666;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 979px) {
		#youtube #main article .field{
			margin:0 2% 40px 2%;
			float:left;
			width:46%;
		}

	}
	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 980px) {
		#youtube #header {
			width: 1000px;
			height: 250px;
			margin-top:10px;
			background:url(/src/otodama/14/pc/younglion/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%;
		}

	}