@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
}
html {
	font-size: 62.5%;

	scroll-padding-top: 270px;
scroll-behavior: smooth
}
body{  
  font-size: 1.6rem;
}
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;}
.pcFlex.half{
 justify-content: space-between;
}
.pcFlex.half >*{
 width: 47.6%;
}
.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;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 1.6rem;
}

section{
  padding: 100px 0;
}
main section:first-of-type{
  padding: 50px 0 100px;
}


/*
　テキスト
========================================== */
.note,
ul.note li{
  font-size: 1.2rem;
}

.enTit{
  font-size: min(6.7vw, 9.6rem);
}
.enTit span.fontS{
  font-size: min(1.8vw, 1.8rem);
}

/*
　ボタン,リンク
========================================== */
/*-- btn --*/
.btn{
	font-size: 2.1rem;
}
.basicTable a.btn{
	font-size: 1.6rem;
}

/*hover animation*/

.footerNavi li a span{
	position: relative;
}


.footerNavi li a span::after{
	content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
	width: 0;
    height: 1px;
    transition: width 0.7s;
    background-color: var(--gray);
}

.footerNavi li a:hover span::after{
	width: 100%;
}


/*-- table --*/
.basicTable >dt{
	padding: 15px 2.5%;
	width: 30%;
}
.basicTable >dd{
	padding: 15px 2.5%;
	width: 70%;
}
.basicTable.dtWide dt{
	width: 80%;
}
.basicTable.dtWide dd{
	width: 20%;
}
.basicTable >dt:last-of-type{
	border-bottom: 1px solid var(--gray);
}

table.basicTable thead th{
	font-size: 1.8rem;
}

/*タイトル
========================================== */
.pgs .h3Tit{
	font-size: min(2.4vw, 2.8rem);
  margin-bottom: 40px;
}
.pgs .h4Tit{
	font-size: min(1.8vw, 2.2rem);
}
.pgs .h5Tit{
	font-size: 2rem;
}
.pgs .h6Tit{
	font-size: 1.8rem;
}

/*
　ボックス、リスト
========================================== */

.txtImgBox.pcFlex.half > *,
.txtImgBox.flex.half > *,
.txtImgBox.flexWrap.half > *,
.txtImgBox.pcFlex > .txts,
.txtImgBox.flex > .txts,
.txtImgBox.flexWrap > .txts{
	flex: 1;
}


.flowList li .txts{
  margin: 0 -10px;
}

/* =======================================
  ページャー
========================================== */
/*-- pageNavi --*/
.pageNavi{
	gap:0 1.5%;
 margin-top: 80px;
}
.pageNavi .current,
.pageNavi .inactive,
.pageNavi a{
	font-size: 1.8rem;
	width: 40px;
	height: 40px;
}
/*-- pager --*/
.pager{
	margin-top: 50px;
}
.pager a{
font-size: 1.6rem;
}
.pager a:hover{
	opacity: 0.7;
}

/* =======================================
	header
========================================== */
header{
	border-bottom: 1px solid var(--Lgray);
}
#headerInner.pcFlex{
	align-items: center;
	justify-content: space-between;
	gap: 0 1%;
	margin-top: 40px;
	padding: 19px 0 15px;
}

/*.headerContact*/
.headerContact{
  position: absolute;
  top: -40px;
  right: 0;
  left: 0;
  width: 100%;
}
header.fixed .headerContact{
	top: 0;
}
.headerContact
.headerContactInner{
  justify-content: flex-end;
  gap: 0 14px;
	max-width: 1200px !important;
	width: 96%;
	margin: 0 auto;
}
.headerContact .tel{
	display: flex;
	align-items: center;
	font-size: 2.4rem;
	font-weight: 400;
}
.headerContact .tel a{
}
.headerContact .tel .time{
	margin-left: 8px;
	font-size: 1.3rem;
}


/* =======================================
	gnavi
========================================== */
.gnavi{
 flex: 1;
}

#gnaviList.pcFlex{
	justify-content: flex-end;
	gap: 0 min(2.5vw,30px);
}
#gnaviList li{
}
#gnaviList > li{
 position: relative;
}
#gnaviList > li:not(.tel) >a{
	display: block;
	font-size: min(1.3vw,1.6rem);
	line-height: 1;
	font-weight: 700;
	white-space: nowrap;
}
@media screen and (max-width: 768px) {
}/* //end for SP */
@media screen and (min-width: 1200px) {

}/* //end for PC */
@media screen and (min-width: 1300px) {

}/* //end for PC */

