/* =========================================================
	Variables（色・レイアウト共通変数）
========================================================= */
:root{
	--red:#e60000;
	--cta-pink:rgb(255,204,211);
	--line-green:#06C755;
	--insta-lilac:rgb(255,117,255);

	--gap:2.4vw;
	--header-h:20vh;
}

/* =========================================================
	Base（ヘッダー土台・ロゴ）
========================================================= */
/* ヘッダーの最上位レイヤー */
.site-header{
	position:absolute;
	top:0; left:0; right:0;
	z-index:2000;
	background:transparent;
}
/* ヘッダー内の横並びラッパー */
.site-header .inner{
	width:94%;
	height:var(--header-h);
	margin:0 auto;
	display:flex;
	align-items:center;
	gap:16px;
}
/* ロゴ画像 */
.logo img{
	height:12.6vh;
	display:block;
	margin-top:1vh;
}

/* =========================================================
	Global Nav（PCナビゲーション）
========================================================= */
/* ナビ本体（右寄せ） */
.nav{
	margin-left:auto;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:var(--gap);
	margin-top:-6vh;
}
/* ナビリンク共通 */
.nav a{
	color:#fff;
	text-decoration:none;
	font-weight:500;
	line-height:1;
	white-space:nowrap;
	font-size:1.1vw;
	letter-spacing:.1vw;
	transition:transform .25s ease, opacity .25s ease;
	border:0; padding:0; background:none; border-radius:0;
}
/* 通常リンクのホバー演出（CTA/SNS以外） */
.nav a:not(.cta):not(.icon):hover,
.nav a:not(.cta):not(.icon):focus-visible{
	transform:translateY(-1px) scale(1.14);
	opacity:.95;
}
/* 配達予約CTAボタン */
.nav .cta{
	background:#fff;
	color:var(--red);
	text-decoration:none;
	font-weight:600;
	padding:1.4vh 1.8vw;
	border:0.5vh solid #fff;
	border-radius:999px;
	font-size:1.1vw;
	line-height:1.1;
	box-sizing:border-box;
	background-image:linear-gradient(90deg, var(--cta-pink), var(--cta-pink));
	background-repeat:no-repeat;
	background-size:0% 100%;
	background-position:0 0;
	transition:background-size .45s ease, color .3s ease, border-color .3s ease;
	transform:none;
}
.nav .cta:hover,
.nav .cta:focus-visible{
	background-size:100% 100%;
	transform:none;
}

/* =========================================================
	Social icons（LINE/Instagram）
========================================================= */
/* SNSアイコンの並び */
.social{
	display:inline-flex;
	align-items:center;
}
/* 各SNSアイコンの枠 */
.social .icon{
	position:relative;
	width:2.5vw;
	height:2.5vw;
	padding:0.4vw;
	border-radius:10px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	transform:none !important;
}
/* ホバー時のカラーバック（アニメ基材） */
.social .icon::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	transform:scale(0);
	opacity:0;
	z-index:0;
	transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}
/* LINEホバー色 */
.icon.line:hover::before,
.icon.line:focus-visible::before {
	background-color: var(--line-green);
	transform: scale(0.8);
	opacity:1;
}
/* Instaホバー色 */
.icon.insta:hover::before,
.icon.insta:focus-visible::before {
	background-color: var(--insta-lilac);
	transform: scale(0.8);
	opacity:1;
}
/* アイコン画像 */
.social .icon img{
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	display:block;
	transform:none !important;
}

/* =========================================================
	Drawer（SPドロワーメニュー）
========================================================= */
/* ハンバーガー／閉じるボタン共通の座標とサイズ */
.spmenu-btn,
.spmenu-close {
	width: 3.5vw;
	height: 5vh;
	position: absolute;
	top: 7vh;
	right: 7vh;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 2100;
}
/* ハンバーガー：PCでは非表示 */
.spmenu-btn { display: none; }
/* 閉じる ×：デフォルト表示 */
.spmenu-close { display: flex; }

/* ハンバーガーの3本線 */
.spmenu-btn span {
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	transition: .3s;
}
.spmenu-btn span:nth-child(1){ top: 0; }
.spmenu-btn span:nth-child(2){ top: 12px; }
.spmenu-btn span:nth-child(3){ bottom: 0; }

