@charset "UTF-8";
/* Scss Document */
/* Scss Document */
.contact {
  width: 100%;
  margin: 0;
  padding: 60px 100px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

@media (max-width: 1200px) {
  .contact {
    padding: 60px 40px 0; } }
@media (max-width: 800px) {
  .contact {
    padding: 60px 20px 0; } }
.intro {
  margin: 70px 0 0;
  padding: 0; }
  .intro__num {
    margin: 30px 0 0;
    padding: 0 0 0 34px;
    color: #f87974;
    font-size: 2.6666666667rem;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    line-height: 1.0;
    background-image: url("../img/common/phone.svg");
    background-position: top 15px left;
    background-repeat: no-repeat;
    background-size: 24px; }
  .intro__time {
    margin: 10px 0 0; }

.byMail {
  margin: 80px 0 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap; }
  .byMail__title {
    width: 100%;
    margin: 0 0 50px;
    padding: 0 0 30px;
    font-size: 1.7777777778rem;
    font-weight: 700;
    line-height: 1.0;
    border-bottom: 4px double #3a3535; }
    .byMail__title span {
      padding: 0 0 0 44px;
      background-image: url("../img/common/mkr01.svg");
      background-position: top 15px left;
      background-repeat: no-repeat;
      background-size: 24px; }
  .byMail__txt {
    line-height: 1.7; }
    .byMail__txt span {
      margin: 10px 0 0;
      display: block; }

@media (max-width: 700px) {
  .byMail__title {
    font-size: 1.3333333333rem; }
    .byMail__title span {
      display: inline-block;
      background-position: top left; } }
.precautions {
  margin: 40px 0 0;
  padding: 40px;
  background-color: #FFF;
  border: 1px solid #e60012;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px; }
  .precautions__title {
    margin: 0 0 20px;
    padding: 0 0 0 28px;
    color: #e60012;
    font-size: 1.1111111111rem;
    font-weight: 700;
    line-height: 1.0;
    background-image: url("../img/common/exclamation.svg");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 18px; }
  .precautions__data {
    margin: 0;
    padding: 0; }
    .precautions__data--list {
      margin: 0;
      padding: 0;
      list-style: none; }
    .precautions__data--item {
      margin: 0 0 5px;
      padding: 0 0 0 18px;
      color: #e60012;
      position: relative; }
      .precautions__data--item:last-of-type {
        margin: 0; }
      .precautions__data--item::before {
        content: '';
        width: 8px;
        height: 8px;
        position: absolute;
        top: 10px;
        left: 0;
        background-color: #e60012;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%; }

@media (max-width: 800px) {
  .precautions {
    padding: 30px 20px; } }
.required {
  padding: 0 5px;
  color: #FFF;
  font-size: 0.7777777778rem;
  font-style: normal;
  line-height: 1.0;
  background-color: #e60012; }

#php_form {
  max-width: 1300px;
  margin: 40px 0 0;
  padding: 0; }
  #php_form.preview {
    margin: 80px auto 0; }
  #php_form.sendmail {
    width: 100%;
    max-width: 100%;
    margin: 80px 0 0; }
  #php_form .btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 320px;
    height: 60px;
    margin: 60px auto 0;
    font-size: 1rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    color: #FFF;
    display: block;
    background-color: #f87974;
    border: 1px solid #f87974;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    position: relative;
    transition: 0.1s linear; }
    #php_form .btn.back {
      color: #3a3535;
      background-color: #FFF;
      border: 1px solid #3a3535; }
      #php_form .btn.back:hover {
        color: #3a3535 !important;
        background-color: #F3F3F3; }
    #php_form .btn:hover {
      cursor: pointer;
      color: #f87974 !important;
      text-decoration: none;
      background-color: #FFF;
      top: 1px;
      left: 1px; }
  #php_form p.bot {
    margin: 30px 0 0;
    text-align: center; }

.contactForm {
  width: 100%;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-start;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .contactForm__title {
    width: 320px;
    margin: 10px 0 0;
    padding: 0 40px 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .contactForm__title .required {
      margin: 0 0 0 20px; }
  .contactForm__data {
    width: calc(100% - 320px);
    margin: 0 0 20px;
    padding: 0; }
    .contactForm__data:last-of-type {
      margin: 0; }
    .contactForm__data input {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 100%;
      padding: 15px 10px;
      font-size: 1rem;
      font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
      background-color: #FFF;
      border: 1px solid #d1c4af;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      .contactForm__data input.p-postal-code {
        width: 250px; }
      .contactForm__data input.p-region, .contactForm__data input.p-extended-address {
        margin: 20px 0 0; }
    .contactForm__data textarea {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 100%;
      height: 300px;
      padding: 15px 10px;
      font-size: 1rem;
      font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
      background-color: #FFF;
      border: 1px solid #d1c4af;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
    .contactForm__data .p_code a {
      margin: 0 0 0 20px;
      padding: 4px 20px;
      color: #FFF;
      font-size: 0.8333333333rem;
      display: inline-block;
      background-color: #f87974;
      border: 1px solid #f87974;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      transition: 0.1s linear;
      position: relative; }
      .contactForm__data .p_code a:hover {
        color: #f87974;
        text-decoration: none;
        background-color: #FFF;
        bottom: 2px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.06) 0px 4px 2px, rgba(0, 0, 0, 0.06) 0px 8px 4px, rgba(0, 0, 0, 0.06) 0px 16px 8px, rgba(0, 0, 0, 0.06) 0px 32px 16px;
        -moz-box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.06) 0px 4px 2px, rgba(0, 0, 0, 0.06) 0px 8px 4px, rgba(0, 0, 0, 0.06) 0px 16px 8px, rgba(0, 0, 0, 0.06) 0px 32px 16px;
        box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.06) 0px 4px 2px, rgba(0, 0, 0, 0.06) 0px 8px 4px, rgba(0, 0, 0, 0.06) 0px 16px 8px, rgba(0, 0, 0, 0.06) 0px 32px 16px; }
  .contactForm__btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 320px;
    height: 60px;
    margin: 60px auto 0;
    font-size: 1rem;
    font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
    color: #FFF;
    display: block;
    background-color: #f87974;
    border: 1px solid #f87974;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    position: relative;
    transition: 0.1s linear; }
    .contactForm__btn:hover {
      cursor: pointer;
      color: #f87974 !important;
      text-decoration: none;
      background-color: #FFF;
      top: 1px;
      left: 1px; }

@media (max-width: 900px) {
  .contactForm__title {
    width: 100%;
    margin: 0;
    padding: 0; }
  .contactForm__data {
    width: 100%;
    margin: 10px 0 20px; }
    .contactForm__data:last-of-type {
      margin: 10px 0 0; } }
.preview {
  width: 100%;
  margin: 70px 0 0;
  border-collapse: collapse; }
  .preview th {
    width: 30%;
    padding: 25px 40px;
    font-size: 1rem;
    background-color: #fdeed1;
    border: 1px solid #3a3535;
    border-left: none;
    border-right: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .preview td {
    width: 70%;
    padding: 25px 40px;
    font-size: 1rem;
    background-color: #FFF;
    border: 1px solid #3a3535;
    border-left: none;
    border-right: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

@media (max-width: 600px) {
  .preview {
    width: 100%;
    border-bottom: 1px solid #3a3535; }
    .preview th {
      width: 100%;
      padding: 20px;
      text-align: left;
      display: block;
      border-bottom: none; }
    .preview td {
      width: 100%;
      padding: 20px;
      display: block;
      border-top: none;
      border-bottom: none; } }
