@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    detail
 *     =3    band
 *     =4    map
 *     =5    access
 *     =6    notice
 *     =7    goods
 *     =8    museum
 *     =9    ticket
 *     =10   goods_sale
 *
 * ===============================================================
*/

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

#home {
}

/* ==== header ==== */
#home #header{
	background:#fffbc3;
	margin:0;
}
#home #header section{
	margin:0;
	padding:0;
}
#home #header section h1{
	margin:0;
	padding:0;
}

/* ==== link ==== */
#home #link {
	clear:both;
	background:#FFFFFF;
	padding:10px;
	border-top:solid 2px #c7000a;
}
#home #link section dl dt{
	color:#cd1400;
	font-size:85%;
}
/* ==== main ==== */
#home #main #subnav{
	margin:0 0 20px 0
}
#home #main #subnav ul li{
	float:left;
	width:29.3%;
	margin:0 2% 10px 2%;
	padding:3px 0;
	background:#FFF;
	text-align:center;
    border-radius: 3px;
    -webkit-border-radius:3px;
    -moz-border-radius: 3px;
    box-shadow: 0 0 0 1px #c7000a, 0 0 0 3px #fff;
}
#home #main #subnav ul li a{
	display:block;
	width:98%;
	padding:0 1%;
	height:auto;
	color:#FFF;
	text-decoration:none;
}
#home #main .banner p{
	width:96%;
	margin:0 auto 10px auto;
}
#home #main .banner ul li{
	width:46%;
	margin:0 2% 10px 2%;
	float:left;
}

/* ==== link ==== */
#home #link {
	background:#FFFFFF url(/src/otodama/14/pc/index/link_back.png) 50% 0 repeat-x;
	border-top:none;
	padding:35px 10px 10px 10px;
}

