/* ==============================
 フェードアップイン
============================== */
.fadeUpSmallTrigger {
    opacity: 0;
}

.fedeup_small {
    animation-duration: .5s;
    animation-name: fadeInUp_small;
    animation-fill-mode: both;
}

@keyframes fadeInUp_small {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 70px, 0);
        transform: translate3d(0, 70px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}


/* ==============================
 フェードアップイン　X(-50%)
============================== */
.fadeUpSmallTrigger50 {
    opacity: 0;
}

.fedeup_small50 {
    animation-duration: .5s;
    animation-name: fadeInUp_small50;
    animation-fill-mode: both;
}

@keyframes fadeInUp_small50 {
    from {
        opacity: 0;
        -webkit-transform: translateX(-50%) translate3d(0, 70px, 0);
        transform: translateX(-50%) translate3d(0, 70px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(-50%) translate3d(0, 0, 0);
        transform: translateX(-50%) translate3d(0, 0, 0);
    }
}
/* ==============================
 フェードアップイン SP
============================== */
@media screen and (max-width: 768px) {

.fadeUpSmallTriggerSP {
    opacity: 0;
}

.fedeup_small_sp {
    animation-duration: .5s;
    animation-name: fadeInUp_small;
    animation-fill-mode: both;
}

@keyframes fadeInUp_small {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 70px, 0);
        transform: translate3d(0, 70px, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}
}
/* ==============================
 バウンドアップイン
============================== */

.bounceIn {
    animation: bounceIn 1s ease-out forwards;
}

.bounceTrigger {
    transform: translateY(70px);
    opacity: 0;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(70px);
    }

    60% {
        opacity: 1;
        transform: translateY(-20px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        /* ← これが必要！ */
        transform: translateY(0);
    }
}

/* ==============================
 バウンドアップイン　(-50%)
============================== */
.bounceInX50 {
    animation: bounceInX50 1s ease-out forwards;
}
.bounceTriggerX50 {
    transform: translateX(-50%) translateY(70px);
    opacity: 0;
}
@keyframes bounceInX50 {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(70px);
    }

    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(-20px);
    }

    80% {
        transform: translateX(-50%) translateY(10px);
    }

    100% {
        opacity: 1;
        /* ← これが必要！ */
        transform: translateX(-50%) translateY(0);
    }
}
/* ==== SP（768px以下）専用：上書き用 ==== */
@media screen and (max-width: 768px) {
    .bounceTriggerX50sp {
        /* transformを完全に上書き */
        transform: translateX(-50%) translateY(70px);
    }

    .bounceInX50sp {
        animation: bounceInX50sp 1s ease-out forwards;
    }
}

/* ==== SP用アニメーション（transform: X+Yで中央揃え） ==== */
@keyframes bounceInX50sp {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(70px);
    }

    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(-20px);
    }

    80% {
        transform: translateX(-50%) translateY(10px);
    }

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


  
/* ==============================
 バウンドアップイン　Y(-50%)
============================== */
.bounceTrigger50 {
    transform: translateY(calc(-50% + 70px));
    opacity: 0;
}

.bounceIn50 {
    animation: bounceIn50 1s ease-out forwards;
}

/* アニメーション本体 */
@keyframes bounceIn50 {
    0% {
        opacity: 0;
        transform: translateY(calc(-50% + 70px));
    }

    60% {
        opacity: 1;
        transform: translateY(calc(-50% - 20px));
    }

    80% {
        transform: translateY(calc(-50% + 10px));
    }

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

/* ==============================
 ズームイン
============================== */
.zoomInTrigger {
    opacity: 0;
}

/* アニメーション用クラス */
.zoomIn {
    animation: zoomIn 0.6s ease-out forwards;
}

.block_list:nth-child(2) h4 {
    animation-delay: 0.2s;
}

.block_list:nth-child(3) h4 {
    animation-delay: 0.4s;
}

.block_list:nth-child(4) h4 {
    animation-delay: 0.6s;
}

.block_list:nth-child(5) h4 {
    animation-delay: 0.8s;
}

.block_list:nth-child(6) h4 {
    animation-delay: 1s;
}

.block_list:nth-child(7) h4 {
    animation-delay: 1.2s;
}

.block_list:nth-child(8) h4 {
    animation-delay: 1.4s;
}

.block_list:nth-child(9) h4 {
    animation-delay: 1.6s;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
        /* ← 中央揃え＋縮小 */
    }

    100% {
        opacity: 1;
        transform: scale(1);
        /* ← 中央揃え＋拡大完了 */
    }
}
/* ==============================
 ズームイン　X(-50%)
============================== */
.zoomInTrigger50 {
    opacity: 0;
}

