@charset 'UTF-8';

:root {
/*フォントカラーテンプレート（カラー規定準拠）*/
    --fc-black: #333;
    --fc-blue: #273ccc;
    --fc-white: #fff;
    --fc-dblue: #1b3054;
    --fc-iblue: #e4f1f4;
    --fc-lblue: #dcf5ff;
    --fc-ksblue: #003da5;
    --fc-bluegray: #6b7788;
    --fc-dgray: #666;
    --fc-gray: #ccc;
    --fc-lgray: #e6e6e6;
    --fc-bgray: #f2f2f2;
    --fc-ksgray: #63666a;
    --fc-sbeige: #f0e7db;
    --fc-wbeige: #f4e2a6;
    --fc-dbeige: #eadecd;
    --fc-orange: #ff8c00;
    --fc-lyellow: #ffffaa;
    --fc-ksyellow: #ffcd00;
    --fc-ksred: #e32534;
    --fc-dred: #b22234;
    --fc-ksgreen: #008567;
    --fc-brown: #965a04;

/*背景色テンプレート（カラー規定準拠）*/
    --bk-black: #333;
    --bk-blue: #273ccc;
    --bk-white: #fff;
    --bk-dblue: #1b3054;
    --bk-iblue: #e4f1f4;
    --bk-lblue: #dcf5ff;
    --bk-ksblue: #003da5;
    --bk-bluegray: #6b7788;
    --bk-dgray: #666;
    --bk-gray: #ccc;
    --bk-lgray: #e6e6e6;
    --bk-bgray: #f2f2f2;
    --bk-ksgray: #63666a;
    --bk-sbeige: #f0e7db;
    --bk-wbeige: #f4e2a6;
    --bk-dbeige: #eadecd;
    --bk-orange: #ff8c00;
    --bk-lyellow: #ffffaa;
    --bk-ksyellow: #ffcd00;
    --bk-ksred: #e32534;
    --bk-dred: #b22234;
    --bk-ksgreen: #008567;
    --bk-brown: #965a04;

/*枠線テンプレート*/
    --lc-lgray: #ccc;
}

/* 共通変更 */
body {
    font-size: 1.8rem;
    box-sizing: border-box;
}

h3 {
    font-size: 3.0rem;
    font-weight: bold;
    @media screen and (max-width: 768px) { 
        font-size: 2.0rem;
    }
}

body {
    & img {
    width: 100%;
    }
}

body {
    & a {
    text-decoration: none!important;
    color: var(--fc-black)!important;
    }
}

body a img,
body a {
    cursor: pointer;
    &:hover {
        opacity: .7;
    }
}

.mainArea {
    max-width: 1650px!important;
    margin: 0 auto;
}

a.linec_under {
    color: var(--fc-blue) !important;
    text-decoration: underline !important;
}
.viewPc_BoxSlide {
    padding-bottom: 0!important;
}

.bd1_solgray img {
    border: solid 1px var(--bk-gray)!important;
}

td,
th {
    vertical-align: inherit;
}

/*デバイスによるON・OFF*/

    /*PCのみ表示*/
.no_tbsp {
    display: block;

    @media screen and (max-width: 1050px) {
        display: none;        
    }
}

    /*PC・TBのみ表示*/
.no_sp {
    display: block;

    @media screen and (max-width: 768px) {
        display: none;        
    }
}

    /*TB・SPのみ表示*/
.no_sp {
    display: none;

    @media screen and (max-width: 1050px) {
        display: block;        
    }
}

    /*SPのみ表示*/
.no_sp {
    display: none;

    @media screen and (max-width: 768px) {
        display: block;        
    }
}


    /*フォントカラーのみ変更*/
.fc_bk {
    color: #333;
}
.fc_bl {
    color: #273ccc;
}
.fc_wh {
    color: #fff;
}
.fc_dbl {
    color: #1b3054;
}
.fc_ibl {
    color: #e4f1f4;
}
.fc_-lbl {
    color: #dcf5ff;
}
.fc_ksbl {
    color: #003da5;
}
.fc_blgr {
    color: #6b7788;
}
.fc_dgr {
    color: #666;
}
.fc_gr {
    color: #e6e6e6;
}
.fc_lgr {
    color: #f2f2f2;
}
.fc_ksgr {
    color: #63666a;
}
.fc_sbe {
    color: #f0e7db;
}
.fc_wbe {
    color: #f4e2a6;
}
.fc_dbe {
    color: #eadecd;
}
.fc_or {
    color: #ff8c00;
}
.fc_lye {
    color: #ffffaa;
}
.fc_ksye {
    color: #ffcd00;
}
.fc_ksre {
    color: #e32534;
}
.fc_dre {
    color: #b22234;
}
.fc_ksgr {
    color: #008567;
}
.fc_br {
    color: #965a04;
}

    /*フォントカラーのみ変更*/
