/*!
Theme Name: Kamo Dental Clinic
Theme URI: http://underscores.me/
Author: nataredesign
Author URI: http://underscores.me/
Description: Only for Kamo Dental Clinic
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kdc
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Kamo Dental Clinic is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! 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;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 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;
	text-decoration: underline;
	text-decoration: underline 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, monospace;
	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;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* 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;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	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;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * 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;
	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;
	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;
	font: inherit;
}

/* 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;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/* Variables
--------------------------------------------- */
:root {
	/* Font Family */
	--global--font-primary: 'Noto Sans JP', 'PT Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--global--font-secondary: var(--font-base, 'Noto Sans JP', 'PT Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
	--brand--font-jp: 'Noto Sans JP', var( --global--font-primary);
	--brand--font-jp-key: 'Zen Maru Gothic', var( --global--font-primary), serif;
	--brand--font-en: 'Proza Libre', var( --global--font-primary), serif;


	/* Font Size */
	--global--font-size-base: 1rem;
	--global--font-size-tiny: 0.5rem;
	--global--font-size-xxs: 0.625rem;
	--global--font-size-xs: 0.75rem;
	--global--font-size-sm: 0.875rem;
	--global--font-size-md: 1rem;
	--global--font-size-lg: 1.25rem;
	--global--font-size-xl: 1.825rem;
	--global--font-size-xxl: 2.25rem;
	--global--font-size-xxxl: 2.825rem;
	--global--font-size-huge: 3.25rem;
	--global--letter-spacing: normal;

	/* Font Weight */
	--global--font-weight-base: 400;
	--global--font-weight-nomal: 300;
	--global--font-weight-regular: 400;
	--global--font-weight-bold: 600;
	--global--font-weight-exbold: 800;

	/* Letter Spacing */
	--global--letter-spacing-base: normal;
	--global--letter-spacing-wide: 0.1em;
	--global--letter-spacing-narrow: -0.03em;

	/* Colors */
	--global--color-black: #000;
	--global--color-black-10: rgba(0, 0, 0, 0.1);
	--global--color-black-50: rgba(0, 0, 0, 0.5);

	--global--color-dark-grey: #1a1a1a;
	--global--color-dark-grey: #4d4d4d;
	--global--color-light-grey: #b3b3b3;
	--global--color-pale-grey: #f2f2f2;
	--global--color-very-pale-grey: #fcfdfd;

	--global--color-bg: var(--global--color-very-pale-grey);
	--global--color-white: #fff;
	--global--color-white-20: rgba(255, 255, 255, 0.2);
	--global--color-white-50: rgba(255, 255, 255, 0.5);
	--global--color-white-90: rgba(255, 255, 255, 0.9);

	--global--color-gold: #c89628;
	--global--color-silver: #615e60;

	--brand--color-main: var(--brand--color-dark-green);
	--brand--color-key: var(--brand--color-green);
	--brand--color-accent: var(--brand--color-yellow);

	--brand--color-brown: #443007;
	--brand--color-green: #1eb1a3;
	--brand--color-pale-green: #e3f0df;
	--brand--color-light-green: #c7f0c5;
	--brand--color-dark-green: #486b5e;
	--brand--color-yellow: #efd256;
	--brand--color-pale-yellow: #efe4b4;
	--brand--color-light-yellow: #efd67e;
	--brand--color-dark-yellow: #a58d29;
	--brand--color-red: #ed6f62;
	--brand--color-pale-red: #edbeb9;
	--brand--color-light-red: #ed8883;
	--brand--color-dark-red: #b2332d;
	--brand--color-blue: #638ee5;
	--brand--color-pale-blue: #b7c6e5;
	--brand--color-light-blue: #83b0e5;
	--brand--color-dark-blue: #4070bf;

	--social--color-fb-blue: #4267b2;
	--social--color-fb-grey: #898f9c;
	--social--color-fb-black: #282828;
	--social--color-yt-white: #fff;

	--social--color-yt-red: #ff0000;
	--social--color-yt-black: #282828;
	--social--color-yt-white: #fff;

	--social--color-ig-mixed: #fff;

	/* Box Shadow */
	--global--shadow-weak: 2px 2px 8px 4px rgba(0, 0, 0, 0.2);
	--global--shadow-button: 4px 4px 6px 4px rgba(0, 0, 0, 0.035), -4px -4px 6px 4px rgba(255, 255, 255, .825);
	--global--shadow-button-inset: 4px 4px 6px 4px rgba(0, 0, 0, 0.025) inset, -4px -4px 6px 4px rgba(255, 255, 255, .825) inset;

	/* Drop Shadow */
	--global--drop-shadow-very-weak: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.25));
	--global--drop-shadow-weak: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.3));
	--global--drop-shadow-hero: drop-shadow(13px 8px 3px rgba(0, 0, 0, 0.8));
	--global--drop-shadow: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.3));
	--global--drop-shadow-green: drop-shadow(0px 0px 0.75rem var(--brand--color-green));
	--global--drop-shadow-yellow: drop-shadow(0px 0px 0.75rem var(--brand--color-yellow));
	--global--drop-shadow-pink: drop-shadow(0px 0px 0.75rem var(--brand--color-pink));
	--global--drop-shadow-blue: drop-shadow(0px 0px 0.75rem var(--brand--color-blue));
	--global--drop-shadow-white: drop-shadow(0px 0px 0.75rem var(--brand--color-white));
}

/* media query */
@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
}

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--brand--color-brown);
	font-family: var(--brand--font-jp);
	font-size: var(--global--font-size-base);
	font-weight: var(--global--font-weight-base);
	line-height: 2.1;
	letter-spacing: 0.07em;
}

@media all and (max-width: 760px) {
	body,
	button,
	input,
	select,
	optgroup,
	textarea {
		font-size: 0.875em;
	}
}


h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-family: var(--brand--font-jp-key);
	color: var(--brand--color-green);
	font-weight: 400;
	letter-spacing: 0.05em;
}

p {
	margin-bottom: .5em;
	letter-spacing: 0.05em;
}

summary {
	letter-spacing: 0.05em;
}

dfn,
cite,
em,
i {
	font-style: italic;
	letter-spacing: 0.05em;
}

blockquote {
	/* font-size: var(--global--font-size-md); */
	padding: .1em 1.825em .825em;
	background-color: var(--global--color-pale-grey);
	font-family: var(--brand--font-serif);
	line-height: 1.75;
	letter-spacing: 0.05em;
	margin: 0 .5em;
	/* text-align: start; */
}

address {
	letter-spacing: 0.05em;
	margin: 0 0 .5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: .5em;
}

ul,
ol {
	margin: 0 0 .5em 0;
	padding: 0 0 0 2em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

li::marker,
li::marker {
	color: var(--brand--color-green);
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em .5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 .5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--brand--color-dark-green);
	font-weight: 700;
	text-decoration: none;
	transition: all ease .4s;
}

/* a {
	color: var(--brand--color-dark-green);
	font-weight: 700;
	text-decoration: none;
	transition: all ease .4s;
	position: relative;
	display: inline-block;
}

a::after {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 100%;
	background-color: var(--brand--color-pale-green);
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	z-index: -1;
	transition: all ease .4s;
}

a:hover::after {
	width: 100%;
} */

a:visited {
	/* color: var(--brand--color-dark-green); */
}

a:hover,
a:focus,
a:active {
	color: var(--brand--color-dark-green);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* CTA */
button.cta {
	border-radius: inherit;
	background: inherit;
	line-height: inherit;
	border-color: inherit;
}

.cta-wrapper {
	position: relative;
	display: block;
	padding: 1em 0;
}

.cta-wrapper-footer {
	position: relative;
	display: block;
	padding: 1em 0 0;
}

.cta-wrapper-right {
	text-align: right;
}

.cta-wrapper-center {
	text-align: center;
}

@media all and (max-width: 760px) {
	.cta-wrapper-sp-left {
		text-align: left;
	}
}

.cta {
	position: relative;
	display: inline-block;
	color: var(--brand--color-green);
	font-size: var(--global--font-size-sm);
	font-weight: var(--global--font-weight-bold);
	margin: .825em 1.5em .825em 0;
	padding: .5em 1.25em;
	border: solid 1.5px var(--brand--color-green);
	border-radius: 6px;
	box-sizing: border-box;
	transition: all ease .4s;
	overflow: hidden;
	z-index: 1;
}

@media all and (max-width: 760px) {
	.cta {
		font-size: var(--global--font-size-xs);
		padding: .35em .825em;
	}
}

.cta::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	background-color: var(--brand--color-green);
	border: solid 1.5px var(--brand--color-green);
	transform: translateY(110%);
	transition: all ease .4s;
	box-sizing: border-box;
	z-index: -1;
}

.cta:hover {
	position: relative;
	display: inline-block;
	color: var(--global--color-white);
	border-radius: 18px;
}

.cta:hover::after {
	transform: translateY(0%);
}

.cta-red {
	color: var(--brand--color-red);
	border: solid 1.5px var(--brand--color-red);
}

.cta-red::after {
	background-color: var(--brand--color-red);
	border: solid 1.5px var(--brand--color-red);
}

.cta-blue {
	color: var(--brand--color-blue);
	border: solid 1.5px var(--brand--color-blue);
}

.cta-blue::after {
	background-color: var(--brand--color-blue);
	border: solid 1.5px var(--brand--color-blue);
}

.cta-yellow {
	color: var(--brand--color-yellow);
	border: solid 1.5px var(--brand--color-yellow);
}

.cta-yellow::after {
	background-color: var(--brand--color-yellow);
	border: solid 1.5px var(--brand--color-yellow);
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

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="range"]: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,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/
.l-header {
	display: block;
	position: relative;
	height: auto;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	z-index: 99;
}

@media all and (max-width: 980px) {
	.l-header {
	}
}

@media all and (max-width: 760px) {
	.l-header {
	}
}

.l-aside-social {
	position: fixed;
	left: 20px;
	top: 45%;
	margin: auto 0;
	z-index: 100;
}

@media all and (max-width: 760px) {
	.l-aside-social {
			top: 20px;
	}
}

.l-footer {
	display: block;
	position: relative;
	height: auto;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	z-index: 97;
}

