@charset "UTF-8";
/*=================================================
default.css上書き
=================================================*/
#top_header {
	font-family: 'Noto Sans JP', sans-serif;
    position: unset;
    z-index: 9999;
    width: 100%;
}
/*=================================================
header
=================================================*/
/*ヘッダキャッチ*/
#top-catch{
	background:#287ec7;
	color:#fff;
	text-align:center;
	padding:3px;
	font-size:12px;
}
/*ヘッダー背景*/
#top_header ul,
#header ul {
	padding: 0;
}
#drawer-header {
	width: 100%;
	height: 80px;/*ヘッダー高さを指定(px)*/
	background: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99999;
	/*border-bottom: 1px solid #dcdcdc;*/
	font-family: 'Noto Sans JP', sans-serif;
}
#drawer-header-bg {
	height: 80px;/*ヘッダーと同じ高さを指定(px)*/
}
a#return[name="return"] {
	margin-top: -100px;/*ヘッダーと同じ高さを指定(px)※マイナス*/
	padding-top: 100px;/*ヘッダーと同じ高さを指定(px)*/
}
#drawer-nav {
	position: relative;
}
.drawer-nav-unshown,
.drawer-nav-unshown2 {
	display:none;
}
#drawer-nav-close {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 80px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222;
    opacity: 0;
    transition: .3s ease-in-out;
}
/*ドロワーエリア*/
#drawer-nav-content {
    overflow: auto;
    position: fixed;
    left: -100%;
    top: 80px;
    z-index: 9999;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition-property: opacity;
    transition-duration:0.3s;
    transition-timing-function:ease-in-out;
    background:#fff;
}
/*ドロワー外側背景*/
#drawer-nav-input:checked ~ #drawer-nav-close {
    display: block;
    opacity: 1;
    background: #fff;
}
#drawer-nav-input:checked ~ #drawer-nav-content {
        left: 0;
        opacity: 1;
        transition-property: opacity;
        transition-duration: 0.3s;
        transition-timing-function: ease-in-out;
        padding: 0 0 30vw 0;
        box-sizing: border-box;
}

/*ヘッダー タイトルロゴ*/
#drawer-header h1 {
	width: 110px;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 15px 0;
	margin: auto;
	display: block;
}
#drawer-header h1 img {
	width: 100%;
	margin: 0;
}


/*ヘッダー アイコンサイズ*/
#drawer-nav-open,
#drawer-header #drawer-nav > #header-tel,
#drawer-header #drawer-nav > #header-login,
#drawer-header #drawer-nav > #headerbox {
	position: absolute;
	top:13px;
	font-weight:bold;
}
#drawer-header #drawer-nav > #header-tel img,
#drawer-header #drawer-nav > #header-login img,
#drawer-header #drawer-nav > #headerbox img {
	width:25px;
	margin:0 auto;
	display:block;
}
#drawer-header #drawer-nav > #header-tel a,
#drawer-header #drawer-nav > #header-login a,
#drawer-header #drawer-nav > #headerbox a {
	 display:block;
	 text-decoration:none;
}
#drawer-header #drawer-nav > #header-tel span,
#drawer-header #drawer-nav > #header-login span,
#drawer-header #drawer-nav > #headerbox span {
	 font-size: 8px;
	 letter-spacing: -1px;
	 text-align: center;
	 display:block;
	 margin: 5px 0 0;
	 color: #282828;
}

/*ヘッダー MENUボタン*/
#drawer-nav-open {
	width: 25px;
	height: 25px;
	margin: 0;
	padding: 0;
	display: block;
	background: url(https://www.b-style-msc.com/img/icon-menu-open.svg) no-repeat;
	background-size: contain;
	left: 3.5%;
	/* position: relative; */
}
#drawer-nav-open:before {
	content:"メニュー";
	display:block;
	font-size:8px;
	letter-spacing: -1px;
	color: #282828;
	font-weight: bold;
	position: absolute;
	bottom: -12px;
	left: -3px;
	width: 40px;
}
#drawer-nav-input:checked+#drawer-nav-open {
	background: url(https://www.b-style-msc.com/img/icon-menu-close.svg) no-repeat;
	background-size: 25px 25px;
	/* padding: 3vw; */
}


/*ヘッダー フリーダイヤルボタン*/
#header-tel{
	left: 15%;
	width: 60px;
}

/*ヘッダー ログインボタン*/
#header-login{
	position: absolute;
	right: 15%;
	width: 60px;
}


/*ヘッダー カートボタン */
.member_info_cart_info #headerbox {
    width: 45px;
    display: table;
    padding: 0;
    box-sizing: border-box;
    vertical-align: middle;
    position: absolute;
    top: 16px;
    right: 20px;
}
.member_info_cart_info #headerbox a {
    color: #222;
    display: inline-block;
    position: relative;
}
#headerbox{
	position: absolute;
	top: 17px;
	right: 3.5%;
	width: 27px;
}
#hbtnbox {
    /* width: 45px; */
    vertical-align: middle;
    display: table-cell;
    text-align: right;
}



