/* =========================================================
	Variables（色・レイアウト共通の変数）
========================================================= */
:root{
	--red:rgb(255, 234, 237);       /* 薄い赤（背景・ドロワー用） */
	--cta-pink:rgb(255,204,211);    /* CTAホバーの塗り伸び */
	--line-green:rgb(108, 251, 166);/* LINEホバー色 */
	--insta-lilac:rgb(255, 193, 255);/* Instaホバー色 */

	--gap:2.4vw;                    /* PCナビ間隔 */
	--header-h:20vh;                /* ヘッダー高（PC） */
}

/* =========================================================
	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;
}
/* ロゴ（IMG/SVG共通）。SVGはfillを赤に。 */
.logo img,
.logo svg{
	height:12.6vh;
	display:block;
	margin-top:1vh;
	fill:#e60000;
}

/* =========================================================
	Global Nav（PCナビゲーション）
========================================================= */
/* 右寄せの水平ナビ */
.nav{
	margin-left:auto;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:var(--gap);
	margin-top:-6vh;
}
/* ナビの標準リンク（CTA/SNS以外） */
.nav a{
	color:#e60000;
	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;
}
/* 標準リンクのホバー演出 */
.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:#e60000;
	color:var(--red);
	text-decoration:none;
	font-weight:500;
	padding:1.4vh 1.8vw;
	border:0.5vh solid #e60000;
	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;
}
/* CTAホバー時：塗り伸び＆文字色反転 */
.nav .cta:hover,
.nav .cta:focus-visible{
	background-size:100% 100%;
	color:#e60000;
	transform:none;
}

/* =========================================================
	Social icons（SNSアイコン：LINE/Instagram）
========================================================= */
/* SNSアイコンの横並び */
.social{
	display:inline-flex;
	align-items:center;
}
/* アイコンのタップ領域 */
.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;
}
/* アイコン本体（SVG） */
.social .icon svg{
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	display:block;
	transform:none !important;
}

/* =========================================================
	Drawer（スマホ用ドロワーメニュー）
========================================================= */
/* ハンバーガー／クローズボタンの共通座標 */
.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: #e60000;
	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: #e60000;
}
.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:#e60000;
	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;
	color:#e60000;
	text-decoration:none;
	text-align:center;
	font-weight:700;
}
/* ドロワー内CTA */
.sp-accordion .sp-nav .cta{
	margin:16px 0 6px;
	text-align:center;
	background:#e60000;
	color:var(--red);
	padding:12px 26px;
	border-radius:999px;
	font-weight:700;
}

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

/* ドロワー下端ロゴ（SVG配色も赤に） */
.drawer-logo,
.drawer-logo .cls-1{
	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;
	fill: #e60000;
}
.drawer-logo svg {
	max-width: 100%;
	height: auto;
	display: block;
}
/* シンボルのみの左ロゴ（回転配置で動きを演出） */
.drawer-logo .logo-only-svg {
	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,
	.logo svg{
		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; }
}