@charset "UTF-8";

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

/* 変数指定 */
:root {
    /* スぺパテキストカラー */
    --main-text-color: #231815;
    --font-size-text: 2.14cqw;
}

/* フッター外の背景も指定 */
body {
 
}
/* パンくず削除 */
#pankuzu {
    display: none;
}
main, main#wrapper {
    padding: 0;
    max-width: none !important;
}
#space-performance img {
    width: 100%;
    height: 100%;
    display: block;
}
#space-performance a {
    display: block;
}
#space-performance a:hover {
    opacity: .7;
}
/* マーカー */
span.marker {
    background: linear-gradient(transparent 60%, #fbab3b99 40%);
    font-weight: bold;
    line-height: 1;
}
/* SVG共通 */
#space-performance svg {
    width: 100%;
    height: auto;
    display: block;
}
/* 価格プロリセット */
.buy_price>ol .spesicalprice, .buy_price>ul .spesicalprice {
    display: none;
}
.buy_price>ul .intax {
    display: none !important;
}
.buy_price>ol .price, .buy_price>ul .price {
    color: #eb0012;
    font-size: 4cqw; /* 30px */
    display:inline-block
}
/* ¥マークの指定 */
.buy_price>ol .price, .buy_price>ul .price::first-letter {
    font-size: 3cqw;
}

/* ヘッダー画像削除 */
.header-info-red a{
    display: none;
}
/* header-sticky 高さ固定 */
.header-sticky {
    /* top: 141px !important; */
}

/* フッター調整 */
footer {
    position: relative;
    z-index: 10;
}
footer,
footer .bottom {
    margin: 0;
}
article#contents {
    padding-bottom: 0 !important;
}
.marker {

}

/*==============================================
 共通 ここまで
================================================*/

/*==============================================
#space-performance 共通 ここから
================================================*/

/* フォント */
#space-performance{
    color: var(--main-text-color);
    font-size: var(--font-size-text);
}
#space-performance p {
    font-size: var(--font-size-text);
}
#space-performance a {
    font-size: 2cqw;
}
#space-performance h2 {
    font-size: 4.5cqw;
    .min {
        font-size: .75em;
    }
}


/* 背景 */
#space-performance .back {
    position: relative;
    z-index: 1;
    background-color: #f0e8dd;
}
#space-performance .back-inner {
    width: 100%;
    margin: 0 auto;
    max-width: 750px;
    box-shadow: 0px 0px 7px 3px #e1d2c6;
}

/* セクション共通 */
#space-performance .section {
    position: relative;
    margin-bottom: 5%;
}

/* 見出し section-title */
/* パターン1 */
#space-performance .section-title.plus {
    width: 100%;
    text-align: center;
    margin-bottom: 2%;
    box-sizing: border-box;
    padding: .5em 0 0;
    position: relative;
    z-index: 1;

    .section-title__h2 {
        font-size: 4.5cqw;
        color: #222;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4%;

        &::after,
        &::before {
            content: '';
            display: block;
            width: 4cqw;
            height: 4cqw;
            background: url(../IMAGE/space-performance/icon-plus.svg) center center no-repeat;
            background-size: contain;
        }
    }
}
/* パターン2 */
#space-performance .section-title.allow {
    position: relative;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 1% 0;
    margin-top: -1%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;

    &::before,
    &::after {
        content: '';
        position: absolute;
        bottom: 0%;
        width: 1cqw;
        height: 50%;
        background-color: #49bdc5;
    }
    &::before {
        left: 0;
    }
    &::after {
        right: 0;
    }

    .section-title__h2 {
        font-size: 4.5cqw;
        color: #222;
        .big {
            font-size: 1.2em;
        }
    }
    .section-title__allow {
        position: relative;
        width: 10%;
        height: 1cqw;
        background-color: #49bdc5;

        .allow-icon {
            width: 4.5cqw;
            position: absolute;
            top: 50%;
            height: auto;
        }
        .allow-icon.left {
            right: -1cqw;
            transform: translateY(-50%);
        }
        .allow-icon.right {
            left: -1cqw;
            transform: translateY(-50%) rotate(180deg);
        }
    }

    .section-title__allow.green {
        background-color: #71ae71;
    }

    .section-title__allow.kaden {
        width: 30%;
    }

    .section-title__allow.kagu {
        width: 18%;
    }

}

/* 色変更 */
#space-performance #combo {
    .section-title.allow {
        &::after {
            background-color: #71ae71;
        }
    }
    .link-area {
        &::after {
            background-color: #71ae71;
        }
    }
}

#space-performance #kagu {
    .section-title.allow {
        &::before,
        &::after {
            background-color: #71ae71;
        }
    }
    .link-area {
        &::before,
        &::after {
            background-color: #71ae71;
        }

        .link-area__allow {
            background-color: #71ae71;
        }
    }
    .link-gallery {
        border-right: 1cqw solid #71ae71;
        border-left: 1cqw solid #71ae71;
    }
}

/* 黒リンクボタン */
#space-performance .link-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    .btn {
        position: relative;
        display: inline-block;
        background-color: #222;
        color: #FFF;
        box-sizing: border-box;
        border: 2px solid #222;
        padding: .6em 1em;
        margin-bottom: 2%;
        width: 90%;
        max-width: 620px;
        text-align: center;
        border-radius: 5px;
        transition: .3s;

        &::after {
            position: absolute;
            display: inline-block;
            vertical-align: middle;
            content: "";
            width: .4em;
            height: .4em;
            border-top: 3px solid #fff;
            border-right: 3px solid #fff;
            top: 0;
            bottom: 0;
            right: 5%;
            margin: auto;
            transform: rotate(45deg);
            transition: all 0.3s ease 0s;
        }
        &:hover {
            opacity: 1;
            color: #222 !important;
            background-color: #FFF;
            border: 2px solid #222;

            &::after {
                border-top: 3px solid #222;
                border-right: 3px solid #222;
            }
        }
    }

    .btn:nth-last-child(1) {
        margin-bottom: 0;
    }

    .link-btn__p {
        text-align: center;
    }

}

#space-performance .link-gallery {
    width: 100%;
    box-sizing: border-box;
    border-right: 1cqw solid #49bdc5;
    border-left: 1cqw solid #49bdc5;
    padding: 1% 0 3%;

    .link-gallery__comment {
        font-size: 2.4cqw;
        text-align: center;

        .num {
            font-size: 1.8em;
        }
    }

    .link-gallery__flex {
        display: flex;
        justify-content: center;
        gap: 2%;
    
        .link-gallery__flex--img {
            width: 20.9%;
            border-radius: 5px;
            border: 1px solid #c9c9c9;
        }
    }
}

