@charset 'UTF-8';

/*

    Base

*/

html { font-size: 8px; scroll-behavior: smooth;}
body {
	padding-bottom: 9rem;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
	color: var(--text-color);
	background-color: var(--surface-color);
}
a { color: var(--link-color); transition: var(--transition);}
a:hover { opacity: 0.7;}
img, iframe { max-width: 100%; height: auto;}
h1, h2, h3, h4 { line-height: 1.5;}
address { font-style: normal;}
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	border: 1px var(--border-color) solid;
	border-radius: var(--radius-small);
	-webkit-appearance: none;
}
.en {
	display: block;
	font-family: var(--font-family);
	font-size: var(--font-size-small);
	font-weight: bold;
	color: var(--deep-color);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

@media screen and (min-width: 768px) {
	html { font-size: 10px;}
	body { padding-bottom: 0;}
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto;}
}

/*

    Layout

*/

div.wrapper {
	max-width: var(--wrapper-width);
	margin: 0 auto;
	padding: 0 3rem;
	box-sizing: border-box;
}
div.wrapper.wide { max-width: 1280px;}
div.wrapper.narrow { max-width: 1000px;}
div.wrapper.thin { max-width: 900px;}
main { padding: 0 0 var(--section-space);}
main > div.wrapper > section + section { margin-top: var(--section-space);}
div.back { margin-top: 3em; text-align: center;}

/*  section  */
section.section { padding: var(--section-space) 0;}
section.section.soft { background-color: var(--base-color);}
section.section.pale { background-color: var(--tint-color);}
section.section.mint { background-color: var(--main-color); color: #ffffff;}
section.section.mint p.kicker { color: #ffffff;}
section.section.mint div.copy p { color: rgba(255, 255, 255, 0.92);}
section.section.centered { text-align: center;}
section.section h2, div.split div.copy h2 {
	margin: 0 0 2.5rem;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-heading);
	font-weight: normal;
	line-height: 1.6;
}
section.section h2 br { display: none;}

/*  split: copy on one side, body on the other  */
div.split { display: grid; gap: 4.5rem;}
div.split div.copy p { color: var(--muted-color); line-height: 2;}
div.split div.copy p.kicker { color: var(--deep-color);}
div.split div.copy p.buttons { margin-top: 2.5rem;}

@media screen and (min-width: 768px) {
	div.wrapper { padding: 0 max(3rem, 4vw);}
	section.section h2 br { display: inline;}
	div.split { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 9rem;}
	div.split.even { grid-template-columns: 1fr 1fr;}
	div.split.reverse div.copy { order: 2;}
	div.split.top { align-items: start;}
}

/*

    Header

*/

div.notice {
	padding: 0.5em 0;
	background-color: var(--accent-color);
	font-size: var(--font-size-small);
	color: #ffffff;
	text-align: center;
}
div.notice p { margin: 0;}
header.global {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.96);
	border-bottom: 1px #e8f3f0 solid;
}
header.global > div.container {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	height: var(--header-height);
	padding: 0 2.25rem;
	box-sizing: border-box;
}
header.global div.container div.sitetop { margin-right: auto; font-size: var(--font-size-large); font-weight: bold; line-height: 1.2;}
header.global div.container div.sitetop a { display: block; color: var(--text-color);}
header.global div.container div.sitetop img { display: block; width: min(28rem, 60vw); height: auto;}
header.global div.container a.tel { display: none;}

/*  menubutton  */
header.global div.container div.menubutton {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 5.6rem;
	height: 5.6rem;
	padding: 0 1.4rem;
	border: 1px #d6e6e2 solid;
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
}
header.global div.container div.menubutton span {
	display: block;
	height: 2px;
	background-color: var(--text-color);
	transition: var(--transition);
}
header.global div.container div.menubutton.open span:nth-child(1) { transform: translateY(7px) rotate(45deg);}
header.global div.container div.menubutton.open span:nth-child(2) { opacity: 0;}
header.global div.container div.menubutton.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg);}

/*  global navigation  */
nav.global {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 90;
	padding: 2rem 6vw;
	background-color: var(--surface-color);
	box-shadow: 0 10px 20px rgba(34, 68, 61, 0.08);
	box-sizing: border-box;
}
nav.global.open { display: block;}
nav.global ul { list-style: none; margin: 0; padding: 0;}
nav.global ul li { margin: 0;}
nav.global ul li a {
	display: flex;
	align-items: center;
	min-height: 5.2rem;
	padding: 0.4rem 1rem;
	color: var(--text-color);
	font-weight: bold;
}
nav.global ul li.current > a { color: var(--deep-color);}
nav.global ul li.hasmenu > a:after { content: '＋'; margin-left: auto; padding-left: 1em; color: var(--main-color); font-size: 2.1rem; font-weight: normal; line-height: 1;}
nav.global ul li.hasmenu.open > a:after { content: '－';}
nav.global ul li.hasmenu > a { color: var(--deep-color);}
nav.global ul li ul {
	display: none;
	margin: 0.5rem 0 1rem;
	padding: 0.5rem 1rem 1.2rem 2.2rem;
	background-color: var(--base-color);
	border-top: 1px #e3eeeb solid;
	border-bottom: 1px #e3eeeb solid;
}
nav.global ul li.open > ul { display: block;}
nav.global ul ul li a {
	min-height: 0;
	padding: 0.9rem 0.2rem;
	border-bottom: 1px #deebe7 solid;
	font-size: var(--font-size-small);
	font-weight: normal;
	line-height: 1.5;
}
nav.global ul ul li:last-child a { border-bottom: none;}

