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

/* JS無効時: animation.js の opacity 復帰に依存しないフォールバック */
@media (scripting: none) {
  body:not(.ie) main,
  body:not(.ie) .dh_lp_wrapper { opacity: 1; }
}

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__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; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 2s; }

@media (max-width: 767px) { body:not(.ie) .main-visual .item__text { background-position: right; background-size: 300% 100%; -webkit-background-clip: text; 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; 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; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 2s; }

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

/* SP: セクション見出しは画像上の白文字（グラデclipだとグレーっぽくなるため実色に） */
@media screen and (max-width: 785px) {
  body:not(.ie) .sec__ttl.animation-text-l {
    background-image: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

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