@charset "UTF-8";
/* CSS Document */
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
common
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
html,body {overflow-x: hidden;}
.sp-only {
  display: none;
}
.fadein {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 800ms;
}
.fadein.scroll {
  opacity: 1;
  transform: translate(0, 0);
}
.fadeinline {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 800ms;
}
.fadeinline.scroll {
  opacity: 1;
  transform: translate(0, 0);
}
.appear {
  opacity: 0;
  animation-name: appear;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeUpstop {
  animation-name: fadeUpAnimeStop;
  opacity: 0;
  animation: fadeUpAnimeStop 0.5s ease-in-out forwards;
}
@keyframes fadeUpAnimeStop {
  0% {
    opacity: 0;
    transform: scale(2);
  }
  50% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.fadeUpstop2 {
  animation-name: fadeUpAnimeStop2;
  opacity: 0;
  animation: fadeUpAnimeStop2 0.5s ease-in-out forwards;
}
@keyframes fadeUpAnimeStop2 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.delay-time02 {
  animation-delay: 0.2s;
}
.delay-time04 {
  animation-delay: 0.4s;
}
.delay-time06 {
  animation-delay: 0.6s;
}
.delay-time08 {
  animation-delay: 0.8s;
}
.delay-time10 {
  animation-delay: 2s;
}
.delay-time12 {
  animation-delay: 3s;
}
.delay-time14 {
  animation-delay: 3.2s;
}
.delay-time16 {
  animation-delay: 3.4s;
}
.delay-time18 {
  animation-delay: 3.6s;
}
.delay-time20 {
  animation-delay: 3.8s;
}
.delay-time21 {
  animation-delay: 5s;
}
.delay-time22 {
  animation-delay: 5.5s;
}
.delay-time23 {
  animation-delay: 2.5s;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
header
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
header {
  width: 100vw;
  background-color: #FFF;
  position: fixed;
  z-index: 990;
  top: 0;
}
header h1 {
  height: 60px;
  width: auto;
}
header h1 img {
  height: 60px;
  width: auto;
}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
body
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.main-visual {
  position: fixed;
  background-image: url(../images/bg.png);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: cover;
  width: 100vw;
  height: 100%;
}
.flare {
  background-image: url("../images/flare.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  bottom: 0px;
  left: -0vw;
  z-index: 1;
}
.chara {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
  bottom: -280px;
  width: 100%;
  margin-bottom: 280px;
}
.chara img {
  width: 100%;
  height: auto;
}
.contents {
  height: 850px;
}
.contents h1 {
  position: relative;
  width: 60%;
  max-width: 700px;
  margin: 0 auto 0 auto;
  z-index: 2;
  bottom: -80px;
  margin-bottom: 80px;
}
.contents h1 img {
  width: 100%;
  height: auto;
}
.contents .day {
  max-width: 300px;
  position: absolute;
  z-index: 4;
  left: 0;
  top: 80px;
  margin-bottom: -80px;
}
.contents .day img {
  width: 100%;
  height: auto;
}
.contents .day .place {
  max-width: 220px;
  margin-top: 15px;
    
}
.contents .day .place img {
  width: 100%;
  height: auto;
}
.top-navi {
  position: absolute;
  z-index: 5;
  right: 0;
  top: 80px;
}.top-navi2 {
  position: absolute;
  z-index: 3;
  right: 0;
  top: 400px;
}
.top-navi ul {}
.top-navi ul li,.top-navi2 ul li {
  list-style: none;
}
.top-navi ul li .place {
  max-width: 225px;
}
.top-navi ul li .place img {
  width: 100%;
  height: auto;
}
.top-navi2 ul li .limit {
  max-width: 325px;
}
.top-navi2 ul li .limit img {
  width: 100%;
  height: auto;
}
.top-navi .movie {
  width: 200px;
}
.top-navi .movie img {
  width: 100%;
  height: auto;
}
.top-navi .form {
  width: 200px;
}
.top-navi .form img {
  width: 100%;
  height: auto;
}
.text-animation {
  position: relative;
  padding-top: 60px;
}
.about {
  position: relative;
  z-index: 25;
  left: -20vw;
}
.about-inner {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 500px;
}
.about-inner h2 {
  display: none;
}
.about-inner .detail {
  width: 400px;
  position: relative;
  bottom: -30px;
  margin: 0 auto 60px auto;
}
.about-inner .detail img {
  width: 100%;
  height: auto;
}
.about-inner .icon {
  width: 150px;
  position: relative;
  bottom: 60px;
  margin: 0 auto -60px auto;
  top: -300px;
  left: -300px;
}
.about-inner .icon img {
  width: 100%;
  height: auto;
}
.about-inner .link {
  width: 150px;
  position: relative;
  bottom: 60px;
  margin: 0 auto -60px auto;
  top: -80px;
}
.about-inner .link img {
  width: 100%;
  height: auto;
}
.lab {
  position: relative;
  z-index: 25;
  right: -20vw;
}
.lab-inner {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 500px;
}
.lab-inner h2 {
  display: none;
}
.lab-inner .detail {
  width: 400px;
  position: relative;
  bottom: 0px;
  margin: 0 auto 0px auto;
}
.lab-inner .detail img {
  width: 100%;
  height: auto;
}
.lab-inner .icon {
  width: 200px;
  position: relative;
  bottom: 100px;
  margin: 0 auto -60px auto;
  top: -300px;
  left: -280px;
}
.lab-inner .icon img {
  width: 100%;
  height: auto;
}
.lab-inner .link {
  width: 150px;
  position: relative;
  bottom: 0px;
  margin: 0 auto -60px auto;
  top: -220px;
  right: -100px
}
.lab-inner .link img {
  width: 100%;
  height: auto;
}
.special {
  position: relative;
  z-index: 25;
  left: -20vw;
}
.special-inner {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 500px;
}
.special-inner h2 {
  display: none;
}
.special-inner .detail {
  width: 420px;
  position: relative;
  bottom: 0px;
  margin: 0 auto 0px auto;
}
.special-inner .detail img {
  width: 100%;
  height: auto;
}
.special-inner .icon {
  width: 150px;
  position: relative;
  bottom: 60px;
  margin: 0 auto -60px auto;
  top: -300px;
  left: -300px;
}
.special-inner .icon img {
  width: 100%;
  height: auto;
}
.special-inner .link {
  width: 150px;
  position: relative;
  bottom: 80px;
  margin: 0 auto -80px auto;
}
.special-inner .link img {
  width: 100%;
  height: auto;
}



.sch {
  position: relative;
  z-index: 25;
  right: -20vw;
}
.sch-inner {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 500px;
}
.sch-inner h2 {
  display: none;
}
.sch-inner .detail {
  width: 400px;
  position: relative;
  bottom: 0px;
  margin: 0px auto 0px auto;
}
.sch-inner .detail img {
  width: 100%;
  height: auto;
}
.sch-inner .icon {
  width: 200px;
  position: relative;
  bottom: 0px;
  margin: 0 auto -60px auto;
  top: -350px;
  left: -240px;
}
.sch-inner .icon img {
  width: 100%;
  height: auto;
}
.sch-inner .link {
  width: 200px;
  position: relative;
  bottom: 0px;
  margin: 0 auto -50px auto;
  top: -170px;
  right: 0px
}
.sch-inner .link img {
  width: 100%;
  height: auto;
}
.sch-inner .link p {font-size: 0.8rem;line-height: 1rem;}




.access {
  position: relative;
  z-index: 25;
  left: -20vw;
}
.access-inner {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 500px;
}
.access-inner h2 {
  display: none;
}
.access-inner .detail {
  width: 400px;
  position: relative;
  bottom: 0px;
  margin: 0px auto 0px auto;
}
.access-inner .detail img {
  width: 100%;
  height: auto;
}
.access-inner .icon {
  width: 200px;
  position: relative;
  bottom: 0px;
  margin: 0 auto -60px auto;
  top: -450px;
  left: -240px;
}
.access-inner .icon img {
  width: 100%;
  height: auto;
}
.access-inner .link {
  width: 150px;
  position: relative;
  bottom: 0px;
  margin: 0 auto -50px auto;
  top: -200px;
  right: -110px
}
.access-inner .link img {
  width: 100%;
  height: auto;
}
.contact {
  position: relative;
  z-index: 25;
  right: -20vw;
}
.contact-inner {
  background-image: url(../images/about-bg.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 500px;
}
.contact-inner h2 {
  display: none;
}
.contact-inner .detail {
  width: 600px;
  position: relative;
  margin: 0px auto -30px auto;
  bottom: 30px;
  left: 120px;
  line-height: 2rem;
}
.contact-inner .detail img {
  width: 100%;
  height: auto;
}
.contact-inner .icon {
  width: 150px;
  position: relative;
  bottom: 60px;
  margin: 0 auto -60px auto;
  top: -120px;
  left: 180px;
}
.contact-inner .icon img {
  width: 100%;
  height: auto;
}
.contact-inner .link {
  width: 150px;
  position: relative;
  bottom: 0px;
  margin: 20px auto 0px auto;
  top: 0px;
}
.contact-inner .link img {
  width: 100%;
  height: auto;
}
.fadeIn {
  transition: 0.5s;
  animation-timing-function: ease;
  opacity: 0;
  transform: scale(2);
}
.fadeIn.animated {
  opacity: 1;
  transform: scale(1);
}
.sns {
  position: relative;
  z-index: 25;
}
.sns-inner {
  width: 800px;
  background-color: #FFFFFF;
  margin: 0 auto;
  border-radius: 10px;
  padding-bottom: 50px;
}
.sns-inner h2 {
  display: none;
}
.sns-inner .icon {
  width: 150px;
  position: relative;
  bottom: 60px;
  margin: 0 auto -60px auto;
  top: -120px;
  left: 180px;
}
.sns-inner .icon img {
  width: 100%;
  height: auto;
}
.sns-inner .link {
  width: 150px;
  position: relative;
  bottom: 60px;
  margin: 0 auto -60px auto;
  top: -60px;
}
.sns-inner .link img {
  width: 100%;
  height: auto;
}
.sns-inner .sns-block {
  width: 90%;
  margin: 0 auto;
}
.sns-inner .sns-block:after {
  content: "";
  display: block;
  clear: both;
}
.sns-block .detail {text-align: center;}
.sns-block .sns-instagram {width: 225px;display: inline-block;margin: 20px 20px 20px 0;}
.sns-block .sns-instagram a:hover {opacity: 0.7;}
.sns-block .sns-instagram img {width: 100%;height: auto;}
.sns-block .sns-twitter {width: 225px;display: inline-block;margin: 20px 0 20px 0;}
.sns-block .sns-twitter img {width: 100%;height: auto;}
.sns-block .sns {
  float: none;
  width: 45%;
}
.sns-block .detail {
  float: none;
  width: 500px;
  margin: 30px auto 0 auto;
  padding-bottom: 20px;
}
.sns-block .detail img {
  width: 100%;
  height: auto;
}
footer {
  width: 100%;
  height: 200px;
  position: relative;
  background-image: url(../images/foot_bg.png);
  background-repeat: repeat-x;
  background-position: center bottom;
}
.footer-inner ul {
  text-align: center;
  margin: 0 auto;
  font-size: 0.8rem;
  position: relative;
  top: 150px;
}
.footer-inner ul li {
  display: inline-block;
  border-right: 1px solid #FFFFFF;
  padding: 0 15px
}
.footer-inner ul li a {
  color: #FFF;
  text-decoration: none;
}
.footer-inner ul li:first-child {
  border-left: 1px solid #FFFFFF;
}
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.3s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
  transform: scale(2);
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
  transform: scale(1);
}
/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(-30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}
.scroll_left.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}
/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
  -webkit-transition: 0.8s ease-in-out;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
}
.scroll_right.on {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-opacity: 1.0;
  transform: translateX(0);
}
.about-block h2 {
  width: 500px;
  margin: 0px auto;
  padding-top: 50px;
  padding-bottom: 30px;
}