/* アニメーション用クラス */
.zoomIn50 {
    animation: zoomIn50 0.6s ease-out forwards;
}

@keyframes zoomIn50 {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.3);
        /* ← 中央揃え＋縮小 */
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        /* ← 中央揃え＋拡大完了 */
    }
}

/* ==============================
 カーテンを開くように表示
============================== */

.curtainMaskTextTrigger {
    display: inline-block;
    /* 画像の幅に合わせて調整 */
    mask-image: linear-gradient(to right, black 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 100%, transparent 100%);
    mask-size: 0% 100%;
    -webkit-mask-size: 0% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: left top;
    -webkit-mask-position: left top;
}
.curtain-mask-text {
    animation: curtain-reveal 1.5s ease-out forwards;
}
.curtain-mask-text img {
    display: block;
    width: 100%;
    height: auto;
}

/* アニメーション本体：マスクの横幅を広げていく */
@keyframes curtain-reveal {
    0% {
        mask-size: 0% 100%;
        -webkit-mask-size: 0% 100%;
    }

    100% {
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%;
    }
}

/* ==============================
 円から広がるように表示
============================== */
.info__bnr_list:first-child {
    width: 100%;
}

/* --- マスク対象となる内側ラッパー --- */
.circleClipTrigger {
    clip-path: circle(0% at 50% 40%);
    -webkit-clip-path: circle(0% at 50% 40%);
    will-change: clip-path;
    transform: translateZ(0);
    /* 描画遅延対策：超重要！ */
    transition: clip-path 0.3s ease;
}

/* --- アニメーション発火用クラス（JSで付与） --- */
.circleClipIn {
    animation: clipCircle 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
}
.circleClipIn.recruit__white_circle {
    animation-delay: 1.5s;
}
/* --- clip-path アニメーション定義 --- */
@keyframes clipCircle {
    0% {
        clip-path: circle(0% at 50% 40%);
        -webkit-clip-path: circle(0% at 50% 40%);
    }

    100% {
        clip-path: circle(100vmax at 50% 40%);
        -webkit-clip-path: circle(100vmax at 50% 40%);
    }
}

/* ==============================
 円から広がるように表示 X(-50%) SP
============================== */
@media screen and (max-width: 768px) {

/* --- マスク対象となる内側ラッパー --- */
.circleClipTrigger50Sp {
    clip-path: circle(0% at 50% 40%);
    -webkit-clip-path: circle(0% at 50% 40%);
    will-change: clip-path;
    transform: translateZ(0) translateX(-50%);
    /* 描画遅延対策：超重要！ */
    transition: clip-path 0.3s ease;
}

/* --- アニメーション発火用クラス（JSで付与） --- */
.circleClipIn {
    animation: clipCircle50Sp 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
}
.circleClipIn.recruit__white_circle {
    animation-delay: 1.5s;
}
/* --- clip-path アニメーション定義 --- */
@keyframes clipCircle50Sp {
    0% {
        clip-path: circle(0% at 50% 40%);
        -webkit-clip-path: circle(0% at 50% 40%);
    }

    100% {
        clip-path: circle(100vmax at 50% 40%);
        -webkit-clip-path: circle(100vmax at 50% 40%);
    }
}
}

/* ==============================
 フェードイン後、ゆらゆら無限ループ
============================== */
/* フェードイン後、ゆらゆら無限ループを連続再生 */
.yurayuraTrigger {
    opacity: 0;
}

.yurayura {
    animation: fadeInBnr 1s ease forwards, yryr 2s linear infinite;
    animation-delay: 1.2s, 2.2s;
    /* フェード後にゆらゆら開始 */
}

.yurayura-02 {
    animation-delay: 1.2s, 2.7s;
    /* フェード後にゆらゆら開始 */
}

.yurayura-03 {
    animation-delay: 1.2s, 3.2s;
    /* フェード後にゆらゆら開始 */
}

.yurayura-04 {
    animation-delay: 1.2s, 3.7s;
    /* フェード後にゆらゆら開始 */
}