.l-main {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

@media all and (max-width: 980px) {
	.l-main {
	}
}

@media all and (max-width: 760px) {
	.l-main {
	}
}

.l-section {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.l-section-hero {
	z-index: 1;
}

.l-section-header {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.l-container {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

@media all and (max-width: 760px) {
	.l-container-sp-flex {
		display: flex;
		flex-direction: column-reverse;
	}
}

.l-container-inner {
	position: relative;
	max-width: 1024px;
	padding: 5% 5% 7%;
	margin: 0 auto;
	height: 100%;
}

@media all and (max-width: 980px) {
	.l-container-inner {
	}
}

@media all and (max-width: 760px) {
	.l-container-inner {
		padding: 5% 5% 7%;
	}
}

.l-container-inner-narrow {
	position: relative;
	padding: 3% 3% 4%;
	max-width: 1024px;
	margin: 0 auto;
	height: 100%;
}

.l-container-inner-header {
	position: relative;
	display: flex;
	padding: 10px 20px;
	max-width: initial;
	margin: 0 auto;
	height: 100%;
	grid-column-gap: 2.5rem;
	grid-row-gap: 2.5rem;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;	
}

.l-container-inner-hero {
	padding: 0;
}

.l-container-inner-full {
	max-width: 100%;
}

@media all and (max-width: 980px) {
	.l-container-inner-hero {
	}
}

@media all and (max-width: 760px) {
	.l-container-inner-hero {
		padding: calc(2vh) 5% 4vh;
	}
}

.l-container-inner-footer {
	padding: 4vh 5vw 5vh;
	grid-row-gap: 2.5rem;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	display: flex;
	position: relative;
	flex: 1;
}

@media all and (max-width: 980px) {
	.l-container-inner-footer {
	}
}

@media all and (max-width: 760px) {
	.l-container-inner-footer {
		grid-row-gap: .5rem;
		padding: 5% 1%;
		flex-direction: column-reverse;
	}
}

.l-container-inner-flex {
	grid-column-gap: 2.5rem;
	grid-row-gap: 2.5rem;
	flex-flow: row;
	justify-content: flex-start;
	align-items: center;
	display: flex;
	position: relative;
	flex: 1;
}

@media all and (max-width: 980px) {
	.l-container-inner-flex {
	}
}

@media all and (max-width: 760px) {
	.l-container-inner-flex {
		padding: 5% 5%;
		flex-flow: column;
	}
}

.l-container-inner-flex-r {
	justify-content: flex-end;
}

.l-container-inner-recruit {
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.l-container-inner-recruit {
		padding: 5% 5% 25%;
	}
}

.l-container-inner-bg,
.l-container-inner-cover {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: auto;
	padding: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.l-grid {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	gap: 0;
	margin: 0;
	padding: 0;
}

.l-grid-middle {
	align-items: center;
}

.l-grid-center {
	justify-content: center;
}

.l-grid-reverse {
	flex-direction: row-reverse;
	justify-content: space-between;
}

.l-grid-gap-sm {
	gap: 1.5%;
}

.l-grid-gap-md {
	gap: 3%;
}

.l-grid-gap-lg {
	gap: 5%;
}

.l-grid-margin-lg {
	margin-bottom: 2.5em;
}

.l-grid-item {
	display: block;
	position: relative;
	/* margin: 0 auto; */
	padding: 0;
}

.l-grid-1 .l-grid-item {
	width: 100%;
}

.l-grid-2 .l-grid-item {
	width: calc(100% / 2 - 3%);
}

.l-grid-3 .l-grid-item {
	width: calc(100% / 3 - 3%);
}

.l-grid-4 .l-grid-item {
	width: calc(100% / 4 - 3%);
}

.l-grid-5 .l-grid-item {
	width: calc(100% / 5 - 3%);
}

.l-grid-6 .l-grid-item {
	width: calc(100% / 6 - 3%);
}

.l-grid-3-7 .l-grid-item:nth-child(2n+1) {
	width: calc(100% / 10 * 3 - 3%);
}

.l-grid-3-7 .l-grid-item:nth-child(2n) {
	width: calc(100% / 10 * 7 - 3%);
}

.l-grid-7-3 .l-grid-item:nth-child(2n+1) {
	width: calc(100% / 10 * 7 - 3%);
}

.l-grid-7-3 .l-grid-item:nth-child(2n) {
	width: calc(100% / 10 * 3 - 3%);
}

.l-grid-4-6 .l-grid-item:nth-child(2n+1) {
	width: calc(100% / 10 * 4 - 3%);
}

.l-grid-4-6 .l-grid-item:nth-child(2n) {
	width: calc(100% / 10 * 6 - 3%);
}

.l-grid-6-4 .l-grid-item:nth-child(2n+1) {
	width: calc(100% / 10 * 6 - 3%);
}

.l-grid-6-4 .l-grid-item:nth-child(2n) {
	width: calc(100% / 10 * 4 - 3%);
}

@media all and (max-width: 980px) {
	.l-grid-tb-1 {
		flex-wrap: wrap;
	}
}

@media all and (max-width: 980px) {
	.l-grid-tb-1 .l-grid-item:nth-child(2n),
	.l-grid-tb-1 .l-grid-item:nth-child(2n+1),
	.l-grid-tb-1 .l-grid-item {
		width: calc(100%);
	}
}

@media all and (max-width: 980px) {
	.l-grid-tb-2 {
	}
}

@media all and (max-width: 980px) {
	.l-grid-tb-2 .l-grid-item:nth-child(2n),
	.l-grid-tb-2 .l-grid-item:nth-child(2n+1),
	.l-grid-tb-2 .l-grid-item {
		width: calc(50%);
	}
}

@media all and (max-width: 760px) {
	.l-grid-sp-1 {
		flex-wrap: wrap;
		grid-row-gap: .5rem;
	}
}

@media all and (max-width: 760px) {
	.l-grid-sp-1 .l-grid-item:nth-child(2n),
	.l-grid-sp-1 .l-grid-item:nth-child(2n+1),
	.l-grid-sp-1 .l-grid-item {
		width: calc(100%);
	}
}

@media all and (max-width: 760px) {
	.l-grid-sp-2 {
		flex-wrap: wrap;
	}
}

@media all and (max-width: 760px) {
	.l-grid-sp-2 .l-grid-item:nth-child(2n),
	.l-grid-sp-2 .l-grid-item:nth-child(2n+1),
	.l-grid-sp-2 .l-grid-item {
		width: calc(50%);
	}
}

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Site Header
--------------------------------------------- */
.site-header {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	padding: 25px 45px;
	margin: 0;
}

@media all and (max-width: 980px) {
	.site-header {
		padding: 20px 35px;
	}
}

@media all and (max-width: 760px) {
	.site-header {
		justify-content: space-between;
		padding: 20px 10px;
	}
}

/* Site Branding
--------------------------------------------- */
.site-branding {
	display: block;
	position: relative;
	height: auto;
	width: calc(30%);
	margin: auto;
	text-align: center;
}

.custom-logo-link {
	display: block;
	position: relative;
	height: 100%;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}

.custom-logo {
	display: block;
	position: relative;
	height: 100%;
	width: 200px;
	margin: 0;
	padding: 0;
}

@media all and (max-width: 760px) {
	.custom-logo {
		height: auto;
		margin: auto 0;
	}
}

/* Site Footer
--------------------------------------------- */
.site-footer {
	display: block;
	position: relative;
	height: auto;
	width: 100%;
	overflow: hidden;
	padding: 0;
	margin: 0;
	background-color: var(--brand--color-green);
}

.site-info {
	color:  var(--brand--color-dark-green);
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: stretch;
	align-items: stretch;
	position: relative;
	height: 100%;
	width: 100%;
	padding: 4em 7.5em 4em 7em;
	margin: 0;
}

@media all and (max-width: 980px) {
	.site-info {
		padding: 4em 2em 7em;
	}
}

@media all and (max-width: 760px) {
	.site-info {
		justify-content: center;
		align-items: center;
		padding: 3em 1em 8em;
	}
}

.site-info-left,
.site-info-right {
	position: relative;
	width: 50%;
	padding: 0;
	margin: 0;
}

.site-info-left {

}

@media all and (max-width: 760px) {
	.site-info-left {
		margin: 0 0 3em;
	}
}

.site-info-right {
	text-align: right;
	text-align: -moz-right;
	text-align: -webkit-right;
}

@media all and (max-width: 760px) {
	.site-info-left,
	.site-info-right {
		width: 100%;
		text-align: center;
		text-align: -moz-center;
		text-align: -webkit-center;
	}
}

.search-form-footer {
	position: relative;
	max-width: 350px;
	margin: 0;
	padding: 0;
}

.site-logo-footer {
	display: block;
	position: relative;
	height: 130px;
	margin: 0 0 1em;
	padding: 0;
	overflow: hidden;
}

.site-logo-footer-image {
	display: block;
	position: relative;
	height: 100%;
	width: auto;
	margin: auto 0;
	padding: 0;
}

.copyright {
	color: var(--global--color-white);
	font-size: var(--global--font-size-xs);
}

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	position: fixed;
	/* width: 55px;
	height: 55px; */
	margin: 0;
	padding: 0;
	top: 50px;
	right: 50px;
}

@media all and (max-width: 760px) {
	.main-navigation {
		width: auto;
		top: 25px;
		right: 20px;
	}
}

.menu-toggle {
	display: block;
	position: relative;
	width: 55px;
	height: 55px;
	background: var(--brand--color-green);
	border-radius: 50px;
	border: none;
	z-index: 1;
	box-shadow: var(--global--drop-shadow-weak);
	margin: auto;
	top: -20%;
	bottom: 0;
	text-align: center;
	padding: .6em .5em .4em;
}

.toggled .menu-toggle {
	/* box-shadow: var(--global--shadow-button-inset); */
	transition: all .4s;
}

@media all and (max-width: 760px) {
	.menu-toggle {
		width: 50px;
		height: 50px;
		top: -20%;
	}
}

.menu-toggle-bow {
	position: absolute;
	cursor: pointer;
	width: 60%;
	height: 40%;
	top: -10px;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: auto;
	transition: all .4s;
}

.toggled .menu-toggle-bow {
	opacity: 0;
}

.menu-toggle-bow::after {
	content: "";
	position: absolute;
	display: block;
	cursor: pointer;
	width: 90%;
	height: 90%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: auto;
	background: center / contain no-repeat url(./assets/svg/bow.svg);
	transition: all .4s;
}

button:hover .menu-toggle-bow::after {
	transform: scale(1.15) rotate(5deg);
}

.menu-toggle-lines {
	position: relative;
	cursor: pointer;
	width: 70%;
	height: 30%;
	margin: 13% auto 0;
}

.menu-toggle-lines span {
	display: inline-block;
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	margin: auto;
	height: 2px;
	border-radius: 2px;
	background-color:  var(--brand--color-yellow);
	opacity: 0;
	transition: all .4s;
}

@media all and (max-width: 760px) {
	.menu-toggle-lines span {
		width: 90%;
	}
}

.menu-toggle-lines span:nth-of-type(1) {
	top: 0%;
}

.menu-toggle-lines span:nth-of-type(2) {
	top: 50%;
}

.menu-toggle-lines span:nth-of-type(3) {
	top: 100%;
}

.toggled .menu-toggle-lines span:nth-of-type(1) {
	transform: translateY(6px) rotate(-45deg);
	opacity: 1;
}

@media all and (max-width: 760px) {
	.toggled .menu-toggle-lines span:nth-of-type(1) {
		transform: translateY(6px) rotate(-45deg);
	}
}

.toggled .menu-toggle-lines span:nth-of-type(2) {
	opacity: 0;
}

.toggled .menu-toggle-lines span:nth-of-type(3){
	transform: translateY(-6px) rotate(45deg);
	opacity: 1;
}

@media all and (max-width: 760px) {
	.toggled .menu-toggle-lines span:nth-of-type(3){
		transform: translateY(-6px) rotate(45deg);
	}
}

.menu-toggle-text {
	display: block;
	position: relative;
	width: 100%;
	height: 1em;
	margin-top: .5em;
}

@media all and (max-width: 760px) {
	.menu-toggle-text {
		margin-top: .725em;
	}
}

.menu-toggle-text::after,
.menu-toggle-text::before {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0;
	margin: 0;
	color: var(--brand--color-yellow);
	font-family: var(--brand--font-en);
	font-size: var(--global--font-size-tiny);
	font-weight: var(--global--font-weight-bold);
	text-transform: uppercase;
	z-index: 1;
	transition: .5s;
}

@media all and (max-width: 760px) {
	.menu-toggle-text::after,
	.menu-toggle-text::before {
	}
}

.menu-toggle-text::before {
   	content: "MENU";
    opacity: 1;
    transform: translateY(0);
}

.menu-toggle-text::after {
   	content: "CLOSE";
    opacity: 0;
    transform: translateY(-10%);
}

.toggled .menu-toggle-text::before {
	transition: .5s;
	opacity: 0;
    transform: translateY(10%);
}

.toggled .menu-toggle-text::after {
	transition: .5s;
	opacity: 1;
    transform: translateY(0);
}

.main-navigation-container {
	display: flex;
	position: fixed;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	list-style: none;
	width: 100%;
	height: 100vh;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 5em 2em;
	opacity: 0;
	pointer-events: none;
	transition: ease .5s;
	background-color: var(--brand--color-green);
	overflow: auto;
}

@media all and (max-height: 400px) {
	.main-navigation-container {
		justify-content: flex-start;
		padding: 5% 5%;
	}
}

.main-navigation.toggled .main-navigation-container {
	opacity: 1;
	pointer-events: initial;
}

.main-navigation-bg {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0;
	z-index: -3;
	pointer-events: none;
	overflow: hidden;
}

.main-navigation-footer {
	position: relative;
	display: flex;
	width: 240px;
	justify-content: flex-start;
	align-items: center;
}

/* Primary menu */
/* 全体レイアウト（フレックスで左右に並べる） */
.grand-menu-container {
	position: relative;
    display: flex;
		flex-direction: row-reverse;
    width: 100%;
		margin: 0 auto 1.5em;
    align-items: flex-start;
		justify-content: center;
		background-color: transparent;
}

/* ナビゲーション側 */
.grand-menu-nav {
    /* width: 60%; */
    padding: 0 40px;
}

.grand-menu-list {
	position: relative;
	display: flex;
	flex-direction: column;
	list-style: none;
}

@media all and (max-width: 760px) {
	.grand-menu-list {
		align-items: center;
	}
}

.grand-menu-item {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	color: var(--global--color-white);
	font-size: var(--global--font-size-lg);
	font-family: var(--brand--font-jp-key);
	opacity: 1;
	}

.grand-menu-item a {
	position: relative;
	color: var(--global--color-white);
	font-weight: var(--global--font-weight-regular);
	letter-spacing: var(--global--letter-spacing-wide);
	transition: opacity 0.6s 0s ease; 
	}

	/* ホバーしたメニューを強調する（お好みで） */
.grand-menu-item a:hover {
    opacity: 1;
}

.grand-menu-item a::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	right: 0;
	left: 0;
	bottom: 0;
	height: 9px;
	background-color: var(--brand--color-yellow);
	padding: 0;
	margin: 0 auto;
	transition: all ease .2s;
	transform: scaleX(0);
	transform-origin: left;
	z-index: -1;
}

.grand-menu-item a:hover::after {
	transform: scaleX(100%);
}

.main-navigation-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.main-navigation-bg-image {
	position: absolute;
	width: 60%;
	height: 80%;
	bottom: -30%;
	right: -10%;
	background: center / contain no-repeat url(./assets/svg/nav-bg.svg);
}

/* スライダー側 */
.grand-menu-slider {
	position: relative;
	width: 40%;
	height: 100%;
}

@media all and (max-width: 760px) {
	.grand-menu-slider {
		display: none;
	}
}

.grand-menu-swiper {
	position: relative;
    width: 100%;
    height: 100%;
}

.grand-menu-slider-item.swiper-slide {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.grand-menu-slider-item-image {
	position: relative;
	display: block;
	width: 100%;
	background: center / cover no-repeat;
	overflow: hidden;
	border-radius: 20px;
	z-index: 0;
}

.grand-menu-slider-item-image::before {
	content: "";
	position: relative;
	display: block;
	padding-top: 442px;
	background: center / cover no-repeat;
}

/* Secondary menu */
.menu-secondary-container {
	display: block;
	position: relative;
}

.secondary-menu {
	display: flex;
	position: relative;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	list-style: none;
	gap: 10px;
	/* max-width: 600px; */
	width: 100%;
	color: var(--brand--color-dark-green);
	font-family: var(--brand--font-sans);
	font-size: var(--global--font-size-sm);
	text-align: center;
	margin: 0;
	padding: 0 0 2em;
	transition: .5s;
}

@media all and (max-width: 980px) {
	.secondary-menu {
		font-size: var(--global--font-size-xs);
		justify-content: flex-start;
		gap: 0;
	}
}

.secondary-menu ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	background: var(--global--color-pale-grey);
	position: absolute;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	width: 100%;
	top: 100%;
	left: 0;
	right: 0;
	list-style: none;
	z-index: -1;
	overflow: inherit;
	opacity: 0;
	pointer-events: none;
	margin: 0 auto;
	padding: 0;
	transition: all ease .2s;
}

.secondary-menu ul ul {
	box-shadow: none;
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	max-width: 100%;
	list-style: none;
	z-index: -1;
	overflow: inherit;
	opacity: 0;
	margin: 0 auto;
	padding: 0;
	transition: all ease .2s;
	opacity: 1;
	top: initial;
	left: initial;
	right: initial;
}

.secondary-menu ul li:hover > ul,
.secondary-menu ul li.focus > ul {
}

.secondary-menu li:hover > ul,
.secondary-menu li.focus > ul {
	pointer-events: initial;
	top: 100%;
	opacity: 1;
	z-index: 99999;
}

.secondary-menu li {
	position: relative;
	text-align: center;
	padding: .25em;
	/* width: 33.333%; */
}

@media all and (max-width: 760px) {
	.secondary-menu li {
		width: 50%;
	}
}

.secondary-menu ul li {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: .25em 1.25em;
}

.secondary-menu ul ul li {
	position: relative;
	padding: 0;
	font-size: var(--global--font-size-sm);
}

.secondary-menu a {
	color: var(--global--color-white);
	position: relative;
	display: inline-block;
	text-decoration: none;
	font-weight: var(--global--font-weight-regular);
	letter-spacing: var(--global--letter-spacing-wide);
	padding: .25em;
}

.secondary-menu ul a {
}

.secondary-menu a::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	right: 0;
	left: 0;
	bottom: 0;
	height: 1.5px;
	background-color: var(--brand--color-yellow);
	padding: 0;
	margin: 0 auto;
	transition: all ease .2s;
	transform: scaleX(0);
	transform-origin: left;
	z-index: -1;
}

.secondary-menu a:hover::after {
	transform: scaleX(100%);
}

/* Social menu */
.menu-social-container {
display: block;
position: relative;
}

.social-menu {
	display: flex;
	position: relative;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	list-style: none;
	gap: 10px;
	max-width: 500px;
	width: 100%;
	color: var(--brand--color-yellow);
	font-family: var(--brand--font-sans);
	font-size: var(--global--font-size-md);
	font-weight: var(--global--font-weight-bold);
	text-align: center;
	margin: 0 0 2em;
	padding: 0;
	transition: .5s;
}

@media all and (max-width: 980px) {
	.social-menu {
		font-size: var(--global--font-size-sm);
	}
}

.social-menu-header {
	position: fixed;
	justify-content: start;
	margin: 0 0 1em;
	left: 30px;
	top: 55px;
	width: auto;
}

@media all and (max-width: 760px) {
	.social-menu-header {
		flex-direction: column;
		left: 14px;
		top: 42px;
		align-items: flex-start;
	}
}

.social-menu-footer {
	justify-content: start;
	margin: 0 0 1em;
}

@media all and (max-width: 760px) {
	.social-menu-footer {
		justify-content: center;
	}
}

.social-menu ul {
	display: none;
}

.social-menu li {
	display: block;
	position: relative;
	color: var(--global--color-white);
	font-family: var(--brand--font-sans);
	font-size: var(--global--font-size-md);
	font-weight: var(--global--font-weight-bold);
	text-align: center;
	margin: 0;
	width: 30px;
	height: 30px;
	transition: .5s;
	overflow: hidden;
}

@media all and (max-width: 980px) {
	.social-menu li {
		font-size: var(--global--font-size-sm);
	}
}

.social-menu a {
	display: block;
	position: relative;
	width: 101%;
	height: 101%;
	font-size: 0;
	padding: 0;
	margin: 0;
}

.social-menu a:hover {
	transform: translateY(-3px);
}

.social-menu a::before,
.social-menu a::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	transition: all .4s ease;
	z-index: -1;
}

.social-fb a::after {
	background: center / 100% no-repeat url(./assets/svg/icon-fb.svg);
	z-index: 1;
}

.social-ig a::after {
	background: center center / 100% no-repeat url(./assets/svg/icon-ig.svg);
	z-index: 1;
}

.social-line a::after {
	background: center center / 100% no-repeat url(./assets/svg/icon-line.svg);
	z-index: 1;
}

.social-mail a::after {
	background: center center / 100% no-repeat url(./assets/svg/icon-mail.svg);
	z-index: 1;
}

.social-yt a::after {
	background: center / 100% no-repeat url(./assets/svg/icon-yt.svg);
	z-index: 1;
}

/* quick access menu */
.menu-quick-access-container {
	position: fixed;
	bottom: 5em;
	right: 0em;
	margin: 0;
	padding: 0;
	z-index: 98;
	transition: all ease .4s;
}

@media all and (max-width: 980px) {
	.menu-quick-access-container {
		bottom: 0;
		max-width: 380px;
	}
}

@media all and (max-width: 760px) {
	.menu-quick-access-container {
		left: 0;
		right: 0;
		margin: 0 auto;
	}
}

.menu-quick-access-container.hide {
	transform: translateX(85%);
}

@media all and (max-width: 980px) {
	.menu-quick-access-container.hide {
		transform: translateY(65%);
	}
}

.menu-quick-access-container::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 103%;
	top: 0;
	bottom: 0;
	right: -.1em;
	margin: auto 0;
	padding: 0;
	background: var(--global--color-white-50);
	border-radius: 12px 0 0 12px;
	z-index: -1;
	transition: background .4s;
}

