@charset "utf-8";
/** CSS Information
---------------------------------------------------------------
Site URL:https://ninesix.jp
File name:nsLazyLoad.css
Summary:要素が表示する時に発火するアニメーション一式
Created:2025-07-30
Modified:2025-10-29
author:96
--------------------------------------------------------------- */
:root {
    --amount-of-movement: 2rem;
}


/*要素に「data-lazyload」を付けると、表示時に「is-active」classが追加されます。*/
[data-ns-lazyload=''] {
    transition: all 0.5s ease-in-out;
    transform: translate(0, 0);
    opacity: 1;
}

[data-ns-lazyload='child'] > * {
    transition: all 0.5s ease-in-out;
    transform: translate(0, 0);
    opacity: 1;
}

[data-ns-lazyload='']:not(.is-active) {
    opacity: 0;
}

[data-ns-lazyload=''][data-ns-lazytype=up]:not(.is-active) {
    transform: translateY(var(--amount-of-movement));
}

[data-ns-lazyload=''][data-ns-lazytype=down]:not(.is-active) {
    transform: translateY( calc(-1 * var(--amount-of-movement)));
}

[data-ns-lazyload=''][data-ns-lazytype=left]:not(.is-active) {
    transform: translateX(var(--amount-of-movement));
}

[data-ns-lazyload=''][data-ns-lazytype=right]:not(.is-active) {
    transform: translateX(calc(-1 * var(--amount-of-movement)));
}

[data-ns-lazyload='child']:not(.is-active) > * {
    opacity: 0;
}

[data-ns-lazyload='child'][data-ns-lazytype=up]:not(.is-active) > * {
    transform: translateY(var(--amount-of-movement));
}

[data-ns-lazyload='child'][data-ns-lazytype=down]:not(.is-active) > * {
    transform: translateY(calc(-1 * var(--amount-of-movement)));
}

[data-ns-lazyload='child'][data-ns-lazytype=left]:not(.is-active) > * {
    transform: translateX(var(--amount-of-movement));
}

[data-ns-lazyload='child'][data-ns-lazytype=right]:not(.is-active) > * {
    transform: translateX(calc(-1 * var(--amount-of-movement)));
}

/*[data-lazyload=''][data-lazytype=up].is-active {
  animation-name: titlePopup;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

[data-lazyload=''][data-lazytype=left] {
  transform: translateX(2rem);
  opacity: 0;
}

[data-lazyload=''][data-lazytype=left].is-active {
  animation-name: contSlideInLeft;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

[data-lazyload=''][data-lazytype=right] {
  transform: translateX(-2rem);
  opacity: 0;
}

[data-lazyload=''][data-lazytype=right].is-active {
  animation-name: contSlideInRight;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}*/

/* 配下のテキストをランダムにポップアップ
  （配下は1文字づつ分解されるのでプレーンテキストのみでないと使用できません）*/
[data-ns-lazytype="random"] {
    position: relative;
    overflow: clip;

    > span {
        opacity: 0;
        position: relative;
        transform: translateY(2rem);
        display: inline-block;
    }

    &.is-active {
        > span {
            animation-name: contPopup;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }
    }
}

/*[data-ns-lazyload=child] > * {
  transform: translateY(5rem);
  opacity: 0;

}

[data-ns-lazyload=child][data-ns-lazytype=up].is-active > * {
  animation-name: contPopup;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}*/

.openingAction {
    transition: all 0.3s ease-in-out;
}

.openingActionTitle > h1,
.openingActionTitle > p {
    transition: all 0.3s ease-out;
}

.openingAction:not(.is-active) {
    opacity: 0;
}

.openingActionTitle:not(.is-active) > h1,
.openingActionTitle:not(.is-active) > p {
    opacity: 0;
    transform: translateX(---amount-of-movement);
}

.openingActionTitle > picture {
    opacity: 0.2;
}

@keyframes contPopup {
    0% {
        transform: translateY(2rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes contSlideInLeft {
    0% {
        transform: translateX(2rem);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes contSlideRight {
    0% {
        transform: translateX(-2rem);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}