#gnaviList li.current a,
#gnaviList li a:hover{
 opacity: .7;
}

#gnaviList .hasSub > a{
 position: relative;
}

.gnavi .hasSub:hover .sub{
	display: block;
	visibility: visible;
}


#gnaviList .sub{
	display: none;
	visibility: hidden;
	position: absolute;
 top: calc(100% + 1px);
 left: 50%;
 transform: translate(-50%, 0);
	z-index: 2;
	transition: all 0.6s ease-in-out;
 background: rgba(255,255,255,.8);
 min-width:100px;
	padding-top: 15px
}
#gnaviList .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
#gnaviList .sub li{
	font-size: min(1.2vw,1.4rem);
}
#gnaviList .sub li + li{
 border-top: 1px #ccc solid;
}
#gnaviList .sub li a{
	display: block;
 background: var(--yellow);
	padding: 10px;
 color: var(--base);
 font-weight: 600;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}


/* =======================================
	footer/#footContact
========================================== */
#footContactBtns.pcFlex{
	position: relative;
	justify-content: center;
	gap: 0 min(13vw,156px);
}
#footContactBtns.pcFlex::before{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	content: "";
	display: inline-block;
	background-color: #C9C9C9;
	width: 1px;
	height: 100%;
}
.footAreaWrap{
	gap: 0 2.833%;
}
.footAreaLeft {
  width: min(70.37%, 760px);
}
.footAreaRight {
  flex: 1;
}
.footAreaWrap figure{
  margin-right: max(-3.75vw, -4.5rem);
}


/* =======================================
	footer/#footBottom
========================================== */
footer a:hover{
  opacity: 0.7;
}
#footBottom .inner1200.pcFlex{
  justify-content: space-between;
  gap: 0 30px;
}

#footBottom{
	gap: 0 30px;
}

.footerBottomLeft{
	padding-right: 2.3%;
}
.footerBottomRight{
	flex: 1;
}
.footerBottomRight > .pcFlex{
  display: flex;
  justify-content: end;
  /*gap: 0 8.8%;*/
 line-height: 1.4;
}

.footerNavi:nth-of-type(1){
   width: min(33vw, 400px);
}
.footerNavi:nth-of-type(2){
   width: min(16.8vw, 234px);
}
.footerNavi:nth-of-type(3){
   width: 8em;
}
@media screen and (min-width: 1100px) {
}/* //end for PC */
.footerNavi li a{
  font-size: 1.5rem;
  line-height: normal;
  font-weight: 400;
  color: var(--wh);
}
.footerNavi li a{
	display: block;
	margin-bottom: 1em;
}
.footerPrImg a:hover{
  opacity: 0.7;
}




/* =======================================
	pgs common
========================================== */
/*タイトル
========================================== */
/*-- mainTitle --*/
.mainTitle{
		height: 200px;
	}
	.mainTitle h2{
		font-size: min(2.25vw, 4rem);
	}

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

/*		anchorLink
-----------------------------*/
.anchorLink{
	padding: 50px 0;
	gap:0 1.8%;
	justify-content: center;
}
.anchorLink ul{
	padding: 35px 0;
	gap:15px 20px;
}
.pageLinks{
	gap:15px 30px;
	padding: 35px 0 ;
}
.pageLinks ul{
	gap:15px 20px;
}
/*hover action*/
.pageLinks li a::before,
.pageLinks li a::after {
  background-color: var(--wh);
}
.pageLinks li a span::before,
.pageLinks li a span::after {
  content: "";
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: center;
  transform-origin: center;
  box-sizing: inherit;
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform: scale3d(1, 1, 1);
}
.pageLinks li a::before,
.pageLinks li a::after {
  background-color: var(--wh);
  transform: scale3d(0, 1, 1);
}
.pageLinks li a span::before {
  border: solid var(--Lgray);
  border-width: 1px 0 1px 0;
}
.pageLinks li a span::after {
  border: solid var(--Lgray);
  border-width: 0 1px 0 1px;
}
.pageLinks li a:hover::before,
.pageLinks li a:hover::after {
  transform: scale3d(1, 1, 1);
}
.pageLinks li a span:hover::before {
  transform: scale3d(0, 1, 1);
}
.pageLinks li a span:hover::after {
  transform: scale3d(1, 0, 1);
}


