/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

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

#wrapper {  }

.pagelink { 
	text-align: center; 
	margin: 2.5em 0 0;
}
.pagelink a {
	display: inline-block;
	color: #fff;
	background: var( --baby-blue );
	border: 2px var( --baby-blue ) solid;
	padding: 1em 2em;
	border-radius: 100px;
	-webkit-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}
.pagelink a span {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
}
.pagelink a i { margin: 0 .5em 0 0; }
.pagelink a:hover {
	color: var( --baby-blue );
	background: #fff;
}

strong { font-weight: 600; }

@media (max-width: 767px) {

	#wrapper {
		font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem);
	}
	main { padding: 0 1.25em; }
	.inner {  }

	.pagelink a {
		min-width: 50%;
		font-size: clamp(0.875rem, 0.696rem + 0.89vw, 1.125rem);
	}
	.pagelink a i {
		font-size: clamp(1.375rem, 1.017rem + 1.79vw, 1.875rem);
	}
}

@media (min-width: 768px) {

	#wrapper {
		font-size: clamp(0.813rem, 0.192rem + 1.29vw, 1rem);
		/* padding: 0 1.875em; */
	}
	.inner {
		max-width: 1000px;
		margin: 0 auto;
	}

	.pagelink a {
		min-width: 40%;
		font-size: clamp(0.875rem, 0.047rem + 1.72vw, 1.125rem);
	}
	.pagelink a i {
		font-size: clamp(1.25rem, -0.405rem + 3.45vw, 1.75rem); 
	}

	#fixbar, #drawer-menu, #drawer { display: none !important; }

}

/* ---------------------------------------- header home */

header.home { position: relative; }

@keyframes bounce-spring-skew {
	/* 開始：透明かつ縮小 */
	0% {
		opacity: 0;
		transform: translateY(-50%) scale(0) skew(0deg, 0deg);
	}
	
	/* 拡大フェーズ：scale 最大値まで（skew なし） */
	50% {
		opacity: 1;
		transform: translateY(-50%) scale(1) skew(0deg, 0deg);
	}
	64% {
		transform: translateY(-50%) scale(1) skew(0deg, 0deg);
	}
	68% {
		transform: translateY(-50%) scale(1) skew(0.2deg, 0.5deg);
	}
	70% {
		transform: translateY(-50%) scale(1) skew(-0.5deg, -0.5deg);
	}
	73% {
		transform: translateY(-50%) scale(1) skew(3.5deg, 2.5deg);
	}
	78% {
		transform: translateY(-50%) scale(1) skew(-3deg, -2deg);
	}
	83% {
		transform: translateY(-50%) scale(1) skew(2.5deg, 1.5deg);
	}
	
	/* 余韻を長く残す */
	88% {
		transform: translateY(-50%) scale(1) skew(-1.5deg, -1deg);
	}
	92% {
		transform: translateY(-50%) scale(1) skew(1deg, 0.8deg);
	}
	96% {
		transform: translateY(-50%) scale(1) skew(-0.5deg, -0.3deg);
	}
	100% {
		opacity: 1;
		transform: translateY(-50%) scale(1) skew(0.2deg, 0.1deg);
	}
}

/* position style in header */
header.home .logo {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 1;
	background: rgba( 255,255,255,.75 );
	border-radius: 100%;
	-webkit-transform: translateY(-50%) scale(0);
	transform: translateY(-50%) scale(0);
	opacity: 0;
	animation-name: bounce-spring-skew;
	animation-duration: 2.5s;
	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
	animation-fill-mode: forwards;
	animation-delay: 0s;
	will-change: transform;
}
header.home .logo img {
	width: 55%;
	height: auto;
}
header.home figure img {
	width: 100vw;
	height: 100vh;
	min-height: 640px;
	vertical-align: text-top;
	line-height: 1;
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 767px) {

	header.home h1 {
		width: 100%;
		background: rgba( 255,255,255,.6 );
		text-align: center;
		font-weight: 500;
		padding: 1em 1.25em .75em;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}
	header.home h1 span { display: none !important; }
	header.home h1 a { display: inline-block; }
	header.home h1 a img {
		width: 50%;
		min-width: 80px;
		max-width: 120px;
		height: auto;
	}
	header.home .logo {
		width: 50%;
		max-width: 360px;
	}

}

