html,body{
font-size: 15px!important;
color: #555555;
}

section.__list--block{
    display: none;
}

.main--product-list .__control{
    display: none;

}

h1.c-h1{
display: none;
}

section.__child{
display: none;
}

.JustleCatPage h1{
display: block;
max-width: 100%;
font-size:1.2rem;
border-bottom:1px solid #555555;
position: relative;
color: #555555;
}

/**
.JustleCatPage h1::after{
position: absolute;
display: block;
content:"";
top:100%;
height:2px;
width:100%;
max-width: 100%;
background-color: #555555;
}
**/

.JustleCatPage{
width:100%;
max-width: 1300px;
font-size: 13px;
padding:0;
/**border-right : 5px dotted #CCCCCC;
border-left : 5px dotted #CCCCCC;**/
}

.JustleCatPage *{
padding:0;
margin:0;
}
.JustleCatPage ul{
list-style: none;

}
.JustleCatPage li{

}

.JustleCatPage > p{
font-size: 1rem;
line-height: 1;
margin:10px 0px;
}
.JustleCatPage > h1 > a{
position: absolute;
right: 0;
display: inline-block;
color: #0068B7;
font-size: 0.9rem;
text-decoration: none;
text-align: right;
font-weight: normal;
padding: 5px 10px;
}
.JustleCatPage > h1 > a:hover{
text-decoration: underline;

}


.JustleCatList{
width:100%;
font-size: 0.85rem;
margin:20px 0px;
border-top:2px solid #AAAAAA;
border-bottom:2px solid #AAAAAA;
}
.JustleCatList > li:first-child{
background-color: #DDDDDD;
}
.JustleCatList > li:first-child .JustleCatListRow > li{
font-weight: bold;
}

.JustleCatList > li:not(:last-child){
border-bottom:2px solid #AAAAAA;
}

.JustleCatList li.JustleCatListSamePN,
.JustleCatList li.JustleCatListSameType{
border-bottom:none;
}



li.JustleCatListSamePN .JustleCatListRow > li:nth-child(1){
}
li.JustleCatListSamePN .JustleCatListRow > li:nth-child(n+3){
border-bottom:1px solid #AAAAAA;
} 

li.JustleCatListSameType .JustleCatListRow > li:nth-child(n+2){
border-bottom:2px solid #AAAAAA;
}



.JustleCatListRow{
display: flex;
flex-wrap: wrap;
width:100%;
}


.JustleCatListRow > li{
}
.JustleCatListRow > li:nth-child(1){
border-right:1px solid #AAAAAA;
width:200px;
font-weight: bold;
padding:5px 5px;
}

.JustleCatListRow > li:nth-child(2){
border-right:1px solid #AAAAAA;
width:400px;
flex-grow: 1;
}
.JustleCatListRow > li:nth-child(3){
padding:5px 5px;
width:calc(100% / 4);
max-width:250px;
white-space: nowrap;
text-align: center;
border-right:1px solid #AAAAAA;
font-weight: bold;
}
.JustleCatListRow > li:nth-child(4){
padding:5px 5px;
width:fit-content;
min-width:400px;
text-align: center;

}

.JustleCatListRow > li:last-child{
width:100%;
}
.JustleCatListRow > li:nth-child(4) p{
font-size: 0.8rem;
margin-top:15px;

}


.JustleCatListPrNmb{
display: flex;
flex-flow: column;
height: 100%;
text-align: left;
align-items: center;
}
.JustleCatListPrNmbH4Null{
background-color: #FFFFFF;
display: block;
height: 100%;
}
.JustleCatListPrNmb > li{
width: 100%;
display: flex;
flex-grow: 1;
}

.JustleCatListPrNmb > li:not(:first-child) .JustleCatListTh,
.JustleCatListPrNmb > li:not(:first-child) > p,
.JustleCatListPrNmb > li:not(:first-child) > h4{
    border-top: 1px solid #AAAAAA;
}

h4.JustleCatListPrNmbH4Null{
    border-top: none;

}

.JustleCatListPrNmb > li:not(:last-child) > h3{
    border-bottom: 1px solid #AAAAAA;
}