.bk_bk {
    background: var(--bk-black);
}
.bk_bl {
    background: var(--bk-blue);
}
.bk_wh {
    background: var(--bk-white);
}
.bk_dbl {
    background: #1b3054;
}
.bk_ibl {
    background: #e4f1f4;
}
.bk_-lbl {
    background: #dcf5ff;
}
.bk_ksbl {
    background: #003da5;
}
.bk_blgr {
    background: #6b7788;
}
.bk_dgr {
    background: #666;
}
.bk_gr {
    background: #e6e6e6;
}
.bk_lgr {
    background: #f2f2f2;
}
.bk_ksgr {
    background: #63666a;
}
.bk_sbe {
    background: #f0e7db;
}
.bk_wbe {
    background: #f4e2a6;
}
.bk_dbe {
    background: #eadecd;
}
.bk_or {
    background: #ff8c00;
}
.bk_lye {
    background: #ffffaa;
}
.bk_ksye {
    background: #ffcd00;
}
.bk_ksre {
    background: #e32534;
}
.bk_dre {
    background: #b22234;
}
.bk_ksgr {
    background: #008567;
}
.bk_br {
    background: #965a04;
}

	/* aタグ用*/
a.fc_ksbl {
    color: #273ccc!important;
}


/* キービジュアル*/
.sp_wrapper {

    @media screen and (max-width: 768px) {
    }
}


/* キービジュアル下テキストボックス*/
.sp_wrapper_tx {
    padding: 5%;
    margin: 0 0 70px;
    background-color: var(--bk-white);/*背景色 上記カラーから選択*/

    @media screen and (max-width: 768px) {
        margin: 0 0 70px;
    }
}

.sp_wrapper_tx {

    .tx_com {
    max-width: 1000px;
    margin: 0 auto;
    }
}

.sp_wrapper_tx_v1 {
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 70px;

    @media screen and (max-width: 768px) {
        margin: 0 0 70px;
    }

    .tx_com {
        background-color: var(--bk-white);/*背景色 上記カラーから選択*/
        padding: 5%;
        max-width: 1200px;
        margin: 0 auto;
    }
}

.sp_wrapper_tx_v2 {
    border-top: solid 15px #E6E6E6;
    padding: 0 5%;
    border-bottom: solid 15px #E6E6E6;
    margin: 0 0 70px;

    .tx_com {
        background-color: var(--bk-white);/*背景色 上記カラーから選択*/
        padding: 3% 5%;
        max-width: 1200px;
        margin: 0 auto;
    }
}

.sp_wrapper_tx_v3 {
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 70px;

    @media screen and (max-width: 768px) {
        margin: 0 0 70px;
    }

    .tx_com{
        margin: 0 auto;
        padding: 3% 5%;
        max-width: 1200px;

        > p {
            color: var(--fc-white);/*文字色 上記カラーから選択*/
        }
    }
}

.sp_wrapper_tx_v4 {
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 70px;

    @media screen and (max-width: 768px) {
        margin: 0 0 70px;
    }

    .tx_com {
        max-width: 1000px;
        margin: 0 auto;
        border-top: solid 15px #f0e7db;/*ボーダー色 上記カラーから選択*/
        border-bottom: solid 15px #f0e7db;/*ボーダー色 上記カラーから選択*/
        background-color: var(--bk-white);/*背景色 上記カラーから選択*/
        padding: 3% 5%;
        max-width: 1200px;

        > p {
            color: var(--fc-orange);/*文字色 上記カラーから選択*/
        }
    }
}


/* アンカーボックス*/

	/* 共通*/
.anc_band {
    margin: 0 0 20px;
}
	/* テキストリンク*/
.sp_wrapper_anc {
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 0;

        > a {
            color: var(--fc-white)!important;/*文字色 上記カラーから選択*/
            position: relative;
            padding: 0 0 0 22px;
            width: 100%;

            &:before{
                content: "●";
                position: absolute;
                top: 0;
                left: 0;
            }

            &:hover {
                opacity: .7;
            }
        }
    }
}


	/* 画像リンク 7枚*/
.sp_wrapper_anc_v1 {
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 10px;

        @media screen and (max-width:598px) {
            gap: 10px;
        }

        > a {
            width: calc((100% - 60px) / 7);

            @media screen and (max-width:1050px) {
                width: calc((100% - 30px) / 4);
            }

            @media screen and (max-width:598px) {
                width: calc((100% - 20px) / 3);
            }

            > img {

                &:hover{
                    transform: scale(1.1);
                    opacity: 1!important;
                }
            }
        }
    }
}


	/* 画像リンク 6枚*/
