@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 138px;
}
html {font-size: 62.5%;scroll-behavior: smooth;}
body{  
  font-size: 1.6rem;
 letter-spacing: 0.05em;
}
object {pointer-events: none;}
.sp {display: none !important;}
a[href^="tel:"] {pointer-events: none;}
a {
    text-decoration: none;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.pcFlex{display: flex;}
.img_r {overflow: hidden;}
.img_r>img {float: right;
    width: 33%;
    margin-left: 15px;
    margin-bottom: 15px;
}
p,li,dt,dd,th,td,input{
  /*font-size: 1.6rem;*/
  font-size: min(1.2vw, 1.7rem);
}
h1,h2,h3,h4,h5,h6 {
  /*font-size: 1.6rem;*/
  font-size: min(1.2vw, 1.7rem);
}

section{
  padding: 100px 0;
}
body:not(#top) section p:not(:last-child){
  margin-bottom: 30px;
}


/*タイトル
========================================== */
.h2Tit {
	font-size: 3.4rem;
}
.h3Tit {
  font-size: 3.2rem;
	margin-bottom: 20px;
}
.h4Tit {
	font-size: 2.4rem;
	margin-bottom: 20px;
}
.h5Tit {  
	font-size: 2rem;
	margin-bottom: 30px;
}
.h6Tit{
	font-size: 1.8em;
	margin-bottom: 20px;
}

.decoTitWrap{
	margin-bottom: 50px;
}
.decoTitWrap .deco span{
	font-size: 2.0rem;
}

/*
　テキスト
========================================== */
.leadTxt{
  font-size: 2.7rem;
  text-align: center;
}
.note{
  font-size: 1.2rem;
}

/*
　ボタン,リンク
========================================== */
.btn{
  width: 320px;
  height: 46px;
}
a.icArrow{
	padding-right: 50px;
	padding-left: 20px;
}
a.icArrow::after{
	width: 18px;
	height: 17px;
	right: 30px;
	top: calc(50% - 9px);
}
.line.icArrow{
	padding-right: 40px;
}
.line.icArrow::after{
	width: 31px;
	height: 31px;
	right: 0px;
	top: calc(50% - 16px);
}

/* =======================================
  タブ
========================================== */
.btnTab a{
	font-size: 1.7rem;
	width: 253px;
	height: 60px;
}
.btnTab a::after {
	width: 18px;
	height: 17px;
	right: 30px;
	top: calc(50% - 9px);
}

/* =======================================
	header
========================================== */
header {
	left: 0;
	width: 100%;
	height: 166px;
}
header .flex{
 background: #fff;
 padding: 15px min(2.6vw,37px) 5px;
}
header #logo a{
  padding-left: 70px;
	padding-right: 10px;
}
header #logo a::before{
	width: 90px;
  height: 70px;
  left: -17px;
  top: -8px;
}
header #logo span{
	font-size: 1.1rem;
}
header #logo a{
	font-size: 2.8rem;
	line-height: 1.1;
}
header .headerLinks.pcFlex{
	align-items: center;
	gap: 0 10px
}
header .headerLinks {
	margin: 0 0 0 auto;
}
.headbar .imgGoogle{
	margin-right: 9px;
	width: 83px;
}
.headbar .imgStar{
	margin: 0 6px 0.25em;
	width: 66px;
}

.headerBtn a{
	background: var(--base);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0 4px;
	width: 11vw;
	max-width: 141px;
	height: 46px;
	border-radius: 4px;
	box-shadow: 0px 3px 0px 2px rgb(255, 133, 0);
  	color: var(--wh);
	padding: 1%;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-align: center;
}
.headerBtn a:hover{
  	-webkit-transform: translate(0,4px);
	-moz-transform: translate(0,4px);
	transform: translate(0,4px);
	box-shadow: 0px 1px 0px 2px rgb(255, 133, 0);
	/*margin-top: 6px;*/
}
.headerBtn a img{
	width: 19px;
	height: 16px;
}
.headerBtn a span{
}

.headerTel{
	font-weight: 700;
	line-height: 1.2;
}
.headerTel a{
	position: relative;
	display: block;
	margin-top: 4px;
	padding-left: 26px;
	font-size: 2.3rem;
	color: #333333;
	letter-spacing: 0;
	line-height: 1;
}

.headerTel a::before {
	position: absolute;
	top: 3px;
	left: 5px;
	content: "";
	display: block;
	width: 15px;
	height: 20px;
	background: url(../images/header_ic_tel.svg) no-repeat center / 100%;
}
.headerTel span{
	font-size: 1.2rem;
	letter-spacing: 0.03em;
	color: #444444;
  white-space: nowrap;
}
.headerInsta{
	font-size: 0;
	width: 40px;
	height: 40px;

}

@media screen and (max-width: 1020px) {
  header #logo a{
	font-size: 2.6rem;
	line-height: 1.1;
  letter-spacing: 0
}
}/* //end for 1000 */
/* =======================================
	gnavi
========================================== */
.gnavi{
	background: var(--wh);
}
.gnavi a{
	color: #172D57;
}
#gnaviList.pcFlex{
	justify-content: space-between;
  padding: 20px min(1.4vw,20px) 25px;
  max-width: 1400px;
  margin: auto;
}
.gnaviContainer > li{
	position: relative;
	z-index: 1;
	z-index: 11;
}
.gnaviContainer > li > a{
	display: block;
	line-height: 1;
	/*padding: 0 min(1.2vw,10px);*/
}
.gnaviContainer > li + li{
	border-left: 1px solid #fff;
}
.gnaviContainer .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
.gnaviContainer .sub{
	position: absolute;
	z-index: 2;
	display: none;
	visibility: hidden;
	transition: all 0.6s ease-in-out;
}
.gnaviContainer .sub ul{
	padding-left: 20px;
}
.gnaviContainer .sub li{
	text-align: left;
}
.gnaviContainer .sub li a{
	white-space: nowrap;
	display: block;
	padding: 10px 20px;
	background: rgb(255, 255, 255, 0.9);
}
.gnaviContainer .sub li a::before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 0.3em;
	height: 1px;
	margin-right: 0.5em;
	background: #172D57;
	transform: translateY(-2px);
}

