@charset "UTF-8";
/* CSS Document */
#contact__container {
  max-width: 880px;
  margin: 0 auto;
}
#contact__container > .headline {
  text-align: center;
}
#contact__container > .txt {
  text-align: center;
  margin-top: 16px;
}
/*--------------------------*/
/*コンタクトフォーム*/
/*--------------------------*/
/*入力フォーム--基礎構造*/
#contactForm {
  width: 100%;
  margin: 0 auto;
  margin-top: 32px;
}
#contactForm > .inner-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#contactForm > .inner-box + .inner-box {
  margin-top: 21px;
}
#contactForm .item {
  width: 24%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#contactForm .form-box {
  width: calc(100% - 24%);
}
#contactForm .form-box > input {
  width: 100%;
  border: 1px solid #dedede;
  background: var(--color-white);
  border-radius: 3px;
  padding: 1rem;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}
/*入力フォーム--住所*/
#contactForm .item.adr {
  -ms-flex-item-align: start;
  align-self: flex-start;
}
#contactForm .inputAdr + .inputAdr {
  margin-top: 10px;
}
/*入力フォーム--お問い合わせ内容*/
#contactForm .item.textArea {
  -ms-flex-item-align: start;
  align-self: flex-start;
}
#contactForm textarea {
  width: 100%;
  border: 1px solid #dedede;
  background: var(--color-white);
  border-radius: 3px;
  padding: 1rem;
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}
/*入力フォーム--必須項目*/
#contactForm .ec-required {
  background: #e4090d;
  padding: 0.4rem 0.4rem;
  min-width: 48px;
  border-radius: 2px;
  margin-right: 6px;
  color: #ffffff;
  font-size: calc(var(--txt-small) / 1.2);
  line-height: 1;
  text-align: center;
}
#contactForm .required.optional {
  background: #7e7e7e;
}
/*--------------------------*/
/*ラジオボタン*/
/*元のラジオボタンを非表示にする*/
#contactForm .form-box.radio-box .check {
  position: relative;
}
#contactForm .radio-input {
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
/*ラジオボタンの設定*/
#contactForm .checkItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}
#contactForm .checkItem::before {
  content: "";
  display: block;
  border-radius: 50%;
  border: 1px solid #bfbfbf;
  background: #ffffff;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 1rem;
}
#contactForm .radio-input:checked + .checkItem::after {
  content: "";
  display: block;
  border-radius: 50%;
  background: var(--color-main);
  width: 1rem;
  height: 1rem;

  position: absolute;
  top: 50%;
  left: 0.3rem;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  opacity: 1;
}
/*ラジオボタンの配置間隔*/
#contactForm .radio-box {
  width: calc(100% - 32%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
#contactForm .radio-box > label {
  margin: 8px 0;
  margin-right: 40px;
}
/*--------------------------*/
/*その他装飾*/
/*送信ボタン*/
.form-button-box {
  margin-top: 42px;
  text-align: center;
}
.form-button {
  display: inline-block;
  background: var(--color-main);
  border: 2px solid var(--color-main);
  height: 48px;
  width: 100%;
  max-width: 180px;
  min-width: 140px;
  border-radius: 3px;

  color: var(--color-white);
  font-size: var(--txt);
  text-align: center;

  cursor: pointer;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}
.form-button:hover {
  background: none;
  border: 2px solid var(--color-main);
  color: var(--color-main);
}
/*記入例*/
::-webkit-input-placeholder {
  font-size: var(--txt);
  color: #939393;
}
::-moz-placeholder {
  font-size: var(--txt);
  color: #939393;
}
:-ms-input-placeholder {
  font-size: var(--txt);
  color: #939393;
}
::-ms-input-placeholder {
  font-size: var(--txt);
  color: #939393;
}
::placeholder {
  font-size: var(--txt);
  color: #939393;
}
/*エフェクト*/
#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus {
  z-index: 10;
  outline: 3px solid var(--color-sub);
  background: #f6f9f1;
}

/*-------------------------------*/
/* タブレット */
/*------------------------------*/
@media (max-width: 959px) {
  /*入力フォーム--基礎構造*/
  #contactForm {
    margin-top: 40px;
  }
  #contactForm > .inner-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  #contactForm > .inner-box + .inner-box {
    margin-top: 32px;
  }
  #contactForm .item {
    width: 100%;
  }
  #contactForm .form-box {
    width: 100%;
    margin-top: 12px;
  }
  /*入力フォーム--住所*/
  #contactForm .inputAdr + .inputAdr {
    margin-top: 10px;
  }
  /*--------------------------*/
  /*その他装飾*/
  /*送信ボタン*/
  .form-button-box {
    margin-top: 32px;
  }
} /*タブレット--ラスト*/

/*-------------------------------*/
/* スマホ */
/*------------------------------*/
@media (max-width: 559px) {
  /*入力フォーム--基礎構造*/
  #contactForm {
    margin-top: 32px;
  }
  #contactForm > .inner-box + .inner-box {
    margin-top: 24px;
  }
  #contactForm .form-box {
    width: 100%;
    margin-top: 16px;
  }
  /*入力フォーム--住所*/
  #contactForm .inputAdr + .inputAdr {
    margin-top: 14px;
  }
  /*--------------------------*/
  /*その他装飾*/
  /*送信ボタン*/
  .form-button-box {
    margin-top: 24px;
  }
} /*スマホ--ラスト*/