.p-contact-fv {
  height: 240px;
  padding-left:  calc(100%* 180 / 1600);
  background-image: url(../images/fv/fv-contact.webp);
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
  position: relative;
  overflow-x: clip;
  @media(min-width: 1601px){
    aspect-ratio: 1600 / 240;
    height: auto;
  }
  @media(max-width: 820px){
    height: 200px;
    padding-left: var(--pi);
    background-image: url(../images/fv/fv-contact@sp.webp);
  }
  @media(max-width:480px){
      background-position: center top;
  }
  &::before{
    content: "";
    display: block;
    background: linear-gradient(0deg, rgba(0, 70, 153, 0.15) 0%, rgba(0, 70, 153, 0.15) 100%);
    mix-blend-mode:  lighten;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

.p-contact-fv__bg-text {
  width:  calc(100%* 782 / 1600);
  max-width: 782px;
  position: absolute;
  top: 40px;
  left: 0;
  @media(max-width: 820px){
    width: 342px;
    top: 20px;
  }
}

.p-contact-fv__ttl {
  padding-top: 57px;
}

.p-contact-topBtn__block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  width: 672px;
  margin-inline: auto;
  margin-top: 80px;
  @media(max-width: 820px){
    width: 335px;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 40px;
  }
}

.p-contact-topBtn__btn a{
  font-size: 18px;
  align-content: center;
  text-align: center;
  border: 1px solid var(--main);
  height: 68px;
}

.p-contact-topBtn__btn--tel {
  color: var(--main);
  background-color: #D9EAF2;
}

.p-contact-topBtn__btn--mail {
  color: var(--base);
  background-color: var(--main);
}
.p-contact-inner{
  max-width: 1288px;
  margin-inline: auto;
  padding-inline: var(--pi);

}

.p-contact-tel__container {
  margin-top: 80px;
  @media(max-width: 820px){
    margin-top: 40px;
  }
}

.p-contact-section__ttl {
  font-size: 32px;
  color: var(--main);
  padding-bottom: 24px;
  border-bottom: 1px solid ;
  @media(max-width: 820px){
    font-size: 20px;
    padding-bottom: 16px;
  }
}

.p-contact-section__readText {
  margin-top: 60px;
  line-height: 2.4;
  letter-spacing: 0.1em;
  text-align: center;
  @media(max-width: 820px){
    margin-top: 42px;
    line-height: 2;
    letter-spacing: 0;
  }
}

.p-contact-tel__hour {
  margin-top: 40px;
  font-size: 24px;
  letter-spacing: 0.05em;
  text-align: center;
  @media(max-width: 820px){
    margin-top: 42px;
    line-height: 1.5;
    font-size: 20px;
  }
}

.p-contact-tel__btn-block {
  max-width: 960px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
  @media(max-width: 820px){
    gap: 16px;
  }
}

.p-contact-tel__btn a{
  background-color: var(--main);
  color: var(--base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 120px;
  @media(max-width: 820px){
    height: 90px;
  }
}

.p-contact-tel__btn-text {
  letter-spacing: 0.05em;
  @media(max-width: 820px){
    font-size: 14px;
  }
}

.p-contact-tel__btn-num {
  font-size: 56px;
  font-family: var(--zenkaku);
  font-weight: 700;
  @media(max-width: 820px){
    font-size: 28px;
  }
}

.p-contact-section__list-container {
  max-width: 965px;
  margin-inline: auto;
}
.p-contact-section__list-container--tel{
  margin-top: 60px;
  @media(max-width: 820px){
    margin-top: 40px;
  }
}
.p-contact-section__list-container--mail{
  margin-top: 180px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  @media(max-width: 820px){
    margin-top: 140px;
    gap: 40px;
  }
}
.p-contact-section__list-ttl {
  color: var(--main);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.05em;
  padding-left: 23px;
  position: relative;
  @media(max-width: 820px){
    font-size: 18px;
    line-height: 1.5;
  }
  &::before{
    content: "";
    width: 15px;
    aspect-ratio: 15 / 25;
    background-image: url(../images/common/icon-contact.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    /* translate: 0 -50%; */
  }
}

.p-contact-section__list-block {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  @media(max-width: 820px){
    margin-top: 24px;
    gap: 8px;
  }
}
.p-contact-section__list-block--before_none{
  @media(max-width: 820px){
    gap: 16px;
  }
}
.p-contact-section__text {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  padding-left: 24px;
  position: relative;
  @media(max-width: 820px){
    padding-left: 16px;
    font-size: 16px;
  }
  &::before{
    content: "";
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--main);
    display: block;
    position: absolute;
    top: 14px;
    left: 0;
    @media(max-width: 820px){
      top: 12px;
    }
  }
}

.p-contact-mail__container {
  margin-top: 180px;
  @media(max-width: 820px){
    margin-top: 80px;
  }
}

.p-contact-mail__content {
  margin-top: 40px;
  padding: 60px 40px;
  background-color: #D9EAF2;
  position: relative;
  @media(max-width: 820px){
    padding: 24px 20px;
  }
}

.p-contact-section__btn{
  display: block;
  line-height: 2.4;
  color: var(--main);
  text-decoration: underline;
  letter-spacing: 0.1em;
  margin-top: 80px;
  margin-inline: auto;
  transition: var(--transition);
  @media(max-width: 820px){
    margin-top: 40px;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-contact-section__btn:hover{
    opacity: 0.7;
  }
}


.p-contact-section__hide-container{
  padding-top: 20px;
  --height: 0;
  height: var(--height);
  overflow: hidden;
  transition: var(--transition);
  @media(max-width: 820px){
    padding-top: 0;
  }
}

/* snow monkey form */
.smf-form{
  display: flex;
  flex-direction: column;
  gap: 60px;
  @media(max-width: 820px){
    gap: 40px;
  }
}
.smf-form .required{
  position: relative;
  &::before{
    content: "必須";
    color: var(--base);
    letter-spacing: 0.05em;
    padding: 4px 16px;
    background-color: #FF3F24;
    display: block;
    position: absolute;
    top: 50%;
    left: 255px;
    translate: 0 -50%;
  }
}
@media(max-width: 1200px){
  .smf-form .required::before{
    top: 0!important;
    left: 210px;
    translate: 0;
  }
}
@media(max-width: 820px){
  .smf-form .required::before{
    left: 160px;
    top: -3px!important;
  }
}
.smf-item{
  display: grid;
  grid-template-columns: 202px 1fr;
  gap:  calc(100%* 143 / 1160);
  align-items: center;
  @media(max-width: 1200px){
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.smf-item__label{
  font-size: 24px;
  letter-spacing: 0.05em;
  @media(max-width: 820px){
    font-size: 18px;
  }
}

.smf-radio-buttons-control__control{
  display: flex;
  gap: 24px;
  @media(max-width: 820px){
    flex-direction: column;
    gap: 16px;
  }
}
.smf-radio-button-control__label{
  letter-spacing: 0.1em;
}

input[type=radio]{
  margin-top: 0!important;
  border-color: var(--text-color)!important;
}
input:checked{
  background-color: var(--base)!important;
  border-color: var(--text-color)!important;
  &::before{
    background-color: #868686!important;
    width: 8px!important;
    height: 8px!important;
    top: 50%!important;
    left: 50%!important;
    translate: -50% -50%;
  }
}
input[type=text]{
  letter-spacing: 0.1em;
  border-radius: 0!important;
}
input[name=company],
div[data-name=company],
input[name=email],
div[data-name=email],
input[name=city],
div[data-name=city],
input[name=room],
div[data-name=room]{
  width: 100%!important;
  height: 60px!important;
  border-radius: 0!important;
  align-content: center;
}
input[name=text],
div[data-name=text]{
  width: 100%!important;
  height: 60px!important;
  border-radius: 16px!important;
  align-content: center;
}
input[type=tel]{
  max-width: 160px!important;
  width: 100%!important;
}
select{
  height: 60px;
  width: 145px;
  border-radius: 0!important;
}
div[data-name=textarea]{
  width: 100%!important;
}

.smf-item__col--controls .smf-item__controls{
  display: flex;
  gap: 24px;
  align-items: center;
  @media(max-width: 960px){
    gap: 12px;
  }
  @media(max-width: 820px){
    gap: 6px;
  }
}
.name .smf-item__controls{
  @media(max-width: 820px){
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}
.lastName,
.firstName{
  max-width: 240px!important;
}

.address .smf-item__controls{
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.textarea{
  align-items: flex-start;
  &::before{
    top: 0!important;
    translate: 0!important;
  }
}
textarea[name=textarea]{
  min-height: 300px;
  border-radius: 0!important;
  @media(max-width: 820px){
    min-height: 133px;
  }
}

.smf-action{
  position: absolute;
  left: 50%;
  bottom: -40px;
  translate: -50% 100%;
  @media(max-width:820px){
    display: flex;
    gap: 1em;
  }
}


.smf-action button{
  font-weight: 700;
  color: var(--base)!important;
  letter-spacing: 0.05em;
  background-color: var(--main)!important;
  background-image: unset!important;
  height: 60px;
  width: 251px;
  padding-left: 32px!important;
  align-content: center;
  transition: var(--transition)!important;
  @media(max-width: 820px){
    width: 335px;
  }
  &::before{
    content: "";
    width: 23px;
    height: 8px;
    background-image: url(../images/common/btn-arrow.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    top: 50%;
    right: 32px;
    translate: 0 -50%;
    transition: var(--transition);
  }
}
@media (hover: hover) and (pointer: fine) {
  .smf-action button:hover{
    opacity: 0.7;
  }
  .smf-action button:hover::before{
    translate: 10px -50%;
  }
}

.smf-button-control__control[data-action="complete"],
.smf-button-control__control[data-action="back"]{
  width: calc(335px / 2)!important;
}

.smf-error-messages{
  position: absolute;
}

.smf-action .smf-button-control + .smf-button-control{
  @media(max-width:1200px){
    margin-left: 0!important;
  }
}