@charset "euc-jp";
@import url("header_2024.css");

main { 
    display: table; table-layout: fixed; position: relative; z-index: 1;
    box-sizing: border-box; width: 100%; max-width: none; margin: 101px auto 50px; padding: 0 20px;}

main > * { display: table-cell; vertical-align: top;}

#sidebar {width: 200px; padding: 0 20px 0 0;}

main > section { padding: 0 0 0 20px; border-left: solid #c6c6c6 1px;}

/* パンクズ */
#pankuzu { overflow-x: visible;}

@media screen and (max-width:699px){
    main,
    main > * { display: block;}

    main { margin: 70px auto 50px; padding: 65px 10px 0;}
    main#search { padding: 0 10px;}

    #sidebar { 
        width: auto; margin: 0 0 20px; padding: 0;}

    main > section { padding: 0; border: none;}

    /* パンクズリスト */
    #pankuzu {
        position: absolute; top: 0; left: 0; right: 0; z-index: 1;
        overflow-x: scroll;
        padding: 5px 0; margin: 0 10px;
        white-space: nowrap;}

    #pankuzu > p { padding: 5px 0 0;}

    /* スクロールバーの装飾 */
    #pankuzu::-webkit-scrollbar { height: 8px;}
    #pankuzu::-webkit-scrollbar-track { background-color: rgba(216, 216, 216, 0.5);}
    #pankuzu::-webkit-scrollbar-thumb { background-color: rgba( 150, 150, 150, 0.8);}
}
/**============================================================================================**/

/**============================================================================================**/
/* サイドバー */
#sidebar { font-size: 14px; line-height: 1.5em;}
#sidebar strong { font-size: 16px; line-height: 2em;}

/* カテゴリーで絞り込む */
#category,
#categorySort { margin: 0 0 30px;}

#category label,
#categorySort label { display: none;}

#category p,
#categorySort p { padding: 5px 0;}

#categorySort .bcBox-second { display: none;}


/* ブランドで絞り込み */
#brand,
#brandSort { margin: 0 0 30px;}

#brandSort p {   
    position: relative;
    margin: 0; padding: 5px 0 5px 20px;
    cursor: pointer;}
    
#brand .accordion-box label {
    display: block; position: relative;
    margin: 0; padding: 5px 0 5px 20px;
    color: #4d4d4d; cursor: pointer;}
    
#brand .accordion-box input[type="checkbox"],
#brandSort p input[type="checkbox"] { position: absolute; top: 9px; left: 0; margin: 0;}

#brand .accordion-box input[type="button"],
#brandSort input[type="button"] { 
    box-sizing: border-box; width: 200px; padding: 3px 0;
    border: solid 1px #444; border-radius: 6px;
    background: #e2e2e2;
    cursor: pointer;}

#brand .brBox-second,
#brandSort .brBox-second { display: none;}

@media screen and (max-width:699px){
    /* ブランドで絞り込み */
    #brand { margin: 0 0 20px;}

    #categorySort .ta_c { text-align: left;}

    /* ブランドで絞り込み（アコーディオン設定） */
    label[for="mb-accordion2-1"] { display: inline-block; position: relative; padding: 3px 20px 3px 0px;}

    label[for="mb-accordion2-1"]::after {
        content: '';
        display: inline-block; position: absolute; top: 11px; right: 0;
        width: 8px; height: 8px;
        border: solid #878787; border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);}

    /* アコーディオン表示エリア */
    .accordion-box { max-height: 0; padding: 0; overflow: hidden;}

    #mb-accordion2-1:checked ~ label[for="mb-accordion2-1"]::after { top: 15px; border-width: 2px 0 0 2px;}
    #mb-accordion2-1:checked ~ .accordion-box {max-height: 8000px;}
}




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

/* アコーディオン 開閉ボタン */
label[for="mb-accordion1"],
label[for="mb-accordion2"] {
    display: inline-block; position:relative;
    width: 170px;
    font-size: 16px; cursor: pointer;}

label[for="mb-accordion1"]::after,
label[for="mb-accordion2"]::after {
    content: '';
    display: inline-block; position: absolute; top: 6px; right: 3px;
    width: 10px; height: 10px;
    border: solid #555;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}

label[for="mb-accordion1"]::after { border-width: 0 2px 2px 0;}

label[for="mb-accordion2"]::after { border-width: 2px 0 0 2px;}

label[for="mb-accordion2"]::before { content: 'ブランドで絞り込む'; font-weight: bold;}


/* アコーディオン 表示・非表示エリア
.accordion-box {
  overflow-y: hidden;
  max-height: 0; margin: 0; padding:0; border:none; opacity: 0;}
 */
 
/* アコーディオンをクリックした場合（商品ページ） */
#mb-accordion1:checked ~ .accordion-box { 
    box-sizing: border-box; width: 100%;height:auto; max-height: 800px; margin: 0; padding: 5px 0; 
    opacity: 1;}
#mb-accordion1:checked ~ label[for="mb-accordion1"],
#mb-accordion2:checked ~ label[for="mb-accordion2"] { display: none;}


}




@media screen and (max-width:599px){
    /* アコーディオン 開閉ボタン */
    label[for="mb-accordion1"],
    label[for="mb-accordion2"] { position: relative;  bottom: auto; left: auto;}
    
    /* アコーディオンをクリックした場合 */
    #mb-accordion1:checked ~ .accordion-box {  margin: 0;}
    
    #mb-accordion1:checked ~ label[for="mb-accordion2"],
    #mb-accordion2:checked ~ label[for="mb-accordion1"] { top:auto;}

}





/* 関連情報 */
#sidebar .ossm { margin: 0 0 20px;}
#sidebar .ossm ul { margin: 20px 0 0;}
#sidebar .ossm li { margin: 0 0 10px;}

