@charset "UTF-8";

/* ★″
 * EXTRA.css
 *
 * このディレクトリ内だけに適用したいスタイル
 */



/* =========================================================
	強調部分
========================================================= */


	.note{
		display: block;

		padding: 8px;
		border: 2px solid #ccc;

		background: white;

		font-size: 0.9em;
	}
		.note.attention{
			border: 2px solid #E55C72;
		}

		.note.attention strong{
			font-size: 1.4em;
		}


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

	.note{
		padding: 8px 16px;
	}


}

/* =========================================================
	チケット
========================================================= */

	dl.ticket{
		position: relative;
		max-width: 480px;
		background: #eee;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3);
		padding: 24px 32px;
		margin: 24px auto 24px auto;
	}
		dl.ticket::before{
			content: '';
			position: absolute;
			top: 0; right: 0; bottom: 0; left: 0;
			margin: 8px;
			border: 4px solid rgba(0,0,0,0.1);
		}

		dl.ticket#maeuri{
			background: #FFFDE7;
		}
		dl.ticket#pair{
			background: #FCE4EC;
		}
		dl.ticket#coupon{
			background: #F1F8E9;
		}

		dl.ticket#maeuri .category,
		dl.ticket#maeuri .ticketPrice{
			color: #827717;
		}
		dl.ticket#pair .category,
		dl.ticket#pair .ticketPrice{
			color: #880E4F;
		}
		dl.ticket#coupon .category,
		dl.ticket#coupon .ticketPrice{
			color: #33691E;
		}



		dl.ticket .category{
			text-align: center;
            margin-top: 10px;
		}

		dl.ticket .ticketPrice{
			text-align: center;
			font-size: 2.4em;
			line-height: 1;
			font-family: "dnp-shuei-gothic-gin-std", sans-serif; font-weight: 600;
			margin: 8px 0 8px 0;
		}


			dl.ticket .ticketPrice small{
				font-size: 0.6em;
			}

		dl.ticket .referencePrice{
			font-size: 0.8em;
			margin: 8px 0 0 0;
		}

			dl.ticket .referencePrice b{
				font-size: 0.9em;
				padding: 0.2em 0.5em;
				margin: 0 0.5em 0 0;
				line-height: 1;
				border: 1px solid #666;

			}


		dl.ticket .note{
			margin: 16px 0 0 0;
			padding: 8px 0 0 0;
			background: none;
			border: none;
			border-top: 1px dashed #999;
		}


		dl.ticket .goodValue{
			position: absolute;
			top: -8px; right: -8px; bottom: auto; left: auto;
			line-height: 1.2;
			z-index: 5;
			background: white;
			padding: 4px 32px;
			color: #E91E63;
			text-align: center;
			border-radius: 24px;
			box-shadow: 0 1px 4px rgba(0,0,0,0.5);
		}
			/*dl.ticket .goodValue::before{
				content: '';
				position: absolute;
				display: block;
				top: auto; right: 50%; bottom: -8px; left: auto;
				margin: 0 -8px 0 0;
				width: 0;
				height: 0;
				border-top: 8px solid white;
				border-right: 8px solid transparent;
				border-left: 8px solid transparent;
			}*/


			dl.ticket .goodValue b{
				font-size: 1.2em;
			}
				dl.ticket .goodValue b small{
					font-size: 0.6em;
				}

        dl.ticket .sevenLogo{
            width: 100px;
            position: absolute;
            top: 20px;
            left: 20px;
            bottom: auto;
            right: auto;
            line-height: 1.2;
            z-index: 5;
        }

		dl.ticket .soldout{
			width: 90%;
			margin: 10px auto 0;
			line-height: 1.2;
			padding: 4px 32px;
			color: #FFF;
			background: #F00 !important;
			text-align: center;
			border-radius: 24px;
			box-shadow: 0 1px 4px rgba(0,0,0,0.5);
			z-index: 10;
		}
		.line{
			display: inline-block;
			text-decoration: line-through !important;
		}

        .syuryo{
            text-align: center;
            background: #F00;
            color: #fff;
            padding: 5px 0;
            font-size: 20px;
            margin-bottom: 50px;
        }