.menu-quick-access-container:hover::after {
	background: var(--global--color-white-90);
}

@media all and (max-width: 980px) {
	.menu-quick-access-container::after {
		width: 95%;
		height: 95%;
		top: initial;
		bottom: -5%;
		left: 0;
		right: 0;
		margin: 0 auto;
		padding: 0;
		border-radius: 12px 12px 0 0;
	}
}

.quick-access-menu-toggle {
	position: relative;
	display: inline-block;
	cursor: pointer;
	width: 20px;
	height: 20px;
	right: 12px;
	padding: 0;
	margin: 0 .25em 0 0;
	border-radius: 30px;
	background-color: var(--brand--color-yellow);
}

@media all and (max-width: 760px) {
	.quick-access-menu-toggle {
		left: 45px;
	}
}

.quick-access-menu-toggle::before,
.quick-access-menu-toggle::after {
	position: absolute;
	content: "";
	width: 10px;
	height: 2px;
	top: 0;
	bottom: 0;
	right: 5px;
	margin: auto 0;
	background-color: var(--brand--color-green);
	transition: all ease .4s;
}

.quick-access-menu-toggle::before {
	transform: rotate(-45deg);
}

.quick-access-menu-toggle::after {
	transform: rotate(45deg);
}

.hide .quick-access-menu-toggle::before {
	transform: rotate(0deg);
}

.hide .quick-access-menu-toggle::after {
	transform: rotate(90deg);
}

.quick-access-menu-heading {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: .5em 0;
	right: 10px;
	bottom: 6px;
	color: var(--brand--color-green);
	font-size: var(--global--font-size-xxs);
	font-weight: var(--global--font-weight-bold);
	transition: all ease .4s;
}

@media all and (max-width: 980px) {
	.quick-access-menu-heading {
		padding: .25em 0;
		bottom: 6px;
	}
}

@media all and (max-width: 760px) {
	.quick-access-menu-heading {
		left: 51px;
	}
}

@media all and (min-width: 981px) {
	.hide .quick-access-menu-heading {
		transform: rotate(90deg) translate3d(55px,52px,0);
	}
}

.quick-access-menu {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	list-style: none;
	max-width: 200px;
	position: relative;
	color: var(--brand--color-green);
	font-weight: var(--global--font-weight-bold);
	text-align: center;
	margin: 0;
	padding: 0;
}

@media all and (max-width: 980px) {
	.quick-access-menu {
		flex-direction: row;
		justify-content: center;
		max-width: 100%;
	}
}

/* .hide .quick-access-menu {
	transform: translateX(20%);
}
 */
@media all and (max-width: 980px) {
	.hide .quick-access-menu {
		transform: translateY(20%);
	}
}

.quick-access-menu li {
	position: relative;
	display: block;
	padding: 0;
	margin: 0 0 .5em;
	width: 68px;
	height: 68px;
}

.hide .quick-access-menu li {
	transform: translateX(10%);
}

@media all and (max-width: 980px) {
	.quick-access-menu li {
		margin: 0 .25em 0 0;
		height: 48px;
	}
}

@media all and (max-width: 980px) {
	.hide .quick-access-menu li {
		transform: translateY(20%);
	}
}

.quick-access-menu ul {
	list-style: none;
}

.quick-access-menu a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: .5em;
	margin: 0;
	width: 100%;
	height: 100%;
	color: var(--brand--color-green);
	background: var(--brand--color-pale-green);
	font-size: var(--global--font-size-xxs);
	font-weight: var(--global--font-weight-bold);
	transition: .4s;
	border-radius: 10px;
}

@media all and (max-width: 980px) {
	.quick-access-menu a {
		font-size: var(--global--font-size-xxs);
	}
}

@media all and (max-width: 980px) {
	.quick-access-menu a {
		font-size: var(--global--font-size-xxs);
	}
}

.quick-access-menu a:hover {
	border-radius: 20px;
	transform: translateX(-5px);
}

@media all and (max-width: 980px) {
	.quick-access-menu a:hover {
		transform: translateY(-5px);
	}
}

.quick-menu-icon {
	position: relative;
	display: block;
	width: 80%;
	height: 80%;
	background: no-repeat center / contain;
	background-image: url("./assets/svg/icon-external.svg");
}

.quick-access-item-first .quick-menu-icon {
		background-image: url("./assets/svg/icon-qa-first.svg");

}

.quick-access-item-reservation .quick-menu-icon {
		background-image: url("./assets/svg/icon-qa-reservation.svg");

}

.quick-access-item-hour .quick-menu-icon {
		background-image: url("./assets/svg/icon-qa-hour.svg");

}

.quick-access-item-access .quick-menu-icon {
		background-image: url("./assets/svg/icon-qa-access.svg");

}

/* Various navigation */
.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main {
	margin: 0 0 1.5em;
}

.post-navigation {
	margin: 0 0 2.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	font-size: var(--global--font-size-xs);
}

@media all and (max-width: 760px) {
	.comment-navigation .nav-links,
	.posts-navigation .nav-links,
	.post-navigation .nav-links {
		padding: .5em 1.5em;
	}
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

.comment-navigation .nav-previous a,
.posts-navigation .nav-previous a,
.post-navigation .nav-previous a {
	font-weight: var(--global--font-weight-regular);
}

.comment-navigation .nav-next a,
.posts-navigation .nav-next a,
.post-navigation .nav-next a {
	font-weight: var(--global--font-weight-regular);
}

.pagination {
	display: block;
	position: relative;
	margin: 1.5em 0;
	padding: 0;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: .25em;
	position: relative;
	margin: 0 auto;
	padding: .25em .125em;
	transition: all ease .2s;
	background: var(--brand--color-pale-green);
	width: auto;
	border-radius: 40px;
}

.pagination .page-numbers {
	display: inline-block;
	position: relative;
	font-size: var(--global--font-size-sm);
	font-family: var(--brand--font-jp-key);
	font-weight: var(--global--font-weight-regular);
	margin: 0;
	padding: .5em 1em;
	z-index: 1;
}

.pagination a.page-numbers {
	color: var(--brand--color-green);
	font-weight: var(--global--font-weight-bold);
	transition: .2s;
}

.pagination a.page-numbers:hover {
	transform: translateY(-3px);
}

.pagination .page-numbers.current {
	color: var(--brand--color-yellow);
}

.pagination .page-numbers.current::after {
	content: "";
	position: absolute;
	display: block;
	background: var(--brand--color-green);
	width: 30px;
	height: 30px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
	border-radius: 15px;
}

.prev {
	display: inline-block;
	position: relative;
}

.prev::after {
	content: "";
	position: absolute;
	display: block;
	border-top: solid 2px var(--brand--color-green);
	border-left: solid 2px var(--brand--color-green);
	width: 10px;
	height: 10px;
	transform: rotate(-45deg);
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	transition: .2s;
}

.prev:hover::after {
	transform: translate(-2px) rotate(-45deg);
}

.next {
	display: inline-block;
	position: relative;
}

.next::after {
	content: "";
	position: absolute;
	display: block;
	border-top: solid 2px var(--brand--color-green);
	border-right: solid 2px var(--brand--color-green);
	width: 10px;
	height: 10px;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	transition: .2s;
}

.next:hover::after {
	transform: translate(2px) rotate(45deg);
}

/* Breadcrumb */
.breadcrumb {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

.breadcrumb ul {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	position: relative;
	list-style: none;
	font-size: var(--global--font-size-xxs);
	width: 100%;
	margin: 0;
	padding: 0;
}

@media all and (max-width: 760px) {
	.breadcrumb ul {
		font-size: var(--global--font-size-xxs);
	}
}

.breadcrumb li {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0 0 0 1.825em;
}

.breadcrumb a {
	font-weight: var(--global--font-weight-regular);
}

.breadcrumb li::before {
	content: "＞";
	display: inline-block;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 0;
	bottom: 0;
	left: 0.5em;
}

.breadcrumb li:first-child {
	padding: 0;
}

.breadcrumb li:first-child::before {
	content: "";
}

/* Site Main
--------------------------------------------- */
.site-main {
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	/* margin: 0 0 1.5em; */
}

.posted-on {
	color: var(--brand--color-green);
	font-size: var(--global--font-size-xs);
	margin: 0 0 .5em;
}

@media all and (max-width: 760px) {
	.posted-on {
		font-size: var(--global--font-size-xxs);
	}
}

.icon-new-post {
	display: inline-block;
	position: relative;
	padding: 0 10px 0 0;
	color: var(--brand--color-yellow);
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-bold);
	margin: 0 0 .5em;
}

.icon-new-post span {
	display: inline-block;
	position: relative;
	padding: 0;
	color: var(--brand--color-yellow);
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-bold);
	margin: 0 .1em 0 0;
	animation: bound-anim 1.2s infinite;
}

@keyframes bound-anim {
	0%,100% {transform: translateY(0)}
	30% {transform: translateY(-3.5px)}
	60% {transform: translateY(1px)}
	90% {transform: translateY(0)}
}

.icon-new-post span:first-child {
	animation-delay: 0;
}

.icon-new-post span:nth-child(2) {
	animation-delay: .1s;
}

.icon-new-post span:nth-child(3) {
	animation-delay: .2s;
}

.icon-new-post span:nth-child(4) {
	animation-delay: .3s;
}

.icon-new-post span:nth-child(5) {
	animation-delay: .4s;
}

.icon-new-post span:nth-child(6) {
	animation-delay: .5s;
}

.icon-published,
.icon-updated {
	display: inline-block;
	position: relative;
	padding: 0 10px 0 13px;
}

.icon-published {
	margin: 0;
}

.icon-updated {
	margin: 0 0 0 .5em;
}

.icon-published::after,
.icon-updated::after {
	content: "";
	position: absolute;
	display: block;
	width: 13px;
	height: 100%;
}

.icon-published::after {
	top: 1px;
	bottom: 0;
	left: -4px;
	background: no-repeat center / contain;
	background-image: url("./assets/svg/icon-published.svg");
}

.icon-updated::after {
	top: 1px;
	bottom: 0;
	left: -2px;
	background: no-repeat center / contain;
	background-image: url("./assets/svg/icon-updated.svg");
}

.updated:not(.published) {
	/* display: none; */
}

.page-content,
.entry-content,
.journal-entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

.cat-links,
.tags-links {
	display: block;
	position: relative;
	margin: 0 0 0;
	padding: 0 10px 0 20px;
}

.cat-links::before,
.tags-links::before {
	content: "";
	position: absolute;
	display: block;
	width: 14px;
	height: 100%;
}

.cat-links::before {
	top: 2px;
	bottom: 0;
	left: -1px;
	background: no-repeat center top 9px / contain url("./assets/svg/icon-cat.svg");
}

@media all and (max-width: 760px) {
	.cat-links::before {
		background: no-repeat center top 7px / contain url("./assets/svg/icon-cat.svg");
	}
}

.tags-links::before {
	top: 4px;
	bottom: 0;
	left: -2px;
	background: no-repeat center top 9px / contain url("./assets/svg/icon-tag.svg");
}

@media all and (max-width: 760px) {
	.tags-links::before {
		background: no-repeat center top 7px / contain url("./assets/svg/icon-tag.svg");
	}
}

.cat-links a,
.tags-links a {
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-regular);
}

@media all and (max-width: 760px) {
	.cat-links a,
	.tags-links a {
		font-size: var(--global--font-size-xs);
	}
}

.comments-link a {
	font-size: var(--global--font-size-sm);
}

@media all and (max-width: 760px) {
	.comments-link a {
		font-size: var(--global--font-size-xs);
	}
}

/* Entry
--------------------------------------------- */
.entry-wrapper {
	display: block;
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 4em 0 1.5em;
}

@media all and (max-width: 760px) {
	.entry-wrapper {
		padding: 3em 1.5em;
	}
}

.entry-header {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto 1.5em;
	padding: 0;
}

.entry-meta {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto .5em;
	padding: 0;
}

.entry-title {
	font-family: var(--brand--font-jp-key);
	color: var(--brand--color-green);
	position: relative;
	display: block;
	margin: 0 auto .25em;
	padding: 0;
}

@media all and (max-width: 760px) {
	.entry-title {
		font-size: var(--global--font-size-lg);
	}
}

@media all and (max-width: 760px) {
	.entry-content {
		/* font-size: var(--global--font-size-sm); */
	}
}

.entry-footer {
	position: relative;
	display: block;
	margin: 1em auto 1.5em;
	padding: 0;
}

/* Entry Content General */
.entry-content-general {

}

.entry-content-general table {
	width: 100%;
	margin: 0 0 .5em;
	width: 100%;
	border: solid 1px var(--brand--color-dark-green);
	border-collapse: collapse;
	/* min-width: 800px; */
}

.entry-content-general thead {
	border-bottom: solid 2px var(--brand--color-dark-green);
}

.entry-content-general th,
.entry-content-general td {
	font-size: var(--global--font-size-md);
	font-weight: var(--global--font-weight-regular);
	text-align: start;
	color: var(--brand--color-dark-green);
	width: auto;
	vertical-align: middle;
	box-sizing: border-box;
	border: solid 1px var(--brand--color-dark-green);
	padding: 1em .5em;
}

.entry-content-general th {
	font-weight: var(--global--font-weight-bold);
	background-color:  var(--global--color-pale-grey);
	text-align: center;
}

.entry-content-general .wp-block-image {
	overflow: hidden;
}

.entry-content-general .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
	transform: translateY(100%);
	transition: all .4s ease;
}

.entry-content-general .wp-block-gallery.has-nested-images figure.wp-block-image .wp-element-caption {
	transform: translateY(100%);
	transition: all .4s ease;
}

