/**
 * Mouton & Company — front-end styles
 */

:root {
	--color-bg-primary: #232345;
	--color-bg-secondary: #1a1a35;
	--color-text: #e8e8f2;
	--color-text-muted: #a0a0b8;
	--color-accent: #7eb8d4;
	--color-accent-gold: #c9b896;
	--color-border: rgba( 232, 232, 242, 0.12 );
	--font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--content-max: 720px;
	--wide-max: 1200px;
	--space-section: clamp( 2rem, 5vw, 4rem );
	--header-height: 4rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var( --font-sans );
	font-size: 1rem;
	line-height: 1.65;
	color: var( --color-text );
	background-color: var( --color-bg-primary );
	overflow-x: hidden;
}

body.menu-open {
	overflow: hidden;
}

a {
	color: var( --color-accent );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
	color: var( --color-accent-gold );
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
	width: 100%;
	max-width: var( --wide-max );
	margin-inline: auto;
	padding: var( --space-section ) clamp( 1rem, 4vw, 2rem );
}

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

.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var( --color-bg-secondary );
	color: var( --color-text );
	border: 1px solid var( --color-border );
}

/* Header — 背景なし（ロゴ＋ハンバーガーのみ浮かせる） */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1200;
	background: transparent;
	border: 0;
	pointer-events: none;
}

/* トップ: 初回は非表示 → 少しスクロールで表示（白帯なし） */
body.mouton-hide-header-until-scroll .site-header {
	transform: translateY( calc( -100% - 1rem ) );
	visibility: hidden;
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 0.4s;
}

body.mouton-hide-header-until-scroll .site-header.is-revealed,
body.mouton-hide-header-until-scroll.menu-open .site-header {
	transform: translateY( 0 );
	visibility: visible;
}

.site-header__inner {
	max-width: 100%;
	margin-inline: auto;
	padding: clamp( 1.65rem, 4.5vh, 2.35rem ) clamp( 1.5rem, 3.2vw, 2.4rem ) clamp( 1rem, 2vh, 1.25rem );
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	pointer-events: none;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	flex: 1 1 auto;
	pointer-events: auto;
}

.site-branding__logo {
	--site-logo-color: #fff;
	--site-logo-icon-color: #fff;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 8px;
	background: transparent;
	border: 0;
	color: var( --site-logo-color );
	text-decoration: none;
}

.site-branding__logo .hp-logo__svg {
	display: block;
	width: auto;
	height: clamp( 28px, 4.8vw, 40px );
	aspect-ratio: 379.65 / 45;
	filter: drop-shadow( 0 2px 10px rgba( 0, 0, 0, 0.35 ) );
}

.site-branding__logo .hp-logo__text path {
	fill: currentColor;
}

.site-branding__logo .hp-logo__icon path {
	fill: var( --site-logo-icon-color );
}

.site-branding__logo img {
	width: auto;
	height: clamp( 28px, 4.8vw, 40px );
	aspect-ratio: 379.65 / 45;
	object-fit: contain;
	filter: drop-shadow( 0 2px 10px rgba( 0, 0, 0, 0.35 ) );
}

/* 明るい背景のページ用: body に mouton-logo-on-light を付与 */
.mouton-logo-on-light .site-branding__logo {
	--site-logo-color: #231815;
	--site-logo-icon-color: #231815;
}

.site-description {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	color: var( --color-text-muted );
}

/* ハンバーガー — 3本線のみ・固定位置で開閉時に × に変形 */
.menu-toggle {
	position: fixed;
	top: clamp( 1.65rem, 4.5vh, 2.35rem );
	right: clamp( 1.5rem, 3.2vw, 2.4rem );
	z-index: 1201;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 7px;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.menu-toggle__bar {
	display: block;
	width: 1.75rem;
	height: 2.5px;
	background: #1a2b48;
	border-radius: 1px;
	transition:
		transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ),
		opacity 0.25s ease,
		background 0.25s ease;
}

body.mouton-hide-header-until-scroll .menu-toggle__bar {
	background: #fff;
	filter: drop-shadow( 0 1px 4px rgba( 0, 0, 0, 0.45 ) );
}

body.menu-open .menu-toggle__bar {
	background: #fff;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child( 1 ) {
	transform: translateY( 9.5px ) rotate( 45deg );
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child( 2 ) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child( 3 ) {
	transform: translateY( -9.5px ) rotate( -45deg );
}

.nav-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	visibility: hidden;
	pointer-events: none;
}

body.menu-open .nav-modal {
	visibility: visible;
	pointer-events: auto;
}

.nav-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 12, 18, 36, 0.42 );
	opacity: 0;
	transition: opacity 0.45s ease;
}

body.menu-open .nav-modal__backdrop {
	opacity: 1;
}

.nav-modal__panel {
	position: absolute;
	top: clamp( 0.65rem, 2vh, 1rem );
	right: clamp( 0.65rem, 2vw, 1rem );
	bottom: clamp( 0.65rem, 2vh, 1rem );
	width: min( calc( 100% - 1.3rem ), 22.5rem );
	max-width: 100%;
	display: flex;
	flex-direction: column;
	padding: clamp( 4.5rem, 12vh, 5rem ) clamp( 1.25rem, 3vw, 1.75rem ) clamp( 1.25rem, 3vw, 1.75rem );
	border-radius: 1.25rem;
	background: linear-gradient( 165deg, #2a4578 0%, #1a2b48 52%, #152238 100% );
	color: #fff;
	box-shadow: -12px 0 48px rgba( 0, 0, 0, 0.28 );
	transform: translate3d( calc( 100% + 1.5rem ), 0, 0 );
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
	overflow: hidden;
}

body.menu-open .nav-modal__panel {
	transform: translate3d( 0, 0, 0 );
}

.nav-modal__nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.main-navigation li {
	margin: 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
}

.main-navigation li:last-child {
	border-bottom: 0;
}

.main-navigation a {
	display: block;
	padding: 0.9rem 0;
	color: rgba( 255, 255, 255, 0.95 );
	text-decoration: none;
	font-size: clamp( 0.95rem, 2.2vw, 1.05rem );
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: 0.04em;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus-visible {
	color: #fff;
	opacity: 0.88;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
	color: #e8d4b0;
}

.main-navigation .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem 0.75rem;
	border-bottom: 0;
}

.main-navigation .sub-menu a {
	padding: 0.55rem 0;
	font-size: 0.9rem;
	font-weight: 400;
	opacity: 0.88;
}

.nav-modal__footer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: clamp( 1.25rem, 3vh, 1.75rem );
}

.nav-modal__shop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	border: 1px solid rgba( 255, 255, 255, 0.85 );
	border-radius: 999px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.nav-modal__shop:hover,
.nav-modal__shop:focus-visible {
	background: #fff;
	color: #1a2b48;
}

.nav-modal__contact {
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 0.875rem;
	text-align: center;
	text-decoration: none;
}

.nav-modal__contact:hover,
.nav-modal__contact:focus-visible {
	color: #fff;
}

@media ( max-width: 480px ) {
	.nav-modal__panel {
		top: 0;
		right: 0;
		bottom: 0;
		width: min( 100%, 20rem );
		border-radius: 1rem 0 0 1rem;
		padding-top: clamp( 4.25rem, 13vh, 4.75rem );
	}
}

/* Typography — pages */
.page-title,
.entry-title {
	margin-top: 0;
	color: var( --color-text );
}

.entry-header {
	margin-bottom: 1.5rem;
}

.entry-meta {
	font-size: 0.875rem;
	color: var( --color-text-muted );
}

.entry-content {
	max-width: var( --content-max );
}

.entry-content > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	color: var( --color-text );
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin-bottom: 1rem;
}

.entry-content blockquote {
	margin: 1.5rem 0;
	padding-left: 1rem;
	border-left: 3px solid var( --color-accent );
	color: var( --color-text-muted );
}

/* Blocks */
.wp-block-image figcaption {
	font-size: 0.875rem;
	color: var( --color-text-muted );
}

