@charset "UTF-8";
/*
Theme Name: theme-uapp
Theme URI: http://www.magical-remix.co.jp/
Description: UAPP様専用テーマ
Author: Igarashi
Author URI: http://www.magical-remix.co.jp/
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

/* body,Anchor
------------------------------------------------*/
* { box-sizing: border-box; }
body {
	background: #fff;
	margin: 0;
	padding: 0;
	line-height: 1.8;
	font-weight: normal;
	font-style: normal;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 17px;
	color: #000;
}
a { overflow: hidden; }
a:link,
a:visited { color: #000; }
a:hover { text-decoration: none; color: #000; }
input,textarea {
	-webkit-appearance: none;
	border: 1px solid #ccc;
	padding: 5px;
	font-size: 17px;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.inner {
	width: 91.6%;
	max-width: 1100px;
	margin: 0 auto;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.align-center {
	text-align: center;
}
.align-right {
	text-align: right;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.btn {
	position: relative;
	display: flex;
	align-items: center;
	border: 1px solid #888;
	font-weight: bold;
	letter-spacing: 0.08em;
	height: 100%;
	padding: 15px 50px 15px 20px;
	line-height: 1.5;
}
.btn:hover {
	background: #f5f5f5;
}
.btn:before,
.btn:after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	height: 1px;
	background: #000;
}
.btn:before {
	margin: 5px 0 0;
	width: 40px;
}
.btn:after {
	margin: 2px 0 0;
	width: 8px;
	transform: rotate(45deg);
}
.more a {
	display: inline-block;
	width: 245px;
	text-align: left;
}
.logo {
	margin: 0;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 0.1em;
}
.logo span {
	font-family: 'Roboto', sans-serif;
	letter-spacing: 0.06em;
}
.logo a {
	text-decoration: none;
}
.logo a:hover {
	text-decoration: underline;
}
@media screen and (max-width:767px) {
	body,input,textarea {
		font-size: 15px;
	}
	button,
	[type="button"],
	[type="reset"],
	[type="submit"] {
		-webkit-appearance: button;
	}
	.inner {
		width: 83.2%;
	}
	.wrap_box {
		position: relative;
		height: 0;
		padding-top: 56.25%;
	}
	.wrap_box iframe,
	.wrap_box object,
	.wrap_box embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.logo {
		font-size: 15px;
	}
	.more a {
		width: 100%;
	}
}

/* header
------------------------------------------------*/
#header {
	padding: 20px 0;
}
#header a {
	text-decoration: none;
}
#header a:hover img {
	opacity: 0.8;
}
#header .logo {
	width: 28%;
}
#header #nav {
	width: 70%;
}
#header #nav > ul {
	display: flex;
	justify-content: flex-end;
}
#header #nav > ul > li {
	position: relative;
	margin: 0 0 0 4%;
}
#header #nav > ul > li > a {
	padding-bottom: 10px;
	letter-spacing: 0.06em;
	font-family: 'Roboto', sans-serif;
}
#header #nav > ul > li > a:hover {
	border-bottom: 1px solid #000;
}
#header #nav > ul li img {
	display: block;
	width: 24px;
	height: 24px;
}
#header #nav ul ul {
	display: none;
	background: #fff;
	position: absolute;
	top: 37px;
	z-index: 1000;
	width: 180px;
}
#header #nav ul ul li a {
	display: block;
	padding: 5px 15px;
	font-size: 13px;
}
#header #nav ul ul li a:hover {
	text-decoration: underline;
}
@media screen and (max-width:767px) {
	#header {
		height: 70px;
	}
	#header .logo {
		width: 100%;
	}
	#header #nav {
		width: 100%;
	}
	#header #nav ul {
		display: none;
	}
	#header #nav > ul {
		position: absolute;
		top: 70px;
		left: 0;
		z-index: 1000;
		width: 100%;
		height: 100%;
		padding: 25px 8.4% 25px;
		background: #fff;
	}
	#header #nav > ul:before {
		content: "";
		position: absolute;
		top: 0;
		left: 8.4%;
		display: block;
		width: 83.2%;
		height: 1px;
		background: #000;
	}
	#header #nav > ul > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0;
	}
	#header #nav > ul > li > a {
		padding: 0;
		line-height: 40px;
		font-size: 17px;
	}
	#header #nav > ul > li > a:hover {
		border: 0;
	}
	#header #nav ul li img {
		margin-top: 15px;
	}
	#header #nav ul li .open-trigger {
		cursor: pointer;
		display: block;
		position: relative;
		width: 40px;
		height: 40px;
		margin: 0 0 0 10px;
	}
	#header #nav ul li.menu-item-has-children .open-trigger:before,
	#header #nav ul li.menu-item-has-children .open-trigger:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		background: #000;
		width: 12px;
		height: 1px;
	}
	#header #nav ul li.menu-item-has-children .open-trigger:after {
		transform: translate(-50%, -2px);
	}
	#header #nav ul li.menu-item-has-children .open-trigger:before {
		transform: translate(-50%, -2px) rotate(90deg);
	}
	#header #nav ul li.menu-item-has-children .open-trigger.open:before {
		content: none;
	}
	#header #nav ul ul {
		position: relative;
		top: 0;
		width: 100%;
		margin: 10px 0;
	}
	#header #nav ul ul li a {
		display: inline-block;
		padding: 5px 30px;
	}
	.menu-trigger {
		display: block;
		position: absolute;
		top: 20px;
		right: 8.4%;
		z-index: 1002;
		width: 25px;
		height: 35px;
		cursor: pointer;
	}
	.menu-trigger .toggle-name {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
		font-family: 'Roboto', sans-serif;
		font-size: 10px;
		color: #000;
	}
	.menu-trigger .toggle-name:before {
		content: "Menu";
	}
	.menu-trigger .toggle-bar::before,
	.menu-trigger .toggle-bar::after {
		position: absolute;
		width: 24px;
		height: 1px;
		background: #000;
		transition: all 0.2s;
		content: "";
		left: 0;
	}
	.menu-trigger .toggle-bar::before {
		top: 0;
	}
	.menu-trigger .toggle-bar::after {
		top: 7px;
	}
	.nav-open .toggle-name:before {
		content: "Close";
	}
	.nav-open .toggle-bar::before,
	.nav-open .toggle-bar::after {
		top: 5px;
	}
	.nav-open .toggle-bar::before {
		transform: rotate(45deg);
	}
	.nav-open .toggle-bar::after {
		transform: rotate(-45deg);
	}
}