.sp_wrapper_anc_v3 {
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 10px;

        @media screen and (max-width:1050px) {
            gap: 10px;
        }

        @media screen and (max-width:598px) {
            gap: 10px;
        }

        > a {
            width: calc((100% - 50px) / 6);

            @media screen and (max-width:1050px) {
                .sp_wrapper_anc_v3 .anc_box > a{
                    width: calc((100% - 40px) / 3);
                }
            }

            > img {

                &:hover{
                    transform: scale(1.1);
                    opacity: 1!important;
                }
            }
        }
    }
}


	/* 画像リンク 8枚*/
.sp_wrapper_anc_v2 {
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 10px;

        @media screen and (max-width:598px) {
            gap: 10px;
        }

        > a {
            width: calc((100% - 70px) / 8);

            @media screen and (max-width:1050px) {
                width: calc((100% - 30px) / 4);
            }

            @media screen and (max-width:598px) {
                width: calc((100% - 20px) / 3);
            }

            > img {

                &:hover{
                    transform: scale(1.1);
                    opacity: 1!important;
                }
            }
        }
    }
}


	/* 画像リンク3枚*/
.sp_wrapper_anc_v6 {
    background-color: var(--bk-white);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;

    @media screen and (max-width:767px) {
        margin: 0 5px 70px;
    }

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 15px;

        > a {
            width: calc((100% - 30px) / 3);

            &:hover {
                opacity: .7;
            }

            @media screen and (max-width:598px) {
                width: calc((100% - 15px) / 2);
            }
        }
    }
}


	/* 画像リンク4枚*/
.sp_wrapper_anc_v7 {
    background-color: var(--bk-white);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;

    @media screen and (max-width:767px) {
        margin: 0 0 70px;
    }

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 15px;

        @media screen and (max-width:1050px){
            gap: 10px;
        }

        > a {
            width: calc((100% - 45px) / 4);

            &:hover {
                opacity: .7;
            }
            
            @media screen and (max-width:1050px) {
                width: calc((100% - 20px) / 3);
            }

            @media screen and (max-width:598px) {
                width: calc((100% - 10px) / 2);
            }
        }
    }
}


	/* テキストボックスリンク*/
.sp_wrapper_anc_v4 {
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 10px;

        > a {
            width: calc((100% - 20px) / 3);
            background-color: var(--bk-white);
            padding: 10px 30px 10px 10px;
            word-break: break-all;
            color: var(--fc-orange) !important;
            position: relative;
            border-radius: 5px;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
            text-align: center;
            display: flex;
            align-items: center;
            height: 60px;
            justify-content: center;

            &:before {
                position: absolute;
                content: "▼";
                top: 50%;
                right: 10px;
                transform: translate(0, -50%);
                font-size: 1.4rem;
            }
        
            &:hover {
                opacity: .7;
            }

            @media screen and (max-width:1050px) {
                height: 80px;
            }

            @media screen and (max-width:598px) {
                width: calc((100% - 10px) / 2);
            }

            @media screen and (max-width:398px) {
                width: 100%;
            }
        }
    }
}


	/* テキストボタンリンク*/
.sp_wrapper_anc_v5 {
    background-color: var(--bk-sbeige);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;

    @media screen and (max-width:767px) {
        margin: 0 5px 70px;
    }

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 15px;

        @media screen and (max-width:598px) {
            gap: 10px;
        }

        > a {
            width: calc((100% - 30px) / 3);
            background-color: var(--bk-orange);
            padding: 10px 30px 10px 15px;
            word-break: break-all;
            color: var(--fc-white) !important;
            position: relative;
            border-radius: 34px;
            border-bottom: solid 5px #bb7900;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:before {
                position: absolute;
                content: "▼";
                top: 50%;
                right: 10px;
                transform: translate(0, -50%);
                font-size: 1.4rem;
            }

            &:hover {
                transform: translate(0, 4px);
                border-bottom: solid 1px #bb7900;
            }

            @media screen and (max-width:1050px) {
                height: 80px;
                border-radius: 45px;
            }

            @media screen and (max-width:598px) {
                width: calc((100% - 10px) / 2);
            }

            @media screen and (max-width:398px) {
                width: 100%;
            }
        }
    }
}


	/* テキストボタンリンク（白背景）*/
