@charset 'utf-8';

/* --------------------------------
    枠上書き
-------------------------------- */
#bf{
    background-color: #fff !important;
}
.bf_page .container-fluid{
    padding:0;
}
.bf_page .inner{
    max-width:none;
}
.bf_page .theme_main_only #main{
    padding:0;
}

/* --------------------------------
    common調整
-------------------------------- */
body.page01 #common01 .header-layout-type01 h2{
    margin: 0;
    padding: 22px 0 0;
    font-size: 1.6rem;
    color: #1f232e;
}
body.page01 #common01 .header-layout-type01 p{
    margin: 0;
    padding: 5px 0 0;
    font-size: 1.2rem;
}


/* --------------------------------
    共通
-------------------------------- */
#bf a:link,
#bf a:visited,
#bf a:hover,
#bf a:active{
    color: #000;
    text-decoration: none;
}
#bf > .wrap01_wrapper_outer{
    background: #fff;
}
#bf .wrap02{
    background: #F4F4F6;
}
#bf .mw480block{
    display: block;
}
/* --------------------------------
    #c01
-------------------------------- */
#bf #c01 > .inner01{
    position: relative;
    background-color: #f8f8f8;
}
#bf #c01 h1{
    margin: 0;
    padding: 0;
}

/* --------------------------------
    #c02
-------------------------------- */
#bf #c02 > .inner01{
    color: #000;
    padding:40px 0;
    margin: 0 20px;
}
    #bf #c02 .items{
    }
        #bf #c02 .items > .item{
            padding:0 0 60px;
        }
        #bf #c02 .item .title01{
            text-align: center;
            margin: 0;
            padding: 0 0 40px;
        }
        #bf #c02 .item .p_block01{
            padding:0 10px 20px;
        }
            #bf #c02 .item .p_block01 p{
                font-size: 1.4rem;
                margin: 0;
            }
            #bf #c02 .item .p_block01 p span{
            }
        #bf #c02 .item .i_block01{
            padding:20px 0;
        }
        #bf #c02 .item .i_block02{
            text-align: center;
            max-width: 500px;
            margin:0 auto;
            padding:40px 30px 20px;
        }
        #bf #c02 .p_block01_tex01{
            color: #6f7271;
        }

/* --------------------------------
    #c03
-------------------------------- */
#bf #c03{
    background: #F4F4F6;
}
    #bf #c03 > .inner01{
        color: #000;
        margin: 0 20px;
        padding:10px 0 0;
    }
    #bf #c03 > .inner01 > section{
    }
    #bf #c03 > .inner01 > section > .inner02{
    }
    #bf #c03 > .inner01 > section > .inner02::before{
        content:'';
        border-top: 2px solid #d9d9d9;
        display: block;
        margin : 0px 5px;
    }
    #bf #c03 > .inner01 > section:first-child > .inner02::before{
        display: none;
    }

    #bf #c03 h2{
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        padding:30px 0 ;
        margin : 0px 5px ;
        background: url('../img/common/ico_plus01.png') center right no-repeat;
        -webkit-background-size: 14px auto;
        background-size:14px auto;
    }
    #bf #c03 h2.active{
        background: url('../img/common/ico_minus01.png') center right no-repeat;
        -webkit-background-size: 14px auto;
        background-size: 14px auto;
    }

        #bf #c03 .items_wrap{
            display: none;
            padding:0 0 40px;
        }

        #bf #c03 .items{

        }
        #bf #c03 .items.active{
        }

        #bf #c03 .item{
            font-size: 1.4rem;
            padding:5px;
        }

        #bf #c03 .item a{
            height: 100%;
            display: block;
            padding:9px;
            background:  #FFF url('../img/common/ico_arrow02.png') bottom 35px right 20px  no-repeat;
            -webkit-background-size: 9px 16px;
            background-size: 9px 16px;
        }

        #bf #c03 .item .item_image{
            position: relative;
            padding:0 0 20px;
        }

        #bf #c03 .item .item_image.rank01::before{
            content:'';
            display: block;
            width: 25%;
            height: 25%;
            position: absolute;
            top:7%;
            left:7%;
            background: url('../img/common/ico_rank01.png') top left no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
        }
        #bf #c03 .item .item_image.type02::before{
            content:'';
            display: block;
            width: 25%;
            height: 25%;
            position: absolute;
            top:7%;
            left:7%;
            background: url('../img/common/ico_type02.png') top left no-repeat;
            -webkit-background-size: 100%;
            background-size: 100%;
        }

        #bf #c03 .item .item_detail{
            padding:0 10px;
        }
            #bf #c03 .item .price{
                padding:0 0 5px;
            }
            #bf #c03 .item .price span{
                font-weight: bold;
            }
            #bf #c03 .item .price span.price_textfix01{
                font-weight: normal;
            }
            #bf #c03 .item .price span.price_brfix01{
                display: block;
            }
            #bf #c03 .item .summary{
                line-height: 1.6;
                padding:0 0 10px;
            }
            #bf #c03 .item dl{
                padding:0 0 10px;
                margin:0 0 10px;
                border-bottom: 2px solid #d9d9d9;
            }
            #bf #c03 .item dl dt{
                padding:0 0 10px;
            }
            #bf #c03 .item dl dd{
                padding:0 0 10px;
            }
            #bf #c03 .item dl dd span{
                font-weight: bold;
            }
            #bf #c03 .item dl dd span{
                font-weight: bold;
            }
            #bf #c03 .item .target_wrap{
                padding:5px 0 20px;
                font-size: 1.2rem;
            }

            #bf #c03 .item .target_wrap ul{
            }
            #bf #c03 .item .target_wrap li{
                float: left;
                padding:5px 5px 0 0;
            }
            #bf #c03 .item .target_wrap li span{
                display: inline-block;
                background: #000;
                color: #FFF;
                padding:2px 15px;
                border-radius: 15px;
            }
            #bf #c03 .item .target_wrap li.target01 span{
                background: #e97b9b;
            }
            #bf #c03 .item .target_wrap li.target02 span{
                background: #73a7ff;
            }
            #bf #c03 .item .target_wrap li.target03 span{
                background: #9f60f4;
            }

        #bf #c03 .items.layout02 .item .item_image{
            padding:0 0 10px;
        }

        #bf #c03 .items.layout02 {
            display: flex;
            /* flex-flow: row wrap; */
            flex-wrap: wrap;
            justify-content: space-between;
        }
        #bf #c03 .items.layout02.active {
        }

        #bf #c03 .items.layout02 .item{
            width: 50%;
            display: flex;
            align-items: stretch;
        }
        #bf #c03 .items.layout02 .item a{
            display: block;
            background:  #FFF url('../img/common/ico_arrow02.png') bottom 15px right 20px  no-repeat;
            -webkit-background-size: 9px 16px;
            background-size: 9px 16px;
        }
        #bf #c03 .items.layout02 .item a.no_arrow01{
            background-image: none;
        }
        #bf #c03 .items.layout02 .item h3{
            font-size: 1.4rem;
            margin: 0;
            padding:0 0 30px;
        }

        #bf #c03 .items.layout02 .item h4{
            font-size: 1.4rem;
            margin: 0;
            padding:0 0 20px;

        }
        #bf #c03 .items.layout02 .item h4::before{
            content:'';
            border-top: 2px solid #d9d9d9;
            display: block;
            padding:0 0 15px;

        }
            #bf #c03 .items.layout02 .item .target_wrap{
                padding:5px 0 40px;
            }

            #bf #c03 .items.layout02 .item .target_wrap li{
                float: none;
            }



