/* CSS Document */
/******************************
animation
******************************/
body:not(.ie) main { opacity: 0; transition: .3s; }

body:not(.ie) .simpleParallax { width: 100%; height: 100%; }

body:not(.ie) .fade-up { transition: 1.4s; opacity: 0; transform: translate(0, 40px); }

body:not(.ie) .fade-up.active { opacity: 1; transform: translate(0, 0); }

body:not(.ie) header { transition: .8s; transform: translateY(-100%); }

body:not(.ie) header.show { transform: translateY(0); }

body:not(.ie) .animation-text-l, body:not(.ie) .sec__caption .jp, body:not(.ie) .item__number, body:not(.ie) .item__name, body:not(.ie) .item__caption, body:not(.ie) .item__text { background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #333, #333); background-position: right; background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 2s; }

@media (max-width: 767px) { body:not(.ie) .main-visual .item__text { background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #fff, #fff); background-position: right; background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 2s; } }

body:not(.ie) .sec__fv .catchcopy, body:not(.ie) .sec__fv .catchcopy .vol { background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #fff, #fff); background-position: right; background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 2s; }

body:not(.ie) .animation-text-l.active, body:not(.ie) .sec__fv .catchcopy.active, body:not(.ie) .sec__fv .catchcopy.active .vol { background-position: left; }

body:not(.ie) .animation-text-r, body:not(.ie) .sec__caption .en { background-image: -webkit-linear-gradient(0, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #333, #333); background-position: left; background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 2s; }

body:not(.ie) .animation-text-r.active { background-position: right; }

body:not(.ie) .fv__bg__img { opacity: 0; transition: transform ease-out .55s, opacity .55s; will-change: transform; }

body:not(.ie).style_pc .fv__bg__img.left { transform: scale(1.3) translateY(-25px); }

body:not(.ie).style_pc .fv__bg__img.right { transform: scale(1.3) translateY(25px); }

body:not(.ie).style_sp .fv__bg__img.left { transform: scale(1.3) translateX(-25px); }

body:not(.ie).style_sp .fv__bg__img.right { transform: scale(1.3) translateX(25px); }

body:not(.ie) .fv__bg__img.active { opacity: 1; }

body:not(.ie).style_pc .fv__bg__img.left.active { transform: scale(1.2) translateY(-25px); }

body:not(.ie).style_pc .fv__bg__img.right.active { transform: scale(1.2) translateY(25px); }

body:not(.ie).style_sp .fv__bg__img.left.active { transform: scale(1.2) translateX(-25px); }

body:not(.ie).style_sp .fv__bg__img.right.active { transform: scale(1.2) translateX(25px); }

@media screen and (max-width: 1200px) { body:not(.ie) .fade-up { backface-visibility: hidden; will-change: opacity, transform; }
  body:not(.ie) header { will-change: opacity; } }