/* ==========================================================================
   OXY LOUNGE — main.css
   1. トークン  2. ベース  3. 共通部品（見出し・ボタン・プレースホルダー）
   4 以降はセクションごと
   ========================================================================== */

/* ---------- 1. トークン ---------- */
:root {
	/* ベース: 濃いネイビー。セクションごとに --c-navy / --c-navy-2 を交互に使う */
	--c-navy: #071b3a;
	--c-navy-2: #0b2650;
	/* 濃い鼠色（CONTACT の背景。白への急な切り替えで目が疲れないように） */
	--c-gray: #33363c;
	--c-ink: #0b2146;
	--c-text: #2b3445;
	--c-muted: #667085;
	--c-line: #e3e6ec;

	/* アクセント: 落ち着いたシャンパンゴールド（オレンジ寄りを避けた黄みの淡い金） */
	--c-gold: #cdb27a;
	--c-gold-line: rgba(205, 178, 122, 0.55);
	/* 暗い背景用 / 明るい背景用（白背景はコントラスト確保のため濃いめ） */
	--grad-gold: linear-gradient(135deg, #b59a5b 0%, #ecdcae 48%, #c3a56a 100%);
	--grad-gold-text: linear-gradient(135deg, #7d6535 0%, #9c7f45 50%, #7d6535 100%);

	--font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
	--font-display: "Cinzel", "Noto Serif JP", serif;

	/* 余白。セクションの上下 = 8rem、見出しの下 = 3rem。
	   FV とフッターは 1 画面に収める/コンパクトに保つため 3rem（--space-compact） */
	--space-section: 8rem;
	--space-compact: 3rem;
	--space-heading: 3rem;

	/* hover などの動き: ゆっくり入って、静かに止まる */
	--ease-lux: cubic-bezier(0.22, 0.61, 0.36, 1);

	--container: 1200px;
	--gutter: 1.5rem;
	--header-h: 64px;
}

@media (min-width: 1024px) {
	:root {
		--header-h: 72px;
	}
}

body.admin-bar {
	--adminbar-h: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--adminbar-h: 46px;
	}
}

/* ---------- 2. ベース ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.8;
	color: var(--c-text);
	background: #fff;
	word-break: auto-phrase;
	line-break: strict;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-ink);
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.oxy-container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- 3. 共通部品 ---------- */

/* セクション。--gold-grad は背景色に合わせて切り替える */
.oxy-section {
	position: relative;
	padding-block: var(--space-section);
	--gold-grad: var(--grad-gold-text);
}

.oxy-section[id],
.oxy-anchor[id] {
	scroll-margin-top: calc(var(--header-h) + var(--adminbar-h, 0px));
}

/* 濃紺背景（本文は白）。--alt は隣のセクションと見分けるための少し明るい紺 */
.oxy-dark {
	color: #fff;
	background: var(--c-navy);
	--gold-grad: var(--grad-gold);
}

.oxy-dark--alt {
	background: var(--c-navy-2);
}

.oxy-dark--gray {
	background: var(--c-gray);
}

.oxy-dark :where(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

/* ゴールドのグラデ文字（非対応ブラウザは単色） */
.is-gold {
	color: var(--c-gold);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.is-gold {
		color: transparent;
		background-image: var(--gold-grad, var(--grad-gold));
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* 段落（ブロック）に掛けたゴールドのグラデは、文字幅に収めて見た目を揃える */
p.is-gold {
	width: fit-content;
}

/* 見出しブロック（英字ラベル / h2 / サブ見出し） */
.oxy-head {
	margin-bottom: var(--space-heading);
	text-align: center;
}

.oxy-head--left {
	text-align: left;
}

.oxy-head__label,
.strength__label {
	margin-inline: auto;
}

.oxy-head--left .oxy-head__label {
	margin-inline: 0;
}

.oxy-head__label {
	margin-bottom: 0.5rem;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.24em;
}

.oxy-head__title {
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	letter-spacing: 0.04em;
}

.oxy-head__sub {
	margin-top: 0.75rem;
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
	font-weight: 700;
	line-height: 1.4;
}

/* リード文（中央寄せ・読みやすい行長） */
.oxy-lead {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

/* ボタン: 文字だけ・文字幅に合わせる。hover で、金の上を光が一度だけ流れ、ふわっと浮いて金色の影が広がる */
.oxy-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	padding: 0.85em 2.25em;
	overflow: hidden;
	isolation: isolate;
	border-radius: 999px;
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-ink);
	text-decoration: none;
	background: var(--grad-gold);
	background-position: 0 0;
	background-size: 170% 100%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: transform 0.6s var(--ease-lux), box-shadow 0.6s var(--ease-lux), background-position 0.9s var(--ease-lux);
}

.oxy-btn__text {
	position: relative;
	z-index: 1;
}

/* 斜めの光の帯。ふだんは左の外に待機。離すときは戻りの動きを見せず、すっと消す */
.oxy-btn::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	width: 60%;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
	transform: translateX(-130%) skewX(-18deg);
	pointer-events: none;
}

.oxy-btn:active {
	transform: translateY(-1px);
}

/* マウスで触れる環境だけ（スマホで hover が残らないように）。キーボード操作でも同じ動き */
@media (hover: hover) {
	.oxy-btn:hover,
	.oxy-btn:focus-visible {
		transform: translateY(-3px);
		background-position: 100% 0;
		box-shadow: 0 14px 30px rgba(205, 178, 122, 0.3), 0 6px 14px rgba(0, 0, 0, 0.3);
	}

	.oxy-btn:hover::before,
	.oxy-btn:focus-visible::before {
		transform: translateX(280%) skewX(-18deg);
		transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
	}
}

.oxy-btn-wrap {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.oxy-btn-wrap--left {
	justify-content: flex-start;
}

/* 画像プレースホルダー（未設定時。推奨サイズを表示） */
.oxy-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 4rem;
	border: 2px dashed #aab6c8;
	font-family: var(--font-serif);
	color: #4b5a73;
	text-align: center;
	background: repeating-linear-gradient(45deg, #dfe5ee 0 12px, #e9eef5 12px 24px);
}

.oxy-ph--dark {
	border-color: #4a6a9a;
	color: #cdd8ea;
	background: repeating-linear-gradient(45deg, #17305a 0 12px, #1c3a69 12px 24px);
}

.oxy-ph__inner {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.4;
}

.oxy-ph__title {
	font-weight: 700;
}

.oxy-ph__size {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

/* ---------- 4. ヘッダー ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-h);
	color: #fff;
	background: var(--c-navy);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 100%;
}

.site-logo {
	position: relative;
	z-index: 2; /* スマホの全画面メニューより手前に */
	display: flex;
	flex: none;
	align-items: center;
	min-width: 0;
	max-width: 60%;
	text-decoration: none;
}

/* ロゴの高さは、カスタマイザーで PC・スマホ別に設定する。
   --oxy-logo-h-header / --oxy-logo-h-footer は wp_head で出力（functions.php） */
.site-logo__img {
	width: auto;
	max-width: 100%;
	height: var(--oxy-logo-h-header, 40px);
	object-fit: contain;
}

.site-footer .site-logo__img {
	height: var(--oxy-logo-h-footer, 40px);
}

/* ロゴ未設定のプレースホルダーも、設定した高さに合わせる（縦横 1:3） */
.oxy-ph--logo {
	min-height: 0;
	border-width: 1px;
}

.site-header .oxy-ph--logo {
	width: calc(var(--oxy-logo-h-header, 40px) * 3);
	height: var(--oxy-logo-h-header, 40px);
}

.site-footer .oxy-ph--logo {
	width: calc(var(--oxy-logo-h-footer, 40px) * 3);
	height: var(--oxy-logo-h-footer, 40px);
}

.oxy-ph--logo .oxy-ph__inner {
	gap: 0;
	padding: 0;
	font-size: 0.6875rem;
}

.oxy-ph--logo .oxy-ph__size {
	font-size: 0.6875rem;
}

/* ナビのリンク */
.site-nav__list a {
	display: block;
	color: #fff;
	text-decoration: none;
}

.site-nav__list a:hover {
	color: #ecdcae;
}

/* 連番（01, 02…）はスマホの全画面メニューだけで見せる */
.site-nav__num {
	display: none;
}

/* お問い合わせボタン（ヘッダー・フッター）: 文字だけ・角丸は完全な丸み */
.oxy-btn--cta {
	padding: 0.6em 1.5em;
	border-radius: 999px;
	font-size: 0.875rem;
	white-space: nowrap;
}

/* メニューを開いている間は、後ろのページを動かさない */
html.is-nav-locked {
	overflow: hidden;
}

@keyframes oxy-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* スマホ・タブレット: 金の細い 2 本線のハンバーガー + 全画面メニュー */
@media (max-width: 1023.98px) {
	.site-header.is-nav-open {
		border-bottom-color: transparent;
	}

	/* ボタン: 枠なし。金の細い 2 本線（長さ違い）と小さな MENU。開くと線が × に、MENU が CLOSE に */
	.site-nav-toggle {
		position: relative;
		z-index: 2;
		display: inline-flex;
		align-items: center;
		gap: 0.9rem;
		flex: none;
		height: 44px;
		margin-right: -0.25rem;
		padding: 0 0.25rem 0 0.75rem;
		font-family: var(--font-display);
		font-size: 0.6875rem;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.26em;
		color: var(--c-gold);
		cursor: pointer;
		background: transparent;
		border: 0;
	}

	.site-nav-toggle:focus-visible {
		border-radius: 999px;
		outline: 1px solid var(--c-gold);
		outline-offset: 2px;
	}

	.site-nav-toggle__label {
		display: inline-block;
		min-width: 5.2em;
		text-align: right;
	}

	.site-nav-toggle__label::before {
		content: "MENU";
	}

	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__label::before {
		content: "CLOSE";
	}

	.site-nav-toggle__bar {
		position: relative;
		display: block;
		width: 30px;
		height: 12px;
	}

	.site-nav-toggle__bar::before,
	.site-nav-toggle__bar::after {
		content: "";
		position: absolute;
		right: 0;
		height: 1.5px;
		background: currentColor;
		transition: top 0.7s var(--ease-lux), width 0.7s var(--ease-lux), transform 0.7s var(--ease-lux);
	}

	.site-nav-toggle__bar::before {
		top: 0;
		width: 30px;
	}

	.site-nav-toggle__bar::after {
		top: calc(100% - 1.5px);
		width: 18px;
	}

	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar::before,
	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar::after {
		top: calc(50% - 0.75px);
		width: 30px;
	}

	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar::before {
		transform: rotate(45deg);
	}

	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar::after {
		transform: rotate(-45deg);
	}

	/* メニュー本体: 全画面。ボタンの位置から円が広がるように現れる */
	.site-header .site-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		justify-content: safe center;
		gap: 2.5rem;
		padding: calc(var(--header-h) + var(--adminbar-h, 0px) + 1.5rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
		overflow-y: auto;
		background:
			radial-gradient(120% 70% at 100% 0%, rgba(205, 178, 122, 0.14), transparent 60%),
			linear-gradient(180deg, var(--c-navy) 0%, var(--c-navy-2) 100%);
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		clip-path: circle(0% at calc(100% - 3.5rem) calc(var(--header-h) / 2 + var(--adminbar-h, 0px)));
		transition: clip-path 0.9s var(--ease-lux), opacity 0.5s var(--ease-lux), visibility 0s linear 0.9s;
	}

	.is-nav-open .site-nav {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		clip-path: circle(150% at calc(100% - 3.5rem) calc(var(--header-h) / 2 + var(--adminbar-h, 0px)));
		transition: clip-path 1s var(--ease-lux), opacity 0.4s var(--ease-lux), visibility 0s;
	}

	/* 項目: 細い金の罫線で区切り、連番付き。開くと 1 つずつふわっと現れる */
	.site-header .site-nav__list {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 32rem;
		margin-inline: auto;
		border-top: 1px solid var(--c-gold-line);
	}

	.site-header .site-nav__list li {
		border-bottom: 1px solid var(--c-gold-line);
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.8s var(--ease-lux), transform 0.8s var(--ease-lux);
	}

	.is-nav-open .site-nav__list li {
		opacity: 1;
		transform: none;
		transition-delay: calc(0.35s + var(--i, 0) * 0.08s);
	}

	.site-header .site-nav__list a {
		display: flex;
		align-items: baseline;
		gap: 1.25rem;
		padding: 1.15rem 0.25rem;
		font-size: 1.3125rem;
		line-height: 1.5;
		letter-spacing: 0.08em;
	}

	.site-header .site-nav__num {
		display: inline-block;
		min-width: 2.25rem;
		font-family: var(--font-display);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.2em;
		color: var(--c-gold);
	}

	/* お問い合わせボタン: 最後にふわっと。アニメーション後は通常の hover の動きに戻る */
	.site-header .site-nav .oxy-btn {
		align-self: center;
		padding: 0.9em 2.75em;
		font-size: 1rem;
	}

	.is-nav-open .site-nav .oxy-btn {
		animation: oxy-rise 0.9s var(--ease-lux) 0.95s backwards;
	}
}

/* PC: 横並びナビ + 右端にお問い合わせ */
@media (min-width: 1024px) {
	.site-nav-toggle {
		display: none;
	}

	.site-header .site-nav {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		margin-left: auto;
	}

	.site-nav__list {
		display: flex;
		align-items: center;
	}

	.site-nav__list li + li {
		border-left: 1px solid rgba(255, 255, 255, 0.35);
	}

	.site-nav__list a {
		padding: 0 1rem;
		font-size: 0.875rem;
		line-height: 1.4;
	}
}

/* ---------- 5. フッター ---------- */
.site-footer {
	padding-block: var(--space-compact);
}

.site-footer__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.site-footer__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.site-footer .site-nav__list a {
	padding: 0.25rem 0;
	font-size: 0.9375rem;
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: var(--space-compact);
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.75rem;
	line-height: 1.6;
}

.site-footer__bottom .site-footer__copy {
	color: rgba(255, 255, 255, 0.8);
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}

.site-footer__links a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.site-footer__links a:hover {
	color: #ecdcae;
}

@media (min-width: 1024px) {
	.site-footer__top {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.site-footer__nav {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}

	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.site-footer .site-nav__list {
		display: flex;
		align-items: center;
	}

	.site-footer .site-nav__list a {
		padding: 0 1rem;
		font-size: 0.875rem;
	}
}

/* ---------- フォールバック（トップ以外） ---------- */
.oxy-fallback {
	padding-block: var(--space-section);
}

.oxy-fallback article + article {
	margin-top: var(--space-section);
}

/* ---------- 6. FV ---------- */
/* 全画面表示: ヘッダー（と管理バー）を除いた高さを FV が使い切る = ヘッダー + FV で 1 画面。
   FHD(1920×1080) などの PC でも上限なしで画面いっぱいに広げる。svh 対応ブラウザは svh */
.fv {
	--fv-h: calc(100vh - var(--header-h) - var(--adminbar-h, 0px));
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: max(28rem, var(--fv-h));
}

@supports (height: 100svh) {
	.fv {
		--fv-h: calc(100svh - var(--header-h) - var(--adminbar-h, 0px));
	}
}

.fv__media {
	position: absolute;
	inset: 0;
}

.fv__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.fv__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

/* 左を濃紺に沈めて文字を読みやすくする */
.fv__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--c-navy) 0%, rgba(7, 27, 58, 0.92) 28%, rgba(7, 27, 58, 0.55) 48%, rgba(7, 27, 58, 0) 68%);
}

.fv__media .oxy-ph {
	position: absolute;
	inset: 0;
	justify-content: flex-end;
	padding-right: 12%;
}

.fv__inner {
	position: relative;
	z-index: 1;
	padding-block: var(--space-compact);
}

/* 本体は広め（「OXY LOUNGE」を 1 行に収める）。本文だけは読みやすい行長に絞る */
.fv__body {
	max-width: 48rem;
}

.fv__catch {
	display: block;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 500;
	letter-spacing: 0.06em;
}

.fv__brand {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.2rem + 5vw, 5rem);
	font-weight: 600;
	letter-spacing: 0.04em;
}

@media (min-width: 768px) {
	.fv__brand {
		white-space: nowrap;
	}
}

.fv__sub {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.8vw, 1.625rem);
	letter-spacing: 0.14em;
}

