@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Noto+Sans+JP:wght@100..900&display=swap');

/*--------------------------------------
　基礎設定
---------------------------------------*/
:root {
	--theme-color-normal: #F18D5F;
}

html {
	scroll-behavior: smooth;
}

*,
*::after,
*::before {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

img {
	border: 0;
}

a img {
	border: 0;
}

body {
	color: rgb(60, 60, 60);
	font-family: 'Noto Sans JP', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 1em;
	font-weight: 400;
	font-feature-settings: "palt";
	line-height: 1.75;
	-webkit-text-size-adjust: 100%;
}

table,
div {
	margin: auto;
}

/*--------------------------------------
　共通リンク
---------------------------------------*/
a {
	color: #191970;
	/*通常のリンクテキストカラー*/
}

a:hover {
	color: #008080;
	/*マウスが乗った時の通常のリンクテキストカラー*/
	text-decoration: underline;
	/*マウスが乗った時下線を表示（つけない場合は underline を none へ）*/
}


/*--------------------------------------
　見出しタグ
---------------------------------------*/
h1 {
	margin: 0;
	padding: 0;
}

h2 {
	position: relative;
	margin: 0;
	margin-top: 1.5em;
	margin-bottom: 1em;
	padding-left: 84px;
	width: 100%;
	font-size: clamp(1.3rem, 0.423rem + 4.07vw, 2.375rem);
	color: rgb(60, 60, 60);
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
	z-index: -1;
}

h2::before {
	position: absolute;
	content: '';
	width: 58px;
	left: 10px;
	bottom: 8px;
	border-bottom: 10px solid rgb(79, 130, 193);
	transform: skew(-45deg);
	z-index: -1;
}

h2::after {
	position: absolute;
	content: '';
	width: 100%;
	left: 0;
	bottom: -1px;
	border-bottom: 10px solid rgb(179, 228, 255);
	transform: skew(-45deg);
	z-index: -1;
}

h3 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	padding: 0;
	padding-left: 0.2em;
	border-bottom: 2px solid var(--theme-color-normal);
	background-color: #ffffff;
	color: var(--theme-color-normal);
	font-size: 1.5rem;
}

h4 {
	font-size: 30px;
	font-weight: normal;
	border-color: #000000;
	border-width: 0px 0 0 4px;
	color: #008080;
	text-indent: 10px;
	line-height: 18px;
	vertical-align: top;
	padding: 20px 0 0 0;
}


.obj {
	margin: 0 6px 0 6px;
}

.obj p {
	line-height: 160%;
	margin: 0 0 12px 0;
}

.CNT {
	text-align: center;
}

.R {
	text-align: right;
}

.L {
	text-align: left;
}

.dejavu {
	font-family: "dejavu-sans-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.dejavu_bold {
	font-family: "dejavu-sans-condensed", sans-serif;
	font-weight: 700;
	font-style: normal;
}

/*** main table ***/
#main_table {
	font-family: "dejavu-sans-condensed", sans-serif;
	font-weight: 700;
	font-style: normal;
	color: #000000;
	width: 100%;
	margin: 0 0 0 0px;
	padding: 1.5rem 0;
	background-color: var(--theme-color-normal);
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, var(--theme-color-normal) 50%);
}

#main_table h4 {
	font-size: clamp(2.5rem, 2rem + 2.5vw, 5rem);
	border-color: #999999;
	border-width: 0px 0 0 4px;
	color: #000000;
	text-indent: 10px;
	line-height: 1.2;
	padding: 0 0.5rem;
	margin-bottom: 2rem;
	text-align: center;
	font-weight: 800;
	font-family: "Karla", serif;
	font-style: italic;
}

#main_table .hero_area_message {
	text-align: center;
	font-weight: 700;
	font-size: clamp(1rem, 0.8rem + 0.42vw, 1.3rem);
}

#main_table .hero_area_logo_image {
	text-align: center;
	margin-bottom: 1.5rem;
}


/*--------------------------------------
　レイアウト
---------------------------------------*/
#wrap,
#bg {
	width: 100%;
	margin: 0 auto 0 auto;
	text-align: left;
	border-right: 1px solid #ccc;
	border-left: 1px solid #ccc;
	box-shadow: 0px 0px 4px #ccc;
}

#head {
	width: 100%;
	background: rgb(255, 255, 255);
	padding: 10px;
}

