@charset "utf-8";

:root {
	--black: #303030;
	--black-rgba: 48, 48, 48;
	--black-4c: #4C5057;
	--white: #FFFFFF;
	--white-rgba: 255, 255, 255;
	--red: #E72022;
	--blue: #0035B0;
	--darkblue: #09235F;
	--darkblue-rgba: 9, 35, 95;
	--darkblue-30: #303D94;
	--lightblue: #EAEFF5;
	--lightblue-rgba: 185, 201, 217;
	--lightblue-b9: #B9C9D9;
	--yellow: #FFC858;
	--lightgreen: #6EDCC4;
	--gray: #868686;
	--gray-ce: #CECECE;
	--gray-c6: #C6C6C6;
	--gray-70: #707070;
	--lightgray: #EBE8E8;
	--lightgray-fa: #FAFAFB;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1, h2, h3, h4, h5, h6,
p,
blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
*, 
*::before, 
*::after {
	box-sizing: border-box;
}
html,
body {
	overflow-x: clip;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
body {
	font-size: 16px;
	color: var(--black);
	line-height: 1;
}
:target {
	scroll-margin-top: 105px;
	@media (width <= 800px) {
		scroll-margin-top: 85px;
	}
}
body,
input,
textarea,
button {
    font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}
.en {
	font-family: "Figtree", sans-serif;
}
.en02 {
	font-family: "Rubik", sans-serif;
}
.min {
	font-family: "Zen Old Mincho", serif;	
}
caption,
th,
td {
	font-weight: normal;
	text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	position: relative;
	color: var(--black);
	clear: both;
	line-height: 1;
	margin: 0;
	padding: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
	display: block;
}
p {
	color: var(--black);
	margin-bottom: 15px;
	line-height: 1.75;
	@media (width <= 800px) {
		font-size: 15px;
		line-height: 1.73;
	}
}
ol,
ul {
	list-style: none;
}
ul li,
ol li {
	line-height: 1.8;
	margin: 0 0 5px;
	@media (width <= 800px) {
		font-size: 15px;
		line-height: 1.73;
	}
}
ol {
	list-style: decimal;
	margin: 0 0 20px 1.5em;
}
ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
}
dl {
	margin: 0 0 24px 0;
}
dt,
dd {
	line-height: 1.6;
}
dt {
	font-weight: bold;
}
dd {
	margin: 0;
}
strong {
	font-weight: bold;
}
cite,
i {
	font-style: normal;
}
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
small {
	font-size: smaller;
}
img {
	border: none;
	vertical-align: top;
	max-width: 100%;
	height: auto;
}
video {
	width: 100%;
}
address {
	font-style: normal;
}


.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
a {
	color: var(--black);
	text-decoration: underline;
	@media (width >= 800px) {
		&:hover {
			text-decoration: none;
			&.btn {
				opacity: 0.7;
			}
			.btn-arrow {
				&::before {
					rotate: 45deg;
				}
			}
			.btn-circle {
				&::before {
					translate: 300% -50%; 
				}
				&::after {
					translate: -50% -50%
				}
				&.down {
					&::before {
						translate: -50% 300%;
					}
					&::after {
						translate: -50% -50%;
					}
				}
				&.white {
					border: 2px solid var(--lightgreen);
					&::before,
					&::after {
						background-color: var(--lightgreen);
					}
				}
			}
		}
	}
}

a:focus, *:focus { 
	outline: none; 
}
.pc {
	display: block;
	@media (width <= 800px) {
		display: none;
	}
}
.sp {
	display: none;
	@media (width <= 800px) {
		display: block;
	}
}
.komelist {
	margin: 0 0 30px;
}
.komelist li {
	list-style: none;
	margin-left: 1em;
	&:last-child {
		margin-bottom: 0;
	}
}
.komelist li::before {
	content:"※";
	margin-left: -1em;
}
.nolink {
	pointer-events: none;
}
.youtube,
.accessmap {
	width: 100%;
	aspect-ratio: 16 / 9;
}
iframe {
	width: 100%;
	height: 100%;
}
.attention {
	color: #F53939;
}

article {
	position: relative;
	z-index: 0;
	&.bg-parallax {
		background-color: rgba(var(--lightblue-rgba), 0.3);
		&::before {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			content: "";
			z-index: 0;
			pointer-events: none;
		}
	}
	&.wrapper {
		display: flex;
		padding: 0 88px;
		@media (width <= 1264px) {
			padding-right: 16px;
		}
		@media (width <= 800px) {
			flex-wrap: wrap;
			gap: 24px 0;
			padding: 0 16px;
		}
		.sidebar {
			width: 236px;
			padding: 48px 0;
			@media (width <= 800px) {
				width: 100%;
				padding: 16px 0 0;
			}
			.categorylist {
				margin: 0;
				padding: 0;
				@media (width <= 800px) {
					display: flex;
					flex-wrap: wrap;
					gap: 24px;
				}
				li {
					line-height: 1.5;
					padding: 0;
					margin: 0 0 24px;
					@media (width <= 800px) {
						margin-bottom: 0;
					}
					&:last-child {
						margin-bottom: 0;
					}
					&.current {
						a {
							opacity: 1;
						}
					}
					a {
						position: relative;
						display: inline-block;
						color: var(--black-4c);
						letter-spacing: 0.06em;
						text-decoration: none;
						opacity: 0.4;
						transition: opacity 0.3s ease-out;
						padding-left: 16px;
						@media (width <= 800px) {
							padding-left: 10px;
						}
						@media (width >= 800px) {
							&:hover {
								opacity: 1;
							}
						}
						&::before {
							position: absolute;
							left: 0;
							top: 50%;
							translate: 0 -50%;
							width: 6px;
							height: 6px;
							content: "";
							background-color: var(--darkblue-30);
							border-radius: 50%;
							pointer-events: none;
						}
					}
				}
			}
		}
		.entry-content {
			position: relative;
			width: calc(100% - 236px);
			padding: 56px 110px 115px;
			@media (width <= 1264px) {
				padding: 56px 0 115px 16px;
			}
			@media (width <= 800px) {
				width: 100%;
				padding: 32px 0 48px 16px;
			}
			&::before {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 100%;
				content: "";
				background-color: var(--lightblue);
				pointer-events: none;
				z-index: 0;
			}
			.cbox {
				margin: 0;
			}
		}
	}
}
section {
	position: relative;
}
.cbox {
	width: calc(100% - 30px);
	max-width: 1264px;
	margin: 0 auto;
	&.cbox1046 {
		max-width: 1046px;
	}
	&.cbox1344 {
		max-width: 1344px;
	}
}

table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 0 32px;
	th,
	td {
		text-align: left;
		font-size: 16px;
		line-height: 1.5;
		vertical-align: top;
		border-bottom: 1px solid var(--gray);
		@media (width <= 800px) {
			font-size: 14px;
			line-height: 1.875;
		}
	}
	th {
		color: var(--black);
		width: 215px;
		font-weight: 500;
		padding: 25px 20px 25px 0;
		@media (width <= 800px) {
			width: 85px;
			padding: 20px 0;
		}
	}
	td {
		width: calc(100% - 215px);
		padding: 25px 0;
		@media (width <= 800px) {
			width: calc(100% - 85px);
			padding: 20px 0;
		}
	}
}


