@media only screen and (max-width:1024px){

html { background:#7F7F7F; }
body { width:100%; font-size:100%; overscroll-behavior: none;}

#content{ width:100%;}
#footer { position: static; margin-top: -2px;}

#wrapper {  border-top:none;}
#base { width:100%; margin:0 !important;}
    
#main{ /*margin-top: 10px;*/ background-color: #FFF;}
#browseMain{ 
	margin-top: 10px;
	user-select: none; /* CSS3 */
	-moz-user-select: none;
}



/* PHONE NAV */
    
.sm{ display: block;}
.pc{ display: none;}

#header { position: relative;}
#header #Navi { display: block;}
#header .nav_btn,
#header .nav_btn span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
#header .nav_btn {
  position:absolute; top:10px; right: 15px;
  width: 30px;
  height: 25px;
  background: none;
  border: none;
  appearance: none;
  cursor: pointer;
}
#header .nav_btn span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color:#7F7F7F;
  border-radius: 4px;
}
#header button.nav_btn span:nth-of-type(1) { top: 0;}
#header button.nav_btn span:nth-of-type(2) { top: 10.5px;}
#header button.nav_btn span:nth-of-type(3) { bottom: 0;}
#header button.nav_btn.active span:nth-of-type(1) { transform: translateY(10.5px) rotate(-45deg);}
#header button.nav_btn.active span:nth-of-type(2) { opacity: 0;}
#header button.nav_btn.active span:nth-of-type(3) { transform: translateY(-10.5px) rotate(45deg);}
#header button.nav_btn:focus{ border: none !important; outline: none !important;}

#header .type_list { position: relative; z-index: 999; background: #f5f5f5; border-bottom: 1px solid #dedede;}
#header .type_list ul { padding:0; margin: 0; overflow:hidden;}
#header .type_list ul:nth-of-type(1) { padding:0.5em 20px; background-color: #FFF;}
#header .type_list ul li { padding:0; margin: 0; background:#fff;}
#header .type_list ul:nth-of-type(2) li { border-top: 1px solid #dedede;}
#header .type_list ul li a { display: block; padding:15px 15px 15px 0; color: #333; text-decoration: none;}
#header .type_list ul li a:hover { background:#dedede}
#header .type_list ul li a img { margin-left:20px; padding: 0 !important; width:25px !important; height:25px !important; vertical-align: middle;}
#header .type_list ul li a i.material-icons { margin-left:20px;}

#header .headerlogo { float: left;}
#header .logo_img,
#header .logo_txt { float:left;}
#header .logo_img {margin:0 0 0 5px; padding:10px 0;}
#header .logo_img a { display: block; width:100px; height:25px; background-size: 100px auto; }
#header .logo_txt { margin:10px; padding:5px; font-size:12px; border-left:1px solid #ddd;}

#header .headernav p { display: none;}
#header .headernav p#cartParent { 
    display:block;
    position: absolute !important; top:2px !important; right:75px!important;
}
#header .headernav a img { width:30px; height: auto;}
#header .headernav p#cartParent b { display:none;}
#header .headernav #numItems .iconbadge { position: absolute; top:3px; right:-25px;}
#header .headernav i.material-icons { font-size: 30px!important;}


#header .h_box1 { padding:0 15px 0;}
#header .h_box2 { padding:10px 15px;}
#header .breadcrumb,
#header .gnav { float:none; width:100%; font-size:12px; line-height:20px;}
#header .breadcrumb { padding: 0.25em 0 0 0; }
#header .breadcrumb .unselectable{ padding-top: 4px; }
#header .gnav ul li:nth-child(2),
#header .gnav ul li:nth-child(3){ display:none !important;}
#header .gnav ul li img { width:25px;}
#header .gnav ul li i.material-icons  { font-size:24px!important;}
#header #goPage { width:50px; height:30px; font-size: 14px; }
#header #goPageButton { height:30px; font-size:12px !important; line-height:12px;}

#header .breadcrumb ul:last-child { min-width: 170px !important;}


#footer ul { float:none; padding:5px 0 20px; text-align: center;}
#footer ul li+li { margin-left:10px;}
#footer ul li a:link {font-size: 70%;}
#footer .copy { float:none; padding: 20px 0 0; text-align: center; border-top:1px solid #dedede;}	


