 
/* css icons */
/*sp for cartiasfamily*/
/* common setting */
.arrow-up, .arrow-right, .arrow-down, .arrow-left, .icon-cross, .icon-check, .icon-plus, .icon-minus, .triangle-up, .triangle-right, .triangle-down, .triangle-left, .icon-heart, .icon-zoom{
	margin: auto; background-image: none; color:currentColor; display: inline-block; position: relative; width: 1em; height: 1em; vertical-align: middle; text-align: center; line-height: 0;
}
.arrow-up::before, .arrow-right::before, .arrow-down::before, .arrow-left::before, .icon-cross::before, .arrow-up::after, .arrow-right::after, .arrow-down::after, .arrow-left::after, .icon-cross::after,
.icon-check::before, .icon-check::after, .icon-plus::before, .icon-plus::after, .icon-minus::before, .icon-minus::after, .triangle-up::before, .triangle-right::before, .triangle-down::before, .triangle-left::before, .icon-heart::before, .icon-heart::after, .icon-zoom::before, .icon-zoom::after{
	content: ""; display:inline-block;
	position: absolute;
	width: 0.05em;
	min-width: 2px;
	background-color: currentColor;
	pointer-events: none;
	border-radius: 1em;
	top: 0; right:0; bottom:0; left:0; margin: auto;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	transition:0.5s transform, 0.5s top, 0.5s right, 0.5s bottom, 0.5s left, 0.5s background-color;
	-webkit-transition:0.5s transform, 0.5s top, 0.5s right, 0.5s bottom, 0.5s left, 0.5s background-color;
	-moz-transition:0.5s transform, 0.5s top, 0.5s right, 0.5s bottom, 0.5s left, 0.5s background-color;
	-o-transition:0.5s transform, 0.5s top, 0.5s right, 0.5s bottom, 0.5s left, 0.5s background-color;
	-ms-transition:0.5s transform, 0.5s top, 0.5s right, 0.5s bottom, 0.5s left, 0.5s background-color;
}

/* arrow-up */
.arrow-up::before, .arrow-up::after, .arrow-down::before, .arrow-down::after, .arrow-left::before, .arrow-left::after, .arrow-right::before, .arrow-right::after{
	height: 0.7071em; 
}

.arrow-up::before{
	-webkit-transform: translateX(-0.225em) rotate(-135deg);
	transform: translateX(-0.225em) rotate(-135deg);
}

.arrow-up::after{
	-webkit-transform: translateX(0.25em) rotate(-45deg);
	transform: translateX(0.25em) rotate(-45deg);
}

/* arrow-down */
.arrow-down::before{
	-webkit-transform: translateX(-0.225em) rotate(-45deg);
	transform: translateX(-0.225em) rotate(-45deg);
}

.arrow-down::after{
	-webkit-transform: translateX(0.25em) rotate(-135deg);
	transform: translateX(0.25em) rotate(-135deg);
}

/* arrow-left */
.arrow-left::before{
	-webkit-transform:translateX(-0.05em) translateY(-0.225em) rotate(45deg);
	transform:translateX(-0.05em) translateY(-0.225em) rotate(45deg);
}
.arrow-left::after{
	-webkit-transform:translateX(-0.05em) translateY(0.23em) rotate(-45deg);
	transform:translateX(-0.05em) translateY(0.23em) rotate(-45deg);
}

/* arrow-right */
.arrow-right::before{
	-webkit-transform:translateX(0.05em) translateY(-0.225em) rotate(-45deg);
	transform:translateX(0.05em) translateY(-0.225em) rotate(-45deg);
}

.arrow-right::after{
	-webkit-transform:translateX(0.05em) translateY(0.23em) rotate(45deg);
	transform:translateX(0.05em) translateY(0.23em) rotate(45deg);
}

/* icon-cross */
.icon-cross::before, .icon-cross::after{	
	height: 1em; 
}

.icon-cross::before{
	-webkit-transform: translateX(0) translateY(0) rotate(45deg);
	transform: translateX(0) translateY(0) rotate(45deg);
}

.icon-cross::after{
	-webkit-transform: translateX(0) translateY(0) rotate(-45deg);
	transform: translateX(0) translateY(0) rotate(-45deg);
}

/* icon-check */
.icon-check::before{
	height:0.5em;
-webkit-transform: translateX(-0.3em) translateY(0.15em) rotate(-45deg);
	transform: translateX(-0.3em) translateY(0.15em) rotate(-45deg);
}

