@charset "UTF-8";

/*==========================================================================
   Slide Js
========================================================================== */
/*スクロール*/
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(-50%,0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%,274px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform:translate(-50%,0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform:translate(-50%,274px);
    opacity: 0;
  }
}

.fade-out {
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
.fade-in {
  opacity: 1;
  -webkit-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
.fade-up-out {
  opacity: 0;
  -webkit-transform: translate(0, 60px);
          transform: translate(0, 60px);
  -webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}
.fade-up-in {
  opacity: 1;
  -webkit-transform: translate(0,0);
          transform: translate(0, 0);
  -webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}
.fade-down-out {
  opacity: 0;
  -webkit-transform: translate(0,-30px);
          transform: translate(0,-30px);
  -webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}
.fade-down-in {
  opacity: 1;
  -webkit-transform: translate(0,0);
          transform: translate(0,0);
  -webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}
.slide-right-out {
  opacity: 0;
  -webkit-transform: translate(30vw, 0);
          transform: translate(30vw, 0);
  -webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out;
  transition: opacity .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}

.slide-right-in {
  opacity: 1.0;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);

}
.slide-back-right-out::before{
  opacity: 0;
  -moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-webkit-transform: translateX(100%);
	transform: translateX(100%) scale(0,1);
	transform-origin: right center;
}
.slide-back-right-in::before{
  opacity: 1.0;
  /*transform: translateX(0);*/
  -moz-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
	-o-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
	-webkit-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
	transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
	-moz-transform: translateX(0) scale(1,1);
	-ms-transform: translateX(0) scale(1,1);
	-webkit-transform: translateX(0) scale(1,1);
	transform: translateX(0) scale(1,1);
  transition-delay:.3s;
  -moz-transition-delay:.3s;
  -webkit-transition-delay:.3s;
  -o-transition-delay:.3s;
  -ms-transition-delay:.3s;
}

.delay-2 {
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

/*==========================================================================
   TEXT Js
========================================================================== */

/* js-inview
   ----------------------------------------------------------------- */

.js-inview-finished {
	-moz-transition: 0s;
	-o-transition: 0s;
	-webkit-transition: 0s;
	transition: 0s;
}

/* js-reveal
   ----------------------------------------------------------------- */
.js-reveal-left .inview-ctt {
	display: inline-block;
	-moz-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	transform-origin: left center;
}

.js-reveal-right .inview-ctt {
	-moz-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	transform-origin: right center;
}

.is-inviewed > .inview-ctt {
	-moz-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	-moz-transition: cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.4s;
	-o-transition: cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.4s;
	-webkit-transition: cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.4s;
	transition: cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.4s;
}

.js-reveal-mask {
  background: #000;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.txt_bl .js-reveal-mask{
  background: #106acd;
}
.txt_pnk .js-reveal-mask{
  background: #d8066e;
}

.js-reveal-left .js-reveal-mask {
	transform-origin: right center;
}

.js-reveal-right .js-reveal-mask {
	transform-origin: left center;
}

.is-inviewed02 > .inview-ctt > .js-reveal-mask {
	-moz-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
	-o-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
	-webkit-transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
	transition: cubic-bezier(0.19, 1, 0.22, 1) 0.4s;
	-moz-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
}

/*==========================================================================
   Movie Modal
========================================================================== */
.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: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:100%;
  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)
  }
}
.vdo-base {
  margin-bottom: .8rem;
  position: relative;
}
.modal-open {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
}
.modal-open::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 12%;
  height: 12%;
  background: url("/image/{{ $public_path }}/icn_play.svg") no-repeat center/100% 100%;
  display: block;
  -webkit-transition: background .3s;
  -o-transition: background .3s;
  transition: background .3s;
}
@media screen and (max-width:480px) {
  .modal-open::after{
    width: 25%;
    height: 25%;
  }
}
.modal-open:hover::after{
  background-image: url("/image/{{ $public_path }}/icn_play_hover.svg");
}
.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;
}
.vdo-body > p.thumb{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
}
.vdo-body > p.thumb img{
  opacity: .75;
}

.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);
}