/* 回遊エリア */
#space-performance .link-area {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .link-area__comment {
        text-align: center;
    }



    .link-area__allow {
        position: relative;
        width: 10%;
        height: 1cqw;
        background-color: #49bdc5;

        .allow-icon {
            width: 4.5cqw;
            position: absolute;
            height: auto;
            right: -1cqw;
            top: 50%;
            transform: translateY(-50%);
        }
        .allow-icon.left {
            width: 4.5cqw;
            position: absolute;
            right: -1cqw;
            top: 50%;
            transform: translateY(-50%);
        }
        .allow-icon.right {
            width: 4.5cqw;
            position: absolute;
            left: -1cqw;
            top: 50%;
            transform: translateY(-50%) rotate(180deg);
        }
    }

    .link-area__allow.green {
        background-color: #71ae71;
    }

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0%;
        width: 1cqw;
        height: 50%;
        background-color: #49bdc5;
    }
    &::before {
        left: 0;
    }
    &::after {
        right: 0;
    }
}

/* ページTOPボタン */
#space-performance .link-btn.page-top {
    padding-bottom: 3%;
    .btn {
        width: 70%;
        &::after {
            transform: translateY(24%) rotate(-45deg);
        }
    }
}

/* キーフレーム：クローズボタンフェードイン */
@keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

/*==============================================
#space-performance 共通 ここまで
================================================*/

#space-performance{
    background: url(../IMAGE/space-performance/outer-pc.webp) center center / cover;
    background-attachment: fixed;
}

#space-performance .space-performance__inner {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    min-height: 1000px;
    /* background: url(../IMAGE/space-performance/outer-pc.jpg) center center /contain; */
    /* コンテナ要素定義 */
    container-type: inline-size;
    box-shadow: 0 0 7px 3px #e1e1e1;
}

#space-performance #top {
    position: relative;
    overflow-x: clip;

    .top-item {
        width: 100%;
        background-color: #FFF;
        box-sizing: border-box;
        padding: 1% 3%;
        margin-bottom: 2%;

        .top-item__h2 {
            text-align: center;
            margin: 0% 0 2%;
            font-size: 3cqw;
        }

        .top-item__img {
            width: 85%;
            max-width: 400px;
            margin: 0 auto;
        }

        .price-wrap {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: baseline;

            .total-price {
                width: 100%;
                text-align: center;
                font-size: 2.5cqw;
                margin-bottom: -1%;
                .num {
                    color: #dd0112;
                    font-size: 1.2em;
                }
            }

            .name-h3 {
                font-size: 4.5cqw;
                margin-right: 1cqw;
                .num {
                    font-size: 1.2em;
                    line-height: 0;
                }
            }
            .price {
                font-size: 4.5cqw;
            }
        }

        .top-item__btn {
            position: relative;
            width: 90%;
            max-width: 600px;
            margin: 1% auto 4%;
            padding: .5em 0;
            text-align: center;
            background-color: #dd0112;
            color: #FFF !important;
            border-radius: 5px;
            font-size: 2.5cqw;

            &::after {
                position: absolute;
                display: inline-block;
                vertical-align: middle;
                content: "";
                width: .3em;
                height: .3em;
                border-top: 3px solid #fff;
                border-right: 3px solid #fff;
                top: 0;
                bottom: 0;
                right: 4%;
                margin: auto;
                transform: rotate(45deg);
                transition: all 0.3s ease 0s;
            }
        }

        .top-item__btn.revo {
            margin: 1% auto 4%;
            background-color: #959595;

            &::after {
                transform: rotate(135deg);
            }
        }
    }
}

/* ==============================================
キャンペーン紹介
================================================*/

