@charset "UTF-8";

html {
	width: 100%;
	height: 100%;
	color: #000;
	margin: 0;
	padding: 0;
	font-feature-settings: "palt" 1;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure {
	margin: 0;
	padding: 0;
}

body{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	line-height: 2;
	counter-reset:number;
	height: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
	-webkit-text-size-adjust: none;
}

table {
	font: 100%;
	font-size: inherit;
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th { text-align:left; }

fieldset,img { border: 0;}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: inherit;
}
address,caption,cite,code,dfn,em,th,var {
	font-style: normal;
	font-weight: inherit;
}
ol,ul { list-style: none;}

q:before,q:after { content:'';}
abbr,acronym {
	border: 0;
	font-variant: normal;
}
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom;}
input,textarea,select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	outline: 0;
}
legend{ color: inherit;}

select,input,button,textarea{ font-family: "Noto Sans JP", sans-serif; }

pre,code,kbd,samp,tt{
	font-family: monospace;
	line-height: 100%;
}

main { display: block; }

a {
	color: inherit;
	outline: none;
	text-decoration: none;
}
a:hover,
a:focus,
a:active { text-decoration: none; }

a img { border: none; }
img {
	max-width: 100%;
	vertical-align: top;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

html, body {
	height: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
}
body { -webkit-text-size-adjust: 100%; }

:root {
	--bg-gray: #f8f7f4;
	--color-gray: #505050;
	--color-green: #00ab84;
	--color-dgreen: #009966;
	--color-orange: #ff9900;
	--color-yellow: #ffff00;
}

.en {
	font-family: "Barlow Semi Condensed", sans-serif;
	font-weight: 500;
	letter-spacing: 0;
}
.color-green { color: var(--color-green); }
.bg-green {
	color: #fff;
	background-color: var(--color-green);
}
.lang-en .en { display: none !important; }
.lang-en { text-align: left; }

#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
	#contents { flex-grow: 1; }
	#contents, .tree {
		position: relative;
		&::after {
			content: "";
			left: 0;
			right: 0;
			bottom: 0;
			display: block;
			position: absolute;
			margin-inline: auto;
			background-repeat: no-repeat;
			background-size: auto 100%;
			background-image: url(../images/tree_left.svg), url(../images/tree_right.svg);
		}
	}
}
.s-text { font-size: 12px; }
.text-list {
	& > li::before {
		content: "・";
		display: inline-block;
	}
}
.arrowLink a {
	font-weight: 500;
	&::after {
		content: "";
		aspect-ratio: 1 / 1;
		display: inline-block;
		vertical-align: middle;
		background: url(../images/icon_arrow_b.svg) no-repeat center top;
		background-size: 100%;
		transform: rotate(90deg);
	}
}
@media screen and (min-width:1145px), print {
	body {
		font-size: 16px;
		letter-spacing: 0.08em;
	}
	#contents{ padding-bottom: 400px; }
	#contents::after,
	.tree::after {
		height: 156px;
		max-width: 1050px;
		margin-inline: auto;
		background-position: left bottom, right 100px bottom;
	}
	.sp { display: none !important; }
	a[href^="tel:"] { pointer-events: none; }
	.inner {
		display: block;
		max-width: 1000px;
		margin-inline: auto;
		padding-inline: 25px;
	}
	.wrapper { margin-inline: 20px; }
	.column2 {
		display: flex;
		gap: 100px;
		& > * { flex-basis: 50%; }
		& > *:empty { display: none; }
	}
	.arrowLink a::after {
		width: 0.875em;
		margin-top: -4px;
		margin-left: 1.2em;
	}
}
@media screen and (max-width:1144px) {
	body {
		font-size: 14px;
		letter-spacing: 0.05em;
	}
	#wrapper { padding-bottom: 90px; }
	#contents { padding-bottom: 200px; }
	#contents::after,
	.tree::after {
		height: 75px;
		background-position: 15px bottom, right 15px bottom;
	}
	.pc { display: none !important; }
	.inner { padding-inline: 25px; }
	.text-list {
		& > li {
			padding-left: 1em;
			text-indent: -1em;
			&::before {
				width: 1em;
				text-indent: 0;
				text-align: center;
			}
			& > * { text-indent: 0; }
		}
	}
	.arrowLink a::after {
		width: 1em;
		margin-top: -2px;
		margin-left: 1.2em;
	}
}

