/* CSS Document */
/*-----PC-----*/
@font-face {
  font-family: "Hiragino";
  src: url("../img/hirakakupron-w6.otf");
}
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');
@media screen and (min-width: 961px) {
  .box1_reccomend {
    width: 100%;
    padding: 30px 0 0 0;
  }
  .box1_recommend {
    width: 100%;
    padding: 50px 0 0 0;
  }
  .box2_recommend {
    width: 960px;
    padding: 0 20px;
  }
  .box2_recommend_left {
    width: 390px;
    padding: 0 40px;
    height: 170px;
    background-color: #6bb358;
    float: left;
  }
  .box2_recommend_right {
    width: 390px;
    padding: 0 40px;
    height: 170px;
    background-color: #6bb358;
    display: inline-block;
    margin: 0 0 0 10px;
  }
  .text1_tel {
    color: #fff;
    font-size: 20px;
    margin: 20px 0 0 0;
  }
  .tel_icon {
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: text-bottom;
  }
  .text2_tel {
    color: #fff;
    font-size: 40px;
    margin: 0 0 0 0;
    font-weight: 800;
  }
  .text3_tel {
    color: #000;
    width: 370px;
    background-color: #efefef;
    font-size: 15px;
    text-align: center;
    margin: 0 0 0 0;
    font-weight: 400;
  }
  .text1_mail {
    color: #fff;
    font-size: 20px;
    margin: 20px 0 0 0;
  }
  .mail_icon {
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: text-bottom;
  }
  .btn_mail {
    max-width: 100%;
    margin: 10px 0 0 0;
  }
}
/*-----Tablet-----*/
@media screen and (min-width:600px) and (max-width:1023px) {
  .box1_recommend {
    width: 100%;
    padding: 50px 0 0 0;
  }
  .box2_recommend {
    width: 960px;
    padding: 0 20px;
  }
  .box2_recommend_left {
    width: 390px;
    padding: 0 40px;
    height: 170px;
    background-color: #6bb358;
    float: left;
  }
  .box2_recommend_right {
    width: 390px;
    padding: 0 40px;
    height: 170px;
    background-color: #6bb358;
    display: inline-block;
    margin: 0 0 0 10px;
  }
  .text1_tel {
    color: #fff;
    font-size: 20px;
    margin: 20px 0 0 0;
  }
  .tel_icon {
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: text-bottom;
  }
  .text2_tel {
    color: #fff;
    font-size: 40px;
    margin: 0 0 0 0;
    font-weight: 800;
  }
  .text3_tel {
    color: #000;
    width: 370px;
    background-color: #efefef;
    font-size: 15px;
    text-align: center;
    margin: 0 0 0 0;
    font-weight: 400;
  }
  .text1_mail {
    color: #fff;
    font-size: 20px;
    margin: 20px 0 0 0;
  }
  .mail_icon {
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: text-bottom;
  }
  .btn_mail {
    max-width: 100%;
    margin: 10px 0 0 0;
  }
}
/*-----Tablet-----*/
@media screen and (min-width:600px) and (max-width:1023px) {
  .box1_reccomend {
    width: 100%;
    padding: 30px 0 0 0;
  }
  .box1_reccomend {
    width: 100%;
    padding: 30px 0 0 0;
  }
  .box2_recommend {
    width: 96%;
    padding: 0 2%;
  }
  .box2_recommend_left {
    width: 41%;
    padding: 0 4%;
    height: 170px;
    background-color: #6bb358;
    float: left;
  }
  .box2_recommend_right {
    width: 41%;
    padding: 0 4%;
    height: 170px;
    background-color: #6bb358;
    display: inline-block;
    margin: 0 0 0 10px;
  }
  .text1_tel {
    color: #fff;
    font-size: 20px;
    margin: 20px 0 0 0;
  }
  .tel_icon {
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: text-bottom;
  }
  .text2_tel {
    color: #fff;
    font-size: 35px;
    margin: 0 0 0 0;
    font-weight: 800;
  }
  .text3_tel {
    color: #000;
    width: 100%;
    background-color: #efefef;
    font-size: 15px;
    text-align: center;
    margin: 0 0 0 0;
    font-weight: 400;
  }
  .text1_mail {
    color: #fff;
    font-size: 18px;
    margin: 20px 0 0 0;
  }
  .mail_icon {
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: text-bottom;
  }
  .btn_mail {
    max-width: 100%;
    margin: 10px 0 0 0;
  }
}
/*-----SP-----*/
@media screen and (max-width: 520px) {
  .box1_recommend {
    width: 100%;
    padding: 30px 0 0 0;
  }
  .box2_recommend {
    width: 96%;
    padding: 0 2%;
  }
  .box2_recommend_left {
    width: 96%;
    padding: 0 2%;
    height: 170px;
    background-color: #6bb358;
    float: left;
  }
  .box2_recommend_right {
    width: 96%;
    padding: 0 2%;
    height: 170px;
    background-color: #6bb358;
    display: inline-block;
    margin: 5% 0 5% 0;
  }
  .text1_tel {
    color: #fff;
    font-size: 20px;
    margin: 20px 0 0 0;
    text-align: center;
  }
  .tel_icon {
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: text-bottom;
  }
  .text2_tel {
    color: #fff;
    font-size: 35px;
    margin: 0 0 0 0;
    font-weight: 800;
    text-align: center;
  }
  .text3_tel {
    color: #000;
    width: 100%;
    background-color: #efefef;
    font-size: 15px;
    text-align: center;
    margin: 0 0 0 0;
    font-weight: 400;
  }
  .text1_mail {
    color: #fff;
    font-size: 18px;
    margin: 20px 0 0 0;
    text-align: center;
  }
  .mail_icon {
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: text-bottom;
  }
  .btn_mail {
    max-width: 100%;
    margin: 10px 0 0 0;
  }
}