/* --------------------------------
    #c04
-------------------------------- */
#bf #c04{
    text-align: center;
}
#bf #c04 > .inner01{
    padding:40px 0;
    margin: 0 20px;
}
    #bf #c04_01{
        padding:0 0 40px;
    }
    #bf #c04_01 h2{
        font-size: 1.4rem;
    }
    #bf #c04_01 a{
        margin: 0 auto;
        max-width: 600px;
        display: block;
    }
    #bf #c04_02{
    }
    #bf #c04_02 .deliv_free{
        margin:0 20px;
        font-size: 1.4rem;
        display: inline-block;
        padding:10px 30px 10px 50px;
        border: 2px solid #808080;
        font-weight: bold;
        background:  #FFF url('../img/common/ico_deliv01.png') center left 20px  no-repeat;
        -webkit-background-size: 20px auto;
        background-size: 20px auto;
    }
    #bf #c04_02 .deliv_free p{
        margin: 0;
        line-height: 1;
    }
    #bf #c04_02 .deliv_free p span.nw{
        font-weight: normal;
    }

/******************************
    Media Query
*******************************/
@media only screen and (min-width: 320px){
    #bf #c03 .items.layout02 .item{
        width: 100%;
    }
    #bf #c03 .item .target_wrap{
        font-size: 1rem;
    }
    #bf #c04_01 h2 span{
        display: block;
    }
    #bf #c04_02 .deliv_free{
        width: 100%;
        margin: 0 ;
        padding:10px 30px 10px 50px;
    }
    #bf #c04_02 .deliv_free .br{
        display: block;
        line-height: 1.5;
    }

}

@media only screen and (min-width: 375px){

    #bf #c03 .items.layout02 .item{
        width: 50%;
    }

    #bf #c03 .item .target_wrap{
        font-size: 1.2rem;
    }
    #bf #c04_01 h2 span{
        display: inline;
    }
    #bf #c04_02 .deliv_free{
        width: auto;
        margin: 0 20px;
        padding:10px 30px 10px 50px;
    }
}


@media only screen and (min-width: 480px){
    #bf .mw480block{
        display: inline;
    }
    #bf #c03 .item .price span.price_brfix01,
    #bf #c04_02 .deliv_free .br{
        display: inline;
    }
}

@media only screen and (min-width: 768px) {
    #common01 > .wrap01 > .inner01{
        margin: 0px 5% 0;
    }
    #common01 h2{
        padding-top:40px;
    }
    #bf > .wrap01{
        max-width: 1260px;
        margin: 0 auto;
    }
    #bf #c02 > .inner01{
        max-width: 1130px;
        margin: 0 auto;
    }
    #bf #c02 .item .p_block01{
        padding:0 15% 40px;
    }
    #bf #c02 > .inner01{
        padding: 80px 0;
    }
    #bf #c02 .item .title01{
        padding:0 0 80px;
    }
    #bf #c02 .item .p_block01 p{
        line-height: 1.8;
        font-size: 1.8rem;
    }
    #bf #c02 .item .p_block01 p span{
        /*display: block;*/
    }
    #bf #c02 .item .i_block01{
        padding:40px 0;
    }


    #bf #c03 > .inner01{
        max-width: 800px;
        margin: 0 auto;
        margin: 0 auto;
        padding: 40px 5%;
    }

    #bf #c03 > .inner01 > section > .inner02::before{
        content:'';
        border-top: 2px solid #d9d9d9;
        display: block;
        margin : 0px 5px;
    }
    #bf #c03 > .inner01 > section:first-child > .inner02::before{
        display: none;
    }

    #bf #c03 h2{
        font-size: 1.8rem;
    }
    #bf #c04 > .inner01{
        max-width: 1130px;
        margin: 0 auto;
        padding:80px 0;
    }
    #bf #c04_01 h2{
        font-size: 1.8rem;
    }

}