@charset "utf-8";
:root{
    --white: #ffffff;
    --black: #241613;
    --red-card: #BD3220;
    --gray-usui: #F9F9F9;
    --beige-matsuru: #E4CEBF;
    --gray-matsuru: #DED9D1;
    --green-matsuru: #628774;
    --beige-matsuru: #E4CEBF;
    --beige-media: #F3EEE4;
    --gray-access: #F2F2F2;
    --gray-about: #D6D6D6;
    --red-footer: #AC3131;
    --green-card: #5B8973;
    --gray-card: #DED9D0;
    --black-card: #272D32;
    --brown-card: #E2CABA;
    --brown2-card: #E6CDBD;
    --transparent: rgba(0,0,0,0);
    --bg-opacity: 0;
}

.mainvisual{
    height: 100dvh;
    background: url(../img/about/about-fv.webp) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width:767px){
    .mainvisual{
        height: 100dvh;
        background: url(../img/about/about-fv-sp.webp) center/cover no-repeat;
        img{
            width: 34.09%;
        }
    }
}

#wwa{
    padding-bottom: 2 rem;
    hgroup{
        width: 100%;
        padding: 0 0 0 1rem;
        margin-bottom: 6rem;
        
        h3{
            width: fit-content;
            font-size: 4rem;
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
            color: #e6e6e6;
            line-height: 1;
            font-weight: normal;
            white-space: nowrap;
            margin: 0 0 0 auto;
        }
        
        h2{
            width: fit-content;
            line-height: 1;
            margin: 0 auto 0 0;
            font-weight: normal;
            white-space: nowrap;
        }
    }

    .wwa-container{
        padding: 4rem 7% 6rem 5%;
        display: flex;
        justify-content: flex-end;
        .logo{
            width: fit-content;
            padding: 0 2rem;
            .logo01{
                display: block;
                width: clamp(114px,10dvw,220.5rem);
                aspect-ratio: 228/243;
                margin: 0 auto 2rem;
            }
            .logo02{
                display: block;
                width: clamp(145px,15dvw,290.5rem);
                aspect-ratio: 290/131;
                margin: 0 auto;
            }
        }
        .wwa-text{
            width: 80%;
            padding: 0;
            h4{
                font-size: 1.5rem;
                margin-bottom: 1rem;
                line-height: 1.8;
                .sp-br,.sp-br02{
                    line-height: 0;
                    display: none;
                }
            }
            p{
                font-size: 1rem;
                padding: 0;
            }
        }
    }

    .ow{
        margin-bottom: 2rem;
    }

    .os{
        padding-top: 3rem;
        margin-bottom: 4rem;
        h2{
            display: flex;
            width: 100%;
            align-items: center;
            position: relative;
            span{
                display: block;
                font-size: 1.25rem;
                line-height: 0.2;
                position: absolute;
                top: 1.3rem;
                right: 3.5rem;
            }
        }
    }
    .os-container{
        margin-bottom: 6rem;
        p{
            display: flex;
            width: 95%;
            align-items: center;
            padding-left: 3.5rem;
            position: relative;
            .br-text{
                display: block;
                font-size: 1.75rem;
                line-height: 0.2;
                position: absolute;
                right: 3.5rem;
                .red{
                    color: #bd3220;
                }
            }
        }
    }

    .cm{
        margin-bottom: 4rem;
    }

    .cm-container{
        display: flex;
        justify-content: space-between;
        margin-bottom: 4rem;
        position: relative;
        p{
            padding-left: 3.5rem;
        }
        .diagram01{
            width: 310px;
            aspect-ratio: 642/596;
            position: absolute;
            top: -5rem;
            right: 10%;
        }
    }
    .border{
        width: 94%;
        height: 1px;
        background: var(--black);
        margin: 0 auto;
    }
    .diagram02{
        display: block;
        width: 96%;
        margin: 0 auto 6rem;
        padding: 3rem 0 0;
        img{
            width: 100%;
        }
    }
    .diagram03{
        display: block;
        width: 96%;
        margin: 0 auto 8rem;
        padding: 3rem 0 0;
        img{
            width: 100%;
        }
    }

    .pa{
        margin-bottom: 2rem;
        h2{
            .sp-br{
                line-height: 0;
                display: none;
            }
        }
    }

    /* ===============================
        ▼ スライダー 共通
    =============================== */
    .about-sl01{
        width: 100%;
        overflow: hidden;
        line-height: 0;
        margin-bottom: 1rem;
    }
    .about-sl02{
        width: 100%;
        overflow: hidden;
        line-height: 0;
    }
    .about-sl01-sp,
    .about-sl02-sp,
    .about-sl03-sp{
        width: 100%;
        overflow: hidden;
        line-height: 0;
        margin-bottom: 1rem;
        display: none;
    }
    .about-sl01{
        margin-bottom: 2rem;
    }
    .about-slider-track{
        display: flex;
        width: max-content;
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }
    .about-slider-group{
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding-right: 0.5rem;
        flex-shrink: 0;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }
    /* ===============================
        ▼ スライダー PC
    =============================== */
    .about-sl01 .about-slider-track{
        animation: aboutSlide 60s linear infinite;
    }
    .about-sl02 .about-slider-track{
        animation: aboutSlide 80s linear infinite;
        animation-delay: -12s;
    }
    .about-sl01 img,
    .about-sl02 img{
        display: block;
        height: 451px;
        width: auto;
        max-width: none;
        flex-shrink: 0;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
/* ===============================
    ▼ スライダー アニメーション
=============================== */
@keyframes aboutSlide{
    from{
        transform: translate3d(0, 0, 0);
    }
    to{
        transform: translate3d(-50%, 0, 0);
    }
}

@media screen and (max-width:930px){
    #wwa .wwa-container .wwa-text{
        h4{
            .sp-br{display: block;}
        }
    }
    #wwa{
        .os{
            padding: 0 0 3rem 0.5rem;
            h2{
                span{
                    display: block;
                    font-size: 1.25rem;
                    top: 4rem;
                    left: 0.25rem;
                }
            }
        }
        .os-container{
            margin-bottom: 11rem;
            flex-direction: column;

            p{
                flex-direction: column;
                align-items: flex-start;
                padding-left: 0.75rem;
                .br-text{
                    top: 5rem;
                    left: 0.75rem;
                }
            }
        }

        .cm{
            margin-bottom: 2rem;
        }
        .cm-container{
            flex-direction: column;
            margin-bottom: 2rem;
            p{
                padding-left: 0.75rem;
            }
            .diagram01{
                width: min(80%,360px);
                margin: 0 auto;
                position: static;
                padding-top: 2.5rem;
            }
        }
        .diagram02{
            padding: 3rem 0 0;
            img{
                width: 100%;
            }
        }
        .diagram03{
            width: 98%;
            padding: 3rem 0 0;
            img{
                width: 100%;
            }
        }

        .pa{
            margin-bottom: 0;
        }
    }
}
@media screen and (max-width:767px){
    #wwa,.ow,.os,.cm{
        hgroup{
            width: 100%;
            margin: 0 auto;
            padding: 0.5rem 0 1rem 0.5rem;
            h3{
                margin: 0 auto 0.5rem 0;
            }
            
            h2{
                margin: 0 auto 0 0;
            }
        }
        .wwa-container{
            flex-direction: column;
            .logo{
                width: 80%;
                margin: 0 auto 2rem;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 1rem;
                .logo01{
                    margin: 0 auto;
                }
                .logo02{
                    margin: 0 auto;
                }
            }
            .wwa-text{
                width: 100%;
                h4{
                    font-size: 1.5rem;
                    margin-bottom: 1rem;
                    text-align: center;
                }
                p{
                    width: 90%;
                    margin: 0 auto;
                    font-size: 1rem;
                    padding: 0;
                }
            }
        }
    }
    #wwa .pa h2 .sp-br{
        display: block;
    }

    /* ===============================
        ▼ スライダー SP
    =============================== */
    #wwa{
        .about-sl01,
        .about-sl02{
            display: none;
        }
        .about-sl01-sp,
        .about-sl02-sp,
        .about-sl03-sp{
            display: block;
        }
        .about-sl01-sp .about-slider-track{
            animation: aboutSlide 45s linear infinite;
            animation-delay: 0s;
        }
        .about-sl02-sp .about-slider-track{
            animation: aboutSlide 30s linear infinite;
            animation-delay: -6s;
        }
        .about-sl03-sp .about-slider-track{
            animation: aboutSlide 30s linear infinite;
            animation-delay: -12s;
        }
        .about-sl01-sp img,
        .about-sl02-sp img,
        .about-sl03-sp img{
            display: block;
            height: 227px;
            width: auto;
            max-width: none;
            flex-shrink: 0;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -webkit-transform: translate3d(0, 0, 0);
        }
    }
    #wwa .os{
        padding: 3rem 0 1rem 0.5rem;
    }
}

@media screen and (max-width:550px){
    #wwa .wwa-container .wwa-text{
        h4{
            .sp-br02{display: block;}
        }
    }
}
@media screen and (max-width:480px){
    #wwa,.ow,.os,.cm{
        hgroup{
            h3{
                font-size: 3rem;
            }
        }
    }
    #wwa .os h2{
        font-size: 1.8rem;
        span {
            font-size: 1rem;
        }
    }
    #wwa .os-container p .br-text{
        font-size: 1.5rem;
        top: 7rem;
    }
}