@charset "utf-8";

/* jquery.modal.css */
.blocker,.modal{box-sizing:border-box}
.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;background-color:#000;background-color:rgba(0,0,0,.75);text-align:center}
.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-.05em}
.blocker.behind{background-color:transparent}
.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:500px;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}
.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}
.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}
.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}
.modal-spinner .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes sk-stretchdelay{0%,100%,40%{-webkit-transform:scaleY(.5)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,100%,40%{transform:scaleY(.5);-webkit-transform:scaleY(.5)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}

.movie-box{ width:48%;padding:80px 0 100px 0; margin:auto;}
*,::after,::before{box-sizing:border-box}
@media screen and (max-width: 768px) {
.movie-box{ width:100%;padding:20px 0 0px 0; margin:auto; margin-left:0;}
}
/* For iPad */
@media screen and (min-width:768px) and (max-width:1024px){
.movie-box{ width:100%;padding-top:30px; padding-left:10%; padding-right:10%; margin:auto 0;}
}
/* For iPad rotate */
@media screen and (max-width: 1366px) and (orientation: landscape){
.movie-box{ width:100%;padding-top:30px; padding-left:10%; padding-right:10%; margin:auto 0;}
}
/* *****
 *  */
.vdo-unit {
  list-style: none;
  font-size: 0;
  padding: 0;
}
.pkg {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  padding: 0 1.5% 3%;
}
.pkg .txt-ttl {
  font-size: 1rem; color:#fff;
}
.pkg .txt-txt {
  font-size: 1rem;
}
/* *****
 *  */
/* youtube video */
.vdo-base {
  margin-bottom: .8rem;
  position: relative;
}
.modal-open {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
}
.vdo-body {
  max-width: 100%;
  height: auto;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
}
.vdo-body iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/* *****
 *  */
/* modal */
.blocker {
  z-index: 11;
}
.modal {
  background-color: #242424;
  border-radius: 4px;
  max-width: 1200px;
  padding: 10px;
}
.modal-window .vdo-txt {
  margin-left: 3%;
}
.modal-window .vdo-txt .txt-ttl {
  margin-top: -.2rem;
}
.modal-window .vdo-txt .txt-txt {
  margin-bottom: .4rem;
}
.modal a.close-modal {
  background-color: #000;
  border: 2px solid #242424;
  border-radius: 50%;
  display: block;
  width: 26px;
  height: 26px;
  padding: 30px 30px 0 0;
  overflow: hidden;
  position: absolute;
  top: -13px;
  right: -13px;
}
.modal a.close-modal:hover {
  background-color: #424242;
}
.modal a.close-modal::before,
.modal a.close-modal::after {
  background-color: #999;
  content: '';
  display: block;
  width: 2px;
  height: 24px;
  margin-left: -1px;
  position: absolute;
  top: 3px;
  left: 50%;
}
.modal a.close-modal::before {
  transform: rotate(-45deg);
}
.modal a.close-modal::after {
  transform: rotate(45deg);
}
/* *****
 *  */
/* SP */
@media screen and (max-width: 768px) {
  .pkg {
    display: block;
    width: 100%;
  }
  .modal-open {
    display: none;
  }
.pkg .txt-ttl {
 color:#fff;
}
}
@media screen and (max-width: 639px) {
  header .txt-ttl {
    font-size: 14px;
  }
  main .block-inner > .txt-ttl {
    font-size: 14px;
  }
  .pkg .txt-ttl {
    font-size: 14px; color:#fff;
  }
  .pkg .txt-txt {
    font-size: 14px;
  }
  .copyright p small {
    font-size: 10px;
  }
}

/* For ipad */
@media screen and (min-width:768px) and (max-width:1024px){
.pkg .txt-ttl {
 color:#fff;
}
}

/* For iPad rotate */
@media screen and (max-width: 1366px) and (orientation: landscape){
.pkg .txt-ttl {
 color:#fff;
}
}