/*
 * Preview-only TOP Yu relief prototype.
 * Future WordPress port: enqueue only on the front page and preserve the
 * data-yu-relief / data-yu-echo DOM contract.
 */

.yu-relief,
.yu-echo {
	pointer-events: none;
	user-select: none;
}

.yu-relief--intro {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	mix-blend-mode: multiply;
}

.yu-relief__canvas,
.yu-relief__canvas canvas {
	width: 100%;
	height: 100%;
}

.yu-relief__canvas canvas {
	display: block;
}

.yu-relief__fallback,
.yu-echo__fallback {
	position: absolute;
	color: rgba(118, 111, 96, .055);
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-weight: 800;
	line-height: 1;
}

.yu-relief__fallback {
	top: 50%;
	left: 52%;
	font-size: clamp(18rem, 45vw, 42rem);
	transform: translate(-50%, -50%) scaleY(1.04);
}

.yu-relief.is-webgl-ready .yu-relief__fallback,
.yu-relief.is-canvas-ready .yu-relief__fallback,
.yu-echo.is-ready .yu-echo__fallback {
	opacity: 0;
}

.yu-echo {
	position: absolute;
	z-index: 0;
	overflow: hidden;
	mix-blend-mode: multiply;
	will-change: transform, opacity;
}

.yu-echo canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.yu-echo--about {
	inset: 0;
	opacity: .92 !important;
}

.yu-echo--about .yu-echo__fallback {
	top: 50%;
	left: -.08em;
	font-size: clamp(18rem, 74vw, 30rem);
	transform: translateY(-48%);
}

.yu-echo--works,
.yu-echo--news,
.yu-echo--company {
	position: absolute;
	top: -2rem;
	right: 0;
	left: 0;
	height: clamp(7rem, 16vw, 14rem);
	opacity: .42 !important;
	z-index: 0;
	pointer-events: none;
}

.yu-echo--works .yu-echo__fallback,
.yu-echo--news .yu-echo__fallback,
.yu-echo--company .yu-echo__fallback {
	top: .2em;
	right: -.04em;
	font-size: clamp(8rem, 22vw, 22rem);
	font-family: var(--font-en);
	font-weight: 700;
	letter-spacing: -.07em;
	opacity: .025;
}

.js .yu-echo--about[data-reveal],
.js .yu-echo--works[data-reveal],
.js .yu-echo--news[data-reveal],
.js .yu-echo--company[data-reveal] {
	opacity: .92 !important;
	transform: none !important;
	transition: none !important;
}

.js .yu-echo--about[data-reveal].is-inview,
.js .yu-echo--works[data-reveal].is-inview,
.js .yu-echo--news[data-reveal].is-inview,
.js .yu-echo--company[data-reveal].is-inview {
	opacity: .92 !important;
	transform: none !important;
}

/* ============================================
   Integrated Footer
   ============================================ */

.site-footer--integrated {
	position: relative;
	overflow: hidden;
}

.site-footer--integrated .site-footer__inner {
	position: relative;
	z-index: 2;
}

/* ナビ部分の余白を引き締め */
.site-footer--integrated .site-footer__top {
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Canvas background */
.yu-echo--contact {
	position: absolute;
	inset: 0;
	opacity: .72 !important;
	z-index: 1;
	pointer-events: none;
}

.yu-echo--contact .yu-echo__fallback {
	bottom: 10%;
	right: 2%;
	font-size: clamp(16rem, 38vw, 34rem);
	line-height: .8;
}

/* ============================================
   CONTACT Band — フルワイド横3カラム帯
   ============================================ */

.site-footer__contact-band {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	padding: clamp(1.5rem, 3vw, 2.5rem) 0;
	border-top: 1px solid rgba(34, 40, 44, .15);
}

/* 金のアクセントライン（上ボーダーに密着） */
.site-footer__contact-band::before {
	position: absolute;
	top: -2px;
	left: 0;
	width: clamp(3rem, 8vw, 6rem);
	height: 3px;
	border-bottom: 1px solid var(--color-wood-light);
	background: var(--color-wood);
	content: "";
}

/* タイトルカラム */
.site-footer__contact-band-title {
	padding-bottom: 1rem;
}

.site-footer__contact-band-title .front-section__eyebrow {
	margin-bottom: .25rem;
}

.site-footer__contact-band-title .front-contact__title {
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	margin: 0;
}

/* TEL / MAIL アイテム */
.site-footer__contact-band-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .15rem .75rem;
	align-items: center;
	padding: .75rem 0;
	border-top: 1px solid rgba(34, 40, 44, .1);
	text-decoration: none;
	color: inherit;
}

.site-footer__contact-band-label {
	grid-column: 1;
	color: var(--color-text-sub);
	font-family: var(--font-en);
	font-size: .5625rem;
	font-weight: 600;
	letter-spacing: .16em;
}

.site-footer__contact-band-value {
	grid-column: 1;
	font-family: var(--font-en);
	font-size: clamp(1.25rem, 2.8vw, 1.85rem);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1.2;
}

.site-footer__contact-band-arrow {
	grid-column: 2;
	grid-row: 1 / 3;
	font-family: var(--font-en);
	font-size: 1rem;
	color: var(--color-text-sub);
	transition: transform 300ms var(--ease-out);
}

/* ホバーエフェクト */
a.site-footer__contact-band-item:hover .site-footer__contact-band-value {
	color: var(--color-text-sub);
}

a.site-footer__contact-band-item:hover .site-footer__contact-band-arrow {
	transform: translateX(.4rem);
}

/* プレースホルダー（MAIL） */
.site-footer__contact-band-item--placeholder {
	cursor: default;
}

.site-footer__contact-band-item--placeholder .site-footer__contact-band-value {
	font-size: clamp(1.15rem, 2.4vw, 1.65rem);
}

/* ============================================
   Desktop: 横3カラム — 帯レイアウト
   ============================================ */
@media (min-width: 768px) {
	.site-footer__contact-band {
		grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
		align-items: center;
	}

	.site-footer__contact-band-title {
		padding-bottom: 0;
	}

	.site-footer__contact-band-item {
		border-top: none;
		border-left: 1px solid rgba(34, 40, 44, .12);
		padding: .25rem 0 .25rem clamp(1.5rem, 2.5vw, 2.5rem);
	}
}

/* ============================================
   Mobile
   ============================================ */
@media (max-width: 767px) {
	.yu-relief__fallback {
		left: 58%;
		font-size: min(88vw, 28rem);
	}

	.yu-echo--contact {
		opacity: .58 !important;
	}

	.yu-echo--contact .yu-echo__fallback {
		bottom: 5%;
		right: -5%;
		font-size: clamp(14rem, 65vw, 22rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.yu-relief__canvas {
		display: none;
	}

	.yu-relief__fallback {
		opacity: .08 !important;
	}

	.js .yu-echo--about[data-reveal] {
		opacity: .72 !important;
		transform: none;
		transition: none;
	}
}

/* ============================================
   ABOUT Section Viewport Optimization
   ============================================ */

.front-about__title {
	font-size: clamp(2rem, 4vw, 3.5rem) !important;
	line-height: 1.25;
	word-break: normal;
	overflow-wrap: break-word;
}

.front-about__story {
	max-width: 100%;
	overflow: hidden;
}

@media (min-width: 768px) {
	.front-about__story {
		padding-right: 1rem;
	}
}