/*
 * トップページ（front-page.php）の見た目
 *
 * 色・書体・余白の正本は crosstalk スキルの references/brand.json。
 * 色を足さない（色はキャラクター4人に任せ、地は白と黒だけにする）。
 * クラス名はすべて ct- で始める（SANGO の見た目と混ざらないように）。
 */

/* ---------- 1. 基本 ---------- */

.ct-front {
	--ct-bg: #ffffff;
	--ct-ink: #111111;
	--ct-sub: #595959;
	--ct-rule: #e6e6e6;
	--ct-band: #f2f2f2;
	--ct-night: #1b1c1f;
	--ct-night-ink: #f2f0eb;
	--ct-night-sub: #a8a6a0;
	--ct-gutter: 80px;
	--ct-section: 120px;

	margin: 0;
	background: var(--ct-bg);
	color: var(--ct-ink);
	font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

@media (max-width: 1199px) {
	.ct-front { --ct-gutter: 40px; --ct-section: 96px; }
}

@media (max-width: 767px) {
	.ct-front { --ct-gutter: 20px; --ct-section: 72px; }
}

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

/*
 * 要素の初期化。:where() で強さを「クラス1つ分」にそろえ、
 * SANGO が要素に付けた指定（h2 の色など）より強く、下の各部品の指定より弱くしている。
 */
.ct-front :where(h1, h2, h3, p, ul, ol, dl, dt, dd, li, small, time, span, button) {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	background: none;
	border: 0;
}

.ct-front :where(h1, h2, h3) {
	font-weight: 700;
}

.ct-front :where(ul, ol) {
	list-style: none;
}

.ct-front :where(a) {
	color: inherit;
}

.ct-front :where(img, svg) {
	display: block;
	max-width: 100%;
}

.ct-front :where(a, button):focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
	border-radius: 4px;
}

.ct-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 8px 16px;
	background: var(--ct-ink);
	color: var(--ct-bg) !important;
	text-decoration: none;
}

.ct-skip:focus {
	top: 16px;
}

.ct-page {
	position: relative;
	z-index: 1;
	background: var(--ct-bg);
	overflow-x: clip;
}

.ct-wrap {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--ct-gutter);
}

/* ---------- 2. キャラクター ---------- */
/*
 * 画像 assets/img/ct-sprite.webp（4行×8列、1コマ 280×440）
 *   行：0 クロハ、1 赤羽レッド、2 ヨイネ・グラス、3 青木アニル
 *   列：0〜2 歩き、3 正面、4〜6 歩き（目を閉じる）、7 正面（目を閉じる）
 * 列の位置は 列番号÷7 の百分率。
 */

.ct-ch {
	--h: 220px;
	position: relative;
	display: block;
	flex: none;
	height: var(--h);
	width: calc(var(--h) * 0.63636);
}

.ct-ch > span {
	position: absolute;
	inset: 0;
	background-image: url(../img/ct-sprite.webp);
	background-repeat: no-repeat;
	background-size: 800% 400%;
	background-position-y: calc(var(--row) * 33.3333%);
}

.ct-ch--front .ct-ch__open { background-position-x: 42.8571%; }
.ct-ch--front .ct-ch__shut { background-position-x: 100%; }

.ct-ch__shut {
	opacity: 0;
	animation: ct-blink var(--blink) linear var(--blink-delay) infinite;
}

/* 足踏み：1 → 2 → 3 → 2 の4コマを 0.88秒で1周 */
.ct-ch--walk .ct-ch__open {
	animation: ct-walk 0.88s steps(1, end) infinite;
}

.ct-ch--walk .ct-ch__shut {
	animation:
		ct-walk-shut 0.88s steps(1, end) infinite,
		ct-blink var(--blink) linear var(--blink-delay) infinite;
}

@keyframes ct-walk {
	0%   { background-position-x: 0%; }
	25%  { background-position-x: 14.2857%; }
	50%  { background-position-x: 28.5714%; }
	75%  { background-position-x: 14.2857%; }
	100% { background-position-x: 0%; }
}

@keyframes ct-walk-shut {
	0%   { background-position-x: 57.1429%; }
	25%  { background-position-x: 71.4286%; }
	50%  { background-position-x: 85.7143%; }
	75%  { background-position-x: 71.4286%; }
	100% { background-position-x: 57.1429%; }
}

/* まばたき：周期の終わりに 0.2秒ほど目を閉じる */
@keyframes ct-blink {
	0%, 93%     { opacity: 0; }
	93.4%, 96.6% { opacity: 1; }
	97%, 100%   { opacity: 0; }
}

