@charset "utf-8";

@import url(form.css);

/* -----------------------------------------------------
 目次
■メイン Common
■ヘッダー
■ナビメニュー
■サイドコンテンツ
■タイトル
■リスト
	※カードリスト
	※タイトルだけのリスト
	※横長のリスト
	※募集中のランキングリスト
■その他パーツ
	※ソーシャルメディア
	※投票受付中
	※商品アフィリエイト
■トップ
■投票
■投票結果（途中結果）
■投票結果（集計結果）
■カテゴリーリスト
■カテゴリーアーカイブ
------------------------------------------------------ */

:root {
	--cate1-color: #75c177;
	--cate2-color: #f2718a;
	--cate3-color: #ef9d5a;
	--cate4-color: #9d8fbc;
	--cate5-color: #4ec1a7;
	--cate6-color: #488dbe;
}

/* メイン Common
------------------------------------------------------ */
@media screen and (max-width: 1023px) {
	#main {
		margin-bottom: 20px;
	}
}
@media screen and (max-width: 479px) {
	#main {
		font-size: 1.17rem; /* for Android */
	}
	#main.ios {
		font-size: 1.13rem;
	}
}

.content_header,
.nav_menu,
.nav-category {
	width: 1100px;
	margin: auto;
}
@media screen and (max-width: 1023px) {
	.content_header,
	.nav_menu,
	.nav-category {
		width: auto;
	}
}

.content_header {
	padding: 12px 0;
}
@media screen and (max-width: 1023px) {
	.content_header {
		margin: 0 10px;
	}
}

.content_header_title {
	font-size: 2.8rem;
}
@media screen and (max-width: 1023px) {
	.content_header_title {
		font-size: 2.4rem;
	}
}

.more_link {
	text-align: center;
}
.more_link a {
	display: block;
	padding: .7em 0;
	background-color: #333;
	color: #fff;
	border-radius: .2em;
	font-weight: bold;
	font-size: 1.3em;
	text-align: center;
}


/* 広告
------------------------------ */
.article_ad_center {
	text-align: center;
}
.article_ad_center > div {
	display: inline-block;
}
.article_ad_left,
.article_ad_right {
	display: inline-block;
	width: 50%;
	margin-right: -5px;
	vertical-align: top;
	text-align: center;
}
.article_ad_left > div,
.article_ad_right > div {
	display: inline-block;
}


/* ヘッダー
------------------------------------------------------ */
#header.ranking {
	text-align: left;
}
#header.ranking .header_inner {
	display: flex;
	align-items: flex-end;
	margin-left: 0;
	padding: 17px 0;
}
@media screen and (max-width: 1023px) {
	#header.ranking .header_inner {
		align-items: center;
		width: 200px; /* template.cssの上書き */
		height: 50px;
		margin: auto;
		padding: 0;
	}
}

#header.ranking .header_inner img {
	display: block;
}
#header.ranking .header_inner .ranking_logo {
	margin-bottom: 8px;
}
@media screen and (max-width: 1024px) {
	#header.ranking .header_inner .ranking_logo {
		margin-bottom: 0;
	}
}


/* サイトディスクリプション */
#header.ranking .header_inner .header_description {
	position: relative;
	margin-left: 20px;
	padding: 8px 15px;
	border: 1px solid #ddd;
	color: #888;
	font-size: 12px;
	border-radius: 4px;
}
@media screen and (max-width: 1023px) {
	#header.ranking .header_inner .header_description {
		display: none;
	}
}

#header.ranking .header_inner .header_description::after,
#header.ranking .header_inner .header_description::before {
	position: absolute;
	content: "";
	top: 50%;
	height: 0;
	width: 0;
	border: solid transparent;
}
#header.ranking .header_inner .header_description::before {
	left: -16px;
	margin-top: -8px;
	border-width: 8px;
	border-right-color: #ddd;
}
#header.ranking .header_inner .header_description::after {
	left: -12px;
	margin-top: -6px;
	border-width: 6px;
	border-right-color: #fff;
}

/* 開閉メニュー
------------------------------ */
#header.ranking .header-menu {
	position: absolute;
	top: 10px;
	right: 10px;
}

/* メニューボタン */
#header.ranking .header-menu .header-menu-btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 31px;
	border-radius: 2px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