@media screen and (min-width: 769px) {
}/* //end for PC */
@media screen and (min-width: 1100px) {
  #gnaviList li a{
    font-size: min(1.29vw, 16px)
  }
}/* //end for PC2 */

/* =======================================
	main
========================================== */
main{
	margin-top: 166px;
}

/* =======================================
	footLine
========================================== */
#footLine a{
	width: 841px;
}

/* =======================================
	footContact
========================================== */
#footContact h2{
	font-size: 3.6rem;
}
.footContactList.pcFlex{
	justify-content: space-between;
}
.footContactList.pcFlex li{
	width: 47.3%;
}

.footContactList.pcFlex li .btn{
	font-size: 1.7rem;
	width: 253px;
	height: 60px;
  }
.pgs #footContact{
	padding-top: 65px;
}


/* =======================================
	footer
========================================== */
footer{
  padding: 76px 0 0;
}
.footerBox.pcFlex{
	padding-bottom: 80px;
	justify-content: space-between;
}
.footerBox .footerLeft{
	width: min(48%, 600px);
}
.footerBox .footerRight{
	width: min(52%, 800px);
}
.footerRight.pcFlex{
	gap: 30px;
}
.footerInfomation.pcFlex{
	margin-top: 140px;
	padding-bottom: 40px;
	align-items: end;
	justify-content: start;
	gap: 0 20px;
}
#footerLogo{
	font-size: 2.9rem;
}
#footerLogo span{
	font-size: 1.1rem;
}
footer .address{
	margin-top: 25px;
	font-size: 1.4rem;
	font-weight: 700;
}
footer ul{
	margin-top: 25px;
	font-weight: 700;
}
footer .sub{
	margin-top: 0 !important;
	margin-left: 20px;
}
footer .bnr{
	margin-top: 25px;
}
footer .bnr img{
	width: 150px;
}
footer copy,
footer .copy p{
	font-size: 1.2rem;
}

#pageTop{
	width: 71px;
	right: 4vw;
	bottom: 73px;
 font-size: 1.7rem;
}


/* =======================================
	pgs common
========================================== */
.pgs main{
	background: url("../images/top_bg_product.svg") no-repeat center 30vw / 100% auto, url("../images/top_bg_main.svg") no-repeat center calc(100% - 480px) / 100% auto;
}
.pgs section p:not(:last-child){
  margin-bottom: 30px;
}

/*-- mainTitle --*/
.pgs .mainTitle{
	/*height: 150px;*/
	height: 200px;
}
.pgs .mainTitle h2{
	font-size: 3.6rem;
}

/*-- title --*/
.pgs .h4Tit{
	margin-top: 50px;
}

/*-- table --*/
.pgs .basicTable dt{
	border-right: 1px dotted var(--bk);
	padding: 15px 1.5% 15px 2.5%;
	width: 23%;
}
.pgs .basicTable dd{
	padding: 15px 2.5%;
	width: 77%;
}
.pgs .basicTable dt:last-of-type{
	border-bottom: none;
}
.pgs .basicTable dd:last-of-type{
	border-bottom: none;
}

/*-- pgsMenu --*/
.pgsMenu > ul.flex{
  justify-content: center;
  flex-wrap: wrap;
}
.pgsMenu li{
  width: 220px;
  height: 60px;
  padding: 5px;
  text-align: center;
}
.pgsMenu a{
  display: grid;
  place-content: center;
  margin: auto;
  width: 100%;
  height: 100%;
  padding: 10px 5px;
  background: var(--base);
  color: #fff;
  text-align: center;
  line-height: 1.2em;
}
.pgsMenu a:hover{
  opacity: 0.7;
}
.pgsMenu > ul{
  margin-top: 10px;
}

/*----*/
.pgs .leadTxt{
	font-size: min(2.2vw,2.6rem);
}

/*-- btn --*/
.pgs .btn{
	width: 100%;
	max-width: 420px;
}
.pgs main .txtBtn{
	font-size: 2rem;
}

/*		anchorLink
-----------------------------*/
.pgs .anchorLink{
	margin-bottom: 70px;
}
.pgs .anchorLink .btn::after{
  right: 30px;
}

/* =======================================
	top
========================================== */
/*		#mv
-----------------------------*/
/*#mv::after{
  height: 80px;
  background: url("../images/bg_mv.svg") no-repeat center top / 1400px auto;
}
@media screen and (min-width: 1401px) {
  #mv::after{
    background-size: 100% auto;
  }
}/* //end for PC */
#mv{
	padding-bottom: 60px;
}
#mv figure{
  position: relative;
  width: 100%;
/* 	width: 1119px !important; */
  z-index: 2;
  padding: 0 3.57vw;
  overflow: hidden;
}
/*-- for mv slick --*/
#mvSlider .slick-dots{
	bottom: -95px !important;
}
/*-- //for mv slick --*/
#mv .arrowLeft{
	top: calc(50% - 50px);
	left: 29px;
	width: 41px;
}
#mv .arrowRight{
	top: calc(50% - 50px);
	right: 29px;
	width: 41px;
}
.mvItems{
	bottom: 30px;
}
/*
.mvItems .mvTxt{
  width: 65%;
  margin: auto;
}
.mvTxt p{
	font-size: 26px;
}
.mvTxt p .txtL{
  font-size: 1.65em;
}*/
.mvBtn{
	margin-top: 45px;
}
.mvBtn.flex{
  gap: 0 40px;
}
.mvBtn .btn{
	font-size: 1.8rem;
	width: 320px;
	height: 73px;
}
.mvBtnLine .catch{
	border-radius: 15px;
  font-size: 14px;
  width: 228px;
  height: 30px;
	top: -0.8em;
}

