@media screen and (max-width:768px) 
{
/*********************************************************************/

.sp {
  display: block;
}
.pc {
  display: none;
}

/*固定*/
#header{
	height: 60px;
	width:100%;
	background-color: #fff;
}
#head .logo{
	width:60%;
	align-self:center;
}
#head .logo h1{
width:100%;
}
#head .logo p{
width:50%;
}

#head .logo img{
	height:auto;
	width:100%;
	}

#head-bt-sp{
	display:flex;
	justify-content: flex-end;
	padding:5px 55px 0 0;
}
#head-bt-sp .hmenu{
	display:inline-block;
	width:50px;
	height:50px;
	padding:7px;
	margin-right:5px;
	border-radius: 7px;
	background-color: var(--main-color);
	box-sizing: border-box;
}
#head-bt-sp .c-c{
	background-color: var(--sub-color);}
#head-bt-sp .hmenu img{
	width:100%;
	height:auto;
}

	
/*========= ナビゲーション ===============*/
nav {display:none;}
	
#g-nav{
    position:fixed;
    z-index: 999;
	top:-120%;
    left:0;
	width:100%;
    height: 100vh!important;
	/* The hack for Safari */
    height: -webkit-fill-available;
	background:var(--main-color);
	transition: all 0.6s;
	color:#fff;
}

#g-nav.panelactive{
    top: 0;
}


#g-nav.panelactive #g-nav-list{
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


#g-nav ul {
    z-index: 999;
	padding:50px 10px;
}



#g-nav li{
	position: relative;
	list-style: none;
	width:100%;
	padding:0 50px 0 30px;
}
	
#g-nav li::before{
  content:'';
  position: absolute;
  left:0;
  top:20px;
  width:6px;
  height:6px;
  border-top: 2px solid var(--sub-color);
  border-right:2px solid var(--sub-color);
  transform: rotate(45deg);
}
#g-nav li:last-child{
	border-bottom:none;
	}
	
#g-nav li a{
	font-size:16px;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
	
#g-nav .tel a{
	display:block;
	font-size:18px;
	text-align: center;
	border:solid 3px #fff;
	color:var(--main-color);
	background-color: #fff;
	margin:10px 20px;
	letter-spacing: 0.1em;
	font-weight: bold;
	padding: 7px 10px;
}
	
#g-nav .sns{
	display:flex;
	align-content: center;
	width:80%;
}
#g-nav .sns img{
	width:50px;
	height:auto;
	margin:10px;	
}


.openbtn{
	position:fixed;
    z-index: 9999;
	top:5px;
	right: 5px;
	cursor: pointer;
    width: 50px;
    height:50px;
	border:#66574f 1px solid;
	background-color: #fff;
	border-radius: 5px;
}
	

.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	background-color: #66574f;
	border-radius: 5px;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
	
.telbtn{
	position:absolute;
    z-index: 1;
	top:10px;
	right: 70px;
	cursor: pointer;
    width: 50px;
    height:50px;
	border:#66574f 1px solid;
	background-color: #fff;
	font-size: 30px;
    text-align: center;
	color:#66574f;
	border-radius: 5px;
}
	

.title {
	margin: 0 auto 30px;
}

	
/*============ slide ============*/

#slide{
	vertical-align: middle;		
}
.slide-inner img{
	margin:100px auto;
}



/*----TOPカタログ--------*/

#catalog{
	padding:30px 0;		
}
	
	.top-panf-tt{
	padding:0 0 10px;
	}
	
	.top-panf-waku{
		width:80%;
		margin:0 auto;
		padding:20px 0;
		display:flex;
		justify-content:space-between;
		box-sizing:border-box;
	}
	.top-panf-waku .box--o{
		width:31%;
	}
	.top-panf-waku .box--o img{
		width:100%;
		height:auto;
	}
	.top-panf-waku-outer{
	}
.slick-prev, .slick-next{
	color:#000!important;
}
/*============ お悩み ============*/

#nayami{
    padding: 40px 0 90px;
	clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
}
.nayami-flex{
	margin-top:0;
}
.nayami-flex p{
	width:100%;
	align-self:center;
	text-align:center;
}
.nayami-flex p img{
	width:50%;
	height:auto;
}
.nayami-list{
	width:100%;
	padding:0 7px;
}

