@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: #e6e6e6;
    --fc-lgray: #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: #e6e6e6;
    --bk-lgray: #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;
}


/* 共通変更 */
body{
    font-size: 1.8rem;
    box-sizing: border-box;
}
body img{
    width: 100%;
}
body a{
    text-decoration: none!important;
        color: var(--fc-black);
}
.mainArea{
    max-width: 1650px!important;
    margin: 0 auto;
}

/* キービジュアル下テキストボックス*/
.sp_wrapper_tx{
    padding: 5%;
    margin: 0 0 70px;
    background-color: var(--bk-white);/*背景色 上記カラーから選択*/
}
.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;
}
.sp_wrapper_tx_v1 .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;
}
.sp_wrapper_tx_v2 .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;
}
.sp_wrapper_tx_v3 .tx_com{
    margin: 0 auto;
    padding: 3% 5%;
    max-width: 1200px;
}
.sp_wrapper_tx_v3 .tx_com > p{
    color: var(--fc-white);/*文字色 上記カラーから選択*/
}

.sp_wrapper_tx_v4{
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 70px;
}
.sp_wrapper_tx_v4 .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;
}
.sp_wrapper_tx_v4 .tx_com > 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;
}
.sp_wrapper_anc .anc_box{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
}
.sp_wrapper_anc .anc_box > 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;
}
.sp_wrapper_anc_v1 .anc_box{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px;
}
.sp_wrapper_anc_v1 .anc_box > a{
    width: calc((100% - 60px) / 7);
}

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

.sp_wrapper_anc_v1 .anc_box > a > 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;
}
.sp_wrapper_anc_v3 .anc_box{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px;
}
@media screen and (max-width:1050px){
.sp_wrapper_anc_v3 .anc_box{
    gap: 20px;
    }
}
.sp_wrapper_anc_v3 .anc_box > a{
    width: calc((100% - 50px) / 6);
}
@media screen and (max-width:1050px){
    .sp_wrapper_anc_v3 .anc_box > a{
        width: calc((100% - 40px) / 3);
    }
}
.sp_wrapper_anc_v3 .anc_box > a > 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;
}
.sp_wrapper_anc_v2 .anc_box{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px;
}
.sp_wrapper_anc_v2 .anc_box > a{
    width: calc((100% - 70px) / 8);
}
@media screen and (max-width:1050px){
    .sp_wrapper_anc_v2 .anc_box > a{
        width: calc((100% - 30px) / 4);
    }
}
.sp_wrapper_anc_v2 .anc_box > a > img{

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

	/* 画像リンク3枚*/
.sp_wrapper_anc_v6{
/*背景色を使用する場合には/**/を解除
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;
}
.sp_wrapper_anc_v6 .anc_box{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 15px;
}
.sp_wrapper_anc_v6 .anc_box > a{
    width: calc((100% - 30px) / 3);

    &:hover {
        opacity: .7;
    }
}
@media screen and (max-width:428px){
    .sp_wrapper_anc_v6 .anc_box > a{
        width: calc((100% - 15px) / 2);
    }
}

	/* 画像リンク4枚*/
.sp_wrapper_anc_v7{
/*背景色を使用する場合には/**/を解除
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;
}
.sp_wrapper_anc_v7 .anc_box{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 15px;
}
.sp_wrapper_anc_v7 .anc_box > a{
    width: calc((100% - 45px) / 4);

    &:hover {
        opacity: .7;
    }
}
@media screen and (max-width:1050px){
    .sp_wrapper_anc_v7 .anc_box > a{
        width: calc((100% - 30px) / 3);
    }
}
@media screen and (max-width:428px){
    .sp_wrapper_anc_v7 .anc_box > a{
        width: calc((100% - 15px) / 2);
    }
}

	/* テキストボックスリンク*/
.sp_wrapper_anc_v4{
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;
}
.sp_wrapper_anc_v4 .anc_box{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 10px;
}
.sp_wrapper_anc_v4 .anc_box > 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;

    &: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){
    .sp_wrapper_anc_v4 .anc_box > a{
        height: 80px;
    }
}
@media screen and (max-width:428px){
    .sp_wrapper_anc_v4 .anc_box > a{
        width: 100%;
    }
}

	/* テキストボタンリンク*/