/* =========================================================
	リスト
========================================================= */


	#articlelist section > h1{
		margin: 0 0 24px 0;
		text-align: center;
	}

	#articlelist section .layoutArticleList{
		display: flex;
			flex-wrap: wrap;
			justify-content: center;
	}


		#articlelist section article{
			width: 100%;
			padding: 16px;
			margin: 0 16px 16px 16px;

			background: white;
			border: 1px solid #ddc8b1;
			box-shadow: 0 0 4px rgba(0,0,0,0.1);
		}
			#articlelist section article.important{
				border: 3px solid #e85b71;
			}


		#articlelist section article > h1{
			font-size: 1.1em;
			text-indent:-0.9em;
			padding-left:1.8em;
		}
			#articlelist section article.important > h1{
				color: #e85b71;
			}

			#articlelist section article > h1 i{
				margin: 0 0.25em 0 0;
				font-size: 1.4em;
			}

		#articlelist section article > p{
			max-width: 100%;
			font-size: 0.9em;
		}
			#articlelist section article > p strong{
				color: #e50012;
			}

			#articlelist section article ul.listBUTTON li a{
				padding: 8px 48px;
				font-size: 0.8em;
			}


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

	#articlelist section > h1{
		margin: 0 0 32px 0;
	}

		#articlelist section article{
			width: auto;
			max-width: 240px;
			margin: 0 8px 16px 8px;
		}
			#articlelist section article p{
				width: 100%;
			}



}


/* =========================================================
	ウルトラマン
========================================================= */
#page_ultraman{
}

#page_ultraman h1{
	width: auto;
	max-width: 768px;
	margin: 0 auto;
}
	#page_ultraman h1 img{ width: 100%; }

#page_ultraman .lead{
	padding: 30px 30px 10px;
	color: #FFF;
	background: #E80F1E;
}
@media screen and (min-width: 979px) {
	#page_ultraman .lead{
		padding: 30px ;
		color: #FFF;
		background: #E80F1E;
	}
}

#page_ultraman .lead p{
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 110% !important;
}
#page_ultraman .lead figure{
	float: right;
	max-width: 300px;
	margin-left: 30px;
}
	#page_ultraman figure > img{ width: 100%; }
#page_ultraman .lead figure figcaption{
	width: 150px;
	margin: 5px 0 0;
	float: right;
}
	#page_ultraman .lead figure figcaption img{ width: 100%; }
@media screen and (max-width: 767px) {
	#page_ultraman .lead{
		padding: 15px;
	}
	#page_ultraman .lead p{
		font-size: 90% !important;
	}
	#page_ultraman .lead figure{
		float: none;
		max-width: 300px;
		margin: 0 auto;
	}
	#page_ultraman .lead figure figcaption{
		width: 140px;
	}
}
#page_ultraman table{
	margin-bottom: 20px;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
}
	#page_ultraman table th,
	#page_ultraman table td{
		padding: 15px 10px;
		border-bottom: 1px solid #000;
		border-right: 1px solid #000;
	}
	#page_ultraman table th{
		padding: 8px 10px;
		border-bottom: 1px solid #FFF;
		border-right: 1px solid #000;
	}
	#page_ultraman table th.last{
		border-bottom: 1px solid #000 !important;
	}
	#page_ultraman table th{
		color: #FFF;
		background: #000 !important;
	}
	#page_ultraman table span.price{
		font-size: 150%;
		font-weight: bold;
	}
	.red_big{
		display: block;
		margin-top: 10px;
		color: #E80F1E;
		font-size: 110%;
		font-weight: bold;
	}

.chui{
	padding-left: 1em;
	text-indent: -1em;
	font-size: 88%;
}
#page_ultraman h3{
	display: inline-block;
	padding: 3px 10px;
	background: #000;
	color: #FFF;
	font-size: 90%;
}
#page_ultraman p.info{
	margin-top: 20px;
	padding: 10px;
	border: 1px solid #E80F1E;
}


/* =========================================================
	かなへい
========================================================= */
#page_kanahei{
}
#page_kanahei h2{
	padding: 20px 10px 10px 70px;
	background: url(img/h2_kana.png) no-repeat left top;
}
#page_kanahei .floatL,
#page_kanahei .floatR{
	width: 300px;
}
@media screen and (max-width: 767px) {
	#page_kanahei h2{
		padding: 15px 10px 10px 50px;
		font-size: 15px;
		background: url(img/h2_kana_sp.png) no-repeat left top;
		background-size: auto 60px;
/*		background: 50% 50%;*/
	}
	#page_kanahei h2 span{
		display: block;
	}
	#page_kanahei .floatL,
	#page_kanahei .floatR{
		float: none;
		width: 300px;
		margin: 0 auto;
	}
	#page_kanahei .floatL img,
	#page_kanahei .floatR img{
		width: 100%;
	}
}
@media screen and (max-width: 360px) {
	#page_kanahei .floatL,
	#page_kanahei .floatR{
		width: 288px;
	}
}