.btn-center {
	display: flex;
	justify-content: center;
}
.btn {
	position: relative;
	display: inline-block;
	color: var(--blue);
	font-family: "Figtree", sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: -0.01em;
	transition: opacity 0.3s ease-out;
	@media (width <= 800px) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 197px;
		height: 57px;
		border-radius: 9999px;
		margin: 0 auto;
	}
	&.white {
		.btn-text {
			color: var(--white);
			&::before {
				background-color: var(--white);
			}
			.btn-arrow {
				&::before {
					background-color: var(--white);
				}
			}
		}
	}
	.btn-text {
		position: relative;
		display: inline-block;
		padding: 0 35px 0 10px;
		z-index: 2;
		&::before {
			position: absolute;
			left: 0;
			top: 50%;
			translate: 0 -50%;
			width: 4px;
			height: 4px;
			background-color: var(--blue);
			border-radius: 50%;
			content: "";	
		}
		.btn-arrow {
			top: 50%;
			right: 0;
			translate: 0 -50%;
		}
	}
}
.btn-arrow {
	position: absolute;
	width: 17px;
	height: 17px;
	&::before {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: var(--blue);
		mask-image: url(../img/arrow.svg);
		mask-position: left top;
		mask-repeat: no-repeat;
		mask-size: 17px 17px;
		content: "";
		transition: rotate 0.3s ease-out;
	}
	&.white {
		&::before {
			background-color: var(--white);
		}
	}
}
.blur,
.bg-blur {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	mask-image: linear-gradient(to right, black 100%, transparent 100%);
	pointer-events: none;
}
.blur {
	backdrop-filter: blur(10px) brightness(105%);
	z-index: 0;
}
.bg-blur {
	background-color: rgba(var(--white-rgba), 0.05);
	z-index: 1;
}
.t-blue {
	color: var(--blue);
}
.bg-white {
	background-color: var(--white);
}
.bg-lb {
	background-color: rgba(185,201,217, 0.3);
}
.bg-db {
	background-color: var(--darkblue);
}
.btn-file {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--blue);
	font-size: 14px;
	font-weight: 500;
	height: 50px;
	background-color: rgba(185,201,217,0.3);
	border-radius: 9999px;
	padding: 0 60px 0 24px;
	.btn-circle {
		right: 12px;
	}
}
.btn-pdf {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 90px;
	max-width: 324px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	background-color: rgba(var(--lightblue-rgba), 0.3);
	@media (width <= 800px) {
		max-width: inherit;
	}
	.btn-text {
		position: relative;
		display: inline-block;
		background-image: url(../img/icon_pdf.svg);
		background-repeat: no-repeat;
		background-position: left cente;
		padding: 3px 32px 3px 24px;
	}
}
.btn-circle {
	position: absolute;
	top: 50%;
	right: 0;
	translate: 0 -50%;
	width: 60px;
	height: 60px;
	background-color: var(--blue);
	border-radius: 50%;
	pointer-events: none;
	transition: all 0.3s ease-out;
	overflow: hidden;
	&::before,
	&::after  {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 17px;
		height: 9px;
		translate: -50% -50%;
		content: "";
		background-color: var(--white);
		mask-image: url(../img/arrow_r.svg);
		mask-repeat: no-repeat;
		mask-position: center center;
		mask-size: cover;
		transition: all 0.3s ease-out;
	}
	&::after  {
		translate: -300% -50%;
	}
	&.down {
		width: 24px;
		height: 24px;
		&::before,
		&::after {
			width: 10px;
			height: 10px;
			mask-image: url(../img/arrow_d.svg);
		}
		&::after {
			translate: -50% -300%;
		}
	}
	&.left {
		left: 0;
		right: auto;
		rotate: -180deg;
	}
	&.white {
		background: none;
		border: 2px solid var(--white);
	}
}
.tel-content {
	border-top: 1px solid var(--lightgray);
	border-bottom: 1px solid var(--lightgray);
	padding: 16px 0;
	margin-bottom: 12px;
	@media (width <= 800px) {
		padding: 8px 0;
	}
	p {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 24px 16px;
		line-height: 1.5;
		margin: 0;
		@media (width <= 800px) {
			flex-direction: column;
			gap: 8px 0;
			align-items: flex-start;
			font-size: 14px;
		}
	}
}
.icon-tel {
	display: inline-block;
	background-image: url(../img/icon_tel.svg);
	background-repeat: no-repeat;
	background-position: left 65%;
	padding-left: 28px;
}
.icon-fax {
	display: inline-block;
	background-image: url(../img/icon_fax.svg);
	background-repeat: no-repeat;
	background-position: left 65%;
	padding-left: 28px;
}
.address-text {
	line-height: 1.5;
	margin-bottom: 16px;
	@media (width <= 800px) {
		font-size: 14px;
		line-height: 1.7;
		margin-bottom: 8px;
	}
}
.office-text {
	p {
		line-height: 1.5;
		margin-bottom: 25px;
		&:last-child {
			margin-bottom: 0;
		}
		.link {
			display: inline-block;
			color: var(--darkblue-30);
			background-image: url(../img//icon_link.svg);
			background-repeat: no-repeat;
			background-position: right 60%;
			padding-right: 22px;
		}
	}
}

button {
	position: relative;
	cursor: pointer;
	border: none;
	background: none;
	padding: 0;
	z-index: 1;
	@media (width >= 800px) {
		&:hover {
			.btn-circle {
				&::before {
					translate: 300% -50%; 
				}
				&::after {
					translate: -50% -50%
				}
			}
		}
	}
}




/*
overlay
*/
.overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--black);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 0.3s ease-out;
	pointer-events: none;
	z-index: 4;
	&.active {
		opacity: 1;
		pointer-events: auto;
	}
}



