/* =========================================================
	ページ基礎：スムーズスクロール／本文色
========================================================= */
html { scroll-behavior: smooth; }
body {
	margin: 0;
	color: #111111;
}

/* =========================================================
	フッター全体：背景色・内側余白・中央寄せ
========================================================= */
.site-footer {
	background-color: rgb(255, 204, 211);
	padding: 3.6vh 3vw 2vh;
	text-align: center;
	font-size: 1.2vw;
	position: relative;
	overflow: visible;
}

/* =========================================================
	TOPへ戻るボタン：フッター上に半円で浮かせる
========================================================= */
.footer-top {
	position: absolute;
	top: -6.4vh;
	left: 50%;
	transform: translateX(-50%);
}
.footer-top a {
	display: block;
	background-color: rgb(255, 204, 211);
	color: #111111;
	font-size: 1.2vw;
	font-weight: bold;
	width: 6.8vw;
	height: 6.8vw;
	line-height: 1;
	border-radius: 50% 50% 0 0;
	text-decoration: none;
	padding-top: 2vh;
}
/* 矢印の軽いバウンス演出 */
.footer-top .arrow {
	color: #e60000;
	display: inline-block;
	transition: transform 0.3s ease-in-out;
	margin-bottom: 0.2vh;
}
.footer-top a:hover .arrow {
	animation: arrow-bounce 0.6s infinite alternate;
}
@keyframes arrow-bounce {
	0%   { transform: translateY(0); }
	100% { transform: translateY(-0.6vh); }
}

/* =========================================================
	フッターナビ：リンクを中央で横並び
========================================================= */
.footer-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1vw;
}

/* =========================================================
	フッターナビのリンク：余白・ホバー装飾
========================================================= */
.footer-nav a {
	color: #111111;
	font-size: 1vw;
	text-decoration: none;
	font-weight: 500;
	position: relative;
	padding: 0 1vw;
	margin-bottom: 2.6vh;
}
.footer-nav a:hover { text-decoration: underline; }

/* =========================================================
	フッターナビの区切り線（リンク間の縦線）
========================================================= */
.footer-nav a:first-child::before,
.footer-nav a:last-child::after,
.footer-nav a:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-44%);
	width: 0.05vw;
	height: 2vh;
	background-color:#111;
}
.footer-nav a:first-child::before { left: -0.5vw; }
.footer-nav a:last-child::after,
.footer-nav a:not(:last-child)::after { right: -0.5vw; }

/* =========================================================
	店舗情報（電話・住所など）
========================================================= */
.footer-info p {
	margin: 0.5vh 0 0.3vh;
	font-size: 0.9vw;
	color: #111;
}
/* 電話番号強調 */
.footer-info .tel a {
	color: #e60000;
	text-decoration: none;
	font-weight: bold;
	font-size: 2.2vw;
}
.footer-info .tel a:hover { text-decoration: underline; }

/* =========================================================
	コピーライト
========================================================= */
.footer-copy {
	margin-top: 3vh;
	margin-bottom: 1vh;
	font-size: 0.7vw;
	color: #111;
}

/* =========================================================
	Responsive（～900px）
========================================================= */
@media (max-width:900px){
	/* フッター本体の文字サイズ調整 */
	.site-footer {
		padding: 3.6vh 3vw 2vh;
		font-size: 2vw;
	}

	/* TOPボタン（大きめに） */
	.footer-top { top: -6vh; }
	.footer-top a {
		font-size: 4vw;
		width: 21.6vw;
		height: 11vh;
		line-height: 1;
		border-radius: 50% 50% 0 0;
		padding-top: 1.4vh;
		font-weight: 500;
	}
	.footer-top .arrow { margin-bottom: 0.06vh; }

	/* ナビの間隔・文字サイズ拡大 */
	.footer-nav { gap: 1.3vw; }
	.footer-nav a {
		font-size: 2.9vw;
		padding: 0 2.6vw;
		margin-bottom: 2.85vh;
	}
	.footer-nav a:first-child::before,
	.footer-nav a:last-child::after,
	.footer-nav a:not(:last-child)::after {
		width: 0.15vw;
		height: 2vh;
	}

	/* 情報と電話番号を可読サイズに */
	.footer-info p { margin: 0.5vh 0; font-size: 3.5vw; }
	.footer-info .tel a { font-size: 6.6vw; }

	/* コピーライト縮小 */
	.footer-copy {
		margin-top: 3vh;
		margin-bottom: 1vh;
		font-size: 2.6vw;
	}
}