@charset "UTF-8";


@keyframes hero {
	0% {
		border-radius: 58% 36% 46% 41% / 42% 58% 38% 51%;
		animation-timing-function: ease-in-out;
	}
	25% {
		border-radius: 37% 58% 39% 37% / 49% 51% 45% 43%;
		animation-timing-function: ease-in-out;
	}
	50% {
		border-radius: 54% 39% 31% 60% / 41% 37% 58% 43% ;
		animation-timing-function: ease-in-out;
	}
	75% {
		border-radius: 48% 37% 43% 41% / 35% 55% 31% 46%;
		animation-timing-function: ease-in-out;
	}
	100% {
		border-radius: 58% 36% 46% 41% / 42% 58% 38% 51%;
		animation-timing-function: ease-in-out;
	}
}


/* //////////////////////////////////////////////////////////////////////////////////////////////////// */

/* 色合い */

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
body {
	--main-color: #0844D0;
	--link-color: #0033FF;
	--visited-color: #60C;
	--accent-color: #273D95;
	--bg-color: #FFF;
	--font-color: #000;
	--footer-color: #6AC04B;
	--border-color1: #D9D9D9;
	--border-color2: #999;
	--border-color3: #DDD;
	--lg-blue: linear-gradient(90deg, #0033FF, #00C6D4);
	--lg-blue-v: linear-gradient(180deg, #00C6D4, #0033FF);
	--lg-orange: linear-gradient(90deg, #FF3700, #FF9900);
	--lg-bg: linear-gradient(#9AC1FF, #D5E5FF);
	--htitle: #EEE;
}
a {
	color: var(--link-color);
	transition: .3s;

	main &:visited {
		color: var(--visited-color);
	}
}
a.btn:visited {
	color: var(--link-color);
}



/* //////////////////////////////////////////////////////////////////////////////////////////////////// */

/* リセット用CSS */

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
a, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video,
*::before,
*::after {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
	box-sizing: border-box;
}
label input:focus + span {
	outline: auto;
}
th, td {
    vertical-align:middle;
}
iframe, img {
	vertical-align: bottom;

	&[allowfullscreen] {
		margin-bottom: 20px;
	}
}
img {
	max-width: 100%;
	display: inline-block;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}
nav ul {
    list-style:none;
}
ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;

	&[disabled] {
		opacity: .35;
		pointer-events: none;
	}
}
a:not([class]) {
	text-decoration-skip-ink: auto;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    height:1px;
    margin: 1em 0;
    padding: 0;
    display:block;
    border-top:1px solid var(--border-color2);
    border:0;
}
input, select {
    vertical-align:middle;
}
input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="button"],
input[type="submit"] {
	box-sizing: border-box;
}
input[type="submit"] {
	cursor: pointer;
}



/* //////////////////////////////////////////////////////////////////////////////////////////////////// */

/* 共通 */

/* //////////////////////////////////////////////////////////////////////////////////////////////////// */
html:has(#menu > .active) {
	overflow: hidden;
}
html.large body {
	font-size: 1.25em;
}

body {
	min-height: 100vh;
	color: var(--font-color);
    line-height:1;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 400;
	font-feature-settings: "palt";
	background-color: var(--bg-color);
	scroll-behavior: smooth;
	text-rendering: optimizeSpeed;
}
br {
	font-size: 0;
}
img {
	max-width: 100%;
	vertical-align: bottom;
}

/* IE・旧Edge用webフォントジャギ対策 */
_:-ms-lang(x),
p,a,span,strong,h2,h3,h4,h5,h6,li,dt,dd,th,td {
	transform: rotate(0.05deg);
}
_:-ms-lang(x), #usability .radio label input:focus + span::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 2px dotted #000;
	border-radius: 16px;
	box-sizing: border-box;
}
/* Chromium Edge用webフォントジャギ対策 */
_:lang(x)::-ms-,
p,a,span,strong,h2,h3,h4,h5,h6,li,dt,dd,th,td {
	transform: rotate(0.05deg);
}

input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="number"],
textarea,
.select-wrapper {
	height: 3.5em;
	padding: 0 1em;
	font-size: .9em;
	border: 1px solid rgba(0,0,0,.15);
	border-top-color: rgba(0,0,0,.3);
	border-left-color: rgba(0,0,0,.3);
	border-radius: 5px;
	box-shadow: 3px 3px 0 0 rgba(0,0,0,.05) inset;
}
input[type="text"]:not([size]),
input[type="search"]:not([size]),
input[type="url"]:not([size]),
input[type="email"]:not([size]),
textarea {
	width: 100%;
}
textarea {
	height: auto;
	min-height: 6em;
	padding: 1em;
	min-height: 6em;
}
.select-wrapper {
	padding: 0;
	position: relative;
	background-color: var(--bg-color);

	& select {
		height: 100%;
		padding: 0 2em 0 .65em;
		border: none;
		appearance: none;
		cursor: pointer;
	}
}
.select-wrapper::after {
	content: "";
	width: 0;
	height: 0;
	display: block;
	position: absolute;
	top: 50%;
	right: .3em;
	border: 5px solid transparent;
	border-top: 7px solid var(--font-color);
	border-bottom: 0;
	transform: translate(-50%, -40%);
	pointer-events: none;
}
.table-wrapper {
	max-width: 100%;
	overflow-x: auto;
}
label {
	margin-bottom: .2em;
	padding: .5em 0;
	display: inline-block;
}
a.btn {
	min-width: 300px;
	padding: 1em;
	display: inline-block;
	line-height: 1;
	color: #FFF !important;
	font-size: 1.15em;
	text-decoration: none;
	background-image: var(--lg-orange);
	border: 1px solid #FFF;
	border-radius: 4px;
	box-shadow: 0 5px 12px 0 #0004, 0 2px 4px #0002;
	transition: .3s;

	&:hover {
		transform: scale(1.05);
		filter: brightness(1.2);
	}

	&[target="_blank"] {
		padding-right: 3em;
		position: relative;

		&::after {
			content: "";
			width: 1.2em;
			height: 1.2em;
			display: block;
			position: absolute;
			top: calc(50% - .6em);
			right: 10px;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22128%22%20height%3D%22128%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%230066cc%22%3E%3Cpath%20d%3D%22M1408%20928v320q0%20119-84.5%20203.5t-203.5%2084.5h-832q-119%200-203.5-84.5t-84.5-203.5v-832q0-119%2084.5-203.5t203.5-84.5h704q14%200%2023%209t9%2023v64q0%2014-9%2023t-23%209h-704q-66%200-113%2047t-47%20113v832q0%2066%2047%20113t113%2047h832q66%200%20113-47t47-113v-320q0-14%209-23t23-9h64q14%200%2023%209t9%2023zm384-864v512q0%2026-19%2045t-45%2019-45-19l-176-176-652%20652q-10%2010-23%2010t-23-10l-114-114q-10-10-10-23t10-23l652-652-176-176q-19-19-19-45t19-45%2045-19h512q26%200%2045%2019t19%2045z%22%2F%3E%3C%2Fsvg%3E");
			background-size: cover;
			background-position: center center;
			filter: brightness(0) invert(1);
		}
	}
}
.btn input {
	width: 200px;
	margin: -0.5em -1em;
	padding: 1em 1em;
	font-size: 1em;
	background: none;
	border: none;
	cursor: pointer;
}
.center {
	text-align: center;
}
.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
}
.flex[data-col="1"] {
	gap: 20px;
	& > * {
		width: 100%;
	}
}
.flex[data-col="2"]:has(.btn + .btn) {
	padding: 10px 30px 40px;

	& .btn {
		margin-bottom: 20px;
		text-align: center;
	}
}
.flex[data-col="2"] > * {
	width: calc((100% - 30px) / 2);
}
.flex[data-col="3"] > * {
	width: calc((100% - 60px) / 3);
}