@media screen and (min-width: 1024px) {
	#header.ranking .header-menu .header-menu-btn {
		display: none;
	}
}

#header.ranking .header-menu .h-menu-line {
	position: relative;
}
#header.ranking .header-menu .h-menu-line,
#header.ranking .header-menu .h-menu-line::before,
#header.ranking .header-menu .h-menu-line::after {
	display: block;
	width: 16px;
	height: 3px;
	background-color: #ef8080;
	border-radius: 2px;
}
#header.ranking .header-menu .h-menu-line::before,
#header.ranking .header-menu .h-menu-line::after {
	content: "";
	position: absolute;
}
#header.ranking .header-menu .h-menu-line::before {
	top: 7px;
}
#header.ranking .header-menu .h-menu-line::after {
	bottom: 7px;
}

/* ナビリスト */
#header.ranking .ranking_sp_nav {
	position: absolute;
	top: 51px;
	z-index: 100;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	background-color: #fff;
	line-height: 1.5;
	text-align: center;
	transition: max-height .3s ease 0s;
}
@media screen and (min-width: 1024px) {
	#header.ranking .ranking_sp_nav {
		position: relative;
		top: auto;
	}
}
#header.ranking .ranking_sp_nav.open {
	max-height: 460px;
	border-bottom: 1px solid #eee;
	
}
#header.ranking .ranking_sp_nav nav li {
	position: relative;
	border-bottom: 1px solid #eee;
	font-size: 0;
	text-align: left;
}
#header.ranking .ranking_sp_nav nav li::after {
	content: "";
	position: absolute;
	display: block;
	width: 6px;
	height: 6px;
	top: 50%;
	right: 10px;
	margin-top: -5px;
	border: 0 solid #c7c7cc;
	border-top-width: 2px;
	border-right-width: 2px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#header.ranking .ranking_sp_nav nav li a {
	display: block;
	padding: 10px 12px;
	font-size: 12px;
}
#header.ranking .ranking_sp_nav nav li a::before {
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	margin-right: .5em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	background-image: url("../images/common/nav_app_sp.png");
}

#header.ranking .ranking_sp_nav .top {
	margin-bottom: 30px;
	font-size: 12px;
	text-decoration: underline;
}

/* 閉じるボタン */
#header.ranking .ranking_sp_nav .menu_close {
	display: inline-block;
	margin: 16px auto;
	padding: 5px 12px;
	border: 1px solid #aaa;
	font-size: 12px;
	border-radius: 4px;
}
#header.ranking .ranking_sp_nav .menu_close::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -2px;
	width: 1.1em;
	height: 1.1em;
	margin-right: .3em;
	background: url(../images/icon_close.png) no-repeat;
	background-size: contain;
	vertical-align: middle;
}


/* ナビメニュー
------------------------------------------------------ */
.nav_menu {
	margin: 5px auto 0;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 14px;
}
@media screen and (max-width: 1023px) {
	.nav_menu {
		border-bottom: 1px solid #eee;
		font-size: 1.2rem;
	}
}

.nav_menu ul {
	display: flex;
	align-items: center;
}
.nav_menu li {
	text-align: center;
}
@media screen and (max-width: 1023px) {
	.nav_menu li {
		flex: 1;
	}
}

.nav_menu li a {
	display: block;
	padding: 5px 2em;
}
@media screen and (max-width: 1023px) {
	.nav_menu li a {
		padding: 5px 0;
	}
}

.nav_menu li a:hover {
		text-decoration: underline;
}
.nav_menu li:not(:last-child) a {
	border-right: 1px solid #ddd;
}

/* カテゴリー
------------------------------ */
.nav-category {
	margin-bottom: 10px;
}
@media screen and (max-width: 1023px) {
	.nav-category {
		margin-bottom: 1em;
		overflow: hidden;
	}
}

