@charset "utf-8";
/* CSS Document */

/*/////////////////////////////////////////////////////////
file name: service.css
description: 宅配のしくみページ専用スタイルシート

1.レイアウト



///////////////////////////////////////////////////////// */

/* ===========  1.レイアウト  =========== */

.boxService01 {
	width: 320px;
	margin-right: 20px;
	float: left;
	margin-top: 20px;
}

.boxService02 {
	width: 320px;
	float: left;
	margin-top: 20px;
}

.boxService03 {
	width: 235px;
	margin-right: 20px;
	float: left;
	margin-top: 20px;
}

.boxService04 {
	width: 235px;
	float: left;
	margin-top: 20px;
}

.boxService05 {
	width: 650px;
	margin-right: 30px;
	float: left;
	margin-top: 20px;
}

.boxService06 {
	width: 320px;
	float: left;
	margin-top: 20px;
}

.boxService07 {
	width: 490px;
	float: left;
	margin-top: 20px;
}

.boxService08 {
	width: 490px;
	float: right;
	margin-top: 20px;
}

/*宅配サービスのシステム*/	
.titleLead {
	border-radius: 6px;         /* CSS3 */
	-moz-border-radius: 6px;    /* Firefox */
	-webkit-border-radius: 6px; /* Safari,Chrome */
	-khtml-border-radius: 6px;
	background: #e60012;
	font-size: 187.5%;
	font-weight: 900;
	padding: 10px;
	text-align: center;
	color: white;
}

/*宅配サービスの特徴*/
.boxFeature01 {
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Safari,Chrome */
	-khtml-border-radius: 10px;
	padding: 15px 20px 114px;
	background: #d5f2ff url(../images/img_service02.jpg) left bottom no-repeat;
}

.boxFeature02 {
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Safari,Chrome */
	-khtml-border-radius: 10px;
	padding: 15px 20px 114px;
	background: #d5f2ff url(../images/img_service03.jpg) left bottom no-repeat;
}

.boxFeature03 {
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Safari,Chrome */
	-khtml-border-radius: 10px;
	padding: 15px 20px 114px;
	/*background: #d5f2ff url(../images/img_service04.jpg) left bottom no-repeat;*/
	background: #d5f2ff url(../../images/img_feature03.jpg) left bottom no-repeat;
}

.boxFeatureS {
	border-radius: 10px;         /* CSS3 */
	-moz-border-radius: 10px;    /* Firefox */
	-webkit-border-radius: 10px; /* Safari,Chrome */
	-khtml-border-radius: 10px;
	padding: 15px 10px 5px;
	background: #d5f2ff;
}

/*保冷受箱と蓄冷剤のヒミツ*/
.titleSecret01 {
	background: url(../images/title_secret01.gif) left top no-repeat;
	padding-left: 120px;
	padding-top: 8px;
	font-weight: 900;
	font-size: 150%;
	min-height: 41px;
}

.titleSecret02 {
	background: url(../images/title_secret02.gif) left top no-repeat;
	padding-left: 120px;
	padding-top: 8px;
	font-weight: 900;
	font-size: 150%;
	min-height: 41px;
}

.titleSecret03 {
	background: url(../images/title_secret03.gif) left top no-repeat;
	padding-left: 120px;
	padding-top: 8px;
	font-weight: 900;
	font-size: 150%;
	min-height: 41px;
}

.titleSecret04 {
	background: url(../images/title_secret04.gif) left top no-repeat;
	padding-left: 120px;
	padding-top: 8px;
	font-weight: 900;
	font-size: 150%;
	min-height: 41px;
}

.boxSecret01 {
	width: 270px;
	float: left;
}

.boxSecret02 {
	width: 200px;
	float: right;
}
	


/* ====== スマートフォン縦横 ====== */
@media screen and (max-width: 667px) {

.boxService01 {
	width: 100%;
	margin-right: 0;
	float: none;
}

.boxService02 {
	width: 100%;
	float: none;
}

.boxService03 {
	width: 100%;
	margin-right: 0;
	float: none;
}

.boxService04 {
	width: 100%;
	float: none;
}

.boxService05 {
	width: 100%;
	margin-right: 30px;
	float: none;
}

.boxService06 {
	width: 100%;
	float: none;
	text-align: center;
}

.boxService07 {
	width: 100%;
	float: none;
}

.boxService08 {
	width: 100%;
	float: none;
}

#lead p img {
	width: 100%;
}

.boxFeature01 {
	padding: 15px 20px 15px;
	background: #d5f2ff;
}

.boxFeature02 {
	padding: 15px 20px 15px;
	background: #d5f2ff;
}

.boxFeature03 {
	padding: 15px 20px 15px;
	background: #d5f2ff;
}

.boxSecret01 {
	width: 100%;
	float: none;
}

.boxSecret02 {
	width: 100%;
	float: none;
	text-align: center;
}

}


/* ====== スマートフォン横 ===== */
@media only screen and (max-device-width:667px) and (orientation:landscape) {

.boxSecret01 {
	width: 50%;
	float: left;
}

.boxSecret02 {
	width: 45%;
	float: right;
}

.boxSecret02 img {
	width: 100%;
}


}