/* css icons */
/* ver 0.6 2020-05-28 */

/* 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);
}