#genre-width {
	max-width: 1200px;
    margin: 0 auto;
    text-align: center;
	padding-bottom: 40px;
	padding-top: 94px;
}

.rank-position {
    position: relative;
    margin-top: 150px;
}

.rank-image {
    position: absolute;
    width: 120px;
    top: -6%;
    left: 0;
    right: 0;
    margin: auto;
}

.rank-area {
    background-image: url(../img/pc/season/season-time-bg.png);
    background-repeat: no-repeat;
    background-position: 0;
    padding: 60px 50px;
    margin-bottom: 100px;
}


.genre-bg-icon-spring {
    position: absolute;
    top: -10%;
    right: 6%;
    width: 9%;
}

.genre-bg-icon-summer {
    position: absolute;
    bottom: -25%;
    left: 0;
    width: 9%;
}

.genre-bg-icon-autumn {
    position: absolute;
    top: -19%;
    right: 6%;
    width: 9%;
}

.genre-bg-icon-winter {
    position: absolute;
    bottom: 12%;
    left: 3%;
    width: 9%;
}

.spring, .summer, .autumn, .winter 
.morning, .noon, .night , .midnight {
    position: relative;
}

.rank-block {
    display: flex;
    justify-content: center;
}

.summer .rank-block {
    margin-top: 45px;
}
.autumn .rank-block {
    margin-top: 60px;
}

.genre-img-flame {
    width: 38%;
    height: 275px;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.spring .genre-img-flame {
    background-image: url(../img/pc/season/pc-bg-season-spring.png);
}

.summer .genre-img-flame {
    background-image: url(../img/pc/season/pc-bg-season-summer.png);
}

.autumn .genre-img-flame {
    background-image: url(../img/pc/season/pc-bg-season-autamn.png);
}

.winter .genre-img-flame {
    background-image: url(../img/pc/season/pc-bg-season-winter.png);
}

.spring .genre-img, .morning .genre-img {
    position: absolute;
    top: 17%;
    left: 30%;
    width: 67%;
    height: 190px;
}

.summer .genre-img {
    position: absolute;
    top: 13%;
    left: 3%;
    width: 67%;
    height: 190px;
}

.autumn .genre-img {
    position: absolute;
    top: 4%;
    left: 29%;
    width: 68%;
    height: 190px;
}

.winter .genre-img {
    position: absolute;
    top: 20%;
    left: 3%;
    width: 67%;
    height: 190px;
}

.genre-info-flame {
    width: 47%;
    margin: 4% 20px 0;
}

.summer .genre-info-flame {
    margin: 3% 20px 0;
}

.autumn .genre-info-flame {
    margin: 0 20px 0;
}

.winter .genre-info-flame {
    margin: 4% 20px 0;
}

.genre-title-box {
    display: flex;
}

.right {
    justify-content: flex-end;
}

.genre-last-year-frame {
    margin-top: 3px;
}
.genre-last-year-frame img {
    width: 12px;
}

.genre-rank-box {
    max-width: 100%;
    margin: auto 0;
    text-align: left;
}

.genre-rank-name {
    font-size: 30px;
    font-weight: bold;
}

.genre-rank-name:hover {
    opacity: 0.7;
}

.last-year-area {
    width: 24%;
    height: 74px;
    margin: 0 24px;
    position: relative;
}

.genre-rank-coment {
    text-align: justify;
    word-break: break-all;
    font-size: 14px;
    margin-top: 20px;
}

.genre-icon-box{
    display: flex;
}

.spring-color {
    color:#b2009a;
}

.summer-color {
    color: #ffc503;
}

.autumn-color {
    color: #7e4100;
}

.winter-color {
    color: #4b36ff;
}

.title-4-20 {
    width: 40%;
    margin-bottom: 50px;
}

.genre-4-20-area {
    display: flex;
}

.genre-4-20-flame {
    width: 92%;
    height: 300px;
    margin: 0 auto 50px;
}

.genre-img-box {
    height: 188px;
}

.genre-4-20-img {
    width: 100%;
    height: 100%;
}

.genre-4-20-block {
    width: 25%;
}

.genre-4-20-block > img {
    width: 65%;
}

.spring-4-20 li:nth-child(4n+1) {
    background-image: url(../img/pc/season/pc-icon-season-4-20-spring-1.png);
    background-repeat: no-repeat;
    background-position: right 110%;
    background-size: 20%;
}

.spring-4-20 li:nth-child(4n+3) {
    background-image: url(../img/pc/season/pc-icon-season-4-20-spring-2.png);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 20%;
}

.summer-4-20 li:nth-child(4n+2) {
    background-image: url(../img/pc/season/pc-icon-season-4-20-summer-1.png);
    background-repeat: no-repeat;
    background-position: left 110%;
    background-size: 20%;
}

.summer-4-20 li:nth-child(4n+4) {
    background-image: url(../img/pc/season/pc-icon-season-4-20-summer-2.png);
    background-repeat: no-repeat;
    background-position: right 100%;
    background-size: 20%;
}

.autumn-4-20 li:nth-child(4n+1) {
    background-image: url(../img/pc/season/pc-icon-season-4-20-autumn-1.png);
    background-repeat: no-repeat;
    background-position: right 110%;
    background-size: 20%;
}

.autumn-4-20 li:nth-child(4n+3) {
    background-image: url(../img/pc/season/pc-icon-season-4-20-autumn-2.png);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 20%;
}

.winter-4-20 li:nth-child(4n+2) {
    background-image: url(../img/pc/season/pc-icon-season-4-20-winter-1.png);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 14%;
}

.winter-4-20 li:nth-child(4n+4) {
    background-image: url(../img/pc/season/pc-icon-season-4-20-winter-2.png);
    background-repeat: no-repeat;
    background-position: right 100%;
    background-size: 20%;
}


.genre-4-20-block:not(:last-child) ul{
    border-right: dotted 1px #e6e6e6;
}

.genre-4-20-name-area {
    display: flex;
    margin-top: 10px;
}

.rank-4-20-area {
    margin-right: 5px;
}

.genre-4-20-rank-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-flow: column;
    vertical-align: top;
    width: 32px;
    height: 32px;
    color: #fff;
    font-size: 18px;
    margin-right: 5px;
}