/* フリースペース3・4 */
#freespace03,
#freespace04 { margin: 0 0 30px;}

@media screen and (max-width:699px){
    #freespace03,
    #freespace04 { display: none;}
}
/**============================================================================================**/

/**============================================================================================**/
/* 検索一覧用slickの設定 */
.content-slider {margin: 0 auto 20px; padding: 0 35px;}

@media screen and (max-width:699px){
    .content-slider { padding: 0;}
}



.slick-prev{
    left: 0;
    background: url(../images/icon/slick-arrow_left.png);
}
.slick-next{
     right:0;
    background: url(../images/icon/slick-arrow_right.png);
}

.slick-prev,
.slick-next {
    position: absolute; top: 50%; z-index: 1;
    width: 30px; height: 30px; margin-top: -15px;
    text-indent: -9999px;
}

/* ドットナビゲーションボタン */
ul.slick-dots {margin: 10px 0 0; text-align: center;}
ul.slick-dots li {display: inline-block; margin: 0 5px 5px; padding: 0;}
ul.slick-dots button {
    text-indent: -9999px;
    display: block; width:10px; height:10px; margin:0; padding: 0;
	border: none; border-radius: 5px; outline: 0;
	background: #999;
	}

.slick-dots li.slick-active button {background: #000;}

/**========================================**/
/* ソート JSP FC="SORTPANEL" */
#sortPanel { margin: 0;}

#sortPanel .ctbarTb { 
    display: -webkit-flex;
    display: flex;
     -webkit-flex-wrap: wrap;
    flex-wrap: wrap;}


/* 登録商品 */
#sortPanel .item {
    display: inline-block;
    margin: 0 30px 10px 0;
    color:#ff6100; font-weight:bold;}
    
/* 在庫ありのみ表示 */
#sortPanel .zaiko { display: inline-block; margin: 0 0 10px;}

#sortPanel .zaiko label {
    display: inline-block;
    color: #333; vertical-align: top;
    cursor: pointer;}

#sortPanel .zaiko input[type="checkbox"] { margin: 0 5px 0 0;}

/* 並べ替え */
#sortPanel .select { margin: 0 20px 10px 0;}
#sortPanel .select label,
#sortPanel .select select { display: inline-block; vertical-align: middle;}

#sortPanel .select select { height: 23px;}

@media screen and (max-width:599px){
    #sortPanel { margin: 0 0 20px;}
}
/**============================================================================================**/

/**============================================================================================**/
/* 商品一覧 JSP FC="ITEMLIST" */
#item-list {font-size: 0;}

#item-list .m-b20 { margin: 0;}
#item-list .box {
    display: inline-block; 
    width: 200px; padding: 30px 30px 0 0; 
    font-size: 14px; vertical-align: top;
    word-break: break-all;}

#item-list .box div::after {display: block; clear:both; content: "";}

/* 在庫状況 */
#item-list .open-panel,
#item-list .open-panel1 {
    display: block;
    box-sizing: border-box; width: 100px; height: 30px; margin: 5px auto; padding: 8px 0 0;
    border: solid 1px #333; border-radius: 2px;
    font-size: 12px; line-height: 1.0em; text-align: center; text-decoration: none;}

#item-list .open-panel1 { background: #ddfffb;}

#item-list .open-panel:hover{ background:#DFDFDF;}


/* 価格・送料無料 */
#item-list .price { color: #ff0000; font-weight: bold; text-align: center;}

#item-list img.icon-img { margin: 0 10px 0 0;}


@media screen and (max-width:999px){
    #item-list .box { width: 170px; padding: 30px 20px 0 0;}
}

@media screen and (max-width:699px){
    #item-list a img { width: 110px; height: auto;}
    
    #item-list .box {
        display: table; table-layout: fixed;
        width: 100%; padding: 20px 0;
        border-bottom: solid 1px #e1e1e1;}
        
    #item-list .box > * { display: table-cell; vertical-align: top;}
    #item-list .box > a { width: 110px; padding: 0 20px 0 0;}
    

    /* 在庫状況 */
    #item-list .open-panel { display: inline-block; margin: 20px 0 10px;}

    /* 価格・送料無料 */
    #item-list .price { text-align: left;}

}
   
/* フリースペース1・2・5 */
#freespace01,
#freespace02 { margin: 30px 0 0;}

#freespace05 { margin: 0 0 30px;}
/**========================================**/
/* ページャー（mb用） */
#pageNavMB { max-width: 360px; margin: 30px auto 60px; font-size: 0;}

#pageNavMB ul {margin: 0 0 10px; text-align: center;}

#pageNavMB li {
    display: inline-block; 
    margin: 0 5px; 
    color: #00497F; font-size: 14px; font-weight: bold;}
    
#pageNavMB li * {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box; min-width: 35px; height: 35px; 
    border: solid 1px #00497F;
    font-size: 14px; font-weight: bold;}
    
#pageNavMB li a { color: #00497F;}
#pageNavMB li a:hover { background:#00497F; color: #FFF;}

#pageNavMB li.now { background:#00497F; color: #FFF;}


#pageNavMB .prev,
#pageNavMB .next {display: inline-block; width: 50%;}

#pageNavMB .prev a,
#pageNavMB .next a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box; width: 95%; height: 35px;
    border: solid #00497F 1px;
    color: #00497F; font-size: 14px; font-weight: bold;}

#pageNavMB .next a { margin: 0 0 0 5%;}

#pageNavMB li a:hover,
#pageNavMB .prev a:hover,
#pageNavMB .next a:hover{ background:#00497F; color: #FFF; text-decoration: none;}

/* LastUp2024.07.03_kimata */