@keyframes bar_anim {
    0% {
    width:0}

100% {
    width:100%}

}

@keyframes blind_down {
    0% {
    height:100%}

100% {
    height:0}

}

sup {
	font-size:24px;
}

@media screen and (max-width: 768px) {
sup {
	font-size:10px;
}

}

#visual_menu {
    position:relative;
    width:100%;
    height:calc(100vh - 86px)}

@media screen and (orientation: landscape) {
    #visual_menu {
    min-height:540px}

}

@media screen and (min-width: 768px) {
    #visual_menu {
    height:calc(100vh - 185px);
    min-height:600px}

}



#visual_menu #vmenu {
    display:flex;
    z-index:1;
    width:100%;
    height:100%;
    background:url(/gameaccessory/images/home/mv_pic.jpg) center top/cover no-repeat}

@media screen and (min-width: 768px) {
    #visual_menu #vmenu {
    height:100%}

}

#visual_menu #vmenu li {
    width:100%;
    overflow:hidden;
    transition-duration:.3s;
    transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
    backface-visibility:hidden;
    display:flex;
    justify-content:stretch}

#visual_menu #vmenu li a {
    display:block;
    width:100%;
    position:relative;
    text-decoration:none;
    padding:0 6px 32px;
    box-sizing:border-box;
    overflow:hidden;
    text-decoration:none}

#visual_menu #vmenu li a img {
    display:block;
    width:100%;
    height:auto;
    max-width:500px;
    margin:auto;
    transition-duration:.3s;
    transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
    backface-visibility:hidden;
    transform-origin:center;
    position:absolute;
    right:0;
    left:0;
    bottom:10%;
      transform: rotate(-10deg);
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));

}

#visual_menu #vmenu li a h2 {
    display:block;
    width:100%;
    height:auto;
    max-width:500px;
    margin:auto;
    transition-duration:.3s;
    transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
    backface-visibility:hidden;
    transform-origin:center;
    position:absolute;
    top:30%;
    right:0;
    left: 50%;
    transform: translateX(-50%);
    bottom:0;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
    text-align:center;
    color:#ffffff;
    font-size:40px;
}

@media screen and (max-width: 768px) {
#visual_menu #vmenu li a h2 {
    font-size:18px;
    top:40%;
}
}

#visual_menu #vmenu li a p {
    display:block;
    width:100%;
    height:auto;
    max-width:600px;
    margin:auto;
    transition-duration:.3s;
    transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
    backface-visibility:hidden;
    transform-origin:center;
    position:absolute;
    top:40%;
    right:0;
    left: 50%;
    transform: translateX(-50%);
    bottom:0;
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));
    text-align:center;
    color:#ffffff;
    font-size:24px;
}

@media screen and (max-width: 768px) {
#visual_menu #vmenu li a p {
    width:94%;
    top:50%;
    font-size:14px;
	line-height:1.5;
}
}

@media screen and (min-width: 768px) {
    #visual_menu #vmenu li a img {
    position:absolute;
    top:auto;
    right:0;
    left:0;
    bottom:100px}
}

#visual_menu #vmenu li a .bar {
    width:100%;
    min-height:54px;
    height:auto;
    display:flex;
    align-items:center;
    position:absolute;
    bottom:0;
    left:0;
    box-sizing:border-box;
    padding:12px;
    color:#fff}

@media screen and (min-width: 768px) {
    #visual_menu #vmenu li a .bar {
    height:54px}

}

#visual_menu #vmenu li a .bar:before {
    content:"";
    display:block;
    width:0;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:rgba(255,255,255,.3);
    z-index:1}

#visual_menu #vmenu li a .bar:after {
    content:"";
    display:block;
    width:0;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:#0068bf;
    z-index:2}

#visual_menu #vmenu li a .bar .arrow {
    display:block;
    width:8px;
    height:14px;
    margin:0 12px 0 0;
    position:relative;
    z-index:3;
    opacity:0}

#visual_menu #vmenu li a .bar .arrow path {
    fill:#fff;
    fill-rule:evenodd}

#visual_menu #vmenu li a .bar .label {
    font-size:16px;
    width:100%;
    opacity:0;
    position:relative;
    z-index:3}

#visual_menu #vmenu li.ps4 {
    background:rgba(0,104,191,.85)}

#visual_menu #vmenu li.switch {
    background:rgba(230,0,18,.85)}

#visual_menu #vmenu li.switch2 {
    background:rgba(208,0,16,.85)}

#visual_menu #vmenu li.ps5 {
    background:rgba(20,104,247,.85)}

#visual_menu #vmenu li.switch a .bar:after {
    background:#e60012}