/*
header
*/
.site-header {
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 96px;
	z-index: 5;
	background-color: rgba(var(--white-rgba), 0.77);
	transition: all 0.3s ease-out;
	@media (width <= 1000px) {
		height: 72px;
	}
	&.open-header {
		background-color: var(--white);
	}
	&.white {
		@media (width >= 1000px) {
			background: none;
		}
		.site-title {
			a {
				@media (width >= 1000px) {
					background-color: var(--white);
					mask-image: url("../img/logo_white.svg");
					mask-repeat: no-repeat;
					mask-position: left top;
					mask-size: 240px 32px;
					img {
						opacity: 0;
					}
				}
			}
		}
		.language {
			@media (width >= 1000px) {
				&::before {
					background-color: var(--white);
				}
				ul {
					li {
						&.jp {
							&::after {
								color: var(--white);
							}
						}
						&.current {
							a {
								&::after {
									background-color: var(--white);
								}
							}
						}
						a {
							color: var(--white);
						}
					}
				}
			}
		}
		.mainmenu {
			ul {
				li {
					a {
						color: var(--white);
					}
				}
			}
		}
		&.open-header {
			background-color: var(--white);
			.site-title {
				a {
					@media (width >= 1000px) {
						background: none;
						mask-image: none;
						img {
							opacity: 1;
						}
					}
				}
			}
			.language {
				@media (width >= 1000px) {
					&::before {
						background-color: var(--darkblue);
					}
					ul {
						li {
							&.jp {
								&::after {
									color: var(--darkblue);
								}
							}
							&.current {
								a {
									&::after {
										background-color: var(--darkblue);
									}
								}
							}
							a {
								color: var(--darkblue);
							}
						}
					}
				}
			}
			.mainmenu {
				ul {
					li {
						a {
							color: var(--darkblue);
						}
					}
				}
			}
		}
	}
	.site-title {
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 72px;
		translate: 0 -50%;
		width: 240px;
		height: 32px;
		@media (width <= 1200px) {
			left: 25px;
		}
		@media (width <= 1000px) {
			width: 200px;
			height: auto;
		}
		a {
			display: block;
			width: 100%;
			height: 100%;
			img {
				opacity: 1;
				transition: opacity 0.3s ease-out;
			}
		}
	}
}


/*
mainmenu
*/
.mainmenu {
	position: fixed;
	top: 50px;
	right: 520px;
	width: auto;
	display: flex;
	align-items: center;
	z-index: 3;
	@media (width <= 1200px) {
		right: 415px
	}
	@media (width <= 1000px) {
		display: none;
	}
	ul {
		display: flex;
		align-items: center;
		gap: 0 32px;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		@media (width <= 1200px) {
			gap: 0 20px;
		}
		li {
			position: relative;
			line-height: 1;
			margin: 0;
			padding: 0;
			&.current-page-ancestor,
			&.current-menu-item,
			&.active {
				a {
					color: var(--blue);
				}
			}
			a {
				display: inline-block;
				color: var(--darkblue);
				font-size: 15px;
				font-weight: 500;
				text-decoration: none;
				transition: color 0.3s ease-out;
				@media (width >= 1000px) {
					&:hover {
						color: var(--blue);
					}
				}
				@media (width <= 1200px) {
					font-size: 14px;
				}
			}
		}
	}
}


/*
menu-search
*/
.menu-search {
	position: absolute;
	top: 44px;
	right: 345px;
	@media (width <= 1200px) {
		right: 245px;
	}
	@media (width <= 1000px) {
		display: none;
	}
}
.spmenu-search {
	margin-bottom: 24px;
}
.searchform {
	display: flex;
	width: 100%;
	input {
		width: calc(100% - 60px);
		border-right: none;
		border-radius: 8px 0 0 8px;
		padding: 15px 18px;
		@media (width <= 1000px) {
			width: calc(100% - 50px);
			padding: 11px 18px;
		}
	}
	button {
		display: block;
		width: 60px;
		border: 1px solid var(--gray-ce);
		border-left: none;
		border-radius: 0 8px 8px 0;
		background-color: var(--white);
		background-image: url(../img/btn_search.svg);
		background-repeat: no-repeat;
		background-position: center center;
		@media (width <= 800px) {
			width: 50px;
		}
	}
	&.msearch {
		max-width: 143px;
		@media (width <= 1000px) {
			max-width: inherit;
		}
		input {
			width: calc(100% - 40px);
			height: 29px;
			font-size: 15px;
			border-radius: 28px 0 0 28px;
			padding: 0 16px;
			@media (width <= 1000px) {
				height: 37px;
			}
		}
		button {
			width: 40px;
			border-radius: 0 28px 28px 0;
			background-size: 15px 15px;
			@media (width <= 800px) {
			}
		}
	}

}