.fix::after {
	content: "";
	width: 0;
	height: 0;
	display: block;
	clear: both;
}
.fl {
	margin-right: 20px;
	margin-bottom: 20px;
	float: left;
}
.fr {
	margin-left: 20px;
	margin-bottom: 20px;
	float: right;
}

.right {
	text-align: right;
}

.list {
	padding-left: 1.5em;
}

.peekaboo {

	& > :last-child {
		margin-top: .5em;
		padding: 0 1em;
		display: grid; 
		grid-template-rows: 0fr;
		transition: 350ms grid-template-rows ease;

		.active + & {
			padding: 1em;
			grid-template-rows: 1fr;
			background-color: #F9F9F9;
			border-radius: 12px;
			box-shadow: 2px 2px 2px 0 #0003 inset;
		}

		& > * {
			overflow: hidden;
		}
	}
}



/* //////////////////////////////////////////////////////////// */
/* #header */
/* //////////////////////////////////////////////////////////// */
header {
	padding: 20px 20px 0px 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 3;

	& h1 {
		width: 184px;
		height: 60px;

		& a {
			display: block;
		}
	}

	& nav {

		& a {
			color: var(--font-color);
			text-decoration: none;
		}

		& > * {
			text-align: right;

			& > * {
				margin-left: 20px;
				display: inline-block;
			}
		}

		& #sns {

			& i {
				width: 25px;
				height: 25px;
				display: block;
				overflow: hidden;
				text-indent: 200%;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;

				#youtube & { background-image: url(img/youtube.svg); }
				#x & { background-image: url(img/x.svg); }
				#instagram & { background-image: url(img/instagram.svg); }
				#tel & { background-image: url(img/tel.svg); }
			}

			& #tel {
				display: inline-flex;
				align-items: center;
				gap: 10px;
				color: var(--link-color);
				font-size: 28px;
				font-weight: 700;
			}
		}

		& #menu {
			margin: 4px -12px -12px 0;
			font-weight: 700;

			& > * {
				margin-left: 6px;
				padding: 12px;
			}

			& div {
				position: relative;
				border-radius: 6px 6px 0 0;

				&:hover {
					background-color: #000B;
					transition: .4s;

					& a {
						color: #FFF;
					}
				}

				& ul {
					position: absolute;
					top: 100%;
					right: 0;
					text-align: left;
					opacity: 0;
					pointer-events: none;
					transition: .4s;

					& li {
						padding-top: 1px;
						white-space: nowrap;
						
						& a {
							padding: 12px;
							display: block;
							color: #FFF;
							background-color: #000B;
						}
					}
				}
				&:hover ul {
					opacity: 1;
					pointer-events: all;
				}
			}
		}
	}
}



