/* CSS Document */

body {
    min-width: 1100px;
}

/* smartPhone */
@media screen and (max-width: 640px) {
    body {
        min-width: 320px;
    }
}

#contents_block .pcn {
    display: none
}

/**
 * 商品ヘッダ
 */
#contents_block #productsHeader {
    min-width: 980px;
    height: 100px;
    background: #ca0011;
}

#contents_block #productsHeader h1 {
    width: 980px;
    margin: 0 auto;
    height: 100px;
    background: url(../img/17_img_products_h1_title.png) no-repeat left center;
}

/**
 * 商品一覧
 */
#contents_block #productsBox {
    width: 980px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    margin-top: 45px;
    font-size: 0;
    text-align: left;
}

#contents_block #productsBox li {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 50px;
    text-align: center;
    padding: 0;
}

#contents_block #productsBox li a,
#contents_block #productsBox li .products_note {
    display: block;
    color: #600;
    line-height: 150%;

}

#contents_block #productsBox li .products_img img {
    position: relative;
    top: 0px;
    left: 0px;
    width: auto;
    height: 300px;
}

#contents_block #productsBox li .products_img img:hover {
    top: -5px;
}

#contents_block #productsBox li .products_img .gogo {
    height: 180px;
}

#contents_block #productsBox li .products_note {
    font-size: 14px;
    margin-top: 10px;
    font-weight: normal;
}

#contents_block #productsBox .products_note span {
    display: block;
    color: #F00;
    font-size: 12px;
    margin-top: 0px;
    line-height: 140%;
}

#contents_block #productsBox .products_note .newB {
    display: block;
    color: #F00;
    font-size: 14px;
    font-weight: bold;
    margin-top: -5px;
    line-height: 140%;
}

#contents_block #productsBox .products_note span.cp {
    color: #666;
}

#contents_block #productsBox .products_new {
    padding-bottom: 12px;
}

#contents_block #productsBox .products_new span {
    display: block;
    height: 21px;
}

#contents_block #productsBox .products_new p {
    padding: 0;
}

#contents_block #productsBox .products_new img {
    width: auto;
    height: 21px;
    margin: 0 auto;
}

#contents_block #productsBox .handy .products_img img {
    height: 140px !important;
}

#contents_block #productsBox .midi .products_img img {
    height: 240px !important;
}

#contents_block #productsBox .midi .midiSw {
    margin-top: 300px
}

#contents_block #productsBox .gogo .products_img img {
    height: 200px;
}

#contents_block #productsBox .gogo .products_new {
    height: 10px;
}

#contents_block #productsBox ul li:nth-child(1) {
    width: 180px;
    height: 337px;
    padding: 0px 70px 0 148px;
}

#contents_block #productsBox ul li:nth-child(2) {
    width: 180px;
    height: 337px;
    padding: 0px 70px 0 0px;
}

#contents_block #productsBox ul li:nth-child(3) {
    width: 180px;
    height: 337px;
    padding: 0px 0px 0 0px
}


#contents_block #productsBox ul li:nth-child(4) {
    width: 180px;
    height: 367px;
    padding: 0px 70px 0 148px;
}

#contents_block #productsBox ul li:nth-child(5) {
    width: 180px;
    height: 367px;
    padding: 0px 70px 0 0px;
}


#contents_block #productsBox ul li:nth-child(6) {
    width: 180px;
    height: 400px;
    padding: 0px 0px 0px 0px;
}

#contents_block #productsBox ul li:nth-child(7) {
    height: 250px;
    padding: 20px 70px 0px 145px;
}

#contents_block #productsBox ul li:nth-child(8) {
    height: 250px;
    padding: 20px 0px 0px 0px;
}



#contents_block #productsBox ul li:nth-child(9) {
    height: 336px;
    padding: 60px 0px 0 248px;
}

#contents_block #productsBox ul li:nth-child(9) img {
    height: 300px;
}

#contents_block #productsBox ul li:nth-child(10) {
    height: 336px;
    padding: 60px 0px 0 80px;
}