.alignwide {
	max-width: var( --wide-max ) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.alignfull {
	max-width: none !important;
	width: 100vw;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
}

/* Front page — ヒーローはダークのまま、`.front-scroll` 内セクションはライトパレット */
.site-main--front {
	flex: 0 1 auto;
	max-width: none;
	padding: 0;
	--fs-surface-a: #e8f1f8;
	--fs-surface-b: #ffffff;
	--fs-heading: #1a2b48;
	--fs-navy: #1a2b48;
	--fs-body: #4a5568;
	--fs-muted: #64748b;
	--fs-gold: #b8a078;
	--fs-border: rgba( 26, 43, 72, 0.12 );
	--fs-media-bg: #f0f6fa;
	--fs-card-bg: #ffffff;
	--fs-card-shadow: 0 4px 20px rgba( 26, 43, 72, 0.08 );
	--fs-button-bg: #1a2b48;
	--fs-button-text: #ffffff;
	--fs-link: #1e4a6e;
}

.entry--front {
	margin: 0;
}

/* ヒーローはスナップ対象外（通常スクロール） */
.hero--front {
	position: relative;
	background: linear-gradient( 165deg, var( --color-bg-secondary ) 0%, var( --color-bg-primary ) 55%, #1e1e40 100% );
	padding: 0;
	border-bottom: 1px solid var( --color-border );
}

/*
 * ヒーロー先頭: 読み込み時にマスク＋コピーを表示し、hero-reveal.js がフェードアウト。
 */
.hero--front[data-hero-reveal-root] {
	--hero-mask-p: 0;
	--hero-content-p: 0;
	--hero-char-p: 0;
	--font-hero-reveal: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
	--hero-mask-density: calc( 0.06 + var( --hero-mask-p ) * var( --hero-mask-p ) * 0.74 );
	--hero-mask-blur: calc( 2px + var( --hero-mask-p ) * 12px );
}

.hero--front.hero--reveal-intro[data-hero-reveal-root] {
	--hero-mask-p: 1;
	--hero-content-p: 1;
	--hero-char-p: 1;
}

.hero__reveal {
	position: absolute;
	inset: 0;
	z-index: 50;
	overflow: visible;
	isolation: isolate;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1.1s cubic-bezier( 0.4, 0, 0.15, 1 ), visibility 0s linear 1.1s;
}

.hero__reveal.hero__reveal--visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 0.55s cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 0s;
}

.hero__reveal.hero__reveal--fade-out {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 1.1s cubic-bezier( 0.4, 0, 0.15, 1 ), visibility 0s linear 1.1s;
}

.hero__reveal-curtain {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #fff;
	opacity: var( --hero-mask-density );
	backdrop-filter: blur( var( --hero-mask-blur ) );
	-webkit-backdrop-filter: blur( var( --hero-mask-blur ) );
	will-change: opacity;
}

/* マスクの上：テキスト＋キャラ（カーテンより必ず手前） */
.hero__reveal-stage {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hero__reveal-copy {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min( 92%, 38rem );
	max-width: 38rem;
	margin: auto;
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	text-align: center;
	color: #1a2b48;
	font-family: var( --font-hero-reveal );
	opacity: var( --hero-content-p );
	transform: translate3d( 0, calc( ( 1 - var( --hero-content-p ) ) * 1.25vh ), 0 );
	filter: blur( calc( ( 1 - var( --hero-content-p ) ) * 3px ) );
	pointer-events: none;
	will-change: opacity, transform, filter;
}

.hero__reveal-hint {
	position: absolute;
	left: 50%;
	top: clamp( 1.25rem, 5vh, 3rem );
	z-index: 52;
	transform: translateX( -50% );
	margin: 0;
	color: rgba( 255, 255, 255, 0.92 );
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.55 );
	pointer-events: none;
	opacity: calc( 1 - clamp( 0, var( --hero-mask-p ) / 0.22, 1 ) );
	transition: opacity 0.4s ease;
}

.hero__reveal-hint-icon {
	display: block;
	font-size: 1.5rem;
	line-height: 1;
	animation: hero-reveal-hint-bounce 1.6s ease-in-out infinite;
}

@keyframes hero-reveal-hint-bounce {
	0%,
	100% {
		transform: translateY( 0 );
	}
	50% {
		transform: translateY( -7px );
	}
}

.hero__reveal-eyebrow {
	margin: 0 0 0.85rem;
	font-size: clamp( 0.72rem, 1.3vw, 0.88rem );
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	opacity: calc( 0.55 + var( --hero-content-p ) * 0.45 );
	color: #5a6578;
}

.hero__reveal-title {
	margin: 0 0 1.1rem;
	font-size: clamp( 1.55rem, 4.5vw, 2.5rem );
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: 0.08em;
	line-break: strict;
	word-break: keep-all;
	color: #1a2b48;
}

.hero__reveal-title-line {
	display: block;
}

.hero__reveal-title-line:first-child {
	white-space: nowrap;
}

.hero__reveal-chars {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hero__reveal-char {
	position: absolute;
	bottom: 0;
	width: clamp( 11rem, 42vw, 26rem );
	height: auto;
	max-height: min( 58vh, 28rem );
	object-fit: contain;
	object-position: bottom center;
	pointer-events: none;
	opacity: var( --hero-char-p );
	/* 黒背景 PNG を白マスク上で透過扱いに（左右の黒余白を消す） */
	mix-blend-mode: screen;
	transform: translate3d( 0, calc( ( 1 - var( --hero-char-p ) ) * 14vh ), 0 );
	filter: drop-shadow( 0 10px 24px rgba( 26, 43, 72, 0.1 ) );
	will-change: opacity, transform;
}

.hero__reveal-char--left {
	left: 0;
	object-position: left bottom;
}

.hero__reveal-char--right {
	right: 0;
	object-position: right bottom;
}

/* イントロを開くボタン（デザインは後で調整） */
.hero__reveal-open {
	position: absolute;
	right: clamp( 1rem, 3.5vw, 2rem );
	bottom: clamp( 1rem, 4vh, 2.25rem );
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 2px solid rgba( 255, 255, 255, 0.72 );
	border-radius: 50%;
	background: rgba( 26, 43, 72, 0.5 );
	color: #fff;
	font: inherit;
	cursor: pointer;
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.28 );
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hero__reveal-open-icon {
	font-size: 1.15rem;
	line-height: 1;
}

.hero__reveal-open:hover,
.hero__reveal-open:focus-visible {
	transform: translateY( -2px );
	background: rgba( 26, 43, 72, 0.72 );
	border-color: #fff;
	outline: none;
}

.hero--reveal-active .hero__reveal-open {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* 一時ランディング: 星座CTA（牡羊座の線・白丸のみ） */
.hero__reveal-cta {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0.55rem 0 0;
	padding: 0.35rem 0.15rem;
	border: none;
	background: none;
	color: #fff;
	cursor: pointer;
	outline: none;
	pointer-events: auto;
	animation: hero-reveal-cta-twinkle 3.4s ease-in-out infinite;
	transition: opacity 0.35s ease;
}

.hero__reveal-cta-constellation {
	display: block;
	width: clamp( 6.5rem, 14vw, 9.5rem );
	height: auto;
	aspect-ratio: 120 / 72;
	pointer-events: none;
	stroke: rgba( 150, 200, 255, 0.32 );
	stroke-width: 0.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	transition: stroke 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}

.hero__reveal-cta-constellation circle {
	fill: rgba( 255, 255, 255, 0.92 );
	stroke: none;
}

.hero__reveal-cta:hover .hero__reveal-cta-constellation,
.hero__reveal-cta:focus-visible .hero__reveal-cta-constellation {
	transform: scale( 1.08 );
	stroke: rgba( 255, 255, 255, 0.88 );
	filter: drop-shadow( 0 0 10px rgba( 255, 255, 255, 0.85 ) )
		drop-shadow( 0 0 20px rgba( 100, 150, 255, 0.55 ) )
		drop-shadow( 0 0 34px rgba( 50, 100, 255, 0.35 ) );
}

.hero__reveal-cta:active .hero__reveal-cta-constellation {
	transform: scale( 0.94 );
	filter: drop-shadow( 0 0 6px rgba( 255, 255, 255, 0.8 ) );
}

.hero--reveal-active .hero__reveal-cta {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

@keyframes hero-reveal-cta-twinkle {
	0%,
	100% {
		opacity: 0.9;
		transform: scale( 1 );
	}

	40% {
		opacity: 0.62;
	}

	70% {
		opacity: 1;
		transform: scale( 1.03 );
	}
}

/* ═══════════════════════════════════════════════════
   一時ランディング（街並みヒーロー非表示 → 紺→星→丘の段階表示）
   ═══════════════════════════════════════════════════ */

/* ヒーローに 100vh を確保（city-hero を消すと高さがゼロになるため）
   overflow は visible のまま — 地面・プロダクトが下の Store セクションとつながる */
body.mouton-front-hero-temp .hero--front-temp {
	height: 100vh;
	min-height: 600px;
	overflow: hidden;
	background: #1b2b52;
}

body.mouton-front-hero-temp .hero--front-temp .hero__visual {
	position: relative;
	height: 100%;
	background: #1b2b52;
}

/* city-hero（街並み画像）は非表示 */
body.mouton-front-hero-temp .hero--front-temp .city-hero,
body.mouton-front-hero-temp .hero--front-temp .hero__company-logo,
body.mouton-front-hero-temp .hero--front-temp .hero__reveal-open {
	display: none !important;
}

/* sealed でも visual を隠さない */
body.mouton-front-hero-temp .hero--front-temp.hero--store-iris-sealed .hero__visual {
	visibility: visible;
}

/* iris を前面に出す（ブート進行で星・丘・UI を段階表示） */
body.mouton-front-hero-temp .hero-store-iris--temp-landing {
	--hero-store-post-bg-p: 1;
	--hero-store-post-content-p: 0;
	--hero-store-post-fadeout-p: 1;
	--hero-store-post-logo-shift-p: 1;
	--hero-boot-stars-p: 0;
	--hero-boot-hill-p: 0;
	--hero-boot-ui-p: 0;
	pointer-events: auto;
}

/* iris マスク（白い円）を消す */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__layer {
	display: none !important;
}

/* シーン枠は常に表示（中身は段階フェード） */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__scene {
	visibility: visible;
}

/* 再生ボタンも星出現まで隠す */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__audio {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing.is-boot-stars-on .hero-store-iris__audio.is-visible {
	opacity: var( --hero-boot-stars-p ) !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transition: opacity 1.2s cubic-bezier( 0.16, 1, 0.3, 1 ), visibility 1.2s;
}

/* 最初は紺のみ */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__backdrop {
	opacity: 1;
}

/* 星空グラデ＋星 */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__bg {
	opacity: var( --hero-boot-stars-p );
	transition: opacity 1.35s cubic-bezier( 0.16, 1, 0.3, 1 );
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__stars-wrap {
	opacity: calc( var( --hero-boot-stars-p ) * 0.95 );
	transition: opacity 1.45s cubic-bezier( 0.16, 1, 0.3, 1 );
}

/* 丘 */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__hill {
	opacity: var( --hero-boot-hill-p ) !important;
	visibility: visible;
	transform: translate3d( 0, calc( ( 1 - var( --hero-boot-hill-p ) ) * 2.75rem ), 0 );
	transition:
		opacity 1.5s cubic-bezier( 0.16, 1, 0.3, 1 ),
		transform 1.55s cubic-bezier( 0.16, 1, 0.3, 1 );
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__store {
	display: none !important;
}

/* オレンジ地面は出さず、丘の緑から紙カタログへ直結 */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__ground-piece {
	display: none !important;
}

/* UI（ロゴ画像・お知らせ・歩行）は丘の後に */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__signage-slot {
	visibility: visible !important;
	pointer-events: none;
	opacity: var( --hero-boot-ui-p ) !important;
	transform: none !important;
	transition: opacity 1.05s cubic-bezier( 0.16, 1, 0.3, 1 );
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing.is-boot-complete .hero-store-iris__signage-slot {
	pointer-events: auto;
}

/* 左ロゴ枠は常に配置。画像は UI、下の星座は星と同時 */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-slot--left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: none;
	z-index: 4;
	max-width: min( 26rem, 42vw );
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-toggle {
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	opacity: var( --hero-boot-ui-p );
	pointer-events: none;
	transition: opacity 1.05s cubic-bezier( 0.16, 1, 0.3, 1 ), filter 0.25s ease;
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing.is-boot-complete .hero-store-iris__logo-toggle {
	pointer-events: auto;
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-toggle:hover .hero-store-iris__logo,
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-toggle:focus-visible .hero-store-iris__logo {
	filter: drop-shadow( 0 0 12px rgba( 255, 255, 255, 0.35 ) );
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-toggle:focus-visible {
	outline: 2px solid rgba( 255, 255, 255, 0.7 );
	outline-offset: 4px;
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-slot--left .hero-store-iris__logo {
	opacity: 1;
	width: min( 100%, clamp( 200px, 28vw, 360px ) );
	pointer-events: none;
}

/* 解説文: ロゴ直下。閉じているときは高さを取らない */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__copy {
	position: static;
	right: auto;
	top: auto;
	max-width: min( 22rem, 100% );
	margin: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0 !important;
	visibility: hidden;
	transform: none;
	pointer-events: none;
	transition:
		opacity 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ),
		visibility 0.4s,
		max-height 0.45s cubic-bezier( 0.16, 1, 0.3, 1 ),
		margin 0.45s cubic-bezier( 0.16, 1, 0.3, 1 );
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing.is-store-copy-open .hero-store-iris__copy {
	max-height: 22rem;
	margin: 0.85rem 0 0;
	opacity: 1 !important;
	visibility: visible;
	pointer-events: auto;
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__lead {
	font-size: clamp( 0.75rem, 1.05vw, 0.9375rem );
	line-height: 1.85;
	color: rgba( 255, 255, 255, 0.88 );
}

/* twinkle の opacity 上書きで先に見えないよう、星と同じゲート＋同タイミング */
body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-slot--left .hero__reveal-cta {
	z-index: 70;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	animation: none !important;
	transition: opacity 1.45s cubic-bezier( 0.16, 1, 0.3, 1 ), visibility 1.45s;
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing.is-boot-stars-on .hero-store-iris__logo-slot--left .hero__reveal-cta {
	opacity: var( --hero-boot-stars-p );
	visibility: visible;
	pointer-events: auto;
}

/* フェード完了後にきらめき（アニメの opacity が出現を奪わない） */
body.mouton-front-hero-temp .hero-store-iris--temp-landing.is-boot-complete .hero-store-iris__logo-slot--left .hero__reveal-cta {
	animation: hero-reveal-cta-twinkle 3.4s ease-in-out infinite !important;
}

body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__walker {
	opacity: var( --hero-boot-ui-p );
	transition: opacity 1.05s cubic-bezier( 0.16, 1, 0.3, 1 );
}

body.mouton-front-hero-temp .hero__reveal {
	z-index: 80;
}

@media ( prefers-reduced-motion: reduce ) {
	body.mouton-front-hero-temp .hero-store-iris--temp-landing {
		--hero-boot-stars-p: 1;
		--hero-boot-hill-p: 1;
		--hero-boot-ui-p: 1;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__bg,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__stars-wrap,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__hill,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__signage-slot,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-toggle,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-slot--left .hero__reveal-cta,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__walker {
		transition: none;
		transform: none;
	}
}

@media ( max-width: 767px ) {
	/* 一時ランディング SP: ロゴ→星座→サイネージを縦に中央配置 */
	body.mouton-front-hero-temp .hero--front-temp {
		height: 100svh;
		min-height: 100svh;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-slot--left {
		display: flex !important;
		left: 50%;
		right: auto;
		/* ヘッダーロゴと被らないよう、ヘッダー下から開始 */
		top: calc( var( --header-height, 4rem ) + clamp( 1.15rem, 3.5vh, 1.75rem ) );
		transform: translateX( -50% );
		align-items: center;
		width: min( 18rem, 88vw );
		max-width: min( 18rem, 88vw );
		z-index: 6;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-slot--left .hero-store-iris__logo {
		width: min( 100%, clamp( 160px, 58vw, 240px ) );
		margin-inline: auto;
	}

	/* SP: ロゴタップでの解説表示はスペース都合で無効 */
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-toggle,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing.is-boot-complete .hero-store-iris__logo-toggle {
		pointer-events: none !important;
		cursor: default;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-toggle:hover .hero-store-iris__logo,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-toggle:focus-visible .hero-store-iris__logo {
		filter: none;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__copy,
	body.mouton-front-hero-temp .hero-store-iris--temp-landing.is-store-copy-open .hero-store-iris__copy {
		display: none !important;
		max-height: 0 !important;
		margin: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__logo-slot--left .hero__reveal-cta {
		margin-top: 0.35rem;
		justify-content: center;
		width: 100%;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__lead {
		font-size: 0.8125rem;
		line-height: 1.8;
		text-align: center;
		letter-spacing: 0.04em;
	}

	/* サイネージ: 中央・ロゴ群の下（desktop の transform:none を上書き） */
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__signage-slot {
		left: 50%;
		right: auto;
		top: calc( var( --header-height, 4rem ) + clamp( 9.5rem, 26vh, 12.5rem ) );
		bottom: auto;
		width: min( 22.5rem, calc( 100vw - 1.25rem ) );
		max-width: calc( 100vw - 1.25rem );
		transform: translateX( -50% ) !important;
		overflow: visible;
		z-index: 5;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-cosmic-signage {
		--cosmic-w: min( 22.5rem, calc( 100vw - 1.25rem ) );
		--cosmic-scale: 1;
		--cosmic-chrome-top: 36px;
		--cosmic-chrome-bottom: 34px;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-cosmic-signage__wrap {
		margin-inline: auto;
	}

	/* 再生ボタンは中央衝突を避けて右上へ */
	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__audio {
		top: clamp( 4.5rem, 11vh, 6rem );
		left: auto;
		right: clamp( 0.75rem, 3vw, 1.25rem );
		transform: none;
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__audio-icon {
		width: clamp( 44px, 12vw, 56px );
		height: clamp( 44px, 12vw, 56px );
	}

	body.mouton-front-hero-temp .hero-store-iris--temp-landing .hero-store-iris__walker {
		width: clamp( 3.5rem, 16vw, 5.5rem );
	}
}

@media ( max-width: 768px ) {
	.hero__reveal-cta-constellation {
		width: clamp( 5.5rem, 38vw, 7.5rem );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hero__reveal-cta {
		animation: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hero__reveal {
		transition: none;
	}

	.hero--front.hero--reveal-intro[data-hero-reveal-root] {
		--hero-mask-p: 0;
		--hero-content-p: 0;
		--hero-char-p: 0;
	}

	.hero__reveal-curtain {
		transform: none;
	}

	.hero__reveal-copy,
	.hero__reveal-char {
		opacity: 1;
		transform: none;
		filter: none;
		mix-blend-mode: normal;
	}

	.hero__reveal-chars {
		position: static;
	}
}

/* 画面幅いっぱいのビジュアル */
.hero__visual {
	position: relative;
	width: 100%;
	margin: 0;
}

/* ヒーロー中央やや下：会社ロゴ（街灯完了＋遅延後、部屋カードと同タイミングでふわっと）→ #section-about */
a.hero__company-logo {
	position: absolute;
	left: 50%;
	top: min( 76%, calc( 100% - 5rem ) );
	transform: translate( -50%, -50% );
	z-index: 4;
	width: min( 280px, 48vw );
	max-width: 100%;
	pointer-events: none;
	line-height: 0;
	text-decoration: none;
	opacity: 0;
	transition: opacity 1.45s cubic-bezier( 0.18, 0.7, 0.12, 1 );
}

.hero__company-logo-img {
	display: block;
	width: 100%;
	height: auto;
	transform: translateY( 18px ) scale( 0.96 );
	filter: drop-shadow( 0 12px 40px rgba( 0, 0, 0, 0.55 ) );
	transition:
		transform 1.4s cubic-bezier( 0.16, 0.78, 0.12, 1 ),
		filter 1.45s cubic-bezier( 0.18, 0.7, 0.12, 1 );
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* a 付きセレクタより詳細度を上げないと opacity:0 が勝って表示されない */
a.hero__company-logo.hero__company-logo--visible {
	opacity: 1;
	pointer-events: auto;
}

a.hero__company-logo.hero__company-logo--visible .hero__company-logo-img {
	transform: translateY( 0 ) scale( 1 );
	filter: drop-shadow( 0 16px 48px rgba( 0, 0, 0, 0.62 ) );
}

@media ( prefers-reduced-motion: no-preference ) {
	a.hero__company-logo.hero__company-logo--visible:hover .hero__company-logo-img,
	a.hero__company-logo.hero__company-logo--visible:focus-visible .hero__company-logo-img {
		transform: translateY( -6px ) scale( 1.04 );
		filter: drop-shadow( 0 20px 56px rgba( 0, 0, 0, 0.68 ) );
	}

	a.hero__company-logo.hero__company-logo--visible:focus-visible {
		outline: 2px solid rgba( 255, 255, 255, 0.65 );
		outline-offset: 6px;
		border-radius: 4px;
	}
}

@media ( max-width: 480px ) {
	a.hero__company-logo {
		width: min( 220px, 72vw );
		top: min( 72%, calc( 100% - 4.5rem ) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	a.hero__company-logo,
	.hero__company-logo-img {
		transition: none;
	}

	.hero__company-logo-img {
		transform: none;
		filter: drop-shadow( 0 14px 40px rgba( 0, 0, 0, 0.55 ) );
	}

	a.hero__company-logo.hero__company-logo--visible .hero__company-logo-img {
		transform: none;
	}
}

/* ヒーロー上の部屋カード（街灯アニメ後に表示。将来 --tl / --bl / --tr を追加） */
.hero-room-cards {
	position: absolute;
	inset: 0;
	/* .peek-chars (z-index 40) より手前に表示 */
	z-index: 45;
	pointer-events: none;
	display: block;
}

.hero-room-card {
	position: absolute;
	pointer-events: auto;
	display: block;
	max-width: min( 400px, 46vw );
	width: min( 400px, 46vw );
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: transparent;
	/* インライン要素由来の「謎の隙間」を防ぐ */
	line-height: 0;
	font-size: 0;
	opacity: 0;
	transform: translate3d( 0, 18px, 0 ) scale( 0.96 );
	transition:
		opacity 1.45s cubic-bezier( 0.18, 0.7, 0.12, 1 ),
		transform 1.4s cubic-bezier( 0.16, 0.78, 0.12, 1 );
}

.hero-room-card--visible {
	opacity: 1;
	transform: translate3d( 0, 0, 0 ) scale( 1 );
}

.hero-room-card:hover,
.hero-room-card:focus-visible {
	outline: none;
}

/* 角丸矩形への box-shadow は透明部分でも矩形に乗り「透明の枠」に見えるため、画像に drop-shadow */
.hero-room-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	filter: drop-shadow( 0 10px 32px rgba( 0, 0, 0, 0.42 ) );
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

@media ( prefers-reduced-motion: no-preference ) {
	.hero-room-card img {
		transition: filter 0.35s ease;
	}

	.hero-room-card.hero-room-card--visible:hover,
	.hero-room-card.hero-room-card--visible:focus-visible {
		transform: translate3d( 0, -10px, 0 ) scale( 1.06 );
		z-index: 2;
	}

	.hero-room-card.hero-room-card--visible:hover img,
	.hero-room-card.hero-room-card--visible:focus-visible img {
		filter: drop-shadow( 0 16px 40px rgba( 0, 0, 0, 0.48 ) );
	}
}

.hero-room-card--br {
	right: clamp( 1.25rem, 3.5vw, 2.75rem );
	bottom: clamp( 1.25rem, 3.5vw, 2.75rem );
}

@media ( prefers-reduced-motion: reduce ) {
	.hero-room-card {
		transition: none;
	}
}

@media ( max-width: 480px ) {
	.hero-room-card {
		max-width: min( 280px, 54vw );
		width: min( 280px, 54vw );
	}
}

/* トップ: 同一ページ内アンカーをスムーズに（部屋カードの # リンク用） */
html:has( body.mouton-hide-header-until-scroll ) {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html:has( body.mouton-hide-header-until-scroll ) {
		scroll-behavior: auto;
	}
}

/* 固定ヘッダー分の余白（アンカー着地位置） */
body.mouton-hide-header-until-scroll .front-scroll .front-section[ id ] {
	scroll-margin-top: calc( var( --header-height ) + 1rem );
}

/* ── Mejiro Mark VI: 背景 mark6.webp ＋ロゴ・解説・CTA（明るい白みトーン） ── */
.front-section.front-mejiro {
	position: relative;
	isolation: isolate;
	min-height: clamp( 26rem, 82vh, 48rem );
	padding: clamp( 2rem, 5vw, 3.5rem ) clamp( 1rem, 4vw, 2rem );
	overflow: hidden;
	background: #f0f4fa;
	border-top: 1px solid var( --color-border );
}

.site-main--front .front-section.front-mejiro {
	border-top-color: var( --fs-border );
}

.front-mejiro__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.front-mejiro__bg {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.front-mejiro__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var( --wide-max );
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp( 1.25rem, 3vw, 2rem );
}

.front-mejiro__logo {
	display: block;
	width: auto;
	max-width: min( 300px, 78vw );
	height: auto;
	filter: drop-shadow( 0 4px 20px rgba( 26, 43, 72, 0.12 ) );
}

.front-mejiro__copy {
	width: 100%;
	max-width: 38rem;
	padding: clamp( 1.25rem, 3vw, 1.75rem ) clamp( 1.25rem, 3vw, 2rem );
	border-radius: 16px;
	background: rgba( 255, 255, 255, 0.92 );
	backdrop-filter: blur( 12px );
	-webkit-backdrop-filter: blur( 12px );
	border: 1px solid rgba( 26, 43, 72, 0.08 );
	box-shadow:
		0 8px 40px rgba( 26, 43, 72, 0.08 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.9 );
}

.front-mejiro__title {
	margin: 0 0 1.1rem;
	font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", sans-serif;
	font-size: clamp( 1.6rem, 3.6vw, 2.35rem );
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.25;
	color: var( --fs-heading, #1a2b48 );
}

.front-mejiro__lead {
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.9;
	color: var( --fs-body, #4a5568 );
}

.front-mejiro__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-width: min( 22rem, 100% );
	padding: 0.95rem 1.1rem 0.95rem 1.35rem;
	border-radius: 14px;
	border: 1px solid color-mix( in srgb, var( --fs-heading, #1a2b48 ) 35%, transparent );
	background: transparent;
	color: var( --fs-heading, #1a2b48 );
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.front-mejiro__btn-text {
	font-size: 1.05rem;
}

.front-mejiro__btn:hover,
.front-mejiro__btn:focus-visible {
	transform: translateY( -1px );
	background: color-mix( in srgb, #fff 88%, var( --fs-link, #2b6aa6 ) 12% );
	border-color: color-mix( in srgb, var( --fs-link, #2b6aa6 ) 55%, transparent );
	outline: none;
}

.front-mejiro__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: color-mix( in srgb, var( --fs-heading, #1a2b48 ) 90%, #fff );
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
}

@media ( max-width: 540px ) {
	.front-mejiro__bg {
		object-position: center center;
	}

	.front-mejiro__copy {
		padding: 1.1rem 1.15rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.front-mejiro__btn:hover,
	.front-mejiro__btn:focus-visible {
		transform: none;
	}
}

.hero__intro {
	padding: clamp( 1.5rem, 4vw, 2.5rem ) clamp( 1rem, 4vw, 2rem );
	background: linear-gradient( 165deg, transparent 0%, rgba( 26, 26, 53, 0.35 ) 100% );
}

.hero__intro-inner {
	max-width: var( --wide-max );
	margin-inline: auto;
}

/* City hero: background PNG + SVG overlay (animation.html 準拠) */
.city-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0;
	overflow: visible;
	border: none;
	border-bottom: 1px solid var( --color-border );
	background: #0d1420;
}

/* トップテンプレ: ビジュアルをビューポート高さいっぱい */
body.mouton-hide-header-until-scroll .city-hero {
	height: 100vh;
	height: 100dvh;
	min-height: 100vh;
	min-height: 100dvh;
	aspect-ratio: auto;
}

.city-hero__bg,
.city-hero__svg,
.city-hero__board {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.city-hero__bg {
	z-index: 1;
	object-fit: cover;
}

.city-hero__svg {
	z-index: 2;
	pointer-events: none;
}

/* 電光掲示板（board.svg・viewBox 2726×1568＝街オーバーレイと同一） */
.city-hero__board {
	z-index: 3;
	pointer-events: none;
	overflow: visible;
}

.city-hero__board-panel {
	fill: #38332e;
}

/* 電光掲示板マーキーは foreignObject 内のインライン <style> で制御 */

.city-hero .city-cls-2,
.city-hero .city-cls-3,
.city-hero .city-cls-4 {
	fill: #fff7a1 !important;
	stroke: none !important;
	opacity: 0;
	transition: opacity 0.6s ease-in-out, filter 0.6s ease-in-out;
	pointer-events: none;
}

.city-hero .is-active {
	opacity: 1 !important;
	filter: drop-shadow( 0 0 12px rgba( 255, 247, 161, 0.9 ) );
}

.city-hero .city-cls-1 {
	fill: none !important;
}

.hero__title {
	margin: 0 0 0.75rem;
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	line-height: 1.2;
}

.hero__lead {
	margin: 0;
	font-size: 1.125rem;
	color: var( --color-text-muted );
}

/*
 * トップ: .front-section のみスナップ。ヒーローでは JS が html.mouton-front-snap--on を外す。
 * 常時 html に mandatory を付けない（先頭スナップが About だけになりヒーローが飛ばされるため）。
 */
html.mouton-front-snap--on:has( .front-scroll ) {
	scroll-snap-type: none;
	scroll-padding-top: calc( var( --header-height ) + 0.75rem );
}

@media ( prefers-reduced-motion: reduce ) {
	html.mouton-front-snap--on:has( .front-scroll ) {
		scroll-snap-type: none;
	}
}

.peek-chars {
	position: fixed;
	inset: 0;
	z-index: 40;
	pointer-events: none;
}

.peek-chars__img {
	position: absolute;
	top: 66vh;
	width: clamp( 72px, 10vw, 120px );
	height: auto;
	opacity: 0;
	transform: translate3d( 0, 0, 0 );
	filter: drop-shadow( 0 10px 18px rgba( 0, 0, 0, 0.18 ) );
	transform-origin: 50% 60%;
}

.peek-chars__img--left {
	left: 0;
	transform:
		translate3d( calc( -70% + ( 52% * var( --peek-left, 0 ) ) ), 0, 0 )
		rotate( calc( -12deg + ( 18deg * var( --peek-left, 0 ) ) ) );
}

.peek-chars__img--right {
	right: 0;
	transform:
		translate3d( calc( 70% - ( 52% * var( --peek-right, 0 ) ) ), 0, 0 )
		rotate( calc( 12deg - ( 18deg * var( --peek-right, 0 ) ) ) );
}

.peek-chars__img {
	opacity: 0;
	transition: transform 0.32s cubic-bezier( 0.2, 0.9, 0.2, 1 ), opacity 0.32s linear;
}

.peek-chars__img--left {
	opacity: var( --peek-left, 0 );
}

.peek-chars__img--right {
	opacity: var( --peek-right, 0 );
}

@media ( max-width: 480px ) {
	.peek-chars__img {
		top: 62vh;
	}
}

.front-scroll {
	width: 100%;
}

/* トップページ：丘より下（ヒーロー外）の背景は白 */
.site-main--front {
	background-color: #fff;
}

/* ヒーロー下端の丘 → その下に地面 SVG が伸びる分の余白
   （地面 SVG のアスペクト 1280 × 1224.35 ≒ 95.65vw） */
.site-main--front .front-scroll {
	margin-top: calc( 1224.35 / 1280 * 100vw - 4px );
}

/* 一時ランディング: 旧地面キャンバス非表示のため余白不要（白い隙間防止） */
body.mouton-front-hero-temp .site-main--front .front-scroll {
	margin-top: 0;
}

.front-section {
	min-height: 100vh;
	min-height: 100dvh;
	scroll-snap-align: none;
	scroll-snap-stop: normal;
	scroll-margin-block: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 1.75rem, 5vw, 3rem ) clamp( 1rem, 4vw, 2rem );
	border-top: 1px solid var( --color-border );
	width: 100%;
	box-sizing: border-box;
}

.site-main--front .front-section {
	border-top-color: var( --fs-border );
}

/* セクション間・ヒーロー直下の区切り線（border）を出さない */
.site-main--front .hero--front {
	border-bottom: none;
}

.site-main--front .hero--front .city-hero {
	border-bottom: none;
}

.site-main--front .front-section,
.site-main--front .front-section.front-mejiro {
	border-top: none;
}

.site-main--front .front-section--band-a {
	background: var( --fs-surface-a );
}

.site-main--front .front-section--band-b {
	background: var( --fs-surface-b );
}

/* SNS: 全幅マーキーでページ横スクロールを出さない */
.front-section--sns {
	overflow-x: clip;
	align-items: flex-start;
}

/* 2カラム: イラスト + コピー（モックの 2F/3F/4F リズム） */
.front-section__grid {
	display: grid;
	gap: clamp( 1.5rem, 4vw, 2.5rem );
	align-items: center;
	width: 100%;
	max-width: var( --wide-max );
	margin-inline: auto;
	box-sizing: border-box;
}

/* About us */
.front-about {
	width: 100%;
	max-width: var( --wide-max );
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp( 1.25rem, 3vw, 2.5rem );
	align-items: start;
	position: relative;
	padding-left: clamp( 3.25rem, 7vw, 5rem );
	--about-line-duration: 10.5s;
	--about-btn-duration: 6.8s;
}

.front-about__label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding-top: 0.35rem;
	position: absolute;
	left: calc( 50% - 50vw + 0.85rem );
	top: 0;
}

.front-about__label-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 1.2rem;
	letter-spacing: 0.08em;
	color: color-mix( in srgb, var( --fs-heading, #1a2b48 ) 96%, #000 );
}

.front-about__label-line {
	display: block;
	width: 1px;
	height: clamp( 180px, 28vh, 320px );
	background: color-mix( in srgb, var( --fs-heading, #1a2b48 ) 45%, transparent );
	position: relative;
	overflow: hidden;
}

.front-about__label-line::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -30%;
	width: 12px;
	height: 72px;
	transform: translateX( -50% );
	background: linear-gradient(
		180deg,
		transparent 0%,
		color-mix( in srgb, var( --fs-link, #2b6aa6 ) 55%, #fff ) 35%,
		color-mix( in srgb, var( --fs-gold, #b8a078 ) 70%, #fff ) 55%,
		transparent 100%
	);
	opacity: 0;
	filter: blur( 0.6px );
	animation: front-about-line-glint var( --about-line-duration ) ease-in-out infinite;
}

@keyframes front-about-line-glint {
	0% { opacity: 0; transform: translate( -50%, -10% ); }
	10% { opacity: 0.95; }
	42% { opacity: 0.95; transform: translate( -50%, 250% ); }
	55% { opacity: 0; transform: translate( -50%, 320% ); }
	100% { opacity: 0; transform: translate( -50%, 320% ); }
}

.front-about__content {
	max-width: 44rem;
}

.front-about__tegaki {
	display: none;
}

.front-about__tegaki-inner {
	width: min( 320px, 28vw );
	max-width: 360px;
	opacity: 0.95;
}

.front-about__tegaki-inner svg {
	display: block;
	width: 100%;
	height: auto;
}

.front-about__tegaki-inner svg .tegaki-cls-1,
.front-about__tegaki-inner svg path {
	fill: none;
	stroke: var( --fs-heading, #1a2b48 );
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.front-about__tegaki-inner svg path {
	/* JS が dash を入れる前は見せておく */
	stroke-dasharray: none;
	stroke-dashoffset: 0;
}

.front-about__tegaki-inner:not( [data-tegaki-started="1"] ) svg path {
	stroke-dasharray: none;
	stroke-dashoffset: 0;
}

@keyframes front-about-tegaki-draw {
	to { stroke-dashoffset: 0; }
}

@media ( min-width: 900px ) {
	.front-about {
		grid-template-columns: 1fr minmax( 220px, 360px );
		align-items: center;
	}

	.front-about__content {
		grid-column: 1;
	}

	.front-about__tegaki {
		display: block;
		grid-column: 2;
		justify-self: end;
		align-self: center;
	}
}

.front-about__title {
	margin: 0 0 1.1rem;
	font-size: clamp( 1.6rem, 3.6vw, 2.4rem );
	line-height: 1.25;
	letter-spacing: 0.01em;
	color: var( --fs-heading, #1a2b48 );
	white-space: nowrap;
}

.front-about__text {
	margin: 0 0 1.75rem;
	font-size: 1rem;
	line-height: 1.9;
	color: var( --fs-body, #4a5568 );
}

.front-about__btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-width: min( 22rem, 100% );
	padding: 0.95rem 1.1rem 0.95rem 1.35rem;
	border-radius: 14px;
	border: 1px solid color-mix( in srgb, var( --fs-heading, #1a2b48 ) 35%, transparent );
	background: transparent;
	color: var( --fs-heading, #1a2b48 );
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.front-about__btn:hover,
.front-about__btn:focus-visible {
	transform: translateY( -1px );
	background: color-mix( in srgb, #fff 88%, var( --fs-link, #2b6aa6 ) 12% );
	border-color: color-mix( in srgb, var( --fs-link, #2b6aa6 ) 55%, transparent );
}

.front-about__btn-text {
	font-size: 1.05rem;
}

.front-about__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: color-mix( in srgb, var( --fs-heading, #1a2b48 ) 90%, #fff );
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	transform: translate3d( 0, 0, 0 );
	animation: front-about-btn-nudge var( --about-btn-duration ) cubic-bezier( 0.2, 0.9, 0.2, 1 ) infinite;
}

@keyframes front-about-btn-nudge {
	0%, 64% { transform: translate3d( 0, 0, 0 ) rotate( 0deg ); }
	72% { transform: translate3d( 3px, 0, 0 ) rotate( 0deg ); }
	78% { transform: translate3d( 1px, 0, 0 ) rotate( -6deg ); }
	84% { transform: translate3d( 3px, 0, 0 ) rotate( 0deg ); }
	92% { transform: translate3d( 0, 0, 0 ) rotate( 0deg ); }
	100% { transform: translate3d( 0, 0, 0 ) rotate( 0deg ); }
}

.front-about:hover .front-about__label-line::after,
.front-about:focus-within .front-about__label-line::after,
.front-about:hover .front-about__btn-icon,
.front-about:focus-within .front-about__btn-icon {
	animation-play-state: paused;
}

@media ( prefers-reduced-motion: reduce ) {
	.front-about__label-line::after,
	.front-about__btn-icon {
		animation: none !important;
	}
}

@media ( max-width: 767px ) {
	.front-about {
		padding-left: clamp( 2.75rem, 8vw, 3.5rem );
	}

	.front-about__content {
		max-width: 38rem;
	}

	.front-about__title {
		white-space: normal;
	}

	.front-about__btn {
		min-width: 100%;
	}
}

/* ==========================================================================
   Mouton Store – Canvas Layout
   ========================================================================== */
.front-store {
	position: relative;
	width: 100%;
	max-width: var( --wide-max );
	margin-inline: auto;
	min-height: clamp( 520px, 75vh, 800px );
	overflow: visible;
}

/* Store: 地面 SVG 直下 → 紙トーン製品カタログ（グラデ橋は .front-product-catalog__bridge） */
.site-main--front .front-section--store {
	position: relative;
	--fpc-lib-mix: 0;
	background-color: #3a2c17;
	background-image: linear-gradient(
		105deg,
		#3a2c17 0%,
		#5c4524 16%,
		#9e7d44 34%,
		#b89555 50%,
		#9e7d44 66%,
		#5c4524 84%,
		#3a2c17 100%
	);
	min-height: 0;
	padding: 0;
	align-items: stretch;
	justify-content: flex-start;
	margin-top: 0;
	border-top: none;
	box-shadow: none;
	display: block;
}

.site-main--front .front-section--store::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: #9fd4e8;
	opacity: var( --fpc-lib-mix );
}

.site-main--front .front-section--store::before {
	display: none;
}

/* ── ヒーロー（サックスをドーンと左に） ── */
.front-store__hero {
	position: absolute;
	left: -4%;
	bottom: -5%;
	width: auto;
	max-width: clamp( 280px, 42vw, 560px );
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	pointer-events: auto;
	transition: transform 0.4s cubic-bezier( 0.2, 0.8, 0.2, 1 );
	transform: rotate( -25deg );
	transform-origin: 30% 95%;
}

.front-store__hero-label {
	margin-top: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --color-text-muted );
	opacity: 0;
	transform: translateY( 4px );
	transition: opacity 0.25s ease, transform 0.25s ease;
	white-space: nowrap;
}

.site-main--front .front-store__hero-label {
	color: var( --fs-body );
}

.front-store__hero:hover .front-store__hero-label,
.front-store__hero:focus-visible .front-store__hero-label {
	opacity: 1;
	transform: translateY( 0 );
}

.front-store__hero img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* 縦長PNGでも「だいたい1セクション分」の高さに収める（上のセクションまで被らない） */
	max-height: calc( 100vh - clamp( 3.5rem, 9vw, 6rem ) );
	max-height: calc( 100dvh - clamp( 3.5rem, 9vw, 6rem ) );
	object-fit: contain;
	filter: drop-shadow( 4px 8px 24px rgba( 0, 0, 0, 0.25 ) );
}

.front-store__hero:hover {
	transform: rotate( -16deg ) scale( 1.03 ) translateY( -2px );
}

/* 画面幅が小さい時は、見切れを減らして「サックスがちゃんと見える」優先 */
@media ( max-width: 1024px ) {
	.front-store__hero {
		left: 2%;
		transform: rotate( -16deg );
		transform-origin: 35% 95%;
	}
}

/* ── テキストブロック（右上寄り） ── */
.front-store__body {
	position: absolute;
	top: 8%;
	right: 6%;
	z-index: 10;
	max-width: 28rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.front-store__title {
	margin: 0 0 0.75rem;
	padding: 0;
	line-height: 0;
	width: 100%;
}

.front-store__title-logo {
	display: block;
	width: auto;
	max-width: min( 100%, 24rem );
	height: auto;
	margin: 0;
	/* 黒背景ロゴを明るい店舗写真の上で自然に見せる */
	mix-blend-mode: multiply;
}

.front-store__lead,
.front-store__btn {
	width: 100%;
	max-width: 100%;
}

.front-store__lead {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var( --color-text-muted );
}

.site-main--front .front-store__lead {
	color: var( --fs-body );
}

.front-store__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.6rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 6px;
	border: none;
	background: var( --color-accent );
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.site-main--front .front-store__btn {
	background: var( --fs-button-bg );
	color: var( --fs-button-text );
	box-shadow: 0 4px 0 rgba( 184, 160, 120, 0.35 );
}

.front-store__btn:hover,
.front-store__btn:focus-visible {
	transform: translateY( -2px );
	filter: brightness( 1.06 );
	box-shadow: 0 6px 14px rgba( 0, 0, 0, 0.12 );
}

.front-store__btn-icon {
	font-size: 1.15em;
	line-height: 1;
	transition: transform 0.2s ease;
}

.front-store__btn:hover .front-store__btn-icon {
	transform: translateX( 3px );
}

/* ── 散りばめアイテム（キャンバス上に浮遊） ── */
.front-store__float {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	z-index: 5;
	transition: transform 0.35s cubic-bezier( 0.2, 0.8, 0.2, 1 ), filter 0.3s ease;
}

.front-store__float img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	filter: drop-shadow( 0 6px 18px rgba( 0, 0, 0, 0.15 ) );
	transition: filter 0.3s ease, transform 0.35s cubic-bezier( 0.2, 0.8, 0.2, 1 );
}

.front-store__float-label {
	margin-top: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var( --color-text-muted );
	opacity: 0;
	transform: translateY( 4px );
	transition: opacity 0.25s ease, transform 0.25s ease;
	white-space: nowrap;
}

.site-main--front .front-store__float-label {
	color: var( --fs-body );
}

.front-store__float:hover .front-store__float-label,
.front-store__float:focus-visible .front-store__float-label {
	opacity: 1;
	transform: translateY( 0 );
}

.front-store__float:hover,
.front-store__float:focus-visible {
	z-index: 20;
	outline: none;
}

.front-store__float:hover img,
.front-store__float:focus-visible img {
	transform: translateY( -6px ) scale( 1.1 );
	filter: drop-shadow( 0 14px 28px rgba( 0, 0, 0, 0.22 ) );
}

/* 各アイテムの配置＋サイズ（PC） */
.front-store__float--1 {
	top: 22%;
	left: 34%;
	width: clamp( 90px, 11vw, 140px );
	transform: rotate( -4deg );
}
.front-store__float--2 {
	top: 52%;
	left: 56%;
	width: clamp( 150px, 18vw, 240px );
	transform: rotate( 5deg );
}
/* Sengoku リガチャー（実画像）を他アイテムより大きく */
.front-store__float--3 {
	bottom: 8%;
	left: 27%;
	width: clamp( 213px, 25vw, 313px );
	transform: rotate( -2deg );
	z-index: 6;
}
.front-store__float--4 {
	bottom: 12%;
	right: 10%;
	width: clamp( 95px, 12vw, 150px );
	transform: rotate( 6deg );
}
.front-store__float--5 {
	top: 30%;
	right: 22%;
	width: clamp( 75px, 9vw, 115px );
	transform: rotate( -7deg );
}

/* タブレット付近: 画像同士が被らないように散りばめを再配置 */
@media ( max-width: 1024px ) {
	.front-store__float--1 { top: 22%; left: 38%; width: clamp( 80px, 12vw, 130px ); }
	.front-store__float--2 { top: 62%; left: 58%; width: clamp( 150px, 22vw, 260px ); }
	.front-store__float--3 { bottom: 10%; left: 29%; width: clamp( 180px, 28vw, 320px ); }
	.front-store__float--4 { bottom: 20%; right: 7%; width: clamp( 90px, 14vw, 160px ); }
	.front-store__float--5 { top: 32%; right: 18%; width: clamp( 70px, 11vw, 120px ); }
}

/* さらに小さい幅: 右側が窮屈になるので散りばめを少し縮小 */
@media ( max-width: 880px ) {
	.front-store__float--2 { top: 58%; left: 52%; width: clamp( 140px, 24vw, 240px ); }
	.front-store__float--3 { bottom: 9%; left: 39%; width: clamp( 170px, 30vw, 300px ); }
	.front-store__float--4 { bottom: 34%; right: 3%; width: clamp( 85px, 14vw, 150px ); }
}

/* ==========================================================================
   Mouton Used Selection（ヘッダー帯＋従来ショーケース）
   ========================================================================== */
.site-main--front .front-section--used.front-section--band-b {
	--used-mix: 1;
	--used-ghost-x: -50vw;
	position: relative;
	background: #9fd4e8;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	border: 0;
	border-top: none;
	box-shadow: none;
}

.site-main--front .front-section--used.front-section--band-b::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var( --fs-navy, #1a2b48 );
	opacity: var( --used-mix );
}

.front-used__ghost {
	position: absolute;
	left: 0;
	top: 22%;
	z-index: 0;
	margin: 0;
	padding: 0;
	width: max-content;
	max-width: none;
	/* ページ左端外側から入場 → 右へ */
	transform: translate3d( var( --used-ghost-x, -50vw ), -50%, 0 );
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
	font-size: clamp( 5.5rem, 24vw, 17rem );
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 0.85;
	color: rgba( 255, 255, 255, 0.26 );
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
	will-change: transform;
}

/* サックス帯直下は境目線を出さない（同じ紺の続き） */
.front-used-sax-marquee + .front-section--used.front-section--band-b {
	border-top: none;
}

.site-main--front .front-section--used .front-used {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	background: transparent;
	border-radius: 0;
	box-sizing: border-box;
	padding: 0;
	overflow: visible;
	box-shadow: none;
}

.front-used {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* ヘッダー帯は親の水色→紺ウォッシュをそのまま見せる */
.front-used__headband {
	padding: clamp( 2.5rem, 5.5vw, 3.75rem ) clamp( 12px, 2.8vw, 52px )
		clamp( 1.75rem, 3.5vw, 2.5rem );
	background: transparent;
}

.front-used__header {
	text-align: center;
	margin: 0;
}

.front-used__title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp( 0.65rem, 2.5vw, 1.25rem );
	margin: 0 0 0.85rem;
}

.front-used__title {
	margin: 0;
	font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
	font-size: clamp( 1.65rem, 4.2vw, 2.5rem );
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: #fff;
}

.site-main--front .front-used__title {
	color: #fff;
}

.front-used__title-brand,
.front-used__title-rest {
	color: inherit;
	font-weight: inherit;
}

.site-main--front .front-used__title-brand,
.site-main--front .front-used__title-rest {
	color: inherit;
}

.front-used__plate-logo {
	display: block;
	flex: 0 0 auto;
	width: clamp( 72px, 14vw, 120px );
	height: auto;
	cursor: pointer;
	user-select: none;
	-webkit-user-drag: none;
	transition: transform 0.1s ease-in-out;
}

.front-used__plate-logo:hover {
	animation: front-used-plate-purupuru 0.8s ease-in-out infinite;
}

@keyframes front-used-plate-purupuru {
	0% {
		transform: translate( 0, 0 ) rotate( 0deg );
	}

	10% {
		transform: translate( 1px, 0.5px ) rotate( 0.5deg );
	}

	20% {
		transform: translate( -1px, 0 ) rotate( -0.5deg );
	}

	30% {
		transform: translate( 0, -1px ) rotate( 0.2deg );
	}

	40% {
		transform: translate( 1px, -0.5px ) rotate( -0.2deg );
	}

	50% {
		transform: translate( -0.5px, 1px ) rotate( 0.3deg );
	}

	60% {
		transform: translate( -1px, 0.5px ) rotate( 0deg );
	}

	70% {
		transform: translate( 1px, 0.5px ) rotate( -0.3deg );
	}

	80% {
		transform: translate( -0.5px, -0.5px ) rotate( 0.2deg );
	}

	90% {
		transform: translate( 0.5px, 1px ) rotate( 0deg );
	}

	100% {
		transform: translate( 0, 0 ) rotate( 0deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.front-used__plate-logo:hover {
		animation: none;
	}
}

.front-used__lead {
	margin: 0 auto;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", var( --font-sans );
	font-size: clamp( 1rem, 2.2vw, 1.2rem );
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.14em;
	color: rgba( 255, 255, 255, 0.82 );
	max-width: 28rem;
}

.site-main--front .front-used__lead {
	color: rgba( 255, 255, 255, 0.82 );
}

.front-used__cta {
	display: flex;
	justify-content: center;
	margin-top: clamp( 1.5rem, 3.5vw, 2.5rem );
	padding: 0 clamp( 12px, 2.8vw, 52px ) clamp( 4rem, 8vw, 5.5rem );
}

.front-used__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.5rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 999px;
	border: none;
	background: var( --color-accent );
	color: #fff;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.front-used__btn--gradient {
	background: #b8a078;
	color: #1a2b48;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.35 );
}

.site-main--front .front-used__btn--gradient {
	background: var( --fs-gold, #b8a078 );
	color: #1a2b48;
	box-shadow: 0 4px 18px rgba( 0, 0, 0, 0.35 );
}

.front-used__btn--gradient:hover,
.front-used__btn--gradient:focus-visible {
	transform: translateY( -2px );
	filter: brightness( 1.05 );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.18 );
	outline: none;
}

.front-used__btn-icon {
	font-size: 1.1em;
	line-height: 1;
	transition: transform 0.2s ease;
}

.front-used__btn--gradient:hover .front-used__btn-icon,
.front-used__btn--gradient:focus-visible .front-used__btn-icon {
	transform: translateX( 3px );
}

/* ── ガラスショーケース（横スクロール・スナップ） ── */
.front-used__showcase-wrapper {
	width: 100%;
	max-width: min( 96vw, 1440px );
	margin-inline: auto;
	padding: clamp( 0.5rem, 2vw, 1rem ) clamp( 12px, 2.8vw, 40px ) clamp( 0.75rem, 2vw, 1.25rem );
	box-sizing: border-box;
	mask-image: linear-gradient( 90deg, transparent, #000 4%, #000 96%, transparent );
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 4%, #000 96%, transparent );
}

.front-used__showcase {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: 20px;
	padding: 30px 40px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-x;
	overscroll-behavior-x: contain;
	cursor: grab;
	box-sizing: border-box;
	background-color: rgba( 255, 255, 255, 0.05 );
	backdrop-filter: blur( 15px );
	-webkit-backdrop-filter: blur( 15px );
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	border-top-color: rgba( 255, 255, 255, 0.4 );
	border-radius: 16px;
	box-shadow:
		0 20px 40px rgba( 0, 0, 0, 0.5 ),
		inset 0 1px 0 rgba( 255, 255, 255, 0.3 ),
		inset 0 -10px 20px rgba( 0, 0, 0, 0.2 );
}

.front-used__showcase::-webkit-scrollbar {
	display: none;
}

.front-used__showcase--dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}

.front-used__showcase--dragging a {
	cursor: grabbing;
}

.front-used__showcase a.front-used__item {
	cursor: pointer;
	-webkit-user-drag: none;
}

.front-used__showcase--dragging a.front-used__item {
	cursor: grabbing;
}

.front-used__showcase .front-used__item-img,
.front-used__showcase .front-used__item-media img {
	-webkit-user-drag: none;
}

/* ── 商品カード ── */
.front-used__item {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: clamp( 280px, 22vw, 340px );
	scroll-snap-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: inherit;
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
	transition: transform 0.25s ease, filter 0.25s ease;
}

.front-used__item:hover,
.front-used__item:focus-visible {
	transform: translateY( -4px );
	filter: brightness( 1.04 );
	outline: none;
}

/* ── 商品画像 ── */
.front-used__item-media {
	margin: 0 0 15px;
	width: 100%;
	height: 450px;
	display: flex;
	flex-shrink: 0;
	align-items: flex-start;
	justify-content: center;
	background: transparent;
}

.front-used__item-media--placeholder {
	background: rgba( 0, 0, 0, 0.25 );
	border-radius: 8px;
}

.front-used__item-img,
.front-used__item-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center top;
	filter: drop-shadow( 0 10px 10px rgba( 0, 0, 0, 0.5 ) );
	transition: transform 0.25s ease;
}

@media ( max-width: 767px ) {
	.front-used__item-img,
	.front-used__item-media img {
		/* SP では drop-shadow が全サムネで合成コストになる */
		filter: none;
	}
}

.front-used__item:hover .front-used__item-img,
.front-used__item:hover .front-used__item-media img,
.front-used__item:focus-visible .front-used__item-img,
.front-used__item:focus-visible .front-used__item-media img {
	transform: scale( 1.02 );
}

/* ── 名前・値段プレート ── */
.front-used__item-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	flex-shrink: 0;
	width: 80%;
	min-height: 5.5rem;
	padding: 10px 20px;
	background-color: rgba( 0, 0, 0, 0.4 );
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	border-radius: 6px;
	backdrop-filter: blur( 5px );
	-webkit-backdrop-filter: blur( 5px );
	box-sizing: border-box;
}

.front-used__item-name {
	margin: 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.1em;
	color: #fff;
	opacity: 0.9;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.front-used__item-cat {
	margin: 4px 0 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 0.75rem;
	line-height: 1.35;
	color: rgba( 255, 255, 255, 0.65 );
	letter-spacing: 0.06em;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.front-used__item-price {
	margin: 5px 0 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.05em;
	color: #e5c158;
}

/* ── SOLD / 商談中バッジ ── */
.front-used__item-badge {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	color: #fff;
	background: rgba( 0, 0, 0, 0.55 );
	backdrop-filter: blur( 2px );
	pointer-events: none;
	z-index: 3;
}

.front-used__item-badge--pending {
	font-size: 1rem;
	background: rgba( 0, 0, 0, 0.45 );
}

.front-used__item--sold {
	opacity: 0.75;
}

.front-used__item--sold:hover,
.front-used__item--sold:focus-visible {
	opacity: 0.85;
}

@media ( prefers-reduced-motion: reduce ) {
	.front-used__ghost {
		left: 50%;
		transform: translate3d( -50%, -50%, 0 );
		will-change: auto;
	}
}

/* ── 0件フォールバック ── */
.front-used__empty {
	flex: 0 0 100%;
	min-width: 100%;
	text-align: center;
	padding: 3rem 1rem;
	color: var( --color-text-muted );
	font-size: 1rem;
}

.site-main--front .front-used__empty {
	color: var( --fs-body );
}

/* ── ショーケース・レスポンシブ ── */
@media ( max-width: 767px ) {
	.front-used__ghost {
		left: 50%;
		top: 42%;
		width: 100vw;
		max-width: 100vw;
		font-size: calc( 100vw / 3.35 );
		letter-spacing: 0.04em;
		line-height: 1;
		text-align: center;
		transform: translate( -50%, -50% );
		color: rgba( 255, 255, 255, 0.22 );
	}

	.front-used__headband {
		padding: 2rem 12px 1.5rem;
	}

	.front-used__cta {
		margin-top: clamp( 3rem, 10vw, 4.25rem );
		padding-bottom: clamp( 3.5rem, 10vw, 5rem );
	}

	.front-used__showcase-wrapper {
		padding-inline: 12px;
	}

	.front-used__showcase {
		gap: 16px;
		padding: 20px 16px;
	}

	.front-used__item-badge {
		font-size: 1.125rem;
	}
}

@media ( max-width: 600px ) {
	.front-used__title-row {
		gap: 0.5rem;
	}

	.front-used__plate-logo {
		width: clamp( 56px, 18vw, 88px );
	}

	.front-used__title {
		letter-spacing: 0.04em;
	}

	.front-used__lead {
		letter-spacing: 0.1em;
		line-height: 1.9;
	}

	.front-used__item {
		width: min( 78vw, 260px );
	}

	.front-used__item-media {
		height: 350px;
	}

	.front-used__item-price {
		font-size: 1.15rem;
	}
}

/* ── モバイル ── */
@media ( max-width: 767px ) {
	.front-store {
		min-height: auto;
		padding-bottom: 2rem;
	}

	.front-store__hero {
		position: relative;
		left: 0;
		width: 65%;
		max-width: min( 65vw, 320px );
		margin-bottom: -2rem;
		transform: rotate( -12deg );
		transform-origin: 35% 95%;
	}

	.front-store__hero img {
		max-height: min( 55vh, 420px );
	}

	.front-store__body {
		position: relative;
		top: auto;
		right: auto;
		max-width: 100%;
		margin-bottom: 1.5rem;
		padding: 0 0.5rem;
	}

	.front-store__float {
		position: relative;
		display: inline-flex;
		width: auto !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
	}

	.front-store__float img {
		width: 80px;
		height: 80px;
		object-fit: contain;
	}

	.front-store__float--3 img {
		width: 200px;
		height: 200px;
	}

	.front-store__float-label {
		opacity: 1;
		transform: none;
		font-size: 0.7rem;
	}

	.front-store {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.front-store__float {
		flex: 0 0 auto;
	}
}

@media ( min-width: 768px ) {
	.front-section__grid {
		grid-template-columns: 1fr 1fr;
		gap: clamp( 2rem, 5vw, 3.5rem );
	}

	/* Library は縦並び（タイトル → カルーセル） */
	.front-section--library .front-section__grid {
		grid-template-columns: 1fr;
		gap: clamp( 1.5rem, 3vw, 2.5rem );
		justify-items: center;
	}

	.front-section--library .front-section__body {
		text-align: center;
		max-width: 48rem;
	}

	.front-section__grid--media-right .front-section__media {
		order: 2;
	}

	.front-section__grid--media-right .front-section__body {
		order: 1;
	}
}

/* モバイル: 右メディアレイアウトは「文 → 画」の順 */
@media ( max-width: 767px ) {
	.front-section__grid--media-right .front-section__body {
		order: 1;
	}

	.front-section__grid--media-right .front-section__media {
		order: 2;
	}
}

.front-section__media {
	margin: 0;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var( --color-border );
	background: rgba( 13, 20, 32, 0.35 );
}

.site-main--front .front-section__media {
	/* 透過画像をそのまま見せる（枠・背景を付けない） */
	border: 0;
	background: transparent;
	overflow: visible;
	border-radius: 0;
}

.front-section__img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min( 50vh, 420px );
	object-fit: contain;
	object-position: center;
}

/* Mouton Library: タイトル＋リード（縦並びレイアウト） */
.front-section--library .front-section__body {
	text-align: center;
}

.front-section--library .front-section__lead {
	margin-inline: auto;
	max-width: 36rem;
}

.front-section__media--library-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.front-section__media--library-logo .front-library-logo {
	width: min( 100%, 380px );
	max-height: min( 42vh, 360px );
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* Mouton Library: カバーフロー（参考: 各 item が永続 DOM・level クラスで CSS 移動） */
.front-section--library .front-section__grid--media-right {
	align-items: center;
}

.front-section--library .front-section__media.front-library-carousel {
	width: 100%;
	max-width: 1100px;
	min-width: 0;
	overflow: hidden !important;
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

.front-library-carousel {
	position: relative;
	width: 100%;
	max-width: 1100px;
	height: clamp( 280px, 38vw, 460px );
	margin-inline: auto;
	box-sizing: border-box;
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}

.front-library-carousel:not( .is-ready ) .front-library-carousel__item {
	visibility: hidden;
}

.front-library-carousel__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.front-library-carousel__item {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	text-decoration: none;
	overflow: hidden;
	box-sizing: border-box;
	background: transparent;
	transition:
		height 1s,
		width 1s,
		left 1s,
		margin-top 1s,
		opacity 1s;
}

.front-library-carousel__item:not( .is-level-0 ) {
	pointer-events: none;
}

.front-library-carousel__item.is-level-0 {
	pointer-events: auto;
	z-index: 5;
}

/* 参考: container=810×200 を % 換算（中央 = level0、左 = level+、右 = level-） */
.front-library-carousel__item.is-level-0 {
	left: 40.7407%;  /* 330/810 */
	width: 18.5185%; /* 150/810 */
	height: 100%;
	margin-top: 0;
}

.front-library-carousel__item.is-level-1 {
	left: 22.2222%;  /* 180/810 */
	width: 16.0494%; /* 130/810 */
	height: 90%;
	margin-top: 5%;
	z-index: 4;
}

.front-library-carousel__item.is-level-2 {
	left: 6.1728%;   /* 50/810 */
	width: 13.5802%; /* 110/810 */
	height: 75%;
	margin-top: 12.5%;
	z-index: 3;
}

.front-library-carousel__item.is-level--1 {
	left: 61.7284%;  /* 500/810 */
	width: 16.0494%;
	height: 90%;
	margin-top: 5%;
	z-index: 4;
}

.front-library-carousel__item.is-level--2 {
	left: 80.2469%;  /* 650/810 */
	width: 13.5802%;
	height: 75%;
	margin-top: 12.5%;
	z-index: 3;
}

/* 画面外: 左方向に消える（右クリックで動く方向） */
.front-library-carousel__item.is-off-left {
	left: -20%;
	width: 13.5802%;
	height: 75%;
	margin-top: 12.5%;
	opacity: 0;
	z-index: 2;
}

/* 画面外: 右方向に消える（左クリックで動く方向） */
.front-library-carousel__item.is-off-right {
	left: 110%;
	width: 13.5802%;
	height: 75%;
	margin-top: 12.5%;
	opacity: 0;
	z-index: 2;
}

.front-library-carousel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

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

.front-library-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 1000;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #228291;
	font-size: 22px;
	line-height: 36px;
	text-align: center;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.12 );
}

.front-library-carousel__arrow:hover,
.front-library-carousel__arrow:focus-visible {
	opacity: 0.85;
	outline: none;
}

.front-library-carousel__arrow--prev {
	left: 4px;
}

.front-library-carousel__arrow--next {
	right: 4px;
}

/* モバイル: 3枚（±1） */
@media ( max-width: 767px ) {
	.front-library-carousel {
		height: clamp( 220px, 56vw, 280px );
	}

	.front-library-carousel__item.is-level-0 {
		left: 35%;
		width: 30%;
		height: 100%;
	}

	.front-library-carousel__item.is-level-1 {
		left: 8%;
		width: 24%;
		height: 84%;
		margin-top: 8%;
	}

	.front-library-carousel__item.is-level--1 {
		left: 68%;
		width: 24%;
		height: 84%;
		margin-top: 8%;
	}
}

/* 楽譜シングル（最低限） */
.library-single__inner {
	display: grid;
	gap: 2rem;
	max-width: var( --content-max, 720px );
	margin-inline: auto;
	padding: clamp( 2rem, 5vw, 3rem ) clamp( 1rem, 4vw, 2rem );
}

@media ( min-width: 768px ) {
	.library-single__inner {
		grid-template-columns: minmax( 200px, 280px ) 1fr;
		align-items: start;
	}
}

.library-single__img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.library-single__title {
	margin: 0 0 1rem;
	font-size: clamp( 1.5rem, 4vw, 2rem );
}

.library-single__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.front-section__body {
	min-width: 0;
}

.front-section__title {
	margin: 0 0 1rem;
	font-size: clamp( 1.5rem, 3.5vw, 2rem );
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var( --color-text );
}

.site-main--front .front-section__title {
	color: var( --fs-heading );
}

.front-section__lead {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var( --color-text-muted );
	max-width: 36rem;
}

.site-main--front .front-section__lead {
	color: var( --fs-body );
}

.front-section__cards {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 9.5rem, 1fr ) );
	gap: 0.75rem 1rem;
	max-width: 36rem;
}

.front-section__card {
	padding: 0.9rem 1rem;
	border-radius: 8px;
	border: 1px solid color-mix( in srgb, var( --color-accent-gold ) 45%, transparent );
	background: rgba( 26, 26, 53, 0.35 );
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.12 );
}

.site-main--front .front-section__card {
	border: 1px solid color-mix( in srgb, var( --fs-gold ) 55%, #fff 45% );
	background: var( --fs-card-bg );
	box-shadow: var( --fs-card-shadow );
}

.front-section__card-title {
	display: block;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var( --color-text );
	margin-bottom: 0.35rem;
}

.site-main--front .front-section__card-title {
	color: var( --fs-heading );
}

.front-section__card-text {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var( --color-text-muted );
}

.site-main--front .front-section__card-text {
	color: var( --fs-body );
}

.front-section__link {
	display: inline-block;
	font-weight: 600;
	text-decoration: none;
	padding: 0.65rem 1.35rem;
	border-radius: 6px;
	border: none;
	transition: filter 0.2s ease, background 0.2s ease;
}

/* モックの濃紺 CTA（ライトセクション上） */
.front-section__link--primary {
	background: color-mix( in srgb, #1a2744 85%, var( --color-accent ) 15% );
	color: var( --color-text );
	border: 1px solid color-mix( in srgb, var( --color-accent ) 35%, transparent );
}

.site-main--front .front-section__link--primary {
	background: var( --fs-button-bg );
	color: var( --fs-button-text );
	border: 1px solid color-mix( in srgb, var( --fs-button-bg ) 85%, #000 15% );
	box-shadow: 0 4px 0 rgba( 184, 160, 120, 0.35 );
}

.front-section__link--primary:hover,
.front-section__link--primary:focus-visible {
	color: var( --color-text );
	filter: brightness( 1.08 );
}

.site-main--front .front-section__link--primary:hover,
.site-main--front .front-section__link--primary:focus-visible {
	color: var( --fs-button-text );
	filter: brightness( 1.06 );
}

/* 中央スタック（SNS / Online など） */
.front-section--layout-stack .front-section__stack {
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
	box-sizing: border-box;
}

.front-section__stack--narrow {
	max-width: 44rem;
}

.front-section__title--stack {
	margin-bottom: 0.35rem;
}

.front-section__eyebrow {
	margin: 0 0 1.25rem;
	font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 1.125rem;
	font-weight: 500;
	font-style: italic;
	letter-spacing: 0.04em;
	color: var( --color-accent-gold );
}

.site-main--front .front-section__eyebrow {
	color: var( --fs-gold );
}

.front-section__eyebrow--ja {
	font-style: normal;
	font-family: var( --font-sans );
	font-size: 1rem;
	font-weight: 500;
	color: var( --color-text-muted );
}

.site-main--front .front-section__eyebrow--ja {
	color: var( --fs-body );
}

.front-section__lead--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	max-width: 38rem;
}

.front-section__social {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.25rem 1.75rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.front-section__social-link {
	display: flex;
	color: var( --color-text );
	text-decoration: none;
	border-radius: 6px;
	padding: 0.35rem;
	transition: color 0.2s ease, transform 0.2s ease;
}

.site-main--front .front-section__social-link {
	color: var( --fs-heading );
}

.front-section__social-link:hover,
.front-section__social-link:focus-visible {
	color: var( --color-accent );
	transform: translateY( -2px );
}

.site-main--front .front-section__social-link:hover,
.site-main--front .front-section__social-link:focus-visible {
	color: var( --fs-link );
}

.front-section__social-icon {
	display: block;
}

.front-section__video {
	position: relative;
	width: 100%;
	max-width: 36rem;
	margin: 0 auto 1.25rem;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var( --color-border );
	background: #0d1420;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.25 );
}

.site-main--front .front-section__video {
	border-color: var( --fs-border );
	background: #e8eef5;
	box-shadow: var( --fs-card-shadow );
}

.front-section__video-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* SNS: ピックアップ動画（VOD風・自動横スクロール / マーキー） */
.front-section__sns-gallery-wrap {
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-bottom: 1.25rem;
	box-sizing: border-box;
}

.front-section__sns-gallery-wrap--vertical {
	margin-top: -0.35rem;
}

.front-section__sns-gallery-heading {
	margin: 0 auto 0.65rem;
	padding-inline: max( 1rem, env( safe-area-inset-left, 0px ) ) max( 1rem, env( safe-area-inset-right, 0px ) );
	max-width: 40rem;
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --color-text-muted );
}

.site-main--front .front-section__sns-gallery-heading {
	color: var( --fs-muted );
}

.front-section__sns-marquee {
	overflow: hidden;
	padding-block: 0.35rem;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.site-main--front .front-section__sns-marquee {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.front-section__sns-marquee-view {
	overflow: hidden;
	mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 min( 4vw, 48px ) calc( 100% - min( 4vw, 48px ) ),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0%,
		#000 min( 4vw, 48px ) calc( 100% - min( 4vw, 48px ) ),
		transparent 100%
	);
}

.front-section__sns-marquee-track {
	display: inline-block;
	width: max-content;
	max-width: none;
	vertical-align: top;
	animation: mouton-sns-marquee var( --marquee-duration, 60s ) linear infinite;
}

@media ( max-width: 767px ) {
	.front-section__sns-marquee-track {
		/* 常時 will-change は SP で層が増えてもたつく */
		will-change: auto;
	}
}

.front-section__sns-marquee[data-sns-marquee-reverse="1"] .front-section__sns-marquee-track {
	animation-direction: reverse;
}

.front-section__sns-marquee:hover .front-section__sns-marquee-track,
.front-section__sns-marquee:focus-within .front-section__sns-marquee-track {
	animation-play-state: paused;
}

@keyframes mouton-sns-marquee {
	from {
		transform: translateX( var( --marquee-start, 0px ) );
	}

	to {
		transform: translateX( calc( var( --marquee-start, 0px ) + var( --marquee-shift, -1200px ) ) );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.front-section__sns-marquee-track {
		animation: none;
		display: block;
		width: 100% !important;
		max-width: 42rem;
		margin-inline: auto;
		box-sizing: border-box;
	}

	.front-section__sns-marquee-view {
		mask-image: none;
		-webkit-mask-image: none;
	}

	.front-section__sns-gallery-row {
		flex-wrap: wrap;
		justify-content: center;
		padding-inline: 1rem;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
}

.front-section__sns-gallery-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.65rem;
	margin: 0;
	padding: 0 0.65rem;
	list-style: none;
	box-sizing: border-box;
	width: max-content;
	max-width: none;
}

.front-section__sns-gallery-item {
	flex: 0 0 auto;
	width: clamp( 180px, 46vw, 300px );
}

.front-section__sns-gallery-row--vertical {
	gap: 0.55rem;
}

.front-section__sns-gallery-item--vertical {
	width: clamp( 140px, 30vw, 200px );
}

.front-section__sns-gallery-card--vertical:hover,
.front-section__sns-gallery-card--vertical:focus-visible {
	transform: translateY( -2px ) scale( 1.02 );
}

.front-section__sns-gallery-thumb--vertical {
	aspect-ratio: 9 / 16;
}

.front-section__sns-gallery-card--vertical .front-section__sns-gallery-thumb {
	aspect-ratio: 9 / 16;
}

.front-section__sns-gallery-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.18 );
}

.front-section__sns-gallery-card:hover,
.front-section__sns-gallery-card:focus-visible {
	transform: translateY( -3px ) scale( 1.02 );
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.28 );
}

.front-section__sns-gallery-thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: #0d1420;
}

.site-main--front .front-section__sns-gallery-thumb {
	background: #1a2744;
}

.front-section__sns-gallery-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.front-section__fineprint {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var( --color-text-muted );
}

.site-main--front .front-section__fineprint {
	color: var( --fs-muted );
}

.front-section__stack-footer {
	margin: 0;
	font-size: 0.9375rem;
}

.front-section__text-link {
	color: var( --color-accent );
	font-weight: 500;
}

.site-main--front .front-section__text-link {
	color: var( --fs-link );
}

.front-section__text-link:hover,
.front-section__text-link:focus-visible {
	color: var( --color-accent-gold );
}

.site-main--front .front-section__text-link:hover,
.site-main--front .front-section__text-link:focus-visible {
	color: var( --fs-heading );
}

/* Mouton Store Online: セリフ見出し + リッチリンクカード */
.front-section__title--online {
	font-family: Georgia, "Hiragino Mincho ProN", "Yu Mincho", "Times New Roman", serif;
	font-size: clamp( 1.75rem, 4.5vw, 2.65rem );
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var( --color-text );
	margin-bottom: 0.5rem;
}

.site-main--front .front-section__title--online {
	color: var( --fs-heading );
}

.front-section--online .front-section__eyebrow--ja {
	margin-bottom: 1.25rem;
}

.front-section--online .front-section__lead--center {
	margin-bottom: 1.75rem;
}

.front-online-reveal__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 0.25rem, 2vw, 1rem );
	margin-top: 0.25rem;
}

.front-online-reveal__mascot {
	flex: 0 0 auto;
	width: clamp( 96px, 16vw, 148px );
	height: auto;
	margin-right: clamp( -0.25rem, -1vw, -0.75rem );
	object-fit: contain;
	object-position: right center;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* The Split Gate — Online Store CTA */
.split-gate {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: min( 260px, 72vw );
	height: 100px;
	text-decoration: none;
	cursor: pointer;
	color: var( --fs-heading, #1a2b48 );
}

.split-gate__line {
	position: absolute;
	width: 1px;
	height: 70px;
	background-color: currentColor;
	transition: all 0.6s cubic-bezier( 0.86, 0, 0.07, 1 );
}

.split-gate__text {
	opacity: 0;
	color: currentColor;
	font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	transform: translateY( 8px );
	transition: opacity 0.3s ease, transform 0.4s ease;
}

.split-gate:hover .split-gate__line,
.split-gate:focus-visible .split-gate__line {
	width: 100%;
	height: 56px;
	background-color: transparent;
	border: 1px solid currentColor;
	border-radius: 50px;
}

.split-gate:hover .split-gate__text,
.split-gate:focus-visible .split-gate__text {
	opacity: 1;
	transform: translateY( 0 );
	transition-delay: 0.2s;
}

.split-gate:focus-visible {
	outline: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.split-gate__line {
		width: 100%;
		height: 56px;
		background-color: transparent;
		border: 1px solid currentColor;
		border-radius: 50px;
		transition: none;
	}

	.split-gate__text {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* SP 用 Online Store 通常ボタン（PC では非表示） */
.front-online-reveal__cta-sp {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: min( 280px, 82vw );
	padding: 1rem 1.75rem;
	background: var( --color-accent, #7eb8d4 );
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 50px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.16 );
	transition: background 0.2s ease;
	box-sizing: border-box;
	text-align: center;
	letter-spacing: 0.06em;
}

@media ( max-width: 480px ) {
	.front-online-reveal__cta {
		gap: 0.15rem;
	}

	.front-online-reveal__mascot {
		width: clamp( 72px, 22vw, 96px );
		margin-right: -0.15rem;
	}

	.split-gate {
		height: 88px;
	}

	.split-gate__line {
		height: 60px;
	}
}

.entry-content--front {
	max-width: var( --wide-max );
	margin-inline: auto;
	padding: var( --space-section ) clamp( 1rem, 4vw, 2rem );
}

.entry-content--front:empty {
	display: none;
}

/* 最下部 About：1画面分の高さ（白隙間対策は entry-content 側で実施） */
.site-main--front .front-scroll > .front-section--about:last-child {
	min-height: 100vh;
	min-height: 100dvh;
	align-items: center;
}

/* LP template */
.site-main--landing .entry-header {
	text-align: center;
	max-width: var( --wide-max );
	margin-inline: auto;
}

.site-main--landing .entry-content {
	max-width: var( --wide-max );
	margin-inline: auto;
}

.lp-intro {
	font-size: 1.125rem;
	color: var( --color-text-muted );
	max-width: 42rem;
	margin: 0 auto 2rem;
	text-align: center;
}

/* Buttons */
.button {
	display: inline-block;
	padding: 0.65rem 1.25rem;
	font-weight: 600;
	color: var( --color-bg-primary );
	background: var( --color-accent-gold );
	border: none;
	border-radius: 4px;
	text-decoration: none;
}

.button:hover,
.button:focus-visible {
	color: var( --color-bg-primary );
	filter: brightness( 1.05 );
}

/* Footer */
.site-main--front + .site-footer {
	margin-top: 0;
}

/* Archive */
.site-main--index .page-header {
	margin-bottom: 2rem;
}

.entry--archive {
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var( --color-border );
}

.entry-summary {
	color: var( --color-text-muted );
}

/* 404 */
.site-main--404 {
	text-align: center;
}

.not-found__text {
	color: var( --color-text-muted );
	max-width: 28rem;
	margin-inline: auto;
}

/* ==========================================================================
   Used Single – 商品詳細ページ
   ========================================================================== */
.site-main--used-single {
	max-width: var( --wide-max );
	margin-inline: auto;
	padding: clamp( 2rem, 5vw, 4rem ) clamp( 1rem, 4vw, 2rem );
}

.used-single__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media ( min-width: 768px ) {
	.used-single__inner {
		grid-template-columns: 1fr 1fr;
		gap: clamp( 2.5rem, 5vw, 4rem );
		align-items: start;
	}
}

.used-single__media {
	position: relative;
}

.used-single__figure {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.used-single__img {
	display: block;
	width: 100%;
	height: auto;
}

.used-single__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.4rem 1rem;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	color: #fff;
	background: rgba( 0, 0, 0, 0.7 );
	border-radius: 4px;
	backdrop-filter: blur( 4px );
}

.used-single__badge--pending {
	background: rgba( 180, 130, 40, 0.8 );
}

.used-single__header {
	margin-bottom: 1.5rem;
}

.used-single__title {
	margin: 0 0 0.5rem;
	font-size: clamp( 1.5rem, 3.5vw, 2.25rem );
	font-weight: 800;
	line-height: 1.3;
}

.used-single__price {
	margin: 0 0 0.75rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var( --color-accent );
}

.used-single__status {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 700;
	border-radius: 4px;
	background: rgba( 60, 160, 80, 0.15 );
	color: #3ca050;
}

.used-single__status--sold {
	background: rgba( 0, 0, 0, 0.08 );
	color: var( --color-text-muted );
}

.used-single__status--商談中 {
	background: rgba( 180, 130, 40, 0.15 );
	color: #b48228;
}

.used-single__content {
	margin-bottom: 2rem;
	line-height: 1.8;
}

.used-single__actions {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

.used-single__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.8rem 1.8rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 6px;
	background: var( --color-accent );
	color: #fff;
	transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.used-single__cta:hover,
.used-single__cta:focus-visible {
	transform: translateY( -2px );
	filter: brightness( 1.06 );
	box-shadow: 0 6px 14px rgba( 0, 0, 0, 0.12 );
}

.used-single__back {
	font-size: 0.875rem;
	color: var( --color-text-muted );
	text-decoration: none;
	transition: color 0.2s ease;
}

.used-single__back:hover {
	color: var( --color-text );
}