@import url(https://fonts.googleapis.com/css2?family=EB+Garamond&family=Noto+Sans+JP:wght@100..900&family=Roboto&display=swap);
body {
  font-family: "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}

.page-template-template-lang {
	margin: 0;
}

html:has(.lang-mobile-menu.is-open) {
	overflow: hidden;
}

@property --color-black {
	syntax: "<color>";
	inherits: false;
	initial-value: #080405;
}

@property --color-white {
	syntax: "<color>";
	inherits: false;
	initial-value: #efefef;
}

@property --color-gray {
	syntax: "<color>";
	inherits: false;
	initial-value: #888988;
}

@property --color-light-gray {
	syntax: "<color>";
	inherits: false;
	initial-value: #c9cbca;
}

@property --color-primary {
	syntax: "<color>";
	inherits: false;
	initial-value: #172e58;
}

@property --color-secondary {
	syntax: "<color>";
	inherits: false;
	initial-value: #b5a08d;
}

@property --color-difference {
	syntax: "<color>";
	inherits: false;
	initial-value: #c9cbca;
}

@property --font-sans {
	syntax: "*";
	inherits: false;
	initial-value: "Noto Sans JP", sans-serif;
}

@property --font-serif {
	syntax: "*";
	inherits: false;
	initial-value: "EB Garamond", serif;
}

@property --font-roboto {
	syntax: "*";
	inherits: false;
	initial-value: "Roboto", sans-serif;
}

@property --icon-arrow-oval {
	syntax: "<url>";
	inherits: false;
	initial-value: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDMxIDE1Ij48ZGVmcz48bWFzayBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgzMXYxNUgweiIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBkPSJNNy4xMDkgOC40MTZoMTYuOTE5TDIxLjQyIDUuODA4Ii8+PC9tYXNrPjwvZGVmcz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjIuODY1IDE0LjgzMUg3LjQxNUE3LjQxNiA3LjQxNiAwIDAgMSA3LjQxNSAwaDE1LjQ1YTcuNDE2IDcuNDE2IDAgMCAxIDAgMTQuODMxIiBtYXNrPSJ1cmwoI2EpIi8+PC9zdmc+);
}

@property --icon-arrow-oval-lg {
	syntax: "<url>";
	inherits: false;
	initial-value: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3OCIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDc4IDE1Ij48ZGVmcz48bWFzayBpZD0iYSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGg3OHYxNUgweiIvPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTE1IDguNDE1aDQ2LjkxOWwtMi42MDgtMi42MDgiLz48L21hc2s+PC9kZWZzPjxwYXRoIGZpbGw9IiNlZmVmZWYiIGQ9Ik03LjQxNSAxNC44M0E3LjQxNSA3LjQxNSAwIDAgMSAwIDcuNDE1IDcuNDE1IDcuNDE1IDAgMCAxIDcuNDE1IDBoNjIuNDAxYTcuNDE1IDcuNDE1IDAgMCAxIDAgMTQuODMiIG1hc2s9InVybCgjYSkiLz48L3N2Zz4=);
}

@property --icon-arrow-line {
	syntax: "<url>";
	inherits: false;
	initial-value: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2OC42MjYiIGhlaWdodD0iMy44MTUiIHZpZXdCb3g9IjAgMCA2OC42MjYgMy44MTUiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIGQ9Ik0uNSAzLjMxNWg2Ni45MTlMNjQuODExLjcwNyIvPjwvc3ZnPg==);
}

@property --icon-arrow-line-sm {
	syntax: "<url>";
	inherits: false;
	initial-value: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2Ni4yNzEiIGhlaWdodD0iNy40ODMiIHZpZXdCb3g9IjAgMCA2Ni4yNzEgNy40ODMiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTEgNi40ODNoNjIuODU4bC01LjA2NC01LjA2OSIvPjwvc3ZnPg==);
}

@property --icon-arrow-triangle {
	syntax: "<url>";
	inherits: false;
	initial-value: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS44MjIiIGhlaWdodD0iNS45MTEiIHZpZXdCb3g9IjAgMCAxMS44MjIgNS45MTEiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTUuOTExIDMuMDc2IDAgMGw1LjkxMSA1LjkxMUwxMS44MjIgMFoiLz48L3N2Zz4=);
}

@property --icon-tab {
	syntax: "<url>";
	inherits: false;
	initial-value: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43NSIgaGVpZ2h0PSI5Ljg1IiB2aWV3Qm94PSIwIDAgMTIuNzUgOS44NSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZGF0YS1uYW1lPSLilqEiPjxwYXRoIGQ9Ik0zLjQwMSAzLjQwMWg4Ljg0OFY5LjM1SDMuNDAxeiIvPjxwYXRoIGQ9Ik0zLjQgNy4xNzVILjVWLjVoOC44NDh2Mi45Ii8+PC9nPjwvc3ZnPg==);
}

