@charset "UTF-8";

#opening {position:relative; z-index: 1; height:100%; width:100%; text-align:center; overflow:hidden; background:#000}
#opening img {max-width:100%}
#opening .op,#opening .op_copy1,#opening .op_copy2,#opening .op_copy3,#opening .op_logo,#canvas,#opening .copy1,#opening .copy2,#opening .copy3,#opening .p04,#opening .copy4,#opening .fn,#opening .fn_copy,#opening .fn_logo{opacity:0; position:absolute; }
#opening .op {height:100vh; width:100%; top:0; z-index:1;}
#opening video {width:100%; height:100%; object-fit:cover;}

#opening .op_copy1,#opening .op_copy2 {width:210px; height:329px; top:20%; left:0; right:0; margin:0 auto; z-index:1;}
#opening .op_logo {width:412px; height:47px; bottom:25%; left:0; right:0; margin:0 auto; z-index:1;}
#opening .copy1 {width:371px; height:183px; top:10%; left:0; right:0; margin:0 auto; z-index:3;}
#opening .copy2,#opening .copy3 {width:106px; height:183px; top:calc((100vh - 183px) / 2); left:0; right:0; margin:0 auto; z-index:3;}
#opening .copy4 {width:134px; height:338px; top:calc((100vh - 338px) / 2); left:0; right:0; margin:0 auto; z-index:3;}
#canvas {position:relative; top:0; z-index:2; width:100%; height:100%}
#opening .p04 {width:100%; height:100%; top:0; z-index:10; z-index:3; background:#FFC6B2;}
#opening .p04 img {filter:opacity(100%); height:100%; width:100%}
#opening .p04 img.on{animation: op 3s linear 1 forwards; animation-delay:2}
#opening .fn {height:100%; width:100%; top:0; z-index:10; filter: grayscale(80%); z-index:4; }
#opening .fn.on{animation: gs 3s linear 1 forwards; animation-delay:2}
#opening .fn_copy {width:114px; height:298px; top:16%; right:5%; margin:0 auto; z-index:5;}
#opening .fn_logo {width:255px; height:72x; bottom:5%; left:0; right:0; margin:0 auto; z-index:5;}

@media screen and (max-width: 767px) {
#opening video {height:100vh; object-fit:cover;}
#opening .op_copy1,#opening .op_copy2 {width:40%; height:auto; top:20%;}
#opening .op_logo {width:60%; height:auto; bottom:20%;}
#opening .copy1 {width:60%; height:auto; top:10%;}
#opening .copy2,#opening .copy3 {width:20%; height:auto; top:10%;}
#opening .copy4 {width:20%; height:auto; top:20%;}
#opening .fn_copy {width:17%; height:auto; top:15%; right:8%;}
#opening .fn_logo {width:50%; height:auto; bottom:15%;}
}

@keyframes gs {
  0% {filter: grayscale(80%);}
  40% {filter: grayscale(60%);}
  60% {filter: grayscale(40%);}
  100% {filter: grayscale(0%);}
}
@keyframes op {
  0% {filter:opacity(100%);}
  50% {filter:opacity(80%);}
  100% {filter:opacity(60%);}
}

/* //////////////////////////////////////////////////
	ナツウェブ追加
////////////////////////////////////////////////// */
/* skipの追加 */
.op_skip{
    display: none;
    position: absolute;
    z-index: 10;
    bottom: 2.0rem;
    right: 1.0rem;
    align-items: center;
    justify-content: center;
    column-gap: .5em;
    cursor: pointer;
    padding: 1.0rem 1.0rem .6rem 1.4rem;
    line-height: 1;
    color: #fff;
    font-size: 1.1rem;
    border: 1px solid #fff;
}

.op_skip::after{
      content: '';
      width: 1em;
      height: .5rem;
      border-bottom: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: translateY(-50%) skewX(35deg);
  }

  /*
.caption_box{
    display: none;
    position: absolute;
    z-index: 10;
    bottom: 2.0rem;
    left: 1.0rem;
}
*/

.caption_box .caption{
    position: absolute;
    z-index: 10;
    bottom: 2.0rem;
    left: 1.0rem;
    opacity: 0;
}

.inactive #canvas{
  display: revert;
}

.inactive #opening .fn{
  position: absolute;
}
.inactive .op_skip{
  display: flex;
}

#canvas{
  display: none;
}
#opening .fn{
  position: revert;
}


@media screen and (min-width: 768px) {
  .op_skip{
      bottom: 4.0rem;
      right: 5.0rem;
      padding: 1.0rem 2.0rem .6rem 2.4rem;
      font-size: 1.8rem;
  }
}