@font-face{
font-family:"Calligstrophe";
src:url("Font/Calligstrophe.ttf") format("truetype");
font-weight:normal;
font-style:normal;
}

body{
margin:0;
overflow:hidden;
font-family:"Calligstrophe","Yuji Boku",serif;
color:#0D0D0D;
background:#000;
}

.pageFade{
position:fixed;
inset:0;
background:#000;
z-index:999999;
pointer-events:none;
opacity:1;
transition:opacity .25s ease;
}

body.loaded .pageFade{opacity:0}
body.page-out .pageFade{opacity:1}

.navBar{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:1vw 3vw 1vw 4vw;
z-index:1000;
box-sizing:border-box;
opacity:0;
transform:translateY(25px);
transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}

body.loaded .navBar{
opacity:1;
transform:translateY(0);
}

body.page-out .navBar{
transform:translateY(0);
}

.navLeft,.navRight{
display:flex;
align-items:center;
}

.navLeft{flex-direction:column;align-items:flex-start}
.navRight{gap:80px;margin-top:-70px}

.navItem{
position:relative;
width:120px;
height:40px;
display:block;
cursor:pointer;
opacity:0;
transform:translateY(-20px);
transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), scale .1s ease;
will-change:transform, scale;
}

body.loaded .navItem{
opacity:1;
transform:translateY(0);
}


body.loaded .navItem:hover {
scale: 1.15;
z-index: 20;
transition: scale .1s ease;
}

.navLeft .navItem{width:320px;height:70px}

.navLeft .navItem:nth-child(1){transition-delay:.05s}
.navLeft .navItem:nth-child(2){transition-delay:.10s}
.navRight .navItem:nth-child(1){transition-delay:.15s}
.navRight .navItem:nth-child(2){transition-delay:.20s}
.navRight .navItem:nth-child(3){transition-delay:.25s}

.navItem img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
}

.navItem img:nth-child(1){animation:s1 2.4s infinite}
.navItem img:nth-child(2){animation:s2 2.4s infinite}
.navItem img:nth-child(3){animation:s3 2.4s infinite}

@keyframes s1{0%,32%{opacity:1}33%,100%{opacity:0}}
@keyframes s2{0%,32%{opacity:0}33%,65%{opacity:1}66%,100%{opacity:0}}
@keyframes s3{0%,65%{opacity:0}66%,100%{opacity:1}}

.centerWrap{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:10px;
padding-top:80px;
z-index:1;
}

.mBox{
position:relative;
width:900px;
height:750px;
overflow:visible;
opacity:0;
transform:translateY(25px);
transition:opacity .6s ease, transform .35s cubic-bezier(.2,.8,.2,1), scale .1s ease;
transform-origin:center;
will-change:transform, scale;
}

body.loaded .mBox{
opacity:1;
transform:translateY(0);
}

.mBox:hover {
scale: 1.05;
}

body.page-out .mBox{
transform:translateY(-20vh);
}

.mBase{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
pointer-events:none;
z-index:1;
}

.mTop{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
cursor:pointer;
pointer-events:auto;
z-index:2;
transition:scale .1s ease;
}

.mBox:hover .mTop{scale:1.05}

.mTopWrap{
position:absolute;
inset:0;
transform:translate(15px,20px);
z-index:9;
}

.mTopWrap.bounce{animation:clickBounce .35s ease}

@keyframes clickBounce{
0%{transform:translate(15px,20px)}
40%{transform:translate(15px,10px)}
100%{transform:translate(15px,20px)}
}

.txtBox{
position:relative;
z-index:10;
margin-top:-180px;
width:580px;
height:240px;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transform:translateY(25px);
transition:opacity .6s ease, transform .35s cubic-bezier(.2,.8,.2,1), scale .1s ease;
will-change:transform, scale;
}

body.loaded .txtBox{opacity:1;transform:translateY(0)}

body.loaded .txtBox:hover {
scale: 1.05;
z-index: 20;
}

body.page-out .txtBox{transform:translateY(-30vh)}

