@charset "utf-8";
img { max-width: 100%; height: auto; }
.mt3em { margin-top: 3em; }
.mt2em { margin-top: 2em; }
.mt1em { margin-top: 1em; }

.t-large { font-size: 1.125rem; }
.t-small { font-size: .75rem; }
.t-bold { font-weight: bold; }

.pc-only { display: none; }
@media screen and (min-width: 768px) {
  .t-large { font-size: 1rem; }
  .sp-only { display: none; }
  .pc-only { display: initial;}
}


.list-dot > li { padding-left: 1em; }
.list-dot > li::before { content: '・'; margin-left: -1em; }

.page-head { width: 100%; background: #003FA3; color: #FFF; position: relative; height: 24vw; display: flex; align-items: center; justify-content: center; }
.page-head::before { content: 'VOLTECHS'; font-family: 'Montserrat', sans-serif; font-weight: bold; color: #FFF; opacity: .05; position: absolute; left: 0; bottom: 0; line-height: .8; font-size: 9vw; }
.page-head .inner { width: 76%; position: relative; z-index: 2; }
.page-head .page-title { font-size: 3.2rem; font-weight: bold; color: #FFF; }
.page-head .img { width: 60%; position: absolute; top: 0; right: 0; height: 100%; object-fit: cover; object-position: left center; }


@media screen and (max-width: 900px) {
  .page-head { height: 30vw;  }
  .page-head .inner { width: 90%; }
  .page-head .page-title { font-size: 2.5rem; }
  
}
@media screen and (max-width: 600px) {
  .page-head .page-title { font-size: 1.5rem; }
}

.title-section { margin-bottom: 3rem; }
.title-section .en { font-size: 5rem; font-weight: 600; color: #003FA3; line-height: 1.2;  }
.title-section .ja { font-size: 1.25rem; font-weight: 600; display: flex; align-items: center; white-space: nowrap; }
.title-section .ja::before { content: ''; width: 1em; height: 3px; display: inline-block; background: #003FA3; margin-right: .5em; }

.title-section-s { font-size: 2rem; text-align: center; margin-bottom: 1em;  }
.title-section-s::after { content: ''; width: 20px; height: 3px; display: block; margin: .5em auto 0; background: currentColor; }

.title-block { background: #FFF; color: #222222; width: fit-content; margin-bottom: .5em; padding: .2em 1em; font-weight: bold; }


@media screen and (max-width: 1200px) {
  .title-section { margin-bottom: 2rem; }
  .title-section .en { font-size: 4rem;  }
  .title-section .ja { font-size: 1.2rem;  }
}
@media screen and (max-width: 900px) {
  .title-section .en { font-size: 3rem;  }
  .title-section .ja { font-size: 1.125rem;  }
}

@media screen and (max-width: 600px) {
  .title-section .en { font-size: 2.5rem;  }
  .title-section .ja { font-size: 1rem;  }
}



.lead { text-align: center; font-size: 1.125rem; margin: 4em 0; }
@media screen and (max-width: 600px) {
  .lead  { margin: 3em 0; }
}

.mainvisual { position: relative; width: 100%; height: 100vh; object-fit: cover; display: flex; align-items: flex-end; }

.main-text  { position: relative; z-index: 2; margin-bottom: 80px; color: #FFF; font-size: 1.1rem; }
.main-text .maincopy { font-size: 3.5rem; margin-bottom: .5em; line-height: 1.25; }
.main-slider { position: absolute; inset: 0; margin: auto; }
.main-slider .swiper-slide img { width: 100%; height: 100vh; object-fit: cover; }

.main-slider .img2 { object-position: 70% center; }
.main-slider .img3 { object-position: 60% center; }

@media screen and (max-width: 900px) {
  .main-text .maincopy { font-size: 3rem; }
}
@media screen and (max-width: 600px) {
  .main-text .maincopy { font-size: 2.5rem; }
}

.home-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-buttons .btn { display: block; color: #FFF; padding: 40px calc(10% + 4rem) 40px 10%; position: relative; }
.home-buttons .btn::after { content: ''; width: 3.5rem; height: 3.5rem; display: block; background: #FFF url("../img/common/arrow-r.svg") no-repeat center center; border-radius: 50%; position: absolute; top: 0; bottom: 0; right: 5%; margin: auto; }
.home-buttons .btn .ttl { font-size: 1.5rem; font-weight: 600; }
.home-buttons .water-heater { background: #222222; }
.home-buttons .cleaning { background: #003FA3; }

@media screen and (max-width: 900px) {
  .home-buttons { grid-template-columns: 1fr; }
  .home-buttons .btn  { padding: 30px calc(5% + 40px) 30px 5%; }
  .home-buttons .btn::after{ width: 2rem; height: 2rem; right: 5%;  }
}

.overview-head { display: grid; grid-template-columns: minmax(0, 1fr) 70%; gap: 4rem; margin-bottom: 2em; font-family: 'Noto Serif JP', serif; font-size: 2rem; line-height: 1.5; align-items: flex-start; }
.overview-head .title { font-size: 1.25rem; color: #003FA3; font-family: 'Noto Sans JP', sans-serif; display: flex; align-items: center; white-space: nowrap; height: 2em; font-weight: 500; }
.overview-head .title::after { content: ''; width: 100%; margin-left: 1em; background: currentColor; height: 1px; display: block; flex-shrink: 1; }

@media screen and (max-width: 900px) {
  .overview-head { grid-template-columns: 1fr;font-size: 1.5rem; gap: 1rem;  }
}

.conts-contact { background: #003FA3; padding: 100px 0; color: #FFF;  }


@media screen and (max-width: 900px) {
  .conts-contact { padding: 60px 0; }
}

/*home*/
.home-business { display: grid; width: calc(100% - 20px); gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; margin: 0 auto; }
.home-business .title { font-size: 1.5rem; color: #003FA3; line-height: 1.4; height: 3em; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.home-business .title span { display: block; font-size: .6em; }

@media screen and (max-width: 900px) {
  .home-business  { grid-template-columns: 1fr; row-gap: 30px; }
}


.list-faq .item { border-bottom: 1px solid #DEDEDE; font-size: 1.125rem; }

.list-faq .question { font-weight: 500; padding: 1.5em 3em 1.5em 3em; position: relative; }
.list-faq .question::before,
.list-faq .answer .inner::before { font-size: 1.5em; margin: auto; width: 2em; display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; position: absolute; top: 1.5rem; left: 0; }

.list-faq .question::before {content: 'Q'; color: #003FA3;}
.list-faq .answer .inner::before { content: 'A'; color: #222222; }

.list-faq .question::after { content: '+'; width: 2rem ;height: 2rem; display: block; background: #003FA3; border-radius: 50%; position: absolute; right: 0; top: 1.5rem; margin: auto; text-align: center; line-height: 2rem; color: #FFF; display: flex; align-items: center; justify-content: center; }

.list-faq .item.open .question::after { content: 'ー'; font-size: .8rem; }

.list-faq .answer { display: none; }
.list-faq .answer .inner { padding: 1.5em 0 1.5em 3em; border-top: 1px solid #DEDEDE; position: relative; min-height: 5em; }

@media screen and (max-width :900px) {
  .list-faq .item { font-size: 1rem; }
}



.table-std { width: 100%; }
.table-std tr { border-bottom: 1px solid #FFF; }
.table-std th { width: 30%; border-right: 3px solid #FFF; background: #E5E5E5; padding: 1em 2em;  }
.table-std td { width: 70%; background: #F7F7F7; padding: 1em 3em; }

@media screen and (max-width :900px) {
  .table-std th, 
  .table-std td { padding: 1em; }
}


.wh-service { background: #003FA3; color: #FFF; padding: 80px 0; }
.wh-service .inner { width: 80%; margin: 0 auto;  }

.wh-service .list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; text-align: center; }
.wh-service .list p { min-height: 3em; display: flex; align-items: center; justify-content: center; margin-top: 1em; }

.wh-service .list-bottom { text-align: center; margin-top: 2em; }

@media screen and (max-width :900px) {
  .wh-service { padding: 50px 0; }
  .wh-service .inner { width: 90%; }
  .wh-service .list { display: flex; justify-content: center; flex-wrap: wrap; gap: 0;  }
  .wh-service .list > li { width: 30%; margin-right: 5%; margin-bottom: 2em;  }
  .wh-service .list > li:nth-child(3),
  .wh-service .list > li:nth-child(5) { margin-right: 0; }
}
@media screen and (max-width : 600px) {
  .wh-service .list > li:nth-child(n) { width: 45%; margin-right: 10%; }
  .wh-service .list > li:nth-child(2),
  .wh-service .list > li:nth-child(4),
  .wh-service .list > li:nth-child(5) { margin-right: 0; }
}

.wh-flow { width: 95%; margin: 0 0 0 auto; display: flex; justify-content: space-between; }
.wh-flow .title-section { width: 35%; }
.wh-flow .list-flow { width: 60%; counter-reset: listnum; }
.list-flow  > li { background: #003FA3; color: #FFF; padding: 25px 25px 25px 75px; display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 30px; align-items: center; counter-increment: listnum; position: relative; }
.list-flow  > li + li { margin-top: 10px; }
.list-flow  > li::before { content: counter(listnum, decimal-leading-zero); position: absolute; left: 25px; top: 25px; margin: auto; font-size: 1.125rem; }


.list-flow .title { font-size: 1.5rem; font-weight: bold; }
.list-flow img { display: block; width: fit-content; margin: 0 auto; }

@media screen and (max-width : 900px) {
  .wh-flow { flex-direction: column; }
  .wh-flow .title-section  { width: 100%; }
  .wh-flow .list-flow { width: 100%; }
}
@media screen and (max-width : 600px) {
  .list-flow  > li { padding: 20px 20px 20px 50px; grid-template-columns: 35px minmax(0, 1fr);  }
  .list-flow  > li::before { left: 20px; }
  .list-flow .title { font-size: 1.25rem; }
  .list-flow img  { width: 35px; height: 35px; }
}
.conts-price { background: url("../img/water-heater/price.jpg") no-repeat center center / cover; padding: 100px 0; position: relative; } 
.conts-price::before { content: ''; width: 70%; height: 100%; position: absolute; top: 0; right: 0; margin: auto; background: linear-gradient(to right, transparent, #FFF 50%);  }
.conts-price .inner { width: 30%; margin: 0 10% 0 auto; z-index: 2; position: relative; font-size: 1.125rem; }
.conts-price .inner .title-section { margin-left: -2em; }
.conts-price .inner .list-dot { margin-bottom: 1em; }


@media screen and (max-width : 900px) {
  .conts-price {padding: 60px 0; }
  .conts-price::before { width: 80%; }
  .conts-price .inner { width: fit-content;  }
}
@media screen and (max-width : 600px) {
  .conts-price::before { width: 100%; }
}

.wh-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wh-contact .btn { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 2rem;  padding: 40px 10%; align-items: center; color: #FFF; }
.wh-contact .form { background: #003FA3; }
.wh-contact .tel { background: #222222; }
.wh-contact .btn p span { display: block; font-size: 1.5rem; font-weight: 600; }

@media screen and (max-width : 900px) {
  .wh-contact { grid-template-columns: 1fr; }
  .wh-contact .btn  { grid-template-columns: 50px minmax(0, 1fr); }
}
/*home equipment*/
.he-service-list { display: grid; width: calc(100% - 20px); gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; margin: 0 auto; }
.he-service-list .title { font-size: 1.5rem; color: #003FA3; line-height: 1.4; height: 3em; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.he-service-list .title span { display: block; font-size: .6em; }


@media screen and (max-width : 900px) {
  .he-service-list  { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .he-service-list .title { font-size: 1.2rem; }
}
.he-features { width: 95%; margin: 0 0 0  auto;  display: flex; justify-content: space-between; }

.he-features .title-section { }
.he-features .list-feature { width: 55%; }

.list-feature { counter-reset: listnum; }
.list-feature > li { background: #003FA3; color: #FFF; padding: 50px; margin-bottom: 1px; position: relative; counter-increment: listnum; }
.list-feature > li::before { content: '('counter(listnum, decimal-leading-zero)')'; font-size: 1.5rem; display: inline-block; position: absolute; right: 100%; top: 0; margin: auto; width: 3em; text-align: center; color: #000; }
.list-feature > li:nth-child(2n) { background: #0B4BB1; }
.list-feature .title { font-size: 2.2rem; }

@media screen and (max-width : 900px) {
  .he-features { flex-direction: column; }
  .list-feature > li { padding: 40px; }
  .he-features .list-feature { width: calc(95% - 2em); margin: 0 0 0 auto;  }
  .list-feature .title { font-size: 1.5rem;}
}
@media screen and (max-width : 600px) {
  .list-feature > li { padding: 30px; }
  .list-feature .title { font-size: 1.3rem;}
}

.btn-contact { background: #003FA3; display: block; color: #FFF; }
.btn-contact .inner { display: flex; align-items: center; justify-content: center; position: relative; height: 180px; color: #FFF; font-size: 1.5rem; }
.btn-contact .inner::after { content: ''; width: 3.5rem; height: 3.5rem; display: block; background: #FFF url(../img/common/arrow-r.svg) no-repeat center center; border-radius: 50%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; }
.btn-contact .inner img { margin-right: .5em; }


@media screen and (max-width :900px) {
  .btn-contact .inner { font-size: 1.3rem; }
  .btn-contact .inner img { width: 50px; height: 50px; object-fit: contain; }
}
@media screen and (max-width :900px) {
  .btn-contact .inner { font-size: 1.2rem; justify-content: flex-start; }
}


.wh-quote { width: 95%; margin: 0 0 0 auto; display: flex; justify-content: space-between; }
.wh-quote .img { width: 52.63%; }
.wh-quote .text { width: 45%; }

.wh-quote .inner { padding-left: 2em; }
.wh-quote .list-dot { margin: 1em 0; }

@media screen and (max-width :900px) {
  .wh-quote { width: 100%; flex-wrap: wrap; }
.wh-quote .img { width: 100%; }
.wh-quote .text { width: 90%; margin: 0 auto 2em;  }
}

.conts-text-block { padding-top: 90px; position: relative; }
.conts-text-block .text { background: rgba(0,63,163,.93); color: #FFF;  width: 60%; margin: 0 auto; padding: 70px 5% 100px; position: relative; z-index: 2;  }
.conts-text-block .text .inner { max-width: 480px; margin: 0 auto; }
.conts-text-block .text .title { text-align: center; font-size: 2rem; }
.conts-text-block .text .title::after { content: ''; width: 20px; height: 3px; display: block; margin: 1rem auto 1.5em; background: #FFF; }


.conts-text-block::before { content: ''; width: 100%; height: 85%; margin: 0 auto; max-height: 50vw; display: block; position: absolute; top: 0; left: 0; right: 0; margin: auto; }
.he-houjin::before { background: url("../img/house-equipment/houjin.jpg") no-repeat top center / cover; }
.wh-about::before { background: url("../img/water-heater/about.jpg") no-repeat top center / cover; }
.conts-text-block.-area::before { background: url("../img/home/bg-area.jpg") no-repeat top center / cover; }

@media screen and (max-width :900px) {
  .conts-text-block .text { width: 80%; padding: 50px 5% 70px; } 
  .conts-text-block .text .title { font-size: 1.5rem; }
}
@media screen and (max-width :600px) {
  .conts-text-block .text { width: 90%; padding: 30px 5% 40px;} 
  .conts-text-block .text .title { font-size: 1.3rem; }
}

/*recruit*/
.recruit-lead { text-align: center; font-size: 3rem; font-weight: bold; margin: 2em 0; line-height: 1.4; }

@media screen and (max-width :900px) {
  .recruit-lead { font-size: 2.2rem; }
}
@media screen and (max-width :600px) {
  .recruit-lead { font-size: 1.5rem; }
}
.recruit-conts {  display: flex; justify-content: flex-end; width: 95%; margin:  0 0 0 auto; }
.recruit-conts .img { width: 45%; }
.recruit-conts .img img { width: 100%; height: 100%; object-fit: cover; }
.recruit-conts .text { margin-right: 5%; width: 50%; }
.recruit-conts .list > li { padding-left: 2em; }
.recruit-conts .list > li + li { margin-top: 1em; }
.recruit-conts .list .title { font-size: 2rem; color: #003FA3; font-weight: 600; }
.recruit-conts .list .title::before { content: '・'; margin-left: -1em; width: 1em; }

.recruit-conts.-reverse { flex-direction: row-reverse;  margin: 0 auto 0 0 ; }
.recruit-conts.-reverse .text { margin: 0 0 0 5%; }

@media screen and (max-width :900px) {
  .recruit-conts  { flex-direction: column; width: 100%; margin-bottom: 5rem;  }
  .recruit-conts .text  { width: 90%; margin: 0 auto 2em; }
  .recruit-conts.-reverse { flex-direction: column; }
  .recruit-conts.-reverse .text  { margin: 0 auto 2em; }
  .recruit-conts .img { width: 100%; height: 50vw; }
  .recruit-conts .img img { object-position: center 30%; }
  
  
  .recruit-conts .list .title { font-size: 1.5rem; }
  
}
@media screen and (max-width: 600px) {
  .recruit-conts .list .title { font-size: 1.3rem; }
}
.recruit-apply { background: #003FA3; color: #FFF; padding: 50px; }
.recruit-apply .btn { max-width: 90%; width: 415px; padding: 1.5em; border-radius: 3em; text-align: center; border: 1px solid; display: block; margin: 0 auto; }

.conts-contact .msg { text-align: center; margin-bottom: 3em; }
.conts-contact .msg p { margin-bottom: 1em; }

.form-conts .item { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 15px;  margin-bottom: 18px; align-items: flex-start;}
.form-conts .item label { width: 100%; display: flex; justify-content: space-between; align-items: center; padding-top: .5em;  }
.form-conts .required { background: #FFFFFF; border-radius: 3px; color: #D53869; padding: 0 .5em; display: inline-block; font-size: .75rem; }

@media screen and (max-width: 600px) {
  .form-conts .item { grid-template-columns: 1fr; }
  .form-conts .item label { width: 100%; }
  .form-conts .item .conts { width: 100%; }
}

.privacy-policy { width: 100%; height: 132px; border-radius: 5px; padding: 1.5em; background: #FFF; overflow-y: scroll; font-size: .75rem; color: #222;  }
.privacy-check { margin: 1em auto; width: fit-content; }
.privacy-check input[type="checkbox"] { display: none; }
.privacy-check .wpcf7-list-item-label::before { width: 1.5em; height: 1.5em; display: inline-block; background: #FFF url("../img/home/icon-check.svg") no-repeat center center/ 100% 100%; margin-right: .5em; vertical-align: middle; border-radius: 5px; }
.privacy-check input:checked ~ .wpcf7-list-item-label::before { background-image: url("../img/home/icon-check-on.svg"); }

.conts-contact .form-submit input[type="submit"] { padding: 1.5em; width: 250px; margin: 0 auto; display: block; font-size: 1rem; }


.privacy-policy h1 { font-size: 1.25rem; font-weight: bold; margin-bottom: .5em;  }
.privacy-policy h2 { font-size: 1.125rem; font-weight: bold; margin: 2em 0 .5em; }

.privacy-policy p { margin-bottom: 1em; }
.privacy-policy ol { counter-reset: listnum; }
.privacy-policy ol > li { padding-left: 1.5em; counter-increment: listnum; margin-bottom: .5em; }
.privacy-policy ol > li::before { content: counter(listnum)'.'; width: 1.5em; margin-left: -1.5em; display: inline-block; }

.tR { text-align: right; }

.form-conts .item input[type="text"], 
.form-conts .item input[type="email"],
.form-conts .item input[type="tel"],
.form-conts .item textarea { margin: 0; }