/*
 * @parts：トレーナーページ　お問い合わせ
 * @design：上に余白をつける
*/
#trainer_contact {
  margin: 10.42% auto;
}
@media screen and (max-width: 450px) {
  #trainer_contact {
    margin-top: 0;
    margin-bottom: 14%;
  }
}

/************************
　　　
　　　お問合せ　contact

************************/

/*
 * @parts：お問い合わせ
 * @design：左右の余白をつける　全体の文字の色を指定
*/
.contact {
  padding: 0 7.81%;
  color: #efefef;
  margin: 0 auto;
}
@media screen and (max-width: 450px) {
  .contact {
    padding: 0;
    color: #efefef;
  }
}

/*
 * @parts：お問い合わせ　インナー
 * @design：上下左右に余白をつける　背景の画像の設定　
*/
.contact_inner {
  width: 100%;
  padding: 9.75% 6.17%;
  /* linear_gradientで画像を黒っぽくする */
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url(../../image/contact_image/contact_pc.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 450px) {
  .contact_inner {
    padding: 20% 7.5% 11.5%;
    /* linear_gradientで画像を黒っぽくする */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
      url(../../image/contact_image/contact_sp.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top 0 left 70%;
  }
}

/*
 * @parts：お問い合わせ　内容
 * @design：黒っぽくする　余白をつける　上に余白をつける
*/
.contact_black_container {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  padding: 3.52% 4.23% 2.11% 2.82%;
  margin-top: 9.88%;
}
@media screen and (max-width: 450px) {
  .contact_black_container {
    padding: 17.65% 12.65% 22.94%;
    margin-top: 9.88%;
  }
}

/*
 * @parts：お問い合わせ　内容　タイトル
 * @design：文字の大きさ　中央に寄せる
*/
.contact_black_container_title {
  font-size: 1.875vw;
  text-align: center;
  font-family: "YuMincho";
}
@media screen and (max-width: 450px) {
  .contact_black_container_title {
    font-size: 4vw;
  }
}

/*
 * @parts：お問い合わせ　内容　テキスト
 * @design：上に余白をとる　文字の大きさ　中央に寄せる
*/
.contact_black_container_text {
  padding-top: 2.27%;
  font-size: 0.9375vw;
  text-align: center;
}
@media screen and (max-width: 450px) {
  .contact_black_container_text {
    padding-top: 19.76%;
    font-size: 3vw;
  }
}

/* rpの改行はなくす */
.br_rp {
  display: none;
}
@media screen and (max-width: 450px) {
  /* pcの改行はなくす */
  br {
    display: none;
  }
  /* spの改行をする */
  .br_rp {
    display: block;
  }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　全体
 * @design：上に余白をとる　横並びにする
*/
.contact_tool_wrapper {
  padding-top: 4.55%;
  display: flex;
}
@media screen and (max-width: 450px) {
  .contact_tool_wrapper {
    padding-top: 19.37%;
    display: block;
  }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　電話box
 * @design：横幅と高さを指定　外枠と背景色を指定
*/
.contact_tel_box {
  width: 30.3%;
  height: 7.0833333vw;
  border: 2px solid #fff;
  background-color: #000;
  display: inline-block;
}
@media screen and (max-width: 450px) {
  .contact_tel_box {
    width: 100%;
    height: 17.74vw;
    border: 0.5vw solid #fff;
  }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　インストbox、ラインbox
 * @design：横幅と高さを指定　外枠と背景色を指定 右に余白をつける
*/
.contact_insta_box,
.contact_line_box {
  width: 30.3%;
  height: 7.0833333vw;
  border: 2px solid #000;
  background-color: #fff;
  margin-left: 4.55%;
}
@media screen and (max-width: 450px) {
  .contact_insta_box,
  .contact_line_box {
    width: 100%;
    height: 17.74vw;
    border: 0.5vw solid #000;
    background-color: #fff;
    margin-left: 0;
    margin-top: 6.32%;
  }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　ボタン
 * @design：ホバーした際に　カーソルになる
*/
.contact_tel_box,
.contact_insta_box,
.contact_line_box {
  cursor: pointer;
}

/*
 * @parts：お問い合わせ　内容　連絡手段　電話　文字
 * @design：文字色と文字の装飾なしを指定
*/
.contact_tel_box a {
  color: #fff;
  text-decoration: none;
}

/*
 * @parts：お問い合わせ　内容　連絡手段　電話、インスタ、ライン　文字
 * @design：横並び　文字の装飾なし、余白をつける
*/
.contact_tel,
.contact_insta_box a,
.contact_line_box a {
  display: flex;
  text-decoration: none;
  margin: 12% auto auto 7.5%;
}
@media screen and (max-width: 450px) {
  .contact_tel,
  .contact_insta_box a,
  .contact_line_box a {
    margin: 9.5% auto auto 9.32%;
  }
}

.contact_tel_number > .fa-phone {
    font-size: 1.6vw;
}
@media screen and (max-width: 450px) {
    .contact_tel_number > .fa-phone {
        font-size: 4vw;
    }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　電話
  * @design：余白をつける
*/
.contact_tel {
  margin: 4% auto auto 5.5%;
}
@media screen and (max-width: 450px) {
  .contact_tel {
    margin: 2% auto auto 9.13%;
  }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　電話番号
  * @design：左に余白をつける、文字の大きさと種類を指定
*/
.contact_tel_number {
  padding-left: 2%;
  font-size: 2.1vw;
  font-family: "Source Serif 4";
}
@media screen and (max-width: 450px) {
  .contact_tel_number {
    padding-left: 3%;
    font-size: 6vw;
  }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　電話　営業時間
  * @design：左に余白をつける、文字の大きさと種類を指定　上の余白を縮める
*/
.contact_tel_time {
  font-size: 0.9375vw;
  padding-left: 20%;
  font-family: "YuMincho";
  margin-top: -2%;
}
@media screen and (max-width: 450px) {
  .contact_tel_time {
    font-size: 3vw;
    padding-left: 18%;
    font-family: "YuMincho";
    margin-top: -3%;
  }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　インスタ、ライン
  * @design：文字の色と大きさを指定
*/
.contact_insta_box a,
.contact_line_box a {
  color: #000;
  font-size: 1.25vw;
}
@media screen and (max-width: 450px) {
  .contact_insta_box a,
  .contact_line_box a {
    font-size: 3.5vw;
  }
}

/*
 * @parts：お問い合わせ　内容　連絡手段　インスタ
  * @design：アイコンとの余白
*/
.contact_insta {
  padding-left: 4%;
}

/*
 * @parts：お問い合わせ　内容　連絡手段　ライン
  * @design：アイコンとの余白　文字の種類
*/
.contact_line {
  padding-left: 7.7%;
  font-family: "YuMincho";
}

/*
 * @parts：お問い合わせ　内容　連絡手段　各アイコン
  * @design：大きさを指定
*/
.contact_insta_icon,
.contact_line_icon {
  width: 8.5%;
}