:root {
	--font-en_sans: "Noto Sans", sans-serif;
	--font-jp_sans: "Noto Sans JP", sans-serif;
	--font-jp_serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

	--padding_h-1: 15px;
	--padding_h-2: 25px;
	--padding_h-3: 10px;

	--padding_v-1: 30px;
	--padding_v-2: 10px;

	--input_padding: 7px;

	--background_color_1: #7e7e7e;
}

html {
	font-size: 10px;
}

body {
	font-family: var(--font-jp_sans);
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 400;

	color: rgba(0, 0, 0, 1);
	background-color: #fff;

	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	-webkit-tap-highlight-color: transparent;

	display: block;
	font-feature-settings: "palt";

	@media (600px <= width) {
		font-size: 1.7rem;
	}
}

a {
	color: #006de7;
	text-decoration: inherit;

	&:hover {
		color: #538bcb;
	}
}

.button {
	display: inline-block;
	padding: var(--input_padding) calc(var(--input_padding) * 2);
	border: 1px solid #8b8b8b;
	border-radius: 10px;
	background-color: #f9f9f9;
	color: #000;
	text-align: center;
	text-decoration: none;
	cursor: pointer;

	transition: 0.25s;

	&:hover {
		background-color: #538bcb;
		border-color: #538bcb;
		color: #fff;
	}

	&:disabled {
		background-color: #eaeaea;
		border-color: #cbcbcb;
		color: #8b8b8b;
		cursor: not-allowed;
	}
}

input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	padding: var(--input_padding);
	border: 1px solid #8b8b8b;
	/* border-radius: 5px; */
	background-color: #fff;
	color: #000;

	&:focus {
		border-color: #006de7;
	}

	&:read-only {
		border-color: #fff;
		background-color: #f9f9f9;
	}

	&:disabled {
		background-color: #eaeaea;
		border-color: #cbcbcb;
		color: #8b8b8b;
		cursor: not-allowed;
	}

	&.value-checked:invalid {
		border-color: #e02500;
		background-color: #fae3e3;
		border-width: 2px;
	}
}

textarea {
	resize: vertical;
}

