@charset "utf-8";
/* =====================================================
   custom.css  ―  らんコレ サイト固有スタイル
   Bootstrap 5.3 と併用。Bootstrapで代替できる
   リセット系ルールは除外してある。
   ===================================================== */

/* -------------------------------------------------------
   font / background
   ------------------------------------------------------- */
body {
	font-family: "Lucida Grande","Hiragino Kaku Gothic ProN","Meiryo","sans-serif";
	-ms-content-zooming: none;
	-webkit-text-size-adjust: 100%;
	background-color: #000;
}
#body {
	background-color: #fff;
}
/* -------------------------------------------------------
   common link / element overrides
   ------------------------------------------------------- */
a {
	color: #000;
}
a:hover {
	color: #00F;
	text-decoration: underline;
}
a > img:hover {
	opacity: 0.8;
}
pre {
	white-space: pre-wrap;
	word-break: break-all;
}

/* -------------------------------------------------------
   form font-size (prevent iOS zoom, reduce on desktop)
   ------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="username"],
input[type="password"], input[type="email"], select, textarea {
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #bbb;
	border-radius: 6px;
	padding: 9px 12px;
	background-color: #fff;
	transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="username"]:focus,
input[type="password"]:focus, input[type="email"]:focus, select:focus, textarea:focus {
	outline: none;
	border-color: #0047C7;
	box-shadow: 0 0 0 3px rgba(0,71,199,0.15);
}
input[type="radio"], input[type="checkbox"] {
	width: auto;
	padding: 0;
}
@media screen and (min-width: 990px) {
	input[type="text"], input[type="number"], input[type="username"],
	input[type="password"], input[type="email"], select, textarea {
		font-size: 12px;
		padding: 6px 10px;
	}
}

/* -------------------------------------------------------
   label / mini_label  (section headings with star icon)
   ------------------------------------------------------- */
.label {
	display: block;
	line-height: 27px;
	color: #000;
	font-size: medium;
	font-weight: bold;
	background-image: url("../images/star32.png");
	background-repeat: no-repeat;
	background-position: left 0 bottom 0;
	padding-left: 40px;
}
.label:after {
	content: "";
	display: block;
	border-top: 5px solid #000;
	margin-left: -20px;
	margin-bottom: 5px;
}
.mini_label {
	display: block;
	font-size: medium;
	font-weight: bold;
	color: #000;
	border-bottom: #000 solid 1px;
}
.imp_visible {
	visibility: visible !important;
}
.img_button {
	cursor: pointer;
}
.img_button:hover {
	opacity: 0.8;
}

/* -------------------------------------------------------
   pagenavi
   ------------------------------------------------------- */
.pagenavi {
	display: block;
	text-align: center;
	margin: 20px 0;
}
.pagenavi ul, .pagenavi li {
	display: inline-block;
	list-style: none;
}
.pagenavi .n_now {
	color: #ffffff;
	border: 1px solid #AAA;
	background-color: #943B00;
	border-radius: 4px;
	padding: 8px 14px;
}
.pagenavi .n_from {
	color: #AAA;
	padding: 8px 4px;
	margin: 0;
}
.pagenavi a {
	color: #000;
	border: 1px solid #AAA;
	background-color: #FFF;
	text-decoration: none;
	border-radius: 4px;
	padding: 8px 14px;
	margin: 0 3px;
	transition: background-color 0.15s, color 0.15s;
}
.pagenavi a:hover {
	color: #FFF;
	background-color: #0288D1;
	border-color: #0288D1;
	text-decoration: none;
}

/* -------------------------------------------------------
   footer
   ------------------------------------------------------- */
@media screen and (min-width: 1260px) {
	footer {
		width: 1260px;
		margin: 20px auto 0 auto;
	}
}
@media screen and (max-width: 1259px) {
	footer {
		margin-top: 20px;
	}
}
@media screen and (min-width: 950px) {
	.foot_cnt {
		display: flex;
	}
	.foot_m1_box {
		flex: 1;
		display: flex;
	}
	.foot_m2_box {
		flex: 1;
		display: block;
		border-top: 5px #000 solid;
		margin: 0 10px 5px 10px;
	}
	.foot_m2_box li {
		margin: 1em 0;
	}
}
@media screen and (min-width: 425px) and (max-width: 949px) {
	.foot_cnt {
		display: block;
	}
	.foot_m1_box {
		display: flex;
	}
	.foot_m2_box {
		flex: 1;
		display: block;
		border-top: 5px #000 solid;
		margin: 0 10px 5px 10px;
	}
	.foot_m2_box li {
		margin: 1em 0;
	}
}
@media screen and (max-width: 424px) {
	.foot_cnt {
		display: block;
	}
	.foot_m1_box {
		display: block;
	}
	.foot_m2_box {
		display: block;
		border-top: 5px #000 solid;
		margin: 0 10px 5px 10px;
	}
	.foot_m2_box li {
		margin: 1em 0;
	}
}
.foot_h {
	font-size: normal;
	margin: .5em 0 .5em 1em;
	font-weight: bold;
}
.foot_m2_box ul {
	margin: 1em 0 1em 1em;
}
#copyright {
	color: #444;
	text-align: center;
	margin: 10px auto 5px auto;
}
.protectedby {
	font-size: x-small;
	text-align: left;
	margin: 20px 0 10px 2%;
}
.protectedby img {
	vertical-align: middle;
	margin-right: 2px;
}
.protectedby p.scf {
	padding-left: 18px;
}

/* -------------------------------------------------------
   ad box
   ------------------------------------------------------- */
.ad_box {
	display: block;
	text-align: center;
	margin: 10px auto;
}

/* -------------------------------------------------------
   page-top button
   ------------------------------------------------------- */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
	z-index: 100;
}
#page-top a {
	background-color: #0288D1;
	box-shadow: 0 3px 8px rgba(0,0,0,0.3);
	text-decoration: none;
	color: #fff;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.15s, box-shadow 0.15s;
}
#page-top a:hover {
	text-decoration: none;
	background-color: #01579B;
	box-shadow: 0 5px 14px rgba(0,0,0,0.4);
	color: #fff;
}

/* -------------------------------------------------------
   blockquote border / image quote
   ------------------------------------------------------- */
.image_quote {
	border: 1px solid;
	border-image: url(../images/border-quote.png?2) 33.33% / 13px 13px repeat;
	padding: 5px;
	margin: 0 5% 20px 5%;
}
.source {
	text-align: right;
}

/* recaptcha badge */
.grecaptcha-badge {
	opacity: 0;
}

/* -------------------------------------------------------
   responsive layout
   ------------------------------------------------------- */
