/* ===== 共通ボタンプリセット =====
 * ブロック内リンクに oc-btn + バリエーションクラスを付与して使う
 * カラーは --oc-btn-color で上書き可能（未指定ならプリセットデフォルト）
 */

/* ----- 共通ベース ----- */
.oc-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.3s, opacity 0.3s;
}

/* ========================================
 * Style 1: ピル型ボタン (okuzono風)
 * 濃い背景 + 右端に白丸矢印
 * ホバーで色反転 + 矢印スライド
 * ======================================== */
.oc-btn--pill {
	--_btn-color: var(--oc-btn-color, var(--wp--preset--color--heading, #243A68));
	position: relative;
	background: var(--_btn-color);
	border: 1px solid var(--_btn-color);
	border-radius: 100px;
	color: #fff;
	padding: 0 55px 0 30px;
	height: 64px;
	line-height: 64px;
	font-size: var(--wp--preset--font-size--sm, 14px);
	transition: background 0.3s, color 0.3s;
}

.oc-btn--pill::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 34px;
	height: 34px;
	background: #fff;
	border-radius: 100%;
	transform: translateY(-50%);
	transition: background 0.3s;
}

.oc-btn--pill::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 24px;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--_btn-color);
	border-right: 2px solid var(--_btn-color);
	transform: translateY(-50%) rotate(45deg);
	transition: border-color 0.3s, right 0.3s;
}

.oc-btn--pill:hover {
	background: #fff;
	color: var(--_btn-color);
}

.oc-btn--pill:hover::before {
	background: var(--_btn-color);
}

.oc-btn--pill:hover::after {
	border-color: #fff;
	right: 19px;
}

/* ピル型 反転バリエーション（白背景ベース） */
.oc-btn--pill-inv {
	--_btn-color: var(--oc-btn-color, var(--wp--preset--color--heading, #243A68));
	position: relative;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 100px;
	color: var(--_btn-color);
	padding: 0 55px 0 30px;
	height: 64px;
	line-height: 64px;
	font-size: var(--wp--preset--font-size--sm, 14px);
	font-weight: 700;
	transition: background 0.3s, color 0.3s;
}

.oc-btn--pill-inv::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;
	width: 34px;
	height: 34px;
	background: var(--_btn-color);
	border-radius: 100%;
	transform: translateY(-50%);
	transition: background 0.3s;
}

.oc-btn--pill-inv::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 25px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translateY(-50%) rotate(45deg);
	transition: border-color 0.3s, right 0.3s;
}

.oc-btn--pill-inv:hover {
	background: var(--_btn-color);
	color: #fff;
}

.oc-btn--pill-inv:hover::before {
	background: #fff;
}

.oc-btn--pill-inv:hover::after {
	border-color: var(--_btn-color);
	right: 19px;
}

/* ========================================
 * Style 2: テキスト＋丸矢印 (aoshima風)
 * テキストリンク + SVG丸アイコン
 * ホバーで背景が左からスライドイン
 * ======================================== */
.oc-btn--text-arrow {
	--_btn-color: var(--oc-btn-color, var(--wp--preset--color--primary, #113763));
	position: relative;
	color: var(--_btn-color);
	font-size: 18px;
	letter-spacing: 0.05em;
	padding: 8px 8px 8px 23px;
	border-radius: 999px;
	overflow: hidden;
	z-index: 0;
	transition: color 0.3s;
}

.oc-btn--text-arrow::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--_btn-color);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
	z-index: -1;
	border-radius: 999px;
}

.oc-btn--text-arrow:hover::before {
	transform: scaleX(1);
}

.oc-btn--text-arrow:hover {
	color: #fff;
}

.oc-btn--text-arrow svg circle {
	transition: fill 0.3s;
}

.oc-btn--text-arrow svg path {
	transition: fill 0.3s;
}

.oc-btn--text-arrow:hover svg circle {
	fill: #fff;
}

.oc-btn--text-arrow:hover svg path {
	fill: var(--_btn-color);
}

/* ========================================
 * Style 3: シンプルテキストリンク（デフォルト）
 * テキスト + 小さい矢印、ホバーで右にスライド
 * ======================================== */
.oc-btn--simple {
	color: var(--oc-btn-color, var(--wp--preset--color--primary, #3D98BC));
	font-weight: 500;
}

.oc-btn--simple svg {
	width: 1.25em;
	height: 1.25em;
	transition: transform 0.3s;
}

.oc-btn--simple:hover {
	opacity: 0.7;
}

.oc-btn--simple:hover svg {
	transform: translateX(4px);
}

/* ----- モバイル ----- */
@media (max-width: 768px) {

	.oc-btn--pill,
	.oc-btn--pill-inv {
		height: 52px;
		line-height: 52px;
		padding: 0 48px 0 24px;
		font-size: var(--wp--preset--font-size--xs, 13px);
	}

	.oc-btn--pill::before,
	.oc-btn--pill-inv::before {
		width: 28px;
		height: 28px;
		right: 8px;
	}

	.oc-btn--pill::after,
	.oc-btn--pill-inv::after {
		right: 19px;
		width: 8px;
		height: 8px;
	}

	.oc-btn--text-arrow {
		font-size: 16px;
	}
}