/* header */
#header {
	z-index: 500;
	position: relative;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	.logo a {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255,255,255,1);
	}
	.gNav.fixed {
		font-weight: 500;
		.icon, .link_reserve {
			right: 0;
			color: #fff;
			position: fixed;
			font-weight: 500;
			a { display: block; }
		}
		.icon {
			z-index: 9000;
			cursor: pointer;
			text-align: center;
			aspect-ratio: 1 / 1;
			box-sizing: border-box;
			background-color: var(--color-green);
			transition-duration: .3s;
			transition-property: background-color;
			& > span {
				transition-duration: .3s;
				transition-property: opacity;
			}
			&::before, &::after, & > span::before {
				content: "";
				left: 0;
				right: 0;
				display: block;
				position: absolute;
				margin-inline: auto;
				background-color: #fff;
				transition-duration: .3s;
				transition-property: top, width, transform;
			}
			&:hover {
				background-color: var(--color-dgreen);
			}
		}
		.link_reserve {
			z-index: 6000;
			a {
				width: 100%;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				background-color: var(--color-orange);
				&::before {
					content: "";
					display: block;
					aspect-ratio: 1 / 1;
					background: url(../images/icon_reserve.svg) no-repeat center center;
					background-size: 100% auto;
				}
			}
		}
		.menu {
			top: 0;
			color: #fff;
			z-index: 8000;
			height: 100vh;
			width: 360px;
			position: fixed;
			overflow-y: auto;
			transition-duration: .3s;
			transition-property: left, right;
			background-color: var(--color-green);
			.list {
				border-top: 1px solid #33bc9d;
				& > li {
					border-bottom: 1px solid #33bc9d;
					a {
						display: block;
						&::before {
							content: "〉 ";
							display: inline;
						}
					}
				}
			}
			.sns { display: flex; }
		}
		#gBack {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: none;
			position: fixed;
			z-index: 7000;
			cursor: pointer;
			background-color: rgba(255,255,255,0.7);
		}
		&.open {
			.icon {
				&::before { transform: rotate(45deg); }
				&::after { transform: rotate(-45deg); }
				& > span {
					opacity: 0;
					&::before { width: 0; }
				}
			}
		}
	}
	@media screen and (min-width:1145px), print{
		height: 100px;
		.logo a {
			width: 200px;
			height: 220px;
			&:hover { opacity: 0.6; }
			img { width: 121px; }
		}
		.gNav.static {
			display: flex;
			flex-grow: 1;
			justify-content: space-between;
			.menu {
				display: flex;
				gap: 35px;
				font-weight: 500;
				& > li {
					display: flex;
					align-items: center;
					justify-content: center;
					a {
						display: flex;
						align-items: center;
						justify-content: center;
						white-space: nowrap;
					}
				}
			}
			.lang {
				display: flex;
				padding-right: 40px;
				& > li {
					display: flex;
					align-items: center;
					justify-content: center;
					a {
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				& > * + *::before {
					content: "／";
					display: block;
				}
			}
			a {
				position: relative;
				&::after {
					content: "";
					top: calc(50% + 1em);
					left: 0;
					right: 0;
					width: 0;
					height: 1px;
					display: block;
					position: absolute;
					margin-inline: auto;
					background-color: #000;
					transition-duration: .3s;
					transition-property: width;
				}
				&:hover::after { width: 100%; }
			}
		}
		.gNav.fixed {
			width: 100px;
			.icon {
				top: 0;
				width: 100px;
				font-size: 13px;
				padding-top: 55px;
				&::before, &::after, & > span::before {
					width: 36px;
					height: 2px;
				}
				&::before { top: 30px; }
				& > span::before { top: 39px; }
				&::after { top: 48px; }
				&:hover {
					&::before { top: 33px; }
					&::after { top: 45px; }
				}
			}
			.link_reserve {
				top: 100px;
				width: 100px;
				a {
					line-height: 24px;
					padding-inline: 30px 25px;
					writing-mode: vertical-rl;
					-ms-writing-mode: tb-rl;
					-webkit-writing-mode: vertical-rl;
					text-orientation: upright;
					transition-duration: .3s;
					transition-property: background-color;
					&::before {
						width: 40px;
						margin-bottom: 8px;
					}
					&:hover { background-color: #ea8500; }
				}
			}
			.menu {
				left: 100%;
				padding-top: 100px;
				.list {
					font-size: 14px;
					& > li a {
						padding: 11px 10px 11px 30px;
						&:hover {
							color: var(--color-dgreen);
							background-color: #fff;
						}
					}
				}
				.sns {
					gap: 20px;
					padding: 30px;
					li { width: 30px; }
				}
			}
			&.open {
				.icon {
					&::before, &::after { top: 50px; }
				}
				.menu { left: calc(100% - 360px); }
			}
		}
	}
	@media screen and (max-width:1144px){
		height: 50px;
		.logo a {
			width: 100px;
			height: 110px;
			img { width: 60px; }
		}
		.gNav.static { display: none; }
		.gNav.fixed {
			.icon {
				width: 50px;
				font-size: 7px;
				padding-top: 28px;
				&::before, &::after, & > span::before {
					width: 20px;
					height: 1px;
				}
				&::before { top: 14px; }
				& > span::before { top: 19px; }
				&::after { top: 24px; }
			}
			.link_reserve {
				top: auto !important;
				bottom: 0;
				width: 100%;
				br { display: none; }
				a {
					height: 90px;
					justify-content: center;
					&::before {
						width: 33px;
						margin-right: 11px;
					}
				}
			}
			.menu {
				right: -100%;
				padding-top: 50px;
				max-width: calc(100vw - 50px);
			}
			&.open {
				.icon {
					&::before, &::after { top: 25px; }
				}
				.menu {
					right: 0;
					.list > li a { padding: 10px 10px 10px 30px; }
					.sns {
						gap: 18px;
						padding: 27px;
						li { width: 26px; }
					}
				}
			}
		}
	}
}
.customize-support #header .gNav.fixed {
	@media screen and (min-width: 783px){
		.icon { top: 32px; }
		.link_reserve { top: calc(100px + 32px); }
		.menu {
			top: 32px;
			height: calc(100vh - 32px);
		}
	}
	@media screen and (max-width: 782px){
		.icon { top: 46px; }
		.menu {
			top: 46px;
			height: calc(100vh - 46px);
		}
	}
}

/* footer */
#footer {
	color: #fff;
	background-color: var(--color-green);
	.information address strong { font-weight: 500; }
	.sns {
		display: flex;
		gap: 20px;
		img { width: 30px; }
	}
	.copyright {
		background-color: #009966;
	}
	@media screen and (min-width:1145px), print{
		.pageTopLink {
			position: relative;
			max-width: 1000px;
			margin-inline: auto;
			padding-inline: 25px;
			a {
				display: block;
				width: 60px;
				height: 0;
				bottom: 0;
				right: 0;
				overflow: hidden;
				padding-top: 60px;
				background: #000;
				position: absolute;
				transform: rotate(-45deg);
				transform-origin: right bottom;
				transition-duration: .3s;
				transition-property: background-color, box-shadow;
				&::after {
					content: "";
					top: 27px;
					right: 27px;
					width: 10px;
					height: 10px;
					display: block;
					position: absolute;
					border-top: 2px solid #fff;
					border-right: 2px solid #fff;
					transition-duration: .3s;
					transition-property: border-color;
				}
				&:hover {
					background-color: #fff;
					box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
					&::after {
						border-color: var(--color-green);
					}
				}
			}
		}
		& > .inner {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			padding-block: 70px 50px;
			.information {
				margin-right: 60px;
				.logo {
					margin-bottom: 15px;
					a:hover { opacity: 0.6; }
					img { width: 80px; }
				}
			}
			.links {
				display: flex;
				flex-grow: 1;
				align-items: flex-end;
				justify-content: space-between;
				&:not(.lang-ja .links) { min-width: 320px; }
				.pageLinks {
					position: relative;
					&::before {
						content: "";
						width: 1px;
						top: 0.5em;
						left: 0;
						bottom: 0.4em;
						display: block;
						position: absolute;
						background-color: #fff;
					}
					& > li {
						padding-left: 21px;
						position: relative;
						&::before {
							content: "";
							width: 5px;
							height: 1px;
							left: 0;
							top: 1.05em;
							display: block;
							position: absolute;
							background-color: #fff;
						}
						a {
							position: relative;
							display: inline-block;
							&::after {
								content: "";
								width: 0;
								height: 1px;
								top: 1.7em;
								left: 0;
								display: block;
								position: absolute;
								background-color: #fff;
								transition-duration: .3s;
								transition-property: width;
							}
							&:hover::after { width: 100%; }
						}
					}
				}
				.sns a:hover {
					opacity: 0.6;
				}
			}
		}
		.copyright {
			font-size: 14px;
			padding-block: 13px;
		}
	}
	@media screen and (max-width:1144px){
		.pageTopLink { display: none; }
		& > .inner {
			position: relative;
			margin-block: 50px 45px;
			.logo {
				margin-bottom: 10px;
				img { width: 70px; }
			}
			.sns {
				top: 0;
				right: 25px;
				position: absolute;
			}
		}
		.copyright {
			font-size: 12px;
			padding-block: 9px 10px;
		}
	}
}

