/*-----------------------------------------------------	*/
/* All
/*-----------------------------------------------------	*/

* {
	box-sizing: border-box;
}

body {
	background-color: #ffffff;
	color: #000000;
	font-family: "Noto Sans JP";
	font-feature-settings: "palt";
	font-size: 0.875rem;
	font-weight: 500;
}

a {
	color: #00a7ea;
}

a:hover {
	opacity: 0.75;
	text-decoration: none;
}

a:hover img {
	opacity: 0.75;
}

span.btn {
	display: block;
	font-weight: normal;
	margin: 8px auto;
	max-width: 250px;
	text-align: center;
}

span.btn a {
	background: #00a7ea;
	border-radius: 25px;
	color: #ffffff;
	display: block;
	padding: 10px 16px 12px 16px;
	text-decoration: none;
}

span.btn a::before {
	color: #ffffff;
	content: "\e5cc";
	font-family: "Material Icons";
	position: relative;
	top: 1px;
	margin: 0px 4px 0px 0px;
}

span.btn a:hover {
	opacity: 0.75;
}

span.btn.donate a {
	background: #f56b46;
}

span.btn.donate a:hover {
	opacity: 0.75;
}

header span.btn a,
.menu-all span.btn a {
	padding: 8px 16px 10px 16px;
}

/*-----------------------------------------------------	*/
/* Admin Bar
/*-----------------------------------------------------	*/

body.admin-bar header {
	top: 32px;
}

body.admin-bar header div.overlay {
	padding: 96px 15px 15px 15px;
}

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

	body.admin-bar header {
		top: 46px;
	}

	body.admin-bar header div.overlay {
		padding: 110px 15px 15px 15px;
	}

}

/*-----------------------------------------------------	*/
/* Header
/*-----------------------------------------------------	*/

header {
	background: #ffffff;
	font-size: 0.75rem;
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 1;
}

header nav ul {
	display: flex;
}

header nav ul li {
	align-items: center;
	display: flex;
	font-weight: bold;
	margin: 0px 8px 0px 0px;
}

header nav ul li:last-child {
	margin: 0px 109px 0px 0px;
}

header nav ul li a {
	color: #000000;
	display: block;
	text-decoration: none;
}

header nav ul li a::before {
	color: #cccccc;
	content: "\e5cc";
	font-family: "Material Icons";
	position: relative;
	top: 1px;
}

header nav ul li.logo {
	margin-right: auto;
}

header nav ul li.logo a {
	padding: 16px;
}

header nav ul li.logo a::before {
	content: none;
}

header nav ul li.logo a img {
	max-height: 30px;
	width: auto;
}

header div.menu-btn {
	display: table;
	font-size: 2.0rem;
	position: absolute;
	right: 8px;
	top: 10px;
	z-index: 999;
}

header div.menu-btn a.btn-open,
header div.menu-btn a.btn-close {
	display: block;
	margin: 0px 8px;
	text-align: center;
	text-decoration: none;
}

header div.menu-btn a.btn-open {
	color: #000000;
}

header div.menu-btn a.btn-open::before {
	content: "\e5d2";
	font-family: "Material Icons";
}

header div.menu-btn a.btn-close {
	color: #ffffff;
}

header div.menu-btn a.btn-close::before {
	content: "\e5cd";
	font-family: "Material Icons";
}

header div.menu-btn a.btn-open:hover,
header div.menu-btn a.btn-close:hover {
	opacity: 0.75;
}

header div.menu-btn a.btn-open span,
header div.menu-btn a.btn-close span {
	display: block;
	font-size: 0.5rem;
	position: relative;
	top: -5px;
}

header div.menu-btn ul.lang {
	display: table-cell;
	font-size: 0rem;
	text-align: center;
	vertical-align: middle;
}

header div.menu-btn ul.lang li {
	background: #f5f5f5;
	color: #c0c0c0;
	display: inline-block;
	font-size: 0.5rem;
	padding: 8px;
}

header div.menu-btn ul.lang a {
	color: #ffffff;
	text-decoration: none;
}

header.jp div.menu-btn ul.lang li.en,
header.en div.menu-btn ul.lang li.jp {
	padding: 0px;
}

header.jp div.menu-btn ul.lang li.en a,
header.en div.menu-btn ul.lang li.jp a {
	background: #000000;
	padding: 5px 8px 6px 8px;
}

