/**
 * 07_utilities.css (Monochrome Refresh)
 *
 * 共通ボタン & ユーティリティ
 * (配色は 01_base.css の変数を参照)
 */

/* --- 共通CTAボタン (塗り) --- */
.cta-button {
	display: inline-block;
	background: var(--color-accent); /* チャコール */
	color: var(--color-text-reverse); /* 白 */
	font-family: var(--font-family-heading);
	font-weight: 700;
	padding: 12px 30px;
	border-radius: var(--border-radius-base);
	border: 2px solid var(--color-accent);
	transition: all 0.3s ease;
	text-decoration: none;
	cursor: pointer;
	font-size: 1.6rem;
}
.cta-button:hover {
	background-color: var(--color-accent-hover); /* やや明るいグレー */
	border-color: var(--color-accent-hover);
	color: var(--color-text-reverse);
	transform: translateY(-2px);
	text-decoration: none;
}
/* ヒーローセクションのボタンのみ大きくする (front-page.css側で) */
.hero .cta-button {
	padding: 14px 32px;
}


/* --- 共通CTAボタン (アウトライン) --- */
.cta-button-outline {
	background: transparent;
	color: var(--color-accent); /* チャコール */
	border: 2px solid var(--color-accent); /* チャコール */
	/* .cta-button とpadding, font などを合わせる */
	display: inline-block;
	font-family: var(--font-family-heading);
	font-weight: 700;
	padding: 12px 30px;
	border-radius: var(--border-radius-base);
	transition: all 0.3s ease;
	text-decoration: none;
	cursor: pointer;
	font-size: 1.6rem;
}
.cta-button-outline:hover {
	background-color: var(--color-accent); /* チャコール */
	color: var(--color-text-reverse); /* 白 */
	transform: translateY(-2px);
	text-decoration: none;
}


/* --- トップに戻るボタン --- */
#back-to-top-btn {
	position: fixed;
	bottom: 30px;
	right: 30px;
	background-color: var(--color-accent); /* チャコール */
	color: var(--color-text-reverse); /* 白 */
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
	border: none;
	cursor: pointer;
}
#back-to-top-btn.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#back-to-top-btn:hover {
	background-color: var(--color-accent-hover); /* やや明るいグレー */
	transform: translateY(-2px);
}
#back-to-top-btn svg {
	width: 24px;
	height: 24px;
}