@charset "UTF-8";
/*
矢印付きのテキスト

@include arrow(画像パス, 画像の幅, 画像と文字頭の隙間);

.hoge {
	@include arrow(../images/bullets/arrow01.png, 8);
}

Markup:
<p class="{$modifiers}">あいうえおあいうえおあいうえお</p>
<p class="{$modifiers}">あいうえお<br>あいうえおあいうえお</p>

.arrow-circleBlue - arrow-circleBlue
.arrow-circleRed - arrow-circleRed
.arrow-circleRedDown - arrow-circleRedDown
.arrow-circleGreen - arrow-circleGreen
.arrow-circleWhite - arrow-circleWhite
.arrow-blue - arrow-blue
.arrow-red - arrow-red
.arrow-green - arrow-green
.arrow-white - arrow-white
.subWindow-blue - subWindow-blue
.subWindow-red - subWindow-red
.subWindow-green - subWindow-green
.subWindow-white - subWindow-white

Styleguide 2.1.0
============================================================*/
.arrow-circleBlue {
	position: relative;
	top: 1px;
	padding-left: 15px;
	text-indent: -15px;
}

.arrow-circleBlue:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/circle_arrow_blue_right.png);
	vertical-align: baseline;
}

.arrow-circleRed {
	position: relative;
	top: 1px;
	padding-left: 15px;
	text-indent: -15px;
}

.arrow-circleRed:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/circle_arrow_red_right.png);
	vertical-align: baseline;
}

.arrow-circleRedDown {
	position: relative;
	top: 1px;
	padding-left: 15px;
	text-indent: -15px;
}

.arrow-circleRedDown:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/circle_arrow_red_down.png);
	vertical-align: baseline;
}

.arrow-circleGreen {
	position: relative;
	top: 1px;
	padding-left: 15px;
	text-indent: -15px;
}

.arrow-circleGreen:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/circle_arrow_green_right.png);
	vertical-align: baseline;
}

.arrow-circleWhite {
	position: relative;
	top: 1px;
	padding-left: 15px;
	text-indent: -15px;
}

.arrow-circleWhite:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/circle_arrow_white_right.png);
	vertical-align: baseline;
}

.arrow-blue {
	position: relative;
	top: 1px;
	padding-left: 10px;
	text-indent: -10px;
}

.arrow-blue:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/arrow_blue_right.png);
	vertical-align: baseline;
}

.arrow-red {
	position: relative;
	top: 1px;
	padding-left: 10px;
	text-indent: -10px;
}

.arrow-red:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/arrow_red_right.png);
	vertical-align: baseline;
}

.arrow-green {
	position: relative;
	top: 1px;
	padding-left: 10px;
	text-indent: -10px;
}

.arrow-green:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/arrow_green_right.png);
	vertical-align: baseline;
}

.arrow-white {
	position: relative;
	top: 1px;
	padding-left: 10px;
	text-indent: -10px;
}

.arrow-white:before {
	display: inline;
	margin-right: 4px;
	content: url(../images/bullets/arrow_white_right.png);
	vertical-align: baseline;
}

.subWindow-blue {
	position: relative;
	top: 1px;
	padding-left: 16px;
	text-indent: -16px;
}

.subWindow-blue:before {
	display: inline;
	margin-right: 5px;
	content: url(../images/bullets/sub_window_blue.png);
	vertical-align: baseline;
}

.subWindow-red {
	position: relative;
	top: 1px;
	padding-left: 16px;
	text-indent: -16px;
}

.subWindow-red:before {
	display: inline;
	margin-right: 5px;
	content: url(../images/bullets/sub_window_red.png);
	vertical-align: baseline;
}

.subWindow-green {
	position: relative;
	top: 1px;
	padding-left: 16px;
	text-indent: -16px;
}

.subWindow-green:before {
	display: inline;
	margin-right: 5px;
	content: url(../images/bullets/sub_window_green.png);
	vertical-align: baseline;
}

.subWindow-white {
	position: relative;
	top: 1px;
	padding-left: 16px;
	text-indent: -16px;
}

.subWindow-white:before {
	display: inline;
	margin-right: 5px;
	content: url(../images/bullets/sub_window_white.png);
	vertical-align: baseline;
}

/*
注釈とかに使える

注釈とかに使えるやつ

0.1em刻みで3emまで

Markup:
<p class="indent13e">※ あいうえおかきくけこ<br>さしすせそ<br>たちつてと</p>

Styleguide 2.2.0
============================================================*/
.indent1e {
	padding-left: .1em !important;
	text-indent: -.1em !important;
}

.indent2e {
	padding-left: .2em !important;
	text-indent: -.2em !important;
}

.indent3e {
	padding-left: .3em !important;
	text-indent: -.3em !important;
}

.indent4e {
	padding-left: .4em !important;
	text-indent: -.4em !important;
}

.indent5e {
	padding-left: .5em !important;
	text-indent: -.5em !important;
}

.indent6e {
	padding-left: .6em !important;
	text-indent: -.6em !important;
}

.indent7e {
	padding-left: .7em !important;
	text-indent: -.7em !important;
}

.indent8e {
	padding-left: .8em !important;
	text-indent: -.8em !important;
}

.indent9e {
	padding-left: .9em !important;
	text-indent: -.9em !important;
}

.indent10e {
	padding-left: 1em !important;
	text-indent: -1em !important;
}

.indent11e {
	padding-left: 1.1em !important;
	text-indent: -1.1em !important;
}

.indent12e {
	padding-left: 1.2em !important;
	text-indent: -1.2em !important;
}

.indent13e {
	padding-left: 1.3em !important;
	text-indent: -1.3em !important;
}

.indent14e {
	padding-left: 1.4em !important;
	text-indent: -1.4em !important;
}

.indent15e {
	padding-left: 1.5em !important;
	text-indent: -1.5em !important;
}

.indent16e {
	padding-left: 1.6em !important;
	text-indent: -1.6em !important;
}

.indent17e {
	padding-left: 1.7em !important;
	text-indent: -1.7em !important;
}

.indent18e {
	padding-left: 1.8em !important;
	text-indent: -1.8em !important;
}

.indent19e {
	padding-left: 1.9em !important;
	text-indent: -1.9em !important;
}

.indent20e {
	padding-left: 2em !important;
	text-indent: -2em !important;
}

.indent21e {
	padding-left: 2.1em !important;
	text-indent: -2.1em !important;
}

.indent22e {
	padding-left: 2.2em !important;
	text-indent: -2.2em !important;
}

.indent23e {
	padding-left: 2.3em !important;
	text-indent: -2.3em !important;
}

.indent24e {
	padding-left: 2.4em !important;
	text-indent: -2.4em !important;
}

.indent25e {
	padding-left: 2.5em !important;
	text-indent: -2.5em !important;
}

.indent26e {
	padding-left: 2.6em !important;
	text-indent: -2.6em !important;
}

.indent27e {
	padding-left: 2.7em !important;
	text-indent: -2.7em !important;
}

.indent28e {
	padding-left: 2.8em !important;
	text-indent: -2.8em !important;
}

.indent29e {
	padding-left: 2.9em !important;
	text-indent: -2.9em !important;
}

.indent30e {
	padding-left: 3em !important;
	text-indent: -3em !important;
}