/*
language
*/
.language {
	position: absolute;
	top: 51px;
	right: 238px;
	padding-left: 22px;
	z-index: 3;
	@media (width <= 1200px) {
		right: 145px;
	}
	@media (width <= 1000px) {
		top: 32px;
		right: 80px;
		padding-left: 0;
	}
	&::before {
		position: absolute;
		left: 0;
		top: 50%;
		translate: 0 -53%;
		width: 18px;
		height: 18px;
		background-color: var(--darkblue);
		mask-image: url(../img/icon_language.svg);
		mask-repeat: no-repeat;
		mask-position: left center;
		content: "";
		transition: background-color 0.3s ease-out;
		@media (width <= 1000px) {
			display: none;
		}
	}
	ul {
		display: flex;
		margin: 0;
		padding: 0;
		li {
			line-height: 1;
			margin: 0;
			padding: 0;
			&.current {
				a {
					font-weight: 700;
					&::after {
						position: absolute;
						left: 50%;
						bottom: -2px;
						translate: -50% 0;
						width: 3px;
						height: 3px;
						background-color: var(--darkblue);
						border-radius: 50%;
						content: "";
						transition: background-color 0.3s ease-out;
					}
				}
			}
			&.jp {
				margin-right: 5px;
				&::after {
					display: inline-block;
					color: var(--darkblue);
					content: "/";
					padding-left: 5px;
					transition: color 0.3s ease-out;
				}
			}
			a {
				position: relative;
				color: var(--darkblue);
				font-size: 16px;
				text-decoration: none;
				transition: color 0.3s ease-out;
				@media (width <= 1000px) {
					font-size: 14px;
				}
			}
		}
	}
}


/*
mcontact
*/
.mcontact {
	position: absolute;
	top: 32px;
	right: 72px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 133px;
	height: 48px;
	color: var(--white);
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	background-color: var(--red);
	border-radius: 4px;
	z-index: 3;
	@media (width <= 1200px) {
		right: 15px;
		width: 120px;
	}
	@media (width <= 1000px) {
		display: none;
	}
}


/*
submenubox
*/
.submenubox {
	display: none;
	position: fixed;
	right: 0;
	top: 5px;
	overflow: hidden;
	width: 735px;
	height: 135px;
	background-color: var(--white);
	margin: 0 auto;
	border-radius: 0 0 0 8px;
	transition: top 0.3s ease-out;
	pointer-events: none;
	&.active {
		top: 96px;
		pointer-events: auto;
	}
	.menubox {
		position: relative;
		display: flex;
		flex-direction: column;
		height: 100%;
		padding-left: 224px;
		.menu-img {
			position: absolute;
			top: 50%;
			left: 24px;
			translate: 0 -50%;
			width: 183px;
			img {
				border-radius: 4px;
			}
		}
		.menu-title {
			width: 100%;
			color: var(--blue);
			font-size: 14px;
			font-weight: 500;
			margin-bottom: 10px;
			padding-top: 32px;
		}
		nav {
			width: 375px;
			ul {
				display: flex;
				flex-wrap: wrap;
				gap: 10px 24px;
				width: 100%;
				margin: 0;
				padding: 0;
				li {
					line-height: 1.1;
					margin: 0;
					padding: 0;
					a {
						position: relative;
						font-size: 14px;
						transition: color 0.3s ease-out;
						@media (width >= 800px) {
							&:hover {
								color: var(--blue);
							}
						}
					}
				}
			}
		}
	}
}



/*
toggle
*/
#toggle {
	display: none;
	@media (width <= 1000px) {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 72px;
		height: 72px;
		border: none;
		background: none;
		padding: 0;
		cursor: pointer;
		z-index: 10;
	}
}
.menu-trigger,
.menu-trigger span {
	@media (width <= 1000px) {
		display: inline-block;
		transition: all 0.4s;
	}
}
.menu-trigger {
	@media (width <= 1000px) {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		outline: none;
		span {
			display: block;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			background-color: var(--black);
			width: 44px;
			height: 1px;
			&:nth-of-type(1) {
				top: 32px;
			}
			&:nth-of-type(2) {
				top: 40px;
			}
		}
		&.active {
			:nth-of-type(1) {
				-webkit-transform: translate(-50%,4px) rotate(30deg);
				transform: translate(-50%,4px) rotate(30deg);
			}
			:nth-of-type(2) {
				-webkit-transform: translate(-50%,-4px) rotate(-30deg);
				transform: translate(-50%,-4px) rotate(-30deg);
			}
		}
	}
}


/*
spmainmenu
*/
.spmainmenubox {
	display: none;
	@media (width <= 1000px) {
		display: block;
		position: fixed;
		top: 72px;
		left: 0;
		width: 100%;
		height: calc(100dvh - 72px);
		background-color: var(--darkblue);
		padding-top: 40px;
		z-index: 10;
		transition: all 0.3s ease-out;
		opacity: 0;
		pointer-events: none;
		&.open {
			opacity: 1;
			pointer-events: auto;
		}
	}
	.spmenubox {
		@media (width <= 1000px) {
			position: relative;
			width: 100%;
			height: 100%;
			padding: 0 56px;
			overflow-y: auto;
			z-index: 2;
		}
		.spmainmenu {
			@media (width <= 1000px) {
				padding: 0 0 32px;
				ul {
					width: 100%;
					margin: 0;
					padding: 0;
					li {
						width: 100%;
						margin: 0 0 15px;
						padding: 0 0 15px;
						border-bottom: 1px solid rgba(var(--white-rgba), 0.4);
						line-height: 1.4;
						&:last-child {
							margin-bottom: 0;
							padding-bottom: 0;
							border: none;
						}
						a {
							position: relative;
							display: inline-block;
							color: var(--white);
							font-size: 16px;
							font-weight: 700;
							text-decoration: none;
						}
						ul {
							margin-top: 16px;
							li {
								margin-bottom: 16px;
								padding: 0;
								border: none;
								&:last-child {
									margin-bottom: 0;
								}
								a {
									position: relative;
									font-size: 15px;
									font-weight: 400;
									padding-left: 8px;
									&::before {
										position: absolute;
										left: 0;
										top: 50%;
										translate: 0 -50%;
										width: 5px;
										height: 1px;
										background-color: var(--white);
										content: "";
									}
								}
							}
						}
					}
				}
			}
		}
		.spmcontact {
			@media (width <= 1000px) {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 48px;
				color: var(--white);
				font-size: 15px;
				font-weight: 700;
				text-decoration: none;
				letter-spacing: 0.04em;
				border: 1px solid var(--white);
				margin-bottom: 50px;
			}
		}
	}
}


