@charset "utf-8";

/*----------------------------
	common
------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

html {
	color: #212121;
}
body {
	font-size: calc((16 / 16) * 1rem);
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
body.menuOpen {
	overflow: clip;
}
@media (max-width: 768px) {
	body {
		font-size: calc((14 / 16) * 1rem);
	}
}
button, input, select, textarea {
	font: inherit;
	color: inherit;
	background: transparent;
	border: none;
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
button {
	cursor: pointer;
}
textarea {
	resize: vertical;
}
a {
	color: #212121;
	text-decoration: none;
}
a,
button {
	transition: opacity 0.3s ease-out;
}
a:hover,
button:hover {
	opacity: 0.7;
}
img {
	max-width: 100%;
	height: auto;
}
img[src$=".svg"] {
	width: 100%;
	height: auto;
}
/* スクリーンリーダー用 */
.srOnly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* スキップリンク：フォーカス時のみ表示 */
.skipLink {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	z-index: 10000;
}
.skipLink:focus {
	position: fixed;
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: calc((12 / 16) * 1rem) calc((16 / 16) * 1rem);
	overflow: visible;
	clip: auto;
	background-color: var(--whiteColor);
	color: var(--baseColor);
	border: solid 2px var(--baseColor);
	font-size: calc((14 / 16) * 1rem);
	font-weight: 500;
	text-decoration: none;
	opacity: 1;
}
/* キーボードフォーカスの可視表示 */
a:focus-visible,
button:focus-visible {
	outline: auto;
	outline-offset: 2px;
}
/* マウス操作時のフォーカスリングを非表示 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex="-1"]:focus:not(:focus-visible) {
	outline: none;
}
.sp {
	display: none;
}
.inner {
	max-width: calc((1220 / 16) * 1rem);
	margin: 0 auto;
	padding: 0 0.695%;
}

@media (max-width: 768px) {
	.sp {
		display: block;
	}
	.pc {
		display: none;
	}
	.inner {
		max-width: 100%;
		padding: 0 5.13%;
	}
}

@media screen and (min-width: 769px){
	a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}

:root {
	--baseColor: #212121;
	--greenColor: #7EA6AC;
	--whiteColor: #fff;
	--redColor: #C44040;
	--borderColor: #DFEEF0;
	--borderColor02: #555;
	--borderColor03: #E2E2E2;
	--bgColor: #DFEEF0;
	--bgColor02: #FAFAFA;
	--bgGrayColor: #F5F5F5;
	--footerBg: #4a4a4a;
}

/*----------------------------
	header
------------------------------*/
header {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--whiteColor);
}
header .headerInner {
	max-width: calc((1440 / 16) * 1rem);
	margin: 0 auto;
	padding: 0 calc((30 / 16) * 1rem);
	min-height: calc((76 / 16) * 1rem);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
header .siteLogo {
	width: calc((160 / 16) * 1rem);
}
header .siteLogo img {
	display: block;
	width: 100%;
}
header .menu {
	display: flex;
	align-items: center;
	gap: 0 calc((20 / 16) * 1rem);
}
header nav#menu .menuList {
	display: flex;
	align-items: center;
}
header nav#menu .menuList a {
	display: block;
	padding: calc((24 / 16) * 1rem) calc((20 / 16) * 1rem);
	font-size: calc((14 / 16) * 1rem);
	font-weight: 500;
}
header nav#menu .menuList .cur {
	color: var(--greenColor);
}

