/* PC =======================================================================================*/
@media screen and (min-width: 769px) {
  .modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .modal.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .modal .modal_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
  }
  .modal .movie_wrap {
    max-width: 960px;
    width: 96%;
    margin: auto;
    position: relative;
    z-index: 2;
  }
  .modal .movie_wrap::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
  .modal .movie_wrap #player1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .modal .movie_wrap .modal_close_btn {
    width: 40px;
    height: 40px;
    position: absolute;
    top: -50px;
    right: -50px;
  }
  .modal .movie_wrap .modal_close_btn::before, .modal .movie_wrap .modal_close_btn::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  .modal .movie_wrap .modal_close_btn::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .modal .movie_wrap .modal_close_btn::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .movie_list {
    text-align: center;
    cursor: pointer;
    color: #A90404;
    width: 20rem;
    border-color: #A90404;
  }
/*
  .movie_list > span {
    width: 100%;
  }
*/
  .videoWrap.movie_list {
    width: 100%;
    padding-top: 0;
    position: relative;
    overflow: hidden;
  }
  .videoWrap.movie_list span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 80px;
    height: 56px;
 }
  .videoWrap.movie_list span:hover:after {
    background-image: url(/cms/clhd/img/common/youtube_icon.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
 }
 /* 20250902 ADD */
  div#movie_ir.p-irMovie__wrap {
    max-width: 600px;
    display: block;
    overflow: hidden;
    position: relative;
  }
  div#movie_ir.p-irMovie__wrap .p-ir__articleVideoPhoto .block01__body__video .videoWrap.movie_list span img {
    width: 100%;
  }
  div#movie_ir .videoWrap.movie_list span:after {
    background-image: url(/cms/clhd/img/common/btn-play.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    width: 10rem;
    height: 10rem;
  }
  div#movie_ir .videoWrap.movie_list span:hover img {
    -webkit-transition: -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transform: scale(1.1) rotate(0.01deg);
    transform: scale(1.1) rotate(0.01deg);
  }
  div#movie_ir .videoWrap.movie_list span:hover:after {
    opacity: .6;
  }

}

/* SP =======================================================================================*/
@media screen and (max-width: 768px) {
  .modal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: none;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .modal.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .modal .modal_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
  }
  .modal .movie_wrap {
    max-width: 960px;
    width: 96%;
    margin: auto;
    position: relative;
    z-index: 2;
  }
  .modal .movie_wrap::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
  .modal .movie_wrap #player1 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .modal .movie_wrap .modal_close_btn {
    width: 40px;
    height: 40px;
    position: absolute;
    top: -50px;
    right: 0;
  }
  .modal .movie_wrap .modal_close_btn::before, .modal .movie_wrap .modal_close_btn::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #ffffff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  .modal .movie_wrap .modal_close_btn::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .modal .movie_wrap .modal_close_btn::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .movie_list {
    text-align: center;
    cursor: pointer;
    color: #A90404;
    width: 20rem;
    border-color: #A90404;
  }
/*
  .movie_list > span {
    width: 100%;
  }
*/
  .videoWrap.movie_list {
    width: 100%;
    padding-top: 0;
    position: relative;
    overflow: hidden;
  }
  .videoWrap.movie_list span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background-image: url(/cms/clhd/img/common/youtube_icon.png);
    width: 43px;
    height: 30px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
  }
  /* 20250902 ADD */
  div#movie_ir.p-irMovie__wrap .p-ir__articleVideoPhoto .block01__body__video .videoWrap.movie_list span img {
    width: 100%;
  }
  div#movie_ir .videoWrap.movie_list span:after {
    background-image: url(/cms/clhd/img/common/btn-play.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    width: 7rem;
    height: 7rem;
  }
}
/*# sourceMappingURL=modal.css.map */