.spring-background {
    background:#b2009a;
}

.summer-background {
    background: #ffc503;
}

.autumn-background {
    background: #7e4100;
}

.winter-background {
    background: #4b36ff;
}

.genre-4-20-spot {
    width: 78%;
    margin-right: auto;
}

.genre-4-20-spot-name {
    width: 100%;
    text-align: center;
}

.genre-4-20-spot-link {
    display: inline-block;
    text-align: left;
    color: #333;
    font-weight: bold;
    font-size: 20px;
}

.genre-4-20-spot-link:hover {
    opacity: 0.7;
}

.address {
    color: #7777;
    font-size: 14px;
    text-align: center;
}

.ratio {
    border-radius: 8px;
    border: solid 1px #a58432;
    color: #a58432;
    font-size: 11px;
    display: flex;
    justify-content: center;
    margin: 10px auto 0;
    width: 72%;
    padding: 2px 5px;
}

.ratio-number {
    font-size: 15px;
    font-weight: bold;
    margin-left: 8px;
}

.ratio-number img {
    width: 10px;
}


/* 時間別 */
.morning-color {
    color:#74aeaf;
}

.noon-color {
    color: #ffc25c;
}

.night-color {
    color: #817692;
}

.midnight-color {
    color: #5b5e66;
}

.night .rank-block {
    margin-top: 50px;
}

.morning-background {
    background:#74aeaf;
}

.noon-background {
    background: #ffc25c;
}

.night-background {
    background: #817692;
}

.midnight-background {
    background: #5b5e66;
}

.morning .genre-img-flame {
    background-image: url(../img/pc/time/pc-bg-time-morning.png);
}

.noon .genre-img-flame {
    background-image: url(../img/pc/time/pc-bg-time-noon.png);
}

.night .genre-img-flame {
    background-image: url(../img/pc/time/pc-bg-time-night.png);
}

.midnight .genre-img-flame {
    background-image: url(../img/pc/time/pc-bg-time-midnight.png);
}

.morning .genre-img {
    position: absolute;
    top: 19%;
    left: 25%;
    width: 68%;
}

.night .genre-info-flame {
    margin: 0% 20px 0;
}

.noon .genre-img {
    position: absolute;
    top: 21%;
    left: 6%;
    width: 68%;
    height: 190px;
}

.night .genre-img {
    position: absolute;
    top: 4%;
    left: 26%;
    width: 68%;
    height: 190px;
}

.midnight .genre-img {
    position: absolute;
    top: 22%;
    left: 2%;
    width: 68%;
    height: 190px;
}

.morning-4-20 li:nth-child(4n+1) {
    background-image: url(../img/pc/season/pc-icon-time-4-20-morning-1.png);
    background-repeat: no-repeat;
    background-position: right 100%;
    background-size: 20%;
}

.morning-4-20 li:nth-child(4n+3) {
    background-image: url(../img/pc/season/pc-icon-time-4-20-morning-2.png);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 20%;
}

