@charset "UTF-8";
/* reset */
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}
/* wrapper */
#contents .l-movielist {
    justify-items: center;
}
#contents .iframe_wrapper {
    overflow: unset;
    height: auto;
    padding-bottom: 0;
    margin: unset;
    width: unset;
}

/* ダイアログ */
#contents dialog.mvDialog {
    position: fixed;
    max-width: 1100px;
    background: transparent;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    width: 85%;
    padding-top: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* border-radius: 1%; */
    border: 1px solid #000;
    &::backdrop {
        background: rgba(0, 0, 0, 0);
        transition: background .5s ease-in-out;
    }
    &.show {
        opacity: 1;
        &::backdrop {
            background: rgba(0, 0, 0, 0.9);
        }
    }
    .movie-close {
        margin: 0;
        position: absolute;
        top: 0%;
        right: 0%;
        width: 50px;
        height: 50px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size:0;
        z-index: 999;
        opacity: 0;
        transition: opacity .5s ease-in-out;
    }
  /* inner contents */
  .movie-inner {
    background: #fff;
    h2 {
      margin: 0 !important;
      padding: 0 1% 2% 0;
      font-size: max(1.6em,80%);
    }
    .mviframe {
      position: relative;
      width: 100%;
      padding-top: calc(100% - 43%);
    }
  }    
}

#contents dialog.mvDialog.show .movie-close {
    opacity: 1;
}

button.movie-close:before,
button.movie-close:after {
    content: "";
    display: block;
    width: 3px;
    background: #ffffff;
    height: 40px;
    position:absolute;
    top: 50%;
    right: 50%;
    margin-right: -6%;
}
button.movie-close:before {
    transform: translate(-50%, -50%) rotate(45deg);

}
button.movie-close:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* トリガー */
#contents .movie-open {
    background: #fff;
    border: none;
    color: #333;
    cursor: pointer;
    display: block;
    font-size: 1.1em;
    text-align: center;
    text-decoration: underline;
    &:hover,&:focus {
        background: transparent !important;
        color: #444 !important;
        text-decoration: none;
    }
    p {
        padding: 1em 0;
        margin: 0;
    }
    img {
        transition: all .3s;
        border: 1px solid #444;
    }
    &:hover img {
        transform: scale(1.1);
    }
    figure {
        width: 100%;
        max-width: 360px;
        overflow: hidden;
    }
}

/* 再生ボタン */
#contents .movie-open {
    position: relative;
    max-width: 360px;
}
#contents .movie-open::after,
#contents .movie-open:before {
    content: "";
    position: absolute;
    /*top: calc(50% - 26px);*/
    top: 105px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    z-index: 10;
}
#contents .movie-open::before {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #ffffff;
}
#contents .movie-open::after {
    width: 30px;
    height: 30px;
    background: #ffffff;
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(100% 50%, 0 0, 0 100%);
}
#contents .movie-open figure{
    position: relative;
}
#contents .movie-open figure::before {
    content:"";
    display:block;
    width: 100%;
    height: 100%;
    z-index:1;
    background: #000000;
    opacity: 0.5;
    top:0;
    left:0;
    position: absolute;
    z-index:1;
}





/* ---------------------------------------
 レスポンシブ
 --------------------------------------- */

/* SP */
@media screen and (max-width: 767px) {
    #contents .iframe_wrapper {
        margin: 0;
    }  
    #contents .l-movielist {
      margin: 0;
    }
    #contents dialog.mvDialog {
        width: 95%;
    }
}

/* SP & TB */
@media screen and (max-width: 1025px) {
  #contents dialog.mvDialog {
      .movie-inner {
          h2 {
              font-size: max(1.5rem,80%);
          }
      }
  }
}

/* TB */
@media screen and (min-width: 768px) {
}

/* PC */
@media screen and (min-width: 768px) and (max-width: 1025px) {
    #contents .l-movielist {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (min-width: 1025px) {
}

@media screen and (min-width: 1400px) {
}