@charset "UTF-8";
/*
Theme Name: OCF 24
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the Studio Kan team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. 
Requires at least: 5.3
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.6
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/
/* Variables */
/* @import url("https://fonts.googleapis.com/css2?family=Spartan:wght@400;700&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap');
:root {
	/* Font Size */
	--global--font-size-base: 1rem; /* 16px */
	--global--font-size-xs: 0.75rem; /* 12px */
	--global--font-size-sm: 0.875rem; /* 14px */
	--global--font-size-md: 1.0625rem; /* 17px */
	--global--font-size-lg: 1.125rem; /* 18px */
	--global--font-size-xl: 1.25rem; /* 20px */
	--global--font-size-xxl: 1.5rem; /* 24px */
	--global--font-size-xxxl: 1.625rem; /* 26px */
	--global--font-size-page-title: var(--global--font-size-xxl);
	--global--letter-spacing: normal;

	/* Line Height */
	--global--line-height-body: 1.8;
	--global--line-height-heading: 1.4;
	--global--line-height-page-title: 1.5;

	/* Spacing */
	--global--spacing-unit: 16px;
	--global--spacing-horizontal: 20px;
	--global--spacing-vertical: 30px;

	/* Widgets */
	--widget--line-height-list: 1.5;
	--widget--line-height-title: 1.4;
	--widget--font-weight-title: 700;
	--widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));

	/* Headings */
	--heading--font-weight: 500;
	--heading--font-weight-page-title: 500;
	--heading--font-weight-strong: 600;

	/* Colors */
	--global--color-black: #000;
	--global--color-dark-gray: #333;
	--global--color-gray: #999;
	--global--color-light-gray: #f5f5f5;
	--global--color-green: #287C05;
	--global--color-dark-green: #1f6666;
	--global--color-light-green: #33aa00;

	--global--color-blue: #1a5fff;
	--global--color-red: #ff0000;
	--global--color-white: #fff;
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-primary: var(--global--color-black);
	--global--color-background: #f5f5f5;

	/* Body text color, site title, footer text color. */
	--global--color-secondary: #007acc;
	/* Headings */
	--global--color-primary-hover: #ff8c1a;
	/* Mint, default body background */
	--global--color-border: var(--global--color-primary);

	/* Forms */
	--form--font-size: var(--global--font-size-base);
	--form--line-height: var(--global--line-height-body);
	--form--color-text: var(--global--color-dark-gray);
	--form--color-ranged: var(--global--color-secondary);
	--form--label-weight: 600;
	--form--border-color: var(--global--color-light-gray);
	--form--border-width: 1px;
	--form--border-radius: 0;
	--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));

	/* Buttons */
	--button--color-text: var(--global--color-white);
	--button--color-text-hover: var(--global--color-secondary);
	--button--color-text-active: var(--global--color-secondary);
	--button--color-background: #990000;
	--button--color-background-active: #e60000;
	--button--font-size: var(--global--font-size-base);
	--button--font-weight: 500;
	--button--line-height: 1.5;
	--button--border-width: 3px;
	--button--border-radius: 0;
	--button--padding-vertical: 15px;
	--button--padding-horizontal: calc(2 * var(--button--padding-vertical));

	/* entry */
	--entry-header--color: var(--global--color-primary);
	--entry-header--color-link: currentColor;
	--entry-header--color-hover: var(--global--color-primary-hover);
	--entry-header--color-focus: var(--global--color-secondary);

	/* Footer */
	--footer--color-text: var(--global--color-dark-gray);
	--footer--color-link: var(--global--color-dark-gray);
	--footer--color-link-hover: var(--global--color-primary-hover);
	--footer--font-size: 15px;

	/* Block: Pull quote */
	--quote--font-size: var(--global--font-size-md);
	--quote--font-size-large: var(--global--font-size-xl);
	--quote--font-style: normal;
	--quote--font-weight: 700;
	--quote--line-height: var(--global--line-height-body);
	--quote--line-height-large: 1.35;
	--separator--border-color: var(--global--color-border);
	--separator--height: 1px;
}

