﻿@charset "UTF-8";
:root{
  --swiper-pagination-top: inherit;
  --swiper-pagination-bottom: 20px;
  --swiper-theme-color: #f04010;
  --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{
  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);
}
.contact-head {
  @media (max-width: 767px) {
    margin-bottom:20px;
  }
}
body[data-page-template="wp-form"]{
  .contact-head {
    width:50%;
    @media (max-width: 767px) {
      width:100%;
    }
  }
  .contact-body {
    width:50%;
    @media (max-width: 767px) {
      width:100%;
    }
  }
}
.contact-ttl {
  display:flex; gap:20px;
  @media (max-width: 767px) {
    display: flex;
    flex-direction: column;
  }
}
.contact-ttl img {
  max-height: 90px;max-width: 70px;
  @media (max-width: 767px) {
    display:none;
  }
}
.input-row{
  margin-bottom: 0;
}
.input-label, .hs-form label[id^="label-"]{
  position: relative;
  display: block;
  border-top:none;
  margin: 22px 0 10px;
  padding: 0;
  font-weight: bold;
}
.hs-form .hs-form-required {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  padding: 1px 8px;
  color: #fff;
  font-size: 0;
  background: #F04018;
}
.hs-form .hs-form-required:after{
  content: "必須";
  font-size:12px;
}
.input-label:before{
  display:none;
}
.form .input{
  border:none;
  margin-bottom: 0px;
}
.input-col{
  @media (max-width: 767px) {
    margin-bottom: 0;
  }
}
.input-col p{
  display:none;
}
.form-pp{
  display:none;
}
textarea[data-efo-item-title="お問い合わせ内容"]{
  height: 80px;
}
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea, .form select{
  padding: 13px 16px;
}
.form select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  outline: none;
  font-size: 12px;
}
.form-btn-txt{
  display:none;
}
.hs-form-field{
  position: relative;
}
.hs-submit .actions .hs-button{
  width: 100%;
  height: 64px;
  color: #fff;
  font-weight: bold;
  transition: .3s;
  cursor: pointer;
  background: #F04018 url(https://www.atoj.co.jp/cms/atoj/assets/img/contact/icon_arrow_01.svg) no-repeat center right 20px;
  background-size: 16px 7px;
}
.hs-submit .actions .hs-button:hover {
  background-color: #000;
}
.form .hs-form input[type="radio"] {
  position: absolute;
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  }
.form .hs-form label:has(input[type="radio"]) {
  padding-left: 28px;
  font-size: 14px;
}
.form .hs-form label:has(input[type="radio"]):before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid #E0E0E0;
  background: #F5F5F5;
}
.form .hs-form label:has(input[type="radio"]:checked):before {
  border: 5px solid #F04018;
  background: #fff;        
}
.form .hs-form input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form .hs-form .hs-privacy_agree{
  margin: calc(24 / 16 * 1rem) auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
.form .hs-form .hs-privacy_agree label {
  padding-left: 28px;
  font-size: 14px;
}
.form .hs-form .hs-privacy_agree label .hs-form-required{
  display:none;
}
.form .hs-form .hs-privacy_agree label:has(input[type="checkbox"]):before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
  background: #F5F5F5;    
}
.form .hs-form .hs-privacy_agree label span{
  font-weight: bold;
  font-size: 1rem;
  position: relative;
  top:-2px;
}
.form .hs-form .hs-privacy_agree label:has(input[type="checkbox"]:checked):before {
  border-color: #F04018;
  background: #F04018;
}
.form .hs-form .hs-privacy_agree label:has(input[type="checkbox"]:checked):after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  width: 8px;
  height: 11px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}
.hs-error-msg{
  position: absolute !important;
  background: #fcc;
  padding:.2em .5em;
  color: black;
  top: 0;
  right: 0;
  font-weight: normal;
  font-size: calc(12 / 16 * 1rem) !important;
  text-align: center;
}
.form .hs-form .hs-privacy_agree .hs-error-msg{
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  top:-2rem;
  padding-left:0;
}
.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_error_rollup {
  display: none !important;
}
.hs_privacy_agree a{
  color:#F04018;
  text-decoration:underline;
}
.hs_privacy_agree a:hover{
  text-decoration:none;
}
.hs-form input.error{
  background-color: #ffeaea;
}