@charset "utf-8";

/*基礎樣式*/
.scrollName{ overflow-y: hidden;/* height:60px;*/ }
.scrollName > div { overflow-x: scroll; white-space: nowrap; }
.scrollName > div > *{ text-decoration: none; }

/*通用*/
.reviewclass { overflow-y: hidden; height:40px; }
.reviewclass .range { overflow-x: scroll; white-space: nowrap;  }
.reviewclass .range .sortgrids { text-decoration: none; }

.slickSwitchPC{ display: block; }
.slickSwitchMb{ display: none; }

/* about */
.aboutBlock .scrollName{ overflow-y: hidden; }
.aboutBlock .scrollName > div { overflow-x: auto; white-space: nowrap; }
.aboutBlock .scrollName > div > *{ text-decoration: none; }

/* product_list */
.scrollNameBox.scrollPList { overflow: hidden; border-bottom: 1px solid #f3981e; margin-bottom: 20px; }
.scrollNameBox.scrollPList .scrollName { margin-bottom: -38px; }
.scrollNameBox.scrollPList .scrollName .sortlist { margin-bottom: 0; padding-bottom: 20px; }

@media screen and (min-width:768px){
	.scrollNameBox.scrollPList.safariBox { margin-bottom: 0px; }
	.scrollNameBox.scrollPList.safariBox .scrollName { margin-bottom: 0px; }
	.scrollNameBox.scrollPList.safariBox .scrollName .sortlist { margin-bottom: 30px; padding-bottom: 0px; }
}

@media screen and (max-width:767px){
    /*純行動版樣式*/
    .scrollNameBoxMobile { overflow: hidden; }
    .scrollNameBoxMobile .scrollNameMobile { overflow-y: hidden; margin-bottom: -18px; }
    .scrollNameBoxMobile .scrollNameMobile > div { overflow-x: scroll; white-space: nowrap; }
    .scrollNameBoxMobile .scrollNameMobile > div > *{ text-decoration: none; padding-bottom: 20px; }

    .slickSwitchPC{ display: none; }
    .slickSwitchMb{ display: block; }

    .mainlist .box01 .btnleft,
    .mainlist .box01 .btnright,
    .mainlist .box02 .btnleft,
    .mainlist .box02 .btnright,
    .mainlist .box03 .btnleft,
    .mainlist .box03 .btnright { display: none; }

    .box01 .slickSwitchMb .mar,
    .box02 .slickSwitchMb .mar,
    .box03 .slickSwitchMb .mar,
    .box04 .scrollName .mar { display:block; }
    .box01 .slickSwitchMb .mar .grids { display: inline-flex; width:45%; }
    .box02 .slickSwitchMb .mar .grids,
    .box03 .slickSwitchMb .mar .grids,
    .box04 .scrollName .mar .grids { display: inline-flex; width:90%; }
    
    .scrollNameBox { overflow: hidden; }
    .scrollNameBox .scrollName { margin-bottom: -18px; }
    
    /* about */
    .aboutBlock .mar { margin-left:0px; }
    .aboutBlock .scrollName{ overflow-y: hidden;/* height:60px;*/ }
    .aboutBlock .scrollName > div { overflow-x: scroll; white-space: nowrap; }
    .aboutBlock .scrollName > div > *{ text-decoration: none; }
    .aboutBlock.scrollNameBox .scrollName { margin-bottom: -18px; }
}