@charset "UTF-8";


.youtubeBox {
 max-width: 540px;
 margin: 0 auto 50px;
}
.youtubeBox img {
 border-radius: 12px;
 filter: drop-shadow(3px 3px 3px #eee);
}
.youtubeBox p {
 font-size: 15px;
 line-height: 1.6;
 font-weight: bold;
 text-align: center;
 margin-top: 10px;
}
.movieTxt {
 font-size: 26px;
 margin-top: 1em;
 margin-bottom: 0.5em;
 font-weight: bold;
 text-align: center;
 color: #FC0F3A;
}
/* modal */
.refinemodal {
 width: calc(100% - 175px);
 height: 100%;
 background: #f4f5f7;
 position: fixed;
 left: 175px;
 top: 0px;
 z-index: 10000;
 display: none;
}
.refinemodal-inner {
 position: absolute;
 left: 50%;
 top: 95px;
 -webkit-transform: translate(-50%, 0%);
 transform: translate(-50%, 0%);
 overflow: hidden;
 font-size: 16px;
 position: relative;
 text-align: left;
 width: 100%;
 height: 100%;
 max-width: 980px;
 max-height: calc(100vh - 95px);
 padding-right: 10px;
 -webkit-overflow-scrolling: touch;
 overflow-scrolling: touch;
}
.refinemodal {
 width: 100%;
 left: 0;
}
@media (max-width: 1180px) {
 .refinemodal {
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
 }
 .refinemodal-inner {
  padding: 0 15px;
  width: 100%;
 }
 .refinemodal .ttl-page {
  margin-bottom: 25px;
 }
}
.l-youtube {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 overflow: hidden;
}
.l-youtube iframe {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}
.refinemodal .l-youtube {
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 position: absolute;
}
.refinemodal-bottom {
 display: none;
}
.modal-close {
 display: block;
 width: 80px;
 height: 80px;
 text-indent: -99em;
 overflow: hidden;
 position: fixed;
 right: 0px;
 top: 0px;
 background: url(https://www.ymobile.jp/common_c/images/common/close.svg) no-repeat center 52px #fe0033;
 background-size: 34px;
 z-index: 500;
 cursor: pointer;
 -webkit-transition: all 0.25s ease;
 transition: all 0.25s ease;
}
.modal-close:hover {
 opacity: 0.7;
}
.modal-close span {
 content: "";
 display: block;
 width: 40px;
 height: 1px;
 background: #CACACA;
 position: absolute;
 left: 18px;
 -webkit-transition: all 0.25s ease;
 transition: all 0.25s ease;
}
.modal-close span:nth-child(1) {
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 30px;
 left: 20px;
}
.modal-close span:nth-child(2) {
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 top: 30px;
 left: 20px;
}
.modal-close, .refinemodal-bottom-close {
 background-color: #fe0033;
}
.modal-close span, .refinemodal-bottom-close span {
 height: 2px;
 background: #fff;
}