@media screen and (min-width: 768px) {
	header.global > div.container { gap: 3.4rem; padding: 0 clamp(2.4rem, 5vw, 7.2rem);}
	header.global div.container div.sitetop { margin-right: 0;}
	header.global div.container div.sitetop img { width: min(37rem, 27vw);}
	header.global div.container div.menubutton { display: none;}
	header.global div.container a.tel {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		padding: 1.7rem 2rem;
		background-color: var(--accent-color);
		border-radius: var(--radius-small);
		color: #ffffff;
		font-size: 1.4rem;
		font-weight: bold;
		line-height: 1.5;
		box-shadow: 0 7px 18px rgba(199, 164, 92, 0.22);
	}
	nav.global {
		display: block;
		position: static;
		flex: 1 1 auto;
		padding: 0;
		background-color: transparent;
		box-shadow: none;
	}
	nav.global div.container { display: flex; justify-content: flex-end;}
	nav.global ul { display: flex; align-items: center; white-space: nowrap;}
	nav.global ul li { position: relative; display: flex; align-items: center;}
	nav.global ul li + li:before { content: '｜'; color: #b9c9c5; font-size: 1.2rem;}
	nav.global ul li a { min-height: 0; padding: 0.5rem 1rem; font-size: 1.2rem;}
	nav.global ul li a:hover { opacity: 1; color: var(--main-color);}
	nav.global ul li.hasmenu > a { color: var(--text-color);}
	nav.global ul li.hasmenu > a:after { content: '⌄'; margin-left: 0.4rem; padding: 0; font-size: 1.5rem;}
	nav.global ul li ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 2rem;
		position: absolute;
		top: calc(100% + 1.6rem);
		left: 50%;
		width: 62rem;
		margin: 0;
		padding: 2rem;
		background-color: var(--surface-color);
		border: none;
		border-top: 3px var(--main-color) solid;
		border-radius: 0 0 16px 16px;
		box-shadow: var(--shadow-strong);
		box-sizing: border-box;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate(-50%, 8px);
		transition: var(--transition);
	}
	nav.global ul li ul:before { content: ''; position: absolute; top: -2.7rem; left: 0; right: 0; height: 2.7rem;}
	nav.global ul li:hover > ul, nav.global ul li:focus-within > ul, nav.global ul li.open > ul {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
	}
	nav.global ul ul li { display: block;}
	nav.global ul ul li:before { content: none;}
	nav.global ul ul li a { display: block; padding: 0.9rem 1rem; border-bottom: 1px #e5efec solid; font-size: 1.1rem; white-space: normal;}
	nav.global ul ul li a:before { content: '›'; margin-right: 0.7rem; color: var(--main-color);}
}

/*

    Quick navigation (PC side / SP bottom bar) and page top

*/

nav.quick { display: none;}
nav.fixedbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 95;
	display: grid;
	grid-template-columns: 1.08fr 1fr 1fr;
	gap: 2px;
	height: 9rem;
}
nav.fixedbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 0.4rem;
	background-color: var(--main-color);
	border-radius: 6px 6px 0 0;
	color: var(--text-color);
	font-size: clamp(11px, 3.25vw, 14px);
	font-weight: 600;
	text-align: center;
	line-height: 1.42;
	white-space: nowrap;
}
nav.fixedbar a.access { background-color: var(--sky-color);}
nav.fixedbar a.concerns { background-color: var(--accent-color);}
a.pagetop {
	position: fixed;
	right: 2rem;
	bottom: 11rem;
	z-index: 94;
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	background-color: var(--main-color);
	border-radius: 50%;
	color: #ffffff;
	font-size: 2.2rem;
	line-height: 1;
	box-shadow: var(--shadow-strong);
	opacity: 0;
	visibility: hidden;
}
a.pagetop:before { content: '↑';}
a.pagetop.visible { opacity: 1; visibility: visible;}

@media screen and (min-width: 768px) {
	nav.fixedbar { display: none;}
	nav.quick {
		display: grid;
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 95;
		width: 9.6rem;
		border-radius: 16px 0 0 16px;
		overflow: hidden;
		box-shadow: 0 10px 28px rgba(47, 70, 65, 0.2);
		transform: translateY(-50%);
	}
	nav.quick a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		height: 9.6rem;
		background-color: var(--accent-color);
		color: #ffffff;
		font-size: 1.2rem;
		font-weight: bold;
		text-align: center;
		line-height: 1.45;
	}
	nav.quick a + a { border-top: 1px rgba(255, 255, 255, 0.45) solid;}
	nav.quick a.access { background-color: var(--main-color);}
	nav.quick a:hover { opacity: 1; filter: brightness(1.08);}
	nav.quick a span.icon {
		display: grid;
		place-items: center;
		width: 2.9rem;
		height: 2.9rem;
		border: 1px rgba(255, 255, 255, 0.75) solid;
		border-radius: 50%;
		font-size: 1.6rem;
		line-height: 1;
	}
	a.pagetop { right: 2.4rem; bottom: 2.4rem;}
}

/*

    Footer

*/

footer.global {
	padding: 6.9rem 2.75rem 4rem;
	background-color: var(--main-color);
	color: #ffffff;
	font-size: var(--font-size-small);
}
footer.global div.container { max-width: 1280px; margin: 0 auto;}
footer.global div.container div.wrapper { display: flex; flex-direction: column; gap: 4.5rem; max-width: none; padding: 0;}
footer.global div.about { text-align: center;}
footer.global div.about p { margin: 0;}
footer.global div.about p.sitename, footer.global div.about p.corporate {
	display: block;
	width: 28rem;
	max-width: 100%;
	margin: 0 auto 1rem;
	padding: 1rem;
	background-color: var(--surface-color);
	border-radius: 8px;
	box-sizing: border-box;
}
footer.global div.about p.sitename { font-size: var(--font-size-large); font-weight: bold;}
footer.global div.about p.sitename a { display: block; color: var(--text-color);}
footer.global div.about p.sitename img { display: block; width: 100%;}
footer.global div.about p.corporate { display: flex; align-items: center; justify-content: center; height: 5.2rem; padding: 0.4rem; overflow: hidden;}
footer.global div.about p.corporate img { display: block; width: auto; max-height: 100%;}
footer.global div.about p.address { margin-top: 2.5rem; color: rgba(255, 255, 255, 0.92); line-height: 1.9;}
footer.global div.about p.text { margin: 1.2rem 0; color: rgba(255, 255, 255, 0.92);}
footer.global div.about p.tel a { display: inline-block; margin: 0.8rem 0; color: #ffffff; font-family: var(--font-family-en); font-size: 3.2rem; line-height: 1.3;}
footer.global nav.sitemap { display: grid; gap: 3.2rem;}
footer.global nav.sitemap h2 {
	margin: 0 0 2rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px rgba(255, 255, 255, 0.18) solid;
	font-size: 1.4rem;
	font-weight: normal;
}
footer.global nav.sitemap ul { list-style: none; margin: 0; padding: 0;}
footer.global nav.sitemap ul li { margin: 0 0 1.1rem;}
footer.global nav.sitemap ul li a { color: #ffffff; line-height: 1.6;}
footer.global nav.sitemap ul li a:before { content: '›'; margin-right: 0.8rem;}
footer.global nav.sitemap ul ul { margin: 0.8rem 0 0 1.6rem;}
footer.global p.copyright {
	max-width: 1280px;
	margin: 3.5rem auto 0;
	padding-top: 2.2rem;
	border-top: 1px rgba(255, 255, 255, 0.14) solid;
	text-align: center;
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.78);
}

@media screen and (min-width: 768px) {
	footer.global { padding: 7rem max(5vw, 2.8rem) 2.8rem;}
	footer.global div.container div.wrapper { display: grid; grid-template-columns: 300px 1fr; gap: 7rem;}
	footer.global div.about { text-align: left;}
	footer.global div.about p.sitename, footer.global div.about p.corporate { margin: 0 0 1rem;}
	footer.global div.about p.tel a { font-size: 2.6rem;}
	footer.global nav.sitemap { grid-template-columns: 1fr 1fr; gap: 7rem;}
	footer.global nav.sitemap ul li a { font-size: 1.2rem;}
	footer.global p.copyright { margin-top: 4.5rem;}
}

/*

    Page title / breadcrumbs

*/

div.pagetitle { padding: 5.5rem 0 0;}
div.pagetitle h1 {
	display: flex;
	flex-direction: column-reverse;
	margin: 1rem 0 2.5rem;
	font-family: var(--font-family-serif);
	font-size: clamp(28px, 4vw, 50px);
	font-weight: normal;
	line-height: 1.5;
}
div.pagetitle h1 span.en { margin-bottom: 1rem;}
div.pagetitle p.lead { margin: 0;}
div.pagetitle p.lead + * { margin-top: 5rem;}

div.breadcrumbs { padding: 1rem 0; font-size: var(--font-size-small); color: var(--muted-color);}
div.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;}
div.breadcrumbs ol li { margin: 0;}
div.breadcrumbs ol li + li:before { content: '›'; margin: 0 0.6em; color: var(--main-color);}
div.breadcrumbs ol li a { color: var(--text-color);}
div.breadcrumbs + main { padding-top: 3rem;}