@media screen and (min-width: 950px) {
	#body {
		min-height: 1080px;
	}
	#central {
		display: flex;
		width: 1260px;
		min-height: 1px;
		margin: 0 auto;
	}
	main {
		display: block;
		width: 950px;
		font-size: small;
	}
	.rightside_box {
		display: block;
		width: 300px;
		font-size: small;
		margin-left: 10px;
	}
	.follow_region {
		position: -webkit-sticky;
		position: sticky;
		top: 0px;
	}
	.h_hold_box {
		display: block;
		width: 1260px;
		font-size: 0;
		text-align: right;
		padding: 0;
		margin: 0 auto;
		list-style: none;
	}
	.h_hold_box li span {
		display: inline-block;
		max-width: 120px;
		height: 22px;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #fff;
		font-size: small;
		padding: 4px 6px;
		margin: 0;
		overflow: hidden;
	}
	#hhb_submenu li span {
		display: block;
		max-width: 120px;
		height: 22px;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #fff;
		font-size: small;
		padding: 4px 8px;
		margin: 0;
		overflow: hidden;
	}
	#breadcrumb > ul {
		width: 1260px;
		list-style: none;
		font-size: small;
		color: #333;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0 auto;
	}
	#breadcrumb > ul > li {
		display: inline-block;
		max-width: 500px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.sea_b_minibox {
		display: flex;
		flex: auto;
		font-size: 0;
	}
	.sea_b_minibox input[type="text"] {
		display: inline-block;
		width: calc(100% - 380px);
		padding: 4px 7px;
		border: 0;
		border-left: 1px solid #AAA;
		border-top: 1px solid #AAA;
		border-bottom: 1px solid #AAA;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}
	.intro_box {
		display: flex;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 10px;
	}
	.intro_inbox1 {
		flex: 3;
		padding: 5px;
	}
	.intro_inbox2 {
		flex: 1;
		padding: 5px;
		position: relative;
	}
	.intro_inbox2 p {
		position: absolute;
		bottom: 0;
		text-align: center;
		margin: 0 0 10px 35px;
	}
	.sp_only {
		display: none !important;
	}
}
@media screen and (max-width: 949px) {
	#body {
		min-height: 1080px;
	}
	#central {
		margin: 0 auto;
	}
	main {
		display: block;
		width: 100%;
		font-size: small;
	}
	.rightside_box {
		display: block;
		width: 100%;
		font-size: small;
	}
	.h_hold_box {
		display: block;
		font-size: 0;
		text-align: right;
		padding: 0;
		margin: 0 auto;
		list-style: none;
	}
	.h_hold_box li span {
		display: inline-block;
		max-width: 120px;
		height: 22px;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #fff;
		font-size: small;
		padding: 7px 6px;
		margin: 0;
		overflow: hidden;
	}
	#hhb_submenu li span {
		display: block;
		max-width: 120px;
		height: 22px;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #fff;
		font-size: small;
		padding: 7px 8px;
		margin: 0;
		overflow: hidden;
	}
	#breadcrumb > ul {
		list-style: none;
		font-size: small;
		color: #333;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0 auto;
		overflow: scroll;
	}
	#breadcrumb > ul > li {
		display: inline-block;
		max-width: 160px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.sea_b_minibox {
		display: flex;
		flex: auto;
		font-size: 0;
		margin-right: 10px;
	}
	.sea_b_minibox input[type="text"] {
		flex: auto;
		display: inline-block;
		padding: 4px 7px;
		border: 0;
		border-left: 1px solid #AAA;
		border-top: 1px solid #AAA;
		border-bottom: 1px solid #AAA;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}
	.intro_box {
		padding: 10px;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.intro_inbox1 {
		padding: 5px;
	}
	.intro_inbox2 {
		padding: 5px;
	}
	.intro_inbox2 p {
		text-align: center;
		margin: 10px 0;
	}
	.pc_only {
		display: none !important;
	}
}
@media screen and (max-width: 600px) {
	.undisplay_s600 {
		display: none !important;
	}
}
@media screen and (max-width: 500px) {
	.undisplay_s500 {
		display: none !important;
	}
}
@media screen and (max-width: 424px) {
	.undisplay_s424 {
		display: none !important;
	}
}
@media screen and (max-width: 300px) {
	.cm_over {
		display: none !important;
	}
}

/* -------------------------------------------------------
   header
   ------------------------------------------------------- */
header {
	display: block;
	width: 100%;
	background-color: #fff;
	border-bottom: solid #000 1px;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3);
}
header:after {
	display: block;
	clear: both;
	height: 0px;
	visibility: hidden;
	content: " ";
}
.h_main_box {
	display: flex;
	justify-content: space-between;
	margin: 10px auto;
}
.h_main_box h1 {
	display: block;
	width: 230px;
	font-size: 0;
}
.h_main_box_navi {
	flex: 1;
	display: block;
	font-size: 0;
}
.sea_minibox {
	padding-top: 6px;
}
@media screen and (min-width: 950px) {
	.h_main_box {
		width: 1260px;
	}
}
@media screen and (min-width: 425px) {
	.h_main_box_navi {
		padding-left: 30px;
	}
	.h_main_box .sea_minisize_b {
		display: none;
	}
}
@media screen and (max-width: 424px) {
	.h_main_box .sea_minibox {
		display: none;
	}
	.h_main_box .sea_minisize_b {
		width: 44px;
		height: 44px;
		background-color: #1565C0;
		border: none;
		border-radius: 8px;
		padding: 7px;
		margin: 8px 10px 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
@media screen and (min-width: 425px) {
	.minisize_d {
		display: none;
	}
}
@media screen and (max-width: 424px) {
	.minisize_d form {
		margin: 10px 2% 20px 2%;
	}
	.sea_t_minibox {
		margin-bottom: 16px !important;
	}
	.sea_t_minibox label {
		margin-right: 16px !important;
	}
}
.sea_t_minibox {
	font-size: small;
	margin-bottom: 1em;
}
.sea_t_minibox label {
	margin-right: 10px;
}
.sea_t_minibox input[type="radio"] {
	margin-right: .5em;
	vertical-align: middle;
}
.sea_t_minibox span {
	margin-right: 2em;
}
.sea_b_minibox button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #fff;
	font-weight: bold;
	background-color: #1565C0;
	padding: 4px;
	border: none;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s;
}
.sea_b_minibox button:hover {
	background-color: #0D47A1;
}
.sea_b_minibox button img {
	vertical-align: middle;
}
.h_hold_top {
	display: block;
	width: 100%;
	min-height: 24px;
	background-color: #000;
	z-index: 10;
	padding: 0;
	margin: 0;
	position: relative;
}
.h_hold_box li {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.h_hold_box a {
	display: inline-block;
	background-color: #000;
}
.h_hold_box a:hover {
	background-color: #666;
	color: #fff !important;
	text-decoration: underline;
	cursor: pointer;
}
.hhb_menu:hover + #hhb_submenu {
	visibility: visible !important;
}
#hhb_submenu {
	position: absolute;
	display: block;
	visibility: hidden;
	top: 0;
	right: 0;
	font-size: 0;
	text-align: right;
	background-color: #000;
	padding: 36px 0 0 0;
	margin: 0 auto;
	list-style: none;
	z-index: 1;
}
#hhb_submenu:hover {
	visibility: visible !important;
}
#hhb_submenu li {
	display: block;
	padding: 0;
	margin: 0;
}
#hhb_submenu a {
	display: block;
	background-color: #000;
}
#hhb_submenu a:hover {
	background-color: #666;
	color: #fff !important;
	cursor: pointer;
}
#breadcrumb {
	padding: 10px 0 10px 10px;
}
#breadcrumb > ul > li:before {
	content: "》";
	margin-left: 10px;
}

/* -------------------------------------------------------
   common utility
   ------------------------------------------------------- */
.box {
	display: block;
	margin: 8px 5px;
	border-radius: 4px;
}
.system_msg_box {
	width: 90%;
	max-width: 600px;
	border: 2px solid #D32F2F;
	border-radius: 8px;
	background-color: #FFF5F5;
	margin: 12px auto;
	padding: 12px 5%;
}

/* -------------------------------------------------------
   common buttons
   ------------------------------------------------------- */
