@charset "UTF-8";

/* ---------------------------------------------------------------------------
  ★共通
--------------------------------------------------------------------------- */
:root{
  scroll-padding-top: 154px;
}
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;
}



/*タイトル
========================================== */
.h2Tit {
	font-size: 9.6rem;
}


.h3Tit{
  font-size: 4rem;
	margin-bottom: 20px;
}
.h3Tit.large {
  font-size: 4.6rem;
margin-bottom: 32px;
}
.h4Tit {
	font-size: 3.2rem;
	margin-bottom: 20px;
}
.h4Tit.large{
  font-size: 3.6rem;
}
.h5Tit {  
	font-size: 2.4rem;
	margin-bottom: 12px;
}
.h6Tit{
	font-size: 1.6rem;
	margin-bottom: 12px;
}

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

/*
　ボタン,リンク
========================================== */
.btn{

}

.btn.w600{
  width: 600px;
 height: 102px;
}

.btn.w500{
  width: 500px;
 height: 102px;
}

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


/* =======================================
	header
========================================== */
header {
	width: 100%;
 height: 77px;
 padding: 0;
}
header > .flex {
  padding-right: 100px;
}
header #logo{
 display: inline-flex;
 align-items: center;
  padding: 0 0 0 30px;
  height: 77px;
  gap:0 14px;
}
header #logo img{
  width: 245px;
}
header #logo span{
 font-size: 1.6rem;
}

.headerEntry{
  margin: 26px 0 0 auto;
  width: 186px;
  font-size: 0;
  transition: 0.3s;
}
header.fixed .headerEntry{
  margin: 0 0 0 auto;
}


/* =======================================
	.menu
========================================== */


/* =======================================
	gnavi
========================================== */
.gnavi{
  position: fixed;
  right: -100vw;
  top: 0;
  height: 100vh;
 padding-bottom: 140px;
  transition: all 0.6s;
  z-index: 100;
  overflow-y: auto;
  background: var(--base);
}
.gnavi.active{
  right: 0;
}
#gnaviList{
  padding: 60px 0 0 0;
	width: 50vw;
}
#gnaviList li{
  border-bottom: 1px solid #fff;
}
#gnaviList li a{
  display: block;
  padding: 0.8em 4%;
  font-size: 16px;
  color: #fff;
}
#gnaviList li a span{
  font-size: 13px;
  margin-left: 6px;
}
.headerLinks li{
 margin-top: 10px;
}
.headerLinks a{
 width: 90%;
 height: 40px;
 margin: 0 auto;
}



/* =======================================
	footer
========================================== */

#pageTop a{
	width: 100px;
  height: 100px;
  border-radius: 50px;
}
footer{
  padding-top: 70px;
}
footer .pcFlex{
  justify-content: space-between;
  margin-bottom: 60px;
}
#companyLink{
  width: 290px;
}

#companyLink > p{
  margin-bottom: 80px;
}
.addressList{
  width: 615px;
  display: flex;
  gap:100px 
}




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

.titleBox{
  max-width: 1200px;
  margin: auto
}


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

/*		#mv
-----------------------------*/
#mv{
  max-height: 100svh
}



/*		#message
-----------------------------*/
#message{
  padding: 100px 0 30px;

}
#message .inner1200.pcFlex{
  justify-content: space-between;
  align-items: center;
}
#message .inner1200.pcFlex > figure{
  width: 42.4%;
}
#message .txt{
  
}
#message .txt h2 + h3.large{
  margin-top: 50px;
  margin-bottom: 20px;
}
#message .txt p{
  font-size: 2rem;
}


/*		#welcome
-----------------------------*/
#welcome{
  padding-bottom: 150px;
}

.welcomeLead{
  margin-bottom: 103px;
  justify-content: space-between;
}
.welcomeLead > div{
  /*width: 45%;*/
  flex: 1;
}

