@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

common

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body { color: var(--c-text); line-height: 1.8; background: #fff;}	
a { color: var(--c-main);  text-decoration: none;}
a:hover { text-decoration: none;}
.clickable a, .clickable a:hover { color: #333;}

/* ----------------------------------------------------
parts (common)
---------------------------------------------------- */
:root {
 /* font-family */
 --ff-symbol: 'Material Symbols Outlined';
 --ff-en: 'Montserrat';
 
 /* color */
 --c-text: #333;
 --c-white: #fff;
 --c-red:#C20000;
 --c-main: #3ea435;
  --c-green-light:#94cf8f;
 --c-pink: #f2759b;
 --c-blue: #2c74d7;
 --c-orange: #f78600;
 --c-gray-light: #ccc;
 --bg-main: #ebf7e9;

 /* font-size */
 --fs-body: var(--fs-18);

}

/* icon */
.ic--symbol {position: relative; }
.ic--symbol::before {font-family: var(--ff-symbol); position: absolute; }
.ic--fill::before {font-variation-settings: 'FILL' 1;}
.ic--left::before { left: 0; top: 50%; transform: translateY(-50%);}
.ic--top::before  { left: 50%; top: 0; transform: translateX(-50%);}
.ic--mail::before {content:"\e158";}

/* flex */
.flex {display: flex; display: -webkit-flex; flex-wrap: wrap;}
.jc--sb {justify-content: space-between;}
.jc--c  {justify-content: center;}
.jc--fe {justify-content: flex-end;}

/* img */
img {width: 100%; height: auto;}
.img-obj {overflow: hidden;}
.img-obj img {width: 100%; height: 100%; object-fit: cover;}

/* font */
.fw-b {font-weight: bold;}

/* =========================
   Scroll Fade Animation
========================= */
.js-scroll-fade {opacity: 0;transition: opacity 0.8s ease, transform 0.8s ease; will-change: opacity, transform;}
.js-scroll-fade.is-active {opacity: 1; transform: translate(0, 0) scale(1);}

.fade-up {transform: translateY(30px);}
.fade-left { transform: translateX(-30px);}
.fade-right {transform: translateX(30px);}
.zoom-in { transform: scale(0.95);}

/* =========================
   Optional: reduce motion
========================= */
@media (prefers-reduced-motion: reduce) {
  .js-scroll-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ------------------------------------------------------
header
-------------------------------------------------------- */
#hd-logo {width: clamp(160px, 117.632px + 11.513vw, 265px);}
.hd-info__mail {
  position: absolute;
  right: 0;
  top: 0;
  width: clamp(180px, 151.754px + 7.675vw, 250px);
  height: 100%;
}
.hd-info__mail a {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  background-color: var(--c-orange);
  color: #fff;
  font-weight: 600;
}
.hd-info__mail a span {
  padding-top: 1.5em;
}
.hd-info__mail a span::before{
  font-size: 1.5em;
  line-height: 1;
  font-weight: 200;
}
.hd-info__contact p {
  margin-bottom: 0;
}
.hd-info__time {
  font-size: var(--fs-fix-14);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}
.hd-info__tel{
  text-align:center;
  position: relative;
}
  .hd-info__tel p {
    font-size: var(--fs-24);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
  }
  .hd-info__clean p a {color: var(--c-pink);}
  .hd-info__maintenance p a {color: var(--c-blue);}

/* pc */
@media(min-width: 769px) {
  #header .hd-info{
    padding: var(--space-24) clamp(180px, 151.754px + 7.675vw, 250px) var(--space-24) clamp(8px, -55.205px + 8.219vw, 50px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .hd-info__contact{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--space-16) * 2 );
    margin-right: var(--space-32);
  }
   .hd-info__tel.hd-info__maintenance::before{
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--c-gray-light);
    position:absolute;
    left: calc(var(--space-16) * -1);
    top: 0;
  }
    .hd-info__tel h2 {
      font-size: 13px;
    }

  @media (max-width: 1090px) {
    .hd-info__time{display: none;}
  }
    .sp-telBtn{display: none;}
}

/* sp */
@media (max-width: 768px) {
  body.is-menu-open {
    overflow: hidden; 
    position: fixed; 
    width: 100%;
  }
  #header  {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--space-80);
    background: #fff;
    padding: var(--space-fix-8);
    height: var(--space-80);
    display: flex;
    align-items: center;
    z-index: 1;
  }
 .hd-info__mail {
  position: fixed;
  top: unset;
  bottom: 0;
  width: 100%;
  height: clamp(80px, 61.600px + 5vw, 100px);
  font-size: var(--fs-20);
 }
.sp-telBtn {
  position:absolute;
  background-color: var(--bg-main);
  right: var(--space-88);
  top: 50%;
  translate: 0 -50%;
  font-size: var(--fs-fix-14);
  padding: 6px var(--space-24);
  border-radius: 30vw;
  color: var(--c-main);
  font-weight: 600;
}
.hd-info__contact {
  background: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 80%;
  max-width: 600px;
  padding: var(--space-48) var(--space-32);
  text-align: center;
  flex-direction: column;
  gap: var(--space-32);
  z-index: 210;
  display: none;
}
.hd-info__time{
  color: var(--c-main);
}
.hd-info__tel p{
  font-size: clamp(30px, 22.640px + 2vw, 38px);
}
.bg-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 200;
  display: none;
}
.hd-info__contact.is-open {display: flex;}
.bg-modal.is-open {display: block;}
}

