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

@media screen and (max-width:736px) {
	html, body {
		min-width: 0;
		width: 100%;
		height: 100%;
		-webkit-text-size-adjust : 100%;
		overflow-y: scroll !important;
	}

	img {
		max-width: 100% !important;
		height: auto;
	}

	.is-sp {
		display: inherit;
	}
	
	.is-pc {
		display: none;
	}
	
	a[href^="tel:"] {
		pointer-events: auto;
	}
	
	input[type="submit"] {
	  appearance: none;
	  -webkit-appearance: none;
	}
	
	
/*----------------------
main-visual
----------------------*/
	#main-visual {
		padding: 3rem 1rem 0;
		margin-top: 2rem;
	}
    #main-visual .inner {
        margin-left: 0;
		padding-left: 0
    }
	
	#main-visual .inner {
		width: 100%;
		flex-wrap: wrap;
	}
	#main-visual .main-txt {margin-bottom: 2rem;}
	#main-visual .main-txt,
	#main-visual .main-img{
		max-width: 100%;
		width: 100%;
		text-align: center;
	}
	
	#main-visual .main-txt .main_top {padding: 0 2rem;}
	#main-visual .main-txt .main_ttl {
		font-size: 3.6rem;
		margin: -8rem 0 2rem;
	}

	#main-visual .main-txt ul {
		gap:1rem;
	}

	#main-visual .main-txt ul li {
		font-size: 1.8rem;
	}


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