.fv__text {
	max-width: 36rem;
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.92);
}

.fv__cta {
	margin-top: 1.5rem;
}

/* スマホ: 写真を背景にして下から濃紺で沈め、文字とボタンを下寄せ。ボタンは左揃え */
@media (max-width: 767.98px) {
	.fv {
		align-items: flex-end;
		min-height: var(--fv-h);
	}

	.fv__img {
		object-position: 72% center;
	}

	/* 1 行に収めて縦を節約し、写真の見える面積を確保する */
	.fv__sub {
		font-size: 1rem;
		letter-spacing: 0.08em;
	}

	.fv__media::after {
		background: linear-gradient(0deg, var(--c-navy) 0%, rgba(7, 27, 58, 0.94) 48%, rgba(7, 27, 58, 0) 88%);
	}

	.fv__media .oxy-ph {
		align-items: flex-start;
		justify-content: center;
		padding: 1.5rem 0 0;
	}

	.fv__inner {
		padding-block: var(--space-compact) calc(var(--space-compact) + env(safe-area-inset-bottom, 0px));
	}
}

/* ---------- 7. ABOUT ---------- */
.about .oxy-lead {
	max-width: 52rem;
}

/* ---------- 8. 3つのコンセプト ---------- */
/* 全幅の帯。写真は斜めに切り抜き、境界は濃紺へ溶かす。左右交互 */
.concept {
	position: relative;
	overflow: hidden;
}

