@media screen and (max-width: 1000px) {
    :root {
        font-size: calc(100vw / 1000);
    }
}

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

    /* #region : global style */
    :root {
        font-size: calc(100vw / 360);
    }

    * br.mobile {
        display: block;
    }

    * br.desktop {
        display: none;
    }

    section div.section-inner {
        width: auto;
        padding: 0px;
    }

    /* #endregion */

    /* #region : hero section */
    section.hero {
        padding: 47rem 0 50rem;
    }

    section.hero.has-banner {
        padding-top: 140rem;
    }

    section.hero div.section-inner {
        gap: 40rem;
    }

    section.hero div.hero-title {
        gap: 30rem;
    }

    section.hero h1 {
        font-size: 14rem;
        line-height: 22rem;
    }

    section.hero div.hero-title img {
        width: 282rem;
    }

    section.hero div.hero-information {
        flex-direction: column;
    }

    section.hero div.hero-information div.info-card {
        padding: 20rem 0 0 20rem;
        width: calc(100vw - 50rem);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: auto;
        border-radius: 20rem;
        gap: 0rem;
    }

    section.hero div.hero-information div.info-card h3 {
        text-align: left;
        font-size: 28rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-right: -20rem;
    }

    section.hero div.hero-information div.info-card h3 strong {
        font-size: 42rem;
        font-style: normal;
        font-weight: 700;
        line-height: 42rem;
    }

    section.hero div.hero-information div.info-card p {
        text-align: left;
        font-size: 14rem;
        font-style: normal;
        font-weight: 500;
        line-height: 20rem;
        letter-spacing: -0.2rem;
        margin-right: -20rem;
    }

    section.hero div.hero-information div.info-card img {
        width: 136rem;
    }

    section.hero div.hero-register p {
        line-height: 24rem;
        font-size: 16rem;
    }

    section.hero div.hero-register p img {
        width: 58rem;
        top: 0rem;
    }

    section.hero div.hero-register .store-button-wrapper {
        flex-direction: column;
        gap: 12rem;
    }

    section.hero a.button {
        width: calc(100vw - 50rem);
    }

    section.hero a.button::after {
        right: 20rem;
        top: 23rem;
    }

    /* #endregion */

    /* #region : service offer section */
    section.service-offer {
        padding: 60rem 0;
    }

    section.service-offer div.service-offer-title {
        gap: 8rem;
    }

    section.service-offer ul.service-offer-list {
        padding: 0 25rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14rem;
    }

    section.service-offer li.service-offer-item {
        width: 148rem;
        height: 180rem;
    }

    section.service-offer li.service-offer-item img {
        width: 70rem;
    }

    /* #endregion */

    /* #region : market section */
    section.market {
        background-image: url('/images/market_map_mobile.svg');
        background-size: 360rem 370rem;
        background-position: top center;
    }

    section.market div.section-inner {
        height: 390rem;
    }

    section.market h2 {
        font-size: 20rem;
        line-height: 28rem;
        letter-spacing: -0.4rem;
    }

    section.market p {
        font-size: 14rem;
        line-height: 20rem;
        letter-spacing: -0.1rem;
    }

    /* #endregion */

    /* #region : app preview section */
    section.app-preview div.section-inner {
        flex-direction: column;
        height: auto;
        gap: 40rem;
        align-items: center;
        justify-content: center;
        padding-top: 60rem;
    }

    section.app-preview div.app-preview-content h2 {
        font-size: 20rem;
        font-style: normal;
        font-weight: 700;
        line-height: 28rem;
        text-align: center;
        letter-spacing: -0.4rem;
    }

    section.app-preview div.app-preview-content p {
        text-align: center;
    }

    section.app-preview img.app-preview-img {
        width: 250rem;
        height: 294rem;
    }

    /* #endregion */

    /* #region : press section */
    section.press {
        padding: 60rem 0;
    }

    section.press div.section-inner {
        width: calc(100vw - 25rem);
    }

    section.press ul.post-list {
        width: auto;
    }

    section.press li.post-item {
        padding: 20rem 0;
        gap: 10rem;
    }

    section.press li.post-item a {
        font-size: 16rem;
        line-height: 30rem;
        height: 60rem;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    section.press li.post-item span {
        font-size: 12rem;
    }

    section.press li.post-item:last-child {
        height: 120rem;
    }

    /* #endregion */

    /* #region : social section */
    section.social div.section-inner {
        padding: 60rem 0;
    }

    section.social img.logo {
        width: 182rem;
    }

    section.social div.soical-button-wrapper {
        flex-direction: column;
        gap: 10rem;
        margin-top: 20rem;
    }

    /* #endregion */

    /* #region : footer */
    footer div.footer-inner {
        width: auto;
        margin: 0 auto;
        padding: 0;
        flex-direction: column;
        gap: 20rem;
        padding: 60rem 30rem;
    }

    footer div.company-information div.company-information-content {
        display: flex;
        flex-direction: column;
        gap: 20rem;
    }

    footer div.company-information div.company-information-content strong {
        display: block;
    }



    footer div.etc {
        flex-direction: column;
    }

    /* #endregion */

    /* #region : menu */
    div.menu div.menu-inner {
        width: calc(100vw - 50rem);
    }

    div.menu button#topButton img {
        width: 50rem;
    }

    /* #endregion */
}