/* Red — large */
.m_r_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #D32F2F;
	border: none;
	border-radius: 8px;
	padding: 12px 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.25);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.m_r_buttom:hover {
	background-color: #B71C1C;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	transform: translateY(-1px);
	text-decoration: none;
	color: #FFF !important;
}
/* Red — small */
.mimi_r_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #D32F2F;
	border: none;
	border-radius: 5px;
	padding: 5px 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.mimi_r_buttom:hover {
	background-color: #B71C1C;
	text-decoration: none;
	color: #FFF !important;
}
/* Blue — large */
.m_b_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #1565C0;
	border: none;
	border-radius: 8px;
	padding: 12px 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.25);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.m_b_buttom:hover {
	background-color: #0D47A1;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	transform: translateY(-1px);
	text-decoration: none;
	color: #FFF !important;
}
/* Blue — small */
.mimi_b_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #1565C0;
	border: none;
	border-radius: 5px;
	padding: 5px 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.mimi_b_buttom:hover {
	background-color: #0D47A1;
	text-decoration: none;
	color: #FFF !important;
}
/* Orange — large */
.m_o_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #E65100;
	border: none;
	border-radius: 8px;
	padding: 12px 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.25);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.m_o_buttom:hover {
	background-color: #BF360C;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	transform: translateY(-1px);
	text-decoration: none;
	color: #FFF !important;
}
/* Orange — small */
.mimi_o_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #E65100;
	border: none;
	border-radius: 5px;
	padding: 5px 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.mimi_o_buttom:hover {
	background-color: #BF360C;
	text-decoration: none;
	color: #FFF !important;
}
/* Gray — large */
.m_g_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #757575;
	border: none;
	border-radius: 8px;
	padding: 12px 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
/* Gray — large (active hover variant) */
.m_ga_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #757575;
	border: none;
	border-radius: 8px;
	padding: 12px 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.m_ga_buttom:hover {
	background-color: #424242;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	transform: translateY(-1px);
	text-decoration: none;
	color: #FFF !important;
}
/* Gray — small */
.mimi_g_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background-color: #757575;
	border: none;
	border-radius: 5px;
	padding: 5px 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.mimi_g_buttom:hover {
	background-color: #424242;
	text-decoration: none;
	color: #FFF !important;
}
/* Twitter blue */
.m_tw_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background: #00b9ff;
	border: 1px solid #00b9ff;
	border-radius: 10px;
	padding: 10px 15px;
	position: relative;
	z-index: 2;
	text-decoration: none;
}
.m_tw_buttom:hover {
	background: #00acee;
	border: 1px solid #00acee;
	cursor: pointer;
	text-decoration: none;
	color: #FFF !important;
}
/* Facebook blue */
.m_fb_buttom {
	display: inline-block;
	color: #FFF;
	font-weight: bold;
	background: #2f55a4;
	border: 1px solid #2f55a4;
	border-radius: 10px;
	padding: 10px 15px;
	position: relative;
	z-index: 2;
	text-decoration: none;
}
.m_fb_buttom:hover {
	background: #2f477a;
	border: 1px solid #2f477a;
	cursor: pointer;
	text-decoration: none;
	color: #FFF !important;
}
/* edit-ranking side button */
.er_sidebtn {
	display: block;
	width: calc(100% - 2em);
	margin: 0 auto 20px auto;
	padding: 12px 20px;
	min-height: 44px;
}

/* -------------------------------------------------------
   intro box
   ------------------------------------------------------- */
.intro_inbox2 a {
	width: 150px;
}

/* -------------------------------------------------------
   legal lists
   ------------------------------------------------------- */
.legal_ul {
	list-style-type: decimal;
	margin: 5px 5px 5px 25px;
}
.legal_sec_ul {
	list-style-type: lower-alpha;
	margin: 5px 5px 5px 25px;
}

/* -------------------------------------------------------
   ranking box
   ------------------------------------------------------- */
@media screen and (min-width: 950px) {
	.rnk_contents {
		display: flex;
		flex-wrap: wrap;
	}
	.rnk_box {
		width: 227px;
		margin: 5px;
	}
	.c2_box {
		flex: 1;
		width: calc(50% - 10px);
		margin: 5px 5px 5px 0;
	}
}
@media screen and (max-width: 949px) {
	.c2_box {
		width: 100%;
		margin: 5px 0 0 0;
	}
}
@media screen and (min-width: 425px) and (max-width: 949px) {
	.rnk_contents {
		display: flex;
		flex-wrap: wrap;
	}
	.rnk_box {
		width: calc(50% - 10px);
		margin: 1em 0;
	}
}
@media screen and (max-width: 424px) {
	.rnk_box {
		width: 100%;
		margin: 1em 0;
	}
}
.no_img_item {
	display: table-cell;
	width: 207px;
	height: 103px;
	font-size: large;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #999;
	background-color: #ffffe0;
	padding: 10px;
	text-decoration: none;
}
.no_img_item:hover {
	background-color: #fffacd;
	text-decoration: underline;
}
.rb_img {
	position: relative;
}
.rb_img a {
	display: block;
}
.rb_img img {
	width: 100%;
	height: 142px;
	object-fit: cover;
}
.vrb_img {
	position: relative;
}
.vrb_img a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 142px;
}
.vrb_img img {
	max-width: 100%;
	max-height: 142px;
	object-fit: cover;
}
.acc_vote {
	position: relative;
}
.end_vote {
	position: relative;
}
.acc_vote:after {
	position: absolute;
	content: "投票受付中";
	color: #fff;
	font-weight: bold;
	padding: .2em .4em;
	background-color: #AD1A00;
	z-index: 5;
}
.end_vote:after {
	position: absolute;
	content: "結果を見る";
	color: #fff;
	font-weight: bold;
	padding: .2em .4em;
	background-color: #1e47ff;
	z-index: 5;
}
.rb_cimg img {
	width: 100%;
	height: 142px;
	object-fit: contain;
}
.rb_ttl {
	text-align: center;
	font-size: large;
	font-weight: bold;
	text-decoration: none;
}
.rb_ttl:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------
   ranking mini box
   ------------------------------------------------------- */
.rnk_mbox {
	display: flex;
	border-bottom: 1px solid #AAA;
	padding: 5px 0;
	margin: 5px auto;
}
.rmb_img {
	width: 75px;
	margin-right: 5px;
	position: relative;
}
.rmb_img img {
	width: 100%;
	height: 63px;
	object-fit: cover;
}
.rmb_ttl {
	flex: 1;
	display: flex;
	align-items: center;
}
.rmb_ttl a {
	font-weight: bold;
	text-decoration: none;
}
.rmb_ttl a:hover {
	text-decoration: underline;
}
.cmt_mbox {
	display: flex;
	padding-top: 5px;
	margin: 5px auto 0 auto;
}
.cmt_ubox {
	padding: 0 5px 5px 5px;
	margin: 0 auto 5px auto;
	border-bottom: 1px solid #AAA;
}
.cmt_ubox a {
	color: blue;
	font-weight: bold;
	text-decoration: none;
}
.cmt_ubox a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------
   ranking other
   ------------------------------------------------------- */
