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

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

#header{
	position:fixed;
	inset: 0 0 auto 0;
	z-index:100;
	gap:2rem;
	padding:0.7rem;
}
#header-r{
	padding-right:10px;
	height:auto;
	}
	
#g-nav.panelactive #g-nav-list{
	background-size:60%;
}
	
#g-nav.panelactive ul {
	width:96%;
	margin:0 2%;
}
.logo{
	max-width:60%;
}
	
/*ボタン外側*/
.openbtn{
	top:5px;
	right: 5px;
    width: 50px;
    height:50px;
}

/*ボタン内側*/
.openbtn span{
 	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(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/*====================================
TOP　ビジュアル
===================================*/

	main img{
		aspect-ratio:4 / 6;
		object-fit: cover;	
	}
	main .main-text{
		position:absolute;
		top:30%;
		left:10%;
	}
	
	main .main-text a.bt {
		line-height:50px;
	}
	main .main-text a.bt:before{
		width:60px;
		height:60px;
}
	
/*====================================
TOP solution
===================================*/

	.solution-waku{
		flex-direction: column-reverse;
	}
	.solution-waku .img{
		width:100%;
	}
	.solution-waku .text{
		width:100%;
	}
/*====================================
TOP about
===================================*/	
	
	.about-flex .text h3 {
		margin-bottom:30px;
	}
	.about-flex .text{
	width:100%;
	}
	
	.about-flex .img, .about-flex .img2{
	width:100%;
	}
	
	.about-flex .box{
	width:90%;
	}
	
	.about-flex .img2 .box1{
	margin-left:10%;
	}
	.about-flex .img2 .box2{
	margin-right:10%;
	}
	
/*====================================
TOP works
===================================*/	
	
	#works {
		margin:80px 0 50px;
		padding:0 2%;
	}
	#works-top{
		margin:30px 0 30px 0;
		width:100%;
	}
	.works-title p{
		line-height:40px;
	}
	
	
/*====================================
TOP plan
===================================*/

	#plan{
		padding:50px 2% 50px;
		margin-bottom:10px;
	}
	#plan:after{
		clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
	}
	.plan-flex{
		padding:30px 2%;
	}
	.plan-flex a{
		width:90%;
		margin:0 5%;
		height:400px;
	}
	
/*====================================
TOP contents
===================================*/

	#contents{
		background-size:100%;
		padding:50px 2%;
	}
	
	.contents-flex .top-midashi{
		width:100%;
	}
	.contents-flex a.c-box{
		width:90%;
		margin:0 5%;
	}
	
	
/*====================================
TOP Report
===================================*/
	.report-flex{
		margin:20px 0;
	}
	.report-flex li{
		width:90%;
		margin:0 5%;
	}
	
/*====================================
CONTACT
===================================*/

	#contact{
		margin:20px auto ;
		padding:0 3%;
	}
	.contact-waku a.contact-img{
		width:100%;
	}
	.contact-waku a.contact-img img{
		border-radius: 20px 20px 0 0;
	}
	.contact-waku .contact-text{
		width:100%;
		border-radius: 0 0 20px 20px;
	}
	#contact a.viewmore {
		margin: 10px 0 ;
	}
	
/*====================================
footer
===================================*/
	
	#footer-flex{
		font-size:15px;
	}
	
	.f-box-logo{
		width:90%;
		margin:0 5% 30px;
	}
	.f-box-logo img{
		width:100%;
	}
	.f-box{
		width:90%;
		margin:0 5%;
	}
	
/*====================================
下層ページ
===================================*/
	#subtitle {
		height:auto;
	}
	
	#subtitle-box {
    	padding: 6rem 1rem 2rem;	
	}
	#subtitle::before{
	    background-size: 50%;
	}
	.second-page{
		padding:2rem 1rem 2rem;
	}
	.second-box{
		margin-top: 2rem;
    	margin-left: 0;
    	width: 100%;
		font-size:15px;
	}
	.blog-text img {
    padding: 20px 10px;
	}
/*====================================
会社概要
===================================*/

	.company-flex{
		padding:2rem 0;
	}
/*====================================
施工事例
===================================*/
	#works-flex{
		margin-top: 2rem;
		gap: 2rem 1%;
	}
	.works-s-box{
		width:90%;
		margin:0 5%;
	}
	
	#works-s-flex{
	margin-top: 2rem;
	gap:30px 3%;
	}
	.works-s-text{
	width:100%;
	padding-left:0%;
	font-size:16px;
	}
	.works-s-slide {
    width: 100%;
	}
	

/*====================================
お客様の声
===================================*/
	.voice-s-flex{
		padding:10px;
	}
	.voice-s-flex::after{
	width:20px;
	height:20px;
}
	.voice-s-flex .img{
		width:45%;
	}
	.voice-s-flex .text{
		width:50%;
	}

.blog-text table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

/*============================
よくある質問
==============================*/
	
#qa .title {
    font-size:15px;
}
#qa .title span {
	display: inline-block;
	padding:2px 10px;
}

#qa .box .aa {
	padding:0px 10px;
}
/*============================
lineup
==============================*/
	#plan-s .second-box2 {
		margin: 1rem auto 0;
	}
	.plan-s-flex{
		padding:80px 0 50px;
	}
	
.plan-s-flex .img{
	width:100%;
}
.plan-s-flex .text{
	width:100%;
}
/*============================
about
==============================*/		
	
.midashi-flex .about-midashi{
	width:100%;
	padding:2rem 1rem 2rem;
}

.midashi-flex .img{
	width:100%;
}
.waku10 {
    padding: 2rem 1rem;
}
.about-s-flex .img{
	width:100%;
}
.about-s-flex .img h3 {
    width: 80%;
	margin: 0 10%;
	}
.about-s-flex .text {
    width: 100%;
	}
	
.about-s-flex li{
	width:48%;
}
/*============================
design
==============================*/

#design{
	background: url("image/design/main.webp") no-repeat / cover;
}

.design-box{
	margin:0 auto 50px;
	font-size:16px;
	padding:1rem;
}
.refe-flex{
	padding:1rem;
}
.refe-flex .img{
	width:100%;
}
.refe-flex .img02 {
	margin:0;		
}

.refe-flex .text{
	width:100%;
	padding:1rem;
	font-size:16px;
}
.refe-flex .text h2{
	padding-bottom:20px;
	font-size:20px;
}
.refe-flex .text h2 span{
	font-size:24px;
	padding-right:20px;
}	
/*********************************
 お問い合わせ
*********************************/
.checkbox-panf span.wpcf7-list-item {
	margin: 0;
    width: calc((100% / 2) - 4%);
	font-size:14px;
}
.apply-message{
	padding:1rem;
}
	
.panf-waku{
	margin:2%;
	padding:0;
}
	
	
#apply-box{
	font-size:16px;
	padding:10px;
	margin:1%;
}
	
#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;
}
/*********************************
 土地情報
*********************************/
	
.bukken-flex .b-box {
    width: 100%;
	}
/*********************************************************************/
}