.nayami-list li{
	padding:10px 0 10px 50px;
	width:100%;
}
.nayami-list li::before{
	left:10px;
	top:calc(50% - 12px);
	width:24px;
	height:24px;
}
.nayami-list li:nth-child(2){margin-left:0;}
.nayami-list li:nth-child(3){margin-left:0;}
.nayami-list li:nth-child(4){margin-left:0;}
	
/*============ service ============*/

#service{
	padding:20px 0;
}
.service-flex{
	padding:10px 0 40px;
	gap:45px 2%;
}
.service-box{
	width:92%;
	margin:0 4%;
	text-align:right;
}
.service-box:hover h3{
	background-color:var(--main-color);
	transition:0.5s;
}
.service-box h3{
	margin:60px 0 0;
}

.service-box .no img{
	width:100px;
	height:auto;
}
.service-box .more{
	width:180px;
	font-size:16px;
	margin:25px 7px 7px auto;
}
/*============ 選ばれる理由 ============*/

#reason{
	padding:40px 10px;
	margin-bottom:30px;
}

#reason .title h2{
  text-shadow: 2px 2px 0px rgba(255, 255, 255, 1);
}
.reason-flex{
	padding:0;
}
.reason-flex li{
	max-width:1000px;
	margin-bottom:30px;
	gap:0 3%;
	padding:10px;
}
.reason-flex li:nth-child(2){margin-left:0px;}
.reason-flex li:nth-child(3){margin-left:0px;}
.reason-flex li .img{
	width:100%
}
.reason-flex li .img img{
	width:100%;
	height:auto;
}
.reason-flex li .text{
	width:100%;
	padding-bottom:5px;
}
.reason-flex li .text h3{
	font-size:16px;
	font-weight:800;
	padding:7px;
	margin-bottom:20px;
}
.reason-flex li .text h3 span{
	font-size:20px;
	padding-right:7px;
}
/*============ works ============*/
#works{

	padding:0;
}
#works-top{
	margin: 30px auto 0;
}
#works-top-box-l{
	width:100%;
}
.works-top-box{
	width:calc( 100% - 20px );
	margin:10px;
}
.works-shurui{
	display:inline;
	padding: 3px 15px;
}
.works-top-box p {
    font-size: 16px;
}

	
/*============ applyset ============*/


#applyset{
	margin-top:10px;
}

#applyset .applyset-box, #applyset-s .applyset-box{
	width:100%;
	padding:6%;
	gap:10px;
}
#applyset .applyset-box .setbt, 
#applyset .applyset-box .setbt2, 
#applyset-s .applyset-box .setbt, 
#applyset-s .applyset-box .setbt2{
	padding:10px 0;
}
#applyset .applyset-box .text{
	width:100%;
	font-size:14px;
}
#applyset .bg-apply, #applyset .bg-tel, #applyset .bg-panf{
	background-size:90%;
}
#applyset .applyset-box h2 {
	padding:0;
}
	
#applyset .applyset-box .settel {
	display: none;}

/*============ contact ============*/
#contact {
    padding: 25px 10px;
}
	
#contact .title {
	width:100%;
	align-self:center;
}
#contact .title h2 {color:#fff;}
.contact-inner{
	max-width:1200px;
	margin-inline:auto;
	display:flex;
	flex-wrap:wrap;
}
.contact-flex{
	width:100%
}
#contact .contact-flex a.c-applybox {
	padding:13px 0;	
}
	
/**************************************************************
footer
**************************************************************/
footer{
	padding:10px;
}
#footer-flex{
	flex-direction: column;
	padding:30px 0 30px;
}

.footer-box, .footer-box2{
	width:100%;		
}
.footer-box1 {
    width: 100%;
}
.footer-box2 {
    padding: 0 10px 0px;
}
.footer-box3{
	padding-top:20px;
	font-size:15px;
	gap:0 1.5%;
}
.footer-box3 li{
	width:32%;
	height:50px;
}
/*============ 下層ページ ============*/	

