@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

.wow.animated { visibility: hidden; opacity: 0;}
.wow { visibility: visible; opacity: 1;}

/* animation
-----------------------------------------------------------------*/

/* curtainWhite */
.curtain { /*display: inline-block;*/ opacity: 0; /*transform: scale(0, 1); transform-origin: left; */overflow: hidden; position: relative;}
.curtain.play { /*transform: scale(1, 1);*/ opacity: 1; /*transition: 0.25s;*/}

.curtain::before, .curtain::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; right: 0; transform-origin: right top;}

.curtain::before { background: #fff; z-index: 15;
/* opacity:1; transition: transform 0.9s cubic-bezier(0.75, 0, 0.175, 1) 0.1s; transform: scale(1, 1); transform-origin: right top;*/}
.curtain.play::before { animation:imgBg2 1.1s ease 1 forwards 0.25s;}

.curtain::after { background: rgba(255,255,255, .8); z-index: 15;
/* opacity:.8; transition: transform 1.8s cubic-bezier(0.75, 0, 0.175, 1) 0.025s; transform: scale(1, 1); transform-origin: right top;*/}
.curtain.play::after { animation:imgBg1 1.2s ease 1 forwards 0s;}

@keyframes imgBg1 {
	0% { opacity: 1; transform: scale(1, 1);}
	100% { opacity: 0; transform: scale(0, 1);}
}
@keyframes imgBg2 {
	0% { opacity: 1; width:100%; height:100%; transform: scale(1, 1);}
	100% { opacity: 0; width:100%; height:100%; transform: scale(0, 1);}
}
/*@keyframes imgBg1 {
	0% { opacity: 0; width:100%; height:100%; transform:translateX(-100%); top:0; left:0; }
	8% { opacity: 1; width:100%; height:100%; top:0; left:0; }
	42% { opacity: 1; width:100%; height:100%; top:0; left:0; }
	58% { opacity: 1; width:100%; height:100%; top:0; right:0; }
	92% { opacity: 1;  width:100%; height:100%; top:0; right:0; }
	100% { opacity: 0; width:100%; height:100%; transform:translateX(100%); top:0; right:0; }
}
@keyframes imgBg2 {
	0% { opacity: 0; width:100%; height:100%; transform:translateX(-100%); top:0; left:0; }
	8% { opacity: 1; width:100%; height:100%; top:0; left:0; }
	42% { opacity: 1; width:100%; height:100%; top:0; left:0; }
	58% { opacity: 1; width:100%; height:100%; top:0; right:0; }
	92% { opacity: 1;  width:100%; height:100%; top:0; right:0; }
	100% { opacity: 0; width:100%; height:100%; transform:translateX(100%); top:0; right:0; }
}*/

/* 写真を後からスライドイン */
.curtain.play img{ animation:phSlideIn 1s ease 1 forwards .75s; z-index:0; opacity: 0;}
@keyframes phSlideIn {
from { opacity:0; transform:translateX(-100px);}
to { opacity:1; transform:translateX(0px);}
}

/* curtainWhite */
/*.curtain { display: inline-block; transform: scale(0, 1); transform-origin: left; overflow: hidden;}
.curtain:before { content: ""; width: 100%; height: 100%; background: #fff; display: block; position: absolute; top: 0; right: 0; z-index: 1;
 opacity:1; transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s; transform: scale(1, 1); transform-origin: right top;}
.curtain.play { transform: scale(1, 1); transition: 0.2s;}
.curtain.play:before { opacity: 1; transform: scale(0, 1);}*/

