/* ============================================================
   layout.css — 全体レイアウト
     - site-wrapper, site-main
     - Layout/Sidebar (Closed/Open)
     - Layout/Footer
     - Hero
     - BottomBar
     - Top/Popup
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   全体ラッパー
   メインコンテンツは右サイドバー幅（180px）分の余白を確保
   ────────────────────────────────────────────────────────── */
.site-wrapper {
	position: relative;
	min-height: 100vh;
}

.site-main {
	position: relative;
	z-index: var(--z-content);
	padding-right: var(--sidebar-width); /* 180px */
}

/* ──────────────────────────────────────────────────────────
   Layout/Sidebar — 右側固定サイドバー (180px)
   ────────────────────────────────────────────────────────── */
.sidebar {
	position: fixed;
	top: 0;
	right: 0;
	z-index: var(--z-sidebar); /* 100 */
	width: var(--sidebar-width); /* 180px */
	height: 100vh;
	pointer-events: none;
}

.sidebar > * {
	pointer-events: auto;
}

/* Open 時の半透明オーバーレイ */
.sidebar__overlay {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgba(0, 60, 44, 0.46); /* Figma: #003C2C 46% */
	border: 0;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-normal) var(--easing),
	            visibility 0s linear var(--duration-normal);
}

.sidebar[data-state="open"] .sidebar__overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--duration-normal) var(--easing);
}

/* ナビパネル（Open 時にスライドイン） */
.sidebar__panel {
	position: fixed;
	top: 0;
	right: var(--sidebar-width);
	z-index: 2;
	width: var(--sidebar-panel-width);
	height: 100vh;
	background: var(--color-brand-dark); /* Figma: #003C2C */
	color: var(--color-text-white);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--duration-slow) var(--easing-out),
	            visibility 0s linear var(--duration-slow);
}

.sidebar[data-state="open"] .sidebar__panel {
	transform: translateX(0);
	visibility: visible;
	transition: transform var(--duration-slow) var(--easing-out);
}

.sidebar__nav {
	height: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 488px 0 0 64px; /* Figma: nav starts at y=488, x=64 from panel left */
}

.sidebar__nav-links {
	display: flex;
	flex-direction: column;
	gap: 46px; /* Figma: nav links spaced 46px apart */
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar__nav-links a {
	display: block;
	font-family: var(--font-jp);
	font-size: 18px; /* Figma: 18px */
	font-weight: 400;
	color: var(--color-text-white);
	letter-spacing: 0.03em; /* Figma: tracking 0.54px at 18px ≈ 0.03em */
	transition: opacity var(--duration-fast) var(--easing);
}

.sidebar__nav-links a:hover {
	opacity: 0.7;
}

/* パネル内閉じるボタン */
.sidebar__panel-close {
	position: absolute;
	top: var(--space-8);
	right: var(--space-8);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--color-text-white);
	cursor: pointer;
	z-index: 5;
}

.sidebar__panel-close-icon {
	font-size: 28px;
	line-height: 1;
}

/* サイドバー本体（State=Closed） */
.sidebar__bar {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 3;
	width: var(--sidebar-width); /* 180px */
	height: 100vh;
	background: var(--color-bg-sidebar); /* white */
	border-left: 0.5px solid var(--color-divider); /* #333631, 0.5px */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-8) 0;
	gap: var(--space-10);
}

/* ハンバーガー */
.sidebar__hamburger {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.sidebar__hamburger-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 32px;
	height: 18px;
}

.sidebar__hamburger-icon span {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--color-text);
	transition: transform var(--duration-normal) var(--easing),
	            opacity var(--duration-fast) var(--easing);
	transform-origin: center;
}

.sidebar[data-state="open"] .sidebar__hamburger-icon span:nth-child(1) {
	transform: translateY(8.5px) rotate(45deg);
}
.sidebar[data-state="open"] .sidebar__hamburger-icon span:nth-child(2) {
	opacity: 0;
}
.sidebar[data-state="open"] .sidebar__hamburger-icon span:nth-child(3) {
	transform: translateY(-8.5px) rotate(-45deg);
}

.sidebar__hamburger-label {
	font-family: var(--font-en);
	font-size: var(--fs-body-sm);
	letter-spacing: var(--ls-wide);
	color: var(--color-text);
	text-transform: uppercase;
}