#space-performance #summary {
    position: relative;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 2% 0% 3%;

    .summaryTop-inner {
        padding: 0 5%;

        /* 見出し */
        .summaryTop-title {
            position: relative;
            z-index: 1;
            display: flex;
            margin-bottom: -2.5%;
            box-sizing: border-box;


            & h2 {
                color: #3a1e06;
                font-weight: 900;
                line-height: 1;
                font-size: 4.2cqw;
                text-align: center;

                & span {
                    font-size: .9em;
                    font-weight: 900;
                    line-height: 1.3;
                }
            }

            .img {
                width: 21%;
                margin-top: -3%;
            }
        }

        /* 特典内容 */
        .summaryTop-camp {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            padding: 4%;
            background-color: #004597;
            border-radius: 5px;
            margin-bottom: 1%;

            /* 共通 */
            .summaryTop-camp--item {
                display: flex;
                box-sizing: border-box;
                padding: 0;
                width: 100%;
                gap: 1%;
                transform: rotate(-3deg);

                .text {
                    display: flex;
                    flex-direction: column;
                }

                & p {
                    color: #FFF;
                    font-size: 4.5cqw;
                    font-weight: 600;
                    line-height: 1.2;
                    letter-spacing: .03px;
                    white-space: nowrap;

                    & span {
                      font-size: 1em;  
                    }

                    /* 数字指定 */
                    & span.num {
                        font-size: 1.3em;
                    }

                }
                .min {
                    font-size: .8em;
                }
                .white-back{
                    background: #FFF;
                    display: inline-flex;
                    align-items: baseline;
                    line-height: 1;
                    color: #c5121d;
                    padding: 0 .15em .08em .08em;
                    white-space: nowrap;
                    font-weight: 800;
                    letter-spacing: 1px;

                    & span {
                        color: #c5121d;
                        line-height: 1;
                    }
                    
                }
                .num {
                    font-family: 'Lato',"Zen Kaku Gothic New",'Noto Sans JP','Yu Gothic black',sans-serif,'メイリオ';
                    font-weight: bold;
                    letter-spacing: .01px;
                    margin-right: .08em;
                }

            }

            .kome {
                margin-top: 2%;
                font-size: 2cqw;
                color: #FFF;
                line-height: 1.4;
            }

            /* 5000円ギフトカード */
            .summaryTop-camp--item.gift5000 {
                transform: rotate(-3deg);
                margin-bottom: 2%;

                .img {
                    width: 24%;
                }
            }

            /* アイリスバスケット */
            .summaryTop-camp--item.basket {
                transform: rotate(2deg);
                justify-content: end;

                .img {
                    width: 20%;
                    margin-top: -1%;
                    margin-left: 1%;
                }
                .text {
                    align-items: end;

                    & p {
       
                    }
                }

            }

            /* 5%OFF */
            .summaryTop-camp--item.sale {
                transform: rotate(-3deg);
                margin-top: -2%;
                margin-bottom: 3%;
                .img {
                    width: 21%;
                    margin-top: -3%;
                }
                & p {

                }
            }

            /* 取り置き */
            .summaryTop-camp--item.keep {
                transform: rotate(-3deg);
                margin-bottom: -3%;
                .img {
                    width: 16%;
                    transform: translateY(-16%);
                    margin-right: 1%;
                }
                .text {
                    margin-top: -1%;
                }
                .p-1{
                }
                .p-2{
                    letter-spacing: 2px;
                }
            }

            /* ギフトカード1000 */
            .summaryTop-camp--item.gift1000 {
                transform: rotate(2deg);
                justify-content: end;
                .img {
                    width: 26%;
                }
                .text {
                    align-items: end;
                    margin-right: 1%;
                    .p-1 {

                    }
                    .p-2 .normal {

                    }
                }
                
            }

            /* 四角形装飾 */
            .summaryTop-square  {
                position: absolute;
                bottom: 19%;
                right: 0;
                display: flex;

                & > span  {
                    width: 2cqw;
                    height: 2cqw;
                    background-color: #FFF;
                    margin-right: 2cqw;
                }

                & > span:nth-child(even) {
                    background-color: #c5121d;
                }
            }

        }

    }

    /* 早期特典用 */
    .summaryTop-inner.early-camp {

        .summaryTop-title {
            justify-content: center;
            align-items: center;
            margin-bottom: 0%;

            & h2 {
                text-align: end;
                line-height: 1.1;
            }

            .img {
                width: 38%;
                margin-top: 0%;
            }

        }

        .summaryTop-camp {
            background-color: #e11b8d;
            padding: 4% 4% 2%;
            margin-bottom: 2%;
        }

        /* 四角形装飾 */
        .summaryTop-square  {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            flex-direction: column;

            & > span  {
                background-color: #004597;
                margin-top: 2cqw;
            }

            & > span:nth-child(2n) {
                background-color: #FFF;
            }
        }
        
    }

    /* モーダル */
    .summaryTop-camp--modal {

        & input {
            display: none;
        }

        /* ボタンカーソル */
        .modal__open-label,
        .modal__close-label {
            cursor: pointer;
        }

        /* 開くボタン */
        .modal__open-label {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            padding: .5em 0em;
            border: none;
            border-radius: 5px;
            background-color: #222;
            color: #ffffff;
            box-sizing: border-box;
            border: 1px solid #FFF;
            font-weight: 600;
            font-size: 1.1em;

            /* ポップアップアイコン */
            i {
                position: absolute;
                right: 5%;
                font-size: 1.5em;
            }
        }

        /* モーダル */
        .modal {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: none;

            /* コンテンツラップ */
            .modal__content-wrap {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 90%;
                max-width: 550px;
                background-color: #fefefe;
                z-index: 2;
                border-radius: 5px;

                /* 閉じるボタン */
                .modal__close-label {
                    background-color: #777;
                    color: #fff;
                    border: 2px solid #fff;
                    border-radius: 100vw;
                    width: 6cqw;
                    height: 6cqw;
                    line-height: 0;
                    position: fixed;
                    top: -4%;
                    right: -2%;
                    z-index: 99;
                    font-size: 2cqw;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-sizing: border-box;
                    padding-bottom: 0%;
                }

                /* コンテンツ */
                .modal__content {
                    overflow-y: auto;
                    padding: 4%;

                    /* 区切り */
                    .modal__content--box {
                        margin-bottom: 2%;
                    }
                    /* 見出し */
                    .modal__content--title {
                        text-align: center;
                        color: #FFF;
                        background-color: #004597;
                        margin-bottom: 2%;
                    }

                    .modal__content__box {
                        width: 100%;
                        margin-bottom: 3%;
                    }

                    & h5 {
                        font-size: 2.5cqw;

                        .min {
                            font-size: .9em;
                        }
                        
                        &::before {
                            content: '■';
                            font-size: .8em;
                            margin-right: 1%;
                        }
                    }

                    & p {
                        font-size: 2.0cqw;
                        letter-spacing: -.2px;
                        font-weight: 500;

                        & span {
                            font-size: 1.0em;
                        }
                    }

                    .kome {
                        color: #222;
                        margin-top: 1%;
                        font-size: .9rem;
                    }

                    .modal__content--flex {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        gap: 3%;
                        justify-content: center;
                        background: #faf0e3;
                        box-sizing: border-box;
                        padding: 2%;

                        .sword-icon {
                            width: 8%;
                            font-size: 3cqw;
                            text-align: center;
                        }

                        .img {
                            position: relative;
                            width: 42%;
                            & i {
                                position: absolute;
                                right: 3%;
                                bottom: 3%;
                                color: #FFF;
                                background-color: #eb0012;
                                font-size: 2em;
                                padding: .2em;
                                border-radius: 100vw;
                            }
                        }

                    }

                }

            }

            /* グレーバック */
            .modal__background {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, .45);
                z-index: 1;
            }
        }

        .modal__open-input:checked + label + input + .modal {
            display: block;
            animation: fadein .6s;
        }

    }

    /* モーダル（早期特典） */
    .summaryTop-camp--modal.early {
        margin-top: 2%;

        /* モーダル */
        .modal {
            /* コンテンツラップ */
            .modal__content-wrap {

                /* コンテンツ */
                .modal__content {

                    /* 見出し */
                    .modal__content--title {
                        background-color: #e11b8d;
                    }

                }

            }
        }
    }

    /* アンカーボタン */
    .summary-content__aunker {
        position: relative;
        width: 90%;
        margin: 0 auto;
        border-radius: 5px;
        background-color: #FFF;
        color: var(--main-text-color);
        font-size: 1rem;
        border: 1px solid var(--main-text-color);
        padding: .4em 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;

        &::after {
            position: absolute;
            right: 5%;
            transform: translateY(-25%) rotate(45deg);
            width: 6px;
            height: 6px;
            border-bottom: 3px solid var(--main-text-color);
            border-right: 3px solid var(--main-text-color);
            content: '';
        }

        &:hover {
            color: #FFF !important;
            background-color: var(--main-text-color);
            opacity: 1;

            &::after {
                border-bottom: 3px solid #FFF;
                border-right: 3px solid #FFF;
            }
        }
    }

    /* 装飾 */
    .summary-iconArea {
        width: 100%;
        height: 1.5cqw;
        background: url(../../IMAGE/space-performance/icon-crossplus.svg) center;
    }
    .summary-iconArea.top {
        margin-bottom: 3cqw;
    }
    .summary-iconArea.btm {
        margin-top: 2cqw;
    }

}

/*==============================================
キャンペーン解説 ここまで
================================================*/

/*==============================================
アンカー ここから
================================================*/

#space-performance #anchor {
    .anchor-contents {
        display: grid;
        width: 90%; 
        margin: 0 auto;
        grid-template-columns: 48% 42%;
        grid-template-rows: 1fr 1fr;
        grid-gap: 2%;
        justify-content: center;
        margin-bottom: 2%;

        .anchor-contents__item {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            text-align: center;
            box-sizing: border-box;
            border: 1px solid var(--main-text-color);
            border-radius: 5px;
            font-size: var(--font-size-text);

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

        .anchor-contents__item-1 {
            aspect-ratio: 1 / 1;
            grid-row: 1 / 3;
            grid-column: 1 / 2;
            line-height: 1.3;
            padding: 1.5%;
        }
        .anchor-contents__item-2 {
            grid-row: 1 / 2;
            grid-column: 2 / 3;
        }
        .anchor-contents__item-3 {
            grid-row: 2 / 3;
            grid-column: 2 / 3;
        }
    }

    .link-btn .btn::after {
        transform: rotate(135deg);
    }
}