#contents_block #productsBox ul li:nth-child(10) img {
    height: 300px;
}


#contents_block #productsBox ul li {
    padding-bottom: 60px !important;
}

#contents_block .jimotoBox {
    width: 820px;
    margin: 0 auto;
    padding: 0px 0px 0 0px !important;
    text-align: center;
}

#contents_block .jimotoBox img {
    width: 100%;
    height: auto;
}

#contents_block .jimotoBox .jimotoPk {
    width: 100%;
}

#contents_block .jimotoBox .jimotoLogo {
    width: 400px;
}





#contents_block .unTexit01 {
    font-size: 14px;
    text-align: center;
    color: #666;
    margin: 30px auto 40px auto;
    padding: 0;
}

#contents_block .unTexit02 {
    font-size: 11px;
    text-align: center;
    color: #666;
}

#contents_block #productsBoxIn .btnDtl {
    display: block;
    width: 100px;
    margin: 8px auto 0 auto;
    line-height: 20px;
    padding: 3px 0;
    font-size: 12px;
    color: #fff;
    border-radius: 2em;
    background: url(../img/18_btndtl_ic.png) right no-repeat;
    background-color: #999;
    background-size: 18px;
}

#contents_block #productsBoxIn .btnDtl:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
}


/*************
 * バナー
 *************/
#contents_block #bnrBox {
    width: 980px;
    margin: 50px auto 50px;
    text-align: center;
}

#contents_block #bnrBox a {
    text-indent: -9999px;
    display: block;
    margin: 0 auto;
}

#contents_block .bnr_note {
    text-align: center;
    padding: 10px 0;
    margin: 0;
    font-size: 14px;
}

#contents_block #bnrBox a.bnr_jimoto_pocky {
    width: 950px;
    height: 325px;
    background: url(../img/16_bnr_jimoto.jpg) no-repeat 0 0;
}


#contents_block #bnrBox a.bnr_jimoto_pocky:hover {
    background: url(../img/16_bnr_jimoto_o.jpg) no-repeat 0 0;
}



/*******************
 * バナー
 *******************/

#contents_block .subBox {
    margin: 50px auto 50px auto;
    width: 980px;
}

#contents_block .bnrBox a {
    font-size: 0px;
    width: 465px;
}

#contents_block .bnrBox a img {
    width: 465px;
    height: 262px;
}

#contents_block .bnrBox,
#contents_block .bnrBox ul {
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    list-style: none;
}

#contents_block .bnrBox ul {
    width: 980px;
}

#contents_block .bnrBox ul li {
    padding: 10px 0px;
}

#contents_block .bnrBox .item03 {
    float: left;
    margin-left: 20px
}

#contents_block .bnrBox .col1 {
    width: 100%;
    background: #e9e9e9;
    color: #333;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
}

#contents_block .bnrBox .col1 .txt {
    width: 100%;
    padding-left: 10px;
    box-sizing: border-box;
}



#contents_block .bnrBox .col3 {
    width: 100%;
    background: #e9e9e9;
    color: #333;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
}

#contents_block .bnrBox .col3 .new {
    width: 20%;
    background: #ce0000;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

#contents_block .bnrBox .col3 .day {
    width: 20%;
    background: #999;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

#contents_block .bnrBox .col3 .txt {
    width: 60%;
    padding-left: 10px;
    box-sizing: border-box;
}




#contents_block .bnrBox .col2 {
    width: 100%;
    background: #e9e9e9;
    color: #333;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
}

#contents_block .bnrBox .col2 .new {
    width: 110px;
    background: #ce0000;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

#contents_block .bnrBox .col2 .txt {
    width: 355px;
    padding-left: 10px;
    box-sizing: border-box;
}


#contents_block .bnrBox .col2w {
    width: 100%;
    background: #e9e9e9;
    color: #333;
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
}

#contents_block .bnrBox .col2w .new {
    width: 130px;
    background: #ce0000;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

