@charset "utf-8";

#header{
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
	width:100%;
	transition:background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

#header.scrolled{
	background:rgba(255,255,255,.9);
	backdrop-filter:blur(10px);
	box-shadow:0 10px 30px rgba(82,56,31,.09);
}

.head-inner{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	height:78px;
	padding-left:7.5vw;
}

.hlogo{
	position:relative;
    top: 15px;
    width: 280px;
	margin:0;
	transition:top .35s ease, width .35s ease;
}

.hlogo img{
	filter:drop-shadow(0 5px 12px rgba(255,255,255,.45));
}

#header.scrolled .hlogo{
	top: 0px;
    width: auto;
    height: 78px;
}
#header.scrolled .hlogo img{
	height: 100%;	
	object-fit: contain;
}
.h-nav{
	display:flex;
	align-items:stretch;
	height:78px;
}

.g-nav{
	display:flex;
	align-items:center;
	gap:35px;
	margin-right:28px;
}

.g-nav a{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	color:#6b4a2e;
	font-size:12px;
	font-weight:700;
	letter-spacing:.08em;
	line-height:1.2;
}

.g-nav a::after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-10px;
	width:0;
	height:1px;
	background:currentColor;
	transform:translateX(-50%);
	transition:width .25s ease;
}

.g-nav a:hover::after{
	width:26px;
}

.g-nav a span{
	margin-top:6px;
	font-size:10px;
	font-weight:600;
	color:#8a6e50;
}

/*.shop-link{
	width:156px;
}

.shop-link a{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	height:86px;
	border-radius:0 0 0 18px;
	background:#8c633d;
	color:#fff;
	font-size:13px;
	line-height:1.1;
}

.shop-link a:hover{
	opacity:1;
	background:#714a2b;
}*/
/* ==========================
Header CTA
========================== */

.header-links{
	display:flex;
	align-items:flex-start;
	height:86px;
}

/* オンラインショップ */
.shop-link{
	width:172px;
	height:86px;
}

.shop-link a{
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:5px;
	width:100%;
	height:100%;
	background:linear-gradient(
        145deg,
        #8b4958 0%,
        #6a2f3d 100%
    );
	color:#fff;
	border-radius:0 0 0 18px;
	box-shadow:
		0 8px 20px rgba(82,56,31,.18),
		inset 0 1px 0 rgba(255,255,255,.18);
	transition:
		background .3s ease,
		transform .3s ease,
		box-shadow .3s ease;
}

/* 光が流れる演出 */
.shop-link a::before{
	content:"";
	position:absolute;
	top:0;
	left:-75%;
	width:45%;
	height:100%;
	background:linear-gradient(
		110deg,
		transparent,
		rgba(255,255,255,.28),
		transparent
	);
	transform:skewX(-20deg);
	animation:shopShine 5s ease-in-out infinite;
	pointer-events:none;
}

@keyframes shopShine{
	0%,
	68%{
		left:-75%;
	}

	100%{
		left:135%;
	}
}

.shop-link a:hover{
	opacity:1;
    background:linear-gradient(
        145deg,
        #9b5565 0%,
        #5d2634 100%
    );
	box-shadow:
		0 12px 26px rgba(82,56,31,.25),
		inset 0 1px 0 rgba(255,255,255,.2);
}

.shop-link a:active{
	transform:translateY(2px);
	box-shadow:
		0 4px 10px rgba(82,56,31,.18),
		inset 0 1px 0 rgba(255,255,255,.15);
}

.shopicon{
	width:29px;
	margin-bottom:0;
}

.shopicon img{
	display:block;
	width:100%;
	filter:brightness(0) invert(1);
}

.shop-text{
	display:flex;
	align-items:center;
	flex-direction:column;
	line-height:1.1;
}

.shop-text small{
	margin-bottom:4px;
	font-size:9px;
	font-weight:500;
	letter-spacing:.12em;
}

.shop-text strong{
	font-size:13px;
	font-weight:700;
	letter-spacing:.08em;
}


/* Instagram */
.sns-link{
	width:76px;
	height:86px;
}

