/* --------------------------------------------------------------------
	���ʐݒ�
-------------------------------------------------------------------- */

#ranking { margin: 0px 0px 0px 0px; padding: 0 10px 0 10px; float: right; }
#ranking a { opacity: 1; display: block; }
.mainframe_ { width: 960px; overflow: hidden; margin: 0 auto 120px auto; }
div.leftmenuframe_ { width: 190px; float: left; display: inline; }
footer { max-width: 100%; }
#footer #go_pagetop { width: 60px; height: 60px; bottom: 190px; position: fixed; right: 10px; z-index: 9999; }

/* --------------------------------------------------------------------
	�e�L�X�g
-------------------------------------------------------------------- */

.announcement { font-size: 0.7em; margin-bottom: 20px; color: #242322; letter-spacing: 0.2em; line-height: 1.5em; }

/* --------------------------------------------------------------------
	h�^�O
-------------------------------------------------------------------- */

#ranking h1 { text-align: center; font-size: 1.9em; letter-spacing: 0.1em; margin: 40px 0px 60px 0px; background-color: #ffffff; color: #242322; font-weight: 500; font-style: normal; font-family: "Reddit Sans", sans-serif; padding: 0px 0 0px 0; }
h1 p{font-size:12px;}
.top_h2 { text-align: center; font-size: 1.9em; letter-spacing: 0.1em; margin: 0 0px 15px 0px; background-color: #ffffff; color: #242322; font-weight: 500; font-style: normal; font-family: "Reddit Sans", sans-serif; padding: 0px 0 0px 0; }

/* --------------------------------------------------------------------
	�O���[�o���i�r
-------------------------------------------------------------------- */

.sp_navigation { display: flex; margin: 25px 0 5px 0; }
.sp_navigation li { flex: 1; text-align: center; background-color: #f7f7f7; margin-right: 1%; }
.sp_navigation li:last-of-type { margin-right: 0%; }
.sp_navigation li a { color: #242322; display: block; padding: 17.15px 0 17.15px 0; font-size: 12px; font-style: normal; font-family: "Reddit Sans", sans-serif; }

/* --------------------------------------------------------------------
	�����L���O
-------------------------------------------------------------------- */

.ranking-list { display: flex; flex-wrap: wrap; row-gap: 20px; column-gap: 5px; }
.ranking-list li { width: calc(100% / 3 - 3.33px); }
.thumbnail { margin-bottom: 8px; }
.item-name { color: #242322; font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; margin-bottom: 5px; }
.price { color: #d90000; font-size: 1em; text-align: left; margin-bottom: 0px; font-weight: bold; }

/*�i���o�����O*/
.rank li { counter-increment: rank; position: relative; overflow: hidden; }
.rank li:first-of-type:before { content: ""; display: block; width: 100%; height: 2.4rem; transform: rotate(-45deg); position: absolute; left: -50%; top: 0; background: linear-gradient(90deg, #b3913e 0%, #fff0bf 40%, #8f7941 100%); background-repeat: no-repeat; }
.rank li:nth-child(2):before { content: ""; display: block; width: 100%; height: 2.4rem; transform: rotate(-45deg); position: absolute; left: -50%; top: 0; background: linear-gradient(90deg, #ffffff 0%, #f7f7f7 40%, #7d8287 100%); background-repeat: no-repeat; }
.rank li:nth-child(3):before { content: ""; display: block; width: 100%; height: 2.4rem; transform: rotate(-45deg); position: absolute; left: -50%; top: 0; background: linear-gradient(90deg, #ffffff 0%, #ebd3c3 40%, #593f2e 100%); background-repeat: no-repeat; }
.rank li:before { content: ""; display: block; width: 100%; height: 2.4rem; transform: rotate(-45deg); position: absolute; left: -50%; top: 0; background: linear-gradient(90deg, #8b4040 0%, #ff5f5f 74%, #ad0000 100%); background-repeat: no-repeat; }
.rank li:after { content: counter(rank); color: white; font-size: 1rem; font-weight: 700; line-height: initial; text-align: center; width: 1.5em; position: absolute; left: 0.1em; top: 0.1em; }

/* --------------------------------------------------------------------
	�J�e�S���[
-------------------------------------------------------------------- */

#ranking_category { margin-bottom: 40px; }
.category-list { width: 100%; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px; }
.category-list li { width: calc(100%/4 - 3.75px); background-color: #f7f7f7; text-align: center; }
.category-list li a { color: #2f2f2f; display: block; padding: 30px 0px 30px 0px; font-size: 0.8em; font-style: normal; font-family: "Reddit Sans", sans-serif; }
.category-list li a:hover { color: #fff; background-color: #242322; }

/* --------------------------------------------------------------------
	TOP�y�[�W����
-------------------------------------------------------------------- */

#top_return { margin: 0 10px 40px 10px; }
#top_return a { color: #242322; font-style: normal; font-family: "Reddit Sans", sans-serif; font-size: 0.8em; border: 1px solid #ededed; padding: 14px 0 14px 0; border-radius: 2em; box-sizing: border-box; letter-spacing: 0.05em; }
#top_return a:hover { color: #fff; background-color: #242322; }

/* --------------------------------------------------------------------
	�X�N���[�����j���[
-------------------------------------------------------------------- */

.scroll-menu { text-decoration: none; position: fixed; bottom: 0px; right: 0px; transition: 0.2s; opacity: 0; z-index:-1; width: 100%; padding-top: 5px; padding-bottom: 5px; background-color: #fff; }
.scroll-list { width: 100%; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px; }
.scroll-list li { width: calc(100%/4 - 3.75px); background-color: #242322; text-align: center; }
.scroll-list li a { color: #fff; display: block; padding: 15px 0px 15px 0px; font-size: 12px; font-style: normal; font-family: "Reddit Sans", sans-serif; }



@media screen and (max-width: 599px) {

/* --------------------------------------------------------------------
	���ʐݒ�
-------------------------------------------------------------------- */

#ranking { margin: 0px 10px 0px 10px; }
#ranking a { opacity: 1; display: block; }

/* --------------------------------------------------------------------
	�e�L�X�g
-------------------------------------------------------------------- */

.announcement { font-size: 0.7em; margin-bottom: 20px; color: #242322; letter-spacing: 0.2em; line-height: 1.5em; }

/* --------------------------------------------------------------------
	h�^�O
-------------------------------------------------------------------- */

#ranking h1 { text-align: center; font-size: 1.7em; letter-spacing: 0.1em; margin: 40px 0px 40px 0px; background-color: #ffffff; color: #242322; font-weight: 500; font-style: normal; font-family: "Reddit Sans", sans-serif; padding: 0px 0 0px 0; }
.top_h2 { text-align: center; font-size: 1.7em; letter-spacing: 0.1em; margin: 0 0px 10px 0px; background-color: #ffffff; color: #242322; font-weight: 500; font-style: normal; font-family: "Reddit Sans", sans-serif; padding: 0px 0 0px 0; }

/* --------------------------------------------------------------------
	SP�O���[�o���i�r
-------------------------------------------------------------------- */

.sp_navigation { display: flex; margin: 25px 0 5px 0; }
.sp_navigation li { flex: 1; text-align: center; background-color: #f7f7f7; margin-right: 1%; }
.sp_navigation li:last-of-type { margin-right: 0%; }
.sp_navigation li a { color: #242322; display: block; padding: 17.15px 0 17.15px 0; font-size: 12px; font-style: normal; font-family: "Reddit Sans", sans-serif; }

/* --------------------------------------------------------------------
	�����L���O
-------------------------------------------------------------------- */

.ranking-list { display: flex; flex-wrap: wrap; row-gap: 15px; column-gap: 5px; }
.ranking-list li { width: calc(100% / 2 - 2.5px); }
.thumbnail { margin-bottom: 5px; }
.item-name { color: #242322; font-size: 0.8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; margin-bottom: 2.5px; }
.price { color: #d90000; font-size: 1em; text-align: left; margin-bottom: 0px; font-weight: bold; }

/*�i���o�����O*/
.rank li { counter-increment: rank; position: relative; overflow: hidden; }
.rank li:first-of-type:before { content: ""; display: block; width: 100%; height: 2rem; transform: rotate(-45deg); position: absolute; left: -50%; top: 0; background: linear-gradient(90deg, #b3913e 0%, #fff0bf 40%, #8f7941 100%); background-repeat: no-repeat; }
.rank li:nth-child(2):before { content: ""; display: block; width: 100%; height: 2rem; transform: rotate(-45deg); position: absolute; left: -50%; top: 0; background: linear-gradient(90deg, #ffffff 0%, #f7f7f7 40%, #7d8287 100%); background-repeat: no-repeat; }
.rank li:nth-child(3):before { content: ""; display: block; width: 100%; height: 2rem; transform: rotate(-45deg); position: absolute; left: -50%; top: 0; background: linear-gradient(90deg, #ffffff 0%, #ebd3c3 40%, #593f2e 100%); background-repeat: no-repeat; }
.rank li:before { content: ""; display: block; width: 100%; height: 2rem; transform: rotate(-45deg); position: absolute; left: -50%; top: 0; background: linear-gradient(90deg, #8b4040 0%, #ff5f5f 74%, #ad0000 100%); background-repeat: no-repeat; }
.rank li:after { content: counter(rank); color: white; font-size: .8rem; font-weight: 700; line-height: initial; text-align: center; width: 1.5em; position: absolute; left: 0.1em; top: 0.1em; }

/* --------------------------------------------------------------------
	�J�e�S���[
-------------------------------------------------------------------- */

#ranking_category { margin-bottom: 30px; }
.category-list { width: 100%; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px; }
.category-list li { width: calc(100%/4 - 3.75px); background-color: #f7f7f7; text-align: center; }
.category-list li a { color: #2f2f2f; display: block; padding: 30px 0px 30px 0px; font-size: 12px; font-style: normal; font-family: "Reddit Sans", sans-serif; }
.category-list li a:hover { color: #fff; background-color: #242322; }

/* --------------------------------------------------------------------
	TOP�y�[�W����
-------------------------------------------------------------------- */

#top_return { margin: 0 10px 40px 10px; }
#top_return a { color: #242322; font-style: normal; font-family: "Reddit Sans", sans-serif; font-size: 0.8em; border: 1px solid #ededed; padding: 13px 0 13px 0; border-radius: 2em; box-sizing: border-box; letter-spacing: 0.05em; }
#top_return a:hover { color: #fff; background-color: #242322; }

/* --------------------------------------------------------------------
	�X�N���[�����j���[
-------------------------------------------------------------------- */

.scroll-menu { text-decoration: none; position: fixed; bottom: 0px; right: 0px; transition: 0.2s; opacity: 0; z-index:-1; width: 100%; padding-top: 5px; padding-bottom: 5px; background-color: #fff; }
.scroll-list { width: 100%; display: flex; flex-wrap: wrap; row-gap: 5px; column-gap: 5px; }
.scroll-list li { width: calc(100%/4 - 3.75px); background-color: #242322; text-align: center; }
.scroll-list li a { color: #fff; display: block; padding: 15px 0px 15px 0px; font-size: 12px; font-style: normal; font-family: "Reddit Sans", sans-serif; }


}