/* -----------------------------------
 * reset css
 * --------------------------------- */
:where(*, ::before, ::after) {
  box-sizing: border-box;
}

* {
  margin: 0;
	padding: 0;
}

:where(img, video) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(iframe) {
  display: block;
  border: none;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
  text-transform: none;
}

:where(textarea) {
  resize: vertical;
}

:where(button, label, select, summary) {
  cursor: pointer;
}

img {
  max-inline-size: 100%;
  block-size: auto;
}

li {
  list-style: none;
}

a {
  text-decoration: none;

	&:hover {
		opacity: 0.8;
	}
}

button {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	width: auto;
	height: auto;
}

/* -----------------------------------
 * 共通デザイントークン
 * --------------------------------- */
:root {
  /*  フォントサイズ  */
  --font-size--base: clamp(0.9375rem, 0.8264rem + 0.2315vw, 1rem); /* ≒ 15~16px */

  --font-size--sm: calc(var(--font-size--base) * 0.75); /* ≒ ~12px */
  --font-size--md: calc(var(--font-size--base) * 1.125);/* ≒ ~18px */
  --font-size--lg: calc(var(--font-size--base) * 1.25); /* ≒ ~20px */
  --font-size--xl: calc(var(--font-size--base) * 2.5);  /* ≒ ~40px */
  --font-size--2xl: calc(var(--font-size--base) * 5);   /* ≒ ~80px */

	--font--sans: "Noto Sans JP", sans-serif;;

  /*  余白  */
	--space:  0.625rem; /* 10px ~ */

  --space--1: var(--space);
  --space--2: calc(var(--space) * 2); /* 20px */
  --space--3: calc(var(--space) * 3); /* 30px */
  --space--4: calc(var(--space) * 4); /* 40px */
  --space--5: calc(var(--space) * 5); /* 50px */
  --space--6: calc(var(--space) * 6); /* 60px */

  /*  カラートークン  */
  --color--text: #333333;
	--color--primary: #5569B4;
  --color--border: #E5E5E5;
  --color--dotted: #A2A2A2;
	--color--bg: linear-gradient(to right, #EBF6FF, #F6FBFF, #EBF6FF);
	--white: #fff;
	--gray: #999999;

  /*  ボーダー半径  */
  --radius--sm: 4px;
  --radius--md: 8px;
  --radius--lg: 20px;
  --radius--xl: 40px;
  --radius--3lg: 60px;
  --radius--3xl: 120px;
  --radius--full: 9999px;

	 --header-h: 80px;
	 --header-z: 100;

	/* コンテンツサイズ */
	--size--md: 900px;
	--size--lg: 1200px;

	 /* サイトの左右両端につける共通の余白 */
  --space--gutter: var(--space--2);
}

/* -----------------------------------
 * ベーススタイル
 * --------------------------------- */
html {
  font-size: var(--font-base);
	scroll-behavior: smooth;
	scroll-padding-top: 80px;

	@media(width < 768px) {
		scroll-padding-top: 52px;
	}
}

body {
	background: linear-gradient(to right, #ECF6FF, #F6FBFF, #ECF6FF);
  color: var(--color--primary);
  font-size: var(--font-size--base);
	font-family: "Zen Old Mincho", serif;
  line-height: 1.45;
	position: relative;

	@media(width < 768px) {
		/* background-image: url(/img/com/bg-hana_sp.png); */
	}

	&.is-drawer-open {
		overflow: hidden;

		.header {
			background: transparent;
		}

		.header-lead,
		.header-logo {
			opacity: 0.2;
		}
	}
}

main {
	margin-bottom: clamp(3.75rem, -0.6944rem + 9.2593vw, 6.25rem);
}

table {
	border-collapse: collapse;
	width: 100%;
}

input {
	appearance: none;
	background: var(--white);
	border: none;
	font-family: var(--font--sans);
	font-size: var(--font-size--md);
	font-weight: 400;
	padding: 16px;
	width: 100%;
}

::placeholder {
	color: #B5B5B5;
}

/* -----------------------------------
 * 汎用コンポーネントクラス
 * --------------------------------- */
/* 画像ラッパー */
.img-frame {
  overflow: hidden;
}

:where(.img-frame) > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* コンテンツサイズの管理 */
.container {
  padding-inline: var(--space--gutter);
}

/* -----------------------------------
 * ヘッダー
 * --------------------------------- */
.header {
	background: var(--color--bg);
	position: sticky;
	width: 100%;
	top: 0;
	left: 0;
	padding-inline: var(--space--5);
	z-index: var(--header-z);

	@media(width < 768px) {
		padding-inline: var(--space--2);
	}

	.header-inner {
		height: var(--header-h, auto);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-inline: auto;
		max-width: 1328px;
		position: relative;

		@media(width < 768px) {
			--header-h: 52px;
		}
	}

	.header-lead {
		color: var(--color--text);
		font-size: var(--font-size--sm);
		font-weight: 700;

		@media(width < 768px) {
			display: none;
		}
	}

	.header-logo {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			@media(width < 768px) {
				width: 98px;
			}
		}
	}
}

/* -----------------------------------
 * headerメニュー
 * --------------------------------- */
.drawer-trigger {
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 18px;
	position: relative;
	right: 20px;
	margin-left: auto;

	@media(width < 768px) {
		right: 0;
	}

	.line {
		background-color: var(--color--primary);
		display: block;
		width: 100%;
		height: 2px;
		transition: transform 0.3s, opacity 0.3s;
	
		&:nth-child(2) {
			width: 14px;
		}
	}
}

.drawer-trigger[aria-expanded="true"] {
	.drawer-trigger__line {
		&:nth-child(1) {
			transform: translateY(8px) rotate(45deg);
		}

		&:nth-child(2) {
			opacity: 0;
		}

		&:nth-child(3) {
			transform: translateY(-8px) rotate(-45deg);
		}
	}
}

.drawer-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 99;
	display: flex;

	/* 初期状態は非表示 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.drawer-menu--is-open {
  opacity: 1;
  visibility: visible;

	& .drawer-menu__wrapper {
		transform: translateX(0);
	}
}

.drawer-menu__overlay {
  background-color: rgba(85, 105, 180, 0.95);
  cursor: pointer;
  flex: 1;

	@media(width < 768px) {
		display: none;
	}
}

.drawer-menu__wrapper {
  background-color: var(--white);
  padding: 111px 20px 97px;
  width: 45%;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.3s ease;
	overflow-y: auto;
  -webkit-overflow-scrolling: touch;

	@media(width < 768px) {
		padding-top: 67px;
		width: 100%;
	}

	.nav {
		margin-bottom: var(--space--4);
	}

	.nav-menu {
		margin-inline: auto;
		max-width: 320px;

		@media(width < 768px) {
			max-width: 280px;
		}
	}

	.nav-item {
		border-bottom: 1px solid var(--color--border);

		a,
		.nav-toggle {
			color: var(--color--text);
			display: block;
			padding-block: 16px;
			position: relative;
			text-align: left;
			width: 100%;
		}

		.nav-toggle {
			&::before,
			&::after {
				background-color: var(--gray);
				content: "";
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				transition: transform 0.3s ease;
			}

			&::before {
				width: 10px;
				height: 1px;
				right: 0;
			}

			&::after {
				width: 1px;
				height: 10px;
				right: 5px;
			}
		}

		.nav-submenu {
			padding-left: 1em;
			max-height: 0;
			opacity: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
			min-width: max-content;

			a {
				padding-top: 0;
			}
		}

		.nav-single {
			&::after {
				border-top: 1px solid transparent;
				border-left: 1px solid transparent;
				border-right: 1px solid var(--gray);
				border-bottom: 1px solid var(--gray);
				content: "";
				width: 6px;
				height: 6px;
				position: absolute;
				top: 50%;
				right: 5px;
				transform: translateY(-50%) rotate(-45deg);
			}
		}

		&.is-open {
			.nav-toggle::after {
				@media(width < 768px) {
					opacity: 0;
					transform: translateY(-50%) rotate(90deg);
				}
			}

			.nav-submenu {
				max-height: 300px;
				opacity: 1;
			}
		}
	}

	.nav-lead {
		border-bottom: 1px solid var(--color--border);
		font-size: var(--font-size--sm);
		padding-bottom: 8px;
	}

	.sns {
		margin-inline: auto;
		max-width: 320px;

		@media(width < 768px) {
			max-width: 280px;
		}
	}
}

/* -----------------------------------
 * セクション共通スタイル
 * --------------------------------- */
.section-bg {
	background-color: var(--white);
	border-radius: var(--radius--3xl);

	@media(width < 768px) {
		border-radius: var(--radius--3lg);
	}
}

.section-title {
	display: flex;
	align-items: center;
	flex-direction: column;
	font-weight: 400;
	text-align: center;
	position: relative;
	z-index: 1;

	&::before {
		background-image: url(/img/top/grd.svg);
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		width: 309px;
		height: 309px;
		position: absolute;
		top: -60px;
		right: 0;
		transform: translateX(-50%);
		z-index: -1;

		@media(width < 768px) {
			background-image: url(/img/top/grd_sp.svg);
			width: 100%;
			height: 214px;
			right: -30px;
			transform: initial;
		}
	}

	&::after {
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		display: inline-block;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
	}

	& .section-title__sub {
		font-size: clamp(2.25rem, 0.9167rem + 2.7778vw, 3rem);
	}

	& .section-title__main {
		font-size: clamp(2.625rem, 1.0694rem + 3.2407vw, 3.5rem);
	}
}

/* -----------------------------------
 * 下層共通スタイル
 * --------------------------------- */
.lower-main {
	.container {
		margin-inline: auto;
		max-width: 1240px;
	}

	.page-title {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-bottom: clamp(2rem, 1.1111rem + 1.8519vw, 2.5rem);

		.page-title-mian {
			font-size: clamp(1.75rem, 0.4167rem + 2.7778vw, 2.5rem);
			font-weight: 400;
			letter-spacing: .05em;
		}

		.page-title-sub {
			font-size: var(--font-size--md);
			letter-spacing: .03em;
		}
	}

	.page-lead {
		color: var(--color--text);
		font-weight: 700;
		margin-bottom: clamp(2.5rem, -0.1667rem + 5.5556vw, 4rem);
	}
}

/* -----------------------------------
 * WP Rank Math Breadcrumbs
 * --------------------------------- */
.rank-math-breadcrumb {
	margin-top: 84px;

	@media(width < 768px) {
		margin-top: 24px;
	}

	a {
		color: var(--color--primary);
		font-size: var(--font-size--sm);
	}

	span {
		color: #7D7D7D;
		font-size: var(--font-size--sm);
	}
}

/* -----------------------------------
 * card layout
 * --------------------------------- */
.card-grid {
	display: grid;
	justify-content: center;
	margin-inline: auto;

	.card-item,
	.card-link {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		
		@media(width < 768px) {
			margin-inline: auto;
			width: 100%;
		}
	}

	.card-img {
		position: relative;

		img {
			border-radius: var(--radius--lg);
		}
	}

	.card-body {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.card-title {
		color: var(--color--primary);
		font-size: var(--font-size--md);
		margin-bottom: 8px;
	}

	.card-footer {
		display: flex;
		align-items: center;
		gap: 8px;
		font-weight: 400;
	}

	.card-date {
		color: #7D7D7D;
		font-size: var(--font-size--sm);
	}

	.card-category {
		background-color: var(--white);
		border: 1px solid;
		border-radius: var(--radius--lg);
		color: var(--color--primary);
		font-size: .625rem;
		padding: 3px 16px 4px;
	}
}

.card-grid--3cols {
	grid-template-columns: repeat(3, minmax(0, 256px));
  gap: clamp(1.5rem, -1.1667rem + 5.5556vw, 3rem);

	@media(width < 768px) {
		grid-template-columns: 1fr;
	}

	.card-img {
		aspect-ratio: 256 / 170;
	}

	.card-body {
		padding-top: 8px;
	}

	.card-title {
		color: var(--color--text);
		font-family: var(--font--sans);
		font-size: var(--font-size--base);
		min-height: 46px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;

		@media(width < 768px) {
			min-height: 0;
		}
	}
}

.card-grid--4cols {
	grid-template-columns: repeat(4, minmax(0, 282px));
	gap: 56px 24px;

	@media(width < 992px) {
		grid-template-columns: repeat(3, minmax(0, 282px));
	}

	@media(width < 768px) {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.card-img {
		aspect-ratio: 282 / 188;
		position: relative;
	}

	.card-body {
		padding-top: 16px;
	}
}

/* -----------------------------------
 * News セクション
 * --------------------------------- */
.news {
	padding-block: 80px;

	@media(width < 768px) {
		padding-block: 34px 40px;
	}

	.news-inner {
		margin-inline: auto;
		width: min(100% - 40px, 1168px);
	}

	.news-title {
		font-size: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
		font-weight: 400;
		margin-bottom: clamp(1rem, -1.6667rem + 5.5556vw, 2.5rem);
	}

	.card-grid--4cols {
	  gap: clamp(1.5rem, -1.1667rem + 5.5556vw, 3rem);

		@media(width < 768px) {
			gap: 16px 20px;
			grid-template-columns: 1fr 1fr;
		}

		.card-img {
			aspect-ratio: 256 / 170;
		}

		.card-body {
			padding-top: 8px;
		}

		.card-title {
			color: var(--color--text);
			font-family: var(--font--sans);
			font-size: var(--font-size--base);
			min-height: 46px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;

			@media(width < 768px) {
				min-height: 0;
			}
		}
	}

	.news-btn {
		margin-top: clamp(1.5rem, -3.6111rem + 10.6481vw, 4.375rem);

		a {
			background-color: var(--color--primary);
			border-radius: var(--radius--md);
			color: var(--white);
			display: grid;
			place-items: center;
			margin-inline: auto;
			width: 280px;
			height: 48px;
		}
	}
}

/* -----------------------------------
 * ページネーション
 * --------------------------------- */
.navigation {
	margin-top: clamp(1.5rem, -0.2778rem + 3.7037vw, 2.5rem);
}

.nav-links {
  display: flex;
  align-items: center;

	@media(width < 862px) {
		justify-content: center;
	}

	.page-numbers {
		color: var(--color--text);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font--sans);
		font-size: var(--font-size--md);
		width: 48px;
		height: 48px;
		font-weight: 400;

		@media(width < 862px) {
			width: 40px;
			height: 40px;
		}

		&:hover {
			background: var(--color--text);
			border-radius: var(--radius--full);
			color: var(--white);
			opacity: 1;
		}

		&.current {
			background: var(--color--text);
			border-radius: var(--radius--full);
			color: var(--white);
			cursor: default;
		}

		&.dots {
			background: none;
			text-align: center;
			width: 32px;
		}
	}
}

/* -----------------------------------
 * コラムランキング
 * --------------------------------- */
.area-grid {
	display: grid;
	gap: clamp(1.875rem, -1.0139rem + 6.0185vw, 3.5rem);
	margin-inline: auto;
	grid-template-areas: "main aside";
	grid-template-columns: minmax(0, 1fr) 280px;

	@media(width < 862px) {
		gap: 0;
		grid-template-columns: 1fr;
	}

	.main {
		grid-area: main;
	}

	.aside {
		grid-area: aside;

		@media(width < 862px) {
			display: none;
		}
	}

	/* ranking */
	.aside-title {
		display: flex;
		align-items: center;
		flex-direction: column;
		gap: 6px;
		margin-bottom: var(--space--2);
	}

	.aside-title__en {
		font-size: var(--font-size--sm);
	}

	.aside-title__ja {
		font-size: var(--font-size--md);
	}

	.aside-list > * + * {
		margin-top: 4px;
	}

	.aside-item {
		&:nth-child(1) {
			& .aside-link::after {
				content: "01";
			}
		}

		&:nth-child(2) {
			& .aside-link::after {
				content: "02";
			}
		}

		&:nth-child(3) {
			& .aside-link::after {
				content: "03";
			}
		}

		&:nth-child(4) {
			& .aside-link::after {
				content: "04";
			}
		}

		&:nth-child(5) {
			& .aside-link::after {
				content: "05";
			}
		}
	}

	.aside-link {
		background-color: var(--white);
		border-radius: var(--radius--lg);
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px;
		position: relative;

		&::after {
			color: rgba(120 105 60 / 0.12);
			font-size: var(--font-size--2xl);
			font-weight: 400;
			letter-spacing: .03em;
			position: absolute;
			top: 45%;
			right: 0;
			transform: translateY(-50%);
		}
	}

	.aside-img {
		aspect-ratio: 64 / 64;
		flex-shrink: 0;

		img {
			border-radius: var(--radius--md);
			width: 64px;
			height: 64px;
		}
	}

	.aside-heading {
		color: var(--color--text);
		font-family: var(--font--sans);
		font-size: 0.825rem;
		font-weight: 700;
	}

	/* category */
	.category {
		margin-block: 32px;
	}

	.category-title {
		font-size: var(--font-size--md);
		letter-spacing: .03em;
		margin-bottom: 16px;
		text-align: center;
	}

	.category-list {
		background-color: var(--white);
		border-radius: var(--radius--lg);
		padding: 8px 24px;

		.nav-item {
			border-bottom: 1px solid var(--color--border);

			&:last-child {
				border-bottom: none;
			}

			a,
			.nav-toggle {
				color: var(--color--text);
				display: block;
				padding-block: 16px;
				position: relative;
				text-align: left;
				width: 100%;
				
				@media(width < 768px) {
				}
			}

			.nav-toggle {
				&::before,
				&::after {
					background-color: var(--gray);
					content: "";
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					transition: transform 0.3s ease;
				}

				&::before {
					width: 10px;
					height: 1px;
					right: 0;
				}

				&::after {
					width: 1px;
					height: 10px;
					right: 5px;
				}
			}

			.nav-submenu {
				padding-left: 1em;
				max-height: 0;
				opacity: 0;
				overflow: hidden;
				transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
				min-width: max-content;

				a {
					padding-top: 0;
				}
			}
			
			.nav-single {
				&::after {
					border-top: 1px solid transparent;
					border-left: 1px solid transparent;
					border-right: 1px solid var(--gray);
					border-bottom: 1px solid var(--gray);
					content: "";
					width: 6px;
					height: 6px;
					position: absolute;
					top: 50%;
					right: 5px;
					transform: translateY(-50%) rotate(-45deg);
				}
			}

			&.is-open {
				.nav-toggle::after {
					@media(width < 768px) {
						opacity: 0;
						transform: translateY(-50%) rotate(90deg);
					}
				}

				.nav-submenu {
					max-height: 300px;
					opacity: 1;
				}
			}
		}
	}
}

/* -----------------------------------
 * Custom Search Form
 * --------------------------------- */
.search-form {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;

	.search-input {
		border-radius: 30px;
		color: var(--color--text);
		font-size: var(--font-size--base);
	}

	.search-submit {
		background-color: var(--color--primary);
		border-radius: var(--radius--full);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 55px;
		height: 55px;
		position: absolute;
		right: 0;
		top: 0;
		transition: opacity 0.3s ease;

		&:hover {
			opacity: .8;
		}
	}

	.search-icon {
		border: 1px solid var(--white);
		border-radius: var(--radius--full);
		display: inline-block;
		position: relative;
		width: 14px;
		height: 14px;

		&::after {
			content: "";
			position: absolute;
			right: -3px;
			bottom: 0;
			width: 4px;
			height: 1px;
			background-color: var(--white);
			transform: rotate(45deg);
			transform-origin: left top;
		}
	}
}

/* -----------------------------------
 * RECOMMEND
 * --------------------------------- */
.recommend {
	border-top: 1px dotted var(--color--dotted);
	margin-top: var(--space--4);
	padding-top: var(--space--4);

	@media(width < 862px) {
		order: 3;
	}

	@media(width < 768px) {
		padding-top: 32px;
	}

	.recommend-title {
		display: flex;
		align-items: baseline;
		gap: 12px;
		margin-bottom: 32px;
	}

	.recommend-title-main {
		font-size: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
	}

	.recommend-title-sub {
		font-size: var(--font-size--sm);
	}

	.card-grid--4cols {
		gap: clamp(1.5rem, -1.1667rem + 5.5556vw, 3rem);

		@media(width < 768px) {
			gap: 16px 20px;
			grid-template-columns: 1fr 1fr;
		}
	}

	.card-img {
		aspect-ratio: 270 / 180;
	}

	.card-body {
		padding-top: 8px;
	}

	.card-title {
		color: var(--color--text);
		font-family: var(--font--sans);
		font-size: var(--font-size--base);
		min-height: 46px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;

		@media(width < 768px) {
			min-height: 0;
		}
	}
}


/* -----------------------------------
 * SNSアイコン
 * --------------------------------- */
.sns {
	display: flex;
	gap: 40px;
}

/* -----------------------------------
 * フッター
 * --------------------------------- */
.footer {
	background-color: var(--white);

	@media(width < 768px) {
		margin-bottom: 70px;
	}

	.footer-inner {
		margin-inline: auto;
		padding-block: 48px;
		width: min(100% - 40px, 582px);
	}

	.footer-logo {
		margin-bottom: 24px;

		img {
			margin-inline: auto;
		}
	}

	.footer-lead {
		color: var(--color--text);
		font-size: var(--font-size--sm);
		line-height: 1.5;
		margin-bottom: 24px;
		text-align: center;
	}

	& .sns {
		justify-content: center;
		padding-bottom: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
	}

	& .nav {
		border-top: 1px solid var(--color--border);
		display: flex;
		gap:  clamp(2.5rem, -1.9444rem + 9.2593vw, 5rem);
		justify-content: center;
		padding-top: 32px;

		@media(width < 768px) {
			align-items: start;
			flex-direction: column;
			gap: 0;
			padding-top: 0;
		}
	}

	& .nav-menu {
		@media(width < 768px) {
			width: 100%;
		}
	}

	& .nav-item {
		flex: 1 0 auto;

		@media(width < 768px) {
			border-bottom: 1px solid var(--color--border);
		}


		& + * {
			margin-top: 24px;

			@media(width < 768px) {
				margin-top: 0;
			}
		}

		&.is-open {
			& .nav__toggle::after {
				@media(width < 768px) {
					opacity: 0;
					transform: translateY(-50%) rotate(90deg);
				}
			}

			.nav-submenu {
				max-height: 300px;
				opacity: 1;
			}
		}

		a,
		.nav-toggle {
			color: var(--color--text);
			display: block;
			font-size: var(--font-size--md);
			font-weight: 700;
			position: relative;
			white-space: nowrap;
			
			@media(width < 768px) {
				font-weight: 400;
				padding-block: 16px;
				text-align: left;
				width: 100%;
			}
		}

		.nav-toggle {
			@media(width < 768px) {
				&::before,
				&::after {
					background-color: var(--gray);
					content: "";
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					transition: transform 0.3s ease;
				}
	
				&::before {
					width: 10px;
					height: 1px;
					right: 0;
				}
	
				&::after {
					width: 1px;
					height: 10px;
					right: 5px;
				}
			}
		}
	}

	.nav-single {
		@media(width < 768px) {
			&::after {
				border-top: 1px solid transparent;
				border-left: 1px solid transparent;
				border-right: 1px solid var(--gray);
				border-bottom: 1px solid var(--gray);
				content: "";
				width: 6px;
				height: 6px;
				position: absolute;
				top: 50%;
				right: 5px;
				transform: translateY(-50%) rotate(-45deg);
			}
		}
	}

	.nav-submenu {
		@media(width < 768px) {
			max-height: 0;
			opacity: 0;
			overflow: hidden;
			transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
			min-width: max-content;
		}

		li {
			margin-top: 16px;

			@media(width < 768px) {
				margin-top: 0;
			}
		}

		a {
			font-weight: 400;
		}
	}

	.footer-bottom {
		background-color: #F3F3F3;
		padding-block: 24px;
		text-align: center;

	}
	
	.footer-nav {
		ul {
			display: flex;
			justify-content: center;
		}

		li {
			position: relative;

			&:not(:last-child)::after {
				content: "|";
				margin-inline: 16px;
			}
		}

		a {
			color: var(--color--text);
			font-family: var(--font--sans);
			font-size: var(--font-size--sm);
		}
	}

	.footer-copyright {
		color: var(--color--text);
		font-size: var(--font-size--sm);
		margin-top: 12px;
	}
}

/* -----------------------------------
 * 追従バナー
 * --------------------------------- */
.fixedBanner {
	position: fixed;
	right: 20px;
	bottom: 150px;
	z-index: 90;

	@media(width < 768px) {
		padding-inline: var(--space--1);
		right: initial;
		bottom: var(--space--1);
	}

	& img {
		max-width: 370px;

		@media(width < 768px) {
			margin-inline: auto;
			width: 100%;
		}
	}
}

/* -----------------------------------
 * ページ上部に戻るボタン
 * --------------------------------- */
.page-top {
	position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99;
  
  background-color: var(--color--text);
  border: none;
	border-radius: var(--radius--md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;

  /* 初期状態（最初は隠す） */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;

	@media(width < 768px) {
		bottom: 70px;
	}
}

.page-top--is-show {
  opacity: 1;
  visibility: visible;
}

.page-top__arrow {
  background-color: var(--white);
  display: block;
  position: relative;
  width: 2px;
  height: 11px;

	&::after {
		border-top: 2px solid var(--white);
		border-left: 2px solid var(--white);
		content: "";
		width: 8px;
		height: 8px;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
	}
}

/* -----------------------------------
 * ４０４
 * --------------------------------- */
.error {
	margin-top: clamp(2.5rem, -1.9444rem + 9.2593vw, 5rem);
	margin-inline: auto;
	margin-bottom: clamp(3.75rem, -0.6944rem + 9.2593vw, 6.25rem);;
	max-width: 864px;
	text-align: center;
}

.error-title {
	border-bottom: 1px solid var(--color--border);
	font-size: clamp(1.75rem, 0.4167rem + 2.7778vw, 2.5rem);
	font-weight: 400;
	margin-bottom: clamp(1.5rem, -0.2778rem + 3.7037vw, 2.5rem);
	padding-bottom: clamp(1.5rem, -0.2778rem + 3.7037vw, 2.5rem);
}

.error-desc {
	font-size: var(--font-size--lg);
	margin-bottom: clamp(1.5rem, 0.6111rem + 1.8519vw, 2rem);
}

.error-text {
	font-size: clamp(0.875rem, 0.7639rem + 0.2315vw, 0.9375rem);
	line-height: 1.7;
	margin-bottom: clamp(2.5rem, -0.1667rem + 5.5556vw, 4rem);

	@media(width < 768px) {
		text-align: left;
	}
}

.error-actions {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: 16px;

	a {
		background-color: var(--color--primary);
		border-radius: var(--radius--md);
		color: var(--white);
		display: grid;
		place-items: center;
		margin-inline: auto;
		width: 280px;
		height: 48px;
	}
}


/* -----------------------------------
 * ユーティリティクラス
 * --------------------------------- */
.display-none {
  display: none;
}

.display-pc {
	@media(width < 768px) {
		display: none !important;
	}
}

.display-sp {
  display: none;

	@media(width < 768px) {
		display: block !important;
	}
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mt-4 {
  margin-top: var(--space--4);
}

.mt-6 {
  margin-top: var(--space--6);
}

.mt-8 {
  margin-top: var(--space--8);
}