@charset "utf-8";
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
	box-sizing: border-box;
	border-style: solid;
	border-width: 0;
}
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}
body {
	margin: 0;
}
main {
	display: block;
}
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
	margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
}
ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
dt {
	font-weight: bold;
}
dd {
	margin-left: 0;
}
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
	border-top-width: 1px;
	margin: 0;
	clear: both;
	color: inherit;
}
pre {
	font-family: monospace, monospace;
	font-size: inherit;
}
address {
	font-style: inherit;
}
a {
	background-color: transparent;
	text-decoration: none;
	color: inherit;
}
abbr[title] {
	-webkit-text-decoration: underline dotted;
			text-decoration: underline dotted;
}
b,
strong {
	font-weight: bolder;
}
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: inherit;
}
small {
	font-size: 80%;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sub {
	bottom: -0.25em;
}
sup {
	top: -0.5em;
}
svg,
img,
embed,
object,
iframe {
	vertical-align: bottom;
}
button,
input,
optgroup,
select,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
		appearance: none;
	vertical-align: middle;
	color: inherit;
	font: inherit;
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
	text-align: inherit;
	text-transform: inherit;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
	cursor: pointer;
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
	cursor: default;
}
:-moz-focusring {
	outline: auto;
}
select:disabled {
	opacity: inherit;
}
option {
	padding: 0;
}
fieldset {
	margin: 0;
	padding: 0;
	min-width: 0;
}
legend {
	padding: 0;
}
progress {
	vertical-align: baseline;
}
textarea {
	overflow: auto;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
[type="search"] {
	outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}
[type="number"] {
	-moz-appearance: textfield;
}
label[for] {
	cursor: pointer;
}
details {
	display: block;
}
summary {
	display: list-item;
}
[contenteditable]:focus {
	outline: auto;
}
table {
	border-color: inherit;
	border-collapse: collapse;
}
caption {
	text-align: left;
}
td,
th {
	vertical-align: top;
	padding: 0;
}
th {
	text-align: left;
	font-weight: bold;
}


/* ============================================ */
/*  Default Setting  */
/* ============================================ */
@font-face {
	font-family: 'Noto Sans JP', sans-serif;
	font-style: normal;
	font-display: swap;
}
:root {
	font-size: 62.5%;
	--white: white;
	--gray: #CCE4C8;
	--black: #264E59;
	--sky: #5BBED5;
	--green: #6EB365;
	--mb: min(1.25vw, 15px);
	--mi: min(1.25vw, 15px);

	--main-width: 1200px;
}
@media screen and (max-width: 767px) {
	:root {
		--main-width: 100%;
		--fs18: min(5vw, 1.8rem);
		--mb: 0.75vw;
		--mi: 4.16vw;
	}
}
* {
	box-sizing: border-box;
}
a {
	--visited: var(--link);
}
a:not([class]) {
	-webkit-text-decoration-skip: ink;
			text-decoration-skip-ink: auto;
	color: currentColor;
}
a:link {
	--text-color: var(--link);
}
a:visited {
	--text-color: var(--visited);
}
:is(a, button) {
	background: var(--bg-color);
	color: var(--text-color);
	text-decoration: none;
}
:is(a, button):not([class]) {
	text-decoration: underline;
}
:is(a, button):focus {
	--bg-color: var(--focus-bg, var(--hover-bg, transparent));
	--text-color: var(--focus, var(--hover));
}
@media (hover: hover) {
	:is(a, button):hover {
		--bg-color: var(--hover-bg, transparent);
		--text-color: var(--hover);
	}
}
ol {
	list-style: decimal;
}
img,
picture,
iframe {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	vertical-align: middle;
}
img {
	outline: 0;
	-o-object-fit: cover;
		object-fit: cover;
}
picture {
	line-height: 0;
	overflow: hidden;
}
:target {
	scroll-margin-block: 5ex;
}
*::before,
*::after {
	content: "";
	display: none;
	box-sizing: border-box;
}
br[sp] {
	display: none;
}
br[pc],
br[pc][sp] {
	display: inline;
}
@media screen and (max-width: 767px) {
	br[pc] {
		display: none;
	}
	br[sp],
	br[pc][sp] {
		display: inline;
	}
}
html {
	-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
			text-size-adjust: none;
	scroll-behavior: smooth;
}
body {
	width: 100%;
	min-width: var(--main-min-width, unset);
	height: 100%;
	min-height: 100svh;
	background-color: var(--bg);
	font-family: 'Zen Old Mincho',
				YuMincho,    /* Macの游明朝 */
				'Yu Mincho', /* Windowsの游明朝 */
				'MS Mincho', /* 游明朝がないWindows（MS PMinchoなら字詰めされる） */
				serif;
	font-size: min(1.41vw, 1.7rem);
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.1ic;
	color: var(--black);
	overflow-x: clip;
	position: relative;
}
@media screen and (max-width: 767px) {
	body {
		font-size: min(4.16vw, 1.5rem);
	}
}

img[src*='logo'] {
	aspect-ratio: 400 / 64;
}
  
.wrap {
	padding-block: calc(var(--mb) * 12);
	width: auto;
	max-width: var(--main-width);
	box-sizing: border-box;
	padding-inline: calc(var(--mi) * 2);
	margin-inline: auto;
}

header h1 {
	height: min(16.66vw, 200px);
	display: flex;
	justify-content: center;
	align-items: center;
}
header h1 img {
	width: min(33.33vw, 400px);
}
header h2 {
	height: min(50vw, 600px);
	overflow: hidden;

	position: relative;
}
header h2 img {
	width: min(166.66vw, 2000px);
	max-width: unset;
	aspect-ratio: 2000 / 600;
	object-fit: contain;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
	header h1 img {
		width: min(60svw, 400px);
	}
	header h2 {
		width: 100%;
		height: 150svw;
	}
	header h2 img {
		width: 100%;
		aspect-ratio: 360 / 540;
		position: static;
		transform: none;
	}
}





section {
	width: 100%;
	overflow: hidden;
	color: var(--color, currentColor);

	position: relative;
}
section h3 {
	width: fit-content;
	margin-bottom: calc(var(--mb) * 6);

	color: var(--title-color, currentColor);
	font-size: min(1.45vw, 1.8rem);
	font-weight: 700;
	letter-spacing: 0.1ic;
	text-align: right;
}
section h3::before {
	content: var(--label-text);
	display: block;

	color: var(--label-color, var(--title-color));
	font-size: min(4.5vw, 5.4rem);
	font-weight: 700;
	letter-spacing: 0.1ic;
}
section .container {
	display: flex;
	flex-flow: row nowrap;
	gap: calc(var(--mb) * 4);
}
@media screen and (max-width: 767px) {
	section h3 {
		margin-bottom: calc(var(--mb) * 10);
		font-size: min(4vw, 1.5rem);
		text-align: center;
	}
	section h3::before {
		font-size: min(10vw, 3.6rem);
		letter-spacing: 0.1ic;
	}
	section .container {
		flex-direction: column;
	}
}




section#message {
	padding-bottom: 0;
}
section#message::after {
	display: block;
	width: max(166.66vw, 2000px);
	height: 450px;
	background: url('../imgs/message-bg.webp') no-repeat bottom center / 100% 100%;

	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 1px);
	z-index: -1;
}
section#message .container {
	padding-bottom: calc(var(--mb) * 32);
	align-items: center;
	position: relative;
}
section#message h3 {
	--label-text: "Message";
	--label-color: var(--sky);
}
section#message img {
	width: min(50vw, 600px);
	aspect-ratio: 600 / 350;

	position: absolute;
	bottom: calc(var(--mb) * 3);
	right: 0;
}
section#message h3 + p {
	padding-left: calc(var(--mb) * 6);
	border-left: 1px solid var(--black);
	line-height: 3.5;
	letter-spacing: 0;
}
p strong {
	padding: calc(var(--mb) * 0.5) var(--mi);
	margin-left: calc(-1 * var(--mi));
	background: var(--green);

	color: var(--white);
	font-size: 125%;
	font-weight: 700;
	letter-spacing: 0.1ic;

	position: relative;
}
p strong::after {
	display: block;
	width: 98%;
	height: 100%;
	background: var(--sky);

	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;

	transform: translate(-50%, -50%) rotate(-1deg);
}
@media screen and (min-width: 721px) {
	section#message h3 {
		margin-right: calc(var(--mb) * 2);
		margin-bottom: 0;
	}
}
@media screen and (max-width: 767px) {
	section#message::after {
		height: 125vw;
	}
	section#message .container {
		gap: 0;
	}
	section#message img {
		margin-top: calc(var(--mb) * 10);
		width: 100%;
		position: static;
	}
	section#message h3 + p {
		padding-left: 0;
		border: 0;
		letter-spacing: 0;
	}
}




