/*
Theme Name: eases5-child
Template: eases5
Description: 大分農業経営支援センター 様
*/
/* 初期設定 ----------------------------------------------------------------------------------- */
:root {
	--es-wrap-max-width: 100%;
	--es-pagebody-max-width: 1024px;
	--es-main-max-width: 1024px;
	--es-main-font-color: #555;
	--es-side-max-width: 220px;
	--es-primary-color: #305e0e;
	--es-header-color: rgba(32, 32, 32, 0);
	--es-header-font-color: #555;
	--es-side-color: rgba(32, 32, 32, 0);
	--es-side-font-color: #555;
	--es-side-a-color: #555;
	--es-footer-color: #806e44;
	--es-footer-font-color: white;
	--es-header-hmg-color: white;
	--es-mobile-menu-color: #335b22;
	--main-font-color: #e01553;
	--sub-font-color: #fff;
}

ul, ol {
	padding: 0;
	list-style: none; }

#pagebody a { color: var( --es-primary-color )!important; }

.newstitle a::after,
.top-container a::after,
#pagebody ul.wp-block-list a::after,
#pagebody ol.wp-block-list a::after,
#pagebody dl.wp-block-list a::after {
	content: "\e97f";
	padding-left: 5px;
	font-size: 1.4rem;
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }

#pagebody #main .extlink a::after {
	content: "\e980";
	padding-left: 5px;
	font-size: 1.4rem;
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }

/* contents ------------------------------------------------------------------------------------- */
/* ■ h1 - h5
-------------------------------------------------------------- */
.hgroup h1 {
	font-size: clamp(18px, calc( 18px + ((1vw - 4px) * 1.92)), 30px);
	line-height: 1.2; }

h1 span:nth-child(1) {
	display: block;
	text-align: center;
	font-size: clamp(14px, calc( 14px + ((1vw - 4px) * 0.64)), 18px); }

#main h2,
#sidebar h2 {
	margin: 0 auto 20px;
	padding: 5px 10px!important;
	border-bottom: 1px solid #555;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	line-height: 1.2; }

#main h2 span { font-size: 2.0rem; }

