:root {
    --animation-duration: 0.8s;
    --animation-distance: 20px; /* 40px→20pxに半減 */
    --animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --animation-stagger: 0.1s;
}

[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: var(--animation-duration);
    transition-timing-function: var(--animation-easing);
}

[data-aos].aos-animate {
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(var(--animation-distance));
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-down"] {
    transform: translateY(calc(var(--animation-distance) * -1));
}

[data-aos="fade-down"].aos-animate {
    transform: translateY(0);
}

[data-aos="fade-left"] {
    transform: translateX(var(--animation-distance));
}

[data-aos="fade-left"].aos-animate {
    transform: translateX(0);
}

[data-aos="fade-right"] {
    transform: translateX(calc(var(--animation-distance) * -1));
}

[data-aos="fade-right"].aos-animate {
    transform: translateX(0);
}

[data-aos="zoom-in"] {
    transform: scale(0.9);
}

[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}

[data-aos="zoom-out"] {
    transform: scale(1.1);
}

[data-aos="zoom-out"].aos-animate {
    transform: scale(1);
}

[data-aos="slide-up"] {
    transform: translateY(100px);
}

[data-aos="slide-up"].aos-animate {
    transform: translateY(0);
}

[data-aos="flip-up"] {
    transform: perspective(2000px) rotateX(-20deg);
}

[data-aos="flip-up"].aos-animate {
    transform: perspective(2000px) rotateX(0);
}

[data-aos="flip-down"] {
    transform: perspective(2000px) rotateX(20deg);
}

[data-aos="flip-down"].aos-animate {
    transform: perspective(2000px) rotateX(0);
}

[data-aos="flip-left"] {
    transform: perspective(2000px) rotateY(20deg);
}

[data-aos="flip-left"].aos-animate {
    transform: perspective(2000px) rotateY(0);
}

[data-aos="flip-right"] {
    transform: perspective(2000px) rotateY(-20deg);
}

[data-aos="flip-right"].aos-animate {
    transform: perspective(2000px) rotateY(0);
}

.parallax-element {
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.reveal-text {
    overflow: hidden;
}

.reveal-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.reveal-text.revealed span {
    opacity: 1;
    transform: translateY(0);
}

.stagger-animation > * {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s var(--animation-easing);
}

.stagger-animation.animated > * {
    opacity: 1;
    transform: translateY(0);
}

.stagger-animation.animated > *:nth-child(1) { transition-delay: calc(var(--animation-stagger) * 0); }
.stagger-animation.animated > *:nth-child(2) { transition-delay: calc(var(--animation-stagger) * 1); }
.stagger-animation.animated > *:nth-child(3) { transition-delay: calc(var(--animation-stagger) * 2); }
.stagger-animation.animated > *:nth-child(4) { transition-delay: calc(var(--animation-stagger) * 3); }
.stagger-animation.animated > *:nth-child(5) { transition-delay: calc(var(--animation-stagger) * 4); }
.stagger-animation.animated > *:nth-child(6) { transition-delay: calc(var(--animation-stagger) * 5); }
.stagger-animation.animated > *:nth-child(7) { transition-delay: calc(var(--animation-stagger) * 6); }
.stagger-animation.animated > *:nth-child(8) { transition-delay: calc(var(--animation-stagger) * 7); }
.stagger-animation.animated > *:nth-child(9) { transition-delay: calc(var(--animation-stagger) * 8); }
.stagger-animation.animated > *:nth-child(10) { transition-delay: calc(var(--animation-stagger) * 9); }

.line-animation {
    position: relative;
    overflow: hidden;
}

.line-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #0056b3);
    transition: width 1.2s var(--animation-easing);
}

.line-animation.animated::before {
    width: 100%;
}

.scale-hover {
    transition: transform 0.3s ease;
}

.scale-hover:hover {
    transform: scale(1.05);
}

.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card-3d:hover {
    transform: rotateY(10deg) rotateX(-10deg);
}

.blur-in {
    filter: blur(5px);
    opacity: 0;
    transition: filter 0.8s, opacity 0.8s;
}

.blur-in.animated {
    filter: blur(0);
    opacity: 1;
}

.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.counter-animation {
    opacity: 0;
}

.counter-animation.animated {
    opacity: 1;
}

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: currentColor; }
}

.wave-animation {
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    75% { transform: translateY(10px); }
}

.pulse-animation {
    animation: pulse 2s infinite;
}

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

