@charset "UTF-8";
/*
Theme Name: 日本海自動車学校
Version: 1.0.0
*/

html[lang="ja"] {
  margin-top: 0!important;
}

html {
	scroll-behavior: smooth;
}

::after,
::before,
:where(b, strong, span, i, em) {
	--font-size: calc((var(--fs) / 16) * 1rem);
	font-size: inherit;
}

body {
	color: var(--color-body-1);
	font-family: var(--gothic);
}

@media(max-width: 767px) {
	body {
		--fs: 15;
	}
	body.noscroll {
		overflow: hidden;
		touch-action: pinch-zoom;
	}
}

img {
	max-width: 100%;
	height: auto;
}

button img,
a img {
	transition: opacity var(--ts);
}

a {
	color: var(--color-body-1);
	text-decoration: none;
	transition: var(--ts);
}

a:hover {
	opacity: var(--op);
}

/* @media (min-width: 768px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
} */

p {
	line-height: 1.6;
	.small {
		--fs: 14;
	}
}

small {
	--fs: 14;
	line-height: 1.6;
}

.container {
	padding-inline: var(--padding);
	max-width: calc(var(--container) + (var(--padding) * 2));
}

.stack {
	padding-block: var(--stack);
}

/*		header		*/

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 96px;
	background: #FFF;
	padding: 5px 32px;
}

.header-title {
	display: contents;
}

.header-logo {
	line-height: 1px;
}

.header-nav {
	padding-right: 70px;
}

.header-list {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	.header-item {
		display: block;
		line-height: 1;
		border-radius: 16px;
		transition: ease-out 0.2s;
		padding: 16px 24px;
		&:hover {
			background: var(--color-theme-1-4);
			opacity: 1;
			transition: ease-out 0.1s;
		}
	}
	.header-tel {
		display: grid;
		align-items: center;
		grid-template-columns: 17px 1fr;
		gap: 4px;
		--fs: 24;
		font-family: var(--en);
		font-weight: bold;
		color: var(--color-theme-1);
		&::before {
			content: "";
			display: block;
			width: 17px;
			height: 17px;
			-webkit-mask: no-repeat center center / contain;
			mask: no-repeat center center / contain;
			-webkit-mask-image: url(img/icon-tel.svg);
			mask-image: url(img/icon-tel.svg);
			background-color: var(--color-theme-1);
		}
		&:hover{
			opacity: 1;
			background: transparent;
			&::before {
				animation: tel_call .25s steps(1, end) infinite;
			}
		}
	}
}

@keyframes tel_call {
	0% {
		transform: rotate(0);
	}
	50% {
		transform: rotate(25deg);
	}
	100% {
		transform: rotate(0);
	}
}

.drawer-toggle {
	display: grid;
	place-items: center;
	gap: 6px;
	--fs: 12;
	font-size: var(--font-size);
	font-weight: bold;
	line-height: 1;
	color: var(--color-body-1);
	outline: none;
	border: none;
	background: transparent;
	-webkit-text-stroke: 4px #FFF;
	text-stroke: 4px #FFF;
	paint-order: stroke fill;
	padding: 0;
	/* text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF,
				-2px 2px 0 #FFF, 2px -2px 0 #FFF,
				0px 2px 0 #FFF,  0 2px 0 #FFF,
				-2px 0 0 #FFF, 2px 0 0 #FFF; */
	position: fixed;
	top: 24px;
	right: 32px;
	z-index: 950;
}

.drawer-icon {
	position: relative;
	width: 48px;
	height: 40px;
	border: 1px solid var(--color-body-1);
	border-radius: 24px;
	background: #FFF;
	box-shadow: 3px 3px 0 0 var(--color-body-1);
	span {
		position: absolute;
		display: block;
		height: 2px;
		background: var(--color-body-1);
		border-radius: 3px;
		top: 50%;
		left: 50%;
		transition: ease 0.5s;
		&:nth-child(1) {
			width: 14px;
			transform: translate(calc(-50% - 4px),calc(-50% - 8px));
		}
		&:nth-child(2) {
			width: 22px;
			transform: translate(-50%,-50%);
		}
		&:nth-child(3) {
			width: 14px;
			transform: translate(calc(-50% + 4px),calc(-50% + 8px));
		}
	}
}

body.noscroll .drawer-icon span {
	&:nth-child(1) {
		width: 16px;
		transform: translate(-50%,-50%) rotate(45deg);
	}
	&:nth-child(2) {
		opacity: 0;
		visibility: hidden;
	}
	&:nth-child(3) {
		width: 16px;
		transform: translate(-50%,-50%) rotate(-45deg);
	}
}

.drawer-nav {
	max-width: 520px;
	width: 100%;
	background: var(--color-theme-2);
	padding: 56px 48px;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: scroll;
	transform: translateX(100%);
	transition: ease 0.8s;
	z-index: 900;
}

body.noscroll .drawer-nav {
	transform: none;
}

.drawer-list {
	display: grid;
	gap: 20px;
	list-style: none;
	max-inline-size: max-content;
	padding: 0;
	margin-bottom: 0;
}

.drawer-item {
	display: block;
	--fs: 16;
	font-size: var(--font-size);
	line-height: 1;
	padding: 8px 14px;
	position: relative;
	&.text-stroke {
		--fs: 32;
		font-weight: bold;
		color: #FFF;
		-webkit-text-stroke: 4px #000;
		paint-order: stroke fill;
		padding-block: 14px;
	}
	&::before {
		content: "";
		width: 10px;
		height: 9px;
		-webkit-mask: no-repeat center center / contain;
		mask: no-repeat center center / contain;
		-webkit-mask-image: url(img/icon-arrow-right.svg);
		mask-image: url(img/icon-arrow-right.svg);
		background-color: var(--color-body-1);
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
}

.drawer-sub-list {
	list-style: none;
	padding-left: 14px;
	margin-bottom: 0;
}

.drawer-sub-item {
	display: block;
	--fs: 16;
	padding-block: 8px;
}

@media(max-width: 1299px) {
	.header {
		padding-inline: 24px;
	}
	.header-logo img {
		width: 240px;
	}
	.header-nav {
		padding-right: 50px;
	}
	.header-list {
		.header-item {
			border-radius: 12px;
			padding: 12px;
			&:not(.header-tel) {
				--fs: 14;
			}
		}
		.header-tel {
			--fs: 20;
		}
	}
	.drawer-toggle {
		right: 24px;
	}
}

@media(max-width: 991px) {
	.header {
		min-height: 84px;
	}
	.header-logo img {
		width: 293px;
	}
	.drawer-toggle {
		top: 17px;
	}
}

@media(max-width: 767px) {
	.header {
		min-height: 74px;
	}
	.header-logo img {
		width: 209px;
	}
	.drawer-toggle {
		top: 12px;
		right: 20px;
		gap: 4px;
	}
	.drawer-icon {
		width: 40px;
		height: 33px;
		box-shadow: 2px 2px 0 var(--color-body-1);
		span {
			&:nth-child(1) {
				width: 10px;
				transform: translate(calc(-50% - 3px),calc(-50% - 6px));
			}
			&:nth-child(2) {
				width: 16px;
			}
			&:nth-child(3) {
				width: 10px;
				transform: translate(calc(-50% + 3px),calc(-50% + 6px));
			}
		}
	}
	body.noscroll .drawer-icon span {
		&:nth-child(1),
		&:nth-child(3) {
			width: 14px;
		}
	}
	.drawer-nav {
		max-width: 100vw;
		width: 100vw;
		padding-inline: 23px;
	}
	.drawer-list {
		gap: 16px;
	}
	.drawer-item {
		&.text-stroke {
			--fs: 28;
			padding: 12px 14px;
		}
	}
}

.fixed-menu {
	display: grid;
	place-items: end;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin: 0;
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 960;
}

.fixed-item {
	display: grid;
}

.fixed-link {
	display: flex;
	place-items: center;
	gap: 8px;
	min-width: 68px;
	font-weight: bold;
	letter-spacing: 0.16em;
	line-height: 1.1;
	writing-mode: vertical-rl;
	border-radius: 16px 0 0 16px;
	padding: 24px 16px;
	transition: 0.2s ease-out;
	&::before {
		content: "";
		display: block;
		width: 36px;
		aspect-ratio: 1 / 1;
		-webkit-mask: no-repeat center center / contain;
		mask: no-repeat center center / contain;
		transition: ease 0.2s;
	}
	&.icon-car {
		background: var(--color-theme-2);
		&::before {
			-webkit-mask-image: url(img/icon-car.svg);
			mask-image: url(img/icon-car.svg);
			background-color: var(--color-body-1);
		}
	}
	&.icon-license {
		color: #FFF;
		background: var(--color-theme-1);
		&::before {
			-webkit-mask-image: url(img/icon-license.svg);
			mask-image: url(img/icon-license.svg);
			background-color: #FFF;
		}
	}
	&:hover {
		opacity: 1;
		padding-right: 34px;
	}
}

body.noscroll .fixed-link {
	&.icon-car {
		color: #FFF;
		background: var(--color-theme-1-3);	
		&::before {
			background-color: #FFF;
		}
	}
}

@media(max-width: 991px) {
	.fixed-menu {
		width: 100vw;
		grid-template-columns: repeat(3,1fr);
		gap: 0;
		top: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background: #FFF;
		z-index: 500;
	}
	.fixed-item {
		width: 100%;
	}
	.fixed-link {
		--fs: 15;
		justify-content: center;
		letter-spacing: 0;
		font-weight: normal;
		width: 100%;
		gap: 4px;
		min-width: 0;
		min-height: 56px;
		writing-mode: horizontal-tb;
		border-radius: 0;
		padding: 8px;
		&:hover {
			opacity: var(--op);
			padding-right: 8px;
		}
		&::before {
			width: 20px;
		}
		&.icon-tel {
			color: #FFF;
			background: var(--color-theme-1);
			&::before {
				width: 14px;
				-webkit-mask-image: url(img/icon-tel.svg);
				mask-image: url(img/icon-tel.svg);
				background-color: #FFF
			}
		}
		&.icon-car {
			color: #FFF;
			background: var(--color-theme-1-3);
			&::before {
				background: #FFF;
			}
		}
		&.icon-license {
			color: var(--color-body-1);
			background: var(--color-theme-2);
			&::before {
				background: var(--color-body-1);
			}
		}
	}
}

/*		フッター		*/
.footer {
	background: var(--color-theme-1-2);
	position: relative;
	padding-bottom: 48px;
	margin-top: -40px;
	overflow: hidden;
}

.page-id-7456 .footer {
	margin-top: 0;
}

.text-slide {
	overflow-x: clip;
	margin-bottom: 80px;
	.splide__track {
		overflow: visible;
	}
	.splide__slide p {
		--fs: 200;
		font-size: var(--font-size);
		font-family: var(--en);
		font-weight: bold;
		line-height: 0.7;
		letter-spacing: -0.03em;
		color: var(--color-theme-1-1);
		white-space: nowrap;
		margin-bottom: 0;
	}
}

.footer-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 34px;
	border-bottom: 1px solid var(--color-body-1);
	padding-bottom: 24px;
	margin-bottom: 24px;
	address {
		--fs: 12;
		font-size: var(--font-size);
		line-height: 1.2;
		margin-bottom: 0;
	}
}

