@charset "utf-8";

/* ===========================================================================================================================
	setup
=========================================================================================================================== */

/**************************************
トップページ
**************************************/
section h3 {
	text-align:center;
	letter-spacing:0.2em;
	font-weight:bold;
	font-size:1.5em;
	padding-top: 5%;
}

@media screen and (max-width: 479px) {
	section h3 {
		font-size:1.3em;
	}
}
/****************************************
メインイメージ
****************************************/
.mainImage {
	background-image: url(../img/mainimg_bg.png);
	background-repeat:repeat;
}

#mainImageImg {
	max-width:980px;
	margin:auto;
	/*height: 550px;*/
	overflow:hidden;
	/*background-image:url(../img/main_img_bg.png);
	background-size:contain;*/
	position:relative;
	clear: both;
}

#mainImageLow {
	height: 49px;
	background-image:url(../img/mainimg_low_bg.png);
	background-repeat:repeat-x;
	margin-top:-1px;
}

@keyframes fadeImg {
	0% {
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}

	/*75% {
		opacity: 1;
	}*/
	100% {
		opacity: 0;
	}
}

#mainImg01,
#mainImg02, 
#mainImg03, 
#mainImg04,
#mainImg04_2, 
#mainImg05,
#mainImg05_2 {
	position: absolute;
}

#mainImageImg {
	background-image:url(../img/bg_gradient_opacity.png), url(../img/main_img_bg_02.png);
	background-repeat:repeat-x, repeat-y;
	background-size:auto, contain;
	background-position:bottom, top;
}

#mainImageImg h2 {
	text-align: center;
	/*padding-top: 90px;*/
}

#mainImg01 {
	top:40px;
    right:0px;
    /*bottom:0px;*/
    left:0px;
    margin:auto auto;
	z-index: 10;
	width: 63%;
}

#mainImg02 {
	top:40px;
    right:0px;
    /*bottom:0px;*/
    left:0px;
    margin:auto auto;
	z-index: 9;
	width: 63%;
}

#mainImg03 {
	top: 45%;
    left: 60%;
    z-index: 9;
	width:27%;
}

#mainImg04, #mainImg04_2 {
	top: 54%;
    left: 1%;
    z-index: 9;
	width:20%;
}

#mainImg04,
#mainImg05,
#mainImg04_2,
#mainImg05_2 {
	animation-name: fadeImg;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	opacity: 0;
}

#mainImg04_2, #mainImg05_2 {
	animation-delay:5s;
}

#mainImg05, #mainImg05_2 {
	top: 4%;
    left: 78%;
    z-index: 9;
	width:20%;
}

@media screen and (max-width: 479px) {
	#mainImg00 {
		padding-bottom:20px;
	}
	
	#mainImg01, #mainImg02 {
		top:8px;
		width: 90%;
	}
	
	#mainImg03 {
		top:52%;
		left:63%;
		width: 27%;
	}
	
	#mainImg04,
	#mainImg04_2,
	#mainImg05,
	#mainImg05_2 {
		display:none;
	}
}

/***********************************
特徴
***********************************/
.feature {
	max-width: 1210px;
	margin:auto;
}

.featureBox {
	width: 30%;
	/*height: 350px;*/
	position: relative;
	float:left;
	margin-right: 5%;
	margin-bottom:50px;
}

.featureBoxLast {
	margin-right:0px;
}

.featureBox h5 {
	color:#FFF;
	width: 100%;
	line-height:50px;
	font-weight:bold;
	text-align:center;
	font-size:1.3em;
	position:absolute;
	z-index:2;
}

.featureBox img {
	border-radius: 10px;
	width:100%;
}

@media screen and (max-width: 979px) {
	.featureBox h5 {
		letter-spacing: 0.05em;
		line-height: 36px;
		font-size:1.2em;
	}
}

@media screen and (max-width: 767px) {
	.featureBox h5 {
		letter-spacing: 0.08em;
    	line-height: 30px;
		width:50%;
	}
	
	.featureBox {
		float: none;
		margin:auto;
		margin-bottom: 20px;
		width:80%;
		/*height:280px;*/
		clear:both;
	}
	
	.featureBox_left {
		float: left;
    	width: 50%;
	}
	
	.featureBox_right {
		width: 50%;
		float: right;
		padding-left: 10px;
	}
}

@media screen and (max-width: 479px) {
	.featureBox_left, .featureBox_right {
		float:none;
		width:100%;
		padding:0px;
	}
	
	.featureBox h5 {
		width:100%;
		line-height:40px;
		font-size:1.5em;
	}
}
/**************************************
せっけんクリーニング
***************************************/
#cleaningUp {
	background-image:url(../img/cleaning_up_bg.png);
	background-repeat:repeat-x;
	height: 48px;
	width: 100%;
}

.cleaning {
	background-image:url(../img/mainimg_bg.png);
	background-repeat:repeat;
	padding-bottom: 30px;
}

#cleaningMain {
	max-width:1410px;
	margin:auto;
	background-image:url(../img/bg_gradient_opacity.png), url(../img/cleaning_bg.png);
	background-repeat:repeat-x, repeat-y;
	background-size:auto, contain;
	background-position:bottom, top;
	padding-bottom:30px;
}

#cleaningCol {
	max-width: 980px;
	width:80%;
	margin:20px auto;
	overflow:hidden;
}

