/* --------------------------------------------------
  Variables
-------------------------------------------------- */

:root {

  /* Base Unit */
  --base: 8px;
  --leading-trim: calc((1em - 1lh) / 2);

  /* Content Width */
  --contentBaseWidth: 1362px;
	--contentInlinePadding-sm: calc(var(--base) * 5);
  --contentInlinePadding: calc(var(--base) * 9);

  --contentMaxWidth: var(--contentBaseWidth);

	/*  Wide Content Width */
	--wideContentBaseWidth: 1440px;
	--wideContentMaxWidth: var(--wideContentBaseWidth);

  /* Layout */
  --headerHeight: 100px;

  /* Spacing */
  --sp-1x: var(--base);
  --sp-2x: calc(var(--base) * 2);
  --sp-3x: calc(var(--base) * 3);
  --sp-4x: calc(var(--base) * 4);
  --sp-5x: calc(var(--base) * 5);
  --sp-6x: calc(var(--base) * 6);
  --sp-7x: calc(var(--base) * 7);
  --sp-8x: calc(var(--base) * 8);
  --sp-9x: calc(var(--base) * 9);
  --sp-10x: calc(var(--base) * 10);
  --sp-11x: calc(var(--base) * 11);
  --sp-12x: calc(var(--base) * 12);
  --sp-13x: calc(var(--base) * 13);
  --sp-14x: calc(var(--base) * 14);
  --sp-15x: calc(var(--base) * 15);
  --sp-16x: calc(var(--base) * 16);
  --sp-17x: calc(var(--base) * 17);
  --sp-18x: calc(var(--base) * 18);
  --sp-19x: calc(var(--base) * 19);
  --sp-20x: calc(var(--base) * 20);
  --sp-21x: calc(var(--base) * 21);
  --sp-22x: calc(var(--base) * 22);
  --sp-23x: calc(var(--base) * 23);
  --sp-24x: calc(var(--base) * 24);
  --sp-25x: calc(var(--base) * 25);
  --sp-26x: calc(var(--base) * 26);
  --sp-27x: calc(var(--base) * 27);
  --sp-28x: calc(var(--base) * 28);
  --sp-29x: calc(var(--base) * 29);
  --sp-30x: calc(var(--base) * 30);

  /* Font Size */
  --fs-10: 0.625rem;
	--fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-26: 1.625rem;
  --fs-28: 1.75rem;
  --fs-30: 1.875rem;
  --fs-32: 2rem;
  --fs-34: 2.125rem;
  --fs-36: 2.25rem;
  --fs-38: 2.375rem;
  --fs-40: 2.5rem;
  --fs-42: 2.625rem;
  --fs-44: 2.75rem;
  --fs-46: 2.875rem;
  --fs-48: 3rem;
  --fs-50: 3.125rem;
  --fs-52: 3.25rem;
  --fs-54: 3.375rem;
  --fs-56: 3.5rem;
  --fs-58: 3.625rem;
  --fs-60: 3.75rem;
  --fs-62: 3.875rem;
  --fs-64: 4rem;
  --fs-66: 4.125rem;
  --fs-68: 4.25rem;
  --fs-70: 4.375rem;
  --fs-72: 4.5rem;
  --fs-74: 4.625rem;
  --fs-76: 4.75rem;
  --fs-78: 4.875rem;
  --fs-80: 5rem;
	--fs-82: 5.125rem;
	--fs-84: 5.25rem;
	--fs-86: 5.375rem;
	--fs-88: 5.5rem;
	--fs-90: 5.625rem;
	--fs-92: 5.75rem;
	--fs-94: 5.875rem;
	--fs-96: 6rem;
	--fs-98: 6.125rem;
  --fs-100: 6.25rem;

	/* font-weight */
	--fw-thin: 100;
	--fw-extralight: 200;
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-extrabold: 800;
	--fw-black: 900;

  /* Color */
	--primary-color: #324B55;
  --base-text: #333333;
	--required-color: #90322A;

}
@media screen and (min-width:769px) {
  .sp-content {
    display: none !important;
  }
}
@media screen and (max-width: 1080px) {
  :root {
    --contentInlinePadding: calc(var(--base) * 6);
  }
}
@media screen and (max-width: 768px) {
  :root {
    --contentInlinePadding: calc(var(--base) * 4);
  }
	.pc-content {
    display: none !important;
  }
}
@media screen and (max-width: 540px) {
  :root {
    --contentInlinePadding: 3.8%;
		--contentInlinePadding-sm: 3%;
  }
}


/* --------------------------------------------------
  Base
-------------------------------------------------- */

