@charset "utf-8";

/*==================================================
ふわっ（フェードインアニメーション）
===================================*/

/* その場で（フェードイン） */
.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 下から */
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 上から */
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左から */
.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右から */
.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
    opacity: 0;
}

/*==================================================
背景色が伸びて出現（シャッ）
===================================*/

/* 背景色が伸びて出現（共通スタイル） */
.bgextend {
    animation-name: bgextendAnimeBase;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    position: relative;
    overflow: hidden; /* はみ出た色要素を隠す */
    opacity: 0;
}

@keyframes bgextendAnimeBase {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 中の要素（テキストなど） */
.bgappear {
    animation-name: bgextendAnimeSecond;
    animation-duration: 0.6s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes bgextendAnimeSecond {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 左から右へ伸びる背景 */
.bgLRextend::before {
    animation-name: bgLRextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(58, 58, 58, 0.95) 0%, rgba(45, 45, 45, 0.9) 100%);
    z-index: -1;
}

@keyframes bgLRextendAnime {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }
    50% {
        transform-origin: left;
        transform: scaleX(1);
    }
    50.001% {
        transform-origin: right;
    }
    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}

/* 右から左へ伸びる背景 */
.bgRLextend::before {
    animation-name: bgRLextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(58, 58, 58, 0.95) 0%, rgba(45, 45, 45, 0.9) 100%);
    z-index: -1;
}

@keyframes bgRLextendAnime {
    0% {
        transform-origin: right;
        transform: scaleX(0);
    }
    50% {
        transform-origin: right;
        transform: scaleX(1);
    }
    50.001% {
        transform-origin: left;
    }
    100% {
        transform-origin: left;
        transform: scaleX(0);
    }
}

/* 下から上へ伸びる背景 */
.bgDUextend::before {
    animation-name: bgDUextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(58, 58, 58, 0.95) 0%, rgba(45, 45, 45, 0.9) 100%);
    z-index: -1;
}

@keyframes bgDUextendAnime {
    0% {
        transform-origin: bottom;
        transform: scaleY(0);
    }
    50% {
        transform-origin: bottom;
        transform: scaleY(1);
    }
    50.001% {
        transform-origin: top;
    }
    100% {
        transform-origin: top;
        transform: scaleY(0);
    }
}

/* 上から下へ伸びる背景 */
.bgUDextend::before {
    animation-name: bgUDextendAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(58, 58, 58, 0.95) 0%, rgba(45, 45, 45, 0.9) 100%);
    z-index: -1;
}

@keyframes bgUDextendAnime {
    0% {
        transform-origin: top;
        transform: scaleY(0);
    }
    50% {
        transform-origin: top;
        transform: scaleY(1);
    }
    50.001% {
        transform-origin: bottom;
    }
    100% {
        transform-origin: bottom;
        transform: scaleY(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
    opacity: 0;
}

/*==================================================
section-header専用：左から伸びるアニメーション
===================================*/

/* 最初の状態：既存の背景を消して透明に */
.section-header.bgextend {
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0;
}

/* リサイズ時の対策：アニメーションが完了したら opacity: 1 を維持 */
.section-header.bgLRextend.animation-complete,
.section-header.bgRLextend.animation-complete,
.section-header.bgDUextend.animation-complete,
.section-header.bgUDextend.animation-complete,
.section-header--right.bgRLextend.animation-complete {
    opacity: 1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* アニメーション開始：要素全体をフェードイン */
.section-header.bgLRextend,
.section-header.bgRLextend,
.section-header.bgDUextend,
.section-header.bgUDextend {
    animation: sectionHeaderFadeIn 0.2s ease-out forwards,
               sectionHeaderShadow 0.2s 0.3s ease-out forwards;
}

@keyframes sectionHeaderFadeIn {
    to {
        opacity: 1;
    }
}

@keyframes sectionHeaderShadow {
    to {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* ::before：左から右へ伸びる背景 */
.section-header.bgextend::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(58, 58, 58, 0.95) 0%, rgba(45, 45, 45, 0.9) 100%);
    transform-origin: left;
    transform: scaleX(0);
    z-index: -1;
}

/* 左から伸びるアニメーション */
.section-header.bgLRextend::before {
    animation: sectionHeaderSlideFromLeft 0.5s ease-out forwards;
}

@keyframes sectionHeaderSlideFromLeft {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

/* 右から伸びるアニメーション */
.section-header.bgRLextend::before {
    transform-origin: right;
    animation: sectionHeaderSlideFromRight 0.5s ease-out forwards;
}

@keyframes sectionHeaderSlideFromRight {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

/* 下から伸びるアニメーション */
.section-header.bgDUextend::before {
    transform-origin: bottom;
    animation: sectionHeaderSlideFromBottom 0.5s ease-out forwards;
}

@keyframes sectionHeaderSlideFromBottom {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

/* 上から伸びるアニメーション */
.section-header.bgUDextend::before {
    transform-origin: top;
    animation: sectionHeaderSlideFromTop 0.5s ease-out forwards;
}

@keyframes sectionHeaderSlideFromTop {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

/* テキストを前面に表示 */
.section-header.bgextend .section-header__title,
.section-header.bgextend .section-header__subtitle {
    position: relative;
    z-index: 1;
}

/* 右側のsection-header専用 */
.section-header--right.bgextend {
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0;
}

/* 右側のアニメーション開始 */
.section-header--right.bgLRextend,
.section-header--right.bgRLextend,
.section-header--right.bgDUextend,
.section-header--right.bgUDextend {
    animation: sectionHeaderFadeIn 0.2s ease-out forwards,
               sectionHeaderShadow 0.2s 0.3s ease-out forwards;
}

/* 右側の::before */
.section-header--right.bgextend::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(58, 58, 58, 0.95) 0%, rgba(45, 45, 45, 0.9) 100%);
    transform-origin: right;
    transform: scaleX(0);
    z-index: -1;
}

/* 右側：右から伸びるアニメーション */
.section-header--right.bgRLextend::before {
    animation: sectionHeaderSlideFromRight 0.5s ease-out forwards;
}

/*==================================================
順番にふわっと現れる（遅延アニメーション）
===================================*/
.delayScroll {
    position: relative;
}

.delayScroll .fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

/*==================================================
アニメーション設定オプション
===================================*/

/* アニメーションスタートの遅延時間 */
.delay-time05 {
    animation-delay: 0.5s;
}

.delay-time1 {
    animation-delay: 1s;
}

.delay-time15 {
    animation-delay: 1.5s;
}

.delay-time2 {
    animation-delay: 2s;
}

/* アニメーション自体が変化する時間 */
.change-time05 {
    animation-duration: 0.5s;
}

.change-time1 {
    animation-duration: 1s;
}

.change-time15 {
    animation-duration: 1.5s;
}

.change-time2 {
    animation-duration: 2s;
}