@charset "UTF-8";

#purchase .wrap {
	padding-bottom:60px;
}
#purchase .contents_inner {
	width:100%;
}

.selecttbl {
	width:55%;
	border-collapse:collapse;
	background-color:#FFFFFF;
}
.selecttbl th,
.selecttbl td {
	border:1px solid #acacac;
}
.selecttbl th {
	background-color:#088D87;
	color:#FFFFFF;
	width:50%;
	font-size:1.8rem;
	font-weight:500;
	padding:.5em;
	text-align:center;
}
.selecttbl td {
	padding:15px;
}
.selecttbl td label {
	width:100%;
	font-size:1.5rem;
	line-height:1.2;
	margin-bottom:.75em;
}
.selecttbl td label input {
	display:none;
}
.selecttbl td label .checkbox {
	border-radius:0;
	width:1em;
	height:1em;
	border:1px solid #666666;
	position:relative;
	margin-right:.5em;
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: -1;
	order: -1;
}
.selecttbl td label .pname {
	width:calc(100% - 1.6em);
}
.selecttbl td label input:checked + span + .checkbox::before {
	content:'';
	display:block;
	width:.25em;
	height:.45em;
	border-right:3px solid #088D87;
	border-bottom:3px solid #088D87;
	position:absolute;
	top:40%;
	left:53%;
	transform:translate(-50%,-50%) rotate(45deg);
}
.selecttbl td .selectmodels {
	background-color:#D9E9E8;
	padding:10px 10px 15px;
	margin-bottom:30px;
	position:relative;
}
.selecttbl td .selectmodels.loading::before,
.selectdata.loading::before{
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:url(../img/common/loading.gif) no-repeat center center/auto #FFFFFF;
	opacity:.5;
}
.selecttbl td .selectmodels dt {
	margin-bottom:.5em;
}
.selecttbl td .selectmodels .label {
	margin-right:1em;
}
.selecttbl td .selectmodel select {
	width:100%;
	padding:.25em;
	margin-bottom:1em;
}
.selecttbl td .selectnumber dt {
	margin-bottom:.5em;
}
.selecttbl td .selectnumber dd:not(:last-child) .pnumber {
	width:120px;
	text-align:center;
	margin-left:calc(100% - 120px);
}
.selecttbl td .selectnumber dd:last-child {
	padding:1em 0;
	width:100%;
}
.selecttbl td .selectnumber dd:last-child > .label {
	width:60%;
	text-align:center;
}
.selecttbl td .selectnumber dd:last-child .pnumber {
	width:40%;
	border-bottom:1px solid #000000;
	padding:.25em .5em;
	text-align:center;
}
.selecttbl td .selectnumber dd:last-child #pnumber {
	margin-right:.5em;
}

.selectdata {
	width:calc(45% - 50px);
	background-color:#FFFFFF;
	border:1px solid #acacac;
	box-shadow:0 0 5px rgba(0,0,0,.2);
	padding:15px;
	position:relative;
}
.selectdata .total {
	margin-bottom:2em;
}
.selectdata .totalcost {
	width:50%;
	margin-left:50%;
	border-bottom:1px solid #000000;
	padding:.25em .5em;
	text-align:center;
}
.selectdata #totalcost {
	margin-right:.5em;
}
.selectdata .btnset {
	width:100%;
}
.selectdata .btn {
	color:#088d87;
	font-size:1.3rem;
	width:calc(55% - 10px);
	max-width:20em;
	border:1px solid #088d87;
	height:3.0em;
	background-color:#FFFFFF;
	transition:.3s;
}
.selectdata .btn::before {
	content:'';
	display:inline-block;
	width:1.75em;
	height:1.75em;
	background:url(../img/common/icon_cart2.png) no-repeat center center/contain;
	margin-right:.25em;
}
.selectdata .btn:last-child {
	width:45%;
}
.selectdata .btn:last-child::before {
	background:url(../img/common/icon_memo.png) no-repeat center center/contain;
	margin-right:.5em;
}
.selectdata .btn:hover {
	background-color:#E4EFEF;
}

#step .contents h2 {
	font-size:1.8rem;
	text-align:center;
	font-weight:400;
	position:relative;
	margin-bottom:1.5em;
}
#step .contents h2::after {
	content:'';
	display:block;
	width:2em;
	height:2px;
	background-color:#E8236F;
	position:absolute;
	left:50%;
	transform:translate(-50%,.25em);
}
#step .contents > dl {
	margin-bottom:30px;
	line-height:1.6;
}
#step .contents > dl dt {
	font-weight:600;
	margin-bottom:.25em;
}
#step .step {
	width:100%;
}
#step .step li {
	width:calc((100%/3) - 70px);
	position:relative;
}
#step .step li:not(:last-child)::before {
	content:'';
	display:block;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 30px solid #E8236F;
	position:absolute;
	right:-70px;
	top:50px;
}
#step .step dt {
	font-size:1.8rem;
	padding:.5em;
	text-align:center;
	font-weight:500;
	background-color:#088D87;
	color:#FFFFFF;
	margin-bottom:.5em;
}
#step .step dd {
	line-height:1.6;
}

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

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

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

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

#purchase .wrap {
	padding-bottom:30px;
}

.selecttbl {
	width:100%;
	margin-bottom:15px;
}
.selecttbl th {
	font-size:1.5rem;
}
.selecttbl td {
	padding:10px;
}
.selecttbl td label {
	font-size:1.4rem;
}
.selecttbl td .selectmodels {
	margin-bottom:15px;
	font-size:1.4rem;
}
.selecttbl td .selectnumber dt {
	font-size:1.4rem;
}
.selecttbl td .selectnumber dd:not(:last-child) .pnumber {
	width:100px;
	margin-left:calc(100% - 100px);
}
.selecttbl td .selectnumber dd:last-child > .label {
	font-size:1.4rem;
	width:50%;
}
.selecttbl td .selectnumber dd:last-child .pnumber {
	width:50%;
	font-size:1.4rem;
}

.selectdata {
	width:100%;
}
.selectdata .btn {
	font-size:1.2rem;
	transition:0s;
}
.selectdata .btn:hover {
	background-color:#ffffff;
}

#step .contents h2 {
	font-size:1.6rem;
}
#step .contents > dl {
	font-size:1.4rem;
}
#step .step li {
	width:100%;
}
#step .step li:not(:last-child) {
	padding-bottom:40px;
}
#step .step li:not(:last-child)::before {
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 20px solid #E8236F;
	position:absolute;
	right:calc(50% - 10px);
	top:auto;
	bottom:-8px;
	
}
#step .step dt {
	font-size:1.6rem;
}
#step .step dd {
	font-size:1.4rem;
}
	
}