@media screen and (min-width: 768px) {
	div.pagetitle { padding-top: 8rem;}
}

/*

    Top page: main visual

*/

#toppage-mv {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 86rem;
	padding: 6.9rem 3rem 13.75rem;
	background-color: var(--pale-color);
	overflow: hidden;
	box-sizing: border-box;
}
#toppage-mv div.slider { position: absolute; inset: 0; z-index: 0; overflow: hidden;}
#toppage-mv div.slider span.slide {
	position: absolute;
	inset: 0;
	background-position: 58% 50%;
	background-size: auto 108%;
	background-repeat: no-repeat;
	opacity: 0;
	transform-origin: 50% 50%;
	animation: mv-fade 16s ease-in-out infinite, mv-zoom 16s ease-out infinite;
}
#toppage-mv div.slider span.slide:first-child { opacity: 1;}
#toppage-mv div.slider span.slide:nth-child(2) { animation-delay: 8s;}
#toppage-mv div.slider span.slide:after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(246, 252, 250, 0.97) 0%, rgba(246, 252, 250, 0.91) 58%, rgba(234, 248, 244, 0.38) 100%);
}
#toppage-mv:after {
	content: '';
	position: absolute;
	left: -4%;
	right: -4%;
	bottom: -7rem;
	z-index: 1;
	height: 13.5rem;
	background-color: var(--surface-color);
	border-radius: 50% 50% 0 0 / 70% 70% 0 0;
}
#toppage-mv div.copy { position: relative; z-index: 2; width: 100%;}
#toppage-mv h1 {
	margin: 0 0 2.4rem;
	font-family: var(--font-family-rounded);
	font-size: 3.6rem;
	font-weight: normal;
	line-height: 1.5;
	letter-spacing: 0.02em;
}
#toppage-mv h1 span { position: relative; z-index: 0;}
#toppage-mv h1 span:after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.3rem;
	z-index: -1;
	height: 1rem;
	background-color: var(--underline-color);
}
#toppage-mv p.lead { max-width: 60rem; margin: 0; color: var(--muted-color); line-height: 2.15;}
#toppage-mv div.actions { display: flex; flex-direction: column; align-items: flex-start; gap: 2.8rem; margin-top: 3rem;}
#toppage-mv div.actions a.phone { display: none;}

@keyframes mv-fade {
	0%, 44% { opacity: 1;}
	50%, 94% { opacity: 0;}
	100% { opacity: 1;}
}
@keyframes mv-zoom {
	0% { transform: scale(1);}
	100% { transform: scale(1.1);}
}

@media screen and (min-width: 768px) {
	#toppage-mv { min-height: 72rem; padding: 6.5rem max(6vw, 3rem);}
	#toppage-mv div.slider span.slide { background-position: 50% 58%; background-size: 110%;}
	#toppage-mv div.slider span.slide:after {
		background: linear-gradient(90deg, rgba(246, 252, 250, 0.98) 0%, rgba(240, 250, 247, 0.94) 35%, rgba(234, 248, 244, 0.56) 59%, rgba(234, 248, 244, 0.08) 100%);
	}
	#toppage-mv div.copy { width: min(720px, 52%);}
	#toppage-mv h1 { font-size: clamp(30px, 3.36vw, 52px); letter-spacing: 0.025em;}
	#toppage-mv div.actions { flex-direction: row; align-items: center;}
	#toppage-mv div.actions a.phone { display: inline-flex;}
}

@media (prefers-reduced-motion: reduce) {
	#toppage-mv div.slider span.slide { animation: none;}
	#toppage-mv div.slider span.slide:first-child { opacity: 1;}
	#toppage-mv div.slider span.slide:nth-child(2) { opacity: 0;}
}

/*

    Headings

*/

p.kicker {
	margin: 0 0 1.4rem;
	font-size: var(--font-size-small);
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--deep-color);
	text-transform: uppercase;
}
p.eyebrow {
	display: inline-block;
	margin: 0 0 2.4rem;
	padding: 0.9rem 1.5rem;
	background-color: var(--surface-color);
	border-radius: 30px;
	font-size: var(--font-size-small);
	font-weight: bold;
	letter-spacing: 0.12em;
	line-height: 1.5;
	color: var(--deep-color);
}
p.catch {
	margin: 0 0 1.5em;
	font-family: var(--font-family-serif);
	font-size: 2.2rem;
	font-weight: normal;
	line-height: 1.8;
	color: var(--deep-color);
}
div.headline {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 2.5rem;
}
div.headline h2 {
	display: flex;
	flex-direction: column-reverse;
	margin: 0;
	font-family: var(--font-family-serif);
	font-size: var(--font-size-heading);
	font-weight: normal;
	line-height: 1.6;
}
div.headline h2 span.en { margin-bottom: 1rem;}
h1.contentheading, h2.contentheading {
	margin: 0 0 1em;
	padding-bottom: 0.6em;
	border-bottom: 1px var(--border-color) solid;
	font-family: var(--font-family-serif);
	font-size: 2.6rem;
	font-weight: normal;
	line-height: 1.55;
}
h2.contentheading { margin-top: 2em; font-size: 2.2rem;}
div.article h2, div.article h3 { margin: 1.5em 0 0.75em; font-family: var(--font-family-serif); font-weight: normal;}
div.article h2 { font-size: 2.4rem;}
div.article h3 { font-size: 2rem;}

@media screen and (min-width: 768px) {
	p.catch { font-size: 2.5rem;}
	h1.contentheading { font-size: 3.2rem;}
	div.article h2 { font-size: 2.6rem;}
	div.article h3 { font-size: 2.1rem;}
}