.footer-logo {
	display: block;
	margin-bottom: 8px;
}

.tel-btn {
	display: grid;
	place-items: center;
	gap: 2px;
	max-inline-size: max-content;
	--fs: 12;
	line-height: 1.2;
	color: #FFF;
	background: var(--color-theme-1);
	border-radius: 999px;
	padding: 12px 32px;
	span {
		display: flex;
		align-items: center;
		gap: 4px;
		--fs: 31;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1;
		&::before {
			content: "";
            display: block;
            width: 20px;
            height: 20px;
            -webkit-mask: no-repeat center center / contain;
            mask: no-repeat center center / contain;
            -webkit-mask-image: url(img/icon-tel.svg);
            mask-image: url(img/icon-tel.svg);
            background-color: #FFF;
		}
	}
	&:hover {
		opacity: 1;
		span::before {
			animation: tel_call .25s steps(1, end) infinite;
		}
	}
}

.footer-nav {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	align-items: start;
	gap: 32px;
	border-bottom: 1px solid var(--color-body-1);
	padding-bottom: 24px;
	margin-bottom: 24px;
}

.footer-list {
	display: grid;
	gap: 24px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.footer-item {
	display: flex;
	align-items: baseline;
	gap: 4px;
	--fs: 16;
	line-height: 1;
	font-weight: bold;
	&::before {
		content: "";
		display: block;
        width: 10px;
        height: 9px;
        -webkit-mask: no-repeat center center / contain;
        mask: no-repeat center center / contain;
        -webkit-mask-image: url(img/icon-arrow-right.svg);
        mask-image: url(img/icon-arrow-right.svg);
        background-color: var(--color-body-1);
	}
	&.small {
		--fs: 14;
		font-size: var(--font-size);
		font-weight: normal;
	}
	li {
		display: contents;
	}
}

.footer-sub-list {
	display: grid;
	gap: 15px;
	list-style: none;
	padding-left: 16px;
	margin-top: 12px;
	margin-bottom: 0;
	li {
		display: contents;
	}
}

.footer-sub-item {
	--fs: 14;
	font-size: var(--font-size);
	line-height: 1;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 48px;
}

.footer-external-list {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 16px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	a {
		display: block;
		max-width: 202px;
		width: 100%;
		background: #FFF;
		border: 1px solid var(--color-body-1);
		border-radius: 16px;
		box-shadow: 4px 4px 0 var(--color-body-1);
		padding-inline: 12px;
		transition: ease-out 0.1s;
		position: relative;
		top: 0;
		left: 0;
		&:hover {
			opacity: 1;
			top: 4px;
			left: 4px;
			box-shadow: none;
		}
	}
}

.footer-sns-list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 24px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.copyright {
	--fs: 11;
	line-height: 1;
	margin-bottom: 0;
}

@media(max-width: 991px) {
	.footer {
		padding-bottom: calc(48px + 56px);
	}
	.footer-top {
		justify-content: center;
	}
	.footer-nav {
		grid-template-columns: repeat(2,1fr);
	}
	.footer-bottom {
		flex-direction: column;
		align-items: start;
	}
	.footer-external-list {
		grid-template-columns: repeat(auto-fill,150px);
		width: 100%;
	}
}

@media(max-width: 767px) {
	.footer {
		margin-top: -12px;
	}
	.page-id-7456 .footer {
		margin-top: 0;
	}
	.text-slide {
		margin-bottom: 48px;
		.splide__slide p {
			--fs: 100;
		}
	}
	.footer-top {
		gap: 32px;	
	}
}

@media(max-width: 575px) {
	.footer-nav {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.footer-external-list {
		grid-template-columns: repeat(2,1fr);
		gap: 8px;
	}
	.footer-sns-list {
		gap: 24px;
	}
}

/*		共通		*/
.top-section-title {
	display: grid;
	gap: 8px;
	margin-bottom: 32px;
	@media(min-width: 992px) {
		&.text-vertical {
			writing-mode: vertical-rl;
			gap: 4px;
		}
	}
}

.top-section-title-ja {
	--fs: 40;
	font-size: var(--font-size);
	font-weight: bold;
	line-height: 1;
	color: #FFF;
	-webkit-text-stroke: 4px var(--color-body-1);
	text-stroke: 4px var(--color-body-1);
	paint-order: stroke fill;
	margin: 0;
}

@media(min-width: 992px) {
	.text-vertical .top-section-title-ja {
		order: 1;
	}
}

.top-section-title-en {
	--fs: 15px;
	font-weight: bold;
	font-family: var(--en);
	line-height: 1;
	color: var(--color-theme-1);
	margin: 0;
}

@media(max-width: 991px) {

}

@media(max-width: 767px) {
	.top-section-title {
		margin-bottom: 16px;
	}
	.top-section-title-ja {
		--fs: 32;
	}
}

/*		hero		*/
.hero {
	background: url(img/hero-bg.jpg) center center / cover;
	padding-top: 85px;
}

.hero-title {
	margin-bottom: 0;
}

.hero-move {
	display: grid;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.hero-move-item {
	grid-area: 1 / 1;
	max-inline-size: max-content;
	margin-inline: auto;
	p {
		display: grid;
		gap: 30px;
		grid-template-columns: 47px auto 47px;
		--fs: 46;
		line-height: 1.2;
		font-size: var(--font-size);
		font-weight: bold;
		text-align: center;
		color: #FFF;
		-webkit-text-stroke: 4px #000;
		text-stroke: 4px #000;
        paint-order: stroke fill;
		span {
			padding-block: 5px;
		}
		&::before,
		&::after {
			content: "";
			width: 47px;
			height: 100%;
		}
		&::before {
			background: linear-gradient(
				to bottom left, 
				transparent calc(50% - 1.5px), 
				#FFF calc(50% - 1.5px), 
				#FFF calc(50% + 1.5px), 
				transparent calc(50% + 1.5px)
			);
		}
		&::after {
			background: linear-gradient(
				to bottom right, 
				transparent calc(50% - 1.5px), 
				#FFF calc(50% - 1.5px), 
				#FFF calc(50% + 1.5px), 
				transparent calc(50% + 1.5px)
			);
		}
	}
	&:nth-child(1) {
		animation: itemUpDown 10.2s infinite ease-out;
	}
	&:nth-child(2) {
		transform: translateY(100%);
		animation: itemUpDown 10.2s infinite 5.1s ease-out;
	}
}

@keyframes itemUpDown {
  0%      { transform: translateY(100%); }
  0.98%   { transform: translateY(0); }    /* 0.1s: 表示完了 */
  49.02%  { transform: translateY(0); }    /* 5.0s: フェードアウト開始 */
  50%     { transform: translateY(100%); } /* 5.1s: 消去完了 */
  100%    { transform: translateY(100%); }
}

.hero-move-image {
	display: grid;
	justify-content: center;
	img {
		grid-area: 1 / 1;
		animation: image01Show 10.2s infinite steps(1);
		&:nth-child(2) {
			opacity: 0;
			animation: image02Show 10.2s infinite steps(1);
		}
	}
}

.hero-move-item:nth-child(2) {
	.hero-move-image img {
		animation-delay: 5.1s;
	}
}

@keyframes image01Show {
	0%      { opacity: 1; } /* 最初は表示 */
	10.78%  { opacity: 0; } /* 1.1s：消える */
	20.59%  { opacity: 1; } /* 2.1s：戻る */
	30.39%  { opacity: 0; } /* 3.1s：消える */
	40.20%  { opacity: 1; } /* 4.1s：戻る */
	50%, 100% { opacity: 0; }
}

@keyframes image02Show {
	0%      { opacity: 0; } /* 最初は非表示 */
	10.78%  { opacity: 1; } /* 1.1s：現れる */
	20.59%  { opacity: 0; } /* 2.1s：消える */
	30.39%  { opacity: 1; } /* 3.1s：現れる */
	40.20%  { opacity: 0; } /* 4.1s：消える */
	50%, 100% { opacity: 0; }
}

@media(max-width: 991px) {
	.hero {
		padding-top: 110px;
	}
	.hero-title {
		margin-bottom: 24px;
	}
}

@media(max-width: 575px) {
	.hero {
		overflow: hidden;
		padding-top: 43px;
	}
	.hero-title {
		margin-bottom: 15px;
	}
	.hero-move {
		overflow: visible;
	}
	.hero-move-item {
		p {
			--fs: 30;
			grid-template-columns: 28px auto 28px;
			gap: 0;
			max-width: 315px;
			margin-inline: auto;
			margin-bottom: 0;
			span {
				padding: 0;
			}
			&::before,
			&::after {
				width: 28px;
			}
		}
	}
	.hero-move-image {
		min-width: 420px;
	}
	.hero-move-item:nth-child(2) .hero-move-image img:nth-child(2) {
		position: relative;
		left: 5%;
	}
}

/*		キャンペーン情報		*/
.top-topics {
	position: relative;
	--container: 975px;
	background: url(img/bg-pattern01.png) top left / 90px;
	padding-top: 80px;
	overflow: hidden;
}

.top-topics-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 16px;
	margin-bottom: 16px;
	h2 {
		--fs: 16;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1;
		color: #FFF;
		background: var(--color-theme-3);
		border-radius: 32px;
		padding: 8px 13px;
		margin-bottom: 0;
	}
	p {
		--fs: 40;
		font-family: var(--en);
		font-weight: bold;
		line-height: 1;
		color: #FFF;
		-webkit-text-stroke: 4px #000;
		text-stroke: 4px #000;
        paint-order: stroke fill;
		order: -1;
		margin-bottom: 0;
		position: relative;
		z-index: 1;
		&::before {
			content: "TOPICS";
			color: var(--color-body-1);
			position: absolute;
			top: 4px;
			left: 4px;
			z-index: -1;
		}
	}
}

.top-topics-slide {
	position: relative;
	padding-inline: 24px;
	.splide__track {
		overflow: visible;
	}
	.splide__arrows {
		width: 100%;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;
	}
	.splide__arrow {
		width: 48px;
		height: 48px;
		background: var(--color-theme-1);
		opacity: 1;
		&::before {
			content: "";
			width: 20px;
			height: 18px;
			-webkit-mask: no-repeat center center / contain;
			mask: no-repeat center center / contain;
			-webkit-mask-image: url(img/icon-arrow-right.svg);
			mask-image: url(img/icon-arrow-right.svg);
			background-color: #FFF;
		}
	}
	.splide__arrow--prev {
		left: 0;
		transform: translate(-50%,-50%);
		&::before {
			transform: scale(-1,1);
		}
	}
	.splide__arrow--next {
		right: 0;
		transform: translate(50%,-50%);
	}
}

.top-topics-card {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 8px;
	height: 100%;
	background: #FFF;
	border: 1px solid var(--color-body-1);
	border-radius: 16px;
	padding: 16px;
	position: relative;
	top: 0;
	left: 0;
	box-shadow: 4px 4px 0 var(--color-body-1);
	transition: ease-out 0.2s;
	img {
		width: 100%;
		height: auto;
		aspect-ratio: 416 / 250;
		object-fit: cover;
	}
	p {
		font-weight: bold;
		margin-bottom: 0;
	}
	&:hover {
		opacity: 1;
		top: 4px;
		left: 4px;
		box-shadow: none;
	}
}

@media(max-width: 991px) {
	.top-topics-title {
		flex-direction: column;
	}
}

@media(max-width: 767px) {
	.top-topics {
		padding-top: 48px;
	}
	.top-topics-title {
		h2 {
			--fs: 15;
			padding: 8px 12px;
		}
		p {
			
		}
	}
}

@media(max-width: 575px) {
	.top-topics-slide {
		width: 100vw;
		padding-inline: 37px;
		margin-left: calc((100vw - 100%) / -2);
		.splide__arrow {
			width: 36px;
			height: 36px;
			&::before {
				width: 15px;
				height: 13px;
			}
		}
		.splide__arrow--prev {
			transform: translate(-60%,-50%);
		}
		.splide__arrow--next {
			transform: translate(60%,-50%);
		}
	}
}

/*		免許を取得したい方/講習を受講したい方		*/
.top-license {
	background: var(--color-theme-1-1);
	h3 {
		--fs: 18;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1.6;
		margin-bottom: 8px;
	}
}

.top-course {
	background: url(img/bg-pattern01.png) top left / 90px;
	h3 {
		--fs: 18;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1.6;
		margin-bottom: 8px;
	}
}

.top-license-title,
.top-course-title {
	display: grid;
	gap: 8px;
	margin-bottom: 32px;
	h2 {
		position: relative;
		--fs: 32;
		line-height: 1;
		font-size: var(--font-size);
		font-weight: bold;
		color: #FFF;
		-webkit-text-stroke: 4px var(--color-body-1);
		text-stroke: 4px var(--color-body-1);
        paint-order: stroke fill;
		max-inline-size: max-content;
		padding: 0 40px 16px;
		margin-bottom: 0;
		z-index: 1;
		span {
			--fs: 64;
			font-size: var(--font-size);
		}
		&::before {
			content: "";
			width: 100%;
			height: 64px;
			background: var(--color-theme-1);
			border-radius: 999px;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: -1;
		}
	}
	p {
		--fs: 20;
		font-family: var(--en);
		font-weight: bold;
		color: var(--color-theme-1);
		line-height: 1;
		max-inline-size: max-content;
		margin-bottom: 0;
		position: relative;
		&::after {
			content: "";
			width: 38px;
			aspect-ratio: 38 / 36;
			background: url(img/title-deco01.svg) center / cover;
			position: absolute;
			top: 0;
			right: -10px;
			transform: translate(100%,-65%);
		}
	}
}

.top-license-title h2 {
	margin-right: 90px;
	&::after {
		content: "";
		width: 90px;
		aspect-ratio: 90 / 120;
		background: url(img/turtle01@2x.png) center / cover;
		position: absolute;
		right: -90px;
		bottom: 0;
	}
}

.top-course-title {
	position: relative;
	&::after {
		content: "";
		width: 140px;
		aspect-ratio: 140 / 120;
		background: url(img/turtle02@2x.png) center / cover;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	h2 {
		margin-right: 90px;
	}
}
.top-license-content,
.top-course-content {
	display: grid;
	grid-template-columns: 1fr 40%;
	align-items: flex-end;
	gap: 32px;
}

.top-license-image,
.top-course-image {
	border-radius: 15px;
	overflow: hidden;
	img {
		width: 100%;
	}
}

.license-list,
.course-list {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 32px;
	list-style: none;
	grid-column: span 2;
	padding: 0;
	margin: 0;
}

.license-item,
.course-item {
	display: grid;
	grid-template-rows: auto 1fr auto;
	justify-content: center;
	text-align: center;
	background: #FFF;
	border: 1px solid var(--color-body-1);
	border-radius: 16px;
	padding: 32px 15px;
	box-shadow: 4px 4px 0 var(--color-body-1);
	position: relative;
	top: 0;
	left: 0;
	transition: ease-out 0.2s;
	&:hover {
		opacity: 1;
		background: #FFF7DC;
		top: 4px;
		left: 4px;
		box-shadow: none;
	}
}

.license-item-name,
.course-item-name {
	--fs: 20;
	font-size: var(--font-size);
	font-weight: bold;
	line-height: 1.2;
	margin-bottom: 10px;
	&.small {
		--fs: 16;
		margin-bottom: 15px;
	}
}

.license-item-link,
.course-item-link {
	display: inline-block;
	--fs: 14;
	font-weight: bold;
	line-height: 1;
	max-width: 144px;
	width: 100%;
	background: var(--color-theme-2);
	border: 1px solid var(--color-body-1);
	border-radius: 32px;
	padding: 12px 20px;
	margin-inline: auto;
	&::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	&:hover {
		opacity: 1;
	}
}

@media(max-width: 991px) {
	.top-license-content,
	.top-course-content {
		grid-template-columns: 1fr;
	}
	.top-license-title,
	.top-course-title {
		max-inline-size: max-content;
	}
	.license-list,
	.course-list {
		grid-column: auto;
		gap: 16px;
	}
}

@media(max-width: 767px) {
	.top-license,
	.top-course {
		padding-top: 88px;
		h3 {
			--fs: 17;
		}
	}
	.top-license-title,
	.top-course-title {
		max-inline-size: none;
		margin-bottom: 32px;
		h2 {
			--fs: 20;
			text-align: center;
			max-inline-size: none;
			width: 100%;
			padding: 0 16px 16px;
			margin-right: 0;
			span {
				--fs: 48;
			}
			&::before {
				height: 56px;
			}
			&::after {
				width: 63px;
				top: 0;
				right: auto;
				bottom: auto;
				left: 50%;
				transform: translate(-50%,-80%);
			}
		}
	}
	.top-course-title::after {
		width: 98px;
		top: 0;
		bottom: auto;
		transform: translate(-25%,-70%);
	}
	.license-list,
	.course-list {
		grid-template-columns: repeat(2,1fr);
	}
	.license-item,
	.course-item {
		padding: 16px 12px;
		img {
			width: 115px;
		}
	}
	.license-item-name,
	.course-item-name {
		--fs: 15;
		&.small {
			--fs: 15;
			margin-bottom: 10px;
		}
	}
	.license-item-link,
	.course-item-link {
		max-width: 115px;
		padding-inline: 12px;
	}
}

/*		お知らせ		*/
.top-news {

}

.top-news-content {
	display: grid;
	grid-template-columns: auto 25% 57%;
	gap: 32px;
}

.top-news-tab {

}

.top-news-category {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 48px;
	button {
		display: block;
		line-height: 1.6;
		background: var(--color-theme-1-4);
		border: 1px solid var(--color-body-1);
		border-radius: 16px;
		outline: none;
		padding: 3px 15px;
		transition: ease-out 0.3s;
		&.active {
			pointer-events: none;
			color: #FFF;
			background: var(--color-theme-1);
		}
		&:hover {
			opacity: 1;
			color: #FFF;
			background: var(--color-theme-1-5);
		}
	}
}

.archive-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	line-height: 1.6;
	&::before {
		content: "";
		display: inline-block;
		width: 12px;
		aspect-ratio: 10 / 9;
		vertical-align: middle;
		-webkit-mask: no-repeat center center / contain;
		mask: no-repeat center center / contain;
		-webkit-mask-image: url(img/icon-arrow-right.svg);
		mask-image: url(img/icon-arrow-right.svg);
		background-color: var(--color-body-1);
	}
}

.news-list {
	list-style: none;
	border: 1px solid var(--color-body-1);
	border-radius: 16px;
	overflow: hidden;
	padding: 0;
	margin: 0;
	box-shadow: 4px 4px 0 var(--color-body-1);
	overflow: hidden;
	li:not(:last-child) {
		border-bottom: 1px solid var(--color-body-1);
	}
}

.news-item {
	display: grid;
	grid-template-columns: 90px 1fr;
	align-items: baseline;
	gap: 8px;
	background: #FFF;
	padding: 20px 24px;
	transition: ease-out 0.3s;
	&:hover {
		opacity: 1;
		background: var(--color-theme-1-4);
	}
}

.news-item-date {
	--fs: 14;
	line-height: 1;
}

.news-item-title {
	display: grid;
	grid-template-columns: 1fr 24px;
	gap: 10px;
	margin-bottom: 0;
	&::after {
		content: "";
		width: 24px;
		aspect-ratio: 1 / 1;
		background: url(img/icon-arrow-right.svg) no-repeat center / 10px,#FFF;
		border-radius: 50%;
	}
}

.news-item:hover .news-item-title::after {
	background-color: var(--color-theme-1-1);
}

@media(max-width: 991px) {
	.top-news-content {
		grid-template-columns: 1fr;
	}
	.top-news-tab {
		display: contents;
	}
	.top-news-category {
		margin-bottom: 0;
	}
	.archive-link {
		order: 1;
	}
}

@media(max-width: 767px) {
	.top-news-category {
		button {
			--fs: 15;
		}
	}
	.news-item {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 16px;
	}
	.news-item-date {
		--fs: 12;
	}
	.news-item-title {
		grid-template-columns: 1fr;
		gap: 0;
		&::after {
			display: none;
		}
	}
}

/*		営業日カレンダー		*/
.top-calendar {
	background: url(img/calendar-bg@2x.jpg) center bottom / cover;
	padding-bottom: 240px;
	.top-section-title {
		margin-bottom: 25px;
	}
}

.top-calendar-content {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 32px;
}

.top-calendar-supplement {
	display: flex;
	gap: 2px;
	align-items: center;
	--fs: 16;
	line-height: 1.6;
	background: #FFF;
	border-radius: 8px;
	padding: 7px 16px;
	&::before {
		content: "";
		display: block;
		width: 28px;
		aspect-ratio: 1 / 1;
		background: var(--color-gray-1);
		border-radius: 50%;
	}
}

.custom-calendar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	.calendar {
		background: #FFF;
		border: 1px solid var(--color-body-1);
		border-radius: 13px;
		padding: 32px;
		box-shadow: 4px 4px 0 var(--color-body-1);
		table.month {
			width: 100%;
			margin-bottom: 0;
			caption {
				caption-side: top;
			}

			.month-header {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				--fs: 24;
				font-size: var(--font-size);
				font-family: var(--en);
				font-weight: bold;
				line-height: 1;
				color: var(--color-body-1);
				padding-block: 10px;
			}
			th {
				--fs: 14;
				line-height: 1;
				font-weight: bold;
				text-align: center;
				&.sun>span {
					color: #E92503;
				}
				&.sat>span {
					color: var(--color-body-1);
				}
			}
			td {
				text-align: center;
				padding-block: 10px!important;
				&.day {
					> span {
						display: inline-flex;
						place-items: center;
						place-content: center;
						--fs: 18;
						font-family: var(--en);
						line-height: 1;
						font-weight: bold;
						width: 32px;
						aspect-ratio: 1 / 1;
						background: var(--color-theme-2);
						border-radius: 50%;
					}
					&.other {
						opacity: 0;
					}
					&.sun > span,
					&.sat > span {
						color: var(--color-body-1);
					}
					&.today > span {
						color: #FFF;
						background: var(--color-theme-1);
					}
					&.holiday > span {
						color: #FFF;
						background: var(--color-gray-1)!important;
					}
				}
			}
		}
	}
}

@media(max-width: 991px) {
	.top-calendar-content {
		grid-template-columns: 1fr;
	}
	.custom-calendar {
		gap: 24px;
	}
}

@media(max-width: 767px) {
	.top-calendar {
		padding-bottom: 48px;
		.top-section-title {
 			margin-bottom: 16px;
		}
		.top-section-title-en {
			color: #FFF;
		}
	}
	.top-calendar-content {
		gap: 16px;
	}
	.custom-calendar {
		display: grid;
		grid-template-columns: 1fr;
		.calendar {
			padding: 16px 24px;
			table.month {
				td {
					padding-block: 4px!important;
				}
			}
		}
	}
}

/*		日本海自動車学校って？		*/
.top-about {
	padding-block: 160px 80px;
}

.top-about-title {
	display: grid;
	justify-content: center;
	gap: 8px;
	margin-bottom: 32px;
	h2 {
		--fs: 32;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1;
		color: #FFF;
		-webkit-text-stroke: 4px var(--color-body-1);
        text-stroke: 4px var(--color-body-1);
        paint-order: stroke fill;
		background: var(--color-theme-1);
		border-radius: 999px;
		padding: 16px 40px;
		margin-bottom: 0;
		position: relative;
		&::before {
			content: "";
			width: 120px;
			aspect-ratio: 120 / 100;
			background: url(img/turtle03@2x.png) center / cover;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%,-88%);
		}
	}
	p {
		--fs: 15;
		font-size: var(--font-size);
		font-family: var(--en);
		font-weight: bold;
		line-height: 1;
		color: var(--color-theme-1);
		max-inline-size: max-content;
		margin-inline: auto;
		margin-bottom: 0;
		position: relative;
		&::after {
			content: "";
            width: 38px;
            aspect-ratio: 38 / 36;
            background: url(img/title-deco01.svg) center / cover;
            position: absolute;
            top: 0;
            right: -10px;
            transform: translate(100%, -65%);
		}
	}
}

