@charset 'utf-8';

#side_box {
    display: none;
}
.underline {
    text-decoration: underline;
}
img{
	max-width: 100%;
}
/*---------------------------
 画面遷移フロー
---------------------------*/
.step {
	display: flex;
	max-width: 400px;
	position: relative;
	margin: 20px auto;
	text-align: center;
}
.step li {
	font-size: 14px;
	list-style: none;
	position: relative;
	width: 33.333%;
}
.step li:after {
	background: #a0a0a0;
	content: "";
	width: calc(100% - 34px);
	height: 4px;
	position: absolute;
	left: calc(-50% + 17px);
	top: 17px;
}
.step li:first-child:after {
  display: none;
}
.step li span {
  background: #a0a0a0;
  color: #ffffff;
  display: inline-block;
  height: 34px;
  margin-bottom: 5px;
  line-height: 34px;
  width: 34px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.step .visited {
    font-weight: 600;
}
.step .visited:after {
  background: #EF5210;
}
.step .visited span {
  background: #EF5210;
}


/*---------------------------
 アニメーション
---------------------------*/
.tap_anime::after {
    animation: .7s linear 0s infinite alternate tap;
}
@keyframes tap {
    0% {
    transform: translateY(0px);
    }
    50% {
    transform: translateY(10px);
    }
    100% {
    transform: translateY(0px);
    }
}
.yureru-s {
    animation: yureru-s 3s infinite;
}
@keyframes yureru-s {
    0% {
        transform: translate(2px, 0);
    }
    2.5% {
        transform: translate(-2px, 0);
    }
    5% {
        transform: translate(2px, 0);
    }
    7.5% {
        transform: translate(-2px, 0);
    }
    10% {
        transform: translate(2px, 0);
    }
    12.5% {
        transform: translate(-2px,0);
    }
    15% {
        transform: translate(0px, 0px);
    }
}
.puyon_one {
    animation: puyon 3.9s 1;
}
.puyon {
    animation: puyon 3.9s infinite;
}
@keyframes puyon {
	0% {
		transform: scale(1, 1);
	}
	41.66666667% {
		transform: scale(1, 1.8);
	}
	75% {
		transform: scale(1, 0.8);
	}
	83.33333333% {
		transform: scale(1, 1);
	}
	91.66666667% {
		transform: scale(1, 0.8);
	}
	100% {
		transform: scale(1, 1);
	}
}

/*---------------------------
 上部お客様の声
---------------------------*/
.top_voice_box{
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.top_voice_box .leftbox{
	width: 15%;
	margin-right: 2%;
	float: left;
}
.top_voice_box .rightbox{
	width: 83%;
	float: right;
}

.top_voice_box h3{
	font-size: 20px;
	font-weight: 600;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 2px solid #006600;
}

.top_voice_box .rightbox p{
	font-size: 20px;
	font-weight: 600;
	color: #006600;
}
.plan{
	border: 1px solid #00A0E9;
	margin-bottom: 10px;
}
.plan p:first-child{
	width: 20%;
	background-color: #00A0E9;
	color: #fff;
	float: left;
	margin-right: 10px;
}
.plan p{
	padding: 10px;
}
.shurui{
	border: 1px solid #009944;
	margin-bottom: 10px;
}
.shurui p:first-child{
	width: 20%;
	background-color: #009944;
	color: #fff;
	float: left;
	margin-right: 10px;
}
.shurui p{
	padding: 10px;
}
.kingaku{
	border: 1px solid #FF093D;
	margin-bottom: 10px;
}
.kingaku p:first-child{
	width: 20%;
	background-color: #FF093D;
	color: #fff;
	float: left;
	margin-right: 10px;
}
.kingaku p{
	padding: 10px;
}

/*---------------------------
 他社比較表
---------------------------*/
#hikaku{
	background-image: url(/cp/img/bg_hikaku.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
	padding: 30px;
	margin-bottom: 30px;
}
#hikaku .cont{
	background-color: rgba(255,255,255,.9);
	border-radius: 20px;
	padding: 30px;
	text-align: center;
}

/*---------------------------
 サービス内容
---------------------------*/
.kaitori_wrap{
	border: 1px solid #000000;
	padding: 20px;
	border-radius: 20px;
	text-align: center;
	margin-bottom: 30px;
}
.kaitori_wrap h3{
	font-size: 25px;
	font-weight: 600;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 2px solid #006600;
}
.service_box{
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dashed #808080;
}
.service_box .leftbox{
	width: 65%;
	float: left;
	margin-right: 5%;
}
.service_box .leftbox h3{
	font-weight: 600;
	color: #fff;
	padding: 10px;
	background-color: #006600;
	font-size: 20px;
	margin-bottom: 20px;
}
.service_box .rightbox{
	float: right;
	width: 30%;
}

/*---------------------------
 ご安心ください
---------------------------*/
.anshin{
	background-color: #E0EDE0;
	padding: 30px;
	margin-bottom: 30px;
}
.plan_syousai hr{
	margin-top: 15px;
	margin-bottom: 30px;
}

/*---------------------------
 法人
---------------------------*/
.bottom_message{
	margin-bottom: 30px;
	font-weight: 600;
	font-size: 20px;
}
/*---------------------------
 どんなものでも回収してくれるの？
---------------------------*/
.kaisyu{
	background-color: #E0EDE0;
	text-align: center;
	padding: 30px 0;
}
/*---------------------------
 ご好評いただいている理由
---------------------------*/
.pointbox .leftbox{
	width: 48%;
	float: left;
}
.pointbox .rightbox{
	width: 48%;
	float: right;
}
.pointbox .flex {
	margin-bottom: 30px;
}
.pointbox .flex p{
	padding: 10px;
}
.pointbox img{
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #A6A6A6;
	
}

/*---------------------------
 お客様の声
---------------------------*/
#voice{
	background-color: #006600;
	padding:30px 0; 
}
.top_voice_box{
	background-color: #fff;
	padding: 20px;
	border-radius: 20px;
}
.voice_midashi_box{
	margin-bottom: 20px;
}

