@charset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notoserifjapanese.css);

@font-face {
	font-family: BASKVILL;
	src: url(../font/BASKVILL.TTF) format('truetype');
}
@font-face {
  font-family: Meiryo;
  src: local('Meiryo'), local('メイリオ');
}


/* layout
-------------------------------------------------------- */
#contentsContainer{
	width:100%;
	margin:0 auto 60px;
	font-family: 'Noto Serif Japanese',serif;
}
#system .summary{
	margin: 0 0 20px;
	padding:2.5% 10%;
	background:#fff;
	border: 1px solid #795602;
}
#system h3,#system h4{
	text-align: center;
}
#system h3 strong,#system h4 strong{
	display: block;
	font-size: 46px;
	font-family: 'BASKVILL',serif;
	line-height: 1;
}
#system h3{
	margin: 0 0 45px;
}
#system h4{
	margin: 0 0 8px;
}
#system h4 strong{
	font-size: 33px;
}
#system h3 span,#system h4 span{
	display: block;
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 100;
	line-height: 1;
	font-family: 'Noto Serif Japanese',serif;
}

#system h3::after,#system h4::after{
	content:url(../images/spacer.gif);
	display: block;
	width:100%;
	height: 1px;

background: rgba(68,57,31,1);
background: -moz-linear-gradient(left, rgba(68,57,31,1) 0%, rgba(226,200,136,1) 53%, rgba(68,57,31,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(68,57,31,1)), color-stop(53%, rgba(226,200,136,1)), color-stop(100%, rgba(68,57,31,1)));
background: -webkit-linear-gradient(left, rgba(68,57,31,1) 0%, rgba(226,200,136,1) 53%, rgba(68,57,31,1) 100%);
background: -o-linear-gradient(left, rgba(68,57,31,1) 0%, rgba(226,200,136,1) 53%, rgba(68,57,31,1) 100%);
background: -ms-linear-gradient(left, rgba(68,57,31,1) 0%, rgba(226,200,136,1) 53%, rgba(68,57,31,1) 100%);
background: linear-gradient(to right, rgba(68,57,31,1) 0%, rgba(226,200,136,1) 53%, rgba(68,57,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44391f', endColorstr='#44391f', GradientType=1 );

}

#system section{
	width:1100px;
	margin: 0 auto 30px;
}
@media (max-width: 1020px) and (min-width: 768px) { /*タブレット*/
	#system section{
		width:90%;
		margin: 0 auto 30px;
	}
}

#system section section{
	width:80%;
	margin: 0 auto 5rem;
}

/* guidance */

#system .guidance{
	text-align: center;
}


/* price area
-------------------------------------------------------- */
#system #priceArea{}

#system #priceArea table{
	width:100%;
	margin: 0 0 28px;
	border-collapse: separate;
	border: 2px;
}
#system #priceArea th,#system #priceArea td{
	width:50%;
	box-sizing: border-box;
	padding:1.4%;
	background:	rgba(0,0,0,0.06);
	font-size: 16px;
	vertical-align: middle;
}
#system #priceArea th{
	text-align: right;
}
#system #priceArea td{
	text-align: left;
}
#system #priceArea th strong{
	display: inline-block;
	margin-right: 6px;
	font-size:2.5rem;
	font-style: italic;
	font-weight:	100;
}
#system #priceArea th span{	/*キャンペーン*/
	display: inline-block;
	margin-right: 110px;
	color: #ff2583;
	font-size: 18px;
	text-align:left;
}
#system #priceArea td strong{
	display: inline-block;
	margin-right: 6px;
	font-size:2.5rem;
	color: #ff2583;
	font-style: italic;
	font-weight:100;
}
#system #priceArea td span.arrow{
	display: inline-block;
	margin:0 15px;
}
#system #priceArea .text{
	text-align: center;
	font-size: 16px;
}

#system #priceArea .kaiten{
	display:inline-block;
	text-align:left;
}

/* play contents area
-------------------------------------------------------- */
#system #playArea{}
#system #playArea .text{
	margin: 0 0 ;
	padding:20px;
	text-align: center;
	font-size: 16px;
}
#system #playArea .text strong{
	color: #ff2583;
}
#system #playArea .list{
	box-sizing: border-box;
	padding:1.4%;
	background:	rgba(0,0,0,0.06);
	text-align:center;
}

/* option area
-------------------------------------------------------- */
#system #optionArea{
}
#system #optionArea table{
	width:100%;
	margin: 0 0 28px;
	border-collapse: separate;
	border: 2px;
}
#system #optionArea th,#system #optionArea td{
	width:50%;
	box-sizing: border-box;
	padding:1.4%;
	background:	rgba(0,0,0,0.06);
	font-size: 16px;
	vertical-align: middle;
}
#system #optionArea th{
	text-align: right;
}
#system #optionArea td{
	text-align: left;
}
#system #optionArea th strong{
	display: inline-block;
	margin-right: 6px;
	font-size:20px;
	font-style: italic;
}
/* about area
-------------------------------------------------------- */
#system #aboutArea{}
#system #aboutArea dl{
	margin-bottom:2.5rem;
	padding:1rem;
	background:#fff;
	border-radius:8px;
}
#system #aboutArea dt{
	margin-bottom:1.5rem;
	font-size: 2rem;
}
#system #aboutArea dd{}



/* payment area
-------------------------------------------------------- */
#system #paymentArea{
	text-align: center;
}
#system #paymentArea .text{}
#system #paymentArea .text .img{
	margin:0 0 30px;
}

/* attention area
-------------------------------------------------------- */
#system #attentionArea{}

#system #attentionArea ul{
	margin: 0 0 25px;
}

#system #attentionArea ul li{
	margin: 0 0 8px 8px;
	list-style: disc inside;
	font-size: 16px;
}

#system #attentionArea .note{
	color: #f00;
}
#system #attentionArea .text{
	text-align: left;
}