/*
Theme Name: Lightning Child
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.3
*/


/* ===================================================
   01. LUB共通設定
=================================================== */

/* ---------- 01-1. 共通：白カード枠 ---------- */

.order-lub-content-card {
	background: #fff;
	padding: 32px;
	border-radius: 20px;
	border: 1px solid #e5edf3;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.order-lub-content-card {
		padding: 20px;
		border-radius: 16px;
	}
}


/* ---------- 01-2. 共通：ページタイトル非表示 ---------- */
/* Lightning標準のページタイトル部分だけ非表示。
   site-header / header / ナビゲーションは非表示にしない。 */

.page-header,
body.page .entry-header,
body.page .order-lub-front-header {
	display: none !important;
}


/* ---------- 01-3. 共通：ヘッダー表示保険 ---------- */

header,
.site-header,
.siteHeader,
.siteHeadContainer,
#site-header,
.gMenu_outer {
	visibility: visible !important;
	opacity: 1 !important;
}

.site-header,
#site-header {
	background: #fff;
}

.site-header .site-header-logo,
.site-header .site-header-title,
.site-header .site-header-site-name,
.site-header .navbar-brand,
.site-header .custom-logo-link {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.site-header-logo-subtitle {
	display: block !important;
	margin: 7px 0 0 1px !important;
	color: #68747f !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.06em !important;
	text-decoration: none !important;
}


/* ===================================================
   02. ヘッダーエリア
=================================================== */

/* ---------- 02-1. ヘッダー全体 ---------- */

#site-header {
	height: 98px;
	padding: 15px 0;
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
}

#site-header-container {
	width: 1180px;
	max-width: 100%;
	margin: 0 auto;
	display: grid !important;
	grid-template-columns: 330px minmax(360px, 620px) 360px;
	align-items: center;
	gap: 28px;
}


/* ---------- 02-2. ヘッダー検索フォーム ---------- */

.header-search-form {
	width: 100%;
	display: flex !important;
	justify-content: center;
	align-items: center;
	min-width: 0;
}

.header-search-inner {
	display: flex !important;
	align-items: stretch;
	width: 100%;
	max-width: 620px;
	height: 42px;
	border: 2px solid #ccc;
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}

.header-search-inner:focus-within {
	border-color: #5aab00;
	box-shadow: 0 0 0 3px rgba(90, 171, 0, .15);
}

.header-search-input {
	flex: 1;
	padding: 0 18px;
	border: none;
	outline: none;
	font-size: 14px;
	background: transparent;
	color: #2b2b2b;
	min-width: 0;
}

.header-search-input::placeholder {
	color: #bbb;
}

.header-search-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	background: #5aab00;
	border: none;
	border-radius: 0 22px 22px 0;
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	transition: background .15s;
}

.header-search-btn:hover {
	background: #4a9200;
}

.header-search-btn svg {
	display: none !important;
}

.header-search-btn::after {
	content: "検索";
}


/* ---------- 02-3. ヘッダーアクションボタン ---------- */

.header-actions {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	flex-shrink: 0;
}

.hdr-action-btn {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	text-decoration: none;
	color: #2b2b2b;
	border-radius: 6px;
	transition: background .15s;
	white-space: nowrap;
}

.hdr-action-btn:hover {
	background-color: #f0f0f0;
	color: #2b2b2b;
	text-decoration: none;
}

.hdr-icon-wrap {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.hdr-action-btn svg {
	display: block !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	max-width: 26px !important;
	min-height: 26px !important;
	max-height: 26px !important;
	fill: none !important;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.hdr-label {
	font-size: 11px;
	line-height: 1;
	color: #2b2b2b;
}

.hdr-badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: #f0a500;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	pointer-events: none;
}


/* ---------- 02-4. ヘッダーアイコン色 ---------- */

.hdr-cart svg {
	stroke: #f0a500 !important;
}

.hdr-news svg {
	stroke: #1e6fb5 !important;
}

.hdr-login svg,
.hdr-mypage svg {
	stroke: #5aab00 !important;
}

.hdr-signup svg {
	fill: none !important;
	stroke: #f0a500 !important;
}


/* ---------- 02-5. 商品一覧アイコン ---------- */

.header-actions .hdr-products .hdr-icon-wrap {
	color: #005691;
}

.header-actions .hdr-products-icon {
	position: relative;
	display: inline-block;
	width: 22px;
	height: 22px;
	color: currentColor;
}

.header-actions .hdr-products-icon::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 1px;
	width: 8px;
	height: 8px;
	background: currentColor;
	border-radius: 3px;
	box-shadow:
		12px 0 0 currentColor,
		0 12px 0 currentColor,
		12px 12px 0 currentColor;
}

.header-actions .hdr-products:hover .hdr-icon-wrap,
.header-actions .hdr-products:hover .hdr-label {
	color: #003f73;
}


/* ---------- 02-6. ヘッダーレスポンシブ ---------- */

@media (max-width: 1100px) {
	#site-header {
		height: auto;
	}

	#site-header-container {
		width: min(100% - 24px, 1180px);
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 10px 0;
	}

	.header-search-inner {
		max-width: 100%;
	}

	.header-actions {
		justify-content: center;
		flex-wrap: wrap;
	}
}
/* ===================================================
   SPヘッダー改修：下部固定メニュー
=================================================== */

/* ---------- SP：4アイコンを画面下部に固定 ---------- */

@media (max-width: 768px) {
	.site-header-logo-subtitle {
		font-size: 11px !important;
		letter-spacing: 0.04em !important;
	}

	body {
		padding-bottom: 76px;
	}

	.header-actions {
		position: fixed !important;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;

		display: grid !important;
		grid-template-columns: repeat(4, 1fr);
		gap: 0;

		width: 100%;
		height: 68px;
		padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
		box-sizing: border-box;

		background: #fff;
		border-top: 1px solid #e5edf3;
		box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.10);
	}

	.header-actions .hdr-action-btn {
		width: 100%;
		height: 100%;
		padding: 4px 2px;
		border-radius: 10px;
		justify-content: center;
		box-sizing: border-box;
	}

	.header-actions .hdr-icon-wrap {
		width: 28px;
		height: 28px;
	}

	.header-actions .hdr-action-btn svg {
		width: 24px !important;
		height: 24px !important;
		min-width: 24px !important;
		max-width: 24px !important;
		min-height: 24px !important;
		max-height: 24px !important;
	}

	.header-actions .hdr-products-icon {
		width: 21px;
		height: 21px;
	}

	.header-actions .hdr-products-icon::before {
		width: 7px;
		height: 7px;
		box-shadow:
			11px 0 0 currentColor,
			0 11px 0 currentColor,
			11px 11px 0 currentColor;
	}

	.header-actions .hdr-label {
		font-size: 10px;
		line-height: 1.2;
	}

	.header-actions .hdr-badge {
		top: -2px;
		right: -5px;
		min-width: 17px;
		height: 17px;
		border-radius: 9px;
		font-size: 10px;
		line-height: 17px;
	}
}


/* shop.cssへ分離済み */

/* ===================================================
   04. LUBトップページ内の汎用パーツ
=================================================== */

/* ---------- 04-1. 汎用ボックス ---------- */

.lub-box {
	width: min(1180px, calc(100% - 40px));
	max-width: 1180px;
	margin: 0 auto 28px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 12px;
	padding: 24px;
	box-sizing: border-box;
}

.lub-box h2 {
	margin-top: 0;
	margin-bottom: 16px;
	font-size: 22px;
	font-weight: 700;
}

.lub-box p {
	line-height: 1.8;
}

@media (max-width: 768px) {
	.lub-box {
		width: min(100% - 24px, 1180px);
		padding: 18px;
		margin: 0 auto 22px;
	}
}

/* ---------- 04-2. お知らせ・アクション ---------- */

.lub-notice {
	border-left: 6px solid #333;
	background: #fafafa;
}

.lub-next-actions {
	background: #fff;
}

.lub-action-card {
	border: 1px solid #e5e5e5;
	border-left: 5px solid #999;
	border-radius: 8px;
	padding: 16px 18px;
	margin: 16px 0;
	background: #fafafa;
}

.lub-action-important {
	border-left-color: #d9534f;
	background: #fff7f7;
}


/* ---------- 04-3. LUB汎用ボタン ---------- */

.lub-button {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 6px;
	background: #333;
	color: #fff !important;
	text-decoration: none;
	font-weight: 700;
	line-height: 1.4;
	margin: 6px 8px 6px 0;
}

.lub-button:hover {
	opacity: 0.85;
	color: #fff !important;
}

.lub-button-sub {
	background: #666;
}


/* ---------- 04-4. 注文状況カード ---------- */

.lub-status-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
	margin: 18px 0;
}

.lub-status-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 92px;
	padding: 16px 10px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #333;
	box-sizing: border-box;
	transition: .15s ease;
	text-align: center;
}

.lub-status-card:hover {
	border-color: #8a1c1c;
	color: #8a1c1c;
	background: #fffafa;
}

.lub-status-card--payment-waiting {
	background: #fff7f7;
	border-color: #e4b7b7;
}

.lub-status-label {
	display: block;
	font-size: 13px;
	margin-bottom: 8px;
	color: #333;
}

.lub-status-count {
	display: block;
	font-size: 22px;
	font-weight: 700;
	color: #111;
}

.lub-summary-note {
	margin-top: 16px;
}


/* ---------- 04-5. よく注文する商品・流れ ---------- */

.lub-apply {
	background: #fff;
}

.lub-frequent-products ul.products {
	margin-top: 16px;
}

.lub-frequent-products .woocommerce ul.products li.product,
.lub-frequent-products ul.products li.product {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 16px;
	background: #fff;
}

.lub-flow ol {
	margin-left: 1.4em;
	line-height: 1.9;
}


/* ---------- 04-6. 汎用パーツレスポンシブ ---------- */

@media (max-width: 768px) {
	.lub-box {
		padding: 18px;
		margin-bottom: 22px;
	}

	.lub-status-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lub-button {
		display: block;
		width: 100%;
		text-align: center;
		margin: 8px 0;
	}
}

/* ===================================================
   07. WooCommerce：マイページ
=================================================== */

/* ---------- 07-1. マイページ基本 ---------- */

.woocommerce-account .woocommerce {
	max-width: 1000px;
	margin: 0 auto;
}

.woocommerce-account .entry-header.order-lub-front-header {
	display: none !important;
}


/* ---------- 07-2. マイページナビゲーション ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 100%;
	float: none;
	margin-bottom: 28px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 110px;
	padding: 16px 10px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
	color: #333;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
	display: block;
	margin-bottom: 10px;
	font-size: 30px;
	line-height: 1;
	color: #8a8f98;
	font-weight: normal;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	border-color: #8a1c1c;
	color: #8a1c1c;
	background: #fffafa;
}


/* ---------- 07-3. マイページナビアイコン ---------- */

.woocommerce-account .woocommerce-MyAccount-navigation-link--applications a::before {
	content: "📋";
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
	content: "🛒";
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
	content: "📦";
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
	content: "👤";
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--password-change-link a::before {
	content: "🔐";
}

.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
	content: "↪";
}


/* ---------- 07-4. マイページ本文 ---------- */

.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
	background: #fff;
	border: 1px solid #ddd;
	padding: 28px;
	box-sizing: border-box;
}


/* ---------- 07-5. マイページレスポンシブ ---------- */

@media (max-width: 768px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation li a {
		min-height: 96px;
		font-size: 13px;
	}
}

/* ===================================================
   SP最適化：ログインページ
=================================================== */

@media (max-width: 768px) {

	/* ログインページ全体 */
	.lube-login-wrap {
		width: min(100% - 24px, 420px);
		max-width: 420px;
		margin: 0 auto;
		padding: 18px 0 32px;
		box-sizing: border-box;
		font-size: 14px;
	}

	/* 1カラム化 */
	.lube-login-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 18px;
	}

	/* ボックス */
	.lube-login-box {
		border: 1px solid #e5e7eb;
		border-radius: 14px;
		background: #fff;
		overflow: hidden;
		box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
	}

	.lube-login-box__header {
		padding: 14px 16px;
		font-size: 15px;
		font-weight: 700;
		background: #f8fafc;
		border-bottom: 1px solid #e5e7eb;
	}

	.lube-login-box__body {
		padding: 22px 18px;
	}

	/* ログインフォーム */
	.lube-login-box--login form.woocommerce-form-login {
		margin: 0;
	}

	.lube-login-box--login form.woocommerce-form-login .form-row {
		margin: 0 0 16px !important;
	}

	.lube-login-box--login form.woocommerce-form-login label {
		font-size: 13px;
		margin-bottom: 6px;
		color: #333;
		font-weight: 600;
	}

	.lube-login-box--login form.woocommerce-form-login input.input-text {
		width: 100%;
		height: 44px;
		padding: 0 12px;
		border: 1px solid #cfd6dd;
		border-radius: 8px;
		font-size: 16px;
		box-sizing: border-box;
		background: #fff;
	}

	.lube-login-box--login form.woocommerce-form-login input.input-text:focus {
		outline: none;
		border-color: #1e73be;
		box-shadow: 0 0 0 3px rgba(30, 115, 190, 0.12);
	}

	/* ログイン状態保持 */
	.lube-login-box--login form.woocommerce-form-login .woocommerce-form-login__rememberme {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 2px 0 16px;
		font-size: 13px;
		line-height: 1.5;
	}

	.lube-login-box--login form.woocommerce-form-login .woocommerce-form-login__rememberme input {
		width: 16px;
		height: 16px;
	}

	/* ログインボタン */
	.lube-login-box--login form.woocommerce-form-login button.woocommerce-form-login__submit {
		width: 100%;
		height: 46px;
		padding: 0 14px;
		border-radius: 8px;
		background: #1e73be;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		box-sizing: border-box;
	}

	.lube-login-box--login form.woocommerce-form-login button.woocommerce-form-login__submit:hover {
		background: #005691;
	}

	/* 補足文 */
	.lube-login-extra {
		margin-top: 18px;
		padding-top: 16px;
		border-top: 1px solid #edf0f2;
		font-size: 12px;
		line-height: 1.8;
		color: #555;
	}

	.lube-login-extra a {
		color: #1e73be;
		text-decoration: underline;
	}

	/* 新規会員登録ボックス */
	.lube-login-box--register .lube-login-box__body p {
		font-size: 13px;
		line-height: 1.8;
		margin: 0 0 14px;
	}

	.lube-login-highlight {
		padding: 12px 14px;
		background: #fff7f7;
		border: 1px solid #f1c9c9;
		border-radius: 8px;
		color: #b00020;
		font-size: 13px;
		line-height: 1.7;
	}

	.lube-login-btn {
		width: 100%;
		height: 46px;
		padding: 0 14px;
		border-radius: 8px;
		background: #1e73be;
		color: #fff;
		font-size: 14px;
		font-weight: 700;
		box-sizing: border-box;
		text-align: center;
	}

	.lube-login-btn:hover {
		background: #005691;
		color: #fff;
	}

	/* WooCommerce標準の余白対策 */
	.lube-login-box .woocommerce-notices-wrapper {
		margin-bottom: 12px;
	}

	.lube-login-box .woocommerce-error,
	.lube-login-box .woocommerce-message,
	.lube-login-box .woocommerce-info {
		margin: 0 0 14px;
		padding: 12px 14px;
		border-radius: 8px;
		font-size: 13px;
		line-height: 1.6;
	}
}

/* ===================================================
   マイページ注文詳細：キャンセル申請
=================================================== */

.order-lub-cancel-request-box {
	margin: 28px 0 0;
	padding: 18px 20px;
	background: #f8fafc;
	border: 1px solid #d5dde5;
	border-radius: 10px;
	box-sizing: border-box;
}

.order-lub-cancel-request-box p {
	margin: 0 0 14px;
	color: #52616f;
	font-size: 14px;
	line-height: 1.8;
}

.order-lub-cancel-request-box--done {
	background: #f8fafc;
	border-color: #d5dde5;
}

.order-lub-cancel-request-box--done p {
	margin: 0;
	color: #52616f;
}

.order-lub-cancel-request-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	background: #6b7280;
	border-radius: 6px;
	color: #fff !important;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none !important;
}

.order-lub-cancel-request-button:hover {
	background: #4b5563;
	color: #fff !important;
	text-decoration: none !important;
}

@media (max-width: 768px) {
	.order-lub-cancel-request-box {
		padding: 16px 14px;
	}

	.order-lub-cancel-request-button {
		width: 100%;
	}
}
/* ===================================================
   注文完了ページ：左右余白・見出し位置調整
=================================================== */

body.woocommerce-order-received .entry-header,
body.woocommerce-order-received .order-lub-front-header,
body.woocommerce-order-received .entry-body {
	box-sizing: border-box;
}

/* 見出しエリア */
body.woocommerce-order-received .entry-header,
body.woocommerce-order-received .order-lub-front-header {
	width: 100%;
	max-width: 1180px;
	margin: 28px auto 0;
	padding: 0 32px;
	box-sizing: border-box;
}

/* 本文エリア */
body.woocommerce-order-received .entry-body {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px 60px;
	box-sizing: border-box;
}

/* WooCommerce本体 */
body.woocommerce-order-received .woocommerce,
body.woocommerce-order-received .woocommerce-order {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	box-sizing: border-box;
}

/* 見出しの余計なズレを消す */
body.woocommerce-order-received .entry-header .entry-title,
body.woocommerce-order-received .order-lub-front-header .entry-title,
body.woocommerce-order-received .order-lub-front-header h1 {
	margin: 0 0 28px;
	padding: 0;
}

/* 注文完了メッセージ */
body.woocommerce-order-received .woocommerce-notice,
body.woocommerce-order-received .woocommerce-order-overview {
	margin-left: 0;
	margin-right: 0;
}

/* SP */
@media (max-width: 768px) {
	body.woocommerce-order-received .entry-header,
	body.woocommerce-order-received .order-lub-front-header {
		margin-top: 22px;
		padding: 0 16px;
	}

	body.woocommerce-order-received .entry-body {
		padding: 0 16px 48px;
	}
}
/* =========================
   ヘッダー下部ナビゲーションバー
========================= */
.header-nav-bar {
    width: 100%;
    background: #2b7a2b;
    border-top: 1px solid rgba(255,255,255,.15);
}
.header-nav-inner {
    display: flex;
    align-items: stretch;
    max-width: 1062px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 各ナビアイテム共通 */
.hnb-item,
.hnb-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 22px;
    height: 44px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    background: none;
    border: none;
    cursor: pointer;
    transition: background .15s;
    position: relative;
}
.hnb-item:hover,
.hnb-dropdown-trigger:hover,
.hnb-dropdown:hover > .hnb-dropdown-trigger {
    background: rgba(255,255,255,.15);
    color: #fff;
    text-decoration: none;
}

/* ドロップダウン矢印 */
.hnb-caret {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    stroke: #fff;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s;
    display: block !important;
}
.hnb-dropdown-trigger[aria-expanded="true"] .hnb-caret {
    transform: rotate(180deg);
}

/* ドロップダウンラッパー */
.hnb-dropdown {
    position: relative;
}

/* プルダウンメニュー */
.hnb-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 9999;
}
.hnb-dropdown-menu.is-open {
    display: block;
}
.hnb-dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #2b2b2b;
    text-decoration: none;
    transition: background .12s;
}
.hnb-dropdown-menu li a:hover {
    background: #f5f5f5;
    color: #2b7a2b;
}

/* サブメニュー（子カテゴリー） */
.hnb-dropdown-item.has-children {
    position: relative;
}
.hnb-sub-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    list-style: none;
    margin: 0;
    padding: 6px 0;
    z-index: 9999;
}
.hnb-dropdown-item.has-children:hover .hnb-sub-menu {
    display: block;
}

/* ===================================================
SP：Lightning標準メニューボタンを右側へ移動

* 左上表示をやめる
* 通常ヘッダーではロゴ右側へ
* 商品一覧の追従検索バーでは右側へ
  =================================================== */

@media (max-width: 768px) {

```
/* Lightning標準のメニューボタンを右上へ移動 */
.vk-mobile-nav-menu-btn {
	position: fixed !important;
	top: 14px !important;
	left: auto !important;
	right: 12px !important;
	z-index: 10000 !important;

	width: 42px !important;
	height: 42px !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #fff !important;
	border: 1px solid #d5dde5 !important;
	border-radius: 8px !important;
	box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12) !important;
	box-sizing: border-box !important;
}

/* 通常ヘッダー側：右にメニュー分の余白を確保 */
#site-header,
.site-header {
	position: relative !important;
}

#site-header-container {
	padding-right: 56px !important;
	box-sizing: border-box !important;
}

/* メニューアイコンの線色調整 */
.vk-mobile-nav-menu-btn span,
.vk-mobile-nav-menu-btn::before,
.vk-mobile-nav-menu-btn::after {
	background-color: #333 !important;
}


/* ---------------------------------------------------
   SP：商品一覧・カテゴリページ：追従検索バーの右側に表示
--------------------------------------------------- */
/* ===================================================
SP：Lightningハンバーガーメニュー位置調整

* 通常ヘッダー：ロゴの右側に表示
* 商品一覧・カテゴリ：追従検索バーの右側に表示
  =================================================== */

@media (max-width: 768px) {

/* 共通：ボタンサイズ */
.vk-mobile-nav-menu-btn {
	z-index: 100000 !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}


/* ---------------------------------------------------
   通常ヘッダー：ロゴの右側に配置
   ※ 数値はロゴ幅に合わせて微調整可
--------------------------------------------------- */

body:not(.woocommerce-shop):not(.post-type-archive-product):not(.tax-product_cat) .vk-mobile-nav-menu-btn {
	position: fixed !important;
	top: 10px !important;

	/* ロゴの右端あたり */
	left: min(calc(100vw - 46px), 270px) !important;
	right: initial !important;
	bottom: initial !important;
}

/* 通常ヘッダーでは、検索バーを無理に右へ詰めない */
body:not(.woocommerce-shop):not(.post-type-archive-product):not(.tax-product_cat) #site-header-container {
	padding-right: 0 !important;
	box-sizing: border-box !important;
}


/* ---------------------------------------------------
   商品一覧・カテゴリページ：追従検索バーの右側に配置
--------------------------------------------------- */

body.woocommerce-shop .vk-mobile-nav-menu-btn,
body.post-type-archive-product .vk-mobile-nav-menu-btn,
body.tax-product_cat .vk-mobile-nav-menu-btn {
	position: fixed !important;
	top: 15px !important;
	left: initial !important;
	right: 12px !important;
	bottom: initial !important;
}

/* 検索バーの右側に、メニューボタン分の余白を作る */
body.woocommerce-shop #site-header-container,
body.post-type-archive-product #site-header-container,
body.tax-product_cat #site-header-container {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 52px 0 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

body.woocommerce-shop .header-search-form,
body.post-type-archive-product .header-search-form,
body.tax-product_cat .header-search-form {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

body.woocommerce-shop .header-search-inner,
body.post-type-archive-product .header-search-inner,
body.tax-product_cat .header-search-inner {
	width: 100% !important;
	max-width: 100% !important;
}

}