.sp_wrapper_anc_v8 {
    background-color: var(--bk-white);/*背景色 上記カラーから選択*/
    padding: 5% 5% 0;
    margin: 0 0 100px;

    @media screen and (max-width:767px) {
        margin: 0 5px 70px;
    }

    .anc_box {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        gap: 20px 15px;

        @media screen and (max-width:598px) {
            gap: 10px;
        }

        > a {
            width: calc((100% - 30px) / 3);
            background-color: var(--bk-orange);
            padding: 10px 30px 10px 15px;
            word-break: break-all;
            color: var(--fc-white) !important;
            position: relative;
            border-radius: 34px;
            border-bottom: solid 5px #bb7900;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:before {
                position: absolute;
                content: "▼";
                top: 50%;
                right: 10px;
                transform: translate(0, -50%);
                font-size: 1.4rem;
            }

            &:hover {
                transform: translate(0, 4px);
                border-bottom: solid 1px #bb7900;
            }

            @media screen and (max-width:1050px) {
                height: 80px;
                border-radius: 45px;
            }

            @media screen and (max-width:598px) {
                width: calc((100% - 10px) / 2);
            }

            @media screen and (max-width:398px) {
                width: 100%;
            }
        }
    }
}


/*タイトル部*/
.sp_wrapper_title {
    position: relative; 

    @media screen and (max-width: 798px) {
        margin: 70px 0 40px;
    }

    .tit_dis_sp {
        display: inline;

        @media screen and (max-width: 498px) {
            display: block;
        }
    }
}


    /*アンダーライン*/
.tit1 {

    > h3 {
        padding: 0 0 5px 5px;
        border-bottom: solid 2px var(--bk-ksgray);
    }
}


    /*アンダーライン（左側色変更）*/
.tit2 {

    > h3 {
        padding: 0 0 5px 5px;
        border-bottom: solid 2px var(--bk-ksyellow);
        position: relative;

        &:before {
           position: absolute;
           content: "";
           width: 25%;
           height: 2px;
           bottom: -2px;
           left: 0; 
           background-color: var(--bk-ksblue);
        }
    }
}


    /*アンダーマーカー（下半分）*/
.tit3 {

    > h3 {
        padding: 0 0 2px 10px;
        background: linear-gradient(to bottom, var(--bk-white) 50%, var(--bk-ksyellow)  50%);
    }
}


    /*アンダーライン（斜め）*/
.tit4 {

    > h3 {
        position: relative;
        padding: 0 0 5px 10px;

        &:before {
            background: repeating-linear-gradient(90deg, transparent 0px 4px, var   (--bk-ksyellow) 4px 8px);
            transform: skew(-45deg);
            position: absolute;
            content: "";
            width: 100%;
            height: 5px;
            bottom: -4px;
            left: 0;
        }
    }
}


    /*アンダーライン（斜め＋画像あり）*/
.tit5 {
    > h3 {
        position: relative;
        padding: 0 0 5px 150px;

        &:before {
            background-image: url("") no-repeat;/*画像をセットする 280px*100px */
            background-size: 140px;
            position: absolute;
            content: "";
            width: 140px;
            height: 50px;
            bottom: 10px;
            left: 0;
        }

        &:after {
            background: repeating-linear-gradient(90deg, transparent 0px 4px, var   (--bk-dred) 4px 8px);
            transform: skew(-45deg);
            position: absolute;
            content: "";
            width: 100%;
            height: 5px;
            bottom: -4px;
            left: 0;
        }
    }
}


    /*アンダーマーカー（フル）*/
.tit6 {
    > h3 {
        background-color: var(--bk-ksyellow);
        padding: 13px 5px 12px 10px;

        @media screen and (max-width:768px) {
            padding: 10px 5px 11px 10px;
        }
    }
}


    /*アンダーマーカー（フル＋ラインあり）*/
.tit7 {

    > h3 {
        background-color: var(--bk-ksyellow);
        padding: 12px 5px 8px 10px;
        /* 下部あり */
        border-bottom: solid 5px rgb(190, 140, 0);
        /* 左右あり 
        border-left: solid 12px rgb(190, 140, 0);
        border-right: solid 12px rgb(190, 140, 0);
        */
        /* 中央寄せしない場合には削除 */
        text-align: center;

        @media screen and (max-width:768px) {
            padding: 9px 5px 8px 10px;
        }
    }
}


    /*タイトル下部コメント*/
.tit_txt {
    background: var(--bk-dgray);
    color: var(--fc-white);
    padding: 7% 9%;
}

    /* 背景なし
.tit_txt {
    color: var(--fc-black);
    padding: 5% 9% 0;
}
    */


/*カテゴリ名表示*/
.sp_wrapper_band {
    margin: 0 0 70px;

    > h3 {
        border-bottom: solid 1px;
        padding: 0 0 5px 5px;
        font-size: 3.0rem;
    }
}


/*ボックステンプレ*/

    /*共通*/
.sp_wapper_block {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 15px;
    margin: 0 0 100px;
}

.gp15 {
    gap: 15px; 
} 

    /*2カラム*/
.sp_wapper_block .column2 {
    width: calc((100% - 15px) / 2);

    @media screen and (max-width:500px) {
        width: 100%;
    }
}

    /*3カラム*/