/* main
------------------------------------------------*/
#main .post-body {
	overflow: hidden;
}
#main .post-body:after {
	content: "";
	display: block;
	clear: both;
}
#main .post-body ul:not(.localnav) {
	margin: 1em 0;
	list-style: disc;
	padding: 0 0 0 1.5em;
}
#main .post-body ol {
	padding: 0 0 0 1.5em;
}
#main .post-body ul:not(.localnav, .index) li + li,
#main .post-body ol li + li {
	margin-top: 0.5em;
}
#main .post-body table {
	margin: 30px 0;
	width: 100%;
	border-collapse: collapse;
}
#main .post-body table th,
#main .post-body table td {
	padding: 1em 1.5em;
	border: 1px solid #ccc;
}
#main .post-body table th {
	background: #eee;
}
#main .post-body .wp-block-image figcaption,
#main .post-body .wp-block-gallery figcaption.blocks-gallery-caption {
	font-size: 12px;
}
#main .post-body .wp-block-gallery figcaption.blocks-gallery-caption {
	text-align: left;
}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	background: linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.1) 70%,transparent);
	padding: 0.5em;
}
#main .post-body figure.wp-block-gallery.has-nested-images {
	margin-right: 0;
	margin-left: 0;
}
#main .flex.column4:before,
#main .flex.column4:after {
	content: "";
	display: block;
	width: 22%;
}
#main .flex.column4:before {
	order: 1;
}
#main .flex.column2 .box {
	width: 48%;
	margin: 30px 0 0;
}
#main .flex.column4 .box,
#main .localnav li {
	width: 22%;
	margin: 30px 0 0;
}
#main .flex.column2 .box a,
#main .flex.column4 .box a,
#main .localnav li a {
	display: block;
	text-decoration: none;
}
#main .flex.column2 .box a:hover,
#main .flex.column4 .box a:hover,
#main .localnav li a:hover {
	opacity: 0.8;
}
#main .flex.column2 .box p,
#main .flex.column4 .box p {
	margin: 0;
}
#main .flex.column4 .box .boximg {
	position: relative;
	width: 100%;
	height: 0;
	margin: 0 0 5px;
	padding-top: 67%;
	overflow: hidden;
}
#main .flex.column4 .box .boximg:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.1);
}
#main .flex.column4 .box .boximg img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
#main .flex.column2 .box p.date,
#main .flex.column4 .box p.date {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
}
#main .flex.column2 .box img,
#main .flex.column4 .box img {
	max-width: 100%;
	height: auto;
}
#main .flex.column2 .box dl,
#main .flex.column4 .box dl {
	margin: 0;
}
#main .flex.column2 .box dt {
	font-size: 17px;
	font-weight: bold;
}
#main .flex.column4 .box dt {
	font-size: 15px;
	font-weight: bold;
}
#main .flex.column2 .box dd {
	margin: 5px 0 0;
	font-size: 13px;
	color: #888;
}
#main .flex.column4 .box dd {
	margin: 5px 0 0;
	font-size: 13px;
	color: #888;
}
#main .content-lead {
	width: 74%;
	margin: 0 0 0 auto;
}
#main p.more {
	margin: 30px 0 0;
	text-align: right;
}
#main .more a {
	text-decoration: none;
}
@media screen and (max-width:767px) {
	#main img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}
	#main .post-body table th,
	#main .post-body table td {
		padding: 0.5em 0.7em;
		font-size: 0.9em;
	}
	.table_wrap {
		max-width: 700px;
		overflow-x: auto;
	}
	.table_wrap:-webkit-scrollbar {
		height: 5px;
	}
	.table_wrap:-webkit-scrollbar-track {
		background: #F1F1F1;
	}
	.table_wrap:-webkit-scrollbar-thumb {
		background: #BCBCBC;
	}
	.table_wrap table {
		table-layout: fixed;
		min-width: 100%;
	}
	.table_wrap table th {
		width: 150px;
		min-width: 150px;
	}
	.table_wrap table td {
		width: 150px;
		min-width: 150px;
	}
	#main .flex.column4:before,
	#main .flex.column4:after {
		content: none;
	}
	#main .flex.column2 .box,
	#main .flex.column4 .box {
		width: 45.8%;
		margin: 0 0 25px;
	}
	#main .flex.column2 .box p.data,
	#main .flex.column4 .box p.data {
		margin: 10px 0 0;
	}
	#main .flex.column2 .box dt {
		margin: 5px 0 0;
		font-size: 15px;
	}
	#main .flex.column4 .box dt {
		font-size: 13px;
	}
	#main .flex.column2 .box dd,
	#main .flex.column4 .box dd {
		font-size: 10px;
	}
	#main .content-lead {
		width: 100%;
	}
	#main p.more {
		margin: 5px 0 0;
	}
}
@media screen and (max-width:480px) {
	#main .flex.column2 .box {
		width: 100%;
	}
}

