@charset "Shift_JIS";

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

/* パンくず削除 */
#pankuzu {
    display: none;
}
#app-campaign img {
    width: 100%;
    height: auto;
    display: block;
}
#app-campaign svg {
    width: 100%;
}
.header-info-red {
    display: none !important;
}
a {
    display: block;
}
.smp-none {
    display: none;
}
footer {
    margin-top: 0 !important;
}
footer .bottom {
    margin-top: 0 !important;
}

/* 価格プロ */
.buy_price>ol, .buy_price>ul {
    margin: 0;
}
span.marker {
    background: linear-gradient(transparent 60%, #ffe4d2 40%);
    font-weight: bold;
    color: #ff3500;
    line-height: 1;
    font-size: 1em;
}
.buy_price>ol .spesicalprice, .buy_price>ul .spesicalprice,.buy_price>ul .intax {
    display: none;
}



/* 変数指定 */
:root {
    --main-bg-color:#155dae;
    --main-bg2-color:#ffffcf;
    --main-bg3-color:#fffa5d;
    --main-text-color: #222222;
    --title-text-color: #e40001;
    --font-size-text: 1rem;
    --box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.1);
}
/*==============================================

================================================*/
/* フォント */
#app-campaign{
    color: var(--main-text-color);
    font-size: var(--font-size-text);
}
#app-campaign p {
    font-size: var(--font-size-text);
}
/*==============================================
共通 ここまで
================================================*/

/*==============================================
#app-campaign 共通 ここから
================================================*/

html {
    scroll-behavior: smooth;
}