header.jp div.menu-btn ul.lang li.en a:hover,
header.en div.menu-btn ul.lang li.jp a:hover {
	opacity: 0.75;
}

header div.overlay {
	background: #333333;
	color: #ffffff;
	display: none;
	height: 100%;
	overflow: auto;
	padding: 64px 15px 15px 15px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
}

/*-----------------------------------------------------	*/
/* Breadcrumb
/*-----------------------------------------------------	*/

section.breadcrumb {
	font-size: 0.75rem;
	line-height: 2.0;
	padding: 16px 25px;
}

section.breadcrumb ul {
	list-style-type: none;
}

section.breadcrumb ul li {
	display: inline;
	margin: 0px 8px 0px 0px;
}

section.breadcrumb ul li::after {
	content: '\e5e1';
	font-family: "Material Icons";
	margin: 0px 0px 0px 8px;
	position: relative;
	top: 1px;
}

section.breadcrumb ul li:last-child {
	color: #8b8b8b;
	margin: 0px;
}

section.breadcrumb ul li:last-child::after {
	content: none;
}

section.breadcrumb ul li a {
	color: #000000;
	text-decoration: none;
}

section.breadcrumb ul li br {
	display: none;
}

/*-----------------------------------------------------	*/
/* Main
/*-----------------------------------------------------	*/

main {
	line-height: 2.0;
	margin: 0px auto;
	margin-top: 63px;
}

main section {
	padding: 20vmin 16px calc(20vmin - 25px) 16px;
}

main section.loop {
	padding: 64px 16px calc(20vmin - 25px) 16px;
}

main section div.loop-card {
	margin: 0px auto;
	margin-bottom: 10vmin;
}

main section div.loop-card ul {
	margin: 0px 3%;
}

main section div.loop-card ul li {
	list-style-type: none;
}

main section div.loop-card ul li article a {
	color: #000000;
	position: relative;
	text-decoration: none;
}

main section div.loop-card ul li article a,
main section div.loop-card ul li article a picture {
	display: block;
}

main section div.loop-card ul li article a span {
	display: inline-block;
	line-height: 1.5rem;
	vertical-align: top;
}

main section div.loop-card ul li article a span.title br {
	display: none;
}

main section div.loop-card ul li {
	display: inline-block;
	font-weight: 500;
	margin: 0px 2.5% 5%;
	vertical-align: top;
	width: 28%;
}

main section div.loop-card ul li article a picture {
	position: relative;
	width: 100%;
}

main section div.loop-card ul li article a picture::before {
	content:"";
	display: block;
	padding-top: 70%;
}

main section div.loop-card ul li article a picture img {
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

main section div.loop-card ul li article a span {
	display: block;
}

main section div.loop-card ul li article a span.date {
	color: #666666;
	font-size: clamp(10px, 1vw, 13px);
	font-weight: 500;
	line-height: clamp(10px, 1.6vw, 16px);
	margin: 1vw 0px 0.5vw;
}

main section div.loop-card ul li article a span.category {
	background: rgba(4, 4, 4, 0.8);
	color: #ffffff;
	font-size: clamp(10px, 1vw, 11px);
	padding: 0px 10px;
	position: absolute;
	top: 0px;
}

main section div.loop-card ul li article a span.title {
	font-size: clamp(12px, 1.4vw, 16px);
	font-weight: 500;
	line-height: clamp(12px, 2vw, 16px);
}

main section ul.page-numbers {
	margin: 0px auto;
	text-align: center;
}

main section ul.page-numbers li {
	display: inline-block;
	list-style-type: none;
	margin: 0px 2px 5px 2px;
}

main section ul.page-numbers li a,
main section ul.page-numbers li span {
	color: #ffffff;
	display: block;
	padding: 10px 25px;
}

main section ul.page-numbers li a,
main section ul.page-numbers li span.dots {
	background: #cccccc;
	text-decoration: none;
}

main section ul.page-numbers li span.current {
	background: #999999;
}

/*-----------------------------------------------------	*/
/* Footer
/*-----------------------------------------------------	*/

footer {
	background: #333333;
	color: #ffffff;
	padding: 25px 15px 15px 15px;
}

footer #page-top {
	background: #333333;
	bottom: 21px;
	display: block;
	height: 50px;
	position: fixed;
	right: 21px;
	width: 50px;
}

