@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 171px;
}
html {font-size: 62.5%;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;
}

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

/*
　ボタン,リンク
========================================== */

/*-- table --*/
.basicTable > dt{
	border-bottom: 1px dotted var(--pink);
	padding: 15px 2.5%;
	width: 30%;
}
.basicTable > dd{
	border-bottom: 1px dotted var(--base);
	padding: 15px 2.5%;
	width: 70%;
}
.basicTable > dt:last-of-type{
	border-bottom: none;
}

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

/* =======================================
  ページャー
========================================== */
/*-- 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{
	padding: 20px 0;
}
header .pcFlex{
	align-items: center;
	gap: 0 10px;
}

/* =======================================
	gnavi
========================================== */

.gnavi{
 align-items: center;
 flex: 1;
}

#gnaviList{
 justify-content: flex-end;
 align-items: center;
 gap: 0 min(1vw, 20px);
}
#gnaviList li{
}
#gnaviList > li{
 position: relative;
}
#gnaviList > li:not(.tel):not(.contact){
	padding: 0 min(0.4vw, 10px);
}
#gnaviList > li:not(.tel):not(.contact) >a,
#gnaviList > li > span{
 font-size: min(1.5vw,1.8rem);
 font-weight: 600;
 white-space: nowrap;
}
#gnaviList > li > span{
	cursor: pointer
}

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

#gnaviList .hasSub > a{
 position: relative;
}
/*#gnaviList .hasSub > a::after{
 content: "";
 display: inline-block;
}*/

.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;
}
#gnaviList .hasSub:hover .sub{
	display: block;
	visibility: visible;
}
#gnaviList .sub li{
	font-size: min(1.0vw,1.4rem);
}
#gnaviList .sub li + li{
 border-top: 1px #ccc solid;
}
#gnaviList .sub li a{
	display: block;
 background: var(--yellow);
	padding: 8px 20px 10px;
 color: var(--base);
 font-weight: 600;
 text-align: center;
	white-space: nowrap;
}
#gnaviList .sub li a:hover{
 opacity: .7;
}

#gnaviList li.contact .btnRound.bgArrow{
    width: min(20vw, 250px);
}

/* =======================================
	footer/#footContact
========================================== */
#footContactBtns{
	justify-content: center;
	align-items: center;
}
#footContact h2{
 margin-bottom: 56px;
}
#footContactBtns .btnTel {
	position: relative;
	padding-right: min(7.7vw, 80px);
}
#footContactBtns .btnTel::after {
  content: "";
  position: absolute;transform: translate(0, -50%);
  top: 50%;
  right: 0;
  width: 1px;
  height: 196px;
  background: rgba(255,255,255,.5);
}
#footContactBtns .btnContact {
  padding-left: min(6.6vw, 80px);
}

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

#footBottom{
	gap: 0 30px;
}

.footerRight{
	flex: 1;
}
.footerRight > .pcFlex{
  display: flex;
  justify-content: end;
  gap: 0 min(6.2vw,80px);
 line-height: 1.4;
	margin-bottom: 30px
}
.footerNavi >li a{
	line-height: 1em;
}
.footerNavi >li + li{
	margin-top: 37px;
}

.footerPrImg a:hover{
  opacity: 0.7;
}

.footerPR a{
		width: 27vw
}


/* =======================================
	pgs common
========================================== */
/*		main
-----------------------------*/
.pgs section:first-of-type::before{
	background: url(../images/top_service_bg_right.svg) no-repeat left bottom / 335px auto;
	width: 334px;
  height: 220px;
}

/*-- mainTitle --*/
.mainTitle{
	 background: url("../images/top_company_bg.svg") no-repeat left center / 50% auto,
    linear-gradient(-45deg, #AD0081 18%, #CE27A4 100%);
	height: 200px;
}
.mainTitle h2{
	font-size: min(3.3vw, 4rem);
}
.mainTitle h2 span{
	display: inline-block;
	font-size: 70%;
	margin-left: 1em;
}

.pgs .h3Tit .en::before{
  width: 10px;
  height: 22px;
}

/* パンくず
========================================== */
#breadcrumb ul li{
	font-size: 1.4rem;
}

