/* =========================================================
   Icon System
   Left  = Function
   Right = Direction
========================================================= */

/* 共通：アイコン付き要素 */
.wp-block-button[class*="icon-"] .wp-block-button__link,
.btn[class*="icon-"],
.button[class*="icon-"],
.site-cta .cta-menu > li[class*="icon-"] > a,
.footer-cta-menu > li[class*="icon-"] > a,
.btn-txt.icon-arrow,
.link-arrow {
	display: inline-flex !important;
	align-items: center !important;
}

/* =========================================================
   Left Icon
   mail / download
========================================================= */

.wp-block-button.icon-mail .wp-block-button__link,
.wp-block-button.icon-download .wp-block-button__link,
.btn.icon-mail,
.button.icon-mail,
.btn.icon-download,
.button.icon-download,
.site-cta .cta-menu > li.icon-mail > a,
.footer-cta-menu > li.icon-mail > a,
.site-cta .cta-menu > li.icon-download > a,
.footer-cta-menu > li.icon-download > a {
	gap: 0.7rem !important;
}

/* 左アイコン本体 */
.wp-block-button.icon-mail .wp-block-button__link::before,
.wp-block-button.icon-download .wp-block-button__link::before,
.btn.icon-mail::before,
.button.icon-mail::before,
.btn.icon-download::before,
.button.icon-download::before,
.site-cta .cta-menu > li.icon-mail > a::before,
.footer-cta-menu > li.icon-mail > a::before,
.site-cta .cta-menu > li.icon-download > a::before,
.footer-cta-menu > li.icon-download > a::before {
	content: "" !important;

	position: static !important;
	inset: auto !important;

	display: inline-block !important;
	flex: 0 0 1.35em !important;

	width: 1.35em !important;
	height: 1.35em !important;

	background: currentColor !important;
	box-shadow: none !important;
	border-radius: 0 !important;

	transform: none !important;

	pointer-events: none;

	mask-repeat: no-repeat !important;
	mask-position: center !important;
	mask-size: contain !important;

	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	-webkit-mask-size: contain !important;
}

/* 左アイコン用の区切り線 */
.wp-block-button.icon-mail .wp-block-button__link::after,
.wp-block-button.icon-download .wp-block-button__link::after,
.btn.icon-mail::after,
.button.icon-mail::after,
.btn.icon-download::after,
.button.icon-download::after,
.site-cta .cta-menu > li.icon-mail > a::after,
.footer-cta-menu > li.icon-mail > a::after,
.site-cta .cta-menu > li.icon-download > a::after,
.footer-cta-menu > li.icon-download > a::after {
	content: "" !important;

	display: inline-block !important;
	order: -1;

	width: 1px !important;
	height: 1.6em !important;

	background: currentColor !important;
	opacity: 0.32;

	margin-left: 0.05rem !important;
	margin-right: 0.08rem !important;

	transform: none !important;
	pointer-events: none;
}

/* アイコンは区切り線よりさらに左 */
.wp-block-button.icon-mail .wp-block-button__link::before,
.wp-block-button.icon-download .wp-block-button__link::before,
.btn.icon-mail::before,
.button.icon-mail::before,
.btn.icon-download::before,
.button.icon-download::before,
.site-cta .cta-menu > li.icon-mail > a::before,
.footer-cta-menu > li.icon-mail > a::before,
.site-cta .cta-menu > li.icon-download > a::before,
.footer-cta-menu > li.icon-download > a::before {
	order: -2;
}

/* =========================================================
   Right Icon
   arrow
========================================================= */

.wp-block-button.icon-arrow .wp-block-button__link,
.btn.icon-arrow,
.button.icon-arrow,
.site-cta .cta-menu > li.icon-arrow > a,
.footer-cta-menu > li.icon-arrow > a,
.btn-txt.icon-arrow,
.link-arrow {
	gap: 0.5em !important;
}

/* 右アイコン本体 */
.wp-block-button.icon-arrow .wp-block-button__link::after,
.btn.icon-arrow::after,
.button.icon-arrow::after,
.site-cta .cta-menu > li.icon-arrow > a::after,
.footer-cta-menu > li.icon-arrow > a::after,
.btn-txt.icon-arrow::after,
.link-arrow::after {
	content: "" !important;

	position: static !important;
	inset: auto !important;

	display: inline-block !important;
	flex: 0 0 1.18em !important;

	width: 1.18em !important;
	height: 1.18em !important;

	background: currentColor !important;
	box-shadow: none !important;
	border-radius: 0 !important;

	transform: none !important;

	pointer-events: none;

	mask-repeat: no-repeat !important;
	mask-position: center !important;
	mask-size: contain !important;

	-webkit-mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	-webkit-mask-size: contain !important;

	transition: var(--transition-base);
}

.wp-block-button.icon-arrow .wp-block-button__link:hover::after,
.btn.icon-arrow:hover::after,
.button.icon-arrow:hover::after,
.site-cta .cta-menu > li.icon-arrow > a:hover::after,
.footer-cta-menu > li.icon-arrow > a:hover::after,
.btn-txt.icon-arrow:hover::after,
.link-arrow:hover::after {
	transform: translateX(2px) !important;
}

/* =========================================================
   Mail
========================================================= */

.wp-block-button.icon-mail .wp-block-button__link::before,
.btn.icon-mail::before,
.button.icon-mail::before,
.site-cta .cta-menu > li.icon-mail > a::before,
.footer-cta-menu > li.icon-mail > a::before {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5C3 5.67 3.67 5 4.5 5h15c.83 0 1.5.67 1.5 1.5v11c0 .83-.67 1.5-1.5 1.5h-15C3.67 19 3 18.33 3 17.5v-11Zm2 .8v.2l7 4.2 7-4.2v-.2H5Zm14 2.4-7 4.2-7-4.2v7.3h14V9.7Z'/%3E%3C/svg%3E") !important;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5C3 5.67 3.67 5 4.5 5h15c.83 0 1.5.67 1.5 1.5v11c0 .83-.67 1.5-1.5 1.5h-15C3.67 19 3 18.33 3 17.5v-11Zm2 .8v.2l7 4.2 7-4.2v-.2H5Zm14 2.4-7 4.2-7-4.2v7.3h14V9.7Z'/%3E%3C/svg%3E") !important;
}

/* =========================================================
   Download
========================================================= */

.wp-block-button.icon-download .wp-block-button__link::before,
.btn.icon-download::before,
.button.icon-download::before,
.site-cta .cta-menu > li.icon-download > a::before,
.footer-cta-menu > li.icon-download > a::before {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h4l-5 5-5-5h4V4Zm-5 14h12v2H6v-2Z'/%3E%3C/svg%3E") !important;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4h2v8h4l-5 5-5-5h4V4Zm-5 14h12v2H6v-2Z'/%3E%3C/svg%3E") !important;
}

/* =========================================================
   Arrow
========================================================= */

.wp-block-button.icon-arrow .wp-block-button__link::after,
.btn.icon-arrow::after,
.button.icon-arrow::after,
.site-cta .cta-menu > li.icon-arrow > a::after,
.footer-cta-menu > li.icon-arrow > a::after,
.btn-txt.icon-arrow::after,
.link-arrow::after {
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6Z'/%3E%3C/svg%3E") !important;

	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 5l7 7-7 7-1.4-1.4 4.6-4.6H4v-2h12.2l-4.6-4.6Z'/%3E%3C/svg%3E") !important;
}