.concept__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 56%;
	clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.concept--rev .concept__media {
	right: auto;
	left: 0;
	clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%);
}

.concept__img,
.concept__media .oxy-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.concept__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--c-navy) 0%, rgba(7, 27, 58, 0) 35%);
}

.concept--rev .concept__media::after {
	background: linear-gradient(270deg, var(--c-navy) 0%, rgba(7, 27, 58, 0) 35%);
}

.concept__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 20rem;
	padding-block: var(--space-section);
}

.concept--rev .concept__inner {
	justify-content: flex-end;
}

.concept__body {
	width: 48%;
}

.concept__num {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.concept__name {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.concept__sub {
	margin-bottom: 1rem;
	font-family: var(--font-display);
	font-size: 1rem;
	letter-spacing: 0.12em;
}

.concept__text {
	color: rgba(255, 255, 255, 0.92);
}

.concept__note {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
}

/* スマホ: 画像が上、テキストが下の縦並び */
@media (max-width: 767.98px) {
	.concept__media,
	.concept--rev .concept__media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		width: 100%;
		aspect-ratio: 16 / 10;
		clip-path: none;
	}

	.concept__media::after,
	.concept--rev .concept__media::after {
		background: linear-gradient(0deg, var(--c-navy) 0%, rgba(7, 27, 58, 0) 45%);
	}

	.concept__inner,
	.concept--rev .concept__inner {
		display: block;
		min-height: 0;
		padding-block: var(--space-compact) var(--space-section);
	}

	.concept__body {
		width: 100%;
	}
}

/* ---------- 9. STRENGTH ---------- */
.strength__list {
	display: grid;
	grid-template-columns: 1fr;
}

.oxy-lead + .strength__list {
	margin-top: var(--space-heading);
}

.strength__item {
	padding: 2rem 0;
	text-align: center;
}

.strength__item + .strength__item {
	border-top: 1px solid var(--c-gold-line);
}

/* 画像は 4:3。列の文字幅いっぱいまで広げる（1 列表示のときは 30rem を上限に中央寄せ） */
.strength__icon {
	max-width: 30rem;
	margin: 0 auto 1.25rem;
}

.strength__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.oxy-ph--icon {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	min-height: 0;
}

.oxy-ph--icon .oxy-ph__inner {
	gap: 0.25rem;
	padding: 0.5rem;
	font-size: 0.875rem;
}

.strength__label {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
}

.strength__title {
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
}

@media (min-width: 768px) {
	.strength__list {
		grid-template-columns: repeat(var(--cols, 3), 1fr);
	}

	.strength__item {
		padding: 0.5rem 1.25rem;
	}

	.strength__item + .strength__item {
		border-top: 0;
		border-left: 1px solid var(--c-gold-line);
	}
}

/* PC: 3 列を横に広げて、ゆったり見せる（見出し・リード文は中央寄せのままなので影響しない） */
@media (min-width: 1024px) {
	.strength > .oxy-container {
		max-width: calc(1440px + var(--gutter) * 2);
	}

	.strength__item {
		padding-inline: 3rem;
	}
}

/* ---------- 10. FRANCHISE ---------- */
.fc__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.oxy-lead + .fc__cards {
	margin-top: var(--space-heading);
}

.fc-card {
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--c-gold-line);
}

