@charset "utf-8";
/*
FUNCTION
================================================ */
:root {
	--title: #D85553;
	--text: #00076F;
}
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
body {
	width: 100%;
	margin: 0 auto;
	position: relative;
	font-family: 'Noto Sans JP', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 1rem;
	font-weight: 400;
	color: var(--text);
	background: #EBFEFF;
	box-sizing: border-box;
	overflow-x: hidden;
}
img {
	width: 100%;
	height: auto;
	-o-object-fit: contain;
	object-fit: contain;
	vertical-align: middle;
}
a {
	text-decoration: none;
}
li {
	list-style: none;
}
.u-hidden-pc {
	display: none;
}
.u-hidden-sp {
	display: flex;
}
.u-hidden-tab-only {
	display: flex;
}
.nowrap {
  display: inline-block;
	white-space: nowrap;
}
/* ======================ヘッダー・フッター共通部分====================== */
.logo img {
	width: 13.625rem;
	transition: transform .3s;
}
.logo img:hover {
	transform: scale(1.05);
}
.common-nav {
	display: flex;
	align-items: center;
	font-weight: 500;
}
.common-nav a {
	position: relative;
	padding-bottom: 2px;
}
.common-nav a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background: var(--text);
	transform-origin: left top;
	transform: scale(1, 1);
	transition: transform .3s;
}
.common-nav a:hover::before {
	transform-origin: right top;
	transform: scale(0, 1);
}
/* 営業時間 */
.hours-nav {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	max-width: 29rem;
	padding: 1.5rem 2.1875rem;
	color: var(--title);
	letter-spacing: .9px;
	border: solid 2px var(--title);
	gap: .5rem;
}
.hours-nav svg {
	position: absolute;
	top: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
}
.hours-nav .hours-nav-attention::before, .hours-nav .hours-nav-attention::after {
	position: absolute;
	content: "";
	bottom: 50%;
	width: 18px;
	height: 1.5px;
	background-color: var(--title);
}
.hours-nav .hours-nav-attention {
	position: relative;
}
.hours-nav .hours-nav-attention::before {
	left: -1.5rem;
	transform: rotate(60deg);
}
.hours-nav .hours-nav-attention::after {
	right: -1.2rem;
	transform: rotate(-60deg);
}
/* 各連絡先遷移リンクの共通部分 */
.contact-menu {
	display: flex;
	height: 3.9375rem;
	gap: 2px;
}
.contact-menu a {
	transition: transform 0.25s ease, box-shadow 0.25s ease, -webkit-filter 0.25s ease;
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, -webkit-filter 0.25s ease;
}
.contact-menu a:hover {
	transform: translateY(-8px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.contact-menu p {
	font-size: clamp(0.875rem, 0.75rem + 0.5vw, 0.9375rem);
	color: white;
}
/* 電話 */
.tel-link {
	display: flex;
	width: 11.25rem;
	background: var(--title);
}
.tel-link svg {
	margin: .625rem 0 .625rem 1rem;
}
.tel-link .tel-text {
	display: flex;
	flex-direction: column;
	margin: .5rem 1rem;
}
.tel-text-attention {
	position: relative;
	font-family: "Kaisei Opti", serif;
}
.tel-text-attention::before, .tel-text-attention::after {
	position: absolute;
	content: "";
	bottom: 40%;
	width: 12px;
	height: 1px;
	background-color: #FFFCF1;
}
.tel-text-attention::before {
	left: -.8rem;
	transform: rotate(60deg);
}
.tel-text-attention::after {
	right: -.5rem;
	transform: rotate(-60deg);
}
.tel-text-attention .text-space {
	margin-left: -3px;
}
.tel-link .tel-text .tel-number, .mail-link p, .line-link p {
	text-decoration: underline;
	text-underline-offset: 4px;
	-webkit-text-underline-offset: 4px;
}
/* メール */
.mail-link {
	width: 3.9375rem;
	padding-top: .6875rem;
	text-align: center;
	background: #597AAF;
}
/* LINE */
.line-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 3.9375rem;
	padding-top: .45rem;
	text-align: center;
	background: #06C755;
}
.line-link .line-icon {
	width: 1.8rem;
}
/*
MAIN
================================================ */
main {
	width: 100%;
	padding-top: 6.9375rem;
	box-sizing: border-box;
}
.container {
	width: 100%;
	max-width: 66.5rem;
	margin: 0 auto 6.25rem;
	padding: 0 2rem;
	overflow-wrap: break-word;
}
.wrapper {
	margin-top: clamp(6.25rem, 3.125rem + 12.5vw, 12.5rem);
}
.page-title {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2.5rem;
}
.page-title h1 {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: clamp(1.625rem, 0.5305rem + 4.3779vw, 2.8125rem);
	font-weight: bold;
	letter-spacing: 2.5px;
}
.page-title p {
	font-family: "Hepta Slab", serif;
	font-optical-sizing: auto;
	font-size: clamp(0.875rem, 0.6446rem + 0.9217vw, 1.125rem);
	font-weight: 600;
	color: var(--title);
}
/* Vision,Greeting,Companyの全体枠部分 */
.common-frame {
	position: relative;
}
.common-frame-border {
	display: flex;
	align-items: center;
	justify-content: center;
	-o-border-image: url("../img/section-frame.svg") 100 stretch;
	border-image: url("../img/section-frame.svg") 100 fill stretch;
	border-image-width: 90px;
}
/* 見出し */
.section-title {
	text-align: center;
}
.section-title p {
	font-family: "Hepta Slab", serif;
	font-optical-sizing: auto;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--title);
}
.section-title h2 {
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-size: 2.8125rem;
	font-weight: bold;
	letter-spacing: 2px;
	text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white, 0 -1px 0 white, -1px 0 0 white, 1px 0 0 white, 0 1px 0 white, 0 0 5px white;
}
/* ======================CONTACT====================== */
#contact .contact-button {
  max-width: 57.75rem;
	margin: 0 auto 2.5rem;
	display: flex;
	justify-content: center;
	transition: opacity 0.8s ease-out, transform 0.4s ease-out;
	will-change: transform;
}
#contact .contact-button:hover {
	-webkit-animation: bounceOnce 0.9s cubic-bezier(0.33, 1, 0.68, 1);
	animation: bounceOnce 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}
