/*
 * c-button コンポーネント（BEM: .c-button / .c-button--outline）。
 * ボタンブロックは「追加CSSクラス」が外側の div に付き、実際の <a> に当たらないため、
 * セレクタを併記して内側のリンクにも同じ見た目を当てている（定義はこの1箇所に保つ）。
 * 使い方: ボタンブロックの「追加CSSクラス」に c-button（必要なら c-button--outline も）。
 */
.c-button:not( .wp-block-button ),
.wp-block-button.c-button .wp-block-button__link {
	display: block;
	max-width: 178px;
	position: relative;
	font-size: 15px;
	padding-block:1.05em;
	background-color: transparent;
	color: var( --color-white );
	border: 1px solid var(--color-white);
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
	button[type=reset].c-button.c-button--outline{
		color: var(--color-text);
		border-color: var(--color-crosspile-header);
		padding-inline:1em;
		border-radius: 4px;
	}
.l-main--crosspile{
.c-button--outline:not( .wp-block-button ),
.c-button--outline .wp-block-button__link {
		background-color: var( --crosspile-accent, var( --color-accent, var( --color-navy ) ) );
	border: 1px solid var( --crosspile-accent, var( --color-accent, var( --color-navy ) ) );
	color: var( --color-white );
	transition: 0.3s linear;
	&:hover{
	background: var( --color-white );
	color: var( --crosspile-accent, var( --color-accent, var( --color-navy ) ) );
	border: 1px solid var( --crosspile-accent, var( --color-accent, var( --color-navy ) ) )
	}
}
.c-button.c-button--outline{display: block;}
.c-button .wp-block-button__link{max-width: unset;}
}
.crosspile-button-area.crosspile-button-area--sim{
	width: fit-content;
	margin-inline: auto;
}

/*
 * 企業ページ（l-main--front）限定：背景をアクセントカラーで塗りつぶし、
 * hoverで白背景・アクセント文字色に反転する。
 */
.l-main--front .c-button:not( .wp-block-button ),
.l-main--front .wp-block-button.c-button a{
	max-width: unset;
	width: fit-content;
	background-color: var( --color-accent );
	border-color: var( --color-accent );
	letter-spacing: 0.125em;
	transition: 0.3s linear;
	padding-inline: 2.25rem;
	display: inline-flex;
	align-items: center;
	gap:0.75em;
	&::after{
		content: "";
		display: inline-block;
		width: 24px;
		height: 15px;
		letter-spacing: unset;
		background-color: currentColor;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 15'%3E%3Cpath d='M15.1523 0.292969C15.5428 -0.0974567 16.1759 -0.0972591 16.5664 0.292969L22.9307 6.65723C23.3211 7.04776 23.3212 7.6808 22.9307 8.07129L16.5664 14.4355C16.1759 14.8256 15.5427 14.8258 15.1523 14.4355C14.762 14.0452 14.7622 13.412 15.1523 13.0215L19.8096 8.36426H0V6.36426H19.8096L15.1523 1.70703C14.7622 1.31652 14.762 0.683403 15.1523 0.292969Z'/%3E%3C/svg%3E");
		mask-repeat: no-repeat;
		mask-size: contain;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 15'%3E%3Cpath d='M15.1523 0.292969C15.5428 -0.0974567 16.1759 -0.0972591 16.5664 0.292969L22.9307 6.65723C23.3211 7.04776 23.3212 7.6808 22.9307 8.07129L16.5664 14.4355C16.1759 14.8256 15.5427 14.8258 15.1523 14.4355C14.762 14.0452 14.7622 13.412 15.1523 13.0215L19.8096 8.36426H0V6.36426H19.8096L15.1523 1.70703C14.7622 1.31652 14.762 0.683403 15.1523 0.292969Z'/%3E%3C/svg%3E");
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
	}

	&:hover {
		background-color: var( --color-white );
		color: var( --color-accent );
		border-color: var( --color-accent );
	}
}