.fc-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.fc-card__img,
.fc-card__media .oxy-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 名称を画像の下端に重ねる */
.fc-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(7, 27, 58, 0.92) 0%, rgba(7, 27, 58, 0) 60%);
	pointer-events: none;
}

.fc-card__name {
	position: absolute;
	right: 0;
	bottom: 0.5rem;
	left: 0;
	z-index: 1;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
}

.fc-card__body {
	flex: 1;
	padding: 1rem 1.25rem 1.25rem;
	text-align: center;
}

.fc-card__label {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}

.fc-card__text {
	margin-top: 0.5rem;
	color: rgba(255, 255, 255, 0.88);
}

.fc__closing {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

.fc__cards + .fc__closing,
.oxy-lead + .fc__closing {
	margin-top: var(--space-heading);
}

.fc__closing-title {
	margin-bottom: 1rem;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
	letter-spacing: 0.04em;
}

.fc__closing-text {
	color: rgba(255, 255, 255, 0.92);
}

.fc__note {
	margin-top: 1rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 768px) {
	.fc__cards {
		grid-template-columns: repeat(var(--cols, 3), 1fr);
	}
}

/* ---------- 11. COMPANY ---------- */
.company {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 22rem;
	padding-block: var(--space-section);
}

.company__bg {
	position: absolute;
	inset: 0;
}

.company__img,
.company__bg .oxy-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}

