@charset "utf-8";

/* default */

body {
	font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, 'Arial', '游ゴシック', YuGothic,
		'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	color: #222;
	font-size: 16px;
	line-height: 1.5em;
	background-color: #f2f2f2;
	word-break: break-all;
}

.mincho {
	font-family: 'ryo-display-plusn', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝',
		'MS PMincho', serif;
	font-size: 2.2rem;
	line-height: 1em;
}

a {
	color: #1558d6;
}

a:hover {
	color: #000d99;
}
.has-text-primary {
	color: #0081d3 !important;
}
* {
	box-sizing: border-box;
}

a,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}

::selection {
	color: #fff;
	background: #d3182b;
}
.frem {
	font-size: 16px !important;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

.slider-area li:before {
	content: none;
}

h2 {
	position: relative;
	background-color: #0081d3;
	color: #fff;
	overflow: hidden;
	padding: 0.8rem 1rem;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

h3 {
	position: relative;
	font-size: 1.3rem;
	overflow: hidden;
	padding: 0.5rem 0;
	margin-bottom: 2rem;
	line-height: 1.3;
	font-weight: bold;
}

h3::before,
h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
}

h3:before {
	border-bottom: 4px solid #d3182b;
	width: 5em;
	z-index: 10;
}

h3:after {
	border-bottom: 4px solid #e6e6e6;
	width: 100%;
	display: block;
}

h4 {
	font-size: 1.2rem;
	border-left: 5px solid #d3182b;
	padding-left: 10px;
	margin-bottom: 0.5rem;
}

h5 {
	font-size: 1.2rem;
	font-weight: bold;
	color: #0c1454;
	margin-bottom: 0.5rem;
}

h6 {
	font-size: 1.1rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

ul {
	padding-left: 1.5em;
	margin: 1em 0 2em;
}

ul.inline li {
	display: inline-block;
	margin-right: 2.5em;
}

p,
dd {
	margin: 0 0 1em;
}

strong {
	font-size: 1.1em;
	font-weight: bold;
	color: #54a3d6;
}

hr {
	clear: both;
	margin: 4em 0;
}

table {
	max-width: 100%;
	width: 100%;
	table-layout: fixed;
	margin: 1em 0;
	vertical-align: middle;
	font-size: 0.9rem;
}

table th {
	text-align: center;
	width: 30%;
	background-color: #d3182b;
	vertical-align: middle;
	padding: 1em;
	color: #fff;
	border: 1px solid #ddd;
}

table td {
	vertical-align: middle;
	padding: 1rem;
	border: 1px solid #ddd;
	line-height: 1.5;
	background-color: #fff;
}

.table td,
.table th {
	padding: 1rem;
	vertical-align: middle;
}
@media (max-width: 640px) {
	table.sp-block,
	table.sp-block thead,
	table.sp-block tbody,
	table.sp-block tr,
	table.sp-block th,
	table.sp-block td {
		display: block;
		width: auto !important;
	}
	table.sp-block th {
		border-bottom: none;
		padding: 0.4em 0;
	}
	table.sp-block td {
		border-bottom: none;
	}
	table.sp-block {
		border-bottom: 1px solid #ddd;
	}
	nav .logo {
		width: 40%;
	}
}

table ul {
	padding: 0;
}

/* header */

header {
	box-shadow: 0 4px 5px rgba(0, 0, 0, 0.08);
	position: fixed;
	width: 100%;
	background-color: #fff;
	z-index: 100;
	top: 0;
	left: 0;
}

header .navbar-brand {
	display: block;
}

header .navbar-item {
	display: block;
}

header .navbar-item span.is-size-7 {
	font-size: 0.8rem;
	color: #d3182b;
	display: block;
}

header nav {
	display: flex;
	flex-wrap: wrap;
	/* Safari */
	justify-content: space-between;
	align-items: center;
}

header nav .logo {
	padding-left: 1rem;
}

/* end/header */

/* hero */

.hero {
	margin-top: 72px;
	overflow: hidden;
	position: relative;
}

@media screen and (max-width: 1000px) {
	.hero {
		margin-top: 60px;
	}
}

.hero h1 {
	position: absolute;
	top: 14%;
	left: 9%;
	font-size: 4.8vw;
	font-weight: bold;
	line-height: 1.5;
	color: #fff;
}

.hero .sub h1 {
	top: 50%;
	margin-top: -1em;
}

.hero .main_img img {
	width: 100%;
}

@media screen and (min-width: 1600px) {
	.hero h1 {
		font-size: 66px;
	}
}

/* end/hero */

/* main */

main {
	position: relative;
	max-width: 1200px;
	margin: 2rem auto 0;
	background: #fff;
	width: 96%;
}

.main {
	display: flex;
	/* Safari */
	justify-content: space-between;
}

.main .main_col {
	width: 68%;
	padding: 1.5rem;
	border-right: 1px dotted #cacaca;
}

main h2.rank_title {
	font-size: 2.1vw;
	font-weight: bold;
	margin: 0;
	background: none;
	color: #222;
	padding: 0;
	display: block;
	background: linear-gradient(transparent 80%, #ffdfb8 20%) left -0.7em;
}
main h2.rank_title:after {
	display: block;
	content: '';
	width: 100%;
	height: 1.5rem;
}

main h2.rank_title:before {
	content: none;
}

main h2.rank_title svg {
	color: #fff40e;
	font-size: 3vw;
}

@media screen and (min-width: 1300px) {
	.main .main_col h2 {
		font-size: 26px;
	}
	main h2.rank_title svg {
		color: #fff40e;
		font-size: 50px;
	}
}

.main .side_col {
	/* width: 32%; */
	width: 100%;
	padding: 1.5rem;
}

/* rank_area */

.rank {
	background-color: #edf8ff;
	position: relative;
	margin-bottom: 3rem;
}

.rank_number {
	position: absolute;
	top: -6px;
	left: 25px;
	width: 60px;
	padding: 10px 0;
	text-align: center;
	border-top-left-radius: 3px;
	color: #ffffff;
	background: #0081d3;
}

.rank_number svg {
	color: #fff40e;
	font-size: 27px;
	display: block;
	margin: 0 auto;
}

.rank_number:before {
	top: 0.1px;
	right: -6px;
	width: 0;
	height: 0;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #133246;
}

.rank_number:before,
.rank_number:after {
	position: absolute;
	content: '';
}

.rank_number:after {
	bottom: -28.5px;
	left: 0;
	width: 0;
	height: 0;
	border-right: 30px solid #0081d3;
	border-bottom: 30px solid transparent;
	border-left: 30px solid #0081d3;
}

.rank h3 {
	font-size: 1.8rem;
	line-height: 1.2;
	font-weight: bold;
	padding: 2rem 0 2rem 100px;
	margin: 0;
}

.rank h3:before,
.rank h3:after {
	content: none;
}

.rank_middle {
	margin: 1rem 0;
	padding: 0 1.5rem;
	display: flex;
	flex-wrap: wrap;
	/* Safari */
	justify-content: space-between;
}

.rank_middle .rank_img {
	width: 48%;
}

.rank_middle .rank_lead {
	width: 48%;
}

.rank_bottom {
	margin: 1rem 0;
	padding: 0 1.5rem 1.5rem;
}

.rank_bottom th {
	width: 10em;
}

.search .more {
	display: inline-block;
}

.search .more:focus {
	outline: none;
}

.more,
.site {
	display: block;
	text-align: center;
	background-color: #d3182b;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 1rem 24px;
	border: none;
	border-radius: 4px;
	border-bottom: 4px solid #340005;
	transition: 0.4s;
}

.site {
	background-color: #ff5d00;
	border-bottom: 4px solid #cc5a00;
}

.more:active,
.site:active {
	transform: translateY(4px);
	border-bottom: none;
}

.more:hover {
	background-color: #340005;
	color: #fff;
}

.site:hover {
	background-color: #c17300;
	color: #fff;
}

.more,
.sitez {
	display: block;
	text-align: center;
	background-color: #d3182b;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 1rem 24px;
	border: none;
	border-radius: 4px;
	border-bottom: 4px solid #340005;
	transition: 0.4s;
}

.sitez {
	background-color: #c6b300;
	border-bottom: 4px solid #9d9400;
}

.more:active,
.sitez:active {
	transform: translateY(4px);
	border-bottom: none;
}

.more:hover {
	background-color: #342e00;
	color: #fff;
}

.sitez:hover {
	background-color: #c1a400;
	color: #fff;
}

.more,
.sitec {
	display: block;
	text-align: center;
	background-color: #d3182b;
	font-size: 16px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	padding: 1rem 24px;
	border: none;
	border-radius: 4px;
	border-bottom: 4px solid #340005;
	transition: 0.4s;
}

.sitec {
	background-color: #00a725;
	border-bottom: 4px solid #005304;
}

.more:active,
.sitec:active {
	transform: translateY(4px);
	border-bottom: none;
}

.more:hover {
	background-color: #003405;
	color: #fff;
}

.sitec:hover {
	background-color: #17c200;
	color: #fff;
}

/*光る演出*/

.site {
	position: relative;
	overflow: hidden;
	max-width: 340px;
	margin: 0 auto;
}

.site:after {
	content: '';
	height: 100%;
	width: 30px;
	position: absolute;
	top: -180px;
	left: 0;
	background-color: #fff;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflection 3s ease-in-out infinite;
}

.sitez {
	position: relative;
	overflow: hidden;
	max-width: 340px;
	margin: 0 auto;
}

.sitez:after {
	content: '';
	height: 100%;
	width: 30px;
	position: absolute;
	top: -180px;
	left: 0;
	background-color: #fff;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflection 3s ease-in-out infinite;
}

.sitec {
	position: relative;
	overflow: hidden;
	max-width: 340px;
	margin: 0 auto;
}

.sitec:after {
	content: '';
	height: 100%;
	width: 30px;
	position: absolute;
	top: -180px;
	left: 0;
	background-color: #fff;
	opacity: 0;
	transform: rotate(45deg);
	animation: reflection 3s ease-in-out infinite;
}

@keyframes reflection {
	0% {
		transform: scale(0) rotate(45deg);
		opacity: 0;
	}
	80% {
		transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}
	81% {
		transform: scale(4) rotate(45deg);
		opacity: 1;
	}
	100% {
		transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}

.textLinkList{
  max-width: 340px;
  margin: 2em auto;
}

.textLinkList li{
  margin-bottom: 1em;
}

.textLinkList li:last-of-type{
  margin-bottom: initial;
}

.btn_area {
	min-height: 5rem;
}

.rank .table {
	border: 1px solid #ddd;
}

.rank .table th {
	width: 10.2em;
	background-color: #eee;
	text-align: center;
	padding: 1rem 0.5em;
	line-height: 1.5;
}
.rank .table td {
	padding: 1rem 0.5em;
}
.rank .table .is-selected {
	font-size: 1.4rem;
	text-align: center;
	background-color: #fff1d6;
	color: #d3182b;
	font-weight: bold;
}

.rank .table strong {
	color: #363636;
	font-size: 1rem;
}
@media screen and (max-width: 640px) {
	.rank .table {
		font-size: 0.8em;
	}
	.rank .table th {
		width: 6em;
		background-color: #eee;
		text-align: center;
		padding: 1rem 0.3em;
	}
	.rank .table td {
		padding: 1rem 0.3em;
	}

	.rank .table .is-selected strong {
		font-size: 1.4rem;
	}
}

/* end/rank_area */

/* osusume */

.cp_point {
	position: relative;
	margin: 2rem 0;
	padding: 2rem 1.5rem 1.5rem;
	border: 3px double #da3c41;
	background-color: #fffafa;
	border-radius: 10px;
}

.cp_point li {
	position: relative;
	padding: 0 0 0 1.5em;
	margin-bottom: 1em;
	list-style-type: none;
}

.cp_point li svg {
	color: #da3c41;
	position: absolute;
	top: 0.4em;
	left: 0;
}

.osusume {
	position: relative;
}

.osusume h4 {
	display: inline-block;
	position: absolute;
	top: -1em;
	left: 1rem;
	z-index: 10;
	color: #fff;
	background-color: #da3c41;
	border-radius: 20px;
	padding: 0.2em 1em 0.3em 2.5em;
	overflow: hidden;
	border-left: none;
}

.osusume h4 span {
	position: absolute;
	top: 0.1em;
	left: 0.3em;
	width: 1.8em;
	text-align: center;
	color: #fff;
	font-size: 1.3rem;
}

.maker {
	font-size: 1.2rem;
	font-weight: bold;
	position: relative;
	background: linear-gradient(transparent 60%, #ffff66 60%);
	background-size: 100% 50%;
	background-position: left 0.5em;
	background-repeat: no-repeat;
}

/* end/osusume */

/* voice */

/*クリップメモ*/

.clip-memobox {
	display: table;
	background: #f3f3f3;
	border-radius: 3px;
	margin-bottom: 1rem;
	padding: 1rem 0.5rem;
}

.clip-fonticon,
.clip-memotext {
	display: table-cell;
	vertical-align: middle;
}

.clip-fonticon {
	padding: 0 0.8rem 0 0.5rem;
	text-align: center;
}

.clip-memotext p:last-child {
	margin-bottom: 0;
}

.clip-memotext p {
	margin-bottom: 1rem;
}

.clip-memotext {
	padding-left: 0.8rem;
	border-left: 1px solid #e0e0e0;
	width: 100%;
	box-sizing: border-box;
}

/*ミニふきだし*/

.post .st-minihukidashi,
.st-minihukidashi {
	font-size: 100%;
	display: inline-block;
	position: relative;
	background: #f3f3f3;
	line-height: 1.4;
	margin-bottom: 20px;
	padding: 10px 20px;
	border-radius: 20px;
	z-index: 2;
}

.post .st-minihukidashi span,
.st-minihukidashi span {
	content: '';
	position: absolute;
	margin-left: -10px;
	border: 10px solid transparent;
	border-top: 10px solid #f3f3f3;
	top: 100%;
	left: 40px;
}

.st-minihukidashi .fa {
	margin-right: 5px;
}

.voice_men .st-minihukidashi {
	background: #74b4e2;
	color: #fff;
	font-size: 0.8rem;
	margin: 0 0 0 -9px;
}

.voice_men .st-minihukidashi span {
	border-top-color: #74b4e2;
}

.voice_men .clip-memobox {
	background-color: #e3f2fd;
}

.voice_men .clip-fonticon {
	color: #74b4e2;
	font-size: 2rem;
}

.voice_men .clip-memotext {
	border-color: #74b4e2;
}

.voice_none .st-minihukidashi {
	background: #949494;
	color: #fff;
	font-size: 0.8rem;
	margin: 0 0 0 -9px;
}

.voice_none .st-minihukidashi span {
	border-top-color: #949494;
}

.voice_none .clip-memobox {
	background-color: #ececec;
}

.voice_none .clip-fonticon {
	color: #949494;
	font-size: 2rem;
}

.voice_none .clip-memotext {
	border-color: #949494;
}

.voice_women .st-minihukidashi {
	background: #fc9d9d;
	color: #fff;
	font-size: 0.8rem;
	margin: 0 0 0 -9px;
}

.voice_women .st-minihukidashi span {
	border-top-color: #fc9d9d;
}

.voice_women .clip-memobox {
	background-color: #fce4ec;
}

.voice_women .clip-fonticon {
	color: #fc9d9d;
	font-size: 2rem;
}

.voice_women .clip-memotext {
	border-color: #fc9d9d;
}

/* end/voice */

/* end/main */

/* search */

.search {
	background-color: #0081d3;
	padding: 0;
	transition: 0.4s;
}

.search.open {
	padding: 0 0 2rem;
}

.search h2 {
	font-size: 2rem;
	font-weight: bold;
	color: #fff;
	margin: 0;
	padding: 2rem 1.5rem;
	cursor: pointer;
	transition: 0.4s;
}

.search h2:hover {
	background-color: #0081d3;
}

.search h2 .plus {
	float: right;
	transition: 0.2s;
}

.search h2.open .plus {
	transform: rotateZ(45deg);
	transform-origin: 50% 50%;
}

.search h2:before {
	content: none;
}

.search_area {
	background-color: #fff;
	padding: 1rem;
	margin: 0 1.5rem;
}

/* end/search */

/* side_rank */

.side_col .rank_img a {
	color: #222;
}

.side_col .rank_img a svg {
	color: #fff40e;
}

.side_rank h3 {
	margin: 0;
}

.side_rank {
	border-top: 1px dotted #cacaca;
	margin-top: 2rem;
	padding-top: 2rem;
}

.side_rank ul {
	padding: 0;
	margin: 0;
}

.side_rank ul li a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid #e6e6e6;
	color: #222;
	transition: 0.4s;
}

.side_rank ul li a:hover {
	background-color: #dcdcdc;
}

.side_rank ul li .tmb {
	width: 20%;
}

.side_rank ul li .tmb img {
	border: 1px solid #eee;
}

.side_rank ul li h4 {
	width: 78%;
	border: none;
	font-size: 1.1rem;
}

.side_rank ul li h4 span {
	font-size: 1rem;
	display: block;
	font-weight: bold;
	color: #d3182b;
}

/* side_rank */

/* side_list */

.side_list {
	margin-top: 2rem;
}

.side_list h3 {
	margin: 0;
}

.side_list ul {
	padding: 0;
	margin: 0;
}

.side_list ul li a {
	display: block;
	padding: 1rem 2rem 1rem 0.5rem;
	position: relative;
	border-bottom: 1px solid #ececec;
	color: #222;
	transition: 0.4s;
}

.side_list ul li a svg {
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	right: 0.5rem;
	color: #d3182b;
}

.side_list ul li a:hover {
	background-color: #eef9ff;
}

/* side_list */

/* footer */

.footer {
	text-align: center;
	background-color: #0c1454;
	color: #fff;
	margin-top: 5rem;
}

.footer ul {
	margin: 0;
	padding: 0;
}

.footer ul li {
	display: inline-block;
	margin: 1rem;
}

.footer ul li a {
	color: #fff;
}

/* end/footer */

/* sub_page */

.list_item {
	padding-bottom: 2rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid #f3e5e5;
}

.list_item .tmb {
	margin-bottom: 1rem;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.flex .tmb {
	width: 40%;
	border: 1px solid #eee;
}
.flex .text {
	width: 58%;
}

@media screen and (max-width: 640px) {
	.flex .tmb {
		width: 60%;
		margin: 0 auto;
		border: 1px solid #eee;
	}
	.flex .text {
		width: 100%;
	}
}

.detail .main_col {
	padding: 0;
}

.detail .main_col .main_inner {
	padding: 1.5rem;
}

/* end/sub_page */

/* smartphone */

.cp_fullscreenmenu input {
	display: none;
}
.cp_fullscreenmenu ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/* Safari */
	justify-content: space-between;
}
.cp_fullscreenmenu ul li a {
	padding: 1.5rem 1rem;
	transition: 0.4s;
}
.cp_fullscreenmenu ul li a:hover {
	background-color: #00d1b2;
	color: #fff;
}
.menu .rank_menu a {
	color: #fff;
	background-color: #ff9800;
}
.menu .support a {
	color: #fff;
	background-color: #0081d3;
}
.menu .rank_menu a:hover {
	background-color: #ff6a00;
}
.menu .support a:hover {
	background-color: #00b1ff;
}
@media screen and (min-width: 1001px) {
	.sp-only {
		display: none;
	}
}
@media screen and (max-width: 1000px) {
	.pc-only {
		display: none;
	}
	.main {
		display: block;
	}
	.main .main_col {
		width: 100%;
		border-right: none;
	}
	.main .side_col {
		width: 100%;
	}
}
@media screen and (min-width: 769px) {
	.sp_fix_navi {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.logo .is-size-4 {
		font-size: 3.4vw !important;
	}
	.sp_fix_navi {
		background: rgba(0, 0, 0, 0.4);
		padding: 9px 0 10px 0;
		position: fixed;
		z-index: 9999;
		bottom: 0;
		width: 100%;
	}
}

@media screen and (max-width: 640px) {
	.logo .is-size-4 {
		font-size: 3vw !important;
	}
	header nav .logo {
		padding-left: 0.5rem;
	}
	.logo .has-text-primary {
		font-size: 2.1vw;
	}
	.cp_fullscreenmenu ul li a {
		font-size: 2.5vw;
		padding: 1rem;
		line-height: 1;
	}
	.cp_fullscreenmenu ul li a svg {
		display: block;
		font-size: 1.5em;
		margin: 0 auto 0.5rem;
	}
	.search h2 {
		font-size: 4.6vw;
		padding: 1rem 1.5rem;
	}
	main h2.rank_title {
		font-size: 1.5rem;
		line-height: 1.5;
	}
	main h2.rank_title svg {
		font-size: 2rem;
	}
	.main .main_col,
	.main .side_col {
		padding: 1.5rem 1rem;
	}
	.detail .main_col {
		padding: 0;
	}
	.detail .main_col .main_inner {
		padding: 1.5rem 1rem;
	}
	.rank_number {
		left: 15px;
	}
	.rank h3 {
		padding-left: 88px;
	}
	.rank_middle {
		padding: 0 0.5rem;
	}
	.rank_bottom {
		padding: 0 0.5rem 1.5rem;
	}
	.rank_middle .rank_img {
		width: 100%;
	}
	.rank_middle .rank_lead {
		width: 100%;
		margin-top: 0.5em;
	}
	.rank h3 {
		font-size: 1.3rem;
	}
	.footer {
		padding: 0 0 2rem;
	}
	.footer ul {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 2rem;
	}
	.footer ul li {
		width: 50%;
		margin: 0;
		font-size: 0.9rem;
	}
	.footer ul li a {
		display: block;
		padding: 1em 0;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
		background: #d3182b;
		color: #fff !important;
		font-size: 0.9rem;
	}
	.table.is-striped th {
		text-align: center;
		width: 9em;
		padding: 0.5rem;
	}
	.table.is-striped td {
		padding: 0.5rem;
	}
	.table.is-striped .is-selected {
		font-size: 1.3rem;
	}
	.more,
	.site,
	.sitez {
		padding: 1rem 0.5rem;
	}
	.cp_point {
		padding: 1rem 1rem 0;
	}
	.detail .main_col .main_inner {
		padding: 1.5rem 1rem;
	}
}

@media screen and (max-width: 480px) {
	body {
		font-size: 14px;
	}
	.section {
		padding: 0;
	}

	.main .main_col,
	.main .side_col {
		padding: 1.5rem 0.5rem;
	}
	.search_area {
		margin: 0 1rem;
		padding: 0.5rem;
	}
	h2 {
		font-size: 1.2rem;
	}
	.detail .main_col {
		padding: 0;
	}
	.detail .main_col .main_inner {
		padding: 1.5rem 0.5rem;
	}
}

.hikaku {
	overflow-x: scroll;
	margin-bottom: 2rem;
}
.hikaku table {
	table-layout: fixed;
	min-width: 1500px;
	width: 1070px;
	font-size: 0.8rem;
}
.hikaku table th {
	width: 11em;
	color: #222;
	font-weight: normal;
	padding: 1rem 0.5rem;
	background-color: #f3f3f3;
}
.hikaku table td {
	max-width: 8em;
	padding: 0.5rem 5px;
	text-align: center;
}
.hikaku table td a{
  text-decoration: underline;
}
.hikaku table td span {
	font-size: 1rem;
	font-weight: bold;
	color: #0081d3;
	background: linear-gradient(transparent 60%, #ffff66 60%);
}
.hikaku table tr:nth-of-type(1) td {
	font-size: 1rem;
	color: #d3182b;
	font-weight: bold;
	vertical-align: top;
}
.hikaku table tr:nth-of-type(1) td svg {
	display: block;
	margin: 0 auto;
	font-size: 1.5rem;
	color: #fff40e;
}
.hikaku table td .site,
.sitez,
.sitec {
	font-size: 0.8rem;
	padding: 1rem 0.2rem;
}
.hikaku table tr:nth-of-type(1) td:nth-of-type(1) svg {
	font-size: 3rem;
	color: #dcc64f;
}
.hikaku table tr:nth-of-type(1) td:nth-of-type(2) svg {
	font-size: 2.4rem;
	color: #bdbdbd;
}
.hikaku table tr:nth-of-type(1) td:nth-of-type(3) svg {
	font-size: 1.8rem;
	color: #d08446;
}
@media screen and (max-width: 640px) {
	.hikaku table {
		table-layout: fixed;
		min-width: 1000px;
		width: auto;
		font-size: 0.8rem;
	}
	.hikaku table th {
		width: 5em;
		color: #222;
		padding: 0.3rem 0.2em;
	}
	.hikaku table td {
		width: 7em;
		padding: 0.3rem 0.2em;
	}
}
.sort {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}
.sort span {
	display: block;
	width: 33%;
	text-align: center;
	border: 1px solid #ddd;
	border-left: none;
}
.sort span:first-child {
	border-left: 1px solid #ddd;
}
.sort span a {
	display: block;
	padding: 1rem 0.5rem;
	transition: 0.4s;
}
.sort span a:hover {
	background-color: #d3182b;
	color: #fff;
}

.search_area .has-text-centered span {
	display: block;
}
.select select {
	width: 18em;
}
.logo a {
	color: #222;
}
.logo .sub_title {
	color: #517d99;
}
.logo .diet {
	color: #d3182b;
}
.rank_btn {
	margin-bottom: 1rem;
}
.visual {
	margin-bottom: 2rem;
}