.anchorLink li,
.pageLinks li{
	flex: 1;
	height: 50px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 10px;
}
.anchorLink + section{
	padding-top: 65px;
}

main .pageLinks:last-of-type li{
 height: 70px;
}


/* =======================================
	top PC
========================================== */
@media screen and (min-width: 1400px) {
	#mv{
	height: calc(100vh - 185px)
}
#mvSlider{
	height: calc(100vh - 185px);
	overflow-y: hidden
}
}/* //end for SP */



.mvMenu {
	transform: translateY(50px)
}

/*		#topClient
-----------------------------*/
.topClientBoxWrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
}
#topClientHotel.topClientBox {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
	padding: 49px 20px 20px 60px;
}
#topClientShop.topClientBox {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
#topClientOffice.topClientBox {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
#topClientHospital.topClientBox {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
#topClientHotel.topClientBox h3 {
  margin-bottom: 2em;
}

/*		#topSurvey PC
-----------------------------*/
.secTiWithLink{
	padding-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#top .secTiWithLink .h2Tit{
	margin-bottom: 0;
}

/*		#topCase PC
-----------------------------*/
#topCase .secTiWithLink .linkWrap{
	margin-top: 30px;
}

/*		#topService
-----------------------------*/

/*		#topCompany PC
-----------------------------*/
#topCompany .pcFlex{
	justify-content: space-between;
	align-items: flex-end;
	gap: 5%;
}
#topCompany .secLeft{
	width: 398px;
	padding-bottom: 40px;
}
#topCompany .secRight{
	width: 469px;
}

/*		#topNews PC
-----------------------------*/
.topNewsList li{
	width: calc(100%/4);
	display: flex;
}
.topNewsList li a{
	display: flex;
	flex-direction: column;
}
.topNewsList li .topNewsTxt{
	flex-grow: 1
}

/* =======================================
   #company PC
========================================== */
#company #companyMessage figure{
		margin: 40px auto 0;
		width: min(70%, 700px);
	}
	#company #companyMessage figcaption{
		margin-top: 15px;
	}
	#company #companyMessage figcaption span{
		font-size: 2.4rem;
	}
	
	#companyProfile .basicTable a.btn{
		width: 11.5em;
	}

/* =======================================
   #esg PC
========================================== */
#esgLead div.pcFlex{
	gap: 0 40px;
	margin-top: 40px;
	margin-bottom: 60px;
	padding: 41px 5% 55px;
}
#esgLead div.pcFlex dl{
	width: calc((100% - 40px) / 2);
}
#esgLead div.pcFlex dl dt{
	font-size: 2.2rem;
}
#esgLead div.pcFlex dl dd figure img{
	margin: 30px auto;
}
#esgLead .h4Tit{
	margin-bottom: 40px;
}
#esgLead .imgEsg{
	margin: 0 auto;
	width: min(80%,800px);
}

.esgBox h3{
	font-size: min(3vw, 2.8rem);
}
.esgBox h3 .en{
	font-size: min(1.565vw, 2rem);
}
#esgEnvironment,
#esgSocial,
#esgGovernance{
	padding-top: 50px;
	padding-bottom: 0;
}
.esgBox{
	padding: 50px 3%;
}


/* =======================================
   #reason PC
========================================== */
#reasonLead .pcFlex:not(.reasonList){
	align-items: flex-start;
}
#reasonLead .txts{
	border-left: 1px solid var(--gold);
	border-bottom: 1px solid var(--gold);
	background: rgba(255,255,255,.8);
	margin-top: 80px;
	padding: 30px 5%;
	position: relative;
	z-index: 5;
	width: 70%;
}
#reasonLead .h3Tit span{
	font-size: 1.8rem;
	margin-bottom: 10px;
}
#reasonLead figure{
	margin-left: -30%;
	width: 60%;
}
#reasonLead .leadTxt{
	font-size: 1.6rem;
}
.reasonList{
	justify-content: center;
	gap: 0 40px;
	margin-top: 50px;
}
.reasonList p{
	font-size: 2.4rem;
	width: calc((100% - 120px) / 4);
}
.reasonList .txtLine{
	font-size: 2rem;
}
.reasonList p .txtL{
	font-size: 5rem;
}
.reasonList .rsBtn a{
	font-size: 2rem;
	width: 180px;
	height: 180px;
}
.reasonList .rsBtn a::after{
	bottom: 40px;
}