/**
.JustleCatListPrNmb > li:nth-child(2n){
background-color: #F0F0F0;
}
.JustleCatListPrNmb > li:not(:last-child){
border-bottom:1px solid #AAAAAA;
}
**/

.JustleCatListPrNmb > li > h4{
white-space: nowrap;
width: calc(100% / 5 * 1.5);
height: fit-content;
padding:5px 5px;

}
.JustleCatListPrNmb > li > p:nth-child(3){
white-space: nowrap;
width: calc(100% / 5 * 1.5);
padding:5px 10px;
margin: 0 auto;
text-align: center;
}

.JustleCatListPrNmb > li > p:nth-child(3),
.JustleCatListPrNmb > li > .JustleCatListTh{
border-top:none;
}
.JustleCatListPrNmb > li:first-child > p:nth-child(3),
.JustleCatListPrNmb > li:first-child > .JustleCatListTh{
border-top:none;
}

.JustleCatListTh{
display: flex;
flex-wrap: wrap;
width: calc(100% / 5 * 2);
height: fit-content;
padding:5px 3px;
margin: 0 auto;
text-align: center;
}
.JustleCatListTh > li{
width:45px;

}

.JustleCatListTh > li:not(:last-child){
margin-right:5px;
}
.JustleCatListTh > li:nth-child(3n){
margin-right: 0;
}
.JustleCatListCuttype{
display: block;
flex-wrap: wrap;

}
.JustleCatListCuttype li{
display: inline-block;
min-width:115px;
}
.JustleCatListCuttype a{
min-width:100px;
display: block;
text-decoration: none;
text-align: center;
padding:3px 5px;
margin:0 2px;
font-size: 0.8rem;
font-weight: bold;
color:#F0F0F0;
}

.JustleCatOdcForm{
display: block;
font-size: 0.8rem;
}
.JustleCatOdcForm li{
display: inline-block;
position: relative;
}
.JustleCatOdcForm li:not(:last-child){
margin-right: 10px;
}

.JustleCatOdcForm li::before{
display: block;
content:"";
height: 20px;
vertical-align: middle;
text-align: center;
left:-15px;
background-size: contain;
vertical-align: middle;
margin: 0 auto;
}
.JustleCatOdcForm li:nth-child(1):before{
background-image: url(https://files.bcart.jp/justle-online/uploads/justle/formicon-komaki.png);
width:40px;
}
.JustleCatOdcForm li:nth-child(2):before{
background-image: url(https://files.bcart.jp/justle-online/uploads/justle/formicon-slit.png);
width:40px;
}
.JustleCatOdcForm li:nth-child(3):before{
background-image: url(https://files.bcart.jp/justle-online/uploads/justle/formicon-sheet.png);
width:35px;
}



@media screen and (max-width: 999px) {
.JustleCatList{
margin:0;

}
.JustleCatList > li:first-child{
display: none;
}
.JustleCatListRow{
margin:10px 0;
}
.JustleCatListRow > li:nth-child(n),
.JustleCatListPrNmb > li:nth-child(n){
border-right:none;
border-bottom:0px solid;
padding:0;
margin:0;
}

.JustleCatListRow > li:nth-child(1) > ul:before{
content:"タイプ・シリーズ";
max-width: 100%;
display: block;
background-color: #EEEEEE;
}

.JustleCatListRow > li:nth-child(1){
width:100%;
font-size: 2rem;
}
.JustleCatListRow > li:nth-child(1) span{
display:inline-block;
padding-left:20px;
}

.JustleCatListRow > li:nth-child(2) > ul:before{
content:"品番・厚み";
width: 100%;
display: block;
background-color: #EEEEEE;
padding:3px 10px;
}

.JustleCatListRow > li:nth-child(2){
width:100%;
flex-grow: 1;
}
.JustleCatListRow > li:last-child > ul:before{
content:"特徴";
width: 100%;
display: block;
background-color: #EEEEEE;
padding:3px 10px;
}

.JustleCatListRow > li:last-child{
width:100%;
}

.JustleCatListPrNmb p,
.JustleCatListPrNmb ul{
padding:3px 10px;
}
.JustleCatListPrNmb > li:not(:last-child){
border-bottom:1px solid #AAAAAA;
}
}