/* ---------- 3. ヘッダー ---------- */

.ct-header {
	position: relative;
	z-index: 10;
	background: var(--ct-bg);
}

.ct-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	max-width: 1440px;
	height: 88px;
	margin-inline: auto;
	padding-inline: var(--ct-gutter);
}

.ct-logo img {
	width: auto;
	height: 28px;
}

.ct-nav ul {
	display: flex;
	gap: 36px;
}

.ct-nav a {
	display: block;
	padding-block: 8px;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
}

.ct-nav a:hover {
	text-decoration: underline;
	text-underline-offset: 6px;
}

.ct-menu-btn {
	display: none;
}

@media (max-width: 1023px) {
	.ct-header__in {
		height: 64px;
		padding-right: 8px;
	}

	.ct-logo img {
		height: 22px;
	}

	.ct-menu-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 44px;
		min-height: 44px;
		padding: 0 12px;
		border: 0;
		background: none;
		color: var(--ct-ink);
		font: inherit;
		font-size: 0.8125rem;
		font-weight: 700;
		cursor: pointer;
	}

	/* JS が動かない環境では、メニューを畳まずに並べる */
	html:not(.ct-js) .ct-menu-btn {
		display: none;
	}

	html:not(.ct-js) .ct-header__in {
		flex-wrap: wrap;
		height: auto;
		padding-block: 16px;
	}

	html:not(.ct-js) .ct-nav ul {
		flex-wrap: wrap;
		gap: 4px 20px;
	}

	.ct-js .ct-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: var(--ct-bg);
		border-bottom: 1px solid var(--ct-ink);
	}

	.ct-js .ct-nav.is-open {
		display: block;
	}

	.ct-js .ct-nav ul {
		display: block;
		padding: 8px var(--ct-gutter) 16px;
	}

	.ct-js .ct-nav li + li {
		border-top: 1px solid var(--ct-rule);
	}

	.ct-js .ct-nav a {
		display: flex;
		align-items: center;
		min-height: 52px;
		font-size: 1rem;
	}
}

/* ---------- 4. ヒーロー ---------- */
/*
 * 街の線画は1枚 1440×460。3枚を横につなぎ、1枚分ずつ左へ流して途切れなく回す。
 * 手前（建物・地面）と奥（雲・電線）で速さを変えて、奥行きを出す。
 */

.ct-hero {
	--tile-w: 1440px;
	--tile-h: 460px;
	--stroke: 2.5px;
	--near: 40s;
	--far: 110s;
	--ch-h: 150px;
	--gap: 20px;
	--amp: 1;
	position: relative;
}

@media (max-width: 1199px) {
	.ct-hero {
		--tile-w: 1080px;
		--tile-h: 345px;
		--stroke: 3.3px;
		--near: 32s;
		--far: 88s;
		--ch-h: 118px;
		--gap: 14px;
		--amp: 0.8;
	}
}

@media (max-width: 767px) {
	.ct-hero {
		--tile-w: 720px;
		--tile-h: 230px;
		--stroke: 4px;
		--near: 24s;
		--far: 66s;
		--ch-h: 84px;
		--gap: 6px;
		--amp: 0.55;
	}
}

.ct-hero__text {
	padding-top: 48px;
	padding-bottom: 8px;
}

.ct-hero__title {
	font-size: clamp(2.375rem, 1.1rem + 3.9vw, 4.75rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.ct-hero__title span {
	display: inline-block;
}

.ct-hero__name {
	margin-top: 16px;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	font-weight: 700;
	line-height: 1.6;
}

.ct-hero__lead {
	margin-top: 8px;
	color: var(--ct-sub);
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	line-height: 1.8;
}

.ct-stage {
	position: relative;
	height: var(--tile-h);
	overflow: hidden;
}

.ct-layer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(var(--tile-w) * 3);
	height: var(--tile-h);
	animation: ct-pan linear infinite;
	will-change: transform;
}

.ct-layer--near { animation-duration: var(--near); }
.ct-layer--far  { animation-duration: var(--far); }

.ct-layer svg {
	width: 100%;
	height: 100%;
	max-width: none;
	overflow: visible;
}

.ct-layer path,
.ct-layer circle {
	fill: none;
	stroke: var(--ct-ink);
	stroke-width: var(--stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

@keyframes ct-pan {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(var(--tile-w) * -1), 0, 0); }
}

/* 開いたときに、線が描かれていく */
.ct-layer .ln {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: ct-draw 2.6s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}

@keyframes ct-draw {
	to { stroke-dashoffset: 0; }
}

/* 4人は中央に横一列。左から アニル、ヨイネ、クロハ、レッド */
.ct-party {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--tile-h) * 0.055);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--gap);
}