/* language */
header .language {
	position: relative;
}
header .language .buttonMenu {
	width: calc((67 / 16) * 1rem);
	display: flex;
	align-items: center;
	gap: 0 calc((4 / 16) * 1rem);
	padding: calc((2 / 16) * 1rem) calc((8 / 16) * 1rem);
	border: solid 1px var(--borderColor03);
	border-radius: calc((2 / 16) * 1rem);
	font-size: calc((12 / 16) * 1rem);
	font-weight: 500;
	cursor: pointer;
}
header .language .buttonMenu span {
	display: inline-block;
	padding-left: calc((18 / 16) * 1rem);
	position: relative;
}
header .language .buttonMenu span::before {
	content: "";
	width: calc((14 / 16) * 1rem);
	height: calc((14 / 16) * 1rem);
	background: url("/common/img/icn_globe.svg") no-repeat center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
header .language .buttonMenu span::after {
	content: "";
	display: inline-block;
	width: calc((12 / 16) * 1rem);
	height: calc((12 / 16) * 1rem);
	margin-left: calc((4 / 16) * 1rem);
	background: url("/common/img/icn_chevron.svg") no-repeat center;
	background-size: contain;
	vertical-align: middle;
}
header .languageList {
	min-width: calc((120 / 16) * 1rem);
	padding: calc((8 / 16) * 1rem) 0;
	background-color: var(--whiteColor);
	border: solid 1px var(--borderColor03);
	border-radius: calc((2 / 16) * 1rem);
	position: absolute;
	right: 0;
	top: calc(100% + 0.4rem);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.4rem);
	transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
header .language.open .languageList,
header .languageList[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
header .languageList a {
	display: block;
	padding: calc((6 / 16) * 1rem) calc((12 / 16) * 1rem);
	font-size: calc((12 / 16) * 1rem);
	white-space: nowrap;
}

/* sns */
header .snsList {
	display: flex;
	align-items: center;
	gap: 0 calc((20 / 16) * 1rem);
	margin-left: calc((20 / 16) * 1rem);
}
header .snsList li {
	width: calc((30 / 16) * 1rem);
}
header .snsList img {
	display: block;
	width: 100%;
}
@media (max-width: 1269px) {
	header nav#menu .menuList a {
		padding: calc((24 / 16) * 1rem) calc((15 / 16) * 1rem);
	}
}
@media (max-width: 1199px) {
	header nav#menu {
		display: none;
	}
	header .menu {
		width: calc((115 / 16) * 1rem);
	}
	header .menu .snsList {
		display: none;
	}
}
@media (max-width: 768px) {
	header .headerInner {
		max-width: 100%;
		min-height: calc((50 / 16) * 1rem);
		padding: 0 calc((20 / 16) * 1rem);
	}
	header .siteLogo {
		width: calc((94 / 16) * 1rem);
	}
	header .menu {
		gap: 0 calc((15 / 16) * 1rem);
	}
	header .snsList.pc {
		display: none;
	}
}

/*----------------------------
	menuButton
------------------------------*/
header .menuButton {
	display: none;
	width: calc((28 / 16) * 1rem);
	height: calc((28 / 16) * 1rem);
	padding: 0;
	position: relative;
	z-index: 1001;
}
header .menuButton .bar,
header .menuButton .bar::before,
header .menuButton .bar::after {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--greenColor);
	transition: transform 0.3s, opacity 0.3s;
}
header .menuButton .bar {
	position: relative;
}
header .menuButton .bar::before,
header .menuButton .bar::after {
	content: "";
	position: absolute;
	left: 0;
}
header .menuButton .bar::before {
	top: calc((-9 / 16) * 1rem);
}
header .menuButton .bar::after {
	top: calc((9 / 16) * 1rem);
}
.menuOpen header .menuButton .bar {
	background-color: transparent;
}
.menuOpen header .menuButton .bar::before {
	top: 0;
	transform: rotate(35deg);
}
.menuOpen header .menuButton .bar::after {
	top: 0;
	transform: rotate(-35deg);
}
@media (max-width: 1199px) {
	header .menuButton {
		display: block;
	}
	.menuOpen header .menuButton {
		position: fixed;
		top: calc((11 / 16) * 1rem);
		right: calc((20 / 16) * 1rem);
	}
}

/*----------------------------
	nav
------------------------------*/
header nav#nav {
	width: 92%;
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	padding: calc((70 / 16) * 1rem) 5.13% calc((40 / 16) * 1rem);
	background-color: var(--whiteColor);
	z-index: 1000;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease-out;
}
.menuOpen header nav#nav {
	transform: translateX(0);
}
header nav#nav .navList > li {
	border-bottom: solid 1px var(--borderColor);
}
header nav#nav .navList a {
	display: block;
	font-size: calc((14 / 16) * 1rem);
	padding: calc((20 / 16) * 1rem) 0;
	position: relative;
}
header nav#nav .navList a::after {
	content: "";
	width: calc((20 / 16) * 1rem);
	height: calc((20 / 16) * 1rem);
	background: url("/common/img/nav_arrow.svg") no-repeat center;
	background-size: contain;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