/*
pagetitle
*/
.page-title {
	position: relative;
	width: 100%;
	padding: 0 88px;
	z-index: 2;
	@media (width <= 800px) {
		padding: 0 15px;
	}
	.breadcrumb {
		position: relative;
		display: flex;
		width: 100%;
		padding: 175px 0 50px;
		@media (width <= 800px) {
			padding: 155px 0 45px;
		}
		p {
			position: relative;
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			line-clamp: 1;
			font-size: 12px;
			letter-spacing: 0.05em;
			margin: 0;
			z-index: 1;
			span {
				font-size: 12px;
				margin: 0 12px;
				&.bhome {
					margin-left: 0;
				}
				span {
					margin: 0;
				}
			}
		}
	}
	h1 {
		margin-bottom: 25px;
		@media (width <= 800px) {
			margin-bottom: 15px;
		}
		.jp {
			display: flex;
			align-items: center;
			font-size: 18px;
			font-weight: 700;
			line-height: 1.44;
			margin-bottom: 10px;
			gap: 0 8px;
			.subtitle {
				display: inline-block;
				font-size: 12px;
				font-weight: 400;
			}
		}
		.en {
			display: block;
			color: var(--blue);
			font-size: 80px;
			font-weight: 600;
			text-transform: capitalize;
			line-height: 1.12;
			@media (width <= 800px) {
				font-size: 56px;
				line-height: 1.2;
			}
		}
	}
}
h2 {
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 24px;	
}
h3 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	padding: 0;
	margin-bottom: 20px;
}
h4 {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 10px;
}
h5 {
	font-size: 16px;
	font-weight: 700;
}
img.alignleft {
	margin: 0 24px 12px 0;
}
img.alignright {
	margin: 0 0 12px 24px;
}
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	max-width: 100%;
	height: auto;
	margin-bottom: 40px;
	img {
		width: 100%;
	}
	.wp-caption-text {
		width: auto;
		text-align: left;
		font-size: 14px;
		line-height: 1.6;
		margin-top: 10px;
		@media (width <= 800px) {
			font-size: 12px;
		}		
	}
}


/*
logo-page
*/
.logo-page {
	position: absolute;
	left: -780px;
	top: -258px;
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 0;
	@media (width <= 800px) {
		left: -841px;
	}
}


/*
page-line
*/
.page-line {
	position: relative;
	width: calc(100% - 176px);
	height: 1px;
	background-color:  var(--lightgray);
	margin: 0 auto 45px;
	mix-blend-mode: multiply;
	z-index: 1;
	@media (width <= 800px) {
		width: calc(100% - 30px);
		margin-bottom: 16px;
	}
	&.none {
		background: none;
		@media (width <= 800px) {
			background-color:  var(--lightgray);
		}
	}
}


/*
parallax
*/
.parallax {
	position: absolute;
	right: 0;
	top: -323px;
	width: 56vw;
	height: 450px;
	z-index: 0;
	overflow: hidden;
	@media (width <= 800px) {
		position: relative;
		right: auto;
		top: auto;
		width: calc(100% - 30px);
		height: 228px;
		margin: 0 auto 38px;
	}
	img {
		position: absolute;
		top: 0%;
		left: 0;
		width: 100%;
		height: 140%;
		min-height: 450px;
		object-fit: cover;
		will-change: transform;
		@media (width <= 800px) {
			top: -40px;
			min-height: inherit;
		}
	}
}


/*
fadein
*/
.fadein {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	will-change: opacity, transform;
}
.fadein.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/*
read-top
*/
.read-top {
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 88px;
	margin-bottom: 40px;
	@media (width <= 800px) {
		flex-wrap: wrap;
		gap: 12px 0;
		margin-bottom: 24px;
		padding: 0 15px;
	}
	p {
		margin: 0;
		&.read-l {
			width: 35.6%;
			color: var(--darkblue);
			font-size: 24px;
			line-height: 2;
			@media (width <= 800px) {
				width: 100%;
				font-size: 20px;
			}
		}
		&.read-s {
			width: 57.8%;
			@media (width <= 800px) {
				width: 100%;
			}
		}
	}
}