.company__bg .oxy-ph {
	justify-content: flex-end;
	padding-right: 12%;
}

.company__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--c-navy) 0%, rgba(7, 27, 58, 0.92) 30%, rgba(7, 27, 58, 0.45) 55%, rgba(7, 27, 58, 0) 72%);
}

.company__inner {
	position: relative;
	z-index: 1;
}

.company__body {
	max-width: 36rem;
}

.company__text {
	color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 767.98px) {
	.company__bg::after {
		background: linear-gradient(0deg, rgba(7, 27, 58, 0.96) 0%, rgba(7, 27, 58, 0.86) 60%, rgba(7, 27, 58, 0.6) 100%);
	}

	.company__bg .oxy-ph {
		justify-content: center;
		padding-right: 0;
	}
}

/* ---------- 12. CONTACT ---------- */
/* 白背景のセクションに、縦1列のフォーム */
.contact__form,
.contact__notice {
	max-width: 40rem;
	margin-inline: auto;
}

.oxy-lead + .contact__form,
.oxy-lead + .contact__notice {
	margin-top: var(--space-heading);
}

.contact__form {
	padding: 1.5rem 1.25rem 2rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--c-gold-line);
	border-radius: 24px;
}

.contact__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.contact__row + .contact__row {
	margin-top: 1.25rem;
}

.contact__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
}

.contact__req {
	padding: 0.1em 0.75em;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--c-ink);
	background: var(--grad-gold);
	border-radius: 999px;
}

.contact__control {
	min-width: 0;
}

/* 入力欄の文字は 16px（iOS の自動ズーム防止） */
.contact__control input[type="text"],
.contact__control input[type="tel"],
.contact__control input[type="email"],
.contact__control textarea {
	display: block;
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--c-text);
	background: #fff;
	border: 1px solid #c9d0dc;
	border-radius: 12px;
}

.contact__control textarea {
	min-height: 9rem;
	resize: vertical;
}

.contact__control ::placeholder {
	color: #98a1b2;
}

.contact__control input:focus,
.contact__control textarea:focus {
	border-color: #a98a4d;
	outline: 2px solid rgba(169, 138, 77, 0.35);
	outline-offset: 0;
}

.contact__radios {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.contact__radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.contact__radio input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: #a98a4d;
}

.oxy-btn--submit {
	padding-inline: 2.5rem;
	border: 0;
	cursor: pointer;
}

.contact__notice {
	padding: 1.25rem 1.5rem;
	text-align: center;
	border: 1px solid var(--c-gold-line);
}

.contact__notice--ok {
	color: #fff;
	background: rgba(205, 178, 122, 0.12);
	border-color: var(--c-gold);
}

.contact__notice--error {
	margin-bottom: 1.5rem;
	color: #8a1c1c;
	background: #fdf1f1;
	border-color: #e3a1a1;
}

/* ハニーポット（画面外へ） */
.contact__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* PC: 縦1列（ラベルが上・入力欄が下）のまま、余白と種別の並びだけ広げる */
@media (min-width: 768px) {
	.contact__form {
		padding: 2.5rem 3rem 3rem;
	}

	.contact__row + .contact__row {
		margin-top: 1.5rem;
	}

	.contact__radios {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
	}
}

/* ---------- 13. MESSAGE ---------- */
/* 文章は先方から届き次第差し替え。それまでの仮のスペースとして、最低限の高さを確保する */
.message__body {
	max-width: 44rem;
	min-height: 8rem;
	margin-inline: auto;
	text-align: center;
}

/* ---------- 14. CONCEPT の見出し・キャッチコピー ---------- */
.concept-list__head {
	padding-top: var(--space-section);
}

.concept__catch {
	margin-bottom: 0.75rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: #fff;
}

/* ---------- 15. PRODUCT（サイトで最も訴求するメインセクション） ---------- */
/* 枠線・内側の色はなし（セクションの背景色のまま）。見出し・ボタンを他のセクションより大きくする。
   左上・右下の金の細い丸は「21. PRODUCT の丸」 */
.product__panel {
	position: relative;
	max-width: 72rem;
	margin-inline: auto;
	text-align: center;
}

.product .oxy-head__title {
	font-size: clamp(1.75rem, 1.1rem + 2vw, 2.625rem);
}

.product .oxy-head__label {
	font-size: 1rem;
}

.oxy-btn--lg {
	padding: 1rem 2.5rem;
	font-size: 1.125rem;
}

.product__note {
	margin-top: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.75);
}

/* ---------- 16. CONCEPT: PC では行内の余白が広いので文字を約2段階大きくする ---------- */
/* （既定の .concept__* より後ろに置いて上書きする。スマホ・タブレットは既定のまま） */
@media (min-width: 1024px) {
	.concept__body {
		width: 50%;
	}

	.concept__num {
		font-size: 1.25rem;
	}

	.concept__name {
		font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
	}

	.concept__sub {
		margin-bottom: 1.25rem;
		font-size: 1.25rem;
	}

	.concept__catch {
		font-size: 1.5rem;
	}

	.concept__text {
		font-size: 1.25rem;
	}

	.concept__note {
		font-size: 1.0625rem;
	}
}