/*==============================================
アンカー ここまで
================================================*/

/*==============================================
商品リスト ここから
================================================*/

#space-performance .item-section .item-area {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 5%;
    border-right: 1cqw solid #49bdc5;
    border-left: 1cqw solid #49bdc5;

    .item {
        width: 100%;
        box-sizing: border-box;
        padding: 1.5%;
        margin: 0 auto 3%;
        display: flex;
        background-color: #FFF;
        border-radius: 3px;
        border: .3cqw solid #acacac;
        box-shadow: .3cqw .3cqw 0 0 #acacac;

        /* 商品リスト：サムネイル */
        .item-thumb {
            width: 35%;
            display: flex;
            align-items: center;

            .item-thumb__img {
                box-sizing: border-box;
                padding: 1%;
            }
        }

        /* 商品リスト：コンテンツ */
        .item-content {
            width: 65%;
            box-sizing: border-box;
            padding: 1% 2% 1% 3%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            /* 商品リスト：タグ */
            .tug {
                display: flex;
                flex-wrap: wrap;
                gap: 1%;
                color: #FFF;
                margin-bottom: 0;

                & span {
                    background-color: #303030;
                    margin-bottom: 1.5%;
                    font-size: 1.8cqw;
                    padding: .1em .4em;
                    white-space: nowrap;
                    line-height: 1.6;
                }
            }

            /* 商品リスト：商品名 */
            .name {
                display: flex;
                align-items: center;

                .name-h3 {
                    font-size: 2.9cqw;
                    padding: .2em 0 .4em;

                    .num {
                        font-size: 1.6em;
                        line-height: 1;
                        font-weight: bolder;
                        letter-spacing: 0;
                    }
                }
            }

            /* color */
            .color {
                display: flex;
                margin-bottom: 1%;
                
                & span {
                    display: block;
                    border-radius: 100vw;
                    text-align: center;
                    font-size: 2cqw;
                    padding: 0 8%;
                    margin-right: 2%;
                }
                
                & span:nth-last-child(1) {
                    margin-right: 0;
                }

                .black {
                    background-color: #222;
                    color: #FFF;
                    border: 1px solid #222;
                }

                .white {
                    background-color: #FFF;
                    color: #222;
                    border: 1px solid #222;
                }

                .natural {
                    background-color: #8a6e5b;
                    color: #FFF;
                    border: 1px solid #8a6e5b;
                }
            }

            /* 商品リスト：単品合計価格 */
            .total-price {
                font-size: 2.2cqw;
                white-space: nowrap;

                .num {
                    color: #eb0012;
                    font-size: 2.8cqw;
                }
            }

            /* 商品リスト：価格 */
            .price-wrap {
                position: relative;
                display: flex;
                align-items: center;
                margin-bottom: 1%;

                /* 商品リスト：お気に入り */
                .favo {
                    position: absolute;
                    right: 8%;
                    .action-wish:after, .action-wish:before {
                        font-size: 30px;
                    }
                }
                /* 商品リスト：キャンペーンアイコン */
                .camp {
                    display: flex;
                    gap: 3%;
                    margin-left: 2%;

                    .img {
                        display: flex;
                        align-items: center;
                        width: 23%;
                        box-sizing: border-box;
                        padding: 2.5% 3.5% 2.5% 2.5%;
                        border-radius: 2px;
                        color: #FFF;
                        & img {
                            height: auto;
                        }
                    }

                    .point {
                        background: #a6a40e;
                        display: flex;
                        align-items: center;
                        border-radius: .3cqw;
                        & p {
                            color: #fff;
                            padding: 0 .3em;
                            margin-bottom: -.2em;
                            font-size: 2.2cqw;
                            white-space: nowrap;
                        }
                        .num {
                            font-size: 1.1em;
                            line-height: 0;
                        }
                    }

                    .img.early-camp {
                        background: #e01b8e;
                    }

                    .img.revo-camp {
                        background: #1b5ce0;
                    }
                }
            }

            .cart{
                position: relative;
                width: 100%;

                & a{
                    width: 100%;
                    background-color: #eb0012;
                    color: #FFF;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: .5em 0;
                    border-radius: 3px;
                    gap: 2%;

                    &:hover{
                        color: #FFF !important;
                    }

                    & i{
                        font-size: 3cqw;
                    }
                }
                &::after {
                    position: absolute;
                    display: inline-block;
                    vertical-align: middle;
                    content: "";
                    width: .3em;
                    height: .3em;
                    border-top: 2px solid #fff;
                    border-right: 2px solid #fff;
                    top: 0;
                    bottom: 0;
                    right: 5%;
                    margin: auto;
                    transform: rotate(45deg);
                    transition: all 0.3s ease 0s;
                }
            }


        }

    }
}

/* 250306追加 */
#space-performance .single-item-area {
    .point {
        background: #a6a40e;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: .6cqw;
        margin-left: .6cqw;
        width: 14cqw;
        height: 3.5cqw;
        margin-left: 1cqw;
        box-sizing: border-box;
        padding-bottom: 0.1cqw;

        & p {
            color: #fff;
            padding: 0 .3em;
            font-size: 2.0cqw;
            white-space: nowrap;
        }
        .num {
            font-size: 1.1em;
            line-height: 0;
        }
    }
    .sale-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e50012;
        color: #FFF;
        width: 10cqw;
        text-align: center;
        border-radius: .6cqw;
        height: 3.5cqw;
        font-size: 2cqw;
        line-height: 0;
        margin-left: 1cqw;
    }
    
}
/* 250306追加 */

#space-performance .item-section .item-area.combo {
    border-right: 1cqw solid #71ae71;
}

#space-performance .item-section .item-area.kagu {
    border-left: 1cqw solid #71ae71;
    border-right: 1cqw solid #71ae71;
}

/*==============================================
商品リスト ここまで
================================================*/

/*==============================================
単品 ここから
================================================*/