.top-page #main article > h2 {
	margin-bottom: 40px;
	padding: 5px 0!important;
	border-bottom: none;
	color: var(--main-font-color);
	text-align: center;
	text-shadow: -2px -1px 0 var(--sub-font-color), -2px 0 0 var(--sub-font-color), -2px 1px 0 var(--sub-font-color), -1px -2px 0 var(--sub-font-color), -1px -1px 0 var(--sub-font-color), -1px 0 0 var(--sub-font-color), -1px 1px 0 var(--sub-font-color), -1px 2px 0 var(--sub-font-color), 0 -2px 0 var(--sub-font-color), 0 -1px 0 var(--sub-font-color), 0 0 0 var(--sub-font-color), 0 1px 0 var(--sub-font-color), 0 2px 0 var(--sub-font-color), 1px -2px 0 var(--sub-font-color), 1px -1px 0 var(--sub-font-color), 1px 0 0 var(--sub-font-color), 1px 1px 0 var(--sub-font-color), 1px 2px 0 var(--sub-font-color), 2px -1px 0 var(--sub-font-color), 2px 0 0 var(--sub-font-color), 2px 1px 0 var(--sub-font-color), -5px -2px 0 var(--main-font-color), -5px -1px 0 var(--main-font-color), -5px 0 0 var(--main-font-color), -5px 1px 0 var(--main-font-color), -5px 2px 0 var(--main-font-color), -4px -4px 0 var(--main-font-color), -4px -3px 0 var(--main-font-color), -4px -2px 0 var(--main-font-color), -4px -1px 0 var(--main-font-color), -4px 0 0 var(--main-font-color), -4px 1px 0 var(--main-font-color), -4px 2px 0 var(--main-font-color), -4px 3px 0 var(--main-font-color), -4px 4px 0 var(--main-font-color), -3px -4px 0 var(--main-font-color), -3px -3px 0 var(--main-font-color), -3px -2px 0 var(--main-font-color), -3px -1px 0 var(--main-font-color), -3px 0 0 var(--main-font-color), -3px 1px 0 var(--main-font-color), -3px 2px 0 var(--main-font-color), -3px 3px 0 var(--main-font-color), -3px 4px 0 var(--main-font-color), -2px -5px 0 var(--main-font-color), -2px -4px 0 var(--main-font-color), -2px -3px 0 var(--main-font-color), -2px -2px 0 var(--main-font-color), -2px -1px 0 var(--main-font-color), -2px 0 0 var(--main-font-color), -2px 1px 0 var(--main-font-color), -2px 2px 0 var(--main-font-color), -2px 3px 0 var(--main-font-color), -2px 4px 0 var(--main-font-color), -2px 5px 0 var(--main-font-color), -1px -5px 0 var(--main-font-color), -1px -4px 0 var(--main-font-color), -1px -3px 0 var(--main-font-color), -1px -2px 0 var(--main-font-color), -1px -1px 0 var(--main-font-color), -1px 0 0 var(--main-font-color), -1px 1px 0 var(--main-font-color), -1px 2px 0 var(--main-font-color), -1px 3px 0 var(--main-font-color), -1px 4px 0 var(--main-font-color), -1px 5px 0 var(--main-font-color), 0 -5px 0 var(--main-font-color), 0 -4px 0 var(--main-font-color), 0 -3px 0 var(--main-font-color), 0 -2px 0 var(--main-font-color), 0 -1px 0 var(--main-font-color), 0 0 0 var(--main-font-color), 0 1px 0 var(--main-font-color), 0 2px 0 var(--main-font-color), 0 3px 0 var(--main-font-color), 0 4px 0 var(--main-font-color), 0 5px 0 var(--main-font-color), 1px -5px 0 var(--main-font-color), 1px -4px 0 var(--main-font-color), 1px -3px 0 var(--main-font-color), 1px -2px 0 var(--main-font-color), 1px -1px 0 var(--main-font-color), 1px 0 0 var(--main-font-color), 1px 1px 0 var(--main-font-color), 1px 2px 0 var(--main-font-color), 1px 3px 0 var(--main-font-color), 1px 4px 0 var(--main-font-color), 1px 5px 0 var(--main-font-color), 2px -5px 0 var(--main-font-color), 2px -4px 0 var(--main-font-color), 2px -3px 0 var(--main-font-color), 2px -2px 0 var(--main-font-color), 2px -1px 0 var(--main-font-color), 2px 0 0 var(--main-font-color), 2px 1px 0 var(--main-font-color), 2px 2px 0 var(--main-font-color), 2px 3px 0 var(--main-font-color), 2px 4px 0 var(--main-font-color), 2px 5px 0 var(--main-font-color), 3px -4px 0 var(--main-font-color), 3px -3px 0 var(--main-font-color), 3px -2px 0 var(--main-font-color), 3px -1px 0 var(--main-font-color), 3px 0 0 var(--main-font-color), 3px 1px 0 var(--main-font-color), 3px 2px 0 var(--main-font-color), 3px 3px 0 var(--main-font-color), 3px 4px 0 var(--main-font-color), 4px -4px 0 var(--main-font-color), 4px -3px 0 var(--main-font-color), 4px -2px 0 var(--main-font-color), 4px -1px 0 var(--main-font-color), 4px 0 0 var(--main-font-color), 4px 1px 0 var(--main-font-color), 4px 2px 0 var(--main-font-color), 4px 3px 0 var(--main-font-color), 4px 4px 0 var(--main-font-color), 5px -2px 0 var(--main-font-color), 5px -1px 0 var(--main-font-color), 5px 0 0 var(--main-font-color), 5px 1px 0 var(--main-font-color), 5px 2px 0 var(--main-font-color);
}

.top-page #main h2 span > span {
	display: block;
	font-size: clamp(20px, calc( 20px + ((1vw - 4px) * 4.49)), 48px); }

#main .top-container h2 {
	margin: 0 auto 10px;
	padding: 5px 10px!important;
	background-color: #305e0e;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	line-height: 1.2; }

#main .top-container h2 a { color: white!important; }



.mobile-menu h2 {
	margin-left: 20px; }

#footer h2 { font-size: 2.2rem; }

#single-page h2 {
	background-color: #808670;
	color: white; }

#main h3 {
	margin: 0 auto 20px;
	padding: 15px 10px!important;
	background-color: #dedede;
	font-size: 1.8rem;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	line-height: 1.2; }

#main h3 span {
	display: inline-block;
	padding: 0; }

#main h4 {
	margin: 0 auto 10px;
	text-decoration: none; }