.top-about-content {
	display: grid;
	grid-template-columns: calc((100% - 32px) / 2) calc((100% - 32px) / 2);
	gap: 32px;
	h3 {
		--fs: 20;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1.6;
		margin-bottom: 16px;
	}
}

.top-about-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 16px;
}

.top-about-slide {
	display: grid;
	grid-template-columns: 160px calc(100% - 160px);
	background: #FFF;
	border: 1px solid var(--color-body-1);
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 32px;
}

.about-nav-slider {
	.splide {
		/* visibility: visible; */
	}
	.splide__list {
		flex-direction: column;
		.splide__slide {
			--fs: 16;
			line-height: 1.6;
			font-weight: bold;
			background: var(--color-theme-1-6);
			border: none;
			border-right: 1px solid var(--color-body-1);
			transition: ease-out 0.3s;
			padding: 16px;
			&:hover {
				opacity: 1;
				background: var(--color-theme-1-4);
			}
			&.is-active {
				background: #FFF;
				border: none;
			}
			&:not(:last-child) {
				border-bottom: 1px solid var(--color-body-1);
			}
		}
	}
}

.top-about-slide {
	.splide,
	.splide__track,
	.splide__list {
		height: 100%;
	}
}

.about-slide-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	height: 100%;
	padding: 24px;
}