/**
 * Responsive Styles
 * Required Variables
 * Root Media Query Variables
 */
:root {
	--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
	--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
	--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
	--responsive--alignfull-width: 100%;
	--responsive--alignright-margin: var(--global--spacing-horizontal);
	--responsive--alignleft-margin: var(--global--spacing-horizontal);
}


/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
}
.site {
	position: relative;
}
/** Render the `main` element consistently in IE. */
main { display: block; }

/**
 * Reset specific elements to make them easier to style in other contexts.
 */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

/**
 * Apply generic border-box to all elements.
 * See:
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
html {
	/* Apply border-box across the entire page. */
	box-sizing: border-box;
	line-height: var(--global--line-height-body); /* 1.8 */
}
*,
*::before,
*::after {
	box-sizing: inherit;
}
body {
	font-size: var(--global--font-size-base);
	font-weight: 400;
	color: var(--global--color-primary);
	text-align: left;
	background-color: #fff;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	overflow-x: hidden;
}
button {
	cursor: pointer;
}
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}
.clear:after,
.entry-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}
.site-header {
	position: relative;
	width: 100%;
	padding-top: 0;
	padding-bottom: 0;
	background-color: #fff;
	z-index: 1000;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	/* 1 */
	height: 0;
	/* 1 */
	overflow: visible;
}
pre {
	font-family: monospace;
	/* 1 */
	font-size: 1em;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
	text-decoration-thickness: 1px;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	/* 1 */
	text-decoration: underline;
	/* 2 */
	text-decoration-style: dotted;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace;
	/* 1 */
	font-size: 1em;
}
/**
 * Add the correct font size in all browsers.
 */
small { font-size: 80%; }

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

