@charset "UTF-8";
/* ///////////////////////////////////////////////

　トップページ のスタイル

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


/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background:#006096;
text-align:center;
}

/* Loading画像中央配置　*/
#splash_logo {
position: absolute;
top: 30%;
left: 0;
}

@media (max-width: 960px) {
  #splash_logo {
    position: absolute;
    top: 45%;
    left: 0;
  }
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 80%;
}

@media (max-width: 960px) {
  #splash_logo img {
    width: 90%;
  }
}




/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
from {
  opacity: 0;
transform: translateY(100px);
}

to {
  opacity: 1;
transform: translateY(0);
}
}





h2 {
  padding: .05em .05em .3em;
  font-size: 42rem;
  font-weight: 100;
  text-align: center;
}

@media (max-width: 1200px) {
  h2 {
    font-size: 33rem;
  }
}

@media (max-width: 960px) {
  h2 {
    font-size: 18rem;
  }
}

/* ファーストビュー */
#hero {
  position: relative;
  padding: 2%;
}

@media (max-width: 960px) {
  #hero {
    height: 100vh;
  }
}

@supports (-webkit-touch-callout: none) {
  #hero body {
    height: -webkit-fill-available;
  }
}

#hero::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  background: url(../img/mv_texture.png);
}

#hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#hero .content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: url(../img/flag-line.svg) no-repeat center/contain;
  transition: opacity 1.2s;
}

@media (max-width: 960px) {
  #hero .content {
    background-image: url(../img/flag-line-sp.svg);
  }
}

#hero .copy {
  max-width: 42%;
}

#hero .copy svg {
  max-width: 100%;
}

@media (max-width: 1200px) {
  #hero .copy {
    max-width: 370px;
  }
}

@media (max-width: 960px) {
  #hero .copy {
    max-width: 50%;
    -webkit-transform: translate(-1%, -6%);
            transform: translate(-1%, -6%);
  }
}

#hero .st0 {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 14.1732;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 1500;
  /* この行を追加 */
  stroke-dashoffset: 1500;
  /* この行を追加 */
}

/* VISION */
#vision {
  position: relative;
  background-color: #5F7EFF;
  padding: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 960px) {
  #vision {
    padding: 70px 8px;
  }
}

#vision svg {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#vision svg path {
  fill: transparent;
  stroke-width: 2px;
}

#vision.view svg path {
  stroke: #fff;
  -webkit-animation: vision_svg 1.4s ease-in both;
          animation: vision_svg 1.4s ease-in both;
}

#vision .content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

@media (max-width: 960px) {
  #vision .content {
    min-height: 200px;
  }
}

#vision h2 {
  margin: -.5em 0 1.0em;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#vision h2 > * {
  position: relative;
  opacity: 0;
  transition-delay: 1.5s;
}

#vision h2::before, #vision h2::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: #5F7EFF;
  transition-delay: 1.1s;
}

#vision h2::before {
  z-index: 0;
  left: -100%;
}

#vision h2::after {
  z-index: 2;
  left: -100%;
}

#vision h2.view > * {
  opacity: 1;
}

#vision h2.view::before {
  -webkit-animation: animBack .6s .9s both;
          animation: animBack .6s .9s both;
}

#vision h2.view::after {
  -webkit-animation: animFront 1.8s .9s both;
          animation: animFront 1.8s .9s both;
}

@-webkit-keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@-webkit-keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

#vision p {
  max-width: 35%;
  transition-delay: 1.5s;
}

@media (max-width: 1200px) {
  #vision p {
    max-width: 330px;
  }
}

@media (max-width: 960px) {
  #vision p {
    width: 150px;
  }
}

@-webkit-keyframes vision_svg {
  0% {
    fill: transparent;
    stroke-dasharray: 4000px;
    stroke-dashoffset: 4000px;
  }
  65% {
    stroke-dashoffset: 0;
  }
  70% {
    fill: transparent;
  }
  100% {
    fill: #fff;
  }
}

@keyframes vision_svg {
  0% {
    fill: transparent;
    stroke-dasharray: 4000px;
    stroke-dashoffset: 4000px;
  }
  65% {
    stroke-dashoffset: 0;
  }
  70% {
    fill: transparent;
  }
  100% {
    fill: #fff;
  }
}

/* INTRO */
#intro {
  position: relative;
  padding: 350px 20px;
  text-align: center;
}

@media (max-width: 960px) {
  #intro {
    padding: 80px 30px;
  }
}

#intro::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  background: url(../img/mv_texture.png);
}

#intro video {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#intro .text {
  position: relative;
  z-index: 10;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

#intro p {
  color: #fff;
  text-align: left;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#intro p > * {
  position: relative;
  opacity: 0;
  transition-delay: 1.5s;
}

#intro p::before, #intro p::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: #5F7EFF;
  transition-delay: 1.1s;
}

#intro p::before {
  z-index: 0;
  left: -100%;
}

#intro p::after {
  z-index: 2;
  left: -100%;
}

#intro p.view > * {
  opacity: 1;
}

#intro p.view::before {
  -webkit-animation: animBack .6s .9s both;
          animation: animBack .6s .9s both;
}