.entry-content-general .wp-block-gallery.has-nested-images figure.wp-block-image:hover:has(figcaption)::before,
.entry-content-general .wp-block-gallery.has-nested-images figure.wp-block-image:hover .wp-element-caption {
	transform: translateY(0);
}

/* Singular */
.singular-header-wrapper {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 1em 0 1.5em;
	background: var(--brand--color-green);
}

@media all and (max-width: 980px) {
	.singular-header-wrapper {
		padding: 1em 1.5em 1.5em;
	}
}

@media all and (max-width: 760px) {
	.singular-header-wrapper {
		padding: .5em 1em 1em;
	}
}

.singular-header {
	display: block;
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
}

.singular-header .breadcrumb {
	color: var(--global--color-white);
}

@media all and (max-width: 760px) {
	.singular-header .breadcrumb {
		font-size: var(--global--font-size-xxs);
	}
}

.singular-header .breadcrumb a {
	color: var(--brand--color-pale-green);
}

.singular-title {
	font-family: var(--brand--font-jp-key);
	font-size: var(--global--font-size-lg);
	color: var(--global--color-white);
}

@media all and (max-width: 760px) {
	.singular-title {
	}
}

/* Page */
.page-wrapper {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.page-header-wrapper {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 2em 0;
	background: var(--brand--color-pale-green);
}

@media all and (max-width: 980px) {
	.page-header-wrapper {
		padding: 1.5em 0;
	}
}

@media all and (max-width: 760px) {
	.page-header-wrapper {
		padding: 1em 0;
	}
}

.page-header {
	display: block;
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
}

@media all and (max-width: 980px) {
	.page-header {
		max-width: 810px;
		padding: 0 4em;
	}
}

@media all and (max-width: 760px) {
	.page-header {
		max-width: 100%;
		padding: 0 1em;
	}
}

.page-title {
	margin: 0;
	padding: 0;
	font-family: var(--brand--font-jp-key);
	color: var(--brand--color-dark-green);
}

@media all and (max-width: 760px) {
	.page-title {
		font-size: var(--global--font-size-lg);
	}
}

.page-content-wrapper {
	display: block;
	position: relative;
	max-width: 845px;
	margin: 0 auto;
	padding: 3em 0;
}

@media all and (max-width: 980px) {
	.page-content-wrapper {
		padding: 3em 2em;
	}
}

@media all and (max-width: 760px) {
	.page-content-wrapper {
		padding: 3em 1em;
	}
}

.page-wrapper {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.page-footer {
	display: block;
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 2em;
}

@media all and (max-width: 980px) {
	.page-footer {
		max-width: 810px;
		padding: 0 4em;
	}
}

@media all and (max-width: 760px) {
	.page-footer {
		max-width: 100%;
		padding: 0 1em;
	}
}

/* Archive Page
--------------------------------------------- */
.archive-page-wrapper {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.archive-page-header-wrapper {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 2em 0;
	background: var(--brand--color-green);
}

@media all and (max-width: 980px) {
	.archive-page-header-wrapper {
		padding: 2em 2em;
	}
}

@media all and (max-width: 760px) {
	.archive-page-header-wrapper {
		padding: 1.5em;
	}
}

.archive-page-header {
	display: block;
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 0;
}

@media all and (max-width: 980px) {
	.archive-page-header {
		max-width: 810px;
		padding: 0 4em;
	}
}

@media all and (max-width: 760px) {
	.archive-page-header {
		max-width: 100%;
		padding: 0 1em;
	}
}

.archive-page-header .breadcrumb {
	color: var(--global--color-white);
}

@media all and (max-width: 760px) {
	.archive-page-header .breadcrumb {
		font-size: var(--global--font-size-xxs);
	}
}

.archive-page-header .breadcrumb a {
	color: var(--brand--color-pale-green);
}

.archive-page-title {
	font-family: var(--brand--font-jp-key);
	font-size: var(--global--font-size-xl);
	color: var(--global--color-white);
	margin: 0;
}

@media all and (max-width: 760px) {
	.archive-page-title {
		font-size: var(--global--font-size-lg);
		padding: .25em 0;
		margin: 0;
	}
}

.archive-description {
	font-size: var(--global--font-size-sm);
	color: var(--global--color-white);
	margin: 0 0 .5em;
	padding: 0;
}

@media all and (max-width: 760px) {
	.archive-description {
		font-size: var(--global--font-size-xs);
	}
}

.archive-content-wrapper {
	display: block;
	position: relative;
	max-width: 845px;
	margin: 0 auto;
	padding: 3em 0;
}

@media all and (max-width: 980px) {
	.archive-content-wrapper {
		width: 100%;
		padding: 3em 1em;
	}
}

/* Custom Post */
/* Journal post archive page */
.journal-page-header-wrapper {
	background-color: transparent;
}

@media all and (max-width: 980px) {
	.journal-page-header-wrapper {
		padding: 3em 0;
	}
}

@media all and (max-width: 760px) {
	.journal-page-header-wrapper {
		padding: 2em 0;
	}
}

.journal-page-header {
	background-color: var(--brand--color-green);
	display: block;
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 2em 3em;
	border-radius: 600px;
	text-align: center;
}

@media all and (max-width: 760px) {
	.journal-page-header {
		padding: 1em 2em;
	}
}

.journal-page-header .breadcrumb {
}

.journal-page-header .breadcrumb ul {
	width: auto;
}

.journal-page-header .breadcrumb a {
}

.journal-page-title {
	color: var(--global--color-white);
}

.journal-page-title::after {
	content: "";
	display: block;
	position: relative;
	width: 40px;
	height: 20px;
	margin: auto;
	background: center / contain no-repeat url(./assets/svg/bow.svg);
}

.journal-page-item-wrapper {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
}

.journal-page-item {
	position: relative;
	width: 33.3333%;
	margin-bottom: -50px;
}

@media all and (max-width: 760px) {
	.journal-page-item {
		width: 100%;
	}
}

.journal-page-item:nth-child(3n-2) {
	padding: 0 18px 18px 0;
}

.journal-page-item:nth-child(3n-1) {
	padding: 0 9px 18px 9px;
}

.journal-page-item:nth-child(3n) {
	padding: 0 0 18px 18px;
}

@media all and (max-width: 760px) {
	.journal-page-item:nth-child(3n-2),
	.journal-page-item:nth-child(3n-1),
	.journal-page-item:nth-child(3n) {
		padding: 0 0 8px 0;
		margin-bottom: -50px;
	}
}

.journal-cat-staff .card-content {
	background-color: var(--brand--color-blue);
}

.journal-cat-director .card-content {
	background-color: var(--brand--color-red);
}

.journal-cat-event .card-content {
	background-color: var(--brand--color-yellow);
}

/* Journal Single */
.journal-single-header-wrapper {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 2em 0;
}

@media all and (max-width: 980px) {
	.journal-single-header-wrapper {
		padding: 2em 2em;
	}
}

@media all and (max-width: 760px) {
	.journal-single-header-wrapper {
		padding: 1.5em;
	}
}

.journal-single-header {
	background-color: var(--brand--color-green);
	display: block;
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 1em 2.5em;
	border-radius: 600px;
	text-align: center;
}

.journal-single-header .breadcrumb ul {
	color: var(--global--color-white);
	font-size: var(--global--font-size-xxs);
	width: auto;
}

@media all and (max-width: 760px) {
	.journal-single-header .breadcrumb {
	}
}

.journal-single-header .breadcrumb a {
	color: var(--brand--color-pale-green);
}

.journal-single-title {
	position: relative;
	display: block;
	font-family: var(--brand--font-jp-key);
	font-size: var(--global--font-size-lg);
	color: var(--global--color-white);
}

.journal-single-title::after {
	content: "";
	display: block;
	position: relative;
	width: 30px;
	height: 15px;
	margin: auto;
	background: center / contain no-repeat url(./assets/svg/bow.svg);
}

@media all and (max-width: 760px) {
	.journal-single-title {
		font-size: var(--global--font-size-md);
	}
}

/* Journal post */
.journal-entry-wrapper {
	display: block;
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 1.5em 0 1.5em;
}

@media all and (max-width: 760px) {
	.journal-entry-wrapper {
		padding: 3em 1.5em;
	}
}

.journal-entry-header {
	display: block;
	position: relative;
	max-width: 720px;
	margin: 0 auto 1.5em;
	padding: 3em 0 .5em;
}

@media all and (max-width: 980px) {
	.journal-entry-wrapper {
		width: 100%;
		padding: 3em .5em .5em;
	}
}

.journal-entry-meta {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto .25em;
	padding: 0;
	font-size: var(--global--font-size-md);
	font-weight: var(--global--font-weight-regular);
	color: var(--brand--color-navy-light);
}

.journal-entry-meta-title {
	position: relative;
	display: inline-block;
	color: var(--brand--color-navy);
	font-size: var(--global--font-size-sm);
	font-weight: var(--global--font-weight-regular);
  background-color: var(--brand--color-pale-light-blue);
	margin: 0 .5em 0 0;
	padding: .25em 1em;
	box-sizing: border-box;
}

.journal-entry-meta-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-left: 8px solid var(--brand--color-pale-light-blue);
}

.journal-entry-meta-date {
	display: inline-block;
	font-size: var(--global--font-size-md);
	padding: 0 .5em 0 0;
}

@media all and (max-width: 760px) {
	.journal-entry-meta-date {
	}
}

.journal-entry-meta-tax-journal-cat {
	display: inline-block;
	font-size: var(--global--font-size-sm);
	padding: 0 .5em 0;
}

@media all and (max-width: 760px) {
	.journal-entry-meta-tax-journal-cat {
	}
}

.journal-entry-meta-tax-journal-cat .tax-name::after {
	content: ",";
	display: inline-block;
	font-size: var(--global--font-size-sm);
	padding: 0 .5em 0 0;
}

@media all and (max-width: 760px) {
	.journal-entry-meta-tax-journal-cat .tax-name::after {
	}
}

.journal-entry-meta-tax-journal-cat .tax-name:last-child::after {
	content: "";
	display: inline-block;
	font-size: var(--global--font-size-sm);
	padding: 0;
}

.journal-entry-title {
	position: relative;
	display: block;
	margin: 0 auto .25em;
	padding: 0;
	font-size: var(--global--font-size-xl);
}

@media all and (max-width: 760px) {
	.journal-entry-title {
		font-size: var(--global--font-size-lg);
	}
}

.journal-entry-content {
	max-width: 980px;
	margin: 0 auto;
}

@media all and (max-width: 760px) {
	.journal-entry-content {
		max-width: 100%;
		padding: .25em .5em 3em;
	}
}

.journal-entry-footer {
	position: relative;
	display: block;
	margin: 1em auto .825em;
	padding: 0;
}

/* 404 Not found
--------------------------------------------- */
.not-found {
	display: block;
	position: relative;
	max-width: 600px;
	margin: 0 auto;
	padding: 0;
}

.not-found-page-header {
	display: block;
	position: relative;
	max-width: 980px;
	margin: 3em auto;
	padding: 0;
}

.not-found-page-title {
	color: var(--brand--color-green);
	font-family: var(--brand--font-jp-key);
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto .25em;
	padding: 0;
}

.not-found-page-desc {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto .5em;
	padding: 0;
	font-size: var(--global--font-size-sm);
	color: var(--brand--color-navy);
}

/* Preparation
--------------------------------------------- */
.preparation-anim {
	display: block;
	position: relative;
	max-width: 120px;
	margin: 0 auto 1.5em;
	padding: 0;
}

.preparation-anim::after {
	content: "";
	position: relative;
	display: block;
	padding-top: calc(720 / 417 * 100%);
	z-index: 3;
	background: center / contain no-repeat url(./assets/img/teal-construction-anime.gif);
  /* animation: teal-anim 4s linear both infinite; */
}

.preparation-heading {
	font-size: var(--global--font-size-xl);
	font-family: var(--brand--font-jp-key);
	font-weight: var(--global--font-weight-regular);
	letter-spacing: 0em;
	line-height: 1.1;
	color: var(--brand--color-green);
	position: relative;
	padding: .5em;
	margin: 0 auto;
	text-align: center;
}

.preparation-text {
	font-size: var(--global--font-size-md);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-regular);
	color: var(--brand--color-dark-green);
	position: relative;
	padding: .5em;
	margin: 0 auto;
	text-align: center;
}

/* Key Pages
--------------------------------------------- */
.key-page-header {
	position: relative;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: .5em .25em 1.5em;
	border-radius: 24px;
}

@media all and (max-width: 980px) {
	.key-page-header {
		padding: .5em .25em 1.5em 2.5em;
	}
}

@media all and (max-width: 760px) {
	.key-page-header {
		padding: .5em .25em 1.5em 1.5em;
	}
}

.key-page-heading {
	font-size: var(--global--font-size-xxl);
	font-family: var(--brand--font-jp-key);
	font-weight: var(--global--font-weight-regular);
	letter-spacing: 0em;
	line-height: 1.1;
	transform: scaleX(1.03);
	transform-origin: left;
	color: var(--brand--color-green);
	position: relative;
	padding: .65em 0 .5em;
	margin: 0;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.key-page-heading {
		font-size: var(--global--font-size-xl);	
	}
}

.key-page-heading.js_anim_css {
	transform: scaleX(1.03) translateY(10px);
	opacity: 0;
}

.key-page-heading.js_anim_css_active {
	transform: scaleX(1.03) translateY(0);
	opacity: 1;
	transition: all .6s .2s ease;
}

.key-page-heading-white {
	color: var(--global--color-white);
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.key-page-heading::before {
		width: calc(61.0726px * 0.4);
		height: calc(85.5276px * 0.4);
		left: -16px;
	}
}

.key-page-heading::before {
	content: "";
	position: absolute;
	width: calc(61.0726px * 0.65);
	height: calc(85.5276px * 0.65);
	background: center / contain no-repeat url(./assets/svg/star.svg);
	top: 0;
	left: -30px;
}

@media all and (max-width: 760px) {
	.key-page-heading::before {
		width: calc(61.0726px * 0.4);
		height: calc(85.5276px * 0.4);
		left: -16px;
	}
}

.key-page-heading.js_anim_css::before {
	width: calc(61.0726px * 0.55);
	height: calc(85.5276px * 0.55);
	transform: scale(.8);
	transform-origin: center;
	opacity: 0;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.key-page-heading.js_anim_css::before {
		width: calc(61.0726px * 0.35);
		height: calc(85.5276px * 0.35);

	}
}

.key-page-heading.js_anim_css_active::before {
	width: calc(61.0726px * 0.65);
	height: calc(85.5276px * 0.65);
	opacity: 1;
	transform: scale(1);	
	transition: all .2s .6s ease;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.key-page-heading.js_anim_css_active::before {
		width: calc(61.0726px * 0.4);
		height: calc(85.5276px * 0.4);
	}
}

.key-page-heading-sub {
	font-size: var(--global--font-size-md);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-regular);
	color: var(--brand--color-dark-green);
	position: relative;
	padding: 0 0 .5em;
	margin: 0 0 .5em;
}

.key-page-heading-sub.js_anim_css {
	transform: translateX(10px);
	opacity: 0;
}

.key-page-heading-sub.js_anim_css_active {
	transform: translateX(0);
	opacity: 1;
	transition: all .6s .4s ease;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.key-page-heading-sub {
		font-size: var(--global--font-size-md);
	}
}

.key-page-heading-sub-white {
	color: var(--global--color-white);
}