/* PAGENATION */
.pagination { margin:10px 0 20px; max-width:160px; border-radius:0 !important;}
.pagination>li  { display: none;}
.pagination>li.first,
.pagination>li.prev,
.pagination>li.next,
.pagination>li.last { display: block;}
.page-item .page-link { border: none!important;}
.page-item.disabled .page-link i.material-icons  { color: #B5B5B5 !important;}

	
/* PHONE CATEGORY NAV */	
.head_sbnav { position:relative; z-index: 9999;}
.head_sbnav .tab {}
.head_sbnav .tab::after { /*float_clear*/ display:block; clear:both; content:"";}
.head_sbnav .tab li a,
.head_sbnav .tab li {
	display: block;
	float:left;
	width: 33.3%;
	height: 45px;
	line-height: 45px;
	border: none;
	color: #fff;
	text-align: center;
	border-right:1px solid #eee;
	border-bottom:1px solid #eee;
	box-sizing: border-box;
	font-size: 100%;
}
.head_sbnav .tab li a {width: 100%;}
.head_sbnav .tab li:nth-child(3n) { border-right:none;}
.head_sbnav .content { position: absolute; width: 100%;}
.head_sbnav .content div { padding-bottom: 20px; height:auto; background: rgba(0,0,0,0.80);}
.head_sbnav .content div ul { padding: 20px; }
.head_sbnav .content div ul li+li { margin-top: 1px;}
.head_sbnav .content div ul li a { display: block; padding: 15px; color: #222; text-decoration: none; background: #fff url(/asset.php?path=../../image/arrow7.png) no-repeat 96% center; background-size: 10px auto;}
.head_sbnav .hide { display:none;}
.head_sbnav .close {
	margin:10px auto 0;
	width:50%;
	padding: 20px;
	text-align: center;
	color: #000;
	background: #fff url(/asset.php?path=../../image/close.png) no-repeat 20px center;
	background-size: 10px auto;
	border: none;
	box-sizing: border-box;
}	    
    
    
/* 商品カテゴリー 大 */

h2.category{ font-size:1.2em; margin-bottom: 40px;}
.cate-box {gap: 30px 5%;}
.cate-box li{ width:47.5%; }
.cate-box li a{ text-align: left;}
.cate-box li a span{ margin: 0;}


/* 商品カテゴリー 小 */
    
.cate-box-sub{ margin: 0 5%;}
.cate-box-sub li{
    width:45%;
    margin-right: 10%;
    margin-bottom: 20px;
    display:block;
    float: left;
}
.cate-box-sub li:nth-child(2n){ margin-right: 0;}
.cate-box-sub li:nth-child(3n){ margin-right: 10%;}
.cate-box-sub li:nth-child(6n){ margin-right: 0;}
.cate-box-sub li .img{ width:100%; height:auto;}
.cate-box-sub li img{ width: 100%;}

    
/* 検索画面 */
    
h2.search{ font-size:1.2em; margin-bottom: 40px;}
.search-area{ padding-top: 0;}
 .search-area th{
    display: block;
    width:100%;
    font-weight:bold;
    padding:0.5em 1.0em 0 0;
    text-align:left;
}
.search-area td{
    display: block;
    width:100%;
    padding:0.5em 1.0em 0 0;
}
.search-area td span{ display: block;}
.search-area td span+span{ margin:0.5em 0 0;}

.modal-body h4{ margin-bottom:0.5em}
.search-area .btn-area{padding-top:1.0em;}



/* 検索結果画面 */
    
.search-result-area{ margin:0 4%;}
.search-result-area th{ background: #EEE; text-align: left!important;}
.search-result-area th .sm{ padding-left:1.0em;}
.search-result-area th table{ display: none;}

.search-result-area td table{ border-right: none!important;}
.search-result-area td td{ border-top: none!important; display: block; padding: 0; }
.search-result-area td td:nth-child(1){ padding: 0; width: 100%; text-align: left; }
.search-result-area td td:nth-child(2){ padding: 0; width: 100%; border-left: none;}

    
/* カートイン画面 */
.list-area table{ display: none;}
.list-area { height: calc(100vh - 130px) !important; overflow: scroll;}
.cart_list{ display: block;} 
.cart_list .cart_in{
	position: relative;
    border-bottom: 1px solid #222;
    padding:1.0em;
    overflow-x: hidden;
}
.cart_list .cart_in:last-child { border-bottom: none;} 
.cart_list .cart_in ul{ padding-bottom: 0.5em; }  
.cart_list .cart_in li{ margin-bottom: 0.5em; }  
.cart_list .cart_in .del{ position: absolute; bottom:1.5em; right:1.0em;}
.cart_list .cart_in .del input{ background: #c9caca; border: none;}
.cart_list .cart_in .zaiko{ clear: both; padding-top:0; float: left;}
.cart_list .cart_in .num{ float: right; text-align: right; width: 150px;}
.cart_list .cart_in .num input{ margin: 0 0.5em; }  

.cartDetail .photo { float: left; width: 100px; margin-right: 0.5em !important; text-align:center !important; overflow: hidden;}
.cartDetail .photo img { border: 1px solid #000;}    
.cartDetail ul { overflow: hidden;}
.cartDetail div.info,
.cartDetail div.zaiko,
.cartDetail ul li { position: relative !important; padding-left:70px; text-align: left;}
.cartDetail div.info span,
.cartDetail div.zaiko span,
.cartDetail ul li span {
	display:block;
	position: absolute !important; top:5px !important; left:0;
	margin-right:5px;
	padding: 2px 0;
	width: 60px;
	font-size: 10px;
	line-height: 12px;
	color: #fff;
	text-align: center;
	background: #333;
}
.cartDetail div.zaiko b { margin:0; padding: 0;}
.cartDetail .s_code li { float: left; margin-bottom: 10px; width: 50%;}

/* カートインボタン
.btn-area .btn,
.btn-area .btn a{ display:block; }
 
.btn-area .btn,
.btn-area .btn a.search{ display:block;}  */
	
/* 閉じるボタン */
.cloce_btn { top:30px !important;}

/* 全削除ボタン */
.delete_all_btn { top:30px !important;}

/* ページめくりボタン */
#prevPageButtonSP {
	opacity: 0.5;
	position: fixed;
	left:0;
	top: 50%;
	width: 25px;
	height: 50px;
	z-index: 9999;
	text-indent: -9999px;
	background:#000 url(/asset.php?path=images/common/book_arrow.png) no-repeat left center;
	background-size: auto 100%;
}

#nextPageButtonSP {
	opacity: 0.5;
	position: fixed;
	right:0;
	top: 50%;
	width: 25px;
	height: 50px;
	z-index: 9999;
	text-indent: -9999px;
	background:#000 url(/asset.php?path=images/common/book_arrow.png) no-repeat right center;
	background-size: auto 100%;
}
    


#cartList {
  overflow-y: auto;
  display: block;
	table-layout: fixed;
	word-wrap: break-word;
  border: solid 1.1px;
}
#cartListSM {
  overflow-y: auto;
  display: block;
	table-layout: fixed;
	word-wrap: break-word;
  border: solid 1.1px;
}

#modal-content {
	position: fixed ;
	width:100vw !important;
	height:100vh !important;
	padding:50px 20px !important;
	z-index:999999999999 !important;
	user-select: none !important; /* CSS3 */
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
}
#modal-overlay {
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width:100vw !important;
	height:100vh !important;
	background-color: rgba( 0,0,0, 0.75 ) ;
	z-index:9999999 !important;
	user-select: none !important; /* CSS3 */
	-webkit-user-select: none !important;
	-moz-user-select: none !important;
}
#messageModal {}
#addToCartButton {
    position:fixed;
    bottom:0px;
    right:0px;
    z-index:999999999 !important;
	width: 100%;
    background-color:none;
}
#addToCartButton .cart-btn .btn  { padding:0; border: none; border-radius:0; width: 100% !important; margin: 0;}
#addToCartButton .cart-btn .btn a { display: block; border-radius:0; width: 100% !important;}

/*#main {margin-bottom:70px;}*/
	
#p_index .box dd p { width:18.2%;}
#p_index_cate { padding: 5% 2%;}
#p_index_cate a { 
    display: block;
    padding: 5px 0;
    color: #222;
    text-align: center;
    text-decoration: none;
    background: #ddd;
    border-radius: 5px;
}	
	
}

@media only screen and (max-width:600px){

	#header .breadcrumb { flex-wrap: wrap;}
	#header .breadcrumb ul{ width: 100%;}
	#header .breadcrumb ul .unselectable { padding: 0.25em 0 0.5em;}

	.cate-box li{ width:100%; }
	.cate-box li.nothumb {min-height: 90px;}

	
	.cate-box-categorysub{ gap: 30px 10%;}
	.cate-box-categorysub li{ width:45%;}

	.modal-body .pdf-button-list li { width: 100%;}
	.cart_list .cart_in .del{ bottom:21px;}
	.cart_list .cart_in input{ max-width: 100px; }

}