#space-performance #single {

    /* 色変更ボタン */
    .switch-btn {
        z-index: 10;
        width: 100%;
        margin: 0 auto 3%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 1% 5% 2%;
        background: #d3d3d3;

        .switch-btn__text {
            width: 100%;
            text-align: center;
            font-size: 2cqw;
        }

        .switch-btn__color {
            width: 49%;
            padding: 0 1em;
            box-sizing: border-box;
            text-align: center;
            padding: .5em 0 .3em;
            border-radius: .5cqw;
            cursor: pointer;
            transition: .3s;
            opacity: .7;
            box-shadow: .3cqw .3cqw 0 0 #787878;

            .title {
                line-height: 1;
                font-size: 3.5cqw;
                letter-spacing: 0;
            }
            .sub-title {
                font-size: 1.6cqw;
                letter-spacing: .3em;
            }

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

        /* natural Black */
        .switch-btn__color.black {
            background-color: var(--main-text-color);
            border: 1px solid var(--main-text-color);
            
            .title {
                color: #FFF;
            }
            .sub-title {
                color: #FFF;
            }
            
        }

        /* natural white */
        .switch-btn__color.white {
            background-color: #ececed;
            border: 1px solid var(--main-text-color);

            .title {
                color: var(--main-text-color);
            }
            .sub-title {
                color: var(--main-text-color);
            }
        }

        .switch-btn__color.active {
            opacity: 1;
        }

    }

    /* 色ごとのテキスト */
    .single-comment {
        width: 100%;
        text-align: center;
        color: var(--main-text-color);
        letter-spacing: 0.1em;
        margin-bottom: 3%;
    }

    .single-item-area {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        .item {
            width: 43%;
            background: #FFF;
            border-radius: .5cqw;
            border: .3cqw solid #acacac;
            box-shadow: .3cqw .3cqw 0 0 #acacac;
            margin-bottom: 5%;

            &:nth-child(2n - 1) {
                margin-right: 3%;
            }

            .item-thumb {
                margin-bottom: 3%;
            }

            /* 色玉 */
            .color {
                width: 100%;
                box-sizing: border-box;
                padding: 0 2.5%;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                margin-bottom: 1%;

                .color-icon {
                    position: relative;
                    display: block;
                    border-radius: .5cqw;
                    text-align: center;
                    font-size: 2cqw;
                    width: 95%;
                    transition: .3s;
                    margin-bottom: 3%;
                    box-sizing: border-box;
                    padding: .2em 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    /* クリック */
                    &::after {
                        position: absolute;
                        right: 5%;
                        display: block;
                        content: "";
                        width: .4em;
                        height: .4em;
                        transform: rotate(45deg);
                    }

                    /* ホバー時 */
                    &:hover {
                        opacity: 1;
                        transform: scale(1.01);
                        color: #FFF !important;
                        transition: .3s;
                    }
                }

                .black {
                    background-color: #222;
                    color: #FFF;
                    border: 1px solid #222;

                    /* クリック */
                    &::after {
                        border-top: 2px solid #fff;
                        border-right: 2px solid #fff;
                    }

                    /* ホバー時 */
                    &:hover {
                        color: #FFF !important;
                    }
                }

                .white {
                    background-color: #FFF;
                    color: #222;
                    border: 1px solid #222;

                    /* クリック */
                    &::after {
                        border-top: 2px solid var(--main-text-color);
                        border-right: 2px solid var(--main-text-color);
                    }

                     /* ホバー時 */
                     &:hover {
                        color: var(--main-text-color) !important;
                    }
                }

                .natural {
                    background-color: #8a6e5b;
                    color: #FFF;
                    border: 1px solid #8a6e5b;
                     /* ホバー時 */
                     &:hover {
                        transform: scale(1.01);
                        color: var(--main-text-color) !important;
                        transition: .3s;
                    }
                }

                

            }

            /* 商品名 */
            .name {
                .name-h3 {
                    font-size: 2.5cqw;
                    text-align: center;
                    color: var(--main-text-color) !important;
                }
            }

            /* 価格 */
            .price-wrap {
                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                margin-bottom: 1%;
            }

        }

        .item.cal1 {
            width: 90%;
            margin: 0 auto 5%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            box-sizing: border-box;
            padding: 3%;

            .item-thumb {
                width: 50%;
                margin-bottom: 0;
                border-radius: 5px;
                overflow: hidden;
            }

            .item-thumb__sub {
                margin: 0 auto;
                width: 45%;
            }

            .item-content {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: baseline;

                .name {
                    .name-h3 {
                        font-size: 4cqw;
                        margin-right: 2cqw;
                    }
                }

                .normal-price {
                    width: 100%;
                    font-size: 2cqw;
                    color: #676767;
                    text-align: center;
                
                    .num {
                        font-size: 1.2em;
                        text-decoration: line-through;
                    }
                }

                .buy_price>ol .price, .buy_price>ul .price {
                    font-size: 5cqw;
                }
            }

            .color {
                justify-content: space-between;

                .color-icon {
                    width: 49%;
                    padding: .5em;
                    margin: 0;
                }
            }
        }

    }
}

/*==============================================
単品 ここまで
================================================*/

/*==============================================
キャンペーンの詳細 ここから
================================================*/