#main h5 {
	padding-left: 20px;
	font-size: 1.8rem; }

/* レイアウト
-------------------------------------------------------------- */
#wrap {
	max-width: var( --es-wrap-max-width );
	margin: 0 auto; }

#header {
	margin-bottom: 20px;
	background: url(../../../images/header_bg.gif) top left repeat-x;
	text-align: center; }
	@media screen and (min-width: 768px) {
		#header {
			margin-bottom: 0; } }

.title {
	display: flex;
	align-items: center; }


.description {
	position: relative;
	top: 20px;
	left: 55px;
	display: block;
	max-width: 1024px;
	margin: 0 auto;
	color: var( --es-primary-color );
	font-size: 1.4rem; }

.hgroup {
	max-width: var(	--es-pagebody-max-width );
	margin:  auto;
	padding: 20px 0 20px; }
	@media screen and (min-width: 768px) {
		.hgroup {
			padding: 10px 0 5px; } }

.hgroup-inner {
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	text-shadow: 1px 1px 0 white, -1px -1px 0 white, -1px 1px 0 white, 1px -1px 0 white, 0px 1px 0 white, 0 -1px 0 white, -1px 0 0 white, 1px 0 0 white; }

.logo-h1 {
	display: flex;
	background-color: white;
	align-items: center; }



#header .hgroup figure { margin: 0 10px 0 0; }

#header .hgroup figure img { width: 65px; }


.hgroup .information {
	margin-bottom: 8px;
	color: #555;
	font-size: 1.2rem;
	line-height: 1; }

#globalnavi { background-color: var( --es-primary-color ); }

#globalnavi ul {
	width: var(	--es-pagebody-max-width );
	margin: 0 auto; }

#globalnavi ul li {
	width: 204.8px;
	margin: 0 auto; }

#globalnavi li a {
	display: block;
	margin: 0 10px 10px;
	padding: 10px 0;
	border-bottom: 5px solid #ebf0e1; }

#globalnavi .current-menu-item a,
#globalnavi li a:hover { border-bottom: 5px solid #f8e50d; }

#pagebody > .inner { flex-direction: row-reverse; }
	@media screen and (min-width: 780px) {
		#pagebody > .inner {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			max-width: var(	--es-pagebody-max-width );
			margin: 20px auto 0; }
		.top-page #pagebody > .inner {
			max-width: 100%;
			background: url(../../../images/top_bg.jpg) bottom left no-repeat;
	 		background-size: cover; } }

#main {
	width: 100%;
	max-width: var( --es-pagebody-max-width );
	padding: 0 10px; }
	@media screen and (min-width: 780px) {
		#main {
			width: calc( 100% - 360px );
			margin: 0 0 40px;
			padding: 0; } }

.top-page #main {
	width: 100%;
	padding: 0 10px; }
	@media screen and (min-width: 768px) {
		.top-page #main {
			margin: 0 auto 40px;
			padding: 0; } }


#sidebar {
	display: none; }
	@media screen and (min-width: 768px) {
		#sidebar {
			display: block;
			width: 330px; } }

#sidebar ul {
	margin-bottom: 20px;
	border-top: 1px solid #555; }

#sidebar li a {
	position: relative;
	display: block;
	padding: 10px 20px;
	border-bottom: 1px solid #555;
	color: #555; }

#sidebar li a::after {
	content: '\e935';
	position: absolute;
	top: 9px;
	right: 20px;
	font-size: 1.8rem;
	color: #28935f;
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; }

#sidebar iframe {
	display: block;
	margin: 0 auto; }

.news_posts div { flex-direction: column; }

#footer { padding: 40px 0 20px; }

#footer .inner {
	width: 100%;
	max-width: var( --es-pagebody-max-width );
	margin: 0 auto; }

#footer ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 40px; }

#footer ul a { padding: 0 10px; }

#footer .current-menu-item a,
#footer .current-menu-item a:hover { color: #f8e50d; }

#block-18,
#block-19 { margin-bottom: 0; }

