@charset "utf-8";


/*******************************************
common
*******************************************/
.bg-beige01 {
    margin-top: calc(-1*clamp(70px, 8.33vw, 120px));
    background-color: var(--beige05);
    padding: clamp(100px, 15.277vw, 220px) 0 clamp(50px, 13.194vw, 190px);

    .section {
        margin-bottom: clamp(50px, 9.027vw, 130px);

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.section__inner {
    width: min(100%, 1110px);
    padding: 0;
}

.section__ttl:not(.dataBnner__txtBox .section__ttl) {
    padding-bottom: max(0.83em, 20px);
    border-bottom: 2px solid var(--brown01);
    margin-bottom: max(var(--size55), 25px);
}

:root {
    --dataListGap: clamp(15px, 2.77vw, 40px);
    --dataListWidth: calc((100% - var(--dataListGap)*2)/3);


    @media screen and (max-width: 1300px) {
        --dataListGap: max(1.538vw, 10px);
    }

    @media screen and (max-width: 1024px) {
        --dataListWidth: calc((100% - var(--dataListGap))/2);
    }


    @media screen and (max-width: 600px) {
        --dataListWidth: 100%;
    }
}

.dataList {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--dataListGap);

    @media screen and (max-width: 600px) {
        width: min(100%, 300px);
        margin: 0 auto;
    }
}

.dataList__detail {
    width: var(--dataListWidth);
    border: 1px solid var(--red07);
    background-color: var(--white);
    border-radius: var(--radius20);

}


.dataList__detail02 {
    width: calc((var(--dataListWidth)*2) + var(--dataListGap));

    .dataList__main {
        .img {
            width: min(100%, 720px);
        }
    }
}

.dataList__ttl {
    position: relative;
    padding: 45px 15px 25px;
    font-weight: var(--weight700);
    font-size: var(--font28);
    text-align: center;
    margin-bottom: 1.428em;
    line-height: 1.785;

    &::before {
        position: absolute;
        content: "";
        background-image: url(../img/data/dotted.svg);
        background-size: contain;
        background-repeat: no-repeat;
        aspect-ratio: 59/4;
        width: max(2.1071em, 40px);
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .small {
        font-size: var(--font19);
        margin-top: 0.5em;
    }


    @media screen and (max-width: 1024px) {
        padding-top: 30px;
    }


    @media screen and (max-width: 600px) {
        padding-bottom: 15px;
        margin-bottom: 15px;
        padding-top: 20px;
    }
}

.dataList__main {
    --imgWidth: min(100%, 340px);

    .img {
        width: var(--imgWidth);
        margin: 0 auto;
    }

    .txt {
        font-size: var(--font21);
        text-align: center;
        padding: 1em 15px 0;

        .small {
            font-size: var(--font17);
            line-height: var(--lineHight164);
        }
    }

    &:has(.txt) {
        padding-bottom: 20px;
    }

    @media screen and (max-width: 1024px) {
        padding-bottom: 30px;
    }

    @media screen and (max-width: 600px) {
        --imgWidth: min(100%, 200px);
    }
}


/*******************************************
mv
*******************************************/

.mv {
    position: relative;
    margin-top: calc(20px + var(--headerHeight));

    .section__ttl {
        .ja {
            margin-top: 0.1em;
        }
    }


}

.mv__banner {
    position: relative;
    width: min(92.36%, 1330px);
    margin: 0 auto;


    .dataBnner {
        width: 100%;
        border-radius: var(--radius20);
        overflow: hidden;
    }

    .btn-outer-dataBnner {
        opacity: 0;
        visibility: hidden;
    }


    .dataBnner__txt {
        margin: 0.5em 0;
    }

    .dataBnner__parts01 {
        display: none;
    }

    .dataBnner__parts01--data {
        display: block;
        transform: translate(91%, 20%);
        width: clamp(60px, 14.7vw, 212px);
        left: 0;
        bottom: 0;

    }

    @media screen and (max-width: 1024px) {

        .dataBnner__parts01 {
            display: block;
        }

        .dataBnner__parts01--data {
            display: none;
        }
    }
}





/*******************************************
about
*******************************************/
.about__flex {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--dataListGap);
    margin: 0 auto var(--dataListGap);

    .img {
        width: var(--dataListWidth);
        border-radius: var(--radius20);
        overflow: hidden;
    }

    @media screen and (max-width: 1024px) {
        flex-direction: column;
        align-items: center;
        margin-bottom: 40px;

        .img {
            max-width: 300px;
        }
    }

    @media screen and (max-width: 480px) {
        margin-bottom: 30px;
        gap: 15px;

        .img {
            max-width: 200px;
        }
    }
}

.about__detail {
    flex: 1;
    font-size: var(--font28);

    dt {
        line-height: 1.67;
        margin-bottom: 0.714em;
    }

    dd {
        p {
            line-height: 2.11;
        }
    }

    @media screen and (max-width: 480px) {
        dt {
            margin-bottom: 5px;
        }
    }
}

/*******************************************
life
*******************************************/
.dataList-life {
    .dataList__detail {
        &:last-child {
            .dataList__main {
                .img {
                    width: min(100%, 350px);
                }
            }
        }
    }
}

.dataList__detail--comment {
    width: 100%;
    margin: max(var(--size80), 20px) auto 0;
    padding-bottom: 60px;

    .dataList__ttl {
        font-size: var(--font41);
        font-weight: var(--weight500);
        padding-bottom: 0;

        &::before {
            display: none;
        }
    }

    .dataList__main {
        .img {
            width: min(90%, 806px);
        }
    }

    @media screen and (max-width: 768px) {
        padding-bottom: 0;

        .dataList__main {
            padding-bottom: 0;

            .img {
                width:100%;
                border-radius: var(--radius20);
                overflow: hidden;
            }
        }
    }

    @media screen and (max-width: 480px) {


        .dataList__ttl {
            font-size: min(6vw, 23px);
        }
    }
}