/* ------------------------------------------------------
global navi 
-------------------------------------------------------- */
/* ブラウザ既定のbuttonスタイルを一旦すべてリセットし、
   見た目は下の a と同じルール（セレクタをグループ化）で当てる。 */
#nav-global li.btn-nav-child button {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
}

/* pc */
 @media(min-width: 769px) {
  #grand-menu{
    border-top: 1px solid var(--c-gray-light);
    border-bottom: 1px solid var(--c-gray-light);
  }
  #nav-global {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
  }
  #nav-global li {
    flex:1;
    font-weight: 600;
  }

  @media (max-width: 920px) {
    #nav-global li { flex:auto; }
  }

  #nav-global li > a,
  #nav-global li.btn-nav-child button {
    display: block;
    text-align: center;
    padding: var(--space-16) var(--space-fix-8);
    color: var(--c-main);
  }
  #nav-global li.btn-nav-child {
    position: relative;
  }
  #nav-global > li > a:hover,
  #nav-global > li.btn-nav-child:hover,
  #nav-global > li.btn-nav-child:hover > a,
  #nav-global > li.btn-nav-child:hover > button {
    background: var(--c-main);
    color: #fff !important;
    opacity: 1 !important;
    text-decoration: unset !important;
  }
  #nav-global li.btn-nav-child .nav-child {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 16; width:100%;
    display: none;
  }
  #nav-global li.btn-nav-child .nav-child li {
    border-top: 1px solid #fff;
    line-height: 1.25;
  }
 #nav-global li.btn-nav-child .nav-child li a {
    color: #fff;
    text-align:left;
    font-size: var(--fs-16);
    padding: var(--space-fix-12) var(--space-16);
    background: var(--c-main);
    font-weight: normal;
 }
  #nav-global li.btn-nav-child button {
    background:#fff;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }
  #nav-global li.btn-nav-child.is-active button {
    color: #fff;
    background:var(--c-main);
  }
  
  #nav-global li > a.current,
  #nav-global li.btn-nav-child button.current {
    background-color: var(--c-main);
    color: #fff;
    border-right: 1px solid #fff;
  }
  #nav-global li.btn-nav-child > a {
    display: none;
  } 
    #nav-global li.btn-nav-child li:hover a {
    text-decoration: unset !important;
    }
  @media (hover: hover){ /* hover可能な端末 */
    #nav-global li.btn-nav-child button {display: none;}
    #nav-global li.btn-nav-child > a {display: block;}
    #nav-global li.nav-index {display: none;}

    /* ドロップダウン：CSSで開閉（JSのslideだと閉じる際にチラつくため） */
    #nav-global li.btn-nav-child .nav-child {
      display: block;
      visibility: hidden;
      clip-path: inset(0 0 100% 0);
      transition: clip-path 0.3s ease, visibility 0s linear 0.3s;
    }
    #nav-global li.btn-nav-child:hover .nav-child {
      visibility: visible;
      clip-path: inset(0 0 0 0);
      transition: clip-path 0.3s ease, visibility 0s;
    }
  }
  
  #btn-global {display: none;}

}

