@charset "UTF-8";

/*========================================================================

  pedia

========================================================================*/

/*  top
========================================================================*/

.pedia-top {
	display: flex;
	flex-wrap: wrap;
}
.pedia-top .item {
	width: 33.33%;
	border-left: 1px solid #e5ded9;
}
.pedia-top .item a {
	display: block;
	height: 100%;
	padding: 10px 20px;
	border-radius: 4px;
}
.pedia-top .item a:hover {
	background: #f1edeb;
	text-decoration: none;
}
.pedia-top .image {
	text-align: center;
}
.pedia-top .image img {
	max-width: 200px;
}
.pedia-top .text {
	margin-top: 20px;
}
.pedia-top .data {
	display: flex;
	flex-wrap: wrap;
}
.pedia-top .category {
	margin-left: 10px;
	padding: 2px 10px 1px;
	background: #ea650d;
	color: #fff;
	font-size: 86%;
	border-radius: 4px;
}
.pedia-top h2 {
	margin-top: 15px;
	color: #414141;
	line-height: 1.8;
}
.pedia-top ul {
	display: flex;
	flex-wrap: wrap;
	margin: 10px -3px 0;
}
.pedia-top ul li {
	margin: 3px;
	padding: 2px 10px 1px;
	background: #fff;
	font-size: 86%;
	border: 1px solid #ee7f00;
	border-radius: 4px;
}

@media screen and (max-width: 767px) {
	.pedia-top {
		display: flex;
		flex-wrap: wrap;
	}
	.pedia-top .item {
		width: 100%;
		border-left: none;
	}
	.pedia-top .item:not(:first-child) {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #e5ded9;
	}
	.pedia-top .image img {
		max-width: 100%;
	}
}

/*  filter
========================================================================*/