#cleaningCol div:nth-of-type(2) {
	max-width: 410px;
	width:40%;
	padding: 0px 40px;
	float:left;
}

#cleaningCol div:first-child {
	max-width:570px;
	width:60%;
	float:right;
}

.twoColl h4 {
	margin-top: 20px;
	font-weight:bold;
	font-size:1.3em;
	color: #215eb1;
}

@media screen and (max-width: 767px) {
	#cleaningCol div:first-child {
		float: none;
		width: 80%;
		margin: auto;
		margin-bottom:20px;
	}
	
	#cleaningCol div:nth-of-type(2) {
		float: none;
		width: 100%;
		margin: auto;

	}
}

@media screen and (max-width: 479px) {
	#cleaningMain {
		background-image:none;
	}
	
	#cleaningCol div:first-child {
		width:100%;
	}
}

/*******************************************
集荷地域
*******************************************/
.clinic-link {
	background-image:url(../img/area_bg.jpg);
	background-repeat:repeat;
	background-position: center bottom;
	padding-top:60px;
	text-align: center;
}

.clinic-link .inner {
	width: 80%;
	max-width:980px;
	margin:auto;
	padding: 
}

.area {
	background-image:url(../img/area_bg.jpg);
	background-repeat:repeat;
	padding-bottom:60px;
}

#areaContents {
	max-width:980px;
	margin:auto;
	text-align:center;
	clear:both;
}

#areaCol {
	margin-top:30px;
}

#areaL {
	float:left;
	width: 48%;
	background-image:url(../img/area_l_bg.png);
	background-repeat:no-repeat;
	background-size:contain;
	position:relative;
	padding: 0px;
}

#areaR {
	width:48%;
	float: right;
}

#areaL_Img01 {
	width:75%;
	position: absolute;
    top: -15px;
    left: 2%;
}

#areaL_Img02 {
	width:75%;
	position: absolute;
    top: 38%;
    left: 29%;
}

@media screen and (max-width: 767px) {
	#areaL {
		float:none;
		margin:auto;
		width:65%;
	}
	
	#areaR {
		float:none;
		margin:auto;
		margin-bottom:20px;
		width:80%;
	}
}

@media screen and (max-width: 479px) {
	#areaContents {
		width: 80%;
	}
	
	#areaL, #areaR {
		width:100%;
	}
}

/*********************************************
お客様の声
*********************************************/
.voice {
	margin-bottom:90px;
}

#voiceContents {
	max-width:980px;
	margin: auto;
	text-align:center;
}

.fourColl {
	margin: 30px auto;
	margin-bottom: 60px;
}

.voiceBox {
	width: 23%;
    padding: 20px;
    font-weight: bold;
    float: left;
	margin: 0% 1%;
    /* background-image: url(../img/voice_pop_bg.png); */
    /* background-repeat: no-repeat; */
    border: 2px solid #215eb1;
    border-bottom: 4px solid #215eb1;
    border-radius: 10px;
}

.voiceBox span {
	display:block;
	height: 150px;
	margin-bottom:25px;
}

.voiceBox p{
	text-align:left;
	color:#215eb1;
}

p.voiceBox_shop {
	text-align:right;
}

.voiceBox::after {
	content: url(../img/pop.png);
    attr: pop;
    display: block;
    margin-bottom: -63px;
}

@media screen and (max-width: 767px) {
	.fourColl {
		max-width: 78%;
	}
	
	.voiceBox {
		width:48%;
		margin-bottom: 40px;
	}
	
	.voiceBox span {
		height:120px;
	}
}

@media screen and (max-width: 479px) {
	.fourColl {
		max-width:100%;
	}
	
	.voiceBox {
		width: 100%;
    	margin: auto;
    	margin-bottom: 40px;
    	float: none;
	}
	
	#voiceContents {
		width:70%;
	}
}
/***********************************************
新着情報
***********************************************/
.blog {
	width:100%;
	background-image:url(../img/mainimg_bg.png);
	background-repeat:repeat;
	/*padding-bottom:30px;*/
}

#blogContents {
	max-width: 1410px;
	margin:auto;
	padding-bottom: 30px;
	background-image:url(../img/bg_gradient_opacity.png), url(../img/blog_bg.png);
	background-repeat:repeat-x, repeat-y;
	background-size:auto, contain;
	background-position:bottom, top;
}

.blogBox {
	width: 29.5%;
/*	height: 450px;
	float: left;
*/
	display:inline-block;
	margin-right:5%;
	text-align:left;
	vertical-align:top;
}

.blogBoxLast {
	margin-right:0px;
}

.blogBox img {
	border-radius: 20px;
}

.blogDate {
	margin:10px 0px;
}

.blogTopTitle {
	font-size:1.142857142857143rem;
	line-height:1.3;
}

#blogUp {
	width:100%;
	height: 49px;
	background-image:url(../img/cleaning_up_bg.png);
	background-repeat:repeat-x;
}

#blogLow {
	width:100%;
	height: 49px;
	background-image:url(../img/mainimg_low_bg.png);
	background-repeat:repeat-x;
	position:relative;
}

@media screen and (max-width: 767px) {
	.blogBox {
		float: none;
		margin: auto;
		width: 80%;
		max-width: 420px;
		height: auto;
		margin-bottom: 30px;
	}
	
	.blobBoxLast {
		margin-right:auto;
	}
}

@media screen and (max-width: 479px) {
	#blogContents {
		background-image:none;
	}
}