/*=================================================
 * CSS for PC
 * ================================================= */

#cnt{
	background: url(../../img/index/line.png) repeat-y top center #eceef0;
}


#platina_info{
	color: #fff;
	text-align: center;
	background: rgb(3,0,0);
	background: linear-gradient(345deg, rgba(3,0,0,1) 0%, rgba(40,18,63,1) 100%);
	margin: 80px 0 0 0;
	padding: 80px 0;
}
#platina_info h3{
	font-size: 0;
	line-height: 0;
	height: 500px;
	background: url(img/platina_info.png) no-repeat top center;
}

#platina_info .p1{
	font-size: 16px;
	line-height: 25px;
	margin: 0 0 30px 0;
}

#platina_info .p2{
	width: 500px;
	font-size: 13px;
	line-height: 20px;
	margin: 0 auto 50px auto;
	padding: 20px 0;
	border: 1px solid #222;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#platina_info .btgi:hover{
	background: none;
}

.kousei{
	color: #333;
	background: none;
}
.kousei div{	margin-bottom: 0;}

.koisei_flex{
	display: flex;
	width: 1100px;
	margin: 0 auto;
	border: 5px solid #e9e1d1;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.koisei_flex_l{
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 295px;
	background: #f2ede3;
}
.koisei_flex_l h3{	margin-bottom: 0;}
.koisei_flex_r{
	position: relative;
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 795px;
	background: #fff;
	padding: 30px 0;
}
.koisei_flex_r img{
	width: 620px;
	height: auto;
}

.koisei_flex_r .kotxt{
	font-size: 13px;
	line-height: 20px;
	position: absolute;
	left: 350px;
	bottom: 45px;
}


.kbox_bg{
	width: 1130px;
	font-size: 0;
	line-height: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0 auto 30px auto;
}

.kbox{
	width: calc(100% / 3 - 30px);
	height: auto;
	text-align: left;
	margin: 0 15px 20px 15px;
	padding: 0 0 30px 0;
	border: none;
	border-bottom: 1px solid #ddd;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.kbox h4{
	font-family: "Rounded Mplus 1c";
	font-size: 24px;
	font-weight: 300;
	line-height: 25px;
	color: #b3831d;
	margin: 0 0 15px 0;
	padding: 5px 0 5px 45px;
}

.kbox li{
	font-size: 13px;
	line-height: 16px;
	padding: 2px 0;
}