#reason .reasonBox h3{
	align-items: center;
	font-size: 3rem;
	margin-bottom: 20px;
}
#reason .reasonBox h3 .num{
	width: 2em;
	height: 2em;
}
#reason .reasonBox .h4Tit{
	font-size: 2.4rem;
}
#reason .reasonBox .box01 .h6Tit,
#reason01 .inner1000 > div:nth-of-type(2) .txts .h6Tit{
	font-size: 2.2rem;
}
#reason .reasonBox .bgW{
	padding: 30px;
}
#reason .reasonBox .box02 .txts{
	width: 62%;
}
#reason .reasonBox .box02 figure{
	width: min(35%, 156px);
}
#reason01 .inner1000 > div:nth-of-type(2),
#reason .technologyUpdate{
	margin-top: 50px;
}
#reason01 .inner1000 > div:nth-of-type(2) div.bgW{
	height: 475px;
}
#reason01 div.pcFlex.half ul{
	gap: 0 10%;
	margin-top: 10px;
}
#reason01 div.pcFlex.half ul li{
	width: 45%;
}

#reason .technologyUpdate{
	padding: 30px;
}
#reason .technologyUpdate ul{
	gap: 3% !important;
}
#reason .technologyUpdate ul li{
	width: 140px !important;
	height: 140px;
}

#reason02 dl{
	margin-top: 40px;
}
#reason02 dl dt{
	padding-left: 160px;
}
#reason02 dl dt span{
	font-size: 2.4rem;
}
#reason02 dl dt span::before,
#reason02 dl dt span::after{
	height: 50px;
}
#reason02 dl dt span::before{
	transform: rotate(-45deg);
	left: -0.5em;
}
#reason02 dl dt span::after{
	transform: rotate(45deg);
	right: -0.5em;
}
#reason02 dl dd {
	margin-top: -45px;
}
#reason02 dl dd figure{
	margin-right: 30px;
}
#reason02 dl dd figure img{
	height: 200px;
}
#reason02 dl dd ul{
	gap: 50px;
}
#reason02 dl dd ul li{
	font-size: 2.2rem;
	padding: 0.5em 1em;
	width: min(12.85vw,230px);
	height: 150px;
}
#reason02 dl dd ul li:not(:last-child)::after{
	width: 14px;
	height: 14px;
	top: calc(50% - 7px);
	right: -34px;
}

#reason03 ul{
	gap:0 3%;
	margin-top: 40px;
}
#reason03 ul li{
	padding: 10px 1% 10px;
	width: calc(94% / 3);
}
#reason03 ul li p{
	font-size: 2rem;
}

#reason04 dl{
	align-content: stretch;
	margin-top: 40px;
}
#reason04 dl dt{
	display: grid;
	align-items: center;
	font-size: 2.2rem;
	margin-right: 40px;
	padding: 20px;
	width: 30%;
}
#reason04 dl dt::after{
	width: 35px;
	height: 100%;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	right: -35px;
	top: 0;
}
#reason04 dl dd{
	width: 60%;
}
#reason04 dl dd ul li{
	width: 40%;
}
#reason04 dl dd ul li:nth-child(2){
	width: 20%;
}
#reason04 dl dd ul li:nth-child(2)::after{
	width: 20px;
	height: 20px;
	right: -20px;
	bottom: -19px;
}
#reason04 dl dd ul li figure img{
	height: 100px;
	object-fit: cover;
}

#sampleConstruction h3 .baloon{
	font-size: min(1.565vw, 2.8rem);
}
#sampleConstruction p{
	font-size: 1.8rem;
	text-align: center;
}
#sampleConstruction ul{
	align-items: center;
	gap: 0 60px;
	margin-top: 30px;
}
#sampleConstruction ul li{
	font-size: min(1.12vw, 2rem);
	width: 160px;
	height: 160px;
}
#sampleConstruction ul li:not(:first-child)::before{
	border-bottom: 2px dotted var(--gold);
	width: 50px;
	height: 2px;
	left: -60px;
	top: calc(50% - 2px);
}
#sampleConstruction ul li:not(:first-child)::after{
	width: 12px;
	height: 14px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
	top: calc(50% - 6px);
	left: -18px;
}
#sampleConstruction ul li:nth-child(2){
	padding: 30px 20px 55px;
	width: 310px;
	height: 310px;
}
#sampleConstruction ul li p{
	font-size: min(1.12vw, 2rem);
}