/*		#topCompany
-----------------------------*/
#topCompany{
  padding-top: 59px;
}
.topCompanyService.pcFlex{
	align-items: start;
	justify-content: space-between;
}
.topCompanyService .txts{
	width: 47%;
	max-width: 500px;
	padding-left: 25px;
}
.topCompanyService .txts .catch{
	font-size: 2.0rem;
}
.topCompanyService .txts .catch span::before{
	left: -25px;
}
.topCompanyService .txts .btn{
	width: 245px;
}
.topCompanyService .img{
	padding: 8% 8% 4% 0;
	width: 50.58%;
}
.topCompanyService .imgTxts{
	top: -6%;
	left: 0;
}
.topCompanyActionTit{
	margin-bottom: 57px;
	padding-top: 40px;
}
.topCompanyActionTit h2{
	padding-top: 100px;
}
.topCompanyActionTit h2 span{
	font-size: 3.4rem;
}
/*吹き出し配置*/
.topCompanyActionTit::before,
.topCompanyActionTit::after{
  border: 2px solid var(--bk);
}
.topCompanyActionTit::before{
  bottom: 14px;
  left: calc(50% - 14px);
  width: 14px;
  height: 14px;
}
.topCompanyActionTit::after{
  bottom: 0;
  left: calc(50% - 24px);
  width: 11px;
  height: 11px;
}
/*イラスト配置*/
.topCompanyActionTit h2::before{
	width: 208px;
	height: 156px;
	top: -17px;
}
.topCompanyActionTit h2::after{
	width: 170px;
	height: 128px;
	top: 0;
}
.topCompanyActionList li{
	margin-bottom: 50px;
}
.topCompanyActionList li figure{
	margin-bottom: 25px;
}
/*欠け枠線配置*/
.topCompanyActionTit h2 span{
	border-radius: 10px;
}
.topCompanyActionTit h2 span::before{
  border: 2px solid var(--bk);
	border-bottom: none;
}
.topCompanyActionTit h2 span::after{
  bottom: -12px;
}
.topCompanyActionList.flex{
  gap: 36px;
}

/*		#topPoint
-----------------------------*/
#topPoint .decoTitWrap{
	margin-bottom: 44px;
}
#topPoint figure{
	max-width: 835px;
}
#topPoint .leadTxt{
	font-size: 2rem;
}
#topPoint .leadTxt .fontL{
	font-size: 4.8rem;
}
#topPoint .txtDots::before{
	background: radial-gradient(circle farthest-side, #FF9A1F, #FF9A1F 35%, transparent 35%, transparent);
	background-size: 17px;
  height: 6px;
  width: 100%;
	top: -5px;
}
#topPoint .txtDots.dots01::before{
	background: radial-gradient(circle farthest-side, #FF9A1F, #FF9A1F 25%, transparent 25%, transparent);
	background-size: 25px;
	top: -2px;
}
.topPointData{
	justify-content: center;
	margin: 0 -3% 65px;
}
.topPointData::after{
	bottom: -60px;
}
.topPointData li{
	font-size: 2.3rem;
	margin: 0 1.5%;
	padding: 28px 2%;
	width: 32%;
	max-width: 375px;
}
.selectionPoint > p{
	border-radius: 109px;
	font-size: 2.3rem;
	margin: 43px auto 0;
	padding: 45px 23px;
	width: 218px;
	height: 218px;
}
.selectionPoint > p::before,
.selectionPoint > p::after{
	width: 62px;
	height: 68px;
	bottom: -53px;
}
.selectionPoint > p::before{
	left: -112px;	
}
.selectionPoint > p::after{
	right: -112px;	
}
.topPointList{
	justify-content: center;
	margin: 105px auto 60px;
	max-width: 875px;
}
.topPointList .pointBox{
	box-shadow: 9px 9px 0px 1px #FF9A1F;
	margin: 0 5.7%;
	padding: 20px 20px 40px;
	max-width: 359px;
}
.topPointList .pointBox:nth-child(1)::after{
	width: 29px;
	height: 29px;
	right: -68px;
	top: calc(50% - 6px);
}
.topPointList .pointBox .ic{
	width: 116px;
	height: 116px;
	margin-top: -60px;
	margin-left: -68px;
}
.topPointList .pointBox h3{
	font-size: 1.6rem;
	margin-top: -28px;
	margin-bottom: 15px;
}
.topPointList .pointBox .fontL{
	font-size: 4.6rem;
}
.topPointList .pointBox dt{
	font-size: 1.8rem;
}
.topPointList .pointBox dd{
	height: 107px;
	margin-top: -15px;
	padding: 30px 10px;
}
/*イラスト配置*/
.topPointMessage{
	padding: 80px min(11vw,140px) 63px;
}
.topPointMessage::before{
  width: 185px;
	height: 163px;
	top: -2%;
}
.topPointMessage::after{
  width: 233px;
	height: 175px;
	bottom: 0;
  right: -3.5%;
}
@media screen and (max-width: 1000px) {
	.topPointMessage::before{
		left: -4.5%;
	}
	.topPointMessage::after{
   bottom: -60px;
  }
}/* //end for PC */
.topPointMessage p{
	font-size: min(1.6vw,2rem);
	text-align: center;
}


/*		#topReason
-----------------------------*/
.topReasonList.flex{
	gap: 53px 45px;
}
.topReasonList.flex li{
	margin: 12px 0;
  width: 303px;
}
.topReasonList.flex li figcaption{
  font-size: 60px;
}
.topReasonList.flex li .txts p{
  font-size: 1.9rem;
}
#topReason .note{
	font-size: 1.5rem;
}