/* ==== footer ==== */
#home #footer{
	padding:0;
	background-image:none;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#home {
		}
		/* ==== header ==== */
		#home #header .mainimg_chara{
			background:none;
		}
		#home #header h1{
			width:100%;
			height:auto;
		}
		/* ==== main ==== */
		#home #main .twitter{
			display:none;
		}
		/* ==== link ==== */
		#home #link section{
			clear:both;
		}
		#home #link section dl,
		#home #link section dl.kyoryoku dd,
		#home #link section dl.gakuya dd{
			float:left;
			margin:0 10px 10px 0px;
		}
		#home #link section dl dd{
			width:74px;
		}
		#home #link section dl.sc dd,
		#home #link section dl.gakuya dd.botambourine{
			width:50px;
		}
		#home #link section dl.kyoryoku dd{
			width:74px;
		}
		#home #link section dl.kyoryoku dd.cat,
		#home #link section dl.kyoryoku dd.vao,
		#home #link section dl.kyoryoku dd.crea{
			width:50px;
		}
		#home #link section dl.kyoryoku dd.jungle,
		#home #link section dl.kyoryoku dd.purupo,
		#home #link section dl.tohoku dd,
		#home #link section dl.gakuya dd.mushup{
			width:100px;
		}
		#home #link section dl.kyoryoku dd.syf,
		#home #link section dl.gakuya dd.ajihito{
			width:30px;
		}
		#home #link section.twitter_btn p{
			width:145px;
		}
		#home #main #subnav ul li a{
			display:block;
			width:70%;
			padding:0 15%;
			height:auto;
			background:#FFF;
			text-decoration:none;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#home {
		}
		/* ==== header ==== */
		#home #header .mainimg_chara{
			background:none;
		}
		#home #header h1{
			width:100%;
		}
		/* ==== link ==== */
		#home #link section{
			float:left;
		}
		#home #link section dl,
		#home #link section dl.kyoryoku dd,
		#home #link section dl.gakuya dd{
			float:left;
			margin:0 10px 10px 0px;
		}
		/*#home #link section dl.kyoryoku,
		#home #link section dl.tohoku{
			clear:both;
		}
		*/
		#home #link section dl dd,
		#home #link section dl.gakuya dd{
			width:74px;
		}
		#home #link section dl.sc dd,
		#home #link section dl.gakuya dd.botambourine{
			width:50px;
		}
		#home #link section dl.kyoryoku dd{
			width:74px;
		}
		#home #link section dl.kyoryoku dd.cat,
		#home #link section dl.kyoryoku dd.vao,
		#home #link section dl.kyoryoku dd.crea{
			width:51px;
		}
		#home #link section dl.kyoryoku dd.jungle,
		#home #link section dl.kyoryoku dd.purupo,
		#home #link section dl.tohoku dd,
		#home #link section dl.gakuya dd.mushup{
			width:110px;
		}
		#home #link section dl.kyoryoku dd.syf,
		#home #link section dl.gakuya dd.ajihito{
			width:30px;
		}

		#home #link section.twitter_btn p{
			width:145px;
		}
		/* ==== main ==== */
		#home #main .twitter{
			display:none;
		}
		#home #main #subnav ul li{
			float:left;
			width:9%;
			margin:0 1% 5px 1%;
			padding:5px 0;
			background:#FFF;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#home #contents {
			background-image:none;
		}
		/* ==== header ==== */
		#home #header .header_back{
		background:none;
		}
		#home #header .mainimg_chara{
		background:none;
		}
		/* ==== link ==== */

		#home #link section dl,
		#home #link section dl.kyoryoku dd,
		#home #link section dl.gakuya dd{
			float:left;
			margin:0 10px 10px 0px;
		}
		/*#home #link section dl.kyoryoku,
		#home #link section dl.tohoku{
			clear:both;
		}
		*/
		#home #link section a:hover{
			filter: alpha(opacity=65);
			-moz-opacity:0.65;
			opacity:0.65;
		}
		#home #link section.twitter_btn p{
			width:200px;
		}

		/* ==== main ==== */
		#home #main #subnav{
			display:none;
		}
		#home #main .banner{
			float:left;
		}
		#home #main .banner a:hover{
			filter: alpha(opacity=65);
			-moz-opacity:0.65;
			opacity:0.65;
		}
		#home #main .twitter{
			width:320px;
			float:right;
		}
		#home #main .banner p{
			width:620px;
			margin:0 0 10px 0;
		}
		#home #main .banner ul li{
			width:300px;
			margin:0 20px 10px 0;
			float:left;
		}
		#home #main .banner ul li.banner_suzudama{
			margin:0 20px 20px 0;
		}
		#home #main .banner ul li.banner_atodama{
			margin:0 0 20px 0;
		}
		#home #main .banner ul li.younglion{
			margin:0 0 20px 0;
		}
	}


/** =2
 * ========================================
 * detail
 * ========================================
 */

#detail #main article h5{
	padding:10px 0;
	border-top:solid 2px #C00;
	border-bottom:solid 2px #C00;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#detail {
		}
		#detail #main article h5 img{
			max-width:360px;
			width:100%;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#detail {
		}
		#detail #main article h5 img{
			width:360px;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#detail {
		}
		#detail #main article h5 img{
			width:450px;
		}
	}


/** =3
 * ========================================
 * band
 * ========================================
 */
#band article#block01,
#band article#block02{
	padding:0 10px 10px 10px;
}
#band article#block01 ul li,
#band article#block02 ul li{
	background:none;
	padding:0;
	margin:0 1.1% 20px 1.1%;
	float:left;
	width:17.8%;
	position:relative;
}

#band article#block01 ul li span.new,
#band article#block01 ul li span.gomen,
#band article#block02 ul li span.new,
#band article#block02 ul li span.gomen{
	position:absolute;
}
#band article#block01 ul li.more,
#band article#block02 ul li.more{
	float:right;
}
#band article#block01 ul.line_top,
#band article#block02 ul.line_top{
	padding-top:20px;
	border-top:dotted 2px #c7000a;
}

#band article#block01 h4,
#band article#block02 h4{
	border:none;
	margin:0 0 20px 0;
}

#band article#block04 dl dt{
	background-image:none;
	padding:5px;
}

#band article#block03 ul li,
#band article#block04 ul li,
#band article#block04 dl dd{
	font-size: 125%;
	font-weight: bold;
}

