@charset "utf-8";

/*当社オペレーター作成ページ*/
h3.operat {background:#62ba7b; color:#FFF; padding:8px 10px; border:none; text-align:center; font-family: heisei-maru-gothic-std, sans-serif; font-weight:500; font-size:140%; letter-spacing:0.0125em;}
h3.operatAlert {background:#e95541; color:#FFF; padding:8px 10px; border:none; text-align:center; font-family: heisei-maru-gothic-std, sans-serif; font-weight:500; font-size:140%; letter-spacing:0.0125em;}

.topLead {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-bottom:40px;
}

.topLead .layoutOrder {
	width:35%;
	border-radius: 15px;
	text-align: center;
	padding-top:10px;
	padding-bottom:10px;
	border:#BEDFC2 6px solid;
	box-sizing:border-box;
	box-shadow: 5px 5px 0 0 #BEDFC2;
}

.layoutOrder .Howimg {margin: 0 auto;}
.topLead p { width:60%; }

@media screen and (max-width: 639px) {
	
.topLead {
	display: block;
	text-align: center;
}
	
.topLead .layoutOrder {width:90%; margin: 0 auto 20px auto;}
.topLead p { width:90%; margin: 0 auto; }
}

.opeFlo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:10px;
	background:#FFFBDA;
	border-radius: 15px;
	padding:20px 10px;
}

.opeFlo picture {display: block;}

@media screen and (max-width: 639px) {
	
.opeFlo {display: block;}
.opeFlo picture {text-align: center;}
.opeFlo picture img {margin:0 auto 20px auto;}
img.arr {transform:rotate(90deg);}
	
}

/*  特徴について  */
.tokuCho {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.tokuCho .tokuBox {
	border-radius: 15px;
	text-align: center;
	padding:10px;
	border:#BEDFC2 3px solid;
	box-sizing:border-box;
	width:calc(100% / 3.1);
	margin-bottom: 10px;
}

.text-m { font-size:80%; display: block; text-align: left; text-indent: -1em; margin-left:1em; margin-top:0.5em;}
.text-mcen { font-size:80%; display: block; text-align: center; margin-top:0.5em;}
.tx-green {color:#009844;}
strong.green {color:#009844; font-size:140%;}

a.toO02 {
	display: inline-block;
	text-align: center;
	padding: 8px 10px 10px 10px;
	padding-left:10px;
	padding-right:10px;
	border-radius: 8px;
	text-decoration: none;
	margin:10px auto;
	font-weight:600;
	font-family: heisei-maru-gothic-std, sans-serif;
	color:#231815;
	background:#BEDFC2;
	border:#BEDFC2 2px solid;
}
a.toO02:hover {background:#EBFCED;}

.priceSom {
	display: inline-block;
	text-align: center;
	/*padding: 8px 10px;*/
	width:75px;
	border-radius: 5px;
	margin:2px auto;
	font-weight:bold;
	font-size:75%;
	/*font-family: heisei-maru-gothic-std, sans-serif;*/
	color:#231815;
	border:#009844 2px solid;
	box-sizing: border-box;
}

@media screen and (max-width: 639px) {
	
.tokuCho .tokuBox {width:calc(100% / 2.05);}
	
}

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

.tokuCho {display: block; text-align: center;}
.tokuCho .tokuBox {width:95%; margin: 0 auto 10px auto;}
.priceSom {width:48%; padding: 5px;}
}


.indOn {text-indent: -1em; margin-left:1em;}
.indOn02 {margin-left: 2em;}

/* ご注文から納品までの流れ */
.opeOrFlo {text-align: center;}
.floimg {margin:0 auto;}

.opeOrFloco {
	display: flex;
	justify-content: space-between;
}

.opeOrFloco dl.floco {
	width:calc(100% / 4);
	position: relative;
}

.flc01 {background:#A4D3AC;}
.flc02 {background:#D4E9D7;}

.flc01:after,
.flc02:after {
	content: "";
	position: absolute;
	top: 10%;
	left: 100%;
	border: 20px solid transparent;
	z-index:50;
}
.flc01:after {border-left: 20px solid #A4D3AC;}
.flc02:after {border-left: 20px solid #D4E9D7;}
.noarrow:after {content:none;}
.opeOrFloco dl.floco dt {border-bottom:#FFF 1px solid; padding:12px 8px; text-align: center; font-weight:bold; font-size:120%; }
.tobo {padding-top:1.5em !important; padding-bottom:1.45em !important;}
.opeOrFloco dl.floco dd {padding:8px; font-size:85%;}

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

.opeOrFloco {display:block; text-align: center;}
.opeOrFloco dl.floco {width:90%; margin:0 auto;}
.opeOrFloco dl.floco dt {padding:30px 8px;} 
.opeOrFloco dl.floco dd {padding:20px 10px; font-size:100%;} 
.flc01:after,
.flc02:after {
	top: 100%;
	left: 45%;
	border: 20px solid transparent;
}
.flc01:after {border-top: 20px solid #A4D3AC;}
.flc02:after {border-top: 20px solid #D4E9D7;}
}

/*  オプションについて  */
dl.opeOp {
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	width:100%;
}

dl.opeOp dt { width:12%; margin-top:0.2em; margin-bottom:1em; font-weight:bold;}
dl.opeOp dd { width:86%; margin-bottom:1em;}

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

dl.opeOp {display: block;}	
dl.opeOp dt { width:100%; margin-bottom:0.5em; font-weight:bold;}
dl.opeOp dd { width:100%; margin-bottom:1.5em;}
}

.topcho {margin-top:1.5em !important; margin-bottom:1.5em !important;}