/*

    Text / notes

*/

p.lead { margin: 0 0 2em; color: var(--muted-color); line-height: 2;}
.notes { font-size: var(--font-size-small); color: var(--muted-color);}
p.callout {
	display: inline-block;
	margin: 0;
	padding: 1.2rem 2.5rem;
	background-color: var(--cream-color);
	border-radius: 30px;
	font-size: var(--font-size-small);
	line-height: 1.9;
	color: var(--muted-color);
}
div.em { padding: 1.5em 2em; background-color: var(--pale-color); border-radius: var(--radius);}
div.em > :first-child { margin-top: 0;}
div.em > :last-child { margin-bottom: 0;}
blockquote {
	margin: 1.5em 0;
	padding: 1.5em 2em;
	background-color: var(--base-color);
	border-left: 3px var(--main-color) solid;
	border-radius: 0 var(--radius-small) var(--radius-small) 0;
	font-style: normal;
	color: var(--muted-color);
}
blockquote:before { content: none;}
blockquote p { margin: 0;}
span.label {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.1em 1em;
	background-color: var(--pale-color);
	border-radius: 100px;
	font-size: var(--font-size-small);
	line-height: 1.8;
	color: var(--deep-color);
	vertical-align: middle;
}
span.label.requirement { background-color: var(--warning-color); color: #ffffff;}
span.badge {
	display: inline-block;
	min-width: 1.6em;
	padding: 0 0.5em;
	background-color: var(--main-color);
	border-radius: 100px;
	font-size: var(--font-size-small);
	line-height: 1.8;
	color: #ffffff;
	text-align: center;
}
hr { margin: 3em 0; border: none; border-bottom: 1px var(--border-color) solid;}

/*  symptoms box  */
div.symptoms { padding: 3rem 2.5rem; background-color: var(--pale-color); border-radius: 22px;}
div.symptoms h2 { margin: 0 0 2.2rem; font-family: var(--font-family-serif); font-size: 2rem; font-weight: normal;}
div.symptoms ul { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none;}
div.symptoms ul li { position: relative; margin: 0; padding-left: 1.25em; font-size: var(--font-size-small); line-height: 1.65;}
div.symptoms ul li:before { content: '・'; position: absolute; left: 0;}

/*  contact box  */
div.contact { margin: 4.5rem auto 0; padding: 2.8rem 2rem; background-color: var(--cream-color); border-radius: 20px; text-align: center;}
div.contact h2 { margin: 0 0 0.5rem; font-family: var(--font-family-serif); font-size: 2.2rem; font-weight: normal; line-height: 1.6;}
div.contact p { margin: 0 0 0.8rem; color: var(--muted-color); line-height: 1.9;}
div.contact a.tel {
	display: inline-block;
	margin-top: 0.8rem;
	color: var(--deep-color);
	font-family: var(--font-family-en);
	font-size: 2.8rem;
	font-weight: bold;
	line-height: 1.3;
}

@media screen and (min-width: 768px) {
	div.symptoms { padding: 4.2rem 5.8rem; border-radius: 30px;}
	div.symptoms h2 { font-size: 2.4rem;}
	div.symptoms ul li { font-size: var(--font-size-base);}
	div.contact { padding: 3.2rem 3.8rem;}
}

/*

    Buttons / links

*/

a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 23.5rem;
	padding: 1.7rem 2.5rem;
	background-color: var(--accent-color);
	border-radius: var(--radius-small);
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	line-height: 1.45;
	box-sizing: border-box;
	box-shadow: 0 7px 18px rgba(199, 164, 92, 0.22);
}
a.button:after { content: '›'; margin-left: 1.8rem; font-size: 2.3rem; line-height: 1;}
a.button.light { background-color: var(--surface-color); color: var(--accent-color); box-shadow: var(--shadow);}
a.button.strong { background-color: var(--main-color); box-shadow: 0 7px 18px rgba(114, 205, 184, 0.3);}
a.button.small { min-width: 0; padding: 0.8em 1.6em; font-size: var(--font-size-small); box-shadow: none;}
a.button.small:after { margin-left: 1rem; font-size: 1.6rem;}
a.button.large { padding: 2rem 3.5rem; font-size: var(--font-size-large);}
a.button.back { min-width: 0; padding-left: 0; background-color: transparent; color: var(--deep-color); font-size: var(--font-size-small); box-shadow: none;}
a.button.back:before { content: '←'; margin-right: 0.6rem;}
a.button.back:after { content: none;}
p.buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin: 2em 0;}
p.buttons.centered { justify-content: center;}
a.more { display: inline-block; color: var(--deep-color); font-size: var(--font-size-small); font-weight: bold;}
a.more:after { content: '\00a0→';}
a.more.line { border-bottom: 1px solid;}
p.more { margin: 1.5rem 0 0; text-align: right;}
a.phone { display: inline-flex; flex-direction: column; color: var(--text-color);}
a.phone small { font-size: 1.1rem; color: var(--muted-color);}
a.phone strong {
	font-family: var(--font-family-en);
	font-size: 2.3rem;
	font-weight: bold;
	letter-spacing: 0.04em;
	line-height: 1.3;
	color: var(--deep-color);
}

/*

    Lists

*/

ul.list, ol.list { margin: 1em 0 1.5em; padding-left: 1.5em;}
ul.list li, ol.list li { margin: 0.3em 0;}
ul.list li::marker { color: var(--main-color);}
ol.list li::marker { color: var(--deep-color); font-weight: bold;}