.sp_wapper_block .column3 {
    width: calc((100% - 30px) / 3);

    @media screen and (max-width:1250px){
        width: calc((100% - 15px) / 2);
    }

    @media screen and (max-width:500px){
        width: 100%;
    }

    > p.txt_top {
        margin: 0 0 15px;
        padding: 0 5px;
        display: block;
        width: 100%!important;
    }

    > p.txt_und {
        margin: 15px 0 0;
        padding: 0 5px;
        display: block;
        width: 100%!important;
    }

    .column2_in {
        width: calc((100% - 10px) / 2);
    }
}


    /*4カラム*/
.sp_wapper_block {

    .column4{
        width: calc((100% - 45px) / 4);

        @media screen and (max-width:1250px) {
            width: calc((100% - 30px) / 3);
        }

        @media screen and (max-width:768px) {
            width: calc((100% - 15px) / 2);
        }

        @media screen and (max-width:500px) {
            width: 100%;
        }

        > p.txt_top {
            margin: 0 0 15px;
            padding: 0 5px;
            display: block;
            width: 100%!important;
        }

        > p.txt_und {
            margin: 15px 0 0;
            padding: 0 5px;
            display: block;
            width: 100%!important;
        }
    }
}


/*商品情報カスタムタグ*/

    /*動的部分を流用可*/
.neoCustomProdInfo {

    .i-maker {
        margin: 0 0 3px;
        
        @media screen and (max-width: 1050px) {
            font-size: 1.6rem;
        }
    }
    
        /*商品名*/
    .i-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        margin: 0 0 4px;
        height: 47px;

        @media screen and (max-width: 1050px) {
            font-size: 1.6rem;
        }

        @media screen and (max-width: 600px) {
            height: 39px;
        }
    }
    
        /*型番*/
    .i-pname {
        @media screen and (max-width: 1050px) {
            font-size: 1.6rem;
        }
    }

        /*在庫表現*/
    .i-stock {
        margin: 20px 0 10px;
        color: var(--fc-black);
        background-color: var(--fc-lyellow);
        display: inline-block;
        padding: 8px 10px;
        font-size: 1.4rem;
    }

        /*売価*/
    .i-price-in {
        color: var(--fc-ksred);
        font-weight: bold;
        font-size: 2.2rem;
        text-align: right;
        margin: 0 0 10px;

        @media screen and (max-width: 1050px) {
            font-size: 1.8rem;
        }

        .i-yen {
            font-size: 1.0rem;
        }

        .i-yen-in {
            color: var(--fc-black);
            font-size: 1.0rem;
        }
    }

        /*あんしんパスポート特典・店頭受取キャンペーン・ネットで使えるクーポン訴求*/
    .prbox2 {
        margin: 0 0 10px;

        /*あんしんパスポート特典*/
        .i-anpass {
            text-align: center;
            margin: 0 auto 5px;
            max-width: 250px;

            .icoType_Passport {
                display: block!important;

                > li {

                    > span {
                        max-width: 250px;
                        width: 100%!important;
                    }
                }
            }
        }

                /*店頭受取キャンペーン*/
        .i-storecp {
            text-align: center;
            margin: 0 auto 5px;
            max-width: 250px;

            .icoType_Passport {
                display: block!important;

                > li {

                    > span {
                        max-width: 250px;
                        width: 100%!important;
                    }
                }
            }
        }

                /*ネットで使えるクーポン*/
        .i-coupon {
            text-align: center;
            margin: 0 auto 5px;
            max-width: 250px;

            .icoType_Passport {
                display: block!important;

                > li {

                    > span {
                        max-width: 250px;
                        width: 100%!important;
                    }
                }
            }
        }
    }
 

        /*購入ボタン（販売時デザイン）*/
    .i-link {
        color: var(--fc-white)!important;
        background-color: var(--bk-ksred);
        height: 65px;
        display: block;
        max-width: 250px;
        margin: 0 auto;
        padding: 5px 25px 5px 5px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: solid 7px var(--bk-dred)!important;
        border-radius: 5px;

        @media screen and (max-width: 1050px) {
            font-size: 1.6rem;
        }

        &:after{
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translate(0,-50%);
            content: "";
            border-left: 10px solid;
            border-top: 6px solid transparent; 
            border-bottom: 6px solid transparent; 

            @media screen and (max-width: 400px) {
                right: 5px;
            }
        }

        &:hover{
            border-bottom: solid 1px #e32534!important;
            transform: translate(0,6px);
        }
    }

        /*購入ボタン（販売終了時デザイン）*/
    .neoCustomProdBtnDisabled {
        background-color: var(--bk-gray);
        border-bottom: none!important;
        height: 65px;
        cursor: default !important;
        padding: 5px;

        &:hover{
            border-bottom: none!important;
            transform: none;
            opacity: 1;
        }

        &:after{
            content: none;
        }
    }

        /*他のカテゴリーへのテキストリンク*/
    .o-link {
        display: block;
        margin: 20px 5px 0;
        position: relative;
        padding: 0 20px 0 0;
        text-decoration: underline !important;

        &:before {
            content: "";
            position: absolute;
            border-left: solid 10px;
            border-top: solid 6px transparent;
            border-bottom: solid 6px transparent;
            right: 0;
            top: 50%;
            transform: translate(0,-50%);
        }
    }


        /*送料無料・長期保証訴求*/
    .prbox1 {
            display: flex;
            gap: 8px;
            margin: 0 0 10px;
            flex-wrap: wrap;

        .i-dfree {

            @media screen and (max-width: 598px) {
                width: 100%;
            }

        }

        .i-warrant {
            
            @media screen and (max-width: 598px) {
                width: 100%;
            }

        }
    }
}