@media(max-width: 991px) {
	.top-about-content {
		grid-template-columns: 1fr;
	}
	.top-about-image img {
		aspect-ratio: 310 / 235;
	}
}

@media(max-width: 767px) {
	.top-about {
		padding-block: 96px 48px;
	}
	.top-about-title {
		justify-content: normal;
		margin-bottom: 16px;
		h2 {
			--fs: 20;
			text-align: center;
			width: 100%;
			padding: 16px;
			&::before {
				width: 84px;
			}
		}
	}
	.top-about-content {
		h3 {
			--fs: 17;
		}
	}
	.top-about-slide {
		max-width: calc(100vw - var(--padding) * 2);
		grid-template-columns: 105px calc(100% - 105px);
		margin-bottom: 16px;
	}
	.about-nav-slider {
		.splide__list {
			.splide__slide {
				display: grid;
				place-content: center;
				place-items: center;
				--fs: 15;
				line-height: 1.2;
				text-align: center;
				min-height: 55px;
				padding: 9px 5px;
			}
		}
	}
	.about-slide-content {
		padding: 5px 16px;
	}
}

/*		スライダー		*/
.top-school {
	background: linear-gradient(to bottom,transparent 50%, var(--color-theme-1-1) 50%, var(--color-theme-1-1) 100%);
}