@property --icon-clock {
	syntax: "<url>";
	inherits: false;
	initial-value: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSIyMSIgdmlld0JveD0iMCAwIDIxIDIxIj4gPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjEwIiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIvPiA8cGF0aCBkPSJNMTAuNSAzLjc3NHY2LjY2OGg0LjY5MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=);
}

.lang-section {
	background-color: var(--color-primary);
	color: var(--color-secondary);
	margin: 0 !important;
	max-width: 100% !important;
	padding-inline: 22px !important;
	overflow: hidden;

	@media screen and (max-width: 767px) {
		padding-inline: 10px 25px !important;
	}

	&.lang-section--gray {
		background-color: var(--color-gray);
		color: var(--color-white);
	}

	&.lang-section--light-gray {
		background-color: var(--color-light-gray);
		color: var(--color-primary);
	}

	.has-x-large-font-size {
		font-size: 34px !important;
		line-height: 1.3;
		letter-spacing: 0.025em;
		font-family: var(--font-serif);

		@media screen and (max-width: 767px) {
			font-size: 19px !important;
			line-height: 1.26;
		}
	}

	.has-large-font-size {
		font-size: 24px !important;
		line-height: 1.25;
		letter-spacing: 0.075em;
		font-family: var(--font-sans);
		font-weight: 500;

		@media screen and (max-width: 767px) {
			font-size: 13px !important;
			line-height: 1.46;
		}
	}

	.has-small-font-size {
		font-size: 14px !important;
		line-height: 1.7;
		letter-spacing: 0.075em;

		@media screen and (max-width: 767px) {
			font-size: 12px !important;
			line-height: 1.4;
		}
	}
}

.lang-section__inner {
	display: grid !important;
	grid-template-columns: 113px 1fr;
	gap: 30px !important;
	margin-block: 0 !important;

	@media screen and (max-width: 767px) {
		gap: 10px !important;
		grid-template-columns: 74px 1fr;
	}
}

.lang-section__title {
	grid-column: 1;

	@media screen and (max-width: 767px) {
		zoom: 0.69;
	}
}

.lang-section__content {
	grid-column: 2;
	max-width: 962px;
	width: 100%;
	margin-inline: auto !important;
	padding-top: 70px !important;

	@media screen and (max-width: 767px) {
		padding-top: 50px !important;
	}

	.wp-block-group__inner-container {
		> * {
			margin-block: 0;
		}
	}
}

.lang-hero {
	background-color: var(--color-light-gray);
	color: var(--color-black);
	margin: 0 !important;
	max-width: 100% !important;
	padding: 130px 22px 116px 22px !important;
	font-family: var(--font-serif);

	@media screen and (max-width: 767px) {
		padding: 88px 15px 56px 15px !important;
	}
}

.lang-hero__inner {
	display: grid !important;
	grid-template-columns: 113px 1fr;
	gap: 30px !important;
	margin-block: 0 !important;

	@media screen and (max-width: 767px) {
		gap: 10px !important;
		grid-template-columns: 65px 1fr;
	}
}

.lang-hero__subtitle {
	grid-column: 1;
	padding-top: 20px;

	@media screen and (max-width: 767px) {
		width: 21px;
		padding-top: 10px;
	}

	figure {
		margin: 0;
	}
}

.lang-hero__textarea {
	grid-column: 2;
	max-width: 962px;
	width: 100%;
	margin-inline: auto !important;
}

.lang-hero__title {
	font-size: 120px;
	letter-spacing: 0.025em;
	margin: 0;
	font-weight: 400;
	line-height: 1;

	@media screen and (max-width: 767px) {
		font-size: 43px;
	}
}

.lang-hero__desc {
	font-size: 14px;
	letter-spacing: 0.025em;
	line-height: 1.3;
	margin: 10px 0 0;

	@media screen and (max-width: 767px) {
		font-size: 12px;
		line-height: 1.25;
	}
}

.lang-mainvisual {
	background-color: var(--color-light-gray);
	color: var(--color-black);
	margin: 0 !important;
	max-width: 100% !important;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 168px;
}

.lang-mainvisual__textarea {
	padding: 0 22px;
	gap: 18px;
	align-items: flex-start;
	margin-bottom: -60px;
	position: relative;
	z-index: 1;

	@media screen and (max-width: 767px) {
		margin-bottom: -6px;
	}
}