/* Over here, place any elements that do not need to have their own file. */
b,
strong {
	font-weight: 600;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
pre {
	white-space: pre;
	overflow-x: auto;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border-style: none;
}
/* Interactive
   ========================================================================== */

/* Add the correct display in Edge, IE 10+, and Firefox. */
details { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Misc
   ========================================================================== */

/** Add the correct display in IE 10+. */
template { display: none; }

/** Add the correct display in IE 10. */
[hidden] { display: none; }

/**
 * Extends
 */
.alignfull
.full-max-width {
	max-width: var(--responsive--alignfull-width);
	width: var(--responsive--alignfull-width);
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (min-width: 482px) {
	.alignfull,
	.full-max-width {
		max-width: var(--responsive--alignfull-width);
		width: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

/**
 * Site Structure
 */
.alignwide,
.wide-max-width {
	max-width: var(--responsive--alignwide-width);
	margin-left: auto;
	margin-right: auto;
}
.site-content {
	width: 100%;
	padding: 0;
	position: relative;
	padding: 0;
	padding-bottom: 30px;
}
.page .site-main {
	padding-top: 30px;
}

@media (max-width: 767px) {
	#secondary {
		padding-bottom: 20px;
	}
}
@media (min-width: 768px) {
	body.has-sidebar #primary {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 20px 0;
		max-width: 1200px;
		margin: 0 auto;
	}
	body.has-sidebar .site-main {
		width: 75%;
		padding: 0;
		min-height: 55vh;
	}
	body.has-sidebar #secondary {
		width: 22.5%;
		padding: 0;
	}
}

.pc {
	display: none;
}
.sp {
	display: block;
}
@media (min-width: 768px) {
	.pc {
		display: block;
	}
	.sp {
		display: none;
	}
}
.desktop-only {
	display: none;
}
@media (min-width: 482px) {
	.desktop-only {
		display: block;
	}
}

.section-inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
	width: calc(100% - 24px);
}
.section-inner.max-percentage {width: 100%;}
.section-inner.thin {max-width: 828px;} /* 828px 940 */
.section-inner.medium {max-width: 1000px;}
.section-inner.no-margin {margin: 0;}
.section-inner.page-thin {
	max-width: 940px;
}

@media (min-width: 768px) {
	.f-container {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.f-container div {
		width: 50%;
	}
	.f-container div div {
		width: 100%;
	}
}

/*
 * Block & non-gutenberg content wrapper children
 */
.site-main > article {
	margin-top: 0;
}
@media (min-width: 600px) {
	.site-main > article {
	}
}
.site-main > article.panel {
	padding: 0;
}

/*
 * Block & non-gutenberg content wrapper children
 * - Sets spacing-unit margins
 */
.page-content > *,
.widget > * {
	margin-top: var(--global--spacing-unit);
	margin-bottom: var(--global--spacing-unit);
}
.page-content > *:first-child,
.widget > *:first-child {
	margin-top: 0;
}
.page-content > *:last-child,
.widget > *:last-child {
	margin-bottom: 0;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	/* 1 */
	font-size: 100%;
	line-height: 1.25;
	margin: 0;
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	/* 1 */
	overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	/* 1 */
	text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
	-webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress { vertical-align: baseline; }
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea { overflow: auto; }
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
	box-sizing: border-box;
	/* 1 */
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
	height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
	-webkit-appearance: textfield;
	/* 1 */
	outline-offset: -2px;
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
	-webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	/* 1 */
	font: inherit;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
.site textarea {
	border: var(--form--border-width) solid var(--form--border-color);
	border-radius: var(--form--border-radius);
	color: var(--form--color-text);
	line-height: var(--global--line-height-body);
	padding: var(--form--spacing-unit);
	margin: 0 2px;
	max-width: 100%;
	background-color: #fff;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
.site textarea:focus {
	color: var(--form--color-text);
	outline-offset: 2px;
	outline: 2px dotted var(--form--border-color);
	background-color: #fff;
}
input[type=text]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled,
input[type=date]:disabled,
input[type=month]:disabled,
input[type=week]:disabled,
input[type=time]:disabled,
input[type=datetime]:disabled,
input[type=datetime-local]:disabled,
input[type=color]:disabled,
.site textarea:disabled {
	opacity: 0.7;
}
input[type=search]:focus {
	outline-offset: -7px;
}
input[type=color] {
	padding: calc(var(--form--spacing-unit) / 2);
	height: calc(4 * var(--form--spacing-unit));
}
input[type=email],
input[type=url] {
	/*rtl:ignore*/
	direction: ltr;
}
select {
	border: var(--form--border-width) solid var(--form--border-color);
	color: var(--form--color-text);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	line-height: var(--global--line-height-body);
	padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
	background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat;
	background-position: right var(--form--spacing-unit) top 60%;
}
select:focus {
	outline-offset: 2px;
	outline: 2px dotted var(--form--border-color);
}
textarea {
	width: 100%;
}
label {
	font-size: var(--form--font-size);
	font-weight: var(--form--label-weight);
	margin-bottom: calc(var(--global--spacing-vertical) / 3);
}

/**
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
License: MIT.
*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	input[type=checkbox],
	input[type=radio] {
		-webkit-appearance: none;
		-moz-appearance: none;
		position: relative;
		width: 25px;
		height: 25px;
		border: var(--form--border-width) solid var(--form--border-color);
		background: var(--global--color-white);
	}
	input[type=checkbox]:disabled,
	input[type=radio]:disabled {
		opacity: 0.7;
	}
	input[type=checkbox]:focus {
		outline-offset: 2px;
		outline: 2px dotted var(--form--border-color);
	}
	input[type=checkbox]:after {
		content: "";
		opacity: 0;
		display: block;
		left: 5px;
		top: 2px;
		position: absolute;
		width: 7px;
		height: 13px;
		border: 3px solid var(--form--color-text);
		border-top: 0;
		border-left: 0;
		transform: rotate(30deg);
	}
	input[type=checkbox]:checked {
		color: var(--form--color-text);
	}
	input[type=checkbox]:checked:after {
		opacity: 1;
	}
	input[type=radio] {
		border-radius: 50%;
	}
	input[type=radio]:focus {
		outline-offset: 2px;
		outline: 2px dotted var(--form--border-color);
	}
	input[type=radio]:after {
		content: "";
		opacity: 0;
		display: block;
		left: 3px;
		top: 3px;
		position: absolute;
		width: 11px;
		height: 11px;
		border-radius: 50%;
		background: var(--form--color-text);
	}
	input[type=radio]:checked {
		border: 4px solid var(--form--border-color);
	}
	input[type=radio]:checked:after {
		opacity: 1;
	}
	input[type=radio]:checked:focus {
		outline-offset: 4px;
		outline: 2px dotted var(--form--border-color);
	}
}
input[type=checkbox] + label,
input[type=radio] + label {
	display: inline-block;
	padding-left: 10px;
	font-size: var(--global--font-size-xs);
	vertical-align: top;
}

::-moz-placeholder {
	opacity: 1;
}

/*
 * text-underline-offset doesn't work in Chrome at all 👎
 * But looks nice in Safari/Firefox, so let's keep it and
 * maybe Chrome will support it soon.
 */
a {
	cursor: pointer;
	color: var(--global--color-green);
	text-underline-offset: 3px;
	text-decoration-skip-ink: all;
}
a:hover {
	text-decoration-style: dotted;
	text-decoration-skip-ink: none;
}
.site-footer a,
.widget-title a {
	text-decoration: none;
}
a:active,
a:hover {
	opacity: 0.6;
	transition: opacity 1s linear;
}

/** * Button */

button,
input[type=submit],
input[type=reset] {
	border: var(--button--border-width) solid transparent;
	border-radius: var(--button--border-radius);
	cursor: pointer;
	font-weight: var(--button--font-weight);
	font-size: var(--button--font-size);
	line-height: var(--button--line-height);
	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
	text-decoration: none;
}
.site .button:not(:hover):not(:active):not(.has-text-color),
button:not(:hover):not(:active):not(.has-text-color),
input[type=submit]:not(:hover):not(:active):not(.has-text-color),
input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
	color: var(--global--color-white);
}
button:not(:hover):not(:active):not(.has-background),
input[type=submit]:not(:hover):not(:active):not(.has-background),
input[type=reset]:not(:hover):not(:active):not(.has-background) {
	background-color: var(--button--color-background);
}
button:hover,
button:active,
input[type=submit]:hover,
input[type=submit]:active,
input[type=reset]:hover,
input[type=reset]:active {
	background-color: var(--button--color-background-active);
	border-color: currentColor;
	color: #fff;;
}
button:focus,
input[type=submit]:focus,
input[type=reset]:focus {
	outline-offset: -6px;
	outline: 2px dotted currentColor;
}
button:disabled,
input[type=submit]:disabled,
input[type=reset]:disabled {
	background-color: var(--global--color-white-50);
	border-color: var(--global--color-white-50);
	color: var(--button--color-text-active);
}
/* #primary-mobile-menu */

#primary-mobile-menu {
	position: absolute;
	top: 10px;
	right: 0;
	width: 48px;
	height: 48px;
/*	border-radius: 24px;
	-webkit-border-radius: 24px; */
	z-index: 2000;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	color: #333;
	background-color: transparent;
}
@media ( min-width: 1028px ) {
	#primary-mobile-menu {
		display: none;
	}
}
#primary-mobile-menu .dropdown-icon {
	display: flex;
	align-items: center;
}
#primary-mobile-menu .dropdown-icon.close {
	display: none;
}
#primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open {
	display: none;
}
#primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
	display: flex;
	animation-name: twentytwentyone-close-button-transition;
	animation-duration: 0.3s;
}
button#primary-mobile-menu:focus {
	outline: none;
}
#primary-mobile-menu:hover,
#primary-mobile-menu:active {
	border: none;
}