/* ---------- 17. 見出し: PC では一回り大きくする ---------- */
/* PRODUCT の見出しは文が長いので、上の .product .oxy-head__title（最大 42px）のまま */
@media (min-width: 1024px) {
	.oxy-head__label {
		font-size: 1rem;
	}

	.oxy-head__title {
		font-size: clamp(2rem, 1.2rem + 1.8vw, 2.5rem);
	}

	.oxy-head__sub {
		font-size: clamp(1.125rem, 0.95rem + 0.5vw, 1.375rem);
	}
}

/* ---------- 18. 背景のあしらい（実験） ---------- */
/* カスタマイザー「共通 > 背景のあしらい」で ON/OFF（body.has-deco）。この節を丸ごと消せば完全に無効になる。
   泡などは使わず、細い線の図記号のみ。ぼかさず、余白を使って大きく、はっきり描く。
   セクションごとに別の絵:
     ABOUT     … 酸素カプセルの線画（元請け確認用）
     MESSAGE   … O₂ の文字
     STRENGTH  … 空気の流れ（呼吸）
     FRANCHISE … 加盟店のネットワーク（点と線）
   画面外へはみ出す分は、セクションの overflow: hidden で切り落とす */
.has-deco :is(.about, .message, .strength, .franchise) {
	overflow: hidden;
}

/* 内容（文字・画像）は線画より手前に */
.has-deco :is(.about, .message, .strength, .franchise) > .oxy-container {
	position: relative;
	z-index: 1;
}

/* ---- ABOUT: 酸素カプセル（大きさは元請け確認用の前回のまま。ぼかしなし） ---- */
.has-deco .about::before {
	content: "";
	position: absolute;
	right: -8rem;
	bottom: 1.5rem;
	z-index: 0;
	width: min(36rem, 130vw);
	aspect-ratio: 800 / 360;
	background: url("../img/capsule-line.svg") no-repeat center / contain;
	opacity: 0.25;
	pointer-events: none;
}

@media (min-width: 768px) {
	.has-deco .about::before {
		right: -12rem;
		bottom: 3rem;
		width: min(56rem, 92vw);
		opacity: 0.55;
	}
}

/* ---- MESSAGE / STRENGTH / FRANCHISE: 1024px 以上で、余白いっぱいに大きく ---- */
@media (min-width: 1024px) {
	.has-deco :is(.message, .strength, .franchise)::before {
		content: "";
		position: absolute;
		z-index: 0;
		background-repeat: no-repeat;
		background-size: contain;
		opacity: 0.6;
		pointer-events: none;
	}

	/* O₂: セクションの高さいっぱい（上下 2rem 残し）、左端に寄せる */
	.has-deco .message::before {
		top: 2rem;
		bottom: 2rem;
		left: -6vw;
		width: min(62vw, 64rem);
		background-image: url("../img/o2-lettering.svg");
		background-position: left center;
	}

	/* 空気の流れ: 右上、見出しの高さから右端へ流れ出す。右端ははみ出して切り落とす */
	.has-deco .strength::before {
		top: -2rem;
		right: -11vw;
		width: min(48vw, 56rem);
		aspect-ratio: 700 / 450;
		background-image: url("../img/airflow.svg");
		background-position: right top;
	}

	/* 加盟店のネットワーク: 右上の角から広がる点（店舗）と線（つながり）。角から離れるほど点が減る */
	.has-deco .franchise::before {
		top: 0;
		right: 0;
		width: min(46vw, 56rem);
		aspect-ratio: 800 / 500;
		background-image: url("../img/network.svg");
		background-position: right top;
	}
}

/* ---------- 19. 会社概要ページ（固定ページ） ---------- */
/* 項目名と内容の表。金の細い罫線で区切る。スマホは項目名が上、内容が下 */
.company-info {
	max-width: 56rem;
	margin: 0 auto;
	border-top: 1px solid var(--c-gold-line);
}

.company-info__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--c-gold-line);
}

.company-info__label {
	font-weight: 700;
	color: var(--c-gold);
	letter-spacing: 0.08em;
}

.company-info__value {
	margin: 0;
}

.company-page__content {
	max-width: 56rem;
	margin: var(--space-heading) auto 0;
}

.company-page__content > :first-child {
	margin-top: 0;
}

.company-page__content > * + * {
	margin-top: 1.5rem;
}

@media (min-width: 768px) {
	.company-info__row {
		grid-template-columns: 12rem 1fr;
		gap: 2rem;
		padding: 1.75rem 0;
	}
}

/* ---------- 20. hover の動き（高級感: ゆっくり入って、静かに止まる） ---------- */
/* 動かすのは「押せるもの」だけ: ボタン（上の .oxy-btn）とナビのリンク。
   リンクのない画像・カードは、押せると誤解されないよう動かさない */

/* ナビ（PC）: 金の細い下線が中央から左右へ伸びる */
@media (min-width: 1024px) {
	.site-nav__list a {
		position: relative;
	}

	.site-nav__list a::after {
		content: "";
		position: absolute;
		right: 1rem;
		bottom: -0.45rem;
		left: 1rem;
		height: 1px;
		background: var(--grad-gold);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.6s var(--ease-lux);
	}

	.site-nav__list a:hover::after,
	.site-nav__list a:focus-visible::after {
		transform: scaleX(1);
	}
}

