@charset "utf-8";

/* PC View */
@media print, screen and (min-width:650px) {
  .mainImg_scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 6;
  }
}
/* Smart Phone View */
@media only screen and (max-width: 649px) {
  .mainImg_scroll {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0; 
    z-index: 6;
  }
}
  .mainImg_scroll img {
    transition: opacity 1.0s ease;
  }
  .mainImg_scroll a:hover img {
    opacity: 0.5;
  }
/* PC View */
@media print, screen and (min-width:650px) {
  #tube_back {
    position: relative;
    width: 100%;
    min-width: 1000px;
    height: 720px;
    overflow: hidden;
    background: #FFFFFF;
  }
  #youtube-area {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    min-width: 1000px;
    height: 720px;
    overflow: hidden;
    z-index: 0;
    opacity: 0;
    transition: opacity .5s;
  }
  #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;
  }
}