/* =======================================
   #service PC
========================================== */
.serviceBoxWrap{
	gap: 0 2%;
}
.serviceBoxWrap:has(> h4){
	flex-wrap: wrap;
}
.serviceBoxWrap > h4{
	width: 100%;
}
#service .serviceBox{
	width: calc((100% - 2%*2)/3);
}

#compatible h3.arrowBalloon,
#serviceSupport h3.arrowBalloon{
	font-size: min(1.94vw, 2.8rem);
}
h3.arrowBalloon{
  padding: 10px 0 20px;
}
h3.arrowBalloon::before{
	top: calc(100% - 5px);
    left: calc(50% - 7px);
	width: 40px;
  height: 40px;
}

#compatible .leadTxt{
	margin-bottom: 30px;
}
#compatible div.pcFlex{
	flex-wrap: wrap;
	gap: 30px 3%;
}
#compatible div.pcFlex dl{
	width: calc(97% / 2);
}
#compatible div.pcFlex dl dt{
	font-size: min(1.525vw, 2.2rem);
	padding: 10px 5%;
}
#compatible div.pcFlex dl dt figure{
	margin-left: 10px;
	width: 43px;
	height: 42px;
}
#compatible div.pcFlex dl:nth-of-type(1) dt figure{
	width: 50px;
	height: 34px;
}
#compatible div.pcFlex dl dd{
	padding: 10px 5% 0;
}
#serviceSupport ul{
	gap: 20px;
}
#serviceSupport ul li{
	width: calc((100% - 80px) / 5);
}

.linkFaq > div{
	padding: 30px 3%;
}
.linkFaq .h3Tit{
	font-size: min(1.94vw, 2.8rem);
	margin-bottom: 25px;
}
.linkFaq p{
	font-size: min(1.25vw, 1.8rem);
}
.linkFaq a:hover{
	opacity: .7
}
.linkFaq a::after{
	width: 60px;
	height: 60px;
	top: 50%;
	right: 0;
}

/* =======================================
   #service /carpet/chair/tile
========================================== */
/* #serviceDetailLead .leadImg{
	height: 380px;
} */
#serviceDetailLead .leadImg p img{
	/* height: 100%; */
	width : max(100%,755px);
}
#serviceDetailLead .leadImg p span{
	font-size: 1.8rem;
	padding: 1px 10px;
}
#serviceDetailLead .leadImg p:nth-of-type(1){
	width: 27%;
}
#serviceDetailLead .leadImg p:nth-of-type(2){
	margin-left: -4%;
	width: calc(77% + 4%);
}
#serviceDetailLead .leadTxt{
	padding: 10px 30px 15px;
}
#serviceDetailLead .leadTxt span{
	font-size: 2.8rem;
}

#serviceDetail .responseStatus li span:nth-child(1){
	padding: 1px 3px;
}
#serviceDetail .responseStatus li span:nth-child(2){
	font-size: min(1.4vw,2.8rem);
}

#serviceDetail .box03{
	justify-content: space-between;
	align-items: center;
	padding: 20px 2% 20px 4%;
}
#serviceDetail .box03 .txts{
	width: 70%;
}
#serviceDetail .box03 figure{
	width: 25%;
}
#serviceDetail .box03 .h5Tit{
	margin-bottom: 0;
}
#serviceDetail .pointBox .h5Tit{
	padding: 20px;
	width: 30%;
}
#serviceDetail .pointBox p{
	padding: 20px;
	width: 68%;
}

#serviceSupport ul.flexWrap{
	justify-content: center;
}

#serviceEstimate .h3Tit + p{
	text-align: center;
}
#serviceEstimate .h4Tit{
	margin-top: 40px;
}
#serviceEstimate .estimatedPrice dt{
	padding: 15px 1.5%;
	width: 20%;
}
#serviceEstimate .estimatedPrice dd{
	padding: 15px 1.5% 5px 3%;
	width: 80%;
}
#serviceEstimate .referencePrice > div.pcFlex{
	align-items: center;
	margin-top: 40px;
	padding: 20px;
}
#serviceEstimate .referencePrice .h4Tit{
	margin-bottom: 0;
	margin-right: 30px;
}
#serviceEstimate .referencePrice dt{
	font-size: 2.2rem;
	width: 100px;
	height: 100px;
}
#serviceEstimate .estimatedPrice dd sup,
#serviceEstimate .referencePrice dt sup,
#faqList dt sup, #faqList dd sup{
	font-size: 50%;
}
#serviceEstimate .referencePrice dd{
	padding-left: 20px;
}
#serviceEstimate .referencePrice dd .price{
	font-size: 3.2rem;
}

