@charset "utf-8";
/* CSS Document */
/****************************************************************************/
/**								アクセスランキング								*/
/****************************************************************************/


/* ----------------------------------------------------
		アクセスランキング
---------------------------------------------------- */
#ranking_wrap {
	padding: 7% 0 7%;
}
#ranking_wrap .inner {
    padding-block: 3em;
}
#ranking_wrap .ranking_area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2em 1em;
    transition: opacity .3s ease;
}
@media (width <= 750px) {
    #ranking_wrap .ranking_area {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (width <= 500px) {
    #ranking_wrap .ranking_area {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}
#ranking_wrap .ranking_area .box {
    background-color: #f8f5f0;
}
#ranking_wrap .ranking_area a {
    position: relative;
    display: flex;
    gap: 1em;
    height: 100%;
    padding: 1em;
}
@media (width <= 750px) {
    #ranking_wrap .ranking_area a {
        flex-direction: column;
        gap: .5em;
    }
    :where(._feature) #ranking_wrap .ranking_area a {
        gap: 1em;
    }
}
#ranking_wrap .ranking_area a::after {
    position: absolute;
    content: '';
    inset: 0;
    width: min(3em, 42px);
    height: auto;
    aspect-ratio: 1;
    background: no-repeat center / contain;
}
#ranking_wrap .ranking_area :where(#rank01,#rank02,#rank03) a::after {
    width: min(3.5em, 50px);
    height: auto;
    aspect-ratio: 58 / 75;
}
.access_ranking #rank01 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank01.png");
}
.access_ranking #rank02 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank02.png");
}
.access_ranking #rank03 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank03.png");
}
.access_ranking #rank04 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank04.png");
}
.access_ranking #rank05 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank05.png");
}
.access_ranking #rank06 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank06.png");
}
.access_ranking #rank07 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank07.png");
}
.access_ranking #rank08 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank08.png");
}
.access_ranking #rank09 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank09.png");
}
.access_ranking #rank010 a:after {
    background-image: url("/img/travel_kit/access_ranking/ico/rank10.png");
}
#ranking_wrap .ranking_area a .l_box {
    width: 45%;
    height: auto;
    place-content: center;
}
@media (width <= 750px) {
    #ranking_wrap .ranking_area a .l_box {
        width: 100%;
    }
}
#ranking_wrap .ranking_area a .l_box img {
    width: 100%;
    object-fit: cover;
}
:where(._rankings) #ranking_wrap .ranking_area a .l_box img {
    aspect-ratio: 4 / 3;
}
:where(._feature) #ranking_wrap .ranking_area a .l_box img {
    aspect-ratio: 1;
}
:where(._course) #ranking_wrap .ranking_area a .l_box img {
    aspect-ratio: 20 / 11;
}
#ranking_wrap .ranking_area a .r_box {
    flex: 1;
    place-content: center;
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: .03em;
    padding-block: 0 1em;
}
@media (width <= 750px) {
    #ranking_wrap .ranking_area a .r_box {
        place-content: start;
        font-size: 1.6rem;
    }
}
#ranking_wrap .ranking_area a .r_box span {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: .3em;
}
@media (width <= 750px) {
    #ranking_wrap .ranking_area a .r_box span {
        font-size: 1.2rem;
    }
}