@keyframes fadeInBnr {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes yryr {
    0% {
        transform: rotate(0deg);
    }

    4.15% {
        transform: rotate(-15deg);
    }

    8.3% {
        transform: rotate(15deg);
    }

    12.45% {
        transform: rotate(-15deg);
    }

    16.675% {
        transform: rotate(15deg);
    }

    20.825% {
        transform: rotate(-15deg);
    }

    25% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* ==============================
 カーテンが左から右にスライドイン
============================== */
.curtainMaskTrigger {
    display: inline-block;
    overflow: hidden;
}

.info__top_img.curtainMaskTrigger {
    position: absolute;
}

.curtainMaskTrigger::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #E33291;
    /* カーテン色 */
    z-index: 2;
    transition: transform 1s ease-out;
    transform: translateX(0);
    /* ← 初期は全体を覆う */
}

.info__top_img.curtainMaskTrigger::before {
    background-color: #C7E556;
    /* カーテン色 */
}

.curtainMaskTrigger.curtain-mask-in::before {
    transform: translateX(100%);
    /* ← 左から右にスライドアウト */
}

/* ==============================
 フェードダウンイン
============================== */
.block_list ,
.data_list,
.culture_add_list,
.work_circle_list,
.page_member_list,
.career-feature-card,
.training-program__item {
    opacity: 0;
    transform: translateY(-100px); /* ← 上から下に来る印象 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
  }
.profile_area .page_member_list {
    opacity: 1;
    transform: translateY(0); /* ← 上から下に来る印象 */
}
.requirements-list .page_member_list {
    opacity: 1;
    transform: translateY(0); /* ← 上から下に来る印象 */
}
  .fadeDown1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .fadeDown2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
  }
  .fadeDown3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
  }
  .fadeDown4 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.6s;
  }
  .fadeDown5 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
  }
  .fadeDown6 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
  }
  .fadeDown7 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.2s;
  }
  .fadeDown8 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.4s;
  }
  .fadeDown9 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.6s;
  }
  @media screen and (max-width: 768px) {   
  .sp_none50 { 
    animation: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: translateX(-50%) !important;
  }
}






/* ========================================
 MVアニメーション
======================================== */

/* ===== キャッチコピー（初期は非表示） ===== */
.catch-text {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-duration: 1.2s;
}

.catch-text.left {
  animation-name: slideInLeft;
  animation-delay: 0.1s;
}

.catch-text.right {
  animation-name: slideInRight;
  animation-delay: 0.3s;
}
/* ===============================
  人物（遅延表示＋残る）
================================ */
.person {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  animation-duration: 1.5s;
}

.person.left-running {
  animation-name: personInLeft;
  animation-delay: 1.5s;
}

.person.center-standing {
  animation-name: personInScale;
  animation-delay: 1.7s;
}

.person.center-cheering {
  animation-name: personInJump;
  animation-delay: 1.9s;
}

.person.right-running {
  animation-name: personInRight;
  animation-delay: 2.1s;
}

/* ===============================
  カラーパーツ
================================ */
.bg-shape.blue-cross {
  animation: rotateIn 1s ease-out 0.1s forwards;
}

.bg-shape.yellow-diagonal {
  animation: slideDown 1.4s ease-out 0.2s forwards;
}

.bg-shape.green-circle {
  animation: scalePulse 2s ease-in-out infinite;
}

.bg-shape.red-bar {
  animation: slideInLeft 1.3s ease-out 0.2s forwards;
}

.bg-shape.teal-bar {
  animation: slideInRight 1.3s ease-out 0.3s forwards;
}

.bg-shape.orange-diagonal {
  animation: rotateIn 1s ease-out 0.3s forwards;
}

/* ===============================
  背景写真
================================ */
.bg-photo.child-top {
  animation: fadeIn 2s ease-out 0.5s forwards;
}

.bg-photo.baby-bottom {
  animation: fadeIn 2s ease-out 0.8s forwards;
}

/* ===============================
  ロゴ
================================ */
.logo.efila {
  animation: popIn 1.5s ease-out 1s forwards;
}

/* ===============================
  keyframes
================================ */

/* --- キャッチコピー・背景共通 --- */
@keyframes slideInLeft {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

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

@keyframes rotateIn {
  0% { transform: rotate(-180deg); opacity: 0; }
  100% { transform: rotate(0deg); opacity: 1; }
}

@keyframes slideDown {
  0% { transform: translateY(-100px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes scalePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

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

@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- 人物専用（フェード＋動き） --- */
@keyframes personInLeft {
  0% { opacity: 0; transform: translateX(-80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes personInRight {
  0% { opacity: 0; transform: translateX(80px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes personInScale {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes personInJump {
  0%   { opacity: 0; transform: translateY(60px); }
  60%  { opacity: 1; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); } /
}