/* ==========================================================================
   TEYLL — ボタン・丸い矢印・札（Figma c-teyll-button 1317:1271・c-teyll-button-sp 1368:6453・c-teyll-arrow 1317:1252・
   c-teyll-pill 1317:1293・c-teyll-tag 1317:1301。出し方は template-parts/teyll/helpers.php の truss_teyll_button()・truss_teyll_arrow()・truss_teyll_tag()）
   - c-teyll-button：Primary＝Gradient/Action に白い字（1画面に主は1つ）／Secondary＝白に Ring の輪 2px
     L＝文字＋右に丸い矢印 48（高さ 64）。SP では幅いっぱい・高さ 56・矢印 44（Figma c-teyll-button-sp）
     S＝左にアイコン＋文字（高さ 52。ヘッダー用）
     ホバー：グラデーションの向きが変わる・矢印が右へ 4px
   - c-teyll-arrow：白・Ring の輪 2px・紺の矢印（L 64・M 48）。ホバーで輪が回り、矢印が右へ（リンクの中にあるときはリンクのホバーで）
   - Ring の輪は ::before に Gradient/Ring を敷いて、中を mask でくり抜く（丸・カプセルの形のまま輪になる）
   ========================================================================== */

/* ---------- c-teyll-button ---------- */
.c-teyll-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
	padding: 0 8px 0 32px;
	border: 0;
	border-radius: var(--radius-full);
	font: var(--text-teyll-h4);
	letter-spacing: var(--ls-teyll);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	isolation: isolate;
}

.c-teyll-button__label {
	position: relative;
}

/* 主：Gradient/Action（ホバーで左右を入れかえたグラデーションが重なる） */
.c-teyll-button--primary {
	color: var(--teyll-text-on-dark);
	background: var(--teyll-gradient-action);
}

.c-teyll-button--primary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--teyll-purple-500), var(--teyll-indigo-600));
	opacity: 0;
	transition: opacity 0.4s ease;
}

.c-teyll-button--primary:hover::before {
	opacity: 1;
}

/* 白：Ring の輪 2px（ホバーで輪の向きが動く） */
.c-teyll-button--secondary {
	border: 2px solid transparent;
	color: var(--teyll-text-primary);
	background:
		linear-gradient(var(--teyll-bg-canvas), var(--teyll-bg-canvas)) padding-box,
		linear-gradient(90deg, var(--teyll-green-500), var(--teyll-sky-500) 25%, var(--teyll-purple-500) 50%, var(--teyll-sky-500) 75%, var(--teyll-green-500)) border-box;
	background-size: 100% 100%, 200% 100%; /* 左半分が Gradient/Ring（緑→空色→むらさき） */
	background-position: 0 0, 0 0;
	transition: background-position 0.5s ease;
}

.c-teyll-button--secondary:hover {
	background-position: 0 0, 100% 0;
}

/* L の右の丸い矢印 48（主＝白に紺の矢印／白＝Gradient/Action に白の矢印） */
.c-teyll-button__arrow {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--teyll-bg-canvas);
	color: var(--teyll-text-primary);
}

.c-teyll-button--secondary .c-teyll-button__arrow {
	background: var(--teyll-gradient-action);
	color: var(--teyll-text-on-dark);
}

.c-teyll-button__arrow-icon {
	transition: transform 0.3s ease;
}

.c-teyll-button:hover .c-teyll-button__arrow-icon {
	transform: translateX(4px);
}

/* S（ヘッダー）：左にアイコン・文字 TEYLL/PC/Label */
.c-teyll-button--s {
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 24px 0 20px;
	font: var(--text-teyll-label);
	letter-spacing: var(--ls-teyll-label);
}

.c-teyll-button--secondary.c-teyll-button--s {
	padding: 0 22px 0 18px;
}

.c-teyll-button__icon {
	flex: none;
}

.c-teyll-button[aria-disabled="true"],
.c-teyll-button:disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* SP：L は幅いっぱい・高さ 56・文字 TEYLL/SP/H4 16・矢印 44（Figma c-teyll-button-sp）。2つ並べるときは縦に（並べる側で） */
@media (max-width: 767px) {
	.c-teyll-button--l {
		display: flex;
		width: 100%;
		min-height: 56px;
		gap: 16px;
		padding: 0 6px 0 24px;
		white-space: normal;
	}

	.c-teyll-button--l .c-teyll-button__arrow {
		width: 44px;
		height: 44px;
	}
}

/* ---------- c-teyll-arrow（丸い矢印） ---------- */
.c-teyll-arrow {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--teyll-bg-canvas);
	color: var(--teyll-text-primary);
}

.c-teyll-arrow--m {
	width: 48px;
	height: 48px;
}

.c-teyll-arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 2px;
	border-radius: inherit;
	background: var(--teyll-gradient-ring);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	transition: transform 0.6s ease;
}

.c-teyll-arrow__icon {
	position: relative;
	transition: transform 0.3s ease;
}

button.c-teyll-arrow {
	cursor: pointer;
}

button.c-teyll-arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

button.c-teyll-arrow:not(:disabled):hover::before,
a:hover .c-teyll-arrow::before,
a:focus-visible .c-teyll-arrow::before {
	transform: rotate(180deg);
}

button.c-teyll-arrow--next:not(:disabled):hover .c-teyll-arrow__icon,
a:hover .c-teyll-arrow--next .c-teyll-arrow__icon {
	transform: translateX(4px);
}

button.c-teyll-arrow--prev:not(:disabled):hover .c-teyll-arrow__icon {
	transform: translateX(-4px);
}

/* ---------- c-teyll-pill（業種別のページへ。白いカプセル・右に ›） ---------- */
.c-teyll-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background:
		linear-gradient(var(--teyll-bg-canvas), var(--teyll-bg-canvas)) padding-box,
		linear-gradient(var(--teyll-border-default), var(--teyll-border-default)) border-box;
	font: var(--text-teyll-label);
	font-size: 14px; /* SP も TEYLL/PC/Label 14（Figma の SP の画面も PC の部品のまま） */
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-primary);
	text-decoration: none;
	white-space: nowrap;
}

.c-teyll-pill:hover {
	background:
		linear-gradient(var(--teyll-bg-canvas), var(--teyll-bg-canvas)) padding-box,
		var(--teyll-gradient-ring) border-box;
}

.c-teyll-pill__icon {
	flex: none;
	transition: transform 0.3s ease;
}

.c-teyll-pill:hover .c-teyll-pill__icon {
	transform: translateX(3px);
}

/* ---------- c-teyll-tag（小さな札） ---------- */
.c-teyll-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 12px;
	border-radius: var(--radius-full);
	font: var(--text-teyll-label);
	font-size: 14px; /* SP も TEYLL/PC/Label 14（Figma） */
	letter-spacing: var(--ls-teyll-label);
	color: var(--teyll-text-primary);
	white-space: nowrap;
}

.c-teyll-tag--category {
	background: var(--teyll-bg-subtle);
}

.c-teyll-tag--sample {
	padding: 1px 11px;
	border: 1px solid var(--teyll-accent-yellow);
	background: var(--teyll-bg-yellow-pale);
}