html{--vw: 1.9rem;--vh: 3.16px;--vwn: 19.03;--vhn: 3.16;--vh-max: .32rem;--o-s: .13rem;--a-s: .13rem;--c-s: .04rem;--aspect: 0.311;--aspect-high: 1;--aspect-low: 1.689;--scrollbar-width: 1.7rem;}

.js_fv_attention{align-items:flex-end;aspect-ratio:2/1;bottom:0;cursor:pointer;display:flex;justify-content:center;opacity:0;/*pointer-events:none;*/position:absolute;transition:opacity .3s ease-in-out,visibility .3s ease-in-out;visibility:hidden;z-index:11;cursor: pointer;}
.js_fv_attention{opacity:1;transition:opacity 1s ease-in-out,visibility 1s ease-in-out;visibility:visible}
.html_keyMoviePlaying .js_fv_attention{opacity:0!important;transition:opacity .3s ease-out,visibility .3s ease-out!important;visibility:hidden}
.js_fv_attention{left:calc(50% - 9.5rem)}

.js_fv_attentionCircle{animation:js_circleScale 2.6s cubic-bezier(.455,.03,.515,.955) 1.2s infinite;background-color:#fff;border-radius:50%;display:block;height:100%;position:relative;width:100%;background: rgba(255, 255, 255, .57);border: .1rem dashed #fff;}
.js_fv_attention:not(.is_ready) .js_fv_attentionCircle{animation-play-state:paused}
.is_show:not(.is_ready) .js_fv_attentionCircle{animation-play-state:running}
@media(orientation:landscape),(orientation:portrait)and (min-width:760px){
    .js_fv_attentionCircle{bottom: -9.5rem;height: 19rem;width: 19rem}
}
@media(orientation:portrait)and (max-width:759px){
    .js_fv_attentionCircle{bottom:calc(var(--a-s,1px)*-42);height:calc(var(--a-s,1px)*84);width:calc(var(--a-s,1px)*84)}
}
.js_fv_attentionRipple{animation:js_rippleScale 2.6s cubic-bezier(.77,0,.175,1) .2s infinite;background-color:#fff;border-radius:50%;display:block;opacity:.2;position:absolute}
.js_fv_attention:not(.is_ready) .js_fv_attentionRipple{animation-play-state:paused}
.is_show:not(.is_ready) .js_fv_attentionRipple{animation-play-state:running}
.js_fv_attentionRipple{bottom: -16rem;height: 32rem;left: -6.5rem;width: 32rem}


.js_fv_attentionDots{align-items:center;display:flex;flex-direction:column;justify-content:space-between;position:absolute}
@media(orientation:landscape),(orientation:portrait)and (min-width:760px){
    .js_fv_attentionDots{bottom: calc(var(--a-s,1px)*54);height: calc(var(--a-s,1px)*84);left: calc(var(--a-s,1px)*73);width:0}
}
@media(orientation:portrait)and (max-width:759px){
    .js_fv_attentionDots{bottom:calc(var(--a-s,1px)*14);height:calc(var(--a-s,1px)*90);left:calc(var(--a-s,1px)*41.8);width:0}
}
.js_fv_attentionDotLine{animation:js_lineWrapSlide 2.6s cubic-bezier(.77,0,.175,1) 0s infinite;display:block;mix-blend-mode:difference;overflow:hidden;position:absolute}
.js_fv_attention:not(.is_ready) .js_fv_attentionDotLine{animation-play-state:paused}
.is_show:not(.is_ready) .js_fv_attentionDotLine{animation-play-state:running}
@media(orientation:landscape),(orientation:portrait)and (min-width:760px){
    .js_fv_attentionDotLine{bottom: calc(var(--a-s,1px)*56);height: calc(var(--a-s,1px)*74);left: calc(var(--a-s,1px)*70);width:calc(var(--a-s,1px)*5)}
}
@media(orientation:portrait)and (max-width:759px){
    .js_fv_attentionDotLine{bottom:calc(var(--a-s,1px)*15);height:calc(var(--a-s,1px)*90);left:calc(var(--a-s,1px)*39.5);width:calc(var(--a-s,1px)*5)}
}
.js_fv_attentionDotLineInner{animation:js_lineSlide 2.6s cubic-bezier(.77,0,.175,1) 0s infinite,js_lineOpacity 2.6s cubic-bezier(.77,0,.175,1) 0s infinite;bottom:0;left:0;position:absolute}
.js_fv_attention:not(.is_ready) .js_fv_attentionDotLineInner{animation-play-state:paused}
.is_show:not(.is_ready) .js_fv_attentionDotLineInner{animation-play-state:running}
@media(orientation:landscape),(orientation:portrait)and (min-width:760px){
    .js_fv_attentionDotLineInner{height:calc(var(--a-s,1px)*138);width:calc(var(--a-s,1px)*5)}
}
@media(orientation:portrait)and (max-width:759px){
    .js_fv_attentionDotLineInner{height:calc(var(--a-s,1px)*90);width:calc(var(--a-s,1px)*5)}
}
.js_fv_attentionDotLineInner svg{fill:#fff}
.js_fv_attentionDot{border-radius:50%;height:calc(var(--a-s,1px)*5);width:calc(var(--a-s,1px)*5)}
.js_fv_attentionDot.__white{background-color:#fff}

.js_fv_attentionDot.__white{animation:js_dotScale_pc 2.6s cubic-bezier(.77,0,.175,1) .1s infinite}
.js_fv_attention:not(.is_ready) .js_fv_attentionDot.__white{animation-play-state:paused}
.is_show:not(.is_ready) .js_fv_attentionDot.__white{animation-play-state:running}

.js_fv_attentionDot.__gray{animation:js_dotGrayScale 2.6s cubic-bezier(.77,0,.175,1) .4s infinite;background-color:#fff;opacity:.4}
.js_fv_attention:not(.is_ready) .js_fv_attentionDot.__gray{animation-play-state:paused}
.is_show:not(.is_ready) .js_fv_attentionDot.__gray{animation-play-state:running}

@keyframes js_circleScale{
    0%{transform:scale(.9)}
    50%{transform:scale(1.3)}
    to{transform:scale(.9)}
}
@keyframes js_rippleScale{
    0%{opacity:.2;transform:scale(.4)}
    30%,40%{opacity:.2;transform:scale(1)}
    to{opacity:0;transform:scale(1.5)}
}
@keyframes js_lineWrapSlide{
    0%{transform:translateY(-100%)}
    30%{transform:translateY(0)}
    to{transform:translateY(110%)}
}
@keyframes js_lineSlide{
    0%{transform:translateY(100%)}
    30%{transform:translateY(0)}
    to{transform:translateY(-110%)}
}
@keyframes js_lineOpacity{
    0%{opacity:0}
    30%,70%{opacity:1}
    80%,to{opacity:0}
}
@keyframes js_dotScale_pc{
    0%{opacity:1;transform:translateZ(0) scale(0)}
    30%{transform:translateZ(0) scale(1)}
    to{transform:translate3d(0,calc(var(--a-s,1px)*160),0) scale(0)}
}
@keyframes js_dotScale_sp{
    0%{opacity:1;transform:translateZ(0) scale(0)}
    30%{transform:translateZ(0) scale(1)}
    to{transform:translate3d(0,15rem,0) scale(0)}
}
@keyframes js_dotGrayScale{
    0%{opacity:.4;transform:translateZ(0) scale(0)}
    30%,40%{opacity:.4;transform:translateZ(0) scale(1)}
    to{opacity:.4;transform:translateZ(0) scale(0)}
}