@media (min-width: 768px) {

	header.home h1 {
		width: 100%;
		color: var( --baby-blue );
		background: rgba( 255,255,255,.5 );
		text-align: center;
		font-weight: 500;
		padding: 1.5em 1.25em 1em;
		position: absolute;
		top: 0;
		left: 0;
	}
	header.home h1 a { display: none !important; }
	header.home .logo {
		width: 33%;
		max-width: 500px;
	}

}

/* gloalnav */

@media (max-width: 767px) {

	header.home #gloalnav { display: none; }

}

@media (min-width: 768px) {

	header.home #gloalnav { 
		width: 100%;
		background: rgba( 255,255,255,.5 );
		padding: 1em 1.875em 1.5em; 
		position: absolute;
		bottom: 0;
		left: 0;
	}
	header.home #gloalnav ul {
		display: flex;
		justify-content: center;
	}
	header.home #gloalnav ul li { padding: 0 .5em; }
	header.home #gloalnav ul li:not(:last-child) {
		border-right: 1px #ccc solid;
	}
	header.home #gloalnav ul li a {
		display: flex;
		align-items: center;
		font-weight: 500;
		color: #fff;
		background: var( --baby-blue );
		padding: .5em 1.5em;
		border-radius: 100px;
		-webkit-transition: all 0.25s ease-out;
		transition: all 0.25s ease-out;
	}
	header.home #gloalnav ul li a span { 
		font-size: clamp(1rem, 0.172rem + 1.72vw, 1.25rem);
		margin: 0 .5em 0 0; 
	}
	header.home #gloalnav ul li a:hover { 
		color: var( --baby-blue );
		background: #fff;
	}
}

/* ---------------------------------------- header underlayer*/

@media (max-width: 767px) {

	header.underlayer {
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}

	header.underlayer p,
	header.underlayer .gloalnav { display: none; }

	header.underlayer .logo {
		width: 100%;
		background: rgba( 255,255,255,.6 );
		text-align: center;
		font-weight: 500;
		padding: 1em 1.25em .75em;
	}
	header.underlayer .logo a { display: inline-block; }
	header.underlayer .logo a img {
		width: 50%;
		min-width: 80px;
		max-width: 120px;
		height: auto;
	}

}

@media (min-width: 768px) {

	header.underlayer {
		background: rgba( 255,255,255,.6 );
		padding: 1em 1.25em;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 99;
	}
	header.underlayer .inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 100%;
	}

	header.underlayer .logo {
		width: 14%;
		min-width: 100px;
		max-width: 130px;
		line-height: 1;
		margin: 0 1.5em 0 0;
	}

	header.underlayer p {
		font-size: clamp(0.75rem, 0.336rem + 0.86vw, 0.875rem);
		line-height: 1.4;
		margin: 0 0 .5em;
	}
	header.underlayer .gloalnav ul {
		display: flex;
	}
	header.underlayer .gloalnav ul li {
		margin: 0 0 0 1em;
	}
	header.underlayer .gloalnav ul li a {
		display: block;
		font-weight: 600;
		white-space: nowrap;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}
	header.underlayer .gloalnav ul li a:hover {
		color: var( --baby-blue );
	}
	header.underlayer .gloalnav ul li a span {
		margin: 0 .25em 0 0; 
	}
}

/* ---------------------------------------- discount */

#discount {
	padding: 5em 1.875em 0;
}
#discount.menus {
	padding: 1em 0 3em;
}
#discount .inner {
	background: var( --pale-celadon );
	border: 4px var( --baby-blue ) solid;
	border-radius: 1em;
	text-align: center;
	padding: 2em;
}
#discount h2 {
	color: #fff;
	font-weight: 600;
	margin: 0 0 .5em;
}
#discount p {
	color: #fff;
	font-weight: 500;
}
#discount .pagelink {
	margin: 1.5em 0 0;
}
#discount .pagelink a {
	border-color: #fff;
}

