@media(max-width:768px){
body{ width:auto;}
 .sp{ display:none;}
 .pc {
	display: block;
 }
  .sp_logo {
	color: #154275;
	font-size: 1.6rem;
	display: inline-flex;
	font-weight: bold;
	justify-content: center;
	align-items: flex-end;
 }

 .pagetop {
	background-color:#004098;
	position:fixed;
	display:flex;
	width:60px;
	height:60px;
	right:0;
	bottom:2rem;
	justify-content:center;
	align-items:center;
	z-index:1000;
	opacity:0;
	transition:opacity  2s;
	-webkit-transition:opacity 2s;
}
.pagetop.show {
	opacity:0.8;
	transition:2s;
}
.arrow {
	width:15px;
	height:15px;
	border-top:3px solid #eae4dd;
	border-right:3px solid #eae4dd;
	transform:translateY(20%) rotate(-45deg);
}

 header{ width:auto;}
 .header-inner,.header-logo,.header-logo img{ 
	height:50px;
	min-width: auto;
 }

 .header-logo img {
	margin-top:0.5rem;
 }

 #main-photo{ 
	aspect-ratio:1;
}
 #main-photo .sankaku{
	left: 12%;
}
 #main-photo .sankaku img{
	scale: calc(1.5);
}
	#main-photo .base {
    font-size: clamp(35px, 9vw, 110px);
    line-height: 1.1;
  }
#main-photo .base .last .c_small {
    transform: scale(0.9);
    transform-origin: left center;
  }

 /* #main-photo .base img{
	position: absolute;
	top:50%;
	left:5%;
	transform: translateY(-50%);
} */

#g-nav{ display:none;}
.gnav_btn{
	display:block;
	position:fixed;
	top:0;
	right:0;
/*
	width:4rem;
	height:4rem;
*/
	width:4.5rem;
	height:4.5rem;
	background:#373c5f;
	cursor:pointer;
	z-index:9999;
 }

.gnav_btn span{
	display:inline-block;
	width:2rem;
	height:3px;
	/*left:14px;*/
	left:50%;
	border-radius:2px;
	background:#fff;
	position:absolute;
	transition:all 1s;
	transform: translateX(-50%);
 }
/*
.gnav_btn span:nth-child(1){ top:1rem; }
.gnav_btn span:nth-child(2){ top:1.9rem;}
.gnav_btn span:nth-child(3){ top:2.7rem;}
*/
.gnav_btn span:nth-child(1){ top:1.5rem; }
.gnav_btn span:nth-child(2){ top:50%;}
.gnav_btn span:nth-child(3){ top:3rem;}

.gnav_btn.active span:nth-child(1){ top:18px; left:18px; transform:translateY(6px) rotate(45deg); width:2rem;}
.gnav_btn.active span:nth-child(2){ opacity:0;}
.gnav_btn.active span:nth-child(3){ top:30px; left:18px; transform:translateY(-6px) rotate(-45deg); width:2rem;}

#g-nav{
	display:block;
	position:fixed;
	z-index:-1;
	opacity:0;
	top:0;
	right:-100%;
	width:100%;
	height:100vh;
	background:#373c5f;
	transition:all 1s;
 }
#g-nav.panelactive{ 
	opacity:1; 
	z-index:9998;
	right:0%;
}
#g-nav-list{ display:block;}
#g-nav .panelactive #g-nav-list{
	position:fixed;
	z-index:9998;
	width:100%;
	height:100vh;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}
#g-nav ul{ 
	position:absolute;
	z-index:9998;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
#g-nav .panelactive ul{ display:block;}
#g-nav li{
	list-style:none;
	text-align:center;
}
#g-nav li a{
	display:inline-block;
	text-decoration:none;
	color:#fff;
	padding:10px;
}

.chara2 {
	width: clamp(75px, 13.5vw, 150px);
	top: 50%;
	left: 37%;
}
.chara4 {
	width: clamp(75px, 13.5vw, 150px);
	top: 60%;
	right: 27%;
}
.chara5 {
	width: clamp(75px, 13.5vw, 150px);
	bottom: 15%;
	right: 0;
}