/*
#primary-mobile-menu.button .dropdown-icon svg {
	transform: rotate(180deg);
	display: inline-block;
	fill: #333;
}
*/
button#pagetop {
	padding: 0;
}
#pagetop {
	background-color: var(--global--color-green);
	height: 50px;
	width: 50px;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	position: fixed;
	right: 10px;
	bottom: 20px;
	z-index: 1000;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	opacity: 0;
	transition: 0.5s;
}
#pagetop svg {
	transform: rotate(180deg);
	display: inline-block;
	fill: currentColor;
}
@media (max-width: 480px) {
	#pagetop {
		right: 8px;
		bottom: 10px;
		height: 44px;
		width: 44px;
		border-radius: 22px;
		-webkit-border-radius: 22px;
	}
}

h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: 600;
}
h1,
h2 {
	font-size: 24px;
	line-height: 1.4;
	font-family: "Lora", serif;
	font-optical-sizing: auto;
}
h3 {
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 15px;
}
h4 {
	font-size: 16px;
	line-height: 1.4;
}
.list_h4 {
	padding-left:10px;
	margin-bottom:6px;
	border-left:7px solid #34aa4a;
	border-bottom: 1px solid #34aa4a;
}
h5 {
	font-size: 14px;
	line-height: 1.4;
}
h5.list_h5 {
	font-size: 15px;
	margin: 25px 0 0 0;
	padding: 4px 4px 4px 10px;
	color: #14850e;
	background-color: #f3f3f3;
}
h6 {
	font-size: 12px;
	line-height: 1.4;
}
.entry-content h4 {
	line-height: 1.8;
}
.entry-content h2 {
	margin-bottom: 0.75em;
}
h1.entry-title {
	border-bottom: 4px solid #b4d654;
	padding-bottom: 0;
	color: #000;
	position: relative;
}
h1.entry-title::after {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 0;
	display: block;
	width: 15%;
	border-bottom: 4px solid var(--global--color-light-green);
}
h2.entry-title {
	margin-bottom: 0.25em;
	border-bottom: 4px solid var(--global--color-green);
	padding-bottom: 4px;
	color: var(--global--color-black);
}
.entry-content h3 {
	position: relative;
	margin: 0 0 20px; 
}
.entry-content h3:first-child {
	margin-top: 0;
}
h3.subtitle {
	border-bottom: 2px solid var(--global--color-green);
	color: var(--global--color-green);
	padding: 5px;
	position: relative;
	padding-left: 30px;
}
h3.subtitle::before {
	content: "";
	width: 16px;
	height: 16px;
	position: absolute;
	top: 11px;
	left: 4px;
   	background-image: url(images/shikaku.svg);
   	background-repeat: no-repeat;
   	background-position: top left;
	background-size: contain;
}
@media ( min-width: 768px ) {
	h3.subtitle {
		margin-left: -10px;
		margin-right: -10px;
	}
}
ul,
ol {
	margin: 0;
/*	padding-left: var(--global--spacing-horizontal); */
}
ul { list-style-type: circle; }
ol { list-style-type: decimal; }