.topReasonMessage{
  padding: 80px 12% 60px 18%;
}
.topReasonMessage h3 span{
	font-size: 2.0rem;
}
.topReasonMessage p{
	text-align: center;
}
/*イラスト配置*/
.topReasonMessage::before{
  top: 0;
	width: 195px;
	height: 159px;
}
.topReasonMessage::after{
	left: 0;
	width: 305px;
	height: 229px;
}
@media screen and (max-width: 1000px) {
	.topReasonMessage::after{
   left: -8vw;
  }
}/* //end for PC */
.topReasonMessage p{
	letter-spacing: 0.02em;
}

/*		#topResults
-----------------------------*/
#topResults .decoTitWrap{
	margin-bottom: 45px;
}
.topResultsList{
	margin-bottom: 55px;
}
.topResultsList.flex li p{
	font-size: 2.5rem;
}
.topResultsList.flex{
  gap: 30px;
}

/*.entryList*/
.entryList{
	margin-bottom: 40px;
}
.entryList li .txts .category{
	font-size: 1.5rem;
}
body:not(#top) .entryList li{
  width: min(calc((100% - 60px)/3),356px);
}
.entryList li .txts >.flex{
	padding-right: 6em;
}

/*		#topVoice
-----------------------------*/
#topVoice .entryList li{
	width: 435px;
}
#topVoice .entryList li .txts .category{
	font-size: 1.8rem;
}
#topVoice .entryList li figure{
	height: 326px;
}

/*		#topService
-----------------------------*/
.serviceList.flex li a .serviceListInner::after{
	width: 25px;
	height: 25px;
}
.serviceListItem li figure{
  height: 200px;
}
.serviceListItem_staff figure img{
	height: 169px;
}
.serviceListItem_payment figure img{
	height: 141px;
}
.serviceListItem_selfcheck figure img{
	height: 142px;
}
.serviceListItem_survey figure img{
	height: 140px;
}
.serviceListItem_flow figure img{
	height: 171px;
}
.serviceListItem_faq figure img{
	height: 155px;
}
.serviceList.flex li a p{
	font-size: 2.4rem;
}

/*		#topNews
-----------------------------*/
#topNews{
	padding: 60px 0 90px;
}
.topNewsTit{
	padding-bottom: 20px;
}
.topNewsTit .btn{
	width: 242px;
}
.newsList li .newsInfo .category{
	font-size: 1.5rem;
}

/*		#instaArea
-----------------------------*/
#instaArea{
	padding: 80px 0 30px;
}
.instaAreaInner{
	padding: 50px 0 0;
}
.instaAreaInner .txts{
	width: 386px;
}

/*		#topSurvey
-----------------------------*/
#topSurvey{
	padding: 0 0 50px;
}
#topSurvey.pcFlex{
	align-items: center;
	gap: 0 4%;
}
#topSurvey.pcFlex .txts{
	flex: 1;
}
#topSurvey.pcFlex .txtsInner{
	width: 444px;
}

#topSurvey.pcFlex .img{
	border-radius: 19px;
	overflow: hidden;
	/* width: 508px; */
	flex: 0.79;
}
#topSurvey .txts .badge{
	left: 0;
	width: 9vw;
  height: 9vw;
	max-width:123px;
	max-height:123px
}
#topSurvey .txts .catch{
	margin-bottom: 0.4em;
	font-size: 2.7rem;
}

/* =======================================
	company
========================================== */
#companyMessage .h3Tit{
	margin-bottom: 40px;
}
#companyMessage .pcFlex .txts{
	margin-right: 5%;
	width: 60%;
}
#companyMessage h4{
	font-size: 2.7rem;
	margin-bottom: 20px;
}
#companyMessage .pcFlex .img{
	width: 40%;
}
#outline .basicTable dt{
	width: 25%;
}
#outline .basicTable dd{
	width: 75%;
}
#companyPolicy .h4Tit{
	font-size: 2.8rem;
  margin-bottom: 30px;
	margin-top: 50px;
}
#companyPolicy .h4Tit span{
	font-size: 2rem;
}
#companyPolicy ol{
	flex-wrap: wrap;
}
#companyPolicy ol li{
	font-size: max(0.8vw, 1.7rem);
	margin-bottom: 15px;
	width: 47%;
}
#companyPolicy ol li .num{
	width: 30px;
	height: 30px;
	margin-right: 0.75em;
}
#permit .permitList li,
#permit .awardList li{
	margin: 0 1.5% 30px;
	width: calc((100% - 12%) / 4);
}
#permit .pcFlex{
  gap:30px;
  max-width: 65%;
  margin: auto;
}
#permit .pcFlex figure{
  max-width: 300px;
}

#access .map{
	height: 350px;
}
#access .accessBox{
	margin-top: 20px;
}
#access .accessBox .access{
	width: 70%;
}
#access .accessBox .btnWrap{
	text-align: right;
	width: 30%;
}
#access .accessBox .btnWrap .btn{
	margin: 0 0 0 auto;
}


/* =======================================
	reason
========================================== */
#reasonLead div.pcFlex{
	margin: 0 0 80px;
}
#reasonLead .leadBox .img{
	margin-right: -4%;
	width: 50%;
}
#reasonLead .leadBox.flexRowReverse .img{
	margin-left: -4%;
	margin-right: 0;
}
#reasonLead .leadBox .txts{
	margin-top: 50px;
	padding: 2.5%;
	width: 50%;
}
#reasonLead .leadBox .badge{
	font-size: 6rem;
	width: 9vw;
  height: 9vw;
  max-width: 123px;
  max-height: 123px;
	left: -30px;
	top: -30px;
}
#reasonLead .leadBox .catch{
	margin-left: calc(4vw - 0.4vw);
}
#reasonLead .leadBox .catch span{
	font-size: min(2.15vw,2.1rem);
	padding: 0 0.6em;
}
@media screen and (min-width: 1064px) {
	#reasonLead .leadBox .catch span:has(+.pControl){
		padding-right: 0;
	}
	#reasonLead .leadBox .catch span.pControl{
		padding-left: 0;
	}
}/* //end for PC */
@media screen and (min-width: 1366px) {
	#reasonLead .leadBox .catch{
	  margin-left: calc(61px - 10px);
	}
  }/* //end for PC */