#space-performance #info {
    width: 100%;
    box-sizing: border-box;
    background: #efefef;
    margin: 0 auto;

    .section-title {
        .section-title__h2 {
            font-size: 4.2cqw;
        }
    }

    /* インフォメーション：アンカー */
    .info-aunker {
        display: flex;
        width: 88%;
        margin: 0 auto;
        gap: 2%;

        .info-aunker__link {
            width: 50%;
        }
    }

    .info__contents {
        width: 87%;
        margin: 3% auto 5%;
        box-sizing: border-box;
        padding: 5% 0 2%;
        border-radius: 5px;

        /* インフォメーション：インナータイトル */
        .info__contents--title {
            width: 80%;
            max-width: 370px;
            margin: 0 auto 5%;
            text-align: center;
        }

        .info-inner {
            width: 90%;
            background-color: #FFF;
            margin: 0 auto 3%;
            box-sizing: border-box;
            border-radius: 5px;
            overflow: hidden;

            .info-inner--title {
                font-size: 1.3rem;
                text-align: center;
                margin-bottom: 3%;
                color: #FFF;
                padding: .1em;
            }

            .info-flex{
                display: flex;
                justify-content: center;
                gap: 5%;
                margin-bottom: 3%;
    
                .flex-item.icon{
                    width: 20%;
                    border-radius: 5px;
                    overflow: hidden;
                }
    
                .flex-item.cap{
                    width: 70%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
    
            /* テキストエリア */
            .text-box {
                width: 90%;
                max-width: 500px;
                margin: 0 auto 3%;
    
                /* テキストエリア:項目 */
                .text-box__item {
                    width: 100%;
                    margin: 0 auto 3%;
    
                    /* 見出し */
                    h5 {
                        font-size: 2.2cqw;
                    }

                    & h5::before {
                        content: '■';
                        font-size: 2cqw;
                        vertical-align: bottom;
                    }
    
                    /* 注意書き */
                    .kome {
                        font-size: 1.8cqw;
                    }
    
                    /* リンク */
                    .text-link {
                        font-size: 1.9cqw;
                        color: #1b5ce0;
                        display: flex;
                        align-items: center;
                        text-decoration: underline;
    
                        &::after {
                            content: '';
                            transform: translateY(0.05em) rotate(-45deg);
                            margin-left: 2%;
                            width: 5px;
                            height: 5px;
                            border-bottom: 2px solid #1b5ce0;
                            border-right: 2px solid #1b5ce0;
                        }
    
                    }

                    /* 例 */
                    .example {
                        margin-top: 1em;
                        font-size: 1.9cqw;
                    }

                    /* 文字サイズ */
                    & p {
                        font-size: 1.9cqw;
                    }
                    & p span {
                        font-size: 1em;
                    }
    
                    /* 条件の図解 */
                    .text-box__item--img {
                        position: relative;
                        display: flex;
                        align-items: center;
                        background-color: #f0e8dd;
                        box-sizing: border-box;
                        padding: 3%;
                        border-radius: 5px;
                        width: 100%;
                        margin: 2% 0;
                        gap: 2%;
    
                        .img {
                            position: relative;
                            
                            /* カートアイコン */
                            i {
                                position: absolute;
                                right: 3%;
                                bottom: 3%;
                                color: #FFF;
                                background-color: #eb0012;
                                font-size: 2rem;
                                padding: 0.3em;
                                border-radius: 100vw;
                            }
                        }
    
                        /* 剣アイコン */
                        .sword-icon {
                            width: 10%;
                            text-align: center;
                            font-size: 3cqw;
                        }
                    }
                }
            }

            /* リンクボタン余白 */
            .link-btn {
                margin-bottom: 5%;
            }

        }

    }

    /* セット革命用 */
    .info__contents.revo-camp {

        .flex-item.icon {
            border: 3px solid #1b5ce0;
        }

        /* インフォメーション：インナータイトル（早期特典） */
        .info-inner--title {
            background: #1b5ce0;
        }
    }

    /* 早期特典用 */
    .info__contents.early-camp {
        background-color: #ffeced;
        
        .flex-item.icon {
            border: 3px solid #e01b8e;
        }

        /* インフォメーション：インナータイトル（セット革命） */
        .info-inner--title {
            background: #e01b8e;
        }
    }

}

/*==============================================
キャンペーンの詳細 ここまで
================================================*/

/*==============================================
ナビゲーション ここから
================================================*/
#space-performance #nav {
    position: fixed;
    z-index: 10;
    bottom: 0%;
    right: 0%;
    height: 100vh;
}
#space-performance #nav.panelactive{
    width: 100%;
}
#space-performance #nav .gray-back{
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #5656566b;
}
#space-performance #nav .gray-back.active{
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#space-performance #nav .g-nav{
    position: absolute;
    z-index: 5;
    right: 0;
    /* スクロールバー分も */
    width: calc((100vw - 765px) / 2);
    height: calc(100vh - 115px);
    display: flex;
    align-items: center;
    transition: .55s;
    border-radius: 0 0 5px 5px;
    z-index: 5;
}
#space-performance #nav .nav-title {
    position: relative;
    width: 100%;
}
#space-performance #nav .g-nav-list .title{
    width: 80%;
    max-width: 280px;
    margin: 0 auto 5%;
}
#space-performance #nav .g-nav-list .g-nav-link{
    color: #FFF;
    text-align: center;
    width: 100%;
    max-width: 300px;
}
#space-performance #nav .g-nav-list .g-nav-link a{
    padding: 1em 0;
    color: var(--main-text-color);
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px dashed #c9c9c9;
}
#space-performance #nav .g-nav-list .g-nav-link a::after {
    transform: translateY(0.05em) rotate(-45deg);
    margin-left: 2%;
    width: 5px;
    height: 5px;
    border-bottom: 3px solid var(--main-text-color);
    border-right: 3px solid var(--main-text-color);
    content: '';
}
#space-performance #nav .g-nav-list .nav-img{
    position: absolute;
    bottom: .1px;
    right: .1px;
    width: 32%;
    animation: hyoko 1s .4s both ease-in-out;
    display: block;
}

/*アクティブクラスがついたら位置を0に*/
#space-performance #nav .g-nav.panelactive{
    top: 141px;
    transform: translateY(0%);
}

/*ナビゲーションの縦スクロール*/
#space-performance #nav .g-nav .g-nav-list{
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    width: max-content;
    padding: 4%;
    border-radius: 5px;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: #ffffffbf;
}

/*========= ボタンのためのCSS ===============*/
#space-performance #nav .openbtn1{
    display: none;
    position:fixed;
    z-index: 10;/*ボタンを最前面に*/
    bottom: 2%;
    right: 2%;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background: #49bcc5;
    box-sizing: border-box;
    border: 1px solid #FFF;
}
#space-performance #nav .openbtn1.active {
    background-color: #ffffff;
}
/*×に変化*/  
#space-performance #nav .openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 13.5px;
    height: 3px;
    border-radius: 2px;
    background: #FFF;
    width: 45%;
}
#space-performance #nav .openbtn1 p{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    text-align: center;
    left: 19.5%;
    bottom: 7%;
    font-size: .7rem;
    color: #FFF;
}
#space-performance #nav .openbtn1 span:nth-of-type(1) {
  top:16px; 
}
#space-performance #nav .openbtn1 span:nth-of-type(2) {
  top:24px;
}
#space-performance #nav .openbtn1 span:nth-of-type(3) {
  top:32px;
}
#space-performance #nav .openbtn1.active p{
    color: #FFF;
}
#space-performance #nav .openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 17px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
    background: #49bcc5;
}
#space-performance #nav .openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}
#space-performance #nav .openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 17px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
    background: #49bcc5;
}

/* タブレット用 */
@media screen and (max-width: 1400px) {
    #space-performance #nav .g-nav .g-nav-list {
        background-color: #fffcf8;
        width: 90%;
        height: auto;
        max-width: 400px;
        box-sizing: border-box;
        padding: 4% 3%;
        border-radius: 5px;
    }
    #space-performance #nav .openbtn1 {
        display: block;
    }
    #space-performance #nav .g-nav {
        top: 0;
        right: 0;
        transform: translateY(-100%);
        background: #49bcc5;
        width: 100vw;
    }
    #space-performance #nav .g-nav-list .g-nav-link {
        width: 100%;
        color: #FFF;
    }
    #space-performance #nav .g-nav-list .nav-img{
        animation: none;
    }
    #space-performance #nav .g-nav.panelactive .g-nav-list .nav-img{
        animation: hyoko 1s .4s both ease-in-out;
    }
}

/*==============================================
ナビゲーション ここまで
================================================*/

/*==============================================
PC限定スライダー ここから
================================================*/
/* スライダー */
#space-performance #aside {
    position: fixed;
    left: 0;
    width: calc((100% - 750px) / 2);
    height: calc(100vh - 115px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0 2%;
    gap: 1%;

    .aside-box {
        width: 20vh;

        & h2 {
            width: 100%;
        }
    
        .aside-text {
            text-align: center;
            font-size: 1rem;
        }
        .newlife-img {
            width: 100%;
            margin-bottom: 3%;
        }
    
        .link-btn {
            .btn {
                width: 100%;
                background-color: #d20c1c;
                border: 2px solid #91232b;
                font-size: 1rem;
                &:hover {
                    color: #d20c1c !important;
                    background-color: #FFF;
                    border: 2px solid #91232b;
    
                    &::after {
                        border-top: 3px solid #d20c1c;
                        border-right: 3px solid #d20c1c;
                    }
                }
            }
        }
    }

}

/* タブレット用 */
@media screen and (max-width: 1400px) {
    #space-performance #aside {
        display: none;
    }
}
/*==============================================
PC限定スライダー ここまで
================================================*/