.key-page-breadcrumb {
	position: relative;
	display: inline-block;
	background-color: var(--brand--color-pale-green);
	border-radius: 60px;
	padding: 0em 1em .25em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	display: block;
	position: relative;
	max-width: 845px;
	margin: 0 auto 3.5em;
	padding: 0;
}

@media all and (max-width: 760px) {
	.widget {
		padding: .5em 1.5em;
	}
}

.widget-heading {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto .825em;
	padding: 0;
}

.widget-title {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto .25em;
	padding: 0;
	color: var(--brand--color-green);
	font-size: var(--global--font-size-lg);
}

.widget-desc {
	display: block;
	position: relative;
	width: 100%;
	margin: 0 auto .5em;
	padding: 0;
	font-size: var(--global--font-size-sm);
	color: var(--brand--color-brown);
}

.widget select {
	max-width: 100%;
}

/* Category List
--------------------------------------------- */
.cat-list {
	position: relative;
	list-style: none;
	margin: 0 0 .5em 0;
	padding: 0;
	box-sizing: border-box;
}

.cat-list .cat-item {
	position: relative;
	/* display: inline-block; */
	margin: 0 0 .5em 0;
	padding: 0 0 .5em;
	box-sizing: border-box;
	z-index: 1;
}

@media all and (max-width: 760px) {
	.cat-list .cat-item {
		width: 100%;
		font-size: var(--global--font-size-sm);
		margin: 0 0 1em 0;
		padding: 1em 0;
	}
}

.cat-list .cat-item::before {
	content: "";
	position: absolute;
  background-image: linear-gradient(to right, var(--global--color-light-grey), var(--global--color-light-grey) 5px, transparent 5px, transparent 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
	background-position: left bottom;
	width: calc(100%);
  top: 0;
  bottom: 0;
  right: 0;
	z-index: -1;
}

.cat-list .cat-item a {
	color: var(--brand--color-dark-green);
	font-size: var(--global--font-size-sm);
	font-weight: var(--global--font-weight-regular);
	padding: 0 3px 0 34px;
	transition: all .2s ease;
}

.cat-list .cat-item a:hover {
	color: var(--brand--color-green);
}

.cat-list .cat-item a::after{
	content: "";
	position: absolute;
	display: block;
	width: 18px;
	height: 100%;
}

.cat-list .cat-item a::after {
	top: -4px;
	bottom: 0;
	left: -1px;
	background: no-repeat center / contain;
	background-image: url("./assets/svg/icon-cat.svg");
}

/* Category navigation
--------------------------------------------- */
.cat-nav-wrapper {
	position: relative;
	margin: 0 0 1.5em;
	padding: 0;
	box-sizing: border-box;
}

.cat-nav-title {
	color: var(--brand--color-green);
	position: relative;
	margin: 0 0 .5em 0;
	padding: 0;
}

.cat-nav {
	position: relative;
	list-style: none;
	margin: 0 0 .5em 0;
	padding: 0;
	box-sizing: border-box;
}

.cat-nav .cat-item,
.cat-nav .cat-item-all {
	display: inline-block;
	position: relative;
	margin: 0 .825em .825em 0;
	padding: 0;
	border-radius: 50px;
	overflow: hidden;
}

.cat-nav .cat-item a,
.cat-nav .cat-item-all a {
	display: block;
	position: relative;
	color: var(--brand--color-dark-green);
	font-size: var(--global--font-size-sm);
	margin: 0;
	padding: .25em 1em;
}

@media all and (max-width: 760px) {
	.cat-nav .cat-item a,
	.cat-nav .cat-item-all a {
		font-size: var(--global--font-size-sm);
	}
}

.cat-nav .cat-item a::before,
.cat-nav .cat-item a::after,
.cat-nav .cat-item-all a::before,
.cat-nav .cat-item-all a::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto 0;
	padding: 0;
	transition: transform .4s ease;
}

.cat-nav .cat-item a::before,
.cat-nav .cat-item-all a::before {
	background-color: var(--brand--color-pale-green);
	z-index: -2;
}

.cat-nav .cat-item a::after,
.cat-nav .cat-item-all a::after {
	transform-origin: top left;
	transform: scaleX(0);
	background-color: var(--brand--color-light-green);
	z-index: -1;
}

.cat-nav .cat-item a:hover::after,
.cat-nav .cat-item-all a:hover::after {
	transform: scaleX(1);
}

/* Tag Cloud
--------------------------------------------- */
.tagcloud-wrapper {
	position: relative;
	margin: 1.5em 0;
	padding: 0;
	box-sizing: border-box;
}

.tagcloud-title {
	color: var(--brand--color-green);
	position: relative;
	margin: 0 0 .5em;
	padding: 0;
}

.tagcloud {

}

.tag-cloud-link {
	position: relative;
	display: inline-block;
	font-size: var(--global--font-size-sm);
	font-weight: var(--global--font-weight-regular);
	margin: .3em .1em;
	padding: .5em 1em .5em 35px;
	background: var(--global--color-pale-grey);
	border-radius: .5em;
	transition: all .4s ease;
}

.tag-cloud-link:hover {
	background: var(--brand--color-pale-green);
	border-radius: .825em;
}

.tag-cloud-link::after {
	content: "";
	position: absolute;
	display: block;
	width: 18px;
	height: 100%;
}

.tag-cloud-link::after {
	top: -1px;
	bottom: 0;
	left: 8px;
	background: no-repeat center / contain;
	background-image: url("./assets/svg/icon-tag.svg");
}

/* Search Form
--------------------------------------------- */
.search-form {
	border-radius: 0;
	background: transparent;
	margin: auto;
	padding: 0 0 .5em;
	font-size: 0;
	box-sizing: border-box;
}

input.search-field {
	vertical-align: middle;
	border-radius: 0;
	background: transparent;
	box-sizing: border-box;
	margin: auto 0;
	padding: .5em 1em;
	cursor: pointer;
	-webkit-appearance: none;
	width: calc(100% - 49px);
	height: 46px;
	font-size: var(--global--font-size-base);
	background: no-repeat center / auto 60% var(--brand--color-pale-green);
	border: solid 1px var(--brand--color-pale-green);
}

input.search-submit {
	vertical-align: middle;
	border-radius: 0;
	margin: auto 0;
	box-sizing: border-box;
	position: relative;
	height: 46px;
	padding-right: 46px;
	background: no-repeat center / auto 60% var(--brand--color-yellow);
	background-color: var(--brand--color-yellow);
	background-image: url("./assets/svg/icon-search.svg");
	border: solid 0px var(--brand--color-yellow);
	transition: all .2s ease;
	font-size: 0;
}

input.search-submit:hover {
	background-color: var(--brand--color-light-yellow);
	border: solid 0px var(--brand--color-light-yellow);
}

/* Search result
--------------------------------------------- */
.search-result {
	display: flex;
	flex-direction: column;
	position: relative;
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

.search-result-item {
	display: block;
	position: relative;
	max-width: 100%;
	margin: 0 0 3em;
	padding: 0;
}

.search-result.js_anim_css .search-result-item {
	transform: translateX(30px);
	opacity: 0;
	/* transition: all ease .4s; */
}

.search-result.js_anim_css_active .search-result-item {
	transform: translateX(0);
	opacity: 1;
	/* transition: all ease .4s; */
}

.search-result-header {
	display: block;
	position: relative;
	margin: 0 0 1em;
	padding: 0;
}

.search-result-meta {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0;
}

.search-result-post-type-label {
	color: var(--global--color-white);
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-regular);
	background-color: var(--brand--color-green);
	border-radius: 2em;
	margin-right: .5em;
	padding: 0 .825em .1em;
	vertical-align: middle;
}

.search-result-post-type-label-page {
	color: var(--global--color-white);
	background-color: var(--brand--color-green);
}

.search-result-post-type-label-specific {
	color: var(--brand--color-green);
	background-color: var(--brand--color-pale-green);
}

.search-result-post-type-label-post {
	color: var(--global--color-white);
	background-color: var(--brand--color-yellow);
}

.search-result-title {
	display: inline-block;
	position: relative;
	color: var(--brand--color-dark-green);
	font-size: var(--global--font-size-md);
	font-weight: var(--global--font-weight-bold);
	margin: 0;
	padding: .1em 0;
	vertical-align: middle;
}

.search-result-content {
	display: block;
	position: relative;
	color: var(--brand--color-dark-green);
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-regular);
	margin: 0;
	padding: 0 0 15px;
}

.search-result-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 .5em;
	transition: all ease .2s;
}

.search-result-link:hover {
	opacity: .65;
}

.search-result-link::before {
	content: "";
	display: block;
	position: absolute;
	width: calc(100% - 75px);
	right: 80px;
	bottom: -2px;
	height: 1px;
	background-color: var(--brand--color-green);
	padding: 0;
	transform: translateX(0);
	transition: all ease .2s;
}

.search-result-link:hover::before {
	transform: translateX(15px);
	width: calc(100% - 100px);
}

.search-result-link::after {
	content: "続きを読む";
	display: block;
	position: absolute;
	width: auto;
	color: var(--brand--color-green);
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-regular);
	right: 0;
	bottom: -12px;
	padding: 0;
	transform: translateX(0);
	transition: all ease .2s;
}

.search-result-link:hover::after {
	transform: translateX(5px);
}

/* Branding
--------------------------------------------- */
.vi-text {
	display: block;
	position: relative;
	width: 100%;
	background: center / contain no-repeat url(./assets/svg/vi-text.svg);
}

.vi-text-contrast {
	background: center / contain no-repeat url(./assets/svg/vi-text-contrast.svg);
}

.vi-text::before {
	content: "";
	display: block;
	position: relative;
	padding-top: calc(100% *  107.57 / 654.81);
}

.logo-wrapper {
	position: relative;
}

.logo-wrapper-main {
	width: calc(104.1974px * 1.6);
	height: calc(74.6797px * 1.6);
}

.logo-wrapper-whiteline {
	width: calc(104.1974px * 1.8);
	height: calc(75.9401px * 1.8);	
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.logo-wrapper-whiteline {
		width: calc(104.1974px * 1.3);
		height: calc(75.9401px * 1.3);	
	}
}

.logo-wrapper-whitechara {
	width: calc(104.1974px * 1.6);
	height: calc(75.8738px * 1.6);	
}

.site-logo {
	position: relative;
}

.site-logo.js_anim_css {
	transform: translateY(-50px);
	opacity: 0;
}

.site-logo.js_anim_css_active {
	transform: translateY(0);
	opacity: 1;
	transition: all 0.9s .6s ease;
}

.site-title {
	display: none;
}

.topic {
	position: relative;
	display: block;
	background-color: var(--brand--color-yellow);
	border-radius: 3px;
}

@media all and (max-width: 760px) {
	.topic {
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		transform: translateX(-80%);
	}
}

.topic.js_anim_css {
	transform: translateX(50%);
	opacity: 0;
}

.topic.js_anim_css_active {
	transform: translateX(0);
	opacity: 1;
	transition: .6s 1s all;
}

@media all and (max-width: 760px) {
	.topic.js_anim_css_active {
		-ms-writing-mode: tb-rl;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
		transform: translateX(-80%);
	}
}

.topic.topic-hide {
	transform: translateX(50%);
	opacity: 0;
	pointer-events: none;
}

.topic-link {
	position: relative;
	display: block;
	padding: .825em 1em;
	margin: 0;
	width: 100%;
	height: 100%;
}

.topic-title {
	position: relative;
	font-size: var(--global--font-size-sm);
	font-family: var(--brand--font-jp-key);
	font-weight: var(--global--font-weight-bold);
	color: var(--global--color-white);
}

.heading {
	font-size: var(--global--font-size-xxxl);
	font-family: var(--brand--font-en);
	font-weight: var(--global--font-weight-bold);
	letter-spacing: 0em;
	line-height: 1.1;
	transform: scaleX(1.03);
	transform-origin: left;
	color: var(--brand--color-green);
	position: relative;
	padding: .65em 0 .5em;
	margin: 0 0 -.5em;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.heading {
		font-size: var(--global--font-size-xxl);	
	}
}

.heading.js_anim_css {
	transform: scaleX(1.03) translateY(10px);
	opacity: 0;
}

.heading.js_anim_css_active {
	transform: scaleX(1.03) translateY(0);
	opacity: 1;
	transition: all .6s .2s ease;
}

.heading-white {
	color: var(--global--color-white);
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.heading::before {
		width: calc(61.0726px * 0.4);
		height: calc(85.5276px * 0.4);
		left: -16px;
	}
}

.heading::before {
	content: "";
	position: absolute;
	width: calc(61.0726px * 0.65);
	height: calc(85.5276px * 0.65);
	background: center / contain no-repeat url(./assets/svg/star.svg);
	top: 0;
	left: -30px;
}

@media all and (max-width: 760px) {
	.heading::before {
		width: calc(61.0726px * 0.4);
		height: calc(85.5276px * 0.4);
		left: -16px;
	}
}

.heading.js_anim_css::before {
	width: calc(61.0726px * 0.55);
	height: calc(85.5276px * 0.55);
	transform: scale(.8);
	transform-origin: center;
	opacity: 0;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.heading.js_anim_css::before {
		width: calc(61.0726px * 0.35);
		height: calc(85.5276px * 0.35);

	}
}

.heading.js_anim_css_active::before {
	width: calc(61.0726px * 0.65);
	height: calc(85.5276px * 0.65);
	opacity: 1;
	transform: scale(1);	
	transition: all .2s .6s ease;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.heading.js_anim_css_active::before {
		width: calc(61.0726px * 0.4);
		height: calc(85.5276px * 0.4);
	}
}

.heading-sub {
	font-size: var(--global--font-size-lg);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-bold);
	color: var(--brand--color-dark-green);
	position: relative;
	padding: 0 0 .5em;
	margin: 0;
}

.heading-sub.js_anim_css {
	transform: translateX(10px);
	opacity: 0;
}

.heading-sub.js_anim_css_active {
	transform: translateX(0);
	opacity: 1;
	transition: all .6s .4s ease;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.heading-sub {
		font-size: var(--global--font-size-md);
	}
}

.heading-sub-white {
	color: var(--global--color-white);
}

/* Slogan */
.slogan {
	position: relative;
	padding: 0 0 .5em;
	margin: 0;
	font-size: var(--global--font-size-xl);
	font-family: var(--brand--font-jp-key);
	font-weight: var(--global--font-weight-regular);
	color: var(--brand--color-green);
	line-height: 1.8;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.slogan {
		font-size: var(--global--font-size-lg);
	}
}

.slogan-white {
	color: var(--global--color-white);
}

.slogan.js_anim_css {
	transform: translateX(10px);
	opacity: 0;
}

.slogan.js_anim_css_active {
	transform: translateX(0);
	opacity: 1;
	transition: all .6s .2s ease;
}