#band article#block03 ul li a,
#band article#block04 ul li a,
#band article#block04 dl dd a{
	text-decoration: none;
	color:#c7000a;
}
#band article#block03 ul li a:hover,
#band article#block04 ul li a:hover,
#band article#block04 dl dd a:hover{
	color: #fc767c;
}
#band article#block03 ul li.new{
	background:none;
	padding:0;
}
#band article#block03 ul li.new span{
	padding:1px 3px;
	font-size:65%;
	color:#FFF;
	background:#f7525a;
	margin-right:5px;
}
#band article#block03 p.syf{
	max-width: 240px;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#band {
		}
		#band article#block01 ul li,
		#band article#block02 ul li{
			margin:0 2.5% 15px 2.5%;
			width:28.3%;
		}
		#band article#block01 ul li span.new,
		#band article#block02 ul li span.new{
			width:36px;
			height:auto;
			top:-6px;
			left:-4px;
		}
		#band article#block01 ul li span.gomen,
		#band article#block02 ul li span.gomen{
			width:48px;
			height:auto;
			top:-6px;
			left:-11px;
		}
		#band article#block01 h4,
		#band article#block02 h4{
			width:90px;
		}
		#band article#block03 ul li{
			font-size: 110%;
		}
		#band article#block04 ul li{
			font-size: 100%;
		}
		#band article#block03 p.syf{
			width: 45%;
			margin: 0 auto 10px auto;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#band {
		}
		#band article#block01 ul li span.new,
		#band article#block02 ul li span.new{
			width:42px;
			height:auto;
			top:-8px;
			left:-8px;
		}
		#band article#block01 ul li span.gomen,
		#band article#block02 ul li span.gomen{
			width:50px;
			height:auto;
			top:-8px;
			left:-10px;
		}
		#band article#block01 h4,
		#band article#block02 h4{
			width:150px;
		}
		#band article#block03 section.left,
		#band article#block03 section.right{
			width:47%;
			float:left;
			clear:none;
		}
		#band article#block03 section.left{
			margin-right:10px;
		}
		#band article#block03 p.syf{
			text-align:center;
			margin:0 auto 10px auto;
		}
		#band article#block04 dl dt{
			width:80px;
		}
		#band article#block04 dl dd{
			padding-left:100px;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#band {
		}
		#band article#block01,
		#band article#block02{
			padding:0 20px 20px 20px;
		}
		#band article#block01 ul li span.new,
		#band article#block02 ul li span.new{
			width:60px;
			height:auto;
			top:-9px;
			left:-9px;
		}
		#band article#block01 ul li span.gomen,
		#band article#block02 ul li span.gomen{
			width:65px;
			height:auto;
			top:-9px;
			left:-12px;
		}
		#band article#block01 h4,
		#band article#block02 h4{
			width:160px;
		}
		#band article#block03 section.left,
		#band article#block03 section.right{
			width:300px;
			float:left;
			clear:none;
		}
		#band article#block03 section.left{
			margin-right:20px;
		}
		#band article#block03 p.syf{
			float:right;
		}

		#band article#block04 dl dt{
			width:80px;
		}
		#band article#block04 dl dd{
			padding-left:100px;
		}
	}


/** =4
 * ========================================
 * map
 * ========================================
 */

#map {
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#map {
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#map {
		}
	}

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


/** =5
 * ========================================
 * access
 * ========================================
 */

#access {
}
#access #main article .btn p{
	text-align:center;
}
#access #main article .btn p a{
	margin:0 auto 10px auto;
	padding:10px 25px;
	background:#26bdc6;
	text-decoration:none;
	font-weight:bold;
	color:#FFF;
	font-size:120%;
	border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	 box-shadow: 0 0 0 1px #FFF, 0 0 0 4px #26bdc6;
}
#access #main article .btn p a:hover{
	color:#26bdc6;
	background:#FFF;
	box-shadow: 0 0 0 1px #FFF, 0 0 0 4px #26bdc6;
}

#access #main article .btn_list{
   position:relative;
   overflow:hidden;
}
#access #main article .btn_list ul{
   position:relative;
   left:50%;
   float:left;
}
#access #main article .btn_list ul li{
   position:relative;
   left:-50%;
   float:left;
   background:none;
   padding:0;
   width:31.3%;
   margin:0 1% ;
}
#access #main article section.root img{
	width:100%;
	max-width:300px;
}