.tags_box {
	width: 100%;
}
.tags_box th, .tags_box td {
	font-weight: normal;
	vertical-align: top;
}
.tags_box .tg_tl {
	width: 6em;
	text-align: right;
}
.tags_box a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	padding: 0.2em 0.5em;
	background-color: #0047C7;
	border-radius: 5px;
	margin: 0 1.5% 10px 0;
}
.tags_box a:hover {
	background-color: #00236B;
}
.source {
	margin-top: 20px;
	word-break: break-all;
}
.eimg_guide {
	color: #AAA;
	text-align: center;
}
@media screen and (max-width: 600px) {
	.tags_box {
		font-size: x-small;
	}
	.source {
		font-size: x-small;
	}
	.eimg_guide {
		font-size: x-small;
	}
}
#update_abtn {
	text-align: center;
	text-decoration: underline;
	padding: 10px;
	border: 1px solid #AAA;
	margin: 20px 5%;
}
#update_abtn:hover {
	color: blue;
	cursor: pointer;
}
#update_abox {
	max-height: 16em;
	border: 1px solid #AAA;
	padding: 10px;
	margin: 10px 5%;
	overflow: auto;
}
@media screen and (min-width: 600px) {
	#update_abtn {
		display: none;
	}
	#update_abox {
		display: block;
	}
}
@media screen and (max-width: 600px) {
	#update_abtn {
		display: block;
	}
	#update_abox {
		display: none;
	}
}

/* -------------------------------------------------------
   osi point box
   ------------------------------------------------------- */
.osi_lbe {
	height: 32px;
	line-height: 40px;
	color: #000;
	font-size: medium;
	font-weight: bold;
	display: inline-block;
	background-size: 32px 32px;
	background-image: url("../images/osi250.png");
	background-repeat: no-repeat;
	padding-left: 40px;
}
.osi_ul {
	list-style: none;
	border-top: 1px #AAA dotted;
	margin: 10px 20px 0px 20px;
}
.osi_ul li {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	border-bottom: 1px #AAA dotted;
	padding: 5px 0 5px 20px;
}
.osi_lil {
	flex: auto;
}
.osi_lir {
	flex: auto;
	text-align: right;
}
.osi_add_box {
	margin: 1em 10px 1em 31px;
}
.osi_add_box p {
	font-weight: bold;
}
.osi_add_box span {
	color: #444;
}
.osi_add_box .oat {
	padding: 2px 5px;
	width: calc(99% - 75px);
}
.osi_add_box .oab {
	margin-left: 5px;
	width: 50px;
}
.osi_link {
	font-size: 100%;
	font-weight: bold;
	text-align: right;
	margin: 1em 20px 1em 0;
	text-decoration: none;
}
.osi_link a {
	text-decoration: none;
}

/* -------------------------------------------------------
   item in ranking box
   ------------------------------------------------------- */
.ri_ul {
	border-bottom: 1px solid #AAA;
	margin: 10px 0 30px 0;
	list-style: none;
}
.ri_box {
	display: block;
	padding: 20px 10px 30px 3px;
	margin-left: 7px;
}
.ri_box .ri_label {
	display: flex;
	align-items: flex-end;
	background: #f4f4f4;
	border-radius: 0 10px 10px 10px;
	padding: 2px 0px 2px 70px;
	position: relative;
}
.ri_box .ri_label > .rank {
	position: absolute;
	display: inline-block;
	left: -7px;
	top: -12px;
	height: 50px;
	line-height: 50px;
	color: #000;
	font-size: large;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 0 #FFF;
	background: #8cffff;
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.29);
	border: 3px solid #000;
	padding: 0 10px;
}
.ri_box .ri_label > .h3l {
	flex: auto;
	font-size: large;
}
.rib_img {
	max-width: 400px;
	max-height: 250px;
	text-align: center;
	margin: 5px auto 10px auto;
	overflow: hidden;
}
.rib_img a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 400px;
	height: 250px;
}
.rib_img img {
	width: auto;
	max-height: 250px;
	object-fit: contain;
}
.rib_vote {
	text-align: center;
	margin: 10px 0;
}
.rib_vote input[type="button"] {
	width: 220px;
	max-width: 100%;
}
.rib_add {
	text-align: center;
	margin: 90px 0;
}
.rib_add p {
	text-align: center;
	margin: 10px 0;
}
.rib_add input[type="submit"] {
	width: 220px;
	max-width: 100%;
}
.rib_txt {
	padding: 10px 5% 20px 5%;
}
.rib_table {
	display: table;
	width: 95%;
	margin: 10px 0 10px 5%;
}
.rib_cell {
	display: table-cell;
}
.rib_cell > .h3r {
	font-size: large;
	font-weight: bold;
	text-align: right;
	padding-right: 10px;
}
.rib_preresult {
	font-size: 110%;
	font-weight: bold;
}
.rib_preresult span {
	display: inline-block;
	white-space: nowrap;
}
.rib_preresult img {
	vertical-align: middle;
}
.rib_dital {
	text-align: right;
}
.rib_dital input[type="button"] {
	width: 220px;
	max-width: 100%;
}

/* -------------------------------------------------------
   search box
   ------------------------------------------------------- */
.search_box {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 10px;
	background-color: #fafafa;
}
.categories {
	text-align: center;
}
.categories span {
	display: inline-block;
	margin: 7px 12px;
}
.search_box form {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
}
.search_box form select {
	width: auto;
	max-width: 130px;
}
.search_box form input[type="text"] {
	flex: 1;
	width: auto;
	margin: 0 6px;
}
.search_box form input[type="submit"] {
	display: inline-block;
	width: auto;
	color: #FFF;
	font-weight: bold;
	background-color: #1565C0;
	border: none;
	border-radius: 6px;
	padding: 6px 16px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.search_box form input[type="submit"]:hover {
	background-color: #0D47A1;
	color: #FFF !important;
}
.categories_cnt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.categories_cnt a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	background-color: #1565C0;
	border-radius: 6px;
	padding: 6px 12px;
	margin: 4px;
	transition: background-color 0.15s, transform 0.1s;
}
.categories_cnt a:hover {
	background-color: #0D47A1;
	transform: translateY(-1px);
}

/* -------------------------------------------------------
   m3 column box
   ------------------------------------------------------- */
@media screen and (min-width: 600px) {
	.m3_columnbox {
		display: flex;
	}
	.m3_inbox {
		flex: 1;
		background-color: #F4F4F4;
		border-radius: 5px;
		padding: 5px;
		margin: 5px;
	}
}
@media screen and (max-width: 599px) {
	.m3_inbox {
		background-color: #F4F4F4;
		border-radius: 5px;
		padding: 5px;
		margin: 5px;
	}
}

/* -------------------------------------------------------
   user data box
   ------------------------------------------------------- */
.udata_box {
	display: flex;
	justify-content: center;
	margin: 20px auto 0 auto;
}
.udata_box .kind_box {
	font-weight: bold;
	padding: 0 10px;
}
.kind_box a {
	display: block;
	text-decoration: none;
}
.kind_box a:hover {
	color: #6060FF;
	text-decoration: underline;
}
.kind_box .k_th {
	display: block;
	color: #606060;
	text-align: center;
}
.kind_box .k_td {
	display: block;
	color: blue;
	text-decoration: underline;
	text-align: center;
}
.kind_box a:hover > .k_th {
	color: blue;
}

/* -------------------------------------------------------
   related page navi
   ------------------------------------------------------- */