.pedia-filter .result {
	margin-top: 40px;
	font-size: 129%;
	font-weight: bold;
}
.pedia-filter .result span {
	color: #ea650d;
	font-size: 145%;
	vertical-align: baseline;
}
.pedia-filter .filter {
	display: flex;
	flex-wrap: wrap;
	margin: 15px 0;
	border-top: 1px solid #e5ded9;
}
.pedia-filter .filter p {
	width: 170px;
	margin: 20px 10px 0 0;
	color: #ea650d;
	font-size: 129%;
	font-weight: bold;
}
.pedia-filter .filter ul {
	display: flex;
	flex-wrap: wrap;
	width: calc(100% - 180px);
	margin-top: 20px;
}
.pedia-filter .filter ul li {
	margin: 0 10px 10px 0;
	font-size: 115%;
	cursor: pointer;
	border-radius: 4px;
}
.pedia-filter .filter ul:not(.keyword) li {
	padding: 3px 19px 2px;
	background: #f1edeb;
}
.pedia-filter .filter ul:not(.keyword) li.active {
	background: #ea650d;
	color: #fff;
}
.pedia-filter .filter ul.keyword li {
	padding: 2px 19px 1px;
	border: 1px solid #e5ded9;
}
.pedia-filter .filter ul.keyword li.active {
	border: 1px solid #ee7f00;
}
.pedia-filter .item {
	border-top: 1px solid #e5ded9;
}
.pedia-filter .item a {
	display: flex;
	flex-wrap: wrap;
	padding: 20px 12px;
	border-radius: 4px;
}
.pedia-filter .item a:hover {
	background: #f1edeb;
	text-decoration: none;
}
.pedia-filter .item .image:not(:only-child) {
	width: 180px;
	text-align: center;
}
.pedia-filter .item .text:not(:only-child) {
	width: calc(100% - 200px);
	margin-left: auto;
}
.pedia-filter .item .data {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.pedia-filter .item .category {
	margin-left: 10px;
	padding: 2px 10px 1px;
	background: #f1edeb;
	font-size: 86%;
	border: 1px solid #a79696;
	border-radius: 4px;
}
.pedia-filter .item h2 {
	margin-top: 17px;
	color: #414141;
	font-size: 100%;
}
.pedia-filter .item ul {
	display: flex;
	flex-wrap: wrap;
	margin: 17px -3px 0;
}
.pedia-filter .item li {
	margin: 3px;
	padding: 2px 10px 1px;
	background: #fff;
	font-size: 86%;
	text-align: center;
	border: 1px solid #e5ded9;
	border-radius: 4px;
}
.pedia-filter .item .active {
	background: #ea650d;
	color: #fff;
	border-color: #ea650d;
}
.pedia-filter .button {
	width: 100%;
	max-width: 280px;
	margin: 20px auto 0;
	padding: 10px;
	background: #e5ded9;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
}

@media screen and (max-width: 767px) {
	.pedia-filter .result {
		margin-top: 20px;
	}
	.pedia-filter .filter p {
		width: 100%;
	}
	.pedia-filter .filter ul {
		width: 100%;
	}
	.pedia-filter .filter ul li {
		font-size: 110%;
	}
	.pedia-filter .item {
		border-top: none;
	}
	.pedia-filter .item + .item {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid #e5ded9;
	}
	.pedia-filter .item .image:not(:only-child) {
		width: 100%;
	}
	.pedia-filter .item .text:not(:only-child) {
		width: 100%;
		margin-top: 20px;
	}
}

/*  banner
========================================================================*/

.pedia-banner {
	background: #f1edeb;
}
.pedia-banner:not(:first-child) {
	margin-top: 50px;
}
.pedia-banner > div {
	display: block;
	width: calc(100% - 40px);
	max-width: 960px;
	margin: 0 auto;
	padding: 25px 0;
}
.pedia-banner ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.pedia-banner li {
	margin: 0 20px;
}
.pedia-banner img {
	border-radius: 0;
}

@media screen and (max-width: 767px) {
	.pedia-banner {
		background: #f1edeb;
	}
	.pedia-banner:not(:first-child) {
		margin-top: 50px;
	}
	.pedia-banner > div {
		padding-bottom: 80px;
	}
	.pedia-banner li {
		width: 100%;
		margin: 0;
		text-align: center;
	}
	.pedia-banner li:not(:first-child) {
		margin-top: 10px;
	}
}

/*  navigation
========================================================================*/

.pedia-navigation + div {
	margin-top: 20px;
}

/*  data
========================================================================*/

.pedia-data {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.pedia-data .category {
	margin-left: 10px;
	padding: 2px 10px 1px;
	background: #ea650d;
	color: #fff;
	font-size: 86%;
	border-radius: 4px;
}

/*  title
========================================================================*/

.pedia-h1,
.pedia-h2 {
	margin-top: 15px;
}
.pedia-h1 + div,
.pedia-h2 + div {
	margin-top: 10px;
}
.pedia-h1 + .pedia-h2 {
	margin-top: 0;
}

/*  keyword
========================================================================*/

.pedia-keyword ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -3px;
}
.pedia-keyword li {
	margin: 3px;
	padding: 2px 10px 1px;
	background: #fff;
	font-size: 86%;
	text-align: center;
	border: 1px solid #ee7f00;
	border-radius: 4px;
}

/*  sns
========================================================================*/

.pedia-sns:not(:first-child) {
	margin-top: 30px;
}
.pedia-sns ul {
	display: flex;
	margin: 0 -2px;
}
.pedia-sns li {
	margin: 0 2px;
}

/*  config
========================================================================*/

.pedia-config {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto 20px;
	padding: 10px;
	border: 5px solid #333;
}
.pedia-config h2 {
	width: 100%;
	margin-bottom: 15px;
	padding: 10px;
	background: #333;
	color: #fff;
	font-size: 135%;
	text-align: center;
}
.pedia-config .box {
	width: 240px;
}
.pedia-config .box + .box {
	width: calc(100% - 255px);
	margin-left: auto;
}
.pedia-config h3 {
	padding: 7px 13px;
	background: #eee;
	color: #414141;
	border-left: 2px solid #414141;
}
.pedia-config p {
	margin: 10px 0 15px;
}
.pedia-config .unentered {
	color: #e64415;
}
.pedia-config h2 + .box h3:first-child + p {
	text-align: center;
}
.pedia-config img {
	max-width: 100%!important;
}

@media screen and (max-width: 767px) {
	.pedia-config {
		max-width: 400px;
	}
	.pedia-config .box,
	.pedia-config .box + .box {
		width: 100%;
	}
}