@charset "UTF-8";
@import url("./common/reset.css");
@import url("./common/advanced.css");
@import url("./common/base.css");

/*------------------------------------------------------------
ランキング
-------------------------------------------------------------*/
.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; width: 1360px; margin: 0 auto 20px; background: #000; border: 1px solid #333; position: relative;}

/* タイトル
------------------------------------------------------------ */
.ranking_tit{ box-sizing: border-box; width: 490px; height: 240px; background: url(../images_design/ranking/tit_bg.png) no-repeat; padding-top: 74px; position: absolute; top: 0; left: 20px; z-index: 2;}
.ranking_tit h3{ height: 101px; font-size: 46px; font-weight: bold; color: #c79d6e; text-shadow: 1px 1px 5px rgba(0,0,0,0.6); line-height: 1.4;}
.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;}

/* 1位
------------------------------------------------------------ */
.rank_wrap1{ height: 500px; position: relative; background: url(../images_design/ranking/no01_bg.png) no-repeat; background-position: 510px 0; margin-bottom: 20px;}

/*名前*/
.rank_wrap1 .name_wrap{ width: 302px; height: 70px; position: absolute; left: 554px; 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: 360px; height: 480px; 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: left;}
.rank_wrap1 .sub_img li{ width: 150px; height: 200px;}
.rank_wrap1 .sub_img li img{ width: 100%;}

/* 2位～5位
------------------------------------------------------------ */
.rank_wrap2{ background: #1e1e1e; width: 1320px; margin: 0 auto 20px;}
.rank_wrap2 .rank_list1{ display: flex; flex-wrap: wrap; justify-content: left;}
.rank_wrap2 .rank_list1 li{ width: 305px; margin-left: 20px; padding: 55px 0 0 0; position: relative;}
.rank_wrap2 .rank_list1 li .rank_num{ width: 235px; height: 60px; background: #1e1e1e; line-height: 60px; position: absolute; top: 20px; left: 35px; font-size: 60px; font-weight: bold;}

.rank_wrap2 .rank_list1 li:nth-child(1) .rank_num span{ display: inline-block; 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: inline-block; 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: inline-block; 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: inline-block; 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; width: 255px; height: 340px; margin: 0 auto 10px; background: #fff;}
.rank_wrap2 .rank_list1 li .img_box figure img{ width: 100%;}

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

.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;}

/* 6位～10位
------------------------------------------------------------ */
.rank_wrap2{ background: #1e1e1e; width: 1320px; margin: 0 auto 20px; padding-bottom: 20px;}
.rank_wrap2 .rank_list2{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 20px;}
.rank_wrap2 .rank_list2 li{ width: 245px; padding: 55px 0 0 0; position: relative;}
.rank_wrap2 .rank_list2 li .rank_num{ width: 175px; height: 48px; background: #1e1e1e; line-height: 48px; position: absolute; top: 30px; left: 35px; font-size: 48px; font-weight: bold;}
.rank_wrap2 .rank_list2 li .rank_num span{ display: inline-block; 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; width: 225px; height: 300px; margin: 0 auto 10px; background: #fff;}
.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; background: #000;}
.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;}