#drawer-nav-content h2 {
	font-size: 25px;
	/* font-family: 'Playfair Display', serif; */ /*webフォント設定*/
	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
}
/*ドロワー内 メインメニュー*/
#dr-menu{
	display:flex;
	justify-content:space-between;

}
#dr-menu li{
border-top: 1px solid #287ec7;
width: 33.3333%;
border-right: 1px solid #287ec7;
}
#dr-menu li:last-child{
border-right:none;
}
#dr-menu li a{
	display:block;
	text-align:center;
	text-decoration:none;
	width: 100%;
	font-weight: bold;
	color: #282828;
	font-size: 11px;
	padding: 10px 5px;
	box-sizing: border-box;
}
#dr-menu li a img{
	width: 22px;
	vertical-align:middle;
}

/*ドロワー内 検索*/
#dr-search-area{
	background:#287ec7;
	padding:10px 5%;
}
#drawer-search-base {
	margin: 0;
	box-sizing: border-box;
	background: #fff;
	border-radius: 100px;
}
#drawer-search {
	width: 85%;
	font-size: 16px;
	border: none;
	padding: 7px 5px 7px 20px;
	box-sizing: border-box;
	border-radius: 100px;
}
#drawer-search-button {
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	background: url(https://www.b-style-msc.com/img/icon-search.svg) no-repeat right top;
	background-size: 20px;
	border: none;
	/* box-sizing: border-box; */
}


/*ドロワー内 アコーディオンメニュー*/
.header-acco{
	padding:5%;
}
.header-acco ul,
.header-acco ul li {
    list-style: none;
	margin: 0;
	padding: 0;
}
.header-acco label {
	font-weight: bold;
    cursor: pointer;
}
.header-acco ul li label {
	font-weight: normal;
}
.header-acco > ul > li:last-child {
	/* margin-bottom: 130px; */
	font-family: 'Montserrat', sans-serif;
}
.header-acco .toggle {
    display: none;
}
.header-acco .toggle + label + ul{
    max-height: 0;
    overflow: hidden;
    transition: all .2s ease-out;
}
.header-acco .toggle + label {
	background: url(https://www.b-style-msc.com/img/arrow-bottom.svg) no-repeat right 15px center;
	background-size: 15px;
	font-size: 15px;
	font-weight: 600;
}
.header-acco .toggle:checked + label + ul {
    max-height: 9999px;
    transition: all 2s ease-in;
    border-top: 1px solid #287ec7;
}
.header-acco .toggle:checked + label {
	background: url(https://www.b-style-msc.com/img/arrow-top.svg) no-repeat right 15px center #fff;
	background-size: 15px;
	font-family: 'Montserrat', sans-serif;
}
.header-acco label,
.header-acco ul li a {
	padding: 8px 0;
	display: block;
	font-size: 14px;
	color: #333;
}
.header-acco ul li {
	/* font-family: 'Playfair Display', serif; */ /*webフォント設定*/
	border-bottom: 1px solid #287ec7;
	font-family: 'Montserrat', sans-serif;
}
.header-acco ul li ul {
	background: #fff;
}
.header-acco ul li label,
.header-acco ul li ul li {
	/* font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; */ /*フォント設定*/
	border-bottom: none;
	font-family: 'Montserrat', sans-serif;
}
.header-acco ul li label {
	border-top: 1px solid #287ec7;
}
.header-acco ul li a,
.header-acco ul li ul li:last-child a,
.header-acco ul li:last-child div a {
	color: #333;
	text-decoration: none;
}
.header-acco ul li label,
.header-acco ul li a {
	padding: 12px;
	background: url(https://www.b-style-msc.com/img/icon-tri.svg) no-repeat right 15px center;
	background-size: 13px;
	font-size: 14px;
}
.header-acco ul li ul li a {
	/* padding-left: 18px; */
	border-bottom: none;
	display:flex;
	align-items:center;
}
.header-acco ul li ul li a img{
	width: 21px;
	margin:0 5px 0 0;
}




/*ドロワー内追加*/
#menu-link-blog-area{
	/* display: flex; */
	/* justify-content: space-between; */
	/* flex-wrap: wrap; */
	padding: 10vw 5vw 8vw!important;
	box-sizing:border-box;
	font-size: 0;
}
#menu-link-blog-area li{
	width: 47.5%;
	border: 1px solid;
	display: inline-block;
	margin: 0 3% 3% 0;
	border-radius: 4px;
	box-shadow: 0px 2px 0px;
}
#menu-link-blog-area li:nth-child(2n){
	margin: 0 0 3% 0;
}
#menu-link-blog-area li a{
	background:none;
	text-align: center;
	font-size: 17px;
	font-weight: 500;
	/* border-radius: 4px; */
}