#subtitle{
	height:140px;
	background-color:#f2f2f2;
}
#subtitle-box {
    padding: 2vw 1vw 0;
	text-align:center;
}
#sublink{
	font-size:12px;
	text-align:right;
	margin-bottom:20px;
}
/*============ 会社概要 ============*/
	
.about-box{
	width:95%;
}
.about-box .title h3{
	width:100%;
	padding-left:0;
	text-align: center;
	font-size:19px;
}

.company-img{
	width:80%;
	margin:0 auto;
}	
.company-text{
	width:100%;
	padding:20px;
}
#company dl{
	margin: 30px auto;
}

#company dt{
	width:100%;
	padding:10px;
	background-color: #f2f2f2;
}
#company dd{
	width:100%;
	padding:10px;
}

.company-flex2 img{
	padding-bottom:10px;
}
/*============ プライバシーポリシー ============*/


#privacy h3{
	margin:20px 0;
	padding:10px;
}
#privacy p{
	padding:10px 0;
	font-size:15px;
}
#privacy ol {
	padding:10px 0 10px 20px;
	font-size:15px;

}
#privacy ol li{
	padding:10px 0;
}
/**************************************************************
service
**************************************************************/
#service-s{
	padding:20px 10px;
}
h3.se-midashi{
	padding:10px;
	margin:0 0 20px;
}
.se-flex-box{
	width:100%;
	padding:20px;
}
.se-flex {
    margin: 30px 0;
}
.se-list li::before{
	margin-right: 10px;
	border-radius: 50%;
	padding:2px 10px;
}
.se-waku{
	padding:10px 10px 20px;
}
.se-flex-box2{
	width:100%;
	padding:20px;
}
	
/*********メンテナンス＆修理************/
	
.kaiketsu-box{
	width:98%;
	margin:10px;
	font-size:15px;
	}
/*********乗せ換え・移設************/	
#flow-zu {
    margin: 20px auto;
	}
.koushin-box{
	width:100%;
}
	
	
/**************************************************************
強み
**************************************************************/
#flow{
	margin: 0 auto 50px;	
}

.flow-flex{
	gap:0;
	margin:20px 10px;
	padding:10px;
}
.flow-flex .text{
	width:100%;
	font-size:16px;
}
.flow-flex .text h4{
	padding-top:20px;
}
.flow-flex .img{
	width:100%;
}
	
	
	
	
	
	
/*============ about  ============*/	
#about{
	margin: 0 10px 50px;	
}
.area-box{
	width:100%;
}
.me-logo{
	padding:10px;
}
.me-logo img{
	width:49%;
}
.jissi-box{
	width:96%;
	margin:0 2%;
}
/*********************************
 お問い合わせ
*********************************/
.apply-mes {
    margin: 10px 10px 20px;
    padding: 10px;
}
.tel-set-flex {
	margin-top:20px;
}
	
.tel-set-flex img {
    width: 35px;
    height: 35px;
}
	
#apply-box{
		font-size:16px;
}
	
#apply-box .apply-box-l{
	width:100%;
	padding:10px;
}

#apply-box .apply-box-r{
    width:100%;
    border-bottom:1px solid #ccc;
    padding:10px;
}
/* セレクト */
select{
width:100%;
}
.wpcf7-text {
    width: 100%;
}	
#thx{
	font-size:16px;
}	
	
	
/**************************************************************
施工事例
**************************************************************/
#works-s{
	padding:20px 10px 50px;
}	
.works-s-img {
	width:100%;
}
.works-s-img img{
	width:100%;
	height:auto;
	padding-bottom:10px;
}
.works-s-text {
	width:100%;
	font-size:16px;
	padding-top:20px;
}

	

	
/**************************************************************
ブログ
**************************************************************/

.blog-btn_item a{
	font-size:16px;	
}

.blog-img{
	width:calc( 30% - 20px );
	margin:10px;
}

.blog-info{
	padding:0 10px 10px;
}
.blog-info .midashi{
	padding:7px 10px;
	font-size:16px;
	margin:0;
}
.blog-cont{
	padding:20px 10px;
	font-size:16px;
}
.midashi-a{
	font-size:16px;
	padding:10px;
}

/**************************************************************
強味
**************************************************************/

.flow-flex .text h4{
	margin-left: 3em;
	text-indent: -3em;
}
/***********************************************************/
}