/* ====================================
 LOGO  CHANGER
==================================== */

/* === PC LOGO CHANGER === */

.header {
z-index: 5;
position: fixed;
top: 50%;
width: 135px;
height: auto;
left: 67.5px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mv {
align-items: center;
height: 100vh;
justify-content: center;
position: relative;
}
/* ロゴに関するスタイル */
.header-logo{ 
animation-name: header-logo;
animation-duration: 3s; 
animation-fill-mode: forwards; 
}
@keyframes header-logo {
0% {
  opacity: 0;
}
90% {
 opacity: 0;
}
 100% {
  opacity: 1;
} 
}
.header-logo.headerLogoScroll.-before {
display : none;
}
.header-logo.-after {
display : none;
}
.header-logo.headerLogoScroll.-after {
display : block;
}

/* === PC LOGO CHANGER NONE === */

.header_none {
z-index: 1;
position: fixed;
top: 50%;
width: 135px;
height: auto;
left: 67.5px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mv_none {
align-items: center;
height: 100vh;
justify-content: center;
position: relative;
}
/* ロゴに関するスタイル */
.header_none-logo {
animation-name: header_none-logo;
animation-duration: 3s; 
animation-fill-mode: forwards; 
}
@keyframes header_none-logo {
0% {
  opacity: 0;
}
25% {
 opacity: 1;
}
 100% {
  opacity: 1;
} 
}
.header_none-logo.header_noneLogoScroll.-before {
display : none;
}
.header_none-logo.-after {
display : none;
}
.header_none-logo.header_noneLogoScroll.-after {
display : block;
}


@media(max-width: 1024px){
    
/* ===  iPad Pro-1024 LOGO CHANGER === */

.header {
z-index: 5;
position: fixed;
top: 50%;
width: 150px;
height: auto;
left: 75px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

/* === iPad Pro-1024 NONE LOGO CHANGER === */

.header_none {
position: fixed;
z-index: 1;
top: 50%;
width: 150px;
height: auto;
left: 75px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
  }
}

@media(max-width: 768px){
    
/* ===  iPad-768 LOGO CHANGER === */

.header {
z-index: 5;
position: fixed;
top: 50%;
width: 105px;
height: auto;
left: 52.5px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

/* ===  iPad-768 NONE LOGO CHANGER === */

.header_none {
z-index: 1;
position: fixed;
top: 50%;
width: 105px;
height: auto;
left: 52.5px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
  }
}

@media(max-width: 640px){
    
/* ===  iPhone-640 LOGO CHANGER === */

.header {
z-index: 5;
position: fixed;
top: 50%;
width: 26%;
height: auto;
left: 13%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

/* === iPhone-640 NONE LOGO CHANGER === */

.header_none {
z-index: 1;
position: fixed;
top: 50%;
width: 26%;
height: auto;
left: 13%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
  }
}