﻿.main {
    background-color: var(--bg-color);
}

.stamp__wrap {
    background-color: #FFF;
    border-radius: 20px;
    padding: 2em;
    display: flex;
    flex-wrap: wrap;
}

    .stamp__wrap .stamp__pic {
        flex: 0 0 100%;
        padding: 2em;
        margin: auto;
    }

    .stamp__wrap .overview__wrap {
        flex: 0 0 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.overview__wrap .overview__range {
    background-color: #383838;
    color: #FFF;
    border-radius: 15px;
    padding: 1.5em 2em;
}

@media screen and (min-width : 769px) {
    .stamp__wrap .stamp__pic {
        order: 1;
        flex: 0 0 65%;
        padding-right: 0;
    }

    .stamp__wrap .overview__wrap {
        flex: 0 0 35%;
    }
}

.overview__wrap .overview__stationlabel {
    display: block;
    font-size: calc(clamp(2.4rem, 3.101vw + 0.019rem, 3.6rem));
    font-weight: bold;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid #FFF;
}

.overview__wrap .overview__text {
    display: block;
    font-size: calc(clamp(1.4rem, 1.034vw + 0.606rem, 1.8rem));
    line-height: 1.3;
    letter-spacing: 0.1em;
}

.qr__wrap {
    width: 90%;
    margin: 0 auto;
    padding: 2em 0;
    display: flex;
    align-items: center;
}

    .qr__wrap .slogan {
        margin-right: 1em;
        flex: 1 0 0;
        text-align: center;
    }

        .qr__wrap .slogan .slogan__text {
            color: #4d4d4d;
            margin-top: 1em;
            font-size: calc(clamp(0.7rem, 3.101vw - 0.738rem, 1.7rem));
            font-weight: bold;
        }

            .qr__wrap .slogan .slogan__text a {
                color: #4d4d4d;
            }

    .qr__wrap .appqr {
        flex: 0 0 30%;
        max-width: 170px;
    }

.footer {
    background-color: #FFF;
}

.footer__wrap {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 5px auto;
    padding: 1em 2em;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

    .footer__wrap .logo {
        flex: 0 0 20%;
        font-size: 0;
    }

    .footer__wrap .copyrights {
        flex: 1 0 0;
    }

        .footer__wrap .copyrights p {
            font-size: calc(clamp(1rem, 2.067vw + 0.008rem, 1.5rem));
            font-weight: bold;
            text-align: right;
        }