.entry-content ul,
.entry-content ol {
	padding-left: 3.5em;
	margin-bottom: 20px;
}
.entry-content ol {
	padding-left: 5em;
}
.entry-content ul ul {
	list-style: none;
	padding-left: 2.5em;
	margin-bottom: 0;
}
.entry-content ol {
	padding-left: 20px;
	margin-bottom: 20px;
}
@media ( max-width: 767px ) {
	.entry-content ul {
		padding-left: 2em;
	}
	.entry-content ul ul {
		padding-left: 1.5em;
	}
}
.widget ul {
	padding-left: var(--global--spacing-horizontal);
}
dl {
	margin-bottom: 20px;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0;
}
p {
	line-height: var(--global--line-height-body);
	margin-bottom: 16px;
}
.entry-content p {
	line-height: 2.0;
}
.cnt-wrap {
	margin-bottom: 30px;
}
.cnt-wrap p {
	text-indent: 1em;
	margin-bottom: 0;
}
.cnt-wrap p.no-indent {
	text-indent: 0;
}
.cnt-wrap p.mgbtm {
	margin-bottom: 15px;
}
.indent {
	text-indent: 1em;
}
span.indent {
	display: inline-block;
	text-indent: 1em;
}
hr {
	background-color: rgba(0, 0, 0, 0.3);
	border: 0;
	height: 1px;
	margin-bottom: 16px;
}
table {
	width: 100%;
	border-collapse: collapse;
}
table,
th,
td {
	border: 1px solid #939393;
}
table thead,
table tfoot {
	text-align: center;
}
table th,
table td {
	vertical-align: top;
	padding: 10px;
}
.entry-content table {
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 16px;
}

