@charset "utf-8";

/***********************
*
* Font Awesome (ウェブアイコン)
*
*  アイコンの種類は下記を参照してください
*  https://fortawesome.github.io/Font-Awesome/cheatsheet/
*  
*  ※新しく追加されたアイコンを使う場合はhead内scriptのバージョンを最新に変更してください
*  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
*
***********************/


/* iタグで使う場合
-----------------------*/

i[class*=fa]{
	vertical-align:middle;
	margin:0 10px;
}


/* 擬似属性で使う場合
-----------------------*/

@mixin web_icon($kind,$size,$pos,$corner:nomal){
	display:inline-block;
	position:relative;
	&:#{$pos}{
		display:inline-block;
		margin:0 10px;
		content:$kind;
		font-size:$size;
		font-family:FontAwesome;
		vertical-align:middle;
		@if $corner == left{
			left:0;
			top:50%;
			@include translate(-50%, -50%);
			position:absolute;
		}
		@else if $corner == right{
			right:0;
			top:50%;
			@include translate(-50%, -50%);
			position:absolute;
		}
	}
}


/*
ウェブアイコン記述例
.icon_種類_位置{@include web_icon_before(アイコン種類, アイコン大きさ, 擬似属性の値（左は「before」右は「after」）, ポジションabsoluteは「left」か「right」、relativeは記入しない）)}
*/
.icon_arrow_r_before{@include web_icon("\f105",1rem,before)}
.icon_arrow_r_after{@include web_icon("\f105",1rem,after)}
.icon_arrow_r_left{@include web_icon("\f105",1rem,before,left)}
.icon_arrow_r_right{@include web_icon("\f105",1rem,after,right)}