@charset "UTF-8";
/* CSS Document */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(80%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes slideIn2 {
  0% {
    transform: translateY(-80%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}
@keyframes slideIn3 {
  0% {
    transform: translateY(80%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  }
  40%,100% {
    opacity: 1;
  }
}
/*----- main -----*/
main {overflow: hidden; width: 100%;}
#main {position: relative;width: 100%;text-align: center;background-color: #0062B3;color: #fff;}
.anim-box {width: 100%;}
.main {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 90%;margin: 0 auto;text-align: center;opacity: 0;}
.main_l {position: relative;width: 28%;margin-left: 3%;border-left: solid 1px #cfcfcf;border-right: solid 1px #cfcfcf;box-sizing: border-box;}
.main_l_t1 {position: absolute;top: 50%;left: 0%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 100%;font-size: 2.3vw;font-weight: 600;letter-spacing: 0.2vw;line-height: 120%;}
.main_r {width: 69%;padding: 3vw 0;box-sizing: border-box;font-size: 0;}
.main_rin1 {display: inline-block;vertical-align: middle;width: 48%;}
.main_r_t1 {padding-left: 4vw;font-size: 2.1vw;font-weight: 300;font-family: vdl-v7mincho, sans-serif;box-sizing: border-box;text-align: left;}
.main_rin2 {display: inline-block;vertical-align: middle;width: 52%;text-align: center;}
.main_img {display: inline-block;vertical-align: middle;width: 29%;margin: 0 2%;box-sizing: border-box;border: solid 1px #cfcfcf;}

/*----- content01 -----*/
#content01 {width: 100%;padding: 0;}
.content01 {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 90%;margin: 0 auto;text-align: left;font-size: 0;font-family: vdl-v7mincho, sans-serif;opacity: 0;}
.content01_l {position: relative;width: 28%;margin-left: 3%;background: rgba(0,98,179,0.15);}
.content01_r {width: 69%;padding: 3vw 0 13vw;box-sizing: border-box;}
.content01_box {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 100%;margin: 3vw auto 0;padding-left: 5%;box-sizing: border-box;}
.content01_box_in {width: 32%;margin-top: 3vw;}
.content01_box_img {width: 100%;}
.content01_box_t1 {margin-top: 1vw;font-size: 1.4vw;font-weight: 900;text-align: center;}

/*----- footer_topbox -----*/
#content{position: relative;}
#topBtn {position: fixed;bottom: 5vw;right: 2vw;width: 4vw;z-index: 200;}
.top_img {width: 100%;}

/*----- anim-box -----*/
.anim-box.slidein.is-animated {animation: slideIn 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
.anim-box.slidein2.is-animated {animation: slideIn2 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
.anim-box.slidein3.is-animated {animation: slideIn3 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}
.anim-box.fadein.is-animated {animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;}

@media screen and (max-width:960px) {
/*----- main -----*/
.main {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 90%;margin: 0 auto;text-align: center;opacity: 0;}
.main_l {position: relative;width: 28%;margin-left: 0;border-left: solid 1px #cfcfcf;border-right: solid 1px #cfcfcf;box-sizing: border-box;}
.main_l_t1 {position: absolute;top: 50%;left: 0%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 100%;font-size: 2.9vw;font-weight: 600;letter-spacing: 0.2vw;line-height: 120%;}
.main_r {width: 69%;padding: 3vw 0;box-sizing: border-box;font-size: 0;}
.main_rin1 {display: inline-block;vertical-align: middle;width: 48%;}
.main_r_t1 {padding-left: 0vw;font-size: 2.7vw;font-weight: 300;font-family: vdl-v7mincho, sans-serif;box-sizing: border-box;text-align: left;}
.main_rin2 {display: inline-block;vertical-align: middle;width: 52%;text-align: center;}
.main_img {display: inline-block;vertical-align: middle;width: 29%;margin: 0 2%;box-sizing: border-box;border: solid 1px #cfcfcf;}

/*----- content01 -----*/
#content01 {width: 100%;padding: 0;}
.content01 {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 90%;margin: 0 auto;text-align: left;font-size: 0;font-family: vdl-v7mincho, sans-serif;}
.content01_l {position: relative;width: 28%;margin-left: 0;}
.content01_r {width: 69%;padding: 3vw 0 75vw;box-sizing: border-box;}
.content01_box {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 100%;margin: 3vw auto 0;padding-left: 2%;box-sizing: border-box;}
.content01_box_in {width: 32%;}
.youtube_img {width: 100%;}
.content01_box_t1 {margin-top: 1vw;font-size: 2vw;font-weight: 900;text-align: center;}

/*----- footer_topbox -----*/
#content{position: relative;}
#topBtn {position: fixed;bottom: 5vw;right: 2vw;width: 4vw;z-index: 200;}
.top_img {width: 100%;}
}

@media screen and (max-width:500px) {
/*----- main -----*/
.main {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 100%;margin: 0 auto;text-align: center;opacity: 0;}
.main_l {position: relative;width: 90%;margin: 3vw auto 0;padding: 3vw 0;border-left: solid 0px #cfcfcf;border: solid 1px #cfcfcf;box-sizing: border-box;}
.main_l_t1 {position: relative;top: 50%;left: 0%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 100%;font-size: 4.2vw;font-weight: 600;letter-spacing: 0.2vw;line-height: 120%;}
.main_r {width: 90%;margin: 0 auto;padding: 3vw 0;box-sizing: border-box;font-size: 0;}
.main_rin1 {display: inline-block;vertical-align: middle;width: 48%;}
.main_r_t1 {padding-left: 0vw;font-size: 3.9vw;font-weight: 300;font-family: vdl-v7mincho, sans-serif;box-sizing: border-box;text-align: left;}
.main_rin2 {display: inline-block;vertical-align: middle;width: 52%;text-align: center;}
.main_img {display: inline-block;vertical-align: middle;width: 29%;margin: 0 2%;box-sizing: border-box;border: solid 1px #cfcfcf;}

/*----- content01 -----*/
#content01 {width: 100%;padding: 0;}
.content01 {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 100%;margin: 0 auto;text-align: left;font-size: 0;font-family: vdl-v7mincho, sans-serif;}
.content01_l {position: relative;width: 5%;margin-left: 0;}
.content01_r {width: 95%;padding: 3vw 0 13vw;box-sizing: border-box;}
.content01_box {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;flex-wrap: wrap;width: 100%;margin: 3vw auto 0;padding: 0 3%;box-sizing: border-box;}
.content01_box_in {width: 48%;margin-bottom: 4vw;}
.youtube_img {width: 100%;}
.content01_box_t1 {margin-top: 1vw;font-size: 3.2vw;font-weight: 900;text-align: center;}

/*----- footer_topbox -----*/
#content{position: relative;}
#topBtn {position: fixed;bottom: 2vw;right: 2vw;width: 10vw;z-index: 200;}
.top_img {width: 100%;}
}