#sindan #sindan-wrap {
	background-image: url("../images/common/kabe.png");
	background-size: unset;
	width: 80%;
}
#sindan-wrap .box {
	width: 100%;
}
#bunner {
	margin-top: 3rem;
	width: 90%;
}
#bunner ul {
	flex-direction: column;
}
#bunner ul li {
	width: 100%;
	padding-block: 0.5rem;
}
#slider img {
	width: 100%;
}
#check-list .inner .c-box {
	margin-right: 0;
}
#check-list .c-pic img {
	width: 80%;
	margin-inline: auto;
}
#check-list .c-text ul {
	width: 85%;
	margin-inline: auto;
}

 #check-list .inner,#news .inner,#service-area .inner { display:flex; flex-direction:column;}
 #check-list .c-pic,#check-list .c-text,#check-list .c-pic img,#check-list .c-pic h3{ float:none;}
 #news ul{ width:auto; border-bottom-width:5px;}
 #news .gradient1{ display:flex; margin-left:200px; width:150px;}
#news .inner {
	width: 80%;
}
 .yellow-btn a  {
	max-width: 7rem;
 }
 .tiku5nen {
	width: 100%;
 }
#service .service-box{ display:block; padding:0 2em; } 
 #service .service-left{display:flex; flex-direction:column; width:100%;} 
 #service .service-leftimg{ order:1;}
 #service .service-left h3{ font-size:2em; order:2;}
 #service .service-right{ width:100%;}
 #service .s-text{ margin:0;}
 #service .service-box {
	padding:0;
 }
 #service .service-right {
	padding:1rem 0;
 }
 #service .s-text {
	padding: 0;
 }
 #service .yellow-btn a  {
	max-width: none;
 }
  #service .yellow-btn-m a  {
	max-width: none;
 }

 #service .yellow-btn {
	width: auto;
 }
	#service .yellow-btn-m {
	width: auto;
 }

 #service .service-box h3 {
	margin-left:0;
 }
 #service-area .area-city{ width:80%; position:relative; top:0; }

 #recruit .rec-pic { width:100%;} 
 footer {
	padding-top: 0;
	padding-bottom: 3rem;
 }
 footer .inner {
	width: 100%;
	display: block;
}
 footer .footer-top{ 
	width:100%;
	margin:0;
	padding:3rem 0;
	display:flex; 
	flex-direction:column;
}
footer .footer-top p{
	margin:2% auto;
	text-align:center;
	width: 60%;
}
.footer-btn {
  width: 100%;
	display: block;
}

footer .left ,footer .right {
	width: 90%;
	margin-inline: auto;
	text-align: center;
}
.page-cover {
	height: 12rem;
}
.page-cover .ttlbg {
	height: 100%;
}
.list-wrap {
	overflow: auto;
}
.list-wrap .list {
	flex-wrap: inherit;
	white-space: nowrap;
	width: 100%;
	margin-inline: calc(50% - 50vw);
	padding-inline: 7%;
	overflow: auto;
}
.list-wrap .list li {
	width: auto;
	min-height: 4.5rem;
}
.inner {
	width: 86%;
}
#section1 {
  padding-block: 3.5rem;
}

#section2,#section3,#section4,#section5,#section6,#section7,#section8,#section9 {
  padding-block: 3rem;
  position: relative;
}

.content-body {
	width: 90%;
	padding: 3.5rem 2rem;
}
.parts-column {
	width: 100%;
	max-width: 100%;
}
.grid3,.grid2,.grid5 {
	gap: 1.7rem;
	grid-template-columns: repeat(1,minmax(0, 1fr));
}
#siroari .grid3 .text,
#bousui .grid3,
#gaiheki .grid3,
#muryousindan .grid3 {
	padding: 0;
}

.grid3 .column-item .text h5,
.grid2 .column-item .text h5 {
	font-size: 1.5rem !important;
}
.typesquare {
	font-size: 1.3rem;
}
/* 小屋裏換気ページ */
.page-cover h1 {
	font-size: 2rem;
}
.ttl .midasi{
	font-size:1.8rem
}
.midasi-text {
	text-align: left;
}
.ttl .subtitle {
	font-size: 1rem;
}
.half-flex > * {
	width: 100% !important;
	padding-top: 2rem;
}
.half-flex .flex-left,.half-flex .flex-right {
	width: 100% !important;
}
 .half-flex .flex-right-img {
	order: 1;
}
.half-flex .flex-left {
	order: 2;
}

.half-wrap .half-flex {
	flex-direction: column;
}
.half-wrap .half-flex img {
	width: 100vw;
}
#koyaura .grid3 .text {
	gap: 1.7rem;
	display: grid;
	grid-template-columns: repeat(1,minmax(0, 1fr));
}