/* curtainBlack */
.curtain.blk{}
.curtain.blk:before{ background: #000;}
.curtain.play.blk{}
.curtain.play.blk:before{}

/* curtainBlack */
/*.curtain.blk:before{ background: rgba(0,0,0,0.0); transform: translateX(-100%); transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s; }
.curtain.blk.play:before{ background: rgba(0,0,0,1.0); transform: translateX(100%);}*/

/* curtainBG */
.curtain.bg{ display: inline-block; transform: scale(0, 1); transform-origin: left; overflow: hidden; }
.curtain.bg:before{ content: ""; width: 100%; height: 100%; background: #fff; display: inline-block; position: absolute; top: 0; right: 0; z-index: 1;
 opacity:1; transition: transform 1.2s cubic-bezier(0.75, 0, 0.175, 1) 0.5s !important; transform: scale(1, 1); transform-origin: right top; transition-delay:0.5s !important;}
.curtain.bg.play{ transform: scale(1, 1); transition: 0.7s !important; transition-delay:0.5s !important;}
.curtain.bg.play:before{ opacity: 1; transform: scale(0, 1);}


/* fadeInIsoVer */
.fadein{ opacity: 0; display: block;}
.fadein.play { opacity: 1; transition: 1.5s;}




/*.curtain { position: relative; overflow: hidden; transform-origin: left;}
.curtain:before{ content: ""; width: 100%; height: 100%; background: #fff; display: block; position: absolute; top: 0; right: 0; z-index: 1;
 transform-origin: right; transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-animation-name: curtain; animation-name: curtain;}
@-webkit-keyframes curtain {
  from { opacity: 1; transform: scale(1, 1);}
  to { opacity: 1; transform: scale(0, 1);}
}
@keyframes curtain {
  from { opacity: 1; transform: scale(1, 1);}
  to { opacity: 1; transform: scale(0, 1);}
}*/


/*.curtain { -webkit-animation-name: curtain; animation-name: curtain;}
@-webkit-keyframes curtain { 
  from { transform: translateX(-100%);}
  to { transform: translateX(0%);}
}
@keyframes curtain { 
  from { transform: translateX(-100%);}
  to { transform: translateX(0%);}
}*/

/* テキストバラバラ表示 */
.textIn { opacity: 0;}
.textIn.animated { opacity: 1;}
.textIn small { opacity: 0;}
.textIn.animated small { animation:textIn 1s ease-out forwards;}
.textIn.hs.animated small { animation:textIn 1s ease-out forwards;}
@keyframes textIn {
  0% { opacity:0;}
  100% { opacity:1;}
}
@media only screen and (max-width: 834px) { 
.textIn { opacity: 1;}
.textIn small { opacity: 1;}
}


/* blur */
.blurIn{ -webkit-animation-name: blurIn; animation-name: blurIn;}
@-webkit-keyframes blurIn { 
  from { opacity: 0; filter: blur(15px);}
  to { opacity: 1; filter: blur(0px);}
}
@keyframes blurIn { 
  from { opacity: 0; filter: blur(20px);}
  to { opacity: 1; filter: blur(0px);}
}


/* fadeInIsoVer */
.fadein{ opacity: 0; display: block;}
.fadein.play { opacity: 1; transition: 1.5s;}


/*.wow{ opacity: 0;}
.wow.play { opacity: 1;}*/

.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn;}
@-webkit-keyframes fadeIn { 
  from { opacity: 0;}
  to { opacity: 1;}
}
@keyframes fadeIn { 
  from { opacity: 0;}
  to { opacity: 1;}
}

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown;}
@-webkit-keyframes fadeInDown {
  from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInDown {
  from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;}
@-webkit-keyframes fadeInLeft {
  from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInLeft {
  from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInLeftShort { -webkit-animation-name: fadeInLeftShort; animation-name: fadeInLeftShort;}
@-webkit-keyframes fadeInLeftShort {
  from { opacity: 0; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInLeftShort {
  from { opacity: 0; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInLeftMid { -webkit-animation-name: fadeInLeftMid; animation-name: fadeInLeftMid;}
@-webkit-keyframes fadeInLeftMid {
  from { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInLeftMid {
  from { opacity: 0; -webkit-transform: translate3d(-20%, 0, 0); transform: translate3d(-20%, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInRightShort { -webkit-animation-name: fadeInRightShort; animation-name: fadeInRightShort;}
@-webkit-keyframes fadeInRightShort {
  from { opacity: 0; -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInRightShort {
  from { opacity: 0; -webkit-transform: translate3d(50px, 0, 0); transform: translate3d(50px, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight;}
@-webkit-keyframes fadeInRight {
  from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInRight {
  from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp;}
@-webkit-keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInUpShort { -webkit-animation-name: fadeInUpShort; animation-name: fadeInUpShort;}
@-webkit-keyframes fadeInUpShort {
  from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInUpShort {
  from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.fadeInUpMid { -webkit-animation-name: fadeInUpMid; animation-name: fadeInUpMid;}
@-webkit-keyframes fadeInUpMid {
  from { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}
@keyframes fadeInUpMid {
  from { opacity: 0; -webkit-transform: translate3d(0, 20%, 0); transform: translate3d(0, 20%, 0);}
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
}

.flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX;}
@-webkit-keyframes flipInX {
  from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0;}
  40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
  60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}
  80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
  to { -webkit-transform: perspective(400px); transform: perspective(400px);}
}
@keyframes flipInX {
  from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0;}
  40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
  60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1;}
  80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}
  to { -webkit-transform: perspective(400px); transform: perspective(400px);}
}

.flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY;}
@-webkit-keyframes flipInY {
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0;}
  40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
  60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1;}
  80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}
  to { -webkit-transform: perspective(400px); transform: perspective(400px);}
}
@keyframes flipInY {
  from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0;}
  40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
  60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1;}
  80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}
  to { -webkit-transform: perspective(400px); transform: perspective(400px);}
}

.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn;}
@-webkit-keyframes zoomIn {
  from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}
  50% { opacity: 1;}
}
@keyframes zoomIn {
  from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);}
  50% { opacity: 1;}
}

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
.animated.delay-1s { -webkit-animation-delay: 1s; animation-delay: 1s;}
.animated.delay-2s { -webkit-animation-delay: 2s; animation-delay: 2s;}
.animated.delay-3s { -webkit-animation-delay: 3s; animation-delay: 3s;}
.animated.delay-4s { -webkit-animation-delay: 4s; animation-delay: 4s;}
.animated.delay-5s { -webkit-animation-delay: 5s; animation-delay: 5s;}
.animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms;}
.animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms;}
.animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s;}
.animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s;}