.sns-link a{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:5px;
	width:100%;
	height:100%;
	background:#8c633d;
	color:#fff;
	border-left:1px solid rgba(140,99,61,.15);
	border-bottom:1px solid rgba(140,99,61,.15);
	border-radius:0 0 14px 0;
	box-shadow:0 8px 20px rgba(82,56,31,.08);
	transition:
		background .3s ease,
		color .3s ease,
		transform .3s ease,
		box-shadow .3s ease;
}

.sns-link i{
	font-size:24px;
}

.sns-link span{
	font-size:8px;
	font-weight:700;
	letter-spacing:.08em;
}

.sns-link a:hover{
	opacity:1;
	background:rgba(255,255,255,.88);
	color:#8c633d;
	box-shadow:0 10px 22px rgba(82,56,31,.18);
}

.sns-link a:active{
	transform:translateY(2px);
	box-shadow:0 4px 10px rgba(82,56,31,.12);
}
.shopicon{
	width:30px;
	margin-bottom:5px;
}

.shopicon img{
	filter:brightness(0) invert(1);
}

@media (max-width:980px){
	.head-inner{
		align-items:center;
		height:70px;
		padding-left:20px;
	}

	.hlogo{
		top:6vw;
		width:clamp(8.125rem, 5.354rem + 11.67vw, 12.5rem);
	}

	#header.scrolled .hlogo{
		top:0;
		width:92px;
		height:auto;
	}

	#header.scrolled .hlogo img{
		height:auto;
	}

	.h-nav{
		height:70px;
		gap:10px;
	}

	.g-nav{
		display:none;
	}


	.header-links{
		height:70px;
	}

	.shop-link{
		width:112px;
		height:100%;
	}

	.shop-link a{
		/*height:70px;*/
		border-radius:0 0 0 14px;
	}

	.shopicon{
		width:22px;
	}

	.shop-text small{
		font-size:7px;
		letter-spacing:.06em;
	}

	.shop-text strong{
		font-size:10px;
		letter-spacing:.05em;
	}

	.sns-link{
		width:58px;
		height:100%;
	}

	.sns-link a{
		border-radius:0 0 12px 0;
	}

	.sns-link i{
		font-size:20px;
	}

	.sns-link span{
		font-size:7px;
	}
}
/* ==========================
Burger Button
========================== */
.burger{
	display:none;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:5px;
	width:70px;
	background:#8c633d;
	border:none;
	cursor:pointer;
	padding:0 14px;
	position:relative;
	z-index:1100;
	flex-shrink:0;
	align-self:stretch;
	transition:background .3s ease;
	border-radius: 0 0 14px 14px;	
}

.burger:hover{
	background:#714a2b;
	opacity:1;
}

/* 3本線 */
.burger span{
	display:block;
	width:22px;
	height:2px;
	background:#fff;
	border-radius:2px;
	transition:transform .4s cubic-bezier(.23,1,.32,1), opacity .25s ease, width .3s ease;
	transform-origin:center;
}

.burger span:nth-child(3){
	width:14px;
	align-self:flex-start;
}

/* MENU ラベル */
.burger::after{
	content:"MENU";
	display:block;
	font-size:8px;
	font-weight:700;
	letter-spacing:.14em;
	color:#fff;
	margin-top:4px;
	line-height:1;
	transition:opacity .25s ease;
}

/* open 時: × に変化＋CLOSE表示 */
.burger.open span:nth-child(1){
	transform:translateY(7px) rotate(45deg);
	width:22px;
}
.burger.open span:nth-child(2){
	opacity:0;
	transform:scaleX(0);
}
.burger.open span:nth-child(3){
	width:22px;
	align-self:center;
	transform:translateY(-7px) rotate(-45deg);
}
.burger.open::after{
	content:"CLOSE";
	letter-spacing:.08em;
}

@media(max-width:980px){
	.burger{
		display:flex;
	}
}

/* ≤960px: スクロール後もヘッダー背景を出さない
   (白背景の上に茶色ボタンが浮く問題を回避) */
@media(max-width:960px){
	#header.scrolled{
		background:transparent;
		backdrop-filter:none;
		box-shadow:none;
	}
}

/* ==========================
Drawer
========================== */
.drawer{
	position:fixed;
	inset:0;
	z-index:999;
	visibility:hidden;
	pointer-events:none;
	overflow:hidden;
}

.drawer-overlay{
	position:absolute;
	inset:0;
	background:rgba(74,50,30,.5);
	opacity:0;
	transition:opacity .45s ease;
}