/* Highlight */
.highlight {
  background: linear-gradient(transparent 75%, var(--brand--color-yellow) 75%);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.highlight.js_anim_css {
	background-size: 0% 100%;
}

.highlight.js_anim_css_active {
	background-size: 100% 100%;
	transition: all .6s .7s ease;
}

/* Strapline */
.strapline {
	font-size: var(--global--font-size-xl);
	font-family: var(--brand--font-jp-key);
	font-weight: var(--global--font-weight-regular);
	color: var(--brand--color-green);
	position: relative;
	padding: 0 0 .5em;
	margin: 0;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.strapline {
		font-size: var(--global--font-size-lg);
	}
}

.strapline.js_anim_css {
	transform: translateX(10px);
	opacity: 0;
}

.strapline.js_anim_css_active {
	transform: translateX(0);
	opacity: 1;
	transition: all .6s .4s ease;
}

.strapline-white {
	color: var(--global--color-white);
}

.marked-heading-wrapper {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 0 1.5em;
}

.marked-heading {
	font-family: var(--brand--font-jp-key);
	color: var(--global--color-white);
	font-size: var(--global--font-size-lg);
	position: relative;
	display: inline-block;
	background-color: var(--brand--color-green);
	border-radius: 60px;
	padding: .25em 1em .25em 55px;
	margin: 0 0 .25em;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.marked-heading {
		font-size: var(--global--font-size-md);
	}
}

.marked-heading::before {
	content: "";
	position: absolute;
	width: 25px;
	height: 30px;
	top: 0;
	bottom: 0;
	left: 15px;
	margin: auto 0;
	z-index: 1;
	background: center / contain no-repeat url(./assets/svg/star-single.svg);
}

.marked-heading-sub {
	font-family: var(--brand--font-jp-key);
	color: var(--brand--color-green);
	font-size: var(--global--font-size-md);
	position: relative;
	display: inline-block;
	padding: ;
	margin: 0 0 0 .5em;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.marked-heading-sub {
		font-size: var(--global--font-size-sm);
	}
}

.flamed-heading {
	font-size: var(--global--font-size-lg);
	display: block;
	position: relative;
	padding: .825em 1.25em;
	margin: 0 0 .825em;
	background-color: var(--global--color-pale-grey);
	border-left: solid 2px var(--brand--color-green);
}

.main-text {
	position: relative;
	padding: 0;
	margin: 0 0 .825em;	
	color: var(--brand--color-brown);
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.main-text {
		font-size: var(--global--font-size-sm);
	}
}

.main-text.js_anim_css {
	transform: translateX(10px);
	opacity: 0;
}

.main-text.js_anim_css_active {
	transform: translateX(0);
	opacity: 1;
	transition: all .6s .5s ease;
}

.main-text-white {
	color: var(--global--color-white);
}

.content-block {
	position: relative;
	display: block;
	margin-bottom: 3em;
}

.content-block-narrow {
	max-width: 980px;
	margin: 0 auto;
}

.content-block-right {
	position: relative;
	display: block;
	width: 50%;
}

.content-inner-block {
	position: relative;
	display: block;
	padding: 7% 7% 6%;
	border-radius: .5em;	
}

.content-inner-block-bg-white {
	background-color: var(--global--color-white);
}

/* Text with description */
.text-with-desc {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0 0 .25em;
}

.twd-title {
	position: relative;
	display: block;
	padding: 0;
	margin: 0;
}

.twd-description {
	position: relative;
	display: block;
	padding: 0 0 0 37px;
	margin: -1.5px 0 0;
	color: var(--brand--color-green);
	font-size: var(--global--font-size-sm);
	font-style: italic;
}

.twd-description::before {
	content: "";
	position: absolute;
	display: block;
	width: 1.5px;
	height: 9px;
	top: 7px;
	left: 8px;
	background-color: var(--brand--color-green);
}

.twd-description::after {
	content: "";
	position: absolute;
	display: block;
	width: 20px;
	height: 1.5px;
	top: 16px;
	left: 8px;
	background-color: var(--brand--color-green);
}

.text-with-desc.js_anim_css .twd-description-hide {
	display: inline-block;
	position: relative;
}

.text-with-desc.js_anim_css .twd-description-hide::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--global--color-white);
	width: 100%;
	height: 100%;
	transform: scaleX(100%);
	transform-origin: right;
}

.text-with-desc.js_anim_css_active .twd-description-hide::after {
		transform: scaleX(0);
		transition: .6s 1s;
}

.text-with-desc.js_anim_css .twd-description::before {
	transform: scaleY(0);	
	transform-origin: top;
}

.text-with-desc.js_anim_css .twd-description::after {
	transform: scaleX(0);	
	transform-origin: left;
}

.text-with-desc.js_anim_css_active .twd-description::before {
	transform: scaleY(100%);
	transition: .2s .4s;
}

.text-with-desc.js_anim_css_active .twd-description::after {
	transform: scaleX(100%);	
	transition: .4s .6s;
}

/* Feature items with an image */
.feature-row {
	position: relative;
	display: flex;
	width: 100%;
	margin: 0 auto calc(1.5em + 20px);
}

@media all and (max-width: 760px) {
	.feature-row {
		flex-direction: column;
	}
}

.feature-row::after {
	content: "";
	position: absolute;
	display: block;
	background-color: var(--brand--color-pale-green);
	border-radius: 10px;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: calc(100% - 20px);
	height: 100%;
	z-index: -1;
	transform: translate(20px, 20px);
}

@media all and (max-width: 760px) {
	.feature-row::after {
		width: calc(100%);
		transform: translate(10px, 10px);
	}
}

.feature-item {
	position: relative;
	width: 30%;
	height: 100%;
	z-index: 1;
}

@media all and (max-width: 760px) {
	.feature-item {
		width: 100%;
	}
}

.feature-content {
	position: relative;
	width: 70%;
	padding: 50px 30px 20px 40px;
	margin: 0;
}

@media all and (max-width: 760px) {
	.feature-content {
		padding: 5px 30px 10px;
		width: 100%;
	}
}

.feature-title {
	position: relative;
	font-family: var(--brand--font-jp-key);
	color: var(--brand--color-green);
	font-size: var(--global--font-size-lg);
	font-weight: var(--global--font-weight-regular);
	letter-spacing: var(--global--letter-spacing-wide);
	padding: 0;
	margin: 0 0 .5em;
}

/* Modal Window */
.modal-wrapper {
	position: relative;
}

.modal-open {

}

.modal-body {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: var(--global--color-black-10);
	pointer-events: none;
	opacity: 0;
	top: 0;
	left: 0;
	transition: all .2s;
}

.modal-body.is-active {
	pointer-events: initial;
	opacity: 1;
	z-index: 99;
}

.modal-content {
	position: absolute;
	width: 80%;
	height: 80%;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-color: var(--global--color-white);
	padding: 3em 5em;
	border-radius: 10px;
}

@media all and (max-width: 760px) {
	.modal-content {
		width: 90%;
		height: 90%;
		padding: 1em 2em;
		border-radius: 7px;
	}
}

.modal-close {
	position: absolute;
	display: block;
	cursor: pointer;
	background: var(--brand--color-green);
	font-size: 0;
	font-weight: var(--global--font-weight-regular);
	top: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	border: none;
}

@media all and (max-width: 980px) {
	.modal-close {
	}
}

@media all and (max-width: 760px) {
	.modal-close {
		top: 10px;
		right: 10px;
		width: 30px;
		height: 30px;
		border-radius: 15px;
	}
}

.modal-close::before,
.modal-close::after {
	position: absolute;
	content:"";
	width: 30px;
	height: 3px;
	background-color: var(--brand--color-yellow);
	transition: all ease .4s;
	z-index: 1;
	border-radius: 3px;
	right: 0;
	left: 0;
	margin: 0 auto;
}

@media all and (max-width: 980px) {
	.modal-close::before,
	.modal-close::after {
	}
}

@media all and (max-width: 760px) {
	.modal-close::before,
	.modal-close::after {
		width: 20px;
		height: 2px;
	}
}

.modal-close::before {
	top: 48%;
	transform: rotate(45deg);
}

.modal-close::after {
	top: 48%;
	right: 0;
	transform: rotate(-45deg);
}

.modal-close:hover {
  cursor: pointer;
}

.modal-close:hover::before {
	top: 48%;
	right: 0;
	transform: rotate(30deg);
}

.modal-close:hover::after {
	top: 48%;
	right: 0;
	transform: rotate(-30deg);
}

/* Time table */
.time-table-wrapper {
	position: relative;
	padding: 0;
	margin: 0 0 .5em;
	overflow: auto;
	border-radius: 10px;
}

.time-table {
	width: 100%;
	font-family: var(--brand--font-jp);
	font-size: var(--global--font-size-md);
	position: relative;
	border-collapse: collapse;
	border-radius: 10px 10px 0 0;
	margin: 0;
	background-color: var(--global--color-white);
}

.time-table th {
	color: var(--global--color-white);
	font-weight: var(--global--font-weight-regular);
	background-color: var(--brand--color-green);
	border-right: solid 1px var(--global--color-white);
	text-align: center;
}

.time-table td {
	color: var(--brand--color-dark-grey);
	/* background-color: var(--global--color-white); */
	border-right: solid 1px var(--brand--color-green);
	text-align: center;
}

.time-table th:last-of-type,
.time-table td:last-of-type {
	border-right: none;
}

.time-table tr:not(:last-of-type) {
	border-bottom: solid 1px var(--brand--color-green);
}

.time-table-footer {
	position: relative;
	margin: 0;
	padding: 0 1em;
	background-color: var(--brand--color-green);
}

.time-table-footer-text {
	position: relative;
	margin: 0;
	padding: 0;
	font-family: var(--brand--font-jp-key);
	font-size: var(--global--font-size-md);
	color: var(--global--color-white);
	background-color: var(--brand--color-green);
	text-align: right;
}

.list-wrapper {
	position: relative;
	padding: 0;
	margin: 0 auto 1.5em;
}

.list-with-star {
	position: relative;
	list-style: none;
	padding: 0;
}

.list-with-star li {
	position: relative;
	padding-left: 20px;
}

.list-with-star li::before {
	content: "";
	position: absolute;
	background: center / contain no-repeat url(./assets/svg/star-single.svg);
	left: 0;
	top: 9.5px;
	margin: 0;
	width: 11px;
	height: calc(11px * 16.159 / 12.466);
}

.column-dl-wrapper {
	position: relative;
	padding: 0;
	margin: 0 auto 1.5em;
}

.column-dl {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 0;
}

@media all and (max-width: 760px) {
	.column-dl {
		flex-direction: column;
	}
}

.column-dl dt {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
  width: 20%;
	color: var(--brand--color-dark-green);
	font-size: var(--global--font-size-md);
	font-weight: var(--global--font-weight-bold);
  background-color: var(--brand--color-pale-green);
	margin: 0 0 .825em 0;
	padding: .5em .25em;
	box-sizing: border-box;
}

@media all and (max-width: 760px) {
	.column-dl dt {
		text-align: left;
		justify-content: flex-start;
		width: 100%;
		font-size: var(--global--font-size-sm);
		margin: 0;
		padding: .5em 1em;
	}
}

.column-dl dt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-left: 8px solid var(--brand--color-pale-green);
}

@media all and (max-width: 760px) {
	.column-dl dt::before {
		top: initial;
		bottom: -15px;
		left: 15px;
		border: 8px solid transparent;
		border-top: 8px solid var(--brand--color-pale-green);
	}
}

.column-dl dd {
	position: relative;
  width: 78%;
	color: var(--brand--color-dark-green);
	font-size: var(--global--font-size-md);
	font-weight: var(--global--font-weight-regular);
	margin: 0 0 .825em 0;
	padding: .5em .25em .5em 1.5em;
	box-sizing: border-box;
	z-index: 1;
}

@media all and (max-width: 760px) {
	.column-dl dd {
		width: 100%;
		font-size: var(--global--font-size-sm);
		margin: 0 0 1em 0;
		padding: 1em .25em .5em 1em;
	}
}

.column-dl dd::after {
	content: "";
	position: absolute;
  background-image: linear-gradient(to right, var(--brand--color-pale-green), var(--brand--color-pale-green) 5px, transparent 5px, transparent 12px);
  background-size: 12px 1px;
  background-repeat: repeat-x;
	background-position: left bottom;
	width: calc(100% - 10px);
  top: 0;
  bottom: 0;
  right: 0;
	z-index: -1;
}

.column-dl em {
	color: var(--brand--color-green);
	font-size: 1.3rem;
	font-weight: var(--global--font-weight-bold);
	font-style: normal;
}

.column-dl small {
	font-size: .8rem;
	font-style: normal;
}

.circle-pattern {
	width: 600px;
	height: 450px;
	position: absolute;
	background-repeat: repeat;
	background-size: 10%;
	background-image: url(./assets/svg/circle.svg);
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.circle-pattern {
		width: 300px;
		height: 225px;
	}
}

.circle-pattern-left-top {
	background-position: right 0 top 0;
	top: -40vh;
	left: -20vw;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.circle-pattern-left-top {
		top: -5%;
		left: -60%;
	}
}

.circle-pattern-right-bottom {
	background-position: left 0 bottom 0;
	bottom: -35vh;
	right: -15vw;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.circle-pattern-right-bottom {
		bottom: -5%;
		right: -60%;
	}
}

.circle-pattern-pale {
	background-image: url(./assets/svg/circle-pale.svg);
}

.hollyhock {
	position: relative;
	background: center / contain no-repeat;
	padding-bottom: calc(100% * 54.7729 / 58.8132);
}

.bg-hollyhock-a {
	position: absolute;
	width: 180px;
	height: auto;
	top: 20%;
	left: 1%;
	transform: rotate(15deg);
	background-image: url(./assets/svg/hollyhock.svg);
}

.bg-hollyhock-a.js_anim_css {
	opacity: 0;
	transform: rotate(15deg) translateY(10px);
}

.bg-hollyhock-a.js_anim_css_active {
	opacity: 1;
	transform: rotate(15deg) translateY(0);
	transition: all .5s .4s ease;
}

.bg-hollyhock-b {
	position: absolute;
	width: 160px;
	height: auto;
	top: 50%;
	right: 1%;
	transform: rotate(165deg);
	background-image: url(./assets/svg/hollyhock.svg);
}

.bg-hollyhock-b.js_anim_css {
	opacity: 0;
	transform: rotate(165deg) translateY(-10px);	
}

.bg-hollyhock-b.js_anim_css_active {
	opacity: 1;
	transform: rotate(165deg) translateY(0);
	transition: all .5s .6s ease;
}

.hollyhock-tooth {
	position: relative;
	background: center / contain no-repeat;
	padding-bottom: calc(35.3804 / 35.3804 * 100%);
	background-image: url(./assets/svg/hollyhock-tooth.svg);
}

.bg-hollyhock-tooth {
	position: absolute;
	width: 120px;
	height: auto;
	top: calc(20% + 90px);
	left: calc(1% + 160px);
	transform: rotate(-16deg);
}

.bg-hollyhock-tooth.js_anim_css {
	opacity: 0;
	transform: rotate(-16deg) translateY(10px);
}

.bg-hollyhock-tooth.js_anim_css_active {
	opacity: 1;
	transform: rotate(-16deg) translateY(0);
	transition: all .5s .4s ease;
}

.hollyhock-small {
	position: relative;
	background: center / contain no-repeat;
	padding-bottom: calc(29.6842 / 31.8865 * 100%);
	background-image: url(./assets/svg/hollyhock-small.svg);
}

.bg-hollyhock-small {
	position: absolute;
	width: 110px;
	height: auto;
	top: calc(50% - 90px);
	right: calc(1% + 120px);
	transform: rotate(200deg);
}

.bg-hollyhock-small.js_anim_css {
	opacity: 0;
	transform: rotate(200deg) translateY(-10px);	
}

.bg-hollyhock-small.js_anim_css_active {
	opacity: 1;
	transform: rotate(200deg) translateY(0);
	transition: all .5s .6s ease;
}


.footprint {
	position: relative;
	width: 100%;
	height: 100%;
}

.footprint-hide {
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 10px;
}

.footprint-hide {
	fill: none;
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 10px;
}