@-webkit-keyframes bounceOnce {
	0% { transform: scale(1); }
	30% { transform: scale(1.04); }
	55% { transform: scale(0.98); }
	75% { transform: scale(1.015); }
	100% { transform: scale(1); }
}
@keyframes bounceOnce {
	0% { transform: scale(1); }
	30% { transform: scale(1.04); }
	55% { transform: scale(0.98); }
	75% { transform: scale(1.015); }
	100% { transform: scale(1); }
}
@keyframes jump {
  0%,40%,80%,100% { transform: translateY(0); }
  20%             { transform: translateY(-20px); }
  60%             { transform: translateY(-15px); }
}
@-webkit-keyframes jump {
  0%,40%,80%,100% { transform: translateY(0); }
  20%             { transform: translateY(-20px); }
  60%             { transform: translateY(-15px); }
}
#contact .contact-tel, #contact .contact-mail-link, #contact .contact-line-link {
	transition: transform 0.4s ease;
}
#contact .contact-tel:hover, #contact .contact-mail-link:hover, #contact .contact-line-link:hover {
	transform: scale(1.1);
}
.contact-list {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	text-align: center;
	font-family: "Kaisei Opti", serif;
	gap: clamp(1.625rem, -1.1875rem + 4.5vw, 2.1875rem);
}
.contact-list p {
	color: var(--text);
}
.contact-text {
	position: relative;
	margin: 1.25rem 0 .5rem;
	font-size: clamp(0.9375rem, -0.625rem + 2.5vw, 1.25rem);
	font-weight: 700;
}
.contact-text::after, .contact-line-text::after {
	position: absolute;
	content: "";
	left: 50%;
	bottom: -0.1em;
	transform: translateX(-50%);
	width: 100%;
	height: 3px;
	background: url(../img/contact-text-underline.svg) no-repeat left center;
	background-size: 100% auto;
}
.contact-tel .tel-text-attention {
	font-size: clamp(1.1875rem, -0.6875rem + 3vw, 1.5625rem);
	font-weight: 700;
}
.contact-tel .tel-text-attention::before, .contact-tel .tel-text-attention::after {
	bottom: 45%;
	width: 24px;
	height: 1.5px;
	background-color: var(--text);
}
.contact-tel .tel-text-attention::before {
	left: -1.5rem;
	transform: rotate(60deg);
}
.contact-tel .tel-text-attention::after {
	right: -1rem;
	transform: rotate(-60deg);
}
.contact-tel, .contact-mail-link, .contact-line-link {
	width: calc((100% - (clamp(1.625rem, -1.1875rem + 4.5vw, 2.1875rem) * 2)) / 3);
}
.contact-tel-link, .contact-mail-link, .contact-line-link {
	height: clamp(8.925rem, -5.2rem + 22.6vw, 11.75rem);
	margin-top: clamp(0.66875rem, -0.675rem + 2.15vw, 0.9375rem);
	padding: 1.4375rem 1rem 1.5625rem;
	display: block;
}
.contact-tel-link {
	-o-border-image: url(../img/contact-tel-frame.svg) 3 stretch;
	border-image: url(../img/contact-tel-frame.svg) 3 fill stretch;
}
.contact-tel-link svg {
	width: clamp(2rem, -1.125rem + 5vw, 2.625rem);
	height: auto;
}
.contact-tel-link .address {
	font-size: clamp(1.1875rem, -0.6875rem + 3vw, 1.5625rem);
	font-weight: 500;
}
.contact-mail-link {
	-o-border-image: url(../img/contact-mail-frame.svg) 3 stretch;
	border-image: url(../img/contact-mail-frame.svg) 3 fill stretch;
}
.contact-mail-link svg {
	width: clamp(2.1875rem, -2.1875rem + 7vw, 3.0625rem);
	height: auto;
}
.contact-mail-link .address {
	font-size: clamp(0.9rem, -0.5375rem + 2.3vw, 1.1875rem);
	font-weight: 500;
}
.contact-line-link {
	position: relative;
	-o-border-image: url(../img/contact-line-frame.svg) 3 stretch;
	border-image: url(../img/contact-line-frame.svg) 3 fill stretch;
}
.contact-line-link::before {
	content: "";
	position: absolute;
	bottom: 1rem;
	right: 1.8rem;
	width: 1.78125rem;
	height: 1.5625rem;
	background: url(../img/contact-footprint1.svg) no-repeat center;
	background-size: contain;
}
.contact-line-link::after {
	content: "";
	position: absolute;
	right: 3.5rem;
	bottom: 2rem;
	width: 1.375rem;
	height: 1.25rem;
	background: url(../img/contact-footprint2.svg) no-repeat center;
	background-size: contain;
}
.contact-line-link img {
	width: clamp(2.375rem, -1.375rem + 6vw, 3.125rem);
}
.contact-line-text {
	position: relative;
	color: white;
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}
/* ======================背景の装飾部分====================== */
.bg-deco {
	position: absolute;
	width: 78.2%;
	z-index: -999;
	overflow-x: hidden;
}
@media screen and (min-width: 650px) and (max-width: 1000px) {
	.u-hidden-tab-only {
		display: none;
	}
}
@media (max-width: 999px) {
	/* CONTACT */
	.contact-list {
		gap: clamp(1.375rem, 0.119rem + 2.4096vw, 1.625rem);
	}
	.contact-text {
		margin: .875rem 0 .5625rem;
	}
	.contact-tel, .contact-mail-link, .contact-line-link {
		width: calc((100% - (clamp(1.375rem, 0.119rem + 2.4096vw, 1.625rem) * 2)) / 3);
	}
	.contact-tel-link, .contact-mail-link, .contact-line-link {
		height: 8.925rem;
		padding: 1.125rem .625rem;
	}
	.contact-line-link::before {
		right: 1.2rem;
		bottom: .6rem;
		width: clamp(1.375rem, -0.823rem + 4.2169vw, 1.8125rem);
		height: clamp(1.1875rem, -0.6965rem + 3.6145vw, 1.5625rem);
	}
	.contact-line-link::after {
		right: 2.5rem;
		bottom: 1.5rem;
		width: clamp(1.0625rem, -0.5075rem + 3.012vw, 1.375rem);
		height: clamp(0.9375rem, -0.6325rem + 3.012vw, 1.25rem);
	}
	.bg-deco {
		width: 100%;
	}
}
@media (max-width: 834px) {
	.u-hidden-pc {
		display: flex;
	}
	.u-hidden-sp {
		display: none;
	}
	.logo img {
		width: clamp(11.375rem, 5.6058rem + 15.3846vw, 13.625rem);
	}
	/* 各連絡先遷移リンクの共通部分 */
	.contact-menu {
		margin: 0 auto 2.5rem;
	}
	main {
		padding-top: clamp(5.8125rem, -4.2321rem + 21.4286vw, 6.9375rem);
	}
	/* 見出し */
	.section-title p {
		font-size: clamp(0.9375rem, 0.4567rem + 1.2821vw, 1.125rem);
	}
	.section-title h2 {
		font-size: clamp(2.3125rem, 1.0304rem + 3.4188vw, 2.8125rem);
	}
	/* CONTACT */
	.contact-list {
		gap: clamp(0.5rem, -2.591rem + 7.6087vw, 1.375rem);
	}
	.contact-text {
		margin: .8125rem 0 .3rem;
		font-size: clamp(0.8125rem, 0.3709rem + 1.087vw, 0.9375rem);
	}
	.contact-text::after, .contact-line-text::after {
		width: 90%;
	}
	.contact-tel .tel-text-attention {
		font-size: 1rem;
	}
	.contact-tel .tel-text-attention::before, .contact-tel .tel-text-attention::after {
		width: 15px;
	}
	.contact-tel, .contact-mail-link, .contact-line-link {
		width: calc((100% - (clamp(0.5rem, -2.591rem + 7.6087vw, 1.375rem) * 2)) / 3);
	}
	.contact-tel-link, .contact-mail-link, .contact-line-link {
		height: clamp(7.5rem, 2.466rem + 12.3913vw, 8.925rem);
		padding: .9375rem 0;
	}
	.contact-tel-link svg {
		width: clamp(1.625rem, 0.6635rem + 2.5641vw, 2rem);
		height: auto;
	}
	.contact-tel-link .address {
		font-size: 1rem;
	}
	.contact-mail-link svg {
		width: clamp(1.8125rem, 0.851rem + 2.5641vw, 2.1875rem);
	}
	.contact-mail-link .address {
		font-size: clamp(0.6875rem, -0.0632rem + 1.8478vw, 0.9rem);
	}
}
/* ======================SP版====================== */
@media (max-width: 650px) {
	body {
		font-size: clamp(0.875rem, 0.625rem + 1vw, 1rem);
	}
	.page-title {
		flex-direction: column-reverse;
		gap: .5rem;
	}
	/* 営業時間 */
	.hours-nav {
		max-width: clamp(22.75rem, 10.25rem + 50vw, 29rem);
		margin: 0;
		padding: clamp(0.875rem, -0.375rem + 5vw, 1.5rem) clamp(0.625rem, -2.5rem + 12.5vw, 2.1875rem);
		letter-spacing: 0;
		border: solid 2px var(--title);
		gap: .5rem;
	}
	.hours-nav svg {
		top: -2rem;
		width: 3.6rem;
		height: auto;
	}
	/* 各連絡先遷移リンクの共通部分 */
	.contact-menu {
		height: clamp(3.9375rem, 2.8125rem + 4.5vw, 4.5rem);
		margin: 0 auto 1.5rem;
	}
	/* 電話 */
	.tel-link {
		width: clamp(11.25rem, 8.75rem + 10vw, 12.5rem);
	}
	.tel-link .tel-text {
		margin-left: clamp(1rem, 0rem + 4vw, 1.5rem);
		gap: clamp(0.2rem, -0.4rem + 2.4vw, 0.5rem);
	}
	/* メール */
	.mail-link, .line-link {
		width: clamp(3.9375rem, 3.0625rem + 3.5vw, 4.375rem);
	}
	.common-frame {
		border-image-width: 50px;
	}
	.section-title p {
		font-size: clamp(0.875rem, 0.75rem + 0.5vw, 0.9375rem);
	}
	.section-title h2 {
		font-size: clamp(1.625rem, 0.25rem + 5.5vw, 2.3125rem);
	}
	.container {
		margin-bottom: clamp(2.5rem, -5rem + 30vw, 6.25rem);
		padding: 0 clamp(1.5rem, 0.2179rem + 3.4188vw, 2rem);
	}
	.common-frame-border {
		border-image-width: 40px;
	}
	/* CONTACT */
	#contact .contact-button {
		margin-bottom: clamp(1.25rem, -0.75rem + 8vw, 2.5rem);
	}
	@-webkit-keyframes bounceOnce {
		0% {
			transform: scale(1);
		}
		30% {
			transform: scale(1.03);
		}
		60% {
			transform: scale(0.985);
		}
		80% {
			transform: scale(1.015);
		}
		100% {
			transform: scale(1);
		}
	}
	@keyframes bounceOnce {
		0% {
			transform: scale(1);
		}
		30% {
			transform: scale(1.03);
		}
		60% {
			transform: scale(0.985);
		}
		80% {
			transform: scale(1.015);
		}
		100% {
			transform: scale(1);
		}
	}
	.contact-list {
		flex-direction: column;
		gap: 1.25rem;
	}
	.contact-text {
		margin: .25rem 0 .4rem;
		font-size: 1.0625rem;
	}
	.contact-text::after, .contact-line-text::after {
		bottom: -.2em;
		width: 80%;
	}
	.contact-tel .tel-text-attention::before, .contact-tel .tel-text-attention::after {
		width: 18px;
	}
	.contact-tel, .contact-mail-link, .contact-line-link {
		width: 100%;
		max-width: 25rem;
		margin: 0 auto;
	}
	.contact-tel-link, .contact-mail-link, .contact-line-link {
		margin-top: 1rem;
		padding: .8125rem 0;
	}
	.contact-tel-link {
		-o-border-image: url(../img/contact-tel-frame.svg) 6 stretch;
		border-image: url(../img/contact-tel-frame.svg) 6 fill stretch;
		-webkit-filter: drop-shadow(-2px 4px 2px rgba(0, 0, 0, 0.20));
		filter: drop-shadow(-2px 4px 2px rgba(0, 0, 0, 0.20));
	}
	.contact-tel-link svg {
		width: 1.8125rem;
	}
	.contact-tel-link .address {
		font-size: 1.1875rem;
	}
	.contact-mail-link {
		-o-border-image: url(../img/contact-mail-frame.svg) 6 stretch;
		border-image: url(../img/contact-mail-frame.svg) 6 fill stretch;
		-webkit-filter: drop-shadow(-2px 4px 2px rgba(0, 0, 0, 0.20));
		filter: drop-shadow(-2px 4px 2px rgba(0, 0, 0, 0.20));
	}
	.contact-mail-link svg {
		width: 2rem;
		padding-top: .3125rem;
	}
	.contact-mail-link .address {
		font-size: 1rem;
	}
	.contact-line-link {
		-o-border-image: url(../img/contact-line-frame.svg) 6 stretch;
		border-image: url(../img/contact-line-frame.svg) 6 fill stretch;
		-webkit-filter: drop-shadow(-2px 4px 2px rgba(0, 0, 0, 0.20));
		filter: drop-shadow(-2px 4px 2px rgba(0, 0, 0, 0.20));
	}
	.contact-line-link::before {
		bottom: 50%;
		right: .5rem;
		width: 1.78125rem;
		height: 1.5625rem;
	}
	.contact-line-link::after {
		right: 2rem;
		bottom: 60%;
		width: 1.375rem;
		height: 1.25rem;
	}
	.contact-line-link img {
		padding-top: .3125rem;
	}
}