.welcomeBaloonList{
  width: 52%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
}
.welcomeBaloonList li{
  font-size: 2rem;
}
.welcomeBaloonList li:nth-of-type(1){
  transform: translate(40px, -29px);
}
.welcomeBaloonList li:nth-of-type(1)::before{
  position: absolute;
  top: 100%;
  left: 23px;
  content: "";
  display: inline-block;
  width: 46px;
  height: 50px;
  background: url('../images/bg_welcome_comment_bloon.png') no-repeat center center / 100% 100%;
}
.welcomeBaloonList li:nth-of-type(3){
  margin: 0 calc((100% - 280px)/2);
}
.welcomeBaloonList li:nth-of-type(5)::before{
  position: absolute;
  top: 100%;
  right: 23px;
  content: "";
  display: inline-block;
  width: 46px;
  height: 50px;
  background: url('../images/bg_welcome_comment_bloon.png') no-repeat center center / 100% 100%;
  transform: scaleX(-1);
}
.welcomeBaloonList li.baseOr{
}


/*		.slider
-----------------------------*/
.slider li{
  padding: 0 7px;
  width: 382px;;
  height: 277px;
}
.slider + .slider{
  margin-top: 14px;
}
.slider li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
ul#slider02 {
    transform: translateY(-135px);
}

/*		#what
-----------------------------*/
#what{
  padding: 0 0 100px;
}

.whatLead p{
  font-size: 1.8rem;
}

.whatList{
  margin-top: 67px;
  gap: 0 33px;
}
.whatList li{
  padding: 27px 0 0 27px;
  flex: 1;
}
.whatList li#launddry{
}
.whatList li#cleaning{
  margin: 56px 0 -56px;
}
.whatList li#restaurant{
  margin: 112px 0 -112px;
}
.whatList li dl{
  padding: 70px 20px 90px;
  height: 100%;
}
.whatList li dl::before{
  transform: translate(-27px, -27px);
}
.whatList li dt{
  font-size: 2.4rem;
}
.whatList li dt span{
  margin-bottom: 12px;
  font-size: 0.67em;
}
.whatList li dd{
  margin-top: 33px;
  padding: 0 40px;
}


/*		#vision
-----------------------------*/
#vision{
  padding-top: 0;
}

#vision .titleBox{
  margin-bottom: 50px;
}

.visionLead p{
  font-size: 1.8rem;
}

.visionDataWrap {
  margin-top: 70px;
  margin-bottom: 97px;

}
.visionDataImg{
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}
.visionDataImg img{
  margin: 0 auto;
  width: min(100%,993px);
  mix-blend-mode: multiply;
  opacity: 0.32;
}
.visionDataInner {

}
.visionData {
  width: min(100%,381px);
}
.visionData .h4Tit.frm {

}
.visionData .number{

}
.visionData p{

}

.visionConpare.pcFlex {
  width: min(6525vw,783px);
  margin-top: -50px;
  margin-left: auto;
  gap: 30px 4.5%;
  align-items: end;
}
.visionConpare.pcFlex > * {
  flex: 1;
}
.visionConpare .orange{

}
.visionConpare .now{
  font-size: 2rem;
}
.visionConpare .now dd{
  margin-right: -8%;
}
.visionConpare .future{
  margin-bottom: min(8.4vw,101px);

}



.csrList{
  margin-bottom: 97px;
}
.csrList li{
  width: calc((100% - 81px)/4);
}
.csrList li figcaption{
  font-size: 2.0rem;
}

.intraList{
  gap: 46px 72px;
}
.intraList li{
  width: min(calc((100% - 144px)/3),250px);
}
.intraList li figure{
  margin-bottom: 9px;
  width: 250px;
  height: 250px;
}
.intraList li h5{
  display: grid;
  align-items: center;
  min-height: 2.4em;
}

/*		#work
-----------------------------*/
#work{

}

#work .titleBox{
  margin-top: -160px;
}

#work .titleBox h2{
  margin-bottom: 45px
}

#work .titleBox p{
  font-size: 1.8rem;
  width: 52%;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 40px
}


#modalArea > figure{
  position: relative;
  width: 1100px;
  margin: auto
}
#modalArea figure .trigger{
  position: absolute;
  width: 150px;
  height: 180px;
  display: block;
  background: rgba(167,167,167,0);
  cursor: pointer
}