main-contents

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

	#main-contents {
		padding: 3rem 0 0;
	}

	#pan {margin-bottom: 3.5rem;}
	#pan,
	#pan a{font-size: 1.2rem;}

	h2.ttl span {
		font-size: 3rem;
	}
	
	h2.ttl img {
		padding: 2rem 2rem 0.5rem;
	}
	
	.contact-area {
		padding: 0 2rem;
	}

	.contact-area h2 {
		font-size: 2rem;
		line-height: 1.8;
	}

	.contact-area h2::before,
	.contact-area h2::after {
	  content: "";
	  display: inline-block;
	  width: 37px;
	  height: 42px;
	}

	.contact-area h2::before {
		top: 30%;
		left: 0%;
	}

	.contact-area h2::after {
		top: 30%;
		right: -15%;
	}

	.contact-area ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.contact-area ul li {
		margin: 0;
		width: 100%;
	}
	
	.contact-area ul li + li {margin-top: 2rem;}
	.contact-area ul li a {
		font-size: 2rem;
		color: #fff;
		width: 100%;
		height: 65px;
		line-height: 65px;
		position: relative;
	}
	
	.contact-area ul li:first-child a {
		background: #00278a;
		box-shadow: 0 6px 0 #001e66;
	}
	.contact-area ul li:last-child a {
		background: #03ca57;
		box-shadow: 0 6px 0 #029944;
	}

	.contact-area ul li a::before {
	  content: "";
	  position: absolute;
	  left: 20%;
	  top: 30%;
	  transform: translateX(-50%);		
	  display: inline-block;
	  width: 30px;
	  height: 30px;
	  margin-right: 0;
	}
	
	.beforeafter-area ul.beforeafter-list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1rem;
	}
	
	.beforeafter-area ul.beforeafter-list li h3 {font-size: 2rem;}
	.beforeafter-area ul.beforeafter-list li dl + dl {margin-top: 1rem;}
	.beforeafter-area ul.beforeafter-list li dl {
		width: 100%;
		max-width: 100%;
		justify-content: space-between;
	}
	.beforeafter-area ul.beforeafter-list li .ba-img img {
		width: 100%;
	}
	
	.beforeafter-area ul.beforeafter-list li dt,
	.beforeafter-area ul.beforeafter-list li dd{
		font-size: 1.6rem;
	}
	
	.trouble-service .trouble-service-top {
		font-size: 1.6rem;
		width: 100%;
		height: auto;
		line-height: 1.6;
		margin: 0 auto;
		padding: 1rem;
		border-radius: 50px;
	}

	.trouble-service .trouble-service-inner {
		border-radius: 10px;
		padding: 5rem 2rem 2rem;
		margin-top: -2rem;
	}

	.trouble-service .trouble-service-inner h3 {font-size: 2rem;  line-height: 1.4;
	}
	.trouble-service .trouble-service-inner p {font-size: 1.4rem;}
	
	.trouble-area {
		background: url(../img/trouble_bg.webp) no-repeat;
		background-size: cover;
		padding: 4rem 2rem;
		margin-bottom: 2rem;
	}
	
	.trouble-area h2 {
		font-size: 2rem;
	}
	.trouble-area h2 span {
		display: block;
		font-size: 1.8rem;
		padding-bottom: 0.5rem;
	}
	
	.trouble-area ul {
		padding: 2rem;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1rem;
	}

	.trouble-area ul li dl {
		display: flex;
		align-items: center;
	}

	.trouble-area ul li dl dt {
		width: 8%;
		margin-right: 1rem;
	}
	.trouble-area ul li dl dd {
		width: 90%;
		font-size: 1.4rem;
		line-height: 1.8;
		color: #002740;
	}
	
	.eco-recycle-area {
		margin-top: -5rem;
		padding-bottom: 5rem;
	}

	.eco-recycle-area .inner {
		display: flex;
		flex-wrap: wrap;
		padding: 1rem;
		justify-content: space-between;
	}

	.eco-recycle-area .inner .eco-recycle-ttl {
		width: 100%;
		max-width: 100%;
		padding-top: 15rem;
	}
	
	.eco-recycle-area .inner .eco-recycle-ttl h2 span {
		font-size: 2rem;
	}

	.eco-recycle-area .inner .eco-recycle-ttl h2 {
		font-size: 3.2rem;
		line-height: 1.3;
	}

	.eco-recycle-area .inner .eco-recycle-img {
		width: 40%;
		max-width: 40%;
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
	}

	.line_lp {
		margin: -4.5rem auto 0;
	}

	.reason-area .reason-ttl {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		margin-bottom: 4rem;
	}

	.reason-area .reason-ttl h2 {
		width: 100%;
		margin-bottom: 3rem;
	}
	
	.reason-area .reason-ttl h2 span {
		font-size: 1.6rem;
		display: block;
		width: 96%;
		height: auto;
		line-height: 2;
		padding: 1rem 0;
	}
	
	.reason-area .reason-ttl ol {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1rem;
		width: 100%;
	}

	.reason-area .reason-ttl ol li {
		font-size: 2rem;
		width: 100%;
		padding: 4.2rem 0rem;
	}
	
	.reason-area ul.reason-btn {
		width: 90%;
		margin: 0 auto 4.5rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0;
	}
	
	.reason-area ul.reason-btn li{width: 100%; text-align: center;}
	.reason-area ul.reason-btn li + li {margin-top: 1rem;}


	.reason-area .reason-num ol.num-list li dl {
		position: relative;
		margin-bottom: 2rem;
	}
	.reason-area .reason-num ol.num-list li dl dt {
		width: 20%;
		position: absolute;
		top: -2rem;
		left: 2%;
	}
	.reason-area .reason-num ol.num-list li dl dd {
		padding: 1rem;
	}
	.reason-area .reason-num ol.num-list li dl dd h3 {
		font-size: 1.8rem;
		color: #fff;
		height: auto;
		line-height: 1.6;
		padding-left: 8rem;
	}

	.reason-area .reason-num ol.num-list li .reason-contents {
		padding: 0;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 1rem;
	}
	.reason-area .reason-num ol.num-list li .reason-contents .img img {width: 100%;}
	.reason-area .reason-num ol.num-list li + li {margin-top: 5rem;}
	.reason-area .reason-num ol.num-list li .reason-contents h3 {
		width: 96%;
		font-size: 1.6rem;
	}

	.reason-area .reason-num ol.num-list li .reason-contents p {
		font-size: 1.4rem;
		line-height: 1.6;
	}
	
	/*----------------------
	service-area
	----------------------*/

	.service-area {
		padding: 13.5rem 0;
		margin-bottom: 2rem;
		background-position: right;
	}
	

	.service-area ol.service-list {padding: 0; margin-bottom: 8rem;}
	.service-area ol.service-list li {margin-top: 0}
	.service-area ol.service-list li + li {margin-top: 5rem;}
	.service-area ol.service-list li .service-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
	}

	.service-area ol.service-list li:nth-child(even) .service-inner{
	flex-direction: row-reverse;
	}

	.service-area ol.service-list li .service-inner .service-img {
		max-width: 100%;
		width: 100%;
		margin-bottom: 4rem;
	}

	.service-area ol.service-list li .service-inner .service-img img {width: 100%;}
	.service-area ol.service-list li .service-inner .service-info {	
		max-width: 100%;
		width: 100%;
	}

	.service-area ol.service-list li .service-inner .service-info dl {
		display: flex;
		align-items: center;
		margin-bottom: 2rem;
	}
	.service-area ol.service-list li .service-inner .service-info dl dt {
		font-size: 5rem;
		margin-right: 2rem;
	}
	
	.service-area ol.service-list li .service-inner .service-info dl dd {}
	.service-area ol.service-list li .service-inner .service-info dl dd h2 {font-size: 3rem;}

	.service-area ol.service-list li .service-inner .service-info h3 {
		font-size: 2rem;
		margin-bottom: 1rem;
	}
	
	.service-area ol.service-list li .service-inner .service-info p {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.service_more_btn {margin-top: 1rem;}
	.more_btn a {width: 90%;}


	.service-option {
		padding: 2rem 2rem 6rem;
		border-radius: 10px;
	}
	.service-option h2.ttl {margin-bottom: 2rem;}
	.service-option h2.ttl span {font-size: 3rem;}

	.service-option ul.service-option-list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem;
	}

	.service-option ul.service-option-list h3 {
		font-size: 2.6rem;
		margin-bottom: 2rem;
	}

	.service-option ul.service-option-list .option-img {
		text-align: center;
		margin-bottom: 2rem;
	}

	.service-option ul.service-option-list p {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	
	/*----------------------
	price-area
	----------------------*/
	.price-area {
		margin-bottom: 5rem;
	}
	.price-area table {
		width: 100%;
		table-layout: fixed;
		margin-bottom: 2rem;
	}
	.price-area table,
	.price-area table td, 
	.price-area table th {
		font-size: 1.3rem;
	}

	.price-area p {
		font-size: 1.4rem;
		line-height: 1.8;
		padding: 0;
		margin-bottom: 4rem;
	}


	/*----------------------
	step-area
	----------------------*/
	
	.step-area {margin-bottom: 5rem;}
	.swiper {
		position: relative;
		padding-top: 170px !important;
	}

	.swiper-slide {padding: 3.5rem 0;}
	.step-contents {
		padding: 2.5rem;
		display: flex;
		flex-wrap: wrap;
	}

	.step-contents .step-img {
		max-width: 100%;
	}

	.step-contents .step-img {
		width: 100%;
		max-width: 100%;
		margin-bottom: 2rem;
	}

	.step-contents .step-info {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}

	.step-contents .step-info .step-num {
		width: 60%;
		font-size: 2rem;
	}
	.step-contents .step-info h3 {
		font-size: 3rem;
		margin-bottom: 1rem;
	}
	.step-contents .step-info p {
		font-size: 1.4rem;
		line-height: 1.8;
	}
	
	.swiper-button-next, .swiper-button-prev {
		top: 55% !important;
	}
	.swiper-pagination {
	  	position: absolute;
	  	top: 0%;
	  	left: 50%;
	  	transform: translateX(-50%);
	  	width: 100% !important;
	  	display: flex;
		flex-wrap: wrap;
	  	justify-content: center;
	  	gap: 1rem;
	}

	.swiper-pagination-bullet {
		width: 27%;
	  height: 90px;
	  border-radius: 50%;
	  background: #dfeaf7;
	  opacity: 1;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  text-align: center;
	  font-size: 1.2rem !important;
	  line-height: 1.4;
	}
	
	.swiper-pagination-bullet span {
		width: 100%;
	}

	.swiper-horizontal > .swiper-pagination-bullets, 
	.swiper-pagination-bullets.swiper-pagination-horizontal, 
	.swiper-pagination-custom, .swiper-pagination-fraction {bottom: inherit !important;}

	/*----------------------
	case-area
	----------------------*/
	.case-area {
		padding: 8rem 3rem;
		text-align: center;
	}

	.case-area h2 {font-size: 2.6rem;}
	.case-area h2 span {font-size: 2rem;}
	.case-content {padding: 0 0 0;}

	.case-content .case-box {
	  position: relative;
	  top: -5rem;
	  margin: 0 auto;
	}
	
	.case-content .case-box ul {margin-bottom: 5rem}
	.case-content .case-box ul li {padding: 2rem 2rem 4rem;}
	.case-content .case-box ul li + li {margin-top: 2.5rem;}
	.case-content .case-box ul li .case-inner {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.case-content .case-box ul li .case-inner .case-ba-ttl {
		width: 100%;
		max-width: 100%;
		margin-bottom: 2%;
	}

	.case-content .case-box ul li .case-inner .case-info {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}
	.case-content .case-box ul li .case-inner .case-ba-ttl h3 {font-size: 2rem; margin-bottom: 1rem;}
	.case-content .case-box ul li .case-inner .case-ba-ttl dl {
		display: flex;
		align-items: center;
		width: 100%;
		height: auto;
		line-height: 2;
		border-radius: 10px;
		padding: 1rem;
		margin-bottom: 1rem;
	}
	
	.case-content .case-box ul li .case-inner .case-ba-ttl dl dt {
		width: 35%;
		font-size: 1.6rem;
	}
	.case-content .case-box ul li .case-inner .case-ba-ttl dl dd {
		width: 65%;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		margin-left: 1rem;
	}
	.case-content .case-box ul li .case-inner .case-ba-ttl dl dd p {font-size: 1.6rem;}
	.case-content .case-box ul li .case-inner .case-img {margin-bottom: 1rem;}
	.case-content .case-box ul li .case-inner .case-img .case-before,
	.case-content .case-box ul li .case-inner .case-img .case-after{position: relative;}
	.case-content .case-box ul li .case-inner .case-img p {
		position: inherit;
		font-size: 1.8rem;
		width: 100%;
	}
	
	.case-content .case-box ul li .case-inner p.case-ba-txt {
		font-size: 1.4rem;
		line-height: 1.8;
		margin-bottom: 2rem;
	}

	.case-content .case-box ul li .case-inner .case-info dl {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.case-content .case-box ul li .case-inner .case-info dl + dl {margin-top: 2rem;}
	.case-content .case-box ul li .case-inner .case-info dl dt {
		width: 40%;
		max-width: 40%;
		font-size: 1.4rem;
		background: #31a4ee;
		padding: 0.3rem 1rem;
	}
	.case-content .case-box ul li .case-inner .case-info dl dt span {
		padding: 0;
	}
	.case-content .case-box ul li .case-inner .case-info dl dd {
		width: 56%;
		max-width: 56%;
		font-size: 1.4rem;
		text-align: left;
	}
	
	.case-content .case-box ul li .case-inner .case-info dl.total {margin: 2rem 0;}
	.case-content .case-box ul li .case-inner .case-info dl.total dt span {background: #00278a;}
	.case-content .case-box ul li .case-inner .case-info dl.total dt {background: #00278a;}

	.case-btn {
		width: 80%;
		margin: 0 auto;
		text-align: center;
		padding-bottom: 1rem;
		border-bottom: 2px solid #333;
	}
	
	.case-btn a {font-size: 1.6rem;}
	.more_btn a {
		width: 100%;
		font-size: 1.6rem;
	}
	
	/*----------------------
	faq-area
	----------------------*/
	.faq-area {
		padding: 5rem 0;
	}

	.faq-area h2 {}
	.faq-area h2 span {
		font-size: 2.2rem;
	}

	.faq-area h2 span::before {
	  content: "";
	  position: absolute;
	  left: 10%;
	  top: 50%;
	}

	.faq-area ul {
		width: 100%;
		padding: 1rem;
	}

	.faq_list dl dt{
		display: flex;
		align-items: center;
		padding: 1rem 4rem 1rem 4rem; 
		background:url(../img/faq_open.svg)no-repeat right 1.8rem center;
		background-size: 1.5rem auto;
		font-size: 1.3rem;
	}

	.faq_list dl dt:hover {opacity: 0.8;}
	.faq_list dl dt::before {
	  content: "";
	  position: absolute;
	  left: 0%;
	  width: 30px;
	  height: 30px;
	}

	.faq_list dl dt.is_active{
		background:url(../img/faq_close.svg)no-repeat right 1.8rem center;
		background-size: 1.5rem auto;
	}

	.faq_list dl dd{
		display: none;
		font-size: 1.3rem;
		line-height: 1.785;
		padding: 1rem 4rem 1rem 4rem; 
		position: relative;
	}

	.faq_list dl dd::before {
	  width: 30px;
	  height: 30px;

	}

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

	footer

	------------------------------*/
	.footer-contact {
		padding: 5rem 0 0;
	}

	.footer-contact h2.ttl span {
		font-size: 2.4rem;
		margin-bottom: 3.5rem;
	}

	.footer-contact .footer-area {
		padding: 1rem;
	}

	.footer-contact .footer-area .area-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-bottom: 2rem;
	}

	.footer-contact .footer-area .area-inner .area-img {
		width: 100%;
		max-width: 100%;
		margin-bottom: 3rem;
	}

	.footer-contact .footer-area .area-inner .area-info {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}

	.footer-contact .footer-area .area-inner .area-info h3 {
		font-size: 2.3rem;
		text-align: center;
		margin-bottom: 1.5rem;
	}
	
	.footer-contact .footer-area .area-inner .area-info dl {
		padding-bottom: 1.5rem;
		margin-bottom: 1.5rem;
	}
	.footer-contact .footer-area .area-inner .area-info dl dt {
		width: 40%;
		border-radius: 30px;
		font-size: 2rem;
	}
	.footer-contact .footer-area .area-inner .area-info dl dd {
		font-size: 1.4rem;
		line-height: 1.8;
	}

	.footer-contact .footer-area .area-inner .area-info ul {
		display: flex;
		flex-wrap: wrap;
	}

	.footer-contact .footer-area .area-inner .area-info ul li {
		font-size: 1.4rem;
		line-height: 2;
	}

	.footer-contact .footer-contact {
		background: url("../img/footer-bg2.webp") no-repeat center;
		background-size: cover;
		padding: 1rem 1rem 5rem;
	}

	.footer-contact .footer-contact .contact-top {
		padding: 2rem 1rem;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 2rem;
		border-radius: 30px;
	}

	.footer-contact .footer-contact .contact-top .contact-top-img {
		width: 100%;
		max-width: 100%;
	}

	.footer-contact .footer-contact .contact-top .contact-top-img ul {
		display: flex;
		justify-content: space-between;
		margin-bottom: 2rem;
	}
	
	.footer-contact .footer-contact .contact-top .contact-top-img ul li {width: 48%; text-align: center;}
	.footer-contact .footer-contact .contact-top .contact-top-info {
		width: 100%;
		max-width: 100%;
		padding-left: 0;
	}

	.footer-contact .footer-contact .contact-top .contact-top-info h3 {
		font-size: 2.4rem;
		text-align: center;
		line-height: 1.6;
		margin-bottom: 1rem;
	}

	.footer-contact .footer-contact .contact-top .contact-top-info p {
		font-size: 1.4rem;
	}

	.footer-contact ul.contact-btn {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 2rem;
	}

	.footer-contact ul.contact-btn li a {
		display: block;
		background: #fff;
		height: 75px;
		line-height: 70px;
		text-align: center;
		font-size:1.6rem;
	}

	.footer-contact ul.contact-btn li.tel_btn a {
		font-size:2.4rem;
	}

	.footer-contact ul.contact-btn li a::before {
	  content: "";
	  display: inline-block;
	  position: absolute;
	  left: 10%;
	}

	.footer-contact ul.contact-btn li.mail_btn a::before {
		background-image: url("../img/mail.webp");
		left: 10%;
	}

	.footer-contact ul.contact-btn li.line_btn a::before {
		background-image: url("../img/line.webp");
		left: 10%;
	}


	.footer-contact .footer-contents {
		margin-top: 6rem;
		padding: 3rem;
		background: #fff;
	}

	.beforeafter-area ul.beforeafter-list {
        grid-auto-flow: column;
        grid-auto-columns: 80%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .beforeafter-area ul.beforeafter-list li {
        min-width: 300px;
    }

	
	.sp_bottom_menu ul li img {max-width: 30px !important;}
	
	

}