section#service {
	color: var(--white);
	background: var(--green);
}
section#service .wrap {
	padding-top: calc(var(--mb) * 8);
}
section#service h3 {
	--color: var(--white);
	--label-text: "Our Service";
	margin-inline: auto;
	text-align: center;
}
section#service .block {
	flex-shrink: 0;
	flex-grow: 1;
	width: 30%;
}
section#service h4 {
	margin-block: calc(var(--mb) * 4) calc(var(--mb) * 3);
	background: var(--sky);

	color: var(--green);
	font-size: min(2.25vw, 2.7rem);
	font-weight: 700;
	text-align: center;

	position: relative;
	z-index: 10;
}
section#service h4::after {
	display: block;
	width: 98%;
	height: 100%;
	background: var(--white);

	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;

	transform: translate(-50%, -50%) rotate(-1deg);
}
section#service p {
	line-height: 2;
	letter-spacing: 0;
}
@media screen and (max-width: 767px) {
	section#service .container {
		gap: calc(var(--mb) * 26);
	}
	section#service .block {
		width: 100%;
	}
	section#service h4 {
		margin-block: calc(var(--mb) * 12) calc(var(--mb) * 10);
		font-size: min(5.83vw, 2.1rem);
	}
}



section#company .wrap {
	padding-top: calc(var(--mb) * 16);
}
section#company::before {
	display: block;
	width: max(166.66vw, 2000px);
	height: min(37.5vw, 450px);
	background: url('../imgs/company-bg.webp') no-repeat bottom center / 100% 100%;

	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -1px);
	z-index: -1;
}
section#company .container {}
section#company h3 {
	--label-text: "Company";
	--label-color: var(--sky);
}