/*
newslist
*/
.newslist {
	margin: 0;
	padding: 0;
	li {
		margin: 0;
		padding: 0;
		a {
			position: relative;
			display: block;
			color: var(--black);
			text-decoration: none;
			border-bottom: 1px solid #777777;
			padding: 30px 0;
			@media (width <= 800px) {
				padding: 15px 0;
			}
			&::after {
				position: absolute;
				left: 0;
				bottom: -1px;
				width: 0;
				height: 1px;
				content: "";
				background-color: var(--blue);
				transition: width 0.3s ease-out;
			}
			@media (width >= 800px) {
				&:hover {
					&::after {
						width: 100%;
					}
					.entry-title {
						opacity: 0.7;
					}
				}
			}
			.entry-title {
				position: relative;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				transition: opacity 0.3s ease-out;
				padding-right: 70px;
				@media (width <= 800px) {
					font-size: 15px;
					line-height: 1.7;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					padding-right: 35px;
				}
			}
			.btn-arrow {
				top: 50%;
				translate: 0 -50%;
				right: 32px;
				width: 13px;
				height: 13px;
				@media (width <= 800px) {
					right: 0;
				}
				&::before {
					mask-size: 13px 13px;
				}
			}
		}
	}
}
.entry-head {
	display: flex;
	align-items: center;
	gap: 0 12px;
	margin-bottom: 8px;
	.entry-date {
		display: inline-block;
		color: var(--black-4c);
		font-family: "Rubik", sans-serif;
		font-size: 18px;
		font-weight: 300;
		@media (width <= 800px) {
			font-size: 16px;
		}
	}
	.entry-cat {
		display: inline-flex;
		align-items: center;
		color: var(--darkblue-30);
		font-size: 14px;
		background-color: var(--white);
		border-radius: 4px;
		padding: 1px 12px;
		@media (width <= 800px) {
			padding: 0 12px;
		}
	}
}


/*
taglist
*/
.taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	@media (width <= 800px) {
		margin-bottom: 24px;
	}
	li {
		line-height: 1;
		margin: 0;
		padding: 0;
		a {
			display: inline-flex;
			font-size: 14px;
			text-decoration: none;
			background-color: var(--lightgray);
			border-radius: 8px;
			padding: 6px 8px;
		}
	}
}



/*
wp-pagenavi
*/
.wp-pagenavi {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
	margin: 80px 0 0;
	@media (width <= 800px) {
		margin-top: 48px;
	}
	a,
	span {
		position: relative;
		display: inline-block;
		color: var(--gray-ce);
		font-family: "Rubik", sans-serif;
		font-size: 18px;
		font-weight: 400;
		letter-spacing: 0.04em;
		line-height: 1;
		border: none!important;
		text-decoration: none;
		transition: all 0.3s ease-out;
		padding: 0!important;
		margin: 0!important;
	}
	a {
		@media (width >= 800px) {
			&:hover {
				color: var(--black-4c);
			}
		}
		&.prevpostslink,
		&.nextpostslink {
			width: 24px;
			height: 24px;
			background-color: var(--blue);
			border-radius: 50%;
			overflow: hidden;
			font-size: 0;
			@media (width >= 800px) {
				&:hover {
					&::before {
						translate: 300% -50%; 
					}
					&::after {
						translate: -50% -50%
					}
				}
			}
			&::before,
			&::after {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 12px;
				height: 6px;
				background-image: url(../img/arrow_r.svg);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: cover;
				content: "";
				transition: translate 0.3s ease-out;
			}
			&::before {
				translate: -50% -50%;
			}
			&::after {
				translate: -350% -50%;
			}
		}
	}
	span {
		&.current {
			color: var(--black-4c);
			font-weight: 500;
		}
	}
	.pages {
		display: none;
	}
}




/*
form
*/
.contact-content {
	.sent {
		display: none;
	}
}
input,
select,
textarea {
	padding: 12px 18px;
	font-size: 16px;
	border: 1px solid var(--gray-ce);
	border-radius: 6px;
	background-color: var(--white)
}
select {
	position: relative;
	appearance: none;
	-webkit-text-fill-color: var(--black);
	padding: 16px 18px;
	background-image: url(../img/arrow_d_gray.svg);
	background-repeat: no-repeat;
	background-position: right 24px top 50%;
}



button,
input {
    line-height: normal;
}
textarea {
	vertical-align: top;
}
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="hidden"],
input[type="image"],
input[type="color"] {
	padding: 0;
}
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"],
select,
textarea {
	width: 100%;
}
input#your-address {
	display: block;
	margin-top: 16px;
}
input#your-zip {
	width: 50%;
}
input#your-tel,
input#your-fax {
	width: 65%;
}
input.your-free {
	margin: 18px 0;
}
::placeholder {
	color: var(--gray-c6);
}
input[type="checkbox"] {
    position: relative;
    cursor: pointer;
    width: 18px;
    height: 18px;
    margin: 0 6px 0 0;
	border: 1px solid var(--gray-ce);
	border-radius: 2px;
    background-color: var(--white);
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
	&:checked {
		&::before {
			position: absolute;
			left: 50%;
			top: 50%;
			rotate: 38deg;
			translate: -50% -60%;
			width: 6px;
			height: 12px;
			border-right: 2px solid var(--black);
			border-bottom: 2px solid var(--black);
			content: "";
		}
	}
}
.wpcf7-not-valid-tip {
	font-size: 14px;
	font-weight: 500;
}
.required {
	&::after {
		display: inline-block;
		position: relative;
		color: #F53939;
		font-size: 16px;
		line-height: 1.4;
		vertical-align: baseline;
		content: "*";
	}
}
.wpcf7-form-control-wrap {
	.wpcf7-radio,
	.wpcf7-checkbox {
		display: block;
	}
}
.wpcf7-checkbox,
.wpcf7-radio {
	display: flex!important;
	flex-wrap: wrap;
	.wpcf7-list-item {
		display: inline-block;
		margin: 0;
	}
	label {
		display: flex;
		align-items: center;
		font-size: 16px;
		line-height: 1.3;
		@media (width <= 800px) {
			font-size: 14px;
		}
	}
	.wpcf7-list-item-label {
		cursor: pointer;
	}
}
.wpcf7-checkbox {
	gap: 30px 0;
	@media (width <= 800px) {
		gap: 16px 0;
	}
	.wpcf7-list-item {
		width: 100%;
	}
}
.wpcf7-list-item {
	label {
		cursor: pointer;
	}
}
.contact-privacy {
	border-top: 1px solid var(--gray-ce);
	padding-top: 24px;
	margin: 24px 0 40px;
	@media (width <= 800px) {
		margin: 16px 0 0;
	}
	p {
		font-size: 15px;
		font-weight: 300;
		margin-bottom: 40px;
		@media (width <= 800px) {
			font-size: 14px;
			margin-bottom: 24px;
		}
		a {
			color: var(--blue);
		}
	}
	.doui {
		.wpcf7-list-item {
			margin-left: 0;
		}
	}
}
#btn_contact {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px 0;
	max-width: 282px;
	margin-top: 48px;
	@media (width <= 800px) {
		margin: 32px auto 0;
	}
	input[type="submit"],
	input[type="button"] {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		max-width: 282px;
		text-align: left;
		height: 88px;
		font-size: 18px;
		background-color: var(--white);
		border-radius: 8px;
		border: 1px solid var(--gray-ce);
		padding: 0 0 0 22px;
		margin: 0;
		cursor: pointer;
		@media (width <= 800px) {
			height: 64px;
			font-size: 16px;
		}
	}
	.btn-circle {
		right: 40px;
		width: 38px;
		height: 38px;
		@media (width <= 800px) {
			right: 20px;
			width: 32px;
			height: 32px;
			&::before,
			&::after {
				width: 12px;
				height: 6px;
			}
		}
	}
	.btn-confirm,
	.btn-back {
		position: relative;
		height: 88px;
		@media (width >= 800px) {
			&:hover {
				.btn-circle {
					&::before {
						translate: 300% -50%; 
					}
					&::after {
						translate: -50% -50%
					}
				}
			}
		}
		@media (width <= 800px) {
			height: 64px;
		}
	}
	.btn-back {
		input[type="button"] {
			padding-left: 72px;
			@media (width <= 800px) {
				padding-left: 64px;
			}
		}
		.btn-circle {
			&.left {
				left: 20px;
			}
		}
	}
}
.btn-confirm:has(input[type="button"]:disabled) {
	pointer-events: none;
	.btn-circle {
		opacity: 0.5;
	}
}


