/* =========================================
   hero（SIGN & PLAN）PC/スマホ共通
   style.cssから分離して全幅で読み込む
   ========================================= */
.hero {
	--ink: #ffffff;
	--name: #b0a39a;
	--mark: #ffffff;
	--cream-dim: rgba(242, 238, 235, .5);
	--rise: cubic-bezier(.2, 1.06, .3, 1);
	--snap: cubic-bezier(.2, 1, .2, 1);
	--logo-font: "Helvetica Neue", Helvetica, Arial, "Arimo", sans-serif;
	position: relative;
	z-index: 1;
	margin-top: 70px;
	width: 100%;
	height: calc(100vh - 70px);
	height: calc(100svh - 70px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--logo-font);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg--photo {
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 14px),
		linear-gradient(180deg, #484848 0%, #2a2a2a 100%);
	transform: scale(1.06);
}
.hero__bg--brown {
	background:
		repeating-linear-gradient(to bottom, #4a3a35 0 8px, #43332e 8px 16px),
		radial-gradient(120% 95% at 50% 40%, rgba(110, 90, 84, .35) 0%, transparent 60%);
	opacity: 1;
}

.hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(circle at 50% 44%, rgba(0, 0, 0, .3) 0%, transparent 46%),
		linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .48) 100%);
}

.hero__intro {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.hero__mark {
	width: clamp(150px, 40vw, 420px);
	height: auto;
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
	transform: scale(.85);
}
.hero__mark path { fill: var(--mark); }

.hero__center { position: relative; z-index: 2; text-align: center; padding: 0 4vw; }
.hero__brand { display: inline-block; text-align: left; }

.hero__en {
	display: block;
	font-family: var(--logo-font);
	font-weight: 700;
	font-size: clamp(3rem, 14vw, 10rem);
	line-height: .9;
	color: var(--ink);
	white-space: nowrap;
}
.hero__sanwa {
	display: block;
	font-family: var(--logo-font);
	font-weight: 700;
	font-size: clamp(1.7rem, 8.2vw, 6rem);
	line-height: 1;
	color: var(--name);
	white-space: nowrap;
	margin-top: .12em;
	clip-path: inset(0 100% 0 0);
}
.hero__co {
	display: block;
	font-family: var(--logo-font);
	font-weight: 700;
	font-size: clamp(.85rem, 2.6vw, 1.9rem);
	line-height: 1;
	color: var(--name);
	text-align: right;
	margin-top: .12em;
	opacity: 0;
}

.hero__lt { display: inline-block; }
.hero__lti {
	display: inline-block;
	opacity: 0;
	transform: translateY(62vh) scale(.82) rotate(var(--rot));
	will-change: transform, opacity;
}

.hero__cue {
	position: absolute;
	bottom: 4vh;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--cream-dim);
	opacity: 0;
}
.hero__cue-txt { font-size: 9.5px; letter-spacing: .4em; text-indent: .4em; }
.hero__cue-arrow { font-size: 16px; line-height: 1; }

/* ===== 再生 ===== */
.hero.play .hero__mark { animation: heroMarkIn 1s ease-out .2s both; }
.hero.play .hero__intro { animation: heroMarkExit .9s cubic-bezier(.5, 0, .75, 0) 2.2s forwards; }
.hero.play .hero__lti {
	animation: heroRise .8s var(--rise) both;
	animation-delay: calc(2.2s + var(--i) * .08s);
}
.hero.play .hero__en { animation: heroPop .45s var(--snap) 3.6s both; }
.hero.play .hero__sanwa { animation: heroWipe .55s var(--snap) 3.75s both; }
.hero.play .hero__co { animation: heroFade .6s var(--rise) 4.15s both; }
.hero.play .hero__bg--brown { animation: heroBgFade 1.4s ease 6.4s forwards; }
.hero.play .hero__bg--photo { animation: heroKen 8s ease-out 6.4s both; }
.hero.play .hero__cue { animation: heroCueIn .7s var(--rise) 5.2s both; }
.hero.play .hero__cue-arrow { animation: heroBounce 1.6s ease-in-out 5.9s infinite; }

@keyframes heroMarkIn {
	0% { opacity: 0; transform: scale(.82); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes heroMarkExit { to { transform: translateY(-135%); opacity: 0; } }
@keyframes heroRise {
	0% { opacity: 0; transform: translateY(62vh) scale(.82) rotate(var(--rot)); }
	50% { opacity: 1; }
	100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes heroPop {
	0% { transform: scale(1); }
	45% { transform: scale(1.04); }
	100% { transform: scale(1); }
}
@keyframes heroWipe {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}
@keyframes heroBgFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes heroKen { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes heroFade {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes heroCueIn {
	from { opacity: 0; transform: translateX(-50%) translateY(14px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes heroBounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__intro { opacity: 0; }
	.hero__lti { transform: none; opacity: 1; }
	.hero__sanwa { clip-path: inset(0 0 0 0); }
	.hero__co, .hero__cue { opacity: 1; }
	.hero__bg--brown { opacity: 0; }
	.hero__bg--photo { transform: scale(1); }
	.hero * { animation: none; }
}

/* ===== スマホ ===== */
@media screen and (max-width: 640px) {
	.hero {
		margin-top: 0;
		height: 96svh;
	}
	.hero__mark { width: clamp(120px, 44vw, 220px); }
	.hero__en { font-size: clamp(2rem, 13vw, 3.4rem); }
	.hero__sanwa { font-size: clamp(1.1rem, 7.6vw, 2rem); }
	.hero__co { font-size: clamp(.7rem, 3vw, 1.1rem); }
}