﻿/*contact.css*/
:root{
  --swiper-pagination-top:inherit;
  --swiper-pagination-bottom: 20px;
  --swiper-theme-color: #0285C1;
  --swiper-pagination-bullet-size:12px;
  --swiper-pagination-bullet-horizontal-gap:8px;
  --swiper-navigation-size: 24px;
  --swiper-navigation-sides-offset:0;
  --swiper-navigation-top-offset:45%;
  --swiper-pagination-top:-6px;
  --smz-main-color: #0285C1;
  --smz-fs-1:min(5.33vw, 32px);
  --smz-fs-2:min(4.8vw, 22px);
  --smz-fs-3: min(3.73vw , 18px);
  --smz-fs-4: min(3.73vw , 16px);
  --smz-fs-5:min(2.67vw, 14px);
  --smz-fs-6:min(2.67vw , 12px);
  --smz-fs-7:min(2.67vw , 10px);
  --vw-base-width:1200;
}
.swiper {
  width: 100%;
  height: auto;
}
.swiper-pagination{
  height:10px;
  position: relative;
}
.swiper-button-next, .swiper-button-prev {
  width: min(8vw, 32px);
  height: min(14.13vw, 53px);
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
}
html{
  overflow-y:scroll;
}
body{
  color:#323232;
  /*font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;*/
  font-family: 'Noto Sans JP', sans-serif;
  margin:0;
}
a, button, input[type="submit"]{
  transition: .3s;
  -webkit-transition: .3s;
}
a:hover, button:hover, input[type="submit"]:hover{
  opacity: .85;;
}
.text-center{
  text-align:center;
}
@media screen and (max-width: 1023px) {
  .pc-only{
    display: none !important;
  }
}
@media screen and (min-width: 600px) {
  .sp-only{
    display: none !important;
  }
}
.contact{
  width:min(calc(100vw - 15px), 1100px);
  display: flex;
  margin:0 auto 0 auto;
  flex-wrap:wrap;
}
@media screen and (max-width: 768px) {
  .contact{
    width:100%;
  }
}
.contact-content{
  width: min(calc(600 / var(--vw-base-width) * 100vw), 600px);
  margin-bottom:60px;
  line-height:1.8;
}
.contact-content-extend{
  width: min(46vw, 600px);
}
@media screen and (max-width: 768px) {
  .contact-content{
    width: calc(100% - 30px);
    margin:  0 auto 20px;
  }
  .contact-content-extend{
    width: calc(100% - 30px);
  }
}
.contact-content a{
  color: inherit;
  text-decoration: underline;
}
.contact-content a[target="_blank"]:hover {
  text-decoration: none;
}
.contact-content a[target="_blank"]:not(.seminar-form__btn):after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: top;
  margin: 8px 0 0 8px;
  background: url(/cms/mer/img/common/icon_external_01.svg) no-repeat 0 0;
  background-size: 100% 100%;
}
.contact-site-id-area{
  width: min(calc(480 / var(--vw-base-width) * 100vw), 300px);
  position: relative;
  margin-left: -15px;
}
.contact-site-id-area__logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.contact-content__ttl{
  font-size: var(--smz-fs-1);
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0.83em;
}
.contact-content__ttl small{
  font-size: 42%;
  display: block;
  font-weight: normal;
}
.contact-content-desc__ttl{
  color: var(--smz-main-color);
  text-align: center;
  font-size: min(calc(20 / 375 * 100vw), 28px);
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 1em;
}
.contact-content-desc__recommend{
  line-height: 1.5;
  padding-left: 0;
}
.contact-content-desc__recommend li{
  margin-bottom: 10px;
  position: relative;
  list-style:none;
  padding-left: 30px;
  font-size: var(--smz-fs-3);
}
.contact-content-desc__recommend li:before {
  position: absolute;
  background: url(https://mercart.jp/cms/mer/img/contact/icon-check.svg) no-repeat center;
  background-size: contain;
  top:0;
  left:0;
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
}
.contact-content-desc__overview{
  font-size: min(3.73vw , 18px);
  margin-bottom: 2em;
}
.contact-form{
  width: min(calc(var(--vw-base-width) / 480 * 100vw), 450px);
  padding: min(4vw, 30px);
  box-sizing: border-box;
  margin: 0 0 0 auto;
  position: relative;
}
.contact-form-extend{
  /*1200px基準*/
  width:min(calc(var(--vw-base-width) / 480 * 100vw), 500px);
}
@media screen and (max-width: 768px) {
  .contact-form{
    width: 100%;
  }
  .contact-form-extend{
    width: 100%;
  }
}
.contact-form-inner{
  position:sticky;
  top: 40px;
  padding-bottom:40px;
}
.contact-form__msg{
  line-height: 1.75;
  margin-top: 0;
  margin-bottom:25px;
  font-size: var(--smz-fs-4);
}
.hs-form-field{
  margin-bottom: 20px;
  position: relative;

}
.hs-form label[id^="label-"] {
  margin: 0 0 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size:  var(--smz-fs-4);
}
.hs-form .hs-form-required{
  display: inline-block;
  margin: 0 0 0 7px;
  padding: 0 7px;
  border: 1px solid rgb(255, 0, 0);
  border-radius: 2px;
  color: rgb(255, 0, 0);
  font-size: var(--smz-fs-7);
  line-height: 1.75;
}
.hs-form-required{
  font-size:0 !important;
}
.hs-form-required:after{
  content:"必須";
  font-size: var(--smz-fs-7);
}
.hs-form .input{
  margin: 0 0 12px;
}
.hs-form .input input[type="text"],
.hs-form .input input[type="tel"],
.hs-form .input input[type="email"],
.hs-form .input textarea, .hs-form .input select {
  width: 100%;
  padding: min(3.73vw, 10px) 5px;
  border: 1px solid #ccc;
  border-radius: min(0.285714285714286vw, 4px);
  outline: none;
  font-size: var(--smz-fs-4);
  box-sizing: border-box;
}
.hs-form .input textarea{
  height:6em;
}
.mer-form-input textarea.inquiry-height{
  height:5.5em;
}
.hs-form input[type="text"]::placeholder,
.hs-form input[type="email"]::placeholder,
.hs-form textarea::placeholder,
.hs-form input[type="tel"]::placeholder {
  color: #b3b3b3;
  
}
.hs-form-booleancheckbox{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 0 25px;
  font-weight: bold;
  font-size: var(--smz-fs-4);
}
.hs-form .hs-input[id*="privacy_agree"]{
  position: absolute;
  opacity: 0;
  appearance: none;
}
.hs-form label[for*="privacy_agree"]{
  display: flex;
  position: relative;
  gap:10px;
  cursor: pointer;
}
.hs-form label[for*="privacy_agree"] .hs-form-required{
  display: none;
}
.hs-form label[for*="privacy_agree"]:before{
  content: "";
  display: block;
  width: min(4.8vw, 20px);
  height: min(4.8vw, 20px);
  border: 1px solid var(--smz-main-color);
  border-radius: 4px;
  background: #fff;
}
.hs-form label[for*="privacy_agree"]:has(input[type="checkbox"]:checked):before{
  border-color: var(--smz-main-color);
  background: var(--smz-main-color);
}
.hs-form label[for*="privacy_agree"]:has(input[type="checkbox"]:checked):after{
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: min(1.65vw, 6px);
  height: min(2.64vw, 10px);
  border-right: min(0.53vw, 2px) solid #fff;
  border-bottom: min(0.53vw, 2px) solid #fff;
  transform: rotate(45deg);
}
.hs-form label[for*="privacy_agree"] a{
  color: var(--smz-main-color);
  text-decoration: underline;
}
.mer-form-btn button[type="submit"], .mer-form-btn a,
.hs-submit input[type="submit"],.hs-submit button[type="submit"]{
  cursor: pointer;
  width: 100%;
  padding: 15px;
  border-radius:40px;
  color: #fff;
  border:none;
  font-size: var(--smz-fs-3);
  font-weight: bold;
  text-align: center;
  background: #0285C1;
  border: 3px solid #fff;
  box-shadow: 0 0 8px 5px #e0f0f8;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  text-decoration:none;
}
.mer-form-btn a{
  width: auto;
  position:relative;
}
.mer-form-msg-external{
  text-align: center;
  font-weight: bold;
}
.mer-form-btn.external a:after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 6%;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}
input.error{
  background-color: #ffeaea;
}
.mer-form-input, .mer-form-agree{
  position: relative;
}
.hs-error-msgs{
  position: absolute;
  list-style: none;
  width: 100%;
  right:0;
  top: -1.1em;
  padding: 0;
}
.hs-error-msgs label a{
  display:none;
}
.hs_error_rollup{
  display: none !important;
}
.hs-error-msg{
  top: 0 !important;
}
.hs-error-msg{
  position: absolute;
  background: #fcc;
  padding:.2em .5em;
  color: black;
  top: -2.1em;
  right: 0;
  font-weight: normal;
  font-size: var(--smz-fs-6);
  text-align: center;
}
.hs_privacy_agree .inputs-list{
  padding-left: 0;
}
.hs-form .hs_privacy_agree .hs-error-msg{
  left: 50%;
  transform: translateX(-50%);
  width: 53%;
  top: -2.1em !important;
}
.hs-error-msg:after{
  content: "　";
  position: absolute;
  display: inline-block;
  border-width: 6px;
  border-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-top-color: #fcc;
  bottom: -10px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
  height: 1px;
  width: 1px;
}
.hs-form .hs-submit button[type="submit"]:disabled{
  opacity:.5;
}
.hs-form-loader{
  filter: invert(1);
}
.tel-area{
  display:flex;
  display:-webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items:center;
  -webkit-align-items:center;
  flex-direction: column;
  padding:10px 0 20px;
  width: 100%;
  border:solid 1px #293F49;
  background-color: #293F49;
  color: #fff;
  border-radius: 5px;
}
.tel-area__title{
  color: inherit;
  font-weight: 600;
  font-size:var(--smz-fs-2);
  margin: 0 0 0px;
}
.tel-area__biz-hours{
  color: inherit;
  margin:0 0px 10px;
}
.tel-area__tel-btn{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 57px;
  padding: 0 80px 0;
  border-radius: 35px;
  white-space: nowrap;
  text-decoration: none !important;
  line-height: 1.4;
  color: #fff;
  background: #0285C1;
  font-family: "jost";
  font-weight:bold;
  font-size:var(--smz-fs-3);
}
@media (max-width:599px) {
  .tel-area__tel-btn{
    font-size:20px;
    padding: 0 46px 0;
  }
}
.tel-area__tel-btn span{
  color: #fff;
}
.tel-area__tel-btn:hover{
  opacity:0.8;
}
.tel-area__tel-btn span:before{
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  background:url(https://mercart.jp/cms/mercart/img/common/icon-tel-grn.svg) no-repeat center;
  filter: grayscale(1) brightness(10);
  background-size:contain;
  margin-right: 8px;
}
.tel-area__tel-btn span:after{
  position: absolute;
  display:block;
  content:"";
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: translateY(-50%) rotate(45deg);
  -webkit-transform: translateY(-50%) rotate(45deg);
}
.footer{
  padding:38px 0;
  background: #293F49;
}
.footer .footer-copyright{
  color:#fff;
  text-align:center;
}
.footer .footer-copyright .footer-logo{
  padding-right:10px;
  position:relative;
  top:3px;
}
.footer .footer-copyright .footer-logo img{
  width: min(21.3vw, 100px);
}

/*complete*/
.contact-comp{
  width: min(calc(700px + 2rem + 2rem), calc(85% + 15px + 15px));
}
body.mode-cta .contact-comp{
  width: min(calc(1000px + 2rem + 2rem), calc(85% + 15px + 15px));
  margin-left: auto;
  margin-right: auto;
}
body:not(.mode-cta) .contact-comp{
  margin: 20vh auto 38vh;
}
.contact-comp-ttl{
  font-size: var(--smz-fs-1);
  text-align: center;
  margin-top: 1.5em;
  margin-bottom: 0.6em;
}
.contact-comp-msg{
  text-align: center;
  line-height: 1.8;
  font-size: var(--smz-fs-4);
}
/*wp-form-comp相談スケジュール表示*/
.wp-comp-cta{
  background: linear-gradient(81deg, #00A362 0%, #007FA6 100%);
  text-align: center;
  padding: 2em;
  width: 60%;
  max-width:700px;
  margin: 0 auto 2em;
}
@media (max-width:599px) {
  .wp-comp-cta{
    font-size: 62.5%;
    padding: 1em;
    width: calc(100% - 2em - 15px - 15px);
  }
}
.wp-comp-cta__head{
  color: #fff;
}
@media (max-width:599px) {
  .wp-comp-cta__head{
    font-size: 1.4em;
  }
}
.wp-comp-cta__desc{
  color: #fff;
  line-height: 1.7;
}
@media (max-width:599px) {
  .wp-comp-cta__desc{
    font-size: 1.3em;
  }
}
.wp-comp-cta__sch-btn, .wp-comp-cta__tel-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 57px;
  padding: 0 32px 0 24px;
  border-radius: 35px;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 3px 0 rgb(0 0 0 / 30%);
  width: 50%;
  margin: 0 auto;
  font-size: 1em;
}
@media (max-width:599px) {
  .wp-comp-cta__sch-btn, .wp-comp-cta__tel-btn{
    width: 80%;
    font-size: 1.4em;
  }
}
.wp-comp-cta__sch-btn:hover, .wp-comp-cta__tel-btn:hover{
  opacity:.8;
}
.wp-comp-cta__sch-btn{
  color: #323232;
  font-weight: bold;
  background: #FFF46F;
  margin-bottom: 1.8em;
}
.wp-comp-cta__sch-btn:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(https://mercart.jp/cms/mercart/img/contact/icon-sch.svg) no-repeat center;
  background-size: contain;
  margin-right: 8px;
}
.wp-comp-cta__tel-btn{
  font-family: "Montserrat";
  color: #00A38E;
  font-weight: bold;
  background: #FFF;
  margin-bottom: 1.8em;
}
.wp-comp-cta__tel-btn:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(https://mercart.jp/cms/mercart/img/common/icon-tel-grn.svg) no-repeat center;
  background-size: contain;
  margin-right: 8px;
}
.wp-comp-cta__sch-btn:after, .wp-comp-cta__tel-btn:after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: translateY(-50%) rotate(45deg);
  transition: .2s;
}
.swiper-slide{
  aspect-ratio: 16 / 9;
  background-color:#56a0b6;
}
.swiper-slide img{
  object-fit: contain;
  height: 100%;
  backdrop-filter: blur(10px);
}
.complete .contact-content{
  width: min(calc(100% - 30px), 100%);
}
.complete .contact-content__ttl{
  text-align:center;
}
.complete .contact-content-desc{
  text-align:center;
  width: min(calc(90% - 30px), 700px);
  margin:0 auto;
}