/*  news  */
ul.newslist { list-style: none; margin: 0; padding: 0; border-top: 1px #d9e8e4 solid;}
ul.newslist li { margin: 0; border-bottom: 1px #d9e8e4 solid;}
ul.newslist li a {
	display: grid;
	grid-template-columns: 1fr 2.2rem;
	gap: 0.5rem 1rem;
	align-items: center;
	padding: 2.2rem 0.8rem;
	color: var(--text-color);
}
ul.newslist li a:after { content: '›'; grid-area: 1 / 2 / 4 / 3; align-self: center; color: var(--accent-color); font-size: 2rem; line-height: 1;}
ul.newslist li a span.date { grid-column: 1; font-family: var(--font-family-en); font-size: var(--font-size-small); color: #7d8d89;}
ul.newslist li a span.label { grid-column: 1; justify-self: start; margin: 0;}
ul.newslist li a span.title { grid-column: 1; line-height: 1.7;}
ul.newslist li a:hover { opacity: 1; padding-left: 1.4rem; color: var(--main-color);}

/*  features  */
ul.features {
	position: relative;
	z-index: 3;
	max-width: 1080px;
	margin: -1rem auto 0;
	padding: 1.2rem 2.2rem 5.5rem;
	list-style: none;
}
ul.features li { display: flex; align-items: center; gap: 1.6rem; margin: 0; padding: 1.5rem; border-bottom: 1px #dce9e5 solid;}
ul.features li span.icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 6.2rem;
	height: 6.2rem;
	background-color: var(--main-color);
	border: 5px #d9f4ee solid;
	border-radius: 50%;
	color: #ffffff;
	font-size: 2.7rem;
	line-height: 1;
}
ul.features li:nth-child(2) span.icon, ul.features li.gold span.icon { background-color: var(--accent-color); border-color: #f4ead5;}
ul.features li h3 { margin: 0.7rem 0; font-size: 2rem; font-weight: bold; line-height: 1.5;}
ul.features li p { margin: 0; font-size: var(--font-size-small); line-height: 1.6; color: #76837f;}

/*  concerns (cloud cards)  */
ul.concerns { display: grid; grid-template-columns: 1fr; gap: 2.2rem 1.2rem; max-width: 1180px; margin: 4.5rem auto; padding: 0; list-style: none;}
ul.concerns li { margin: 0;}
ul.concerns li a {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 25.6rem;
	padding: 7rem 1.5rem 7rem;
	color: var(--text-color);
	text-align: center;
	box-sizing: border-box;
	transition: transform 0.25s ease;
}
ul.concerns li a:before {
	content: '';
	position: absolute;
	inset: 2.1rem 0.2rem 0.5rem;
	z-index: -1;
	background-color: var(--pale-color);
	border-radius: 48% 20% 43% 45% / 42% 29% 43% 51%;
	box-shadow: 0 9px 15px rgba(47, 70, 65, 0.12);
}
ul.concerns li a span.bubble {
	position: absolute;
	top: 3.6rem;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 5.2rem;
	height: 3.5rem;
	background-color: var(--main-color);
	border-radius: 50%;
	transform: translateX(-50%);
}
ul.concerns li a span.bubble:after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 2px;
	width: 13px;
	height: 11px;
	background-color: var(--main-color);
	clip-path: polygon(100% 0, 34% 0, 0 100%);
}
ul.concerns li a span.bubble i { width: 4px; height: 4px; background-color: #ffffff; border-radius: 50%;}
ul.concerns li a span.name { display: block; width: 90%; font-size: 1.6rem; font-weight: bold; line-height: 1.65;}
ul.concerns li a span.name:after { content: ''; display: block; width: min(154px, 86%); height: 3px; margin: 0.9rem auto 0; background-color: var(--main-color);}
ul.concerns li a span.arrow {
	position: absolute;
	bottom: 2.1rem;
	left: 50%;
	display: grid;
	place-items: center;
	width: 3.4rem;
	height: 3.4rem;
	padding: 0 0 2px 1px;
	border: 1.5px var(--text-color) solid;
	border-radius: 50%;
	font: 2.4rem/1 Arial, sans-serif;
	box-sizing: border-box;
	transform: translateX(-50%);
	transition: var(--transition);
}
ul.concerns li a span.arrow:before { content: '›';}
ul.concerns li a:hover { opacity: 1; transform: translateY(-5px);}
ul.concerns li a:hover span.arrow { background-color: var(--text-color); color: #ffffff;}

/*  departments  */
ul.departments { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin: 0; padding: 0; list-style: none;}
ul.departments li {
	margin: 0;
	padding: 1.8rem 1.3rem;
	background-color: var(--surface-color);
	border-radius: 15px;
	font-family: var(--font-family-serif);
	font-size: 2.1rem;
	line-height: 1.5;
	box-shadow: 0 7px 22px rgba(68, 110, 101, 0.06);
}
ul.departments li:before { content: '＋'; margin-right: 1.4rem; color: var(--main-color);}

/*  steps  */
ol.steps { display: grid; gap: 1.8rem; max-width: 970px; margin: 0 auto; padding: 0; list-style: none; counter-reset: steps;}
ol.steps li {
	position: relative;
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 1.4rem;
	margin: 0;
	padding: 2.2rem 1.8rem;
	background-color: var(--surface-color);
	border-radius: 20px;
	box-shadow: var(--shadow);
	counter-increment: steps;
}
ol.steps li:not(:last-child):after { content: ''; position: absolute; left: 4.8rem; bottom: -2rem; width: 1px; height: 2.2rem; background-color: var(--main-color);}
ol.steps li span.number {
	position: relative;
	display: grid;
	place-items: center;
	width: 6rem;
	height: 6rem;
	background-color: var(--main-color);
	border-radius: 50%;
	color: #ffffff;
	font-family: var(--font-family-en);
	font-size: 1.9rem;
	line-height: 1;
}
ol.steps li span.number:empty:before { content: counter(steps, decimal-leading-zero);}
ol.steps li span.number img {
	position: absolute;
	top: -1.5rem;
	left: -1.3rem;
	width: 3rem;
	height: 3rem;
	padding: 2px;
	background-color: var(--surface-color);
	border-radius: 50%;
	object-fit: contain;
	box-sizing: border-box;
	box-shadow: 0 3px 9px rgba(47, 70, 65, 0.1);
}
ol.steps li h3 { margin: 0.5rem 0 1rem; font-family: var(--font-family-serif); font-size: 2.4rem; font-weight: normal; line-height: 1.6;}
ol.steps li p { margin: 0.5rem 0; font-size: var(--font-size-small); line-height: 1.9; color: var(--muted-color);}

/*  career  */
div.career { margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px var(--border-color) solid;}
div.career h3 { margin: 0 0 0.8rem; font-size: var(--font-size-base); font-weight: bold; color: var(--deep-color);}
div.career ul { display: grid; gap: 1.4rem; margin: 2rem 0 0; padding: 0; list-style: none;}
div.career ul li { margin: 0; font-size: var(--font-size-small); line-height: 1.8; color: var(--muted-color);}
div.career figure { margin: 2.8rem 0 0;}
div.career figure img { display: block; width: 100%; border-radius: 22px 7px; box-shadow: 0 14px 32px rgba(47, 70, 65, 0.13);}

/*  articles (column list)  */
ul.articles { display: grid; gap: 1.8rem; margin: 0; padding: 0; list-style: none;}
ul.articles li { margin: 0;}
ul.articles li a {
	display: block;
	padding: 2.2rem 2rem;
	background-color: var(--base-color);
	border: 1px #dceae6 solid;
	border-radius: 20px;
	color: var(--text-color);
}
ul.articles li a:hover { opacity: 1; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(47, 70, 65, 0.08);}
ul.articles li a span.date { display: block; font-family: var(--font-family-en); font-size: var(--font-size-small); color: #71807d;}
ul.articles li a span.name { display: block; margin: 1rem 0; font-size: 2.1rem; font-weight: bold; line-height: 1.5;}
ul.articles li a span.text { display: block; font-size: var(--font-size-small); line-height: 1.9; color: var(--muted-color);}
ul.articles li a span.more { display: block; margin-top: 1.5rem; font-size: var(--font-size-small); font-weight: bold; color: var(--deep-color);}
ul.articles li a span.more:after { content: '\00a0›';}

/*  cards  */
ul.main { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; margin: 0; padding: 0; list-style: none;}
ul.main li { margin: 0;}
ul.main li a { display: block; color: var(--text-color);}
ul.main li a span.thumbnail { display: block; aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--pale-color); border-radius: 22px 7px; box-shadow: var(--shadow);}
ul.main li a span.thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover;}
ul.main li a span.date { display: block; margin-top: 1rem; font-family: var(--font-family-en); font-size: var(--font-size-small); color: #71807d;}
ul.main li a span.name { display: block; margin-top: 0.4rem; font-weight: bold; line-height: 1.6;}

/*  categories  */
ul.categories { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0 0 3rem; padding: 0; list-style: none;}
ul.categories li { margin: 0;}
ul.categories li a {
	display: block;
	padding: 0.4em 1.4em;
	background-color: var(--pale-color);
	border-radius: 100px;
	color: var(--deep-color);
	font-size: var(--font-size-small);
	font-weight: bold;
}
ul.categories li.current a { background-color: var(--main-color); color: #ffffff;}
ul.categories.anchors li a:before { content: '↓ '; opacity: 0.6;}

/*  faq  */
details.faqitem { margin: 1.2rem 0; padding: 0 1.5rem; background-color: var(--base-color); border-radius: 13px;}
details.faqitem summary {
	position: relative;
	padding: 2.3rem 3.5rem 2.3rem 4rem;
	font-weight: bold;
	line-height: 1.6;
	list-style: none;
	cursor: pointer;
}
details.faqitem summary::-webkit-details-marker { display: none;}
details.faqitem summary:before {
	content: 'Q';
	position: absolute;
	left: 0.5rem;
	top: 2.1rem;
	font-family: var(--font-family-en);
	font-size: 2.2rem;
	font-weight: normal;
	line-height: 1.2;
	color: var(--main-color);
}
details.faqitem summary:after { content: '＋'; position: absolute; right: 0.5rem; top: 2.1rem; font-size: 2.2rem; font-weight: normal; line-height: 1.2; color: var(--main-color);}
details.faqitem[open] summary:after { content: '－';}
details.faqitem div.body { position: relative; padding: 0 1rem 2.5rem 4rem; line-height: 1.9; color: var(--muted-color);}
details.faqitem div.body:before {
	content: 'A';
	position: absolute;
	left: 0.5rem;
	top: 0;
	font-family: var(--font-family-en);
	font-size: 2.2rem;
	font-weight: bold;
	line-height: 1.2;
	color: var(--accent-color);
}
details.faqitem div.body p { margin: 0 0 1em;}
details.faqitem div.body p:last-child { margin-bottom: 0;}
section.faqsection { margin-bottom: 4rem;}

@media screen and (min-width: 768px) {
	ul.newslist li a { grid-template-columns: 12rem auto 1fr 2.4rem; gap: 1.8rem;}
	ul.newslist li a:after { grid-area: 1 / 4 / 2 / 5;}
	ul.newslist li a span.label { grid-column: 2;}
	ul.newslist li a span.title { grid-column: 3;}
	ul.features { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 2.4rem 5rem;}
	ul.features li { justify-content: center; padding: 1.5rem 2rem; border-bottom: none; border-right: 1px #dce9e5 solid;}
	ul.features li:last-child { border-right: none;}
	ul.features li h3 { font-size: 1.6rem;}
	ul.features li p { font-size: 1.2rem;}
	ul.concerns { grid-template-columns: repeat(2, 1fr); gap: 3.4rem 2.4rem;}
	ul.concerns li a { min-height: 26rem; padding: 8rem 2.8rem 8rem;}
	ul.concerns li a:before { inset: 2.8rem 0.8rem 0.7rem; border-radius: 48% 21% 43% 46% / 43% 30% 43% 52%;}
	ul.concerns li a span.bubble { top: 4.4rem; gap: 4px; width: 5.2rem; height: 3.4rem;}
	ul.concerns li a span.bubble:after { bottom: -8px; left: 3px; width: 16px; height: 14px;}
	ul.concerns li a span.bubble i { width: 5px; height: 5px;}
	ul.concerns li a span.name { width: 82%; font-size: clamp(13px, 1.08vw, 16px); line-height: 1.75;}
	ul.concerns li a span.name:after { height: 4px; margin-top: 1.3rem;}
	ul.concerns li a span.arrow { bottom: 2.5rem; width: 3.1rem; height: 3.1rem;}
	ul.departments { gap: 1.5rem;}
	ul.departments li { padding: 2.2rem; font-size: 2rem;}
	ol.steps li { grid-template-columns: 7.5rem 1fr; gap: 2.5rem; padding: 2.8rem 3.4rem;}
	ol.steps li:not(:last-child):after { left: 6.65rem;}
	ol.steps li span.number { width: 6.5rem; height: 6.5rem; font-size: 2rem;}
	ol.steps li span.number img { top: -1.7rem; left: -1.5rem;}
	ol.steps li h3 { font-size: 2.2rem;}
	ul.articles li a { padding: 3rem 3.4rem;}
	ul.main { grid-template-columns: repeat(3, 1fr); gap: 3rem 2.6rem;}
	details.faqitem { padding: 0 2.5rem;}
	details.faqitem summary { padding: 2.3rem 4rem 2.3rem 4.5rem;}
	details.faqitem div.body { padding: 0 4rem 2.5rem 4.5rem;}
}

@media screen and (min-width: 1050px) {
	ul.concerns { grid-template-columns: repeat(4, 1fr);}
}

/*

    Media

*/

figure.image { margin: 2em 0;}
figure.image img { display: block; width: 100%; border-radius: 22px 7px;}
figure.image figcaption { margin-top: 0.6em; font-size: var(--font-size-small); color: var(--muted-color);}

/*  image and text  */
div.imagetext { display: grid; gap: 2.8rem; margin: 2em 0;}
div.imagetext div.image img { display: block; width: min(78%, 300px); margin: 0 auto; border-radius: 22px 7px;}
div.imagetext div.text p { margin: 0 0 1.5em; font-size: var(--font-size-small); line-height: 2; color: var(--muted-color);}
div.imagetext div.text p:last-child { margin-bottom: 0;}

/*  gallery  */
ul.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin: 0; padding: 0; list-style: none;}
ul.gallery li { margin: 0;}
ul.gallery li figure { margin: 0; overflow: hidden; border-radius: 22px 7px; box-shadow: var(--shadow);}
ul.gallery li figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 52%;}
ul.gallery li figure figcaption { padding: 0.5em 0.8em; background-color: var(--surface-color); font-size: var(--font-size-small); color: var(--muted-color);}
div.marquee { width: 100%; overflow: hidden;}
div.marquee ul.gallery { display: flex; gap: 1.4rem; width: max-content; animation: marquee 42s linear infinite;}
div.marquee ul.gallery:hover { animation-play-state: paused;}
div.marquee ul.gallery li { flex: none; width: 38.5vw;}
div.marquee ul.gallery li figure img { height: 16.5rem; aspect-ratio: auto;}

@keyframes marquee {
	100% { transform: translateX(calc(-50% - 0.7rem));}
}

/*  profile  */
div.profile { max-width: 42rem; margin: 0 auto;}
div.profile figure { margin: 0;}
div.profile figure img {
	display: block;
	width: 100%;
	height: 45rem;
	object-fit: cover;
	object-position: center top;
	border-radius: 80px 15px 15px;
	box-shadow: 0 18px 35px rgba(47, 70, 65, 0.14);
}
div.profile p.name {
	position: relative;
	margin: -4.4rem 2rem 0;
	padding: 2rem;
	background-color: var(--surface-color);
	border-radius: 15px;
	text-align: center;
	box-shadow: 0 8px 25px rgba(47, 70, 65, 0.12);
}
div.profile p.name span.role, div.profile p.name small { display: block; font-size: var(--font-size-small); color: var(--muted-color);}
div.profile p.name strong { display: block; margin: 0.5rem 0; font-family: var(--font-family-serif); font-size: 2.4rem; line-height: 1.4;}

/*  map  */
div.map { height: 38.75rem; overflow: hidden; border-radius: 30px; box-shadow: 0 12px 30px rgba(47, 70, 65, 0.1);}
div.map iframe { display: block; width: 100%; height: 100%; border: none;}
div.access h3 { margin: 0 0 0.5rem; font-family: var(--font-family-serif); font-size: 2.5rem; font-weight: normal;}
div.access p, div.access address { margin: 0 0 0.5em; color: var(--muted-color); line-height: 2;}
div.access a.more { margin-top: 1.5rem;}

@media screen and (min-width: 768px) {
	div.imagetext { grid-template-columns: minmax(250px, 0.55fr) minmax(0, 1.45fr); align-items: center; gap: 6.5rem;}
	div.imagetext.reverse { grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);}
	div.imagetext.reverse div.image { order: 2;}
	div.imagetext div.image img { width: 100%; max-width: 340px;}
	div.imagetext div.text p { font-size: var(--font-size-small); line-height: 2.15;}
	ul.gallery { grid-template-columns: repeat(3, 1fr); gap: 2.6rem;}
	ul.gallery li figure { border-radius: 28px 9px;}
	div.marquee ul.gallery { gap: 2.6rem; animation-duration: 52s;}
	div.marquee ul.gallery li { width: clamp(147px, 16.66vw, 250px);}
	div.marquee ul.gallery li figure img { height: 16.7rem;}
	div.profile figure img { height: 43rem;}
	div.map { height: 43rem;}
}

@media (prefers-reduced-motion: reduce) {
	div.marquee { overflow-x: auto;}
	div.marquee ul.gallery { animation: none;}
}

/*

    Tables

*/

div.table { overflow-x: auto;}
table.terms { width: 100%; border-collapse: collapse;}
table.terms th, table.terms td { padding: 1em 1.2em; border: none; border-bottom: 1px var(--border-color) solid; background: none; text-align: left; vertical-align: top;}
table.terms th { width: 10em; font-weight: bold; color: var(--deep-color); white-space: nowrap;}

/*  schedule  */
div.schedule { padding: 1.8rem 1rem; background-color: var(--surface-color); border-radius: 22px; color: var(--text-color); overflow-x: auto;}
div.schedule table { width: 100%; border-collapse: collapse; text-align: center;}
div.schedule th, div.schedule td { padding: 1.5rem 0.7rem; border: none; border-bottom: 1px var(--border-color) solid; background: none; font-size: var(--font-size-small); text-align: center;}
div.schedule thead th { font-weight: bold; color: var(--deep-color);}
div.schedule thead th:first-child, div.schedule tbody th { text-align: left; font-weight: bold; white-space: nowrap;}
div.schedule td { font-weight: bold; color: var(--main-color);}
div.schedule p { margin: 2.4rem 0 0; font-size: var(--font-size-small);}
div.schedule p b { margin-right: 1em; color: var(--accent-color);}

@media screen and (min-width: 768px) {
	div.schedule { padding: 3.5rem;}
	div.schedule th, div.schedule td { padding: 1.8rem 1rem;}
	div.schedule tbody th, div.schedule td, div.schedule p { font-size: 1.4rem;}
}

/*

    Article detail

*/

article.articledetail p.date { margin: 0; font-family: var(--font-family-en); font-size: 1.4rem; color: #71807d;}
article.articledetail p.date span.label { margin-left: 1em; font-family: var(--font-family);}
article.articledetail h1.contentheading { margin: 1.5rem 0 4.5rem; padding-bottom: 2.5rem; font-size: clamp(28px, 4vw, 44px);}
article.articledetail div.meta { margin-bottom: 1.5em; padding: 1em 1.5em; background-color: var(--pale-color); border-radius: var(--radius-small);}
article.articledetail div.article { min-height: 16rem; line-height: 2; color: #566964;}
article.articledetail div.article p { margin: 0 0 1.2em;}
article.articledetail div.article img { height: auto; border-radius: 22px 7px;}
article.articledetail div.article ul, article.articledetail div.article ol { margin: 0 0 1.5em 1.5em;}
article.articledetail div.article table { width: 100%; margin-bottom: 1.5em; border-collapse: collapse;}
article.articledetail div.article th, article.articledetail div.article td { padding: 0.6em 0.8em; border: none; border-bottom: 1px var(--border-color) solid; background: none; text-align: left;}
article.articledetail div.article th { color: var(--deep-color);}
nav.neighbors { display: flex; justify-content: space-between; gap: 1em; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px var(--border-color) solid; font-size: var(--font-size-small); font-weight: bold;}
nav.neighbors a { color: var(--deep-color);}
nav.neighbors a.prev:before { content: '← ';}
nav.neighbors a.next { margin-left: auto; text-align: right;}
nav.neighbors a.next:after { content: ' →';}

/*  Block editor contents  */
div.article div.be-item { margin-bottom: 1.5em;}
div.article div.be-item:last-child { margin-bottom: 0;}
div.article div.be-item p { margin: 0;}
div.article div.be-item a img { display: block; width: 100%; border-radius: 22px 7px;}
div.article div.be-item a { display: block; max-width: 480px; margin: 2em 0;}
div.article div.be-item a + a { margin-top: 1.5em;}
div.article div.be-item h2, div.article div.be-item h3 { margin: 1.5em 0 0.75em;}
div.article div.be-item blockquote { margin: 0;}

@media screen and (min-width: 768px) {
	div.article div.be-item a { display: inline-block; width: calc(50% - 1em); max-width: 100%; vertical-align: top;}
	div.article div.be-item a + a { margin-top: 2em; margin-left: 1.5em;}
}

/*

    Preset page body

*/

article.pagebody section.field { margin-bottom: 4rem;}
article.pagebody section.field h2 { margin: 0 0 1em; font-family: var(--font-family-serif); font-size: 2.2rem; font-weight: normal;}
article.pagebody section.field dl.pairs { display: grid; grid-template-columns: max-content 1fr; gap: 0.5em 1.5em; margin: 0;}
article.pagebody section.field dl.pairs dt { color: var(--deep-color);}
article.pagebody section.field dl.pairs dd { margin: 0; color: var(--muted-color);}
article.pagebody section.field figure { margin: 0;}
article.pagebody section.field figure img { border-radius: 22px 7px;}
article.pagebody section.field figcaption { font-size: var(--font-size-small); color: var(--muted-color);}

/*

    Pager

*/

nav.page { margin-top: 4rem;}
nav.page ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin: 0; padding: 0; list-style: none;}
nav.page ol li { margin: 0;}
nav.page ol li a, nav.page ol li span {
	display: grid;
	place-items: center;
	min-width: 4rem;
	height: 4rem;
	padding: 0 0.8rem;
	background-color: var(--pale-color);
	border-radius: 100px;
	color: var(--deep-color);
	font-family: var(--font-family-en);
	font-size: var(--font-size-small);
	font-weight: bold;
	box-sizing: border-box;
}
nav.page ol li span.current { background-color: var(--main-color); color: #ffffff;}
nav.page ol li span.ellipsis { background: none; color: var(--muted-color);}
nav.page ol li a.prev, nav.page ol li a.next { padding: 0 1.4rem; font-family: var(--font-family);}

/*

    Mailform

*/

div.mailform div.message { margin-bottom: 2em;}
div.mailform div.message.finish, div.mailform div.message.closed { padding: 2em; background-color: var(--cream-color); border-radius: var(--radius); text-align: center;}
div.mailform div.supple { margin-top: 2em;}
div.mailform p.errordetect { margin-bottom: 1.5em; padding: 1em 1.5em; background-color: #fff1f1; border-radius: var(--radius-small); color: var(--warning-color); font-weight: bold;}
form.mailform dl { margin: 0; border-top: 1px var(--border-color) solid;}
form.mailform dt { padding: 1.2em 0 0.4em; font-weight: bold;}
form.mailform dt span.label.requirement { margin-right: 0.6em;}
form.mailform dd { margin: 0; padding: 0 0 1.2em; border-bottom: 1px var(--border-color) solid;}
form.mailform dd.error input, form.mailform dd.error textarea, form.mailform dd.error select { border-color: var(--warning-color); background-color: #fff8f6;}
form.mailform dd p.error { margin: 0.5em 0 0; color: var(--warning-color); font-size: var(--font-size-small); font-weight: bold;}
form.mailform dd p.notes { margin: 0.5em 0 0;}
form.mailform input[type=text], form.mailform input[type=email], form.mailform input[type=tel], form.mailform textarea, form.mailform select { width: 100%; padding: 0.8em 1em; box-sizing: border-box; background-color: var(--surface-color); border-color: #cfdfdb;}
form.mailform select { background-image: linear-gradient(45deg, transparent 50%, var(--muted-color) 50%), linear-gradient(135deg, var(--muted-color) 50%, transparent 50%); background-position: calc(100% - 1.4em) 50%, calc(100% - 1em) 50%; background-size: 0.4em 0.4em; background-repeat: no-repeat; padding-right: 2.4em;}
form.mailform textarea { min-height: 8em; line-height: 1.8;}
form.mailform span.confirmation { display: block; margin-top: 0.8em;}
form.mailform span.confirmationlabel { display: block; margin-bottom: 0.3em; font-size: var(--font-size-small); color: var(--muted-color);}
form.mailform div.choices { display: flex; flex-wrap: wrap; gap: 0.5em 1.5em;}
form.mailform div.choices.vertical { flex-direction: column; gap: 0.5em;}
form.mailform div.choices label { display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer;}
form.mailform div.choices input[type=checkbox], form.mailform div.choices input[type=radio] { -webkit-appearance: auto; appearance: auto; width: 1.2em; height: 1.2em; margin: 0; accent-color: var(--main-color);}
form.mailform div.choices input.othertext { width: auto; flex: 1 1 10em; padding: 0.4em 0.6em;}
form.mailform div.address p { margin: 0 0 0.6em;}
form.mailform div.address input.zip1, form.mailform div.address input.zip2 { width: 5em; display: inline-block;}
form.mailform div.address select.pref { width: auto; min-width: 10em;}
form.mailform div.name, form.mailform div.ruby { display: flex; gap: 0.6em; margin-bottom: 0.6em;}
form.mailform div.birthday { display: flex; flex-wrap: wrap; gap: 0.6em;}
form.mailform div.birthday select { width: auto;}
form.mailform dd.description div.description { font-size: var(--font-size-small); color: var(--muted-color);}
form.mailform dd.file p.uploaded { margin: 0.5em 0 0; font-size: var(--font-size-small);}
form.mailform dd img.preview { max-height: 150px; display: block; margin-top: 0.5em;}
form.mailform p.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;}
form.mailform p.submit { margin: 2em 0 0; text-align: center;}
form.mailform button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 23.5rem;
	padding: 1.7rem 2.5rem;
	background-color: var(--accent-color);
	border: none;
	border-radius: var(--radius-small);
	color: #ffffff;
	font-family: inherit;
	font-size: inherit;
	font-weight: bold;
	text-align: center;
	line-height: 1.45;
	box-shadow: 0 7px 18px rgba(199, 164, 92, 0.22);
	cursor: pointer;
	transition: var(--transition);
}
form.mailform button.button:after { content: '›'; margin-left: 1.8rem; font-size: 2.3rem; line-height: 1;}
form.mailform button.button:hover { opacity: 0.7;}
form.mailform button.button.light { background-color: var(--surface-color); color: var(--accent-color); box-shadow: var(--shadow);}
form.mailform button.button.large { padding: 2rem 3.5rem; font-size: var(--font-size-large);}
form.mailform.confirm dd { white-space: pre-wrap; word-break: break-all;}
div.mailform div.back { margin-top: 1.5em;}

@media screen and (min-width: 768px) {
	form.mailform dl { display: grid; grid-template-columns: 18em 1fr;}
	form.mailform dt { padding: 1.2em 1em 1.2em 0; border-bottom: 1px var(--border-color) solid;}
	form.mailform dd { padding: 1.2em 0;}
}