@charset "UTF-8";

:root {
	--color-body-1: #000;
	--color-theme-1: #0b2244;
	--color-theme-2: #72c9f3;
	--color-gray-1: #d6d6d6;
	--color-gray-2: #707070;

	--font-family: "Noto Sans JP", sans-serif;
	--mincho: "Shippori Mincho", serif;
	--en: "EB Garamond", serif;
	--serif: "Noto Serif", serif;
	--container: 1100px;
	--container-xl: 1200px;
	--container-xxl: 1440px;
	--padding: 15px;

	--stack: 80px;
}

::after,
::before,
* {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: var(--font-size);
}

.mincho {
	font-family: var(--mincho);
}

.en {
	font-family: var(--en);
}

.is-style-group-1,
.stack {
	padding-top: var(--stack);
	padding-bottom: var(--stack);
}

.editor-styles-wrapper {
	--fs: 15;
	font-family: var(--font-family);
	font-optical-sizing: auto;
}

:where(.editor-styles-wrapper .wp-block-group) {
	border: 1px dashed gray;
}

.wp-block-heading {
	font-family: var(--mincho);
}

h2:where(.wp-block-heading):where(
		.is-style-default,
		:not([class*="is-style"])
	) {
	--fs: 30;
	font-size: var(--font-size);
	margin-bottom: 50px;
}

h3:where(.wp-block-heading):where(
		.is-style-default,
		:not([class*="is-style"])
	) {
	--fs: 23;
	font-size: var(--font-size);
	line-height: calc(35 / 23);
	margin-bottom: 25px;
}

.is-style-group-1 .wp-block-columns.is-layout-flex {
	column-gap: 80px;
}

@media (max-width: 991px) {
	.is-style-group-1 .wp-block-columns.is-layout-flex {
		display: block;
	}
}

.wp-block-image {
	margin-bottom: 1rem;
}

.wp-block-table {
	max-width: 840px;
	margin: 0 auto var(--stack);
}

.wp-block-table :is(th, td) {
	border-right: 0;
	border-left: 0;
	border-top: 1px solid var(--color-gray-1);
	border-bottom: 1px solid var(--color-gray-1);
	vertical-align: top;
	padding: 1rem;
}

.wp-block-table th {
	font-weight: 400;
}

@media (min-width: 768px) {
	.wp-block-table :is(th, td):first-child {
		width: 150px;
	}
}

@media (max-width: 767px) {
	.wp-block-table :is(th, td) {
		padding-left: 0;
		/* padding: .5rem .5rem .5rem 0; */
	}
	.wp-block-table :is(th, td):first-child {
		width: 100px;
	}
}

.is-style-table-1 table {
	--fs: 18;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	font-family: var(--mincho);
	line-height: 1.5;
}

.is-style-table-2 :is(tbody, thead, tr),
.is-style-table-1 :is(tbody, thead, tr) {
	display: contents;
}

.is-style-table-1 :is(th, td) {
	border: 0;
	padding: 0 30px;
}

.is-style-table-1 tr > :first-child {
	--fs: 32;
	align-items: center;
	display: flex;
	font-family: var(--en);
	line-height: 1.2;
	width: unset;
	padding: 50px 28px 50px 0;
	position: relative;
}

.is-style-table-1 tr > :first-child::before {
	background-color: var(--color-body-1);
	content: "";
	display: block;
	width: 1px;
	bottom: 0;
	right: 6.5px;
	position: absolute;
	top: 0;
	z-index: -1;
}