.lang-mainvisual__title {
	@media screen and (max-width: 767px) {
		width: 21px;
	}
	figure {
		margin-bottom: 0;
	}
}

.lang-mainvisual__desc {
	font-family: var(--font-serif);
	font-size: 14px;
	line-height: 1.2857;
	letter-spacing: 0.025em;

	@media screen and (max-width: 767px) {
		font-size: 12px;
	}
}

.lang-mainvisual__image {
	display: block;
	width: 100%;
	margin: 0;
	height: calc((509 / 785) * 100vh);

	@media screen and (max-width: 767px) {
		height: calc((877 / 1300) * 100vh);
	}

	img {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}
}

.lang-index-presence {
	padding-block: 100px 150px !important;

	@media screen and (max-width: 767px) {
		padding-block: 76px 100px !important;
	}

	p {
		margin-bottom: 40px !important;

		@media screen and (max-width: 767px) {
			margin-bottom: 25px !important;
		}
	}
}

.lang-index-service {
	padding-block: 100px 150px !important;

	@media screen and (max-width: 767px) {
		padding-block: 76px 100px !important;
	}
}

.lang-index-service__cols {
	margin-top: 55px !important;
	gap: 15px 36px !important;

	@media screen and (max-width: 767px) {
		margin-top: 25px !important;
		flex-direction: column !important;
	}

	.wp-block-column {
		@media screen and (max-width: 767px) {
			flex-basis: 0 !important;
		}
	}

	p {
		margin-bottom: 50px !important;
		margin-top: 0 !important;
		@media screen and (max-width: 767px) {
			margin-bottom: 28px !important;
		}
	}
}

.lang-index-projects {
	padding-block: 100px 150px !important;

	@media screen and (max-width: 767px) {
		padding-block: 76px 100px !important;
	}
}

.lang-index-projects__list {
	margin-bottom: 80px !important;
  gap: 30px!important;

	@media screen and (max-width: 767px) {
		margin-bottom: 50px !important;
	}
  
  .wp-block-columns {
    gap: 30px 38px!important;
  }
}

.lang-presence {
	padding-block: 150px !important;

	@media screen and (max-width: 767px) {
		padding-block: 76px 100px !important;
	}

	.has-small-font-size {
		margin-top: 20px !important;

		@media screen and (max-width: 767px) {
			margin-top: 15px !important;
		}

		+ .has-large-font-size {
			margin-top: 80px !important;

			@media screen and (max-width: 767px) {
				margin-top: 45px !important;
			}
		}
	}

	.lang-section__content {
		.wp-block-image {
			margin-top: 48px !important;

			@media screen and (max-width: 767px) {
				margin-top: 25px !important;
				width: calc(84px + 100%);
				margin-left: -84px;
			}
		}
	}
}

.lang-key-strengths {
	padding-block: 150px !important;

	@media screen and (max-width: 767px) {
		padding-block: 76px 100px !important;
	}
}

.lang-service {
	padding-block: 150px !important;

	@media screen and (max-width: 767px) {
		padding-block: 76px 100px !important;
	}
}

