@charset "UTF-8";
/* お問い合わせ */
.page-contact .page--content .text-1 {
  margin-bottom: 47px;
  line-height: 1.75;
  text-align: center;
}
.page-contact .page--content .heading-1 {
  margin-bottom: 35px;
  padding: 19px 15px 20px 30px;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.45;
  background-image: url("../img/page/heading-1-bg.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
}
.page-contact .page--content .heading-1::before {
  content: '';
  display: block;
  width: 4px;
  background-color: #91765b;
  position: absolute;
  top: 10px;
  left: 8px;
  bottom: 9px;
}
@media screen and (min-width: 1200px) {
  .page-contact .page--content .text-1 {
    margin-bottom: 54px;
  }
  .page-contact .page--content .heading-1 {
    margin-bottom: 63px;
    padding: 17px 20px 20px 40px;
    font-size: 22px;
  }
}

/****************** フォーム ******************/

.syokusyu {
	display: none;
}

.contact-inner{
  max-width: 850px;
  margin: 0 auto;
}

.contact-info{
  text-align: center;
  border-bottom: 1px #ccc solid;
  margin-bottom: 50px;
  padding-bottom: 30px;
  p{
    margin-bottom: 1em;
    &.tel{
      font-size: 18px;
      font-weight: bold;
    }
  }
}
.wp-block-snow-monkey-forms-item{
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  @media screen and (max-width: 768px) {
    display: block;
  }
}
.smf-item__col--label{
  width: 265px;
  @media screen and (max-width: 768px) {
    width: 100%;
  }
}
.smf-item__col--controls{
  width: calc(100% - 200px);
  @media screen and (max-width: 768px) {
    width: 100%;
  }
}
.smf-item--divider{
  .smf-item__col--controls{
    width: 100%;
    text-align: center;
  }
}
input[type=text],input[type=email]{
  width: 60%;
  @media screen and (max-width: 768px) {
    width: 100%;
  }
}
.smf-action .smf-button-control__control {
  position: relative;
  background-color: #9d7956;;
  background-image: none;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  width: 250px;
  padding: 15px 37px;
  text-align: left;
  text-decoration: none;
  border: 0;
  outline: 0;
  transition: 0.3s ease; 
  margin: 50px auto;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 37px;
    width: 9px;
    height: 9px;
    margin: auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    box-sizing: border-box;

    @media screen and (max-width: 768px) {
      right: 20px;
    }
  }

  &:hover {
    opacity: 0.7;
  }

  &[data-action="back"]{
    background: #B5B5B5;
    text-align: right;
    @media screen and (max-width: 768px) {
      margin-bottom: 0;
    }
    &:after{
      transform: rotate(225deg);
      left: 37px;
      right: inherit;
      @media screen and (max-width: 768px) {
        left: 20px;
      }
    }
  }
}
.smf-item__label{
  position: relative;
  @media screen and (max-width: 768px) {
    margin-bottom: 10px;
  }
}
.required .smf-item__label::after {
  content: "必須";
  background-color: #f0ad4e;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  min-width: 10px;
  padding: 3px 7px;
  margin: 0px 5px;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
  border-radius: 10px;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  @media screen and (max-width: 768px) {
    right: 0;
  }
}
.form-privacy{
  background-color: #f7f7f7;
  border: 1px #eee solid;
  padding: 25px;
  height: 200px;
  border-radius: 4px;
  overflow-y: scroll;
  margin-bottom: 30px;
  font-size: 14px;
  p{
    margin-bottom: 1em;
  }
}

.contact-confirm{
  display: none;
}
.contact-thanks{
  display: none;
}
[data-screen="confirm"] {
  .contact-confirm{
    display: block;
  }
  .contact-page,.form-privacy{
    display: none;
  }
  [data-name="checkboxes-privacy"]{
    display: none;
  }
  .smf-action{
    display: flex;
    justify-content: center;
    @media screen and (max-width: 768px) {
      display: block;
    }
  }
}
[data-screen="complete"]{
  .contact-thanks{
    display: block;
  }
  .contact-page{
    display: none;
  }
}