.related_page_navi {
	display: flex;
	align-items: center;
	margin: 40px 10px;
}
.related_page_navi a {
	text-decoration: none;
}
.rpn_prev {
	flex: 1;
	font-size: 120%;
	text-align: left;
}
.rpn_prev_as:before {
	content: "《";
	margin-right: 5px;
}
.rpn_select {
	flex: 1;
	font-size: 100%;
	text-align: center;
	width: auto;
}
.rpn_next {
	flex: 1;
	font-size: 120%;
	text-align: right;
}
.rpn_next_as:after {
	content: "》";
	margin-left: 5px;
}

/* -------------------------------------------------------
   page guide box
   ------------------------------------------------------- */
.page_guide_box {
	display: flex;
	flex-wrap: wrap;
	font-weight: bold;
	padding-top: 10px;
}
.page_guide_box .pg_b {
	flex: 1;
	text-align: left;
	white-space: nowrap;
	margin: 10px 0;
}
.page_guide_box .pg_n {
	flex: 1;
	text-align: center;
	white-space: nowrap;
	margin: 10px;
}
.page_guide_box .pg_a {
	flex: 1;
	text-align: right;
	white-space: nowrap;
	margin: 10px 0;
}
.page_guide_box a {
	display: block;
	color: #fff;
	width: calc(100% - 22px);
	max-width: 200px;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	border-radius: 5px;
	background-color: #0047C7;
	margin: 1px 0;
}
.page_guide_box a:hover {
	border: solid #1e90ff 1px;
	background-color: #00236B;
	margin: 0;
}
.pgb_center {
	margin-top: 10px;
	margin-bottom: 20px;
}
.pgb_center a {
	display: block;
	color: #fff;
	max-width: 280px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 5px;
	background-color: #0047C7;
	padding: 10px;
	margin: 1px auto;
}
.pgb_center a:hover {
	border: solid #1e90ff 1px;
	background-color: #00236B;
	margin: 0 auto;
}
@media screen and (max-width: 599px) {
	.page_guide_box a {
		padding: 10px 2%;
	}
}
.rnk_return_box {
	margin: 30px 30%;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width: 600px) {
	.rnk_return_box {
		margin: 30px 20%;
	}
}
@media screen and (max-width: 424px) {
	.rnk_return_box {
		margin: 30px 10%;
	}
}
.rnk_return_box a {
	display: inline-block;
	color: #fff;
	padding: 10px 10px;
	text-decoration: none;
	border-radius: 5px;
	background-color: #0D5B73;
	margin: 1px 0;
}
.rnk_return_box a:hover {
	border: solid #041D25 1px;
	background-color: #041D25;
	margin: 0;
}

/* -------------------------------------------------------
   slide item comments
   ------------------------------------------------------- */
.slide_cmt {
	position: absolute;
	top: 1px;
	left: 404px;
	font-family: "Verdana","Times New Roman";
	font-size-adjust: 0.58;
	font-size: 20px;
	font-weight: 900;
	color: white;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	white-space: nowrap;
}

/* -------------------------------------------------------
   comment mini box
   ------------------------------------------------------- */
.cmt_minibox {
	display: flex;
	margin: -10px 5% 20px 5%;
}
.cmt_minibox input[type="text"] {
	flex: auto;
	padding: 3px 7px;
	border-radius: 4px;
	margin-right: 5px;
}
.cmt_minibox input[type="button"] {
	display: inline-block;
	width: auto;
	min-width: 4em;
	color: #FFF;
	font-weight: bold;
	border-radius: 6px;
	padding: 6px 12px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s;
}
.cmt_minibox .cmb_blue {
	background-color: #1565C0;
	border: none;
}
.cmt_minibox .cmb_blue:hover {
	background-color: #0D47A1;
}
.cmt_minibox .cmb_gray {
	background-color: #757575;
	border: none;
}
.cmt_minibox div {
	flex: auto;
	color: #666;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	padding: 3px 7px;
	border: inset 2px #EEE;
	border-radius: 4px;
	background-color: #EEE;
	margin-right: 5px;
}
.cmt_minibox div a {
	color: #666;
	text-decoration: none;
}
.cmt_minibox div a:hover {
	color: blue;
	text-decoration: underline;
}
.cmt_minibox span {
	display: inline-block;
	width: 5em;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	background-color: #757575;
	border: none;
	border-radius: 5px;
	padding: 5px 8px;
	text-decoration: none;
}

/* -------------------------------------------------------
   auto tweet tag
   ------------------------------------------------------- */
.auto_tw_on {
	display: inline-block;
	color: red;
	font-size: 80%;
	font-weight: bold;
	border: 1px solid #D00000;
	border-radius: 10px;
	padding: 1px 5px;
}
.auto_tw_off {
	display: inline-block;
	color: blue;
	font-size: 80%;
	font-weight: bold;
	border: 1px solid #0000E0;
	border-radius: 10px;
	padding: 1px 5px;
}

/* -------------------------------------------------------
   mini rank box
   ------------------------------------------------------- */
.mini_rank_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 2%;
}
.mrb_node {
	width: 81px;
	margin: 5px;
}
.mrb_img {
	width: 81px;
	height: 81px;
	overflow: hidden;
	position: relative;
}
.mrb_img img {
	width: 100%;
	height: 81px;
	object-fit: cover;
}
.mrb_rpimg {
	width: 81px;
	height: 81px;
	overflow: hidden;
}
.mrb_rpimg img {
	width: 100%;
	height: 81px;
	object-fit: contain;
}
@media screen and (max-width: 333px) {
	.mrbnd_2 { display: none; }
}
@media screen and (max-width: 424px) {
	.mrbnd_3 { display: none; }
}
@media screen and (max-width: 515px) {
	.mrbnd_4 { display: none; }
}
@media screen and (max-width: 606px) {
	.mrbnd_5 { display: none; }
}
@media screen and (max-width: 697px) {
	.mrbnd_6 { display: none; }
}
@media screen and (max-width: 788px) {
	.mrbnd_7 { display: none; }
}
@media screen and (max-width: 879px) {
	.mrbnd_8 { display: none; }
}
@media screen and (max-width: 950px) {
	.mrbnd_9 { display: none; }
}

/* -------------------------------------------------------
   user box (header)
   ------------------------------------------------------- */
.user_box {
	display: table;
	text-align: right;
	width: 220px;
	margin-left: auto;
}
.ub_img {
	display: table-cell;
	width: 48px;
	vertical-align: middle;
	text-align: center;
}
.ub_prof {
	display: table-cell;
	width: 162px;
	vertical-align: middle;
	text-align: left;
	padding-left: 10px;
}
.ub_prof a {
	text-decoration: none;
}
@media screen and (max-width: 440px) {
	.ub_prof {
		display: none;
	}
}
@media screen and (min-width: 800px) {
	.user_box {
		margin-top: 1em;
	}
}

/* -------------------------------------------------------
   add item link
   ------------------------------------------------------- */
.addi_link {
	margin: 1em 0 0 5%;
}
.addi_link a {
	text-decoration: none;
}

/* -------------------------------------------------------
   table1
   ------------------------------------------------------- */
.table1 {
	width: 90%;
	border-collapse: collapse;
	margin: 0 auto;
}
.table1 tr th {
	max-width: 100px;
	border: 1px solid #ccc;
	background: #EFEFEF;
	padding: 10px;
}
.table1 tr td {
	border: 1px solid #ccc;
	padding: 10px;
}
.table1 tr:first-child th {
	border-top: 5px solid #000;
}
.table1 tr:first-child td {
	border-top: 5px solid #ccc;
}
.table1 tr td table tr td {
	border: 0 !important;
	padding: 0 !important;
}

