@charset "utf-8";
/*--------------------------------------
	copyright : yuyu design.
--------------------------------------*/

@import url(reset.css);
@import url(common.css);
@import url(../libs/aos/aos.css);
/* @import url(../libs/fontawesome/css/all.min.css); */
/* @import url(../libs/OwlCarousel/assets/owl.carousel.min.css); @import url(../libs/OwlCarousel/assets/owl.theme.default.min.css); */
/* @import url(../libs/lightGallery/css/lightgallery.min.css); */
/* @import url(../libs/Remodal/remodal.css); @import url(../libs/Remodal/remodal-default-theme.css); */


/*
ranking
==============================*/

/* rankingTop3 ----------*/
#rankingTop3 { padding-bottom: 16rem; }
#rankingTop3 .inner { position: relative; max-width: 186rem; }
#rankingMain { position: relative; min-width: 0; padding-top: 8rem; padding-left: 18rem; }
#mainAreaHeader::after { background: linear-gradient(90deg, #FFD1E0 90%, #F69 100%); height: 76rem; }
#mainArea { padding-top: 0 !important; }
#rankingTop3 .art__rank { text-align: center; }
#rankingTop3 .articles.-default { grid-template-columns: repeat(3, 1fr); }
#mainArea .articles.-default .art__pw .rank_num { position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 100%; background-color: #FFF; color: #000; font-size: 1.5rem; font-weight: bold; line-height: 1; border: solid 1px #000; }
@media screen and (max-width:1024px) { /* l */
	#rankingTop3 .articles.-default { grid-template-columns: repeat(1, 1fr); }
}
@media screen and (max-width:480px) { /* s */
	#rankingTop3 .articles.-default { margin-left: -8rem; }
	#rankingMain { padding-top: 6rem; padding-left: 8rem; }
	#mainAreaHeader::after { height: 150rem; }
}

/* ranking: date/like を画像に重ねず、TOP #mv の art__tw と同じ並び（タイトル下の横1行）にする */
.-default .art__date,
.-default .art__like { position: static; top: auto; left: auto; right: auto; }
.-default .art__rpt { padding-bottom: 0; border-bottom: none; }
.-default .art__iw { display: flex; padding-top: 1rem; gap: 2rem; align-items: center; border-top: solid 1px rgba(0,0,0,0.1); }
.-default .art__like { margin-left: auto; }
@media screen and (max-width:480px) {
	.-default .art__iw { display: grid; grid-template-areas: "a b" "c c"; gap: 1rem; align-items: center; border-top: solid 1px rgba(0,0,0,0.1); }
	.-default .art__date { grid-area: a; }
	.-default .art__rpt { grid-area: c; }
	.-default .art__like { grid-area: b; margin-left: 0; }
}