.noon-4-20 li:nth-child(4n+2) {
    background-image: url(../img/pc/season/pc-icon-time-4-20-noon-1.png);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 20%;
}

.noon-4-20 li:nth-child(4n+4) {
    background-image: url(../img/pc/season/pc-icon-time-4-20-noon-2.png);
    background-repeat: no-repeat;
    background-position: right 100%;
    background-size: 20%;
}

.night-4-20 li:nth-child(4n+1) {
    background-image: url(../img/pc/season/pc-icon-time-4-20-night-1.png);
    background-repeat: no-repeat;
    background-position: right 100%;
    background-size: 20%;
}

.night-4-20 li:nth-child(4n+3) {
    background-image: url(../img/pc/season/pc-icon-time-4-20-night-2.png);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 20%;
}

.midnight-4-20 li:nth-child(4n+2) {
    background-image: url(../img/pc/season/pc-icon-time-4-20-midnight-1.png);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 20%;
}

.midnight-4-20 li:nth-child(4n+4) {
    background-image: url(../img/pc/season/pc-icon-time-4-20-midnight-2.png);
    background-repeat: no-repeat;
    background-position: right 100%;
    background-size: 20%;
}


.index-last-year-frame-time {
    margin: auto 20px auto 0;
}

.index-last-year-frame-time img {
    width: 16px;    
}

.genre-bg-icon-morning {
    position: absolute;
    top: 4%;
    right: 5%;
    width: 9%;
}

.genre-bg-icon-noon {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 9%;
}

.genre-bg-icon-night {
    position: absolute;
    top: -7%;
    right: 2%;
    width: 9%;
}

.genre-bg-icon-midnight {
    position: absolute;
    top: 16%;
    left: 0;
    width: 9%;
}

.index-4-20-last-year-frame-time {
    margin: 5px 0;
}

.index-4-20-last-year-frame-time img{
    width: 16px;
}






.current0 {
	background-image: url(../img/button-spring.png);
}

.current1 {
	background-image: url(../img/button-summer.png);
}

.current2 {
	background-image: url(../img/button-autumn.png);
}

.current3 {
	background-image: url(../img/button-winter.png);
}

.current-btm0 {
	background-color: #eb9cba;
}

.current-btm1 {
	background-color: #9dd0e1;
}

.current-btm2 {
	background-color: #ad9486;
}

.current-btm3 {
	background-color: #8596bc;
}

.per-box-1 {
    position: relative;
    display: inline-block;
    margin: 20px 0 0 auto;
}

.per-box-2-3 {
    position: relative;
    display: inline-block;
    margin-top: 25px;
    vertical-align: top;
}

.per-num-1 {
    position: absolute;
    top: 25px;
    left: 40px;
    font-size: 27.5px;
    font-weight: bold;
    color: #a58432;
}

.per-num-2-3 {
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 27.5px;
    font-weight: bold;
    color: #a58432;
}

.spring-other-box {
    width: 230px;
}

.per-box-4-20 {
    position: relative;
    display: inline-block;
    margin-top: -10px;
}

.per-num-4-20 {
    position: absolute;
    top: 27px;
    right: 22px;
    font-size: 20px;
    font-weight: bold;
    color: #a58432;
}


.pick-up-border-color-spring {
    border: 1px solid #eb9cba;
}

.pick-up-border-color-summer {
    border: 1px solid #9dd0e1;
}

.pick-up-border-color-autumn {
    border: 1px solid #ad9486;
}

.pick-up-border-color-winter {
    border: 1px solid #8596bc;
}

#season-top-img {
    margin-top: 100px;
    padding: 20px;
}

#nagisa-text {
    margin-top: 10px;
}

/*
sp用
*/
@media screen and (max-width: 1280px) {
    .sp-current-color0 {
        background-color: #eb9cba;
    }

    .sp-current-color1 {
        background-color: #9dd0e1;
    }

    .sp-current-color2 {
        background-color: #ad9486;
    }

    .sp-current-color3 {
        background-color: #8596bc;
    }

    .current-w {
        color: #ffffff;
        border: 0;
    }

    .for-per-frame {
        display: flex;
        width: 80%;
        margin: auto;
        padding: 0 10px;
        text-align: left;
        justify-content: center;
    }

    .for-per-frame-other {
        display: flex;
        text-align: left;
    }

    .for-per-box-other {
        width: 150px;
    }

    .per-box-1 {
        margin: 0;
    }

    .per-num-1-3 {
		position: absolute;
		top: 17px;
		right: 25px;
		font-size: 15px;
		color: #a58432;
    }

    .per-num-4-20 {
		top: 17px;
		right: 14px;
		font-size: 12px;
	}

    .for-per-box {
        width: 200px;
    }
}