body{
    background-color: #efefef;
}
.fv{
    .container{
        margin-left: auto;
        margin-right: auto;
        position: relative;
    }
    .fv-swiper {
        width: 100%;
      }
      
      .fv-swiper .swiper-slide {
        text-align: center;
        position: relative;
      }
      .fv-swiper .slide-bg{
        width: 100%;
      }
      .fv-swiper img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      }
      /* 初期状態は透明・下にずれてる */
       /* 初期スタイルは不要。アニメだけ適用 */
    @keyframes fadeUp {
        0% {
        opacity: 0;
        transform: translateY(20px);
        }
        100% {
        opacity: 1;
        transform: translateY(0);
        }
    }
    
    .fade-up-img {
        animation: fadeUp 0.8s ease forwards;
    }
    .layer-items{
        background: linear-gradient(135deg, rgba(251, 227, 246, 0.6), rgba(207, 230, 210, 0.4), rgb(245, 204, 224));
        background-size: 200% 200%;
        animation: gradient-move 8s ease infinite;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99;
        color: var(--base-white-color);
        max-width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .title{
            font-size: clamp(24px,6vw,60px);
            padding-left: clamp(10px ,2vw, 30px);
            padding-right: clamp(10px ,2vw, 30px);
        }
    }
    .image-area{
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(255,255,255,0.4);
        border-radius: clamp(10px,2vw,20px);
        padding-top: clamp(10px,2vw,20px);
        padding-bottom: clamp(10px,2vw,20px);
        img{
            width: 80%;
            max-width: 200px;
            margin-left: auto;
            margin-right: auto;
        }
    }
    @media screen and (max-width: 768px) {
        .image-area{
            img{
                max-width: 150px;
            }
    }
}
    @media screen and (max-width: 480px) {
        .image-area{
            img{
                max-width: 80px;
            }
    }
    }
    .title-area{
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: center;
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        .title{
            font-size: clamp(22px,4vw,44px);
            font-family: "Noto Sans JP", sans-serif;
            color: var(--base-white-color);
            letter-spacing: clamp(4px,1vw,10px);
            line-height: 1.8;
            font-weight: 900;
        }
        .text-gray-layer-02 {
            color: rgba(255, 255, 255, 0.3);
        }
        .text-gray-layer-02::after {
            color: var(--base-white-color);
        }
        .text-gray-layer {
            transition: clip-path 1.4s cubic-bezier(0.43, 0.05, 0.17, 1);
        }
        .text-gray-layer::after {
            transition: clip-path 1.4s cubic-bezier(0.43, 0.05, 0.17, 1);
            transition-delay: 0.8s;
        }
    }
    
}
@keyframes gradient-move {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.about-section-02{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    background-color: var(--base-white-color);
    .container{
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(20px,3vw, 60px);
        padding-bottom: clamp(20px,6vw, 60px);
    }
    .title-area{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        letter-spacing: clamp(2px,0.4vw,6px);
        .title{
            font-size: clamp(20px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            font-family: "Noto Serif JP", serif;
            text-align: center;
            &::before{
                content:"MISSION";
                display: block;
                text-align: center;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: #f6f5f5;
        font-family: "Noto Serif JP", serif;
        background-size: cover;
        margin-bottom: clamp(20px,4vw,40px);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        .contents-container{
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
            padding-top: clamp(20px,4.5vw,45px);
            padding-bottom: clamp(20px,4.5vw,45px);
        }
         @media screen and (max-width: 480px) {
            .contents-container{
            max-width: 90%;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
            padding-top: clamp(20px,4.5vw,45px);
            padding-bottom: clamp(20px,4.5vw,45px);
        }
         }
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            padding-top: clamp(20px,4.5vw, 45px);
            padding-bottom: clamp(10px,2vw, 20px);
            margin: 0;
            margin-left: auto;
            margin-right: auto;
             .flex-items{
            display: flex;
            flex-direction: column;
            gap: clamp(30px,5vw,50px);
            }
            .flex-items{
            display: flex;
            flex-direction: row-reverse;
            gap: clamp(30px,5vw,50px);
            }
            .flex-item-01{
                width: 30%;
                img{
                    max-width: 100%;
                }
            }
            .flex-item-02{
                width: 70%;
            }
            @media screen and (max-width: 764px) {
            .flex-items{
            display: flex;
            flex-direction: column;
            gap: clamp(30px,5vw,50px);
            }
            .flex-item-01{
                width: 100%;
                img{
                    max-width: 100%;
                }
            }
            .flex-item-02{
                width: 100%;
            }
         }
            figure{
                margin-bottom: clamp(20px,3vw,30px);
                img{
                    border-radius:clamp(5px,1vw,10px);
                }
            }
            p{
                font-size: clamp(14px,1.8vw,18px);
                margin-bottom: clamp(15px,3vw,30px);
                line-height: 2.2;
            }
        }
    }
    .answer-area{
                background-color: #f6f5f5;
                padding: clamp(20px, 4.5vw, 45px) clamp(10px,1.5vw,15px);
                max-width: 1000px;
                margin-left: auto;
                margin-right: auto;
                .answer-container{
                    max-width:80%;
                    margin-left: auto;
                    margin-right: auto;
                }
                @media screen and (max-width: 480px) {
                   .answer-container{
                    max-width:90%;
                } 
                }
                p{
                    font-size: clamp(14px, 1.8vw, 18px);
                    line-height: 2;
                    margin-bottom: 0;
                }
            }
}
.about-section-02-01{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    background-color: #f6f5f5;
    .container{
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(30px,6vw, 60px);
        padding-bottom: clamp(10px,2vw, 20px);
    }
    .title-area{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        letter-spacing: clamp(2px,0.4vw,6px);
        .title{
            font-size: clamp(32px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            font-family: "Noto Serif JP", serif;
            text-align: center;
            &::before{
                content:"SUPPORT";
                display: block;
                text-align: center;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        font-family: "Noto Serif JP", serif;
        background-size: cover;
        margin-bottom: clamp(20px,4vw,40px);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        .contents-container{
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
            padding-top: clamp(20px,3vw,30px);
        }
        @media screen and (max-width: 480px) {
            .contents-container{
            max-width: 90%;
        }
        }
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            padding-top: clamp(20px,4.5vw, 45px);
            padding-bottom: clamp(20px,4.5vw, 45px);
            margin: 0;
            margin-left: auto;
            margin-right: auto;
            
            
            p{
                font-size: clamp(14px,1.8vw,18px);
                margin-bottom: clamp(10px,2vw,20px);
            }
            
        }
    }
}
.about-section-02-02{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    background-color: #f6f5f5;
    .container{
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(20px,3vw, 30px);
        padding-bottom: clamp(10px,2vw, 20px);
    }
    .title-area{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        letter-spacing: clamp(2px,0.4vw,6px);
        .title{
            font-size: clamp(32px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            font-family: "Noto Serif JP", serif;
            text-align: center;
            &::before{
                content:"";
                display: block;
                text-align: center;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
       background-color: #f6f5f5;
        font-family: "Noto Serif JP", serif;
        background-size: cover;
        margin-bottom: clamp(20px,4vw,40px);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        .contents-container{
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
        }
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            padding-bottom: clamp(20px,4.5vw, 45px);
            margin: 0;
            margin-left: auto;
            margin-right: auto;
            .flex-items{
            display: flex;
            flex-direction: row-reverse;
            gap: clamp(30px,5vw,50px);
            align-items: flex-start;
            }
            .flex-items:nth-child(2){
                flex-direction: row;
            }
            .flex-item-01{
                width: 35%;
                img{
                    max-width: 100%;
                }
            }
            .flex-item-02{
                width: 65%;
                padding-top: clamp(20px,4.5vw, 45px);
            }
            @media screen and (max-width: 764px) {
            .flex-items{
            display: flex;
            flex-direction: column;
            gap: clamp(30px,5vw,50px);
            }
            .flex-items:nth-child(2){
                display: flex;
                flex-direction: column;
                gap: clamp(30px,5vw,50px);
            }
            .flex-item-01{
                width: 100%;
                img{
                    max-width: 100%;
                }
            }
            .flex-item-02{
                width: 100%;
            }
         }
            figure{
                margin-bottom: clamp(20px,3vw,30px);
                img{
                    border-radius:clamp(5px,1vw,10px);
                }
            }
            p{
                font-size: clamp(14px,1.6vw,16px);
                margin-bottom: clamp(15px,3vw,30px);
                line-height: 2;
            }
            .bottom-area{
                background-color: var(--base-white-color);
                padding: clamp(20px,4.5vw,45px) clamp(10px,1.5vw,15px);
                .bottom-area-container{
                    max-width: 80%;
                    margin-left: auto;
                    margin-right: auto;
                }
                @media screen and (max-width: 480px) {
                   .bottom-area-container{
                    max-width: 90%;
                } 
                }
                p{
                    font-size: clamp(14px, 1.8vw, 18px);
                    line-height: 2;
                    margin-bottom: 0;
                }
            }
            
        }
    }
}
.about-section-02-03{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    background-color: var(--base-white-color);
    .container{
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(30px,6vw, 60px);
        padding-bottom: clamp(30px,6vw, 60px);
    }
    .title-area{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: clamp(20px,5vw,45px);
        letter-spacing: clamp(2px,0.4vw,6px);
        .title{
            font-size: clamp(32px,4vw,40px);
            letter-spacing: clamp(2px,0.5vw,6px);
            color: var(--base-black-color);
            line-height: 1.8;
            font-family: "Noto Serif JP", serif;
            text-align: center;
            &::before{
                content:"ACTIVE LEARNING";
                display: block;
                text-align: center;
                font-size: clamp(16px,2vw,22px);
                letter-spacing: clamp(1px,0.25vw,4px);
                color: var(--base-black-color);
            }
        }
    }
    .contents-area{
        background-color: var(--base-white-color);
        font-family: "Noto Serif JP", serif;
        background-size: cover;
        margin-bottom: clamp(20px,4vw,40px);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        .contents-container{
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
            height: 100%;
            padding-top: clamp(20px,3vw,30px);
        }
        @media screen and (max-width: 480px) {
           .contents-container{
            max-width: 90%;
        } 
        }
        .contents-lists{
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            gap: clamp(15px,3vw,30px);
        }
        .contents-list{
            padding-top: clamp(20px,4.5vw, 45px);
            padding-bottom: clamp(20px,4.5vw, 45px);
            margin: 0;
            margin-left: auto;
            margin-right: auto;
             .flex-items{
            display: flex;
            flex-direction: column;
            gap: clamp(30px,5vw,50px);
            }
            .flex-items{
            display: flex;
            flex-direction: row-reverse;
            gap: clamp(30px,5vw,50px);
            }
            .flex-item-01{
                width: 30%;
                img{
                    max-width: 100%;
                }
            }
            .flex-item-02{
                width: 70%;
            }
            @media screen and (max-width: 764px) {
            .flex-items{
            display: flex;
            flex-direction: column;
            gap: clamp(30px,5vw,50px);
            }
            .flex-item-01{
                width: 100%;
                img{
                    max-width: 100%;
                }
            }
            .flex-item-02{
                width: 100%;
            }
         }

            p{
                font-size: clamp(14px,1.8vw,18px);
                margin-bottom: clamp(10px,2vw,20px);
            }
            
            
        }
    }
    .bottom-area{
                background-color: #f6f5f5;
                padding: clamp(20px, 4.5vw, 45px) clamp(10px, 1.5vw, 15px);
                max-width: 1000px;
                margin-left: auto;
                margin-right: auto;
                .bottom-area-container{
                     max-width: 80%;
                margin-left: auto;
                margin-right: auto;
                }
                @media screen and (max-width: 480px) {
                   .bottom-area-container{
                     max-width: 90%;
                } 
                }
                .grad-title-area{
                    justify-content: center;
                }
                .bottom-area-catch-copy{
                    font-size: clamp(16px,3.6vw,36px);
                    line-height: 2;
                    margin-bottom: 0;
                    font-family: serif;
                    text-align: center;
                }
            }
}
@keyframes contents-gradient-move {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
.about-section-mission{
    .title-area{
        .title{
            &::before{
                content:"Top Tier Ticket";
            }
        }
    }
    .contents-area{

        .contents-bg-mask{
        }
    }
}
.cta-area{
    padding-left: var(--container-padding-left-right);
    padding-right: var(--container-padding-left-right);
    background-color: var(--base-white-color);
    .container{
        max-width: var(--container-size);
        margin-left: auto;
        margin-right: auto;
        padding-top: clamp(30px,6vw, 60px);
        padding-bottom: clamp(30px,6vw, 60px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .description-area{
        margin-bottom: clamp(20px,3vw, 30px);
    }
}
.grad-title-area{
        display: flex;
        gap: clamp(5px,1vw,10px);
        align-items: center;
        margin-bottom: clamp(10px,2vw,20px);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        .grad-area{
            width: 40px;
            height: 20px;
            background: linear-gradient(135deg, rgba(255, 0, 191, 0.6), rgba(144, 245, 154, 0.4), rgba(4, 202, 255, 1));
            background-size: 200% 200%;
            animation: contents-gradient-move 2s ease-in-out infinite;
            border-radius: clamp(2px,0.4vw,4px) ;
        }
        .grad-title{
            font-size: clamp(12px,1.4vw,16px);
            margin: 0;
        }
    }