/*		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: 20px 0 25px;
}
.pageLinks ul{
	gap:15px 20px;
}
.anchorLink li,
.pageLinks li{
	flex: 1;
	height: 50px;
}
.anchorLink a,
.pageLinks li a{
	padding: 8px 10px;
}
.pageLinks li a::before{
	width: 34px;
  height: 34px;
  right: 27px;
  top: calc(50% - 18px);
}
.pageLinks li a::after{
	width: 6px;
  height: 6px;
	right: 8%;
  top: calc(50% - 4px);
}
.anchorLink + section{
	padding-top: 65px;
}

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

.btmLinks{
 padding: 30px 0 20px;
 }
.btmLinks h3{
 font-size: 2.4rem;
}
.btmLinks h3::before{
	bottom: 0.25em;
  width: 10px;
  height: 26px;
}

/* =======================================
	top PC
========================================== */

/*		#mv
-----------------------------*/
#mvLinks li a{
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 5px;
}
#mvLinks li a:hover{
	opacity: 0.7
}

/*		#topOpinion
-----------------------------*/
.topOpinionBox .txts{
  width: 500px;
}
.topOpinionBox .imgs{
  flex: 1;
}

/*		#topService
-----------------------------*/
.topServiceBoxWrap{
	gap: 0 4px;
}
.topServiceBox{
	flex: 1;
}
.topServiceBox .txts{
	display: flex;
	flex-direction: column;
	height: 100%;
}
.topServiceBox .txts h3{
	flex-grow: 1;
}
.topServiceBox .txts h3 + p{
	flex-grow: 1;
}

/*prBox*/
.prCatch.pcFlex{
	align-items: center;
	justify-content: center;
}


/*		#topCompany
-----------------------------*/
.topCompanyBox .linkBtns li a:hover{
  opacity: 0.7;
}

/*		#topNews
-----------------------------*/
#topNews{
 padding: 120px 0;
 overflow: visible;
}
.topNewsInner.pcFlex{
  gap: 0 20px;
  align-items: start;
}
.topNewsInner .txts{
  width: max(31.2%, 250px);/*374px*/

  position: sticky;
  top: 126px;
  left: 0;
}

#topNews .newsListWrap{
	flex: 1;
 }
#topNews .newsList{
  width: 100%;
 }
#topNews .scroll{
	height: 500px;
	overflow-y: scroll;
 }

/* =======================================
    message PC
========================================== */
#messageArea figure.pcFlex{
 justify-content: flex-start;
 align-items: flex-end;
 gap:0 3%;
 margin: 80px auto 0;
  width: 96%;
}
#messageArea figure.pcFlex img{
 width:68%;
}
#messageArea figcaption{
	font-size: 1.8rem;
}

/* =======================================
   company PC
========================================== */
#philosophy .philosophyTxt{
	padding: 80px 6.67%;
}
#philosophy .philosophyTxt p{
	font-size: 2rem;
	padding: 30px 2%;
}

/* =======================================
    esg PC
========================================== */
#sustainability,
#esgSdgs{
	padding-bottom: 50px;
}
#esgSdgs .h4Tit{
	padding: 0 20px;
}
#esgSdgs .pcFlex{
 gap: 0 55px;
 align-items: center;
}
#esgSdgs ul,
#esgSdgs figure{
	padding: 20px;
 width: 50%;
 max-width: 500px;
}
#esgSdgs ul li{
 width:147px;
 height: 147px;
 font-size: 2rem;
}
#esgSdgs ul li::before{
	font-size: 7rem;
	left: 10px;
}
#esgSdgs .txts{
 width: calc(100% - 40% - 55px);
 max-width: 480px;
}

