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

/** ALL **/
body{	background: #fff;}
header{	height: 120px; margin-bottom: 0;}
.pan{
	position: relative;
	margin-top: -24px;
	z-index: 1;
}
#price{	padding: 80px 0 0 0;}

.s_title{
	position: relative;
	font-family: "Rounded Mplus 1c";
	font-size: 34px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	margin: 0 auto 50px auto;
	padding: 0 0 20px 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.s_title span{
	display: block;
	font-size: 12px;
	line-height: 1.2;
}
.s_title:before{
	content: "";
	width: 340px;
	height: 2px;
	background: #f683c6;
	position: absolute;
	bottom: -2px;
	right: calc(50% - 170px);
	border-radius: 1px;
}
.s_title:after{
	content: "";
	width: 20px;
	height: 20px;
	background: #fff;
	border-left: 2px solid #f683c6;
	border-bottom: 2px solid #f683c6;
	position: absolute;
	bottom: -13px;
	right: calc(50% - 10px);
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.s_title br{	display: none;}


/** pbox **/

.pbox{
	width: 1050px;
	margin: 0 auto;
	padding: 0 0 80px 0;
}
.pbox table{
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 8px 0;
}
.pbox tr{
	vertical-align: middle;
}
.pbox tr:nth-of-type(even) th,
.pbox tr:nth-of-type(even) td{	background: #f5f5f5;}
.pbox tr:last-of-type th,
.pbox tr:last-of-type td{	border-bottom: 8px solid #f5f5f5;}
.pbox tr h3{
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 40px;
	line-height: 1.4;
	text-align: center;
	margin: 0 0 10px 0;
}
.pbox tr h3 em{
	font-family: "Rounded Mplus 1c";
	font-weight: 500;
	font-size: 20px;
	font-style: normal;
}
.pbox tr h3 span{
	font-size: 12px;
	color: #333;
}
.pbox tr div{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 34px;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	background: rgba(255,255,255,0.7);
	border-radius: 40px;
}
.pbox th{
	font-size: 14px;
	line-height: 1.2;
	padding: 15px 15px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.pbox td{
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	padding: 15px 15px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.pbox td em{
	font-size: 24px;
	font-style: normal;
}
.pbox tr:nth-of-type(2) td em,
.pbox tr:nth-of-type(3) td em{
	font-weight: bold;
}
.pbox td.no{
	font-size: 24px;
	color: #bdbdbd;
}
.pbox td span{
	display: inline-block;
	font-size: 10px;
	line-height: 12px;
	color: #aaa;
}
.pbox td.c1,
.pbox td.c2,
.pbox td.c3,
.pbox td.c4{
	border-bottom: 8px solid #fff;
}
.pbox td.c1{	background: linear-gradient(135deg, #ffe2ef 0%,#f8e1f6 100%);}
.pbox td.c2{	background: linear-gradient(135deg, #f7e1f7 0%,#ede1ff 100%);}
.pbox td.c3{	background: linear-gradient(135deg, #ece1ff 0%,#e1e7ff 100%);}
.pbox td.c4{	background: linear-gradient(135deg, #e0e7ff 0%,#d6edff 100%);}

/** url **/

#url{
	padding: 80px 0;
	background: #fff3fa;
}
#price #url h3:after{	background: #fff3fa;}
#url .url_in{
	display: flex;
	justify-content: center;
}
#url .url_in > div{
	width: 460px;
	margin: 0 30px;
	padding: 60px 0 0 0;
}
#url .url_in > div h4{
	font-family: "Rounded Mplus 1c";
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	margin: 0 0 10px 0;
}
#url .url_in > div p{
	font-size: 14px;
	line-height: 24px;
	margin: 0 0 20px 0;
}
#url .url_in > div ul{}
#url .url_in > div li{
	font-size: 24px;
	line-height: 40px;
	text-align: left;
	background: #fff;
	border-radius: 5px;
	margin: 0 0 10px 0;
	padding: 5px 10px 5px 20px;
	box-shadow: 3px 3px 3px rgba(224, 211, 227, 0.5);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#url .url_in > div li:last-of-type{	margin-bottom: 0;}
#url .url_in > div:nth-of-type(1){	background: url(img/i1.png) no-repeat top center; background-size: 60px auto;}
#url .url_in > div:nth-of-type(2){	background: url(img/i2.png) no-repeat top center; background-size: 60px auto;}
#url .url_in > div:nth-of-type(1) h4 em,
#url .url_in > div:nth-of-type(1) li{	color: #e09900;}
#url .url_in > div:nth-of-type(2) h4 em,
#url .url_in > div:nth-of-type(2) li{	color: #0099ff;}


/** flow **/

#flow{
	padding: 80px 0 50px 0;
}
#flow .flow_img{
	font-size: 0;
	line-height: 0;
}
#flow .flow_img img{
}

.pc_none{ display: none;}


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

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

	.pan{ margin-top: 0px;}

	/** ALL **/
	body::before,
	body::after{	display: none;}
	header,header.fixed{	height: 0;}
	main{	padding: 78px 0 0 0;}
	#price{
		padding: 30px 0;
	}
	.s_title{
		width: auto;
		font-size: 20px;
		line-height: 1.2;
		margin: 0 0 30px 0;
		padding: 0 0 10px 0;
	}
	.s_title span{
		font-size: 8px;
	}
	.s_title br{	display: inline;}
	.s_title:before{
		content: "";
		width: 150px;
		height: 2px;
		bottom: -2px;
		right: calc(50% - 75px);
	}
	.s_title:after{
		width: 14px;
		height: 14px;
		bottom: -9px;
		right: calc(50% - 7px);
	}

	/** pbox **/
	.pbox{
		width: 100%;
		margin: 0;
		padding: 0 0 30px 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.pbox::-webkit-scrollbar{	display: none;}
	.pbox table{
		width: 100%;
		min-width: 570px;
		border-spacing: 3px 0;
	}
	.pbox tr h3{
		height: 30px;
		line-height: 1.3;
		text-align: center;
		margin: 0 0 3px 0;
	}
	.pbox tr h3 em{
		font-size: 13px;
	}
	.pbox tr h3 span{
		font-size: 10px;
	}
	.pbox tr div{
		height: 24px;
		font-size: 8px;
		line-height: 1.2;
		text-align: center;
	}
	.pbox th{
		position: sticky;
		left: 0;
		z-index: 2;
		width: 120px;
		font-size: 11px;
		line-height: 1.2;
		padding: 10px 0 10px 10px;
		background: rgba(255,255,255,0.9);
		box-shadow: 3px 0 0 rgba(255,255,255,0.9);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.pbox td{
		font-size: 11px;
		line-height: 1.2;
		text-align: center;
		padding: 5px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.pbox td em{	font-size: 13px;}
	.pbox td.no{
		font-size: 13px;
		color: #bdbdbd;
	}
	.pbox td span{
		display: inline-block;
		font-size: 10px;
		line-height: 12px;
		color: #bdbdbd;
	}
	.pbox td.c1,
	.pbox td.c2,
	.pbox td.c3,
	.pbox td.c4{
		border-bottom: 3px solid #fff;
	}
	.pbox tr:last-of-type th,
	.pbox tr:last-of-type td{	border-bottom: 3px solid #f5f5f5;}


	/** url **/
	#url{
		padding: 30px 10px;
	}
	#url .url_in{
		display: block;
	}
	#url .url_in > div{
		width: auto;
		margin: 0 0 30px 0;
		padding: 50px 0 0 0;
	}
	#url .url_in > div:nth-of-type(1){	background-size: 50px auto;}
	#url .url_in > div:nth-of-type(2){	background-size: 50px auto;}
	#url .url_in > div:last-of-type{	margin-bottom: 0;}
	#url .url_in > div h4{
		font-size: 18px;
		line-height: 22px;
		margin: 0 0 5px 0;
	}
	#url .url_in > div p{
		font-size: 12px;
		line-height: 22px;
		margin: 0 0 10px 0;
	}
	#url .url_in > div ul{
		width: 90%;
		margin: 0 auto;
	}
	#url .url_in > div li{
		font-size: 17px;
		line-height: 30px;
		border-radius: 5px;
		padding: 5px 10px;
		margin-bottom: 5px;
	}

	/** flow **/
	#flow{	padding: 30px 10px 30px 10px;}
	#flow .flow_img{
		font-size: 0;
		line-height: 0;
	}
	#flow .flow_img img{
		width: 90%;
		height: auto;
	}

	.pc_none{ display: inline;}
	
}