/* Block Alignments */

.alignleft {
	/*rtl:ignore*/
	text-align: left;
	margin-top: 0;
}
.entry-content > .alignleft {
	max-width: var(--responsive--aligndefault-width);
}
@media (min-width: 482px) {
	.alignleft {
		/*rtl:ignore*/
		float: left;
		/*rtl:ignore*/
		margin-right: var(--global--spacing-horizontal);
		margin-bottom: var(--global--spacing-vertical);
	}
	.entry-content > .alignleft {
		max-width: calc(50% - var(--responsive--alignleft-margin));
	}
}
.aligncenter {
	clear: both;
	display: block;
	float: none;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}
p.aligncenter,
div.aligncenter {
	text-align: center;
}

.alignright {
	margin-top: 0;
	margin-bottom: var(--global--spacing-vertical);
}
@media (min-width: 482px) {
	.alignright {
		/*rtl:ignore*/
		float: right;
		/*rtl:ignore*/
		margin-left: var(--global--spacing-horizontal);
	}
	.entry-content > .alignright {
		max-width: calc(50% - var(--responsive--alignright-margin));
	}
}
.alignwide { clear: both; }
.alignfull { clear: both; }

/* site branding */

.site-branding {
	position: relative;
	width: 100%;
	padding: 0;
}
.site-branding a:hover,
.site-branding a:focus {
	opacity: 0.7;
}
.site-title {
	padding: 6px;
}
.site-title img {
	max-width: 300px;
	height: auto;
	margin-right: 60px;
}
h1.site-branding-text,
p.site-branding-text {
	font-size: 14px;
	line-height: 1.2em;
	color: var(--global--color-dark-gray);
	font-weight: 400;
	margin: 10px 0 5px auto;
	font-family: 'Noto Sans JP';
}
.site-branding-text span {
	display: inline;
}
.site-branding-text a {
	text-decoration: none;
	color: var(--global--color-dark-gray);
}
.header-contact {
	display: none;
}
@media (max-width: 1027px) {
	.site-branding-txt {
		display: none;
	}
}
@media (min-width: 1028px) {
	.site-branding {
		position: relative;
		width: 100%;
		padding: 0 30px;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}
	.site-title {
		max-width: 370px;
	}
	.site-title img {
		max-width: 370px;
		margin-top: 6px;
	}
	.header-right {
		width: calc(100% - 370px);
		max-width: 860px;
		text-align: right;
	}
	h1.site-branding-text,
	p.site-branding-text,
	.header-btn {
		display: inline-block;
	}
	.header-btn {
		padding-left: 10px;
	}
	.header-btn img {
		max-width: 160px;
	}
	.header-contact {
		display: block;
	}
}

/* footer ------------------- */