#app-campaign {
    display: block;
    position: relative;
    width: 100%;
    background: #75d9ff;

    /* 共通部分 */
    & * {
        box-sizing: border-box;
    }
    & p {
        font-size: min(3.6cqw, 16px);
    }
    .app-campaign__inner {
        width: 100%;
        max-width: 650px;
        margin: 0 auto;
        background: #55bfff;
        /* background: linear-gradient(135deg, rgb(52 208 235) 0%, rgb(57 173 255) 40%, rgb(100 168 255) 100%);     */

        /* コンテナクエリを指定 */
        container-type: inline-size;  /* または size */
    }

    .section-wrap {
        width: 100%;
        /* アンカー用 */
        padding-top: 3cqw;
        margin: 0 auto 4cqw;
    }
    .section-wrap.margin-bottom {
        margin-bottom: 0;
    }
    .section {
        width: 95%;
        margin: 0 auto;
    }
    .section-box-type {
        width: 90%;
        padding: 4cqw;
        background-color: #fff;
        border-radius: 2cqw;
        box-shadow: var(--box-shadow);
    }
    .section-title {
        width: 100%;
        margin-bottom: 3cqw;

        & h2 {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: min(8cqw, 40px);
            line-height: 1;
            padding-right: 2cqw;

            .title {
                width: 85%;
                /* width: auto;
                height: 6cqw; */

                /* & img {
                    width: auto;
                    height: 100%;
                } */
            }

            & span {
                font-size: 6cqw;
                color: #FFF;
                font-weight: 500;
            }
        }
    }

    /* 看板 */
    .top {
        display: block;

        .top-img {
            padding: 3cqw 15cqw;
        }

        .top-day {
            font-size: min(4.1cqw, 20px);
            color: #0b69bb;
            text-align: center;
            background-color: #fffd66;
        }
    }

    /* 看板下バナー */
    .top-banner {
        margin-top: 4cqw;

        .top-banner__contents {
            display: flex;
            margin-bottom: 2cqw;

            .text {
                width: 60%;
            }
            .phone {
                position: relative;
                width: 40%;
                display: flex;
                justify-content: center;

                .img {
                    position: absolute;
                    z-index: 1;
                    width: 110%;
                    top: -9cqw;
                }
            }
        }

        .top-banner__button {
            position: relative;
            z-index: 10;
        }

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

    /* 画面左 */
    .aside-inner {
        max-width: 450px;
        margin: 0 auto;
    }

    /* アンカーリンク */
    .anchor {
        margin-top: 3cqw;

        .anchor-list {
            display: flex;
            gap: 2cqw;

            & li {
                flex: 1;
                position: relative;
            }

            & a {
                display: block;

                .img {
                    padding: 0 2cqw;
                    margin-bottom: 1cqw;

                    .cir {
                        position: relative;
                        width: 100%;
                        aspect-ratio: 1 / 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 100vw;
                        /* padding: 2cqw; */
                        /* background: linear-gradient(90deg,rgba(235, 0, 18, 1) 0%, rgba(215, 16, 82, 1) 100%); */
                        box-shadow: var(--box-shadow);
                    }

                    .click {
                        position: absolute;
                        bottom: -2cqw;
                        right: 0cqw;
                        font-size: min(5cqw, 25px);
                        transform: rotate(-10deg);
                        font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
                    }
                }

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

            & p {
                text-align: center;
                color: #fff;
                font-size: min(2.9cqw, 16px);
                line-height: 1.3;
            }

        }
    }

    /* めくっチョ */
    .mekucho-campain {

        .mekucho-campain__inner {
            display: flex;
            flex-direction: column;
            gap: 2cqw;

            .mekucho-campain__item {
                & h3 {
                    text-align: center;
                    font-size: min(4.1cqw, 25px);
                    & span {
                        font-size: 1.2em;
                    }
                }
                .kome {
                    font-size: min(3.0cqw, 14px);
                    color: #535353;
                    text-align: center;
                }

                .visual {
                    border-radius: 2cqw;
                    box-shadow: var(--box-shadow);
                    border: 1px solid #bfbfbf;
                    overflow: hidden;
                }
            }
        }

        .cap {
            text-align: center;
            color: #535353;
            /* margin-bottom: 2cqw; */
        }

        .category-list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            background: #f3f3f3;
            padding: 2cqw;
            background: #ffd494;

            & li {
                width: 49%;
                height: 12cqw;
                border: 1px solid #ffffff61;
                margin-bottom: 2cqw;
                background-color: #FFF;
                border-radius: 1cqw;
                box-shadow: var(--box-shadow);
                transition: .3s;

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

            & li.col_1 {
                width: 100%;
                margin-bottom: 0;
            }

            & a {
                position: relative;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                padding-left: 2cqw;
                gap: 1cqw;

                &::after {
                    position: absolute;
                    right: 2cqw;
                    top: 45%;
                    display: block;
                    content: "";
                    width: 1.2cqw;
                    height: 1.2cqw;
                    transform: rotate(45deg);
                    border-top: 1px solid #535353;
                    border-right: 1px solid #535353;
                    transition: .2s;
                }

                &:hover {
                    opacity: 1;
                    color: #222 !important;
                }
            }

            span {
                font-size: 5cqw;
                font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
            }

            .font_s {
                font-size: min(3cqw, 16px);
                white-space: nowrap;
                line-height: 1.3;
            }
        }
    }

    /* アプリレビューキャンペーン */
    .review-campain {

        .review-campain__banner {
            /* display: flex; */
            align-items: center;
            /* background: #fe3f4a; */
            /* padding: 2cqw; */
            border-radius: 1cqw;
            margin-bottom: 2cqw;

            .img {
                width: 25%;
            }

            .text {
                /* width: 80%; */
                font-size: min(3.8cqw, 22px);
                color: #FFF;
                padding-left: 2cqw;
                font-style: italic;
                white-space: nowrap;
                line-height: 2.5;

                & span {
                    color: #f6ff0b;
                    font-size: 1em;
                    line-height: 1;
                }

                & strong {
                    font-size: 1.8em;
                    line-height: 1;
                }
            }

            .present_content {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .new .text{
                padding-left: 0;
                text-align: -webkit-center;
                font-size: min(3.8cqw, 20px);
            }

        }

        .review-campain__banner2 {
            /* display: flex; */
            align-items: center;
            background: #3a94d9;
            padding: 2cqw;
            border-radius: 1cqw;
            margin-bottom: 3cqw;

            .text {
                font-size: min(3.8cqw, 22px);
                color: #FFF;
                padding-left: 2cqw;
                font-style: italic;
                white-space: nowrap;
                line-height: 2.5;

                & span {
                    color: #f6ff0b;
                    font-size: 1em;
                    line-height: 1;
                }

                & strong {
                    font-size: 1.8em;
                    line-height: 1;
                }

                .p-1 {
                    font-size: min(3.6cqw, 25px);
                    background-color: #ffffff;
                    color: #3a94d9;
                    margin-bottom: 1%;
                }
            }

            .new .text{
                padding-left: 0;
                text-align: -webkit-center;
                font-size: min(3.8cqw, 20px);
            }

        }

        .review-campain__textbox {
            border: 1px solid #c1c1c1;
            padding: 3cqw;
            margin-bottom: 3cqw;

            & h4 {
                font-size: min(4.1vw, 17px);
                color: #222;

                &::before {
                    content: '■';
                    font-size: .8em;
                }
            }
            .list {
                padding-left: 1.2em;
                position: relative;

                &::before {
                    content: attr(data-text); /* data-text 属性の値を表示 */
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }   

        .review-campain__button {
            position: relative;
            width: 100%;
            border-radius: 100vw;
            background: #EB0012;
            /* background: linear-gradient(90deg,rgba(235, 0, 18, 1) 0%, rgba(215, 16, 82, 1) 100%); */
            color: #FFF;
            padding: .7em 0;
            text-align: center;
            font-size: min(4.1cqw, 20px);
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 3cqw;
            box-shadow: var(--box-shadow);
            flex-direction: column;
            line-height: inherit;

            & span{
                position: absolute;
                right: 3cqw;
                font-size: 5cqw;
                font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
            }

            &:hover {
                color: #FFF !important;
                opacity: 1;
                transform: scale(1.03);
            }
        }

        .clear,
        .end {
            background: #737373;
            pointer-events: none;
        }

        .review-campain__text {
            margin-bottom: 3cqw;


            & p {
                margin-bottom: .3em;
            }
            .list {
                padding-left: 1.2em;
                position: relative;

                &::before {
                    content: attr(data-text);
                    position: absolute;
                    top: 0;
                    left: 0;
                }
            }
        }
    }

    /* 無人島生活 */
    .island-campain {
        .banner {
            border-radius: 1cqw;
            overflow: hidden;
        }
    }

    /* 特集一覧 */
    .other {
        .banner {
            border-radius: 1cqw;
            overflow: hidden;

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

}


/* ハンバーガーメニュー 未クリック */
#app-campaign .anchor-check {
    display: block;
    position: fixed;
    z-index: 101;
    bottom: calc(53px + 1%);
    right: 2%;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background: #e43f3f;
    box-sizing: border-box;
    border: 1px solid #FFF;

    .anchor-check__border {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 13.5px;
        height: 3px;
        border-radius: 2px;
        background: #FFF;
        width: 45%;
    }

    .anchor-check__border:nth-of-type(1) {
        top: 16px;
    }
    .anchor-check__border:nth-of-type(2) {
        top: 24px;
    }
    .anchor-check__border:nth-of-type(3) {
        top: 32px;
    }

    /* ハンバーガーメニュー インプット非表示 */
    & input {
        display: none;
    }
}

/* ハンバーガーメニュー 未クリック 中身 */
#app-campaign .top-anchor {
    position: fixed;
    top: inherit;
    right: 0;
    bottom: 110px;
    height: max-content;
    z-index: 100;
    transform: translateX(100%);
    transition: .3s;

    & a {
        color: #FFF;
        background: #e43f3f;
        padding: .6em 1em .6em 2em;
        display: block;
        border-radius: 100vw 0 0 100vw;
        margin-bottom: 1em;
        font-size: 4.2vw;
        box-sizing: border-box;
        box-shadow: var(--box-shadow);
    }
}

/* ハンバーガーメニュー クリック時 */
#app-campaign:has(.anchor-check input:checked) .anchor-check {
    display: block;
    background-color: #FFF;
    border: 1px solid #e43f3f;

    .anchor-check__border:nth-of-type(1) {
        top: 18px;
        left: 17px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
        background: #e43f3f;
    }
    .anchor-check__border:nth-of-type(2) {
        opacity: 0;
    }
    .anchor-check__border:nth-of-type(3) {
        top: 30px;
        left: 17px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
        background: #e43f3f;
    }
}

#app-campaign:has(.anchor-check input:checked) .top-anchor {
    transform: translateX(0);
    transition: .3s;
}

#app-campaign .anchor-gray {
    display: none;
}
#app-campaign:has(.anchor-check input:checked) .anchor-gray {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: #22222266;
    transition: .3s;
}