.shake-animation:hover {
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@media (max-width: 768px) {
    :root {
        --animation-distance: 10px; /* 20px→10pxに半減 */
        --animation-duration: 0.6s;
    }
    
    .card-3d:hover {
        transform: none;
    }
}
    
    .card-3d:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}/**
 * スクロールアニメーション統合システム
 * 分かりやすく応用しやすいクラス設計
 */

/* =================================
   基本アニメーション
   ================================= */

/* セクション全体のフェードイン */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animate-on-scroll.show {
    opacity: 1;
    transform: translateY(0);
}

/* =================================
   テキストアニメーション
   ================================= */

/* 文字を1文字ずつ表示 */
.text-split-chars {
    overflow: hidden;
    position: relative;
}

.text-split-chars .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.text-split-chars.show .char {
    opacity: 1;
    transform: translateY(0);
}

/* タイトル専用の3Dアニメーション */
.title-3d-flip {
    position: relative;
    overflow: hidden;
}

.title-3d-flip .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%) rotateX(90deg);
    transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: bottom;
}

.title-3d-flip.show .char {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* 通常テキストのフェードイン */
.text-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.text-fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* =================================
   カードアニメーション
   ================================= */

/* 基本カードアニメーション */
.card-fade-up {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-fade-up.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Card Fade Up 動的値対応 */
[class*="card-fade-up-"] {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

[class*="card-fade-up-"].show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 会社カード専用 */
.company-card-3d {
    opacity: 0;
    transform: translateY(60px) rotateY(-10deg);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.company-card-3d.show {
    opacity: 1;
    transform: translateY(0) rotateY(0deg);
}

/* 求人カード専用 */
.job-card-tilt {
    opacity: 0;
    transform: translateY(40px) rotateX(15deg);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.job-card-tilt.show {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* 社員カード専用 */
.employee-card-scale {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.employee-card-scale.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =================================
   段階表示（グループアニメーション）
   ================================= */

/* グループ内で順番に表示 */
.stagger-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.stagger-item.show {
    opacity: 1;
    transform: translateY(0);
}

/* 遅延クラス */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
.delay-7 { transition-delay: 0.7s; }
.delay-8 { transition-delay: 0.8s; }
.delay-9 { transition-delay: 0.9s; }
.delay-10 { transition-delay: 1.0s; }

/* =================================
   方向別スライドアニメーション
   ================================= */

/* 左からスライド */
.slide-from-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-from-left.show {
    opacity: 1;
    transform: translateX(0);
}

/* 右からスライド */
.slide-from-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-from-right.show {
    opacity: 1;
    transform: translateX(0);
}

/* 下からスライド */
.slide-from-bottom {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-from-bottom.show {
    opacity: 1;
    transform: translateY(0);
}

/* 上からスライド */
.slide-from-top {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-from-top.show {
    opacity: 1;
    transform: translateY(0);
}

/* =================================
   特殊効果
   ================================= */

/* ブラー効果 + フェード */
.blur-fade {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.blur-fade.show {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* 回転効果 */
.rotate-fade {
    opacity: 0;
    transform: rotate(-5deg) scale(0.9);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.rotate-fade.show {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* スケール効果 */
.scale-fade {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.scale-fade.show {
    opacity: 1;
    transform: scale(1);
}

/* 波紋効果 */
.ripple-effect {
    opacity: 0;
    transform: scale(0.3);
    transition: all 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ripple-effect.show {
    opacity: 1;
    transform: scale(1);
}

/* =================================
   ボタン・UI要素専用
   ================================= */

/* ボタンアニメーション */
.button-bounce {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.button-bounce.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ライン描画効果 */
.draw-line {
    position: relative;
    overflow: hidden;
}

.draw-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.draw-line.show::after {
    width: 100%;
}

/* =================================
   数値カウンター
   ================================= */

.number-counter {
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
    transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.number-counter.show {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* =================================
   レスポンシブ・アクセシビリティ
   ================================= */

/* アクセシビリティ対応（アニメーション無効化） */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .text-split-chars .char,
    .title-3d-flip .char,
    .text-fade-up,
    .card-fade-up,
    .company-card-3d,
    .job-card-tilt,
    .employee-card-scale,
    .stagger-item,
    .slide-from-left,
    .slide-from-right,
    .slide-from-bottom,
    .slide-from-top,
    .blur-fade,
    .rotate-fade,
    .scale-fade,
    .ripple-effect,
    .button-bounce,
    .number-counter {
        transition: none;
        transform: none;
        opacity: 1;
        filter: none;
    }
    
    .draw-line::after {
        transition: none;
        width: 100%;
    }
}

/* =================================
   レスポンシブフォントサイズ
   ================================= */

/* 会社名のレスポンシブフォント */
.company-name-responsive {
    font-size: clamp(0.75rem, 2.2vw, 1rem) !important;
    line-height: 1.2 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
}

/* カード内の会社名 */
.company-name {
    font-size: clamp(1rem, 3vw, 1.4rem) !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* モバイル対応 */
@media (max-width: 576px) {
    .company-name-responsive {
        font-size: clamp(0.65rem, 4vw, 0.9rem) !important;
    }
    
    .company-name {
        font-size: clamp(0.9rem, 5vw, 1.2rem) !important;
    }
}

/* パフォーマンス最適化 */
.animate-on-scroll,
.text-split-chars .char,
.title-3d-flip .char,
.text-fade-up,
.card-fade-up,
.company-card-3d,
.job-card-tilt,
.employee-card-scale,
.stagger-item,
.slide-from-left,
.slide-from-right,
.slide-from-bottom,
.slide-from-top,
.blur-fade,
.rotate-fade,
.scale-fade,
.ripple-effect,
.button-bounce,
.number-counter {
    will-change: opacity, transform;
}

/* アニメーション完了後のクリーンアップ */
.show {
    will-change: auto;
}

/* =================================
   デバッグ用（開発時のみ使用）
   ================================= */

/* .debug-animations * {
    outline: 1px solid rgba(255, 0, 0, 0.3) !important;
} */@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-item {
    opacity: 0;
}

.animate-item.show {
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: forwards;
}

.fade-in-up {
    animation-name: fadeInUp;
}

.fade-in-left {
    animation-name: fadeInLeft;
}

.fade-in-right {
    animation-name: fadeInRight;
}

.fade-in {
    animation-name: fadeIn;
}

.scale-in {
    animation-name: scaleIn;
}

.animation-delay-100 {
    animation-delay: 0.1s;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

.animation-delay-500 {
    animation-delay: 0.5s;
}

.animation-delay-600 {
    animation-delay: 0.6s;
}







@media (max-width: 768px) {
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
}/* 会社カード用のゆっくりとした順番アニメーション */
.company-card-wrapper {
    opacity: 0;
    transform: translateY(40px);
}

.company-card-wrapper[data-aos="fade-up"] {
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.company-card-wrapper.aos-animate {
    opacity: 1;
    transform: translateY(0);
}

/* 会社カードの遅延設定（400msずつ） */
.company-card-wrapper[data-aos-delay="0"] {
    transition-delay: 0ms;
}

.company-card-wrapper[data-aos-delay="400"] {
    transition-delay: 400ms;
}

.company-card-wrapper[data-aos-delay="800"] {
    transition-delay: 800ms;
}

/* 求人カード用の高速連続アニメーション */
.job-card-wrapper {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
}

.job-card-wrapper[data-aos="zoom-in-up"] {
    transition: opacity 0.3s ease-out,
                transform 0.3s ease-out;
}

.job-card-wrapper.aos-animate {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* 求人カードの高速遅延設定（50msずつ） */
.job-card-wrapper[data-aos-delay="0"] {
    transition-delay: 0ms;
}

.job-card-wrapper[data-aos-delay="50"] {
    transition-delay: 50ms;
}

.job-card-wrapper[data-aos-delay="100"] {
    transition-delay: 100ms;
}

.job-card-wrapper[data-aos-delay="150"] {
    transition-delay: 150ms;
}

.job-card-wrapper[data-aos-delay="200"] {
    transition-delay: 200ms;
}

.job-card-wrapper[data-aos-delay="250"] {
    transition-delay: 250ms;
}

.job-card-wrapper[data-aos-delay="300"] {
    transition-delay: 300ms;
}

.job-card-wrapper[data-aos-delay="350"] {
    transition-delay: 350ms;
}

.job-card-wrapper[data-aos-delay="400"] {
    transition-delay: 400ms;
}

.job-card-wrapper[data-aos-delay="450"] {
    transition-delay: 450ms;
}

/* パッパッパッと表示される効果を強調 */
@keyframes quickPop {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    80% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.job-card-wrapper.quick-pop {
    animation: quickPop 0.25s ease-out forwards;
}

/* 会社カードのホバー効果を改善 */
.company-card-wrapper:hover .company-card {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 求人カードのホバー効果を改善 */
.job-card-wrapper:hover .job-card {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* 新しい求人カード連続アニメーション */
.job-card-wrapper.job-card-animate {
    animation: quickPop 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* アニメーション後のホバー効果改良 */
.job-card-wrapper.job-card-animate:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15) !important;
}