#modalArea figure .trigger#position1{
  top:0;
  left:390px;
}

#modalArea figure .trigger#position2{
  top:90px;
  left:235px;
}

#modalArea figure .trigger#position3{
  top:220px;
  left:85px;
}

#modalArea figure .trigger#position4{
  top:415px;
  left:25px;
}

#modalArea figure .trigger#position5{
  top:0;
  left:570px;
}

#modalArea figure .trigger#position6{
  top:90px;
  right:225px;
}

#modalArea figure .trigger#position7{
  top:220px;
  right:75px;
}

#modalArea figure .trigger#position8{
  top:415px;
  right:25px;
}
#modalArea figure a:hover{
 background: var(--Lgray);
 opacity: .3;
}

#work .careerBox .titleBox{
  text-align: left;
  margin-top: 0;
  margin-bottom: 85px;
}


#work .careerBox .careerList li{
padding-top: 40px;
  padding-right: 56px;
  padding-bottom: 26px;
  padding-left: 50.4%;
  margin-bottom: 40px
}

#work .careerBox .careerList li.reverse{
  padding-top: 40px;
  padding-left: 56px;
  padding-right: 50.4%;
  padding-bottom: 26px;
}

#work .careerBox .careerList li h4.orBox{
  margin-bottom: 36px;
  width: 462px;
  text-align: center;
}

#work .careerBox .careerList li h4.orange{
  margin-bottom: 10px;
}
#modalArea{
  margin-bottom: 85px;
}
/*		#talk
-----------------------------*/
#talk .titleBox{
  height: 648px;
  margin-bottom: 100px;
}

.largeBk{
  font-size: 128px;
  color: var(--Lgray);
  position: relative;
  font-weight: 700;
  text-align: center;
  margin-bottom: 50px;
}
.largeBk span{
  position: absolute;
  left: calc(50% - 2rem);
  top:calc(50% - 1.5rem);
  
}

.persons{
  gap:50px;
  width: 950px;
  margin: 0 auto 80px
}

#talk .persons li figure{
  margin-bottom: 14px;
}
#talk .persons li span{
  display: block;
  margin-bottom: 15px;
}

#talk .bgW,
#talk .bgLgray{
  padding-top: 70px;
  padding-bottom: 90px
}

#talk h3{
  margin-bottom: 72px;
  width: 700px
}

#talk .pcFlex{
  gap:50px;
}
#talk .pcFlex .text{
  width: 54.5%
}
#talk .pcFlex .text p{
  margin-bottom: 30px;
  line-height: 1.5;
}

#talk .pcFlex .photos,
#talk .pcFlex > figure{
  width: calc(46.5% - 50px)
  
}

/*		#support
-----------------------------*/

#support .titleBox{
  margin-bottom: 20px;
}
#support .titleBox h2{
  margin-bottom: 50px;
}

#support .supportList .pcFlex{
  gap:98px;
}

#support .supportList li{
  padding-top: 58px;
  margin-bottom: 80px
}

#support .benefitsList{
  margin-top: 50px;
}
#support .benefitsList li dt span{
 font-size: 2rem;
  font-weight: bold
}

#support .benefitsList li dt img{
   height: 42px;
  width: auto
}



/*		#requirements
-----------------------------*/
#requirements{padding-top: 56px;}

#requirements .titleBox{
  margin-bottom: 72px
}

#requirements .tab{
  margin-bottom: 50px
}

#requirements .tab li{
  font-size: 1.8rem
}

/*		#faq
-----------------------------*/
#faq .titleBox{
  margin-bottom: 75px;
}
#faq dt span,
#faq dd span{
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

/*		#entry
-----------------------------*/

#entry .entryMv{
  margin-bottom: 80px
}


.formArea{
  padding: 46px 130px 30px
}

.formArea h3{
  margin-bottom: 42px;
}

.formArea dt{
  font-size: 14px !important;
}



.policyBox{
  height: 264px;
  padding: 35px 60px
}

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

#thanks{
  margin-top: 154px
}

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