/* 縦書きラベル "JAPANESE GREEN TEA - SEIYUAN -" */
.sidebar__vertical {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar__vertical span {
	writing-mode: vertical-rl;
	font-family: var(--font-en);
	font-size: var(--fs-sidebar-text); /* 15px */
	font-weight: 400;
	letter-spacing: var(--ls-vertical);
	color: var(--color-text);
	white-space: nowrap;
}

/* スタンプ / 印 */
.sidebar__stamp {
	width: 60px;
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar__stamp img {
	max-width: 100%;
	max-height: 100%;
}

/* SNS リンク (Instagram, X) */
.sidebar__sns {
	display: flex;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar__sns a {
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
}

.sidebar__sns img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 言語切替 (JP / EN) */
.sidebar__lang {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-en);
	font-size: var(--fs-en-nav); /* 18px */
	color: var(--color-text);
}

.sidebar__lang-link {
	color: var(--color-text-muted);
	letter-spacing: var(--ls-normal);
	transition: color var(--duration-fast) var(--easing);
}

.sidebar__lang-link.is-active,
.sidebar__lang-link:hover {
	color: var(--color-text);
}

/* ──────────────────────────────────────────────────────────
   Hero
   ────────────────────────────────────────────────────────── */
.hero {
	position: relative;
	width: calc(100% + var(--sidebar-width)); /* Figma: hero spans full 1920px behind sidebar */
	height: 540px;
	min-height: 320px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Top page hero: 1080px / 100vh */
.hero--top {
	width: 100%;
	height: var(--hero-height); /* 1080px */
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);
	z-index: 1;
}

.hero__content {
	position: relative;
	z-index: 2;
	color: var(--color-text-white);
	text-align: center;
	padding: var(--space-8);
	max-width: 90%;
}

/* 通常下層ページ: 縦書きの単一タイトル */
.hero__title {
	font-family: var(--font-jp);
	font-size: var(--fs-display); /* 45px */
	font-weight: 700;
	color: var(--color-text-white);
	writing-mode: vertical-rl;
	letter-spacing: var(--ls-wide);
	line-height: var(--lh-tight);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Top: 縦並びタイトル */
.hero__title-main {
	font-family: var(--font-jp);
	font-size: 4.5rem;
	font-weight: 700;
	color: var(--color-text-white);
	letter-spacing: var(--ls-wide);
	margin-bottom: var(--space-3);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.hero__title-sub {
	font-family: var(--font-jp);
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--color-text-white);
	letter-spacing: var(--ls-wide);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ──────────────────────────────────────────────────────────
   BottomBar — ヒーロー直下に配置、ページ下部ではない
   bg: #154D01, height: 60px, full width, centered white text
   ────────────────────────────────────────────────────────── */
.bottom-bar {
	position: relative;
	width: calc(100% + var(--sidebar-width)); /* Figma: bottombar spans full 1920px */
	height: var(--bottombar-height); /* 60px */
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-brand-green); /* #154D01 */
	color: var(--color-text-white);
}

.bottom-bar__text {
	font-family: var(--font-jp);
	font-size: var(--fs-bottombar); /* 18px */
	font-weight: 400;
	letter-spacing: var(--ls-bottombar); /* 0.096em (9.6%) */
	color: var(--color-text-white);
}

/* ──────────────────────────────────────────────────────────
   Layout/Footer — 4セクション縦積み（footer.php のHTMLクラスに完全準拠）
   1. .footer__store-info    (~540px)
   2. .footer__contact-banner (225px)
   3. .footer__recruit-banner (225px)
   4. .footer__nav-area       (390px)
   ────────────────────────────────────────────────────────── */
.site-footer {
	color: var(--color-text);
}

/* --- 1. 店舗情報 --- */
.footer__store-info {
	background: var(--color-bg);
}

.footer__store-info-inner {
	display: grid;
	grid-template-columns: 892px 1fr; /* Figma: gallery ~892px, detail takes remaining */
	min-height: 540px;
}

/* ギャラリー（左半分: 2枚横並び） */
.footer__store-gallery {
	display: grid;
	grid-template-columns: 1654fr 850fr; /* Figma: 左画像1654px + 右画像850px ≈ 66%/34% */
	gap: 0;
	overflow: hidden;
}

.footer__store-gallery-left,
.footer__store-gallery-right {
	overflow: hidden;
}

.footer__store-gallery-left img,
.footer__store-gallery-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 店舗詳細（右側） */
.footer__store-detail {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 31px 60px 40px 60px; /* Figma: header starts at top:31px */
	gap: var(--space-4);
}

.footer__store-header {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.footer__store-label {
	font-family: var(--font-en);
	font-size: var(--fs-section-label); /* 18px */
	font-weight: 400;
	color: var(--color-text);
	letter-spacing: var(--ls-wide);
}

.footer__store-heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display); /* 45px */
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: var(--ls-banner); /* 0.04em */
}

.footer__store-divider {
	width: 100%;
	height: 1px;
	border: none;
	background: var(--color-divider);
	margin: var(--space-2) 0;
}

/* ご予約・アクセス等ボタン */
.footer__store-reservation {
	margin: var(--space-2) 0;
}

.footer__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 240px;
	height: 54px;
	padding: 14px 32px;
	border: none;
	border-radius: var(--radius-lg); /* 40px */
	font-family: var(--font-jp);
	font-size: var(--fs-body); /* 16px */
	font-weight: 700;
	color: var(--color-text);
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--easing),
	            box-shadow var(--duration-fast) var(--easing);
}

.footer__btn--gradient {
	background: var(--gradient-cta);
	box-shadow: var(--shadow-cta);
}

.footer__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
}

/* 定義リスト（住所・営業時間等） */
.footer__store-dl {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.footer__store-dl-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	font-family: var(--font-jp);
	font-size: var(--fs-body); /* 16px */
	line-height: var(--lh-body); /* 2.25 */
	letter-spacing: var(--ls-body); /* 0.032em */
	color: var(--color-text);
	border-bottom: 1px solid rgba(51, 54, 49, 0.1);
}

