/* ===============================
   Scroll Fade-In Animation Styles
   採用セクション・フッターの仕様を全体に統一
   =============================== */

/* 初期状態（非表示）- 採用セクション・フッター仕様を統一 */
[data-ani],
.fade-up,
.fade-in,
h1,
h2,
h3,
h4,
h5,
h6,
p,
.lead,
.section-title,
img,
.btn,
.button,
.card,
ul,
ol,
li,
hr,
.separator,
.section,
.recruitHero,
.service-section,
.highlight-section,
.works-section,
.message-section,
.footer-section,
.service-card,
.service-card__image,
.service-card__cta,
.highlight-card,
.highlight-card__image,
.works-card,
.works-card__image,
.footer-heading,
.footer-links,
.footer-contact__btn,
.sf-card,
.sf-acc__item,
.sf-sep {
    opacity: 0;
    transform: translateY(20px);
    /* 採用セクション・フッターと同じ仕様 */
    transition: opacity 0.8s ease, transform 0.8s ease;
    /* 採用セクション・フッターと同じ仕様 */
    will-change: opacity, transform;
}

/* 表示状態（フェードイン）- 採用セクション・フッター仕様を統一 */
[data-ani].is-inview,
.fade-up.is-inview,
.fade-in.is-inview,
h1.is-inview,
h2.is-inview,
h3.is-inview,
h4.is-inview,
h5.is-inview,
h6.is-inview,
p.is-inview,
.lead.is-inview,
.section-title.is-inview,
img.is-inview,
.btn.is-inview,
.button.is-inview,
.card.is-inview,
ul.is-inview,
ol.is-inview,
li.is-inview,
hr.is-inview,
.separator.is-inview,
.section.is-inview,
.recruitHero.is-inview,
.service-section.is-inview,
.highlight-section.is-inview,
.works-section.is-inview,
.message-section.is-inview,
.footer-section.is-inview,
.service-card.is-inview,
.service-card__image.is-inview,
.service-card__cta.is-inview,
.highlight-card.is-inview,
.highlight-card__image.is-inview,
.works-card.is-inview,
.works-card__image.is-inview,
.footer-heading.is-inview,
.footer-links.is-inview,
.footer-contact__btn.is-inview,
.sf-card.is-inview,
.sf-acc__item.is-inview,
.sf-sep.is-inview {
    opacity: 1;
    transform: translateY(0);
}

/* フェードアップ系にカスタム遅延を適用 */
[data-ani-delay] {
    transition-delay: var(--ani-delay-custom, 0s);
}

/* 滑らかなスクロール補助（既存に干渉しない） */
html {
    scroll-behavior: smooth;
}

/* スクロールバーを非表示 */
html,
body {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* ===============================
   レスポンシブ対応アニメーション
   =============================== */

/* スマホ・タブレット（300〜1000px）でのアニメーション調整 - 1001px以上と同様に全セクションに適用 */
@media screen and (min-width: 300px) and (max-width: 1000px) {

    /* 初期状態（非表示）- 1001px以上と同じ要素に適用 */
    /* !important を追加して他のCSSを上書き */
    [data-ani]:not(.is-inview),
    .fade-up:not(.is-inview),
    .fade-in:not(.is-inview),
    h1:not(.is-inview),
    h2:not(.is-inview),
    h3:not(.is-inview),
    h4:not(.is-inview),
    h5:not(.is-inview),
    h6:not(.is-inview),
    p:not(.is-inview),
    .lead:not(.is-inview),
    .section-title:not(.is-inview),
    img:not(.is-inview),
    .btn:not(.is-inview),
    .button:not(.is-inview),
    .card:not(.is-inview),
    ul:not(.is-inview),
    ol:not(.is-inview),
    li:not(.is-inview),
    hr:not(.is-inview),
    .separator:not(.is-inview),
    .section:not(.is-inview),
    section:not(.is-inview),
    .hero:not(.is-inview),
    .challenge:not(.is-inview),
    .manifesto:not(.is-inview),
    .recruitHero:not(.is-inview),
    .service-section:not(.is-inview),
    .highlight-section:not(.is-inview),
    .works-section:not(.is-inview),
    .message-section:not(.is-inview),
    .footer-section:not(.is-inview),
    .service-card:not(.is-inview),
    .service-card__image:not(.is-inview),
    .service-card__cta:not(.is-inview),
    .highlight-card:not(.is-inview),
    .highlight-card__image:not(.is-inview),
    .works-card:not(.is-inview),
    .works-card__image:not(.is-inview),
    .footer-heading:not(.is-inview),
    .footer-links:not(.is-inview),
    .footer-contact__btn:not(.is-inview),
    .sf-card:not(.is-inview),
    .sf-acc__item:not(.is-inview),
    .sf-sep:not(.is-inview) {
        opacity: 0 !important;
        transform: translateY(20px) !important;
        /* 採用セクション・フッターと同じ仕様 */
        transition: opacity 1.0s ease, transform 1.0s ease !important;
        /* 採用セクション・フッターと同じ仕様 */
        will-change: opacity, transform !important;
    }

    /* 表示状態（フェードイン）- 300〜1000px専用の速度設定 */
    /* 300〜1000px専用のtransition速度（1.0s ease）を明示的に設定 */
    [data-ani].is-inview,
    .fade-up.is-inview,
    .fade-in.is-inview,
    h1.is-inview,
    h2.is-inview,
    h3.is-inview,
    h4.is-inview,
    h5.is-inview,
    h6.is-inview,
    p.is-inview,
    .lead.is-inview,
    .section-title.is-inview,
    img.is-inview,
    .btn.is-inview,
    .button.is-inview,
    .card.is-inview,
    ul.is-inview,
    ol.is-inview,
    li.is-inview,
    hr.is-inview,
    .separator.is-inview,
    .section.is-inview,
    section.is-inview,
    .hero.is-inview,
    .challenge.is-inview,
    .manifesto.is-inview,
    .recruitHero.is-inview,
    .service-section.is-inview,
    .highlight-section.is-inview,
    .works-section.is-inview,
    .message-section.is-inview,
    .footer-section.is-inview,
    .service-card.is-inview,
    .service-card__image.is-inview,
    .service-card__cta.is-inview,
    .highlight-card.is-inview,
    .highlight-card__image.is-inview,
    .works-card.is-inview,
    .works-card__image.is-inview,
    .footer-heading.is-inview,
    .footer-links.is-inview,
    .footer-contact__btn.is-inview,
    .sf-card.is-inview,
    .sf-acc__item.is-inview,
    .sf-sep.is-inview {
        opacity: 1 !important;
        transform: translateY(0) !important;
        /* 300〜1000px専用のtransition速度（1.0s ease）を明示的に設定 */
        transition: opacity 1.0s ease, transform 1.0s ease !important;
    }
}

/* PC（1001px以上）でのアニメーション - 採用セクション・フッター仕様に統一 */
@media (min-width: 1001px) {

    [data-ani],
    .fade-up,
    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        /* 採用セクション・フッターと同じ仕様 */
        transition: opacity 0.6s ease, transform 0.6s ease;
        /* 採用セクション・フッターと同じ仕様 */
        will-change: opacity, transform;
    }

    [data-ani].is-inview,
    .fade-up.is-inview,
    .fade-in.is-inview {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   採用セクション・フッター仕様で統一完了
   個別の要素仕様は削除（上記の統一仕様を使用）
   =============================== */