.nav-category ul {
	display: flex;
}
@media screen and (max-width: 1023px) {
	.nav-category ul {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
	.nav-category ul::-webkit-scrollbar {
		display: none;
	}
}


.nav-category li {
	flex: 1;
}
@media screen and (max-width: 1023px) {
	.nav-category li {
		flex: none;
		width: 24vw;
	}
}

.nav-category li a {
	display: block;
	margin-right: .3em;
	padding: .5em;
	border-bottom: 3px solid #999;
	text-align: center;
}
@media screen and (max-width: 1023px) {
	.nav-category li a {
		font-size: 1.1rem;
	}
}

.nav-category li:nth-child(1) a {
	border-color: var(--cate1-color);
}
.nav-category li:nth-child(2) a {
	border-color: var(--cate2-color);
}
.nav-category li:nth-child(3) a {
	border-color: var(--cate3-color);
}
.nav-category li:nth-child(4) a {
	border-color: var(--cate4-color);
}
.nav-category li:nth-child(5) a {
	border-color: var(--cate5-color);
}
.nav-category li:nth-child(6) a {
	border-color: var(--cate6-color);
}


/* サイドコンテンツ
------------------------------------------------------ */
@media screen and (max-width: 479px) {
	#side {
		font-size: 1.17rem; /* for Android */
	}
	#side.ios {
		font-size: 1.13rem;
	}
}

#side .ad {
	text-align: center;
}
.side_widget {
	margin-bottom: 25px;
}
/* ウィジェットタイトル */
.side_widget_title {
	margin: 1em 0 .5em;
	padding: .2em 0;
	color: #fff;
	font-weight: bold;
	font-size: 1.3em;
	text-align: center;
}
.side_widget.open_ranking_list_top .side_widget_title {
	background-color: #bb88ee;
}
.popular_widget .side_widget_title {
	background-color: #ffa904;
}
.cate_list_widget .side_widget_title {
	background-color: #d9d9d9;
	color: #404040;
}


/* 続きを見る */
.side_more_btn {
	margin: 12px auto;
}
@media screen and (max-width: 767px) {
	.side_more_btn {
		margin: 12px;
	}
}

.side_more_btn a {
	display: block;
	background: #f5f5f5;
	color: #45403c;
	font-size: 1.4rem;
	line-height: 50px;
	text-align: center;
	border-radius: 3px;
}


/* 募集中のランキング
------------------------------ */
.open_ranking_widget.open_ranking_list_top ul {
	margin: .5em 0 1em;
}
@media screen and (max-width: 1023px) {
	.open_ranking_widget.open_ranking_list_top ul {
		margin-right: 1em;
		margin-left: 1em;
	}
}


/* 人気記事
------------------------------ */
.popular_widget ul {
	counter-reset: ranking;
}
.popular_widget .item {
	counter-increment: ranking;
}
.popular_widget .item a {
	position: relative;
	display: flex;
	padding: 1em;
	border-bottom: 1px solid #ddd;
}
.popular_widget .item a::after {
	content: counter(ranking);
	display: inline-block;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: #ef8080;
	color: #fff;
	font-weight: bold;
	font-size: 10px;
	line-height: 20px;
	text-align: center;
}

.popular_widget .item .eyecatch {
	flex: none;
	width: 75px;
	height: 75px;
	margin-right: 1em;
}
.popular_widget .item .title {
	font-weight: bold;
	font-size: 1.1em;
}

/* カテゴリー一覧 */
.cate_list_widget .cate_list li {
	width: 50%;
}


/* バナー
------------------------------ */
#side .home_banner {
	margin-bottom: 18px;
}
#side .home_banner img {
	width: 100%;
}
#side .home_banner p {
	margin-bottom: 18px;
}
#side .home_banner p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 1023px) {
	#side .home_banner {
		margin: 0 10px 18px;
	}
	#side .home_banner p {
		margin-bottom: 10px;
	}
}


/* タイトル
------------------------------------------------------ */
.header-m {
	margin-bottom: .5em;
	font-weight: bold;
	font-size: 24px;
}
@media screen and (max-width: 1023px) {
	.header-m {
		margin: 1em .5em .5em;
		font-size: 1.3em;
	}
	.header-m.top {
		margin: 0;
		padding: .2em 0;
		background-color: #ef8080;
		color: #fff;
		text-align: center;
	}
	.header-m.top.open {
		margin-top: 1em;
		background-color: #bb88ee;
	}
	.ranking-popular .header-m {
		margin: 0;
		padding: .2em 0;
		background-color: #ffa904;
		color: #fff;
		text-align: center;
	}
}