.top-school-slide {
	.splide__slide img {
		border-radius: 16px;
	}
}

@media(max-width: 767px) {
	.top-school {
		padding-bottom: 16px;
	}
}

/*		アクセス		*/
.top-access {
	background: var(--color-theme-1-1);
}

.access-map {
	margin-bottom: 80px;
	iframe {
		width: 100%;
		min-height: 310px;
		height: auto;
		aspect-ratio: 1120 / 530;
		border: 1px solid var(--color-body-1);
		border-radius: 16px;
		margin-bottom: 8px;
	}
	p {
		--fs: 12;
		line-height: 1.2;
		font-size: var(--font-size);
	}
}

.top-recruit-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px;
	max-width: 705px;
	background: #FFF;
	border-radius: 32px;
	padding: 32px 16px;
	margin-inline: auto;
	position: relative;
	&::before {
		content: "";
		width: 100px;
		aspect-ratio: 100 / 80;
		background: url(img/turtle04@2x.png) center / cover;
		position: absolute;
		top: 0;
		left: 0;
		transform: translate(-15%,-40%);
	}
	h3 {
		display: flex;
		flex-direction: column;
		gap: 8px;
		--fs: 28;
		line-height: 1;
		font-weight: bold;
		font-size: var(--font-size);
		margin-bottom: 0;
		span {
			display: inline-block;
			--fs: 15;
			font-size: var(--font-size);
			line-height: 1;
			font-weight: bold;
			color: var(--color-theme-1);
		}
	}
	.pickup {
		display: flex;
		gap: 8px;
		align-items: center;
		margin-bottom: 0;
		span {
			display: inline-block;
			--fs: 16;
			font-size: var(--font-size);
			line-height: 1;
			color: #FFF;
			background: #E92503;
			border-radius: 2px;
			padding: 2px 14px;
		}
	}
}

@media(max-width: 767px) {
	.top-school {
		.top-section-title-ja {
			--fs: 28;
		}
	}
	.top-recruit-content {
		flex-direction: column;
		gap: 16px;
		padding: 32px 16px;
		h3 {
			flex-direction: row;
			align-items: center;
		}
		.pickup {
			span {
				line-height: 1.6;
			}
		}
	}
}

/*		資料請求・お問合せ/入校案内・仮お申込み		*/
.contact-content {
	background: var(--color-theme-1-1);
	> * {
		position: relative;
		z-index: 5;
	}
}

body:not(.home) .contact-content {
	margin-top: -48px;
}

.page-contact-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 180px;
	background: url(img/page-contact-link01@2x.jpg) no-repeat center right / auto 100%;
	--fs: 40;
	font-size: var(--font-size);
	font-weight: bold;
	line-height: 1;
	color: #FFF;
	-webkit-text-stroke: 4px var(--color-body-1);
	text-stroke: 4px var(--color-body-1);
	paint-order: stroke fill;
	text-shadow: 3px 3px 0 var(--color-body-1);
	border: 1px solid var(--color-body-1);
	border-radius: 16px;
	box-shadow: 4px 4px 0 var(--color-body-1);
	padding: 20px 60px;
	margin-bottom: 32px;
	position: relative;
	top: 0;
	left: 0;
	transition: ease-out 0.2s;
	z-index: -1;
	span {
		--fs: 20;
		font-size: var(--font-size);
		font-family: var(--en);
	}
	&:hover {
		opacity: 1;
		top: 4px;
		left: 4px;
		box-shadow: none;
	}
}