/*==============================================
新生活誘導バナー ここから
================================================*/
#space-performance #event {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin-bottom: 1%;
    margin-top: 2%;
    & h2 {
        text-align: center;
        font-size: 3.5cqw;
    }
    & a {
        overflow: hidden;
        border-radius: 5px;
    }
    .swiper {
        position: relative;
        width: 100%;
        overflow: hidden;
        .swiper-wrapper {
            width: 100%;
            .swiper-slide {
                width: 60%;
                margin: 0 auto;
                border-radius: 5px;
                overflow: hidden;
                transition: .3s;
                transform: scale(.8); /* 左右のスライドを小さくする */

                &:hover {
                    opacity: 1 !important;
                }
            }
            .swiper-slide-active {
                transform: scale(1); /* 中央のスライドは小さくしない */
                z-index: 1; /* 中央のスライドを一番上にする */
            }
        }
        .swiper-button-next,
        .swiper-button-prev {
            background-image: none;
            width: auto;
            height: auto;
            top: 50%;
            transform: translateY(-52%);
        }
        .swiper-button-next {
            right: 2%;
        }
        .swiper-button-prev {
            left: 2%;
        }
        .swiper-button-next:after,
        .swiper-button-prev:after {
            font-family: "Material Icons Outlined";
            content: "chevron_left";
            background-color: rgb(0, 0, 0, .2);
            border: 1px solid #fff;
            color: #fff;
            border-radius: 50%;
            height: 8cqw;
            width: 8cqw;
            max-height: 2rem;
            max-width: 2rem;
            font-size: min(6cqw, 1.5rem);
            font-weight: 200;
            margin: auto;
            z-index: 9;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            cursor: pointer;
        }
        .swiper-button-next:after {
            transform: rotate(180deg);
        }
    }
    /* .video-youtube {
        width: 90%;
        margin: 0 auto;
    }
    
    .video-youtube iframe {
        aspect-ratio: 560 / 315;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        overflow: hidden;
    }
    .link-btn .btn {
        background-color: #dd0112;
        border: 1px solid #dd0112;
        width: 90%;
        margin-top: 1%;
        max-width: none;
        &:hover {
            transform: scale(1.02);
            color: #FFF !important;
            border: 1px solid #dd0112;
            &::after {
                border-top: 3px solid #fff !important;
                border-right: 3px solid #fff !important;
            }
        }
    } */
}
/*==============================================
新生活誘導バナー ここまで
================================================*/

/* 指定日配送BOX */
#space-performance .item-reserve {
    width: 93%;
    box-sizing: border-box;
    margin: 0 auto 3%;
    box-shadow: 0 4px 4px rgb(0 0 0 / 5%), 0 2px 3px -2px rgb(0 0 0 / 1%);
   
    color: #333333;
    text-align: center;

    .item-reserve__content {
        width: 100%;
        box-shadow: 2px 2px 2px rgb(0 0 0 / 10%);
        background-image: linear-gradient(transparent calc(100% - 1px), #e6edf3 50%, #e6edf3), linear-gradient(90deg, transparent calc(100% - 1px), #e6edf3 50%, #e6edf3);
        background-size: 15px 15px;
        background-repeat: repeat;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 3%;

        .title {
            .title-p {
                font-size: 3cqw;
                position: relative;
                margin: 0 auto 2cqw;
                display: inline-block;
                padding: .2em 3em;
                border-radius: 2px;
                background-color: #49bcc5;
                text-align: center;
                font-weight: 600;
                color: #FFF;


                &::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    border-style: solid;
                    border-width: 2cqw 2cqw 0px 2cqw;
                    border-color: #49bcc5 transparent transparent;
                    translate: -46% 80%;
                }

            }
            .title-h3 {
                font-size: 3.3cqw;
                margin-bottom: 3cqw;

                .big {
                    font-size: 1.3em;
                    line-height: 1.1;
                }
            }
        }
        .table {
            width: 100%;
            max-width: 550px;
            margin: 0 auto;

            .table-list {
                display: flex;
                .table-list__h4 {
                    width: 33%;
                    font-size: 2.5cqw;
                    font-weight: 500;
                    color: #FFF;
                    background-color:#49bcc5;
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    box-sizing: border-box;
                    padding: .5em 0 .5em .5em;
                }
                .table-list__p {
                    flex: 1;
                    display: flex;
                    justify-content: left;
                    align-items: center;
                    text-align: start;
                    background-color: #FFF;
                    box-sizing: border-box;
                    padding-left: 1.3cqw;
                    border-top: 1px solid  #49bcc5;
                    border-left: 1px solid  #49bcc5;
                    border-right: 1px solid  #49bcc5;
                }
                &:nth-last-child(1) .table-list__p {
                    border-bottom: 1px solid  #49bcc5;
                }

            }
        }
        
    }
}


/*==============================================
モーダル用CSS ここから
================================================*/
#space-performance .modal-input {
    opacity: 0;
    display: none;
}

#space-performance .modal {
    position: fixed;
    left: 0;
    top: 141px;
    width: 100%;
    height: calc(100dvh - 141px);
    z-index: 9999;
    display: none;
}
#space-performance .text-content {
    position: relative;
    display: none;
    max-height: 70dvh;
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 4% 4% 4%;
    margin-top: 1%;
}
#space-performance .text-content.block {
    display: block;
    overflow-y: auto;
    max-height: none;
    background-color: #FFF;
}

/* モーダル表示切替 */
/* セット革命説明用 */
#space-performance:has(#modal-trigger-revo:checked) .modal, /* モーダル自体を表示 */
#space-performance:has(#modal-trigger-revo:checked) .text-content.revo { /* 個別のコンテンツを表示 */
    display: block;
    animation: fadein .3s;
}
/* アプリ特典説明用 */
#space-performance:has(#modal-trigger-app:checked) .modal,
#space-performance:has(#modal-trigger-app:checked) .text-content.app {
    display: block;
    animation: fadein .3s;
}
/* 新生活ミッション特典説明用 */
#space-performance:has(#modal-trigger-present_1:checked) .modal,
#space-performance:has(#modal-trigger-present_1:checked) .text-content.present_1 {
    display: block;
    animation: fadein .3s;
}
#space-performance:has(#modal-trigger-present_2:checked) .modal,
#space-performance:has(#modal-trigger-present_2:checked) .text-content.present_2 {
    display: block;
    animation: fadein .3s;
}
#space-performance:has(#modal-trigger-present_3:checked) .modal,
#space-performance:has(#modal-trigger-present_3:checked) .text-content.present_3 {
    display: block;
    animation: fadein .3s;
}
#space-performance:has(#modal-trigger-present_4:checked) .modal,
#space-performance:has(#modal-trigger-present_4:checked) .text-content.present_4 {
    display: block;
    animation: fadein .3s;
}
#space-performance:has(#modal-trigger-present_5:checked) .modal,
#space-performance:has(#modal-trigger-present_5:checked) .text-content.present_5 {
    display: block;
    animation: fadein .3s;
}
/* 特典マップ用 */
#space-performance:has(#modal-trigger-present_map:checked) .modal,
#space-performance:has(#modal-trigger-present_map:checked) .text-content.present_map {
    display: block;
    animation: fadein .3s;
}