.sp_wrapper_anc_v5{
/*背景色を使用する場合には/**/を解除
    background-color: var(--bk-orange);/*背景色 上記カラーから選択*/
    padding: 5%;
    margin: 0 0 150px;
}
.sp_wrapper_anc_v5 .anc_box{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 15px;
}
.sp_wrapper_anc_v5 .anc_box > 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;

    &: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){
    .sp_wrapper_anc_v5 .anc_box > a{
        height: 80px;
        border-radius: 45px;
    }
}
@media screen and (max-width:428px){
    .sp_wrapper_anc_v5 .anc_box > a{
        width: 100%;
    }
}

/*商品情報カスタムタグ*/
    /*タイトル部分*/
.sp_wrapper_title{

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

.sp_wrapper_item{
    display: flex;
    flex-wrap: wrap;
    gap: 70px 15px;
    margin: 0 0 70px;
}
.sp_wrapper_item .itembox{
    width: calc((100% - 45px) / 4);
}
@media screen and (max-width: 1300px){
    .sp_wrapper_item .itembox{
    width: calc((100% - 45px) / 3);
    font-size: 1.4rem;
    }
}
@media screen and (max-width: 767px){
    .sp_wrapper_item .itembox{
    width: calc((100% - 45px) / 2);
    }
}
.sp_wrapper_item .itembox .catename{
    margin: 0 0 50px;
}
.sp_wrapper_item .itembox .catename > 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;
}
.sp_wrapper_item .itembox .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;  
    }
}
.sp_wrapper_item .itembox .i-com .i-com-in{
    position: relative;
    padding: 25px 7px 7px;
    line-height: 1.3;
    background-color: var(--bk-white);
    height: 110px;
        &: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: 1300px){
    .sp_wrapper_item .itembox .i-com .i-com-in{
    height: 100px;
    }
}
.sp_wrapper_item .itembox .i-com .i-com-in > span{
    position: absolute;
    top: -20px;
    left: 0;
    background-color: var(--bk-ksgray);
    color: var(--fc-white);
    padding: 7px 7px 6px 35px;
    border-radius: 5px;
}
.sp_wrapper_item .itembox .i-com .i-com-in > p{
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}
.sp_wrapper_item .itembox .itembox_in .i-maker{
    margin: 0 0 3px;
}
.sp_wrapper_item .itembox .itembox_in .i-name{
    margin: 0 0 2px;
}
.sp_wrapper_item .itembox .itembox_in .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;
}
.sp_wrapper_item .itembox .itembox_in .i-price-in{
    color: var(--fc-ksred);
    font-weight: bold;
    font-size: 2.2rem;
    text-align: right;
}
.sp_wrapper_item .itembox .itembox_in .i-link{
    color: var(--fc-white)!important;
    background-color: var(--bk-ksred);
    height: 65px;
    display: block;
    max-width: 250px;
    margin: 20px auto 0;
    padding: 5px 15px 5px 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 7px var(--bk-dred);
    border-radius: 5px;
    &:before{
        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; 
    }
    &:hover{
        border-bottom: solid 1px #e32534;
        transform: translate(0,6px);
    }
}
.sp_wrapper_item .itembox .i-price-in .i-yen{
    font-size: 1.0rem;
}
.sp_wrapper_item .itembox .i-price-in .i-yen-in{
    color: var(--fc-black);
    font-size: 1.0rem;
}

/*カテゴリー選択に戻る*/
.anc_rebox{
    margin: 0 0 150px;
}
.anc_rebox > 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: 21px;
        right: 25px;
    }
    &:hover{
        opacity: .5;
    }
}