.footer__store-dl-row dt {
	font-weight: 700;
}

.footer__store-dl-row dd {
	font-weight: 400;
}

.footer__store-dl-row dd a {
	color: var(--color-text);
}

.footer__store-buttons {
	display: flex;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

/* --- 2. お問い合わせバナー (緑: #154D01) --- */
.footer__contact-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 225px;
	background: var(--color-brand-green); /* #154D01 */
	color: var(--color-text-white);
	text-decoration: none;
	transition: opacity var(--duration-fast) var(--easing);
}

.footer__contact-banner:hover {
	opacity: 0.9;
}

.footer__contact-banner-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.footer__contact-label {
	font-family: var(--font-en);
	font-size: var(--fs-section-label); /* 18px */
	font-weight: 400;
	color: var(--color-text-white);
	letter-spacing: var(--ls-wide);
}

.footer__contact-heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display); /* 45px */
	font-weight: 700;
	color: var(--color-text-white);
	letter-spacing: var(--ls-banner); /* 0.04em */
}

/* --- 3. 採用情報バナー (ダークグリーン: #103222) --- */
.footer__recruit-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 225px;
	background: var(--color-brand-green-dark); /* #103222 */
	color: var(--color-text-white);
	text-decoration: none;
	transition: opacity var(--duration-fast) var(--easing);
}

.footer__recruit-banner:hover {
	opacity: 0.9;
}

.footer__recruit-banner-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

.footer__recruit-label {
	font-family: var(--font-en);
	font-size: var(--fs-section-label); /* 18px */
	font-weight: 400;
	color: var(--color-text-white);
	letter-spacing: var(--ls-wide);
}

.footer__recruit-heading {
	font-family: var(--font-jp);
	font-size: var(--fs-display); /* 45px */
	font-weight: 700;
	color: var(--color-text-white);
	letter-spacing: var(--ls-banner); /* 0.04em */
}

/* --- 4. フッターナビエリア (ダーク背景) --- */
.footer__nav-area {
	position: relative;
	min-height: 390px;
	padding: var(--space-16) var(--space-12);
	overflow: hidden;
	background-color: #1a1a1a; /* ダーク背景フォールバック */
	background-image: url('../images/photos/bg-footer-nav.jpg');
	background-size: cover;
	background-position: center;
}

.footer__nav-area::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 1;
}

.footer__nav-area-inner {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	max-width: var(--content-area-width);
	margin: 0 auto;
}

/* ロゴ */
.footer__nav-logo {
	display: flex;
	align-items: center;
}

.footer__nav-logo-link {
	display: block;
}

.footer__nav-logo img {
	height: auto;
	max-width: 200px;
}

/* ナビカラム */
.footer__nav-columns {
	display: flex;
	gap: var(--space-16);
}

.footer__nav-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.footer__nav-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer__nav-item a {
	color: var(--color-text-white);
	font-family: var(--font-jp);
	font-size: var(--fs-footer-nav); /* 18px */
	font-weight: 400;
	letter-spacing: var(--ls-normal);
	transition: opacity var(--duration-fast) var(--easing);
}

.footer__nav-item--bold > a {
	font-weight: 700;
}

.footer__nav-item a:hover {
	opacity: 0.7;
}

.footer__nav-sublist {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-left: var(--space-4);
	margin-top: var(--space-2);
	list-style: none;
}

.footer__nav-sublist a {
	color: var(--color-text-white);
	font-family: var(--font-jp);
	font-size: var(--fs-footer-sub); /* 15px Regular */
	font-weight: 400;
	letter-spacing: var(--ls-normal);
}

/* SNS リンク */
.footer__nav-sns {
	display: flex;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: var(--space-4);
}

.footer__nav-sns a {
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
}

.footer__nav-sns img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* つぼ市リンク */
.footer__nav-tsuboichi {
	color: var(--color-text-white);
	font-family: var(--font-jp);
	font-size: var(--fs-footer-sub);
	letter-spacing: var(--ls-normal);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding-bottom: 2px;
	display: inline-block;
}

/* コピーライト */
.footer__copyright {
	position: relative;
	z-index: 2;
	margin-top: var(--space-12);
	font-family: var(--font-en-serif);
	font-size: var(--fs-body-sm); /* 12px */
	letter-spacing: var(--ls-wide);
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

/* ──────────────────────────────────────────────────────────
   Top/Popup
   ────────────────────────────────────────────────────────── */
.top-popup {
	position: fixed;
	left: var(--space-8);
	bottom: var(--space-8);
	z-index: var(--z-popup);
	width: 220px;
	background: var(--color-bg);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-popup);
	overflow: hidden;
	transition: opacity var(--duration-normal) var(--easing),
	            transform var(--duration-normal) var(--easing);
}

.top-popup[data-state="hidden"] {
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
}

.top-popup__close {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	z-index: 2;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.85);
	border-radius: var(--radius-full);
	color: var(--color-text);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.top-popup__link,
.top-popup__image {
	display: block;
	width: 100%;
}

.top-popup__image {
	height: auto;
}