#footercnt {
	background: #f1f1f1;
}
.site-footer {
	padding-top: var(--global--spacing-vertical);
	padding-bottom: 0;
	margin-top: 0;
	border-top: 1px solid #eee;
	background: #d9efd3; /*#caefbd*/
	color: var(--global--color-dark-gray);
}
.site-footer .footer-info {
	font-size: 14px;
	line-height: 1.5;
}
.site-footer .footer-info h3 {
	font-size: 16px;
	margin-bottom: 5px;
}
.footer-info a {
	color: #333;
	text-decoration: none;
}
.site-footer .section-inner {
	max-width: 1200px;
}
.site-footer .footer-right {
	font-size: 14px;
}
/*
.site-footer .section-inner {
	display: flex;
	flex-direction: column-reverse;
	max-width: 1200px;
}
*/

@media (min-width: 768px) {
/*
	.site-footer .section-inner {
		justify-content: space-between;
		flex-direction: row;
	}
*/
	.site-footer .footer-info {
		font-size: var(--footer--font-size);
		line-height: var(--global--line-height-body);
		width: 60%;
	}
	.site-footer .footer-right {
		width: 60%;
		text-align: right;
	}
	.site-footer .footer-info h3 {
		font-size: 16px;
		margin-bottom: 16px;
	}
}
.credits {
	font-size: 13px;
	margin-top: 15px;
}
.footer-right span {
	display: inline-block;
}
.footer-right .contactbtn {
	width: 240px;
	height: auto;
	margin-left: 10px;
}

.site-footer .site-info a:link,
.site-footer .site-info a:visited,
.site-footer .site-info a:active {
	color: var(--footer--color-link);
}
.site-footer .site-info a:hover {
	color: #0099ff;
}
.site-footer .site-info a:focus {
	color: var(--footer--color-link-hover);
}
/* archives -------------- */

.page-header {
	max-width: 1200px;
	margin: 0 auto 16px;
}
h1.page-title,
h2.page-title {
	font-size: 20px;
	font-weight: var(--heading--font-weight-strong);
}
h1.page-title {
	line-height: var(--global--line-height-page-title);
}
@media (max-width: 767px) {
	h1.page-title,
	h2.page-title {
		font-size: 18px;
	}
}

/* post ------------------- */

.custom-header {
	width: 100%;
	position: relative;
	height: 260px;
}
.custom-header.topimg {
	height: 280px;
}
@media (min-width: 768px) {
	.custom-header.topimg {
		height: 500px;
	}
}
.custom-header img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.pageheader {
	width: 100%;
	background: #f1f1f1;
	background-image: -webkit-linear-gradient(rgb(250, 250, 250), rgb(240, 240, 240));
	border-bottom: 1px solid #c0c0c0; /* c0c0c0 */
}
.pageheader h1,
.pageheader h2 {
	margin: 0;
	padding: 0.5em;
	color: #1a1a1a;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 500;
}
.pageheader h1 span.txt14,
.pageheader h2 span.txt14 {
	font-size: 14px;
}
@media (min-width: 768px) {
	.pageheader h1,
	.pageheader h2 {
		font-size: var(--global--font-size-xxl);
		padding: 14px;
	}
}
.breadcrumbs {
	font-size: 13px;
	padding: 5px 14px 0;
}
.entry-header {
	margin-bottom: var(--global--spacing-vertical);
}
.has-sidebar .entry-header {
	max-width: 870px;
	margin-right: auto;
	margin-left: auto;
}
body:not(.page) .entry-title {
	margin: 0;
	padding: 0 10px 18px;
	position: relative;
}
.entry-title a {
	color: #1a1a1a;
	text-decoration: none;
}
.entry-title a:hover {
	color: #007acc;
}
.entry-title a:focus {
	color: var(--entry-header--color-focus);
}
.entry-title a:active {
	color: var(--entry-header--color-link);
}

/**
 * Entry Content
 */
.entry-content {
	line-height: var(--global--line-height-body);
	font-size: 15px;
}
@media (min-width: 768px) {
	.entry-content {
		line-height: 2.0;
		font-size: 16px;
	}
}