.page-id-128 .page-contact-link {
	&::before {
		content: "";
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, #31A7A3 0, #31A7A3 42%,transparent 60%,transparent 100%);
		border-radius: 16px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
}

.page-id-395 .page-contact-link,
.page-id-7444 .page-contact-link {
	background-image: url(img/page-contact-link02@2x.jpg);
	&::before {
		content: "";
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, #F9C03B 0, #F9C03B 42%,transparent 60%,transparent 100%);
		border-radius: 16px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
	}
}

.contact-list {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 32px;
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.contact-item {
	display: grid;
	place-items: center;
	place-content: center;
	gap: 8px;
	min-height: 180px;
	width: 100%;
	--fs: 28;
	font-size: var(--font-size);
	font-weight: bold;
	line-height: 1;
	color: #FFF;
	-webkit-text-stroke: 4px var(--color-body-1);
	text-stroke: 4px var(--color-body-1);
	paint-order: stroke fill;
	border: 1px solid var(--color-body-1);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 4px 4px 0 var(--color-body-1);
	text-shadow: 3px 3px 0 var(--color-body-1);
	position: relative;
	top: 0;
	left: 0;
	z-index: 5;
	transition: ease-out 0.2s;
	.mail-animation-content,
	.car-animation-content {
		transform: none;
		transition: ease-out 0.2s;
	}
	&:hover {
		opacity: 1;
		top: 4px;
		left: 4px;
		box-shadow: none;
		.mail-animation-content {
			transform: translateY(-8%);
		}
		.car-animation-content {
			transform: translateY(-10%);
		}
	}
	svg {
		width: 90px;
	}
	&.contact-mail {
		background: var(--color-theme-1);
	}
	&.contact-car {
		background: var(--color-theme-1-3);
	}
}

@media(max-width: 767px) {
	.page-contact-link {
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		--fs: 28;
		min-height: 136px;
		padding: 8px 16px;
		margin-bottom: 16px;
		span {
			--fs: 18;
		}
	}
	.contact-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.contact-item {
		min-height: 136px;
		--fs: 24;
		padding: 8px 16px;
		svg {
			width: 77px;
		}
	}
}

@media(max-width: 575px) {
	.page-id-128 .page-contact-link {
		background: url(img/page-contact-link01@2x.jpg) no-repeat center right -90px / auto 100%;
	}
}

/*		下層ページ		*/
.page-content {
	position: relative;
	z-index: 1;
}

.page-header {
	position: relative;
	max-width: 1376px;
	width: calc(100% - 32px * 2);
	background: var(--color-theme-1-5);
	border-radius: 32px;
	overflow: hidden;
	margin-inline: auto;
	&::before {
		content: "";
		width: 704px;
		height: 100%;
		background: url(img/page-header-bg01.jpg) no-repeat center left / 704px;
		position: absolute;
		top: 50%;
		right: 704px;
		transform: translate(100%,-50%);
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	&::after {
		content: "";
		width: 256px;
		height: 100%;
		background: linear-gradient(to right,var(--color-theme-1-5),transparent);
		position: absolute;
		top: 50%;
		right: 704px;
		transform: translate(100%,-50%);
	}
	.page-header-content {
		position: relative;
		display: grid;
		grid-template-columns: 120px 1fr;
		place-content: center;
		align-items: center;
		gap: 8px;
		min-height: 292px;
		z-index: 1;
	}
	.page-header-parent {
		--fs: 18;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1.6;
		color: #FFF;
		text-stroke: 3px #000;
		-webkit-text-stroke: 3px #000;
        paint-order: stroke fill;
		margin-bottom: 0;
	}
	.page-header-title {
		display: grid;
		gap: 12px;
		max-inline-size: max-content;
		--fs: 48;
		font-size: var(--font-size);
		font-weight: bold;
		color: #FFF;
		line-height: 1;
		text-stroke: 4px #000;
		-webkit-text-stroke: 4px #000;
        paint-order: stroke fill;
		text-shadow: 4px 4px 0 #000;
		margin-bottom: 12px;
		&::after {
			content: "";
			width: 0;
			height: 1px;
			background: #FFF;
			opacity: 0;
		}
	}
	span {
		display: block;
		--fs: 15;
		color: #FFF;
		line-height: 1;
		font-family: var(--en);
		font-weight: bold;
	}
	&.is-active {
		&::before {
			animation: PageHeaderBg 0.4s forwards ease-out;
		}
		.page-header-title::after {
			animation: PageHeaderBorder .4s forwards cubic-bezier(1, 0.03, 0.71, 1.17);
		}
	}
}

.page-id-395 .page-header::before {
	background-image: url(img/page-header-bg02.jpg);
}

/* 普通自動車 */
.page-id-397 .page-header::before {
	background-image: url(img/page-header-bg03.jpg);
}

.page-id-7456 .page-header::before {
	background-image: url(img/page-header-bg04.jpg);
}

/* 講習を受講したい方 */
.page-id-7444 .page-header::before {
	background-image: url(img/page-header-bg13.jpg);
}

/* ペーパードライバー講習 */
.page-id-416 .page-header::before {
	background-image: url(img/page-header-bg05.jpg);
}

/* 企業向け安全運転講習 */
.page-id-404 .page-header::before {
	background-image: url(img/page-header-bg06.jpg);
}

/* 原付講習 */
.page-id-413 .page-header::before {
	background-image: url(img/page-header-bg07.jpg);
}

/* 高齢者講習 */
.page-id-410 .page-header::before {
	background-image: url(img/page-header-bg08.jpg);
}

/* 採用情報 */
.page-id-7461 .page-header::before {
	background-image: url(img/page-header-bg09.jpg);
}

/* 準中型車 */
.page-id-2007 .page-header::before {
	background-image: url(img/page-header-bg10.jpg);
}

/* 大型特殊車 */
.page-id-407 .page-header::before {
	background-image: url(img/page-header-bg11.jpg);
}

/* 自動二輪車 */
.page-id-401 .page-header::before {
	background-image: url(img/page-header-bg12.jpg);
}

/* 選べる学科 */
.page-id-7458 .page-header::before {
	background-image: url(img/page-header-bg14.jpg);
}

/* プライバシーポリシー  */
.page-id-675 .page-header::before {
	background-image: url(img/page-header-bg17.jpg);
}

/* 資料請求・お問い合わせ */
.page-id-709 .page-header::before {
	background-image: url(img/page-header-bg18.jpg);
}

/* オンライン学科利用規約 */
.page-id-4296 .page-header::before {
	background-image: url(img/page-header-bg15.jpg);
}

/* オンライン学科受講案内 */
.page-id-4289 .page-header::before {
	background-image: url(img/page-header-bg19.jpg);
}

/* お知らせ */
.single .page-header::before,
.category .page-header::before,
.blog .page-header::before {
	background-image: url(img/page-header-bg16.jpg);
}

.error404 .page-header::before {
	content: none;
}

@keyframes PageHeaderBorder {
	0% {
		width: 0;
		opacity: 0;
	}
	100% {
		width: 100%;
		opacity: 1;
	}
}

@keyframes PageHeaderBg {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}
}

.anchor-button.is-style-button-1 {
	max-width: 546px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 5;
	.wp-block-button__link {
		display: flex;
		align-items: center;
		justify-content: center;
		max-inline-size: none;
		width: 100%;
	}
}

.page-body .stack:first-child {
	padding-top: 96px;
}

@media(max-width: 767px) {
	.page-header {
		width: calc(100% - 16px * 2);
		border-radius: 16px;
		--padding: 16px;
		padding-block: 26px 16px;
		&::before {
			width: 343px;
			background-size: cover;
			right: 343px;
		}
		&::after {
			width: 200px;
			right: 343px;
		}
		.page-header-content {
			grid-template-columns: 1fr;
			gap: 4px;
			min-height: auto;
			img {
				width: 48px;
			}
		}
		.page-header-parent {
			--fs: 15;
		}
		.page-header-title {
			--fs: 28;
			gap: 8px;
			margin-bottom: 8px;
			text-stroke: 3px #000;
			-webkit-text-stroke: 3px #000;
			text-shadow: 2px 2px 0 #000;
		}
		span {
			--fs: 12;
		}
	}
	.page-body .stack:first-child {
		padding-top: var(--stack);
	}
	.anchor-button.is-style-button-1 {
		max-width: 400px;
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		margin-top: 24px;
		margin-inline: auto;
	}
}

/*		学校案内		*/
.guide-pickup-inner {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 128px 64px;
}

.guide-pickup-item {
	display: grid;
	grid-template-columns: 1fr 57%;
	grid-column: span 2;
	gap: 32px;
	&:nth-child(even) {
		grid-template-columns: 57% 1fr;
		.guide-pickup-image {
			order: -1;
		}
	}
	h3 {
		display: flex;
		align-items: center;
		gap: 16px;
		--fs: 24;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1;
		margin-bottom: 16px;
		span {
			--fs: 100;
			font-size: var(--font-size);
			font-family: var(--en);
			color: var(--color-theme-2);
			line-height: 0.7;
			letter-spacing: -0.03em;
			text-stroke: 4px #000;
			-webkit-text-stroke: 4px #000;
			paint-order: stroke fill;
		}
	}
	.google-map {
		iframe {
			width: 100%;
			height: auto;
			aspect-ratio: 640 / 372;
			border-radius: 16px;
			margin-bottom: 8px;
		}
		p {
			--fs: 12;
			line-height: 1.2;
			margin-bottom: 0;
		}
	}
	.guide-pickup-image img {
		border-radius: 16px;
	}
	.row {
		--bs-gutter-x: 16px;
	}
	&:nth-child(n + 4) {
		grid-template-columns: 1fr;
		grid-column: auto;
		h3 {
			gap: 8px;
			span {
				--fs: 64;
			}
		}
		img {
			border-radius: 16px;
		}
		.row {
			--bs-gutter-y: 8px;
		}
	}
}

.guide-pickup-point {
	border: 1px solid var(--color-body-1);
	border-radius: 8px;
	box-shadow: 4px 4px 0 var(--color-body-1);
	padding: 16px;
	h4 {
		--fs: 18;
		font-size: var(--font-size);
		font-weight: bold;
		color: #FFF;
		background: var(--color-theme-1-5);
		max-inline-size: max-content;
		border-radius: 32px;
		padding: 4px 12px;
		margin-bottom: 8px;
	}
	h5 {
		--fs: 15;
		font-size: var(--font-size);
		line-height: 1.4;
		font-weight: bold;
		margin-bottom: 4px;
	}
	.row {
		--bs-gutter-x: 8px;
	}
	p {
		--fs: 14;
	}
}

.guide-facility-gallery {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 24px 32px;
	margin-bottom: 38px;
}

.guide-facility-image {
	margin-bottom: 0;
	img {
		width: 100%;
		height: auto;
		aspect-ratio: 352 / 264;
		object-fit: cover;
		border-radius: 16px;
		margin-bottom: 8px;
	}
	figcaption {
		--fs: 15;
	}
}

.guide-facility-point {
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: center;
	gap: 32px;
	max-width: 706px;
	background: #FFF;
	border: 1px solid var(--color-body-1);
	border-radius: 16px;
	box-shadow: 4px 4px 0 var(--color-body-1);
	padding: 16px;
	margin-inline: auto;
}

.guide-overview {
	position: relative;
	padding-bottom: 176px;
	&::before {
		content: "";
		width: 100vw;
		height: 100%;
		background: #FFF;
		position: absolute;
		top: 0;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: -1;
	}
}

.guide-overview-content {
	display: grid;
	grid-template-columns: 1fr 60%;
	gap: 80px 32px;
}

.guide-overview-table {
	grid-column: span 2;
}

.guide-overview-school p.small {
	--fs: 14;
	line-height: 1;
}

.guide-overview-school-content p {
	--fs: 24;
	font-weight: bold;
	span {
		--fs: 14;
		font-size: var(--font-size);
	}
}

@media(max-width: 991px) {
	.guide-pickup-inner {
		grid-template-columns: 1fr;
	}
	.guide-pickup-item {
		grid-template-columns: 1fr;
		grid-column: auto;
		&:nth-child(even) {
			grid-template-columns: 1fr;
			.guide-pickup-image {
				order: initial;
			}
		}
	}
	.guide-overview-content {
		grid-template-columns: 1fr;
	}
	.guide-overview-table {
		grid-column: auto;
	}
}

@media(max-width: 767px) {
	.guide-pickup-inner {
		gap: var(--stack);
	}
	.guide-pickup-item {
		gap: 16px;
		h3 {
			--fs: 20;
			span {
				--fs: 70;
			}
		}
	}
	.guide-pickup-point {
		h4 {
			--fs: 16;
		}
		h5 {
			--fs: 14;
		}
		p {
			--fs: 13;
		}
		img {
			width: 100px;
		}
	}
	.guide-facility-gallery {
		grid-template-columns: repeat(2,1fr);
	}
	.guide-facility-image {
		figcaption {
			--fs: 14;
		}
	}
	.guide-overview {
		padding-bottom: calc(var(--stack) + 48px);
	}
	.guide-overview-content {
		gap: var(--stack);
	}
	.guide-overview-school-content p {
		--fs: 20;
	}
}

@media(max-width: 575px) {
	.guide-pickup-item:nth-child(n + 4) img {
		width: auto;
	}
}

/*		免許を取得したい方		*/
.license-pattern-link {
	text-align: center;
	a {
		display: inline-flex;
		align-items: center;
		text-decoration: underline;
	}
}

.license-easy-item {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 32px;
	&:not(:last-child) {
		margin-bottom: 80px;
	}
	.row {
		--bs-gutter-x: 16px;
		--bs-gutter-y: 16px;
	}
}

.license-easy-info {
	height: 100%;
	background: #FFF;
	border: 1px solid var(--color-gray-1);
	border-radius: 8px;
	padding: 16px;
	h5 {
		--fs: 18;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1.6;
		color: #FFF;
		background: var(--color-theme-1);
		border-radius: 8px;
		padding: 4px 16px;
		margin-bottom: 10px;
	}
	p {
		--fs: 15;
		margin-bottom: 10px;
	}
}

.license-enrollment {
	position: relative;
	&::before {
		content: "";
		width: 100vw;
		height: 100%;
		background: url(img/bg-pattern01.png) left top / 90px;
		position: absolute;
		top: 0;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: -1;
	}
}

.license-enrollment-table {
	margin-bottom: 80px;
	th,td {
		padding: 8px;
	}
}

.license-plan {
	position: relative;
	.row {
		--bs-gutter-x: 16px;
	}
}

.license-plan-content {
	margin-bottom: 80px;
}

.license-plan-item:not(:last-child) {
	margin-bottom: 80px;
}

.plan-campaign {
	position: relative;
	padding-top: 80px;
	&::before {
		content: "";
		width: 100vw;
		height: 100%;
		background: url(img/bg-pattern01.png) left top / 90px;
		position: absolute;
		top: 0;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		opacity: 0.3;
		z-index: -1;
	}
	&::after {
		content: "";
		width: 100vw;
		height: 100%;
		background: var(--color-theme-1-5);
		position: absolute;
		top: 0;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: -2;
	}
	a img {
		border-radius: 4px;
	}
	.row {
		--bs-gutter-x: 32px;
		--bs-gutter-y: 16px;
	}
}

.plan-campaign-title {
	display: grid;
	grid-template-columns: 28px auto 28px;
	gap: 20px;
	max-inline-size: max-content;
	--fs: 24;
	font-size: var(--font-size);
	font-weight: bold;
	line-height: 1;
	color: #FFF;
	padding-block: 12px;
	margin-bottom: 16px;
	margin-inline: auto;
	span {
		padding-block: 12px;
	}
	&::before,
	&::after {
		content: "";
		width: 28px;
		height: 100%;
	}
	&::before {
		background: linear-gradient(to bottom left, transparent calc(50% - .5px), #FFF calc(50% - .5px), #FFF calc(50% + .5px), transparent calc(50% + .5px))
	}
	&::after {
		background: linear-gradient(to bottom right, transparent calc(50% - .5px), #FFF calc(50% - .5px), #FFF calc(50% + .5px), transparent calc(50% + .5px));
	}
}

@media(max-width: 767px) {
	.license-easy-item {
		grid-template-columns: 1fr;
		gap: 16px;
		&:not(:last-child) {
			margin-bottom: var(--stack);
		}
	}
	.license-easy-info h5 {
		--fs: 16;
	}
	.license-enrollment-table {
		margin-bottom: var(--stack);
		table {
			--fs: 10;
		}
	}
	.license-plan-content {
		margin-bottom: var(--stack);
	}
	.license-plan-item {
		img {
			width: 70px;
		}
		&:not(:last-child) {
			margin-bottom: var(--stack);
		}
	}
	.plan-campaign {
		padding-top: var(--stack);
		padding-bottom: calc(var(--stack) + 48px);
	}
	.plan-campaign-title {
		--fs: 18;
		grid-template-columns: 20px auto 20px;
		gap: 5px;
		padding-block: 8px;
		span {
			padding-block: 8px;
		}
		&::before,
		&::after {
			width: 20px;
		}
	}
}

/*		普通自動車免許		*/
.license-pass {
	img {
		border-radius: 16px;
	}
}

.license-price-item:not(:last-child) {
	margin-bottom: 80px;
}

.license-price-payment {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr));
	gap: 32px;
	figure {
		text-align: center;
		margin-bottom: 0;
		img {
			margin-bottom: 8px;
		}
	}
	figcaption {
		line-height: 1.4;
		.small {
			--fs: 14;
			font-size: var(--font-size);
		}
	}
}

@media(max-width: 767px) {
	.license-price-item:not(:last-child) {
		margin-bottom: 48px;
	}
}

@media(max-width: 575px) {
	.license-price-payment {
		grid-template-columns: repeat(3,1fr);
		gap: 32px 16px;
		figcaption .small {
			--fs: 12;
		}
	}
}

/*		入校案内/仮申込		*/
.guide-content {
	padding-top: var(--stack)!important;
}

.guide-flow {

}

.guide-flow-item {
	display: grid;
	grid-template-columns: 224px 1fr;
	gap: 16px 32px;
	&:not(:last-child) {
		margin-bottom: 16px;
	}
	&:not(:last-child)&::before {
		content: "";
		width: 32px;
		aspect-ratio: 1/cos(60deg);
		clip-path: polygon(50% 100%,100% 0,0 0);
		background: linear-gradient(45deg,var(--color-theme-1));
		margin-inline: auto;
		order: 10;
	}
}

.guide-flow-image img {
	border-radius: 16px;
}

.schedule-table table {
	width: 100%;
	/* min-width: 710px; */
}

.schedule-table thead th {
	min-width: 3em;
	text-align: center;
	border: 1px solid var(--color-gray-1);
	padding: 8px;
	&:first-child {
		border-left: none;
	}
	&:last-child {
		border-right: none;
	}
	&:nth-child(n + 3) {
		width: 77px;
	}
}

.schedule-table tbody th,
.schedule-table tbody td {
	text-align: center;
	border: 1px solid var(--color-gray-1);
	padding: 8px;
	&:first-child {
		border-left: none;
	}
	&:last-child {
		border-right: none;
	}
	&:nth-child(-n + 2) {
		text-align: left;
	}
	&:nth-child(n + 3) {
		padding: 8px 4px;
	}
	&.table-line {
		--fs: 14;
		text-align: center;
		background: var(--color-theme-4);
		padding: 2px 16px;
	}
}

.form-content {
	background: #FFF;
	border-radius: 16px;
	padding: 32px;
	p.small {
		--fs: 14;
		line-height: 1.4;
	}
	ul {
		list-style: none;
		padding: 0;
		margin-bottom: 0;
		li {
			position: relative;
			padding-left: 1em;
			&::before {
				content: "•";
				width: 1em;
				font-weight: bold;
				text-align: center;
				color: var(--color-red);
				position: absolute;
				top: 0;
				left: 0;
			}
			ul {
				margin-left: 0;
				li {
					--fs: 15;
					&::before {
						font-weight: normal;
						color: var(--color-body-1);
					}
				}
			}
		}
	}
	.error {
		flex: 0 0 100%;
		grid-column: 1 / -1;
		order: 10;
		margin-top: 4px;
	}
	span.hr {
		width: 1px;
		height: 24px;
		background: var(--color-body-1);
		margin: 10px 16px;
	}
}

.form-item {
	position: relative;
	align-items: center;
	display: grid;
	grid-template-columns: 1fr 72.4%;
	gap: 16px 32px;
	border-bottom: 1px solid var(--color-gray-1);
	padding-block: 24px;
	&.form-address {
		grid-template-columns: 1fr auto 72.4%;
		> .form-label {
			grid-row: 1 / 4;
		}
	}
	input[type=radio] {
		appearance: none;
		display: none;
		+ span {
			display: flex;
			align-items: center;
			gap: 6px;
			&::before {
				content: "";
				display: inline-block;
				min-width: 20px;
				min-height: 20px;
				border: 2px solid var(--color-gray-1);
				border-radius: 50%;
			}
		}
		&:checked + span:before {
			min-width: 20px;
			min-height: 20px;
			border: 6px solid var(--color-theme-1);
		}
	}
}

.form-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
	gap: 8px;
	margin-bottom: 0;
	&.required::after {
		content: "必須";
		--fs: 12;
		font-size: var(--font-size);
		line-height: 1;
		color: #FFF;
		background: var(--color-red);
		padding: 4px 8px;
	}
	&.any::after {
		content: "任意";
		--fs: 12;
		font-size: var(--font-size);
		line-height: 1;
		color: #FFF;
		background: #31A7A3;
		padding: 4px 8px;
	}
}

.form-sub-item {
	display: contents;
	.form-label {
		font-weight: normal;
	}
}

.form-control,
.hasDatepicker {
	max-width: 100%;
	width: auto;
	line-height: 1.6;
	border: 2px solid var(--color-gray-1);
	border-radius: 8px;
	padding: 8px 16px;
	&::placeholder {
		color: var(--color-body-1);
		opacity: .5;
	}
}

.hasDatepicker  {
	width: 100%;
	--fs: 16;
	font-size: var(--font-size);
}

.ui-datepicker {
	z-index: 20!important;
}

.birth-content {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.age-content {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	.form-control {
		width: 60px;
	}
}

.select {
	position: relative;
	display: inline-block;
	line-height: 1.6;
	border: 2px solid var(--color-gray-1);
	border-radius: 8px;
	overflow: hidden;
	&::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 16px;
		width: 10px;
		aspect-ratio: 1/cos(40deg);
		clip-path: polygon(50% 100%,100% 0,0 0);
		background: linear-gradient(45deg,var(--color-body-1));
		pointer-events: none;
		transform: translateY(-50%);
	}
	select {
		appearance: none;
		border: none;
		outline: 0;
		background: #fff;
		background-image: none;
		box-shadow: none;
		cursor: pointer;
		padding: 8px 34px 8px 16px;
	}
}

.mwform-zip-field {
	display: flex;
	gap: 8px;
	align-items: center;
	input {
		width: auto;
		line-height: 1.6;
		border: 2px solid var(--color-gray-1);
		border-radius: 8px;
		padding: 8px 16px;
	}
}

.postal-search {
	--fs: 16;
	font-size: var(--font-size);
	color: var(--color-body-1);
	background: var(--color-theme-2);
	border: 2px solid var(--color-gray-1);
	border-radius: 24px;
	padding: 8px 16px;
}

.form-checkbox {
	display: grid;
	gap: 16px 32px;
	&.form-hope {
		line-height: 1;
		grid-auto-flow: column;
		grid-template-columns: repeat(auto-fill, minmax(240px, max-content));
		grid-template-rows: repeat(5,1fr);
	}
	&.form-license {
		line-height: 1;
		grid-auto-flow: column;
		grid-template-columns: repeat(auto-fill, minmax(105px, max-content));
		grid-template-rows: repeat(3,1fr);
	}
	.horizontal-item + .horizontal-item {
		margin-left: 0!important;
	}
	.mwform-checkbox-field-text {
		position: relative;
		display: inline-flex;
		gap: 6px;
		align-items: start;
		&::before {
			content: "";
			display: block;
			width: 20px;
			min-width: 20px;
			height: 20px;
			border: 2px solid var(--color-gray-1);
			border-radius: 5px;
			background: #fff;
			transition: all 0.3s;
		}
		&::after {
			content: "";
			width: 10px;
			height: 9px;
			background: url(img/icon-check.svg) no-repeat center / cover;
			position: absolute;
			top: 6px;
			left: 5px;
			opacity: 0;
			transition: all 0.3s;
		}
	}
	input[type="checkbox"] {
		opacity:0;
		appearance: none;
		position: absolute;
		&:checked + .mwform-checkbox-field-text {
			&::before {
				border-color: var(--color-theme-1);
				background: var(--color-theme-1);
			}
			&::after {
				opacity: 1;
			}
		}
	}
}

.form-submit-content {
	padding-block: 32px;
	input {
		display: block;
		--fs: 20;
		font-size: var(--font-size);
		font-weight: bold;
		line-height: 1.2;
		color: var(--color-body-1);
		max-inline-size: max-content;
		background: var(--color-theme-2);
		border: 1px solid var(--color-body-1);
		border-radius: 999px;
		padding: 24px 32px;
		box-shadow: 4px 4px 0 var(--color-body-1);
		position: relative;
		top: 0;
		left: 0;
		transition: ease-out 0.1s;
		margin-inline: auto;
		&:hover {
			opacity: 1;
			top: 4px;
			left: 4px;
			box-shadow: none;
			&::after {
				transform: translateX(12px);
			}
		}
	}
}

@media(max-width: 991px) {
	.form-item {
		grid-template-columns: 1fr;
		&.form-address {
			grid-template-columns: 1fr;
			> .form-label {
				grid-row: auto;
			}
		}
	}
	.form-label {
		justify-content: start;
	}
	.form-control {
		width: 100%;
	}
}

@media(max-width: 767px) {
	.schedule-table thead th {
		width: auto;	
		padding: 4px 8px;
	}
	.schedule-table thead th,
	.schedule-table tbody th,
	.schedule-table tbody td  {
		/* --fs: 14; */
		--fs: 10;
		padding: 4px 8px;
		&:nth-child(n + 3) {
			padding: 4px;
		}
		b {
			font-size: var(--font-size);
		}
		&.table-line {
			--fs: 12;
		}
	}
	.form-content {
		padding: 16px;
		margin-inline: -16px;
		span.hr {
			display: block;
			width: 100%;
			height: 1px;
			background: transparent;
			margin: 8px 0;
		}
		ul li ul li {
			--fs: 14;
		}
	}
	.guide-flow-item {
		grid-template-columns: 1fr;
	}
	.form-control {
		padding: 4px 8px;
	}
	select {
		color: var(--color-body-1);
		padding: 4px 34px 4px 8px;
	}
	.mwform-zip-field {
		input {
			padding: 4px 8px;
		}
	}
	.postal-search {
		--fs: 14;
		padding: 4px 10px;
	}
	.form-submit-content {
		input {
			--fs: 16;
			padding: 16px 24px;
		}
	}
	.form-checkbox {
		&.form-hope {
			grid-auto-flow: row;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
		}
		&.form-license {
			line-height: 1;
			grid-auto-flow: row;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
		}
	}
}

/*		お知らせ一覧		*/
.news-category-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 48px;
	a {
		display: block;
		line-height: 1.6;
		background: var(--color-theme-1-4);
		border: 1px solid var(--color-body-1);
		border-radius: 16px;
		outline: none;
		padding: 3px 15px;
		transition: ease-out 0.3s;
		&.active {
			pointer-events: none;
			color: #FFF;
			background: var(--color-theme-1);
		}
		&:hover {
			opacity: 1;
			color: #FFF;
			background: var(--color-theme-1-5);
		}
	}
}