/* ------------------------------------------------------
 = リスト
------------------------------------------------------ */
/* カードリスト
------------------------------ */
ul.list-card {
	display: flex;
	flex-flow: row wrap;
	margin: 0 -8px;
}
@media screen and (max-width: 1023px) {
	ul.list-card {
		margin: 1em;
		margin-top: .5em;
	}
}

.list-card .item {
	flex: none;
	width: 33.33%;
	margin-bottom: 1em;
}
@media screen and (max-width: 1023px) {
	.list-card .item {
		width: 100%;
		margin-bottom: 0;
	}
}

.list-card .item a {
	display: block;
	height: 100%;
	margin: 0 8px;
	padding-bottom: 13px;
	border-bottom: 1px solid #ddd;
	box-sizing: border-box;
}
@media screen and (max-width: 1023px) {
	.list-card .item a {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		height: auto;
		margin: 0;
		padding-top: .9em;
		padding-bottom: .9em;
		border-bottom: 1px solid #ddd;
	}
}

.list-card .item .eyecatch {
	height: 160px;
	margin-bottom: 1em;
}
@media screen and (max-width: 1023px) {
	.list-card .item .eyecatch {
		flex: none;
		order: 1;
		width: 40vw;
		height: 26.7vw;
		margin-bottom: 0;
	}
}

.list-card .item .eyecatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.list-card .item .detail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	min-width: 0;
	height: calc(100% - (160px + 1em)); /* 1em: eyecatch margin-bottom */
}
@media screen and (max-width: 1023px) {
	.list-card .item .detail {
		height: auto;
		margin-right: .8em;
	}
}

.list-card .item .title {
	margin-bottom: .8125em;
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 1.4;
}
@media screen and (max-width: 1023px) {
	.list-card .item .title {
		margin-bottom: 1em;
		font-size: 1.1em;
	}
}

.list-card .item .cate {
	display: inline-block;
	margin-top: auto;
	padding: .5em;
	background-color: #999;
	color: #fff;
	font-size: .929em;
	line-height: 1;
	border-radius: .2em;
}
@media screen and (max-width: 1023px) {
	.list-card .item .cate {
		margin-top: 0;
		font-size: .88em;
	}
}

.list-card .item .date {
	margin-top: .5em;
}
.list-card .item .date img {
	width: 1.1em;
	margin-right: .2em;
	vertical-align: middle;
}

.list-card .item .description {
	margin-bottom: .5em;
	color: #aaa;
	font-size: .8em;
}


/* 参加ボタン */
.list-card .card_bottom {
	display: flex;
	justify-content: flex-end;
}
.list-card .vote_btn {
	position: relative;
	display: inline-block;
	padding-right: 25px;
}
.list-card .vote_btn::after {
	position: absolute;
	top: 50%;
	right: 12px;
	display: block;
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -6px;
	border-top: 3px solid #ef8080;
	border-right: 3px solid #ef8080;
	transform: rotate(45deg);
}


/* 横長のリスト
------------------------------ */
ul.list-wide {
	--eyecatch-height-pc: 113px;
	--eyecatch-height-sp: 26.7vw;
	margin: 1em auto;
}
@media screen and (max-width: 1023px) {
	ul.list-wide {
		margin: 1em !important;
		margin-top: .5em !important;
	}
}

.ranking-category ul.list-wide,
.ranking-popular ul.list-wide{
	margin: 3em 1em;
}

.list-wide .item {
	margin-bottom: 1.2em;
}
@media screen and (max-width: 1023px) {
	.list-wide .item {
		margin-bottom: 0;
	}
}

.list-wide .item a {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 1em;
	padding-left: 1em;
	border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 1023px) {
	.list-wide .item a {
		align-items: center;
		padding-top: .9em;
		padding-bottom: .9em;
		padding-left: 0;
	}
}

.list-wide .eyecatch {
	flex: none;
	order: 1;
	width: 170px;
	height: var(--eyecatch-height-pc);
}
@media screen and (max-width: 1023px) {
	.list-wide .eyecatch {
		width: 40vw;
		height: var(--eyecatch-height-sp);
	}
}

.list-wide .eyecatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.list-wide .detail {
	flex: 1;
	min-width: 0;
	min-height: var(--eyecatch-height-pc);
	margin-right: 1em;
}
@media screen and (max-width: 1023px) {
	.list-wide .detail {
		min-height: var(--eyecatch-height-sp);
		margin-right: .8em;
	}
}