#access #main article section#ticket_a h5,
#access #main article section#ticket_b h5,
#access #main article section#ticket_c h5{
	padding:10px 0;
	border-top:solid 2px #C00;
	border-bottom:solid 2px #C00;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {

	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#access #main article section#ticket_a h5 img,
		#access #main article section#ticket_b h5 img,
		#access #main article section#ticket_c h5 img{
			width:360px;
		}
		#access #main article section.root{
			width:46%;
			margin:0 2% 10px 2%;
			float:left;
			clear:right;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#access #main article section#ticket_a h5 img,
		#access #main article section#ticket_b h5 img,
		#access #main article section#ticket_c h5 img{
			width:450px;
		}
		#access #main article .btn_list{
			margin:0 40px 10px 40px;
		}
		#access #main article section.root{
			width:46%;
			margin:0 2% 10px 2%;
			float:left;
			clear:right;
		}
		#access #main article section.root img{
			max-width:330px;
		}
	}


/** =6
 * ========================================
 * notice
 * ========================================
 */

#notice {
}

#notice #main article.img{
	background:none;
	border:none;
	padding:0;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#notice {
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#notice {
		}
	}

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


/** =7
 * ========================================
 * goods
 * ========================================
 */

#goods article p.image a img{
	border:solid 3px #F2F2F2;
}
#goods article p.image a:hover img{
	border:solid 3px #25bec7;
}
#goods article table tr th{
	padding:5px 5px 5px 0;
}
#goods article table tr td{
	padding:5px 5px;
}
#goods article table tr td .sold{
	text-decoration: line-through;
	color:#CCC;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#goods article p.image{
			width:100%;
			max-width:320px;
			margin:0 auto 10px auto;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#goods article p.image{
			width:210px;
			height:auto;
			float:left;
			clear:none;
		}
		#goods article .field{
			padding-left:230px;
			clear:none;
		}
		#goods article .field dl{
			clear:none;
		}
		#goods article .field dl dt{
			width:65px;
		}
		#goods article .field dl dd{
			padding-left:80px;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#goods article p.image{
			width:320px;
			height:auto;
			float:left;
			clear:none;
		}
		#goods article .field{
			padding-left:360px;
			clear:none;
		}
		#goods article .field dl{
			clear:none;
		}
		#goods article .field dl dt{
			width:100px;
		}
		#goods article .field dl dd{
			padding-left:120px;
		}
	}


/** =8
 * ========================================
 * museum
 * ========================================
 */

#museum {
}
#museum article .gallery ul{
	clear:both;
}
#museum article .gallery ul li{
	padding:0;
	background:0;
	margin:0 1.5% 10px 1.5%;
	height:auto;
	float:left;
	text-align:center;
	font-size:90%;
}
#museum article .gallery ul li a{
	text-decoration:none;
	color:#C00;
}
#museum article .gallery ul li a:hover{
	text-decoration:none;
	color:#25bec7;
}
#museum article .gallery ul li a img{
	border:solid 3px #C00;
}

#museum article .gallery ul li a:hover img{
	border:solid 3px #25bec7;
}

#museum article .gallery ul li.pc{
	display:none;
}

#museum article#block01 textarea{
	width:90%;
	max-width:500px;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#museum {
		}
		#museum article .gallery ul li a img{
			border:solid 2px #C00;
		}
		#museum article .gallery ul li{
			width:45%;
			margin:0 2.5% 10px 2.5%;
			font-size:85%;
		}
		#museum article .gallery ul li a:hover img{
			border:solid 2px #FF0;
		}
		#museum article .gallery ul li a:hover img{
			border:solid 2px #25bec7;
		}
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#museum {
		}
		#museum article .gallery ul li{
			width:28.3%;
			margin:0 2.5% 10px 2.5%;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#museum article p.banner{
			text-align:center;
		}
		#museum article p.banner a:hover{
			filter: alpha(opacity=65);
			-moz-opacity:0.65;
			opacity:0.65;
		}
		#museum article .gallery ul li{
			width:17%;
		}
		#museum article .gallery ul li.pc{
			display:block;
		}
		#museum article .gallery ul li.sp{
			display:none;
		}
	}


