@charset "utf-8";




@media screen and (min-width:768px){
/*pc・タブレットcss*/

.top-ttl01{
	margin-bottom:20px;
	font-size:30px;
	text-align:center;
	font-weight:700;
}
.top-ttl01 .en{
	display:block;
	color:#008CD6;
}
.top-ttl01 .jp{
	display:block;
	background-color:#4DBBAA;
	color:#fff;
}
/*----------------------*/

#top-mv-sp{
	display:none;
}

/*----------------------*/

#top-mv{
	overflow:hidden;
	position:relative;
	background:url(../img/top/mv_bg.jpg) no-repeat center center / cover;
}
#top-mv .mv-ttl{
	width:36%;
	margin:0 auto;
	padding:3vw 0 1vw;
}
#top-mv .family-speech-left{
	position:absolute;
	left:4vw;
	bottom:0;
	width:34%;
	height:100%;
}
#top-mv .family-speech-right{
	position:absolute;
	right:4vw;
	bottom:0;
	width:34%;
	height:100%;
}
#top-mv .family-speech-left .family{
	position:absolute;
	z-index:2;
	left:-2vw;
	bottom:0;
	width:95%;
}
#top-mv .family-speech-right .family{
	position:absolute;
	z-index:2;
	left:10%;
	bottom:0;
	width:80%;
}
#top-mv .family-speech-left ul{
}
#top-mv .family-speech-left ul li:nth-child(1){
	position:absolute;
	left:0;
	top:26%;
	width:47%;
}
#top-mv .family-speech-left ul li:nth-child(2){
	position:absolute;
	left:29%;
	top:0;
	width:35%;
}
#top-mv .family-speech-left ul li:nth-child(3){
	position:absolute;
	right:0;
	top:21%;
	width:47%;
}
#top-mv .family-speech-right ul{
}
#top-mv .family-speech-right ul li:nth-child(1){
	position:absolute;
	left:0;
	top:26%;
	width:47%;
}
#top-mv .family-speech-right ul li:nth-child(2){
	position:absolute;
	left:29%;
	top:0;
	width:35%;
}
#top-mv .family-speech-right ul li:nth-child(3){
	position:absolute;
	right:0;
	top:21%;
	width:47%;
}

/*アニメ設定----------------------*/
/*----------------------*/


#top-mv{
}
#top-mv .mv-ttl{
	position:relative;
	opacity:0;
	animation-name:mv_ttl;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}
#top-mv .family-speech-left .family,
#top-mv .family-speech-right .family{
	opacity:0;
	animation-name:mv_family;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	animation-delay: 0.6s;
}
#top-mv .family-speech-left ul li:nth-child(1),
#top-mv .family-speech-right ul li:nth-child(1){
	opacity:0;
	animation-name:mv_speech01;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	animation-delay: 0.9s;
}
#top-mv .family-speech-left ul li:nth-child(2),
#top-mv .family-speech-right ul li:nth-child(2){
	opacity:0;
	animation-name:mv_speech02;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	animation-delay: 1.2s;
}
#top-mv .family-speech-left ul li:nth-child(3),
#top-mv .family-speech-right ul li:nth-child(3){
	opacity:0;
	animation-name:mv_speech03;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	animation-delay: 1.5s;
}