#reasonLead .leadBox .ls0{
	letter-spacing: 0;
}

.reasonMessage{
	background-size: 195px 158px;
	padding: 80px 120px 60px 180px;
}
.reasonMessage::before{
	top: 0;
}
.reasonMessage::after {
  width: 208px;
  height: 156px;
}
.reasonMessage h3 span {
  font-size: 2.0rem;
}
#reasonWarranty .h4Tit{
	margin-top: 50px;
}
#reasonWarranty dl dt{
	font-size: 2rem;
}
#reasonWarranty dl dd{
	padding: 15px 30px 20px;
}
#reasonWarranty .warranty01{
	margin-bottom: 30px;
}
#reasonWarranty .warranty01 dl{
	width: 48.5%;
}
#reasonWarranty .warranty02 dt{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 17%;
}
#reasonWarranty .warranty02 dd{
	width: 83%;
}

/* =======================================
	service
========================================== */
#serviceLead p{
	text-align: center;
}
#serviceExterior .leadImg,
#serviceRoof .leadImg{
	border-radius: 17px;
	margin-bottom: 20px;
}
#serviceExterior .h4Tit span,
#serviceRoof .h4Tit span{
	font-size: 2rem;
}
.serviceRoofList{
	justify-content: center;
	margin: 0 -2%;
}
.serviceRoofList li{
	width: 25%;
	max-width: 260px;
	margin: 0 2% 15px;
}
.serviceRoofList li figure img{
	border-radius: 17px;
}
.staffList li{
	margin-bottom: 40px;
	padding: 25px 2.5% 10px;
	width: 47%;
}
.staffList li h4{
	font-size: 2.4rem;
	line-height: 1.475;
}
.staffList li h4 span{
	font-size: 1.6rem;
}
.staffList dl{
	display: flex;
	flex-wrap: wrap;
}
.staffList dl dt{
	width: 7em;
}
.staffList dl dd{
	margin-bottom: 15px;
	width: calc(100% - 7em);
}
.areaDetail,
.areaDetail figure img{
	height: 500px;
}
.areaDetail dl{
	margin-top: -500px;
}
.areaDetail dl dt{
	font-size: 1.8rem;
	width: 40%;
}
.areaDetail dl dt .fontL{
	font-size: min(4.1vw,4.5rem);
}
.areaDetail dl dd{
	width: calc(100% - 40%);
}
.areaDetail dl dd li:not(:last-child){
	margin-bottom: 20px;
}
.areaDetail dl dd li span{
	border-radius: 30px;
	font-size: 1.8rem;
	padding: 1px 15px;
}

/* =======================================
	selfcheck
========================================== */
#selfcheckLead .leadCatch{
	margin: 30px auto 20px;
}
#selfcheckLead .leadCatch figure{
	padding-right: 30px;
	max-width: 250px;
}
#selfcheckLead .leadCatch .leadTxt{
	padding: 20px;
	width: calc(100% - 220px);
}
#selfcheckLead .leadCatch .leadTxt::before{
	width: 30px;
	height: 30px;
	top: 68%;
	left: 5px;
}
#selfcheckLead .leadCatch .leadTxt::after{
	width: 18px;
	height: 18px;
	top: 78%;
	left: -15px;
}
#selfcheckLead p{
	text-align: center;
}
#selfcheckUrgency > div:first-of-type{
	margin-bottom: 30px;
	padding: 30px;
}
#selfcheckUrgency .check01{
	margin-right: 2%;
	padding: 25px 2%;
	width: 62%;
}
#selfcheckUrgency .check01 h3{
  font-size: 2.4rem;
}

#selfcheckUrgency .check01 dt{
	font-size: 2.6rem;
  width: 14%;
}
#selfcheckUrgency .check01 dd{
	margin-top: 15px;
  padding: 8px 15px;
  width: 86%;
}
#selfcheckUrgency .check02{
	width: 35%;
}
#selfcheckUrgency .check02 p{
  font-size: 2rem;
}
.checkpointList{
	margin: 0 -1.16%;
}
.checkpointList li{
	margin: 0 1.16% 40px;
	padding: 15px 30px 30px;
	width: 48%;
	max-width: 580px;
}
@media screen and (max-width: 1255px) {
.checkpointList{
 margin: 0;
 justify-content: space-between;
}
 .checkpointList li{
  margin: 0 0 40px ;
 }

}/*-SP only-*/
.checkpointList h4{
	font-size: 2rem;
	height: 4em;
	padding-left: 21%;
}
.checkpointList .num{
	font-size: 1.6rem;
	width: 100px;
	height: 100px;
	border-radius: 50px;
	padding: 20px 5px;
  top: -30px;
  left: -45px;
}
.checkpointList .num span{
  font-size: 3.2rem;
}
.checkpointList li figure{
	margin-bottom: 15px;
  float: left;
  width: 50%;
  padding-right: 3%
}
.checkpointList li dl{
  margin-left: 53%
  
}
.checkpointList li dl + p{
  margin-top: 40px;
}
.urgencyLevel dd{	
	font-size: 1.6rem;
}
.urgencyLevel dd img{
	width: 22px;
	height: 22px;
}
.checkRecommended{
	margin-top: 30px;
	padding: 30px;
}
.checkRecommended figure{
	width: 40%;
}
.checkRecommended .txts{
	padding-left: 5%;
	width: 60%;
}
.checkRecommended h3{
  font-size: 2.7rem;
}

/* =======================================
	payment
========================================== */
#payment h3{
	margin-top: 80px;
}
#paymentLead{
	padding-bottom: 70px !important;
}
#paymentLead h3 span{
	font-size: 2.0rem;
}
#paymentLead h3 span::before{
	width: 24px;
	height: 22px;
}
#paymentLead ul.bestPlan{
	padding: 30px 20px;
}
#paymentLead ul.bestPlan li{
	margin: 0 0.8%;
  font-size: 5rem;
  }