/* シロアリページ */
#siroari .yellow-btn {
  width: 18rem;
}
#siroari .yellow-btn a {
	padding: 0.8rem 2rem;
}
#siroari .num-text {
	text-align: left;
}
#siroari .table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling:touch;
}
#siroari .tbl {
  width:1000px;
}
#siroari #section8 .hosyo-set {
	position: unset;
	text-align: center;
}
#siroari #section8 .hosyo-set p {
	position: unset;
	text-align: center;
}
#siroari #section8 .flex-left {
	order: 1;
}

/* 築５年無料診断 */
#sindan-5 #section3 .flex-left-img  {
	display: none;
}
#sindan-5 #section3 .half-wrap {
	width: 80%;
	margin-inline: auto;
} 
#sindan-5 #section4 .parts-column .text {
  padding: 0 5% 5% 5%;
}
#sindan-5 #section6 .half-flex .flex-left .text {
	padding: 0;
}
#sindan-5 #section6 .flex-right-img {
	order: 2;
}
#subscription .yellow-btn {
	width: 85% !important;
}
#sindan-5 #section5 .yakuzai {
	width: 80%;
}
#sindan-5 #section5 {
	background-image: none;
}
#subscription .flex {
	flex-direction: column;
}
.tel-text a {
	font-size: 1.5rem;
}
/* 会社情報 */
#company #section1 .grid2 {
	width: 90%;
}
#company #section2 .table-wrap table .column-count {
	column-count: 1;
}
#company #section3 .column-box h5 {
	font-size: 1.05rem !important;
	margin-bottom: 0 !important;
}
#company #section3 .grid2 {
	gap: 1.5rem;
}
#company #section2 .table-wrap table {
	width: 100%;
}

/*防水対策*/
#bousui #section6 .center{
  font-size:small;
}
#bousui .frp-text2 {
	text-align: left;
}
#bousui #section1 .yellow-btn,
#bousui #section8 .yellow-btn{
  width:100%;
  margin-top:1.5rem;
  margin-left:0;
}
#bousui #section1 .yellow-btn a,
#bousui #section8 .yellow-btn a{
  display: inline-flex;
  width: 80%;
	max-width: 24rem;
	padding: 1rem 1.5rem 1rem 2.5rem;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	line-height: 1.3;
}

/* #bousui #section8 .yellow-btn{
  width:22rem;
  max-width:24rem;
  margin-top:1.5rem;
  margin-left:0;
} */
/* #bousui .yellow-btn a{
  display: inline-flex;
  width:24rem;
  max-width:24rem;
  padding:1.5rem 2rem 1.5rem 2.5rem;
  align-items:center; 
  gap: 0.5rem;
  font-size: 1.3rem;
  line-height: 1.3;
} */
#bousui .icon-arrow,
#gaiheki #section1 .icon-arrow,
#gaiheki #section7 .icon-arrow{
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  fill:#333;
  transition: fill 0.5s ease, stroke 0.5s ease;
}
#bousui .yellow-btn a:hover .icon-arrow,
#gaiheki #section1 .yellow-btn a:hover .icon-arrow,
#gaiheki #section7 .yellow-btn a:hover .icon-arrow{
  fill:#fff;
}
/*外壁塗装*/

#gaiheki #section1 .yellow-btn,
#gaiheki #section7 .yellow-btn {
  width:80%;
	margin: 0 auto;
}
#gaiheki .tbl_row {
    flex-direction: column;
  }
#gaiheki #section2 .tbl {
	width: 100%;
}

#gaiheki .tbl_th,
#gaiheki .tbl_td {
    width: 100%;
  }
#gaiheki .tbl_td {
	line-height: 1rem;
}
#gaiheki .mentenans .text {
	text-align: left;
}
#gaiheki #section3 .nagare-text p {
	text-align: left;
	line-height: 1.5rem;
}

#gaiheki .yellow-btn a{
  display: inline-flex;
  padding:1rem 1.5rem 1rem 2rem;
  align-items:center; 
  gap: 0.5rem;
  font-size: 1.1rem;
  line-height: 1.3;
}

#bousui .yellow-btn a {
  display: inline-flex;
  width:24rem;
  max-width:24rem;
  padding:1.5rem 2rem 1.5rem 2.5rem;
  align-items:center; 
  gap: 0.5rem;
  font-size: 1.3rem;
  line-height: 1.3;
}

