@charset "shift_jis";

#sec_ranking{width:100%;}

.ranking{ margin: 0 auto; padding: 20px 0 100px; text-align: center;}
.ranking .common_tit{ margin-bottom: 30px;}
.ranking .common_tit span{ right: -78px; bottom: 12px;}

.ranking .content_inner{ box-sizing: border-box; border: 1px solid #000; background: rgba(0,0,0,0.6); padding: 20px 0;}
.ranking_wrap{ box-sizing: border-box; margin: 0 auto 20px; position: relative;}

.ranking_tit{ box-sizing: border-box; width: 100%; height: 170px; background: url(../img/page_parts/tit_bg_02.png) no-repeat center center; padding-top: 30px; top: 0; left: 20px; z-index: 2;}
.ranking_tit h3{ height: 101px; font-size: 26px; font-weight: bold; color: #c79d6e;  line-height: 1.4; padding: 55px; text-align: center;}.rank_wrap1 .sub_img li
.ranking_tit h3 span{ display: block; font-size: 13px; color: #000; font-weight: normal; text-shadow: none; letter-spacing: 0.3em;}
.ranking_tit .term_wrap{ box-sizing: border-box; width: 450px; height: 45px; margin: 0 auto; background: #000; }
.ranking_tit .term_wrap .term{ width: 190px; height: 45px; line-height: 45px; text-align: center; color: #fff; font-size: 18px;}
.ranking_tit .term_wrap .btn_rsv{ width: 260px; height: 45px;}
.ranking_tit .term_wrap .btn_rsv a{ display: block; height: 45px; line-height: 45px; font-size: 22px; background: linear-gradient(#9E005D, #760046);color: #c79d6e; text-shadow: 1px 1px 5px rgba(0,0,0,0.6);}
.ranking_tit .term_wrap .btn_rsv a i{ padding-right: 4px;}
.ranking_tit .term_wrap .btn_rsv a:hover{ text-decoration: none; background: #c79d6e; color: #000;}


.rank_wrap1{ height: 500px; position: relative; background: url(../img/page_parts/no01_bg.png) no-repeat; background-position: 510px 0; margin-bottom: 20px;}


.rank_wrap1 .name_wrap{ width: 302px; height: 70px; position: absolute; left: 626px; top: 170px;}
.rank_wrap1 .name_wrap .name{ height: 40px; line-height: 40px; text-align: center; border: 1px solid #c79d6e;}
.rank_wrap1 .name_wrap .name a{ color: #fff; font-size: 16px;}
.rank_wrap1 .name_wrap .btn_prof{ text-align: right; padding-top: 6px;}
.rank_wrap1 .name_wrap .btn_prof a{ color: #c79d6e; font-weight: bold; letter-spacing: 0.3em;}
.rank_wrap1 .name_wrap .btn_prof a i{ padding-right: 2px;}


.rank_wrap1 .main_img{ width: 330px; height: 440px; position: absolute; right: 20px; top: 20px; background: #fff;}
.rank_wrap1 .main_img img{ width: 100%;}
.rank_wrap1 .sub_img{ box-sizing: border-box; width: 940px; height: 240px; background: #1e1e1e; position: absolute; left: 20px; top: 260px; padding: 20px 0 0 20px;}
.rank_wrap1 .sub_img ul{ display: flex; flex-wrap: wrap; justify-content: center;}
.rank_wrap1 .sub_img li{ width: 150px; height: 200px; overflow: hidden;}
.rank_wrap1 .sub_img li img{ width: 100%;}


------------------------------------------------------------ */
.rank_wrap2{ margin: 0 auto 20px;}
.rank_wrap2 .rank_list1{ display: flex; flex-wrap: wrap; justify-content: left; margin: 0 20px;}
.rank_wrap2 .rank_list1 li{ width: 18%; padding: 55px 0 0 0; position: relative; margin: 0 0.6%;/*’ljÁ*/}
.rank_wrap2 .rank_list1 li .rank_num{ width: 100%; /*height: 60px;*/  position: absolute; top: 22px; /*left: 35px;*/ font-size: 60px; font-weight: bold; /*text-align: center;*/}

.rank_num img {width:100%;}

.rank_wrap2 .rank_list1 li:nth-child(1) .rank_num span{ display: block; text-align: center; color: rgba(0, 0, 0, 0); background: linear-gradient(#e9e9e9, #666666); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.rank_wrap2 .rank_list1 li:nth-child(2) .rank_num span{ display: block; text-align: center; color: rgba(0, 0, 0, 0); background: linear-gradient(#FFB6B1, #8E6764); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.rank_wrap2 .rank_list1 li:nth-child(3) .rank_num span{ display: block; text-align: center; color: rgba(0, 0, 0, 0); background: linear-gradient(#B5205C, #79183F); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.rank_wrap2 .rank_list1 li:nth-child(4) .rank_num span{ display: block; text-align: center; color: rgba(0, 0, 0, 0); background: linear-gradient(#9445A8, #451450); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}

.rank_wrap2 .rank_list1 li .img_box{ box-sizing: border-box; border: 1px solid; padding: 35px 0 10px;}

.rank_wrap2 .rank_list1 li:nth-child(1) .img_box{ border-color: #4a4a4a;}
.rank_wrap2 .rank_list1 li:nth-child(2) .img_box{ border-color: #533836;}
.rank_wrap2 .rank_list1 li:nth-child(3) .img_box{ border-color: #6A002B;}
.rank_wrap2 .rank_list1 li:nth-child(4) .img_box{ border-color: #692B79;}

.rank_wrap2 .rank_list1 li .img_box figure{ display: block; margin: 0 auto 10px;}
.rank_wrap2 .rank_list1 li .img_box figure img{ width: 100%;}

.rank_wrap2 .rank_list1 li .name_wrap{ width: 90%; margin: 0 auto;}
.rank_wrap2 .rank_list1 li .name_wrap .name{ height: 35px; line-height: 35px; text-align: center; border: 1px solid;}

.rank_wrap2 .rank_list1 li:nth-child(1) .name_wrap .name{ border-color: #4a4a4a;}
.rank_wrap2 .rank_list1 li:nth-child(2) .name_wrap .name{ border-color: #533836;}
.rank_wrap2 .rank_list1 li:nth-child(3) .name_wrap .name{ border-color: #6A002B;}
.rank_wrap2 .rank_list1 li:nth-child(4) .name_wrap .name{ border-color: #692B79;}

.rank_wrap2 .rank_list1 li .name_wrap .name a{ color: #fff; font-size: 16px;}
.rank_wrap2 .rank_list1 li .name_wrap .btn_prof{ text-align: right; padding-top: 6px;}
.rank_wrap2 .rank_list1 li .name_wrap .btn_prof a{ font-weight: bold; letter-spacing: 0.3em;}

.rank_wrap2 .rank_list1 li:nth-child(1) .name_wrap .btn_prof a{ color: #6c6c6c;}
.rank_wrap2 .rank_list1 li:nth-child(2) .name_wrap .btn_prof a{ color: #7A5350;}
.rank_wrap2 .rank_list1 li:nth-child(3) .name_wrap .btn_prof a{ color: #8D023A;}
.rank_wrap2 .rank_list1 li:nth-child(4) .name_wrap .btn_prof a{ color: #712F82;}

.rank_wrap2 .rank_list1 li .name_wrap .btn_prof a i{ padding-right: 2px;}


.rank_wrap2{ margin: 0 auto 20px; padding-bottom: 20px;}
.rank_wrap2 .rank_list2{ display: flex; flex-wrap: wrap; justify-content: left; margin: 0 20px; padding-top: 50px;}
.rank_wrap2 .rank_list2 li{ width: 245px; padding: 55px 0 0 0; position: relative; margin: 0 0.6%;/*’ljÁ*/}
.rank_wrap2 .rank_list2 li .rank_num{ width: 175px; /*height: 48px; background: #1e1e1e; line-height: 48px;*/ position: absolute; top: 35px; left: 35px; font-size: 48px; font-weight: bold;}
.rank_wrap2 .rank_list2 li .rank_num span{ display: block; text-align: center; color: rgba(0, 0, 0, 0); background: linear-gradient(#44B473, #2B7048); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.rank_wrap2 .rank_list2 li .img_box{ box-sizing: border-box; border: 1px solid #275238; padding: 35px 0 10px;}
.rank_wrap2 .rank_list2 li .img_box figure{ display: block; margin: 0 auto 10px;}
.rank_wrap2 .rank_list2 li .img_box figure img{ width: 100%;}

.rank_wrap2 .rank_list2 li .name_wrap{ width: 225px; margin: 0 auto;}
.rank_wrap2 .rank_list2 li .name_wrap .name{ height: 35px; line-height: 35px; text-align: center; border: 1px solid #275238;}
.rank_wrap2 .rank_list2 li .name_wrap .name a{ color: #fff; font-size: 16px;}
.rank_wrap2 .rank_list2 li .name_wrap .btn_prof{ text-align: right; padding-top: 6px;}
.rank_wrap2 .rank_list2 li .name_wrap .btn_prof a{ color: #3A9961; font-weight: bold; letter-spacing: 0.3em;}
.rank_wrap2 .rank_list2 li .name_wrap .btn_prof a i{ padding-right: 2px;}

.no_eligible_name{ color: rgba(255,255,255,1);}
.no_eligible_link{ color: rgba(255,255,255,0.2); letter-spacing: 0.3em;}