@keyframes twentytwentyone-close-button-transition {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Primary Sidebar */

.primary-sidebar {
	padding: 20px 0 0;
}
.primary-sidebar p {
	margin-bottom: 10px;
}

/**
 * Widgets
*/
.widget-area {
	color: var(--global--color-dark-gray);
	font-size: var(--footer--font-size); /* 15px */
}
.footer-sidebar.widget-area {
	padding: 10px 12px;
	max-width:1200px;
	margin : 0 auto;
}
@media (min-width: 768px) {
	.footer-sidebar.widget-area {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: calc(2 * var(--global--spacing-horizontal));
	}
}
@media (max-width: 767px) and (min-width: 501px) {
	.widget-area section {
		padding: 10px;
	}
}
@media (max-width: 500px) {
	.widget-area section {
		padding: 10px;
	}
}
.widget-area:after {
	content: "";
	display: table;
	clear: both;
}
@media (min-width: 768px) {
	.widget-area section {
		padding: 10px;
		background-color: #fff;
	}
}
.widget {
	font-size: 15px;
	line-height: 1.6em;
	margin-bottom: 1.5em;
	padding-top: 1.0em;
}
.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget > ul {
	border-style: solid;
	border-width: 1px 0 0 0;
	border-color: #ddd;
}
.widget ul > li {
	border-bottom: 1px solid #ddd;
	margin-left: 0;
}
.widget li > ol,
.widget li > ul {
	padding-left: 1em;
	border-width: 0 0 0 0;
}
.widget ul li a {
	padding: 6px;
	display: block;
	text-decoration: none;
	color: #000;
	position: relative;
	padding-left: 20px;
}
.footer-sidebar ul li a {
	padding-top: 2px;
	padding-bottom: 2px;
}
.widget ul li a::before {
	content: "";
	width: 8px;
	height: 14px;
	position: absolute;
	top: 13px;
	left: 10px;
   	background-image: url(images/sankaku.svg);
   	background-repeat: no-repeat;
   	background-position: top left;
	background-size: contain;
}
.footer-sidebar ul li a::before {
	top: 8px;
	left: 5px;
}
.widget .widget-title,
.widget .widget-title a {
	font-size: var(--global--font-size-base);
	font-weight: 600;
	line-height: 1.3125;
	margin: 0 0 1.2em;
	color: #1a1a1a;
}
.primary-sidebar .widget .widget-title {
	font-size: var(--global--font-size-base);
	font-weight: 600;
	line-height: 1.3125;
	margin: 0 0 1.2em;
	color: #fff;
	background-color: var(--global--color-green);
	padding: 10px;
	text-align: center;
}
.widget .widget-title a:hover {
	color: #ffff00;
}
.widget hr {
	background-color: rgba(255, 255, 255, 0.2);
}
.widget p {
	margin-bottom: 18px;
}
@media (max-width: 767px) {
	.widget ul li {
		font-size: 17px;
	}
}

.search-form {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	max-width: var(--responsive--aligndefault-width);
}
.search-form > label {
	width: 100%;
	margin-bottom: 0;
	font-weight: var(--form--label-weight);
}
.search-form .search-field {
	flex-grow: 1;
	max-width: inherit;
	margin-top: calc(var(--global--spacing-vertical) / 3);
	margin-right: calc(0.66 * var(--global--spacing-horizontal));
}
.search-form .search-submit {
	margin-top: calc(var(--global--spacing-vertical) / 3);
	margin-left: 10px;
}
.widget_search > .search-form .search-field {
	margin-right: calc(-1 * var(--button--border-width));
	-webkit-appearance: none;
	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}
.widget_search > .search-form .search-submit {
	margin-left: 0;
	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
}
.widget_rss a.rsswidget .rss-widget-icon {
	display: none;
}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
	word-break: normal;
}