/* -------------------------------------------------------
   recept table
   ------------------------------------------------------- */
.recept_table_r {
	width: 220px;
	border-collapse: collapse;
	border: solid 2px #AD1A00;
}
.recept_table_r th {
	color: #fff;
	text-align: center;
	background-color: #AD1A00;
	padding: 10px;
}
.recept_table_r td {
	color: #AD1A00;
	text-align: center;
	padding: 10px;
}
.recept_table_b {
	color: blue;
	text-align: center;
	margin: 20px 0 10px 0;
}
@media screen and (min-width: 800px) {
	.recept_table_r {
		margin: 0 0 1em auto;
	}
}
@media screen and (max-width: 800px) {
	.recept_table_r {
		margin: 0 0 1em auto;
	}
}

/* -------------------------------------------------------
   categories box
   ------------------------------------------------------- */
.categories_box {
	list-style-type: none;
	margin-bottom: 10px;
}
.categories_box li {
	display: inline-block;
	width: calc(49% - 2em);
	text-overflow: clip;
	margin: 0.2em 1em;
	overflow: hidden;
}
span.mcd_b {
	display: inline-block;
	width: 32px;
	height: 32px;
	vertical-align: middle;
	background-image: url(../images/mcds.png);
	background-repeat: no-repeat;
	margin-right: .5em;
}
@media screen and (max-width: 300px) {
	span.mcd_b {
		transform: scale(0.7,0.7);
	}
}
span.mcd0  { background-position: 0    0; }
span.mcd1  { background-position: 0  -32px; }
span.mcd2  { background-position: 0  -64px; }
span.mcd3  { background-position: 0  -96px; }
span.mcd4  { background-position: 0 -128px; }
span.mcd5  { background-position: 0 -160px; }
span.mcd6  { background-position: 0 -192px; }
span.mcd7  { background-position: 0 -224px; }
span.mcd8  { background-position: 0 -256px; }
span.mcd9  { background-position: 0 -288px; }
span.mcd10 { background-position: 0 -320px; }
span.mcd11 { background-position: 0 -352px; }
span.mcd12 { background-position: 0 -384px; }
span.mcd13 { background-position: 0 -416px; }
span.mcd14 { background-position: 0 -448px; }
span.mcd15 { background-position: 0 -480px; }
span.mcd16 { background-position: 0 -512px; }
span.mcd17 { background-position: 0 -544px; }
.categories_box li a:hover {
	opacity: 0.7;
}

/* -------------------------------------------------------
   matome ulbox
   ------------------------------------------------------- */
.m_ulbox {
	padding: 10px 20px;
	margin: 10px;
}
@media screen and (min-width: 950px) {
	.m_ulbox li {
		margin: 6px 0 6px 26px;
	}
	.m_ulbox p {
		margin: 10px 0;
	}
}
@media screen and (max-width: 949px) {
	.m_ulbox li {
		margin: 10px 0 10px 18px;
	}
	.m_ulbox p {
		margin: 15px 0;
	}
}

/* -------------------------------------------------------
   share button
   ------------------------------------------------------- */
.share_button {
	margin: 1em 0;
	text-align: center;
}
.share_button li {
	display: inline-block;
	margin: 0 6px;
}
.share_button li > a > img:hover {
	opacity: 0.7;
}
.share_embed {
	width: 90%;
	margin: 0 auto 20px auto;
}
.share_embed p {
	margin-bottom: .5em;
}
.share_embed img {
	vertical-align: middle;
	margin-right: .5em;
}
.share_embed textarea {
	width: 100%;
	height: 7.2em;
	padding: 8px 10px;
	box-sizing: border-box;
	resize: vertical;
}

/* -------------------------------------------------------
   board
   ------------------------------------------------------- */
.b_ulbox {
	padding: 10px 20px;
	margin: 10px;
}
@media screen and (min-width: 600px) {
	.b_ulbox ul {
		padding: 10px;
	}
	.b_ulbox li {
		display: inline;
		line-height: 200%;
	}
	.b_ulbox li:not(:last-child):after {
		color: red;
		content: "/";
		margin: 0 10px;
	}
	.b_ulbox p {
		margin: 10px 0;
	}
}
@media screen and (max-width: 599px) {
	.b_ulbox li {
		margin: 10px 0 10px 18px;
	}
	.b_ulbox p {
		margin: 15px 0;
	}
}
.cnpbobox {
	border: 1px solid #aaa;
	padding: 10px;
	margin: 10px 10px 30px 10px;
}
.cnpbobox h3 > a {
	color: blue;
	text-decoration: none;
}
.cnpbobox h3 > a:hover {
	color: blue;
	text-decoration: underline;
}
.cbb_p {
	font-size: 110%;
	font-weight: bold;
}
.amazon_link {
	text-align: right;
	margin: 4px 4px 0 0;
}
.amazon_link a {
	color: #ff4500;
}
.amazon_link a:hover {
	color: #cf1500;
}

/* -------------------------------------------------------
   good bottom
   ------------------------------------------------------- */
.good_bottom {
	color: #fff;
	font-weight: bold;
	background-color: #B00742;
	cursor: pointer;
	padding: 5px 10px;
	border-radius: 5px;
}
.gooded_bottom {
	color: #fff;
	font-weight: bold;
	background-color: #444;
	padding: 5px 10px;
	border-radius: 5px;
}

/* -------------------------------------------------------
   bottom menu (fixed footer nav)
   ------------------------------------------------------- */
.bottom_clog {
	height: 90px;
}
.bottom_menu {
	position: fixed;
	left: 0px;
	bottom: 0;
	width: 100%;
	height: 89px;
	background-color: #fff;
	border-top: solid #000 1px;
	box-shadow: 0 -1px 5px 0 rgba(0,0,0,0.3);
	z-index: 100;
}
.bm_inner_cnt {
	display: flex;
	justify-content: space-around;
	align-items: center;
	max-width: 1080px;
	height: 90px;
	margin: 0 auto;
}
.bm_ic_minibox {
	text-align: center;
	margin: 0 1%;
}
.bm_ic_obtn {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 2.5em;
	color: #fff;
	font-size: small;
	background-color: #E65100;
	border: none;
	font-weight: bold;
	border-radius: 8px;
	padding: 8px 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.1s;
}
.bm_ic_obtn:hover {
	color: #fff;
	background-color: #BF360C;
	transform: translateY(-1px);
	text-decoration: none;
}
.bm_ic_bbtn {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 2.5em;
	color: #fff;
	font-size: small;
	background-color: #1565C0;
	border: none;
	font-weight: bold;
	border-radius: 8px;
	padding: 8px 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.1s;
}
.bm_ic_bbtn:hover {
	color: #fff;
	background-color: #0D47A1;
	transform: translateY(-1px);
	text-decoration: none;
}
.bm_ic_tbtn {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 2.5em;
	color: #fff;
	font-size: small;
	background-color: #0047C7;
	border: none;
	font-weight: bold;
	border-radius: 8px;
	padding: 8px 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.1s;
}
.bm_ic_tbtn:hover {
	color: #fff;
	background-color: #00236B;
	transform: translateY(-1px);
	text-decoration: none;
}
.bm_ic_tbtn img {
	width: auto;
	height: 1em;
	vertical-align: middle;
}
.bm_ic_elevat {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 2.5em;
	color: #fff;
	font-size: small;
	text-decoration: none;
	padding: 8px 4px;
	border-radius: 8px;
	background-color: #0288D1;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s, transform 0.1s;
}
.bm_ic_elevat:hover {
	background-color: #01579B;
	transform: translateY(-1px);
}
.bm_ic_msize  { width: calc(18% - 4px); }
.bm_ic_ssize1 { width: calc(8% - 4px); }
.bm_ic_ssize2 { width: calc(8% - 4px); }
.bm_ic_fsize  { font-size: small; }
@media screen and (max-width: 660px) {
	.bm_ic_minibox { margin: 0 0.7%; }
	.bm_ic_fsize   { font-size: x-small; }
	.bm_ic_msize   { width: calc(18.6% - 4px); }
	.bm_ic_ssize1  { width: calc(8.6% - 4px); }
	.bm_ic_ssize2  { width: calc(8.6% - 4px); }
	.bm_ic_obtn    { min-height: 3.5em; }
	.bm_ic_bbtn    { min-height: 3.5em; }
	.bm_ic_tbtn    { min-height: 3.5em; }
	.bm_ic_elevat  { min-height: 3.5em; }
}
@media screen and (max-width: 500px) {
	.bm_ic_minibox { margin: 0 0.5%; }
	.bm_ic_msize   { width: calc(19% - 4px); }
	.bm_ic_ssize1  { width: calc(19% - 4px); }
	.bm_ic_ssize2  { display: none !important; }
}