#paymentLead ul.bestPlan li.item{
  border-radius: 125px;
	font-size: 3.4rem;
  width: 250px;
height: 250px
}
#paymentLead ul.bestPlan li.item.last{
  border-radius: 5px;
}
#paymentLead p{
	margin-top: 30px;
	text-align: center;
}

.dataTable tbody th{
	padding: 15px 1.25%;
	width: 20%;
}
.dataTable tbody td{
	padding: 15px 1.25%;
	width: calc(80% / 5);
}

#payment .costExample .flexWrap > div.leftBox{
  width: 42%;
padding: 20px 0 20px 20px;
}
#payment .costExample .flexWrap > div.rightBox{
   width: 58%;
  padding: 20px;
}
#payment .costExample .before{
	width: 38%;
}
#payment .costExample .before::after{
	border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
	right: -22px;
	top: calc(50% - 8px);
}
#payment .costExample .after{
	padding: 5px 3% 10px;
	width: 55%;
}
#payment .costExample .after dt{
	font-size: 2rem;
}
#payment .costExample h4{
	font-size: 1.8rem;
	margin: 15px 0 10px;
}
#payment .costExample .after p{
	font-size: 2rem;
	line-height: 1.1;
}
#payment .costExample .after p span{
	font-size: 4rem;
}
#payment .costExample .total ul li.item{
	max-width: 6.9em;
}
#payment .costExample .total ul li.sum{
  text-align: right;
}
#payment .costExample .details dt{
	font-size: min(1.2vw, 1.5rem);
}

@media screen and (max-width: 1080px) {
#payment .costExample .total p{
  font-size: 2vw;
}
}/*-max 1090 -*/
#paymentHowto .btn{
	font-size: 2rem;
	height: 92px;
}

#paymentExterior .dataTable tbody td{
	width: calc(100% / 6);
}
#paymentRoof .dataTable tbody td{
	width: calc(100% / 7);
}

#paymentHowto p{
  margin-bottom: 0 !important
}

#paymentHowto .frmBox p img{
	max-width: 800px;
}

.otherList li:not(.long){
  width: 49%;    
}
.otherList li.long{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.otherList li.long h5{
	width: 100%;
}
.otherList li.long .leftBox{
	width: 46%;
}
.otherList li.long .rightBox{
	width: 50%;
}

/* =======================================
	flow
========================================== */
#flowStep .pcFlex{
 justify-content: space-between;
}
#flowStep .leadTxt + p{
 text-align: center;
}
#flowStep .pcFlex dl{
 width: calc((100% - 50px*2)/3);
}
#flowStep .pcFlex dl + dl::before{
 content: "";
	position: absolute;
	top: 50%;
	right: calc(100% + 15px);
	display: block;
	border-top: 5px var(--base) solid;
	border-right: 5px var(--base) solid;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

#flowList h3 {
	font-size: 2.6rem;
	margin-bottom: 5px;
}
#flowList h3 .num:not(:last-of-type)::after{
	width: 18px;
	height: 16px;
	left: 41px;
	bottom: -14px;
}
#flowList h3 .num{
	font-size: 4rem;
  width: 100px;
  height: 100px;
  border-radius: 50px;
	margin-right: 15px;
  padding: 5px;
}
.flowDetail{
	align-items: center;
	margin-bottom: 50px;
	padding: 30px;
}
.flowDetail figure{
	width: 38%;
	max-width: 400px;
}
.flowDetail .txts{
	margin-left: 5%;
	width: 62%;
}
.flowDetail .txts figure{
	max-width: 100px;
}
.flowDetail .txts p:not(:last-of-type){
	margin-bottom: 15px !important;
}
.flowDetail .txts ul li{
	margin-bottom: 10px;
}
.flowDetail .txts figure{
	margin-right: 10%;
}
.flowDetail .btnWrap.pcFlex{
	width: 100%;
}
.flowDetail .btnWrap.pcFlex a{
	width: 45%;
}
.flowDetail .btnWrap.pcFlex a:not(:nth-child(2n)){
	margin-right: 15px;
}
.flowDetail  dd .btnWrap.pcFlex:last-of-type a{
/* margin: 0 0 0 16px;*/
}
.flowDetail  dd .btnWrap.pcFlex:last-of-type::after{
	content:"";
	display: block;
	width: 45%;
  	height: 0;
	margin: 0 auto;
  }
/*.btnList*/
.flowDetail  .btnList{
	margin-top: 10px;
	gap: 5px 6%;
	flex-wrap: wrap;
	justify-content: center;
}
.flowDetail  .btnList li{
	width: 45%;
	text-align: center;
}
.flowDetail  .btnList li .btn{
	height: auto;
	line-height: 1.4em;
	padding: 0.5em 1%;
}

.flowDetail  .btnList:last-of-type::after{
	content:"";
	display: block;
	width: 45%;
  	height: 0;
  }

/* =======================================
	faq
========================================== */
.listBox .questionArea{
	padding: 10px;
}
.listBox .answerArea{
	padding: 20px 10px 45px;
}
.listBox .txtTi,
.listBox .txtBox{
	width: calc(100% - 50px);
}
.listBox .txtBox p:not(.btnWrap){
	margin-bottom: 15px !important;
}
.listBox .txtBox ul li:not(:last-child){
	margin-bottom: 10px !important;
}
.listBox .ic{
	width: 40px;
	height: 40px;
	border-radius: 20px;
	font-size: 1.8rem;
	margin-right: 10px;
}

