.button-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 24px;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
}

/*
 * CONTACTとサービスFVで共有する、円が広がる2色ボタン。
 * 配色と外形は呼び出し側のカスタムプロパティで決める。
 */
.fill-swap-btn {
	--fill-swap-from-bg: #fff;
	--fill-swap-from-color: var(--color-ink);
	--fill-swap-to-bg: var(--color-ink);
	--fill-swap-to-color: #fff;
	--fill-swap-border: #fff;
	--fill-swap-arrow-size: 16px;
	--fill-swap-circle-size: 108%;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-color: var(--fill-swap-border);
	background: var(--fill-swap-from-bg);
	color: var(--fill-swap-from-color);
}

.fill-swap-btn::before {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 0;
	width: var(--fill-swap-circle-size);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--fill-swap-to-bg);
	content: "";
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.2);
	transition:
		top 0.55s cubic-bezier(0.19, 1, 0.22, 1),
		transform 0.55s cubic-bezier(0.19, 1, 0.22, 1),
		opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}

.fill-swap-btn__label,
.fill-swap-btn__arrow {
	position: relative;
	z-index: 1;
}

.fill-swap-btn__label {
	display: block;
	height: 1.4em;
	overflow: hidden;
	line-height: 1.4;
}

.fill-swap-btn__label-inner {
	display: flex;
	flex-direction: column;
	transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.fill-swap-btn__label-inner > span {
	display: block;
	height: 1.4em;
	flex: 0 0 auto;
}

.fill-swap-btn__label-inner > span:last-child {
	color: var(--fill-swap-to-color);
}

.fill-swap-btn__arrow {
	display: block;
	width: var(--fill-swap-arrow-size);
	height: var(--fill-swap-arrow-size);
	flex: 0 0 auto;
	transform-origin: center;
	transition: transform 0.2s ease;
}

.fill-swap-btn__arrow::before {
	position: absolute;
	inset: -1px;
	background: var(--fill-swap-from-color);
	content: "";
	-webkit-mask: url("../../images/contact-arrow.svg") center / contain no-repeat;
	mask: url("../../images/contact-arrow.svg") center / contain no-repeat;
	transition: background-color 0.15s ease;
}

@media (any-hover: hover) {
	.fill-swap-btn:hover::before {
		top: 50%;
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}

	.fill-swap-btn:hover .fill-swap-btn__label-inner {
		transform: translateY(-50%);
	}

	.fill-swap-btn:hover .fill-swap-btn__arrow {
		transform: rotate(45deg);
	}

	.fill-swap-btn:hover .fill-swap-btn__arrow::before {
		background-color: var(--fill-swap-to-color);
	}
}

.fill-swap-btn:focus-visible::before {
	top: 50%;
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.fill-swap-btn:focus-visible .fill-swap-btn__label-inner {
	transform: translateY(-50%);
}

.fill-swap-btn:focus-visible .fill-swap-btn__arrow {
	transform: rotate(45deg);
}

.fill-swap-btn:focus-visible .fill-swap-btn__arrow::before {
	background-color: var(--fill-swap-to-color);
}

/*
 * 丸矢印ボタン（Figma `hover_btn`）。既定は白丸＋アクセント色の矢印。
 * ホバーで色が反転し、矢印が右へ抜けて同じ矢印が左から入れ替わる。
 * 送り出しの移動はrotateより外側に置くので、画面上は常に真横に動く。
 *
 * 素材はarrow-up-right（↗）。Figmaは置き場所ごとに回転の有無が違うため、
 * 向きは`--circle-arrow-rotate`で置く側から指定する（0deg=↗ / 45deg=→）。
 * 配置（top/right/bottom/left）は持たせず、置く側のCSSで指定する。
 */
.circle-arrow {
	--circle-arrow-rotate: 0deg;
	--circle-arrow-size: 64px;
	--circle-arrow-icon: 16px;

	position: relative;
	display: block;
	width: var(--circle-arrow-size);
	height: var(--circle-arrow-size);
	overflow: hidden;
	border-radius: 50%;
	background: #fff;
	color: var(--color-accent);
	transition:
		background-color 0.7s var(--ease-out-quint),
		color 0.7s var(--ease-out-quint);
}

/*
 * SVGは64四方の中央16pxに矢印を描いている。円に対する矢印の比率を
 * 変えられるよう、insetではなくSVG自体の寸法（矢印の4倍）で合わせる。
 */
.circle-arrow__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: calc(var(--circle-arrow-icon) * 4);
	/* 円より大きいSVGを置くので、foundationの svg{max-width:100%} を外す。 */
	max-width: none;
	height: calc(var(--circle-arrow-icon) * 4);
	margin: calc(var(--circle-arrow-icon) * -2) 0 0 calc(var(--circle-arrow-icon) * -2);
	transform: rotate(var(--circle-arrow-rotate));
	transition: transform 0.7s var(--ease-out-quint);
}

/* 入れ替わる側は左に待機させる。 */
.circle-arrow__icon--next {
	transform: translate3d(-100%, 0, 0) rotate(var(--circle-arrow-rotate));
}

/*
 * View moreリンクなど、常に横向き（→）で小さく置くとき。
 * 斜めにならないので、幅の条件なしに横スライドしてよい。
 */
.circle-arrow--sm {
	--circle-arrow-size: 32px;
	/* Figma 56:4278: 8pxの矢印を45deg回転し、見かけ幅11.314px。 */
	--circle-arrow-icon: 8px;
	--circle-arrow-rotate: 45deg;
}

/*
 * 英字の1文字ずつ縦入れ替え（OASIZ Column／Contact、View more）。
 * ホバー起点は親の `.circle-arrow-host`。下線など部品固有の演出は
 * 各部品側に残し、文字送りだけをここで共有する。
 */
.swap-text {
	position: relative;
	display: block;
	overflow: hidden;
}

.swap-text__row {
	display: flex;
}

.swap-text__row--next {
	position: absolute;
	inset: 0;
}

.swap-text__char {
	display: block;
	transition: transform 0.7s var(--ease-out-quint);
	transition-delay: calc(var(--i, 0) * 0.02s);
}

.swap-text__row--next .swap-text__char {
	transform: translate3d(0, 100%, 0);
}

@media (max-width: 899px) {
	.circle-arrow--sm {
		--circle-arrow-size: 24px;
		--circle-arrow-icon: 6px;
	}
}

/*
 * 色の反転だけはキーボード操作で常に出す。フォーカス位置が分からなくなるため、
 * 幅や入力デバイスで消さない。
 */
.circle-arrow-host:focus-visible .circle-arrow {
	background: var(--color-accent);
	color: #fff;
}

/*
 * 矢印の入れ替え（横スライド）は、矢印が横向きになる900px以上でだけ出す。
 * 899px以下は斜め矢印のレイアウトで、横スライドが向きと合わないため。
 */
@media (min-width: 900px) {
	.circle-arrow-host:focus-visible .circle-arrow__icon {
		transform: translate3d(100%, 0, 0) rotate(var(--circle-arrow-rotate));
	}

	.circle-arrow-host:focus-visible .circle-arrow__icon--next {
		transform: translate3d(0, 0, 0) rotate(var(--circle-arrow-rotate));
	}
}

.circle-arrow-host:focus-visible .circle-arrow--sm .circle-arrow__icon {
	transform: translate3d(100%, 0, 0) rotate(var(--circle-arrow-rotate));
}

.circle-arrow-host:focus-visible .circle-arrow--sm .circle-arrow__icon--next {
	transform: translate3d(0, 0, 0) rotate(var(--circle-arrow-rotate));
}

.circle-arrow-host:focus-visible .swap-text__char {
	transform: translate3d(0, -100%, 0);
}

.circle-arrow-host:focus-visible .swap-text__row--next .swap-text__char {
	transform: translate3d(0, 0, 0);
}

/*
 * ホバー演出は「ホバーできる入力」かつ「矢印が横向きのレイアウト」のときだけ。
 * タッチ端末（特にiOS Safari）はタップ後に:hoverが残り、レールを指で
 * ドラッグしただけでも発動してしまう。斜め矢印のSPレイアウトでは、
 * ウィンドウを狭めたPCでもホバー演出は出さない。
 */
@media (hover: hover) and (min-width: 900px) {
	.circle-arrow-host:hover .circle-arrow {
		background: var(--color-accent);
		color: #fff;
	}

	.circle-arrow-host:hover .circle-arrow__icon {
		transform: translate3d(100%, 0, 0) rotate(var(--circle-arrow-rotate));
	}

	.circle-arrow-host:hover .circle-arrow__icon--next {
		transform: translate3d(0, 0, 0) rotate(var(--circle-arrow-rotate));
	}
}

@media (hover: hover) {
	.circle-arrow-host:hover .circle-arrow--sm {
		background: var(--color-accent);
		color: #fff;
	}

	.circle-arrow-host:hover .circle-arrow--sm .circle-arrow__icon {
		transform: translate3d(100%, 0, 0) rotate(var(--circle-arrow-rotate));
	}

	.circle-arrow-host:hover .circle-arrow--sm .circle-arrow__icon--next {
		transform: translate3d(0, 0, 0) rotate(var(--circle-arrow-rotate));
	}

	.circle-arrow-host:hover .swap-text__char {
		transform: translate3d(0, -100%, 0);
	}

	.circle-arrow-host:hover .swap-text__row--next .swap-text__char {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.circle-arrow,
	.circle-arrow__icon {
		transition: none;
	}

	.circle-arrow-host:hover .circle-arrow__icon,
	.circle-arrow-host:focus-visible .circle-arrow__icon,
	.circle-arrow-host:hover .circle-arrow--sm .circle-arrow__icon,
	.circle-arrow-host:focus-visible .circle-arrow--sm .circle-arrow__icon {
		transform: rotate(var(--circle-arrow-rotate));
	}

	.circle-arrow__icon--next {
		display: none;
	}

	.swap-text__char {
		transition: none;
	}

	.circle-arrow-host:hover .swap-text__char,
	.circle-arrow-host:focus-visible .swap-text__char {
		transform: none;
	}

	.swap-text__row--next {
		display: none;
	}
}