footer #page-top a {
	display: block;
	position: relative;
	text-decoration: none;
	height: 50px;
	width: 50px;
}

footer #page-top a::after {
	color: #ffffff;
	content: "\e5d8";
	font-family: "Material Icons";
	font-size: 1.5rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
}

/*-----------------------------------------------------	*/
/* Menu All
/*-----------------------------------------------------	*/

.menu-all div.container {
	margin: 0px auto;
	max-width: 1280px;
}

.menu-all div.container a:hover {
	opacity: 0.75;
}

.menu-all div.container ul {
	font-size: 0rem;
	margin: 8px 0px 0px 0px;
	width: 100%;
}

.menu-all div.container ul li {
	display: inline-block;
	font-size: 0.75rem;
	margin: 8px;
	text-align: center;
	vertical-align: top;
	width: calc(25% - 16px);
}

.menu-all div.container ul li a {
	background: #494949;
	color: #ffffff;
	display: block;
	padding: 8px 16px;
	text-decoration: none;
}

.menu-all div.container dl {
	display: flex;
	margin: 0px 6px 3px 6px;
}

.menu-all div.container dl dt,
.menu-all div.container dl dd {
	display: flex;
	margin: 0px 2px;
	padding: 16px;
}

.menu-all div.container dl dt {
	align-items: center;
	border: 1px solid #2c2c2c;
	font-size: 0.75rem;
	justify-content: center;
	width: 15%;
}

.menu-all div.container dl dt a {
	color: #ffffff;
	text-decoration: none;
}

.menu-all div.container dl dd {
	background: #2c2c2c;
	width: 85%;
}

.menu-all div.container dl dd ul {
	margin: 0px;
}

.menu-all div.container dl dd ul li {
	margin: 8px;
	padding: 0px;
	text-align: left;
}

.menu-all div.container dl dd ul li a {
	background: none;
	display: inline;
	padding: 0px;
}

.menu-all div.container div.wrapper {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0px 8px;
}

.menu-all div.container div.wrapper div.left,
.menu-all div.container div.wrapper div.right {
	display: inline-block;
}

.menu-all div.container div.wrapper div.left div,
.menu-all div.container div.wrapper div.left ul,
.menu-all div.container div.wrapper div.left span {
	display: inline-block;
	vertical-align: middle;
}

.menu-all div.container div.wrapper div.left ul,
.menu-all div.container div.wrapper div.left ul li,
.menu-all div.container div.wrapper div.right ul,
.menu-all div.container div.wrapper div.right ul li {
	width: auto;
}

.menu-all div.container div.wrapper div.left ul {
	margin: 0px;
}

.menu-all div.container div.wrapper div.left div.logo {
	margin: 8px 0px;
}

.menu-all div.container div.wrapper div.left div.logo a img {
	max-height: 30px;
}

.menu-all div.container div.wrapper div.left ul li a {
	padding: 8px 16px;
}

.menu-all div.container div.wrapper div.right {
	margin: 0px 64px 0px 0px;
	text-align: right;
}

.menu-all div.container div.wrapper div.right ul {
	margin: 0px;
}

.menu-all div.container div.wrapper div.right ul li {
	margin: 4px 0px 4px 8px;
}

.menu-all div.container div.wrapper div.right ul li:first-child {
	margin: 4px 8px 4px 0px;
}

.menu-all div.container div.wrapper div.right ul li a {
	background: none;
	padding: 0px;
}

.menu-all div.container div.wrapper div.right small {
	color: #ffffff;
	font-size: 0.5rem;
}

/*-----------------------------------------------------	*/
/* 404
/*-----------------------------------------------------	*/

body.error404 main section p {
	margin: 0px auto;
	margin-bottom: 5vmin;
	max-width: 1024px;
	text-align: center;
	width: 100%;
}

body.error404 main section nav {
	margin: 0px auto;
	max-width: 1024px;
}

body.error404 main section nav ul {
	margin: 0px 32px;
	text-align: center;
}

body.error404 main section nav ul li {
	display: inline-block;
	margin: 8px 16px;
}

body.error404 main section nav ul li a {
	color: #000000;
	text-decoration: none;
}

body.error404 main section nav ul li a::before {
	content: "\e5cc";
	font-family: "Material Icons";
	position: relative;
	top: 1px;
}