#serviceClient div.pcFlex{
  gap: 16px;
justify-content: center;
}
#serviceClient div.pcFlex dl{
	width: calc((100% - 16px) / 2);
  padding: 40px;
}
#serviceClient div.pcFlex dl dt{
	font-size: min(1.525vw, 2.2rem);
	padding: 10px 5%;
}
#serviceClient div.pcFlex dl dt figure{
	margin-left: 10px;
	width: 43px;
	height: 42px;
}
#serviceClient div.pcFlex dl dd{
	padding: 10px 5% 0;
}

#serviceStainsTypes dl:nth-of-type(1){
	width: 33%;
}
#serviceStainsTypes dl:nth-of-type(2){
	width: 64%;
}
#serviceStainsTypes dl dt{
	padding: 10px 20px;
}
#serviceStainsTypes dl dd{
	padding: 20px;
}
#serviceStainsTypes dl dd ul li{
	padding: 5px 10px;
}
#serviceStainsTypes dl dd ul li + li{
	margin-top: 15px;
}
#serviceStainsTypes dl dd ul.flexWrap{
	flex-wrap: wrap;
	gap: 15px;
}
#serviceStainsTypes dl dd ul.flexWrap li{
	width: calc((100% - 15px) / 2);
}
#serviceStainsTypes ul.flex{
	gap: 30px;
	margin-top: 20px;
}
#serviceStainsTypes .note{
	text-align: center;
}

/* =======================================
   #service/chair PC
========================================== */
#chair #serviceDetail .box01 .designSample{
	margin: 30px auto 0;
	width: 90%;
}
#chair #serviceDetail .box01 .designSample ul{
	gap: 0 50px;
	width: 90%;
}
#chair #serviceClient div.pcFlex dl{
	width: calc((100% - 32px) / 3);
  padding: 40px 2%;
}
#chair #serviceClient div.pcFlex dl:nth-of-type(1) dd{
	padding-left: 0;
	padding-right: 0;
}

/* =======================================
   #service/tile PC
========================================== */
#tile #serviceDetail .pcFlex.box03 .txts{
	width: 60%;
}
#tile #serviceDetail .pcFlex.box03 .img{
	width: 35%;
}
#tile #serviceDetail .pcFlex.box03 figcaption{
	font-size: 1.4rem;
}
#tile #serviceDetail .pcFlex.box04{
	gap: 0 10%;
}
#tile #serviceDetail .pcFlex.box04 > div:nth-of-type(1){
	width: 60%;	
}
#tile #serviceDetail .pcFlex.box04 > div:nth-of-type(2){
	width: 30%;
}
#tile #serviceEstimate .referencePrice + .h4Tit{
	margin-top: 80px;
}

/* =======================================
   #case PC
========================================== */
#case main{
	overflow: visible;
}
#caseWrap.pcFlex{
	flex-direction: row-reverse;
	gap: 0 2%;

  align-items: flex-start;
}
#caseWrap .sideColumn{
	width: 20%;
	padding-top: 50px;
	position: sticky;
	top: 100px;
}
#caseWrap .contentsMain{
	flex: 1;
	padding-left: 2%;
	border-left: 1px solid #E9E9E9;
	max-width: 80%;
}

#caseList .caseBoxWrap.flex{
	flex-wrap: wrap;
	gap: 20px;
}
#caseList .caseBoxWrap .caseBox{
	width: calc((100% - 40px)/3);
	display: flex;
}

#caseList .caseBoxWrap .caseBox a{
	display: flex;
	flex-direction: column;
}
.single-case #caseMain{
	padding-bottom: 50px !important
}