#menu-close {
	display: flex;
	background: #fff;
	color: #287ec7;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	text-align: center;
	width: 80%;
	margin: 30px auto;
	padding: 10px!important;
	font-size: 17px;
	border-radius: 100px;
	border: 2px solid #287ec7;
	justify-content: center;
	align-items: center;
}
#menu-close img{
	display: inline-block;
	color: #fff;
	vertical-align: middle;
	width: 20px;
	margin: 0 10px;
}

.area-link-primary-category{
	margin:0;
	padding:0;
	font-weight: 500;
	font-size: 16px;
	border-top: 1px solid #287ec7;
}
.area-link-primary-category a{
    font-size: 16px!important;
    background: url(https://www.b-style-msc.com/img/icon-tri.svg) no-repeat right 15px center #fff!important;
    background-size: 15px 15px!important;
    font-weight: 600;
}

/*===================================================
global navi
=====================================================*/
#header-gnav{
    display: flex;
    /* justify-content: space-between; */
    padding: 0;
    box-sizing: border-box;
    flex-wrap: wrap;
}
#header-gnav li{
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    list-style:none;
    width: 25%;
}
#header-gnav li a{
    color:#fff;
    text-decoration:none;
    display: block;
    text-align: center;
    background: #8bb4d9;
    padding:7px 0;
    font-weight: bold;
}
#header-gnav li:nth-child(2n) a{
    background: #287ec7;
}
#header-gnav li a img {
    width:25px;
    display:block;
    margin:0 auto 5px;
}
/*===================================================
送料無料
=====================================================*/
#shipping-catch{
	background:#eb6877;
	display:flex;
	justify-content:center;
	padding:5px 0;
	align-items:center;
}
.subject-food{
	color:#eb6877;
	display:flex;
	justify-content:center;
	font-size: 13px;
}
.subject-food span{
	background:#fff;
	padding: 4px 7px;
	display:block;
	border-radius:100px;
	margin: 0 3px 0 0;
	font-weight: bold;
}

.ship-free{
	color:#f7e83e;
	font-weight: bold;
}
.ship-free strong{
	font-size: 20px;
	font-family: 'Montserrat', sans-serif;
}
.ship-free span{
	font-size:16px;
}



/*===================================================
footer
=====================================================*/
#footer-inner{
	border-top:2px solid #287ec7;
	font-family: 'Noto Sans JP', sans-serif;
}
#footer-inner .foot-menu-list{
	padding: 5%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#footer-inner .foot-menu-list li{
	width:50%;
	list-style:none;
}
#footer-inner .foot-menu-list li a{
	display:block;
	padding:10px 3px;
	font-size:12px;
	text-decoration:none;
	display:flex;
	align-items:center;
	color:#282828;
	line-height: 1.4;
}
#footer-inner .foot-menu-list li a:before{
	content:"";
	display:block;
	width:5px;
	height:5px;
	padding:5px 3px;
	font-size:12px;
	text-decoration:none;
	background: url(https://www.b-style-msc.com/img/icon-tri.svg) no-repeat;
	background-size:contain;
	background-position:center;
	margin:0 5px 0 0;
}
.foot-sns-area{
	display:flex;
	flex-wrap:wrap;
	padding:5%;
	justify-content:space-between;
	align-items:center;
	background:#f0f8ff;
}
.foot-sns-area .foot-logo{
	width:150px;
}
#footer-inner .foot-sns-list{
	display:flex;
	flex-wrap:wrap;
	width:100px;
	padding: 0;
	justify-content: flex-end;
	margin: 0 13% 0 0;
}
.foot-sns-list li{
	list-style:none;
	width: 30%;
	padding: 0 5px;
}
.foot-sns-list li a{
	display:block;
	width: 100%;
}
.foot-sns-list li a img{
	width:100%;
}
.foot-copyright{
	background:#287ec7;
	display:block;
	padding:5px;
	font-size:11px;
	text-align:center;
	color:#fff;
}

/*===========================
トップへ戻るボタン
===========================*/
#sps-floating-menu {
    position: fixed;
    bottom: 13px;
    right: 10px;
}
#sps-to-cart {
    margin: 0 0 7px 0;
    padding: 0;
}
/*===========================
最下部 フッタ一部分非表示
===========================*/
#footer section {
    margin: 10px auto 0;
}
/*ＰＣ・スマホページ切り替えエリア*/
#footer section>p.ch {
    /* display: none; */
}
/*フッタ一部分非表示*/
#footer section:first-child + section{
    display: none;
}
#sps-floating-menu + script + img,
#footer + script + img,
#page + script + img{
    display: none;
