@charset "utf-8";



/*=====================================
  LOADING
=====================================*/

.loading{
  position:fixed;
  z-index: 1000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 1;
  mix-blend-mode: initial;
}

.loadAnime.loading{
  
pointer-events: none;
}

.loading .inner{
  position:relative;
  width:100%;
  height:100%:
}

.loading .shutter {
  position:absolute;
  width: 150%;
  height:100%;
  transition: left 0.8s ease,right 0.8s ease;
  opacity: 1;
  z-index: 999;
}

.loading .shutter:first-child {
  transform: skewX(-30deg);
  left: 50%;
  background: #000000;
}

.loading .shutter:last-child {
  transform: skewX(-30deg);
  right: 50%;
  background: #e4007f;
}

.loadAnime.loading .shutter:first-child {
  transform: skewX(-30deg);
  left: 160vw;
}

.loadAnime.loading .shutter:last-child {
  transform: skewX(-30deg);
  right: 160vw;
}


/*Layout*/
#container {}

#container_inner {
  display: flex;
  flex-wrap: wrap;
}

#main_inner {
  display: flex;
  flex-wrap: wrap;
}

.main_sa01 {
  flex: 1;
  margin: 0 -2em 0 0;
}

.main_sa01 .main_sa01_c .topKv {
  /* pointer-events: none; */
  margin: 0 0% 0 -10%;
  position: relative;
  display: flex;
  justify-content: center;
}

.main_sa01 .main_sa01_c .topKv .kvImg > img {
  width: 126%;
  display: block;
  margin: -3% -13% 0;
  max-width: initial;
}

.oaInfo{
  position:absolute;
  top: 63%;
  left:0;
  width:80%;
  /* filter: drop-shadow(4px 4px 0px white); */
}

.main_sa02 {
  width: 35%;
  max-width: 460px;
  position: relative;
}

#contents {
  order: 2;
  flex: 1;
  padding: 0 0 3em;
}

#ext_area_02 {
  order: 1;
  width: 20%;
  max-width: 400px;
  min-width: 300px;
  padding: 3em 1em 3em 3em;
  position: sticky;
  top: 0;
  left: 0;
  transition: all .3s ease;
}

#footer {
  order: 3;
  width: 100%;
  background: #9c9c9c;
  font-family: "851Gkktt_005", sans-serif;
  overflow: hidden;
  font-size: 3rem;
}


@media screen and (max-width:1500px) {
  #contents{
    flex:1 0 auto;
    width: 100%;
  }


  .main_sa01 {
    padding-top:9em;
    padding-left:2em;
  }
    #ext_area_02 {
    position: fixed;
    left: -300px;
    background: #fff;
    z-index: 99;
    padding: 3em 2em 3em 2em;
    height: 100%;
    transition: .3s ease;
  }

  .main_sa01 .main_sa01_c .topKv {
    margin: 0 0% 0 0%;
  }
  .is-gnavopen #ext_area_02 {
    left: 0px;
  }

  .navLogo {
    /* opacity: 0; */
    /* pointer-events: none; */
  }

}


@media screen and (max-width:1280px) {
  #wrapper{
    overflow:hidden;
  }
  .main_sa01 .main_sa01_c .topKv .kvImg > img {
    width: 126%;
    display: block;
    margin: -2% -13% 0;
    max-width: initial;
  }
  .main_sa01,.main_sa02 {
    width: 100%;
    max-width: initial;
    flex: auto;
    padding-left: 0;
  }
}

@media screen and (max-width: 900px) {
  .main_sa01,.main_sa02,#contents{
    width:100%;
    flex: auto;
    max-width: initial;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
  }
  #layout1 #contents{
    padding: 3vw 0 !important;
  }
  .main_sa01 .main_sa01_c .topKv {
    margin: 0 0% 0 0%;
    padding: 0vw 0 0 0;
  }
  .main_sa01 .main_sa01_c .topKv .kvImg > img {
    width: 136%;
    display: block;
    margin: -8% -16.5% 0 -17.5%;
    max-width: initial;
  }
  .main_sa02{
    padding:0 0vw;
  }
}

@media screen and (max-width:767px) {
  .main_sa01,.main_sa02,#contents{
    width:100%;
    flex: auto;
    max-width: initial;
    margin: 0 0 0 0;
  }

  .main_sa02{
    padding:0 2vw;
  }

  .oaInfo{
    width: 100%;
  }
}