.icon-check::after{
	height:0.9em;
	-webkit-transform: translateX(0.15em) translateY(0.01em) rotate(45deg);
	transform: translateX(0.15em) translateY(0.01em) rotate(45deg);
}

/*icon-plus, .icon-minus*/
.icon-plus::before{
	-webkit-transform: translateX(0) translateY(0) rotate(90deg);
	transform: translateX(0) translateY(0) rotate(90deg);
}
.icon-plus::after{
	-webkit-transform: translateX(0) translateY(0) rotate(0deg);
	transform: translateX(0) translateY(0) rotate(0deg);
}

.icon-minus::before, .icon-minus::after{
	-webkit-transform: translateX(0) translateY(0) rotate(90deg);
	transform: translateX(0) translateY(0) rotate(90deg);
}

/* css triangle*/
/*.triangle-up, .triangle-right, .triangle-down, .triangle-left*/
.triangle-up::before, .triangle-right::before, .triangle-down::before, .triangle-left::before{
background: none; border-radius: 0;
border: 0.5em solid transparent;
border-bottom: 0.5em solid currentColor;
}

.triangle-up::before{
	-webkit-transform:translateX(0) translateY(-0.25em) rotate(0deg);
	transform:translateX(0) translateY(-0.25em) rotate(0deg);
}

.triangle-down::before{
	-webkit-transform:translateX(0) translateY(0.25em) rotate(180deg);
	transform:translateX(0) translateY(0.25em) rotate(180deg);
}

.triangle-left::before{
	-webkit-transform:translateX(-0.25em) rotate(-90deg);
	transform:translateX(0) translateX(-0.25em) rotate(-90deg);
}

.triangle-right::before{
	-webkit-transform:translateX(0) translateX(0.25em) rotate(90deg);
	transform:translateX(0) translateX(0.25em) rotate(90deg);
}

/*icon-heart*/
.icon-heart::before, .icon-heart::after{ width: 0.5em; height: 0.85em; }

.icon-heart::before{
	-webkit-transform: translateX(-0.125em) translateY(0) rotate(-45deg);
	transform: translateX(-0.125em) translateY(0) rotate(-45deg);
	border-radius: 0.5em 0.5em 0 0.1em;
}

.icon-heart::after{
	-webkit-transform: translateX(0.125em) translateY(0) rotate(45deg);
	transform: translateX(0.125em) translateY(0) rotate(45deg);
	border-radius: 0.5em 0.5em 0.1em 0;
}

/* icon-zoom */ 
.icon-zoom{}
.icon-zoom::before{
	width: 0.75em; height: 0.75em;
	background: none; border-radius: 50%;
	border: 0.1em solid currentColor;
	right:auto; bottom:auto;
}
.icon-zoom::after{
	height: 0.5em;
	-webkit-transform: translateX(0.3em) translateY(0.3em) rotate(-45deg);
	transform: translateX(0.3em) translateY(0.3em) rotate(-45deg);
}

.icon-address, .icon-phone, .icon-mobile, .icon-fax, .icon-email, .icon-website, .icon-link, .icon-facebook, .icon-instagram, .icon-twitter, .icon-youTube, .icon-whatsapp, .icon-wechat, .icon-line{
	font-style: normal !important;
}

.icon-address::before, .icon-phone::before, .icon-mobile::before, .icon-fax::before, .icon-email::before, .icon-website::before, .icon-link::before, .icon-facebook::before, .icon-instagram::before, .icon-twitter::before, .icon-youTube::before, .icon-whatsapp::before, .icon-wechat::before, .icon-line::before{
	display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 700; font-size: 1.2em; color:inherit;
}

.icon-address::before{ content: "\f3c5"; }
.icon-phone::before{ content: "\f095"; }
.icon-mobile::before{ content: "\f3cd"; }
.icon-fax::before{ content: "\f1ac"; }
.icon-email::before{ content: "\f0e0"; }
.icon-website::before{ content: "\f0ac"; }
.icon-link::before{ content: "\f35d"; }
.icon-facebook::before{ content: "\f39e"; font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.icon-instagram::before{ content: "\f16d"; font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.icon-twitter::before{ content: "\f099"; font-family: "Font Awesome 5 Brands"; font-weight: 400;}
.icon-youTube::before{ content: "\f167"; font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.icon-whatsapp::before{ content: "\f232"; font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.icon-wechat::before{ content: "\f1d7"; font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.icon-line::before{ content: "\f3c0"; font-family: "Font Awesome 5 Brands"; font-weight: 400; }

