/**
 * BCJ 共通スタイル（フロント全ページ・エディタ共通）
 *
 * どのブロックからでも使う変数・書式のスタイルを置く。
 */

/*
 * テーマの色・文字の変数（page-seo.css の .seo と同じ値）
 * テーマは .seo ラッパーの中でしか定義していないため、ラッパーが無いページ
 * （page-seo-block-layout.php の .entry など）でもブロック内の var(--blue) 等が効くよう :root に置く。
 * .seo（や .seo.b-line）の中ではテーマ側の定義が優先される。
 */
:root {
	--black: #2e2e2e;
	--white: #fff;
	--blue: #0071ce;
	--yellow: #ffcf48;
	--borderDefault: #8e8e8e;
	--bgLightBlue: #f3f8fd;
	--fwRegular: 400;
	--fwMedium: 500;
	--fwBold: 600;
	--lh170: 170%;
	--lh150: 150%;
	--lh140: 140%;
}

/* 書式「青文字」（src/shared/format-blue.js） */
.f-blue {
	color: var(--blue);
}

/* 書式「PCのみ改行」「SPのみ改行」（src/shared/format-br.js） */
@media screen and (max-width: 599px) {
	.bcj-br-pc br {
		display: none;
	}
}

@media screen and (min-width: 600px) {
	.bcj-br-sp br {
		display: none;
	}
}

/* 全ブロック共通「PCのみ表示」「SPのみ表示」（assets/editor-visibility.js・functions.php） */
@media screen and (max-width: 599px) {
	.bcj-onlyPc {
		display: none !important;
	}
}

@media screen and (min-width: 600px) {
	.bcj-onlySp {
		display: none !important;
	}
}

/*
 * コアのボタン「矢印（View More）」スタイル（functions.php の register_block_style）
 * テーマの .btn / .btn__arrow と同じ見た目を、コアのマークアップのまま擬似要素で再現する。
 * 矢印は 65px の線：ボタン内側の 38px が白、外側にはみ出す 27px が #1a1a1a、先端に斜線。
 */
.wp-block-button.is-style-bcj-more .wp-block-button__link {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 10px;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	line-height: 1.3333333333;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #2e2e2e;
}

.wp-block-button.is-style-bcj-more .wp-block-button__link::after,
.wp-block-button.is-style-bcj-more .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 50%;
	pointer-events: none;
}

.wp-block-button.is-style-bcj-more .wp-block-button__link::after {
	right: -27px;
	width: 65px;
	height: 1px;
	background: linear-gradient(to right, #fff calc(100% - 27px), #1a1a1a calc(100% - 27px));
}

.wp-block-button.is-style-bcj-more .wp-block-button__link::before {
	right: calc(-27px - 1.5px);
	width: 10px;
	height: 1px;
	margin-top: -4px;
	background: #1a1a1a;
	transform: rotate(48deg);
}