@media (max-width: 767px) {

	#discount h2 {
		font-size: clamp(2rem, -0.483rem + 5.17vw, 2.75rem);
		line-height: 1.4;
	}
	#discount p {
		font-size: clamp(1rem, 0.172rem + 1.72vw, 1.25rem);
		line-height: 1.8;
	}

}

@media (min-width: 768px) {

	#discount h2 {
		font-size: clamp(1.25rem, 0.445rem + 4.03vw, 2.375rem);
	}
	#discount p {
		font-size: clamp(1rem, 0.821rem + 0.89vw, 1.25rem);
	}
}

/* ---------------------------------------- footer */

footer .sns ul li a,
footer .footline ul li a {
	display: block;
	font-weight: 500;
	-webkit-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

footer .sns ul {
	display: flex;
	justify-content: center;
	align-items: center;
}
footer .sns ul li {
	margin: 0 2em;
}

footer .footline {
	background: var( --alice-blue );
}
footer .footline ul li a:hover,
footer .sns ul li a:hover {
	color: var( --baby-blue );
}
footer .footline .inside h3 {
	font-weight: 700;
	margin: 0 0 .5em;
}
footer .footline .inside p {
	line-height: 2;
}
footer .footline .inside p.telnum {
	font-weight: 700;
}
footer .footline .inside {
	text-align: center;
	margin: 0 0 2em;
}
footer .footline .caregit {
	text-align: center;
}

@media (max-width: 767px) {

	footer .inner { padding: 0 1.25em; }
	footer .sns { padding: 4em 0 2em; }
	footer .sns ul li a {
		font-size: clamp(1.5rem, 0.605rem + 4.47vw, 2.75rem);
		line-height: 1;
	}
	footer .footline {
		padding: 2em 0 4em;
	}
	footer .footline ul { display: none; }
	footer .footline .inside h3,
	footer .footline .inside p.telnum {
		font-size: clamp(1.125rem, 0.857rem + 1.34vw, 1.5rem);
	}
}

@media (min-width: 768px) {

	footer .sns { padding: 4em 1.875em 2em; }
	footer .sns ul li a {
		font-size: clamp(1.5rem, -2.638rem + 8.62vw, 2.75rem);
		line-height: 1;
	}

	footer .footline {
		padding: 2em 1.875em 4em;
	}
	footer .footline ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin: 0 0 2em;
	}
	footer .footline ul li {
		line-height: 2.5;
		margin: 0 1em;
	}

	footer .footline .inside h3,
	footer .footline .inside p.telnum {
		font-size: clamp(1.125rem, -0.116rem + 2.59vw, 1.5rem);
	}
	footer .footline .inside p.telnum a {
		pointer-events: none;
	}
}

/* ---------------------------------------- fixbar */

@media (max-width: 767px) {

	#fixbar {
		position: sticky;
		bottom: 0;
	}
	#fixbar ul {
		display: flex;
		justify-content: center;
	}
	#fixbar ul li {
		width: 50%;
	}
	#fixbar ul li a {
		display: block;
		color: #fff;
		font-size: clamp(0.813rem, 0.678rem + 0.67vw, 1rem);
		text-align: center;
		font-weight: 600;
		padding: 1em .5em;
	}
	#fixbar ul li:first-child a {
		background: var( --logo-color );
	}
	#fixbar ul li:last-child a {
		background: #4cc764;
	}
	#fixbar ul li a span { margin: 0 .5em 0 0; }


}

@media (min-width: 768px) {
}

/* ---------------------------------------- fixbar */

.fade-in-element {
  opacity: 0;
  transform: translateY(15%);
  transition: 
	opacity 2s ease-out,
	transform 2s cubic-bezier(0.25, 0.8, 0.25, 1); /* 任意で調整可能 */
}

.fade-in-element.is-active {
  opacity: 1;
  transform: translateY(0);
}