#contents_block .bnrBox .col2w .txt {
    width: 335px;
    padding-left: 10px;
    box-sizing: border-box;
}






#contents_block .bnrBox img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
}


#contents_block .bnrBoxB {
    margin: 30px auto;
    padding: 0 0 0 5px;
    width: 950px;
}

#contents_block .bnrBoxB a {
    font-size: 0px;
    width: 950px;
}

#contents_block .bnrBoxB a img {
    width: 950px;
    height: auto;
}

#contents_block .bnrBoxB,
#contents_block .bnrBoxB ul {
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    list-style: none;
}

#contents_block .bnrBoxB ul {
    width: 950px;
}

#contents_block .bnrBoxB ul li {
    padding: 10px 0px;
}

#contents_block .bnrBoxB .col3 {
    width: 950px;
    background: #e9e9e9;
    color: #333;
    font-size: 12px;
    text-align: left;
    padding-left: 15px;
    box-sizing: border-box
}

#contents_block .bnrBoxB img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70 )";
}

#contents_block .bnrBoxB .sp {
    display: none
}




/***************
 *キャンペーンバナー_
 ***************/

#contents_block .bnrBoxCp {
    width: 980px;
    margin: 40px auto;
}

#contents_block .bnrBoxCp img {
    width: 980px;
    height: auto;
}

#contents_block .bnrBoxCp a:hover img {
    opacity: 0.8;
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
}

#contents_block .bnrBoxCp .nodPc {
    display: none
}


#contents_block .topBorder {
    border-top: solid #e9e9e9 2px;
    margin-top: 70px;
    padding-top: 50px;
}

#contents_block .bnrBorder {
    width: 100%;
    border-top: solid #e9e9e9 4px;
    margin: 50px 0;

}


.clearfix:after {
    display: block;
    clear: both;
    content: "";
}

#contents_block .products_note {
    pointer-events: none;
}