/** =9
 * ========================================
 * ticket
 * ========================================
 */

#ticket article table{
	width: 100%;
}
#ticket article table th,
#ticket article table td{
	border: 1px solid #ccc;
	padding:5px;
	vertical-align:middle;
}
#ticket article .txt_s{
	font-size:85%;
}
#ticket article table thead th{
	background:#1856a6;
	color:#FFF;
	text-align:center;
}

#ticket article table tbody th{
	color: #1856a6;
}
#ticket article table thead th .band{
	font-weight:normal;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {
		#ticket article table{
			display: block;
		}
		#ticket article table thead{
			display: none;
		}
		#ticket article table tbody{
			display: block;
		}
		#ticket article table tbody tr{
			display: block;
			margin-bottom: 1.5em;
		}
		#ticket article table tbody th,
		#ticket article table tbody td{
			display: list-item;
			border: none;
			list-style-type: none;
		}
		#ticket article table tbody th{
			margin-bottom: 5px;
			list-style-type: none;
			color: #fff;
			background: #1856a6;
		}
		#ticket article table tbody td{
				padding: 0;
		}
		#ticket article table tbody th a{
			color:#FFF;
			text-decoration:none;
		}
		#ticket article table tbody td:nth-of-type(1):before { content: "[公演日] "; }
		#ticket article table tbody td:nth-of-type(2):before { content: "[会　場] "; }
		#ticket article table tbody td:nth-of-type(3):before { content: "[備　考] "; }
		#ticket article table tbody td:nth-of-type(4):before { content: "[発売日] "; }
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#ticket article table{
			display: block;
		}
		#ticket article table thead{
			display: none;
		}
		#ticket article table tbody{
			display: block;
		}
		#ticket article table tbody tr{
			display: block;
			margin-bottom: 1.5em;
		}
		#ticket article table tbody th,
		#ticket article table tbody td{
			display: list-item;
			border: none;
			list-style-type: none;
		}
		#ticket article table tbody th{
			margin-bottom: 5px;
			list-style-type: none;
			color: #fff;
			background: #1856a6;
		}
		#ticket article table tbody th a{
			color:#FFF;
			text-decoration:none;
		}
		#ticket article table tbody td{
			padding: 0;
		}
		#ticket article table tbody td:nth-of-type(1):before { content: "[公演日] "; }
		#ticket article table tbody td:nth-of-type(2):before { content: "[会　場] "; }
		#ticket article table tbody td:nth-of-type(3):before { content: "[備　考] "; }
		#ticket article table tbody td:nth-of-type(4):before { content: "[発売日] "; }
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#ticket article table thead th.name{width:290px;}
		#ticket article table thead th.day{width:80px;}
		#ticket article table thead th.place{width:190px;}
		#ticket article table thead th.sale{width:70px;}
	}


/** =10
 * ========================================
 * goods_sale
 * ========================================
 */


#goods_sale article section table{
	margin:0 auto 10px auto;
	width:100%;
}
#goods_sale article table thead tr th{
	background:#C00;
	color:#FFF;
	text-align: center;
}
#goods_sale article table tr th{
	background:#F2F2F2;
	color:#333;
}
#goods_sale article table tr th,
#goods_sale article table tr td{
	padding:5px;
	border:solid 1px #CCC;
}
#goods_sale article table tr td{
	text-align:center;
	vertical-align:middle;
}
#goods_sale article table tr th.nun{
	width: 30px;
}

#goods_sale article table tr th.zaiko{
	width: 45px;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {

	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {

	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {

	}
	

/** =10
 * ========================================
 * goods_sale
 * ========================================
 */


#report article#block01 p.image{
	margin:0 auto 10px auto;
	width:150px;
	height:auto;
}


	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 599px) {

	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 600px) and (max-width: 959px) {
		#report article#block01 p.image{
			float:left;
			width:200px;
			margin-right:20px;
			height:auto;
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 960px) {
		#report article#block01 p.image{
			float:left;
			width:200px;
			margin-right:30px;
			height:auto;
		}
	}