#esgWorkon ul.pcFlex{
	gap: 20px 1.5%;
}
#esgWorkon h4{
	font-size: 1.8rem;
	margin-bottom: 15px;
	padding-bottom: 5px;
}
#esgWorkon ul.pcFlex > li{
	padding: 30px;
 width: calc(100% / 3);
}
#esgWorkon ul.pcFlex > li + li{
 border-left: 1px var(--pink) solid;
}
#esgWorkon .pcFlex ul{
 height: 50%;
 display: inline-flex;
 flex-flow: column;
 justify-content: center;
}
#esgWorkon .pcFlex p{
 font-size: 2.2rem;
}

#environment{
	padding-bottom: 110px;
}
.esgTtl.pcFlex{
 border-bottom: 1px var(--pink) solid;
 align-items: flex-end;
 justify-content: space-between;
 padding: 0 0 20px;
 margin-top: 0 !important;
 margin-bottom: 50px !important;
}
.sdgsIcons{
 flex-flow: row wrap;
 max-width: 75%;
}
.sdgsIcons li{
 width: 83px;
}
.esgDetail{
	justify-content: space-between;
	gap: 60px 4%;
}
.esgDetail .esgBox{
	width: 48%;
}
.esgDetail .esgBox figure{
	height: 330px;
	overflow: hidden;
	margin-bottom: 20px;
}
.esgDetail .esgBox .h4Tit{
 font-size:2.6rem;
	margin-bottom: 10px;
}

/* =======================================
   PC opinion
========================================== */
#statement .future{
	margin-top: -50px;
}
#statement .future ul{
	position: relative;
	z-index: 5;
}
#statement .future ul::before,
#statement .future ul::after{
	content: "";
	display: block;
	width: 1154px;
	height: 65px;
	position: absolute;
	left: -25px;
}
#statement .future ul::before{
	background: url("../images/opinion_future_img02.svg") no-repeat center top / cover;
	top: 116px;
}
#statement .future ul::after{
	background: url("../images/opinion_future_img01.svg") no-repeat center top / cover;
	top: 150px;
}
#statement .future ul{
 gap:0 50px;
}
#statement .future ul li figure{
width: 330px;
height: 330px;
}

.opinionLead{
 justify-content: space-between;
 align-items: center;
}
.opinionLead .txts{
font-size: 1.8rem;
line-height: 2;
 width: 50%;
}
.opinionLead figure{
 width: 45%;
}
#opinionPeople .half .txt{
 min-height: 145px;
}
#opinionPeople .half:not(.numbers) >li + li::before{
 font-size: 110px;
 bottom: 22%;
 right: calc(100% - 30px);
}
#opinionPeople .numbers h4{
 font-size: 2rem;
}
#opinionPeople .numbers p{
 font-size: 2.8rem;
}
#opinionPeople .numbers .note{
 font-size: 2rem;
}
#opinionPeople .numbers cite{
 font-size: 1.3rem;
}

#opinionJapan .h4Tit,
#opinionSouthAsia .h4Tit{
padding: 0 20px;
}
#opinionJapan .model {
 align-items: flex-start;
 justify-content: space-between;
}
#opinionJapan .model li{
 width: 38%;
}
#opinionJapan .model li figure{
	height: 350px;
}
#opinionJapan .model li figure img{
 object-fit: contain;
	height: 100%;
	width: 100%;
}
#opinionJapan .model li:first-child figure{
	display: flex;
	align-items: center;
	justify-content: center;
}
#opinionJapan .model li:first-child figure img{
	height: 271px;
	width: auto;
}
#opinionJapan .model li + li{
 width: 56%;
}
#opinionJapan .process h6{
 font-size: 2.4rem;
}
#opinionJapan .process p{
 font-size: 2.2rem;
}