/* sp*/
@media (max-width: 768px) {
  #nav-global li.btn-nav-child button {display: block;}
  #nav-global li.btn-nav-child > a {display: none;}

  #btn-global {position: absolute; right: 0; top: 0; width: var(--space-80); aspect-ratio: 1/1; z-index: 120; display: flex;  justify-content:center; align-items: center; background: var(--c-main);}
  #btn-global .btn-wrap-global { width: 55%; aspect-ratio: 4/3; position: relative;}
  #btn-global .btn-line { height: 2px; background: #fff; position: absolute; right:0; width: 100%;}
  #btn-global .btn-line.btn-line--top {  top: 0;}
  #btn-global .btn-line.btn-line--mid { top: 50%; translate:0 -50%;}
  #btn-global .btn-line.btn-line--bot { bottom: 0; }
  #btn-global.is-active .btn-line {background: #fff;}
  #btn-global.is-active .btn-line.btn-line--top { display: none;}
  #btn-global.is-active .btn-line.btn-line--mid { translate: 0 0; rotate: 45deg;}
  #btn-global.is-active .btn-line.btn-line--bot { rotate: -45deg; bottom:unset; top: 50%;}
  #btn-global .btn-line.btn-line--mid, 
  #btn-global .btn-line.btn-line--bot {transition: 0.3s all ease-in-out;}

  #grand-menu {background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; z-index: 110;  left: 0; top: 0; display: none; overflow: auto; padding: var(--space-120) 5%;}
  #grand-menu a,
  #grand-menu #nav-global li button {color: #fff; padding: var(--space-24); position: relative;}
  #grand-menu #nav-global li { border-bottom: 1px dotted #888; line-height: 1;}
  #grand-menu #nav-global li:not(.btn-nav-child) a {display: block;}
  #grand-menu #nav-global li button {text-align:left; }

  #grand-menu #nav-global li:not(.btn-nav-child) a::after,
  #grand-menu #nav-global li button::after {content:""; position: absolute; right:1em; top: 50%; width: 10px; aspect-ratio:1/1; border-top:1px solid #fff; border-right: 1px solid #fff;  translate: 0 -50%; rotate: 45deg;}
  #grand-menu #nav-global li button::after { rotate:135deg; transition: 0.3s all ease-in-out;}
  #grand-menu #nav-global li.is-active button::after {rotate:-45deg;}

  #grand-menu #nav-global li.btn-nav-child .nav-child {display: none;}
  #grand-menu #nav-global li.btn-nav-child .nav-child  li {border-bottom: none; font-size: var(--fs-fix-16); padding-left: 1em;}
  #grand-menu #nav-global li.btn-nav-child .nav-child a::after {rotate: 45deg;}
  
}

/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
.ft-contact {
  background: url(../img/common/bg-ftContact-01.jpg) center center / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: clamp(64px, 51.088px + 3.509vw, 96px) var(--space-32);
}
.ft-contact__wrapper {
  margin: var(--space-56) auto 0;
  display: flex;
  justify-content: center;
  gap: var(--space-64);
}
.ft-contact__num{
  display: flex;
  justify-content: center;
  gap: clamp(16px, 6.316px + 2.632vw, 40px);
  margin-bottom: var(--space-fix-12);
}
.ft-contact__num li {
  flex: 1 0 auto;
  max-width: 300px;
}
.ft-contact__num li h3 {
  font-size: var(--fs-15);
  border: 1px solid #fff;
  padding: 4px;
}
.ft-contact__num li p {
  margin: 0;
  font-size: var(--fs-24);
}
.ft-contact__num li p a {
  font-size: var(--fs-32);
}
.ft-contact__time{
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size: var(--fs-fix-14);
  line-height: 2;
}
.ft-contact__mail a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--c-orange);
  color: #fff;
  padding:var(--space-16) var(--space-32);
  width: clamp(200px, 127.368px + 19.737vw, 380px);
  font-size: var(--fs-24);
  font-weight: 600;
  border-radius: 8px;
  border-bottom: 3px solid #aa5c00;
}
.ft-contact__mail a span{
  padding-top: 1.25em;
}
.ft-contact__mail a span::before{
  font-size: 1.5em;
  font-weight: 200 !important;
  line-height: 1;
}