#visual_menu #vmenu li.switch2 a .bar:after {
    background:#d00010}

#visual_menu #vmenu li.ps5 a .bar:after {
    background:#1868f7}



#visual_menu #vmenu li.other {
    background:rgba(92,193,29,.85)}

#visual_menu #vmenu li.other a .bar:after {
    background:#5cc11d}

#visual_menu #vmenu li.other a .bar .label span:after {
    content:" /"}

#visual_menu #vmenu li.other a .bar .label span:last-child:after {
    display:none}

@media screen and (min-width: 768px) {
    #visual_menu #vmenu:hover li {
    width:25%}

#visual_menu #vmenu li:hover {
    width:50%}

#visual_menu #vmenu li:hover a:after {
    bottom:0;
    opacity:1}

#visual_menu #vmenu li:hover a img {
    transform:scale(1.2)}

#visual_menu #vmenu li:hover a .bar:before {
    animation:.2s bar_anim forwards ease-in}

#visual_menu #vmenu li:hover a .bar:after {
    animation:.4s bar_anim .2s forwards ease-in}

#visual_menu #vmenu li:hover a .bar .label,#visual_menu #vmenu li:hover a .bar .arrow {
    animation:.3s show .3s forwards ease-in}

}

#visual_menu #vmenu#blind {
    z-index:10;
    align-items:flex-end;
    pointer-events:none}

#visual_menu #vmenu#blind li {
    background:#fff;
    height:100%}

#visual_menu #vmenu#blind.hide li:nth-child(1) {
    animation:.6s blind_down forwards cubic-bezier(0.165, 0.84, 0.44, 1)}

#visual_menu #vmenu#blind.hide li:nth-child(2) {
    animation:.6s blind_down .2s forwards cubic-bezier(0.165, 0.84, 0.44, 1)}

#visual_menu #vmenu#blind.hide li:nth-child(3) {
    animation:.6s blind_down .4s forwards cubic-bezier(0.165, 0.84, 0.44, 1)}

#visual_menu #vmenu.touch li {
    width:0}

#visual_menu #vmenu.touch li.touch {
    width:100%}

#visual_menu #vmenu.touch li.touch .bar:before {
    animation:.2s bar_anim forwards ease-in}

#visual_menu #vmenu.touch li.touch .bar:after {
    animation:.4s bar_anim .2s forwards ease-in}

#visual_menu #vmenu.touch li.touch .bar .label,#visual_menu #vmenu.touch li.touch .bar .arrow {
    animation:.3s show .3s forwards ease-in}

#visual_obj {
    display:flex;
    flex-wrap:wrap;
    position:absolute;
    top:0;
    left:0;
    z-index:4;
    width:100%;
    height:100%;
    margin:auto;
    pointer-events:none}

#copy {
    width:100%;
    height:100%;
    box-sizing:border-box;
    position:relative}

#copy img {
    display:block;
    max-width:948px;
    width:94%;
    height:auto;
    margin:0 auto;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0}

#copy img.idea2 {
    max-width:1010px}

#copy img.pc {
    display:none}

@media screen and (min-width: 768px) {
    #copy img.pc {
    display:block}

}

#copy img.sp {
    display:block}

@media screen and (min-width: 768px) {
    #copy img.sp {
    display:none}

}



.img-ps5  {
  overflow: hidden;
  position: relative;
}



.img-ps5:before  {
  animation: img-ps5 0.5s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}



@keyframes img-ps5  {
  100%  {
    transform: translateX(100%);
  }


}




.img-ps4  {
  overflow: hidden;
  position: relative;
}



.img-ps4:before  {
  animation: img-ps4 0.5s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}



@keyframes img-ps4  {
  100%  {
    transform: translateY(100%);
  }


}



.img-switch  {
  overflow: hidden;
  position: relative;
}



.img-switch:before  {
  animation: img-switch 0.5s cubic-bezier(0.4, 0, .2, 1) 0.1s forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}



@keyframes img-switch  {
  100%  {
    transform: translateY(100%);
  }


}


.img-switch2  {
  overflow: hidden;
  position: relative;
}



.img-switch2:before  {
  animation: img-switch2 0.5s cubic-bezier(0.4, 0, .2, 1) 0.1s forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}



@keyframes img-switch2  {
  100%  {
    transform: translateY(100%);
  }


}

.img-other  {
  overflow: hidden;
  position: relative;
}



.img-other:before  {
  animation: img-other 0.5s cubic-bezier(0.4, 0, .2, 1) 0.2s forwards;
  background: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}



@keyframes img-other  {
  100%  {
    transform: translateY(100%);
  }


}