.kbox li span{
	display: inline-block;
	vertical-align: top;
	font-size: 15px;
	line-height: 20px;
	margin: -2px 2px 0 0;
}
.kbox li .red{	color: #ff0000;}

#platinum .kbox:nth-of-type(1) h4{ background: url(../img/i1.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}
#platinum .kbox:nth-of-type(2) h4{ background: url(../img/i2.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}
#platinum .kbox:nth-of-type(3) h4{ background: url(../img/i3.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}
#platinum .kbox:nth-of-type(4) h4{ background: url(../img/i4.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}
#platinum .kbox:nth-of-type(5) h4{ background: url(../img/i5.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}
#platinum .kbox:nth-of-type(6) h4{ background: url(../img/i6.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}
#platinum .kbox:nth-of-type(7) h4{ background: url(../img/i7.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}
#platinum .kbox:nth-of-type(8) h4{ background: url(../img/i8.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}
#platinum .kbox:nth-of-type(9) h4{ background: url(../img/i10.png) no-repeat; -webkit-background-size: 35px auto; background-size: 35px auto;}


.fee_pla{
	display: flex;
	width: 1100px;
	margin: 0 auto;
	box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
}

.fee_pla_l{
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 300px;
	background: #f5f5f5;
	border-radius: 10px 0 0 10px;
}
.fee_pla_l h3{	margin-bottom: 0;}

.fee_pla_r{
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	width: 800px;
	background: #fff;
	border-radius: 0 10px 10px 0;
}


/** pla_sysbox2 **/

.pla_sysbox2{
	margin: 0 auto;
	padding: 40px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.pla_sysbox2 dl{
	display: table;
	font-family: "Sawarabi Mincho";
	table-layout: fixed;
	width: 100%;
	font-size: 0;
	line-height: 0;
	border-left: 1px solid #ccc;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.pla_sysbox2 dt,
.pla_sysbox2 dd{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.pla_sysbox2 dl:first-of-type{
	border-top: 1px solid #ccc;
}
.pla_sysbox2 dl:first-of-type dd:first-of-type,
.pla_sysbox2 dt{	width: 200px;}

.pla_sysbox2 dl:first-of-type dd{
	font-size: 26px;
	line-height: 30px;
	padding: 15px 0;
	color: #333;
	background: #ddd;
}

.pla_sysbox2 dt{
	font-size: 26px;
	line-height: 48px;
	background: #f5f5f5;
}
.pla_sysbox2 dt br{	display: none;}

.pla_sysbox2 dd{
	font-size: 26px;
	line-height: 48px;
	padding: 20px 0;
}
.pla_sysbox2 dd em{
	font-size: 46px;
	font-style: normal;
}

.pla_sysbox2 .camprice{
	color: #ff0000;
}

.pla_sysbox2 .camprice span{
	display: block;
	font-family: Meiryo, "MS PGothic", Osaka, sans-serif;
	font-size: 16px;
	line-height: 1.2;
	font-weight: bold;
}

.pla_sysbox2 .camprice p{
	color: #000;
	font-weight: normal;
	text-decoration: line-through;
	font-size: 20px;
	line-height: 1;
}

.pla_sysbox2 .pla_p1{
	font-size: 20px;
	line-height: 30px;
	margin: 20px 0 0 0;
}
.pla_sysbox2 .pla_p2{
	font-size: 14px;
	font-weight: normal;
	line-height: 30px;
}
.pla_sysbox2 .pla_p2 span{	color: #ff0000;}


.flow h3.f_title{
	font-family: "Sawarabi Mincho";
	font-size: 40px;
	line-height: 50px;
	text-align: center;
	margin-bottom: 20px;
}
.flow h3.f_title span{	color: #d1ab59;}



/*=================================================
 * CSS for SP
 * ================================================= */

@media screen and (max-width: 650px) {

	#platina_info{
		margin: 30px 0 0 0;
		padding: 30px 10px;
	}
	#platina_info h3{
		font-size: 0;
		line-height: 0;
		width: auto;
		height: auto;
		padding-top: calc(500 / 750 * 100%);
		background:
		url(img/platina_info.png) top left / cover no-repeat
		-webkit-background-size: contain;
		background-size: contain;
	}

	#platina_info .p1{
		font-size: 14px;
		line-height: 22px;
		text-align: left;
		margin: 0 0 20px 0;
		padding: 0 10px;
	}
	#platina_info .p2{
		width: auto;
		font-size: 12px;
		line-height: 20px;
		text-align: left;
		margin: 0 10px 20px 10px;
		padding: 10px;
	}


	.kousei{
		color: #333;
		background: none;
	}
	.kousei div{	margin-bottom: 0;}
	.koisei_flex{
		display: block;
		width: auto;
		margin: 0 10px;
		border: 3px solid #e9e1d1;
	}
	.koisei_flex_l{
		display: block;
		width: auto;
		padding: 15px 0 0 0;
	}
	.koisei_flex_l h3{	margin-bottom: 0;}
	.koisei_flex_r{
		display: block;
		width: auto;
		padding: 10px;
	}
	.koisei_flex_r img{
		width: 100%;
		height: auto;
	}
	.koisei_flex_r .kotxt{
		font-size: 12px;
		line-height: 20px;
		position: static;
		padding: 10px 0 0 0;
	}


	.kbox_bg{
		width: auto;
		display: block;
		font-size: 0;
		line-height: 0;
		margin: 0;
		padding: 0;
	}

	.kbox{
		display: block;
		width: auto;
		height: auto;
		text-align: left;
		margin: 0 0 20px 0;
		padding: 0 0 20px 0;
		border: none;
		border-bottom: 1px solid #ddd;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}


	.fee_pla{
		display: block;
		width: auto;
		margin: 0 10px;
		box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.2);
		border-radius: 10px;
	}
	.fee_pla_l{
		display: block;
		width: auto;
		padding: 20px 0 0 0;
		border-radius: 10px 10px 0 0;
	}
	.fee_pla_r{
		display: block;
		width: auto;
		border-radius: 0 0 10px 10px;
	}
	.fee h3{	margin-bottom: 0;}

	/** pla_sysbox2 **/
	.pla_sysbox2{
		width: 100%;
		padding: 10px;
	}
	.pla_sysbox2 dl:first-of-type dd:first-of-type,
	.pla_sysbox2 dt{	width: 60px;}

	.pla_sysbox2 dl:first-of-type dd{
		font-size: 16px;
		line-height: 20px;
		padding: 10px 0;
	}
	.pla_sysbox2 dt{
		font-size: 14px;
		line-height: 16px;
		padding: 10px 0;
	}
	.pla_sysbox2 dt br{	display: inline;}
	.pla_sysbox2 dd{
		font-size: 4vw;
		line-height: 1.3;
		padding: 10px 0;
	}
	.pla_sysbox2 dd em{
		font-size: 7vw;
		font-style: normal;
	}
	.pla_sysbox2 .camprice {
		line-height: 1;
	}
	.pla_sysbox2 .camprice span{
		font-size: 2.5vw;
	}
	.pla_sysbox2 .camprice p{
		font-size: 14px;
		padding-top: 4px;
	}
	.pla_sysbox2 .pla_p1{
		font-size: 14px;
		line-height: 20px;
		margin: 10px 0 0 0;
	}
	.pla_sysbox2 .pla_p2{
		font-size: 12px;
		line-height: 18px;
	}


	.flow h3.f_title{
		font-size: 23px;
		line-height: 30px;
		margin-bottom: 10px;
	}
}