/*
 * join固定ページ専用LP（横スクロール・パララックス）のスタイル。
 * すべてのセレクタは .join-lp 配下に限定し、テーマ共通スタイルを上書きしない。
 * アニメーション用クラスは theme.js の .reveal / .clip-reveal と衝突しないよう
 * .jlp- プレフィックスの独自クラスにしている（join-lp.js の自前observerだけで制御）。
 *
 * 出典: membership-lp-prototype/index.html のインラインCSSを移植・スコープ化。
 */
.join-lp {
	--jlp-cream: #f3f0e9;
	--jlp-paper: #fbfaf7;
	--jlp-ink: #1d211e;
	--jlp-muted: #666b66;
	--jlp-green: #24483c;
	--jlp-green-deep: #17342c;
	--jlp-brown: #6b5940; /* 2026-07-26: #806d59から濃色化。.jlp-context背景(#e9e5dc)で4.5:1以上を確保 */
	--jlp-gold: #c6aa75;
	--jlp-line: rgba(29, 33, 30, .16);
	--jlp-serif: "Yu Mincho", "Hiragino Mincho ProN", serif;

	overflow-x: hidden;
	background: var(--jlp-paper);
	color: var(--jlp-ink);
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: .015em;
}
.join-lp img { display: block; width: 100%; }
.join-lp a { color: inherit; }
.join-lp button { font: inherit; }
.join-lp [id] { scroll-margin-top: calc(var(--header-h, 56px) + 16px); }

/* ── Hero ───────────────────────────────────────── */
.join-lp .jlp-hero {
	position: relative;
	min-height: calc(100svh - var(--header-h, 56px));
	margin-top: var(--header-h, 56px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
	background: var(--jlp-green-deep);
}
.join-lp .jlp-hero-media,
.join-lp .jlp-hero-shade { position: absolute; inset: 0; }
.join-lp .jlp-hero-media img {
	height: 112%;
	object-fit: cover;
	object-position: 51% center;
	transform: translate3d(0, var(--jlp-hero-shift, 0), 0) scale(1.055);
	animation: jlp-hero-settle 1.8s cubic-bezier(.2,.72,.2,1) both;
	filter: saturate(.72) contrast(.98);
	will-change: transform;
}
.join-lp .jlp-hero-shade {
	background:
		linear-gradient(90deg, rgba(10,22,18,.82) 0%, rgba(10,22,18,.52) 45%, rgba(10,22,18,.15) 78%),
		linear-gradient(0deg, rgba(8,15,12,.65) 0%, transparent 52%);
}
.join-lp .jlp-hero-copy {
	position: relative;
	z-index: 2;
	width: min(100% - 56px, 1320px);
	margin: 0 auto;
	padding: 90px 0 clamp(74px, 10vh, 124px);
}
.join-lp .jlp-hero-kicker { margin: 0 0 22px; font-size: 11px; letter-spacing: .18em; }
.join-lp .jlp-hero h1 {
	max-width: 1240px;
	margin: 0;
	font-family: var(--jlp-serif);
	font-size: clamp(2.6rem, 5.45vw, 5.45rem);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: 1.18;
}
.join-lp .jlp-hero-lead {
	max-width: 620px;
	margin: 30px 0 0;
	color: rgba(255,255,255,.82);
	font-family: var(--jlp-serif);
	font-size: 16px;
	line-height: 2.05;
}
.join-lp .jlp-hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }
.join-lp .jlp-button {
	min-height: 52px;
	padding: 0 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
	text-decoration: none;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}