.footprint-hide.js_anim_css_active {
  -webkit-animation: stroke 5s linear forwards; 
  animation: stroke 6s linear forwards; 
  stroke: #fff;
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
}

@-webkit-keyframes stroke {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 200;
  }
}

@keyframes stroke {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 200;
  }
}

.footprint-image {
	fill: #e5e4e3;
}

.bg-footprint {
	position: absolute;
	width: calc(70.3431px * 7);
	height: calc(149.1515px * 7);
	bottom: -1%;
	right: -12%;
	transform: rotate(14deg);
	margin: auto;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.bg-footprint {
		width: calc(70.3431px * 5);
		height: calc(149.1515px * 5);
		top: -28%;
    right: -34%;
    transform: rotate(9deg);
	}
}

.image-box {
	position: relative;
	width: 100%;
	margin: 0;
	background: center / cover no-repeat;
	border-radius: .5em;
}

.image-box::after {
	content: "";
	display: block;
	padding-top: 60%;
}

.image-box-contain {
	background: center / contain no-repeat;
	background-color: var(--global--color-pale-grey);
}

.image-box-square::after {
	padding-top: 100%;
}

.image-box-long::after {
	padding-top: calc(5 / 4 * 100%);
}

.image-box-wide::after {
	padding-top: calc(4 / 5 * 100%);
}

.image-box-very-long::after {
	padding-top: calc(16 / 9 * 100%);
}

.image-box-very-wide::after {
	padding-top: calc(9 / 16 * 100%);
}

@media all and (max-width: 760px) {
	.image-box-sp-square::after {
		padding-top: 100%;
	}
}

@media all and (max-width: 760px) {
	.image-box-sp-wide::after {
		padding-top: calc(4 / 5 * 100%);
	}
}

@media all and (max-width: 760px) {
	.image-box-sp-very-wide::after {
		padding-top: calc(9 / 16 * 100%);
	}
}

.iframe-form-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-bottom: 60%;
	background-color: var(--brand--color-pale-green);
	border-radius: .5em;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.iframe-form-wrapper {
		padding-bottom: 180%;
	}
}

.iframe-form-wrapper.recruit-form-preparation {
			padding: 6em 2em;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.iframe-form-wrapper.recruit-form-preparation {
		padding: 6em 2em;
	}
}

.iframe-form {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	border: none;
	padding: 10% 0 0;
}

.map-wrapper {
	position: relative;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	transition: all ease .4s;
	margin: 0 0 2.5em;
	border-radius: .5em;
}

.map-wrapper-square {
	padding-bottom: 100%;
}

.map-wrapper-wide {
	padding-bottom: calc(100% * 9 / 16);
}

@media all and (max-width: 760px) {
	.map-wrapper-wide {
		padding-bottom: calc(100%);
	}
}

.map-wrapper iframe,
.map-wrapper object,
.map-wrapper embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Background */
.bg-pale-green {
	background-color: var(--brand--color-pale-green);
}

.bg-green {
	background-color: var(--brand--color-green);
}

/* Loading Animation */
/* ==========================================================================
   カモさん専用：ローディング＆画面遷移 最終決定版CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 共通ベース設定（画面全体を覆う枠組み）
   -------------------------------------------------------------------------- */
#loading-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

/* --------------------------------------------------------------------------
   2. トップページ専用：カウントアップ＆カモさんアニメーション（フェードアウト消去）
   -------------------------------------------------------------------------- */

/* トップページ用の時は、ベースをエメラルドグリーンにする */
#loading-wrapper.top-page-mode {
    background-color: var(--brand--color-green);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s ease, visibility 1s ease; /* 1sかけてフワッと消える */
}

/* トップページ読み込み完了時：フワッと消去 */
#loading-wrapper.top-page-mode.loaded {
    opacity: 0;
    visibility: hidden;
}

/* 数字とインジケーターのコンテナ */
.loader-container {
    text-align: center;
    color: #fff;
    font-family: sans-serif;
    transition: opacity 0.3s ease;
}

/* 💡【復活】ぐるぐる回るローダーサークルの本体設定 */
.loader {
    border: 5px solid var(--brand--color-light-green);
    border-top: 5px solid var(--brand--color-yellow);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    animation: spin 1s linear infinite; /* 1秒で1回転 */
}

/* サークルを回すためのアニメーションキーフレーム */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* カウントアップの数字 */
#loading-text {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 10px;
}

.loader-container-hide {
    opacity: 0;
}

/* カモさんSVGの配置ボックス */
.loading-logo-box {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: auto;
}

@media all and (max-width: 980px) {
	.loading-logo-box {
		width: 400px;
	}	
}

@media all and (max-width: 760px) {
	.loading-logo-box {
		width: 300px;
	}
}


/* 下から上品にぽよんと飛び出る */
.logo-start-animation {
    display: block;
    animation: bounceAnimation 1.4s cubic-bezier(0.28, 0.84, 0.42, 1) both;
    transform-origin: center bottom;
}

/* ウインク（右目） */
.do-wink #logo-eye-right {
    animation: winkAnimation 0.3s ease-in-out both;
    transform-origin: 289px 53px;
}

/* キーフレーム：上下の幅を抑えた優しいバウンド */
@keyframes bounceAnimation {
    0% {
        opacity: 0;
        transform: translate(-50%, 80px) scaleY(0.85) scaleX(1.1);
    }
    35% {
        opacity: 1;
        transform: translate(-50%, -56%) scaleY(1.05) scaleX(0.95);
    }
    55% {
        transform: translate(-50%, -48%) scaleY(0.93) scaleX(1.03);
    }
    75% {
        transform: translate(-50%, -51%) scaleY(1.01) scaleX(0.99);
    }
    100% {
        transform: translate(-50%, -50%) scaleY(1) scaleX(1);
    }
}

/* キーフレーム：ウインク */
@keyframes winkAnimation {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
    100% { transform: scaleY(1); }
}


/* --------------------------------------------------------------------------
   3. 下層ページ専用：左から右へのフルサイズ画面遷移（カーテン幕消去）
   -------------------------------------------------------------------------- */

/* 下層ページ用の時は、ベース自体を透明にしてカーテンの動きを見せる */
#loading-wrapper.sub-page-mode {
    background-color: transparent;
    pointer-events: none; /* 下にあるコンテンツの邪魔をしない */
}

/* 実際に画面を覆って動く「エメラルドグリーンの幕」 */
.transition-anim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--brand--color-pale-green); /* ここで色をつける */
		z-index: 999;
    /* 起点を左端にして、最初は画面全体を100%覆う */
    transform-origin: right center;
    transform: scaleX(1);
    
    /* シャッとしたカーテンの動き */
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

/* 下層ページ読み込み完了時：左から右へシャーッと吸い込まれるように消える */
#loading-wrapper.sub-page-mode.loaded .transition-anim {
    transform: scaleX(0); 
}

/* カーテンが閉まりきった（0.6秒後）に、親要素全体の存在を完全に消去する */
#loading-wrapper.sub-page-mode.loaded {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0s 0.8s, visibility 0s 0.8s;
}

/* Section Hero */
.bg-hero {
	background-color: var(--global--color-white);
	background: linear-gradient(180deg, var(--global--color-white) 0%, var(--global--color-white) 80%, var(--brand--color-green) 80%, var(--brand--color-green) 100%);
}

.bg-hero-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.bg-hero-back {
	position: absolute;
	width: 100%;
	height: auto;
}

.hero-slogan {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10%;
	right: 0;
	padding: 0;
	margin: auto;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.hero-slogan {
		font-size: var(--global--font-size-md);
	}
}

.hero-slogan-line {
	position: relative;
	padding: 0 0 .5em;
	margin: 0;
	font-size: var(--global--font-size-lg);
	font-family: var(--brand--font-jp-key);
	font-weight: var(--global--font-weight-regular);
	color: var(--global--color-white);
	text-align: center;
	line-height: 1.8;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.hero-slogan-line {
		font-size: var(--global--font-size-md);
	}
}

.hero-slogan.js_anim_css .hero-slogan-line {
	transform: translateY(10px);
	opacity: 0;
}

.hero-slogan.js_anim_css_active .hero-slogan-line {
	transform: translateY(0);
	opacity: 1;
	transition: all .6s .2s ease;
}

/* Hero image */
.hero-swiper-wrapper {
	position: relative;
	display: block;
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
	z-index: 0;
}

@media all and (max-width: 980px) {
	.hero-swiper-wrapper {
	border-radius: 30px;
	}
}

@media all and (max-width: 760px) {
	.hero-swiper-wrapper {
	border-radius: 20px;
	}
}

.hero-image-container {
	position: relative;
	display: block;
	width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
	transform: scale(1.1) translate(-5%, 0);
  transition: transform 6s ease;
}

.swiper-slide-active .hero-image-container {
	transform: scale(1.05) translate(0, 0);
  transition: transform 6s ease;
}

@media all and (max-width: 760px) {
	.hero-image-container {
		transform: scale(1.05) translate(-4%, 0%);
	}
}

@media all and (max-width: 760px) {
	.swiper-slide-active .hero-image-container {
		transform: scale(1.05) translate(2%, 0%);
	}
}

.hero-image-container::before {
	content: "";
	position: relative;
	display: block;
	padding-top: 50%;
}

@media all and (max-width: 980px) {
	.hero-image-container::before {
		padding-top: 60%;
	}
}

@media all and (max-width: 760px) {
	.hero-image-container::before {
		padding-top: 100%;
	}
}

.hero-image {
	width: 100%;
	position: relative;
	border-radius: 30px;
	margin: auto;
	background: center / cover no-repeat;	
}

.hero-image::after {
	content: "";
	position: relative;
	display: block;
	padding-top: calc(9 / 16 * 100%);
	/* padding-top: calc(90vh - 190px); */
}

/* Important Notice */
.important-notice-wrapper {
	position: absolute;
	width: 270px;
	bottom: 40px;
	left: 40px;
	margin: 0;
	padding: 0 25px 12px;
	border-radius: 10px;
	background-color: var(--global--color-pale-grey);
}

@media all and (max-width: 760px) {
	.important-notice-wrapper {
		bottom: 0px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
}

.important-notice-heading {
	position: relative;
	display: block;
	margin: -11px 0 0;
	padding: 0 0 0 1.7em;
	font-size: var(--global--font-size-md);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-regular);
	color: var(--brand--color-red);
	line-height: 1.8;
}

.important-notice-heading::before {
	content: "！";
	position: absolute;
	width: 20px;
	height: 20px;
	top: 5px;
	left: 0;
	margin: 0;
	font-size: var(--global--font-size-md);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-bold);
	text-align: center;
	line-height: 1.23;
	color: var(--global--color-white);
	background-color: var(--brand--color-red);
	border-radius: 10px;
}

.important-notice {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.important-notice-item {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.important-post {
	margin: 0;
}

.important-notice-item-link {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.important-notice-item-title {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0;
	font-size: var(--global--font-size-sm);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-regular);
	color: var(--brand--color-brown);
}

.important-notice-item-date {
	position: relative;
	display: inline-block;
	font-size: var(--global--font-size-xxs);
	color: var(--brand--color-red);
	padding-right: 1em;
	margin: 0;
}

/* Card Item
--------------------------------------------- */
.card {
	position: relative;
	padding: 0 20px 0 0;
	margin: 0;
}

.card-link {
	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.card-image {
	position: relative;
	padding: 0;
	margin: 0;
	z-index: 2;
	transition: .2s all;
}

a:hover .card-image {
	transform: translate(-5px, -5px);
}

.card-image-inner {
	position: relative;
	background: top center / cover no-repeat;
	border-radius: .5em;
}

.card-image-inner::after {
	content: "";
	position: relative;
	display: block;
	padding-top: calc(4 / 3 * 100%);
}

	@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.card-image-inner::after {
		padding-top: 100%;
	}
}

.card-image-inner-wide::after {
	content: "";
	position: relative;
	display: block;
	padding-top: calc(3 / 4 * 100%);
}

@media all and (max-width: 760px) {
	.card-image-inner-wide::after {
		padding-top: calc(3 / 4 * 100%);
	}
}

.card-image-inner-covered {
	position: absolute;
	background: top center / cover no-repeat;
	top: 0;
	left: 0;
	opacity: 0;
	transition: .2s all;
	/* animation: switch-image 8s linear infinite; */
}

.card-image-inner-covered::after {
	content: "";
	position: relative;
	display: block;
	padding-top: calc(4 / 3 * 100%);
}

	.card-link:hover .card-image-inner-covered {
	opacity: 1;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.card-image-inner-covered::after {
		padding-top: 100%;
	}
}

.card-content {
	position: relative;
	padding: calc(120px + .5em) 1.5em 1em;
	background-color: var(--brand--color-green);
	border-radius: .5em;
	transform: translate(20px, -120px);
	z-index: 1;
	transition: .2s all;
}

a:hover .card-content {
	transform: translate(25px, -115px);
}

.card-content-bg-green {
	background-color: var(--brand--color-green);
}

.card-content-bg-red {
	background-color: var(--brand--color-red);
}

a:hover .card-content-bg-red {
	background-color: var(--brand--color-light-red);
}

.card-content-bg-blue {
	background-color: var(--brand--color-blue);
}

a:hover .card-content-bg-blue {
	background-color: var(--brand--color-light-blue);
}

.card-content-bg-yellow {
	background-color: var(--brand--color-yellow);
}

a:hover .card-content-bg-yellow {
	background-color: var(--brand--color-light-yellow);
}

.card-title {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0;
	color: var(--global--color-white);
	font-size: var(--global--font-size-md);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-bold);
}

.card-description {
	position: relative;
	display: block;
	padding: 0;
	margin: 0 0 .25em;
	color: var(--global--color-white);
	font-size: var(--global--font-size-xs);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-regular);
}

.card-arrow {
	position: relative;
	display: inline-block;
	padding: 0;
	padding-right: 45px;
	margin: 0;
	color: var(--global--color-white);
	font-size: var(--global--font-size-xs);
	font-family: var(--brand--font-jp);
	font-weight: var(--global--font-weight-regular);
	transition: .2s all;
}

a:hover .card-arrow {
	transform: translateX(10px);
}

.card-arrow::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 1px;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	background-color: var(--global--color-white);
	transition: .2s all;
	transform-origin: left;
}

a:hover .card-arrow::after {
	transform: scaleX(80%);
}

/* News List
--------------------------------------------- */
.news-list {
	display: flex;
	flex-direction: column;
	position: relative;
	list-style: none;
	margin: 0 auto 1.5em;
	padding: 0;
}

.news-list-item {
	display: block;
	position: relative;
	max-width: 100%;
	margin: 0 0 3em;
	padding: 0;
}

.news-list.js_anim_css .news-list-item {
	transform: translateX(30px);
	opacity: 0;
	/* transition: all ease .4s; */
}

.news-list.active .news-list-item {
	transform: translateX(0);
	opacity: 1;
	/* transition: all ease .4s; */
}

.news-list-meta {
	display: block;
	position: relative;
	margin: 0 0 .25em;
	padding: 0;
}

.news-list-meta > * {
	font-weight: var(--global--font-weight-regular);
}

.news-list-header {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

.news-list-mark {
	display: inline;
	position: relative;
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-regular);
	margin: 0;
	padding: 0;
	top: -0.25em;
}

