@charset "utf-8";
/* CSS Document */
body {
	background-color: #FFF;
}
@media only screen and (min-width: 999px) {
body {
	background: #FFF url(../../images/page/common/page_bg.png) repeat-x left top;
}
}
.pageMainVisual {
	background-image: url(../images/pagetitle_bg.png);
}
@media only screen and (min-width: 998px) {
 .orderWeb .large-block-grid-1 > li {
    list-style: none;
    width: 100%;
}
 .orderTel .large-block-grid-1 > li {
    list-style: none;
    width: 100%;
}
}
.faxBtn {
background: #fd7d7d; /* Old browsers */
background: -moz-linear-gradient(top,  #fd7d7d 0%, #f64e4e 46%, #c51c1c 58%, #c51c1c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fd7d7d), color-stop(46%,#f64e4e), color-stop(58%,#c51c1c), color-stop(100%,#c51c1c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fd7d7d 0%,#f64e4e 46%,#c51c1c 58%,#c51c1c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fd7d7d 0%,#f64e4e 46%,#c51c1c 58%,#c51c1c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fd7d7d 0%,#f64e4e 46%,#c51c1c 58%,#c51c1c 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fd7d7d 0%,#f64e4e 46%,#c51c1c 58%,#c51c1c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd7d7d', endColorstr='#c51c1c',GradientType=0 ); /* IE6-9 */
border: 1px solid #a71a1a;
box-shadow: 0px 0px 2px rgba(255, 255, 255, 1) inset;
text-shadow: 2px 0px 1px #9e5e00, 0px 2px 1px #9e5e00, -2px 0px 1px #9e5e00, 0px -2px 1px #9e5e00;
display: block;
color: #FFF;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
text-align: center;
padding: 10px 5px;
position: relative;
}
.faxBtn:hover {
background: #fca6a6; /* Old browsers */
background: -moz-linear-gradient(top,  #fca6a6 0%, #f48484 46%, #c45252 58%, #c45252 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fca6a6), color-stop(46%,#f48484), color-stop(58%,#c45252), color-stop(100%,#c45252)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fca6a6 0%,#f48484 46%,#c45252 58%,#c45252 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fca6a6 0%,#f48484 46%,#c45252 58%,#c45252 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fca6a6 0%,#f48484 46%,#c45252 58%,#c45252 100%); /* IE10+ */
background: linear-gradient(to bottom,  #fca6a6 0%,#f48484 46%,#c45252 58%,#c45252 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fca6a6', endColorstr='#c45252',GradientType=0 ); /* IE6-9 */
color: #FFF;
text-shadow: 2px 0px 1px #9e5e00, 0px 2px 1px #9e5e00, -2px 0px 1px #9e5e00, 0px -2px 1px #9e5e00;
}
.faxBtn:before {
	content: "";
	display: inline-block;
	width:0px;
	height:0px;
	border-top:solid 8px transparent;  /*見せたい三角は色（#ddd）を指定*/
	border-right:solid 8px transparent;  /*見せたくないのでtransparentで透明に*/
	border-bottom:solid 8px transparent;  /*見せたくないのでtransparentで透明に*/
	border-left:solid 8px #FFF;  /*見せたくないのでtransparentで透明に*/
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: -8px;
}
.deliveryBtn {
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(top,  #f3f3f3 0%, #e7e7ea 44%, #cdd2d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f3f3), color-stop(44%,#e7e7ea), color-stop(100%,#cdd2d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3f3f3 0%,#e7e7ea 44%,#cdd2d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3f3f3 0%,#e7e7ea 44%,#cdd2d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3f3f3 0%,#e7e7ea 44%,#cdd2d6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f3f3f3 0%,#e7e7ea 44%,#cdd2d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#cdd2d6',GradientType=0 ); /* IE6-9 */
border: 1px solid #cbcbcb;
box-shadow: 0px 0px 1px rgba(255, 255, 255, 1) inset;
display: block;
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 1.5;
text-align: center;
padding: 10px 5px;
position: relative;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.deliveryBtn:hover {
background: #f2f2f2; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f2f2 0%, #e8e8e8 44%, #e5e6e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(44%,#e8e8e8), color-stop(100%,#e5e6e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f2f2 0%,#e8e8e8 44%,#e5e6e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f2f2 0%,#e8e8e8 44%,#e5e6e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f2f2 0%,#e8e8e8 44%,#e5e6e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f2f2 0%,#e8e8e8 44%,#e5e6e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e5e6e8',GradientType=0 ); /* IE6-9 */

color: #000;
}
.deliveryBtn:before {
	content: "";
	display: inline-block;
	width:0px;
	height:0px;
	border-top:solid 8px transparent;  /*見せたい三角は色（#ddd）を指定*/
	border-right:solid 8px transparent;  /*見せたくないのでtransparentで透明に*/
	border-bottom:solid 8px transparent;  /*見せたくないのでtransparentで透明に*/
	border-left:solid 8px #000;  /*見せたくないのでtransparentで透明に*/
	position: absolute;
	top: 50%;
	left: 10px;
	margin-top: -8px;
}
@media only screen and (max-width: 40.0624em) {
	.faxBtn {
width: 100% !important;
}
.deliveryBtn {
	padding: 10px 5px 10px 20px;
}

}
@media only screen and (max-width: 998px) {
.orderWeb, .orderTel, .orderFax {
	margin-bottom: 50px;
}
.orderFlow .tit01 {
	background: #dbf5f3; /* Old browsers */
background: -moz-linear-gradient(top,  #dbf5f3 0%, #87d2cd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dbf5f3), color-stop(100%,#87d2cd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #dbf5f3 0%,#87d2cd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #dbf5f3 0%,#87d2cd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #dbf5f3 0%,#87d2cd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #dbf5f3 0%,#87d2cd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbf5f3', endColorstr='#87d2cd',GradientType=0 ); /* IE6-9 */
border: 1px solid #c3c9cd;
-webkit-box-shadow: inset 1px 1px 0px 0 #ffffff,inset -1px -1px 0px 0 #ffffff; /* Safari, Chrome用 */
  -moz-box-shadow: inset 1px 1px 0px 0 #ffffff,inset -1px -1px 0px 0 #ffffff; /* Firefox用 */
  box-shadow: inset 1px 1px 0px 0 #ffffff,inset -1px -1px 0px 0 #ffffff; /* CSS3 */
padding: 5px;
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
	
}
.orderWeb .txtBox01, .orderTel .txtBox01, .orderFax .txtBox01 {
	background-color: #445950;
	-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
color: #FFF;
padding: 15px;	
margin: 0 0 60px;
position: relative;
}
.orderWeb .txtBox01:after, .orderTel .txtBox01:after, .orderFax .txtBox01:after {
	content: url(../images/sp_flow_arrow_bg.png);
	position: absolute;
	bottom: -55px;
	left: 50%;
	margin-left: -18px; 
}
.orderFlow .txtBox02 {
	border: 1px solid #94ded8;
	-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 4px 0px rgba(170, 184, 200, 1);
-moz-box-shadow:    0px 0px 4px 0px rgba(170, 184, 200, 1);
box-shadow:         0px 0px 4px 0px rgba(150, 184, 200, 1);
padding: 15px;
position: relative;
margin-bottom: 60px;
}
.orderWeb .txtBox02:after, .orderTel .txtBox02:after, .orderFax .txtBox02:after {
	content: url(../images/sp_flow_arrow_bg.png);
	position: absolute;
	bottom: -55px;
	left: 50%;
	margin-left: -18px;
}
.orderFlow .inn01 {
	margin-bottom: 10px;
}
.orderFlow .txtBox02 .inn03 {
	font-weight: bold;
}
.orderFlow .txtBox02 .inn04 {
	margin-bottom: 0;
}
.orderWeb .startBtn, .orderWeb .trialBtn, .orderWeb .babyBtn {
	font-size: 12px;
}
.orderTel .startBtn, .orderTel .trialBtn, .orderTel .babyBtn {
	font-size: 12px;
}
.babyBtn:before, .startBtn:before, .trialBtn:before, .addBtn:before {
	left: 10px;
}
.orderFlow .orderNew, .orderFlow .orderAdd {
	border: 1px solid #94ded8;
	-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 0px 4px 0px rgba(170, 184, 200, 1);
-moz-box-shadow:    0px 0px 4px 0px rgba(170, 184, 200, 1);
box-shadow:         0px 0px 4px 0px rgba(150, 184, 200, 1);
padding: 15px;
position: relative;
margin: 0 10px;
}
.orderNew h3 {
	color: #db0202;
	font-weight: bold;
}
.orderNew .inn01 {
	font-weight: bold;
}
.orderAdd h3 {
	color: #0074c6;
	font-weight: bold;
}
.orderAdd .inn01 {
	font-weight: bold;
}
.orderAdd .inn02 {
}
.faxBtn {
width: 200px;
}
.orderWeb .img01, .orderTel .img01, .orderFax .img01 {
	float: right;
}
.orderWeb .img01 {
	margin: -40px 0 10px
}

}
@media only screen and (min-width: 999px) {
.orderFlow {
	background: url(../images/order_flow_bg.png) no-repeat left top;
	width: 700px;
	height: 739px;
	position: relative;
	font-size: 12px;
	line-height: 1.5;
	margin-bottom: 70px;
}
.orderFlow dl, .orderFlow p {
	font-size: 12px;
}

.orderFlow h3{
	width: 228px;
	text-align: center;
	font-weight: bold;
}
.orderTel h3, .orderTel .inn01, .orderTel .inn02, .orderTel .inn03, .orderTel .inn04,
.orderFax h3, .orderFax .inn01, .orderFax .inn02, .orderFax .inn03, .orderFax .inn04,
.orderWeb h3, .orderWeb .inn01, .orderWeb .inn02, .orderWeb .inn03, .orderWeb .inn04,
.orderNew h3, .orderNew .inn01,
.orderAdd h3, .orderAdd .inn01, .orderAdd .inn02, .orderAdd .inn03,
.orderWeb .img01, .orderTel .img01, .orderFax .img01 {
	position: absolute;
}
.orderWeb h3 {
	left: 0px;
	top: 20px;
}
.orderWeb .inn01 {
	left: 25px;
	top: 115px;
	color: #FFF;
	font-size: 14px;
	width: 140px;
}
.orderWeb .img01 {
	left: 100px;
	top: -70px;
}
.orderWeb .inn02 {
	left: 14px;
	top: 219px;
}
.orderWeb .inn02 ul {
	margin: 0;
	padding: 0;
}
.orderWeb .inn02 li {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.orderWeb .startBtn, .orderWeb .trialBtn, .orderWeb .babyBtn {
	font-size: 12px;
	width: 200px;
}
.orderTel .startBtn, .orderTel .trialBtn, .orderTel .babyBtn {
	font-size: 12px;
	width: 200px;
}
.babyBtn:before, .startBtn:before, .trialBtn:before, .addBtn:before {
	left: 10px;
}
.orderWeb .inn03 {
	left: 22px;
	top: 390px;
	width: 170px;
	font-weight: bold;
}
.orderWeb .inn04 {
	left: 22px;
	top: 440px;
	width: 170px;
}
.orderTel h3 {
	left: 236px;
	top: 20px;
}
.orderTel .inn01 {
	left: 261px;
	top: 115px;
		color: #FFF;
	font-size: 14px;
	width: 140px;
}
.orderTel .img01 {
	left: 105px;
	top: -70px;
	margin:0;
}
.orderTel .inn01 img {
	vertical-align: middle;
	margin: 0 5px 0 0;
}
.orderTel .inn02 {
	left: 251px;
	top: 170px;
	color: #FFF;
	width: 200px;
}
.orderTel .inn02 p {
	margin-bottom: 10px;
}
.orderTel .inn03 {
	left: 260px;
	top: 390px;
	width: 170px;
	font-weight: bold;
}
.orderTel .inn04 {
	left: 260px;
	top: 440px;
	width: 170px;
}
    
.orderTel .inn02 ul {
	margin: 0;
	padding: 0;
}
.orderTel .inn02 li {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.orderTel .startBtn, .orderTel .trialBtn, .orderTel .babyBtn {
	font-size: 12px;
	width: 200px;
}
.orderFax h3 {
	left: 472px;
	top: 20px;
}
.orderFax .inn01 {
	left: 500px;
	top: 115px;
	color: #FFF;
	font-size: 16px;
	width: 190px;
}
.orderFax .img01 {
	left: 125px;
	top: -80px;
}
.orderFax .inn01 img {
    vertical-align: middle;
    margin: 0 5px 0 0;
}
.orderFax .inn02 {
	left: 486px;
	top: 177px;
}
.orderFax .inn02 p {
	color: #FFF;
	width: 180px;
	margin: 0 0 10px 10px;
}
.orderFax .inn03 {
	left: 495px;
	top: 390px;
	width: 170px;
	font-weight: bold;
}
.orderFax .inn04 {
	left: 495px;
	top: 440px;
	width: 170px;
}

.orderNew h3 {
	left: 110px;
	top: 600px;
	color: #db0202;
}
.orderNew .inn01 {
	left: 120px;
	top: 630px;
	width: 200px;
	font-weight: bold;
}
.orderAdd h3 {
	left: 360px;
	top: 600px;
	color: #0074c6;
}
.orderAdd .inn01 {
	left: 373px;
	top: 630px;
	width: 200px;
	font-weight: bold;
}
.orderAdd .inn02 {
	left: 370px;
	top: 670px;
}
.deliveryBtn {
width: 200px;
}
.faxBtn {
width: 200px;
}

}




@media only screen and (min-width: 40.0625em) {
}