#intro p.view::after {
  -webkit-animation: animFront 1.8s .9s both;
          animation: animFront 1.8s .9s both;
}

@keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

#intro p::before {
  display: none !important;
}

#intro p + p {
  margin-top: 1.7em;
}

/* ADVENTURE */
#adventure header {
  position: relative;
  background: #F8FE4A;
  padding: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100vh;
}

#adventure header svg {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

#adventure header svg path {
  fill: transparent;
  stroke-width: 2px;
}

#adventure header .content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#adventure header h2 {
  margin: .8em 0 1.1em;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#adventure header h2 > * {
  position: relative;
  opacity: 0;
  transition-delay: 1.5s;
}

#adventure header h2::before, #adventure header h2::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: #F8FE4A;
  transition-delay: 1.1s;
}

#adventure header h2::before {
  z-index: 0;
  left: -100%;
}

#adventure header h2::after {
  z-index: 2;
  left: -100%;
}

#adventure header h2.view > * {
  opacity: 1;
}

#adventure header h2.view::before {
  -webkit-animation: animBack .6s .9s both;
          animation: animBack .6s .9s both;
}

#adventure header h2.view::after {
  -webkit-animation: animFront 1.8s .9s both;
          animation: animFront 1.8s .9s both;
}

@keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

#adventure header p {
  font-size: 40rem;
  line-height: 1.8;
  text-align: center;
  letter-spacing: .08em;
  transition-delay: 1.5s;
}

@media (max-width: 1200px) {
  #adventure header p {
    font-size: 35rem;
  }
}

@media (max-width: 960px) {
  #adventure header {
    padding: 30px 10px;
  }
  #adventure header .content {
    min-height: 300px;
  }
  #adventure header p {
    font-size: 20rem;
  }
}

#adventure.view header svg path {
  stroke: #fff;
  -webkit-animation: adventure_svg 1.4s ease-in both;
          animation: adventure_svg 1.4s ease-in both;
}

#adventure > section {
  display: flex;
}

#adventure > section .image, #adventure > section .text {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2%;
}

#adventure > section .text {
  background: #F7F7F7;
}

#adventure > section h3 {
  margin-bottom: 2.3em;
  padding: .05em .05em .4em;
  font-size: 22rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: .08em;
}

#adventure > section h3::before {
  display: none;
}

#adventure > section p {
  text-align: center;
  line-height: 2.6;
}

#adventure > section br.spc {
  display: none;
}

@media (max-width: 1200px) {
  #adventure > section h3 {
    text-align: center;
  }
  #adventure > section br.spc {
    display: block;
  }
}

@media (max-width: 960px) {
  #adventure > section {
    flex-direction: column;
  }
  #adventure > section .text {
    width: 100%;
    padding: 70px 20px;
  }
  #adventure > section .image {
    width: 100%;
    padding: 0 20px;
  }
  #adventure > section .image img {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
  #adventure > section h3 {
    margin-bottom: 1.4em;
  }
  #adventure > section h3 br.spc {
    display: block;
  }
  #adventure > section br.spc {
    display: none;
  }
}

#adventure .adventure-01 .image {
  background-color: #A3FD49;
}

#adventure .adventure-01 h3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#adventure .adventure-01 h3 > * {
  position: relative;
  opacity: 0;
  transition-delay: 1.5s;
}

#adventure .adventure-01 h3::before, #adventure .adventure-01 h3::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: #A3FD49;
  transition-delay: 1.1s;
}

#adventure .adventure-01 h3::before {
  z-index: 0;
  left: -100%;
}

#adventure .adventure-01 h3::after {
  z-index: 2;
  left: -100%;
}

#adventure .adventure-01 h3.view > * {
  opacity: 1;
}

#adventure .adventure-01 h3.view::before {
  -webkit-animation: animBack .6s .9s both;
          animation: animBack .6s .9s both;
}

#adventure .adventure-01 h3.view::after {
  -webkit-animation: animFront 1.8s .9s both;
          animation: animFront 1.8s .9s both;
}

@keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

#adventure .adventure-02 .image {
  background-color: #60FEED;
}

#adventure .adventure-02 h3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#adventure .adventure-02 h3 > * {
  position: relative;
  opacity: 0;
  transition-delay: 1.5s;
}

#adventure .adventure-02 h3::before, #adventure .adventure-02 h3::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: #60FEED;
  transition-delay: 1.1s;
}

#adventure .adventure-02 h3::before {
  z-index: 0;
  left: -100%;
}

#adventure .adventure-02 h3::after {
  z-index: 2;
  left: -100%;
}

#adventure .adventure-02 h3.view > * {
  opacity: 1;
}

#adventure .adventure-02 h3.view::before {
  -webkit-animation: animBack .6s .9s both;
          animation: animBack .6s .9s both;
}

#adventure .adventure-02 h3.view::after {
  -webkit-animation: animFront 1.8s .9s both;
          animation: animFront 1.8s .9s both;
}

@keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

#adventure .adventure-03 .image {
  background-color: #FF53B8;
}

#adventure .adventure-03 h3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#adventure .adventure-03 h3 > * {
  position: relative;
  opacity: 0;
  transition-delay: 1.5s;
}

