@charset "utf-8";

#youtube-mask {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
/*  width: 1100px;*/
  min-width: 1000px;
  height: 100%;
  z-index: 2;
  background: transparent;
  pointer-events: all;
}
/* PC View */
@media print, screen and (min-width:650px) {
  #top_slogan{
    opacity: 0;
    position: absolute;
    z-index: 3;
    top: 542px;
    left: calc(50% - 210px);
    transform-origin: center center;
    transform: translate(-50%, 0);
  }
  .mainImg_scroll {
    width: 1150px;
    margin: -80px auto 0 auto;
    position: absolute;
    z-index: 6;
    animation: img_arrow 2s 1s ease-in-out infinite;
    left: 50%;
    transform: translate(-50%, 0);
  }
  @keyframes img_arrow{
      0%{top:700px;}
     18%{top:712px;}
     45%{top:700px;}
     64%{top:700px;}
     82%{top:712px;}
    100%{top:700px;}
  }
}
@media print, screen and (max-width: 800px) {
  #top_slogan{
    left: calc(50% - 80px);
  }
}
@media print, screen and (max-width: 1200px) {
  .mainImg_scroll {
    display: none;
  }
}
/* Smart Phone View */
@media only screen and (max-width: 649px) {
  #top_slogan{
    opacity: 0;
    width: 80vw;
    position: relative;
    z-index: 3;
    margin-bottom: -28.57vw;
    top: -28.57vw;
    left: 8%;
    overflow: hidden;
    text-align: center;
    transform-origin: center center;
  }
  .mainImg_scroll {
    display: none;
  }
  @keyframes img_arrow{
      0%{top:94vw;}
     18%{top:97vw;}
     45%{top:94vw;}
     64%{top:94vw;}
     82%{top:97vw;}
    100%{top:94vw;}
}
}

/* PC View */
@media print, screen and (min-width:650px) {
  #tube_back {
    position: relative;
/*    width: 100%;*/
    width: 1100px;
    min-width: 1000px;
/*    height: 720px;*/
    height: 619px;
    margin: 0 auto;
    overflow: hidden;
    background: #FFFFFF;
  }
  #youtube-area {
    position: absolute;
    top: 0; left: 0;
/*    width: 100%;*/
    width: 1100px;
    min-width: 1000px;
/*    height: 720px;*/
    height: 619px;
    margin: 0 auto;
    overflow: hidden;
    z-index: 0;
    opacity: 0;
    transition: opacity .5s;
    border-radius: 10px;
  }
  #youtube-area.appear {
    opacity: 1;
  }

  /* サイズはJSで制御 */
  #youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%);
  }
  #youtube iframe {
    display: block;
    pointer-events: none;
  }
}

/* Smart Phone View */
@media only screen and (max-width: 649px) {
  /* 親を幅×幅の正方形に */
  #tube_back {
    height: 0;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
  }
  #youtube-area {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 1;
  }

  /* サイズはJSで制御 */
  #youtube {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%);
  }
  #youtube iframe {
    display: block;
    pointer-events: none;
  }
}