@charset "UTF-8";

.header-info a {
    display: none;
}

#pcget {
    width: 100%;
    background: transparent !important;
}

.pcget-inner {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

/* 絵文字処理 バグ対策 */
#pcget .emoji {
    font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}

/* 看板 */
#pcget h1 {
    margin-bottom: 3%;
}

/* 看板下 */
#pcget .contents {
    background: none;
    box-sizing: border-box;
    padding: 0 2.5% 2.5%;

    & .all-bg {
        left: 0;
    }
}

/* 応募フォーム */
#pcget #entry_area {
    background-color: #fff9a3;
    border: 2px solid #fced1d;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5%;

    /* 見出し */
    .entry-table {
        text-align: center;
        background: #fced1d;
        padding: 0;
        margin-bottom: 4%;

        .entry-table__select {
            font-size: min(4.5vw, 20px);
            line-height: 1;
            padding: .4em 1em .4em;
            text-align: start;
            margin-left: -.3em;

            & span {
                display: block;
            }

            .title {
                font-size: min(4.3vw, 25px);
                font-weight: bold;
                color: #e71313;
            }

            .text {
                font-size: min(3.3vw, 14px);
                padding-left: 1em;
                position: relative;
                color: #313131;

                &::before {
                    content: '※';
                    position: absolute;
                    left: 0;
                }
            }

            .emoji {
                font-size: min(6vw, 30px);
                line-height: 1;
                display: inline-block;
            }
        }

    }

    /* フォームエリア */
    .form_area {
        margin-bottom: 4%;
        padding: 0 2%;
        box-sizing: border-box;
        
        .choice-list {
            display: block;

            & tbody {
                display: block;
            }

            & tr {
                display: flex;
                flex-wrap: wrap;
            }

            & td {
                width: calc(100% / 2);
                text-align: center;
                border: 1px solid #fced1d;
                box-sizing: border-box;
                transition: .2s;
                background: transparent;

                .box-wrap {
                    display: block;
                    position: relative;

                    
                    &:has(input:checked) {
                        background: #02d0ff;
                        transition: .3s;
                    }

                    &[data-status="応募中"] {
                        background: #02d0ff;
                    }

                    .box-contents {
                        background: #FFF;
                    }

                    .box_prise {
                        color: #eb0012;
                        padding: .4em 0 0;
                        font-size: min(3.6vw, 16px);

                        .original-price {
                            font-size: .9em;
                            margin-right: .3em;
                        }
                        .tax-price {
                            font-size: .7em;
                            margin-left: .2em;
                        }
                    }

                    .input-wrap {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0 0 .5em ;
                        font-size: min(3.6vw, 16px);
                    }

                    & input {
                        margin-right: 5px;
                        width: min(4.5vw, 18px);
                        height: min(4.5vw, 18px);
                    }

                    /* 現在の状態 */
                    .status {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        background: #FFF;
                        width: min(14vw, 65px);
                        height: min(14vw, 65px);
                        border-radius: 0 0 100vw 0;

                        &::after{
                            content: attr(data-text);
                            position: absolute;
                            top: min(2vw, 13px);
                            left: min(1vw, 5px);
                            font-size: min(3.3vw, 14px);
                            color: #7f7f7f;
                        }
                        &[data-text="応募中"]::after {
                            color: #02d0ff;
                        }
                    }

                    &:has(input:checked) {
                        background: #02d0ff;
                        transition: .3s;

                        .status::after {
                            content: '選択中';
                            color: #04b0d7;
                        }
                    }

                    .result-text {
                        display: block;
                        font-size: min(3.6vw, 16px);
                        padding: 0 0 .5em;

                        .dot-elastic {
                            position: relative;
                            width: .5em;
                            height: .5em;
                            border-radius: 5px;
                            background-color: #cdcdcd;
                            /* color: #9880ff; */
                            animation: dot-elastic 2s infinite linear;
                            margin-left: 20px;
                            display: inline-block;

                            &::before {
                                content: "";
                                display: inline-block;
                                position: absolute;
                                top: 0;
                                left: -12px;
                                width: .5em;
                                height: .5em;
                                border-radius: 5px;
                                background-color: #cdcdcd;
                                /* color: #9880ff; */
                                animation: dot-elastic-before 2s infinite linear;
                            }
                            &::after {
                                content: "";
                                display: inline-block;
                                position: absolute;
                                top: 0;
                                left: 12px;
                                width: .5em;
                                height: .5em;
                                border-radius: 5px;
                                background-color: #cdcdcd;
                                /* color: #9880ff; */
                                animation: dot-elastic-after 2s infinite linear;
                            }
                        }

                    }

                }

            }
        }
    }

    /* エントリーボタン */
    .btn-entry {
        width: 90%;
        margin: 1% auto 4%;
        pointer-events: none;
        display: flex;
        align-items: center;
        animation-delay: .5s;

        /* 矢印 */
        &::after {
            position: absolute;
            right: min(6vw, 30px);
            bottom: auto;
            display: block;
            content: "";
            width: min(1.5vw, 7px);
            height: min(1.5vw, 7px);
            transform: rotate(45deg);
            border-top: min(.7vw, 3px) solid #fff;
            border-right: min(.7vw, 3px) solid #fff;
            transition: .2s;
        }
    
        /* input ログインボタンの場合 */
        & input, .login-btn{
            display: block;
            width: 100%;
            color: #fff;
            font-size: min(4vw, 20px);
            font-weight: bold;
            padding: .8em 0;
            background: #F9388E;
            background: linear-gradient(0deg, rgba(249, 56, 142, 1) 0%, rgba(245, 103, 167, 1) 100%);
            border-radius: 100px;
            border: 1px solid;
            transition: .2s;
            pointer-events: all;
            cursor: pointer;
        }

        /* クリア or 期間終了後 */
        &.clear, &.finish {
            animation: none;
    
            & input, .login-btn {
                background: #7f7f7f;
            }
    
            .login-btn {
                background: #eb0012;
    
                &:hover {
                    color: #FFF !important;
                }
            }
    
            &::after {
                content: none;
            }
    
        }
    
    }

    /* 応募後 */
    .apply-text {
        width: 96%;
        margin: 0% auto 3%;
        text-align: start;

        & p {
            background: #FFF;
            color: #353535;
            border-radius: 5px;
            border: 1px solid #d3d3d3;
            font-weight: 500;
            font-size: min(3.8vw, 16px);
            padding: .8em 0;
            box-sizing: border-box;
            padding: 1em;

            .min {
                font-size: .9em;
            }
        }
    }

    /* 注意書き */
    .notes-text {
        width: 96%;
        margin: 4% auto 2%;
        text-align: center;
    
        & p {
            background: #FFF;
            color: #222;
            border-radius: 5px;
            border: 1px solid #d3d3d3;
            font-weight: 500;
            font-size: min(3.6vw, 14px);
            padding: .8em 0;
        }
    }

}