#fwCms_wrapper,
.jBox-wrapper {
    .icoType_Service {
        @media (max-width: 598px) {
            justify-content: left;
        }
    }
}

	/*1カラム用*/
        /*あんしんパスポート特典・店頭受取キャンペーン・ネットで使えるクーポン訴求*/
.swi_column1{

    .prbox2 {
        margin: 0 0 10px;

        /*左寄せに変更*/
		.i-coupon,
		.i-storecp,
        .i-anpass {
            margin: 0 0 5px;
		}
	}
}

    /*タイトル部分*/
.sp_wrapper_title {

    .sp_wrapper_title_sub {
        margin: 40px 0 0;

        > p {
            background-color: var(--bk-ksyellow);
            border-radius: 50px;
            text-align: center;
            padding: 14px 20px 0;
            height: 50px;
        }
    }
}


    /*4カラム用*/
.sp_wrapper_item {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 15px;
    margin: 70px 0;

    .itembox {
        width: calc((100% - 45px) / 4);

        @media screen and (max-width: 1300px) {
            width: calc((100% - 45px) / 3);
        }

        @media screen and (max-width: 898px) {
            width: calc((100% - 45px) / 2);
        }

        .catename {
            margin: 0 0 50px;

            > span {
                background-color: var(--bk-ksyellow);
                padding: 0 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                border-radius: 50px;
                line-height: 1.2;

                @media screen and (max-width: 1300px) {
                    height: 50px;
                }

                @media screen and (max-width: 598px) {
                    font-size: 1.6rem;
                }
            }
        }

        .i-com {
            margin: 0 0 30px;
            position: relative;

            &:before {
                content: "";
                border-top: 1px solid #000;
                width: 30px;
                height: 1px;
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
            }

            &:after {
                content: "";
                border-right: 1px solid #000;
                width: 1px;
                height: 30px;
                position: absolute;
                top: 0;
                right: 0; 
                z-index: 1;  
            }

            .i-com-in {
                position: relative;
                padding: 25px 10px 7px;
                line-height: 1.3;
                background-color: var(--bk-white);
                height: 115px;

                &:before {
                    content: "";
                    border-top: 1px solid #000;
                    width: 30px;
                    height: 1px;
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    z-index: 1;
                }

                &:after {
                    content: "";
                    border-right: 1px solid #000;
                    width: 1px;
                    height: 30px;
                    position: absolute;
                    bottom: 0;
                    left: -1px;  
                    z-index: 1; 
                }

                @media screen and (max-width: 1050px) {
                    height: 107px;
                }

                @media screen and (max-width: 500px) {
                    height: 130px;
                }

                > span {
                    position: relative;
                    background-color: var(--bk-ksgray);
                    color: var(--fc-white);
                    padding: 0 7px 0 40px;
                    border-radius: 5px;
                    display: flex;
                    width: 85%;
                    margin: -50px 0 10px;
                    z-index: 2;
                    height: 50px;
                    align-items: center;
                    line-height: 1.2;

                    @media screen and (max-width: 1050px) {
                        font-size: 1.6rem;
                    }    

                    @media screen and (max-width: 400px) {
                        width: 103%;
                    }

                    &:before {
                        position: absolute;
                        content: "";
                        background: url("/excludes/KEC/common/img/icon/sp_itempointicon.svg") no-repeat;
                        background-size: 24px;
                        width: 24px;
                        height: 24px;
                        top: 13px;
                        left: 10px;
                    }
                }
                
                > p {
                    margin: 0;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 3;

                    @media screen and (max-width: 1050px) {
                        font-size: 1.6rem;
                    }

                    @media screen and (max-width: 500px) {
                        -webkit-line-clamp: 4;
                    }  
                }
            }
        }

        .itembox_img {
            width: 100%;
            aspect-ratio: 1 / 1;
            margin: 0 0 15px;
        }
    }
}


    /*5カラム用*/
