@charset "utf-8";

/*@media screen and (max-width: 768px){}*/
#docat-wrapper *{box-sizing:border-box;}
#docat-wrapper img{max-width: 100%;}
#docat-wrapper{opacity: 0; margin: 0 auto;padding-bottom: 5px; 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){
#docat-wrapper{padding:5px 1px; 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;}
}
.fadein{animation: fadein .5s ease 0s;}
/*フィルター*/
#docat-wrapper .is-hide{display:none !important; animation:fadeout .5s ease 0s}
#docat-wrapper .is-show{display:block;}
#docat-wrapper .no-disp{visibility: hidden;}

.search-box_label{display: block;}
#docat-wrapper label{cursor: pointer;}
.questrial{font-family: 'Questrial', sans-serif;}

/*サイズ・カラー説明*/
.ac p{margin: 0;}
.ac h3,#docat-wrapper h3{display: flex; align-items: center;margin:0; background:#981b1b; font-weight: normal; color: #fff; padding:0 0 0 12px; position: relative; height: 50px;font-size: 1.3em;border-left: 10px solid #000; }
#docat-wrapper h3 + div{text-align: center;}
.ac h3{cursor: pointer;}
.ac h3:hover{opacity: .85;}
.ac h3:after{font-family: "Font Awesome 5 Free";content:'\f078'; position: absolute;top:0; right: 0; background: #000; line-height: 50px; width: 50px; text-align: center; font-weight: 900; }
.ac h3.on:after{transform: rotate(180deg);}
.ac h3 + div{display: none; border-top: none; margin: 0 auto 20px auto;}
.ac h3 + div.on{display: block;}
.ac h3 + div img{display: block; margin: 0 auto;}

.ac h3 span:after{font-size:.7em;}
.ac h3 span:after{content:'（クリックで開く）';}
.ac h3.on span:after{content:'（クリックで閉じる）';}

@media screen and (max-width: 768px){
	.ac h3,#docat-wrapper h3{border-left: 7px solid #000;height: 35px; font-size: 1.1em; margin-top: 5px;}
	.ac h3:after{line-height: 35px; width: 35px;}
	.ac h3 span:after{content:'（タップで開く）';}
	.ac h3.on span:after{content:'（タップで閉じる）';}

}

/*hidebox*/
.hidebox{display: none; margin: 10px 0;}
.hidebox .btn,.search-text{height: 30px;}
.search-text{padding: 0 3px; border: 1px solid #666;}
.hidebox span{border: 1px solid #666; padding: 3px 6px; cursor: pointer; margin-right: 3px;transition: .2s;}
.hidebox span:hover{background: #000; color: #fff;}
.hidebox span:active{background: #fff; color: #333;}

/*ヒット数*/
.hit{padding: 0 3px 0;margin:0 0 0 auto; }
.selectsize{margin: 0 auto 0 0; font-size: 1.8em; font-weight: bold;}
.selectsize span{font-size: .75em; margin-left: 2px;}
.itemcount{font-size:32px;}
.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; }

#stock_filter{margin:20px 0 8px 0; display: flex; align-items: center;}

@media screen and (max-width: 768px){
	#stock_filter{margin:10px 0 5px 0; padding:5px 0 ;}
	.chkbox,.srcbox,.hit{margin: 0; 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;}
	.selectsize{padding-left: 5px; font-size: 1.6em; font-weight: normal;}

}/*768end*/

/*ソート部分*/

.sort_area {margin:10px 0 0 0; display: flex; }
.sort_area .dropdown{position: relative; margin:0 auto 0 0;display: flex; align-items: center; width: 140px;}
.sort_area .dropdown p{cursor: pointer; margin: 0;}
.sort_area .dropdown p:after{content: '';  display: inline-block; background:url(https://www.kendouya.net/col_do/images/ico_arrow_down.png); width: 25px; height: 12px; background-repeat: no-repeat; background-position: center;}
.sort_area .dropdown ul{display:none; position: absolute;margin: 0; padding:15px 0; top: 30px; left: 0; background: #fff; border: 1px solid #ccc; z-index: 10; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); font-size: .95em;}
@media screen and (min-width: 769px){
.sort_area .dropdown:hover ul{display: block;}
}/*769end*/
.sort_area .dropdown li{list-style: none; padding:8px; cursor: pointer;}
.sort_area .dropdown li:hover{background: #e5e5e5;}
.sort_area .dropdown li.on{background: #c1c1c1;}

.sort_area .item_col{padding: 8px 5px 8px 0; display: flex; align-items: center;}
.sort_area .item_col span img{cursor: pointer; opacity: .5; -webkit-tap-highlight-color:rgba(0,0,0,0); width: 25px;}
/*.sort_area .item_col span img{width: 25px;}*/
.sort_area .item_col span.on img{opacity: 1;}

.sort_area .small:after{content:''; display:inline-block; height: 20px; width: 1px; background: #ccc; margin: 2px 18px;}

@media screen and (max-width: 768px){
.sort_area .item_col{/*display: none;*/}
	.sort_area .dropdown{width: auto;}
	.sort_area .dropdown p{display: none;}
	.sort_area .dropdown ul{display:flex; position: relative; padding:0; border:none; box-shadow:none; font-size: .95em; top:0; left: 0;}
	.sort_area .dropdown li{ padding:2px 4px;}
	.sort_area .dropdown li:nth-child(2){border-left: 1px solid #ccc; border-right: 1px solid #ccc;}
	.sort_area .dropdown li.on{background:#fff;text-decoration: underline;}
	.sort_area .small:after{ margin: 2px 8px;}

}/*768end*/


/*商品一覧*/
#item_wrap{overflow: hidden;}
#item_box{display: flex; flex-wrap: wrap; padding: 0 .5px;}
#item_box .item{display:flex; flex-direction:column; font-size:12px; position: relative;padding:5px 5px 30px 5px;width: calc(100% / 3 - 1px);margin:/*.5%*/ .5px; background:#fff; box-shadow: 0 0 0 1px #ccc; transition: .1s;}
.item .limited{position: absolute; top:4px; right:8px; text-indent: -9999px; width: 70px; height:70px; text-align: center;background: url(images/toku-icon.png) /*rgba(0, 0, 0, 0.79)*/;background-size: 85%; background-position: center; background-repeat: no-repeat; filter: drop-shadow(2px 2px 2px #999);}
.item .name{font-size: 1.2em; padding: 3px; /*font-family:'Kosugi Maru',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif;*/}
.item .name span{margin-left: 5px; display:inline-block;border: 1px solid #333; padding:2px 4px; font-size: .9em;}

.item .pic{margin:0; min-height:0%;/*ie対策*/ overflow: hidden;}
.item .pic img:hover{transform: scale(1.03); opacity: .85; animation: none;}
.item .b_box{position: absolute; bottom: 5px; left:0; display: flex; width: 100%; padding: 0 5px; align-items: center;}

.item .price{font-family:'Questrial', sans-serif;;margin:0 0 0 auto; font-size: 18px; color: #981b1b;}
.item .price:before{content:'￥'; font-size: 10px;}
.item .price:after{content:' (税別)'; font-size: 10px;}
.item p{margin: 0;}

.item .size span,.item .size:before{display: inline-block;font-size: 11px; padding:2px 0; margin-right: 2px; min-width: 27px; text-align: center;}
.item .size:before{content:'在庫有';color: #000;}


.size .ss{background:#D4EA6B;}
.size .s{background:#FFD428;}
.size .ms{background: #729FCF;}
.size .hj{background:#069A2E;}
.size .l{background:#E16173;}
.size .all{background:#fff;outline: 1px solid #000; outline-offset: -1px;letter-spacing: 1px; padding: 3px 5px !important;}

.item .tex{width:calc( 100% - 10px ); margin: 0 auto;line-height: 1.4;}

@media screen and (max-width: 768px){
	#item_box .item{width: calc(100% / 2 - 1px);padding:5px 5px 60px 5px;}
	.item .limited{width: 55px; height:55px;}
	.item .b_box{flex-wrap: wrap;}
	.item .b_box .size,.item .b_box .price{width: 100%;text-align: right;}
	.item .b_box .size{margin-bottom: 5px;}
	.item .tex{width:calc( 100% - 5px );}
}

.btn_box{display: flex; justify-content: center; margin: 0;}
.btn_box:before,.btn_box:after{content: ''; border-bottom: 1px solid #ccc; width: 6px;}
.btn_box label{display: flex; align-items: center; justify-content: center;width: calc(100% / 6 - 2px ); margin: 0; background:#fff; height: 45px;transition: .2s;background: #efefef;border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.btn_box label:first-child{border-left: 1px solid #ccc; font-size: .85em;}
.btn_box label:hover{font-weight: bold;}
.btn_box label.active{font-weight: bold;background: #fff;border-bottom: none; margin-top: -4px; height:49px;}


.item .tex p{margin:5px 0;}
.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;}
.btn_box .all{border-top: 5px solid #981b1b;}
.btn_box .ss{border-top: 5px solid #D4EA6B;}
.btn_box .s{border-top: 5px solid #FFD428;}
.btn_box .ms{border-top: 5px solid #729FCF;}
.btn_box .hj{border-top: 5px solid #069A2E;}
.btn_box .l{border-top: 5px solid #E16173;}

@media screen and (max-width: 768px){
	.btn_box label{font-size: .9em;}
/*	.btn_box{flex-wrap: wrap; margin: 0 0 8px 0;}
	.btn_box label{width: calc(100% / 6); margin:0 0 3px 0; border: .5px solid #ccc; }
	.btn_box label:nth-child(2),.btn_box label:nth-child(5){
	border-right: none;border-left: none;
	}
	.btn_box label:nth-child(4n){margin:0 0 5px 0;}
	.item .tex p{line-height: 1.4;}*/
}/*768ens*/

/*item_box mini*/
#item_box.mini .item{width: calc(100% / 5 - 1px);padding: 5px 5px 45px 5px;}
#item_box.mini .name{font-size: 1.1em;}
#item_box.mini .price{font-size: 1.25em;text-align: right; margin: 5px 0 0;}
#item_box.mini .item .b_box{display: block; margin: 3px 0;}
#item_box.mini .item .tex{display: none;}
#item_box.mini .item .name span{border: none;}
#item_box.mini .item .limited{width: 50px; height: 50px;}
#item_box.mini .item .size span,.item .size:before{font-size: 11px; padding:1px 0; margin-right:1px; }

@media screen and (max-width: 768px){
	#item_box.mini .item{width: calc(100% / 3 - 1px);padding: 1px 1px 25px 1px;box-shadow: none;}
	#item_box.mini .item .size{display: none;}
	#item_box.mini .item .limited{width: 40px; height: 40px; top:2px; right: 2px;}
	#item_box.mini .name{font-size: 1em;}
	#item_box.mini .item .name span{margin-left:1px; border:none; padding:0; font-size: 1em;}

}