@charset "utf-8";
	.pc { display:block; }
	.sp { display:none;}

.clearfix {
    display: block;
    clear: both;
    content: "";
}
body	{  font-family: メイリオ !important;
overflow: hidden;
}
header	{font-family: Yu Gothic !important;}
footer	{font-family: Yu Gothic !important;}

img {max-width:none;}
h2	{font-weight:bold !important;}
h3	{font-weight:bold !important;}

.bg_gray1	{background:#fffcda;}
.bg_gray	{background:#f2f2f2;}
.bg_white	{background:#ffffff;}
.fwp	{color:#c5004f;}

.fww a	{color:#ffffff !important;}
.fwb	{ font-weight:700 !important:}

.content	{
max-width:1100px;
margin:0 auto;
padding:30px 0;
position: relative; }

.mmal20	{margin-left:-20px !important;}
.mal20	{margin-left:20px !important;}
/*ホバーを滑らかに処理*/
a {
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;
}


#spheader	{ display:none; }
#pagetop	{ position:fixed; right:0; bottom:0px; z-index:100; }

.stock	{
margin-top:10px;
}
.stock	a :hover {
opacity: .6;
}
.none_mail {
margin-top:10px;

}

.none_mail 	a :hover {opacity: .6;
}

section {
    max-width: 1170px;
    margin: 0 auto;
}

#wrap2 {
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    height: auto;
}

#main_bg {
	position: static;
	z-index: 0;
	background: linear-gradient(90deg,#fff9a8 0%, #fff9a8 50%, #bb8eec 50%, #bb8eec 100%);
    width: 100%;
    max-height:430px;
    height:auto !important;
  justify-content: center;
  align-items: center;
	margin:30px auto 0;
}

#main_visual {
	background: url("/special/img/bl/main_pc_cd.jpg") no-repeat center top;
	background-size: 100%;
	padding-bottom: 35%;
	width:100%;
	max-width:1350px;
	margin:18px auto 0;
}

/*テキストリンク*/
.text_top { margin:20px auto 20px;max-width:1100px;}
.text_top li{
display: inline-block;
border-left:2px solid #aaaaaa;
padding:0 15px;
font-size:20px;
color:#000000;
font-weight:bold;

}


.text_top a,
.text_top a:hover {
    color: #000 !important;
    text-decoration: none;
font-weight:700 !important;
font-size:20px;
}

.text_top li:last-child{ border-right: 2px solid #aaaaaa;}



/*検索BOX*/
/* search */
#search {
  width: 100%;
  padding: 10px;
  margin: 0 auto 30px;
  background: #bb8eec;
  box-sizing: border-box;
  max-width:1100px;
  border-radius: 10px;
}
#search section {
  padding: 5px;
  max-width: 1030px;
}
.input_wrap {
  position: relative;
  display: flex;
  border-radius: 4px;
  height: 60px;
  background-color: #fff;
  overflow: hidden;
}
.input_wrap .input_txt {
  font-size: 160%;
  border: 0;
  width: 85%;
  box-sizing: border-box;
  padding-left: 30px;
  box-shadow: inset 2px 2px 4px 0px rgba(0, 0, 0, .2);
  outline: none;
}
.input_wrap .input_txt::placeholder {
  color: #999999;
}
.input_wrap .input_txt::-ms-input-placeholder {
  color: #999999;
}
.input_wrap .input_txt:-ms-input-placeholder {
  color: #999999;
}

.input_wrap .input_btn {
  position: relative;
  right: -1px;
  background-color: #000;
  border: 0;
  border-radius: 0;
  font-family: 'Noto Sans';
  font-size: 160%;
  font-weight: 700;
  color: #fff;
  width: 15%;
  box-sizing: border-box;
  cursor: pointer;
}
.input_wrap .input_btn:hover {
  background-color: #333;
}

 /*スライダー*/
.swiper-container {
max-width:1100px;

}


.swiper-slide {
	color: #000000;
	height: 100%;
	text-align: center;
}



.swiper-button-prev {
	z-index:9999;
	position:absolute;
	background: url("/special/img/bl/img_pre.png") !important;
	background-size:100%;
	width:25px !important;
	height:100px !important;

}


.swiper-button-next{
	z-index:9999;
	position:absolute;
	width:25px !important;
	height:100px !important;
	background: url("/special/img/bl/img_next.png") !important;
	background-size:100%;

}

.prev2 {
	z-index:9999;
	position:absolute;
	background: url("/special/img/bl/img_pre2.png") !important;
	background-size:100%;
	width:30px !important;
	height:50px !important;
}


.next2{
	z-index:9999;
	position:absolute;
	background: url("/special/img/bl/img_next2.png") !important;
	background-size:100%;
	width:30px !important;
	height:50px !important;

}

.op_left	{
position:absolute;
background:#ffffff;
z-index:10;
width:4%;
height:100%;
opacity:0.7;
}

.op_right	{
position:absolute;
background:#ffffff;
z-index:10;
width:4%;
height:100%;
opacity:0.7;
right:0;
}



.swiper_inner{
height:auto;
min-width:200px;
background:#ffffff !important;
border-radius:10px 10px 0 0;
}

.swiper2	{padding:10px 0 100px!important;}
.swiper3	{padding:0px 0 70px !important;}


.inner_header{
background:#bb8eec !important;
height:40px;
border-radius:10px 10px 0 0;
color:#ffffff;
font-weight:bold;
font-size:18px;
padding-top:5px;
padding:7px 0 !important;
}
.inner_header a{
font-size:18px;
font-weight:700;
}



.box1	{
margin:0 10px !important;
text-align:left;

}
.box1 img	{width:80px !important;padding:5px 0;}
.w100p	{width:80px !important;}


.title	{margin-left:10px;}
.author	{margin-left:10px;margin-top:5px;}
.gname	{margin-left:10px; margin-bottom:10px;color:#000000;font-weight:bold;background:#fef102;padding:5px;font-size:10px;display:inline-block;}
.bdg	{border-top:2px solid #d2d2d2;}

.more	{text-align:right;
font-size:14px;
padding:10px;
color:#686868;

}
.more img	{
  width:20px;
  height:20px;
}

.more a	{
decolation:none;
color:#686868;
font-weight:700;
}
.more a:hover {
decolation:none;
    opacity: .6;
}

.more2	{text-align:right;
font-size:16px;
padding:10px;
color:#686868;
font-weight:bold;
margin-right:35px !important;
margin-top:60px;
margin-bottom:-30px !important;
text-align:right;


}
.more2 img	{
  width:22px;
  height:22px;
}

.more2 a	{
decolation:none;
color:#686868;
font-weight:700;
font-size:16px;
}
.more2 a:hover {
decolation:none;
    opacity: .6;
}

.obi_01 {
background:#000000;
color:#ffffff;
font-size:28px;
font-weight:bold;
padding:12px 0;
}

.obi_01 img{
width:45px;
margin-right:5px;
}

.box_large 	{
display:block;
width:200px;
font-size:14px !important;
text-align:left;
line-height:20px;
font-weight:bold;
margin:0 auto;
margin-left:-110px;
}
.box_large a{
font-size:14px !important;

font-weight:700 !important;
}

.box_large div{

font-weight:700 !important;
}


.box_large img	{
width:180px;
}


.box_small 	{
display:block;
width:160px;
font-size:12px;
text-align:left;
line-height:16px;
font-weight:bold;
margin:0 auto;
margin-left:-5px;
}
.box_small a{
font-size:14px !important;

font-weight:700 !important;
}

.box_small div{

font-weight:700 !important;
}

.box_small img	{
width:120px;
padding:0 0 10px;
}

.icon_r img	{
width:80px;
margin-left:23%;
}
.flex {
    display: block;
    height:auto;
}

.flex2 {
    display: block;
    height:auto;
}

.flex3 {
    display: block;
    height:auto;
}


.bt_cart {
position:absolute;
text-align:center;
}

.bt_cart img	{
width:150px;
text-align:center;
}

.bt_cart2 {
position:absolute;
text-align:center;
}

/*タブ*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #bb8eec;
  display: block;
  order: -1;
}
.tab-label {
  background: #b5b5b5;
  color:#ffffff;
  font-weight: bold;
  font-size:18px;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  background: #ffffff;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: #bb8eec;
    color:#ffffff;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  box-shadow: 0 0 3px rgba(0,0,0,.2);
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}

/* サイドバ− */
/*sidebar*/
.sidebar {
  position: fixed;
  right: 0;
  top: 80px;
  z-index: 30;
  width: 100px !important;
  background-color: transparent;
}

.sidebar img {
  width: auto;
}

.sidebar a {
  color:#000000;
  font-weight:700;
}
.sidebar_head a:hover {
  text-decoration:none;
  opacity: 0.6;
}

.sidebar_body>* {
  border-bottom: 2px solid #000000;
  border-left: 3px solid #000000;
  border-right: 3px solid #000000;
  padding: 10px 3px;
  display: block;
  background-color: #ffffff !important;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
background:url("/special/img/bl/img_side.png") no-repeat bottom right;
}

.sidebar_body>*:first-child {
  padding: 20px 3px;
}
.sidebar_body>*:nth-child(2) {
  padding: 20px 3px;
}

.sidebar_body>*:last-child {
  padding: 20px 3px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


.sidebar_body a:hover{
  background: #e5e5e5 !important;
  text-decoration:none;
}
.sidebar_head,
.sidebar_foot {
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}

.sidebar_head {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #000000;
}

.sidebar_head>* {
  padding: 20px 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: #000000;
}

.sidebar_head img{
	width:25px;
	margin-left:-5px !important;
}

.sidebar_head a{
	color:#ffffff;
}

.sidebar_foot>* {
  border-top: 1px solid #808080;
  padding: 10px 18px 12px;
  display: block;
  background-color: #ec0d0d;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


@media (max-width: 768px) {
	.pc { display:none; }
	.sp { display:block; font-size:14px;}
body	{min-width:100%;}
.content	{
padding:20px 5px;
 }
.w100p	{width:40px !important;}



#wrap2 {
        position: absolute;
        top: 10;
        width:100%;
    }
	.clearfix:after,
	header:after,
	header #titleArea:after,
	.gNav ul:after,
	footer:after,
	footer #footNav:after,
	.scroll ul:after	{ content:" "; clear:both; display:block; height:0; }
	
	/*---------------------------------------------
	header
	---------------------------------------------*/
	.j3c_text	{float:right;font-size:8px;margin-top:5px !important;margin-bottom:-5px !important;padding-right:5px;}
	.j3c_text a	{color:#cc0000 !important;}
	
	#spheader							{ display: block;}
	header								{ display: block; }
	header								{ clear:both; }
	header #titleArea					{ display:table; width:100% !important; text-align:left;}
	header #titleArea .headerLogo		{ display:table-cell; padding:5px; }
	header #titleArea p					{ display: table-cell; text-align:right; vertical-align:middle; padding-right:10px; }
	header #titleArea p a				{ display:inline-block; padding:4px 10px 4px 28px; border:1px solid #eb5353; border-radius:4.5px; color:#eb5353; font-size:14px; background:url("../images/i_sell_s.png") no-repeat 7px center; background-size:19px auto; margin:0;}
	header #titleArea p.freeShipping	{ font-size:9.5px; margin-top:5px; color:#c00; }
	
	/*---------------------------------------------
	menu
	---------------------------------------------*/
	.gNav	{width:100% !important; }
	.gNav ul				{ width:100%; }
	.gNav li				{ float:left; width:20%; background:#eee; font-size:11px; text-align:center; }
	.gNav li a				{ box-sizing:border-box; display:block; height:59px; padding-top:38px; border-right:1px solid #fff; color:#000; }
	.gNav li:last-child a	{ border-right:0; }
	.gNav li:first-child a	{ background:url("/sp/images/gnav_cart.png") no-repeat center 10px; background-size:auto 25px; }
	.gNav li:nth-child(2) a	{ background:url("/sp/images/gnav_favorite.png") no-repeat center 10px; background-size:auto 25px; }
	.gNav li:nth-child(3) a	{ background:url("/image/shopping-bag-green.png") no-repeat center 10px; background-size:auto 25px; }
	.gNav li:nth-child(4) a	{ background:url("/sp/images/gnav_history.png") no-repeat center 10px; background-size:auto 25px; }
	.gNav li:last-child a	{ background:url("/sp/images/gnav_mypage.png") no-repeat center 10px; background-size:auto 25px; }

	
section {
    width: 100%;
    margin: 0 auto;
    padding:0 10px;
}
#main_bg {
	background: none;
}

#main_visual {
		background: url("/special/img/bl/main_sp_cd.jpg") no-repeat center top;
		background-size: 100%;
		padding-bottom: calc(55px + 30%);
		width:100%;
	}
	
/*テキストリンク*/
.text_top { margin:10px 0;max-width:100%;
}
.text_top li{
padding:0 10px;
font-size:14px;
line-height:24px; 
}
.text_top li a{
font-size:14px;
line-height:24px; 
}



/* 検索BOX */
#search {
  width: 95%;
  margin-bottom:20px;
}
  #search section {
    padding: 10px 0;
  }

  .input_wrap {
    height: 50px;
  }
  .input_wrap .input_txt {
    font-size: 4vw;
    padding-left: 20px;
    background-position: 10px;
      width: 80%;

  }
  .input_wrap .input_btn {
    font-size: 14px;
    width: 20%;

  }

 /*スライダー*/

.swiper-wrapper {
	width:auto !important;
	margin-left:150px !important;
	
}

.swiper-slide {
	color: #000000;
	height: 100%;
	text-align: center;
	padding:0 3px;
box-sizing: border-box;	
}

.swiper2	{padding:10px 0 80px !important;}
.swiper3	{padding:10px 0 60px !important;}


.op_left	{
position:absolute;
background:#ffffff;
z-index:10;
width:40px;
height:100%;
opacity:0.7;
}

.op_right	{
position:absolute;
background:#ffffff;
z-index:10;
width:40px;
height:100%;
opacity:0.7;
right:0;
}


.box1	{
font-size:12px !important;
line-height:14px;
}
.box1 img	{width:50px;margin-top:8px;}
.w100p	{width:50px !important;}

.title	{margin-left:7px;}
.title a	{font-size:12px;}

.author	{margin-left:7px;font-size:12px;}
.author a	{font-size:12px;}
.gname	{margin-left:7px; margin-bottom:5px;padding:0 5px ;font-size:8px;}

.bdg	{border-top:1px solid #d2d2d2;}

.more	{text-align:right;
font-size:12px;

}
.more img	{
  width:17px;
  height:17px;
}
.more2	{
font-size:14px;
padding:10px;
font-weight:bold;
margin-right:0 !important;
margin-top:50px;
margin-bottom:-10px !important;
text-align:center;


}
.more2 img	{
  width:20px;
  height:20px;
}

.more2 a	{
font-size:14px;
}

.obi_01 {
font-size:20px;
padding:10px 0;
}

.obi_01 img{
width:30px;
margin-right:5px;
}

.box_large 	{
width:130px;
font-size:14px;
line-height:18px;
margin-left:-83px;
}

.box_large img	{
width:120px;
}

.box_small 	{
width:130px;
font-size:14px;
line-height:18px;
margin-left:-83px;
}

.box_small img	{
width:110px;
}

.icon_r img	{
width:60px;
margin-left:20%;
}

.flex {
    display: block;
    height:auto;
}

.bt_cart {
position:absolute;
text-align:center;
}

.bt_cart img	{
width:120px;
text-align:center;
}

.flex2 {
    display: block;
    height:auto;
}


.flex3 {
    display: block;
    height:auto;
}




/*タブ*/
.tab-wrap {
  margin:10px 0;
}

.tab-label {
  font-size:13px;
  padding: 8px 5px 5px 5px;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
/* アクティブなタブ */

.tab-switch:checked+.tab-label+.tab-content {
  padding: 0;
}

	#pagetop	{ position:fixed; right:0; bottom:50px; z-index:10; }
	#pagetop img	{width:45px;}


/* サイドバ− */
  .sidebar {
    position: fixed;
    right: 0;
    top: auto;
    bottom: 0px;
    z-index: 30;
    width: 100% !important;
    height: 50px !important;
    padding: 0;
    clip-path: none;
    box-sizing: border-box;
    display: flex;
  }
  .sidebar img {width: 100%;}
  
.sidebar_head img{
	width:20px;
	margin-left:0px !important;
	margin-right:5px !important;
	margin-bottom:0px !important;
}

  .sidebar_body {
    width: 80%;
    display: flex;
  }

  .sidebar_body>* {
    padding: 5px 2px;
    width: 50%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    font-size: 12px;
    border-top: 2px solid #000000;
    border-left: 0px solid #000000;
    border-right: 1px solid #000000;
    height:auto;
	background:url("/special/img/bl/img_side_sp.png") no-repeat bottom right;
    background-color: #fffcda !important;

  }


.sidebar_body a:hover{
  background: #bb8eec !important;
  color:#ffffff;
}

  .sidebar_head,
  .sidebar_foot {

    box-sizing: border-box;
    color: #fff;
    text-align: center;
    font-size: 12px;
    margin: 0;
     padding: 5px 2px;
   
  }

  .sidebar_head {
    width: 35%;
    border-radius: 0;
  }

  .sidebar_head>* {
    padding: 8px 3px;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
  }

.sidebar_body>*:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
    width: 50%;
    line-height:16px;
}

  .sidebar_foot>* {
    padding: 5px;
    border-radius: 0;
  }

  .sidebar_foot img {
    width: auto;
    height: 46px;
  }

}



/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
    border: 2px solid #b99bee;/* ボーダーの色と太さ */
    padding: 10px 30px;
    text-align: center;
    outline: none;
    color:#b99bee;
    /*アニメーションの指定*/   
    transition: ease .2s;
    
}


.btn_active{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
  overflow: hidden;
    border: 2px solid #b99bee;/* ボーダーの色と太さ */
    padding: 10px 30px !important;
    text-align: center;
    outline: none;
    color:#ffffff !important;
    background:#b99bee;
    margin-right:10px;
    
}
.btn_active span{
  font-weight:700;
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#b99bee;
  font-weight:700;

}

.btn:hover span{
  color:#fff;
  font-weight:700;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#b99bee;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}


.btn_top { margin:20px auto 20px;max-width:1100px;}
.btn_top li{
display: inline-block;
padding:0 15px;
color:#000000;
font-weight:700;
font-size:20px !important;

}


.btn_top a,
.btn_top a:hover {
    color: #000 !important;
    text-decoration: none;
font-size:20px !important;
}


@media (max-width: 768px) {


/*== ボタン共通設定 */
.btn{
    padding: 5px 7px;
    
}


.btn_active{
    /*アニメーションの起点とするためrelativeを指定*/
    padding: 5px 10px !important;
    margin-right:5px;
    
}

/*ボタン内spanの形状*/
.btn span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color:#b99bee;
}

.btn:hover span{
  color:#fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#b99bee;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}


.btn_top { margin:10px 0;max-width:100%;
}
.btn_top li{
padding:0 3px;
font-size:14px !important;
line-height:24px; 
}
.btn_top li a{
font-size:14px !important;
}

}
.l-footer__netoff a	{
color:#333 !important;

}
.c-button--main {
    color: #fff !important;
    background-color: #6fba2c;
    }

.c-button--outline {
    color: #6fba2c !important;
}    
 


.l-header__nav-list a {
color:#333 !important;
font-size: 14px !important;
font-weight:500 !important;
}

.l-header__nav-list--red button {
font-size: 14px !important;
font-weight:500 !important;
}
    
.l-header__nav-list a:hover {
text-decoration:none;
}
.l-header__nav-title {
font-size: 14px !important;
font-weight:500 !important;
text-align:left;
}