.swi_column5 {
    gap: 70px 10px;

    .itembox {
        width: calc((100% - 40px) / 5);

        @media screen and (max-width: 1300px) {
            width: calc((100% - 30px) / 4);
        }

        @media screen and (max-width: 898px) {
            width: calc((100% - 20px) / 3);
        }

        @media screen and (max-width: 698px) {
            width: calc((100% - 10px) / 2);
        }
    }
}


    /*2カラム用（左：画像、右：メイン）*/
.swi_column1 {
    padding: 4%;
    border: solid 5px var(--bk-dgray);

    .itembox {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .itembox_img {
            width: 400px;
            text-align: center;
            aspect-ratio: auto;
            padding: 0 30px 0 0;

            @media screen and (max-width: 1200px) {
                width: 300px;
            }

            @media screen and (max-width: 1050px) {
                padding: 0;
                width: auto;
            }

            .catename {
                margin: 0 0 50px;
            }

            > img {
                max-width: 300px;
                max-height: 300px;

                @media screen and (max-width: 1050px) {
                    max-width: 400px!important;
                    max-height: 400px
                }
                
            }
        }
    
        .itembox_right {
            width: calc(100% - 400px);
            padding: 0 0 20px;
            margin: 26px 0 0;

            @media screen and (max-width: 1200px) {
                width: calc(100% - 300px);
            }

            @media screen and (max-width: 1050px) {
                width: 100%;
            }

            .i-com {

                .i-com-in { 
                    height: auto;
                    padding: 25px 10px 15px;  
                    
                    > span {
                        margin: -50px 0 15px;
                    }
                }
            }      
        }
    } 

    .i-link {
        max-width: 450px;
    }

    .dis_ofon {
        display: none;

        @media screen and (max-width: 1050px) {
            display: block;
        }
    }

    .dis_onof {
        display: block;

        @media screen and (max-width: 1050px) {
            display: none;
        }
    }
}


/*カテゴリー選択に戻る*/

.anc_rebox{
    margin: 0 0 150px;

    > a.retext{
        background-color: var(--bk-lgray);
        color: var(--fc-black)!important;
        max-width: 500px;
        text-align: center;
        display: block;
        height: 70px;
        border-radius: 50px;
        padding: 20px 70px 0 10px;
        position: relative;
        border: solid 3px #333333;
        margin: 0 auto;

        &:before {
            content: "";
            position: absolute;
            top: 50%;
            right: 25px;
            border-bottom: solid 10px;
            border-left: solid 6px transparent;
            border-right: solid 6px transparent;
            transform: translate(0,-50%);
        }

        &:hover {
            opacity: .5;
        }

        @media screen and (max-width: 1050px){
            max-width: 300px;
            height: 50px;
            padding: 13px 50px 0 10px;
            font-size: 1.4rem;
        }
    }
}


/*カテゴリー選択に戻る*/
.link_rebox{
    margin: 0 0 30px;

    > a.retext{
        background-color: var(--bk-ksgreen);
        color: var(--fc-white)!important;
        max-width: 500px;
        text-align: center;
        display: block;
        height: 70px;
        border-radius: 50px;
        padding: 20px 70px 0 10px;
        position: relative;
        border: solid 3px var(--bk-ksgreen);
        margin: 0 auto;

        &:before {
            content: "";
            position: absolute;
            top: 50%;
            right: 25px;
            border-left: solid 10px;
            border-top: solid 6px transparent;
            border-bottom: solid 6px transparent;
            transform: translate(0,-50%);
        }

        &:hover {
            opacity: .5;
        }

        @media screen and (max-width: 1050px){
            max-width: 300px;
            height: 50px;
            padding: 13px 50px 0 10px;
            font-size: 1.4rem;
        }
    }
}

/*部品系*/

    /*日付*/
.ab_tit{
    position: absolute;
    content: "";
    right: 10px;
    bottom: 10px;

    @media screen and (max-width: 768px) {
        position: static;
        transform: none;
        text-align: center;
        margin: 10px 0 0;
        font-size: 1.6rem;
    }
}

.sp_date {

    .dow{
        font-size: 1.1rem;
        margin: 0 0 0 2px;
    }
}


    /*埋め込み動画レスポンシブ表示*/