#space-performance .text-content p{
    margin-bottom: .3em;
}
#space-performance .text-content p.kome{
    font-size: .9em;
}
#space-performance .text-content p .text-link{
    color: #1b5ce0;
    text-decoration: underline;
    display: inline-block;
}

#space-performance .modal-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    background-color: #fefefe;
    z-index: 2;
    border-radius: 5px;
}

.modal-background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100vh - 136.97px);
    background-color: rgba(0, 0, 0, .45);
    z-index: 1;
    cursor: pointer;
}

.modal-close {
    background-color: #3b3b3b;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 100vw;
    width: 2em;
    height: 2em;
    line-height: 0;
    position: fixed;
    top: -4%;
    right: -2%;
    z-index: 99;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 0%;
    box-sizing: border-box;
    padding-left: .05em;
    cursor: pointer;
}

.text-content--title {
    text-align: center;
    color: #FFF;
    margin-bottom: 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .3em 0;
}
.text-content--title .img {
    width: 4rem;
    margin-right: 3%;
}
.text-content--title .plazaicon-irismark {
    margin-right: 2%;
    font-size: 2.5rem;
    background: #FFF;
    border-radius: 5px;
    box-sizing: border-box;
    padding: .6% 0 0 .6%;
    color: #e00000;
}
#space-performance .text-content--title .text-h2 {
    font-weight: 600;
    font-size: 3cqw;
    letter-spacing: -.2px;
}


.text-section {
    width: 100%;
    margin-bottom: 5%;
    text-align: start;
}
#space-performance .text-section__title .text-h3 {
    position: relative;
    z-index: 2;
    font-size: 1.5rem;
    text-align: center;
    display: inline-block;
    background: #FFF;
    padding: 0 5%;
}
.text-section__title {
    position: relative;
    margin-bottom: 3%;
    text-align: center;
}
.text-section__title:before, .text-section__title:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 58%;
    display: inline-block;
    width: 50%;
    height: 1px;
    background-color: black;
}
.text-section__title::before {
    left: 0;
}
.text-section__title::after {
    right: 0;
}

.text-h5 {
    font-size: 2.5cqw;
    margin-top: 5%;
}
.text-h5::before {
    content: '■';
    font-size: .8em;
    margin-right: 1%;
}
.text__section--box {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 3%;
    justify-content: center;
    background: #faf0e3;
    box-sizing: border-box;
    padding: 3% 0;
}
.text__section--box .img {
    position: relative;
    width: 42%;
}
.text__section--box .img .plazaicon-cart {
    position: absolute;
    right: 3%;
    bottom: 3%;
    color: #FFF;
    background-color: #eb0012;
    font-size: 1.8rem;
    padding: .4em;
    border-radius: 100vw;
}
.text__section--box .sword-icon {
    width: 8%;
}
.text__section--box .img.icon {
    width: 22%;
    border: 2px solid #1b5ce0;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #FFF;
}
.text__section--box .plazaicon-irismark {
    font-size: 6rem;
    background: #FFF;
    border-radius: 5px;
    box-sizing: border-box;
    padding: .9% 0 0 1.2%;
    box-shadow: 2px 1px 3px #818181;
    color: #e00000;
}

.text__section--gray {
    margin: 5% 0 0;
    box-sizing: border-box;
    padding: 3% 4%;
    background-color: #ededed;
}
.text__section--gray .modal-h6{
    font-size: 3.3vw;
}

#space-performance .text-section .text-link {
    font-size: 1em;
    color: #1b5ce0;
    display: flex;
    align-items: center;
    text-decoration: underline;
}

#space-performance .text-section .text-h6 {
    font-size: 1rem;
}

/* セット革命 色替え */
.text-content.revo .text-content--title {
    background-color: #0bc0cb;
}

/* アプリ特典 色替え */
.text-content.app .text-content--title {
    background-color: #ff4074;
}

/* 新生活ミッション特典 変更点 */
#space-performance .text-content.present .text-content--title {
    background-color: #17937a;
    font-size: 1.5rem;
}
#space-performance .text-content.present .text__section--present {
    width: 70%;
    max-width: 270px;
    margin: 0 auto;
}
#space-performance .text-content.present .text__section--presentMap {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
#space-performance .text-content.present .present-itemName {
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 3%;
}
/* #space-performance .text-content.present .text-section {
    box-sizing: border-box;
    padding: 0 2%;
} */
#space-performance .text-content.present .present-itemWrap {
    width: 95%;
    box-sizing: border-box;
    border: 1px solid #222;
    padding: 1% 3%;
}

/* 続きを読む */
#space-performance .text-content.more .text-section {
    position: relative;
    max-height: 15rem;
    overflow: hidden;
}
#space-performance .text-content.more .text-section::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 50%, hsla(0, 0%, 100%, .9) 0, #fff);
    content: '';
}
#space-performance .text-content.more:has(:checked) .text-section::after {
    content: none;
}
#space-performance .text-content.more:has(:checked) .text-section {
    max-height: none;
}
#space-performance .text-content.more .read-more {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    padding: .5em 3em;
    border-radius: 1px;
    background-color: #222;
    color: #fff;
    font-size: 1rem;
    border-radius: 5px;
}
#space-performance .text-content.more:has(:checked) .read-more {
    display: none;
}
#space-performance .text-content.more .read-more input {
    display: none;
}
/*==============================================
モーダル用CSS ここまで
================================================*/

@keyframes image-switch-animation-left {
    0%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__1.webp) center center / cover no-repeat;
    }
    22%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__1.webp) center center / cover no-repeat,
        center / 0 no-repeat url(../IMAGE/space-performance/back-item__2.webp);
    }

    33%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__2.webp) center center / cover no-repeat;
    }
    55%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__2.webp) center center / cover no-repeat,
        center / 0 no-repeat url(../IMAGE/space-performance/back-item__3.webp);
    }

    65%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__3.webp) center center / cover no-repeat;
    }
    87%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__3.webp) center center / cover no-repeat;
    }

    100%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__1.webp) center center / cover no-repeat;
    }
    
}
@keyframes image-switch-animation-right {
    0%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__4.webp) center center / cover no-repeat;
    }
    22%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__4.webp) center center / cover no-repeat,
        center / 0 no-repeat url(../IMAGE/space-performance/back-item__5.webp);
    }

    33%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__5.webp) center center / cover no-repeat;
    }
    55%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__5.webp) center center / cover no-repeat,
        center / 0 no-repeat url(../IMAGE/space-performance/back-item__6.webp);
    }

    65%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__6.webp) center center / cover no-repeat;
    }
    87%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__6.webp) center center / cover no-repeat;
    }

    100%{ 
        opacity: 1;
        background: url(../IMAGE/space-performance/back-item__4.webp) center center / cover no-repeat;
    }
    
}