/*---------------------------
 除菌サービス
---------------------------*/
.jokin_wrap{
	background-image: url(/cp/img/bg_jokin.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	padding: 30px 0;
}
.taisaku {
	background-color: #0055D4;
	padding: 10px;
	text-align: center;
	margin-bottom: 30px;
}
.jokin_flow_box{
	text-align: center;
	width: 32.5%;
	margin-right: 1.25%;
	float: left;
}
.jokin_flow_box:last-child{
	margin-right: 0;
}
.jokin_flow_wrap{
	margin-bottom: 30px;
}
.jokin_flow_box img{
	margin-bottom: 15px;
}
.jokin_flow_box p{
	margin-bottom: 15px;
}
.jokin_flow_box h4{
	background-color: #0055D4;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	padding: 5px 20px;
	margin-bottom: 30px;
	border-radius: 50px;
}
/*---------------------------
 不用品・ゴミ回収までの流れ
---------------------------*/
.flow_box{
	width: 50%;
	margin: 15px auto 0 auto;
	text-align: left;
	border-bottom: 1px solid #11181E;
	padding-bottom: 20px;
}
.flow_box img{
	margin-bottom: 20px;
}
.flow_box:last-child{
	border: none;
}
.flow_box h3{
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 10px;
}
.flow_box h3 span{
	background-color: #006600;
	color: #fff;
	padding: 3px 15px;
	display: inline-block;
	margin-right: 5px;
	border-radius:10px; 
}
.flow_box h3 span.last{
		background-color: #0055D4;
}
/*---------------------------
 対応地域
---------------------------*/
#region{
	background-image: url(/cp/img/bg_chiiki.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	padding: 30px 0;
}
#region .cont{
	background-color: rgba(255,255,255,.85);
	padding: 30px;
	border-radius: 30px;
}
.col_green {
	color: #006600;
}
.shiten{
	background-color: #fff;
	border: 1px solid #006600;
}
.shiten .text{
	padding: 20px;
}
.shiten h3{
	background-color: #006600;
	color: #fff;
	padding: 5px;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}
/*----------------　
フッター
----------------*/
.footer_top{
	padding: 50px;
}
.footer_top img{
	float: left;
	width: 49%;
	margin-right: 2%;
}
.footer_top img:last-child{
	float: left;
	margin-right: 0;
	
}
.adress{
	background-color: #006600;
	color: #fff;
	text-align: center;
	padding: 10px;
}

/*---------------------------
 キャッシュレス
---------------------------*/
.cashless h4{
	background-color: #f8b551;
	padding: 10px;
	margin-bottom: 20px;
}
.cashless h4 img{
	margin-bottom: 0;
}
/*----------------
 フォーム
----------------*/
#form label{
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 5px;
}

