@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size:  62.5%;
}

body {
    min-height: 100dvh;
    font-size: 1.6rem;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    background-color: #fff5f6;
}

a {
  display: inline-block;
  text-decoration: none;
}

header {
    top: 0;
    padding: 15px 20px;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .header-block {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        .left-logo-area {
            display: block;
        }

            .website-logo {
                height: 24px;
                pointer-events: none;
            }

        .right-area {
            font-size: 17px;
            display: flex;
            flex-direction: row;
            gap: 20px;
        }

            .lang-header {
                color: #2a343e;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 5px;
            }

                .world-icon {
                    color: #f00843;
                }
            
.header-public-note {
    width: 100%;
    padding: 3px 20px;
    background-color: #f00843;
    display: flex;
    justify-content: center;
}

    .header-public-note > span {
        color: #ffffff;
        font-size: 13px;
    }

main {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .main-block {
        width: 100%;
        padding: 40px 20px;
    }

        .all-info-area {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

            .info01 {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

                .info01 > h1 {
                    font-size: 38px;
                    line-height: 42px;
                    color: #2a343e;
                }

                .info01 > p {
                    color: #2a343e;
                }

                .buttons-area {
                    width: 100%;
                    margin-top: 10px;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    gap: 10px;
                }

                    .item-button {
                        color: #ffffff;
                        width: 50%;
                        padding: 12px;
                        background-color: #f00843;
                        border-radius: 8px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                    }

                        .item-button > span {
                            margin-left: 5px;
                        }

                        .item-1:hover {
                            background-color: #df083d;
                        }

                        .item-2 {
                            background-color: #2a343e;
                        }

                            .item-2:hover {
                                background-color: #191e24;
                            }

            /* ../url.html */

            .before-link-area, .after-link-area {
                width: 100%;
                padding: 20px;
                background-color: #ffffff;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
            }

                .girl-before {
                    width: 85%;
                    pointer-events: none;
                }

footer {
    padding: 15px 20px;
    width: 100%;
    height: auto;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    footer > span {
        color: #2a343e;
        font-size: 12px;
    }

@media screen and (min-width: 768px) {

header {
    padding: 15px 40px;
}

.main-block {
    padding: 80px 40px;
}

    .all-info-area {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }

        .info01 {
            width: 70%;
        }

        .before-link-area, .after-link-area {
            width: 50%;
        }

}

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

header {
    padding: 20px 0;
}

    .header-block {
        width: 1020px;
    }

.main-block {
    width: 1020px;
    padding: 80px 0;
}

    .all-info-area {
        gap: 80px;
    }

        .info01 {
            width: 60%;
        }

            .info01 > h1 {
                font-size: 54px;
                line-height: 58px;
            }

            .go-to-link {
                width: fit-content !important;
            }

            .item-1, .item-2 {
                width: 30%;
            }

        .before-link-area, .after-link-area {
            width: 40%;
        }

footer {
    flex-direction: row;
    gap: 3px;
}

}

@media screen and (min-width: 1440px) {

.header-block, .main-block {
    width: 1290px;
}

}