.delay-0s, .delay-0s:before { -webkit-animation-delay: .0s !important; animation-delay: .0s !important; -webkit-transition-delay: .0s !important; transition-delay: .0s !important;}
.delay-01s, .delay-01s:before { -webkit-animation-delay: .1s !important; animation-delay: .1s !important; -webkit-transition-delay: .1s !important; transition-delay: .1s !important;}
.delay-02s, .delay-02s:before { -webkit-animation-delay: .2s !important; animation-delay: .2s !important; -webkit-transition-delay: .2s !important; transition-delay: .2s !important;}
.delay-025s, .delay-025s:before { -webkit-animation-delay: .25s !important; animation-delay: .25s !important; -webkit-transition-delay: .25s !important; transition-delay: .25s !important;}
.delay-03s, .delay-03s:before { -webkit-animation-delay: .3s !important; animation-delay: .3s !important; -webkit-transition-delay: .3s !important; transition-delay: .3s !important;}
.delay-04s, .delay-04s:before { -webkit-animation-delay: .4s !important; animation-delay: .4s !important; -webkit-transition-delay: .4s !important; transition-delay: .4s !important;}
.delay-05s, .delay-05s:before { -webkit-animation-delay: .5s !important; animation-delay: .5s !important; -webkit-transition-delay: .5s !important; transition-delay: .5s !important;}
.delay-06s, .delay-06s:before { -webkit-animation-delay: .6s !important; animation-delay: .6s !important; -webkit-transition-delay: .6s !important; transition-delay: .6s !important;}
.delay-07s, .delay-07s:before { -webkit-animation-delay: .7s !important; animation-delay: .7s !important; -webkit-transition-delay: .7s !important; transition-delay: .7s !important;}
.delay-08s, .delay-08s:before { -webkit-animation-delay: .8s !important; animation-delay: .8s !important; -webkit-transition-delay: .8s !important; transition-delay: .8s !important;}
.delay-09s, .delay-09s:before { -webkit-animation-delay: .9s !important; animation-delay: .9s !important; -webkit-transition-delay: .9s !important; transition-delay: .9s !important;}
.delay-10s, .delay-10s:before { -webkit-animation-delay: 1.0s !important; animation-delay: 1.0s !important; -webkit-transition-delay: 1s !important; transition-delay: 1s !important;}
.delay-12s, .delay-12s:before { -webkit-animation-delay: 1.2s !important; animation-delay: 1.2s !important; -webkit-transition-delay: 1.2s !important; transition-delay: 1.2s !important;}
.delay-15s, .delay-15s:before { -webkit-animation-delay: 1.5s !important; animation-delay: 1.5s !important; -webkit-transition-delay: 1.5s !important; transition-delay: 1.5s !important;}
.delay-20s, .delay-20s:before { -webkit-animation-delay: 2s !important; animation-delay: 2s !important; -webkit-transition-delay: 2s !important; transition-delay: 2s !important;}


@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}