#opinionSouthAsia .imgs{
 gap:0 25px;
}
#opinionSouthAsia .imgs li{
 width: calc((100% - 25px) / 2);
}
#opinionSouthAsia .imgs li figure img{
	width: 100%;
}
#opinionSouthAsia .activityBox{
 justify-content: space-between;
}
#opinionSouthAsia .activityBox .txts{
 width: 55%;
}
#opinionSouthAsia .activityBox figure{
 width: 40%;
}

/* =======================================
   human PC
========================================== */
.worries h3{
margin-bottom: 40px;
 font-size: 3.6rem;
}
.worries h3:nth-of-type(2){
	margin-bottom: 15px;
}
.worriesList {
 flex-flow: row wrap;
 justify-content: center;
gap: 40px 3%;
 }
 .worriesList::after{
	top: 94%;
	border-bottom: 15px solid #f3d1ed;
	border-right: 15px solid var(--gray);
	width: 40px;
	height: 40px;
}
 .worriesList li{
  font-size: 2rem;
  padding: 50px 30px;
  width: 45%;
 }
 .worriesList li::after{
   width: 4px;
  height: 25px;
	 top: calc(100% - 20px);
	 right: 10%;
 }
#humanWorries .txt,
#cleaningWorries .txt{
 	font-size: 1.8rem;
}
 
 #aboutService .pcFlex{
  justify-content: space-between;
 }
#aboutService .txts{
 width: 38%
 }
 #aboutService .txts h4{
 margin-bottom: 20px;
 font-size: 2.4rem;
}
#aboutService .txts p{
	margin-bottom: 20px;
}
#aboutService .pct{
 width: 58%;
 }
 #aboutService .pct dl dt{
 font-size: 2.4rem;
 }
 #aboutService .pct .totalSupport{
	margin-bottom: 61px;
}
#aboutService .pct .totalSupport::before{
	width: 80px;
	height: 40px;
	bottom: -37px;
	right: calc(50% - 41px);
}
#aboutService .pct .totalSupport::after{
	width: 50px;
	height: 50px;
	bottom: -28px;
	right: calc(50% - 28px);
}
#aboutService .pct .goal{
 margin-top: 40px;
}

.pointBox{
	margin-top: 30px;
}
.pointBox h5{
	font-size: 2.6rem;
	 padding: 20px;
}
.pointBox .h4Tit span{
	width: 100%;
}
.pointBox .h4Tit span,
.caseBox .h4Tit span{
 padding: 5px 20px;
}
.pointBox .h4Tit span::after,
.caseBox .h4Tit span::after{
	width:20px;
	height:15px;
 top: 99%;
 left: calc(50% - 10px);
}
.caseBox .h4Tit span::after{
 content: "";
 display: block;
 background: var(--grd1);
clip-path: polygon(0 0, 100% 0, 50% 100%);
 position: absolute;
 margin: auto;
}
 .caseBox .h4Tit span{
  width: 320px;
 }
.caseBox .pcFlex{
 justify-content: space-between;
 }
.caseBox ol{
 width: 60%;
 }
 .caseBox ol li:first-child{
	padding-bottom: 30px;
}
.caseBox ol li:nth-of-type(2)::before{
 top: -10px;
}
 .caseBox ol li h6{
  font-size: 2rem;
	 width: 136px;
 }
.caseBox figure{
 width: 35%;
 }
 .caseBox .flex h4 span{
 width: 320px;
 height: 80px;
}
 .caseBox > .flex h4 span{
border-radius: 5px 0 0 5px;
}
.caseBox > .flex p{
border-radius: 0 5px 5px 0;
 height: 80px;
 	gap:0 20px;
}
.caseBox h5{
 margin-bottom: 30px;
 font-size: 2.4rem;
}

#specificSkillHuman .pointBox li div{
	max-width: calc(100% - 320px - 50px);
}
#specificSkillHuman .pointBox li div p{
	max-width: 100%;
}
  