header nav#nav .snsList {
	margin-top: calc((35 / 16) * 1rem);
	margin-left: 0;
}
header nav#nav .navList02 {
	margin-top: calc((25 / 16) * 1rem);
	display: flex;
}
header nav#nav .navList02  + .navList02 {
	margin-top: calc((10 / 16) * 1rem);
}
header nav#nav .navList02 li a {
	display: inline-block;
	font-size: calc((13 / 16) * 1rem);
	padding: calc((2 / 16) * 1rem) 0;
	position: relative;
}
header nav#nav .navList02 li:nth-child(even) a {
	padding-left: calc((20 / 16) * 1rem);
}
header nav#nav .navList02 li:nth-child(even) a::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: calc((17 / 16) * 1rem);
	background-color: var(--baseColor);
	position: absolute;
	top: 50%;
	left: calc((10 / 16) * 1rem);
	transform: translateY(-50%);
}


/* overlay */
#overlay {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 997;
	transition: opacity 0.3s;
}
.menuOpen #overlay {
	visibility: visible;
	opacity: 1;
}

/*----------------------------
	breadcrumbs
------------------------------*/
.breadcrumbs {
	background-color: var(--bgColor);
	padding: calc((5 / 16) * 1rem) calc((60 / 16) * 1rem);
}
.breadcrumbs ul {
	max-width: calc((1440 / 16) * 1rem);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 0 calc((20 / 16) * 1rem);
	white-space: nowrap;
	position: relative;
}
.breadcrumbs.over ul {
	overflow: hidden;
}
.breadcrumbs li {
	display: inline;
	font-size: calc((12 / 16) * 1rem);
	position: relative;
}
.breadcrumbs li + li::before {
	content: "";
	width: calc((7 / 16) * 1rem);
	height: calc((7 / 16) * 1rem);
	border-top: solid 1px var(--greenColor);
	border-right: solid 1px var(--greenColor);
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	left: calc((-18 / 16) * 1rem);
	top: 50%;
}
.breadcrumbs li a {
	display: inline-block;
	font-size: calc((11.8 / 16) * 1rem);
	color: var(--greenColor);
	text-decoration: underline;
}
.breadcrumbs a:hover {
	opacity: 0.7;
}
.breadcrumbs.over ul::after {
	content: "…";
	width: calc((27 / 16) * 1rem);
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0 calc((2 / 16) * 1rem);
	background-color: var(--bgColor);
}
@media (max-width: 768px) {
	.breadcrumbs {
		padding: calc((5 / 16) * 1rem) calc((20 / 16) * 1rem);
	}
	.breadcrumbs ul {
		max-width: 100%;
		gap: 0 calc((15 / 16) * 1rem);
	}
	.breadcrumbs li + li::before {
		left: calc((-15 / 16) * 1rem);
	}
}