.list-wide .item .title {
	margin-bottom: 1em;
	font-weight: bold;
	font-size: 2rem;
	line-height: 1.4;
}
@media screen and (max-width: 1023px) {
	.list-wide .item .title {
		font-size: 1.1em;
	}
}

.list-wide .item .cate {
	display: inline-block;
	padding: .5em;
	background-color: #999;
	color: #fff;
	font-size: .929em;
	line-height: 1;
	border-radius: .2em;
}
@media screen and (max-width: 1023px) {
	.list-wide .item .cate {
		font-size: .88em;
	}
}

.list-wide .item .date {
	margin-top: .5em;
}
.list-wide .item .date img {
	width: 1.1em;
	margin-right: .2em;
	vertical-align: middle;
}

/* カテゴリ background-color */
.list-card .item .cate-1,
.list-wide .item .cate-1 {
	background-color: var(--cate1-color);
}
.list-card .item .cate-2,
.list-wide .item .cate-2 {
	background-color: var(--cate2-color);
}
.list-card .item .cate-3,
.list-wide .item .cate-3 {
	background-color: var(--cate3-color);
}
.list-card .item .cate-4,
.list-wide .item .cate-4 {
	background-color: var(--cate4-color);
}
.list-card .item .cate-5,
.list-wide .item .cate-5 {
	background-color: var(--cate5-color);
}
.list-card .item .cate-6,
.list-wide .item .cate-6 {
	background-color: var(--cate6-color);
}


/* 募集中のランキングリスト
------------------------------ */
.open_ranking_list {
	margin: 1em;
	margin-top: 2.5em;
	padding: 1em .5em;
	border: 1px solid #ddd;
}
.open_ranking_list .list_title {
	padding-bottom: .5em;
	border-bottom: 2px solid #ef8080;
	font-weight: bold;
	font-size: 1.3em;
	line-height: 1;
	text-align: center;
}
.open_ranking_list ul {
	margin-top: .5em;
	margin-bottom: .5em;
}
.open_ranking_list li {
	border-bottom: 1px solid #ddd;
}
.open_ranking_list li a {
	display: block;
	padding: 1em;
}
@media screen and (max-width: 1023px) {
	.open_ranking_list li a {
		padding: .7em;
	}
}