/* =======================================
   cleaning PC
========================================== */
#cleaningWorries ul.half li{
	padding: 30px;
}
#cleaningWorries ul.half li h4{
 font-size: 2.6rem;
}
#cleaningPoint .flexWrap{
 align-items: center;
 justify-content: space-between;
 }
#cleaningPoint .flexWrap h4{
 margin: 0;
 width: 400px;
 }
#cleaningPoint .flexWrap >p,
 #cleaningPoint .flexWrap >div{
 width: calc(100% - 400px);
 }
#cleaningPoint .pct{
 width: 400px;
 padding-right: 100px;
 }
 #cleaningPoint .pct ul li{
 font-size: 2.4rem;
}
#cleaningPoint .pcFlex figure{
 width: calc(100% - 400px);
 }
  #cleaningPoint .point01{
 	align-items: center;
 }
 #cleaningPoint .point01 .pct p,
 #cleaningPoint .point01 .pct li{
 	height: 5.5vw;
	max-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
 }
 #cleaningPoint .pcFlex.point01 figure::before{
 top: 50%;
	right: calc(100% + 40px);
	border-top: 10px #f3d1ed solid;
	border-right: 10px var(--gray) solid;
	width: 30px;
	height: 30px;
 margin-top: -10px;
 -webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
 #cleaningPoint .pcFlex.point02{
  justify-content: space-between;
 }
#cleaningPoint .pcFlex.point02 .txts{
 width: 50%;
 } 
#cleaningPoint .pcFlex.point02 figure{
 width: 38%;
 }
 #cleaningPoint .flexWrap div.pcFlex{
  justify-content: space-between;
  align-items: center;
 }
 #cleaningPoint .flexWrap div.pcFlex p{
  width: 54%;
 }
 #cleaningPoint .flexWrap div.pcFlex figure{
  width: 42%;
 }
  #cleaningCase .caseBox .h4Tit{
		width: 55%;
	}
 #cleaningCase .caseBox .h4Tit span{
 	width: 100%;
	justify-content: flex-start;
 }
#cleaningCase .caseBox p{
	
}
 
 /* =======================================
   faq SP
========================================== */
.faqList dt{
  padding: 20px 50px 20px 65px;
  font-size: 2rem;
}
.faqList dt::before,
.faqList dd::before{
	width: 50px;
  height: 50px;
	font-size: 2.6rem;
}
.faqList dd{
	padding: 24px 50px 30px 65px;
	font-size: 1.8rem;
}
.faqList dd::before{
  top: 14px;
}

/* =======================================
    PC agents
========================================== */
.agentsFeaturesBox{
	margin-top: 30px;
	justify-content: start;
	gap: 0 90px;
}
.agentsFeaturesBox dl{
	position: relative;
}
.agentsFeaturesBox dl:not(:first-of-type)::before{
	position: absolute;
	top: calc(50% + 20px);
	transform: translateY(-50%);
	left: -60px;
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--pink);
}
.agentsFeaturesBox dt{
}
.agentsContactBtns.pcFlex{
	gap: 0 30px;
}
.agentsContactBtns.pcFlex > *{
	flex: 1;
}


/* =======================================
	news PC
========================================== */
/*		一覧
-----------------------------*/
.contCol2{
	display: flex;
	justify-content: space-between;
	flex-direction: row-reverse;
}
.contCol2 .contMain{
	width: 75%;
}
.contCol2 .contSide{
	width: 17%;
}
.newsBox.pcFlex{
 justify-content: space-between;
}
.newsBox.pcFlex figure{
 width: 30%;
}
.newsBox.pcFlex .txts{
 width: 66%;
}

/*	詳細　single
-----------------------------*/
article{
 padding: 100px 0;
}
#newsDetail h3{
	font-size: 2.4rem;
}
.newsDetailCont:has(figure) figure{
	width: 100%;
	text-align: center;
}
.newsDetailCont:has(figure) figure img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}


/* =======================================
	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;
}