@charset "utf-8";

.shikakku.html{
    scroll-behavior: smooth;
}

.back{
    position: fixed;
    height: 2800px;
}

.top_page{
    position: fixed;
    z-index: 5;
}

.layer{
    position: absolute;
    top: 590px;
    z-index: 10;
    padding: 0px;
}

.top{
    position: fixed;
    top: 0px;
    z-index: 20;
    height: 104px;
}

.language{
  position: fixed;
  top: 20px;
  right: 15px;
}

.gakkou{
    position: fixed;
    top: 400px;
    right: 40px;
    width: 100px;
    animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
      }
       
      @keyframes fadeup {
        0% {
          transform: translateY(30px);
          opacity: 0;
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
}
.syoukai{
    position: fixed;
    top: 410px;
    left: 230px;
    animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
      }
       
      @keyframes fadeup {
        0% {
          transform: translateY(30px);
          opacity: 0;
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
}
.rogo{
    position: fixed;
    top: 350px;
    left: 10px;
    animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
      }
       
      @keyframes fadeup {
        0% {
          transform: translateY(30px);
          opacity: 0;
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
}

.sub{
    position: fixed;
    top: 100px;
    left: 180px;
    animation: fadeup 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
      }
       
      @keyframes fadeup {
        0% {
          transform: translateY(30px);
          opacity: 0;
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
}

.Group2{
    position: fixed;
    top: 0px;
    animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
      }
       
      @keyframes fadeup {
        0% {
          transform: translateY(30px);
          opacity: 0;
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
}

.Group1{
    position: fixed;
    top: -40px;
     animation: fadeup 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
      }
       
      @keyframes fadeup {
        0% {
          transform: translateY(30px);
          opacity: 0;
        }
        80% {
          opacity: 1;
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
    
}
.layer_top{
    position: absolute;
    top: 620px
    
}

.layer_top_text{
   
    line-height: 35pt;
    width: 240px;
    font-family: monospace;
    color: #7A7A7A;
    font-size: 11pt;
    position: absolute;
    top: -500px;
    left: 80px;
}

.manaberu{
    position: relative;
    left: 0px;
    top: -50px;
}

.mede-miru{
    position: relative;
    left: 70px;
    top: -70px;
}


.layer_text{
    line-height: 35pt;
    font-family: monospace;
    color: #7A7A7A;
    font-size: 11pt;
}

#koukoku_text{
    position: absolute;
    text-align: right;
    line-height: 20pt;
    top: 870px;
    width: 140px;
    right: 40px;
}

#branding_text{
    position: absolute;
    text-align: right;
    line-height: 20pt;
    top: 1130px;
    width: 175px;
    right: 40px;
}

#Web_text{
    position: absolute;
    text-align: right;
    line-height: 20pt;
    top: 1390px;
    width: 150px;
    right: 40px;
     
}

#editorial_text{
    position: absolute;
    text-align: right;
    line-height: 20pt;
    top: 1640px;
    width: 160px;
    right: 40px;
}

#photo_text{
    position: absolute;
    text-align: right;
    line-height: 20pt;
    top: 1900px;
    width: 170px;
    right: 40px;
}

#movie_text{
    position: absolute;
    text-align: right;
    line-height: 20pt;
    top: 2150px;
    width: 140px;
    right: 40px;
}

#illustration_text{
    position: absolute;
    text-align: right;
    line-height: 20pt;
    top: 2420px;
    width: 130px;
    right: 40px;
}

.koukoku{
    position: absolute;
    top: 820px;
    left: 15px;
}
.branding{
    position: absolute;
    top: 1075px;
    left: 10px;
}
.web{
    position: absolute;
    top: 1320px;
    left: 25px;
    
}
.editorial{
    position: absolute;
    top: 1560px;
    left: 25px;
}
.photo{
    position: absolute;
    top: 1820px;
    left: 18px;
}
.movie{
    position: absolute;
    top: 2070px;
    left: 20px;
}
.illustration{
    position: absolute;
    top: 2320px;
    left: 20px;
}


.TOP{
    position: absolute;
    top: 2600px;
    left: 150px;
    
}

.line{
    position: absolute;
    top: 1000px;
    left: 30px;
}

.footer{
    position: absolute;
    left: 0px;
    bottom: 0px;
    
}

.nid_rogo{
    position: absolute;
    left: 15px;
    bottom: 160px;
}

.footer_text{
    font-family: monospace;
    color: #7A7A7A;
    font-size: 6pt;
    
}

.sidesyoukaiT{
    position: absolute;
    right: 10px;
    top: 70px;
    font-size: 9pt;
}

.mapT{
    position: absolute;
    left: 20px;
    top: 110px;
    font-size: 8pt;
}

.topT{
    position: absolute;
    left: 15px;
    top: 140px;
}

.koukokuT{
    position: absolute;
    left: 15px;
    top: 170px;
}
.brandingT{
    position: absolute;
    left: 15px;
    top: 190px;
}
.webT{
    position: absolute;
    left: 85px;
    top: 170px;
}
.a{
  text-decoration-style: none;

}
.editorialT{
    position: absolute;
    left: 85px;
    top: 190px;
}
.photoT{
    position: absolute;
    left: 140pt;
    top: 170px;
}
.movieT{
    position: absolute;
    left: 187px;
    top: 190px;
}
.illustrationT{
    position: absolute;
    left: 230px;
    top: 170px;
}
.copyright{
    position: absolute;
    left: 95px;
    bottom: 18px;
}
*{
    margin: 0px;
    padding: 0px;
    width: fit-content;
    scroll-behavior: smooth;
}