/* //////////////////////////////////////////////////////////// */
/* article */
/* //////////////////////////////////////////////////////////// */
main {
	display: flex;
	flex-direction: column;

	& #hero-image {
		padding: 90px 0 80px;
		position: relative;
		background-image: url(img/hero.png), url(img/hero_bg.jpg);
		background-size: auto 110%;
		background-position: center bottom;
		background-repeat: no-repeat, repeat-x;

		&::before {
			content: "";
			height: 200px;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-image: linear-gradient(#FFF, #FFF0);
			z-index: 1;
		}

		& div {
			width: 430px;
			height: 370px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20px;
			padding-top: 30px;
			position: relative;
			overflow: hidden;
			left: calc(50% + 214px);
			animation: hero 10s linear 0s infinite;

			&::before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background-image: linear-gradient(#FF5500, #993300);
				mix-blend-mode: hard-light;
				z-index: 1;
			}

			& > * {
				position: relative;
				color: #FFF;
				z-index: 2;
			}

			& h2 {
				font-size: 40px;
				font-weight: 400;

				&::before,
				&::after {
					content: "";
					width: 46px;
					height: 46px;
					display: block;
					position: absolute;
					top: -25px;
					left: -55px;
					background-image: url(img/hero.svg);
				}
				&::after {
					left: auto;
					right: -55px;
					transform: scaleX(-1);
				}
			}

			& p {
				width: 15em;
				line-height: 1.6;
				font-size: 24px;
				font-weight: 700;
				text-shadow: 0 2px 4px #0004;

				& span {
					display: block;
				}
				& span:nth-child(2) {
					margin-left: 1em;
				}
				& span:nth-child(3) {
					margin-left: 11em;
				}
			}
		}
	}

	& #page-title {
		height: 360px;
		margin-top: 20px;
		position: relative;

		&::before {
			content: "";
			width: 100px;
			display: block;
			position: absolute;
			top: 0;
			bottom: 0;
			left: calc(50% - 165px);
			background-image: linear-gradient(90deg, #FFF, transparent);
			z-index: 2;
		}

		& h2 {
			min-width: 50vw;
			padding: 0 120px 120px calc(50vw - 605px);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			line-height: 1;
			color: #FFF;
			font-size: 40px;
			text-shadow: 0 2px 4px #0004;

			&::before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-image: linear-gradient(135deg, #00C6D4, #0033FF);
				transform-origin: right top;
				transform: skewX(-15deg);
				mix-blend-mode: multiply;
				z-index: 3;
			}

			& span {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 30px;
				position: relative;
				z-index: 4;

				&::before,
				&::after {
					content: "";
					width:3px;
					height: 60px;
					display: block;
					background-color: #FFF;
					rotate: 30deg;
				}
			}
		}

		& img {
			width: calc(50vw + 165px);
			height: 100%;
			object-fit: cover;
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
		}
	}

	#contents > div,
	body.top & > *:not(#hero-image) > section {
		width: 860px;
		margin: 0 auto;
		transform: translate(-170px, 0);
	}

	& #contents {
		padding-bottom: 30px;
		flex-grow: 2;
		line-height: 1.5;
		background-image: var(--lg-bg);

		body.top & {
			flex-grow: 0;
		}

		& > div {
			margin-bottom: -120px;
			padding: 30px;
			position: relative;
			background-color: #FFF;
			border-radius: 6px;
			box-shadow: 0 5px 16px 0 #0002, 0 3px 8px 0 #0003, 0 1px 3px 0 #0004;
			transform: translate(-170px, -120px);
			z-index: 5;

			body.top & {
				margin-bottom: -50px;
				transform: translate(-170px, -50px);
			}

			& > section {
				margin-bottom: 40px;

				& section {
					margin-bottom: 20px;

					& section + section {
						margin-top: 40px;
					}

					h2 + & {
						margin-top: -13px;
					}
				}
			}

			& h2 {
				margin-bottom: 30px;
				padding: 12px;
				display: flex;
				justify-content: flex-start;
				align-items: stretch;
				gap: 12px;
				color: #FFF;
				font-size: 24px;
				font-weight: 400;
				background-image: var(--lg-orange);
				border-radius: 5px;

				&::before {
					content: "";
					width: 6px;
					display: block;
					background-color: #FFF;
					border-radius: 2px;
				}

				body.top & {
					padding: 12px 20px;
					border-radius: 0;

					&::before {
						content: none;
					}
				}
			}

			& h3 {
				margin-bottom: 15px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 15px;
				color: var(--accent-color);
				font-size: 20px;

				&::before {
					content: "";
					width: 5px;
					height: 2.5em;
					display: block;
					background-image: var(--lg-blue-v);
				}

				.inquiry-box & {
					padding: 0 10px;
					position: absolute;
					top: 0;
					left: 10px;
					background-image: linear-gradient(#FFF 50%, #FFF2DF 50%);
					transform: translate(0, calc(-50% - 2px));

					&::before {
						content: none;
					}
				}
			}

			& h3 ~ * {
				margin-left: 20px;
			}

			& h4 {
				margin-bottom: .5em;
				color: #FF3700;
				font-size: 1.13em;
			}

			& img {
				margin-bottom: 20px;
			}

			& p {
				margin-bottom: 1em;
				line-height: 1.9;

				&:has(> mark) {
					line-height: 1.5;
				}
			}

			& mark {
				line-height: 1.4;
				background-image: linear-gradient(transparent 50%, #FFDEEB 50%);
			}

			& address {
				font-style: normal;
			}

			& ul,
			& ol {
				padding-left: 1.6em;

				h6 + & {
					margin-top: .5em;
				}

				& li {
					margin-bottom: 1em;
				}
			}
			& ol[data-type="kanji"] {
				list-style: cjk-ideographic;
			}
			& ul[data-list-style="disc"] {
				list-style: disc;
			}
			& ol[data-list-style="（"] {
				padding-left: 0;
				list-style: none;
				counter-reset: free;

				& > li {
					padding-left: 1.5em;
					position: relative;
					counter-increment: free;

					&::before {
						content: "（"counter(free)"）";
						display: block;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
			& ol[data-list-style="circle"] {
				padding-left: 0;
				list-style: none;
				counter-reset: free;

				& > li {
					padding-left: 1.2em;
					position: relative;
					counter-increment: free;

					&::before {
						content: counter(free);
						width: 1rem;
						height: 1rem;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: .4em;
						left: 0;
						font-size: .75em;
						border: 1px solid #000;
						border-radius: 1em;
					}
				}
			}

			#philosophy {
				margin-bottom: 40px;
				padding: 30px;
				background-color: #deebff;
				border-radius: 12px;
				box-shadow: 4px 4px 0 0 #0001 inset,  2px 2px 0 0 #0003 inset;

				& > section {
					margin-bottom: 40px;

					&:last-child {
						margin-bottom: 0;
					}
				}

				& section.logo {
					padding-right: 35%;
					background-image: url(../guide/img/logo.png);
					background-position: 100% 0;
					background-repeat: no-repeat;
					background-size: 30%;
				}
				& .shishin {
					padding-right: 45%;
					background-image: url(../guide/img/ikeni.png);
					background-position: 100% 50%;
					background-repeat: no-repeat;
					background-size: 40%;
				}
				& .shishin-box {
					display: flex;
					flex-direction: row-reverse;
					align-items: center;

					& > div {
						width: 40%;
						padding-top: 40%;
						flex-shrink: 0;
						position: relative;

						&::before {
							content: "";
							display: block;
							position: absolute;
							top: 10%;
							bottom: 10%;
							left: 10%;
							right: 10%;
							border: 4px dashed var(--main-color);
							border-radius: 100%;
							z-index: 0;
						}

						&::after {
							content: "";
							display: block;
							position: absolute;
							top: 35%;
							bottom: 35%;
							left: 35%;
							right: 35%;
							background-image: url(../guide/img/logo.png);
							background-position: center;
							background-repeat: no-repeat;
							background-size: 100%;
							z-index: 0;
						}

						& > * {
							position: absolute;
							width: 3.5em;
							line-height: 3.5;
							color: #FFF;
							font-size: 1.7em;
							font-weight: 700;
							text-align: center;
							border: 1px solid #FFF;
							border-radius: 100%;
							z-index: 1;
						}
						& > *:nth-child(1) {
							top: 7%;
							left: 7%;
							background-color: #F30;
						}
						& > *:nth-child(2) {
							top: 7%;
							right: 7%;
							background-color: #29d200;
						}
						& > *:nth-child(3) {
							bottom: 7%;
							right: 7%;
							background-color: #ff33cc;
						}
						& > *:nth-child(4) {
							bottom: 7%;
							left: 7%;
							background-color: #000099;
						}
					}
				}

				& h2,
				& h3.h2_view {
					margin: 0 0 20px -40px;
					padding: 12px 22px 12px 32px;
					display: inline-block;
					position: relative;
					line-height: 1;
					color: var(--font-color);
					font-size: 24px;
					font-weight: 400;
					background-color: #FFF;
					background-image: none;
					border-radius: 0;
					box-shadow: 2px 2px 0 0 #0001;

					&::before {
						content: "";
						width: 0;
						height: 0;
						position: absolute;
						top: 100%;
						left: 0;
						background-color: transparent;
						border: 5px solid transparent;
						border-top-color: #0003;
						border-right-color: #0003;
					}

					&::after {
						content: "";
						width: 20px;
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						bottom: 0;
						background-image: linear-gradient(0deg, #FF3700, #FF9900);
					}
				}

				& h3 {
					padding: 0;
					display: block;
					font-size: 1.35em;

					&::before {
						content: none;
					}

					& strong {
						font-size: 1.3em;
					}
				}
			}

			.flow-list {
				counter-reset: flow;
				background-image: linear-gradient(90deg, transparent 53px, #74AAFF 53px 57px, transparent 57px);

				& li {
					counter-increment: flow;
					margin-bottom: 30px;
					display: flex;
					align-items: stretch;
					overflow: hidden;
					border-radius: 6px;

					& strong {
						width: calc(8em + 55px);
						padding: 0 20px;
						display: flex;
						align-items: center;
						gap: 15px;
						flex-shrink: 0;
						color: #FFF;
						font-weight: 700;
						background-color: #74AAFF;

						&::before {
							content: counter(flow);
							font-size: 2em;
							font-weight: 300;
						}
					}

					& span {
						padding: 0 20px;
						display: flex;
						align-items: center;
						flex-grow: 2;
						background-color: #D5E5FF;
					}
				}
			}

			& .data-list {
				margin-bottom: 1em;
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: stretch;

				& dt,
				& dd {
					width: calc(100% - 6em - 30px);
					padding: 10px;
					border-bottom: 1px solid var(--border-color1);
				}

				& dt {
					width: calc(6em + 10px);
					padding-right: 0;
					font-weight: 700;
				}
			}

			.law-list {
				dt {
					font-weight: 700;
					font-size: 1.2em;
				}
				dd {
					padding: 5px 0 20px 20px;
				}
			}

			& .note {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;

				&::before {
					content: "※";
					display: block;
				}

				& + .note {
					margin-top: -.5em;
				}
			}

			& .inquiry-box {
				margin-top: 40px;
				padding: 25px 20px 5px 0;
				position: relative;
				background-color: #FFF2DF;
				border: 2px solid #F90;
				border-radius: 8px;
			}

			& .intro-box {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: stretch;

				&.reha {
					margin-left: 0;
					padding-left: 0;

					& li {
						gap: 0;

						& strong {
							width: 100%;
							margin-bottom: 0;
							color: #FF3700;
							text-align: left;
						}

						p {
							max-height: 0;
							margin-bottom: 0;
							overflow: hidden;
							transition: .3s;
						}
						&.active p {
							max-height: 40em;
							margin-bottom: 1em;
						}
					}
				}

				&.nodoka {
					& strong {
						font-size: 1.3em;
						color: #FF3700;
					}
				}

				& li {
					width: 50%;
					margin: 0;
					padding: 30px;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 10px;
					border-top: 1px solid var(--border-color1);
					border-right: 1px solid var(--border-color1);

					&:first-child,
					&:first-child + * {
						border-top: none;
					}
					&:nth-of-type(2n) {
						border-right: none;
					}
					&:empty {
						border-right: none;
					}
					.reha & {
						width: calc(100% / 3);

						&:first-child + * + * {
							border-top: none;
						}
						&:nth-of-type(2n):not(:empty) {
							border-right: 1px solid var(--border-color1);
						}
						&:nth-of-type(3n):not(:empty) {
							border-right: none;
						}
					}

					& > * {
						order: 2;
					}

					& > div:has(img) {
						width: 160px;
						height: 160px;
						overflow: hidden;
						order: 1;

						& img {
							object-fit: cover;
						}
					}

					& > p {
						width: 100%;
					}

					& > strong {
						margin-bottom: 7px;
						text-align: center;
						color: var(--accent-color);
					}
				}
			}

			& .compare {
				margin-bottom: 20px;
				
				& > * {
					background-color: #daead4;
					border-radius: 8px;

					&:first-child {
						background-color: #ffd6d6;
					}
					&:last-child {
						background-color: #d1e8f8;
					}

					& dt {
						padding: 12px;
						font-weight: 700;
						text-align: center;
						background-color: #0001;
					}
					& dd {
						padding: 12px;

					}
				}
			}

			& .inspect-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: stretch;

				> * {
					width: calc(50% - 15px);
					margin-bottom: 40px;
					display: flex;
					flex-direction: column;

					& h3 {
						order: 1;
					}
					& strong {
						margin-bottom: 8px;
						order: 3;
						color: #FF3700;
					}
					& img {
						height: 250px;
						object-fit: contain;
						order: 2;
					}
					& p {
						order: 4;
					}
				}
			}
		
			& .spacer {
				width: .5em;
				display: inline-block;
			}
			
			& .center {
				text-align: center;
			}

			& .caution {
				color: #F00;
			}
			
			& table {
				width: 100%;
				margin-bottom: 30px;
				border-collapse: collapse;
				border-left: 1px solid #DDD;
				
				& caption {
					margin-bottom: .5em;
					text-align: left;
					font-weight: 700;
					color: #FF3700;
				}
				
				& thead {
					background-color: #C7DDFF;
					
					& th {
						padding: .5em;
						border-right: 1px solid #FFF;
					}
				}
				& th {
					font-weight: 700;
					text-align: center;
				}
				& th,
				& td {
					padding: 1em;
				}
				& tbody {
					& th,
					& td {
						border-right: 1px solid #DDD;
						border-bottom: 1px solid #DDD;
					}
				}
			}
		}
	}

	& #news {
		padding: 20px 0 30px;

		& h2 {
			margin-bottom: 30px;
			position: relative;
			line-height: 54px;
			font-size: 24px;

			&::after {
				content: "";
				width: 100%;
				height: 6px;
				display: block;
				background-image: var(--lg-blue);
			}
		}

		& ol {
			list-style: none;

			& li {
				margin-bottom: 30px;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				gap: 1em;

				& time {
					flex-shrink: 0;
					flex-grow: 0;
				}
			}
		}
	}

	& #contents #news {
		padding: 0 0 1px;

		& h2 {
			margin-bottom: 30px;
			padding: 0;
			display: block;
			position: relative;
			line-height: 1;
			color: var(--font-color);
			font-size: 24px;
			font-weight: 700;
			background-image: none;

			&::after {
				content: "";
				width: 100%;
				height: 6px;
				margin-top: 15px;
				display: block;
				background-image: var(--lg-blue);
			}
		}

		& ol {
			padding-left: 0;
			list-style: none;

			& li {
				margin-bottom: 30px;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				gap: 1em;

				& time {
					flex-shrink: 0;
					flex-grow: 0;
				}
			}
		}
	}

	& #instagram-box {
		padding: 30px 0;

		& h2 {
			margin-bottom: 30px;
			font-size: 40px;
			font-weight: 400;
			text-align: center;

			& img {
				height: 60px;
				margin-right: 30px;
				vertical-align: middle;
			}
		}
	}
}

#hyogo {
	margin-bottom: .5em;

	& strong {
		color: #F90;
		font-size: 1.3em;

		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 2em;
		height: 2em;
		margin-bottom: .3rem;
		margin-left: -.5em;
		padding: .5em;
		background-color: #F90;
		color:  #FFF;
		border-radius: 100%;
		box-sizing: border-box;
	}
}