.single-case .beforeafterArea ul{
	display: flex;
	gap:40px;
}
.single-case .beforeafterArea ul li{
	position: relative
}
.single-case .beforeafterArea ul li figure{
	width: 32vw;
	height: 32vw;
	overflow: hidden
}
.single-case .beforeafterArea ul li:first-child:after{
	display: block;
  width: 18px;
  height: 18px;
  margin: 0 10px;
  border-top: 4px solid var(--gold);
  border-right: 4px solid var(--gold);
  transform: rotate(45deg);
	content: '';
	position: absolute;
	top:calc(50% - 9px);
	right:-35px
}

#caseList .caseBox h3, #topCase .caseBox h3 {
  flex-grow: 1;
}

/* =======================================
   #client PC
========================================== */
#client main{
	overflow: visible;
}
#clientWrap.pcFlex{
  align-items: flex-start;
}
#clientList {
  flex: 1;
  padding-left: 2%;
  border-left: 1px solid #E9E9E9;
}
#clientWrap .sideColumn{
	width: 20%;
	padding-top: 50px;
	position: sticky;
	top: 100px;
}
#clientList .flex{
	margin-bottom: 50px
}
#clientList .flex li{
    white-space: nowrap;
    font-size: min(1.48vw, 1.6rem);
}
#clientList .flex li.txtKerning{
	letter-spacing: -0.1em;
}

#clientList h3 img{
	max-width: 40px
}


/* =======================================
   #faq PC
========================================== */
#faq main{
	overflow: visible;
}
#faqWrap.pcFlex{
  align-items: flex-start;
}
#faqWrap .sideColumn{
	position: sticky;
	top: 100px;
}
#faqList {
	flex: 1;
	padding-left: 2%;
	border-left: 1px solid #E9E9E9;
}
#faqList dl {
	margin-bottom: 50px;
}


/*-- アコーディオン--*/
#faqList dl dt{
	cursor: pointer;
}
#faqList dl dt::before,
#faqList dl dt::after{
  right:20px;
}
#faqList dl dt span{
 padding: 10px 0 15px 60px;
 font-size: 1.8rem;
 min-height: 50px;
 }
 #faqList dl dd span{
 padding: 0.65em 0.65em 0.65em 60px;
 min-height: 50px;
}
 #faqList dl dt span::before,
#faqList dl dd span::before{
 font-size: 2.4rem;
  width: 30px;
 height: 30px;
 }

#faqWrap .sideColumn {
	width: 20%;
	padding-top: 50px
}


/* =======================================
	news PC
========================================== */
#news main{
	overflow: visible;
}
#newsWrap.pcFlex{
	flex-direction: row-reverse;
	gap: 0 2%;
  align-items: flex-start;
}
#newsWrap .sideColumn{
	width: 20%;
	padding-top: 50px;
	position: sticky;
	top: 100px;
}
#newsWrap .contentsMain{
	flex: 1;
	padding-left: 3%;
	border-left: 1px solid #E9E9E9
}

/*		一覧
-----------------------------*/
.newsBox{
	display: flex;
	justify-content: space-between;
	gap: 4%;
}
.newsBox a:hover{
	opacity: .7;
} 
.newsBox  .flex figure{
 width: 30%;
}
.newsBox  .flex .txts{
 width: 66%;
}

/*	詳細　single
-----------------------------*/
article{
 padding: 50px 0 100px;
}
#newsDetail h3{
	font-size: 2.4rem;
}
.newsDetailCont:has(figure){
	align-items: flex-start;
	flex-direction: row-reverse;
	gap: 4%;
}
.newsDetailCont:has(figure) figure{
	width: 40%;
	text-align: center;
}
.newsDetailCont:has(figure) figure img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.newsDetailCont:has(figure) .txts{
	flex: 1;
}


/* =======================================
   #case & #news single
========================================== */
  .singleBlock img[class*="wp-image-"],
  .singleBlock img[class*="attachment-"] {
    margin-right: 1em;
    margin-left: 1em;
  }



/* =======================================
	contact
========================================== */


/* =======================================
	form
========================================== */

#contactForm .checkboxWrap .pcFlex{
	flex-wrap: wrap;
	gap: 0 30px;
}

/* =======================================
	thanks
========================================== */

#thanks{
}

#thanks p{
  font-size: 1.8rem;
}

/* =======================================
	privacypolicy
========================================== */
#privacyPolicy{
	margin-top: 50px;
}
.policyBox{
	padding: 20px 2%;
}
.policyBox .h5Tit{
	margin-top: 40px;
}