@charset "utf-8";
@font-face {font-family: Futura; src: url(../fonts/FuturaPTMedium.otf);}

.main {line-height: 2;}

.type {margin-bottom: 6rem;}
.type .cateNav {align-items: center; margin: 0 auto; font-family: 'Futura', sans-serif; font-weight: 300; font-size: 1.4rem; text-align: center;}
.type .cateNav li {display: inline-block; margin-right: 2rem;}
.type .cateNav li a {position: relative; padding-bottom: 2px;}
.type .cateNav li a:hover {border-bottom: 1px solid #000;}
.type .cateNav li a.active {border-bottom: 1px solid #000;}
.type .cateNav li a.active:hover {opacity: 1;}

#box01 h4 {font-size: 2.5rem; font-family: 'Futura', sans-serif; font-weight: 300; margin-bottom: 2rem;}
#box01 p {margin-bottom: 2rem;}
#box01 a {display: block; width: 240px; text-align: center; border: 1px solid #000; padding: 1.2rem 1rem;}

#box02 {margin-bottom: 4rem;}
#box02 .tit {background: #737373; color: #fff; padding: 1rem; margin-bottom: 2rem; font-size: 1.6rem;}
#box02 .rank .rank-tit {background: #000; color: #fff; width: 150px; margin-bottom: 1rem; padding: 0 1rem; font-size: 1.4rem; margin-left: 1.5rem;}
#box02 .rank .rank-tit span {font-size: 2.5rem; margin-right: 0.2rem;}
#box02 .rank .row {margin-bottom: 2rem; padding: 0 1.5rem;}
#box02 .rank .row > p:nth-of-type(1) {font-size: 1.6rem;}
#box02 .rank .row ul {margin-top: 1rem; justify-content: flex-start;}
#box02 .rank .row ul li {width: 13%; margin-bottom: 1rem; margin-right: 1.5%;}
#box02 .rank .row ul li:nth-of-type(7n) {margin-right: 0;}
#box02 .rank .row ul li figure figcaption {margin-top: 0.5rem; font-size: 1.2rem;}
#box02 .rank .row .red {color: red;}



/*Responsive*/

@media only screen and (max-width: 767px){
  	#box02 .rank .row ul li {width: 23%; margin-right: 2.66%;}
	#box02 .rank .row ul li:nth-of-type(7n) {margin-right: 2.66%;}
	#box02 .rank .row ul li:nth-of-type(4n) {margin-right: 0;}
}

@media only screen and (max-width: 480px){
	#box02 .rank .row ul li {width: 49%; margin-right: 2%;}
	#box02 .rank .row ul li:nth-of-type(7n) {margin-right: 2%;}
	#box02 .rank .row ul li:nth-of-type(4n) {margin-right: 2%;}
	#box02 .rank .row ul li:nth-of-type(2n) {margin-right: 0;}
}