/*
related-pages
*/
.related-pages {
	width: calc(100% - 30px);
	max-width: 1264px;
	margin: 80px auto 0;
	@media (width <= 800px) {
		width: 100%;
		margin-top: 64px;
		padding-left: 40px;
	}
	.related-page-content {
		position: relative;
		display: flex;
		justify-content: space-between;
		width: 100%;
		max-width: 890px;
		padding: 64px 0 64px 104px;
		margin: 0 0 0 auto;
		@media (width <= 800px) {
			flex-direction: column;
			gap: 35px 0;
			padding: 32px 32px 40px;
		}
		&::before {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100%;
			background-color: var(--lightblue);
			pointer-events: none;
			content: "";
			z-index: 0;
		}
		h2 {
			margin: 0;
			.jp {
				display: block;
				color: var(--blue);
				font-size: 16px;
				margin-bottom: 8px;
				@media (width <= 800px) {
					font-size: 15px;
				}
			}
			.en {
				display: block;
				font-size: 40px;
				font-weight: 600;
				line-height: 1;
				@media (width <= 800px) {
					font-size: 32px;
				}
			}
		}
		ul {
			width: 100%;
			max-width: 390px;
			margin: 30px 0 0;
			padding: 0;
			@media (width <= 800px) {
				max-width: inherit;
				margin: 0;
				padding-left: 32px;
			}
			li {
				width: 100%;
				line-height: 1.47;
				margin: 0 0 30px;
				padding: 0;
				@media (width <= 800px) {
					margin-bottom: 25px;
				}
				&:last-child {
					margin-bottom: 0;
				}
				a {
					position: relative;
					display: block;
					font-size: 23px;
					font-weight: 500;
					text-decoration: none;
					border-bottom: 1px solid var(--gray);
					padding-bottom: 5px;
					transition: color 0.3s ease-out;
					@media (width >= 800px) {
						&:hover {
							color: var(--blue);
						}				
					}
					@media (width <= 800px) {
						font-size: 18px;
					}
					.btn-arrow {
						right: 0;
						bottom: 10px;
					}
				}
			}
		}
	}
}



/*
btn-entry
*/
.btn-entry {
    position: fixed;
    right: 32px;
    bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    color: var(--white);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    background-color: var(--blue);
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s ease-out;
    @media (width >= 800px) {
        &:hover {
            background-color: var(--lightgreen);
        }
    }
    @media (width <= 800px) {
        display: none;
    }
}