#footer {
  background-color: #222222;
  color: #fff; 
}
.ft-inner {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-40) 0;
  font-size: var(--fs-fix-14);
}
.ft-inner a {
  color: #fff;
}
.lg-footer {
  width: clamp(180px, 159.825px + 5.482vw, 230px);
  margin: 0 auto var(--space-48);
}
.ft-inner p {
  margin-bottom: 0;
}
.ft-inr__wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-40);
}
.ft-inr__navi {
  display: flex;
  gap:var(--space-32  );
}
.ft-inr__navi dl dt {
  font-weight: 600;
}
.ft-inr__navi dl dd {
  position: relative;
}
.ft-inr__navi dl dd::before{
  content: "-";
  margin-right: 3px;
}
.copy {
  text-align: center;
  font-size: 12px;
}

#pagetop {
  position: fixed;
  bottom: 0;
  right: 0;
  margin: 0;
}
#pagetop a {
  display:block;
  width: clamp(48px, 43.158px + 1.316vw, 60px);
  aspect-ratio: 1/1;
  background-color: #57a060;
  position: relative;
}
#pagetop a::before{
  content: "";
  width: 15px;
  aspect-ratio: 1/1;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -25%;
  rotate: -45deg;
}

@media (max-width: 910px) {
.ft-inr__address span {display: block;}

@media (max-width: 869px) {
  .ft-contact__wrapper {
  flex-direction: column;
  }
  .ft-contact__mail a{
    width: 100%;
    max-width: 400px;
    margin-inline: auto;
  }
  .ft-contact__time {
    max-width: 630px;
    margin-inline: auto;
  }
  .ft-contact__num li h3 {
    font-size: 13px;
  }
  .ft-contact__num li p{
    font-size: var(--fs-16);
  }
  .ft-contact__num li p a{
    color: #fff;
    font-size: var(--fs-28);
  }

  @media (max-width: 768px) {
    footer {padding-bottom: clamp(80px, 61.600px + 5vw, 100px);}
    .ft-inr__wrapper{flex-direction: column;}
    .ft-inr__address span {display:inline;}
    .ft-inr__navi {display: none;}
    }
  }
}

/* ========================================================
    component
========================================================*/
.visual{
  display: flex;
  justify-content: center;
  align-items: center;
  height: clamp(100px, 63.684px + 9.868vw, 190px);
  padding: 0 5%;
  text-align: center;
  background: url(../img/page/common/bg-visual-l.png) left top / auto 100% no-repeat,
              url(../img/page/common/bg-visual-r.png) right top / auto 100% no-repeat #cce6ff;
}
.visual h2 {
  font-size: var(--fs-32);
}
.visual h3 {
  font-size: var(--fs-24);
}
.visual :is(h2,h3) {
  line-height: 1.6;
}

.topic-path {
  width: 90%;
  max-width: 1280px;
  margin: var(--space-fix-12) auto;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
}
.topic-path li:not(:first-child) {
  padding-left: 1em;
  margin-left: 0.5em;
  position: relative;
}
.topic-path li:not(:first-child)::before {
  content: "";
  width: 6px;
  aspect-ratio: 1/1;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  rotate:45deg
}

#main-content{
  width: 90%;
  max-width: 1280px;
  margin-inline:auto;
  padding: var(--space-40) 0 var(--space-120);
}

/* heading */
.heading-lv1 {
  text-align: center;
  font-size: var(--fs-32);
  color: var(--c-main);
  font-weight: 600;
  padding-top: var(--space-40);
  position: relative;
  margin-bottom: var(--space-40);
}
  .heading-lv1::before{
    content: "";
    background: url(../img/page/common/ic-heading-01.png) center center / cover no-repeat;
    aspect-ratio: 28/26;
    width: clamp(22px, 19.579px + 0.658vw, 28px);
    position: absolute;
    left: 50%;
    top: 0;
    translate: -50% 0;
  }
.heading-lv2 {
  font-size: var(--fs-32);
  font-weight: normal;
  padding-bottom: var(--space-16);
  position: relative;
  border-bottom: 3px solid #e7e7e7;
  margin: var(--space-40) auto;
}
  .heading-lv2::before{
    content: "";
    width: 20%;
    height: 3px;
    background-color:var(--c-green-light);
    position: absolute;
    left: 0;
    bottom: -3px;
  }
.heading-lv3 {
  background-color: var(--bg-main);
  font-size: var(--fs-24);
  font-weight: normal;
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-32);
  position: relative;
  margin: var(--space-40) auto var(--space-32);
}
  .heading-lv3::before{
    content: "";
    height: 100%;
    width: 5px;
    background-color: var(--c-green-light);
    position: absolute;
    left: 0;
    top: 0;  
  }