@keyframes mv_ttl{
  from {
    opacity: 0;
    transform: translateY(2%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes mv_family{
  from {
    opacity: 0;
	bottom:-1vw;
  }
  to {
    opacity: 1;
	bottom:0;
  }
}
@keyframes mv_speech01{
  from {
    opacity: 0;
    transform: translateY(2%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes mv_speech02{
  from {
    opacity: 0;
    transform: translateY(2%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes mv_speech03{
  from {
    opacity: 0;
    transform: translateY(2%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}




/*アニメ設定----------------------*/
/*----------------------*/







/*----------------------*/


#top-lead-txt{
	padding:40px;
	border-top: solid 12px #4DBBAA;
}
#top-lead-txt .txt{
	margin-bottom:30px;
	font-size:40px;
	line-height:1.3;
	font-weight:700;
	text-align:center;
	color:#008CD6;
}



/*----------------------*/

#about{
	padding:3vw 0;
	background:url(../img/top/about_bg.jpg) no-repeat center center / cover;
	color:#fff;
}
#about .ttl{
	width:16vw;
	height:16vw;
	border: solid 1px #fff;
	border-radius:100000px;
	font-size:2.5vw;
	text-align:center;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center;
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#about .ttl .inner{
	display:block;
}
#about .ttl .logo{
	display:block;
	width:40%;
	margin:0 auto;
}
#about .txt{
	line-height:1.8;
	width:calc(100% - 18vw - 20%);
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	
}
#about .btn-box{
	width:20%;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-align: flex-end; -ms-flex-align: flex-end; -webkit-align-items: flex-end; align-items: flex-end;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	
}

/*----------------------*/

#reason{
	border-top: solid 12px #4DBBAA;
	background:url(../img/top/reason_bg.jpg) repeat-x bottom center;
	padding-top:4vw;
	padding-bottom:13vw;
}
#reason .logo{
	width:220px;
	margin: 0 auto 30px;
}


#reason .reason-list{
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#reason .reason-list li{
	width:48%;
	margin-bottom:4%;
	border-radius:20px;
	overflow:hidden;
	background-color:#BDE1D6;
}
#reason .reason-list .txt{
	padding:20px 40px 40px;
}
#reason .reason-list .ttl{
	margin-bottom:10px;
	font-size:22px;
	text-align:center;
	letter-spacing:0.25em;
}
#reason .reason-list .link-ttl{
	margin-bottom:10px;
	text-align:center;
}
#reason .reason-list .link-ttl a{
	font-size:22px;
	text-align:center;
	letter-spacing:0.25em;
	border:solid 1px #fff;
	padding:10px 50px;
	display:inline-block;
}


/*----------------------*/

#others{
	border-top: solid 12px #4DBBAA;
	margin-bottom:8vw;
	padding-top:4vw;
}
#others .logo{
	width:220px;
	margin: 0 auto 30px;
}


/*----------------------*/

#initial-costs{
	margin-bottom:6vw;
}
#initial-costs .images{
	width:960px;
	margin:0 auto 20px;
}

/*----------*/

#operating-costs{
	margin-bottom:6vw;
}
#operating-costs .images{
	width:960px;
	margin:0 auto 20px;
}

/*----------*/

#interior300{
	margin-bottom:6vw;
}
.top-interior-slider{
	margin-bottom:30px;
}

/*----------*/

#cleaning-costs{
	margin-bottom:6vw;
}
#cleaning-costs .images{
	width:960px;
	margin:0 auto 20px;
}
#cleaning-costs .images02{
	width:830px;
	margin:0 auto 20px;
}

/*----------------------*/

#contact .contact_area {
    background:none;
    position: relative;
    padding:0;
}
.top_area2021 {
    background: #fff;
    box-shadow: none;
    padding:0;
    border-radius:0;
    margin:0;
    position: relative;
}


/*----------------------*/