#head .logo_area {
	display: grid;
	width: 100%;
	max-width: 1600px;
	grid-template-columns: 0.139fr 0.195fr 0.175fr 0.284fr 0.175fr;
	align-items: center;
	justify-self: start;
	gap: 0.83vw;
	margin-left: 0;
	margin-right: auto;
}

#head #logo {
	line-height: 1;
}

#head .logo_area a {
	text-decoration: none;
	display: block;

	img {
		width: 100%;
		height: auto;
		display: block;
	}
}

#head .logo_area a:hover {
	opacity: 0.8;
}


/*--------------------------------------
　ヘッダーメニュー
---------------------------------------*/
#head_menu {
	width: 100%;
	font-size: 0.625em;
	justify-self: end;
	margin: 0.5rem auto 0;
	display: grid;
	grid-template-columns: 1fr 150px;
	grid-auto-flow: column;
}

#head_menu ul {
	list-style-type: none;
	padding: 4px 0;
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	justify-content: start;
}

#head_menu ul li {
	padding: 0 10px;
	text-align: center;
	line-height: 1.5;
	width: 100%;
	max-width: 150px;
	border-right: 1px solid rgb(60, 60, 60);
}

#head_menu ul li:first-child {
	border-left: 1px solid rgb(60, 60, 60);
}

#head_menu a {
	display: inline-block;
	width: 100%;
	font-size: clamp(0.725rem, -0.185rem + 1.9vw, 1rem);
	text-decoration: none;
	margin: 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0);
	padding: 0 5px;
	font-weight: 400;
	color: rgb(60, 60, 60);
	position: relative;
}

#head_menu a::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: rgb(60, 60, 60);
	transform-origin: bottom right;
	transition: transform .4s cubic-bezier(.86, 0, .07, 1)
}

#head_menu a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left
}

#contents {
	padding-bottom: 1em;
	width: 100%;
	height: 100%;
	min-height: 650px;
}

#head_menu .archive {
	width: 150px;
	text-align: center;
	height: auto;
	position: relative;
}

#head_menu .archive p {
	display: block;
	width: 150px;
	font-size: clamp(0.725rem, -0.185rem + 1.9vw, 1rem);
	text-decoration: none;
	margin: 0;
	border: 1px solid rgb(60, 60, 60);
	box-shadow: 1px 2px 2px #333;
	transform: translateY(-1px);
	cursor: pointer;
	background-color: var(--theme-color-normal);
	color: #ffffff;
	text-shadow: #000000 0 0 4px;
}

/* #head_menu .archive p:hover{
	box-shadow: none;
	transform: translateY(0px) ;
} */
#head_menu .archive #left_menu {
	display: none;
	position: absolute;
	top: 30px;
	left: 0;
	height: 100%;
	z-index: 40;
	margin-top: 0;
	margin-bottom: auto;
}

#head_menu .archive #left_menu ul {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
}

#head_menu .archive #left_menu ul li {
	margin: 0;
	padding: 0;
	width: 150px;
	background-color: rgb(60, 60, 60);
}

#head_menu .archive #left_menu ul li a {
	color: white;
	display: inline;
	text-decoration: none;
	font-size: 1rem;
	line-height: 2.5;
	padding-left: 5px;
	padding-right: 5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0);
}

#head_menu .archive #left_menu ul li a:hover {
	border-bottom: 1px solid white;
}

.checkbox2:checked~.archive>#left_menu {
	display: block !important;
}

.checkbox2:checked~.archive>p {
	box-shadow: none !important;
	transform: translateY(0px) !important;
}

.checkbox2 {
	display: none;
}


#main {
	width: 100%;
	margin: 0;
}

#main p {
	line-height: 2.0em;
	margin: 0 0 16px 0;
}

#main #info img {
	width: 100%;
	height: 3px;
}

#main .content_area,
#main #other_page {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 1em;
}

.banner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1em;
	margin: 2em auto 1em;
}

.banner a {
	box-shadow: 0 0 2px #999;
}

.banner a:hover {
	opacity: 0.8;
}

/* copyrights */
#foot {
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	text-align: center;
	margin: 0;
	font-size: 0.875em;
	line-height: 1.5;
	padding: 0.5em 0;
	background-color: var(--theme-color-normal);
	color: white;
}

.submenu {
	list-style: none;
	border: 1px solid #cccccc;
	background: #ffffff;
	visibility: hidden;
	position: absolute;
	right: 0px;
	z-index: 1;
}

.page_up {
	margin: 0 auto;
	text-align: right;

}

