@charset "utf-8";

/*@media screen and (max-width: 768px){}*/
#sinaicat-wrapper *{box-sizing:border-box;}
#sinaicat-wrapper img{max-width: 100%;}
#sinaicat-wrapper{opacity: 0; margin: 0 auto;color:#333;font-size:14px;/*max-width: 800px;*/ font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue','メイリオ', Meiryo,'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, sans-serif; }

.loading{left:calc(50% + 150px);top:50%; width:60px;  position: fixed; text-align: center; font-size: 12px;}
.loading img{width:80px;}
.loading p{width:80px;margin: 0 auto; display:block;}

@media screen and (max-width: 768px){
#sinaicat-wrapper{font-family:'Kosugi Maru',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; }
.loading{left:calc(50% - 30px ); top:calc(50% - 30px); font-size: 12px;}
}/*768end*/

/*safari 角丸対策*/
input[type="button"],input[type="text"],input[type="submit"]
{-webkit-appearance: none;  border-radius:0;}

/*animation*/
@keyframes fadein{
0%{opacity:0; transform:translateY(-2px); filter:brightness(1.3);}
100%{opacity:1;}
}
@keyframes fadeout{
0%{opacity:1;}
100%{opacity:0;}
}

.search-box_label{display: block;}
#sinaicat-wrapper label{cursor: pointer;}
.nunito{font-family: 'Nunito Sans', sans-serif;}