/* lower */
.lower {
	#contents {
		@media screen and (min-width:769px), print {
			padding-top: 120px;
			& > * + * { margin-top: 100px; }
		}
		@media screen and (max-width:768px) {
			padding-top: 50px;
			& > * + * { padding-block: 32.5px; }
		}
	}
	#pageHeader {
		line-height: 1;
		text-align: center;
		&::before {
			content: "";
			display: block;
			margin-inline: auto;
			aspect-ratio: 1 / 1;
			background-repeat: no-repeat;
			background-position:center center;
			background-size: 100%;
		}
		& > * { display: block; }
		.ja { font-weight: 600; }
		@media screen and (min-width:769px), print {
			&::before { width: 60px; }
			.ja {
				font-size: 27px;
				margin-top: 15px;
			}
			.en { margin-top: 10px; }
		}
		@media screen and (max-width:768px) {
			margin-bottom: 32.5px;
			&::before { width: 52px; }
			.ja {
				font-size: 21px;
				margin-top: 18px;
			}
			.en { margin-top: 8px; }
		}
	}
	.l-title {
		font-weight: 500;
		line-height: 1.6;
		&.border { border-bottom: 1px solid #000; }
		@media screen and (min-width:769px), print {
			font-size: 20px;
			margin-bottom: 30px;
			padding-bottom: 10px;
		}
		@media screen and (max-width:768px) {
			font-size: 17.5px;
			margin-bottom: 18px;
			padding-bottom: 10px;
		}
	}
	.columns2 {
		@media screen and (min-width:769px), print {
			display: flex;
			flex-wrap: wrap;
			gap: 100px;
			& > * { width: calc(50% - 50px); }
		}
		@media screen and (max-width:768px) {
			& > * + * { margin-top: 32px; }
		}
	}
	.table-layout {
		@media screen and (min-width:769px), print {
			width: 100%;
			display: table;
			.t-inner {
				display: table-row;
				& > * { display: table-cell; }
				.t-title { padding-right: 1em; }
			}
		}
		@media screen and (max-width:768px) {
			.t-inner {
				display: flex;
				flex-wrap: wrap;
			}
		}
	}
	.border-box {
		border: 1px solid #000;
		@media screen and (min-width:769px), print {
			padding: 20px 30px;
		}
		@media screen and (max-width:768px) {
			padding: 16px 25px;
		}
	}
}