/*===================================================== */
/* SYSTEM PAGE
======================================================= */
@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{
	width:100%;
	margin:0 auto 26px;
	padding:23px 60px;
	background:url("../images/system/illust.png")  right 38px  no-repeat rgba(255,255,255,0.64);
	box-sizing: border-box;
	font-weight: bold;
}
#system .summary2{
	width:100%;
	margin:0 auto 26px;
	padding:23px 60px;
	background:rgba(255,255,255,0.64);
	box-sizing: border-box;;
	font-weight: bold;
}

#system .summary strong{
	font-weight: 100;
	color: #f00;
}


#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{
	position: relative;
	margin: 0 0 16px;
	background:rgba(250,8,215,0.08);
}
#system h4 strong{
	position: absolute;
	left:0;
	top:-20px;
	display: block;
}
#system h3 span,#system h4 span{
	display: block;
	margin: 0 0 8px;
	font-size: 36px;
	line-height: 1.4;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
#system  p.catch{
	text-align: center;
	margin: 0 0 20px;
	font-weight: bold;
}


#system section{
	width:100%;
	margin: 0 auto 30px;
}

#system section section{
	width:100%;
	margin: 0 auto 30px;
}


/* 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:0.4%;
	background:	rgba(229,53,106,0.08);
	font-size: 30px;
	vertical-align: middle;
}
#system #priceArea th{
	text-align: right;
	padding-right:40px;
}
#system #priceArea td{
	padding-left:40px;
	text-align: left;
	color:#e23565;
}
#system #priceArea th strong{
	display: inline-block;
	margin-right: 6px;
	font-size:40px;
	font-style: italic;
	font-weight:	100;
}
#system #priceArea td strong{
	display: inline-block;
	margin-right: 6px;
	font-size:40px;
	font-style: italic;
	font-weight:100;
}
#system #priceArea td span.arrow{
	display: inline-block;
	margin:0 15px;
}
#system #priceArea td.shimei{
	padding: 0 25px;
	text-align: center;
}
#system #priceArea td.shimei span{
	display: inline-block;
	color: #000 !important;
	font-size: 30px;
} 


#system #priceArea #kanjuku{}
#system #priceArea #kanjuku td{
	color: #e23565;}
#system #priceArea #color{}
#system #priceArea #color td{
	color: #ee42a0;}
#system #priceArea #premium{}
#system #priceArea #premium td{
	color: #9510b8;}

#system #priceArea .price .text{
	padding:10px 100px;
	background:#fff;
	text-align: left;
	font-size: 18px;
}

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

/* play contents area
-------------------------------------------------------- */
#system #playArea{}
#system #playArea ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width:100%;
	margin: 0 0 28px;
	border-collapse: separate;
	border: 2px;
}
#system #playArea ul li{
	width:49.4%;
	margin: 2px 0;
	font-size: 36px;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 100;
	text-align: center;
	background:	rgba(229,53,106,0.08);
}
#system #playArea ul li span{
	font-size: 26px;
}
/* deliveryArea
-------------------------------------------------------- */
#system #deliveryArea{}
#system #deliveryArea .text{
	margin:0 0 1rem;
	text-align: center;
}
#system #deliveryArea .list{
	padding:24px;	
	background:rgba(255,255,255,0.8)
}
#system #deliveryArea .list dl{
	width:100%;
}
#system #deliveryArea .list dl dt{
	display: inline-block;
	margin: 0 0 ;
	padding:2%;
	background:#e29a3c;
	color: #fff;
	text-align: center;
	line-height: 1;
}
#system #deliveryArea .list dl dd{
	display: inline-block;
	margin: 0 0 0.3rem;
	padding:2%;
	text-align: left;
}



/* option area
-------------------------------------------------------- */
#system #optionArea{
}
#system #optionArea ul{
	width:100%;
	margin: 0 0 28px;
	border-collapse: separate;
	border: 2px;
}
#system #optionArea ul li{
	margin: 5px 0;
	font-size: 36px;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-weight: 100;
}
#system #optionArea ul li div:nth-child(odd){
	width:49.5%;
	padding:0 70px 0 0;
	box-sizing:border-box;
	text-align: right;
	background:	rgba(229,53,106,0.08);
}
#system #optionArea ul li div:nth-child(even){
	width:49.5%;
	padding:0 0 0 70px;
	box-sizing:border-box;
	text-align: left;
	background:	rgba(229,53,106,0.08);
}
#system #optionArea ul li span{
	font-size: 26px;
}

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

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

#system #attentionArea .inner{
	margin: 0 0 25px;
	padding:3%;
	background:rgba(255,255,255,0.8)
}

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

#system #attentionArea ul li{
	margin: 0 0 8px 8px;
	font-size: 16px;
}
#system #attentionArea strong{
	color:red;
}
#system #attentionArea .note{
	color: #f00;
}
#system #attentionArea .text{
	text-align: left;
}