.page_up a {
	position: fixed;
	right: 10px;
	bottom: 10px;
	display: block;
	width: 50px;
	height: 50px;
	transition: opacity .2s ease-out;
	z-index: 10;
	opacity: .8;
	overflow: hidden;
	text-align: center;
	text-decoration: none;
	background-color: rgb(77, 129, 191);
	color: white;
	border-radius: 50%;
	line-height: 3;
}

.page_up a:hover {
	opacity: 0.4;
}

/* 2022/09/14 追加：主にブロックエディタ用設定 */
.wp-block-table>table th,
.wp-block-table>table td {
	padding: .5rem;
	border: 1px solid rgb(180, 180, 180);
}

/*ハンバーガーメニュー*/
.span-container,
.checkbox {
	width: 45px;
	height: 45px;
	position: fixed;
	top: 10px;
	right: 10px;
	display: none;
}

.checkbox {
	opacity: 0;
	z-index: 100;
}

.span-container {
	flex-flow: row wrap;
	align-items: center;
	z-index: 90;
	background-color: rgba(128, 128, 128, 1);
	padding: 5px;
}

.span-container span {
	width: 100%;
	height: 3px;
	background: white;
	transition: all 250ms ease-out;
	transform-origin: 0 0;
}

.checkbox:checked~.span-container span:nth-last-child(1) {
	transform: rotate(-45deg) translate(-1px, 0px);
}

.checkbox:checked~.span-container span:nth-last-child(2) {
	transform: rotate(0deg) scale(0.2, 0.2);
	opacity: 0;
}

.checkbox:checked~.span-container span:nth-last-child(3) {
	transform: rotate(45deg) translate(0px, -1px);
}

.checkbox:checked~#head_menu ul {
	right: 0;
}

@media screen and (max-width:1150px) {
	.checkbox {
		display: block;
	}

	.span-container {
		display: flex;
	}

	#head_menu ul:not(.archive ul) {
		position: fixed;
		right: -1000px;
		top: 0;
		width: 70%;
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		z-index: 50;
		background-color: rgba(128, 128, 128, 1);
		grid-auto-flow: row;
		padding-top: 90px;
		transition: all 0.7s 0s ease;
		justify-content: center;
	}

	#head_menu ul li {
		border-right: none;
	}

	#head_menu ul li:first-child {
		border-left: none;
	}

	#head_menu a {
		font-size: 1rem;
		color: white;
	}

	#head_menu a:hover {
		border-bottom: 2px solid white;
	}

	#head {
		padding: 5px;
	}

	#head_menu {
		display: block;
		margin: 0;
	}

	.logo_area {
		padding-right: 120px;
	}

	#head_menu .archive {
		position: fixed;
		top: 10px;
		right: 65px;
		width: 45px;
		height: 45px;
		background-color: #4f82c1;
		background-image: url(../img/icon-7.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}

	#head_menu .archive p {
		display: none;
	}

	#head_menu .archive #left_menu {
		position: fixed;
		top: 60px;
		right: 0;
		width: 30vw;
		min-width: 200px;
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
		overflow-y: scroll;
		z-index: 50;
		left: auto;
		padding-top: 1rem;
		padding-bottom: 1rem;
		background-color: #4f82c1;
	}

	#head_menu .archive #left_menu ul li {
		width: 100%;
		max-width: none;
		background-color: rgba(255, 255, 255, 0);
		padding: 5px;
	}

	#head_menu .archive #left_menu ul li a {
		font-size: 1rem;
		display: inline-block;
		padding: 0 5px;
		width: 100%;
		width: fit-content;
	}
}

/*アコーディオン*/
.News_archives{
	max-height: 400px;
	overflow-y: auto;
	scrollbar-gutter: stable;
}
.ac_box_news{
	margin-top: 3rem;
}
.ac_box_news>.ac_button {
	position: relative;
	display: block;
	cursor: pointer;
	transition: .1s ease-out;
	transition-property: background, color;
	padding-left: 30px;
	margin-top: 0;
	margin-bottom: 0;
}
.ac_box_news>.ac_button:not(.clicked):hover{
	opacity: 0.8;
}
.ac_box_news>.ac_button::before {
	content: "▼";
	font-size: 1em;
	display: block;
	position: absolute;
	top: 0;
	left: 0px;
	transition: transform .2s ease-out;
}
.ac_box_news>.ac_button.clicked::before {
	transform: rotate(180deg);
}
.ac_box_news .ac_content {
	display: none;
	padding: 1rem 0 ;
}