/* 色の変化はなめらかに */
.site-nav__list a,
.site-footer__links a {
	transition: color 0.4s var(--ease-lux);
}

/* 動きを減らす設定（OS）の人には、浮く・光の帯・下線の伸びを出さない（色の変化だけ） */
@media (prefers-reduced-motion: reduce) {
	.oxy-btn,
	.site-nav__list a::after {
		transition: none;
	}

	.oxy-btn:hover,
	.oxy-btn:focus-visible {
		transform: none;
	}

	.oxy-btn::before {
		display: none;
	}
}

/* ---------- 21. PRODUCT の丸（金の細い線） ---------- */
/* 左上と右下の角に、大きな丸の弧を金色グラデーションの細い線で描く。背景色のすぐ上の層（文字の後ろ）。
   カスタマイザー「PRODUCT」のチェック（.product--rings）で ON/OFF。弧は角から画面外へ抜ける */
.product--rings {
	overflow: hidden;
}

.product--rings > .oxy-container {
	position: relative;
	z-index: 1;
}

.product--rings::before,
.product--rings::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: clamp(16rem, 36vw, 40rem);
	aspect-ratio: 2 / 1;
	background: url("../img/ring-corner.svg") no-repeat center / contain;
	pointer-events: none;
}

.product--rings::before {
	top: 0;
	left: 0;
}

.product--rings::after {
	right: 0;
	bottom: 0;
	transform: rotate(180deg);
}

/* ---------- 22. CONTACT の光の筋（金の細線） ---------- */
/* 左下と右上の角から、細い直線が扇状に広がる。静かな絵にして、フォームを主役にする。
   背景色のすぐ上の層（フォームの後ろ）。カスタマイザー「CONTACT」のチェック（.contact--rays）で ON/OFF。
   PRODUCT の丸（左上・右下）とは、形（直線）も角の組み合わせも変えている */
.contact--rays {
	overflow: hidden;
}

.contact--rays > .oxy-container {
	position: relative;
	z-index: 1;
}

.contact--rays::before,
.contact--rays::after {
	content: "";
	position: absolute;
	z-index: 0;
	width: clamp(14rem, 30vw, 32rem);
	aspect-ratio: 1 / 1;
	background: url("../img/rays-corner.svg") no-repeat center / contain;
	pointer-events: none;
}

.contact--rays::before {
	bottom: 0;
	left: 0;
}

.contact--rays::after {
	top: 0;
	right: 0;
	transform: rotate(180deg);
}

/* 光の筋がフォームの中に透けないよう、フォームの背景は不透明に（背景のグレーより少し明るい色） */
.contact--rays .contact__form {
	background: #3a3d43;
}

/* ---------- 23. PRODUCT のスライダー（左に画像、右に見出し・小見出し・本文） ---------- */
/* 本文の下に置き、ボタンはその下。スマホは画像が上・文章が下。
   JS が無い環境（html:not(.js)）では、スライドを縦に並べて切り替えボタンは出さない */
.oxy-lead + .product-slider {
	margin-top: var(--space-heading);
}

.product-slider__viewport {
	overflow: hidden;
	touch-action: pan-y; /* 縦スクロールは通し、横の動きだけスワイプに使う */
	cursor: grab;
}

.product-slider__viewport:active {
	cursor: grabbing;
}

.product-slider__viewport:focus-visible {
	outline-offset: 6px;
}

.product-slider__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 1s var(--ease-lux);
	will-change: transform;
	user-select: none;
}

html:not(.js) .product-slider__track {
	display: grid;
	gap: 3rem;
	transition: none;
}

.product-slide {
	flex: 0 0 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	align-items: center;
	min-width: 0;
	text-align: left;
}

.product-slide__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.product-slide__img,
.product-slide__media .oxy-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-slide__img {
	-webkit-user-drag: none;
	user-select: none;
}

.product-slide__title {
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	letter-spacing: 0.04em;
}

.product-slide__sub {
	margin-top: 0.5rem;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.product-slide__text {
	margin-top: 1.25rem;
	color: rgba(255, 255, 255, 0.9);
}

/* 切り替え: 左右の丸いボタン（細い線）+ 細いバー。現在のバーだけ金色が濃い */
.product-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	margin-top: 2.25rem;
}

html:not(.js) .product-slider__controls {
	display: none;
}

.product-slider__arrow {
	position: relative;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--c-gold);
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--c-gold-line);
	border-radius: 999px;
	transition: border-color 0.5s var(--ease-lux), background-color 0.5s var(--ease-lux);
}

/* 矢印は細い線の山形（1px） */
.product-slider__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
}

.product-slider__arrow--next::before {
	transform: translate(-65%, -50%) rotate(45deg);
}

.product-slider__arrow--prev::before {
	transform: translate(-35%, -50%) rotate(-135deg);
}

.product-slider__dots {
	display: flex;
	gap: 0.25rem;
}

.product-slider__dot {
	position: relative;
	width: 34px;
	height: 24px;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
}

.product-slider__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 3px;
	left: 3px;
	height: 2px;
	background: var(--c-gold);
	opacity: 0.3;
	transform: translateY(-50%);
	transition: opacity 0.5s var(--ease-lux);
}

.product-slider__dot[aria-current="true"]::before {
	opacity: 1;
}

@media (hover: hover) {
	.product-slider__arrow:hover {
		background: rgba(205, 178, 122, 0.12);
		border-color: var(--c-gold);
	}

	.product-slider__dot:hover::before {
		opacity: 0.7;
	}
}