.join-lp .jlp-button:hover { transform: translateY(-2px); }
.join-lp .jlp-button-light { background: #fff; border-color: #fff; color: var(--jlp-green-deep); }
.join-lp .jlp-button-light:hover { background: var(--jlp-cream); }
.join-lp .jlp-button-dark { background: var(--jlp-green); border-color: var(--jlp-green); color: #fff; }
.join-lp .jlp-button-dark:hover { background: var(--jlp-green-deep); }
.join-lp .jlp-hero-scroll {
	position: absolute;
	z-index: 2;
	right: 40px;
	bottom: 46px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 9px;
	letter-spacing: .2em;
	writing-mode: vertical-rl;
}
.join-lp .jlp-hero-scroll::after {
	content: "";
	width: 1px;
	height: 62px;
	background: rgba(255,255,255,.6);
	transform-origin: top;
	animation: jlp-scroll-line 2.2s ease-in-out infinite;
}

/* ── 共通レイアウト ─────────────────────────────── */
.join-lp .jlp-container { width: min(100% - 56px, 1180px); margin-inline: auto; }
.join-lp .jlp-section { padding: clamp(92px, 11vw, 160px) 0; }
.join-lp .jlp-section-label {
	margin: 0 0 28px;
	color: var(--jlp-brown);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ── 連盟の目的 ─────────────────────────────────── */
.join-lp .jlp-statement { background: var(--jlp-cream); }
.join-lp .jlp-statement-grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
	gap: clamp(60px, 9vw, 130px);
	align-items: start;
}
.join-lp .jlp-statement h2,
.join-lp .jlp-section-heading h2 {
	margin: 0;
	font-family: var(--jlp-serif);
	font-size: clamp(2.5rem, 5vw, 4.8rem);
	font-weight: 500;
	letter-spacing: -.035em;
	line-height: 1.38;
}
.join-lp .jlp-statement h2 { font-size: clamp(2.35rem, 3.25vw, 2.8rem); }
.join-lp .jlp-statement-copy > p:first-child {
	margin: 0;
	color: var(--jlp-muted);
	font-family: var(--jlp-serif);
	font-size: 16px;
	line-height: 2.15;
}
.join-lp .jlp-statement-visual { margin: 48px 0 0; }
.join-lp .jlp-statement-visual .jlp-scene-frame { aspect-ratio: 4 / 3; }
.join-lp .jlp-history-heading { margin: 0 0 18px; font-family: var(--jlp-serif); font-size: 24px; font-weight: 500; }
.join-lp .jlp-history-list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	list-style: none;
	border-top: 1px solid var(--jlp-line);
}
.join-lp .jlp-history-list li { padding: 13px 0; border-bottom: 1px solid var(--jlp-line); color: var(--jlp-muted); font-size: 12px; line-height: 1.7; }
.join-lp .jlp-purpose-lines { margin-top: 54px; border-top: 1px solid var(--jlp-line); }
.join-lp .jlp-purpose-line { padding: 24px 0; display: grid; grid-template-columns: 52px 1fr; gap: 22px; border-bottom: 1px solid var(--jlp-line); }
.join-lp .jlp-purpose-line span { color: var(--jlp-brown); font-family: Georgia, serif; }
.join-lp .jlp-purpose-line h3 { margin: 0; font-family: var(--jlp-serif); font-size: 21px; font-weight: 500; }
.join-lp .jlp-purpose-line p { margin: 5px 0 0; color: var(--jlp-muted); font-size: 13px; }

/* ── 音楽を取り巻く環境 ─────────────────────────── */
.join-lp .jlp-context { background: #e9e5dc; }
.join-lp .jlp-context-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); gap: clamp(60px, 9vw, 130px); }
.join-lp .jlp-context h2 { margin: 0; font-family: var(--jlp-serif); font-size: clamp(2.3rem, 3.3vw, 2.8rem); font-weight: 500; line-height: 1.45; }
.join-lp .jlp-context-lead { margin: 23px 0 0; color: #565b56; font-family: var(--jlp-serif); }
.join-lp .jlp-context-list { border-top: 1px solid var(--jlp-line); }
.join-lp .jlp-context-item { padding: 26px 0; display: grid; grid-template-columns: 52px 1fr; gap: 22px; border-bottom: 1px solid var(--jlp-line); }
.join-lp .jlp-context-item > span { color: var(--jlp-brown); font-family: Georgia, serif; }
.join-lp .jlp-context-item h3 { margin: 0; font-family: var(--jlp-serif); font-size: 19px; font-weight: 500; }
.join-lp .jlp-context-item p { margin: 7px 0 0; color: #565b56; font-size: 13px; }
/* 2026-07-26: var(--jlp-muted)のまま(#666b66)だと#e9e5dc背景で4.33:1しかなくWCAG AA(4.5:1)未達のため、
   このコンテキストに限定して濃色を指定する。他ページ・他背景のjlp-mutedは変更しない。
   2026-07-27: 同じ背景を使う.jlp-context-leadと.jlp-context-item pも同様に4.33:1で
   未達だったため取りこぼしとして修正。3箇所とも#565b56（4.5:1以上）に統一。 */
.join-lp .jlp-context-item .jlp-source-note { font-size: 10px; color: #565b56; }

/* ── 今後の方向性（横スクロールギャラリー） ───────── */
.join-lp .jlp-activities { padding: clamp(95px, 10vw, 145px) 0 clamp(110px, 12vw, 175px); background: var(--jlp-paper); overflow: hidden; }
.join-lp .jlp-section-heading { width: min(100% - 56px, 1180px); margin: 0 auto 48px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 70px; align-items: end; }
.join-lp .jlp-section-heading h2 { font-size: clamp(2.5rem, 4.7vw, 4.4rem); }
.join-lp .jlp-section-heading > p { margin: 0; color: var(--jlp-muted); font-family: var(--jlp-serif); }
.join-lp .jlp-gallery-bar { width: min(100% - 56px, 1180px); margin: 0 auto 22px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.join-lp .jlp-gallery-status { display: flex; align-items: center; gap: 18px; }
.join-lp .jlp-gallery-count { min-width: 48px; font: 15px/1 Georgia, serif; }
.join-lp .jlp-gallery-progress { width: min(35vw, 320px); height: 1px; background: var(--jlp-line); }
.join-lp .jlp-gallery-progress span { display: block; width: 25%; height: 100%; background: var(--jlp-green); transition: width .25s ease; }
.join-lp .jlp-gallery-controls { display: flex; gap: 8px; }
.join-lp .jlp-gallery-control {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	border: 1px solid var(--jlp-line);
	border-radius: 50%;
	background: transparent;
	color: var(--jlp-ink);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.join-lp .jlp-gallery-control:hover { background: var(--jlp-green); color: #fff; }
.join-lp .jlp-gallery-control:disabled { opacity: .35; cursor: default; pointer-events: none; }
.join-lp .jlp-gallery-hint { margin: 0; color: var(--jlp-ink); font-size: 12px; letter-spacing: .05em; }
.join-lp .jlp-activity-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: max(28px, calc((100vw - 1180px) / 2));
	padding: 0 max(28px, calc((100vw - 1180px) / 2)) 22px;
	scrollbar-width: none;
	cursor: grab;
}
.join-lp .jlp-activity-track::-webkit-scrollbar { display: none; }
.join-lp .jlp-activity-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.join-lp .jlp-activity-slide {
	position: relative;
	flex: 0 0 min(64vw, 820px);
	min-height: 590px;
	overflow: hidden;
	scroll-snap-align: start;
	background: var(--jlp-green-deep);
	color: #fff;
	isolation: isolate;
}
.join-lp .jlp-activity-slide::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(0deg, rgba(8,18,14,.82) 0%, rgba(8,18,14,.18) 62%, transparent 100%);
}
.join-lp .jlp-activity-slide img { position: absolute; inset: 0; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.join-lp .jlp-activity-slide:hover img { transform: scale(1.025); }
.join-lp .jlp-activity-content {
	position: absolute;
	z-index: 2;
	left: clamp(28px, 5vw, 66px);
	right: clamp(28px, 5vw, 66px);
	bottom: clamp(30px, 5vw, 62px);
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.join-lp .jlp-activity-number { padding-top: 10px; color: var(--jlp-gold); font: 15px/1 Georgia, serif; }
.join-lp .jlp-activity-content h3 { margin: 0; font-family: var(--jlp-serif); font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; line-height: 1.35; }
.join-lp .jlp-activity-content p { max-width: 680px; margin: 14px 0 0; color: rgba(255,255,255,.78); font-size: 13px; }

/* ── 会員 ───────────────────────────────────────── */
.join-lp .jlp-members { background: var(--jlp-green); color: #fff; }
.join-lp .jlp-members-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(60px, 9vw, 130px); align-items: start; }
.join-lp .jlp-members h2 { margin: 0; font-family: var(--jlp-serif); font-size: clamp(2.2rem, 4.2vw, 4rem); font-weight: 500; line-height: 1.45; }
.join-lp .jlp-members-intro { margin: 24px 0 0; color: rgba(255,255,255,.7); font-family: var(--jlp-serif); }
.join-lp .jlp-member-list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; border-top: 1px solid rgba(255,255,255,.25); }
.join-lp .jlp-member-list li { min-height: 96px; padding: 23px 18px 23px 0; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); font-family: var(--jlp-serif); font-size: 18px; }
.join-lp .jlp-member-list li:nth-child(even) { padding-left: 26px; border-left: 1px solid rgba(255,255,255,.2); }
.join-lp .jlp-member-content { min-width: 0; }
.join-lp .jlp-member-scenes { margin-top: 42px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 18px; align-items: end; }
.join-lp .jlp-scene-figure { margin: 0; min-width: 0; }
.join-lp .jlp-scene-frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: rgba(255,255,255,.1); }
.join-lp .jlp-member-scenes .jlp-scene-figure-secondary { margin-bottom: -44px; }
.join-lp .jlp-member-scenes .jlp-scene-figure-secondary .jlp-scene-frame { aspect-ratio: 4 / 3; }
.join-lp .jlp-scene-frame img {
	width: 100%;
	height: 112%;
	object-fit: cover;
	transform: translate3d(0, var(--jlp-scene-shift, 0), 0) scale(1.035);
	transition: filter .7s ease, transform .25s linear;
	filter: saturate(.82) contrast(.96);
	will-change: transform;
}
.join-lp .jlp-scene-figure:hover img { filter: saturate(1) contrast(1); }
.join-lp .jlp-scene-caption { margin-top: 18px; padding-top: 14px; display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(255,255,255,.24); color: #fff; font-family: var(--jlp-serif); font-size: 17px; }
.join-lp .jlp-scene-caption::before { content: ""; width: 24px; height: 1px; background: var(--jlp-gold); }
.join-lp .jlp-media-reveal .jlp-scene-frame { clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(.18,.74,.22,1); }
.join-lp .jlp-media-reveal-right .jlp-scene-frame { clip-path: inset(0 0 0 100%); }
.join-lp .jlp-media-reveal.is-jlp-visible .jlp-scene-frame { clip-path: inset(0); }

/* ── 入会案内 ───────────────────────────────────── */
.join-lp .jlp-join { position: relative; overflow: hidden; background: var(--jlp-paper); }
.join-lp .jlp-join::before {
	content: "MUSIC & CULTURE";
	position: absolute;
	top: 18px;
	left: -22px;
	color: rgba(36,72,60,.045);
	font: clamp(5rem, 13vw, 12rem)/1 Georgia, serif;
	white-space: nowrap;
	pointer-events: none;
}
.join-lp .jlp-join-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(60px, 9vw, 120px); align-items: start; }
.join-lp .jlp-join-copy h2 { margin: 0; font-family: var(--jlp-serif); font-size: clamp(2.3rem, 3.3vw, 2.8rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.45; }
.join-lp .jlp-join-copy > p:not(.jlp-section-label) { max-width: 560px; margin: 24px 0 0; color: var(--jlp-muted); font-family: var(--jlp-serif); }
.join-lp .jlp-fee-list { border-top: 1px solid var(--jlp-line); }
.join-lp .jlp-fee-row { padding: 30px 0; display: grid; grid-template-columns: 1fr auto; gap: 25px; border-bottom: 1px solid var(--jlp-line); }
.join-lp .jlp-fee-row h3 { margin: 0; font-family: var(--jlp-serif); font-size: 25px; font-weight: 500; }
.join-lp .jlp-fee-row p { margin: 8px 0 0; color: var(--jlp-muted); font-size: 12px; }
.join-lp .jlp-fee { color: var(--jlp-brown); font: 36px/1.25 Georgia, serif; white-space: nowrap; }
.join-lp .jlp-fee small { margin-left: 5px; font-size: 11px; }
.join-lp .jlp-join-forms { margin-top: 36px; }
.join-lp .jlp-join-forms .form-accordion { margin: 0 0 16px; }
.join-lp .jlp-join-forms .wpcf7 { max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }

/* ── フォーカス可視化（WCAG 2.4.7）。トンマナ内の --jlp-gold で統一 ── */
.join-lp .jlp-activity-track:focus-visible,
.join-lp .jlp-gallery-control:focus-visible,
.join-lp .jlp-button:focus-visible,
.join-lp .form-accordion summary:focus-visible {
	outline: 2px solid var(--jlp-gold);
	outline-offset: 3px;
}

/* ── reveal（.jlp- 独自クラス。theme.jsの.revealとは別物） ── */
.join-lp .jlp-reveal { opacity: 0; transform: translateY(38px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.join-lp .jlp-reveal.is-jlp-visible { opacity: 1; transform: none; }
.join-lp .jlp-reveal-delay { transition-delay: .14s; }

@keyframes jlp-hero-settle {
	from { opacity: .4; transform: translate3d(0, var(--jlp-hero-shift, 0), 0) scale(1.12); }
	to { opacity: 1; transform: translate3d(0, var(--jlp-hero-shift, 0), 0) scale(1.055); }
}
@keyframes jlp-scroll-line {
	0%, 100% { transform: scaleY(.25); transform-origin: top; opacity: .35; }
	50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

@media (max-width: 900px) {
	.join-lp .jlp-statement-grid,
	.join-lp .jlp-members-grid,
	.join-lp .jlp-context-grid,
	.join-lp .jlp-join-grid { grid-template-columns: 1fr; gap: 54px; }
	.join-lp .jlp-section-heading { grid-template-columns: 1fr; gap: 20px; }
	.join-lp .jlp-statement-visual { width: min(82%, 680px); }
	.join-lp .jlp-activity-slide { flex-basis: 84vw; }
}

@media (max-width: 640px) {
	.join-lp .jlp-hero-copy, .join-lp .jlp-container, .join-lp .jlp-section-heading, .join-lp .jlp-gallery-bar { width: min(100% - 36px, 1180px); }
	.join-lp .jlp-hero { min-height: 760px; }
	.join-lp .jlp-hero-media img { object-position: 56% center; }
	.join-lp .jlp-hero-shade {
		background: linear-gradient(0deg, rgba(9,20,16,.88) 0%, rgba(9,20,16,.5) 55%, rgba(9,20,16,.16) 100%);
	}
	.join-lp .jlp-hero-copy { padding: 70px 0 70px; }
	.join-lp .jlp-hero h1 { font-size: clamp(2.15rem, 10.4vw, 2.8rem); line-height: 1.32; }
	.join-lp .jlp-hero-lead { font-size: 14px; }
	.join-lp .jlp-hero-actions { display: grid; }
	.join-lp .jlp-hero-actions .jlp-button { width: 100%; }
	.join-lp .jlp-hero-scroll { display: none; }
	.join-lp .jlp-section { padding: 86px 0; }
	.join-lp .jlp-statement h2, .join-lp .jlp-section-heading h2, .join-lp .jlp-join-copy h2 { font-size: clamp(2.25rem, 10vw, 3.05rem); }
	.join-lp .jlp-statement h2 { font-size: 2.08rem; }
	.join-lp .jlp-member-list { grid-template-columns: 1fr; }
	.join-lp .jlp-member-list li:nth-child(even) { padding-left: 0; border-left: 0; }
	.join-lp .jlp-history-list { grid-template-columns: 1fr; }
	.join-lp .jlp-statement-visual { width: 100%; margin-top: 34px; }
	.join-lp .jlp-member-scenes { grid-template-columns: 1fr; gap: 32px; }
	.join-lp .jlp-member-scenes .jlp-scene-figure-secondary { margin: 0; }
	.join-lp .jlp-member-scenes .jlp-scene-frame,
	.join-lp .jlp-member-scenes .jlp-scene-figure-secondary .jlp-scene-frame { aspect-ratio: 3 / 2; }
	.join-lp .jlp-scene-caption { margin-top: 13px; font-size: 15px; }
	.join-lp .jlp-activity-track { gap: 14px; scroll-padding-inline: 18px; padding-inline: 18px; }
	.join-lp .jlp-activity-slide { flex-basis: 88vw; min-height: 540px; }
	.join-lp .jlp-activity-content { grid-template-columns: 1fr; gap: 10px; }
	.join-lp .jlp-activity-content h3 { font-size: 2rem; }
	.join-lp .jlp-gallery-progress { width: 150px; }
	.join-lp .jlp-gallery-hint { font-size: 11px; }
	.join-lp .jlp-gallery-control { width: 44px; height: 44px; }
	.join-lp .jlp-context-grid, .join-lp .jlp-join-grid { gap: 44px; }
	.join-lp .jlp-fee-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.join-lp { scroll-behavior: auto; }
	.join-lp *, .join-lp *::before, .join-lp *::after { animation: none !important; transition: none !important; }
	.join-lp .jlp-reveal { opacity: 1; transform: none; }
	.join-lp .jlp-media-reveal .jlp-scene-frame,
	.join-lp .jlp-media-reveal-right .jlp-scene-frame { clip-path: none; }
	.join-lp .jlp-hero-media img { transform: none; }
	.join-lp .jlp-scene-frame img { transform: none; }
	.join-lp .jlp-sticky-cta { transition: none !important; }
}

/* ── 追従CTAバー（ヒーロー通過後〜入会フォーム到達前まで表示） ──────
 * 2026-07-26追加。DOMはヒーロー直後に静的配置し、position:fixedのみで
 * 画面下部へ固定する（JSでbody末尾へ動的注入しない）ことで、視覚上の位置と
 * Tab移動順序を一致させる。
 * 2026-07-26追記: 出現/消滅を「下からスライドイン＋フェード」に変更。
 * display切り替えだと出入りが瞬間的だったため、transform/opacityで
 * アニメーションさせつつ、visibility + transition-delayで
 * 「フェードアウトが完了してから初めて非表示（visibility:hidden）にする」
 * ことで、非表示状態ではフォーカス・スクリーンリーダーから到達不可という
 * 元の要件を維持する。JS側のaria-hidden/tabIndex制御は変更していない
 * （tabIndexは表示状態が変わった瞬間に即座に-1へ切り替わるため、
 * アニメーション中を含め非表示状態でボタンがTabで拾われることはない）。
 */
.join-lp .jlp-sticky-cta {
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px 20px;
	padding-bottom: max(12px, env(safe-area-inset-bottom));
	background: var(--jlp-green);
	color: #fff;
	box-shadow: 0 -6px 18px rgba(0, 0, 0, .14);
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform .32s ease, opacity .32s ease, visibility 0s linear .32s;
}
.join-lp .jlp-sticky-cta.is-visible {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform .32s ease, opacity .32s ease, visibility 0s linear 0s;
}
/* 2026-07-27: モバイルメニュー展開中（body.menu-open）は、全画面メニューの上に
   追従CTAバーが視覚的に残ってしまう（同z-index:40での衝突）。メニューは排他的な
   モーダルであるべきなので、展開中は表示状態に関わらずバーを強制的に隠す。
   opacity:0だけでなくvisibility:hidden + pointer-events:noneも必ず併用し、
   キーボードフォーカス・スクリーンリーダーからも到達不可にする
   （隠れフォーカストラップを避ける既存方針を踏襲）。メニューを閉じれば
   is-visibleクラスの状態に応じて元の表示/非表示へ自動的に復帰する。 */
body.menu-open .join-lp .jlp-sticky-cta,
body.menu-open .join-lp .jlp-sticky-cta.is-visible {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: none;
}
.join-lp .jlp-sticky-cta-text { margin: 0; font-family: var(--jlp-serif); font-size: 14px; letter-spacing: .02em; }
/* 2026-07-26: バー背景(--jlp-green)とボタン背景が同色で「押せる感じ」が無かったため、
   ボタンは白背景に反転して確実に浮かせる。サイズもタップターゲット基準(44px以上)へ拡大。 */
.join-lp .jlp-sticky-cta-button.jlp-sticky-cta-button {
	min-height: 44px;
	padding: 10px 24px;
	font-size: 14px;
	background: #fff;
	border-color: #fff;
	color: var(--jlp-green-deep);
}
.join-lp .jlp-sticky-cta-button.jlp-sticky-cta-button:hover { background: var(--jlp-cream); }
@media (max-width: 480px) {
	.join-lp .jlp-sticky-cta { justify-content: space-between; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
	.join-lp .jlp-sticky-cta-text { font-size: 12.5px; }
}