table {
	flex-grow: 1;
}
tr:not(:last-child) {
	border-bottom: 1px solid var(--gray);
}
:is(th, td) {
	padding-block: calc(var(--mb) * 1);
	padding-right: calc(var(--mi) * 2);

	vertical-align: middle;
}
th {
	font-weight: 500;
}
td {
	font-weight: 700;
}

iframe {
	width: min(37.5vw, 450px);
	aspect-ratio: 450 / 650;
}
@media screen and (max-width: 767px) {
	section#company::before {
		height: 40vw;
	}
	section#company .wrap {
		padding-top: calc(var(--mb) * 24);
	}
	section#company h3 {
		margin-inline: auto;
	}
	:is(th, td) {
		padding-block: calc(var(--mb) * 10);
	}
	th {
		width: 40%;
		font-size: min(3.33vw, 1.2rem);
		letter-spacing: 0;
	}
	td {
		padding-right: 0;
	}
	iframe {
		width: 100%;
	}
}


footer {
	--gap: calc(var(--mb) * 3);
	margin-top: min(15vw, 180px);
	padding-block: var(--gap);
	height: min(27.5vw, 330px);
	background: var(--green);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--gap);
	color: var(--white);
	position: relative;
}

footer::before {
	display: block;
	width: max(166.66vw, 2000px);
	height: min(11vw, 132px);
	background: url('../imgs/footer-bg.webp') no-repeat bottom center / 100% 100%;

	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translate(-50%, 1px);
	z-index: -1;
}

footer img {
	width: min(25vw, 300px);
}

@media screen and (max-width: 767px) {
	footer::before {
		width: 100%;
	}
}