.product-slider + .oxy-btn-wrap {
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.product-slide {
		grid-template-columns: 1fr 1fr;
		gap: 3.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.product-slider__track,
	.product-slider__arrow,
	.product-slider__dot::before {
		transition: none;
	}
}

/* ---------- 24. PRODUCT スライダー パターン2（全面写真・斜めの面・POINT 一覧） ---------- */
/* 見出しの <strong> は金色（パターン1・2共通）。「01 / 05」はパターン2だけで出す */
.product-slide__title strong {
	font-weight: inherit;
	color: var(--c-gold);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.product-slide__title strong {
		color: transparent;
		background-image: var(--grad-gold);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.product-slider--a .product-slider__count {
	display: none;
}

/* 全面の写真（2:1）の上に、左は斜めの紺の面（金の細い斜線つき）、右は斜めの紺のパネル */
.product-slider--b {
	position: relative;
}

.product-slider--b .product-slide {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	min-height: 36rem;
	aspect-ratio: 16 / 9;
	color: #fff;
}

.product-slider--b .product-slide__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

/* 左上の三角形。斜辺に金の細い線（1 つの要素のグラデーションで描く） */
.product-slide__shade {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 42%;
	height: 92%;
	background: linear-gradient(to top left, transparent calc(50% - 0.5px), var(--c-gold) calc(50% - 0.5px), var(--c-gold) calc(50% + 0.5px), rgba(7, 27, 58, 0.88) calc(50% + 0.5px));
	pointer-events: none;
}

/* 左: 番号・英字の大見出し・キャッチコピー（写真の上なので、薄い影で読みやすく） */
.product-slide__lead {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	max-width: 46%;
	padding: 2.25rem 2.75rem;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.product-slide__counter {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: min(16rem, 100%);
	font-family: var(--font-display);
	font-size: 0.9375rem;
	letter-spacing: 0.14em;
	color: var(--c-gold);
}

.product-slide__counter::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-gold-line);
}

.product-slide__en {
	margin-top: 1.5rem;
	font-family: "Cormorant Garamond", "Cinzel", "Noto Serif JP", serif;
	font-size: clamp(2.5rem, 4.8vw, 5rem);
	font-style: italic;
	font-weight: 500;
	line-height: 1.15;
	color: #fff;
}

.product-slide__tag {
	margin-top: 1.25rem;
	font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
	letter-spacing: 0.06em;
}

/* 右: 斜めの紺のパネル（左の縁が斜め）。下の操作部のぶん、下を空ける */
/* パネルは流れの中に置く（中身が多いときはスライドが伸びる）。左の写真・面は絶対配置で後ろに */
.product-slide__panel {
	position: relative;
	z-index: 2;
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	width: 50%;
	padding: 2rem 2.75rem 5.75rem 7.5rem;
	text-align: left;
	background: linear-gradient(90deg, rgba(7, 27, 58, 0.8) 0%, rgba(7, 27, 58, 0.95) 28%, rgba(7, 27, 58, 0.98) 100%);
	clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}

.product-slide__label {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--font-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.24em;
}

.product-slide__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-gold-line);
}

.product-slider--b .product-slide__title {
	margin-top: 1.25rem;
	font-size: clamp(1.5rem, 0.4rem + 2.4vw, 2.75rem);
}

.product-slider--b .product-slide__sub {
	margin-top: 1rem;
}

.product-slider--b .product-slide__text {
	margin-top: 1rem;
}

/* POINT 一覧: 細い線で区切り、番号は金色 */
.product-slide__points {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-gold-line);
}

.product-slide__points-label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	letter-spacing: 0.24em;
	color: var(--c-gold);
}

.product-slide__points-list {
	display: grid;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.product-slide__points-list li {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.product-slide__points-num {
	flex: none;
	min-width: 2rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--c-gold);
}

/* 操作部は、右のパネルの下に重ねる */
.product-slider--b .product-slider__controls {
	position: absolute;
	right: 2.75rem;
	bottom: 1.75rem;
	left: 58%;
	z-index: 3;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
}

.product-slider--b .product-slider__count {
	font-family: var(--font-display);
	font-size: 0.8125rem;
	letter-spacing: 0.14em;
	color: #fff;
}

/* スマホ: 写真（4:3）に左の面と文字を重ね、その下に紺のパネル。操作部はスライダーの下 */
@media (max-width: 767.98px) {
	.product-slider--b .product-slide {
		display: flex;
		flex-direction: column;
		min-height: 0;
		aspect-ratio: auto;
	}

	.product-slider--b .product-slide__media {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
	}

	.product-slide__shade {
		width: 80%;
		height: 90%;
	}

	.product-slide__lead {
		max-width: 80%;
		padding: 1.25rem 1.5rem;
	}

	.product-slide__en {
		margin-top: 0.75rem;
		font-size: clamp(2rem, 10vw, 3rem);
	}

	.product-slide__tag {
		margin-top: 0.75rem;
		font-size: 0.875rem;
	}

	.product-slide__panel {
		position: static;
		display: block;
		width: auto;
		padding: 1.75rem 1.5rem;
		background: var(--c-navy-2);
		clip-path: none;
	}

	.product-slider--b .product-slider__controls {
		position: static;
		justify-content: center;
		margin-top: 2rem;
	}

	.product-slider--b .product-slider__count {
		display: none;
	}
}

/* === SECTIONS-END（セクション用 CSS はこの行の上に追記） === */