/*tab切替*/
.js-tab div {*zoom: 1;}
.js-tab div:after{display: block;content:"";clear:both;line-height: 0;}
.js-tab{display:flex; font-size:15px;  font-family:'游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝', serif;	transform: rotate(.028deg); text-shadow: 0 1px 0 #000}
.js-tab > div {width:calc(100% / 3 ); position: relative;display: flex; align-items: center; justify-content:center;background:#444;color:#fff;cursor:pointer;transition: .2s; height:50px; }
.js-tab > div:not(:last-child){border-right: 2px solid #fff;}
.js-tab > div:after{content:'\f0d7'; font-family:'Font Awesome 5 Free'; color: #981b1b; font-weight: 900;font-size:25px;position:absolute; bottom:32px; transition: .2s; z-index: -1; text-shadow: none;}
.js-tab > div:first-child {border-radius:7px 0 0 7px;}
.js-tab > div:last-child{border-radius: 0 7px 7px 0}
@media all and (-ms-high-contrast: none){
 .js-tab > div:after{/* IE10以上 */
    left:50%; transform: translateX(-50%);
  }
}

.js-tab > div.active {color:#fff; background:#981b1b; font-weight: bold;}
.js-tab > div.active:after {bottom:0; z-index: 0; visibility: visible;}
.js-tab_content {display:none;margin:15px 0 10px 0;}
.js-tab_content.active {display:block;}

@media screen and (max-width: 768px){
  .js-tab > div{font-size:.8em;height:40px;}
  .js-tab > div:first-child {border-radius:0;}
  .js-tab > div:last-child{border-radius: 0;}
}/*768end*/

/*フィルター*/
#sinaicat-wrapper .is-hide{display:none !important; animation:fadeout .5s ease 0s}
.is-show{display:block; animation:fadein .5s ease 0s}


.js-tab label ,.label_box label
{display:flex;width: 100%; height: 100%; justify-content: center; align-items: center;}

/*特徴から選ぶ ボタンとコンテンツ*/
#feature_box{display: flex; flex-wrap: wrap; width: 99%; margin: 0 auto;}
#feature_box p{margin: 0; font-size: .95em;}
#feature_box .btn_box{display:flex;flex-wrap: wrap;justify-content:space-between; width: 45%; align-content: flex-start;}
#feature_box .content_box{width:55%; display: flex; justify-content: center; }
#feature_box .btn_box label{display: flex; margin: 0 0 8px 0; width:calc(100% / 3 - 3px);border: 1px solid #444;height: 50px; cursor: pointer;}
@media screen and (min-width: 768px){
#feature_box .btn_box label:hover .cat{background:#981b1b; color: #fff;}
}

#feature_box .btn_box label:nth-child(3n){margin-right: 0;}


#feature_box .btn_box label.active{border:1px solid #981b1b;}
#feature_box .btn_box span{font-size: .8em; display:flex; justify-content: center; align-items: center; transition:.3s;}
#feature_box .btn_box .cat{width: 40%; background: #ccc; text-align: center;color: #444; position: relative; }
#feature_box .btn_box .name{width: 60%;background: #fff; border-left: 1px solid #444;}
#feature_box .btn_box .cat.b{background: #dbd0e6;}
#feature_box .btn_box .cat.g{background: #dae6cf;}

#feature_box .btn_box .active .cat:after{right:-7px; color: #981b1b;opacity: 1;}
#feature_box .btn_box .active .name{color:#981b1b;}
#feature_box .btn_box .active .cat{color:#fff;background:#981b1b;}
#feature_box .feature_content{display:none; width: 100%;padding:0 0 0 10px;}
#feature_box .feature_content.active{display: block;}
#feature_box .feature_content img{width: 100%;}
#feature_box .feature_content p.title{font-size: 1.1em;margin:0 0 5px;background: #444; color: #fff; padding: 0;  line-height:2.5; width: 100%;}
#feature_box .feature_content p.title span{display:inline-block; background: #981b1b; min-width: 20%; text-align: center;margin-right:10px;}
#feature_box .feature_content div .t-tex{text-align: center;width: 100%; margin:0 0 .2em 0; font-weight:bold; }
#feature_box .feature_content div strong{color:#f82832; font-weight: normal;}
#feature_box .feature_content div b{font-weight:bold;}


@media screen and (max-width: 768px){
 #feature_box .btn_box{width: 100%;}
 #feature_box .content_box{width: 100%; padding:0;}
 #feature_box .btn_box label{width: calc(100% / 4 - 2px); border:.5px solid #444; font-size: .95em; height:40px;}
 #feature_box .btn_box label.active{border:.5px solid #981b1b;}
 #feature_box .btn_box label:nth-child(3n){margin-right: 0;}
 #feature_box .btn_box .cat:after{content:none;}
 #feature_box .btn_box .name{border-left:.5px solid #444;padding: 3px;}
 #feature_box .feature_content{margin-top: 1%; padding: .5em 0;}
 #feature_box .feature_content p{padding:1%; font-size:12px;}
 #feature_box .feature_content p.title{font-size: .95em; line-height: 2.2;}
}/*768end*/

/*オススメをクリックしたとき*/
#feature_box.w_box{flex-direction: column;}
#feature_box.w_box .feature_content p{width: 100%; margin: 0;}
#feature_box.w_box .btn_box,#feature_box.w_box .content_box{width: 100%; justify-content:flex-start;}
#feature_box.w_box .btn_box label{width: calc(100% / 3 - 3px); margin: 0 3px 5px 0;}
#feature_box.w_box .content_box,#feature_box .feature_content div{flex-wrap: wrap;width: 98%;background:#f2f2f2; color: #333; display: flex; justify-content: center; align-items: center;  position: relative; margin-top:15px; border-radius: 5px;box-shadow: 2px 2px 6px #ddd;}
#feature_box.w_box .content_box:before,#feature_box .feature_content div:before{content: "";
	position: absolute;
	top: -10px; left: 20px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background:#f2f2f2;
	border-radius: 30px 0 30px 0;
	z-index: -1; }
#feature_box.w_box .content_box{padding: 1em;}
#feature_box .feature_content div{padding:.5em}
#feature_box.w_box .content_box:after , #feature_box .feature_content div:after{content: "";
	position: absolute;
	top: -5px; left: 30px;
	margin-left: 0;
	display: block;
	width: 30px;
	height: 30px;
	background: #fff;
	border-radius: 30px 0 30px 0;
	z-index: -1;
	transform: rotate(-30deg);}

@media screen and (max-width: 768px){
  #feature_box.w_box .content_box,#feature_box .feature_content div{padding:.5em; background:#444; color: #fff; margin:15px auto 0 auto; border-radius: 5px;box-shadow: none;}
  #feature_box.w_box .content_box:before,#feature_box .feature_content div:before{background: #444;}
}/*768end*/

#stock_filter{display: flex; align-items: center;margin:0 0 3px 0; }
/*トグルボタン*/
.chkbox {font-family: 'Kosugi Maru'; display: flex; align-items: center; margin: 0; min-width: 135px; font-size: .8em;}
.chkbox label{
	display: inline-block;
	position: relative;
	outline: none;
	user-select: none;
	padding: 2px;
	width: 58px;
	height: 28px;
	background-color: #dddddd;
	border-radius: 60px;
	margin: 0 8px 0 3px;
}
.chkbox label:before,.chkbox label:after{
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	content: "";
	}
	
.chkbox label:before{
right: 1px;
background-color: #f1f1f1;
border-radius: 60px;
transition: background 0.4s;
}
.chkbox label:after{
	width: 28px;
	background-color: #fff;
	border-radius: 100%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	transition: margin 0.4s;
}
.chkbox .on:before{
	background-color: #8ce196;
}
.chkbox .on:after{
	margin-left: 28px;
}

/*検索ウインドウ*/
#stock_filter .srcbox{display:flex; justify-content: center;}
#stock_filter .search-text{font-size:14px;margin:0; padding:0 2px; width:100px; height: 28px; border: none;outline: none;border: 1px solid #444; }
#stock_filter .srcbox i{font-size: 12px; text-align: center;position:relative;background: #444; color: #fff; line-height: 28px; width: 25px; margin: 0; }


/*ヒット数*/
.hit{padding: 0 3px 0;margin:auto 0 0 auto; }
.itemcount{font-size:32px; font-family:'century gothic', sans-serif;}
.itemcount:after{font-weight: normal;font-size:12px;margin-left: 3px; font-weight: normal;content:'商品'; }
.allitem{font-size: .8em; display: none;}
.allitem:before{font-weight: normal;font-size:12px;content:'全';}
.allitem:after{margin-right: 2px;font-weight: normal;font-size:12px;content:'商品中';}
.search-text::placeholder{font-size:.9em; }

@media screen and (max-width: 768px){
	#stock_filter{margin-bottom:10px ;border-bottom: 1px solid #ccc; padding:5px 0 ;}
	.chkbox,.srcbox,.hit{margin: 0 auto; padding: 4px 10px}
  .chkbox{ font-size: .7em;}
	.srcbox{border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
	#stock_filter .search-text{width:calc( 100% - 25px);}
	.hit{text-align: right; min-width:90px}
   .itemcount{font-size:25px; font-family:'helvetica','arial',sans-serif;}

}/*768end*/

.icontips{display: flex;flex-wrap: wrap; align-items: center; width: 100%; margin: 30px auto 0 auto; border-top:1px solid #ccc; border-bottom:1px solid #ccc; padding:10px 5px;}
.icontips .icon span{font-size: 13px;}
.icontips p{font-size:12px; margin: 0; color: #333; border-radius: 3px; padding:0 8px; width: 90%;box-sizing: border-box;}

.icontips .icon{display: flex; align-items: center;width: 50%; height: 43px; margin: 3px 0;}
@media screen and (max-width: 768px){
.icontips{margin:15px auto 0 auto; padding:10px 5px;}
.icontips p{padding: 0 4px;}
.icontips .icon span{font-size: 11px; padding: 3px 5px; font-family:'Kosugi Maru', sans-serif;}
}

.tips{display: flex;  font-size: .8em; margin:5px; align-items: center;}
.tips span{display: inline-block;}
.tips span:nth-child(2){margin-left: auto;}
/*商品一覧*/
#item_wrap{overflow: hidden;}
.page_more{display: block; text-align: center; line-height: 50px; width: 100%; background: #f00;}
#item_box{display: flex; flex-wrap: wrap; padding: 0 .5px; margin: 0 0 10px 0;}
#item_box .item{display:flex; flex-direction:column; font-size:12px; position: relative;padding:.5%;width: calc(100% / 4 - 1px);margin:/*.5%*/ .5px; background:#fff; box-shadow: 0 0 0 1px #ccc;transition: .2s;}
#item_box .name{display:none;}
#item_box .texbox{overflow:hidden;/*margin-bottom:12px;*/}
#item_box .texbox > p{margin:0;line-height: 1.35;}
#item_box .texbox > p b{color: #f82832;}
#item_box .more{display: block; color:#666; line-height:15px;font-size: 8px; margin-top:3px;text-align: center; cursor: pointer; transition: .3s; opacity: 1;background: #fff; }
#item_box .more:hover{color:#7d0000; background:rgba(100,100,100,.1);}
#item_box .more:after{content: "\f103";	font-family: "Font Awesome 5 Free";font-weight: 900;}
#item_box .more.is-active{opacity: 0; visibility: hidden;}
#item_box .pic{margin:5px; min-height:0%;/*ie対策*/ }
#item_box .icon{margin:3px 0; padding: 2px 0;}
#item_box .icon span ,.icontips span{font-size:.98em;font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 padding:4px 3px; color: #fff; background: #333;margin-right:2px; border-radius: 2px;  letter-spacing: 1px;display: inline-flex; align-items: center;
-webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;}
@media all and (-ms-high-contrast: none){/* IE10以上 */
 #item_box .icon span ,.icontips .icon span{
   padding:3px 5px 3px 0;
  }
}



#item_box .icon .b ,.icon .b{background:#3C579C;}
#item_box .icon .g,.icon .g {background:#93C22E;}
#item_box .icon .r ,.icon .r{background:#CB2028;}
#item_box .icon .p ,.icon .p{background:#713b24;}

#item_box .price_box{margin-top: auto;}
#item_box .price{margin:2px 0;font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue','Yu Gothic Medium', YuGothic, Meiryo, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, sans-serif; }
#item_box .price a {font-size:13px; width: 100%;
display:flex; justify-content: flex-start; align-items: center;background:#03A9F4; color:#fff; text-decoration: none; padding:3px 4px; margin: 2px 0; transition:.4s; position: relative; z-index: 2; overflow: hidden;cursor: pointer;border: solid 1px #0f9ada;border-radius: 4px;box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);text-shadow: 0 1px 0 rgba(0,0,0,0.2);}

#item_box .price.ac{font-size:13px; width: 100%;
display:flex; justify-content: flex-start;background:#03A9F4; color:#fff; text-decoration: none; padding:3px 4px; margin: 2px 0; transition:.4s; position: relative; z-index: 2; overflow: hidden;cursor: pointer;border: solid 1px #03A9F4;box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);text-shadow: 0 1px 0 rgba(0,0,0,0.2); border-radius: 4px;}

#item_box .ac_menu{display: none; margin: 0 auto;}
#item_box .ac_menu a{width:96%; text-align: center;display:block; padding:4px 0; background: #006; color: #fff; text-decoration: none; margin:4px auto; transition: .2s;border-radius: 4px; border-bottom: 1px solid #000;}
#item_box .ac_menu a:hover{opacity: .85;}

#item_box .ac_menu a.j{background:#7d0000;}

#item_box .price a:hover, #item_box .ac:hover{background: #028ECA;}
#item_box .price a:before{content: "\f138";	font-family: "Font Awesome 5 Free";font-weight: 900;margin-right: 4px; font-size: .85em; text-shadow:none;}
#item_box .price.ac span:first-child:before{content: "\f057"; font-size: .85em;	font-family: "Font Awesome 5 Free";font-weight: 900;margin-right:4px; display: inline-block; text-shadow: none; transition:.3s;  transform: rotate(-45deg);}

#item_box .price.ac:hover span:first-child:before{content: "\f13a"; font-size: .85em;	font-family: "Font Awesome 5 Free";font-weight: 900;margin-right:4px; display: inline-block; text-shadow: none; transform: rotate(0deg);}

#item_box .price.ac.on{background:#028eca;}

#item_box .price.ac.on span:first-child:before{/*transform: rotate(0deg)*/content: "\f13a"; font-size: .85em;	font-family: "Font Awesome 5 Free";font-weight: 900;margin-right:4px; display: inline-block; text-shadow: none; transform: rotate(0deg);}
#item_box .price.ac.on:hover span:first-child:before{transform: rotate(0deg)content: "\f13a"; font-size: .85em;	font-family: "Font Awesome 5 Free";font-weight: 900;margin-right:4px; display: inline-block; text-shadow: none; transform: rotate(0deg);}

#item_box .price a:hover{color: #fff; }
#item_box .price span:first-child{font-size: 1.08em; }
#item_box .price span:nth-child(1):after{content:'サイズ';font-size:.8em; font-weight: normal;margin-left: 2px;}
#item_box .price span:nth-child(2){margin-left:auto; font-weight: normal;}
#item_box .price span:nth-child(2):before{content:'￥';font-size: .8em; font-weight: normal;}
/*#item_box .price span:nth-child(2):after{content:'円';font-size: .8em;}*/

@media screen and (max-width: 768px){
#item_box .price_box{padding-top:10px;}
#item_box .ac_menu a{width:100%; padding:10px 0; font-size: .85em; margin-bottom: 8px;}
#item_box .ac_menu a:nth-child(2n){margin-left:inherit;}
}/*768end*/

/*普及型用価格*/
#item_box .price_box.w_box {margin-bottom: 5px;}
#item_box .price_box.w_box .price a{margin: 0 auto; border-radius: 0; border: none; box-shadow: none; border:  solid 1px #0f9ada;}
#item_box .price_box.w_box .price{margin: 0;}
#item_box .price_box.w_box .price:first-child a{border-radius: 5px 5px 0 0;box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);border-bottom: none;}
#item_box .price_box.w_box .price:last-child a{border-radius:0 0  5px 5px; border-top: none;}
#item_box .price_box.w_box .price a:hover{background:#03A9F4;}

/*在庫表示*/
.zaiko{position: absolute; margin: 0; top:0; right:0; max-width: 35%; height: auto; background: rgba(0,0,0,.75); }
.zaiko img{display: block;max-width:calc(100% - 10px);}
/*続きを見る*/
.morelink{display:block; width: 98%;margin: 5px auto; padding: 1em; text-align: center; background: #444; color:#fff; cursor: pointer;transition: .2s;}
.morelink:before{content: "\f063";	font-family: "Font Awesome 5 Free";font-weight: 900;margin-right: 5px; }
.morelink:hover{background:#999;}

@media screen and (max-width: 768px){
	#item_box .item{font-size:12px;margin:/*1%*/ .5px; padding:.5%; width: calc(100% / 2 - 1px); box-shadow:0 0 0 .99px #ccc; }

#item_box .item .pic{margin:5px}
#item_box .item .zaiko{top: 3px; right: 3px;}
#item_box .more{font-size:12px;line-height:20px;margin-top:-3px;}
#item_box .more.is-active{opacity: 0;line-height:12px;}
#item_box .texbox > p{font-size:12px;line-height:14px; padding: 0 3px}
  /*safari フォントサイズ調整*/
_::-webkit-full-page-media, _:future, :root #item_box .texbox > p {font-size:10px; line-height:1.3;}
  
#item_box .price a ,#item_box .price.ac{width:94%;padding:10px 4px;margin: 2px auto 8px; font-size: .9em;}
#item_box .ac_menu{width: 94%; margin: 0 auto; padding: 0 2px;}
#item_box .price a:before{margin-right: 2px;}
#item_box .price span:nth-child(1):after{content:none;}
#item_box .price span:nth-child(2):after{content:none;}
#item_box .price.ac span:first-child:before{margin-right: 2px;}
  
#item_box .icon{margin:3px; margin-top: 0;}
#item_box .icon span{font-family:inherit;font-size:.85em; padding:2px 4px;}
}/*768end*/



/*item_box mini*/
.item_col{display: flex; justify-content:flex-end;margin-bottom: 3px;}
.item_col span img{opacity: .5;cursor: pointer; opacity: .5; -webkit-tap-highlight-color:rgba(0,0,0,0); width: 25px;}
.item_col span.on img{opacity: 1; pointer-events: none;}
.item_col .small{margin-left: 20px;}
.item_col .small:after{content:''; display:inline-block; height: 20px; width: 1px; background: #ccc; margin: 2px 18px;}

#item_box.mini .item{padding:.25%;width: calc(100% / 5 - 1px);margin:/*.5%*/ .5px; box-shadow: 0 0 0 1px #ccc;}
#item_box .pic{margin:1px;}
#item_box.mini .price span:nth-child(1):after{display: none;}

@media screen and (max-width: 768px){
#item_box.mini .item{padding:.25%;width: calc(100% / 3 - 1px);margin:/*.5%*/ .5px; }
#item_box.mini .item .pic{margin:1px}
/*
#item_box.mini .texbox,#item_box.mini .more{display: none;}
#item_box.mini .price_box{padding-top: 0;}
*/
}/*768end*/

/*-------------------------------------------------------------*/
/*竹刀新基準バナー*/
#kijun{display: flex; align-items: center;margin: 5px 0 0 0; background: #fbfbfb; border: 1px solid #e6e6e6;}
#kijun p{margin: 5px 0;}
#kijun img{height: 100px; margin-left: 5px;}
#kijun .tex{padding:0 5px;margin-left: 1em;}
#kijun .tex h4{font-size: 1.4em;font-weight: normal; color:#006;margin:0 0 5px 5px;}
@media screen and (max-width: 768px){
#kijun{margin: 8px 0;padding: 5px 0; font-size: .85em;line-height: 1.4; border: none;border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;}
#kijun > p{width: 60%;}
#kijun .tex h4{font-size: 1.2em;margin:0 0 5px 5px;}
#kijun .tex{margin-left: .2em;}
#kijun img{height:auto !important; margin-left: 2px;}
}/*768end*/


/*-------------------------------------------------------------*/
/*SALEページ*/
.sale .bn{text-align: center;}
.sale #feature_box .btn_box label.active{background: #981b1b; color: #fff;}
.sale .btn_box{display: flex; justify-content: space-between;}
.sale .btn_box label{display: flex; align-items: center; justify-content: center;width: calc(100% / 7 - 3px); margin: 0 0 10px 0; background:#ddd; height: 45px;transition: .2s;}
.sale .btn_box label:hover{font-weight: bold;}
.sale .btn_box label.active{font-weight: bold;background: #981b1b; color: #fff;}
.sale .item .tex p{margin:5px 0;}
.sale .item .price_off{display: flex; justify-content: space-between; padding: 0 5px; margin:0 auto; width: 96%; font-size: 1.4em; font-weight: bold; color: #f82832; text-shadow: 0 .5px 0px #999;border-top: .5px solid #999;border-bottom: .5px solid #999;}
.sale .item .price_off span:first-child:after{content:'%OFF'; font-size: .8em;}
.sale .item .price_off span:last-child:after{content:'円'; font-size: .8em;}

@media screen and (max-width: 768px){
	.sale .bn{padding-top:5px;}
	.sale .btn_box{flex-wrap: wrap; justify-content: flex-start; margin: 0 0 8px 0; padding: 0 3px;}
	.sale .btn_box label{width: calc(100% / 4 - 5px); margin:0 6px 5px 0;}
	.sale .btn_box label:nth-child(4n){margin:0 0 5px 0;}
	.sale .item .price_off{padding: 5px;}
	.sale .item .tex p{line-height: 1.4;}
	.sale #stock_filter{border: none;margin-bottom: 0; display: block;}
}