body {
	padding-top: var(--headerHeight);
  font-family: 'Noto Sans JP', 'Noto Sans', sans-serif;
  color: var(--base-text);
  font-size: var(--fs-16);
	line-height: 1.75;
	font-weight: var(--fw-regular);
	scroll-margin-top: var(--headerHeight);
}
main a {
  color: currentColor;
  transition: color 0.4s;
	text-decoration: underline;
}
main a:hover {
	color: var(--primary-color);
	opacity: 1;
}
a.external-link::after {
	content: '';
	display: inline-block;
	aspect-ratio: 13.34 / 13.33;
	width: 0.9528em;
	margin-left: 0.35em;
	background-image: url('/assets/img/common/icon-external.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
a.text-link {
	color: var(--primary-color);
	text-decoration: underline;
	transition: opacity 0.4s;
}
a.text-link:hover {
	opacity: 0.6;
}
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}
@media screen and (max-width: 540px) {
	body {
		font-size: var(--fs-14);
	}
}
@media screen and (min-width: 769px) {
  .sp-only {
    display: none;
  }
}
@media screen and (min-width: 541px) {
  .sp-only-sm {
    display: none;
  }
}


/* --------------------------------------------------
  Header
-------------------------------------------------- */
.header {
	width: 100%;
	background-color: var(--primary-color);
	font-family: "Noto Serif JP", serif;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
}
.header__nav-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(50, 75, 85, 0.846);
	z-index: -1;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	visibility: hidden;
}
.header:has(.header__nav.is-open) .header__nav-overlay {
	opacity: 1;
	visibility: visible;
}
.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-2x);
	max-width: var(--wideContentMaxWidth);
	margin-inline: auto;
	padding: var(--sp-3x) var(--contentInlinePadding-sm);
}
.header__logo {
	max-width: 180px;	
}
.header__site-name {
	/* display: flex;
	justify-content: center; */
	color: #fff;
	font-size: var(--fs-24);
	font-weight: var(--fw-extralight);
	line-height: 1.4;
	text-align: center;
	word-break: auto-phrase;
}
.header__site-name-suffix  {
	display: inline-block;
}

/* header__menu-btn */
.header__menu-btn-wrapper {
	display: flex;
	justify-content: flex-end;
	/* width: 180px; */
}
.header__menu-btn {
	position: relative;
	width: 40px;
	height: 24px;
	padding: 0;
	border: none;
	cursor: pointer;
}
.header__menu-btn-line {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 1px;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
}
.header__menu-btn-line::before,
.header__menu-btn-line::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	transition: transform 0.3s ease, top 0.3s ease;
}
.header__menu-btn-line::before {
	top: -10px;
}
.header__menu-btn-line::after {
	top: 10px;
}
.header__menu-btn.is-open .header__menu-btn-line {
	background: transparent;
}
.header__menu-btn.is-open .header__menu-btn-line::before {
	top: 0;
	transform: rotate(45deg);
}
.header__menu-btn.is-open .header__menu-btn-line::after {
	top: 0;
	transform: rotate(-45deg);
}