.ct-party .ct-ch {
	--h: var(--ch-h);
}

.ct-drift,
.ct-bob {
	display: block;
}

.ct-drift {
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.ct-drift--1 { animation-name: ct-drift-1; }
.ct-drift--2 { animation-name: ct-drift-2; }
.ct-drift--3 { animation-name: ct-drift-3; }

@keyframes ct-drift-1 {
	0%, 100% { transform: translate(0, 0); }
	30% { transform: translate(calc(var(--amp) * 26px), calc(var(--amp) * -10px)); }
	55% { transform: translate(calc(var(--amp) * 6px), calc(var(--amp) * 4px)); }
	80% { transform: translate(calc(var(--amp) * -24px), calc(var(--amp) * -6px)); }
}

@keyframes ct-drift-2 {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(calc(var(--amp) * -22px), calc(var(--amp) * -8px)); }
	50% { transform: translate(calc(var(--amp) * -4px), calc(var(--amp) * 6px)); }
	75% { transform: translate(calc(var(--amp) * 24px), calc(var(--amp) * -12px)); }
}

@keyframes ct-drift-3 {
	0%, 100% { transform: translate(0, 0); }
	35% { transform: translate(calc(var(--amp) * 18px), calc(var(--amp) * 6px)); }
	60% { transform: translate(calc(var(--amp) * -8px), calc(var(--amp) * -12px)); }
	85% { transform: translate(calc(var(--amp) * -20px), calc(var(--amp) * 2px)); }
}

.ct-bob {
	animation: ct-bob 0.44s ease-in-out infinite alternate;
}

@keyframes ct-bob {
	from { transform: translateY(0); }
	to   { transform: translateY(-3px); }
}

/* 画面の外にあるときは止める（front.js が付け外しする） */
.ct-stage.is-paused * {
	animation-play-state: paused !important;
}

/* ---------- 5. セクション共通 ---------- */

.ct-section {
	padding-top: var(--ct-section);
}

.ct-hero + .ct-section {
	padding-top: min(var(--ct-section), 72px);
}

.ct-chunk {
	display: inline-block;
}

.ct-section--last {
	padding-bottom: var(--ct-section);
}

.ct-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 56px;
}

.ct-head .ct-ch {
	--h: 220px;
}