#top-faq{
	text-align:center;
	margin-bottom:100px;
	padding-top:100px;
}


}

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


}
@media (max-width: 768px) {

		
	.top-ttl01{
		margin-bottom:5vw;
		font-size:22px;
		text-align:center;
		font-weight:700;
	}
	.top-ttl01 .en{
		display:block;
		color:#008CD6;
	}
	.top-ttl01 .jp{
		display:block;
		background-color:#4DBBAA;
		color:#fff;
	}
	
	/*----------------------*/
	
	#top-mv{
		display:none;
	}
	
	/*----------------------*/
	
	#top-mv-sp{
		overflow:hidden;
		position:relative;
		background:url(../img/top/mv_bg.jpg) no-repeat center center / cover;
	}
	#top-mv-sp .mv-ttl{
		width:80%;
		margin:0 auto;
		padding:5vw 0;
	}
	#top-mv-sp .top-mv-family-slider{
		width:100%;
	}
	#top-mv-sp .top-mv-family-slider figure{
		padding: 0 10vw;
	}
	
	
	
	/*----------------------*/
	
	
	#top-lead-txt{
		padding:5vw;
		border-top: solid 6px #4DBBAA;
	}
	#top-lead-txt .txt{
		margin-bottom:5vw;
		font-size:20px;
		line-height:1.3;
		font-weight:700;
		text-align:center;
		color:#008CD6;
	}
	
	
	
	/*----------------------*/
	
	/*----------------------*/
	
	#about{
		margin-bottom:10vw;
		padding:10vw 0;
		background:url(../img/top/about_bg_sp.jpg) no-repeat center right / cover;
		color:#fff;
	}
	#about .ttl{
		width:100%;
		border: solid 1px #fff;
		border-radius:100000px;
		font-size:20px;
		text-align:center;
		padding:2vw;
		margin-bottom:3vw;
	}
	#about .ttl .inner{
		display:block;
	}
	#about .ttl .logo{
		display:block;
		width:30%;
		padding-top:3vw;
		margin:0 auto;
	}
		
	#about .txt{
		line-height:1.8;
		width:100%;
		margin-bottom:5vw;
	}
	#about .btn-box{
		width:100%;
		text-align:center;
	}
	#about .btn-box a{
		width:100%;
	}
	
	/*----------------------*/
	
	#reason{
		border-top: solid 6px #4DBBAA;
		background:url(../img/top/reason_bg.jpg) repeat-x bottom center;
		padding-top:4vw;
		padding-bottom:13vw;
	}
	#reason .logo{
		width:40%;
		margin: 0 auto 5vw;
	}
	
	
	#reason .reason-list{
		-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
		-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;
		-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	}
	#reason .reason-list li{
		width:100%;
		margin-bottom:6vw;
		border-radius:20px;
		overflow:hidden;
		background-color:#BDE1D6;
	}
	#reason .reason-list .txt{
		padding:3vw 5vw 5vw;
	}
	#reason .reason-list .ttl{
		margin-bottom:2vw;
		font-size:18px;
		text-align:center;
		letter-spacing:0.1em;
	}
	#reason .reason-list .link-ttl{
		margin-bottom:10px;
		text-align:center;
	}
	#reason .reason-list .link-ttl a{
		font-size:18px;
		text-align:center;
		letter-spacing:0.25em;
		border:solid 1px #fff;
		padding:10px 50px;
		display:inline-block;
	}
	
	
	/*----------------------*/
	
	#others{
		border-top: solid 12px #4DBBAA;
		margin-bottom:8vw;
		padding-top:4vw;
	}
	#others .logo{
		width:40%;
		margin: 0 auto 5vw;
	}
	
	
	/*----------------------*/
	
	#initial-costs{
		margin-bottom:6vw;
	}
	#initial-costs .images{
		margin:0 auto 5vw;
	}
	
	/*----------*/
	
	#operating-costs{
		margin-bottom:6vw;
	}
	#operating-costs .images{
		margin:0 auto 5vw;
	}
	
	/*----------*/
	
	#interior300{
		margin-bottom:6vw;
	}
	.top-interior-slider{
		margin-bottom:30px;
	}
	
	/*----------*/
	
	#cleaning-costs{
		margin-bottom:6vw;
	}
	#cleaning-costs .images{
		margin:0 auto 5vw;
	}
	#cleaning-costs .images02{
		margin:0 auto 5vw;
	}
	
	/*----------------------*/
	
	#contact .contact_area {
		background:none;
		position: relative;
		padding:0;
	}
	.top_area2021 {
		background: #fff;
		box-shadow: none;
		padding:0;
		border-radius:0;
		margin:0;
		position: relative;
	}
	
	
	/*----------------------*/
	
	#top-faq{
		text-align:center;
		padding:10vw 5vw;
	}
	
	
	
				
}