.navi-contents {
	background: #eee; }
	@media screen and (max-width: 1000px) {
		.navi-contents { height: calc( 100dvh - 70px ); }
		.sp-menu #drawer-close { height: calc( 100dvh - 70px ); } }

.navi-contents p {
	margin: 0 20px 20px; }

.navi-contents figure {
	width: 100%;
	max-width: 330px;
	margin: 20px auto; }

.navi-contents iframe {
	display: block;
	margin: 0 auto 20px; }


/* リンクホバー時のカラー変更 */
.link-anime a:hover { color: #ff7043!important; }

.pagebody a:hover { color: #8ab101!important; }

#pagebody #main .wp-block-button a { color: white!important; }

.post-categories ul span[class*="label-"],
.post-categories ul a[class*="label-"] {
    color: #555; }

.post-categories ul span[class*="label-news"],
.post-categories ul a[class*="label-news"] {
    color: white; }


.pc-none { display: block; }
	@media screen and (min-width: 780px) {
		.pc-none { display: none; } }

.sp-none { display: none; }
	@media screen and (min-width: 780px) {
		.sp-none { display: block; } }


/* コンテンツ
-------------------------------------------------------------- */
/* トップページ */

.top-page .news_posts {
	max-width: 900px;
	margin: 0 auto 20px;
	padding: 20px 20px 15px;
	border: 5px solid #41aecd;
	border-radius: 10px;
	line-height: 1.4; }

	@media screen and (min-width: 780px) {
		.tree {
			padding: 5px 0 0;
			background: url(../../../images/tree.png) top center no-repeat; } }

.newsdate { font-weight: bold; }

.service {
	display: block;
	max-width: 600px;
	margin: 0 auto 80px;
	text-align: center;
	font-size: 1.6rem; }

ul.catch {
	margin: 0 20px 20px;
	text-align: center;
	font-size: 2.4rem;
	font-weight: bold;
	color: #0792aa; 
	list-style: none; }
	@media screen and (min-width: 780px) {
		ul.catch {
			display: flex;
			justify-content: space-between;
			width: 710px;
			margin: 60px auto 80px;
			padding: 0 0 0 55px; } }

ul.catch span {
}
	@media screen and (min-width: 780px) {
		ul.catch span {
			font-size: 1.8rem; } }

.top-container {}
	@media screen and (min-width: 780px) {
		.top-container {
			width: 600px;
			margin: 0 auto;
			font-size: 1.8rem;
			line-height: 1.2; } }

.top-container .wp-block-column p:nth-of-type(1)  { margin-bottom: 5px!important; }

.top-page #main .wp-block-column p {
	padding: 0 10px; }

body .char { display: none; }
	@media screen and (min-width: 780px) {
		body .char { display: flex; } }

.char img:hover {
	animation: shake 2s linear infinite;
	-webkit-animation: shake 2s linear infinite; }
	@keyframes shake {
		0% { transform: translate(3px, 2px) rotate(0deg); }
		10% { transform: translate(-2px, -3px) rotate(-1deg); }
		20% { transform: translate(-4px, 0px) rotate(1deg); }
		30% { transform: translate(0px, 3px) rotate(0deg); }
		40% { transform: translate(2px, -2px) rotate(1deg); }
		50% { transform: translate(-2px, 3px) rotate(-1deg); }
		60% { transform: translate(-4px, 2px) rotate(0deg); }
		70% { transform: translate(3px, 2px) rotate(-1deg); }
		80% { transform: translate(-2px, -2px) rotate(1deg); }
		90% { transform: translate(2px, 4px) rotate(0deg); }
		100% { transform: translate(2px, -3px) rotate(-1deg); } }

/* スタッフ紹介 */
.staff .wp-block-columns.is-layout-flex { gap: 0; }


.network li span {
	display: block;
	font-weight: bold; }

/* コンタクトフォーム */
.wpcf7-form span input,
.wpcf7-form span textarea { width: 100%; }
	@media screen and (min-width: 780px) {
		.wpcf7-form span input,
		.wpcf7-form span textarea { width: 80%; } }

.wpcf7-radio input { width: auto!important; }

/* table */
.wp-block-table th,
.wp-block-table td {
	display: block;
	border: none; }
	@media screen and (min-width: 780px) {
		.wp-block-table th,
		.wp-block-table td {
			display: table-cell; } }

#pagebody .post-footer nav a { color: white!important; }

/* リストスタイル */
.post-content ol {
	list-style-type: decimal;
	margin: 0 0 20px 40px;
	padding-left: 10px; }

.post-content ul {
	list-style-type: disc;
	margin: 0 0 20px 40px;
	padding-left: 10px; }


.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { margin: 30px auto; }