/* =======================================
	esg
========================================== */
#esgLead dl{
	border-radius: 110px;
	margin: 0 2%;
	padding: 20px 0;
	width: 220px;
	height: 220px;
}
#esgLead dl dt{
	font-size: 7rem;
	line-height: 1.3;
}
#esgLead dl dd{
	font-size: 2rem;
	line-height: 1.5;
}
#esgLead dl dd span{
	font-size: 1.6rem;
}
#esgLead p{
	text-align: center;
}
#esgList .titleArea h4{
	font-size: 3rem;
	width: 70%;
}
#esgList .titleArea .bgCircle{
	border-radius: 60px;
	font-size: 5rem;
	padding: 25px 20px;
	width: 120px;
	height: 120px;
}
#esgList .titleArea .bgCircle span{
	font-size: 1.3rem;
}
#esgList .titleArea figure img{
	width: 80px;
}
#esgList .esgBox{
	margin-bottom: 30px;
	padding: 30px;
}
#esgList .esgBox .img{
	width: 35%;
}
#esgList .esgBox .txts{
	margin-left: 3.75%;
	width: 65%;
}
#esgList .esgBox.flexRowReverse .txts{
	margin-left: 0;
	margin-right: 3.75%;
}
#esgList .esgBox .txts h5{
	font-size: 1.8rem;
	margin-bottom: 15px;
}

/* =======================================
	estimate
========================================== */
#estimateLead{
	padding-bottom: 50px;
}
#estimate .anchorLink{
	margin: 50px 0 0;
	align-items: stretch;
}
#estimate .anchorLink li{
	margin: 0 1%;
	width: 31%;
}
#estimate .anchorLink .deco{
	display: inline-block;
	position: relative;
}
#estimate .anchorLink .deco::before,
#estimate .anchorLink .deco::after{
	position: absolute;
	top: 2px;
	content: "";
	display: block;
	width: 18px;
	height: 18px;
}
#estimate .anchorLink .deco::before{
	border-left: 1px solid var(--wh);
	transform: rotate(-30deg);
	left: -10px;
}
#estimate .anchorLink .deco::after{
	border-right: 1px solid var(--wh);
	transform: rotate(30deg);
	right: -10px;
}
#estimate .anchorLink .btn{
	margin: 0;
	width: 100%;
	height: 100%;
}
#estimate .anchorLink li:nth-child(1) .btn{
	display: block;
}

/*#estimateLine*/
#estimateLine dl{
	border-radius: 17px;
	margin-bottom: 60px;
	padding: 2.5%;
}
#estimateLine dl:not(:last-of-type)::after{
	width: 60px;
	height: 35px;
	bottom: -44px;
	left: calc(50% - 30px);
}
#estimateLine dl dt{
	font-size: 2rem;
	margin-top: -50px;
	padding: 40px 20px;
	width: 18%;
}
#estimateLine dl dt h4{
	font-size: min(1.8vw,2rem);
}
#estimateLine dl dt .fontL{
	font-size: 5rem;
}
#estimateLine dl dd{
	padding-left: 2.5%;
	width: 82%;
}
#estimateLine dl dd ul.pcFlex{
	gap: 0 40px
}
#estimateLine dl#estimateLineStep01 dd ul.pcFlex li{
	width: min((calc(100% - 20px)/2),350px);
}
#estimateLine dl#estimateLineStep01 dd ul li.step01QR::after{
  top: calc(50% - 20px);
  left: 100%;
  border-color: transparent transparent transparent #000;
  border-width: 14px 14px 14px 20px;  
}
#estimateLine dl dd .img{
	max-width: 350px;
}
#estimateLine dl dd .txts{
	padding-left: 30px;
	width: calc(100% - 350px);
}
#estimateLine dl dd .txts li{
	margin-bottom: 10px;
	margin-left: 1em;
	text-indent: -1em;
}

/*##estimateFlow*/
#estimateFlow div.pcFlex{
	margin: 0 0 80px;
}
#estimateFlow div.pcFlex.flexRowReverse .img{
	margin-left: -4%;
	margin-right: 0;
}
#estimateFlow div.pcFlex .img{
	margin-right: -4%;
  width: 50%;
}
#estimateFlow div.pcFlex .img figcaption{
	font-size: 2rem;
	width: 200px;
	height: 200px;
	border-radius: 100px;
}
#estimateFlow div.pcFlex .txts{
	margin-top: 50px;
  padding: 2.5%;
  width: 50%;
}
#estimateFlow div.pcFlex .txts .badge{
	font-size: 6rem;
  width: 9vw;
  height: 9vw;
  max-width: 123px;
  max-height: 123px;
  left: -30px;
  top: -30px;
}
#estimateFlow div.pcFlex .txts .catch{
  margin-left: 8%;
  margin-bottom: 0.5em;
	width: 92%;
}
#estimateFlow div.pcFlex .txts .catch span{
	font-size: 2.7rem;
  padding: 0 0.6em;
}


/*#estimateStep*/
#estimateStep dl{
	margin-bottom: 40px;
}
#estimateStep dl:not(:last-of-type)::after{
	width: 30px;
	height: 20px;
	bottom: -20px;
	left: calc(50% - 15px);
}
#estimateStep dl dt{
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
	font-size: 2.4rem;
	font-weight: 500;
	padding: 30px;
	width: 15%;
	display: flex;
  flex-wrap: wrap;
  align-items: center;
	align-content: center;
  justify-content: center;
}
#estimateStep dl dt .fontL{
	display: block;
	font-size: 5rem;
}
#estimateStep dl dd{
	padding: 30px;
	width: 85%;
}
#estimateStep dl dd .leadTxt{
	margin-bottom: 10px !important;
	text-align: left;
}

/*#estimatePoints*/
#estimatePoints .pcFlex{
 flex-flow: row wrap;
 justify-content: space-between;
 gap:50px 0;
}
#estimatePoints .pcFlex > li{
 width: 47%;
 display: flex;
 flex-direction: column;
}
#estimatePoints .point{
	flex-grow: 1;
	align-items: center
}
#estimatePoints .point::before{	
    height: calc(100% + 10px);
}

#estimateBasic .pcFlex{
 justify-content: space-between;
}
#estimateBasic .pcFlex figure{
 width: 28%;
}
#estimateBasic .pcFlex .txts{
 width: 70%;
}

