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

/*========================================
start
========================================*/
.start {
width: 100%;
height: 100vh;
overflow: hidden;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
animation:start 2s forwards;
background-color: transparent;
pointer-events: none;
z-index: 9999;
}
.start .bgTop {
width: 100%;
height: 50.1%;
background-color: #000;
position: absolute;
top: 0;
left: 0;
animation:bgTop 1.8s forwards;
}
.start .bgBtm {
width: 100%;
height: 50.1%;
background-color: #000;
position: absolute;
bottom: 0;
right: 0;
animation:bgBtm 1.8s forwards;
}
@keyframes start {
0% {}
100% { display: none; }
}
@keyframes bgTop {
0% {top: 0%; left: 0; opacity: 1;background-color: #000;}
10% {top: 0%; left: 0; opacity: 1;background-color: #000;}
99% {top: -50%; left: 0; opacity: 1;background-color: #000;}
100% {top: -50%; left: 0; opacity: 0;background-color: transparent;}
}
@keyframes bgBtm {
0% {bottom: 0%; right: 0; opacity: 1;background-color: #000;}
10% {bottom: 0%; right: 0; opacity: 1;background-color: #000;}
99% {bottom: -50%; right:0; opacity: 1;background-color: #000;}
100% {bottom: -50%; right: 0; opacity: 0;background-color: transparent;}
}

/*========================================
gNavi
========================================*/
.gNavi {
position: absolute;
top: 4%;
right: calc(3% + 90px);
animation:gNavi .2s ease-out 1.9s both;
z-index: 9900;
}
@keyframes gNavi {
from {opacity: 0; transform: translate3d(100%, 0, 0);}
to {opacity: 1; transform: translate3d(0, 0%, 0);}
}
.gNavi li {
font-size: 1.2vw;
line-height: 1.4em;
font-family: 'Cabin', sans-serif;
text-align: right;
margin-bottom: 0.8em;
}
.gNavi li:nth-child(1) {
margin-bottom: 1em;
}
.gNavi img {
width: 4vw;
}
.gNavi li a {
display: block;
color: #FFF;
text-decoration: none;
}
.gNavi li a:hover {
text-decoration: underline;
}
.gNavi.cont {
width: 12vw;
position: fixed;
top: 30px;
right: -200px;
z-index:9900;
}
.gNavi.cont li a {
color: #1a1a1a;
}

/*========================================
brand
========================================*/
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.brand {
width: 100%;
height: 100%;
min-height: 400px;
overflow: hidden;
position: relative;
}
.brand .inner {
width:100%;
height: 100%;
position: relative;
overflow: hidden;
z-index: 1;
}
.brand  video {
position: absolute;
top: 50%;
left:50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
animation:video 2s ease-out 2s both;
}
@keyframes video {
from {opacity: 0;}
to {opacity: .8;}
}

/*ttl*/
.brand .ttl {
height: 100%;
margin: 0 auto;
height: 100%;
z-index: 1;
pointer-events: none;
}
.brand .ttl.line {
z-index: 9920;
position: absolute;
top: 0;
left:50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%);
mix-blend-mode: lighten;
}
.brand .ttl li {
height: auto;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.brand .ttl li img {
margin: -40px 0 -40px;
animation:ttl 1s ease-out both;
}
.brand .ttl li:nth-child(1) img {
animation-delay: .5s;
margin-left: -10%;
}
.brand .ttl li:nth-child(2) img {
animation-delay: .7s;
margin-left: -6%;
}
.brand .ttl li:nth-child(3) img {
animation-delay: .9s;
margin-left: -2%;
}
.brand .ttl li:nth-child(4) img {
animation-delay: 1.1s;
margin-left: 2%;
}
@keyframes ttl {
from {transform: translate3d(-50%, 100%, 0) rotate(45deg) scale(0.8,0.8);transform-origin:left top; opacity:0;}
to {transform: translate3d(0, 0%, 0) rotate(0deg) scale(1,1);transform-origin:left top; opacity:1;}
}

/*aside*/
aside {
width: 90px;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index:9920;
}
aside .rightBar {
width: 90px;
height: 100%;
background-color:#1a1a1a;
animation:rightBar .4s ease-out 1.6s both;
}
aside .rightBar p {
width: 40px;
padding: 40px 25px 0;
writing-mode: vertical-rl;
font-size: 32px;
line-height: 1.2em;
letter-spacing: 1em;
white-space: nowrap;
color: #FFF;
}
@keyframes rightBar {
from {opacity: 0; transform: translate3d(0, 100%, 0);}
to {opacity: 1; transform: translate3d(0, 0%, 0);}
}


/*========================================================================================================================
SP　750px
========================================================================================================================*/
@media screen and (max-width: 750px) {
/*========================================
SP　brand
========================================*/
.brand {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.brand .inner {
width:100%;
height: 100%;
position: relative;
overflow: hidden;
z-index: 1;
}
.brand  video {
position: absolute;
top: 50%;
left:50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
animation:video 2s ease-out 2s both;
}
@keyframes video {
from {opacity: 0;}
to {opacity: .8;}
}

/*spNavi*/
.brand .spLogo {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9950;
}
.brand .spLogo a {
width: 42%;
padding: 5% 0 0 5%;
}

/*ttl*/
.brand .ttl {
margin: 0 auto;
height: 40%;
z-index: 1;
pointer-events: none;
padding: 40% 0 20%;
}
.brand .ttl li img {
margin: 0;
animation:ttl 1s ease-out both;
}
/*aside*/
aside {
width:24px;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
aside .rightBar {
width:24px;
height: 100%;
background-color:#1a1a1a;
position: absolute;
top: 0;
right: 0;
padding: 0 5px;
animation:rightBar .4s ease-out 1.6s both;
}
aside .rightBar p {
width: 100%;
padding:8em 0 0;
writing-mode: vertical-rl;
font-size: 16px;
line-height: 1.5em;
letter-spacing: 1em;
white-space: nowrap;
color: #FFF;
}
}