@charset "UTF-8";
/*--------------
//色の変数まとめ
--------------*/
/*---------------
色の変数
---------------*/
/*----------------------
サイトで使用するWebフォントをここに記述する
----------------------*/
.noto-sans {
  font-family: "Noto Sans JP", sans-serif !important;
}

.roboto {
  font-family: "Roboto", sans-serif !important;
}

.din-light {
  font-family: din-2014, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.din {
  font-family: din-2014, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.din-condensed-light {
  font-family: din-condensed, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.din-condensed {
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.din-condensed-light {
  font-family: din-condensed, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.italianno {
  font-family: "Italianno", cursive !important;
}

/*--------------
//grid、カラムのガター
--------------*/
/*--------------
//メディアクエリ
--------------*/
/*--------------
//コンテンツ幅
--------------*/
/*--------------
//その他の変数
--------------*/
/*--------------
//色の変数まとめ
--------------*/
/*---------------
色の変数
---------------*/
/*----------------------
サイトで使用するWebフォントをここに記述する
----------------------*/
.noto-sans {
  font-family: "Noto Sans JP", sans-serif !important;
}

.roboto {
  font-family: "Roboto", sans-serif !important;
}

.din-light {
  font-family: din-2014, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.din {
  font-family: din-2014, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.din-condensed-light {
  font-family: din-condensed, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.din-condensed {
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.din-condensed-light {
  font-family: din-condensed, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.italianno {
  font-family: "Italianno", cursive !important;
}

/*--------------
//grid、カラムのガター
--------------*/
/*--------------
//メディアクエリ
--------------*/
/*--------------
//コンテンツ幅
--------------*/
/*--------------
//その他の変数
--------------*/
/*============================
フォームページのスタイル
============================*/
.bg-grid {
  display: none;
}

@media (min-width: 1024px) {
  .form-contents-list {
    padding: 0 5%;
  }
}

input[type=text], input[type=email], input[type=date], input[type=tel] {
  border: none;
  border-bottom: 1px solid #A39F9F;
  background-color: transparent;
}
input[type=text]:focus-visible, input[type=email]:focus-visible, input[type=date]:focus-visible, input[type=tel]:focus-visible {
  border-bottom: 2px solid #080707;
  outline: none;
}
@media (max-width: 767px) {
  input[type=text], input[type=email], input[type=date], input[type=tel] {
    width: 100%;
    padding: 0 0 1.35rem 0;
  }
}
@media (min-width: 768px) {
  input[type=text], input[type=email], input[type=date], input[type=tel] {
    width: 100%;
    padding: 0 0 1.8% 0;
  }
}
input[type=text]::placeholder, input[type=email]::placeholder, input[type=date]::placeholder, input[type=tel]::placeholder {
  color: #ccc;
}
@media (max-width: 767px) {
  input[type=text]::placeholder, input[type=email]::placeholder, input[type=date]::placeholder, input[type=tel]::placeholder {
    font-size: 1.4rem;
  }
}
@media (min-width: 768px) {
  input[type=text]::placeholder, input[type=email]::placeholder, input[type=date]::placeholder, input[type=tel]::placeholder {
    font-size: 1.6rem;
  }
}
@media (min-width: 1800px) {
  input[type=text]::placeholder, input[type=email]::placeholder, input[type=date]::placeholder, input[type=tel]::placeholder {
    font-size: 1.8rem;
  }
}

@media (min-width: 768px) {
  input[type=date] {
    width: 50%;
  }
}

textarea {
  border: 1px solid #A39F9F;
  background-color: transparent;
}
@media (max-width: 767px) {
  textarea {
    width: 100%;
    padding: 1.35rem;
  }
}
@media (min-width: 768px) {
  textarea {
    width: 80%;
    padding: 1.8%;
  }
}

select:focus-visible {
  border-bottom: 2px solid #080707;
  outline: none;
  padding: 0;
}
@media (max-width: 767px) {
  select {
    border-color: #A39F9F;
    padding: 0 0 1.35rem 0;
  }
}
@media (min-width: 768px) {
  select {
    padding: 0 0 1.8% 0;
  }
}
@media (min-width: 1800px) {
  select {
    padding: 0 0 1.8% 0;
  }
}

.form-submit {
  background-color: #6FA2B9;
  color: rgba(255, 255, 255, 0.99);
}
@media (max-width: 767px) {
  .form-submit {
    padding: 0.5rem;
    font-size: 1.6rem;
  }
}
@media (min-width: 768px) {
  .form-submit {
    padding: 1.8rem 3rem;
    font-size: 1.8rem;
  }
}
@media (max-width: 767px) {
  .required,
  .any {
    padding-left: 0.6rem;
    font-size: 1.4rem;
  }
}
@media (min-width: 768px) {
  .required,
  .any {
    padding-left: 0.8rem;
    font-size: 1.6rem;
  }
}
@media (min-width: 1800px) {
  .required,
  .any {
    padding-left: 1.2rem;
    font-size: 1.8rem;
  }
}

.required {
  color: #C9151B;
}

@media (max-width: 767px) {
  .form-contents {
    margin-bottom: 2.5rem;
  }
}
@media (min-width: 768px) {
  .form-contents {
    margin-bottom: 3rem;
  }
}
@media (min-width: 1200px) {
  .form-contents {
    margin-bottom: 4rem;
  }
}
@media (min-width: 1800px) {
  .form-contents {
    margin-bottom: 4.5rem;
  }
}

@media (max-width: 767px) {
  .form-contents-tit {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
  }
}
@media (min-width: 768px) {
  .form-contents-tit {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}
@media (min-width: 1800px) {
  .form-contents-tit {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .document-form-contents {
    padding: 0 5%;
    margin-bottom: 4.8rem;
  }
}

@media (max-width: 767px) {
  .document-form-description {
    font-size: 1.4rem;
  }
}
@media (min-width: 768px) {
  .document-form-description {
    font-size: 1.6rem;
  }
}
@media (min-width: 1200px) {
  .document-form-description {
    font-size: 1.6rem;
    margin-bottom: 4.8rem;
  }
}