.news-list-sticky {
	display: inline-block;
	position: relative;
	width: 24px;
	height: auto;
	top: 7px;
	left: -2px;
	margin: 0 .5em 0 0;
	padding: .25em;
	background: no-repeat center / auto 59% var(--brand--color-yellow);
	background-image: url("./assets/svg/icon-pin.svg");
	border-radius: 50px;
}

.news-list-sticky::before {
	content: "";
	position: relative;
	display: block;
	padding-top: 100%;
}

.news-list-important {
	display: inline-block;
	position: relative;
	color: var(--global--color-white);
	letter-spacing: .825em;
	margin: 0 .5em 0 0;
	padding: .15em 0 .15em 1em;
	background: var(--brand--color-red);
	border-radius: 50px;
}

.news-list-emergency {
	display: inline-block;
	position: relative;
	color: var(--global--color-white);
	letter-spacing: .825em;
	margin: 0 .825em 0 0;
	padding: .15em 0 .15em 1em;
	background-color: var(--brand--color-dark-red);
	border-radius: 50px;
}

.news-list-title {
	display: inline;
	position: relative;
	color: var(--brand--color-green);
	font-size: var(--global--font-size-md);
	font-weight: var(--global--font-weight-bold);
	margin: 0;
	padding: .25em 0;
}

.news-list-content {
	display: block;
	position: relative;
	color: var(--brand--color-dark-green);
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-regular);
	margin: 0;
	padding: 0 0 15px;
}

.news-list-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 .5em;
	transition: all ease .2s;
}

.news-list-link:hover {
	opacity: .65;
}

.news-list-link::before {
	content: "";
	display: block;
	position: absolute;
	width: calc(100% - 75px);
	right: 80px;
	bottom: -2px;
	height: 1px;
	background-color: var(--brand--color-pale-green);
	padding: 0;
	transform: translateX(0);
	transition: all ease .2s;
}

.news-list-link:hover::before {
	transform: translateX(15px);
	width: calc(100% - 100px);
}

.news-list-link::after {
	content: "続きを読む";
	display: block;
	position: absolute;
	width: auto;
	color: var(--brand--color-dark-green);
	font-size: var(--global--font-size-xs);
	font-weight: var(--global--font-weight-regular);
	right: 0;
	bottom: -12px;
	padding: 0;
	transform: translateX(0);
	transition: all ease .2s;
}

.news-list-link:hover::after {
	transform: translateX(5px);
}

/* Section Blush Background */
.bg-blush {
	background: center / cover no-repeat;
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.bg-blush {
		position: relative;
		background: center left / 190% no-repeat;
		height: 40%;
		bottom: inherit;
		padding-bottom: calc(100% *  5 / 16);
	}
}

.content-block-blush {
 width: 45%;
}

@media all and (max-width: 980px) {
	.content-block-blush {
	}
}

@media all and (max-width: 760px) {
	.l-container-inner-sp-bg-light-green {
		 background-color: var(--brand--color-pale-green);
	}
}

@media all and (max-width: 760px) {
	.content-block-blush {
		 width: 100%;
	}
}

/* Section Greeting */
.greeting-name {
	position: relative;
	text-align: right;
	margin: 0 0 .825em;	
	color: var(--brand--color-green);
	font-family: var(--brand--font-jp-key);
	font-size: var(--global--font-size-xl);
	font-weight: var(--global--font-weight-bold);
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.greeting-name {
		font-size: var(--global--font-size-lg);

	}
}

.greeting-name.js_anim_css {
	transform: translateX(20px);
	opacity: 0;
}

.greeting-name.js_anim_css_active {
	transform: translateX(0);
	opacity: 1;
	transition: all .4s .5s ease;
}

.greeting-pos {
	display: inline-block;
	padding-right: .5em;
	font-size: var(--global--font-size-md);
}

.prof-image {
	position: relative;
	background: top center / cover no-repeat;
}

.prof-image::after {
	content: "";
	position: relative;
	display: block;
	padding-top: calc(5 / 4 * 100%);
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.prof-image::after {
		padding-top: 100%;
	}
}

.prof-image-covered {
	position: absolute;
	background: top center / cover no-repeat;
	top: 0;
	left: 0;
	opacity: 1;
	animation: switch-image 8s linear infinite;
}

.prof-image-covered::after {
	content: "";
	position: relative;
	display: block;
	padding-top: calc(5 / 4 * 100%);
}

@keyframes switch-image {
  0% {
  	opacity: 1;
  }
  45% {
  	opacity: 1;
  }
  50% {
  	opacity: 0;
  }
  95% {
  	opacity: 0;
  }
  100% {
  	opacity: 1;
  }
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.prof-image-covered::after {
		padding-top: 100%;
	}
}

/* Section Recruit */
.recruit-form {
	position: relative;
}

.recruit-form-opening::before {
	content: "";
	position: absolute;
	top: -30px;
	right: -30px;
	width: calc(65px * 1.7);
	height: calc(65px * 1.7);
	z-index: 3;
	background: center / contain no-repeat url(./assets/svg/recruit-circle.svg);
  animation: rotation 8s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.recruit-form::before {
			top: -20px;
			right: -15px;
			width: calc(65px * 1.2);
			height: calc(65px * 1.2);
	}
}

.recruit-form::after {
	content: "";
	position: absolute;
	bottom: -90px;
  right: -40px;
	width: calc(41.5157px * 3);
	height: calc(71.6772px * 3);
	z-index: 3;
	background: center / contain no-repeat url(./assets/img/teal-waving-anime.gif);
  /* animation: teal-anim 4s linear both infinite; */
}

@keyframes teal-anim {
  0% {
  	background: center / contain no-repeat url(./assets/img/teal-blush.png);
  }
  32% {
  	background: center / contain no-repeat url(./assets/img/teal-blush.png);
  }
  33% {
  	background: center / contain no-repeat url(./assets/img/teal-blush-anim-2.png);
  }
  34% {
  	background: center / contain no-repeat url(./assets/img/teal-blush-anim-3.png);
  }
  35% {
  	background: center / contain no-repeat url(./assets/img/teal-blush-anim-4.png);
  }
  40% {
  	background: center / contain no-repeat url(./assets/img/teal-blush-anim-4.png);
  }
  41% {
  	background: center / contain no-repeat url(./assets/img/teal-blush-anim-3.png);
  }
  42% {
  	background: center / contain no-repeat url(./assets/img/teal-blush-anim-2.png);
  }
  43% {
  	background: center / contain no-repeat url(./assets/img/teal-blush.png);
  }
  100% {
  	background: center / contain no-repeat url(./assets/img/teal-blush.png);
  }
}

@media all and (max-width: 980px) {
}

@media all and (max-width: 760px) {
	.recruit-form::after {
		bottom: -96px;
		right: -20px;
		/* width: calc(41.5157px * 2.3);
		height: calc(71.6772px * 2.3); */
	}
}

/* Section Access */
.bg-access  {
	background-color: var(--global--color-white);
}

/* Section Footer */
.bg-footer  {
	background-color: var(--brand--color-green);
}

.footer-info {
	position: relative;
}

.footer-slogan {
	font-size: var(--global--font-size-xl);
	font-family: var(--brand--font-en);
	font-weight: var(--global--font-weight-bold);
	letter-spacing: 0em;
	line-height: 1.1;
	transform: scaleX(1.03);
	transform-origin: left;
	color: var(--global--color-white);
	position: relative;
	padding: .65em 0 .5em;
	margin: 0;
}

.footer-copyright {
	font-size: var(--global--font-size-xs);
	font-family: var(--brand--font-jp);
	font-size: var(--global--font-size-sm);
	color: var(--global--color-white);
	position: relative;	
	margin-bottom: 0;
}

.footer-logo {
	position: relative;
	width: 20%;
}

@media all and (max-width: 980px) {
	.footer-logo {
	}
}

@media all and (max-width: 760px) {
	.footer-logo {
		 width: 140px;
	}
}

/* Form
--------------------------------------------- */
.form {
	display: block;
  margin: 0 0 1em;
}

.form fieldset {
	display: block;
	width: 100%;
	min-width: 240px;
	padding: 1em 0 2em;
	margin: 0 auto 1em;
	border: none;
	border-radius: 8px;
}

@media all and (max-width: 720px) {
	.form fieldset {
	  padding: 1em 1em 2em;
	}
}

.form legend {
	color: var(--global--color-black);
	font-size: 1.75em;
	box-sizing: border-box;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

.form label {
	display: inline-block;
  font-size: 1em;
  font-weight: 400;
  margin-bottom: 1em;
	padding: .5em 0;
}

.form-require {
	color: var(--global--color-gold);
	font-size: var(--global--font-size-xl);
	font-weight: var(--global--font-weight-nomal);
	letter-spacing: .5em;
	display: inline-block;
	padding: 0;
	margin: 0;
}

.form-dl {
	display: table;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 8px;
	width: 100%;
	box-sizing: border-box;
}

.form-dl-group {
	display: table-row-group;
	width: 100%;
}

@media all and (max-width: 720px) {
	.form-dl-group {
		display: block;
		margin: 0 0 .5em;
	}
}

.form-dl dt,
.form-dl dd {
	display: table-cell;
	width: auto;
  margin: 0;
	vertical-align: top;
}

.form-dl dt {
	width: 30%;
}

.form-dl dd {
	width: 70%;
}

@media all and (max-width: 720px) {
	.form-dl dt,
	.form-dl dd {
		display: block;
		width: 100%;
		margin: 0 0 .5em;
	}
}

.form fieldset input:not([type=submit]) {
  margin-bottom: 1em;
}

.form input[type=text],
.form input[type=email],
.form input[type=url],
.form input[type=password],
.form input[type=search],
.form input[type=number],
.form input[type=tel],
.form input[type=date],
.form input[type=month],
.form input[type=week],
.form input[type=time],
.form input[type=datetime],
.form input[type=datetime-local],
.form input[type=color],
.form textarea {
  color: inherit;
  font-size: 1.25em;
  line-height: 2;
	border: solid 1px var(--global--color-light-grey);
	border-radius: 0;
  line-height: normal;
	padding: .5em 1em;
  margin-bottom: 1em;
  max-width: 100%;
  background-color: #fff;
}

.form textarea {
  width: 100%;
  overflow: auto;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: auto;
  background-color: #fff;
  flex-direction: column;
  resize: auto;
  cursor: text;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.form select {
	border: solid 1px var(--global--color-light-grey);
  -moz-appearance: solid 1px var(--global--color-light-grey);
  -webkit-appearance: solid 1px var(--global--color-light-grey);
	border-radius: 0;
  appearance: none;
  line-height: normal;
  padding: .5em 1em;
	margin-bottom: 1em;
  background: #fff no-repeat;
  background-position: right top 60%;
}

.form input[type=checkbox],
.form input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    line-height: 0;
    width: 25px;
    height: 25px;
    border: 2px solid var(--global--color-light-grey);
    background: #fff;
    padding: .75em;
}

.form input[type=radio] {
    border-radius: 50%;
}

.form input[type=radio]::after {
  content: "";
  opacity: 0;
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--global--color-light-grey);
  transition: all .1s linear;
}

.form input[type=checkbox]::after {
  content: "";
  opacity: 0;
  display: block;
  left: .7em;
  top: .25em;
  position: absolute;
  width: 7px;
  height: 13px;
  border: 3px solid var(--global--color-light-grey);
  border-top: 0;
  border-left: 0;
  transform: rotate(-30deg);
  transition: all .1s linear;
}

.form input[type=radio]:checked::after,
.form input[type=checkbox]:checked::after {
  opacity: 1;
}

.form input[type=radio]:checked::after {
  width: 1em;
  height: 1em;
}

.form input[type=checkbox]:checked::after {
  transform: rotate(30deg);
}

.send-form-button-wrapper {
	position: relative;
	text-align: center;
}

.send-form-button {
	display: inline-block;
	position: relative;
	padding: 1em 5em;
	border: solid 1px var(--global--color-light-grey);
	border-radius: 1px;
	z-index: 1;
	background: transparent;
}

.send-form-button:hover {
	border: solid 1px var(--global--color-light-grey);
}

.send-form-button .send-form-button-text {
	color: var(--global--color-dark-grey);
	transition: all .3s ease;
	z-index: 1;
}

.send-form-button:hover .send-form-button-text {
	color: #fff;
}

.send-form-button::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--global--color-light-grey);
	transition: all .3s ease;
	z-index: -1;
}

.send-form-button:hover::after {
	width: 100%;
}

.send-form-button input {
	border: none;
	background: transparent;
	color: inherit;
	line-height: 1;
	padding: 0;
	color: var(--global--color-light-grey);
	transition: all .3s ease;
	z-index: 1;
}

.send-form-button:hover input {
	border: none;
	color: #fff;
}

.send-form-button .wpcf7-spinner {
	position: absolute;
	background-color: var(--global--color-light-grey);
	opacity: 1;
}


.contact-title {
	color: var(--brand--color-brown);
	font-family: var(--brand--font-en-serif);
	font-weight: var(--global--font-weight-nomal);
	font-size: var(--global--font-size-xxxl);
	letter-spacing: var(--global--letter-spacing-base);
	padding: 0;
	margin-bottom: 0;
	line-height: 1.3;
}

.contact-desc {
	color: var(--brand--color-brown);
	font-family: var(--brand--font-sans);
	font-weight: var(--global--font-weight-nomal);
	font-size: var(--global--font-size-md);
	letter-spacing: var(--global--letter-spacing-base);
	margin-bottom: 0;
	padding-left: .4em;
}

/* Edit link (for logged-in users)
--------------------------------------------- */
.edit-link-container {
	position: relative;
	padding: .5em 1.25em;
	background-color: var(--global--color-pale-grey);
	margin: 1.5em 0 .5em;
}

.edit-link-desc {
	position: relative;
	color: var(--brand--color-light-red);
	font-size: var(--global--font-size-xs);
	margin: 0;
}

.edit-link {
	position: relative;
	color: var(--brand--color-light-red);
	font-size: var(--global--font-size-sm);
	margin: 0;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Horizontal Galleries
--------------------------------------------- */
/* Horizontal Gallery */
.horizontal-gallery-wrapper {
	position: relative;
	display: block;
	margin: 1.5em 0;
}

@media all and (max-width: 760px) {
	.horizontal-gallery-wrapper {
		margin: 3.5em 0;
	}
}

.horizontal-gallery-swiper {
	overflow: visible;
}

.horizontal-gallery-swiper:hover .swiper-slide {
	/* transition: all .4s; */
	transition-timing-function: linear !important;
}

/* .horizontal-gallery-swiper:hover .swiper-slide:hover {
	transform: scale(110%);
	border-radius: 30px 0 30px 0;
	z-index: 1;
}

.horizontal-gallery-swiper:hover .swiper-slide:not(:hover) {
	opacity: .4;
	z-index: 0;
} */

.horizontal-gallery-image {
	display: block;
	position: relative;
	padding: 0 0 130%;
	background: no-repeat center / cover;
	border-radius: 15px;
}

/* .horizontal-gallery-swiper:hover .swiper-slide:hover .horizontal-gallery-image {
	border-radius: 30px 0 30px 0;
	box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
}
 */

.horizontal-gallery-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* 2. ループの継ぎ目でガタついたり、一瞬消えたりするバグを防ぐおまじない */
.horizontal-gallery-swiper .swiper-slide {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
	transition: all ease .4s;
}

.horizontal-gallery-swiper .swiper-slide:nth-child(2n) {
	transform: translateY(-15px);
}

.horizontal-gallery-swiper .swiper-slide:nth-child(2n-1) {
	transform: translateY(15px);
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}