/* smartPhone */
@media screen and (max-width: 640px) {

    #contents_block .spn {
        display: none
    }

    #contents_block #productsHeader {
        min-width: 320px;
        width: 100%;
        margin: 0 auto;
        height: 100px;
    }

    #contents_block #productsHeader h1 {
        width: 100%;
        height: 100px;
        background: url(../img/17_img_products_h1_title_sp.png) no-repeat center center;
    }

    /**
    * 商品一覧
    */

    #contents_block #productsBox {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        margin-top: 45px;
        font-size: 0;
        text-align: center;
    }

    #contents_block #productsBox ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    #contents_block #productsBox li {
        text-align: center;
        width: 50%;
    }

    #contents_block #productsBox ul li {
        padding-bottom: 30px !important;
    }

    #contents_block #productsBox li a,
    #contents_block #productsBox li .products_note {
        display: block;
        color: #600;
        line-height: 140%;
        letter-spacing: -2px;
    }

    #contents_block #productsBox li .products_img img {
        position: relative;
        width: auto;
        height: 52vw;
    }

    #contents_block #productsBox .gogo .products_img img {
        height: 28vw;
        width: auto;
    }

    #contents_block #productsBox .gogo .products_new {
        height: 4vw;
    }


    #contents_block #productsBox #btn_chocolate9 img:hover,
    #contents_block #productsBox #btn_ichigo9 img:hover {
        top: 0px;
    }

    #contents_block #productsBox li .products_note {
        font-size: 22px;
        margin-top: 10px;
    }

    #contents_block #productsBox .products_note span {
        display: block;
        color: #F00;
        font-size: 20px;
        margin-top: 0px;
    }

    #contents_block #productsBox .products_note .newB {
        display: block;
        color: #F00;
        font-size: 22px;
        font-weight: bold;
        margin-top: -0.5em;
    }

    #contents_block #productsBox .products_note span.cp {
        color: #666;
    }

    #contents_block #productsBox .products_new {
        padding-bottom: 12px;
    }

    #contents_block #productsBox .products_new span.blank {
        display: block;
        height: 28px;
    }

    #contents_block #productsBox .products_new img {
        width: auto;
        height: 30px;
        margin: 0 auto;
    }



    #contents_block .unTexit01 {
        text-align: center;
        font-size: 14px;
        color: #666;
        margin: 30px auto 50px auto;
        padding: 0;
    }

    #contents_block .unTexit02 {
        font-size: 14px;
        text-align: center;
        color: #666;
    }

    #contents_block #productsBox ul li:nth-child(1),
    #contents_block #productsBox ul li:nth-child(2),
    #contents_block #productsBox ul li:nth-child(3),
    #contents_block #productsBox ul li:nth-child(4),
    #contents_block #productsBox ul li:nth-child(5),
    #contents_block #productsBox ul li:nth-child(6),
    #contents_block #productsBox ul li:nth-child(7),
    #contents_block #productsBox ul li:nth-child(8),
    #contents_block #productsBox ul li:nth-child(9),
    #contents_block #productsBox ul li:nth-child(10),
    #contents_block #productsBox ul li:nth-child(11),
    #contents_block #productsBox ul li:nth-child(12) {
        width: 50%;
        height: 72vw;
        padding: 0px 0px 0 0px;
    }


    #contents_block #productsBox ul li:nth-child(5) {
        padding: 42px 0px 0 0px;
    }

    #contents_block #productsBox ul li:nth-child(6) {
        height: 85vw !important;
    }


    #contents_block #productsBox ul li:nth-child(7) {
        height: 280px !important;
        padding-top: 4vw;
    }

    #contents_block #productsBox ul li:nth-child(8) {
        height: 280px !important;
        padding-top: 4vw;
    }


    #contents_block #productsBox ul li:nth-child(9) img {
        height: 48vw;
        padding-top: 10vw;
    }

    #contents_block #productsBox ul li:nth-child(10) img {
        height: 48vw;
        padding-top: 10vw;
    }


    #contents_block #productsBoxIn .btnDtl {
        display: block;
        width: 25vw;
        margin: 8px auto 0 auto;
        padding: 0.3em 0;
        font-size: 18px;
        line-height: 20px;
        color: #fff;
        border-radius: 2em;
        background: url(../img/18_btndtl_ic.png) right no-repeat;
        background-color: #999;
        background-size: 18px;
    }


    #contents_block .jimotoBox {
        width: 90%;
        margin: 0 auto;
        padding: 0px 0px 0 0px !important;
    }

    #contents_block .jimotoBox img {
        width: 100%;
        height: auto;
    }

    #contents_block .jimotoBox .jimotoPk {
        width: 100%;
    }

    #contents_block .jimotoBox .jimotoLogo {
        width: 90%;
    }



    /*************
    * バナー
    *************/
    #contents_block #bnrArea {
        width: 600px;
        margin: 9px auto 50px;
    }

    #contents_block #bnrBox a {
        text-indent: -9999px;
        display: block;
        margin: 0 auto;
    }

    #contents_block .bnr_note {
        text-align: center;
        padding: 10px 0;
        margin: 0;
        font-size: 14px;
    }


    #contents_block #bnrBox a.bnr_jimoto_pocky {
        width: 600px;
        height: 400px;
        background: url(../img/16_bnr_jimoto_sp.jpg) no-repeat 0 0;
    }


    /*******************
    * バナー
    *******************/

    #contents_block .subBox {
        margin: 50px auto 0 auto;
        width: 80%;
    }

    #contents_block .bnrBox a {
        font-size: 0px;
        width: 100%;
    }

    #contents_block .bnrBox a img {
        width: 100%;
        height: auto;
    }

    #contents_block .bnrBox,
    #contents_block .bnrBox ul {
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        list-style: none;
    }

    #contents_block .bnrBox ul {
        width: 100%;
        margin: 0px 0 0 0;
    }

    #contents_block .bnrBox ul li {
        padding: 10px 0px;
    }

    #contents_block .bnrBox .item03 {
        margin: 10px auto
    }


    #contents_block .bnrBox .col1 {
        width: 100%;
        background: #e9e9e9;
        color: #333;
        font-size: 1em;
        text-align: left;
        box-sizing: border-box;
    }

    #contents_block .bnrBox .col1 .txt {
        width: 100%;
        padding-left: 10px;
        box-sizing: border-box;
    }



    #contents_block .bnrBox .col3 {
        width: 100%;
        background: #e9e9e9;
        color: #333;
        font-size: 1em;
        text-align: left;
        box-sizing: border-box;
    }

    #contents_block .bnrBox .col3 .new {
        width: 10%;
        background: #ce0000;
        color: #fff;
        text-align: center;
    }

    #contents_block .bnrBox .col3 .day {
        width: 20%;
        background: #999;
        color: #fff;
        text-align: center;
    }

    #contents_block .bnrBox .col3 .txt {
        width: 70%;
        padding-left: 10px;
        box-sizing: border-box;
    }

    #contents_block .bnrBox .col2 {
        width: 100%;
        background: #e9e9e9;
        color: #333;
        font-size: 1em;
        text-align: left;
        box-sizing: border-box;
    }

    #contents_block .bnrBox .col2 .new {
        width: 25%;
        background: #ce0000;
        color: #fff;
        text-align: center;
    }

    #contents_block .bnrBox .col2 .txt {
        width: 75%;
        padding-left: 10px;
        box-sizing: border-box;
    }

    #contents_block .bnrBox .col2w {
        width: 100%;
        background: #e9e9e9;
        color: #333;
        font-size: 1em;
        text-align: left;
        box-sizing: border-box;
    }

    #contents_block .bnrBox .col2w .new {
        width: 30%;
        background: #ce0000;
        color: #fff;
        text-align: center;
    }

    #contents_block .bnrBox .col2w .txt {
        width: 70%;
        padding-left: 10px;
        box-sizing: border-box;
    }


    #contents_block .bnrBoxB a {
        font-size: 0px;
        width: 465px;
    }

    #contents_block .bnrBoxB a img {
        width: 465px;
        height: auto;
    }

    #contents_block .bnrBoxB,
    #contents_block .bnrBoxB ul {
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        list-style: none;
    }

    #contents_block .bnrBoxB ul {
        width: 465px;
        margin: 0px 0 0 0;
    }

    #contents_block .bnrBoxB ul li {
        padding: 10px 0px;
    }

    #contents_block .bnrBoxB .item03 {
        margin: 40px auto
    }

    #contents_block .bnrBoxB .col3 {
        width: 450px;
        background: #e9e9e9;
        color: #333;
        font-size: 12px;
        text-align: left;
        padding-left: 15px;
    }

    /***************
    *キャンペーンバナー
    ***************/

    #contents_block .bnrBoxCp {
        width: 580px;
        margin: 50px auto;
    }

    #contents_block .bnrBoxCp a img {
        width: 580px;
        height: auto;
    }

    #contents_block .bnrBoxCp .nodSp {
        display: none
    }



    .clearfix:after {
        display: block;
        clear: both;
        content: "";
    }


    #contents_block .topBorder {
        border-top: solid #e9e9e9 2px;
        margin-top: 80px;
        padding-top: 50px;
    }

    #contents_block .bnrBorder {
        width: 100%;
        border-top: solid #e9e9e9 4px;
        margin: 50px 0;

    }

}




/***************
*bnrCorpproduct
***************/
#contents_block .bnrCorpproduct {
    width: 100%;
    margin: 0 0 0 0;
}

#contents_block .bnrCorpproduct a {
    width: 500px;
    margin: 0 auto;
    background-color: #000;
}

#contents_block .bnrCorpproduct a img {
    width: 100%;
    height: auto;
}

#contents_block .bnrCorpproduct a img:hover {
    opacity: 0.98;
}

/* smartPhone */
@media screen and (max-width: 640px) {

    #contents_block .bnrCorpproduct a {
        width: 70%;
        background-color: #fff;
    }
}