/* =======================================
	case
========================================== */
/*		一覧
-----------------------------*/
.pcFlex.flexReverse{    
	flex-direction:row-reverse;
}
.flexReverse .sideColumn {
  width: 220px;
  padding: 20px 20px 70px 20px;
}
#caseList .pcFlex {
  /*flex-direction: row-reverse; */
  justify-content: space-between;
}
#caseList .sideColumn {
	width: 220px;
	padding: 20px 20px 70px 20px;
}
.sideColumn li{
  border-bottom: 1px dotted var(--bk);
  padding: 10px 10px 10px 0;
  font-size: 1.4rem;
  font-weight: 700;
}
.sideColumn li:last-child{
	border-bottom: none;
}
.sideColumn li a::after{
	width: 16px;
  height: 16px;
  top: calc(50% - 8px);
}

/*--- contentsMain ---*/
.contentsMain {
	width: calc(100% - 220px);
	padding-right: 4%;
}
#caseList div:not(.flexReverse) .contentsMain {
	padding-right: 0;
	padding-left: 4%;
}

@media screen and (max-width: 1000px) {
	body:not(#top) .entryList {
		justify-content: flex-start;
	}
}/* //end for PC2 */

/*	投稿
-----------------------------*/
.caseDetailBox .term .category{
	font-size: 1.5rem;
}
.caseMainimgList.flex li{
	width: calc((100% - 5%)/2);
}
.caseImgList li{
  width: calc((100% - 6%)/3);
}
.caseStaffList.flex{
  gap: 1em 5%;
}
.caseStaffList li figure{
  width: 180px;
  height: 180px;
}

#case .pager .pagerPrev a{
	padding-left: 30px;
}
#case .pager .pagerNext a{
	padding-right: 30px;
}
#case .pager .pagerPrev a::before{
	left: 7px;
}
#case .pager .pagerNext a::after{
	right: 7px;
}

/* =======================================
	news
========================================== */
/*		一覧
-----------------------------*/
#newsList.pcFlex,
#newsArticle.pcFlex {
	flex-direction: row-reverse;
}
#newsList .list,
#newsArticle .articleBox{
  width: 80%;
  justify-content: flex-start;
}
#newsList .list ul.flex{
    flex-wrap: wrap;
    gap: 30px 4%;
}
#newsList .list li{
  width: 30%;
  /*margin-right: 2%;*/
}
.articleBox{
	padding-bottom: 40px;
}
.articleBox + .articleBox{
  margin-top: 40px;
}
.articleBox dd{
  display: flex;
}
.articleBox dd span{
	display: block;
}
.articleBox figure{
	margin-left: 5%;
  width: max(400px, 30%);
}

/*		single
-----------------------------*/
.newsEntry h3{
  border-bottom: 2px solid var(--base);
}
.newsEntryBox.pcFlex figure{
  width: 25%;
  margin-right: 3%;
}

.newsArticleHead .title{
	font-size: 2.2rem;
}
.newsArticleHead .icCategory{
  font-size: 1.3rem;
}
.newsArticleBox figure img{
	width: 80%;
}

.newsArticleBox .staffBox{
	box-shadow: 9px 9px 0px 1px #FF9A1F;
}
.newsArticleBox .staffBox h3{
	font-size: 1.8rem;
	padding: 5px 15px;
}
.newsArticleBox .staffBox .flexWrap{
	align-items: center;
}
.newsArticleBox .staffBox figure{
	margin: 0 3% 0 0 !important;
	width: 30% !important;
	max-width: 227px;
}
.newsArticleBox .staffBox figure img{
	width: 180px !important;
	height: 180px !important;
}
.newsArticleBox .staffBox p{
	width: 67% !important;
}

.newsArticleBox .btnPrev,
#caseList .btnPrev{
	padding-left: 30px;
}
.newsArticleBox .btnNext,
#caseList .btnNext{
	padding-right: 30px;
}
.newsArticleBox .btnPrev::before,
#caseList .btnPrev::before {
	left: 30px;
}
.newsArticleBox .btnNext::after,
#caseList .btnNext::after{
	right: 30px;
}
.newsArticleBox .pager li,
#caseList .pager li{
	width: 200px;
}

/* =======================================
	contact
========================================== */
#contactInfo .contactTel{
	border-radius: 30px;
	margin-top: 50px;
  padding: 40px;
}
#contactInfo .contactTel p{
	font-size: 5rem;
	padding-left: 55px;
}
#contactInfo .contactTel p::before{
	width: 45px;
	height: 45px;
	top: calc(50% - 27px);
}
#contactInfo .contactTel .time{
	font-size: 1.6rem;
}
#mailformpro .radiobtn{
	width: 1.2em;
}

/* =======================================
	form
========================================== */
.tb_cont th{
	border-bottom: 1px solid var(--wh);
	padding: 15px 2.5%;
	width: 23%;
}
.tb_cont td{
	border-bottom: 1px solid var(--base);
	padding: 15px 2.5%;
	width: 77%;
}
.tb_cont td input[type="text"]{
	padding: 8px;
	width: 80%;
}
.tb_cont td textarea{
	padding: 8px;
	width: 80%;
	height: 100px;
}
.tb_cont .hissu{
	padding: 3px 3%;
}
.tb_cont .zip{
	margin-right: 10px;
	width: 20%;
}
.tb_cont .zipBtn{
	font-size: 1.4rem;
	padding: 10px 14px;
}
.tb_cont .w50{
	width: 58%;
}
.tb_cont .fileBtn li{
	width: 33%;
}
.confirm {
  margin-top: 40px;
}

/* =======================================
	privacypolicy
========================================== */
#privacyMain > div{
	padding: 40px 4%;
}
#privacyMain h4{
	margin-top: 30px;
}
#privacyMain p:not(:last-child){
	margin-bottom: 10px !important;
}