@charset "UTF-8";
#topic-pass {
    margin-top: 80px;
}


.history-title {
    position: absolute;
    font-size: 3.2rem;
    top: 159px;
    left: 6.14%;
}
.history-titleText {
    margin-top: 78px;
}

.history-titleTextTB, .history-titleTextSP, .history-titleTextTB867 {
    display: none;
}
@media (max-width:1440px) {
    .history-title {
        font-size: 2.2rem;
        top: 156px;
    }
}
@media (max-width:1024px) {
    .history-title {
        font-size: 2rem;
        top: 135px;
    }
}
@media (max-width:965px) {
    .history-titleText {
        display: none;
    }

    .history-titleTextTB867 {
        display: block;
        margin-top: 72px;
        width: 100%;
    }
}

@media (max-width:864px) {
    .history-titleTextTB867 {
        display: none;
    }

    .history-titleTextTB {
        display: block;
        margin-top: 72px;
        width: 100%;
    }
}

@media (max-width:768px) {
    .history-title {
        font-size: 1.8rem;
        top: 131px;
    }
}
@media (max-width:646px) {
    .history-titleTextTB {
        display: none;
    }

    .history-titleTextSP {
        display: block;
        margin-top: 72px;
        width: 100%;
    }
}

@media (max-width:646px) {
    .history-titleTextTB {
        display: none;
    }

    .history-titleTextSP {
        display: block;
        margin-top: 72px;
        width: 100%;
    }
}

.history-house, .history-strawberry, .history-smile {
    display: flex;
    flex-direction: row-reverse;
    gap: 36px;
}

.history-tomato, .history-land {
    display: flex;
    gap: 36px;
}

.history-containLeft {
    max-width: 618px;
}

.history-containRight {
    max-width: 595px;
}


@media (max-width:970px) {
    .history-house, .history-strawberry, .history-smile, .history-tomato, .history-land {
        display: block;
    }

    .history-containLeft, .history-containRight {
        max-width: 100%;
    }

    .history-img {
        margin-top: 20px;
    }

}



/* =======背景====== */

.container {

    background-image:  
                        url(../images/bg-shapeDotA@2x.png),
                        url(../images/bg-shapeDotB@2x.png),
                        url(../images/bg-shapeDotA@2x.png),
                        url(../images/bg-shapeDotA@2x.png);
                        


    background-repeat: 
                        no-repeat,
                        no-repeat,
                        no-repeat,
                        no-repeat;

    background-position:
                        8% 15%, 
                        83% 38%, 
                        8% 58%, 
                        98% 82%;

    background-size: 
                        9%,9%,9%,9%;
}


@media (max-width:970px) {
.container {
    background-position:
                        8% 15%, 
                        83% 38%, 
                        8% 58%, 
                        102% 82%;
}
}



@media (max-width:706px) {

    .container {

        background-position:
                            6% 18%, 
                            83% 38%, 
                            2% 60%, 
                            102% 82%;
    }
}

@media (max-width:602px) {

    .container {
        background-position:
                            6% 18%, 
                            83% 38%, 
                            2% 60%, 
                            102% 84%;
    }

}

@media (max-width:384px) {

    .container {
        background-position:
                            6% 18%, 
                            98% 37%, 
                            2% 60%, 
                            102% 84%;
    }

}