.txtBg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
z-index:0;
}

.txt{
position:relative;
z-index:1;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
white-space:pre-wrap;
font-size:24px;
line-height:1.5;
color:#5c5f2a;
padding:20px;
box-sizing:border-box;
}

.bgLayer{
position:fixed;
inset:0;
width:100vw;
height:100vh;
z-index:-1;
}

.bgLayer img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.leftChibi{
position:fixed;
left:2vw;
top:63%;
display:flex;
z-index:5;
opacity:0;
transform: translateY(-50%) translateX(-15vw);
transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}

body.loaded .leftChibi{
opacity:1;
transform: translateY(-50%) translateX(0);
}

body.page-out .leftChibi{
transform: translateY(-50%) translateX(-15vw);
}

.chibiScale{
display:flex;
flex-direction:column;
gap:0;
transform-origin:left center;
transform:scale(clamp(0.45,calc(0.4vw + 0.7vh),1));
}

.box1{margin-left:330px}
.box2{margin-left:100px}
.box3{margin-left:300px}

.boxBg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
z-index:0;
}

.boxClip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-size: contain;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: 1;
}

.box1 .boxClip {-webkit-mask-image:url("Assets/MainPage/Chibi/boxC3.webp")}
.box2 .boxClip{-webkit-mask-image:url("Assets/MainPage/Chibi/boxC2.webp")} 
.box3 .boxClip{-webkit-mask-image:url("Assets/MainPage/Chibi/boxC1.webp")}



.boxText{
position:absolute;
inset:0;
z-index:2;
pointer-events:none;
bottom:-100px;
}

.boxText img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
transform:scale(0.6);
}

.boxText img:nth-child(1){animation:s1 2.4s infinite}
.boxText img:nth-child(2){animation:s2 2.4s infinite}
.boxText img:nth-child(3){animation:s3 2.4s infinite}

.rightWork{
position:fixed;
right:5.5vw;
top:50%;
z-index:5;
opacity:0;
transform: translateY(-50%) translateX(15vw);
transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}

body.loaded .rightWork{
opacity:1;
transform: translateY(-50%) translateX(0);
}

body.page-out .rightWork{
transform: translateY(-50%) translateX(15vw);
}

.rwInner{
display:flex;
flex-direction:column;
align-items:center;
gap:0px;
transform-origin:center;
transform: scale(clamp(0.8, 0.7vw + 0.7vh, 1));
transition: scale .15s ease;
will-change: scale;
}

.rwInner:hover{
scale: calc(clamp(0.8, 0.7vw + 0.7vh, 1) * 1.05);
}

.rwText{
position:relative;
width:230px;
height:70px;
margin-bottom: -200px;
margin-left: 135px;
z-index:3;
}

.rwText img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
}

.rwText img:nth-child(1){animation:s1 2.4s infinite}
.rwText img:nth-child(2){animation:s2 2.4s infinite}
.rwText img:nth-child(3){animation:s3 2.4s infinite}

.rwBox{
position:relative;
width:550px;
height:700px;
display:flex;
align-items:center;
justify-content:center;
}


.rwVideo{
position:absolute;
top:210px;
width:500px;
aspect-ratio:16/9;
height:auto;
z-index:2;
border:0;
}

.rwFrame{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
z-index:1;
pointer-events:none;
}

.chibiLink{
display:block;
text-decoration:none;
position:relative;
}

.chibiBox{
position:relative;
width:340px;
height:330px;
margin-top:-108px;
transition:transform .1s ease, z-index 0s;
transform-origin:center;
}

.chibiLink:hover .chibiBox {
transform:scale(1.08);
z-index:50;
}

.footerLinks{
position:fixed;
right:2vw;
bottom:1.5vh;
display:flex;
gap:24px;
z-index:20;
}

.footerItem{
display:block;
text-decoration:none;
transition:transform .1s ease;
}

.footerItem:hover{transform:scale(1.08)}

.footerAnim{
position:relative;
width:140px;
height:32px;
}