header {
	width: 100vw;
	padding: calc((20/375) * 100vw) 0;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fffffff4;
	z-index: 1000;

	@media (600px <= width) {
		padding: 45px 0;
	}

	.inner {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 var(--padding_h-1);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

header nav {
	.menu-toggle {
		display: block;

		width: 33px;
		height: 33px;

		cursor: pointer;
		position: relative;

		z-index: 1000;

		.line {
			display: block;
			width: 28px;
			height: 1px;
			background-color: #000;

			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			transform-origin: center;

			transition: 0.25s;
		}

		.line:nth-of-type(1) { top: 6px; }
		.line:nth-of-type(2) { top: 16px }
		.line:nth-of-type(3) { bottom: 6px; }

		&:hover {
			.line:nth-of-type(1) { top: 4px; }
			.line:nth-of-type(2) { top: 16px }
			.line:nth-of-type(3) { bottom: 4px; }
		}
	}

	.menu-toggle.active {
		.line {
			width: 30px;
			height: 1px;
		}

		.line:nth-of-type(1) {
			top: 50%;
			transform: translateX(-50%) translateY(-50%) rotate(45deg);
		}

		.line:nth-of-type(2) {
			width: 0;
			opacity: 0;
		}

		.line:nth-of-type(3) {
			bottom: 50%;
			transform: translateX(-50%) translateY(50%) rotate(-45deg);
		}

		&:hover {
			.line {
				width: 37px
			}
		}
	}

	.menu {
		list-style: none;
	}

	@media (width < 600px) {
		.menu {
			display: none;
			flex-direction: column;
			list-style: none;

			position: absolute;
			padding-top: 5px;
			top: calc((75/375) * 100vw - 5px);
			left: 0;
			width: 100vw;
			height: calc(100dvh - calc((75/375) * 100vw - 5px));

			border-top: 1px solid #eaeaea;
			background-color: #fffffff0;
			opacity: 0;

			transition-property: opacity, top, display;
			transition-duration: .18s;
			transition-timing-function: ease-out;
			transition-behavior: allow-discrete;

			visibility: hidden;

			li {
				display: block;
				border-bottom: 1px solid #eaeaea;
			}

			li a {
				display: block;
				padding: 20px 0;
				font-family: var(--font-en_sans);
				font-size: 1.8rem;
				text-align: center;
				text-transform: uppercase;
				color: #000;
				text-decoration: none;
			}
		}

		.menu.active {
			display: flex;
			opacity: 1;
			top: calc((75/375) * 100vw - 5px);

			transition-duration: .45s;

			@starting-style {
				opacity: 0;
				top: calc((75/375) * 100vw - 10px);
			}
		}
	}

	@media (600px <= width) {
		.menu-toggle {
			display: none;
		}

		.menu {
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;

			top: auto;
			left: auto;
			width: auto;
			height: auto;
			background-color: transparent;

			li {
				font-family: var(--font-en_sans);
				font-size: 1.8rem;
				margin-right: 15px;

				a {
					color: #000;
					text-decoration: none;
					text-transform: uppercase;

					&:hover {
						color: #535bf2;
					}
				}

				&:last-of-type {
					margin-right: var(--padding_h-3);
				}
			}
		}
	}
}

header h1 {
	font-family: var(--font-en_sans);
	font-size: 2.0rem;
	font-weight: 400;
    color: #bac9c1;

	.logo {
		width: 290px;
	}

	@media (600px <= width) {
		font-size: 2.4rem;

		.logo {
			width: 395px;
		}
	}

	a {
		color: #000;
		text-decoration: none;

		&:hover {
			color: #000;
		}
	}
}

footer {
	width: 100vw;
	padding: 30px 0;

	.inner {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 var(--padding_h-1);
		display: flex;
		justify-content: space-between;
		align-items: center;

		p {
			font-size: 1.1rem;
			color: #a9a9a9;

			@media (600px <= width) {
				font-size: 1.3rem;
			}
		}
	}
}

main {
	width: 100vw;
	margin-top: calc((75/375) * 100vw);

	background-image: url(../images/bg3.png);
	background-position-x: var(--padding_h-3);

	@media (600px <= width) {
		margin-top: 126px;
	}
}

@media (1200px < width) {
	main {
		background-position-x: calc(((100vw - 1200px) / 2) + var(--padding_h-3));
	}
}

main article {
	width: 100%;
	margin: 0 auto;

	.content {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		line-height: 1.8;
		color: #000;

		padding: var(--padding_v-1) var(--padding_h-2);

		word-break: keep-all;
		overflow-wrap: anywhere;

		@media (600px <= width) {
			padding: calc(var(--padding_v-1) * 1.5) calc(var(--padding_h-2) * 1.5);
		}
	}

	.content h2 {
		font-family: var(--font-jp_serif);
		font-size: 2.1rem;
		font-weight: 700;
		line-height: 1.6;
		margin-bottom: 20px;

		@media (600px <= width) {
			font-size: 3rem;
			line-height: 1.8;
		}
	}

	.content .link {
		margin-top: 20px;
		position: relative;

		a {
			font-family: var(--font-en_sans);
		}

		a::before {
			content: "";
			display: inline-block;
			width: 0;
			height: 0;
			border-style: solid;
			border-top: 6px solid transparent;
			border-bottom: 6px solid transparent;
			border-left: 7px solid #006de7;
			border-right: 0;

			margin-right: 0.5em;

			position: relative;
			top: 1px;
		}

		a:hover::before {
			border-left-color: #538bcb;
		}

		@media (600px <= width) {
			a::before {
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-left: 10px solid #006de7;
				top: 2px;
			}
		}
	}
}

main article:nth-child(even) {
	background-color: rgba(255, 255, 255, .5);
}

main article[data-contents="contact"] {
	p {
		line-height: 1.5;
	}

	p + p {
		margin-top: .88em;
	}
}

main article .content .company-info {
	dl {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20px;

		dt {
			width: 80px;
			padding-right: .5em;
			margin-bottom: 5px;
			display: flex;
			justify-content: space-between;
		}

		dt::after {
			content: ":";
		}

		dd {
			width: calc(100% - 80px);
			margin-bottom: 5px;
		}

		dt:last-of-type,
		dd:last-of-type {
			margin-bottom: 0;
		}

		@media (600px <= width) {
			dt {
				width: 120px;
				padding-right: .7em;
				margin-bottom: 10px;
			}

			dd {
				width: calc(100% - 120px);
				margin-bottom: 10px;
			}
		}
	}
}

main article .content .contact-form-entry {
	display: none;
	margin-top: 0px;
	flex-direction: column;
	align-items: start;

	&.active {
		display: flex;
		margin-top: 20px;
	}

	.recaptcha {
		display: flex;
		justify-content: start;
	}

	.show-form-button {
		margin-top: 1em;
		font-size: 1.1em;
		padding-top: 1em;
		padding-bottom: 1em;
		width: 304px;
	}

	@media (640px <= width) {
		flex-direction: row;

		.show-form-button {
			font-size: 1em;
			margin-top: 0;
			margin-left: 2em;
			padding-top: 1em;
			padding-bottom: 1em;
			width: 245px;
			height: 78px;
		}
	}
}

main article .contact-form-input {
	display: none;
	margin-top: 0;
	opacity: 0;

	grid-template-rows: 1fr;

	&.active {
		display: grid;
		grid-template-rows: 1fr;
		margin-top: 20px;
		opacity: 1;

		transition-property: grid-template-rows, margin-top, opacity, display;
		transition-behavior: allow-discrete;
		transition-duration: .5s;
		transition-timing-function: ease;

		@starting-style {
			grid-template-rows: 0fr;
			margin-top: 0;
			opacity: 0;
		}
	}

	.inner {
		overflow: hidden;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		justify-content: start;

		margin-bottom: .5em;

		label {
			box-sizing: border-box;
			margin-top: calc(var(--input_padding) + 0.3em);
			margin-bottom: var(--input_padding);
		}

		textarea {
			height: 180px;
		}

		.button {
			width: 160px;
		}

		@media (600px <= width) {
			flex-direction: row;

			label {
				flex: 0 0 200px;
			}

			textarea {
				height: 300px;
			}

			.button {
				width: 160px;
			}
		}
	}
}

main article .contact-form-completed {
	display: none;
	margin-top: 0;
	opacity: 0;

	&.active {
		display: block;
		margin-top: 20px;
		opacity: 1;

		transition-property: margin-top, opacity, display;
		transition-behavior: allow-discrete;
		transition-duration: .7s;
		transition-timing-function: ease-in-out;
		transition-delay: .55s;

		@starting-style {
			margin-top: 0;
			opacity: 0;
		}
	}

	h3 {
		font-family: var(--font-jp_sans);
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 1.4;

		@media (600px <= width) {
			font-size: 2.0rem;
			line-height: 1.8;
		}
	}

	p {
		margin-bottom: 3em;
	}

	ul {
		margin-top: 0.4em;
		padding: 1.2em 1.5em;
		list-style: none;
		background-color: #ffffff90;

		.label1 {
			display: inline-block;
			width: 5em;
		}

		.label2 {
			display: inline-block;
			margin-top: 1em;
			width: 10em;
		}

		.body .val {
			display: inline-block;
		}
	}
}

/* utilities */

.hidden		{ display: none; }
.visible 	{ visibility: visible !important; }

.noborder	{ border: none !important; }
.page_br 	{ break-before: page !important; }

.f-large	{ font-size: 1.08em !important; }
.f-small 	{ font-size: 0.95em !important; }

.ta-l		{ text-align: left !important; }
.ta-c		{ text-align: center !important; }
.ta-r		{ text-align: right !important; }