/* footer
------------------------------------------------*/
#footer {
	padding-top: 50px;
	padding-bottom: 50px;
}
#path {
	margin: 0;
	font-size: 14px;
	color: #333;
}
#path span {
	margin: 0 5px;
	font-size: 10px;
	color: #888;
}
#pagescroll {
	margin: 0 0 80px;
	border-bottom: 1px solid #000;
}
#pagescroll a {
	display: block;
	width: 100px;
	background: #000;
	margin: 0 0 0 auto;
	text-align: center;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	text-decoration: none;
}
#pagescroll a:hover {
	opacity: 0.8;
}
#footer .flex p,
#footer .flex ul {
	width: 22%;
	margin: 0 0 30px;
	font-size: 15px;
}
#footer .flex ul {
	list-style: none;
	padding: 0;
}
#footer small {
	display: block;
	text-align: right;
	font-size: 12px;
	color: #888;
}
@media screen and (max-width:767px) {
	#path {
		margin: 0 0 10px;
	}
	#pagescroll {
		margin: 0 0 50px;
	}
	#footer .flex p {
		width: 100%;
	}
	#footer .flex ul {
		width: 100%;
		margin: 0;
	}
	#footer .flex ul li {
		margin: 0 0 1em;
	}
	#footer small {
		margin: 25px 0 0;
		text-align: left;
	}
}