@charset 'UTF-8';

@media(max-width: 1000px) {

    .header-main {
        width: 30%;
    }

    .header-main img {
        margin: 10px 0 auto 20px;
    }

    .header-buttons {
        width: 70%;
        margin: 0 0 0 auto;
        justify-content: right;
    }

    .login-button,
    .contact-button {
        margin: 15px 5px 15px 5px;
    }

    /*=============== contents ===============*/

    .top-page1-title {
        font-size: 4vw;
    }

    .top-page1-title p {
        margin: 0;
    }

    .top-page2-title,
    .top-page3-title,
    .top-page4-title,
    .top-page5-title {
        font-size: 5vw;
    }

    .top-page2-content-left,
    .top-page2-content-right,
    .top-page4-content-left,
    .top-page4-content-right,
    .top-page5-content-left,
    .top-page5-content-right,
    .top-page6-content-left,
    .top-page6-content-right {
        width: 100%;
    }

    .top-page2-text p,
    .top-page3-text p,
    .top-page4-text p,
    .top-page5-text p {
        font-size: 16px;
    }

    .top-page2-text,
    .top-page4-text,
    .top-page5-text {
        top: 0;
        transform: translate(-50%);
    }

    .top-page2-text,
    .top-page3-text,
    .top-page4-text,
    .top-page5-text {
        width: 90%;
        left: 50%;
        transform: translate(-50%);
    }

    .top-page2-content-right img {
        width: 90%;
        max-width: 450px;
        margin-top: 50px;
    }

    .top-page2-content,
    .top-page4-content,
    .top-page5-content,
    .top-page3-title,
    .top-page5-title,
    .top-page6-content {
        flex-direction: column;
    }

    .top-page3-title-up,
    .top-page5-title-down {
        display: flex;
        justify-content: center;
    }

    .top-page3-title-down,
    .top-page5-title-up {
        text-align: center;
    }

    .top-page3-title p,
    .top-page5-title p {
        margin: 0;
    }

    .top-page4-content-right img {
        width: 75%;
        max-width: 300px;
        margin-top: 50px;
    }

    .top-page5-content-left img {
        width: 80%;
        margin-top: 50px;
    }

    .top-page5-text p {
        margin-top: 50px;
    }

    .top-page6 {
        height: 85%;
    }

    .top-page6-title {
        font-size: 5vw;
    }

    .top-page6-content-right {
        margin-top: 30px;
    }

    .top-page6-content img {
        width: 100%;
        height: 250px;
    }

    .mask {
        width: 100%;
        height: 250px;
    }

    .top-page6-content p {
        font-size: 5vw;
    }

    footer {
        margin-top: 50px;
    }
}

@media(max-width: 800px) {
    
    .top-page1-title {
        width: 30px;
        height: 100%;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        display: flex;
        flex-direction: row;
        justify-content: center;
        font-size: 30px;
        padding-left: 10px;
    }

    .top-page1-title p:nth-child(1) {
        margin-top: 20px;
    }
}

@media(max-width: 500px) {
    .top-page2-text p,
    .top-page3-text p,
    .top-page4-text p,
    .top-page5-text p {
        font-size: 13px;
    }
}