.ct-h2 {
	font-size: clamp(2rem, 1.55rem + 1.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.ct-h2 span {
	display: inline-block;
}

.ct-lead {
	margin-top: 16px;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.8;
}

.ct-link {
	display: inline-block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.6;
	text-underline-offset: 6px;
}

.ct-link:hover {
	text-decoration-thickness: 2px;
}

@media (max-width: 767px) {
	.ct-head {
		gap: 16px;
		margin-bottom: 36px;
	}

	.ct-head .ct-ch {
		--h: 132px;
	}
}

/* ---------- 6. イベント ---------- */

.ct-events {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 64px;
}

.ct-event {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 28px;
	border-top: 2px solid var(--ct-ink);
}

.ct-event__name {
	font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem);
	font-weight: 700;
	line-height: 1.45;
}

.ct-event__catch {
	color: var(--ct-sub);
	font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
	font-weight: 700;
	line-height: 1.6;
}

.ct-dl {
	display: grid;
	grid-template-columns: 4em minmax(0, 1fr);
	gap: 8px 16px;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.ct-dl dt {
	color: var(--ct-sub);
}

.ct-upcoming {
	display: grid;
	grid-template-columns: 12em minmax(0, 1fr) auto;
	align-items: start;
	gap: 16px 32px;
	margin-top: 56px;
	padding-block: 28px;
	border-top: 1px solid var(--ct-rule);
	border-bottom: 1px solid var(--ct-rule);
}

.ct-upcoming__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.8;
}

.ct-upcoming__list li + li {
	margin-top: 12px;
}

.ct-upcoming__list a {
	display: grid;
	grid-template-columns: 9.5em minmax(0, 1fr);
	gap: 4px 16px;
	text-decoration: none;
	line-height: 1.7;
}

.ct-upcoming__list a:hover .ct-upcoming__name {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.ct-upcoming__when {
	color: var(--ct-sub);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.ct-upcoming__name {
	font-weight: 700;
}

.ct-upcoming__none {
	line-height: 1.8;
}

@media (max-width: 1023px) {
	.ct-events {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.ct-upcoming {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 40px;
		padding-block: 24px;
	}

	.ct-upcoming__list a {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- 7. 部活動 ---------- */

.ct-clubs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

.ct-club {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--ct-ink);
}

.ct-club__name {
	font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem);
	font-weight: 700;
	line-height: 1.45;
}

.ct-club__who {
	color: var(--ct-sub);
	font-size: 0.875rem;
	line-height: 1.8;
}

@media (max-width: 1199px) {
	.ct-clubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.ct-clubs {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* ---------- 8. 招待制。でも、入口は開いています。 ---------- */

.ct-band {
	margin: var(--ct-section) var(--ct-gutter) 0;
}

.ct-band__in {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	align-items: center;
	gap: 72px;
	max-width: 1280px;
	margin-inline: auto;
	padding: 72px 96px;
	background: var(--ct-band);
	border-radius: 40px;
}

.ct-band__guide {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.ct-band__guide .ct-ch {
	--h: 270px;
}

.ct-bubble {
	position: relative;
	padding: 16px 24px;
	background: var(--ct-bg);
	border: 2px solid var(--ct-ink);
	border-radius: 28px;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

.ct-bubble::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -11px;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	background: var(--ct-bg);
	border-right: 2px solid var(--ct-ink);
	border-bottom: 2px solid var(--ct-ink);
	transform: rotate(45deg);
}

.ct-band__text {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 760px;
}

.ct-h2--large {
	font-size: clamp(2rem, 1.4rem + 1.9vw, 3rem);
	line-height: 1.4;
}

.ct-band__text p {
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 2;
}

@media (max-width: 1199px) {
	.ct-band__in {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 48px;
		padding: 56px 56px;
	}

	.ct-band__guide .ct-ch { --h: 220px; }
}

@media (max-width: 767px) {
	.ct-band {
		margin-inline: 16px;
	}

	.ct-band__in {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 40px 24px 48px;
		border-radius: 32px;
	}

	.ct-band__guide .ct-ch { --h: 200px; }

	.ct-bubble { font-size: 1rem; }
}

/* ---------- 9. 最近の出来事 ---------- */

.ct-news {
	border-top: 2px solid var(--ct-ink);
}

.ct-news li {
	border-bottom: 1px solid var(--ct-rule);
}

.ct-news a {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: center;
	gap: 8px 32px;
	min-height: 88px;
	padding-block: 16px;
	text-decoration: none;
}

.ct-news__meta {
	display: flex;
	flex-direction: column;
	color: var(--ct-sub);
	font-size: 0.875rem;
	line-height: 1.7;
}

.ct-news__title {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	font-weight: 700;
	line-height: 1.7;
}

.ct-news a:hover .ct-news__title {
	text-decoration: underline;
	text-underline-offset: 6px;
}

@media (max-width: 767px) {
	.ct-news a {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 20px;
	}

	.ct-news__meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 12px;
	}

	.ct-news__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
}

/* ---------- 10. 入団の流れ ---------- */

.ct-join {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	gap: 64px;
}

.ct-join__guard {
	padding-top: 8px;
}

.ct-join__guard .ct-ch {
	--h: 283px;
}

.ct-join__main {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.ct-join__main .ct-lead {
	margin-top: 0;
}

.ct-fees {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.ct-fee {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px;
	border: 1px solid var(--ct-ink);
	border-radius: 20px;
}

.ct-fee__label,
.ct-fee__note {
	color: var(--ct-sub);
	font-size: 0.875rem;
	line-height: 1.6;
}

.ct-fee__price {
	font-size: clamp(1.625rem, 1.4rem + 0.6vw, 2rem);
	font-weight: 700;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.ct-button {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 36px;
	background: var(--ct-ink);
	border-radius: 999px;
	color: var(--ct-bg) !important;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
}

.ct-button:hover {
	background: #333333;
}

.ct-steps {
	counter-reset: ct-step;
	border-bottom: 1px solid var(--ct-rule);
}

.ct-steps li {
	counter-increment: ct-step;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	gap: 16px;
	padding-block: 20px;
	border-top: 1px solid var(--ct-rule);
	font-size: 1.0625rem;
	line-height: 1.8;
}

.ct-steps li::before {
	content: counter(ct-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid var(--ct-ink);
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.ct-note {
	margin-top: 16px;
	color: var(--ct-sub);
	font-size: 0.875rem;
	line-height: 1.8;
}

@media (max-width: 1199px) {
	.ct-join {
		grid-template-columns: 160px minmax(0, 1fr);
		gap: 40px 48px;
	}

	.ct-join__guard .ct-ch { --h: 230px; }

	.ct-join__steps {
		grid-column: 2;
	}
}

@media (max-width: 767px) {
	.ct-join {
		display: block;
	}

	.ct-join__guard {
		float: right;
		margin: 0 0 8px 16px;
		padding-top: 0;
	}

	.ct-join__guard .ct-ch { --h: 145px; }

	.ct-join__main {
		gap: 24px;
	}

	.ct-fees {
		clear: both;
		gap: 12px;
	}

	.ct-fee {
		padding: 20px 16px;
	}

	.ct-button {
		align-self: stretch;
	}

	.ct-join__steps {
		margin-top: 32px;
	}

	.ct-steps li {
		font-size: 1rem;
	}
}

/* ---------- 11. フッター（夜の街） ---------- */
/*
 * 本文（.ct-page）の下に固定しておき、最後までスクロールすると
 * シャッターが上がるように現れる（カーテン・リビール）。
 */

.ct-footer {
	--night-h: 360px;
	position: sticky;
	bottom: 0;
	z-index: 0;
	background: var(--ct-night);
	color: var(--ct-night-ink);
}

.ct-footer a {
	color: var(--ct-night-ink);
}

.ct-footer__top {
	display: flex;
	justify-content: space-between;
	gap: 48px;
	padding-top: 72px;
}

.ct-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ct-footer__brand img {
	width: 130px;
	height: auto;
}

.ct-footer__sns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-size: 0.9375rem;
}

.ct-footer__sns a {
	text-underline-offset: 5px;
}

.ct-footer__nav ul {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 16px 56px;
}

.ct-footer__nav a {
	font-size: 0.9375rem;
	text-decoration: none;
}

.ct-footer__nav a:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
}

.ct-night {
	position: relative;
	height: var(--night-h);
	margin-top: 24px;
	overflow: hidden;
}

.ct-night svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

/* 灯りの輪の中に立たせる（夜の地では、クロハの黒とアニルの藍が沈むため） */
.ct-night__party {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(max(100vw / 24, var(--night-h) / 6) - 6px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 24px;
}

.ct-night__party .ct-ch {
	--h: 170px;
}

.ct-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 20px 24px;
	color: var(--ct-night-sub);
	font-size: 0.8125rem;
	line-height: 1.7;
}

/* 右下の「ページの先頭へ戻る」ボタンと重ならないように空ける */
.ct-footer__bottom {
	padding-right: max(var(--ct-gutter), 104px);
}

.ct-footer__bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.ct-footer__bottom a {
	color: var(--ct-night-sub);
}

@media (max-width: 767px) {
	.ct-footer {
		--night-h: 220px;
	}

	.ct-footer__top {
		flex-direction: column;
		gap: 28px;
		padding-top: 48px;
	}

	.ct-footer__brand img {
		width: 96px;
	}

	.ct-footer__nav ul {
		gap: 14px 24px;
	}

	.ct-footer__nav a {
		font-size: 0.875rem;
	}

	.ct-night__party {
		gap: 10px;
	}

	.ct-night__party .ct-ch {
		--h: 100px;
	}

	.ct-footer__bottom {
		justify-content: center;
		padding-right: var(--ct-gutter);
		padding-bottom: 80px;
		text-align: center;
	}

	.ct-footer__bottom ul {
		justify-content: center;
	}
}

/* ---------- 12. ページの先頭へ戻るボタン ---------- */
/*
 * ヒーローが画面から出たら、右下に現れる。
 * 白地でも夜のフッターでも見えるように、黒い丸に白い縁を付けている。
 */

.ct-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--ct-ink);
	border: 2px solid var(--ct-bg);
	border-radius: 50%;
	color: var(--ct-bg) !important;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.ct-totop.is-shown,
html:not(.ct-js) .ct-totop {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ct-totop:hover {
	background: #333333;
}

.ct-front .ct-totop:focus-visible {
	outline: 3px solid var(--ct-ink);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.ct-totop {
		right: 16px;
		bottom: 16px;
		width: 48px;
		height: 48px;
	}
}

/* ---------- 13. 動きを減らす設定の人には、すべて止めて見せる ---------- */

@media (prefers-reduced-motion: reduce) {
	.ct-layer,
	.ct-layer .ln,
	.ct-drift,
	.ct-bob,
	.ct-ch > span {
		animation: none !important;
	}

	.ct-layer .ln {
		stroke-dashoffset: 0;
	}

	.ct-ch--walk .ct-ch__open {
		background-position-x: 14.2857%;
	}

	.ct-ch__shut {
		opacity: 0;
	}

	.ct-totop {
		transition: none;
	}
}