@charset "Shift_JIS";

/*==============================================
共通 ここから
================================================*/

footer .footer-inner, header .header, header .information, main, main#wrapper, nav .category_nav {
    margin: 0;
    padding: 0;
    max-width: none;
}

article#contents {
    padding-bottom: 0;
}
footer {
    position: relative;
    z-index: 1000;
}
footer .footer-inner {
    padding: 30px 0 !important;
}

.smp-none {
    display: block;
}
.pc-none {
    display: none;
}

#app-campaign {

    .section-wrap {
        width: 90%;
    }

    .app-campaign__aside {
        position: fixed;
        left: 0;
        top: 0;
        width: calc((100% - 650px) / 2);
        height: 100vh;
        padding: 3%;
        display: flex;
        align-items: center;
        justify-content: center;

        .aside-inner {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .thanks {
            width: 50%;
            margin-bottom: 2%;
        }
    }

    .app-campaign__inner {
        border-right: 1px solid #34b9eb;
        border-left: 1px solid #34b9eb;

        .anchor {
            width: 85%;
        }

        .top-banner {
            .top-banner__button {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                .qr {
                    width: 14%;
                }
                .bland {
                    width: 84%;
                }
            }
        }

        .mekucho-campain {
            .mekucho-campain__item .btn {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                
                .qr {
                    width: 14%;
                }
                .bland {
                    width: 84%;
                }
            }
        }

        .island-campain {
            .banner {
                &:hover {
                    transform: scale(1.03);
                }
            }
        }
    }

    .app-campaign__menu {
        position: fixed;
        right: 0;
        top: 0;
        width: calc((100% - 650px) / 2);
        height: 100vh;
        padding: 3%;
        display: flex;
        align-items: center;
        justify-content: center;

        .menu-inner {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            max-width: 400px;

            & a {
                text-align: start;
                font-size: 18px;
                margin-bottom: 3%;
                background-color: #ffffff4f;
                width: 100%;
                height: 56px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100vw;
                padding: 0 5%;
                gap: 10px;
                box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.1);
                transition: .3s;

                .cir {
                    width: 17%;
                    aspect-ratio: 1 / 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .title {
                    flex: 1;
                }

                &:hover {
                    transform: scale(1.03);
                }
            }
        }
    }
}