/*
recruit-link
*/
.recruit-link {
	display: flex;
	width: 100%;
	background-color: var(--white);
	z-index: 1;
	@media (width <= 800px) {
		flex-direction: column;
	}
	.recruit-link-content {
		position: relative;
		display: flex;
		width: 100%;
		height: 300px;
		text-decoration: none;
		@media (width <= 800px) {
			height: 224px;
			margin-bottom: 1px;
		}
		&::before,
		&::after {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			content: "";
			pointer-events: none;
		}
		&::before {
			background-repeat: no-repeat;
			background-position: center top;
			background-size: cover;
			z-index: 0;
		}
		&::after {
			background-color: var(--darkblue);
			mix-blend-mode: multiply;
			opacity: 0.75;
			z-index: 1;
		}
		&.e01 {
			&::before {
				background-image: url(../img/bg_new_graduate.jpg);
				@media (width <= 800px) {
					background-image: url(../img/bg_new_graduate_sp.jpg);
				}
			}
			.btn-circle {
				width: 30px;
				height: 30px;
				&::before,
				&::after {
					width: 10px;
					height: 8px;
					mask-size: 10px 8px;
				}
			}
		}
		&.e02 {
			&::before {
				background-image: url(../img/bg_career.jpg);
				@media (width <= 800px) {
					background-image: url(../img/bg_career_sp.jpg);
				}
			}
			.detail {
				bottom: 22px;
				@media (width <= 800px) {
					bottom: 14px;
				}
			}
			.btn-circle {
				top: auto;
				right: 30px;
				bottom: 26px;
				translate: 0 0;
				z-index: 2;
				@media (width <= 800px) {
					right: 0;
					bottom: auto;
					top: 50%;
					translate: 0 -50%;
					width: 30px;
					height: 30px;
					&::before,
					&::after {
						width: 10px;
						height: 8px;
						mask-size: 10px 8px;
					}
				}
			}
		}
		.detail {
			position: absolute;
			left: 48px;
			bottom: 14px;
			z-index: 2;
			@media (width <= 800px) {
				left: 14px;
				bottom: 14px;
			}
		}
		h2 {
			color: var(--white);
			margin: 0;
			.en {
				display: block;
				font-size: 36px;
				line-height: 1;
				letter-spacing: 0.064em;
				@media (width <= 800px) {
					font-size: 27px;
				}
			}
			.jp {
				position: relative;
				display: block;
				font-size: 18px;
				font-weight: 500;
				margin-top: 5px;
				@media (width <= 800px) {
					display: inline-block;
					margin-top: 16px;
					padding-right: 45px;
				}
			}
		}
		ul {
			display: flex;
			gap: 0 11%;
			margin: 0;
			padding: 10px 0 0;
			@media (width <= 800px) {
				flex-direction: column;
				gap: 20px 0;
				padding: 16px 0 0;
			}
			li {
				margin: 0;
				padding: 0;
				a {
					position: relative;
					display: inline-flex;
					align-items: center;
					color: var(--white);
					font-size: 18px;
					font-weight: 500;
					line-height: 1.5;
					text-decoration: none;
					padding: 0 45px 0 0;
					transition: color 0.3s ease-out;
					@media (width >= 800px) {
						&:hover {
							color: var(--lightgreen);
							&::after {
								width: calc(100% - 45px);
							}
						}
					}
					&::before,
					&::after {
						position: absolute;
						left: 0;
						bottom: 0;
						height: 1px;
						content: "";
						pointer-events: none;
					}
					&::before {
						width: calc(100% - 45px);
						background-color: var(--white);
						z-index: 0;
					}
					&::after {
						width: 0px;
						background-color: var(--lightgreen);
						z-index: 1;
						transition: width 0.3s ease-out;
					}
					&.nolink {
						opacity: 0.5;
					}
				}
			}
		}
	}
}



/*
footer
*/
footer {
	position: relative;
	padding: 86px 0 40px;
	background-color: var(--darkblue);
	z-index: 5;
	@media (width <= 800px) {
		padding: 72px 0 48px;
	}
	.siteinfo {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid var(--white);
		padding-bottom: 80px;
		margin-bottom: 15px;
		@media (width <= 800px) {
			flex-direction: column;
			gap: 45px 0;
			border: none;
			padding-bottom: 0;
			margin-bottom: 44px;
		}
		.l-footer {
			width: 280px;
			@media (width <= 800px) {
				width: 100%;
			}
			.logo-footer {
				background-color: var(--white);
				mask-image: url(../img/logo.svg);
				mask-position: left top;
				mask-repeat: no-repeat;
				mask-size: 240px 32px;
				margin-bottom: 46px;
				@media (width <= 800px) {
					margin-bottom: 30px;
				}
				img {
					opacity: 0;
				}
			}
			p {
				color: var(--white);
				font-size: 14px;
				line-height: 1.4;
				margin: 0;
				@media (width <= 800px) {
					font-size: 13px;
					line-height: 1.5;
				}
			}
		}
		.r-footer {
			display: flex;
			justify-content: space-between;
			width: 54.1%;
			@media (width <= 800px) {
				flex-wrap: wrap;
				width: 100%;
				gap: 35px 0;
			}
			nav {
				width: auto;
				@media (width <= 800px) {
					width: 49%;
				}
				ul {
					margin: 0;
					padding: 0;
					li {
						line-height: 1.5;
						margin: 0;
						padding: 0;
						a {
							display: inline-block;
							color: var(--white);
							font-size: 16px;
							font-weight: 500;
							text-decoration: none;
							transition: opacity 0.3s ease-out;
							@media (width >= 800px) {
								&:hover {
									opacity: 0.7;
								}
							}
							@media (width <= 800px) {
								font-size: 14px;
							}
						}
						ul {
							margin-top: 5px;
							@media (width <= 800px) {
								margin-top: 10px;
							}
							li {
								margin-bottom: 5px;
								@media (width <= 800px) {
									margin-bottom: 10px;
								}
								&:last-child {
									margin-bottom: 0;
								}
								a {
									font-size: 14px;
									font-weight: 400;
								}
							}
						}
					}
				}
			}
		}
	}
	.footer-bottom {
		display: flex;
		justify-content: space-between;
		gap: 0 12px;
		@media (width <= 800px) {
			display: block;
		}
		.footersubmenu {
			@media (width <= 800px) {
				margin-bottom: 40px;
			}
			ul {
				display: flex;
				gap: 0 24px;
				margin: 0;
				padding: 0;
				@media (width <= 800px) {
					flex-direction: column;
					gap: 15px 0;
				}
				li {
					line-height: 1;
					margin: 0;
					padding: 0;
					a {
						display: inline-block;
						color: var(--white);
						font-size: 13px;
						transition: opacity 0.3s ease-out;
						@media (width >= 800px) {
							&:hover {
								opacity: 0.7;
							}
						}
						@media (width <= 800px) {
							font-size: 11px;
						}
					}
				}
			}
		}
		.copyright {
			color: var(--white);
			font-size: 13px;
			font-weight: 300;
			margin: 0;
			@media (width <= 800px) {
				width: calc(100% + 30px);
				text-align: center;
				border-top: 1px solid var(--white);
				margin: 0 0 0 -15px;
				padding: 15px 5px 0;
			}
		}
	}
}