/* 右カラム　フリースペース　画像サイズ & センター揃え */
.tag_free img {
    width: 240px;
}
.tag_free {
    text-align: center;
}


/*TOP IMAGE*/

#pc_main_img_box{ display: none !important;}
#toppage #pc_main_img_box{display: flex!important;}
#pc_main_img_box{z-index: 5;}
#sp_main_img_box{z-index: 2;}



#pc_main_img_box , #sp_main_img_box {
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  width: 100%;
  height: calc(100vh - 150px);
  background: #000;
  text-align:center;
}

#sp_main_img_box{ display: none;}

#pc_main_img_box img:nth-of-type(1){
  position: relative;
  z-index: 2;
  width: 50%;
  max-width: 500px;
  height: auto;
  padding-bottom:50px; 
  padding-top:50px; 
  animation: logo 2s ease-in-out;
}
#sp_main_img_box img:nth-of-type(1){
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 280px;
  height: auto;
  animation: logo 2s ease-in-out;
}
@keyframes logo {
  0% {opacity: 0; filter: alpha(opacity=0);}
  100% {opacity: 1; filter: alpha(opacity=100);}
}

#pc_main_img_box img:nth-of-type(2),
#pc_main_img_box img:nth-of-type(3),
#pc_main_img_box img:nth-of-type(4){
  width: 125%;
  height: auto;
  position: absolute;
  top: 0;
}


#pc_main_img_box img:nth-of-type(2) , #sp_main_img_box img:nth-of-type(2){
  opacity: 0;
  filter: alpha(opacity=0);
  animation: anime1 12s linear 1.5s both;
}
@keyframes anime1 {
  0% {
    opacity: 0; filter: alpha(opacity=0);
    left: -25%;
  }
  20% {
    opacity: 1; filter: alpha(opacity=100);
  }
  100% {
    opacity: 1; filter: alpha(opacity=100);
    left: 0;
  }
}
#pc_main_img_box img:nth-of-type(3) , #sp_main_img_box img:nth-of-type(3){
  opacity: 0;
  filter: alpha(opacity=0);
  animation: anime2 12s linear 5s both;
}
@keyframes anime2 {
  0% {
    opacity: 0; filter: alpha(opacity=0);
    right: -25%;
  }
  20% {
    opacity: 1; filter: alpha(opacity=100);
  }
  100% {
    opacity: 1; filter: alpha(opacity=100);
    right: 0%;
  }
}
#pc_main_img_box img:nth-of-type(4) , #sp_main_img_box img:nth-of-type(4){
  opacity: 0;
  filter: alpha(opacity=0);
  animation: anime3 8s ease-out 10s both;
}
@keyframes anime3 {
  0% {
    opacity: 0; filter: alpha(opacity=0);
    transform: scale(1.2);
  }
  20% {
    opacity: 1; filter: alpha(opacity=100);
  }
  100% {
    opacity: 1; filter: alpha(opacity=100);
    transform: scale(1);
  }
}

@media screen and (max-width: 768px) {
  #toppage #pc_main_img_box{display: none !important;}
  #sp_main_img_box{ 
    display: flex;
    /*
    height: calc(100vh - 90px);
    */
    height: calc(80vh - 110px);
  }
  #sp_main_img_box img:nth-of-type(2),
  #sp_main_img_box img:nth-of-type(3),
  #sp_main_img_box img:nth-of-type(4){
    width: 300%;
    height: auto;
    position: absolute;
    top: 0;
  }
  @keyframes anime1 {
    0% {
      opacity: 0; filter: alpha(opacity=0);
      left: -100%;
    }
    20% {
      opacity: 1; filter: alpha(opacity=100);
    }
    100% {
      opacity: 1; filter: alpha(opacity=100);
      left: 0;
    }
  }
  @keyframes anime2 {
    0% {
      opacity: 0; filter: alpha(opacity=0);
      right: -100%;
    }
    20% {
      opacity: 1; filter: alpha(opacity=100);
    }
    100% {
      opacity: 1; filter: alpha(opacity=100);
      right: 0;
    }
  }
  @keyframes anime3 {
    0% {
      opacity: 0; filter: alpha(opacity=0);
      transform: scale(2);
    }
    20% {
      opacity: 1; filter: alpha(opacity=100);
    }
    100% {
      opacity: 1; filter: alpha(opacity=100);
      transform: scale(1);
    }
  }
}



#pc_main_img_box img:nth-of-type(3){
  opacity: 0;
  filter: alpha(opacity=0);
}
#pc_main_img_box img:nth-of-type(4){
  opacity: 0;
  filter: alpha(opacity=0);
}

/*TOP IMAGE end*/