/* おすすめカテゴリ */
#pcget #category {
    margin-bottom: 5%;
    border-radius: 5px;
    padding: 6% 3%;

    .col_2 {
        justify-content: start;
    }

    .col_2 .icon {
        gap: 0;
        padding: 0;
    }

    .col_2 {
        & li {
            box-sizing: border-box;
            padding-left: 1%;
        }
        & a {
            &:hover {
                color: #222 !important;
                opacity: .8;
            }
        }
        & p {
            font-size: min(3.3vw, 14px);
            font-weight: 300;
        }
    }

    .icon {
        & span {
            font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
        }
    }

}

/* おすすめ特集 */
#pcget section.event {
    background-color: #FFF;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #d3d3d3;

    .bn {
        width: 100%;
    }
}

/* キャンペーンページに戻る */
#pcget .btn-back {
    background: #8E7C31;
    background: linear-gradient(43deg, rgba(142, 124, 49, 1) 0%, rgba(224, 208, 140, 1) 50%, rgba(142, 124, 49, 1) 60%, rgba(224, 208, 140, 1) 100%);
    display: block;
    width: 90%;
    box-sizing: border-box;
    border-radius: 100px;
    margin: 5% auto 0;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: .2rem;
    box-shadow: 0 22px 8px -19px rgb(65 69 70 / 50%);

    & p {
        display: block;
        width: 100%;
        color: #fff;
        font-size: min(4vw, 20px);
        font-weight: bold;
        padding: .8em 0;
        background: #003DB5;
        background: linear-gradient(90deg, rgba(0, 61, 181, 1) 0%, rgba(0, 33, 118, 1) 100%);
        border-radius: 100px;
        border: 1px solid;
        transition: .2s;
    }
}

/* コピーライト */
#pcget .copy-right {
    margin-top: 2rem;
}

/* 規約 */
#pcget #kiyaku {
    padding: 4% 0 0;
    margin-bottom: 5%;
    background: #FFF;
    border: 2px solid rgb(242 228 249 / 85%);
    border-radius: 5px;

    .wrap_900 {
        padding: 0;
        width: 100%;
    }
    .br_gry {
        padding-top: 0 !important;
    }
    & p {
        font-size: min(3.6vw, 14px) !important;
        font-weight: 300;
    }
}

#pcget .thanks {
    font-size: min(5vw, 25px);
    color: #f9368c;
    font-weight: 600;
    text-align: start;
    background: #FFF;
    margin-bottom: 2%;
    padding: 0.3em 1em;
    box-sizing: border-box;

    .min {
        display: block;
        font-size: .7em;
    }
}