#gaiheki #section2 .text{
  line-height:2rem;
  margin:4% 10%;
}
#gaiheki #section5 .kao-wrap,
#gaiheki #section6 .kao-wrap{
  display:flex;
  align-items:center;
  flex-direction:row;
  margin-left:0;
  text-align:left;
}
#gaiheki #section5 .kao-wrap img,
#section6 .kao-wrap img{
  display:block;
  width:80px;
  height:auto;
  margin:10px;
}
#gaiheki #section5 .edging-subtitle h3,
#gaiheki #section6 .edging-subtitle h3{
  font-size:30px;
  text-align:left;
  margin:2rem 0 0 1rem;
}
#gaiheki #section7 .consulation h3{
  font-size:18px;
	text-align: left;
}
/*お問合わせ・申し込み*/
#contact #section1 .tel-option h4,
#diagnosis #section1 .tel-option{
  font-size:1rem;
	line-height: 1.3;
}
.content-list{
  width:100%;
  padding:3.5rem 2rem;
  background-image: url("../images/common/kabe.png");
  background-color: #f7f7f4;
  font-weight: 600;
}
.content-list-option {
	text-align: left;
}

#contact .otoiyellow-btn,
#diagnosis .otoiyellow-btn,
#recrute .otoiyellow-btn{
  display:flex;
  width:100%;
  max-width:20rem;
	margin: 0 auto;
  padding:1rem 2rem 1rem 4.5rem;
  align-items:center; 
  gap: 0.5rem;
  font-size: 1rem;
  color:#333;
  line-height: 1.3;

  border-radius:9999px;
  background-color:#f2d91f;
  box-shadow:0 0 0.3125rem rgba(0,0,0,0.18);
  
  border:none;        /* buttonの枠消す */
  cursor:pointer;
  transition:all .5s ease;
}
#contact .otoiyellow-btn .btntext,
#diagnosis .otoiyellow-btn .btntext,
#recrute .otoiyellow-btn .btntext{
  position:relative;
}
#contact .otoiyellow-btn .icon-arrow,
#diagnosis .otoiyellow-btn .icon-arrow,
#recrute .otoiyellow-btn .icon-arrow{
   width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  fill:#333;
  transition: fill 0.5s ease, stroke 0.5s ease;
}
#contact .otoiyellow-btn:hover,
#diagnosis .otoiyellow-btn:hover,
#recrute .otoiyellow-btn:hover{
  background:#131313;
    color:#fff;
}
#contact .otoiyellow-btn:hover .icon-arrow,
#diagnosis .otoiyellow-btn:hover .icon-arrow,
#recrute .otoiyellow-btn:hover .icon-arrow{
    fill:#fff;
}
/*採用情報*/
#recrute #section1 .midasi-text p{
  text-align:center;
}
#contact  .tel-option{
  font-size:1rem;
}
#recrute #section2 .recontent-list{
  width:auto;
  margin:1.5rem 2rem;
  padding:3.5rem 2rem;
  background-image: url("../images/common/kabe.png");
  background: #f7f7f4;
  font-weight: 600;
}
#recrute #section2 .re1,
#recrute #section2 .re2,
#recrute #section2 .re3{
  margin:35px;
}
.muryousindan h3 a, .contact h3 a {
	line-height: 1.5;
}



/*新着情報*/
.chara-inner{
	grid-template-columns:1fr;
}
.chara-text p{
	padding-right:0;
	font-size:15px;
}
.chara-box{
	padding:2rem;
	outline-offset:-1rem;
}
#chara .chara-text h3 { 
	font-size:23px;
	text-align:center;
	padding-bottom:20px;
}
.chara-img{
	display:flex;
	justify-content:center;
	align-items:center;
}
.chara-img img { 
	max-width:60%;
	margin:0 auto;
 }
#cooperation #section3 .text ul {
	width: 80%;
}
#cooperation #section3 .sp_left {
	text-align: left;
}
#cooperation .yellow-btn {
	margin: 0 auto;
	width: 70%;
}
#cooperation .yellow-btn a {
	padding: 1rem 1rem 1rem 1.5rem;
	font-size: 1rem;
}
.consulation .flex-left .text {
	width: 100%;
	margin: 0 auto;
}
}