/*--------------------------------------------------------------
>>> 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.5rem;
	--global--font-size-xxl: 2.5rem;
	--global--font-size-xxxl: 3rem;
	--global--font-size-huge: 3.5rem;
	--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-navy);
	--brand--color-key: var(--brand--color-red);
	--brand--color-accent: var(--brand--color-light-blue);

	--brand--color-brown: #443007;
	--brand--color-green: #1eb1a3;
	--brand--color-light-green: #e3f0df;
	--brand--color-dark-green: #486b5e;
	--brand--color-yellow: #efd256;

	--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;
	color: var(--global--color-black);
	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); */
	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;
}

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-navy);
	font-weight: 700;
	text-decoration: none;
	transition: all ease .4s;
}

/* a {
	color: var(--brand--color-navy);
	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-light-blue);
	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-navy-light); */
}

a:hover,
a:focus,
a:active {
	color: var(--brand--color-navy-light);
}

a:focus {
	outline: thin dotted;
}

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

/* 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: absolute;
	height: 150px;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0;
	z-index: 99;
}

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

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

.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-about {
	/* background-color: var(--global--color-white); */
}

.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;
	padding: 12vh 5vw 13vh;
	max-width: 1024px;
	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-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: calc(150px + 12vh) 5vw 26vh;
}

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

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

.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: 2.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-branding {
	position: relative;
	flex: 1;
	display: flex;
	width: 33.3333%;
	height: auto;
	justify-content: center;
}

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

.logo-whitechara::before {
	display: block;
	content: "";
	position: relative;
	padding-top: calc(100% *  75.8738 / 104.1974);
}

.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;
}

.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);
}

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

@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;
}

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

.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-light-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-light-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-light-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-light-green), var(--brand--color-light-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;
}

.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);
}

.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);
}

.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%);
}

.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%);
}

.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%;
	padding-bottom: 60%;
	margin: 0;
	background: center / cover no-repeat;
	border-radius: .5em;
}

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

.image-box-long {
	padding-bottom: 130%;
}

.iframe-form-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-bottom: 140%;
	background-color: var(--brand--color-light-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;
	}
}

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

}

.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 1.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%;
}

/* Section Hero */
.bg-hero {
	background-color: var(--brand--color-light-green);
}

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

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

.hero-heading {
	font-size: var(--global--font-size-xxxl);
	font-family: var(--brand--font-en);
	font-weight: var(--global--font-weight-exbold);
	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) {
	.hero-heading {
		font-size: var(--global--font-size-xxl);	
	}
}

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

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

.hero-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: 980px) {
}

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

.hero-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) {
	.hero-heading.js_anim_css::before {
		width: calc(61.0726px * 0.35);
		height: calc(85.5276px * 0.35);

	}
}

.hero-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 .4s ease;
}

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

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

.hero-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) {
	.hero-slogan {
		font-size: var(--global--font-size-lg);
	}
}

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

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

.hero-text {
	position: relative;
	padding: 0 0 .5em;
	margin: 0;
	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);
	line-height: 1.8;
}

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

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

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

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

.hero-image-container {
	position: relative;
	width: 100%;
	margin: auto;
}

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

@media all and (max-width: 760px) {
	.hero-image-container {
		position: relative;
		width: 70%;
	}
}

.hero-image-container::after {
	content: "";
	position: relative;
	display: block;
	padding-top: calc(75.8738 / 104.1974 * 100%);
}

.hero-image-container.js_anim_css .hero-image-b {
	transform: translateY(10px);
	opacity: 0;
}

.hero-image-container.js_anim_css_active .hero-image-b {
	transform: translateY(0);
	opacity: 1;
	transition: all .6s 1.3s ease;
}

.hero-image-container.js_anim_css .hero-image-c {
	transform: translateY(10px);
	opacity: 0;
}

.hero-image-container.js_anim_css_active .hero-image-c {
	transform: translateY(0);
	opacity: 1;
	transition: all .6s 1.3s ease;
}

.hero-image-container.js_anim_css .hero-image-d {
	transform: translateY(5px);
	opacity: 0;
}

.hero-image-container.js_anim_css_active .hero-image-d {
	transform: translateY(0);
	opacity: 1;
	transition: all .6s 1.1s ease;
}

.hero-image {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: center / cover no-repeat;	
}

/* Section About Us */
.bg-about {
	background: center / cover no-repeat;
}

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

@media all and (max-width: 760px) {
	.bg-about {
		position: relative;
		background: center left / 190% no-repeat;
		height: 40%;
		bottom: inherit;
		padding-bottom: calc(100% *  5 / 16);
	}
}

.content-block-about {
 width: 40%;
}

@media all and (max-width: 980px) {
	.content-block-about {
	}
}

@media all and (max-width: 760px) {
	.content-block-about {
		 width: 100%;
	}
}

/* Section Greeting */
.bg-greeting {
	background-color: var(--global--color-white);
}

.greeting-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) {
	.greeting-slogan {
		font-size: var(--global--font-size-lg);
	}
}

.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;
}

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

@media all and (max-width: 760px) {
	.prof-image {
		padding-bottom: 100%;
	}
}
.prof-image-covered {
	position: absolute;
	background: top center / cover no-repeat;
	top: 0;
	left: 0;
	opacity: 1;
	animation: switch-image 8s linear infinite;
}

@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 {
		padding-bottom: 100%;
	}
}
/* Section Recruit */
.bg-recruit {
	background-color: var(--brand--color-green);
}

.recruit-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(--global--color-white);
	line-height: 1.8;
}

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

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

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

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

.recruit-form {
	position: relative;
}

.recruit-form::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-blush.png);
  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 Accecc */
.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;
}