#adventure .adventure-03 h3::before, #adventure .adventure-03 h3::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: #FF53B8;
  transition-delay: 1.1s;
}

#adventure .adventure-03 h3::before {
  z-index: 0;
  left: -100%;
}

#adventure .adventure-03 h3::after {
  z-index: 2;
  left: -100%;
}

#adventure .adventure-03 h3.view > * {
  opacity: 1;
}

#adventure .adventure-03 h3.view::before {
  -webkit-animation: animBack .6s .9s both;
          animation: animBack .6s .9s both;
}

#adventure .adventure-03 h3.view::after {
  -webkit-animation: animFront 1.8s .9s both;
          animation: animFront 1.8s .9s both;
}

@keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

#adventure .adventure-04 .image {
  background-color: #FC6A4E;
}

#adventure .adventure-04 h3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#adventure .adventure-04 h3 > * {
  position: relative;
  opacity: 0;
  transition-delay: 1.5s;
}

#adventure .adventure-04 h3::before, #adventure .adventure-04 h3::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: #FC6A4E;
  transition-delay: 1.1s;
}

#adventure .adventure-04 h3::before {
  z-index: 0;
  left: -100%;
}

#adventure .adventure-04 h3::after {
  z-index: 2;
  left: -100%;
}

#adventure .adventure-04 h3.view > * {
  opacity: 1;
}

#adventure .adventure-04 h3.view::before {
  -webkit-animation: animBack .6s .9s both;
          animation: animBack .6s .9s both;
}

#adventure .adventure-04 h3.view::after {
  -webkit-animation: animFront 1.8s .9s both;
          animation: animFront 1.8s .9s both;
}

@keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

#adventure .adventure-05 {
  background-color: #5F7EFC;
  padding: 100px 3%;
}

@media (max-width: 1200px) {
  #adventure .adventure-05 {
    padding: 30px 3%;
  }
}

@media (max-width: 960px) {
  #adventure .adventure-05 {
    padding: 0;
  }
}

#adventure .adventure-05 .content {
  display: flex;
  max-width: 1480px;
  max-height: 100%;
  width: 100%;
  height: 856px;
  margin: auto;
  background: url(../img/egg.png) no-repeat center/100% 100%;
}

@media (max-width: 1200px) {
  #adventure .adventure-05 .content {
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 13% 0;
  }
}

@media (max-width: 960px) {
  #adventure .adventure-05 .content {
    background: none;
    padding: 0;
  }
}

#adventure .adventure-05 .image {
  padding-right: 0;
  padding-left: 6%;
  align-items: flex-end;
}

@media (max-width: 1200px) {
  #adventure .adventure-05 .image {
    width: 50%;
    padding: 0;
    margin-bottom: 60px;
  }
}

@media (max-width: 960px) {
  #adventure .adventure-05 .image {
    width: auto;
    margin: 50px 10px;
    background: url(../img/egg.png) no-repeat center/100% 100%;
  }
}

#adventure .adventure-05 .text {
  padding-left: 6%;
  padding-right: 6%;
  background: none;
}

#adventure .adventure-05 .text h3 {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#adventure .adventure-05 .text h3 > * {
  position: relative;
  opacity: 0;
  transition-delay: 1.5s;
}

#adventure .adventure-05 .text h3::before, #adventure .adventure-05 .text h3::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  content: "";
  background: #5F7EFC;
  transition-delay: 1.1s;
}

#adventure .adventure-05 .text h3::before {
  z-index: 0;
  left: -100%;
}

#adventure .adventure-05 .text h3::after {
  z-index: 2;
  left: -100%;
}

#adventure .adventure-05 .text h3.view > * {
  opacity: 1;
}

#adventure .adventure-05 .text h3.view::before {
  -webkit-animation: animBack .6s .9s both;
          animation: animBack .6s .9s both;
}

#adventure .adventure-05 .text h3.view::after {
  -webkit-animation: animFront 1.8s .9s both;
          animation: animFront 1.8s .9s both;
}

@keyframes animBack {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

@keyframes animFront {
  0% {
    left: -100%;
  }
  33% {
    left: 0;
  }
  100% {
    left: 100%;
  }
}

@media (max-width: 1200px) {
  #adventure .adventure-05 .text {
    width: auto;
    padding: 0;
  }
}

@media (max-width: 960px) {
  #adventure .adventure-05 .text {
    width: 100%;
    background: #F7F7F7;
    padding: 70px 20px;
  }
}

@-webkit-keyframes adventure_svg {
  0% {
    fill: transparent;
    stroke-dasharray: 4000px;
    stroke-dashoffset: 4000px;
  }
  65% {
    stroke-dashoffset: 0;
  }
  70% {
    fill: transparent;
  }
  100% {
    fill: #fff;
  }
}

@keyframes adventure_svg {
  0% {
    fill: transparent;
    stroke-dasharray: 4000px;
    stroke-dashoffset: 4000px;
  }
  65% {
    stroke-dashoffset: 0;
  }
  70% {
    fill: transparent;
  }
  100% {
    fill: #fff;
  }
}