/* -------------------------------------------------------
   edit ranking — image setting box
   ------------------------------------------------------- */
.imgsetting_box {
	border: 1px solid #aaa;
	padding: 1em;
}
.isbox_img {
	max-width: 300px;
	max-height: 187px;
	background-color: #FFF;
	border: 2px solid #AAA;
	margin-bottom: 10px;
	overflow: hidden;
}
.isbox_img img {
	width: 100%;
	max-height: 187px;
	object-fit: cover;
}
.isbox_img_hr {
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-bottom: dotted #AAA 1px;
	margin: 1em 0;
}

/* -------------------------------------------------------
   YouTube play button overlay
   ------------------------------------------------------- */
.rb_img .img_yu:after {
	content: '▶';
	position: absolute;
	display: inline-block;
	font-size: small;
	color: #fff;
	top: calc(50% - 1.2em);
	left: calc(50% - 1.2em);
	vertical-align: middle;
	padding: .4em 1em;
	background-color: rgba(0,0,0,0.6);
	border-radius: .8em;
	z-index: 2;
}
.rmb_img .img_yu:after {
	content: '▶';
	position: absolute;
	display: inline-block;
	font-size: x-small;
	color: #fff;
	top: -31px;
	left: calc(50% - 1.2em);
	vertical-align: middle;
	padding: .4em 1em;
	background-color: rgba(0,0,0,0.6);
	border-radius: .8em;
	z-index: 2;
}
.mrb_img .img_yu:after {
	content: '▶';
	position: absolute;
	display: inline-block;
	font-size: x-small;
	color: #fff;
	top: -41px;
	left: calc(50% - 1.2em);
	vertical-align: middle;
	padding: .4em 1em;
	background-color: rgba(0,0,0,0.6);
	border-radius: .8em;
	z-index: 2;
}

/* -------------------------------------------------------
   ranking tab
   ------------------------------------------------------- */
.tab_name_m:after  { content: '動画'; }
.tab_name_t:after  { content: 'ツイート'; }
.tab_name_i:after  { content: '画像'; }
.ranking_tab_box {
	padding: 0 1em;
	margin: 10px 5% 0 5%;
}
.ranking_tab {
	display: inline-block;
	top: 2px;
	color: #000;
	background-color: #e6e6e6;
	padding: 0.5em 1em;
	border-top: solid 1px #111;
	border-left: solid 1px #111;
	border-right: solid 1px #111;
	margin-left: .5em;
	z-index: 2;
	cursor: pointer;
}
.ranking_tab:hover {
	background-color: #f0f8ff;
}
.ranking_tab_selected {
	background-color: #fff;
}

/* -------------------------------------------------------
   ranking top quote box / YouTube frame
   ------------------------------------------------------- */