/* //////////////////////////////////////////////////////////// */
/* aside */
/* //////////////////////////////////////////////////////////// */
aside {
	width: 320px;
	padding: 10px;
	position: absolute;
	top: 490px;
	left: calc(50% + 290px);
	background-color: #FFF;
	border-radius: 6px;

	body.top & {
		top: 650px;
	}

	& dt {
		margin-bottom: 10px;
		padding: 15px 20px;
		line-height: 1.5;
		color: #FFF;
		font-size: 20px;
		text-align: center;
		background-image: var(--lg-blue);
	}
	& dd:not(:last-child) {
		margin-bottom: 30px;
	}
}




/* //////////////////////////////////////////////////////////// */
/* footer */
/* //////////////////////////////////////////////////////////// */
footer {
	color: #FFF;
	background-color: var(--main-color);

	& section {
		width: 1210px;
		margin: 0 auto;
		padding: 35px 0;
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		& h1 {
			margin-bottom: 12px;
			line-height: 26px;
			font-size: 24px;
			font-weight: 500;

			& a {
				color: #FFF;
				text-decoration: none;
			}
		}
		& p {
			line-height: 1.5;

			& a {
				color: #FFF;
			}
		}

		& dl {
			& dt {
				width: 5em;
				margin-bottom: 12px;
				line-height: 26px;
				text-align: center;
				font-weight: 700;
				background-color: #FFF;
				color: var(--main-color);
			}
			& dd {
				line-height: 1.5;
			}
		}
	}
	& small {
		margin-top: -8px;
		padding-bottom: 35px;
		display: block;
		font-size: 14px;
		text-align: center;
		opacity: .6;
	}
}