/* header__nav */
.header__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(100vh - var(--headerHeight));
	/* background-color: rgba(50, 75, 85, 0.846); */
	position: fixed;
	top: var(--headerHeight);
	left: 0;
	z-index: 100;
	overflow: auto;

	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	visibility: hidden;
}
.header__nav.is-open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}
.header__nav-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--sp-7x);
	width: 100%;;
	max-width: var(--contentMaxWidth);
	height: calc(100vh - var(--headerHeight));
	min-height: fit-content;
	max-height: 680px;
	margin: auto;
	padding: 0 var(--contentInlinePadding) var(--sp-7x);
}
.header__nav a {
	color: #fff;
	font-weight: var(--fw-regular);
}
.header__nav a:hover {
	text-decoration: underline;
}
.header__nav a.external-link::after {
	background-image: url('/assets/img/common/icon-external_white.svg');
}
.header__nav-columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
	padding-top: var(--sp-7x);
}
.header__nav-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-6x);
	padding: var(--sp-5x) var(--sp-6x);
	position: relative;
}
.header__nav-column::before,
.header__nav-column::after {
	content: '';
	display: block;
	width: 1px;
	height: 100%;
	background-color: #fff;
	position: absolute;
	top: 0;
}
.header__nav-column::before {
	left: 0;
	transform: translateX(-50%);
}
.header__nav-column::after {
	right: 0;
	transform: translateX(50%);
}
.header__nav-column-heading {
	color: #fff;
	font-size: var(--fs-24);
	font-weight: var(--fw-regular);
	line-height: 1.2;
	text-align: center;
}
.header__nav-column-groups {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-2x);
	width: 100%;
}
.header__nav-list a {
	display: inline-block;
	margin-block: var(--leading-trim);
	font-size: var(--fs-18);
	line-height: 1.4;
}
.header__nav-list > li {
	line-height: 1;
}
.header__nav-list > li + li {
	margin-top: var(--sp-5x);
}
.header__nav-footer-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	column-rule: 1px solid #fff;
	gap: var(--sp-2x) var(--sp-6x);
	padding-top: var(--sp-7x);
	/* padding-block: var(--sp-7x); */
	border-top: 1px solid #fff;
}
.header__nav-footer-links li {
	line-height: 1.2;
}
.header__nav-footer-links li a {
	display: inline-block;
	margin-block: var(--leading-trim);
	font-size: var(--fs-16);
	line-height: 1.4;
}
.header__nav-footer-links li a:hover {
	text-decoration: underline;
}
@media screen and (max-width: 1080px) {
	.header__site-name {
		font-size: var(--fs-20);
	}
	.header__logo {
		max-width: 140px;
	}
	.header__menu-btn-wrapper {
		/* width: 140px; */
	}
	.header__nav-column {
		gap: var(--sp-5x);
	}
	.header__nav-column-heading {
		font-size: var(--fs-22);
	}
	.header__nav-list > li + li {
		margin-top: var(--sp-4x);
	}
}
@media screen and (max-width: 840px) {
	.header__nav-column-groups {
		justify-content: space-around;
	}
}
@media screen and (max-width: 768px) {
	.header__site-name {
		font-size: var(--fs-16);
	}
	.header__logo {
		max-width: 120px;
	}
	/* .header__menu-btn-wrapper {
		width: 120px;
	} */
	.header__nav-inner {
		gap: var(--sp-4x);
		padding-bottom: var(--sp-6x);
	}
	.header__nav-columns {
		padding-top: var(--sp-8x);
	}
	.header__nav-column {
		padding: var(--sp-4x) var(--sp-3x) var(--sp-3x);
		border-top: 1px solid #fff;
		gap: var(--sp-4x);
	}
	.header__nav-column::before,
	.header__nav-column::after {
		display: none;
	}
	.header__nav-column-heading {
		font-size: var(--fs-20);
	}
	.header__nav-list > li + li {
		margin-top: var(--sp-3x);
	}
	.header__nav-list a {
		font-size: var(--fs-16);
	}
	.header__nav-footer-links {
		padding-top: var(--sp-6x);
		/* padding-block: var(--sp-6x); */
		gap: var(--sp-2x) var(--sp-4x);
	}
	.header__nav-footer-links + .header__nav-footer-links {
		border-top: 0;
		padding-top: 0;
	}
	.header__nav-footer-links li a {
		font-size: var(--fs-14);
	}
}
@media screen and (max-width:540px) {
	.header__inner {
		flex-wrap: wrap;
		padding-block: var(--sp-2x) calc(var(--sp-1x) * 1.5);
	}
	.header__logo {
		max-width: 90px;
	}
	.header__site-name {
		order: 3;
		width: 100%;
		font-size: var(--fs-12);
	}
	.header__menu-btn-wrapper {
		/* width: auto; */
	}
	.header__menu-btn {
		width: 24px;
		height: 16px;
	}
	.header__menu-btn-line::before {
    top: -6px;
	}
	.header__menu-btn-line::after {
    top: 6px;
	}
	.header__nav-column {
		gap: var(--sp-3x);
	}
	.header__nav-column-heading {
		font-size: var(--fs-18);
	}
	.header__nav-list > li + li {
		margin-top: var(--sp-2x);
	}
	.header__nav-list a {
		font-size: var(--fs-14);
	}
	.header__nav-footer-links li a {
		font-size: var(--fs-12);
	}
}

/* --------------------------------------------------
  Footer
-------------------------------------------------- */
.footer {
	background-color: #ECF0F2;
	overflow: hidden;
	position: relative;
}
.footer a {
	color: #333;
}
.footer a:hover {
	text-decoration: underline;
}
footer::before {
	content: '';
	display: block;
	aspect-ratio: 600/965.64;
	width: 600px;
	background-color: #DEE6EA;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.footer__inner {
	max-width: var(--contentMaxWidth);
	margin-inline: auto;
	padding: var(--sp-5x) var(--contentInlinePadding);
	position: relative;
	z-index: 1;
}
.footer__logo {
	max-width: 280px;
	margin-inline: auto;
	padding-top: var(--sp-5x);
}
.footer__logo + * {
	margin-top: var(--sp-5x);
}
.footer__operator {
	display: flex;
	justify-content: center;
	font-size: var(--fs-16);
}
 * + .footer__nav-block {
	margin-top: var(--sp-10x);
}
.footer__nav-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sp-1x) var(--sp-4x);
	font-family: "Noto Serif JP", serif;
	font-size: var(--fs-16);
}
.footer__policy-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sp-1x) var(--sp-3x);
	margin-top: var(--sp-2x);
	padding-top: var(--sp-2x);
	border-top: 1px solid #324B55;
	font-size: var(--fs-12);
}
@media screen and (max-width: 768px) {
	.footer::before {
		width: 400px;
	}
	.footer__logo {
		padding-top: var(--sp-3x);
	}
	* + .footer__nav-block {
		margin-top: var(--sp-8x);
	}
}
@media screen and (max-width: 540px) {
	.footer::before {
		width: 295px;
	}
	.footer__inner {
		padding-block: var(--sp-4x);
	}
	.footer__logo {
		max-width: 200px;
	}
	.footer__logo + * {
		margin-top: var(--sp-4x);
	}
	.footer__nav-block {
		display: none;
	}
	.footer__operator {
		font-size: var(--fs-12);
	}
}