@charset 'UTF-8';

.kv {
background: #fef5f5;
}

.kv h2 {
max-width: 1320px;
margin: 0 auto;
padding: 33px 25px;
color: #e61010;
font-size: 30px;
letter-spacing: 2px;
box-sizing: border-box;
}

.rank {
max-width: 1320px;
margin: 0 auto;
padding: 35px 20px 27px;
box-sizing: border-box;
}

.rank h3 {
margin: 0 0 25px;
text-align: center;
}

.rank h3 span {
display: block;
font-size: 26px;
color: #e61010;
}

.rank .bxslider {
letter-spacing: -0.5em;
text-align: center;
}

.rank .bxslider li {
display: inline-block;
width: 188px;
margin: 0 16px 20px;
letter-spacing: 0;
vertical-align: top;
}

.rank .bxslider li a {
position: relative;
display: block;
padding: 20px 10px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
}

.rank .bxslider li .ico {
position: absolute;
top: 5px;
left: 5px;
}

.rank .bxslider li h4 {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.43;
}

.rank .note {
max-width: 1069px;
margin: 0 auto;
text-align: right;
}

.list {
max-width: 1320px;
margin: 0 auto;
padding: 35px 20px 90px;
box-sizing: border-box;
}

.list h3 {
margin: 0 0 38px;
text-align: center;
}

.list h3 span {
display: block;
font-size: 26px;
color: #e61010;
}

.list .tabMenu01 {
position: relative;
margin: 0 0 46px;
letter-spacing: -0.5em;
text-align: center;
}

.list .tabMenu01:after {
content: '';
position: absolute;
bottom: -34px;
left: 0;
right: 0;
width: 21px;
height: 22px;
margin: 0 auto;
background: url("/img/products/ico_cross.png") no-repeat;
}

.list .tabMenu01 li {
display: inline-block;
width: 15.833333%;
margin: 0 1% 0 0;
padding: 10px 0;
font-size: 14px;
letter-spacing: 0;
vertical-align: top;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
}

.list .tabMenu01 li.active {
color: #fff;
background: #e61010;
border: 1px solid #e61010;
}

.list .tabMenu01 li:last-child {
margin: 0;
}

.list .tabMenu02 {
margin: 0 -8px;
padding: 0 0 28px;
letter-spacing: -0.5em;
text-align: center;
}

.list .tabMenu02 li {
display: inline-block;
width: 148px;
margin: 0 7px 14px;
padding: 10px 0;
font-size: 14px;
letter-spacing: 0;
vertical-align: top;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
}

.list .tabMenu02 li.active {
color: #fff;
background: #e61010;
border: 1px solid #e61010;
}

.list .lineup {
min-height: 584px;
margin: 0 -15px;
letter-spacing: -0.5em;
text-align: left;
}

.list .lineup li {
display: inline-block;
width: 188px;
margin: 0 15px 20px;
letter-spacing: 0;
vertical-align: top;
text-align: center;
}

.list .lineup li a {
position: relative;
display: block;
padding: 20px 10px;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
}

.list .lineup li .new {
position: absolute;
top: 3px;
left: 3px;
width: 48px;
color: #fff;
font-size: 12px;
line-height: 1.25;
font-weight: 500;
text-align: center;
background: #e61010;
border-radius: 3px;
}

.list .lineup li h4 {
height: 80px;
margin: 10px 0 0;
font-size: 14px;
line-height: 1.43;
overflow: hidden;
}

.brand {
padding: 35px 0 15px;
text-align: center;
box-sizing: border-box;
background: #f5f5f5;
}

.brand h2 {
margin: 0 0 20px;
}

.brand h2 span {
display: block;
font-size: 18px;
}

.brand ul {
letter-spacing: -0.5em;
}

.brand ul li {
display: inline-block;
margin: 0 20px 20px;
letter-spacing: 0;
vertical-align: top;
}

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

.kv h2 {
width: 93.75%;
margin: 0 auto;
padding: 20px 0;
font-size: 25px;
}

.rank {
width: 93.75%;
margin: 0 auto;
padding: 10% 0 4%;
}

.rank h3 {
margin: 0 0 18px;
font-size: 10px;
}

.rank h3 span {
font-size: 18px;
}

.rank .bxslider {
letter-spacing: 0;
}

.rank .bxslider li {
display: block;
margin: 0;
}

.rank .bxslider li a {
margin: 0 3%;
padding: 12% 6%;
}

.rank .bxslider li .ico {
position: absolute;
top: 4px;
left: 4px;
width: 19.43%;
}

.rank .bxslider li h4 {
margin: 4% 0 0;
font-size: 11px;
}

.rank .bxslider .slick-dots {
bottom: -35px;
}

.rank .bxslider .slick-dots li {
display: inline-block;
width: auto;
}

.rank .bxslider .slick-dots li button {
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
padding: 0;
background: #fff;
border: 2px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}

.rank .bxslider .slick-dots .slick-active button {
background: #e61010;
border: 2px solid #e61010;
}

.rank .bxslider .slick-dots li button:before {
display: none;
}

.rank .note {
font-size: 10px;
}

.list {
width: 95.3125%;
margin: 0 auto;
padding: 7% 0 10%;
}

.list h3 {
margin: 0 0 26px;
font-size: 10px;
}

.list h3 span {
font-size: 18px;
}

.list .tabMenu01 {
margin: 0;
padding: 0 0 26px;
}

.list .tabMenu01:after {
content: '';
position: absolute;
bottom: 6px;
left: 0;
right: 0;
width: 16px;
height: 16px;
margin: 0 auto;
background: url("/img/products/ico_cross.png") no-repeat;
background-size: contain;
}

.list .tabMenu01 li {
display: inline-block;
width: 49.18%;
margin: 0 1.64% 5px 0;
padding: 6px 0;
font-size: 10px;
}

.list .tabMenu01 li:nth-child(2n) {
margin: 0 0 5px;
}

.list .tabMenu02 {
margin: 0;
padding: 0 0 12px;
text-align: left;
}

.list .tabMenu02 li {
width: 32.46%;
margin: 0 1.31% 5px 0;
padding: 6px 0;
font-size: 10px;
text-align: center;
}

.list .tabMenu02 li:nth-child(3n) {
margin: 0 0 5px;
}

.list .lineup {
width: 100%;
min-height: 300px;
margin: 0;
}

.list .lineup li {
display: inline-block;
width: 46%;
margin: 0 2% 11px;
letter-spacing: 0;
vertical-align: top;
}

.list .lineup li a {
padding: 12% 6%;
}

.list .lineup li .new {
top: 2px;
left: 2px;
width: 36px;
font-size: 10px;
line-height: 1.3;
}

.list .lineup li h4 {
height: 45px;
margin: 4% 0 0;
font-size: 11px;

}

.brand {
padding: 8% 4.175% 5%;
text-align: center;
box-sizing: border-box;
background: #f5f5f5;
}

.brand h2 {
margin: 0 0 5%;
}

.brand h2 span {
display: block;
font-size: 14px;
}

.brand ul {
letter-spacing: -0.5em;
}

.brand ul li {
display: inline-block;
width: 48%;
margin: 0 4% 4% 0;
letter-spacing: 0;
vertical-align: top;
}

.brand ul li:nth-child(2n) {
margin: 0 0 4%;
}

}