.is-style-table-1 tr > :first-child::after {
	aspect-ratio: 1;
	background-color: var(--color-theme-2);
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: auto;
	width: 13px;
	right: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.is-style-table-1 tr > :first-child + * {
	align-items: center;
	display: flex;
	position: relative;
	padding: 0 0 0 130px;
}

.is-style-table-1 tr > :first-child + *::before {
	background-color: var(--color-body-1);
	content: "";
	display: block;
	height: 1px;
	width: 100px;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.is-style-table-1 tr > :first-child + *::after {
	background-color: var(--color-body-1);
	content: "";
	height: 1px;
	width: 15px;
	left: 85px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(30deg);
	transform-origin: right center;
}

.is-style-table-2 {
	max-width: unset;
	margin: 0 0 2rem;
}

.is-style-table-2 table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 1px;
	line-height: 1.5;
}

.is-style-table-2 :is(th, td) {
	border: 0;
	padding: 0;
}

.is-style-table-2 tr > :first-child {
	--fs: 20;
	align-items: center;
	background-color: var(--color-theme-1);
	border-radius: 50px;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	font-family: var(--mincho);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.2;
	height: 50px;
	width: 100%;
	max-width: 400px;
	grid-column: 1/-1;
	justify-self: center;
}

.is-style-table-2 tr > :first-child + * {
	grid-column: 2;
	padding: 10px 0 10px 50px;
	position: relative;
	min-height: 50px;
}

.is-style-table-2 tr > :first-child + *::before {
	background-color: var(--color-body-1);
	content: "";
	display: block;
	width: 1px;
	bottom: 0;
	left: -1px;
	position: absolute;
	top: 0;
}

.is-style-table-2 tr > :first-child + *::after {
	background-color: var(--color-body-1);
	content: "";
	display: block;
	height: 10px;
	width: 1px;
	bottom: 0;
	left: -1px;
	position: absolute;
	transform: rotate(30deg);
	transform-origin: center bottom;
}

.is-style-table-2 tr:last-child > :first-child + *::after,
.is-style-table-2 tr:last-child > :first-child + *::before {
	content: none;
}

.is-style-table-2 tr:last-child > :first-child + :empty {
	display: none;
}

.is-style-list-1 {
	font-family: var(--mincho);
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 40px;
	gap: 10px 40px;
}

.is-style-list-1 li a {
	text-decoration: none;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.is-style-list-1 li a::before {
	aspect-ratio: 1;
	background-color: #fff;
	border: 1px solid var(--color-gray-2);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #fff;
	content: "";
	color: transparent;
	display: inline-block;
	transition: 0.2s;
	height: auto;
	width: 14px;
}

.is-style-list-1 li a:hover {
	text-decoration: underline;
	opacity: 1;
}

.is-style-list-1 li a:hover::before {
	background-color: var(--color-theme-2);
}

.is-style-p-1 {
	--fs: 18;
	align-items: center;
	background-color: var(--color-theme-1);
	border-radius: 50px;
	color: #fff;
	display: inline-flex;
	font-family: var(--mincho);
	letter-spacing: 0.1em;
	justify-content: center;
	padding: 0 20px;
	min-width: min(130px, 100%);
	line-height: calc(40 / 18);
}

.is-style-media-1 {
	gap: 20px 60px;
}

.is-style-media-1 .wp-block-media-text__content {
	padding: 0;
}

.is-style-group-2 {
	--container: 840px;
	background-color: rgba(255, 255, 255, 0.65);
	border-radius: 30px;
	padding: var(--stack) 0;
	margin-bottom: var(--stack);
}

.is-style-group-2 > .wp-block-group__inner-container {
	max-width: calc(var(--container) + var(--padding) + var(--padding));
	padding-right: var(--padding);
	padding-left: var(--padding);
	margin-right: auto;
	margin-left: auto;
}

.is-style-list-2 {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--stack);
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); */
	grid-template-columns: repeat(4, 1fr);
}

.is-style-list-2 li {
	display: contents;
}

.is-style-list-2 li + li a {
	margin-left: -1px;
}

.is-style-list-2 a {
	border: 1px solid currentColor;
	display: flex;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	padding: 10px;
	position: relative;
}

.is-style-list-2 a.active {
	background-color: #fff;
}

.is-style-list-2 a.active::after {
	aspect-ratio: 12/7;
	background-color: var(--color-theme-2);
	content: "";
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	display: inline-block;
	height: auto;
	width: 20px;
	left: 50%;
	position: absolute;
	top: calc(100% + (var(--stack) / 2));
	transform: translate(-50%, -50%);
}

.is-style-grid-1 + .is-style-grid-1 {
	margin-top: 20px;
}

.is-style-grid-1 > p:first-child {
	--fs: 120;
	font-size: var(--font-size);
	font-family: var(--en);
	color: #0A2243;
	line-height: 1;
	min-width: 80px;
	opacity: 0.7;
}

.is-style-grid-1 h3 {
	--fs: 28;
	letter-spacing: 0.05em;
	margin-bottom: 5px;
}

.is-style-grid-1 h3 + p {
	line-height: 1.5;
	border-bottom: 1px solid #707070;
	padding-bottom: 10px;
	margin-bottom: 0;
}

@media (max-width: 991px) {
	:root {
		--stack: 40px;
	}
	.is-style-media-1 {
		grid-template-columns: 1fr !important;
	}
	.is-style-media-1 > * {
		grid-area: auto !important;
	}
	.is-style-media-1 .wp-block-media-text__media {
		justify-self: center;
		order: -1;
	}
	.is-style-table-1 table {
		--fs: 16;
	}
	.is-style-table-1 tr > :first-child {
		--fs: 24;
		padding: 25px 28px 25px 0;
	}
	.is-style-table-1 tr > :first-child + * {
		padding-left: 65px;
	}
	.is-style-table-1 tr > :first-child + *::before {
		width: 50px;
	}
	.is-style-table-1 tr > :first-child + *::after {
		left: 35px;
	}
}

@media(max-width: 767px) {
	.is-style-grid-1 + .is-style-grid-1 {
		margin-top: 30px;
	} 
	.is-style-grid-1 > p:first-child {
		--fs: 80;
		min-width: 55px;
	}
	.is-style-grid-1 h3 {
		--fs: 18;
	}
	.is-style-grid-1 h3 + p {
		--fs: 14;
	}
}