/*----------------------------
	footer
------------------------------*/
footer {
	background-color: var(--footerBg);
	color: var(--whiteColor);
}
footer .footerInner {
	padding: calc((50 / 16) * 1rem) calc((20 / 16) * 1rem) 0;
	text-align: center;
}
footer .footerRecruit {
	width: calc((300 / 16) * 1rem);
	max-width: 100%;
	margin: 0 auto calc((30 / 16) * 1rem);
}
footer .footerRecruit a,
footer .footerRecruit img {
	display: block;
	width: 100%;
}
footer .footerLogo {
	width: calc((340 / 16) * 1rem);
	margin: 0 auto;
}
footer .footerLogo img {
	display: block;
	width: 100%;
}
footer .footerInfo {
	margin-top: calc((40 / 16) * 1rem);
}
footer .footerInfo .address {
	font-size: calc((14 / 16) * 1rem);
	line-height: 1.79;
}
footer .footerInfo .hours {
	margin-top: calc((15 / 16) * 1rem);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: calc((10 / 16) * 1rem) calc((20 / 16) * 1rem);
	font-size: calc((14 / 16) * 1rem);
	line-height: 1.43;
}
footer .footerInfo .hours li {
	padding-left: calc((17 / 16) * 1rem);
	position: relative;
}
footer .footerInfo .hours li::before {
	content: "";
	width: calc((13 / 16) * 1rem);
	height: calc((13 / 16) * 1rem);
	background: url("/common/img/icn_clock.svg") no-repeat center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
footer .footerInfo .note {
	margin-top: calc((10 / 16) * 1rem);
	font-size: calc((12 / 16) * 1rem);
}
footer .contactBtn {
	width: calc((248 / 16) * 1rem);
	margin: calc((30 / 16) * 1rem) auto 0;
}
footer .contactBtn a {
	display: block;
	padding: calc((17.5 / 16) * 1rem) calc((20 / 16) * 1rem);
	border: solid 1px var(--whiteColor);
	border-radius: calc((6 / 16) * 1rem);
	color: var(--whiteColor);
	font-size: calc((14 / 16) * 1rem);
	letter-spacing: calc((2 / 16) * 1rem);
	position: relative;
}
footer .contactBtn a::after {
	content: "";
	width: calc((20 / 16) * 1rem);
	height: calc((20 / 16) * 1rem);
	background: url("/common/img/icn_arrow.svg") no-repeat center;
	background-size: contain;
	position: absolute;
	top: 50%;
	right: calc((20 / 16) * 1rem);
	transform: translateY(-50%);
}
footer .footerNav {
	margin: calc((50 / 16) * 1rem) auto 0;
	max-width: calc((675 / 16) * 1rem);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc((8 / 16) * 1rem) calc((20 / 16) * 1rem);
	font-size: calc((14 / 16) * 1rem);
}
footer .footerNav li {
	display: inline;
}
footer .footerNav a {
	color: var(--whiteColor);
	padding: calc((2 / 16) * 1rem) 0;
	position: relative;
}
footer .footerNav li + li a::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: calc((18 / 16) * 1rem);
	background-color: var(--whiteColor);
	position: absolute;
	top: 50%;
	left: calc((-10 / 16) * 1rem);
	transform: translateY(-50%);
}
/* 折り返しで行頭になった項目は区切り線を出さない（isRowHead は common.js が付与） */
footer .footerNav li.isRowHead a::before {
	content: none;
}
footer .copyBox {
	margin-top: calc((40 / 16) * 1rem);
	border-top: solid 1px var(--whiteColor);
	height: calc((58 / 16) * 1rem);
	display: flex;
	justify-content: space-between;
	position: relative;
}
footer .copyBox .copy {
	width: calc(100% - ((58 / 16) * 1rem));
	font-size: calc((12 / 16) * 1rem);
	text-align: center;
	color: var(--whiteColor);
	display: flex;
	align-items: center;
	justify-content: center;
}
footer .copyBox .pagetop {
	width: calc((58 / 16) * 1rem);
	padding-top: calc((8 / 16) * 1rem);
	border-left: solid 1px var(--whiteColor);
	background-color: var(--footerBg);
	color: var(--whiteColor);
	font-size: calc((14 / 16) * 1rem);
	font-weight: 500;
	letter-spacing: calc((0.5 / 16) * 1rem);
}
footer .copyBox .pagetop::before {
	content: "";
	display: block;
	width: calc((8 / 16) * 1rem);
	height: calc((8 / 16) * 1rem);
	margin: 0 auto calc((2 / 16) * 1rem);
	border-left: solid 1px var(--whiteColor);
	border-top: solid 1px var(--whiteColor);
	transform: rotate(45deg);
}
@media (max-width: 768px) {
	footer .footerInner {
		max-width: 100%;
		padding: calc((60 / 16) * 1rem) 5.132% 0;
	}
	footer .footerLogo {
		width: calc((340 / 16) * 1rem);
		max-width: 100%;
	}
	footer .footerInfo {
		margin-top: calc((50 / 16) * 1rem);
	}
	footer .footerInfo .hours {
		display: block;
	}
	footer .footerInfo .hours li {
		width: fit-content;
		margin: 0 auto;
	}
	footer .footerInfo .hours li + li {
		margin-top: calc((2 / 16) * 1rem);
	}
	footer .footerNav {
		margin-top: calc((50 / 16) * 1rem);
		max-width: calc((350 / 16) * 1rem);
		margin-left: auto;
		margin-right: auto;
		font-size: calc((13 / 16) * 1rem);
		line-height: 1.5;
		gap: calc((15 / 16) * 1rem) calc((20 / 16) * 1rem);
	}
	footer .copyBox {
		margin-top: calc((60 / 16) * 1rem);
	}
	footer .copyBox .copy {
		font-size: calc((12 / 16) * 1rem);
	}
}
@media (max-width: 379px) {
	footer .footerNav {
		font-size: calc((12 / 16) * 1rem);
	}
}
@media (max-width: 358px) {
	footer .footerNav {
		font-size: calc((11 / 16) * 1rem);
	}
}
@media (max-width: 338px) {
	footer .footerNav {
		font-size: calc((10 / 16) * 1rem);
	}
}


/* fade */
.fade {
	opacity: 0;
	transition: opacity 2s;
}
.fade.view {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.fade {
		opacity: 1;
		transition: none;
	}
}