@import url(aboutus.css);
@import url(footer.css);
@import url(gallery.css);
@import url(header.css);
@import url(mv.css);
@import url(menu.css);
@import url(animation.css);
@import url(access.css);
@import url(dropdown.css);
@import url(switch.css);


@font-face {
   font-family: 'Nagayama';
   src: url("../font/nagayama_kai08.otf") format("opentype");
}


body{
   margin: 0;
   background-color: rgb(255, 255, 255);
   overflow-x: hidden;
   overflow-y: hidden;
   transition: 0.2s;
   animation: body-scroll 0.1s linear forwards;
   animation-delay: 3.6s;
}

@keyframes body-scroll{
   0%{
      overflow-y: hidden;
   }
   100%{
      overflow-y: overlay;
   }
}

body.dark-mode{
   background-color: black;
   transition: 0.2s;
}

h1, h2, h3, h4{
   font-family: 'Zen Kaku Gothic New', sans-serif;
   color: black;
   font-weight: 400;
}

a, p, span{
   font-family: 'Zen Kaku Gothic New', sans-serif;
   color: black;
   font-weight: 400;
}

.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode a, 
.dark-mode p, 
.dark-mode span{
   color: white;
}

.dark-mode a, 
.dark-mode p, 
.dark-mode span{
   font-weight: 200;
}

.contents-container{
   position: relative;
}
.normal-title{
   position: absolute;
}
.normal-title h3 {
   margin: 0;
   color: white;
   font-size: 9vw;
   opacity: 0.33;
   animation: fade-in-zoom-tobig-faded 1s ease-in-out forwards;
   animation-play-state: inherit;
}
.normal-title h4{
   font-size: 5vw;
   position: absolute;
   margin: 0;
   width: max-content;
   color: #b4b4b4;
   font-family: 'Nagayama';
   opacity: 0;
   animation: fade-in-zoom-tobig 1s ease-in-out forwards;
   animation-play-state: inherit;
   animation-delay: 0.3s;
}

.dark-mode .normal-title h3{
   color: #e12712;
}

.special-title{
   position: absolute;
   top: -20%;
   left: 20%;
}

.special-title img {
   height: 25vw;
   width: auto;
   filter: brightness(1.3);
}

.dark-mode .special-title img{
   filter: brightness(1);
}

::-webkit-scrollbar {
   width: 10px;
 }
 
 ::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0);
 }
 
 ::-webkit-scrollbar-thumb {
   background: #e12712;
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: #8a0f01;
   cursor: pointer;
 }

 @media only screen and (max-width: 700px) {
   .special-title img{
       height: 80vw;
   }
   .special-title {
      top: 0;
      left: -2%;
  }
  .normal-title h3 {
      font-size: 26vw;
  }
  .normal-title h4{
      font-size: 16vw;
  }
  .contents-container{
   width: 100vw;
   overflow-x: hidden;
  }
}