.drawer-inner{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:min(360px,85vw);
	background:linear-gradient(160deg,#fffaf0 0%,#f5e8d0 100%);
	padding:90px 36px 52px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	transform:translateX(105%);
	transition:transform .5s cubic-bezier(.23,1,.32,1);
	box-shadow:-12px 0 48px rgba(74,50,30,.15);
	overflow-y:auto;
}

.drawer.open{
	visibility:visible;
	pointer-events:auto;
}

.drawer.open .drawer-overlay{
	opacity:1;
}

.drawer.open .drawer-inner{
	transform:translateX(0);
}

body.drawer-open{
	overflow:hidden;
}

.drawer-nav ul{
	list-style:none;
	padding:0;
}

.drawer-nav li{
	border-bottom:1px solid rgba(216,197,167,.4);
}

.drawer-nav li:first-child{
	border-top:1px solid rgba(216,197,167,.4);
}

.drawer-nav a{
	display:flex;
	align-items:baseline;
	gap:12px;
	padding:17px 4px;
	color:var(--brown);
	text-decoration:none;
	transition:padding-left .25s ease, opacity .2s;
	opacity:1;
}

.drawer-nav a:hover{
	opacity:.7;
	padding-left:10px;
}

.d-en{
	font-size:17px;
	font-weight:700;
	letter-spacing:.1em;
}

.d-ja{
	font-size:10px;
	color:#a08060;
	letter-spacing:.1em;
}

.drawer-links{
	margin-top:40px;
	display:flex;
	gap:12px;
}

.drawer-shop-btn,
.drawer-insta-btn{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:7px;
	padding:16px 10px;
	border-radius:12px;
	font-size:11px;
	letter-spacing:.08em;
	text-decoration:none;
	transition:.3s;
}

.drawer-shop-btn{
	background:var(--brown);
	color:#fff;
}

.drawer-shop-btn .shopicon{
	width:22px;
}

.drawer-shop-btn .shopicon img{
	filter:brightness(0) invert(1);
	width:100%;
	height:auto;
}

.drawer-shop-btn:hover{
	background:var(--brown-dark);
	opacity:1;
}

.drawer-insta-btn{
	background:rgba(111,74,45,.1);
	color:var(--brown);
}

.drawer-insta-btn i{
	font-size:22px;
}

.drawer-insta-btn:hover{
	background:rgba(111,74,45,.18);
	opacity:1;
}

.drawer-deco{
	margin-top:28px;
	text-align:center;
	font-size:10px;
	letter-spacing:.18em;
	color:#b09070;
}

.drawer-open #header .hlogo{
	top: 0px;
    width: 126px;
}
/* ==========================
SP Sticky CTA
========================== */
.sp-cta{
	display:none;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	z-index:980;
	box-shadow:0 -4px 20px rgba(74,50,30,.18);
}

.sp-cta-tel,
.sp-cta-shop{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:15px 10px;
	font-size:13px;
	font-weight:600;
	letter-spacing:.06em;
	text-decoration:none;
	line-height:1.2;
	transition:opacity .2s;
}

.sp-cta-tel:hover,
.sp-cta-shop:hover{
	opacity:.88;
}

.sp-cta-tel{
	background:var(--brown-dark);
	color:#fff;
}

.sp-cta-tel i{
	font-size:16px;
}

.sp-cta-shop{
	background:var(--gold);
	color:#fff;
}

.sp-cta-shop img{
	width:17px;
	height:auto;
	display:inline;
	filter:brightness(0) invert(1);
}

@media(max-width:768px){
	.sp-cta{
		display:flex;
	}
	/* ヘッダーのshop-linkは非表示（スティッキーバーで代替）
	.h-nav .shop-link{
		display:none;
	} */
	.h-nav .header-links .shop-link{
		display:none;
	}
	.h-nav .header-links .sns-link a{
		background:#5f2733;
		border-radius: 0 0 14px 14px;
	}	
}

@media(max-width:380px){
	.sp-cta-tel,
	.sp-cta-shop{
		font-size:11px;
		padding:13px 6px;
		gap:5px;
	}
	.sp-cta-tel i{
		font-size:14px;
	}
	.sp-cta-shop img{
		width:14px;
	}
}