/* -----------------------------------------------
Base
-----------------------------------------------*/
.baseplate {
  width:100%;
  height: 100%;
  min-height: 100vh;
  display: block;
  position: absolute;
  top:0;
  left:0;
  z-index:22550;
  overflow: hidden;
  background-color: rgba(33,40,95,1);
}
.baseplate {
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-duration: 11s;
animation-duration: 11s;
-webkit-animation-name: baseplate;
animation-name: baseplate;
-webkit-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}

@-webkit-keyframes baseplate {
0% {
background-color: rgba(33,40,95,1);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
22% {
background-color: rgba(33,40,95,1);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
253% {
background-color: rgba(255,255,255,1);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
80% {
background-color: rgba(255,255,255,1);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
99% {
background-color: rgba(255,255,255,0);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
100% {
background-color: rgba(255,255,255,0);
top:-9999px;
height: 0;
min-height: 0%;
display: none;
}
}
@keyframes baseplate {
0% {
background-color: rgba(33,40,95,1);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
22% {
background-color: rgba(33,40,95,1);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
23% {
background-color: rgba(255,255,255,1);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
80% {
background-color: rgba(255,255,255,1);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
99% {
background-color: rgba(255,255,255,0);
height: 100%;
min-height: 100%;
top:0;
display: block;
}
100% {
background-color: rgba(255,255,255,0);
top:-9999px;
height: 0;
min-height: 0%;
display: none;
}
}


/* -----------------------------------------------
Logo Box
----------------------------------------------- */
.logobox {
width:100%;
height: 100%;
min-height: 85vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top:0%;
left:0;
z-index:24550;
overflow: hidden;
opacity: 1;
}
.logobox {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: logobox;
animation-name: logobox;
-webkit-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes logobox {
0% {
opacity: 1;
display: flex;
}
90% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
@keyframes logobox {
0% {
opacity: 1;
display: flex;
}
90% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
/* -----------------------------------------------
Logo Ani 01
----------------------------------------------- */
.logoani01 {
width:200%;
height: auto;
display: block;
transform: translateX(-25%);
}
.logoani01 {
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: logoani01;
animation-name: logoani01;
-webkit-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity: 0;
}
@-webkit-keyframes logoani01 {
0% {
width:200%;
transform: translateX(-25%);
opacity: 0;
display: block;
}
5% {
width:70%;
transform: translateX(0%);
opacity: 1;
display: block;
}
90% {
width:70%;
transform: translateX(0%);
opacity: 1;
display: block;
}
99% {
width:70%;
transform: translateX(0%);
opacity: 0;
display: block;
}
100% {
width:70%;
transform: translateX(-9999px);
opacity: 0;
display: none;
}
}
@keyframes logoani01 {
0% {
width:200%;
transform: translateX(-25%);
opacity: 0;
display: block;
}
5% {
width:70%;
transform: translateX(0%);
opacity: 1;
display: block;
}
90% {
width:70%;
transform: translateX(0%);
opacity: 1;
display: block;
}
99% {
width:70%;
transform: translateX(0%);
opacity: 0;
display: block;
}
100% {
width:70%;
transform: translateX(-9999px);
opacity: 0;
display: none;
}
}

/* -----------------------------------------------
Logo Ani text
----------------------------------------------- */
.logoani02 {
width:100%;
height: auto;
display: block;
transform: translateY(10px);
}
.logoani02 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-name: logoani02;
animation-name: logoani02;
-webkit-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
opacity: 0;
}
@-webkit-keyframes logoani02 {
0% {
width:70%;
transform: translateY(30px);
opacity: 0;
display: block;
}
15% {
width:70%;
transform: translateY(10px);
opacity: 1;
display: block;
}
90% {
width:70%;
transform: translateY(10px);
opacity: 1;
display: block;
}
99% {
width:70%;
transform: translateY(10px);
opacity: 0;
display: block;
}
100% {
width:70%;
transform: translateX(-9999px);
opacity: 0;
display: none;
}
}
@keyframes logoani02 {
0% {
width:70%;
transform: translateY(30px);
opacity: 0;
display: block;
}
15% {
width:70%;
transform: translateY(10px);
opacity: 1;
display: block;
}
90% {
width:70%;
transform: translateY(10px);
opacity: 1;
display: block;
}
99% {
width:70%;
transform: translateY(10px);
opacity: 0;
display: block;
}
100% {
width:70%;
transform: translateX(-9999px);
opacity: 0;
display: none;
}
}


/* -----------------------------------------------
Catch Box
----------------------------------------------- */
.catchbox {
width:100%;
height: 100%;
min-height: 85vh;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
top:0%;
left:0;
z-index:24550;
overflow: hidden;
opacity: 0;
}
.catchbox {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-name: catchbox;
animation-name: catchbox;
-webkit-animation-iteration-count:1;
animation-iteration-count:1;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
@-webkit-keyframes catchbox {
0% {
opacity: 1;
display: flex;
}
90% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
@keyframes catchbox {
0% {
opacity: 1;
display: flex;
}
90% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}

/* -----------------------------------------------
Catch Title
----------------------------------------------- */
.catch_title {
width:100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size:100px;
line-height: 1em;
text-align: center;
color:var(--color-1st);
white-space: nowrap;
opacity: 0;
margin:0 0 0.5em;
}
 .catch_title {
 -webkit-animation-delay: 2.5s;
 animation-delay: 2.5s;
 -webkit-animation-duration: 3.5s;
 animation-duration: 3.5s;
 -webkit-animation-name: catch_title;
 animation-name: catch_title;
 -webkit-animation-iteration-count:1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
opacity: 0;
 }
 @-webkit-keyframes catch_title {
0% {
font-size:100px;
opacity: 0;
display: flex;
margin-left:0;
}
5% {
font-size:30px;
opacity: 1;
display: flex;
margin-left:0;
}
90% {
font-size:30px;
opacity: 1;
display: flex;
margin-left:0;
}
99% {
font-size:30px;
opacity: 0;
display: flex;
margin-left:0;
}
100% {
font-size:30px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}
@keyframes catch_title {
0% {
font-size:100px;
opacity: 0;
display: flex;
margin-left:0;
}
5% {
font-size:30px;
opacity: 1;
display: flex;
margin-left:0;
}
90% {
font-size:30px;
opacity: 1;
display: flex;
margin-left:0;
}
99% {
font-size:30px;
opacity: 0;
display: flex;
margin-left:0;
}
100% {
font-size:30px;
opacity: 0;
margin-left:-9999px;
display: none;
}
}

/* -----------------------------------------------
Catch 01
----------------------------------------------- */
.cbtxt01 {
width:100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size:40px;
font-weight: 800;
letter-spacing: -0.05em;
line-height: 1em;
text-align: center;
color:var(--color-1st);
white-space: nowrap;
opacity: 0;
margin:0 0 0.1em;
}
 .cbtxt01 {
 -webkit-animation-delay: 3s;
 animation-delay: 3s;
 -webkit-animation-duration: 3s;
 animation-duration: 3s;
 -webkit-animation-name: cbtxt01;
 animation-name: cbtxt01;
 -webkit-animation-iteration-count:1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
opacity: 0;
 }
 @-webkit-keyframes cbtxt01 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}
@keyframes cbtxt01 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}

/* -----------------------------------------------
Catch 02
----------------------------------------------- */
.cbtxt02 {
width:100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size:40px;
letter-spacing: -0.05em;
font-weight: 800;
line-height: 1em;
text-align: center;
color:var(--color-1st);
white-space: nowrap;
opacity: 0;
margin:0 0 0.1em;
}
 .cbtxt02 {
 -webkit-animation-delay: 3.5s;
 animation-delay: 3.5s;
 -webkit-animation-duration: 2.5s;
 animation-duration: 2.5;
 -webkit-animation-name: cbtxt02;
 animation-name: cbtxt02;
 -webkit-animation-iteration-count:1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
opacity: 0;
 }
 @-webkit-keyframes cbtxt02 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}
@keyframes cbtxt02 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}

/* -----------------------------------------------
Catch 03
----------------------------------------------- */
.cbtxt03 {
width:100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size:40px;
letter-spacing: -0.05em;
font-weight: 800;
line-height: 1em;
text-align: center;
color:var(--color-1st);
white-space: nowrap;
opacity: 0;
margin:0 0 0.1em;
} 
 .cbtxt03 {
 -webkit-animation-delay: 4s;
 animation-delay: 4s;
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
 -webkit-animation-name: cbtxt03;
 animation-name: cbtxt03;
 -webkit-animation-iteration-count:1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
opacity: 0;
 }
 @-webkit-keyframes cbtxt03 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:-100px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}
@keyframes cbtxt03 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:-100px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}

/* -----------------------------------------------
Catch 04
----------------------------------------------- */
.cbtxt04 {
width:100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size:40px;
letter-spacing: -0.05em;
font-weight: 800;
line-height: 1em;
text-align: center;
color:var(--color-1st);
white-space: nowrap;
opacity: 0;
margin:0 0 0.1em;
}
 .cbtxt04 {
 -webkit-animation-delay: 4.5s;
 animation-delay: 4.5s;
 -webkit-animation-duration: 1.5s;
 animation-duration: 1.5s;
 -webkit-animation-name: cbtxt04;
 animation-name: cbtxt04;
 -webkit-animation-iteration-count:1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
opacity: 0;
 }
 @-webkit-keyframes cbtxt04 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:100px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}
@keyframes cbtxt04 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:100px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}

/* -----------------------------------------------
Catch 05
----------------------------------------------- */
.cbtxt05 {
width:100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
font-size:40px;
letter-spacing: -0.05em;
font-weight: 800;
line-height: 1em;
text-align: center;
color:var(--color-1st);
white-space: nowrap;
opacity: 0;
margin:0 0 0.1em;
}
 .cbtxt05 {
 -webkit-animation-delay: 5s;
 animation-delay: 5s;
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-name: cbtxt05;
 animation-name: cbtxt05;
 -webkit-animation-iteration-count:1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
opacity: 0;
 }
 @-webkit-keyframes cbtxt05 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:-100px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}
@keyframes cbtxt05 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left:-100px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left:0;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left:0;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}

/* -----------------------------------------------
EndText01
----------------------------------------------- */
.cbtxt_end01 {
font-size:40px;
letter-spacing: -0.05em;
font-weight: 800;
line-height: 1em;
text-align: center;
color:var(--color-1st);
white-space: nowrap;
display: block;
opacity: 0;
margin:0 0 0.1em 0;
}
 .cbtxt_end01 {
 -webkit-animation-delay: 6s;
 animation-delay: 6s;
 -webkit-animation-duration: 3s;
 animation-duration: 3s;
 -webkit-animation-name: cbtxt_end01;
 animation-name: cbtxt_end01;
 -webkit-animation-iteration-count:1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
opacity: 0;
 }
 @-webkit-keyframes cbtxt_end01 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left: 0px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left: 0px;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left: 0px;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left: 0px;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}
@keyframes cbtxt_end01 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left: 0px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left: 0px;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left: 0px;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left: 0px;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}

/* -----------------------------------------------
EndText02
----------------------------------------------- */
.cbtxt_end02 {
font-size:40px;
letter-spacing: -0.05em;
font-weight: 800;
line-height: 1em;
text-align: center;
color:var(--color-1st);
white-space: nowrap;
display: block;
opacity: 0;
margin:0 0 0 0;
}
 .cbtxt_end02 {
 -webkit-animation-delay: 7s;
 animation-delay: 7s;
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
 -webkit-animation-name: cbtxt_end02;
 animation-name: cbtxt_end02;
 -webkit-animation-iteration-count:1;
 animation-iteration-count:1;
 -webkit-animation-fill-mode:forwards;
 animation-fill-mode:forwards;
opacity: 0;
 }
 @-webkit-keyframes cbtxt_end02 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left: 0px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left: 0px;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left: 0px;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left: 0px;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}
@keyframes cbtxt_end02 {
0% {
font-size:40px;
opacity: 0;
display: block;
margin-left: 0px;
}
15% {
font-size:40px;
opacity: 1;
display: block;
margin-left: 0px;
}
90% {
font-size:40px;
opacity: 1;
display: block;
margin-left: 0px;
}
99% {
font-size:40px;
opacity: 0;
display: block;
margin-left: 0px;
}
100% {
font-size:40px;
opacity: 0;
display: none;
margin-left:-9999px;
}
}