/*------------------------------------
Modal
------------------------------------*/
.display-block{
    display:block;
    animation: fadeIn 2s ease 0s 1 normal;
}
.display-null{display:none;}

.pointer{cursor: pointer;}

/*
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
*/

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: .5s;
}

.visibility-null{
  opacity: 0;
  visibility: hidden;
}

.visibility-block{
  opacity: 1;
  visibility: visible;
}

.popup.is-show {
  opacity: 1;
  visibility: visible;
}


.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 84%;
  max-width: 960px;
  /* youtube 切り替えボタンが入った場合padding bottom 10px に切り替え
  padding: 40px 34px 10px 34px;
  */
  padding: 40px 34px 40px 34px;
  background-color: #fff;
  z-index: 2;
}
.popup-inner img {
  width: 100%;
}
.close-btn {
  position: absolute;
  right: -5px;
  top: 2px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.close-btn i {
  font-size: 30px;
  color: #0d2736;
}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}

ul.trailer-btn{flex-wrap: wrap; margin:10px 0;}
ul.trailer-btn li{width:calc(50% - 3px); background-color: #5083A0; text-align: center; margin:0 0 6px 0; }
ul.trailer-btn li.btn-normal{background-color: #388299;}
ul.trailer-btn li.btn-active{background-color: #0d2736 ; color:#5083A0;}
ul.trailer-btn li:hover{background-color: #0d2736; color:#fff;}
ul.trailer-btn li:nth-child(2n){margin-left:6px;}
ul.trailer-btn li p{font-size:16px; padding:10px; color: #FFFFFF;}

.if-wrap{
  position:relative;
    height:0;
    padding-top:56.25%;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
}