/* 閉じる × の見た目 */
.spmenu-close {
	font-size: 60px;
	line-height: 1;
	color: #fff;
}
.spmenu-close:hover,
.spmenu-btn:hover { opacity: 0.8; }

/* ドロワー本体 */
.sp-accordion{
	position:fixed;
	top:0; right:0; bottom:0;
	width:80%;
	max-width:28vw;
	background:var(--red);
	color:#fff;
	padding:17vh 2vw 0;
	transform:translateX(100%);
	transition:transform .3s ease;
	z-index:2000;
	overflow:hidden;
	display:flex;
	flex-direction:column;
}
/* 開いた状態 */
.sp-accordion.show{ transform:translateX(0); }

/* ドロワー内のメニュー縦並び */
.sp-accordion .sp-nav{
	display:flex;
	flex-direction:column;
	flex:1;
	align-items:center;
	gap:22px;
}
.sp-accordion .sp-nav a{
	font-size:5vw;
	font-weight:700;
	color:#fff;
	text-decoration:none;
	text-align:center;
}
/* ドロワー内CTA */
.sp-accordion .sp-nav .cta{
	margin:16px 0 6px;
	text-align:center;
	background:#fff;
	color:var(--red);
	padding:12px 26px;
	border-radius:999px;
	font-weight:700;
}

/* ドロワー内SNSアイコンの余白 */
.sp-accordion .social{ gap:10px; }

/* ドロワー下端のロゴエリア */
.drawer-logo{
	margin-top: auto;
	width: 100%;
	display: grid;
	grid-template-columns: clamp(72px, 12vh, 140px) minmax(0, 1fr);
	align-items: end;
	column-gap: 3vw;
	box-sizing: border-box;
}
.drawer-logo img {
	max-width: 100%;
	height: auto;
	display: block;
}
/* 左側（シンボルロゴ）のアクセント配置 */
.drawer-logo img:first-child {
	width: 134%;
	max-width: none;
	height: auto;
	transform: rotate(-14deg);
	transform-origin: center;
	margin-bottom:-1.4vh;
	margin-left: -1.6vh;
}

/* ドロワー内リンクのホバー演出（PCナビと揃える） */
.sp-accordion .sp-nav a:not(.cta):hover,
.sp-accordion .sp-nav a:not(.cta):focus-visible {
	transform: translateY(-1px) scale(1.14);
	opacity: .95;
	transition: transform .25s ease, opacity .25s ease;
}
/* ドロワー内CTAのホバー演出 */
.sp-accordion .sp-nav .cta:hover,
.sp-accordion .sp-nav .cta:focus-visible {
	transform: translateY(-1px) scale(1.05);
	opacity: .95;
	transition: transform .25s ease, opacity .25s ease;
}

/* ドロワーの背景ブラー（タップで閉じる領域） */
.sp-acc-backdrop{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	z-index:1999;
}

/* =========================================================
	Responsive（～900px）
========================================================= */
@media (max-width:900px){
	/* モバイル時のヘッダー高 */
	:root{ --header-h:14vh; }

	/* ドロワー幅・内側パディング */
	.sp-accordion{
		width: 80vw;
		max-width: none;
		padding: 14vh 0 0;
	}

	/* PC専用要素を隠す／ハンバーガー表示 */
	.pc-only{ display:none; }
	.spmenu-btn{ display:flex; }

	/* ヘッダー内レイアウト縮小 */
	.site-header .inner{
		width:92%;
		height:var(--header-h);
	}
	.logo img{
		height:8vh;
		margin-left: 2vw;
	}

	/* ハンバーガー／クローズの位置とサイズ調整 */
	.spmenu-btn,
	.spmenu-close {
		width: 8vw;
		height: 6vh;
		top: 4vh;
		right: 8vw;
	}
	.spmenu-btn span{ height:0.4vh; }
	.spmenu-btn span:nth-child(1){ top:0.4vh; }
	.spmenu-btn span:nth-child(2){ top:2vh; }
	.spmenu-btn span:nth-child(3){ bottom:1.8vh; }
	.spmenu-close{ font-size:13vw; }

	/* PCナビ非表示 */
	.nav{ display:none; }

	/* SNSアイコン拡大 */
	.social{ gap:4px; flex:0 0 auto; }
	.social .icon{ width:14vw; height:14vw; padding:1.5vw; }
}