/* /////////////////////////////////////////////////////////////////////////////////////// */
/* SP */
/* /////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1229px) {
	body {
		font-size: 14px;

		&.open {
			overflow: hidden;
		}
	}

	a:hover {
		color: var(--accent-color);
	}

	input[type="text"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	input[type="email"],
	input[type="password"],
	input[type="datetime"],
	input[type="date"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	input[type="number"],
	textarea {
		height: 2.5em;
		padding: 0 1em;
		font-size: .9em;
	}
	.select-wrapper {
		height: 2.5em;
		font-size: .9em;
	}

	.flex:has(> img + img),
	.flex.sp-break {
		flex-direction: column;

		& > * {
			width: 100%;
		}
	}


	/* //////////////////////////////////////////////////////////// */
	/* #header */
	/* //////////////////////////////////////////////////////////// */
	header {
		padding: 15px;
		z-index: 9;

		& h1,
		& h1 img {
			height: 50px;
		}

		& #sp-menu {
			width: 50px;
			height: 50px;
			display: block;
			position: relative;
			z-index: 3;

			&::before,
			&::after {
				content: "";
				width: 30px;
				height: 2px;
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				background-color: #999;
				transform: translate(-50%, -50%);
				transition: .3s;
			}
			&::before {
				box-shadow: 0 10px 0 0 #999, 0 -10px 0 0 #999;
			}
			body.open & {
				&::before {
					background-color: #FFF;
					transform: translate(-50%, -50%) rotate(135deg);
					box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;;
				}
				&::after {
					background-color: #FFF;
					transform: translate(-50%, -50%) rotate(-135deg);
				}
			}
		}

		& nav {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			color: #FFF;
			background-color: var(--main-color);
			transform: translate(0, 30px);
			opacity: 0;
			pointer-events: none;
			transition: .4s;
			z-index: 2;
			top: auto;
			height: 100svh;

			body.open & {
				transform: translate(0, 0);
				opacity: 1;
				pointer-events: all;
			}

			& #sns {
				width: 100%;
				text-align: left;

				& > * {
					padding: 15px;
					background-color: #FFF;
					border-radius: 100%;
				}

				& #tel span {
					display: none;
				}
			}

			& #menu {
				width: 100%;
				margin:  0;
				padding: 20px 0 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: stretch;
				text-align: left;

				& > * {
					margin: 0;

				}

				& a {
					padding: 0 16px;
					line-height: calc((100vh - 90px) / 17 - 1px);
					color: #FFF;
					border-top: 1px solid #FFF5;

					&::before {
						content: "";
						width: 0;
						height: 0;
						margin-right: .5em;
						display: inline-block;
						border: 3px solid transparent;
						border-left: 4px solid #FFF;
					}
				}

				& div {
					padding: 0;

					& a {
						display: block;
					}

					& ul {
						padding-left: 3em;
						position: static;
						opacity: 1;
						pointer-events: all;

						& li {
							padding: 0;

							& a {
								padding: 0 16px;
								background-color: transparent;
							}
						}
					}
				}
			}
		}
	}




	/* //////////////////////////////////////////////////////////// */
	/* article */
	/* //////////////////////////////////////////////////////////// */
	main {
		min-height: auto !important;
		--hero-bg-color: #CEE8F3;

		& #hero-image {
			padding: 50px 0 calc(35vmin + 50px);
			background-size: auto 56vmin;
			background-position: 34% bottom;
			background-color: var(--hero-bg-color);


			&::before {
				height: 18vmin;
				top: auto;
				bottom: 38vmin;
				background-image: linear-gradient(var(--hero-bg-color), transparent);
			}
			/*
			&::after {
				content: "";
				height: 70vmin;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				background-image: linear-gradient(#FFF5, transparent);
				z-index: 1;
			}
			*/

			& div {
				width: 67vmin;
				height: 67vmin;
				margin: 0 auto;
				gap: 2.5vmin;
				left: auto;

				& h2 {
					font-size: 8vmin;
				}

				& p {
					font-size: 3.5vmin;
				}
			}
		}

		& #page-title {
			height: calc(100vmin / 380 * 215);
			margin-top: 0;

			&::before {
				content: none;
			}

			& h2 {
				width: 100%;
				padding: 0 40px;
				justify-content: center;
				align-items: center;
				font-size: 8vmin;
				line-height: 1.2;

				&::before {
					transform: skewX(0);
				}
			}

			& img {
				width: 100%;
			}
		}

		& > #hero-image ~ * > section {
			width: 100% !important;
			margin: 0 auto;
			transform: translate(0, 0) !important;
		}

		& #contents #news {
			padding: 30px;

			& ol li time {
				display: none;
			}
		}

		& #instagram-box {
			& h2 img {
				margin-right: 15px;
			}
		}

		& #contents {
			padding: 0 15px 20px;

			& > div,
			body.top & > div {
				width: 100%;
				margin: 0;
				padding: 0;
				transform: translate(0, 0);

				& > section {
					margin-bottom: 0;

					& section:not([class]) {
						margin: 30px 0;
						padding: 0;
					}
				}

				& h3 ~ * {
					margin-left: 10px;
				}

				& .data-list {
					width: 100%;
				}

				& img.fr:has(+ p) {
					margin: 0 auto;
					display: block;
					float: none;
				}

				& .sp-break {
					& > li,
					& > li:nth-of-type(2n + 1) {
						width: 100%;
						padding: 20px;
						border: none;
						border-bottom: 1px solid var(--border-color1);
					}
				}

				#philosophy {
					border-radius: 0;
					box-shadow: none;

					section & {
						margin-left: -20px;
						margin-right: -20px;
					}

					& section {
						margin: 0 0 5px;
						padding: 0 0 15px;

						& h2 {
							margin-left: -40px;
						}

						& .shishin {
							padding: 240px 0 0;
							background-position: center 20px;
							background-size: auto 200px;
						}

						& .shishin-box {
							margin-left: 0;
							flex-direction: column;
							align-items: center;

							& > div {
								width: 90%;
								padding-top: 90%;
								width: 18em;
								padding-top: 18em;
							}
						}
					}
				
				}
			}

			& section {
				margin-top: -15px;
				padding: 20px;
			}

			& > div .intro-box {
				padding-left: 0;

				&.reha {
					justify-content: space-between;
				}

				& li,
				& li:first-child + * {
					width: 100%;
					padding: 30px 0 20px;
					border-top: 1px solid var(--border-color1);
					border-right: none;

					.reha & {
						width: calc(50% - 5px);
						padding: 0 0 20px;
						border: none !important;

						&:empty {
							display: none;
						}

						& img {
							margin-bottom: 10px;
						}
					}
				}
			}
			& > div .inspect-list {
				& > section {
					width: 100%;
					margin: 0 0 30px;
				}
			}
			& > div .flow-list {
				padding-left: 0;

				& li {
					& strong {
						width: calc(8em);
						padding: 0 1em;
						gap: 10px;
					}

					& span {
						padding: 1em;
					}
				}
			}
			.flex[data-col="2"]:has(.btn + .btn) {
				padding-left: 0;
				padding-right: 0;

			    & .btn {
					width: min(100% , 300px);
					min-width: 0;
				}
			}
		}

	}




	/* //////////////////////////////////////////////////////////// */
	/* aside */
	/* //////////////////////////////////////////////////////////// */
	aside {
		margin: 0 auto 30px;
		padding-top: 30px;
		position: static;
	}




	/* //////////////////////////////////////////////////////////// */
	/* footer */
	/* //////////////////////////////////////////////////////////// */
	footer {
		& section {
			width: 100%;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20px;
			text-align: center;

			& dl dt {
				width: 100%;
				margin: 0 auto 10px;
			}
		}
	}
}