.footerAnim img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
opacity:0;
}

.footerAnim img:nth-child(1){animation:s1 2.4s infinite}
.footerAnim img:nth-child(2){animation:s2 2.4s infinite}
.footerAnim img:nth-child(3){animation:s3 2.4s infinite}

.boxTop{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
z-index:1;
transition:transform .15s ease;
}

.chibiLink:hover .boxTop{animation:boxBounce .38s cubic-bezier(.2,.8,.2,1)}

@keyframes boxBounce{
0%{transform:translateY(0)}
30%{transform:translateY(-20px)}
100%{transform:translateY(0)}
}

@media (max-width: 1800px) {
  .leftChibi {
    position: absolute !important;
    left: -6vw !important;
    top: 60% !important;
    transform: translateY(-50%) scale(0.7) !important;
  }
  
  .rightWork {
    position: absolute !important;
    right: 0vw !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.7) !important;
  }

.centerWrap {
    transform: scale(0.9);
    transform-origin: center ;
  }
}

@media (max-width: 1200px) {
  .leftChibi {
    position: absolute !important;
    left: -15vw !important;
    top: 60% !important;
    transform: translateY(-50%) scale(0.6) !important;
  }
  
  .rightWork {
    position: absolute !important;
    right: -6vw !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.6) !important;
  }

.centerWrap {
    transform: scale(0.9);
    transform-origin: center ;
  }
}



@media (max-width: 1000px) {
  .leftChibi {
    position: absolute !important;
    left: -20vw !important;
    top: 60% !important;
    transform: translateY(-50%) scale(0.6) !important;
  }
  
.rightWork {
    display: none !important;
  }

.centerWrap {
      right: -23vw !important;
    transform: scale(0.8);
    transform-origin: center ;
  }
}

@media (max-width: 800px) {

.navRight {
    display: none !important;
  }
  
  .navBar {
    justify-content: center !important;
  }

  .leftChibi {
    position: absolute !important;
    left: 40% !important;
    top: 60% !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .chibiScale {
    flex-direction: column !important;
    gap: 0px !important;
  }

  .rightWork {
    display: none !important;
  }

  .centerWrap {
    display: none !important;
  }
}

@media (max-height: 600px) and (min-width: 1100px) {
  .mBox, .txtBox {
    max-height: 1000px !important;
  }

  .centerWrap {
    transform: scale(1.0) !important;
  }

  .txt {
    font-size: 16px !important;
  }

  .chibiScale {
    flex-direction: row !important;
    gap: 10px !important;
    transform: scale(0.9) !important;
  }

  .box1, .box2, .box3 {
    margin-left: 0 !important;
  }

  .rightWork {
    top: 70% !important;
    bottom: auto !important;
    right: 5.5vw !important;
    left: auto !important;
    transform: translateY(-50%) scale(0.8) !important;
  }

  .rwBox {
    height: 700px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .rwVideo {
    position: relative !important;
    top: 0 !important;
    width: 500px !important;
    margin: 0 auto !important;
  }
}


@media (max-height: 500px) and (min-width: 600px) {
  .navBar, 
  .rightWork, 
  .centerWrap, 
  .mBox, 
  .txtBox {
    display: none !important;
  }

  .leftChibi {
    position: absolute !important;
    top: 70% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.9) !important;
    display: flex !important;
    opacity: 1 !important;
  }

  .chibiScale {
    flex-direction: row !important;
    gap: 10px !important;
  }

  .box1, .box2, .box3 {
    margin-left: 0 !important;
  }
}

@media (max-height: 400px) and (min-width: 400px) {
  .navBar, 
  .rightWork, 
  .centerWrap, 
  .mBox, 
  .txtBox {
    display: none !important;
  }

  .leftChibi {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.6) !important;
    display: flex !important;
    opacity: 1 !important;
  }

  .chibiScale {
    flex-direction: row !important;
    gap: 0px !important;
  }

  .box1, .box2, .box3 {
    margin-left: 0 !important;
  }
}