@charset "utf-8";

/*完全データ入稿ページ*/
h3.absubm {background:#004097; 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.aboutSubmData {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; margin-bottom: 0;}

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

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

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

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

/*  入稿データについて  */
.aboutSubm {
	border:#E95541 2px solid;
	padding:15px;
}

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

.tokuCho .tokuBox {
	border-radius: 15px;
	text-align: center;
	padding:10px;
	border:#C6E7F9 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;}
.tx-blue {color:#45B9DA;}
strong.green {color:#009844; font-size:140%;}
strong.blue {color:#45B9DA; font-size:140%;}
.nobor {border:none !important;}

a.toO03 {
	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:#C6E7F9;
	border:#C6E7F9 2px solid;
}
a.toO03:hover {background:#E5F3F9;}

.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);}
.norbor {display: none !important;}	
}

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

.tokuCho {display: block; text-align: center;}
.tokuCho .tokuBox {width:95%; margin: 0 auto 10px auto;}
.tokuCho .tokuBox img {width:90%;}
.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:#85CFED;}
.flc02 {background:#C6E7F9;}

.flc01:after,
.flc02:after {
	content: "";
	position: absolute;
	top: 10%;
	left: 100%;
	border: 20px solid transparent;
	z-index:50;
}
.flc01:after {border-left: 20px solid #85CFED;}
.flc02:after {border-left: 20px solid #C6E7F9;}
.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 #85CFED;}
.flc02:after {border-top: 20px solid #C6E7F9;}
}

/*  オプションについて  */
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;}