@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: 1.5vw;}
.youtube_img {width: 100%;height: 11.5vw;}
/* numbers */
.numbers {width: 100%;margin-top: 3vw;text-align: center;font-size: 1.3vw;}
.numbers a {font-size: 1.3vw;}
.numbers a:hover {color: #296ffc;}
.numbers .page-numbers{display:inline-block;margin-right:0.5vw;padding: 0 0.5vw;font-size: 1.3vw;box-sizing: border-box;}
.numbers .current{font-size: 1.3vw;border-bottom: solid 2px;}
.numbers .prev,
.numbers .next{background:transparent;box-shadow:none;font-size: 1.3vw;border: solid 0px;}
.numbers .dots{background:transparent;box-shadow:none;}


/*----- 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 15vw;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%;height: 11vw;}
/* numbers */
.numbers {width: 100%;margin-top: 3vw;font-size: 1.9vw;}
.numbers a {font-size: 1.9vw;}
.numbers .page-numbers{margin-right:0.5vw;padding: 0 0.5vw;font-size: 1.9vw;}
.numbers .current{font-size: 1.9vw;border-bottom: solid 2px;}
.numbers .prev,
.numbers .next{background:transparent;box-shadow:none;font-size: 1.9vw;border: solid 0px;}
.numbers .dots{background:transparent;box-shadow:none;}

/*----- 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 15vw;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%;height: 25vw;}
/* numbers */
.numbers {width: 100%;margin-top: 3vw;font-size: 3.1vw;}
.numbers a {font-size: 3.1vw;}
.numbers .page-numbers{margin-right:1vw;padding: 0 1vw;font-size: 3.1vw;}
.numbers .current{font-size: 3.1vw;border-bottom: solid 2px;}
.numbers .prev,
.numbers .next{background:transparent;box-shadow:none;font-size: 3.1vw;border: solid 0px;}
.numbers .dots{background:transparent;box-shadow:none;}

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