#bottom_box{
	display: none;
}

.caution_box {
    border: 2px solid #AD0007;
    margin-bottom: 50px;
	padding: 20px;
}
.caution_box h4 {
    font-size: 20px;
    border-bottom: 2px solid #AD0007;
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: 600;
    background-color: #AD0007;
	border-radius: 20px;
}
.caution_box .caution_inner {
    padding: 15px;
    text-align: left;
    font-weight: normal;
}
.caution_box .caution_inner ul {
    margin-top: 15px;
    margin-bottom: 15px;
}
/*----------------
FAQ
----------------*/
#faq{
	padding: 30px 0;
}
#faq h2{
	background-color: #006600;
	text-align: center;
	padding: 20px;
	margin-bottom: 30px;
}
.faq_box .tenkai {
	cursor: pointer;
}
.faq_wrap img {
	max-width: 100%;
	width: auto;
}
.faq_box{
	background-color: #fff;
}
.faq_box h3 {
	margin-bottom: 15px;
}
.faq_contact .tel {
	border-bottom: 1px dashed #BDBDBD;	
}
.setumei p {
	margin-bottom: 15px;
}
.henkou_kyanseru {
	padding: 20px;
	border: 1px solid rgba(0,0,0,1.00);
	background-color: #EBEBEB;
}
.henkou_kyanseru h4{
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	border-bottom: 1px solid rgba(0,0,0,1.00);
	margin-bottom: 15px;
	padding-bottom: 15px;
}
/*----------------
 faq
----------------*/
.faq_wrap h3{
	padding:10px 40px 10px 55px;
	border: 2px solid #bfbfbf;
	border-radius: 5px;
	background-image: url("/cp/img/icon_q.gif");
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: 10px center;
	font-weight: 600;
}
.tenkai {
	position: relative;
}
.tenkai .icon {
	position: absolute;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	right: 15px;
	max-height: 1em;
	width: auto!important;
	transition: 0.2s;
    top: 38%;
    transform: rotate(180deg);
}
.tenkai_kaiten {
	transform-origin: 100% 31.25%!important;
	transform: rotate(90deg)!important;
}
.setumei {
	display: none;
}
.setumei p{
    padding: 10px;
	padding-left:40px;
	background-image: url(/cp/img/icon_a.gif);
	background-size: 30px;
	background-repeat: no-repeat;
	background-position: left center;
}
.tenkai img {
	width: 100%;
}
#form{
	background-color: #D9E8D9;
	padding: 30px 0;
}
#form .td{
	background-color: #fff;
}
/*----------------
 問い合わせ部分
----------------*/
.common_tel{
	width: 100%;
	float: none;
	margin-bottom: 5px;
	
}
.sp_common_mail{
	width: 100%;
}
.sp_common_line{
	width: 100%;
    margin-top: 10px;
}
.contact {
	padding: 30px 0;
	border: none;
	background-color: #E4E4E4;
}
.contact_midashi{
	padding: 0; 
	border: none;
	margin-bottom: 15px;
}
.contact .cl{
	background-color: #fff;
	border-radius: 5px;
	padding: 5px;
}
/* 全域 end */
/*===========================================
 以下、メディアクエリ
===========================================*/
/*===========================
 【1024px以下】
 ★タブレット横以下に適用されるCSS
===========================*/
@media screen and (max-width:1024px){
	/* 1024down end */
}
/*===========================
【1023px以下】
 ★PC未満に適用されるCSS
===========================*/
@media screen and (max-width:1023px){
    html {
        margin-top: 72px!important;
    }
	#page_top {
		width: 40px;
	}
	#side_box{
		display: none!important;
	}
    /* タップアイコン */
    #bottom_box a::after {
        position: absolute;
        content: "";
        background: url("/cp/img/tap_icon.png") no-repeat center center;
        background-size: 10vw;
        width: 10vw;
        height: 12vw;
        bottom: 2vw;
        right: 10px;
    }
    .header_link_sp {
        font-size: 11px;
    }
    .header_link_sp a {
        color: #000;
    }
    .header_link_sp img {
        width: 250px;        
    }
    .sp_header_bn {
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 10px;
    }
    .sp_header_bn img {
        float: left;
    }
    .sp_header_bn .tel {
        width: 29%;
        margin-right: 1.5%;
    }
    .sp_header_bn .mail {
        width: 27%;
        display: block;
        float: left;
        margin-right: 1.5%;
    }
    .sp_header_bn .mail img {
        width: 100%;
    }
    .sp_header_bn .line {
        width: 27%;
        margin-right: 1.5%;
    }
    .sp_header_bn .uketuke {
        width: 10%;
        margin-top: 6px;
    }
    .pay_box .midashi {
        width: 16%;
        margin-right: 1.5%;
		float: left;
    }
    .pay_box {
        padding-left: 5px;
        padding-right: 5px;
		margin-bottom: 20px;
    }
    .pay_box img:nth-of-type(2) {
        width: 25%;
        padding-right: 0.8%;
        border-right: 1px solid #D5D5D5;
    }
    .pay_box img:last-of-type {
        width: 55.4%;
        padding-left: 0.8%;
    }
	
	#bottom_box{
		display: block;
		position: fixed;
		width: 100%;
		bottom: 0; 
		padding: 10px;
		background-color: #fff;
		border-top: 2px solid #B42325;
	}
	#bottom_box a img{
		width: 100%;
	}
	/* 1023down end */
}
/*===========================
【800px以下】
★タブレット以下に適用されるCSS
===========================*/
@media screen and (max-width:800px){
	/* 800down end */
}
/*===========================
【767px以下】
★タブレット未満に適用されるCSS
===========================*/
@media screen and (max-width:767px){



	/*----------------　
	フッター
	----------------*/
	.footer_top{
		padding: 35px 20px 20px 20px;
	}
	.footer_top img{
		width: 100%;
		margin-right: 0;
		margin-bottom: 15px;
	}
	.mb50to20{
		margin-bottom: 20px!important;
	}
	.voice .cont img:last-child {
		border: none;
		margin-bottom: 20px;
	}
	.service h3 {
		font-size: 20px;
	}
	/* 767down end */
}
/*===========================
 【666px以下】
 ★iPhone6以降の横未満に適用されるCSS
===========================*/
@media screen and (max-width:666px) {
	/* 666down end */
}
/*===========================
 【567px以下】
★iPhone5横未満まで適用されるCSS
===========================*/
@media screen and (max-width:567px){
	/* 567down end */
	.pointbox .flex{
		display: block;
		margin-bottom: 15px;
	}
	.pointbox .leftbox{
		width: 100%;
		margin-bottom: 15px;
	}
	.pointbox .rightbox{
		width: 100%;
	}
	.top_voice_box .leftbox {
		width: 30%;
	}
	.top_voice_box .rightbox{
		width: 66%;
	}
	.top_voice_box{
		padding: 10px;
		border-radius: 0px;
		margin-bottom: 10px;
	}
	.voice{
		padding: 30px 10px;
	}
	.jokin_flow_box{
		width: 100%;
		margin: 15px 0;
	}
	.flow_box {
		width: 90%;
	}
	.top_voice_box p{
		font-size: 13px;
	}
	.top_voice_box .rightbox p{
		font-size: 14px;
	}
	.plan p,.shurui p,.kingaku p{
		font-size: 11px;
		font-weight: 600;
	}
	#hikaku .cont {
		border-radius: 10px;
		padding: 10px;
	}
	#hikaku {
		padding: 10px;
	}
	.service_box .leftbox {
		width: 60%;
		float: left;
		margin-right: 2%;
	}
	.service_box .leftbox h3 {
		font-size: 16px;
		margin-bottom: 13px;
	}
	.service_box .leftbox p {
		font-size: 13px;
	}
	.service_box .rightbox {
		width: 38%;
	}
	#region .cont {
		padding: 10px;
		border-radius: 10px;
		margin: 0 12px;
	}
	caution_box {
		padding: 10px;
	}
	.anshin {
		padding: 10px;
	}
	.flow_box h3{
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 10px;
	}
}
/*===========================
 【414px以下】
★iPhone6PLUS縦まで適用されるCSS
===========================*/
@media screen and (max-width:414px){
	/* 414down end */
}
/*===========================
 【375px以下】
★iPhone6,7縦まで適用されるCSS
===========================*/
@media screen and (max-width:375px){
	/* 375down end */
}
/*===========================
 【360px以下】
 ★Xperia AX SO-01E以下に適用されるCSS
===========================*/
@media screen and (max-width:360px){
	/* 360down end */
}
/*===========================
 【359px以下】
 ★iphone初期にのみ適用されるCSS
===========================*/
@media screen and (max-width:359px){
	/* 359down end */
}
/*===========================
 【568px以上】
 ★iPhone5横以上から表示されるCSS
===========================*/
@media screen and (min-width:568px) {
	/* 568over end */
}
/*===========================
 【667px以上】
 ★iPhone6以降の横以上に適用されるCSS
===========================*/
@media screen and (min-width:667px){
	/* 667over end */
}
/*===========================
【768px以上】 
★タブレット(最小)以上に適用されるCSS
===========================*/
@media screen and (min-width:768px){
    .sp_common_mail{
        width: 49.5%;
        float: left;
    }
    .sp_common_line{
        width: 49.5%;
        float: right;
        margin-top: 0px;
    }
	/* 768over end */

	
}
/*===========================
【801px以上】 
★タブレット縦(最大)より大きい場合に適用されるCSS
===========================*/
@media screen and (min-width:801px){
	/* 801over end */
}
/*===========================
【667px】～【800px】  
★iPhone6以降の横以上かつ、タブレット縦以下まで表示されるCSS
===========================*/
@media screen and (min-width:667px) and (max-width:800px){
	/* 667~800 end */
}
/*===========================
 【667px】～【1023px】
 ★iphone6横～PC未満まで適用されるCSS
===========================*/
@media screen and (min-width:667px) and (max-width:1023px){
	/* 667~1023 over end */
}
/*===========================
 【415px】～【800px】 
 ★スマホ縦より大、かつ、タブレット以下まで表示されるCSS
===========================*/
@media screen and (min-width:415px) and (max-width:800px){
	/* 415~800 end */
}
/*===========================
 【768px】～【1023px】 
 ★タブレット以上、かつ、PC以下に適用されるCSS
===========================*/
@media screen and (min-width:768px) and (max-width:1023px){
	/* 768~1023 end */
}
/*===========================
 【1024px以上】
 ★PC以上に適用されるCSS
===========================*/
@media screen and (min-width:1024px){
	.contact .cl {
		background-color: #fff;
		border-radius: 5px;
		padding: 30px;
	}
    header img {
        max-width: 100%;
    }
    .header_pc .header_left {
        margin-top: 10px;
        float: left;
        width: 35%;
        font-size: 12px;
    }
    .header_pc .header_left img {
        width: 265px;
    }
    .header_right {
        text-align: right;
    }
    .header_right img {
        vertical-align: middle;
        margin-right: 10px;
    }
    .header_pc .header_right {
        margin-top: 10px;
        float: right;
        width: 65%;
    }
    .header_right .tel {
        width: 200px;
    }
    .header_right .mail {
        width: 120px;
        display: inline-block;
    }
    .header_right .mail img {
        width: 100%;
    }
    .header_right .line {
        width: 120px;
    }
    .header_right .uketuke {
        width: 80px;
    }
    .pay_box img:first-of-type {
        width: 360px;        
    }
    .pay_box img:last-of-type {
        width: 658px;
        padding-left: 10px;
    }
    .header_top {
        padding-bottom: 20px;
    }
    .pay_box {
        padding-bottom: 10px;
    }
    .header_pc nav {
        background-color: #fff;
        text-align: center;
		border-top: 1px solid #636363;
		border-bottom: 1px solid #636363;
    }
    .header_pc nav ul {
        display: inline-block;
    }
    .header_pc nav ul li {
        display: inline-block;
        border-left: 1px solid #000;


    }
    .header_pc nav ul li:last-of-type {
        border-right: 1px solid #000;
    }
    .header_pc nav ul li a {
        display: block;
        text-decoration: none;
        color: #000;
        font-size: 13px;
        padding: 20px 1em;
		
    }
    .header_pc nav ul li a:hover {
        color: #F1C500;
        opacity: 1;
    }
    #side_box {
        width: 120px;
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    #side_box img {
        width: 100%;
    }
	/* 1024over end */
}
/*===========================
 【1280px以上】
 ★PC(1280px）以上に適用されるCSS
===========================*/
@media screen and (min-width:1280px){
	/* 1280over end */
}
/*===========================
 【1400px以上】
 ★PC(1400px）以上に適用されるCSS
===========================*/
@media screen and (min-width:1400px){
	/* 1400over end */
}