.pagination {
	justify-content: center;
	margin-top: 48px;
	.nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.page-numbers {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 35px;
		height: 35px;
		background: #FFF;
		border: 1px solid var(--color-body-1);
		border-radius: 50%;
		&:hover {
			opacity: 1;
			background: var(--color-theme-1-4);
		}
		&.current {
			background: var(--color-theme-1-5);
			color: #FFF;
		}
		&.next::before {
			content: "";
			width: 9px;
			height: 9px;
			background: url(img/icon-arrow-right.svg) no-repeat center / cover;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		&.prev::before {
			content: "";
			width: 9px;
			height: 9px;
			background: url(img/icon-arrow-right.svg) no-repeat center / cover;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%) scale(-1,1);
		}
	}
}

/*		お知らせ詳細		*/
.single-date {
	display: block;
	margin-bottom: 10px;
}

.single-title {
	--fs: 30;
	font-size: var(--font-size);
	border-bottom: 2px solid var(--color-theme-1-5);
	padding-bottom: 15px;
	margin-bottom: 20px;
	+ .news-category-list {
		margin-bottom: 32px;
	}
}

@media(max-width: 767px) {
	.single-title {
		--fs: 23;
		+ .news-category-list {
			a {
				--fs: 14;
				padding: 2px 8px;
			}
		}
	}
}

/*		資料請求・お問い合わせ		*/
.inquiry-content {
	.form-content {
		border-radius: 0;
		padding: 0;
	}
}

@media(max-width: 767px) {
	.form-content {
		margin-inline: 0;
	}
}