.moviebox {
    position: relative;
    aspect-ratio: 16 / 9;

    & iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


    /*タブ切り替え*/
.tabMainBox {
    margin: 0 0 100px;
}


    /*タブ切り替え詳細*/
input[type="radio"] {
    display: none;
}

.tabbox_in {
    display: flex;
    gap: 0 2px;
}

.tab-label {
    width: calc((100% - 6px) / 4); //4カラムの場合
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    height: 60px;
    background-color: var(--bk-ksgray);
    justify-content: center;
    color: var(--fc-white);
    padding: 0 30px 0 5px;
    position: relative;

    &:before{
        position: absolute;
        content: "";
        border-top: 10px solid;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        right: 15px;
        top: 50%;
        transform: translate(0,-50%);
        @media screen and (max-width: 1100px) {
            right: unset;
            top: unset;
            transform: translate(-50%, 0);
            bottom: 8px;
            left: 50%;
        }
    }

    @media screen and (max-width:1100px) {
      height: 90px;
      padding: 0 5px 20px;
    }

    @media screen and (max-width:500px) {
      height: 60px;
    }
}

.tab-label {

    & > span {
    
        @media screen and (max-width:500px) {
          display: none;
        }
    }
    
    &:hover {
        opacity: 0.7;
    }
}

.tab-contents {
    
    > div {
        display: none;
        padding: 30px 0 0;
    }
}

#tab1:checked ~ .tabbox .content-tab1,
#tab2:checked ~ .tabbox .content-tab2,
#tab3:checked ~ .tabbox .content-tab3,
#tab4:checked ~ .tabbox .content-tab4 {
    display: block;
}


/*JS用*/

    /*アコーディオン*/
.accodion_box {
    margin: 0 0 100px;

    .outbox {
        width: 100%;

        .acc_tit {
            background: var(--bk-ksgreen);
            max-width: 500px;
            display: flex;
            height: 70px;
            border-radius: 50px;
            padding: 0 70px 0 10px;
            position: relative;
            border: solid 3px var(--bk-ksgreen);
            margin: 0 auto;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            @media screen and (max-width: 1050px){
                max-width: 400px;
                height: 50px;
                padding: 0 50px 0 10px;
            }

            &:hover {
                opacity: 0.7;
            }

            > p {
                color: var(--fc-white)!important;
                font-size: 2.0rem;

                @media screen and (max-width: 1050px){
                    font-size: 1.6rem;
                }
            }

            .icon {
                width: 20px;
                height: 20px;
                position: absolute;
                top: 50%;
                right: 30px;
                transform: translate(0,-50%);
                transition: height 0.3s ease;

                @media screen and (max-width: 1050px){
                    width: 13px;
                    height: 13px;
                    right: 22px;
                }

                &:before {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 2px;
                    background: var(--bk-white)!important;
                    top: 50%;
                    right: 0;
                    transform: translate(0,-50%);

                    @media screen and (max-width: 1050px){
                        height: 1px;
                    }
                }

                &:after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 2px;
                    background: var(--bk-white)!important;
                    top: 50%;
                    right: 0;
                    transform: translate(0,-50%) rotate(90deg);

                    @media screen and (max-width: 1050px){
                        height: 1px;
                    }
                }
            }
        }

        .inbox {
            width: 100%;
            height: 0;
            overflow: hidden;
            transition: height 0.4s ease;

            .inbox_cont {
                padding: 10px;
            }
        }
    }
}

.acc_tit.active {
    & .icon:after {
        opacity: 0;
        transform: translate(0,-50%) rotate(0deg);
    }
}


    /*フェードイン*/
.fadein_rl {
  opacity: 0;
  transform: translate(100px,0);
  transition: 0.5s ease-in;
}

.fadein_lr {
  opacity: 0;
  transform: translate(-100px,0);
  transition: 0.5s ease-in;
}

.fadein_rl.on,
.fadein_lr.on {
  opacity: 1;
  transform: translate(0,0);
}


    /*タブ切り替え*/
.tabbox {
    display: flex;
    flex-wrap: wrap;
    margin: 50px 0 0;

    .tabbtn {
        width: calc(100% / 4);
        border-right: solid 1px var(--bk-white);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        background: var(--bk-dgray);
        color: var(--fc-white)!important;
        padding: 8px;

        &:nth-child(4) {
            border-right: none;
        }
    }

    .tabbtn.active {
        background: var(--bk-black);
    }
}

.tabbox_under {
    background: var(--bk-white);
    padding: 40px 10px;

    .tabcont {
        display: none;
    }

    .tabcont.active {
        display: block;
    }

}


    /*モーダルウィンドウ*/
.popup_box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    max-width: 100%;
    display: none;

    &active {
        display: block;
    }

    .popup_cont {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 600px;
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        position: relative;

        .mv {

            iframe {
                width: 100%;
                aspect-ratio: 16 / 9;
            }
        }
    }

    .closebtn {
        border-radius: 50px;
        display: block;
        border: solid 5px var(--bk-white);
        cursor: pointer;
        position: absolute;
        top: 11px;
        left: 13px;

        img {

            &:hover {
                opacity: .7;
            }
        }
    }
}