.ranking_top_quote_box {
	max-width: 400px;
	max-height: 250px;
	text-align: center;
	margin: 5px auto 10px auto;
	overflow: hidden;
	position: relative;
}
.ranking_top_quote_box a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 400px;
	height: 250px;
}
.ranking_top_quote_box img {
	width: auto;
	max-height: 250px;
	object-fit: contain;
}
.ranking_top_quote_box .img_yu:after {
	content: '▶';
	position: absolute;
	display: inline-block;
	font-size: small;
	color: #fff;
	left: calc(50% - 1.5em);
	top: calc(50% - 1.4em);
	vertical-align: middle;
	padding: .4em 1em;
	background-color: rgba(0,0,0,0.6);
	border-radius: .8em;
	z-index: 2;
}
#movie_frm_box {
	position: fixed;
	height: auto;
	top: 30px;
	text-align: right;
	padding: 20px;
	border: solid #000 1px;
	border-radius: 5px;
	background-color: #fff;
	z-index: 10;
}
@media screen and (min-width: 743px) {
	#movie_frm_box {
		width: 700px;
		left: calc(50% - 371px);
	}
}
@media screen and (max-width: 742px) {
	#movie_frm_box {
		width: calc(100% - 42px);
		max-width: 700px;
	}
}
#movie_frm_box img {
	cursor: pointer;
}
.yufrm_wrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
.yufrm_wrapper iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.youtube_button_box {
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.youtube_button_box img {
	object-fit: contain;
}

/* -------------------------------------------------------
   content labels (CSS :after text labels)
   ------------------------------------------------------- */
.favorite_on:after   { content: 'お気に入りを登録する'; }
.favorite_off:after  { content: 'お気に入りを解除する'; }
.edit_ranking:after  { content: 'ランキングを編集する'; }
.change_image:after  { content: 'YouTube／表紙画像の変更'; }
.edit_item:after     { content: '投票項目を編集する'; }
.change_i_image:after{ content: '参照画像等を変更する'; }
@media screen and (max-width: 949px) {
	.favorite_on:after   { content: 'お気に入り登録'; }
	.favorite_off:after  { content: 'お気に入り解除'; }
	.edit_ranking:after  { content: '編集'; }
	.change_image:after  { content: '変更'; }
	.edit_item:after     { content: '編集'; }
	.change_i_image:after{ content: '変更'; }
}
.twitter-tweet {
	margin: 0 auto;
}
.icmt_rollbox {
	max-width: 400px;
	height: 1.2em;
	font-size: 20px;
	padding: 2px 0 5px 0;
	margin: 0 auto;
	overflow: hidden;
}
.no_image_cmt:after  { content: "画像はありません。画像提供にご協力ください。"; color: #aaa; }
.no_movie_cmt:after  { content: "動画はありません。リンク提供にご協力ください。"; color: #aaa; }
.no_tweet_cmt:after  { content: "ツイートはありません。埋め込み提供にご協力ください。"; color: #aaa; }

/* -------------------------------------------------------
   rnk block (ranking description block)
   ------------------------------------------------------- */
.rnd_des_block .ttl {
	font-size: large;
	font-weight: bold;
	border-bottom: dotted 1px #aaa;
}
@media screen and (min-width: 500px) {
	.rnd_des_block {
		display: flex;
		height: 142px;
		align-self: stretch;
		margin: 1em 0;
		overflow: hidden;
		position: relative;
	}
	.rnd_des_block .img {
		width: 227px;
	}
	.rnd_des_block .txt {
		flex: 1;
		width: calc(100% - 10px);
		margin-left: 10px;
	}
	.rnd_des_block .des {
		height: 6em;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.rnd_des_block .oth {
		position: absolute;
		bottom: 0;
		width: calc(100% - 1em);
		font-size: small;
		background-color: #f0f8ff;
		padding: 0.3em 0.5em;
	}
	.rnd_des_block .ttl {
		margin-bottom: 5px;
	}
}
@media screen and (max-width: 499px) {
	.rnd_des_block {
		margin: 1em 0;
	}
	.rnd_des_block .img {
		width: 100%;
	}
	.rnd_des_block .txt {
		width: 100%;
	}
	.rnd_des_block .des {
		max-height: 3em;
		font-size: small;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-bottom: 1em;
	}
	.rnd_des_block .oth {
		width: calc(100% - 1em);
		font-size: small;
		background-color: #f0f8ff;
		padding: 0.3em 0.5em;
	}
	.rnd_des_block .ttl {
		padding: 3px 0;
		margin-bottom: 5px;
	}
}
@media screen and (max-width: 599px) {
	.rnd_des_block .ttl {
		font-size: medium;
	}
}
.rnd_des_block .img      { font-size: 0; }
.rnd_des_block .img_yu   { font-size: small; }
.rnd_des_block .acc_vote { font-size: small; }
.rnd_des_block .end_vote { font-size: small; }
.rnd_des_block a         { text-decoration: none; }
.rnd_des_block a:hover   { text-decoration: underline; }
.vtoncmt:after    { content: "投票することでコメント投稿できます"; }
.vtorlioncmt:after{ content: "投票かログインでコメント投稿できます"; }
.cntincmt:after   { content: "コメント"; }
.summarytxt:after { content: "概要"; }
.nimg {
	display: block;
	color: #ddd;
	text-align: center;
	padding: 10px 0;
	text-decoration: none;
}
.nimg .nis {
	font-size: x-small;
	font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
	margin-bottom: 2px;
}
.nimg .nil {
	font-size: x-large;
	font-weight: bold;
	font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}

/* -------------------------------------------------------
   game data table
   ------------------------------------------------------- */
.game_data_table {
	width: 100%;
	border-top: 1px dotted #ccc;
	margin-bottom: 1em;
}
.game_data_table th {
	max-width: 100px;
	text-align: left;
	padding: .5em;
	border-bottom: 1px dotted #ccc;
}
.game_data_table td {
	text-align: left;
	padding: .5em;
	border-bottom: 1px dotted #ccc;
}

/* -------------------------------------------------------
   ad art box
   ------------------------------------------------------- */
@media screen and (min-width: 601px) {
	.ad_artbox {
		border: 1px solid;
		border-image: url(../images/border-quote.png?2) 33.33% / 13px 13px repeat;
		padding: 15px 5px;
		margin-bottom: 60px;
		margin-left: calc(5% + 3px);
		margin-right: calc(5% + 10px);
	}
	.ad_artbox div {
		width: 300px;
		height: 250px;
		background-image: url(../images/adb01.png);
		background-repeat: no-repeat;
		margin: 0 auto;
	}
}
@media screen and (max-width: 600px) {
	.ad_artbox {
		margin-top: 20px;
		margin-bottom: 30px;
	}
	.nimg > .nil {
		font-size: large;
	}
}
.rectangle_box {
	width: 300px;
	height: 250px;
	text-align: center;
	margin: 0 auto;
}

/* -------------------------------------------------------
   add item input
   ------------------------------------------------------- */
.add_item_input {
	width: 100%;
	margin-top: .5em;
}

/* -------------------------------------------------------
   exparea (user profile layout)
   ------------------------------------------------------- */
@media screen and (min-width: 800px) {
	.exparea {
		display: flex;
		align-items: stretch;
	}
	.exparea_l {
		flex: 1;
	}
	.exparea_r {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 5px;
	}
	.exparea_rt {
		text-align: right;
	}
	.exparea_rb {
		margin-top: 20px;
	}
}
@media screen and (max-width: 800px) {
	.exparea {
		display: block;
	}
	.exparea_l {
		flex: 0;
	}
	.exparea_r {
		width: 100%;
		text-align: right;
		margin: 0;
	}
	.exparea_rt {
		width: 100%;
		margin: 0;
	}
	.exparea_rb {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 0;
	}
}

/* -------------------------------------------------------
   two column
   ------------------------------------------------------- */
.two_column {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 500px) {
	.two_column {
		display: block;
	}
}

/* -------------------------------------------------------
   comment box helper classes
   ------------------------------------------------------- */
.cmt_box       { border: 1px solid #555; padding: 10px; margin: 10px 5%; }
.cmt_box_inner { border: 1px solid #555; padding: 10px; margin: 10px 0; }
.cmt_box_top   { border-top: 1px solid #555; padding-top: 10px; margin-top: 10px; }
.cmt_empty_msg { color: #444; margin: 46px 0; text-align: center; }
.cmt_empty_sub { color: #444; margin: 8px 0 46px 0; text-align: center; }
.cmt_err_msg   { color: #9D102E; margin: 10px 0; text-align: center; }
.cmt_err_inline{ color: red; margin: 50px 0; text-align: center; }
.cmt_meta      { color: #555; font-size: x-small; }
.cmt_author_name { font-weight: bold; margin: 0 10px; }
.cmt_link_blue { color: blue; text-decoration: none; }
.cmt_pre       { width: 100%; white-space: pre-wrap; }
.sex_m { color: blue; }
.sex_f { color: #9D102E; }
.cmtbox_form {
	background-color: #FFFEF0;
	border: 1px solid #E0D860;
	border-radius: 8px;
	padding: 16px 5%;
	margin-bottom: 20px;
}
.req_star { color: #9D102E; font-weight: bold; }
.inp_label { display: inline-flex; align-items: center; gap: 4px; margin: 6px 16px 6px 0; min-height: 36px; }
.inp_s { padding: 0; width: auto; accent-color: #1565C0; }
.form_section_h { font-size: large; margin-top: 10px; font-weight: bold; text-align: center; }
.brand_err { color: #9D102E; text-align: center; }
.brand_mr { color: #9D102E; margin-right: .5em; }
.cmtbox_textarea {
	padding: 8px 12px;
	width: 100%;
	height: 14em;
	resize: vertical;
	box-sizing: border-box;
}
.submit_w {
	min-width: 160px;
	width: auto;
	padding: 12px 24px;
}
@media screen and (max-width: 480px) {
	.submit_w { width: 100%; }
}
.adjust_box { display: block; }

/* -------------------------------------------------------
   mobile form / touch target overrides
   ------------------------------------------------------- */
@media screen and (max-width: 640px) {
	/* rib ボタン群: スマホで全幅 */
	.rib_vote input[type="button"],
	.rib_add input[type="submit"],
	.rib_dital input[type="button"] {
		width: 100%;
		padding: 14px 20px;
	}
	/* 大ボタン: スマホで全幅 */
	.m_b_buttom, .m_r_buttom, .m_o_buttom, .m_g_buttom, .m_ga_buttom {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}
}

/* ボタンタグの基本リセット（form外でも統一） */
button.m_b_buttom, button.m_r_buttom, button.m_o_buttom,
button.m_g_buttom, button.m_ga_buttom {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: inherit;
}