/* その他パーツ
------------------------------------------------------ */
/* ソーシャルメディア
------------------------------ */
.socialmedia_widget {
	display: flex;
	justify-content: space-between;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
@media screen and (max-width: 1023px) {
	.socialmedia_widget {
		padding: 0 35px;
	}
}

.socialmedia_widget .item {
	width: calc(100% / 4 - .5em);
	background-color: #999;
	border-radius: 4px;
}
@media screen and (max-width: 1023px) {
	.socialmedia_widget .item {
		width: 23%;
	}
}

.socialmedia_widget .item.hatena { background-color: #00a4de; }
.socialmedia_widget .item.facebook { background-color: #4172b8; }
.socialmedia_widget .item.twitter { background-color: #000; }
.socialmedia_widget .item.pocket { background-color: #ef3f56; }
.socialmedia_widget .item.line { background-color: #00c300; }
.socialmedia_widget .item a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
}
@media screen and (max-width: 1023px) {
	.socialmedia_widget .item a {
		height: 35px;
	}
}

.socialmedia_widget .item img {
	width: 23px;
}


/* 投票受付中
------------------------------ */
.recommend_vote {
	margin: 1em auto;
	font-size: 1.6rem;
}
@media screen and (max-width: 1023px) {
	.recommend_vote {
		font-size: 1.4rem;
	}
	.recommend_vote.top {
		margin-right: 10px;
		margin-left: 10px;
	}
}

.recommend_vote_header {
	margin: 0;
	padding: .2em .5em;
	background-color: #bb88ee;
	color: #fff;
	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
}
@media screen and (max-width: 1023px) {
	.recommend_vote_header {
		font-size: 1.3em;
	}
}

.recommend_vote ul {
	border: 1px solid #bb88ee;
	border-top: none;
}
.recommend_vote .item a {
	display: block;
	padding: .9em .5em;
	border-bottom: 1px solid #ddd;
}
.recommend_vote .item .title {
	font-weight: bold;
	font-size: 1.1em;
}


/* 商品アフィリエイト
------------------------------ */
.affi_card {
	padding: 20px 14px 16px 14px;
	margin: 1.5em 0;
	border: 1px solid #eee;
}
@media screen and (max-width: 1023px) {
	.affi_card {
		padding: 10px 14px;
	}
}
.affi_card::after {
	content: ""; clear: both; display: block;
}
.affi_card .affi_img {
	float: left;
	width: 270px;
}
@media screen and (max-width: 1023px) {
	.affi_card .affi_img {
		float: none;
		width: auto;
		margin-bottom: 10px;
	}
}
.affi_card .item_img_main {
	text-align: center;
}
.affi_card .item_img_main img {
	max-width: 250px;
	max-height: 300px;
}
@media screen and (max-width: 1023px) {
	.affi_card .item_img_main img {
		max-width: 100%;
	}
}
.affi_card .affi_img .source_link {
	margin: 0;
	font-size: 10px;
	text-align: center;
}
.affi_card .affi_img .source_link a {
	color: #ccc;
	text-decoration: none;
}
.affi_card .affi_detail {
	padding-left: 290px;
	padding-right: 10px;
}
@media screen and (max-width: 1023px) {
	.affi_card .affi_detail {
		padding-left: 0;
		padding-right: 0;
	}
}
.affi_card .item_info {
	margin-bottom: 10px;
}
.affi_card .item_info .title {
	margin-bottom: 4px;
	font-weight: bold;
	line-height: 1.4;
}
.affi_card .item_info .price {
	color: #888;
}
@media screen and (max-width: 1023px) {
	.affi_card .item_info .price {
		line-height: 1.4;
	}
}
.affi_card .detail_link {
	position: relative;
	margin-bottom: 10px;
}
.affi_card .detail_link a {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	border: solid 2px #eda93a;
	border-radius: 4px;
	font-size: .875em;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
}
.affi_card .detail_link a:link,
.affi_card .detail_link a:visited {
	color: #fff;
}
@media screen and (min-width: 1024px) {
	.affi_card .detail_link a:hover {
		background: #fff;
	}
}
.affi_card .detail_link .btn_a {
	background: #eda93a;
	border-color: #eda93a;
}
@media screen and (min-width: 1024px) {
	.affi_card .detail_link .btn_a:hover {
		color: #eda93a;
	}
}
.affi_card .detail_link .btn_r {
	background: #e85151;
	border-color: #e85151;
}
@media screen and (min-width: 1024px) {
	.affi_card .detail_link .btn_r:hover {
		color: #e85151;
	}
}
.affi_card .detail_link .beacon {
	/* Amazonの1px画像 */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
.affi_card .item_variation p {
	margin: 1em 0;
	font-size: .875em;
	line-height: 1.4;
}
.affi_card .item_variation p > a {
	margin-right: .5em;
}
.affi_card .item_detail {
	margin: 1em 0;
	padding-top: 1em;
	border-top: 1px solid #eee;
}
.article_style .affi_card .item_detail p {
	font-size: 1.2rem;
	line-height: 1.7;
	margin: 0;
}
@media screen and (max-width: 1023px) {
	.article_style .affi_card .item_detail p {
		font-size: .9em;
	}
}

.article_style .affi_title {
	margin-top: 1.5em;
	margin-bottom: .7em;
	padding-bottom: .2em;
	border-bottom: 4px solid #ef8080;
	color: #444;
	font-weight: bold;
	line-height: 1.5;
}

@media screen and (max-width: 1023px) {
	.article_style .affi_title {
		border-bottom-width: 2px;
		line-height: 1.4;
	}
}


/* 楽天アフィリエイト
------------------------------ */
@media screen and (max-width: 767px) {
	.rakuten_affi table {
		max-width: 100%;
		margin: auto;
		table-layout: fixed;
	}
	.rakuten_affi table table td:first-child {
		width: 80px !important;
		vertical-align: top;
	}
	.rakuten_affi td,
	.rakuten_affi div {
		width: auto !important;
	}
	.rakuten_affi td td {
		padding: 0 2px;
	}
	.rakuten_affi img {
		max-width: 100%;
	}
}


/* ------------------------------------------------------
 = トップ
------------------------------------------------------ */
/* 募集中のランキング
------------------------------ */
.open_ranking_list_top ul {
	margin: 1em;
	margin-top: .5em;
}
.open_ranking_list_top .item a {
	display: block;
	padding: .9em 0;
	padding-left: .5em;
	border-bottom: 1px solid #ddd;
}
.open_ranking_list_top .item:first-child a {
	border-top: 1px solid #ddd;
}
@media screen and (max-width: 1023px) {
	.open_ranking_list_top .item:first-child a {
		border-top: none;
	}
}

.open_ranking_list_top .item .detail {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.open_ranking_list_top .item .title {
	margin-right: 1em;
	font-weight: bold;
	font-size: 1.1em;
}
.open_ranking_list_top .item .vote_btn {
	flex: none;
	padding: .6em 1.3em;
	border-radius: .3em;
	background-color: #BFBFBF;
	color: #fff;
	font-weight: bold;
	font-size: 1.06em;
	line-height: 1;
}
.open_ranking_list_top .item .description {
	margin-top: .5em;
}


/* ------------------------------------------------------
 = 投票
------------------------------------------------------ */
.ques-b,
div.submit {
	display: none;
}
.ranking_detail .vote-section {
	margin: 0 1em;
}
.ranking_detail .catch_image {
	margin-bottom: 1em;
	text-align: center;
}
.ranking_detail .vote-title {
	margin-bottom: .5em;
	font-weight: bold;
	font-size: 1.8rem;
}
@media screen and (max-width: 1023px) {
	.ranking_detail .vote-title {
		font-size: 1.3em;
	}
}

.ranking_detail .vote-description {
	padding-bottom: 1em;
	border-bottom: 2px solid #ddd;
}
@media screen and (max-width: 1023px) {
	.ranking_detail .vote-description {
		font-size: 1.1em;
		line-height: 1.8;
	}
}

.ranking_detail .vote-items li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1em 0;
	border-bottom: 1px solid #ddd;
}
.ranking_detail .vote-btn {
	flex: none;
	width: 4em;
	padding: .3em;
	border: 1px solid #ddd;
	border-radius: 3px;
	line-height: 1;
	text-align: center;
}
.ranking_detail .vote-btn:hover {
	background-color: #eee;
}
.ranking_detail .vote-btn input {
	position: absolute;
	opacity: 0;
	z-index: -1;
}


/* ------------------------------------------------------
 = 投票結果（途中結果）
------------------------------------------------------ */
.result-section {
	margin: 0 10px 2em;
}
.result-title {
	margin-bottom: .5em;
	font-weight: bold;
	font-size: 2.2rem;
}
@media screen and (max-width: 1023px) {
	.result-title {
		font-size: 1.3em;
	}
}
.result-section_title {
	margin-top: 1em;
	font-weight: bold;
	font-size: 2rem;
}
@media screen and (max-width: 1023px) {
	.result-section_title {
		font-size: 1.3em;
	}
}

.vote-result .item {
	position: relative;
	border-bottom: 1px solid #ddd;
}
.vote-result .vote_text {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
}
.vote-result .item h3 {
	margin-right: auto;
	padding: 1em 0;
}
.vote-result .vote_bar {
	position: absolute;
	bottom: 10px;
	left: 0;
	height: 5px;
	background-color: #fdd;
}
.vote-result .vote_num {
	margin-right: 1.5em;
}


/* ------------------------------------------------------
 = 投票結果（集計結果）
------------------------------------------------------ */
.ranking-result {
	font-size: 1.6rem;
}
.ranking-result .result-content {
	margin: 0 10px 2em;
}
.ranking-result .catch_image {
	margin-bottom: 1em;
	text-align: center;
}
.ranking-result .catch_image img {
	max-height: 500px;
}
@media screen and (max-width: 1023px) {
	.ranking-result .catch_image img {
		max-height: 300px;
	}
}

.ranking-result .comment_up,
.ranking-result .comment_dw {
	font-size: 1.1em;
	line-height: 1.8;
}
.ranking-result .comment_up {
	margin-bottom: 1em;
}
.ranking-result.result-all .comment_up { /* 全ランキング */
	font-size: 1em;
	line-height: 1.5;
}
.ranking-result .comment_dw {
	margin-top: 1.5em;
	padding: 0 .7em;
	border: 3px double #ddd;
}
.ranking-result .ranking_list {
	font-size: 1.1em;
}
.ranking-result .ranking_list .header {
	display: flex;
	align-items: center;
}
@media screen and (max-width: 1023px) {
	.ranking-result .ranking_list .header {
		display: block;
	}
}

.ranking-result .ranking_list li .header {
	margin-top: 1.3em;
	margin-bottom: .7em;
}
.ranking-result .ranking_list li h2 {
	display: flex;
	align-items: center;
	position: relative;
	padding: 2px .8em;
	font-weight: bold;
	font-size: 1.1em;
}
.ranking-result .ranking_list li h2::before {
	content: "";
	position: absolute;
	left: 0;
	width: 6px;
	height: 100%;
	background: #ef8080;
	border-radius: 3px;
}
.ranking-result .ranking_list-item .comment {
	line-height: 1.8;
}
.ranking-result .more_ranking {
	margin: 1em 0;
}
.ranking-result .more_ranking a {
	display: block;
	padding: .7em 0;
	background-color: #333;
	color: #fff;
	border-radius: .2em;
	font-weight: bold;
	font-size: 1.5em;
	text-align: center;
}
.ranking-result .more_ranking a::after {
	display: inline-block;
	content: "";
	width: .55em;
	height: .55em;
	margin-left: .3em;
	border: 3px solid #f00;
	border-bottom-width: 0;
	border-left-width: 0;
	transform: rotate(45deg);
}
.ranking-result .more_ranking_read {
	font-size: 1.1em;
	text-align: center;
}


/* 記事修飾
------------------------------------------------------ */
.ranking-result .article_style p {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
@media screen and (max-width: 1023px) {
	.ranking-result .article_style p {
		margin-top: 1em;
		margin-bottom: 1em;
	}
}

.ranking-result .article_style a {
	color: #0088cc;
	text-decoration: underline;
}


/* 広告 */
.ranking-result .ad {
	margin: 30px 0;
	text-align: center;
}
@media screen and (max-width: 1023px) {
	.ranking-result .ad {
		margin: 20px 0;
	}
}


/* ------------------------------------------------------
 = カテゴリーリスト
------------------------------------------------------ */
.ranking-cate_list_title {
	margin-bottom: .5em;
	font-weight: bold;
	font-size: 24px;
}
@media screen and (max-width: 1023px) {
	.ranking-cate_list_title {
		padding: .2em 0;
		background-color: #d9d9d9;
		color: #404040;
		font-size: 1.3em;
		text-align: center;
	}
}

.cate_list {
	display: flex;
	flex-wrap: wrap;
}
.cate_list li {
	flex: none;
	width: calc(100% / 2);
}
@media screen and (max-width: 1023px) {
	.cate_list li {
		width: 100%;
	}
}

.cate_list li a {
	position: relative;
	display: block;
	margin: 0 .5em;
	padding: 1em;
	padding-right: 3em;
	border-bottom: 1px solid #ddd;
	font-size: 1.6rem;
}
@media screen and (max-width: 1023px) {
	.cate_list li a {
		font-size: 1.2em;
	}
}

.cate_list li a::after {
	position: absolute;
	top: 50%;
	right: 32px;
	display: block;
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -6px;
	border-top: 3px solid #ef8080;
	border-right: 3px solid #ef8080;
	transform: rotate(45deg);
}


/* ------------------------------------------------------
 = カテゴリーアーカイブ
------------------------------------------------------ */
.ranking-category_title {
	margin-bottom: .5em;
	font-weight: bold;
	font-size: 24px;
}
@media screen and (max-width: 1023px) {
	.ranking-category_title {
		padding: .2em 0;
		color: #fff;
		font-size: 1.3em;
		text-align: center;
	}
	.ranking-category_title.cate-1 {
		background-color: var(--cate1-color);
	}
	.ranking-category_title.cate-2 {
		background-color: var(--cate2-color);
	}
	.ranking-category_title.cate-3 {
		background-color: var(--cate3-color);
	}
	.ranking-category_title.cate-4 {
		background-color: var(--cate4-color);
	}
	.ranking-category_title.cate-5 {
		background-color: var(--cate5-color);
	}
	.ranking-category_title.cate-6 {
		background-color: var(--cate6-color);
	}
}