.heading-lv4 {
  font-size: var(--fs-20);
  color: var(--c-main);
  margin: var(--space-32) auto var(--space-fix-8);
  padding-left:1.25em;
  position: relative;
}
.heading-lv4::before{
  content: "";
  background: url(../img/page/common/ic-heading-02.png) center center / cover no-repeat;
  aspect-ratio: 1/1;
  width: 15px;
  position: absolute;
  left: 0;
  top: 0.55em;
}

@media (max-width: 768px) {
  .heading-lv4::before{
    width: 13px;
    top: 0.5em;
  }
}

/* copy */
.copy-read{
  font-size: var(--fs-20);
  margin: var(--space-56) auto var(--space-80) ;
}

/* column */
.column-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap:var(--space-32);
}
.column-2 {
  max-width: 900px;
  margin-inline: auto;
}
.column-2 .column{
  width: calc(calc(100% - var(--space-32)) / 2);
}
.column-3 .column{
  width: calc(calc(100% - calc(var(--space-32)*2)) / 3);
}
.column a {
  color: var(--c-text);
}
.column-img {
  aspect-ratio: 3/2;
}
  .column-img img {
    transition: 0.5s ease-in-out;
  }
.column:hover .column-img {
  opacity: 1!important;
}
.column:hover .column-img img {
  transform: scale(1.03);
  opacity: 1!important;
  transition: 0.5s ease-in-out;
}

.column h3 {
  text-align: center;
  margin: var(--space-16) auto;
  font-size: var(--fs-20);
  color: var(--c-main);
}
.column p {
  margin: 0;
  line-height: 1.6;
  font-size: var(--fs-fix-16);
}
.img-contents {
  display: flex;
  flex-wrap: wrap;
  gap:var(--space-80);
}
.img-cont__txt{
  flex: 1;
}
  .img-cont__txt p:last-child {
    margin-bottom: 0;
  }
.img-cont__img{
  flex: 0 0 40%;
}




@media (max-width: 890px) and (min-width: 600px) { 
  .column-wrapper {
    flex-direction: column;
    gap: var(--space-40);
  }
  .column-wrapper.column-2 {
    flex-direction: row;
  }
  .column-2 .column {
    width: calc(calc(100% - var(--space-40)) / 2);
  }

  .column-wrapper.column-3 .column{
    width: 100%;
  }
  .column-wrapper.column-3 .column{
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-template-rows: max-content 1fr;
    grid-column-gap: var(--space-40);
    grid-row-gap: 0px;
  }
  .column-wrapper.column-3 .img-obj {
    grid-area: 1 / 1 / 3 / 2;
    flex: unset;
  }
  .column-wrapper.column-3 .column h3 {
    grid-area: 1 / 2 / 2 / 3;
    text-align: left;
    width: 100%;
    margin-top:0;
  }
  .column-wrapper.column-3 .column p { grid-area: 2 / 2 / 3 / 3; }
}

@media (max-width: 599px){
  .column-wrapper,
  .column-wrapper.column-2   {
    flex-direction: column;
    gap: var(--space-40);
  }
  .column-2 .column,
  .column-3 .column { 
    width: 100%;
  }
}

@media (max-width: 768px){
  .img-contents {
    flex-direction: column;
    gap: var(--space-40)
  }
  .img-cont__txt,
  .img-cont__img{
    flex: unset;
  }
}


/* table */
.tbl-basic {
  width: 100%;
}
.tbl-basic th {
  background-color: var(--c-green-light);
  color: #fff;
  border: 2px solid #fff;
  padding: var(--space-16) var(--space-24);
  width: 25%;
}
.tbl-basic td {
  background-color: #f2f2f2;
  padding: var(--space-16) var(--space-24);
  border: 2px solid #fff;
}

@media (max-width: 768px) {
.tbl-basic th,
.tbl-basic td {
  display: block;
  width: 100%;
}
.tbl-basic th {
  border-bottom: 0;
}
.tbl-basic td {
  border-top: 0;
}
}

.listDot li {
  position: relative;
  padding-left:1em;
}
.listDot li::before{
  content: "";
  width: 6px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--c-main);
  position: absolute;
  left: 3px;
  top: 0.8em;
}

/* step */