.lang-service__cols {
	justify-content: space-between !important;
	margin-block: 10px 55px !important;
	padding-right: 25px;
	gap: 0 20px !important;

	@media screen and (max-width: 767px) {
		padding-right: 0;
		flex-direction: column !important;
	}

	.wp-block-column {
		@media screen and (max-width: 767px) {
			display: contents !important;
		}
	}

	&:last-child {
		margin-bottom: 0 !important;
	}

	.has-large-font-size {
		margin: 0 0 20px !important;

		@media screen and (max-width: 767px) {
			order: 1;
		}
	}

	.wp-block-image {
		margin: 0 0 20px !important;

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

	.has-small-font-size {
		@media screen and (max-width: 767px) {
			order: 3;
		}
	}

	ul {
		padding-left: 0;
		margin: 0;
		font-size: 12px;
		line-height: 1.4;
		list-style-position: inside;
		@media screen and (max-width: 767px) {
			order: 4;
		}
	}

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

.lang-service__note {
	font-size: 10px;
	line-height: 1.4;
	margin-top: 25px;
}

.lang-projects {
	padding-block: 150px !important;
	padding-inline: 25px !important;
	@media screen and (max-width: 767px) {
		padding-block: 76px 100px !important;
	}

	.wp-block-button.is-style-border-lg {
		margin-bottom: 40px;
	}

	.lang-projects__inner {
		max-width: 1100px !important;
		margin-inline: auto;
	}
}

.lang-projects__list {
	gap: 80px!important;
	margin-bottom: 80px !important;

	@media screen and (max-width: 767px) {
		gap: 50px!important;
	}

  .wp-block-columns {
    gap: 80px 20px!important;
    @media screen and (max-width: 767px) {
      gap: 50px 20px!important;
    }
  }
}

.lang-company {
	padding-block: 150px !important;

	@media screen and (max-width: 767px) {
		padding-block: 76px !important;
	}
}

.lang-company__content {
	+ .lang-company__content {
		margin-top: 100px !important;

		@media screen and (max-width: 767px) {
			margin-top: 50px !important;
		}
	}
}

.lang-company__message {
	.has-small-font-size {
		margin-top: 20px !important;
	}
}

.lang-company__info {
	max-width: 800px !important;
	align-items: flex-start !important;

	@media screen and (max-width: 767px) {
		display: grid !important;
		gap: 20px 15px !important;
		grid-template-columns: auto 1fr;
	}

	> .wp-block-column {
		display: grid !important;
		gap: 20px 15px !important;
		grid-template-columns: auto 1fr;
	}

	.wp-block-column {
		@media screen and (max-width: 767px) {
			display: contents !important;
		}
	}
}

.lang-company__cols {
	grid-column: 1 / -1;
	display: grid !important;
	grid-template-columns: subgrid;
	gap: 0 15px !important;

	p {
		letter-spacing: 0.075em;
		font-size: 14px;
		line-height: 1.5;

		&:first-child {
			font-size: 12px;

			@media screen and (max-width: 767px) {
				max-width: 52px;
			}
		}

		&:last-child {
			position: relative;
			padding-left: 15px;

			&::before {
				content: "";
				display: block;
				width: 1px;
				height: 1em;
				background-color: currentColor;
				position: absolute;
				left: 0;
				top: calc((1lh - 1em) / 2);
			}
		}
	}
}

.lang-company__bord {
	max-width: 704px !important;
	align-items: flex-start !important;

	@media screen and (max-width: 767px) {
		display: grid !important;
		gap: 20px 15px !important;
		grid-template-columns: auto 1fr;
	}

	> .wp-block-column:first-child,
	.wp-block-column .wp-block-column {
		@media screen and (min-width: 768px) {
			display: grid !important;
			gap: 20px 15px !important;
			grid-template-columns: auto 1fr;
		}
	}

	.wp-block-column {
		@media screen and (max-width: 767px) {
			display: contents !important;
		}

		.wp-block-columns {
			@media screen and (max-width: 767px) {
				display: contents !important;
			}
		}
	}
}

.lang-company {
	.lang-company__info,
	.lang-company__bord {
		margin-left: 0 !important;
	}
}

.lang-company__access {
	@media screen and (max-width: 767px) {
		flex-direction: column !important;
	}
	p {
		margin-block: 0 !important;

		+ p {
			margin-top: 8px !important;

			@media screen and (max-width: 767px) {
				margin-top: 15px !important;
			}
		}
	}
}

.lang-company__map {
	width: calc(643 / 1355 * 100vw) !important;
	max-width: 644px !important;
	flex: 0 0 auto !important;
	margin-right: clamp(-8.125rem, 19.889rem - 32.81vw, -1.563rem) !important;

	@media screen and (max-width: 767px) {
		margin-right: -22px;
		width: calc(100% + 22px) !important;
		flex: 0 0 auto !important;
	}

	iframe {
		width: 100% !important;
		aspect-ratio: 644 / 340;

		@media screen and (max-width: 767px) {
			aspect-ratio: 560 / 446;
		}
	}
}

.lang-group {
	padding-top: 50px !important;
  padding-bottom: 150px !important;
	@media screen and (max-width: 767px) {
		padding-top: 26px !important;
		padding-bottom: 76px !important;
	}
}

.lang-group__content {
	padding-top: 100px !important;

	@media screen and (max-width: 767px) {
		padding-top: 50px !important;
	}
}

.lang-group__table {
	border-top: 1px solid currentColor;
	padding: 30px 20px;
	gap: 10px !important;
	justify-content: space-between;

	@media screen and (max-width: 767px) {
		padding: 30px 10px;
    gap: 6px !important;
	}

	&:last-of-type {
		border-bottom: 1px solid currentColor;
	}

	.wp-block-column {
		> * {
			margin-block: 0 !important;
		}
	}

	p {
		font-size: 12px !important;
		line-height: 1.8333;
		letter-spacing: 0.075em;
		font-family: var(--font-sans);

		@media screen and (max-width: 767px) {
			font-size: 12px !important;
			line-height: 1.5;
		}
	}

	.wp-block-image {
		@media screen and (max-width: 767px) {
			zoom: 0.7;
		}
	}

  .wp-block-buttons {
    gap: 28px;

  }
}

@charset "UTF-8";