@charset "UTF-8";

body {
    margin: 0;
}

main {
    padding-bottom: 60px;
}

.content {
    max-width: 428px;
    width: 100%;
    margin: 0 auto;
}

img {
    width: auto;
    max-width: 100%;
    display: block;
}

/* トップページ */
.backnumber {
    margin-top: 40px;

    h2.backnumber-title {
        background: #ccc;
        padding: 15px 0;
        text-align: center;
    }
}

h3 {
    text-align: center;

    a {
        color: initial;
        text-decoration: none;
        font-size: 1.6rem;
        border: 3px solid #87cf7b;
        padding-block: 10px;
        border-radius: 10px;
        line-height: 2;
        margin: 25px 10px;
        display: block;
    }
}

/* 下層ページ */
.youtube {
    padding: 20px;

    iframe {
        aspect-ratio: 16 / 9;
    }
}

/* フォーム */
form#mailformpro {
    width: 100%;
    padding: 15px;

    dl dt {
        float: none;
        width: 100%;
        text-align: initial;
        border-top: none;
        font-size: inherit;
        padding-bottom: 0;
        padding-top: 1em;
    }

    dl dd {
        border-top: 0;
        padding: 0;
        font-size: inherit;
    }

    input,
    textarea {
        width: 100%;
        margin-top: 0.5em;
        padding: 0.5em 1em;
        border: 1px solid rgba(0, 0, 0, 0.15);
        background-color: rgb(255, 255, 255);
        border-radius: 0.25rem;
    }

    .required {
        color: white;
        background-color: #cc6055;
        border-radius: 6px;
        white-space: nowrap;
        padding: 0.01rem 0.3rem 0.01rem 0.3rem;
        margin-left: 0.5em;
        font-size: 0.8rem;
    }

    .no-required {
        color: white;
        background-color: #788b99;
        border-radius: 6px;
        white-space: nowrap;
        padding: 0.01rem 0.3rem 0.01rem 0.3rem;
        margin-left: 0.5em;
        font-size: 0.8rem;
    }

    input[type="submit"] {
        margin-top: 2em;
        padding: 0.5em 40px;
        border: 1px solid rgba(0, 0, 0, 0.5);
        background-color: rgb(235, 235, 235);
        white-space: pre-wrap;
        word-break: break-word;
        max-width: 100%;
        min-width: 200px;
        text-align: center;
        border-radius: 10px;
        width: 100%;
        opacity: 1;
    }
}

/* サンクス */
.thanks {
    h1 {
        font-size: 1.2rem;
        margin-block: 60px;
        text-align: center;
    }
}

/* LP */
body.LP {
    max-width: 413px;
    width: 100%;
    height: 100vh;
    margin-inline: auto;
    margin-block: 0;

    img {
        display: block;
        width: 100%;
    }

    .drink-base {
        position: relative;
    }

    .sns {
        position: absolute;
        bottom: 15px;
        display: flex;
        gap: 20px;
        justify-content: center;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .sns-child {
        color: #fff;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    p.sns-title {
        margin: 0;
    }

    .sns-img {
        max-width: 60px;
        width: 100%;
    }

    footer {
        position: fixed;
        bottom: 0;
        max-width: 413px;
        width: 100%;
    }
}