.step {
  background: var(--bg-main);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  padding: var(--space-40) var(--space-40) var(--space-40) clamp(90px, 85.965px + 1.096vw, 100px);
}
.step-num {
  position: absolute;
  left: 0;
  top: 0;
  aspect-ratio: 1/1;
  width: var(--space-72);
  text-align: center;
  line-height: 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-num span {
  position: relative;
  color: #fff;
  font-weight: 600;
}
.step-num em {
  font-size: var(--fs-24);
}
.step-num::before{
  content: "";
  aspect-ratio: 1/1;
  background-color: var(--c-green-light);
  border-radius: 50%;
  width: var(--space-120);
  position: absolute;
  left: 0;
  top: 0;
  translate: -28% -30%;
}
.step h3{
  color: var(--c-main);
  font-weight: 600;
  font-size: var(--fs-24);
  margin-bottom: var(--space-16);
}
.step .img-cont__img{
  flex: 0 0 30%;
}
.step-arrow{
  width: var(--space-64);
  height: var(--space-32);
  background-color:var(--bg-main);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  margin: -1px auto var(--space-32);
}

@media (max-width: 768px){
  .step {
    padding: var(--space-48);
  }
  .step h3 {
    text-align: center;
  }
}

/* btn */
.btn-list {
  display: flex;
  justify-content: center;
  gap: var(--space-32);
}
.btn {
  border: 0;
  border-radius: 30vw;
  background-color: var(--c-main);
  color: #fff;
  padding: var(--space-fix-12) var(--space-48);
  font-size: 2rem;
  transition: opacity 0.3s ease-in-out;
  min-width: 240px;
  max-width: 100%;
}
/* a タグでも button と同じ見た目にする */
a.btn {
  display: inline-block;
  text-align: center;
}
.btn:hover{
  opacity: 0.8;
}

/* box */
.box{
  padding: var(--space-32);
}
.box p:last-child{
  margin-bottom: 0;
}
.box-gray{
  background-color: #f3f3f3;
}

/* ========================================================
    home
========================================================*/
.hom-visual{
  aspect-ratio: 9/3;
  background-color: #eee;
  position: relative;
}
.homSlider {
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 9/3;
  overflow: hidden;
}
.homSlider img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.homSlider .homSlider__cont {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.homSlider02 .homSlider__cont {
  justify-content: flex-start;
  text-align: left;
}

.homSlider .homSlider__inr  p {
  font-size: var(--fs-28);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.2;
  margin:  8px 0;
}
.homSlider .homSlider__inr  p span {
  display: inline-block;
  background: #fff;
  padding: 10px  15px;
}
.homSlider .homSlider__inr  p span em {
  font-style: normal;
  color: #ff8d1d;
}


@media (max-width: 768px) {
  .hom-visual,
  .homSlider{
    aspect-ratio: 9/5;
  }
}

#hom-content{
  margin: clamp(60px, 35.789px + 6.579vw, 120px) auto 10px;
}
.hom-catch{
    font-size: var(--fs-32);
    font-weight: 600;
    line-height: 1.6;
    width: 90%;
    margin-inline: auto;
}
.hom-title {
    font-size: var(--fs-32);
    margin-bottom: var(--space-16);
}
  .hom-title span {
    display: block;
    font-family: var(--ff-en);
    font-size: var(--fs-16);
  }
.hom-intro {
  position: relative;
  padding: var(--space-80) 0 0;
  margin: var(--space-80) auto;
}
.hom-intro::before {
  content: "";
  width: 55%;
  height: 100%;
  background: url(../img/home/img-hom-intro-01.jpg) center center / cover no-repeat;
  position: absolute;
  right: 0;
  top: 0;
}
.hom-intro__inr {
  width: 90%;
  max-width: 1200px;
  margin-inline:auto;
  position: relative;
}
.hom-intro__content {
  width: 55%;
  background-color: rgba(255,255,255,0.9);
  padding: var(--space-64) var(--space-64) var(--space-32) 0;
}
.hom-intro__list {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: var(--space-56) auto 0;
}
  .hom-intro__list li{
    text-align: center;
  }
    .hom-intro__list li p {
      width: 74px;
      margin: 0 auto 1em;
    }
  .hom-intro__list li h3 {
    color: var(--c-main);
    font-size: var(--fs-24);
    line-height: 1.5;
  }
  .hom-intro__list li h3 span {
    display: block;
    font-weight: normal;
    font-size: var(--fs-16);
    color: #999;
  }

/* service */
.hom-service {
  margin: var(--space-120) 0 var(--space-80);
}
.hom-service__wrapper{
  display: flex;
  flex-wrap: wrap;
  gap:2px;
}
.hom-service__cont {
  flex: 1;
  transition: 0.5s ease-in-out;
}
.hom-service__cont a {
  display: block;
}
.hom-service__img {
  aspect-ratio: 80/46;
}
.hom-service__img img {
  transition: 0.5s ease-in-out; 
}

.hom-service__cont h3{
  width: 90%;
  margin: var(--space-40) auto var(--space-32);
  text-align: center;
  font-size: var(--fs-28);
  line-height: 1.6;
}
.hom-service__cont h3 span {
  display: block;
  font-size: var(--fs-18);
  font-family: var(--ff-en);
  font-weight: normal;
  color: #666;
}
.hom-service__cont p {
  width: 90%;
  margin-inline: auto;
  color: var(--c-text );
}
.hom-service__cont:hover {
  opacity: 1 !important;
  background-color: #eee;
}
.hom-service__cont:hover .hom-service__img img  {
  transform: scale(1.03);
  opacity: 1 !important;
  transition: 0.5s ease-in-out;
}


/* recruit banner */
.hom-recruit a {
  display: block;
  background: #83cb7c url(../img/home/bg-hom-recruit.png) right top / auto 100% no-repeat;
  padding: var(--space-80) 0;
  color: #fff;  
}
.hom-recruit__inr {
  width: 90%;
  max-width: 1200px;
  margin-inline:auto;
}
.hom-recruit__inr h3{
  font-size: var(--fs-28);
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  /* intro */
  .hom-intro {
    padding-top: var(--space-120);
  }
  .hom-intro::before {
    width: 90%;
    height: 80%;
    right: unset;
    left: 0;
  }
  .hom-intro__inr {
    display: flex;
    justify-content: flex-end;
    margin-inline: 10% 0;
  }
  .hom-intro__content {
    width: 100%;
    padding: var(--space-64) var(--space-40) var(--space-24) var(--space-56);
  }
  .hom-intro__list {
    width: 100%;
    justify-content: space-around;
  }
  .hom-intro__list li {
    flex: 1;
  }
  .hom-intro__list li p {
    width: 60%;
    max-width: 74px;
  }

  /* service */
  .hom-service__wrapper{
    gap: var(--space-40);
  }
  .hom-service__cont {
    flex: unset;
    width: 100%;
  }

  /* recruit banner */
  .hom-recruit a {
    background-image: none;
    text-align: center;
    padding: var(--space-40);
  }
}

/* ========================================================
    maintenance
========================================================*/
.bnr-recycle {
  max-width: 460px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin: var(--space-40) 0 0;
}

@media (max-width: 768px) {
  .bnr-recycle{
    margin-inline: auto;
  }
}

/* ========================================================
    company
========================================================*/
.map-wrapper {
  aspect-ratio: 3/1;
  margin-top: var(--space-16);
}
.gMap {
  width: 100%;
  height: 100%;
}

/* ========================================================
    recruit
========================================================*/
.rec-contact a {margin-inline:auto;}

/* ========================================================
    form
========================================================*/
.form-wrapper{
  max-width: 900px;
  margin-inline: auto;
}
.form-cols{
  border-bottom: 1px solid var(--c-gray-light);
  padding: var(--space-32) 0;
}
.form-cols h3{
  margin: 0 auto var(--space-16);
  color: var(--c-main);
}
.form-cols h3 .required {
  background-color: var(--c-red);
  color: #fff;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 3px;
  margin-left: var(--space-16);
  line-height: 1.2;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  width: 100%;
  background-color: #eee;
  border:none;
  outline:none;
  padding: var(--space-fix-16) var(--space-24);
}
input[type="tel"] {
  max-width: 400px;
}
textarea{
  height: 10em;
}
input[type="checkbox"]{
  width: 1em;
  height: 1em;
  vertical-align: baseline;
  margin-right:12px;
  translate: 0 2px;
  cursor: pointer;
}

.error {
  margin: 0;
  color: var(--c-red);
  font-size: var(--fs-fix-14);
}
.error:first-of-type{
  margin-top: 12px;;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pcSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 769px) {}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1200px) and (min-width: 769px) {}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {}