/* ============================================================
   HAWAII-2075 Phase 2 Step 1
   ヘッダー・フッター・カラー・フォント リニューアル
   ---------------------------------------------------------
   本 CSS は common.css の後に読み込み、差分を上書きします。
   本番反映後に安定したら common.css に取り込み予定。
   ============================================================ */

/* ---------- @font-face: Domaine Display (self-hosted) ---------- */
@font-face {
	font-family: 'domaine-display-regular';
	src: url('/common/fonts/domaine-display/domaine-display-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'domaine-display-medium';
	src: url('/common/fonts/domaine-display/domaine-display-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* ---------- CSS Variables (design tokens) ---------- */
:root {
	/* ▼ ブランドカラー (HAWAII-2075 spec) ▼ */
	--c-accent:        #A5B1B4;  /* 見出し / ボタン / バッジ / インアクティブタブ */
	--c-text:          #000000;  /* 本文メイン */
	--c-text-warm:     #3E3A39;  /* 本文（温かみあり） */
	--c-ground:        #FFFFFF;  /* 本文反転 / 背景白 */
	--c-footer:        #B9C7C6;  /* フッター / グロナビボタン / オプション背景 */
	--c-plan-casual:   #CEC1A9;  /* カジュアルプラン */
	--c-plan-photo:    #C2C2AA;  /* フォトプラン */
	--c-plan-wedding:  #DDC4B9;  /* 挙式プラン */

	/* ▼ Font stacks ▼ */
	--f-serif-jp:  "Shippori Mincho", "游明朝", "Yu Mincho", "YuMincho", serif;
	--f-sans-jp:   "Noto Sans JP", "游ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN", sans-serif;
	--f-en-main:   "domaine-display-medium", "domaine-display-regular", "Playfair Display", Georgia, serif;
	--f-en-main-r: "domaine-display-regular", "Playfair Display", Georgia, serif;
	--f-en-sub:    "Fjalla One", "Oswald", "Impact", sans-serif;
	--f-num:       "Fjalla One", "Oswald", "Impact", sans-serif;  /* 数字も Fjalla One で統一 */
}

/* ---------- Header (HAWAII-2075) ---------- */
header#header {
	background: var(--c-ground) !important;
	border-bottom: 1px solid rgba(0,0,0,0.08) !important;
	margin: 0 !important;
	height: auto !important;
	overflow: visible !important;
	padding: 18px 0 !important;
	position: sticky !important;
	top: 0 !important;
	z-index: 100;
}
/* 下層 v109: 下層のヘッダー (ナビの行) はお知らせの帯と同じく少し透過 (TOP は KV の上で透明・スクロール後は白のまま) */
body:not(.home) header#header { background: rgba(255, 255, 255, 0.85) !important; }
header#header > div {
	max-width: 1360px !important;
	padding: 0 32px !important;
	display: flex !important;
	align-items: center !important;
	gap: 32px;
	justify-content: flex-start !important;
}
header#header > div > h2 {
	width: auto !important;
	flex: 0 0 auto;
	margin: 0 !important;
}
header#header > div > h2 a { display: block; }
header#header > div > h2 img {
	display: block !important;
	width: auto !important;
	height: 40px !important;
	object-fit: contain;
}

/* Global nav */
#header_links {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	background: transparent !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
}
#header_links > nav {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px 20px;
	align-items: center;
	justify-content: flex-end;
	float: none !important;
	background: none !important;
}
#header_links > nav:after,
#header_links > nav:before { display: none !important; content: none !important; }
#header_links > nav > a {
	color: var(--c-text) !important;
	font-family: var(--f-en-sub) !important;
	font-size: 12px !important;
	letter-spacing: 0.25em !important;   /* v17: トラッキング 250 */
	text-transform: uppercase;
	padding: 6px 4px !important;
	background: none !important;
	position: relative;
	white-space: nowrap;
}
#header_links > nav > a:before,
#header_links > nav > a:after { display: none !important; content: none !important; }
/* 下層 v60: PC は枠を上下中央にしても Fjalla One の文字が 3〜4px 上に寄って見えるので、ロゴ・ボタンと中心をそろえる */
@media only screen and (min-width: 1280px) {
	#header_links > nav > a { top: 4px; }
}
#header_links > nav > a > span {
	font-family: var(--f-en-sub) !important;
	font-size: 12px !important;
	color: var(--c-text) !important;
	line-height: 1;
	padding: 0 !important;
}
/* 下層 v73: common.css の font-weight: bold が残っていて、太字のない Fjalla One を
   ブラウザが擬似的に太らせていた (Safari は Chrome より太く出る)。書体どおりの太さに */
#header_links > nav > a,
#header_links > nav > a > * { font-weight: 400 !important; }
/* 下層 v74: 定休日・臨時お知らせ (header.tpl の $holiday_notice)。全幅の薄いグレーの帯 (少し透過)。
   下層 v75: ヘッダーの下 (TOP では KV と分断して見えた) → ヘッダーの一番上に。
   ヘッダー上の余白を帯の下に移す / ハンバーガーのボタンは帯の分だけ下げて、ロゴの行の中央に */
header#header > .holiday-notice {
	margin: 0 0 18px;
	padding: 8px 32px;
	/* background: rgba(241, 244, 244, 0.85);   #F1F4F4 を少し透過 */
	background: rgba(185, 199, 198, 1.0);
	font-family: var(--f-sans-jp);
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 20px;
	text-align: center;
	color:var(--c-ground);
}
/* 下層 v108: 帯は .pc なので 890px 以下では出ない (スマホはハンバーガーの中に出す)。帯ありの調整も帯が見える 891px 以上だけに効かせる
   (:has() は帯が非表示でも要素があるだけで効くので、スマホでヘッダーの上の余白が消えてロゴとハンバーガーが上に詰まっていた) */
@media only screen and (min-width: 891px) {
	header#header:has(> .holiday-notice) { padding-top: 0 !important; }
	/* 帯が透けるように、ヘッダーの白い背景はロゴの行だけに塗る (帯の 36px には塗らない) */
	body.home.scrolled-past-kv header#header:has(> .holiday-notice) {
		background: linear-gradient(var(--c-ground), var(--c-ground)) bottom / 100% calc(100% - 36px) no-repeat !important;
	}
	/* 下層 v109: 下層はロゴの行も帯と同じく少し透過 */
	body:not(.home) header#header:has(> .holiday-notice) {
		background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)) bottom / 100% calc(100% - 36px) no-repeat !important;
	}
	header#header:has(> .holiday-notice) .icon_headermenu { top: calc(50% + 18px) !important; }
}
@media only screen and (min-width: 891px) and (max-width: 1279px) {
	header#header > .holiday-notice { margin-bottom: 20px; padding: 8px 24px; }
	/* ハンバーガーを開いている間は帯を消して、ロゴの行を元の位置に (半透明のメニュー越しに帯の文字と下がったロゴが透けて見えるので) */
	body.hamb-open header#header > .holiday-notice { display: none; }
	body.hamb-open header#header:has(> .holiday-notice) { padding-top: 20px !important; }
	body.hamb-open header#header:has(> .holiday-notice) .icon_headermenu { top: 50% !important; }
}
#header_links > nav > a:hover { opacity: 0.6; }

/* Header CTA pill buttons */
.header-cta-group {
	display: flex;
	gap: 10px;
	align-items: center;
	flex: 0 0 auto;
	margin-left: 12px;
}
.header-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 30px;
	padding: 0;
	border-radius: 999px;
	font-family: var(--f-sans-jp);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .2s;
	background: var(--c-text);  /* HAWAII-2075 v2: 両方黒 */
	color: var(--c-ground);
}
.header-cta:hover { opacity: 0.85; text-decoration: none !important; }   /* 下線なし (common.css の a:hover の下線を打ち消し) */
.header-cta--reserve { background: var(--c-accent); }
.header-cta--contact { background: var(--c-accent); }  /* v3: 相談会予約と同色に */

/* Right-side SNS rail (STAY WITH US) */
.header-sns {
	position: fixed !important;
	top: auto !important;
	bottom: 40px !important;
	right: 20px !important;
	display: flex !important;
	flex-direction: column;
	width: 60px;
	gap: 17px;
	z-index: 90;
	align-items: center;
	background: none !important;
}
.header-sns__item { display: block; opacity: 1 !important; }
.header-sns__item img {
	width: 25px !important;
	height: 25px !important;
	display: block !important;
	filter: brightness(0);
	opacity: 0.7;
}
.header-sns__item:hover img { opacity: 1; }
.header-sns:after {
	content: "STAY WITH US";
	writing-mode: vertical-rl;
	font-family: var(--f-en-sub);
	font-size: 12px;
	letter-spacing: 0.24em;
	color: var(--c-text);
	margin-top: 14px;
	opacity: 0.7;
}

/* 旧ヘッダの残存要素をリセット・非表示（TOP の main_image は残す） */
body:not(.home) .main_image { display: none !important; }
.header-txt { display: none !important; }
body:not(.home) header { margin-top: 0 !important; }

/* SP/Tablet 共通ヘッダ (max-width: 1279) */
@media only screen and (max-width: 1279px) {
	header#header {
		padding: 20px 0 !important;
		position: sticky;
		top: 0;
		min-height: 40px;
	}
	header#header > div {
		padding: 0 24px !important;
		gap: 12px;
		position: relative !important;   /* v30: 疑似要素の基準を div に */
		min-height: 40px;
		align-items: center !important;
	}
	/* ロゴはハンバーガー内の白いロゴと同じ大きさ (タブレット 38px / スマホ 33px = 幅 200px / 176px 前後) */
	header#header > div > h2 img { height: 38px !important; }
	#header_links > nav { display: none !important; }
	/* 下層 v139: 右サイド SNS はアイコンだけ。20px にし、右端をハンバーガーの「＝」の右端 (右から 24px) にそろえる (common.css の padding-right 8px も消す)。
	   TOP は KV (画面いっぱい) の中央に出し、KV を過ぎたら消す。下層の縦の位置と出し方は subpage-2075.css */
	.header-sns { display: none !important; bottom: auto !important; right: 24px !important; width: auto !important; padding: 0 !important; gap: 16px; align-items: flex-end; transform: translateY(-50%) !important; }
	.header-sns__item img { width: 20px !important; height: 20px !important; }
	.header-sns__divider, .header-sns::after { display: none !important; }
	body.home:not(.hamb-open) .header-sns { display: flex !important; top: 50% !important; transition: opacity .3s, visibility .3s; }
	body.home.scrolled-past-kv .header-sns { opacity: 0; visibility: hidden; }
	/* 下層 v140: TOP はハンバーガーの中の SNS (.hamb-side) と同じ見せ方に。アイコン 20px・間 14px + 白い縦線 50px + 縦書きの FOLLOW US。
	   線と文字はアイコンの下の中央、上下の位置もハンバーガーの中と同じ (見えている範囲の中央) */
	body.home .header-sns { top: 50vh !important; top: 50svh !important; gap: 14px; align-items: center; }
	body.home .header-sns__divider { display: block !important; width: 1px; height: 50px; margin: 10px 0 6px; background: #FFFFFF; opacity: 0.6; box-shadow: none; }
	body.home .header-sns::after { display: block !important; content: "FOLLOW US"; margin-top: 4px; font-size: 10px; letter-spacing: 0.24em; color: #FFFFFF !important; opacity: 0.95; }
	.icon_headermenu { display: block !important; }
}
@media only screen and (max-width: 767px) {
	header#header > div > h2 img { height: 33px !important; }
}
/* Note: .header-cta-group visibility は下の 3段階ブレイクポイントで制御 */
@media only screen and (min-width: 1280px) {
	.icon_headermenu, .icon_headermenu_close { display: none !important; }
	#header_links .smt { display: none !important; }
}

/* ---------- Footer (HAWAII-2075) ---------- */
/* 背景: 地の色 + 紙の汚し (TOP の各セクションと同じ。scss/global/_mixins.scss の bg-dirt。800px の画像を乗算で重ねる) */
footer {
	background: url("/common/img/common/bg_dot.webp") repeat left top / 800px auto, var(--c-footer) !important;
	background-blend-mode: multiply, normal;
	color: var(--c-ground) !important;
	border-top: none !important;
	padding: 144px 0 84px !important;   /* カンプ (1320px) に合わせて */
	font-family: var(--f-sans-jp);
}
/* カンプ: 1320px 幅で中身 1112px (左右 104px)。ロゴの列が残りの幅を取り、リンクの3列は中身の幅 + 間 48px で右端にそろう */
footer > div {
	max-width: 1192px !important;   /* 中身 1112px + 左右 40px */
	padding: 0 40px !important;
	display: grid !important;
	grid-template-columns: 1fr auto auto auto;
	gap: 48px 48px;
	overflow: visible !important;
	margin: 0 auto !important;
}
footer .footer_logo {
	width: auto !important;
	float: none !important;
	text-align: left !important;
}
footer .footer_logo h2 { margin: 0 0 56px; }
footer .footer_logo h2 img {
	width: auto !important;
	max-width: 215px;
	height: auto !important;
	display: block;
	filter: brightness(0) invert(1);
}
/* v2: ロゴ下に罫線 → 下層 v74: 営業時間の下ではなく、店舗名の上に (電話番号・営業時間を罫線の下にまとめる。タブレット・スマホと同じ並び) */
footer .footer_logo .store-name::before {
	content: "";
	display: block;
	width: 88px;
	height: 1px;
	margin: 0 0 66px;
	background: var(--c-ground);
	opacity: 1;
}
footer .footer_logo p {
	color: var(--c-ground);
	margin: 12px 0 !important;
	text-align: left !important;
	line-height: 1.6;
	font-size: 12px;
}
/* v2: 店舗名 */
footer .footer_logo .store-name {
	font-size: 12px;
	color: var(--c-ground);
	margin: 0 0 9px !important;
	letter-spacing: 0.06em;
}
footer .footer_logo p.tc { margin: 0 !important; }
footer .footer_logo p strong.times {
	font-family: var(--f-num) !important;   /* 下層 v74: PC だけ .times の Domaine になっていたので、タブレット・スマホと同じ Fjalla One に */
	font-size: 18px;
	letter-spacing: 0.12em;   /* 字間 2.4px（20px の 0.12em） */
	color: var(--c-ground);
	display: block;
	margin-bottom: 12px;
	font-weight: 400;
}
footer .footer_logo p small {
	display: block;
	font-size: 11px;
	color: var(--c-ground);
	opacity: 0.85;
	line-height: 1.6;
}
/* 下層 v74: 営業時間を曜日ごとに1行 (平　日 11:00～18:00 / 土日祝 10:00～18:00)。曜日は3文字分の幅で両端ぞろえ */
footer .footer_logo p small.footer-hours > span {
	display: block;
	letter-spacing: 0.1em;   /* 字間 SP 2px（20px）/ PC 1.2px（12px） */
}
footer .footer_logo p small.footer-hours > span > em {
	display: inline-block;
	width: 3.3em;   /* 3文字 + 字間 0.1em × 3 */
	margin-right: 1em;
	white-space: nowrap;
	font-style: normal;
	text-align-last: justify;
}

/* Footer nav columns */
footer > div > nav {
	width: auto !important;
	float: none !important;
	padding: 0 !important;
	box-sizing: border-box;
}
footer > div > nav h3 {
	font-family: var(--f-en-sub) !important;
	font-size: 22px !important;   /* 15px → 約 1.5 倍 */
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--c-ground) !important;
	margin: 0 0 4px !important;
	padding-bottom: 0;
	border-bottom: none;  /* v2: 罫線削除 */
	font-weight: 400 !important;
}
/* v2: h3 の中の small (日本語サブ) */
footer > div > nav h3 small {
	display: block;
	font-family: var(--f-sans-jp);
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--c-ground);
	opacity: 0.85;
	margin-top: 0;
	font-weight: 400;
}
/* PC: 英字見出しと日本語 (br の後の small) の間 */
@media only screen and (min-width: 1280px) {
	footer > div > nav h3 br + small { margin-top: 0.5em; }
}
footer > div > nav h3:not(:first-of-type) {
	margin-top: 56px !important;
}
footer > div > nav div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 22px;
}
footer > div > nav a {
	background: none !important;
	padding: 0 !important;
	color: var(--c-ground) !important;
	font-family: var(--f-sans-jp) !important;
	font-size: 11px !important;   /* PC。タブレット・SP は下のメディアクエリで上書き */
	line-height: 1.6 !important;
	display: block !important;
	text-decoration: none;
}
footer > div > nav a:hover {
	color: var(--c-ground) !important;
	opacity: 0.7;
}
footer > div > nav a small {
	opacity: 0.8;
	font-size: 10.5px;
}
/* 別ウィンドウで開くリンク (個人情報保護方針・採用・プレスリリース) に外部リンクマーク。文字の大きさに合わせて拡縮 */
footer > div > nav a[target="_blank"]::after {
	content: "";
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0.4em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M5 2H1.5v8.5H10V7'/%3E%3Cpath d='M7 1h4v4M11 1 5.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M5 2H1.5v8.5H10V7'/%3E%3Cpath d='M7 1h4v4M11 1 5.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
footer > div > nav.company {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
footer > div > nav.company a { padding: 0 !important; }

/* Copyright */
address {
	background: url("/common/img/common/bg_dot.webp") repeat left top / 800px auto, var(--c-footer) !important;   /* フッターと同じ汚し */
	background-blend-mode: multiply, normal;
	color: var(--c-ground) !important;
	/* 背景は左右いっぱい。文字はフッターの中身 (1112px) の左端 (= ロゴと同じ位置) */
	position: relative;
	padding: 27px max(40px, calc((100% - 1192px) / 2)) 111px !important;   /* footer > div は content-box なので中身は 1192px */
	font-family: var(--f-en-sub);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;  /* v2: 左寄せ */
	line-height: 1.4;
	border-top: none !important;
	font-style: normal;
	opacity: 1;
	margin: 0 auto !important;  /* v3: 隙間削除 */
}
/* 上の罫線はフッターの中身の幅だけ (カンプ。元は左右いっぱいの border-top) */
address::before {
	content: "";
	position: absolute;
	top: 0;
	left: max(40px, calc((100% - 1192px) / 2));
	right: max(40px, calc((100% - 1192px) / 2));
	border-top: 0.5px solid rgba(255,255,255,0.5);   /* v3: 白 0.5px */
}
address .pc { display: inline; }

/* v33: SP/Tablet フッター 大改修 (akiko 指定通り) */
@media only screen and (max-width: 1279px) {
	footer {
		padding: 170px 0 60px !important;   /* v43: bottom 60 → footer 内に余白を持たせて白ギャップ解消 */
	}
	footer > div {
		display: block !important;
		grid-template-columns: unset !important;
		padding: 0 50px !important;       /* 左右50px */
		gap: 0 !important;
		max-width: none !important;
	}

	/* ロゴブロック */
	footer .footer_logo {
		grid-column: unset !important;
		margin: 0 !important;
	}
	footer .footer_logo h2 {
		margin: 0 0 100px !important;   /* ロゴ下 100px */
	}
	footer .footer_logo h2 img {
		width: 60vw !important;
		max-width: 340px !important;
		min-width: 200px;
	}
	/* 旧40px罫線を強制非表示 */
	footer .footer_logo::after,
	footer .footer_logo:after {
		display: none !important;
		content: none !important;
	}

	/* 100px 幅 1px 白 罫線 (ロゴ下 → store-name の直前) */
	footer .footer_logo .store-name {
		position: relative;
		padding-top: 40px !important;    /* 罫線から text までの余白 */
		font-family: var(--f-sans-jp) !important;
		font-weight: 400 !important;
		font-size: 24px !important;
		letter-spacing: 0.04em !important;
		margin: 0 0 20px 0 !important;
		color: #FFFFFF !important;
		line-height: 1.4 !important;
	}
	footer .footer_logo .store-name::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100px;
		height: 1px;
		background: #FFFFFF;
		opacity: 1;
	}

	/* 電話番号 */
	footer .footer_logo p.tc { margin: 0 !important; padding: 0 !important; }
	footer .footer_logo p.tc strong.times {
		font-family: var(--f-num) !important;
		font-weight: 400 !important;
		font-size: 34px !important;
		letter-spacing: 0.12em !important;   /* 字間 4.08px（34px の 0.12em） */
		display: block;
		margin: 0 0 50px 0 !important;
		color: #FFFFFF !important;
		line-height: 1.2 !important;
	}
	/* 営業時間 */
	footer .footer_logo p.tc small {
		font-family: var(--f-sans-jp) !important;
		font-weight: 400 !important;
		font-size: 20px !important;
		line-height: 34px !important;
		display: block;
		margin: 0 0 150px 0 !important;
		opacity: 1 !important;
		color: #FFFFFF !important;
	}

	/* nav (アコーディオン) */
	footer > div > nav {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
	}
	footer > div > nav h3 {
		position: relative;
		font-family: var(--f-en-sub) !important;
		font-weight: 400 !important;
		font-size: 24px !important;
		letter-spacing: 0.08em !important;
		color: #FFFFFF !important;
		text-align: left !important;              /* v42: common.css の center を打消し */
		margin: 0 0 60px 0 !important;
		padding: 0 40px 24px 0 !important;
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom: 1px solid #FFFFFF !important;
		cursor: pointer;
		background: none !important;
	}
	footer > div > nav h3:not(:first-of-type) { margin-top: 0 !important; }   /* v42: 明示 */
	footer > div > nav h3:not(:first-of-type) { margin-top: 0 !important; }
	/* v43: COMPANY 下は 0 に (footer padding-bottom で余白確保・白ギャップ防止) */
	footer > div > nav:last-child h3:last-of-type { margin-bottom: 0 !important; }
	footer > div > nav h3 small {
		display: inline-block !important;
		font-family: var(--f-sans-jp) !important;
		font-weight: 500 !important;
		font-size: 20px !important;              /* v35: JP は 20px (英 24px と対比) */
		letter-spacing: 0.04em !important;
		text-transform: none !important;
		margin: 0 0 0 16px !important;
		opacity: 1 !important;
		color: #FFFFFF !important;
		line-height: 1 !important;
		vertical-align: baseline !important;
	}
	footer > div > nav h3 br { display: none !important; }
	/* common.css の ▼ アイコンを消す */
	footer > div > nav h3::before {
		content: none !important;
		display: none !important;
	}
	/* + アイコン (自前)。下層 v57: 文字 (Fjalla One の + / −) だと小さく太いので、デザインどおり細い線で描く */
	footer > div > nav h3::after {
		content: "" !important;
		position: absolute !important;
		right: 0 !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		width: 18px !important;
		height: 18px !important;
		background:
			linear-gradient(#FFFFFF, #FFFFFF) center / 100% 1px no-repeat,
			linear-gradient(#FFFFFF, #FFFFFF) center / 1px 100% no-repeat !important;
	}
	footer > div > nav h3.on::after {   /* − (open state) */
		content: "" !important;
		background: linear-gradient(#FFFFFF, #FFFFFF) center / 100% 1px no-repeat !important;
	}

	/* アコーディオン中身 (v37: mockup 40/80 → real 20/40) */
	footer > div > nav > div {
		display: none;
		padding: 20px 0 0 !important;
		margin: 0 0 40px 0 !important;
		gap: 0 !important;
		border: none !important;
	}
	footer > div > nav > div a {
		font-family: var(--f-sans-jp) !important;
		font-weight: 400 !important;
		font-size: 22px !important;
		line-height: 48px !important;
		color: #FFFFFF !important;
		padding: 0 !important;
	}
	/* 開いた h3 の下余白はキャンセル (次の要素は div ですぐ続く) */
	footer > div > nav h3.on { margin-bottom: 0 !important; }

	/* Copyright */
	address {
		background: url("/common/img/common/bg_dot.webp") repeat left top / 800px auto, var(--c-footer) !important;   /* フッターと同じ汚し */
		border: none !important;
		padding: 0 50px 120px !important;
		font-family: var(--f-num) !important;
		font-size: 16px !important;
		letter-spacing: 0.04em !important;
		color: #FFFFFF !important;
		max-width: none !important;
		text-align: left !important;
	}
	address .pc { display: none; }   /* SP では "Copyright " 部分不要 */
	address::before { content: none; }   /* 上の罫線は PC だけ */

	/* v41: html/body の背景を通常の白に戻す (akiko '全体の背景グレー → 白' 対応)
	   footer 自身は元々 var(--c-footer) 背景なので影響なし
	   ブラウザ最下部の余白は footer 下ぎりぎりまでで OK */
	html { background: #FFFFFF !important; }
	body { background: #FFFFFF !important; }
}

/* v37: Tablet (600-1279) はイラレ mockup 値そのままだと大きいので約72%にダウンスケール
   → 下層 v57: まだ大きいので、さらに全体を約 90% に (72% × 0.9 ≒ 65%) */
@media only screen and (min-width: 600px) and (max-width: 1279px) {
	footer { padding: 110px 0 39px !important; }
	footer > div { padding: 0 32px !important; }

	footer .footer_logo h2 { margin: 0 0 65px !important; }
	footer .footer_logo h2 img {
		width: 50vw !important;
		max-width: 220px !important;
	}
	footer .footer_logo .store-name {
		padding-top: 26px !important;
		font-size: 15px !important;
		margin: 0 0 13px 0 !important;
	}
	footer .footer_logo .store-name::before { width: 65px !important; }
	footer .footer_logo p.tc strong.times {
		font-size: 22px !important;
		margin: 0 0 32px 0 !important;
	}
	footer .footer_logo p.tc small {
		font-size: 13px !important;
		line-height: 22px !important;
		margin: 0 0 97px 0 !important;
	}
	footer > div > nav h3 {
		font-size: 15px !important;
		padding: 0 25px 15px 0 !important;
		margin: 0 0 39px 0 !important;
	}
	footer > div > nav h3 small {
		font-size: 13px !important;
		margin: 0 0 0 11px !important;
	}
	/* ＋ の下端を日本語 (small) の文字の下のライン (ベースライン) にそろえる = h3 の padding-bottom 15px + ディセンダー分 3px */
	footer > div > nav h3::after {
		width: 18px !important;
		height: 18px !important;
		top: auto !important;
		bottom: 18px !important;
		transform: none !important;
	}
	footer > div > nav:last-child h3:last-of-type {
		margin-bottom: 0 !important;   /* v43: footer padding で余白確保 */
	}
	footer > div > nav > div {
		padding: 18px 0 0 !important;
		margin: 0 0 36px 0 !important;
	}
	footer > div > nav > div a {
		font-size: 14px !important;
		line-height: 31px !important;
	}
	address {
		padding: 0 32px 77px !important;
		font-size: 11px !important;
	}
}

/* HAWAII-1989 の SP 下部固定バー用に common.css (800px 以下) が body に付けている下余白 50px を消す。
   バーは新しいフッターにないので、コピーライトの下に白い帯が出ていた */
@media screen and (max-width: 800px) {
	body { padding-bottom: 0 !important; }
}

/* v36: 純SP (<=599px) は akiko 指定 px の約 55% で描画 (2x 相当のイラレ mockup 対応)
   余白はカンプ (750px・実寸はその半分) に合わせて調整。文字の大きさはそのまま */
@media only screen and (max-width: 599px) {
	footer { padding: 91px 0 64px !important; }
	footer > div { padding: 0 30px !important; }

	footer .footer_logo h2 { margin: 0 0 51px !important; }
	footer .footer_logo h2 img {
		width: 60vw !important;
		max-width: 45.3333vw !important;   /* カンプ 750px で 340px */
		min-width: 0 !important;
	}
	footer .footer_logo .store-name {
		padding-top: 57px !important;
		font-size: 14px !important;
		font-weight: 400 !important;
		margin: 0 0 8px 0 !important;
	}
	footer .footer_logo .store-name::before {
		width: 52px !important;
	}
	footer .footer_logo p.tc strong.times {
		font-size: 20px !important;
		margin: 0 0 18px 0 !important;
	}
	footer .footer_logo p.tc small {
		font-size: 12px !important;
		line-height: 20px !important;
		margin: 0 0 73px 0 !important;
	}
	footer > div > nav h3 {
		font-size: 4.5333vw !important;   /* カンプ 750px で 34px */
		padding: 0 24px 10px 0 !important;
		margin: 0 0 30px 0 !important;
	}
	footer > div > nav h3 small {
		font-size: 3.0667vw !important;   /* カンプ 750px で 23px */
		margin: 0 0 0 16px !important;
	}
	/* ＋ の下端を日本語 (small) の文字の下のライン (ベースライン) にそろえる = h3 の padding-bottom 10px + ディセンダー分 3px */
	footer > div > nav h3::after {
		width: 12px !important;
		height: 12px !important;
		top: auto !important;
		bottom: 13px !important;
		transform: none !important;
	}
	footer > div > nav:last-child h3:last-of-type {
		margin-bottom: 0 !important;   /* v43: footer padding で余白確保 */
	}
	footer > div > nav > div {
		padding: 14px 0 0 !important;
		margin: 0 0 36px 0 !important;
	}
	footer > div > nav > div a {
		font-size: 12px !important;
		line-height: 24px !important;
	}
	address {
		padding: 0 30px 62px !important;
		font-size: 10px !important;
	}
}

/* Body base */
body {
	font-family: var(--f-sans-jp);
	color: var(--c-text);
	background: var(--c-ground);
}

/* Common heading text — .mincho reuse */
.mincho {
	font-family: var(--f-serif-jp) !important;
}

/* Numbers (prices, dates) — Fjalla One */
.num, .price-num, .tel_num {
	font-family: var(--f-num) !important;
	font-variant-numeric: tabular-nums;
}

/* ============================================================
   HAWAII-2075 Step 1 v2 追記
   ---------------------------------------------------------
   下層ページの KV / パンくず / 見出し / ボタン スタイル
   SP フッター アコーディオン
   ============================================================ */

/* ---------- 下層ページ KV (placeholder) ---------- */
body:not(.home) .subpage-kv {
	display: block;
	width: 100%;
	height: 340px;
	background: #C8C8C8 center/cover no-repeat;
	position: relative;
}
@media only screen and (max-width: 1279px) {
	body:not(.home) .subpage-kv { height: 200px; }
}
/* 画像は 2560x680 / 被写体は中央 50%x50% 内 (FTP 配置: /common/img/subpage-kv/) */
body:not(.home) .subpage-kv--wedding { background-image: url('/common/img/subpage-kv/img_wedding.jpg'); }
body:not(.home) .subpage-kv--photo   { background-image: url('/common/img/subpage-kv/img_photo.jpg'); }
body:not(.home) .subpage-kv--option  { background-image: url('/common/img/subpage-kv/img_option.jpg'); }
body:not(.home) .subpage-kv--price   { background-image: url('/common/img/subpage-kv/img_price.jpg'); }
body:not(.home) .subpage-kv--salon   { background-image: url('/common/img/subpage-kv/img_salon.jpg'); }
body:not(.home) .subpage-kv--service { background-image: url('/common/img/subpage-kv/img_service.jpg'); }
body:not(.home) .subpage-kv--flow    { background-image: url('/common/img/subpage-kv/img_flow.jpg'); }

/* ---------- パンくず ---------- */
.pankuzu, .breadcrumb-2075 {
	padding: 30px 40px 12px !important;
	background: var(--c-ground) !important;
	font-size: 10px !important;
	font-family: var(--f-sans-jp) !important;
	color: var(--c-text-warm) !important;
	max-width: 1360px;
	margin: 0 auto !important;
	line-height: 1.6;
}
.pankuzu p, .pankuzu a, .breadcrumb-2075 a {
	font-size: 10px !important;
	color: var(--c-text-warm) !important;
	text-decoration: none;
}
.pankuzu a, .breadcrumb-2075 a { color: #A5B1B4 !important; }
.pankuzu a:hover { opacity: 0.7; }
/* 本文 (1000px) より左右 57px 外に出す (デザイン: 1320px 幅で左 103px) */
.pankuzu p { max-width: 1114px; }
@media only screen and (max-width: 1279px) {
	.pankuzu, .breadcrumb-2075 { padding: 16px 16px 10px !important; }
}

/* ---------- セクション見出し (大 Domaine 55px + JP 12px Noto) ---------- */
.h-section-2075 {
	text-align: center;
	margin: 60px 0 40px;
}
.h-section-2075 .en {
	font-family: var(--f-en-main);
	font-weight: 500;
	font-size: 55px;
	letter-spacing: 0.04em;
	color: var(--c-text);
	line-height: 1.1;
	margin: 0 0 10px;
	display: block;
}
.h-section-2075 .jp {
	font-family: var(--f-sans-jp);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--c-text);
	display: block;
}
@media only screen and (max-width: 1279px) {
	.h-section-2075 { margin: 40px 0 24px; }
	.h-section-2075 .en { font-size: 36px; }
	.h-section-2075 .jp { font-size: 10.5px; }
}

/* ---------- 小見出し (Noto 14px bold + 左アクセントバー) ---------- */
.h-sub-2075 {
	font-family: var(--f-sans-jp);
	font-size: 14px;
	font-weight: 700;
	color: var(--c-text);
	padding-left: 12px;
	border-left: 3px solid var(--c-accent);
	line-height: 1.4;
	margin: 24px 0 12px;
}

/* ---------- 本文 (Noto 12px regular) ---------- */
.txt-2075, .body-2075 {
	font-family: var(--f-sans-jp);
	font-size: 12px;
	font-weight: 400;
	color: var(--c-text);
	line-height: 1.8;
}

/* ---------- ボタン (100% wide, 44px, #B9C7C6 bg, white text) ---------- */
.btn-2075 {
	display: block;
	width: 100%;
	height: 44px;
	line-height: 44px;
	background: var(--c-footer);
	color: var(--c-ground);
	font-family: var(--f-sans-jp);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 0;
	transition: opacity .2s;
}
.btn-2075:hover { opacity: 0.85; color: var(--c-ground); }

/* ---------- PC 右サイド SNS + STAY WITH US 位置調整 ---------- */
@media only screen and (min-width: 1280px) {
	.header-sns {
		bottom: auto !important;
		top: 50% !important;      /* ブラウザの天地中央 (下層は subpage-2075.css で KV の中央に上書き) */
		transform: translateY(-50%) !important;
		right: 24px !important;
	}
}

/* HAWAII-2075 v3: page-top 矢印を非表示 (デザインに含まない) */
#page-top { display: none !important; }
.pagetop-arrow { display: none !important; }

/* ============================================================
   HAWAII-2075 v3.5: SP ハンバーガー デザイン
   ============================================================ */

/* PC では nav 内の <small> (日本語サブ) を非表示 */
@media only screen and (min-width: 1280px) {
	#header_links > nav > a > small { display: none !important; }
}

/* PC グロナビ: hover で英字 (span) がふわっと消えて、日本語 (em.gnav-ja / header.tpl) がふわっと出る
   英字と日本語を grid の同じセルに重ねて、左右・天地とも中央ぞろえ
   Fjalla One は箱の中で文字が 3〜4px 上に寄って見える (下層 v60 のメモ) ので、日本語も 3px 上げて英字の文字の中心に合わせる
   a 全体を薄くする hover (opacity: 0.6) は PC では使わない */
.gnav-ja { display: none; }
@media only screen and (min-width: 1280px) {
	#header_links > nav > a {
		display: grid !important;
		align-items: center;
		justify-items: center;
	}
	#header_links > nav > a:hover { opacity: 1; }
	#header_links > nav > a > span,
	#header_links > nav > a > .gnav-ja {
		grid-area: 1 / 1;
		transition: opacity .4s ease, transform .4s ease;
	}
	#header_links > nav > a > .gnav-ja {
		margin: -8px 0;   /* line-height 28px の上下の余り (8px ずつ) で a (= ヘッダー) が高くならないように */
		width: 0;         /* 日本語の方が長くても a の幅 (= ナビの間隔) は英字のまま。文字は左右に均等にはみ出して表示 */
		display: flex !important;
		justify-content: center;
		transform: translateY(3px);
		opacity: 0;
		font-family: var(--f-sans-jp);
		font-size: 11px;
		font-style: normal;
		letter-spacing: 1.1px;
		line-height: 28px;
		white-space: nowrap;
		pointer-events: none;
	}
	#header_links > nav > a:hover > span {
		opacity: 0;
		transform: translateY(-6px);
	}
	#header_links > nav > a:hover > .gnav-ja {
		opacity: 1;
		transform: translateY(-3px);
	}
}

/* SP ハンバーガー オーバーレイ */
@media only screen and (max-width: 1279px) {
	#header_links {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		max-height: 100vh !important;
		background: rgba(185, 199, 198, 0.95) !important;   /* v43: グレーグリーン (元 v33 の色) */
		z-index: 9999 !important;
		overflow-y: auto !important;
		padding: 24px 24px 40px 24px !important;
		box-sizing: border-box !important;
		display: none !important;   /* v27: common.js の resize inline display:block を打消し */
	}
	/* v27: body.hamb-open のとき表示 */
	body.hamb-open #header_links {
		display: block !important;
	}

	/* SP ハンバーガー内 header 部（ロゴ + 閉じるボタン） */
	#header_links > div.smt {
		display: flex !important;
		justify-content: space-between;
		align-items: flex-start;
		padding: 0 0 100px 0 !important;   /* v5: ロゴ下 100px 余白 */
		background: none !important;
		border: none !important;
	}
	#header_links > div.smt a.logo img {
		width: auto !important;
		max-width: none;
		height: 38px !important;             /* 閉じている時のヘッダーのロゴと同じ大きさ (元は幅 45vw・最大 200px) */
		margin-top: -3px;                    /* ヘッダーのロゴと同じ高さ位置 (ヘッダー 80px の上下中央) */
		filter: brightness(0) invert(1);     /* v43: グレー背景 → 白ロゴ */
	}
	@media only screen and (max-width: 767px) {
		#header_links > div.smt a.logo img { height: 33px !important; margin-top: -0.5px; }
	}
	/* v20: 閉じるボタンを − (1本線) に */
	#header_links > div.smt {
		position: relative;
	}
	#header_links > div.smt .icon_headermenu_close {
		/* v40: common.css の top: 50% + transform を強制的に打ち消して visual "-" 線に重ねる */
		position: absolute !important;
		top: -8px !important;                /* 開くボタン (ヘッダー右上の ＝) と同じ位置 (中心: 右から 36px・上から 40px) */
		right: -12px !important;
		left: auto !important;
		bottom: auto !important;
		width: 48px !important;
		height: 48px !important;
		max-width: none !important;
		transform: none !important;
		-webkit-transform: none !important;
		opacity: 0 !important;
		cursor: pointer;
		filter: none !important;
		z-index: 10;
		pointer-events: auto !important;
	}
	#header_links > div.smt::before { content: none !important; display: none !important; }
	#header_links > div.smt:not(.bottom)::after {
		content: "";
		position: absolute;
		right: 0;                            /* 開くボタンの ＝ と同じ位置 (元は右 16px・下 9px ずれていた) */
		top: 15px;
		width: 24px;
		height: 1.5px;
		background: #FFFFFF;                 /* v43: グレー背景 → 白線 */
		pointer-events: none;
	}

	/* nav リスト (v44: justify-content: flex-end を打ち消す) */
	#header_links > nav {
		display: flex !important;
		flex-direction: column !important;
		gap: 16px !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;   /* v44: base の flex-end 打消し */
		background: none !important;
		padding: 0 !important;
		width: calc(100% - 60px);
	}
	#header_links > nav > a {
		display: block !important;
		height: auto !important;    /* common.css の PC ナビ用 height:20px (891px 以上) で項目が重なるのを防ぐ */
		min-height: 50px;           /* スマホ (common.css の height:50px) と同じ間隔に */
		background: none !important;
		padding: 0 !important;
		border: none !important;
		width: 100%;
		text-align: left !important;             /* v44: center 打消し */
	}
	#header_links > nav > a > span {
		display: block !important;
		font-family: var(--f-en-sub) !important;
		font-size: 22px !important;
		letter-spacing: 0.25em !important;
		text-transform: uppercase;
		color: #FFFFFF !important;                 /* v43: グレー背景 → 白 */
		-webkit-text-fill-color: #FFFFFF !important;
		line-height: 1 !important;
		margin-bottom: 4px;
		padding: 0 !important;
	}
	#header_links > nav > a > small {
		display: block !important;
		font-family: var(--f-sans-jp) !important;
		font-size: 11px !important;
		color: #FFFFFF !important;                 /* v43: グレー背景 → 白 */
		-webkit-text-fill-color: #FFFFFF !important;
		opacity: 0.95;
		letter-spacing: 0.04em;
		font-weight: 400;
	}
	#header_links > nav > a:hover > span,
	#header_links > nav > a:hover > small { opacity: 0.7; }

	/* SP bottom (CTA + SNS) */
	#header_links > div.smt.bottom {
		display: block !important;
		padding: 32px 0 20px !important;
		background: none !important;
		border: none !important;
	}

	.hamb-cta-group {
		display: flex;
		gap: 10px;
		margin-top: 32px;
	}
	.hamb-cta {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 44px;
		background: var(--c-ground);              /* v43: 白ピル */
		color: var(--c-accent);
		border-radius: 999px;
		font-family: var(--f-sans-jp);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.06em;
		text-decoration: none;
	}
	.hamb-cta:hover { opacity: 0.85; color: var(--c-accent); }

	/* 右サイド SNS + FOLLOW US */
	.hamb-side {
		position: fixed;
		top: 50%;
		right: 24px;   /* 下層 v140: 20px → 24px (ハンバーガーの「＝」・閉じる前の右サイド SNS と右端をそろえる) */
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		z-index: 210;
	}
	.hamb-side__sns {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
	.hamb-side__sns-item img {
		width: 20px;
		height: 20px;
		display: block;
		filter: brightness(0) invert(1);           /* v43: グレー背景 → 白 */
		opacity: 0.95;
	}
	.hamb-side__label {
		writing-mode: vertical-rl;
		font-family: var(--f-en-sub);
		font-size: 10px;
		letter-spacing: 0.24em;
		color: #FFFFFF;                            /* v43: グレー背景 → 白 */
		opacity: 0.95;
		margin-top: 4px;
	}

	.hamb-holiday-notice {
		background: rgba(255,255,255,0.6);
		padding: 10px 14px;
		font-family: var(--f-sans-jp);
		font-size: 12px;
		letter-spacing: 0.05em;
		color: var(--c-text);
		margin-top: 20px;
		border-radius: 0;   /* 下層 v74: 角丸なし */
	}

	/* 開く・閉じるボタンの画像はファイル名に _smt を含むため、common.css の
   img[src*="_smt"] { display:none !important } (891px 以上) で消されてしまう → より強い指定で表示 */
@media only screen and (max-width: 1279px) {
	header#header img.icon_headermenu,
	#header_links img.icon_headermenu_close { display: block !important; }
}

/* v28: ハンバーガーボタン ("=") をヘッダー右上に CSS で描画 */
	header#header {
		position: sticky !important;
	}
	.icon_headermenu {
		display: block !important;
		width: 40px !important;
		height: 40px !important;
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		right: 24px;
		z-index: 210;
		opacity: 0 !important;  /* 元の img を透明化 (クリック領域として残す) */
		cursor: pointer;
	}
	/* CSS で "=" 描画 */
	header#header > div::before,
	header#header > div::after {
		content: "";
		position: absolute;
		right: 24px;
		width: 24px;
		height: 1.5px;
		background: currentColor;
		z-index: 205;
		pointer-events: none;
	}
	header#header > div::before { top: calc(50% - 4px); }
	header#header > div::after  { top: calc(50% + 2px); }
	/* TOP の KV 上 (スクロール前): 白 */
	body.home:not(.scrolled-past-kv) header#header > div::before,
	body.home:not(.scrolled-past-kv) header#header > div::after {
		background: #FFFFFF;
	}
	/* TOP のスクロール後 or 下層 (ヘッダー白背景): 黒 */
	body.scrolled-past-kv header#header > div::before,
	body.scrolled-past-kv header#header > div::after,
	body:not(.home) header#header > div::before,
	body:not(.home) header#header > div::after {
		background: #000000;
	}
	/* ハンバーガー open 時は非表示 (中の閉じるボタンを使う) */
	body.hamb-open header#header > div::before,
	body.hamb-open header#header > div::after {
		display: none;
	}
}

/* SP: ヘッダーは固定せずスクロールで流す。ハンバーガー (img のクリック領域 + "=" の線) だけ画面右上に固定
   位置はヘッダー 80px の上下中央 (上から 40px・右から 36px) のまま */
@media only screen and (max-width: 767px) {
	html body header#header {
		position: relative !important;
	}
	/* 白背景・下線なし (下層 / TOP の KV 通過後)。後ろにある body.home.scrolled-past-kv header#header 等に勝つよう #header を重ねて詳細度を上げる */
	html body:not(.home) header#header#header,
	html body.home.scrolled-past-kv header#header#header {
		background: none !important;
		border-bottom: none !important;
	}
	header#header .icon_headermenu {
		position: fixed !important;
		top: 40px !important;
	}
	header#header > div::before,
	header#header > div::after {
		position: fixed;
	}
	header#header > div::before { top: 36px; }
	header#header > div::after  { top: 42px; }
}

/* SP: ハンバーガーを開いた時、iPhone SE (Safari の表示領域 約 548px) でもメニューがスクロールなしで収まるように
   ロゴ・閉じるボタン (.smt の上 24px) はそのまま。.smt より下の残りの高さを
   「.smt と nav の間 1 : nav の項目の間 3 : .smt.bottom の下 2」で配分 (縦の flex。上下の余白は ::before / ::after)
   入りきらない時は余白が最小 (上 8px・下 4px) になってスクロール
   余白・文字は画面の高さに合わせて縮める (背の高い端末ほど元の値に近づく)。dvh 非対応の古いブラウザは vh の指定で同じ計算 */
@media only screen and (max-width: 767px) {
	#header_links {
		height: 100vh !important;
		height: 100dvh !important;           /* iOS Safari のツールバーで下が隠れないように */
		max-height: none !important;
		padding-bottom: env(safe-area-inset-bottom, 0px) !important;
	}
	body.hamb-open #header_links {
		display: flex !important;
		flex-direction: column;
		justify-content: flex-start !important;
		align-items: stretch !important;     /* PC 用の flex-end / center が残ると右に寄る */
	}
	#header_links > * { flex-shrink: 0; }
	#header_links::before,
	#header_links::after { content: ""; flex-shrink: 0; }
	#header_links > div.smt:not(.bottom) { order: 1; padding-bottom: 0 !important; }   /* ロゴ下の余白 (元 100px) は ::before に任せる */
	#header_links::before { order: 2; flex: 1 0 8px; }
	#header_links > nav { order: 3; flex: 3 0 auto; justify-content: space-between !important; }   /* 伸びた分は項目の間に */
	#header_links > div.smt.bottom { order: 4; }
	#header_links::after { order: 5; flex: 2 0 4px; }
	/* ナビ (元 項目の高さ 50px・間隔 16px・英字 22px) */
	#header_links > nav {
		/* 左端をロゴ (.smt) とそろえる (TOP: 以前は margin-left: 10vw で少し内側に寄せていた) */
		width: max-content;
		align-self: flex-start;
		margin: 0 !important;   /* common.css の margin: auto !important を打ち消す */
		overflow: visible !important;   /* common.css (890px 以下) の overflow: hidden で長い項目の最後の文字が切れていた */
		gap: clamp(14px, 3.2vh - 4px, 28px) !important;
		gap: clamp(14px, 3.2dvh - 4px, 28px) !important;
	}
	#header_links > nav > a { min-height: 0; }
	#header_links > nav > a > span {
		font-size: clamp(18px, 3.4vh, 22px) !important;
		font-size: clamp(18px, 3.4dvh, 22px) !important;
		margin-bottom: 3px;
	}
	#header_links > nav > a > small { line-height: 1.4; white-space: nowrap; }
	/* 右の SNS: ブラウザのツールバーが出ている時の見えている範囲の天地中央に。dvh だとツールバーの出入りで動くので svh で固定
	   (KV のロゴ .kv-top-svg-2075 と同じ) */
	.hamb-side {
		top: 50vh;    /* svh 非対応ブラウザ用 */
		top: 50svh;
	}
	/* ボタンまわり (元 上 32px + 32px・下 20px) */
	#header_links > div.smt.bottom {
		padding: clamp(8px, 4vh - 12px, 32px) 0 0 !important;
		padding: clamp(8px, 4dvh - 12px, 32px) 0 0 !important;
	}
	.hamb-cta-group { margin-top: 0; }
	.hamb-holiday-notice {
		margin-top: 12px;
		padding: 8px 14px;
		line-height: 1.5;
		font-size: 11px;   /* 12px → 11px */
		border: 1px solid rgba(255, 255, 255, 0.6);   /* 白枠 (60%)・背景なし・白文字 */
		background: none;
		color: #FFFFFF;
	}
}


/* ============================================================
   HAWAII-2075 v4: 色抜け対策 + アコーディオン確実 close
   ============================================================ */

/* footer h3 テキスト色を強制 */
footer > div > nav h3,
footer > div > nav h3 *,
footer > div > nav h3 small,
footer > div > nav h3 br + * {
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	background: none !important;
	background-image: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
}
footer > div > nav h3:after {
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
}

/* v7: v4 の display: none 上書きを削除 (slideToggle と競合するため) */


/* HAWAII-2075 v5: ハンバーガー open 時に本体ヘッダーを非表示 */
body.hamb-open header#header > div > h2,
body.hamb-open header#header > .header-cta-group,
body.hamb-open header#header > div > .header-cta-group {
	visibility: hidden !important;
}
body.hamb-open .header-sns { display: none !important; }


/* ============================================================
   HAWAII-2075 v6: 追加調整
   - フッター h3 ▼ 三角削除
   - FOLLOW US / STAY WITH US 上に 50px 白 罫線
   - 右サイド SNS: KV 上は白、スクロール後は黒
   ============================================================ */

/* 既存 common.css の footer h3:before ▼ を打ち消し */
footer > div > nav h3:before {
	content: none !important;
	display: none !important;
	background: none !important;
}

/* SP ハンバーガー: 罫線 50px 白 */
.hamb-side__divider {
	display: block;
	width: 1px;
	height: 50px;
	background: #FFFFFF;
	opacity: 0.6;
	margin: 8px 0 4px;
}

/* PC 右サイド SNS: 罫線 */
.header-sns__divider {
	display: block;
	width: 1px;
	height: 60px;
	margin: 9px auto 4px;
	background: currentColor;
	opacity: 0.6;
}

/* STAY WITH US を疑似要素→通常要素で扱えるように既存 :after 位置調整 */
.header-sns {
	color: #000000;  /* デフォルト: KV なしページ → 黒 */
}
.header-sns__item img {
	filter: brightness(0);           /* v6: KV なしは黒 */
	opacity: 0.75;
}

/* KV (main_image) がある下層ページ・トップページで、上部スクロール前は白 */
body.home .header-sns,
body:not(.home) .header-sns {
	/* デフォルト状態 */
}
body.home .header-sns__item img,
body.has-kv .header-sns__item img {
	filter: brightness(0) invert(1);  /* KV 上: 白 */
}
body.home .header-sns,
body.has-kv .header-sns {
	color: #FFFFFF;
}

/* スクロール後は黒に戻す (JS で body.scrolled-past-kv 付与)。
   下層 v58: アイコンの中心が KV の外に出た時点でも黒に (body.sns-past-kv / footer.tpl) */
body.scrolled-past-kv .header-sns__item img,
body.sns-past-kv .header-sns__item img {
	filter: brightness(0) !important;
}
body.scrolled-past-kv .header-sns,
body.sns-past-kv .header-sns {
	color: #000000 !important;
}

/* STAY WITH US 疑似要素の色を currentColor で追従 */
.header-sns:after {
	color: currentColor !important;
}


/* ============================================================
   HAWAII-2075 v12: 固定 support ボタン (質問する)
   ============================================================ */
.fixed-support-2075 {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 500;
	display: block;
	width: 72px;
	height: 72px;
	background: transparent;
	transition: transform .2s;
}
.fixed-support-2075:hover { transform: scale(1.05); }
.fixed-support-2075 img {
	width: 100%;
	height: 100%;
	display: block;
}
@media only screen and (max-width: 1279px) {
	.fixed-support-2075 {
		width: 56px;
		height: 56px;
		bottom: 16px;
		right: 16px;
	}
}
/* SP ハンバーガー open 時は非表示 */
body.hamb-open .fixed-support-2075 { display: none !important; }

/* ============================================================
   HAWAII-2075 v12: TOP KV フルスクリーン + SVG + SCROLL LABEL
   ============================================================ */
body.home .main_image.top {
	position: relative !important;
	height: 100vh !important;
	max-height: 100vh !important;
	width: 100% !important;
	overflow: hidden !important;
	margin: 0 !important;
}

/* KV 中央の SVG ロゴ */
.kv-top-svg-2075 {
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	right: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	transform: translateY(-50%) !important;   /* v21: left+right+auto で確実に中央、影削除 */
	width: 40vw !important;
	max-width: 720px !important;
	height: auto !important;
	z-index: 10;
	filter: brightness(0) invert(1);
	pointer-events: none;
}
@media only screen and (max-width: 1279px) {
	.kv-top-svg-2075 {
		width: 65vw !important;
		max-width: 380px !important;
		/* ブラウザのツールバーを除いた「見えている範囲」の天地中央に。
		   KV は 100vh (ツールバーを引っ込めた時の高さ) なので 50% だと下にずれる → svh (ツールバーが出ている時の高さ) を使う。
		   dvh だとスクロールでツールバーが出入りするたびに動くので、固定の svh に。ツールバーを引っ込めた時は少し上寄りになる。
		   KV は画面上端から始まる (top.css で margin-top: -80px = ヘッダー分) ので補正なし */
		top: 50vh !important;    /* svh 非対応ブラウザ用 */
		top: 50svh !important;
	}
}

/* SCROLL TO WEB SITE ラベル (左下、縦書き) */
.kv-scroll-2075 {
	position: absolute;
	bottom: 40px;
	left: 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	z-index: 11;
}
.kv-scroll-label-2075 {
	writing-mode: vertical-rl;         /* v18: TOP から BOTTOM に読む */
	font-family: var(--f-en-sub);
	font-size: 11px;
	letter-spacing: 0.24em;
	color: #FFFFFF;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0.9;
}
.kv-scroll-line-2075 {
	display: block;
	width: 0.75px;
	height: 100px;
	background: #FFFFFF;
	opacity: 0.9;
}
@media only screen and (max-width: 1279px) {
	.kv-scroll-2075 { bottom: 30px; left: 20px; gap: 10px; }
	/* ブラウザ下部のツールバーが出ている時も見える範囲に入れる。KV (100vh) の下端ではなく、今見えている高さ (dvh) の下端から 30px 上に
	   (ツールバーの出し入れに合わせて動く)。KV は画面上端から始まる (top.css で margin-top: -80px = ヘッダー分) ので補正なし */
	.kv-scroll-2075 {
		bottom: auto;
		top: calc(100vh - 30px);    /* dvh 非対応ブラウザ用 (= これまでの bottom: 30px) */
		top: calc(100dvh - 30px);
		transform: translateY(-100%);
	}
	.kv-scroll-label-2075 { font-size: 10px; }
	.kv-scroll-line-2075 { height: 60px; }
}


/* ============================================================
   HAWAII-2075 v14: TOP ヘッダー透過 (KV 上に重ねる)
   ============================================================ */
body.home header#header {
	background: transparent !important;
	border-bottom: none !important;
}
/* TOP のヘッダー: KV スクロール前は白ナビ、白ロゴ */
body.home:not(.scrolled-past-kv) header#header > div > h2 img {
	filter: brightness(0) invert(1);
}

/* KV より下にスクロールしたら白背景 + 黒ナビに */
body.home.scrolled-past-kv header#header {
	background: var(--c-ground) !important;
	/* border-bottom: 1px solid rgba(0,0,0,0.08) !important; */
}

/* TOP KV 内の .all_include (main_image の親) の負マージン打消し */
body.home .main_image.top,
body.home .main_image.top > div {
	margin: 0 !important;
	padding: 0 !important;
}


/* HAWAII-2075 v15: TOP ヘッダー透過時に薄い黒グラデを載せてナビ視認性確保 */
body.home:not(.scrolled-past-kv) header#header {
	background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0)) !important;
	border-bottom: none !important;
}
/* v33: 影一切なし (akiko 指定) */
body.home:not(.scrolled-past-kv) header#header #header_links > nav > a > span,
body.home:not(.scrolled-past-kv) header#header #header_links > nav > a {
	text-shadow: none !important;
}
body.home:not(.scrolled-past-kv) header#header > div > h2 img {
	filter: brightness(0) invert(1);
}
.kv-scroll-label-2075 {
	text-shadow: none;
}
.kv-top-svg-2075 {
	filter: brightness(0) invert(1);
}


/* HAWAII-2075 v16 / v39: KV を viewport 上端まで拡張 (ヘッダー分の negative margin-top)
   v30 で SP/Tablet ヘッダー高さが 52px → 80px (padding 20*2 + min-height 40) に増加していたため
   -52 だと 28px 分の隙間 (html 背景 #B9C7C6 が透けて灰色帯) → -100 に拡大 */
@media only screen and (max-width: 1279px) {
	body.home .main_image.top {
		margin-top: -100px !important;   /* SP/Tablet ヘッダー分 (安全マージン込み) */
		height: 100vh !important;
	}
}
@media only screen and (min-width: 1280px) {
	body.home .main_image.top {
		margin-top: -76px !important;    /* PC ヘッダー分 (padding 18*2 + logo 40) */
		height: 100vh !important;
	}
}

/* お知らせの帯 (header.tpl の $holiday_notice・高さ 36px・891px 以上で表示) が出ている時、ヘッダーと KV が 36px 下がり、
   KV の下端が画面の外に出て「SCROLL TO WEB SITE」が下にずれる (ロゴも中央より下に) ので、帯の分を差し引く */
@media only screen and (min-width: 1280px) {
	/* PC: KV の高さを帯の分だけ縮めて、KV の下端を画面の下端にそろえる (SCROLL は KV の下端から、ロゴは KV の中央) */
	body.home:has(header#header > .holiday-notice) .main_image.top {
		height: calc(100vh - 36px) !important;
	}
}
@media only screen and (min-width: 891px) and (max-width: 1279px) {
	/* タブレット: SCROLL・ロゴは画面の高さ (dvh / svh) 基準で置いているので、帯の分ずらす
	   SCROLL = 画面の下端から 30px 上 (KV の上端が 36px 下がっている分を引く) / ロゴ = 帯より下の範囲の中央 */
	body.home:has(header#header > .holiday-notice) .kv-scroll-2075 {
		top: calc(100vh - 30px - 36px);
		top: calc(100dvh - 30px - 36px);
	}
	body.home:has(header#header > .holiday-notice) .kv-top-svg-2075 {
		top: calc(50vh - 18px) !important;
		top: calc(50svh - 18px) !important;
	}
}


/* HAWAII-2075 v20: ヘッダー要素 上下センター (PC 限定) */
header#header > div {
	align-items: center !important;
}
header#header > div > h2 { line-height: 0; }
header#header > div > h2,
header#header > div > h2 a {
	display: flex !important;
	align-items: center !important;
}
@media only screen and (min-width: 1280px) {
	header#header #header_links,
	header#header .header-cta-group {
		display: flex !important;
		align-items: center !important;
	}
}
/* v29: 3段階ブレイクポイント
   - <900px: SP (ハンバーガーのみ、CTA なし)
   - 900-1279px: Tablet (ハンバーガー + CTA)
   - ≥1280px: PC (フルナビ + CTA) */
@media only screen and (max-width: 899px) {
	.header-cta-group,
	.header-cta-group.pc { display: none !important; }
}
@media only screen and (min-width: 900px) {
	.header-cta-group,
	.header-cta-group.pc {
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
	}
}
@media only screen and (min-width: 900px) and (max-width: 1279px) {
	/* Tablet: CTA を右寄せ (ハンバーガーの左) */
	.header-cta-group {
		margin-left: auto !important;
		margin-right: 60px !important;
	}
}


/* ============================================================
   HAWAII-2075 v22: スティッキーヘッダー確実に + スクロール適応色
   ============================================================ */

/* 全ページ共通: スティッキーヘッダーを最大限確実に */
body header#header {
	position: sticky !important;
	top: 0 !important;
	z-index: 200 !important;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* TOP のみ: KV 上でヘッダー透過 + 白ナビ (グラデ効果) */
body.home:not(.scrolled-past-kv) header#header {
	background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0)) !important;
	border-bottom: none !important;
}
body.home:not(.scrolled-past-kv) header#header > div > h2 img {
	filter: brightness(0) invert(1);
}
/* TOP スクロール後: 白背景 + 黒ナビ */
body.home.scrolled-past-kv header#header {
	background: var(--c-ground) !important;
	/* border-bottom: 1px solid rgba(0,0,0,0.08) !important; */
}
body.home.scrolled-past-kv header#header > div > h2 img {
	filter: none !important;
}
/* 下層ページ (TOP 以外): 常に白背景 + 黒ナビ (グラデなし) */
body:not(.home) header#header {
	background: var(--c-ground) !important;
	/* border-bottom: 1px solid rgba(0,0,0,0.08) !important; */
}
body:not(.home) header#header > div > h2 img {
	filter: none !important;
}

/* PC 横並びナビの文字色。1279px 以下はハンバーガー内に出るので白のまま (上書きしない) */
@media only screen and (min-width: 1280px) {
	body.home:not(.scrolled-past-kv) header#header #header_links > nav > a,
	body.home:not(.scrolled-past-kv) header#header #header_links > nav > a > span {
		color: #FFFFFF !important;
		-webkit-text-fill-color: #FFFFFF !important;
	}
	body.home.scrolled-past-kv header#header #header_links > nav > a,
	body.home.scrolled-past-kv header#header #header_links > nav > a > span,
	body:not(.home) header#header #header_links > nav > a,
	body:not(.home) header#header #header_links > nav > a > span {
		color: var(--c-text) !important;
		-webkit-text-fill-color: var(--c-text) !important;
		text-shadow: none !important;
	}
}


/* ============================================================
   HAWAII-2075 v23: body overflow:hidden を上書きして sticky 有効化
   ============================================================ */
/* v24: overflow-x を html 側に移動 (body の overflow-x + y が異なると overflow-y が auto に変換されて sticky が壊れる) */
html {
	overflow-x: hidden !important;
	overflow-y: scroll !important;
}
body {
	overflow: visible !important;
}

/* 保険: sticky が効かない環境向けに fixed フォールバック */
@supports not (position: sticky) {
	body header#header {
		position: fixed !important;
		width: 100% !important;
	}
	body:not(.home) {
		padding-top: 76px;
	}
}