/* ==========================================================================
   corop — 準備中ページ（page-coming-soon.php 専用）
   基準: 他ページと同じ Figma PC 1280px ×1.125 換算
   ※色トークン・フォントは header-footer.css の :root で定義（先に読み込む）
   ========================================================================== */

.cs {
	position: relative;
	overflow: hidden;
	padding: 120px 24px 200px;
	color: var(--corop-ink, #4c4948);
	font-family: var(--corop-font, "Avenir", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif);
	text-align: center;
}

/* ===== 肉球（背景の飾り・404ページと同じ素材） ===== */
.cs__paws {
	position: absolute;
	top: 60px;
	left: 50%;
	width: 243px;
	height: 322px;
	transform: translateX(230px);
	opacity: 0.35;
	pointer-events: none;
}
.cs__paws img {
	position: absolute;
	width: 92px;
	height: auto;
}
.cs__paws img:nth-child(1) { top: 0;     left: 1px;   width: 82px; }
.cs__paws img:nth-child(2) { top: 115px; left: 0; }
.cs__paws img:nth-child(3) { top: 126px; left: 122px; width: 93px; }
.cs__paws img:nth-child(4) { top: 238px; left: 153px; width: 90px; }

/* ===== 見出し ===== */
.cs-head {
	position: relative;
	z-index: 1;
}
.cs-head__title {
	margin: 0;
	color: var(--corop-orange, #d79000);
	font-size: 53px; /* 商品一覧の見出しと同値 */
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.15;
}
/* ===== 本文 ===== */
.cs-body {
	position: relative;
	z-index: 1;
	max-width: 736px;
	margin: 44px auto 0;
}
.cs-body__lead {
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.1em;
	line-height: 2.1;
}
/* 管理画面の本文（任意） */
.cs-body__content {
	margin-top: 32px;
	text-align: left;
}

/* ===== トップへ戻るボタン（送信完了ページと同じピル型） ===== */
.cs-actions {
	margin-top: 52px;
}
.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 378px;
	max-width: 100%;
	height: 71px;
	border: 1px solid var(--corop-olive, #9d8a3c);
	border-radius: 999px;
	background: var(--corop-white, #fff) url("../images/arrow.svg") no-repeat right 26px center;
	background-size: 26px auto;
	color: var(--corop-olive, #9d8a3c);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.cs-btn:hover {
	background-color: var(--corop-olive, #9d8a3c);
	color: var(--corop-white, #fff);
}
.cs-btn:focus-visible {
	outline: 2px solid var(--corop-olive, #9d8a3c);
	outline-offset: 3px;
}

/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 768px) {
	.cs {
		padding: 60px 20px 90px;
	}
	.cs__paws {
		top: 16px;
		left: auto;
		right: 6px;
		width: 130px;
		height: 172px;
		transform: none;
		opacity: 0.25;
	}
	.cs__paws img { width: 49px; }
	.cs__paws img:nth-child(1) { top: 0;     left: 1px;  width: 44px; }
	.cs__paws img:nth-child(2) { top: 61px;  left: 0; }
	.cs__paws img:nth-child(3) { top: 67px;  left: 65px; width: 50px; }
	.cs__paws img:nth-child(4) { top: 127px; left: 82px; width: 48px; }
	.cs-head__title {
		font-size: 34px;
	}
	.cs-body {
		margin-top: 30px;
	}
	.cs-body__lead {
		font-size: 13px;
		line-height: 1.95;
	}
	.cs-actions {
		margin-top: 34px;
	}
	.cs-btn {
		width: 269px;
		height: 50px;
		background-position: right 20px center;
		background-size: 20px auto;
		font-size: 16px;
	}
}