@charset "UTF-8";
/*
見出し用1クラス

見出し用1のクラス
h1~h6どのタグにクラス指定しても同じになるように

Markup:
<h1 class="headLine1 {$modifiers}">h1タグにheadLine1クラス</h1>

.headLine1-blue - blue
.headLine1-redDark - redDark
.headLine1-red - red
.headLine1-pink - pink
.headLine1-green - green
.headLine1-greenDark - greenDark
.headLine1-gray - gray

Styleguide 3.1.0
============================================================*/
/*
見出し用2クラス

見出し用2のクラス
h1~h6どのタグにクラス指定しても同じになるように

Markup:
<h1 class="headLine2 {$modifiers}">h1タグにheadLine2クラス</h1>

.headLine2-blue - blue
.headLine2-red - red
.headLine2-redDark - redDark
.headLine2-pink - pink
.headLine2-green - green
.headLine2-greenDark - greenDark
.headLine2-gray - gray

Styleguide 3.2.0
============================================================*/
/*
見出し用3クラス

見出し用3のクラス
h1~h6どのタグにクラス指定しても同じになるように

Markup:
<h1 class="headLine3 {$modifiers}">h1タグにheadLine3クラス</h1>

.headLine3-blue - blue
.headLine3-red - red
.headLine3-pink - pink
.headLine3-green - green

Styleguide 3.3.0
============================================================*/
/*
見出し用4クラス

見出し用4のクラス
h1~h6どのタグにクラス指定しても同じになるように

Markup:
<h1 class="headLine4 {$modifiers}"><span>h1タグにheadLine4クラス</span></h1>

.headLine4-blue - blue
.headLine4-red - red
.headLine4-pink - pink
.headLine4-green - green

Styleguide 3.4.0
============================================================*/
/*
見出し用5クラス

見出し用5のクラス
h1~h6どのタグにクラス指定しても同じになるように

Markup:
<h1 class="headLine5 {$modifiers}"><span>h1タグにheadLine5クラス</span></h1>

.headLine5-blue - blue
.headLine5-red - red
.headLine5-pink - pink
.headLine5-green - green

Styleguide 3.5.0
============================================================*/
/*
見出し用6クラス

見出し用6のクラス
h1~h6どのタグにクラス指定しても同じになるように

Markup:
<h1 class="headLine6"><span>h1タグにheadLine6クラス</span></h1>

Styleguide 3.6.0
============================================================*/
/*
見出し用7クラス

見出し用7のクラス
h1~h6どのタグにクラス指定しても同じになるように

Markup:
<h1 class="headLine7"><span>h1タグにheadLine7クラス</span></h1>

Styleguide 3.7.0
============================================================*/
/*** .headLine1 ***/
.headLine1 {
	font-size: 130.76923%;
	font-weight: normal;
	margin: 35px 0 25px;
	padding: 6px;
	text-align: center;
	color: #7dbff7;
	background: #eff4fb;
}

.section > .headLine1:first-child {
	margin-top: 0;
}

.headLine1-blue {
	color: #7dbff7;
	background: #eff4fb;
}

.headLine1-red {
	color: #e1301d;
	background: #fce9e7;
}

.headLine1-redDark {
	color: #fff;
	background: #e94938;
}

.headLine1-pink {
	color: #f68ca0;
	background: #fce9e7;
}

.headLine1-green {
	color: #77ca74;
	background: #ebf7ea;
}

.headLine1-greenDark {
	color: #fff;
	background: #77ca74;
}

.headLine1-gray {
	color: #333;
	background: #f0f0f0;
}

/*** .headLine2 ***/
.headLine2 {
	font-size: 115.38462%;
	font-weight: bold;
	margin: 35px 0 25px;
	padding: 8px;
	text-align: center;
	color: #53ABF7;
	background: #eff4fb;
}

.section > .headLine2:first-child {
	margin-top: 0;
}

.headLine2-blue {
	color: #53ABF7;
	background: #eff4fb;
}

.headLine2-red {
	color: #e1301d;
	background: #fce9e7;
}

.headLine2-redDark {
	color: #fff;
	background: #e94938;
}

.headLine2-pink {
	color: #f68ca0;
	background: #fce9e7;
}

.headLine2-green {
	color: #55b452;
	background: #ebf7ea;
}

.headLine2-greenDark {
	color: #fff;
	background: #77ca74;
}

.headLine2-gray {
	color: #333;
	background: #f0f0f0;
}

/*** .headLine3 ***/
.headLine3 {
	font-size: 115.38462%;
	font-weight: bold;
	margin: 25px 0;
	padding: 6px;
	text-align: center;
	border-top: 1px dotted #979797;
	border-bottom: 1px dotted #979797;
}

.section > .headLine3:first-child {
	margin-top: 0;
}

.headLine3-blue {
	color: #409ad2;
	border-color: #7dbff7;
}

.headLine3-red {
	color: #e94938;
	border-color: #e1301d;
}

.headLine3-pink {
	color: #f68ca0;
	border-color: #f68ca0;
}

.headLine3-green {
	color: #77ca74;
	border-color: #77ca74;
}

/*** .headLine4 ***/
.headLine4 {
	font-size: 123.07692%;
	font-weight: normal;
	margin: 10px 0;
	color: #fff;
	border-bottom: 2px solid #7dbff7;
}

.headLine4 span {
	display: inline-block;
	min-width: 240px;
	padding: 12px 10px 8px;
	text-align: center;
	background: #7dbff7;
	_width: auto !important;
	_width: 240px;
}

.headLine4-red {
	border-color: #e1301d;
}

.headLine4-red span {
	background: #e1301d;
}

.headLine4-pink {
	border-color: #f68ca0;
}

.headLine4-pink span {
	background: #f68ca0;
}

.headLine4-green {
	border-color: #77ca74;
}

.headLine4-green span {
	background: #77ca74;
}

/*** .headLine5 ***/
.headLine5 {
	font-size: 153.84615%;
	font-weight: normal;
	margin: 35px 0 25px;
	padding: 0 8px 5px;
	border-bottom: 1px solid #e2e2e2;
}

.headLine5-blue {
	color: #7dbff7;
	border-color: #7dbff7;
}

.headLine5-red {
	color: #e1301d;
	border-color: #e1301d;
}

.headLine5-pink {
	color: #f68ca0;
	border-color: #f68ca0;
}

.headLine5-green {
	color: #77ca74;
	border-color: #77ca74;
}

.headLine6 {
	font-size: 107.69231%;
}

.headLine7 {
	background: url(../images/shared/headline7_bg.gif) 0 bottom no-repeat;
	font-size: 169.23076%;
	font-weight: bold;
	line-height: 1.3;
	padding-bottom: 10px;
}

/*
ボタン

ボタンのクラス
btn+でemmet

Markup:
<a href="" class="btn {$modifiers}">タグ</a>
<button class="btn {$modifiers}">タグ</button>

.btn-blue - blue
.btn-red - red
.btn-pink - pink
.btn-pinkLight - pink-light
.btn-green - green
.btn-subWindow - subWindow
.btn-download - download

Styleguide 3.8.0
============================================================*/
.btn {
	font-weight: bold;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 6px 10px;
	cursor: pointer;
	-webkit-transition: all 0.25s;
	-o-transition: all 0.25s;
	transition: all 0.25s;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	text-decoration: none;
	color: #fff !important;
	background: #7dbff7;
	*zoom: 1;
	text-decoration: none !important;
  /*** color modifires ***/
  /*** icon modifires ***/;
}

.btn:hover {
	opacity: 1;
	color: #fff !important;
	background: #add7fa;
}

.btn-blue {
	background: #7dbff7;
}

.btn-blue:hover {
	background: #add7fa;
}

.btn-red {
	background: #e1301d;
}

.btn-red:hover {
	background: #e85949;
}

.btn-pink {
	background: #f68ca0;
}

.btn-pink:hover {
	background: #fabbc7;
}

.btn-pinkLight {
	color: #e1301d !important;
	background: #fce9e7;
}

.btn-pinkLight:hover {
	color: #e1301d !important;
	background: #faddd9;
}

.btn-green {
	background: #77ca74;
}

.btn-green:hover {
	background: #9bd899;
}

.btn-border {
	background: none;
	border: 1px solid #f6a6ac;
}

.btn-border:hover {
	background: none;
	opacity: .6;
}

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

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

.btn-download {
	position: relative;
	top: 1px;
	padding-left: 35px;
	text-indent: -25px;
}

.btn-download:before {
	display: inline;
	margin-right: 10px;
	content: url(../images/bullets/download_white.png);
	vertical-align: baseline;
}

/*
グリッド

n分割のグリッド


・デフォルトは12分割

・10分割なら "layGrid10>.-col数字|bemでemmet

　sass mixin: @include grid(n);

・.grid:数字でemmet

Markup:
<div class="layGrid12">
	<div class="layGrid12_col1"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:1</p></div>
	<div class="layGrid12_col11"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:11</p></div>
	<div class="layGrid12_col2"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:2</p></div>
	<div class="layGrid12_col10"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:10</p></div>
	<div class="layGrid12_col3"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:3</p></div>
	<div class="layGrid12_col9"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:9</p></div>
	<div class="layGrid12_col4"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:4</p></div>
	<div class="layGrid12_col8"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:8</p></div>
	<div class="layGrid12_col5"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:5</p></div>
	<div class="layGrid12_col7"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:7</p></div>
	<div class="layGrid12_col6"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:6</p></div>
	<div class="layGrid12_col6"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:6</p></div>
	<div class="layGrid12_col12 layGrid12_prefix4 layGrid12_suffix4"><p style="background: #eee; border: 1px solid #000;padding: 5px;">grid:6</p></div>
</div>

Styleguide 3.9.0
============================================================*/
.layGrid12 {
  margin: 0 -10px 0 -10px;
  letter-spacing: -.4em; }

.layGrid12_col0 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push0,
.layGrid12_pull0 {
  position: relative; }

.layGrid12_col0 {
  width: 0;
  padding: 0 10px 0 10px; }

.layGrid12_prefix0 {
  padding-left: 0 !important; }

.layGrid12_suffix0 {
  padding-right: 0 !important; }

.layGrid12_col1 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push1,
.layGrid12_pull1 {
  position: relative; }

.layGrid12_col1 {
  width: 8.33333%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix1 {
  padding-left: 8.33333% !important; }

.layGrid12_suffix1 {
  padding-right: 8.33333% !important; }

.layGrid12_col2 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push2,
.layGrid12_pull2 {
  position: relative; }

.layGrid12_col2 {
  width: 16.66667%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix2 {
  padding-left: 16.66667% !important; }

.layGrid12_suffix2 {
  padding-right: 16.66667% !important; }

.layGrid12_col3 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push3,
.layGrid12_pull3 {
  position: relative; }

.layGrid12_col3 {
  width: 25%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix3 {
  padding-left: 25% !important; }

.layGrid12_suffix3 {
  padding-right: 25% !important; }

.layGrid12_col4 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push4,
.layGrid12_pull4 {
  position: relative; }

.layGrid12_col4 {
  width: 33.33333%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix4 {
  padding-left: 33.33333% !important; }

.layGrid12_suffix4 {
  padding-right: 33.33333% !important; }

.layGrid12_col5 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push5,
.layGrid12_pull5 {
  position: relative; }

.layGrid12_col5 {
  width: 41.66667%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix5 {
  padding-left: 41.66667% !important; }

.layGrid12_suffix5 {
  padding-right: 41.66667% !important; }

.layGrid12_col6 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push6,
.layGrid12_pull6 {
  position: relative; }

.layGrid12_col6 {
  width: 50%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix6 {
  padding-left: 50% !important; }

.layGrid12_suffix6 {
  padding-right: 50% !important; }

.layGrid12_col7 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push7,
.layGrid12_pull7 {
  position: relative; }

.layGrid12_col7 {
  width: 58.33333%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix7 {
  padding-left: 58.33333% !important; }

.layGrid12_suffix7 {
  padding-right: 58.33333% !important; }

.layGrid12_col8 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push8,
.layGrid12_pull8 {
  position: relative; }

.layGrid12_col8 {
  width: 66.66667%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix8 {
  padding-left: 66.66667% !important; }

.layGrid12_suffix8 {
  padding-right: 66.66667% !important; }

.layGrid12_col9 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push9,
.layGrid12_pull9 {
  position: relative; }

.layGrid12_col9 {
  width: 75%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix9 {
  padding-left: 75% !important; }

.layGrid12_suffix9 {
  padding-right: 75% !important; }

.layGrid12_col10 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push10,
.layGrid12_pull10 {
  position: relative; }

.layGrid12_col10 {
  width: 83.33333%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix10 {
  padding-left: 83.33333% !important; }

.layGrid12_suffix10 {
  padding-right: 83.33333% !important; }

.layGrid12_col11 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push11,
.layGrid12_pull11 {
  position: relative; }

.layGrid12_col11 {
  width: 91.66667%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix11 {
  padding-left: 91.66667% !important; }

.layGrid12_suffix11 {
  padding-right: 91.66667% !important; }

.layGrid12_col12 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid12_push12,
.layGrid12_pull12 {
  position: relative; }

.layGrid12_col12 {
  width: 100%;
  padding: 0 10px 0 10px; }

.layGrid12_prefix12 {
  padding-left: 100% !important; }

.layGrid12_suffix12 {
  padding-right: 100% !important; }

.layGrid10 {
  margin: 0 -10px 0 -10px;
  letter-spacing: -.4em; }

.layGrid10_col0 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push0,
.layGrid10_pull0 {
  position: relative; }

.layGrid10_col0 {
  width: 0;
  padding: 0 10px 0 10px; }

.layGrid10_prefix0 {
  padding-left: 0 !important; }

.layGrid10_suffix0 {
  padding-right: 0 !important; }

.layGrid10_col1 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push1,
.layGrid10_pull1 {
  position: relative; }

.layGrid10_col1 {
  width: 10%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix1 {
  padding-left: 10% !important; }

.layGrid10_suffix1 {
  padding-right: 10% !important; }

.layGrid10_col2 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push2,
.layGrid10_pull2 {
  position: relative; }

.layGrid10_col2 {
  width: 20%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix2 {
  padding-left: 20% !important; }

.layGrid10_suffix2 {
  padding-right: 20% !important; }

.layGrid10_col3 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push3,
.layGrid10_pull3 {
  position: relative; }

.layGrid10_col3 {
  width: 30%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix3 {
  padding-left: 30% !important; }

.layGrid10_suffix3 {
  padding-right: 30% !important; }

.layGrid10_col4 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push4,
.layGrid10_pull4 {
  position: relative; }

.layGrid10_col4 {
  width: 40%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix4 {
  padding-left: 40% !important; }

.layGrid10_suffix4 {
  padding-right: 40% !important; }

.layGrid10_col5 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push5,
.layGrid10_pull5 {
  position: relative; }

.layGrid10_col5 {
  width: 50%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix5 {
  padding-left: 50% !important; }

.layGrid10_suffix5 {
  padding-right: 50% !important; }

.layGrid10_col6 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push6,
.layGrid10_pull6 {
  position: relative; }

.layGrid10_col6 {
  width: 60%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix6 {
  padding-left: 60% !important; }

.layGrid10_suffix6 {
  padding-right: 60% !important; }

.layGrid10_col7 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push7,
.layGrid10_pull7 {
  position: relative; }

.layGrid10_col7 {
  width: 70%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix7 {
  padding-left: 70% !important; }

.layGrid10_suffix7 {
  padding-right: 70% !important; }

.layGrid10_col8 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push8,
.layGrid10_pull8 {
  position: relative; }

.layGrid10_col8 {
  width: 80%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix8 {
  padding-left: 80% !important; }

.layGrid10_suffix8 {
  padding-right: 80% !important; }

.layGrid10_col9 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push9,
.layGrid10_pull9 {
  position: relative; }

.layGrid10_col9 {
  width: 90%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix9 {
  padding-left: 90% !important; }

.layGrid10_suffix9 {
  padding-right: 90% !important; }

.layGrid10_col10 {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal; }

.layGrid10_push10,
.layGrid10_pull10 {
  position: relative; }

.layGrid10_col10 {
  width: 100%;
  padding: 0 10px 0 10px; }

.layGrid10_prefix10 {
  padding-left: 100% !important; }

.layGrid10_suffix10 {
  padding-right: 100% !important; }

/*
パンクズ

nav.pankuzu>ul.-list>li.-elem>a|bem

Markup:
<nav class="pankuzu">
	<ul class="pankuzu_list">
		<li class="pankuzu_elem"><a href="">HOME</a></li>
		<li class="pankuzu_elem"><a href="">カテゴリ</a></li>
		<li class="pankuzu_elem">ページ名</li>
	</ul>
</nav><!-- /.pankuzu -->

Styleguide 3.10.0
============================================================*/
.pankuzu {
  height: 21px; }

.pankuzu_list {
  margin: 0;
  letter-spacing: -.4em; }

.pankuzu_elem {
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  color: #666; }
  .pankuzu_elem-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }

.pankuzu_elem a {
  color: #e1301d; }

.pankuzu_elem:before {
  display: inline-block;
  margin: 0 5px;
  content: '>'; }

.pankuzu_elem:first-child:before {
  content: normal; }

/*
パネル

.panel>.-title+.-body|bem

Markup:
<div class="panel {$modifiers}">
	<h2 class="panel_title">panel Title</h2>
	<div class="panel_body">
		<p>パネルの中身がここに入る</p>
		<p>テキストでも画像でもモジュールでも</p>
	</div>
</div><!-- .panel -->

.panel-blue - blue
.panel-red - red
.panel-pink - pink
.panel-green - green

Styleguide 3.11.0
============================================================*/
.panel {
  margin: 0;
  padding: 20px;
  background: #eff4fb;
  /* .panel-blue */
  /* .panel-red */
  /* .panel-pink */
  /* .panel-green */ }

.panel_title {
  font-size: 123.07692%;
  font-weight: bold;
  margin-bottom: 20px;
  color: #7dbff7; }

.panel_body > :first-child,
.panel_footer > :first-child {
  margin-top: 0; }

.panel-blue {
  background: #eff4fb; }

.panel-blue .panel_title {
  color: #7dbff7; }

.panel-red {
  background: #fce9e7; }

.panel-red .panel_title {
  color: #e1301d; }

.panel-pink {
  background: #fce9e7; }

.panel-pink .panel_title {
  color: #f68ca0; }

.panel-green {
  background: #ebf7ea; }

.panel-green .panel_title {
  color: #77ca74; }

/*
画像とテキスト

.imgUnit

Markup:
<div class="imgUnit">
	<div class="imgUnit_floatBox {$modifiers}">
		<figure class="imgUnit_img">
			<img src="../assets/images/dam/dam.png" alt="" width="200">
			<figcaption class="imgUnit_caption">画像キャプション</figcaption>
		</figure>
		<figure class="imgUnit_img">
			<img src="../assets/images/dam/dam.png" alt="" width="200">
			<figcaption class="imgUnit_caption">画像キャプション</figcaption>
		</figure>
	</div>
	<div class="imgUnit_body">
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキスト</p>
	</div>
</div>

.imgUnit_floatBox-right - 画像右

Styleguide 3.12.0
============================================================*/
.imgUnit {
  overflow: hidden;
  margin: 20px 0 0;
  *zoom: 1; }

.imgUnit_floatBox {
  float: left;
  margin: 0 20px 0 0; }

.imgUnit_floatBox-right {
  float: right;
  margin: 0 0 0 20px; }

.imgUnit_caption {
  font-size: 92.30769%;
  margin: 5px 0 0; }

.imgUnit_body {
  overflow: hidden;
  *zoom: 1; }

.imgUnit_floatBox > :first-child,
.imgUnit_body > :first-child {
  margin-top: 0; }

/*
ページリスト

Markup:
<div class="pageList">
	<ul class="pageList_list">
		<li class="pageList_item">
			<figure class="pageList_col pageList_col-img"><img src="../assets/images/dam/dam.png" height="100" width="100" alt="ダミー"></figure>
			<div class="pageList_col">
				<p class="pageList_label pageList_label-press">プレスリリース</p>
				<p class="pageList_date">2015年3月24日</p>
				<p class="pageList_title"><a href="">｢AnimeJapan 2015｣ 東映アニメーション　ブース情報!!</a></p>
			</div>
			<p class="pageList_col vab tRight"><a href="" class="pageList_download pageList_download-pdf">900KB</a></p>
		</li><!-- /.pageList_item -->
		<li class="pageList_item">
			<figure class="pageList_col pageList_col-img"><img src="../assets/images/dam/dam.png" height="100" width="100" alt="ダミー"></figure>
			<div class="pageList_col">
				<p class="pageList_label pageList_label-event">イベント情報</p>
				<p class="pageList_date">2015年3月24日</p>
				<p class="pageList_title"><a href="">｢AnimeJapan 2015｣ 東映アニメーション　ブース情報!!</a></p>
			</div>
			<p class="pageList_col vab tRight"><a href="" class="pageList_download pageList_download-pdf">900KB</a></p>
		</li><!-- /.pageList_item -->
		<li class="pageList_item">
			<figure class="pageList_col pageList_col-img"><img src="../assets/images/dam/dam.png" height="100" width="100" alt="ダミー"></figure>
			<div class="pageList_col">
				<p class="pageList_label pageList_label-work">作品情報</p>
				<p class="pageList_date">2015年3月24日</p>
				<p class="pageList_title"><a href="">｢AnimeJapan 2015｣ 東映アニメーション　ブース情報!!</a></p>
			</div>
			<p class="pageList_col vab tRight"><a href="" class="pageList_download pageList_download-pdf">900KB</a></p>
		</li><!-- /.pageList_item -->
	</ul>
	<p class="pageList_linkAll"><a href="" class="btn btn-pinkLight arrow-red">一覧を見る</a></p>
</div><!-- /.pageList -->

Styleguide 3.13.0
============================================================*/
.pageList {
  /*** pageList_item内レイアウト ***/
  /*** 各パーツ ***/
  /*** pageList_download ***/ }

.pageList_list {
  margin: 0; }

.pageList_item {
  display: table;
  overflow: hidden;
  width: 100%;
  border-bottom: 1px dotted #c4c4c4; }

.pageList_col {
  display: table-cell;
  overflow: hidden;
  padding: 10px;
  table-layout: fixed;
  vertical-align: top; }

.pageList_col > :first-child {
  margin-top: 0;
  padding-top: 0; }

.pageList_col-bottom {
  vertical-align: bottom; }

.pageList_col-middle {
  vertical-align: middle; }

.pageList_col-img {
  width: 100px; }

.pageList_col-img img {
  width: 100%;
  height: auto; }

.pageList_col-date {
  width: 10em;
  padding-top: 12px; }

.pageList_date {
  font-size: 107.69231%;
  float: left;
  width: 8em;
  margin: 2px 15px 0 0; }

.pageList_title {
  font-size: 107.69231%;
  position: relative;
  top: 1px;
  clear: both;
  overflow: hidden;
  margin: 0;
  padding: 10px 0 0;
  padding-left: 15px;
  text-indent: -15px; }

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

.pageList_label {
  font-size: 13px;
  font-weight: normal;
  line-height: 26px;
  position: relative;
  float: left;
  width: 120px;
  height: 25px;
  margin: 0 15px 0 0;
  text-align: center;
  color: #fff;
  background: #888; }

.pageList_label-event,
.pageList_label-ir {
  background: #f68ca0; }

.pageList_label-event:after,
.pageList_label-ir:after {
  border-color: transparent transparent transparent #f68ca0; }

.pageList_label-press {
  background: #7dbff7; }

.pageList_label-press:after {
  border-color: transparent transparent transparent #7dbff7; }

.pageList_label-work,
.pageList_label-recruit {
  background: #77ca74; }

.pageList_label-work:after,
.pageList_label-recruit:after {
  border-color: transparent transparent transparent #77ca74; }

.pageList_linkAll {
  text-align: right; }

.pageList_linkAll .btn-pinkLight {
  font-weight: normal;
  line-height: 28px;
  width: 187px;
  height: 28px;
  padding: 0;
  text-align: center;
  text-indent: 0; }

.pageList_download {
  display: inline-block;
  text-align: center; }

.pageList_download:before {
  display: block;
  content: url(../images/icons/pdf_download.png); }

.pageList_rss {
  text-align: right; }

.pageList_rss .btn-border {
  font-weight: normal;
  line-height: 28px;
  width: 187px;
  height: 28px;
  padding: 0;
  text-align: center;
  text-indent: 0; }
  .pageList_rss .btn-border img {
    vertical-align: middle; }

/*
ページリスト

Markup:
<div class="pageListMin">
	<ul class="pageListMin_list">
		<li class="pageListMin_item">
			<p class="pageListMin_date">2015年3月24日</p>
			<p class="pageListMin_label pageListMin_label-press">プレスリリース</p>
			<p class="pageListMin_title"><a href="">平成27年３月期配当予想の修正に関するお知らせ</a></p>
		</li><!-- ./pageListMin_item -->
		<li class="pageListMin_item">
			<p class="pageListMin_date">2015年3月24日</p>
			<p class="pageListMin_label pageListMin_label-ir">ＩＲ情報</p>
			<p class="pageListMin_title"><a href="">平成27年３月期配当予想の修正に関するお知らせ</a></p>
		</li><!-- ./pageListMin_item -->
		<li class="pageListMin_item">
			<p class="pageListMin_date">2015年3月24日</p>
			<p class="pageListMin_label pageListMin_label-recruit">採用情報</p>
			<p class="pageListMin_title"><a href="">平成27年３月期配当予想の修正に関するお知らせ平成27年３月期配当予想の修正に関するお知らせ平成27年３月期配当予想の修正に関するお知らせ平成27年３月期配当予想の修正に関するお知らせ平成27年３月期配当予想の修正に関するお知らせ平成27年３月期配当予想の修正に関するお知らせ</a></p>
		</li><!-- ./pageListMin_item -->
	</ul>
	<p class="pageListMin_linkAll"><a href="" class="btn btn-pinkLight arrow-red">一覧を見る</a></p>
</div><!-- /.pageListMin -->

Styleguide 3.14.0
============================================================*/
.pageListMin {
  /*** ラベル ***/
  /*** 一覧ボタン ***/ }

.pageListMin_item {
  overflow: hidden;
  padding: 10px;
  border-bottom: 1px dotted #c4c4c4; }

.pageListMin_date {
  font-size: 107.69231%;
  float: left;
  width: 8em;
  margin: 2px 35px 0 0; }

.pageListMin_title {
  font-size: 107.69231%;
  overflow: hidden;
  margin: 2px 0 0; }

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

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

.pageListMin_label {
  font-size: 13px;
  font-weight: normal;
  line-height: 26px;
  position: relative;
  float: left;
  width: 120px;
  height: 25px;
  margin: 0 10px 0 0;
  text-align: center;
  color: #fff;
  background: #888; }

.pageListMin_label-event,
.pageListMin_label-ir {
  background: #f68ca0; }

.pageListMin_label-event:after,
.pageListMin_label-ir:after {
  border-color: transparent transparent transparent #f68ca0; }

.pageListMin_label-press {
  background: #7dbff7; }

.pageListMin_label-press:after {
  border-color: transparent transparent transparent #7dbff7; }

.pageListMin_label-work,
.pageListMin_label-recruit {
  background: #77ca74; }

.pageListMin_label-work:after,
.pageListMin_label-recruit:after {
  border-color: transparent transparent transparent #77ca74; }

.pageListMin_linkAll {
  text-align: right; }

.pageListMin_linkAll .btn-pinkLight {
  font-weight: normal;
  line-height: 28px;
  width: 187px;
  height: 28px;
  padding: 0;
  text-align: center;
  text-indent: 0; }

.pageListMin_rss {
  text-align: right; }

.pageListMin_rss .btn-border {
  font-weight: normal;
  line-height: 28px;
  width: 187px;
  height: 28px;
  padding: 0;
  text-align: center;
  text-indent: 0; }
  .pageListMin_rss .btn-border img {
    vertical-align: middle; }

/*
ページャー

nav.pager>ul.-list>li.-prev+li.-elem+li.-next|bem

Markup:
<nav class="pager">
	<ul class="pager_list">
		<li class="pager_prev"><a href="">prev</a></li>
		<li class="pager_elem "><a href="">1</a></li>
		<li class="pager_elem"><a href="">2</a></li>
		<li class="pager_elem"><a href="">3</a></li>
		<li class="pager_elem pager_elem-active"><a href="">4</a></li>
		<li class="pager_elem">…</li>
		<li class="pager_elem"><a href="">996</a></li>
		<li class="pager_elem"><a href="">997</a></li>
		<li class="pager_elem"><a href="">998</a></li>
		<li class="pager_elem"><a href="">999</a></li>
		<li class="pager_next"><a href="">next</a></li>
	</ul>
</nav>

Styleguide 3.15.0
============================================================*/
.pager {
  margin: 45px 0 0; }

.pager_list {
  margin: 0;
  text-align: center;
  letter-spacing: -.4em; }

.pager_elem,
.pager_prev,
.pager_next {
  line-height: 30px;
  display: inline-block;
  height: 30px;
  margin: 0 5px;
  letter-spacing: normal; }

.pager_elem a,
.pager_prev a,
.pager_next a {
  line-height: 30px;
  display: block;
  height: 30px;
  -webkit-transition: background all 0.25s;
  -o-transition: background all 0.25s;
  transition: background all 0.25s;
  border: 1px solid #ddd;
  border-radius: 4px; }

.pager_elem a:hover,
.pager_elem-active a,
.pager_prev a:hover,
.pager_prev-active a,
.pager_next a:hover,
.pager_next-active a {
  opacity: 1;
  color: #fff;
  border-color: #e1301d;
  background: #e1301d; }

.pager_elem {
  width: 30px; }

.pager_prev,
.pager_next {
  width: 50px; }

/*
タブ

Markup:
<div class="tab js-tab">
	<ul class="tab_btns">
		<li class="tab_btn"><a href="javascript: void(0);">2015年度</a></li>
		<li class="tab_btn"><a href="javascript: void(0);">2014年度</a></li>
		<li class="tab_btn"><a href="javascript: void(0);">2013年度</a></li>
		<li class="tab_btn"><a href="javascript: void(0);">2012年度</a></li>
		<li class="tab_btn"><a href="javascript: void(0);">2011年度</a></li>
		<li class="tab_btn"><a href="javascript: void(0);">それ以前</a></li>
	</ul>
	<div class="tab_content">
		<p>タブ01</p>
	</div>
	<div class="tab_content">
		<p>タブ02</p>
	</div>
	<div class="tab_content">
		<p>タブ03</p>
	</div>
	<div class="tab_content">
		<p>タブ04</p>
	</div>
	<div class="tab_content">
		<p>タブ05</p>
	</div>
	<div class="tab_content">
		<p>タブ06</p>
	</div>
</div><!-- /.tab -->

Styleguide 3.16.0
============================================================*/
.tab_btns {
  border-bottom: 2px solid #e1301d;
  *zoom: 1; }

.tab_btns:before,
.tab_btns:after {
  display: table;
  content: ''; }

.tab_btns:after {
  clear: both; }

.tab_btn {
  font-size: 115.38462%;
  float: left;
  text-align: center; }
  .tab_btn-1 {
    min-width: 240px; }
  .tab_btn-2 {
    width: 50%; }
  .tab_btn-3 {
    width: 33.33333333%; }
  .tab_btn-4 {
    width: 25%; }
  .tab_btn-5 {
    width: 20%; }
  .tab_btn-6 {
    width: 16.6666666666667%; }
  .tab_btn-7 {
    width: 14.28%; }
  .tab_btn-8 {
    width: 12.5%; }
  .tab_btn-9 {
    width: 11.11%; }
  .tab_btn-10 {
    width: 10%; }

.tab_btn a {
  position: relative;
  display: block;
  padding: 11px 10px 9px;
  color: #666; }

.tab_btn a:before {
  position: absolute;
  top: 20%;
  left: 0;
  display: block;
  height: 60%;
  content: '';
  border-left: 1px solid #d8d8d8; }

.tab_btn-active {
  background: #e1301d; }

.tab_btn-active a {
  color: #fff; }

.tab_btn:first-child a:before,
.tab_btn-active a:before {
  content: none;
  border: none; }

.tab_content {
  display: none;
  margin: 20px 0 0; }

.tab_content-active {
  display: block; }

/*
ブロックリスト

Markup:
<div class="blocks">
	<ul class="blocks_list">
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img01.jpg" alt="決算報告"></figure>
				<dl>
					<dt class="blocks_title">決算報告</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img02.jpg" alt="動画情報"></figure>
				<dl>
					<dt class="blocks_title">動画情報</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img03.jpg" alt="個人投資家の皆様へ"></figure>
				<dl>
					<dt class="blocks_title">個人投資家の皆様へ</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img04.jpg" alt="IRカレンダー"></figure>
				<dl>
					<dt class="blocks_title">IRカレンダー</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img05.jpg" alt="配当・株主優待"></figure>
				<dl>
					<dt class="blocks_title">配当・株主優待</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img06.jpg" alt="株式情報"></figure>
				<dl>
					<dt class="blocks_title">株式情報</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img07.jpg" alt="電子公告"></figure>
				<dl>
					<dt class="blocks_title">電子公告</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img08.jpg" alt="株主総会"></figure>
				<dl>
					<dt class="blocks_title">株主総会</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
		<li class="blocks_item">
			<a href="">
				<figure class="blocks_img"><img src="../assets/images/ir/top/img09.jpg" alt="メール配信"></figure>
				<dl>
					<dt class="blocks_title">メール配信</dt>
					<dd class="blocks_txt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
				</dl>
			</a>
		</li><!-- /.blocks_item -->
	</ul>
</div><!-- /.blocks -->

Styleguide 3.17.0
============================================================*/
.blocks_list {
  margin: -40px -16px 0;
  letter-spacing: -.4em; }

.editor .blocks_list,
#tinymce .blocks_list {
  margin: -40px -16px 0; }

.blocks_item {
  display: inline-block;
  width: 330px;
  margin: 0;
  padding: 40px 16px 0;
  vertical-align: top;
  letter-spacing: normal; }

.editor .blocks_item,
#tinymce .blocks_item {
  display: inline-block; }

.blocks_item a {
  display: block;
  text-decoration: none !important; }

.blocks_item dl {
  margin: 13px 0 0; }

.blocks_img {
  margin: 0; }

.blocks_img img {
  width: 100%;
  height: auto; }

.blocks_title {
  font-size: 107.69231%;
  position: relative;
  top: 1px;
  padding-left: 15px;
  text-indent: -15px; }

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

.blocks_txt {
  margin: 10px 0 0;
  padding-left: 15px;
  color: #a0a0a0; }

/*
特集ブロック

Markup:
<div class="feature">
	<h1 class="feature_title"><img src="../assets/images/ir/top/feature_title.png" alt="IR資料"></h1>
	<div class="feature_box">
		<ul class="feature_links">
			<li class="feature_link"><a href="">IR NEWS</a></li>
			<li class="feature_link"><a href="">決算報告</a></li>
			<li class="feature_link"><a href="">IR資料</a></li>
			<li class="feature_link"><a href="">動画情報</a></li>
			<li class="feature_link"><a href="">個人投資家の皆様へ</a></li>
			<li class="feature_link"><a href="">IRカレンダー</a></li>
			<li class="feature_link"><a href="">配当・株主優待</a></li>
			<li class="feature_link"><a href="">株式情報</a></li>
			<li class="feature_link"><a href="">電子公告</a></li>
			<li class="feature_link"><a href="">株主総会</a></li>
			<li class="feature_link"><a href="">メール配信</a></li>
		</ul>
	</div>
</div><!-- /.feature -->

Styleguide 3.18.0
============================================================*/
.feature {
  position: relative;
  padding: 70px 30px 30px;
  background: url(../images/shared/feature_bg.jpg) 0 0 no-repeat; }

.feature_title {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0; }

.feature_box {
  overflow: hidden;
  padding: 27px;
  background: rgba(255, 255, 255, 0.92); }

.feature_box > :first-child {
  margin-top: 0; }

.feature_links > :first-child {
  margin-top: 0; }

.feature_link {
  font-size: 107.69231%;
  position: relative;
  top: 1px;
  margin: 10px 0 0;
  padding-left: 15px;
  text-indent: -15px; }

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

/*
株価情報はこちら

Markup:
<div class="stockBnr">
	<ul class="stockBnr_list">
		<li class="stockBnr_item"><a href=""><img src="../assets/images/bnr/yahoo_fnc.jpg" alt=""></a></li>
		<li class="stockBnr_item"><a href=""><img src="../assets/images/bnr/jasdaq.jpg" alt=""></a></li>
	</ul>
</div><!-- /.stockBnr -->

Styleguide 3.19.0
============================================================*/
.stockBnr_list {
  margin: 0 -36px;
  text-align: center;
  letter-spacing: -.4em; }

.stockBnr_item {
  display: inline-block;
  margin: 0 36px;
  vertical-align: top;
  letter-spacing: normal; }

/*
ページアンカー

Markup:
<div class="pageAnchors">
	<ul class="pageAnchors_list">
		<li class="pageAnchors_item"><a href="#anchor01">作品に関するご質問</a></li>
		<li class="pageAnchors_item"><a href="#anchor02">IR情報に関するご質問</a></li>
		<li class="pageAnchors_item"><a href="#anchor03">個人投資家の方へ</a></li>
		<li class="pageAnchors_item"><a href="#anchor04">●●●●</a></li>
		<li class="pageAnchors_item"><a href="#anchor05">商品・イベントに関する</a></li>
		<li class="pageAnchors_item"><a href="#anchor06">会社全般に関するご質問</a></li>
	</ul>
</div><!-- /.pageAnchors -->

Styleguide 3.20.0
============================================================*/
.pageAnchors {
  padding: 15px;
  background: #f3f3f3; }

.pageAnchors_list {
  margin: -20px 0 0 0;
  text-align: center;
  letter-spacing: -.4em; }

.pageAnchors_item {
  position: relative;
  top: 1px;
  display: inline-block;
  margin: 20px 0 0 35px;
  padding-left: 15px;
  vertical-align: top;
  text-indent: -15px;
  letter-spacing: normal;
  *display: inline;
  *zoom: 1; }

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

.pageAnchors:first-child {
  margin-top: 0; }

/*
FAQ

Markup:
<div class="faq">
	<dl class="faq_item">
		<dt class="faq_q">作品へのご感想・ご意見について</dt>
		<dd class="faq_a">
			<p>皆様には作品への貴重なご感想・ご意見をいただき、誠にありがとうございます。大変多くの声をお寄せいただいているため、全ての皆様にお返事をするのは大変難しい状況となっております。ご了承くださいますようお願い申し上げます。</p>
		</dd>
	</dl>
	<dl class="faq_item">
		<dt class="faq_q">作品へのご感想・ご意見について</dt>
		<dd class="faq_a">
			<p>皆様には作品への貴重なご感想・ご意見をいただき、誠にありがとうございます。大変多くの声をお寄せいただいているため、全ての皆様にお返事をするのは大変難しい状況となっております。ご了承くださいますようお願い申し上げます。</p>
		</dd>
	</dl>
</div>

Styleguide 3.21.0
============================================================*/
.faq_q,
.faq_a {
  position: relative;
  min-height: 34px;
  padding: 8px 20px 0 52px;
  _height: auto !important;
  _height: 34px; }

.faq_q:before,
.faq_a:before {
  font-family: Arial;
  font-size: 23px;
  font-weight: normal;
  line-height: 34px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 34px;
  height: 34px;
  content: 'Q';
  text-align: center;
  vertical-align: middle;
  color: #fff;
  border-radius: 4px; }

.faq_q {
  font-size: 115.38462%;
  font-weight: bold; }

.faq_q:before {
  content: 'Q';
  background: #77ca74; }

.faq_a {
  font-size: 107.69231%;
  margin: 22px 0 0; }

.faq_a:before {
  content: 'A';
  background: #e1301d; }

.faq_a > :first-child {
  margin-top: 0; }

/*
FAQ

Markup:


Styleguide 3.22.0
============================================================*/
.filmList_list {
  letter-spacing: -.4em;
  text-align: center;
  margin: 0 -15px 0; }

.filmList_item {
  letter-spacing: normal;
  display: inline-block;
  margin: 0 11px;
  text-align: left; }
  .filmList_item a {
    display: block; }

.filmList_img {
  margin: 0;
  width: 174px; }
  .filmList_img img {
    max-width: 100%; }
  .filmList_img figcaption {
    margin: 10px 0 0; }
    .filmList_img figcaption:before {
      content: url(../images/bullets/circle_arrow_red_right.png);
      margin: 0 5px 0 0;
      position: relative;
      top: 1px; }

.filmList-green .filmList_img figcaption:before {
  content: url(../images/bullets/circle_arrow_green_right.png); }

/*
ページボックスリスト

pageBoxList

Markup:
<div class="pageBoxList">
	<ul class="pageBoxList_list">
		<li class="pageBoxList_item">
			<a href="">
				<figure class="pageBoxList_img"><img src="../assets/images/dam/dam.png" height="113" width="113"></figure>
				<div class="pageBoxList_body">
					<h2 class="pageBoxList_title">ONE PIECE</h2>
					<p>YEAR=Oct. 17, 1989 - Dec. 21, 1990</p>
				</div>
			</a>
		</li><!-- /.pageBoxList_item -->
		<li class="pageBoxList_item">
			<a href="">
				<figure class="pageBoxList_img"><img src="../assets/images/dam/dam.png" height="113" width="113"></figure>
				<div class="pageBoxList_body">
					<h2 class="pageBoxList_title">ONE PIECE</h2>
					<p>YEAR=Oct. 17, 1989 - Dec. 21, 1990</p>
				</div>
			</a>
		</li><!-- /.pageBoxList_item -->
		<li class="pageBoxList_item">
			<a href="">
				<figure class="pageBoxList_img"><img src="../assets/images/dam/dam.png" height="113" width="113"></figure>
				<div class="pageBoxList_body">
					<h2 class="pageBoxList_title">ONE PIECE</h2>
					<p>YEAR=Oct. 17, 1989 - Dec. 21, 1990</p>
				</div>
			</a>
		</li><!-- /.pageBoxList_item -->
		<li class="pageBoxList_item">
			<a href="">
				<figure class="pageBoxList_img"><img src="../assets/images/dam/dam.png" height="113" width="113"></figure>
				<div class="pageBoxList_body">
					<h2 class="pageBoxList_title">ONE PIECE</h2>
					<p>YEAR=Oct. 17, 1989 - Dec. 21, 1990</p>
				</div>
			</a>
		</li><!-- /.pageBoxList_item -->
	</ul>
</div>

Styleguide 3.23.0
============================================================*/
.pageBoxList_list {
  letter-spacing: -.4em;
  margin: -20px 0 0 -20px; }

.pageBoxList_item {
  letter-spacing: normal;
  display: inline-block;
  vertical-align: top;
  margin: 20px 0 0 20px;
  width: 470px; }
  .pageBoxList_item a {
    display: block;
    overflow: hidden; }

.pageBoxList_img {
  margin: 0 20px 0 0;
  float: left;
  border: 1px solid #f3f3f3;
  border-radius: 2px;
  width: 113px;
  text-align: center; }
  .pageBoxList_img img {
    max-width: 100%; }

.pageBoxList_body {
  overflow: hidden;
  padding-left: 16px; }
  .pageBoxList_body p {
    color: #a0a0a0;
    margin: 5px 0 0; }

.pageBoxList_title {
  text-indent: -16px; }
  .pageBoxList_title:before {
    content: url(../images/bullets/circle_arrow_red_right.png);
    margin: 0 5px 0 0;
    position: relative;
    top: 1px; }

/*
サイトマップ

sitemap

Markup:
<ul class="sitemap">
	<li class="sitemap_item">
		<a href="../company">企業情報</a>
		<ul>
			<li class="sitemap_item"><a href="../company/management_principles">経営理念</a></li>
			<li class="sitemap_item"><a href="../company/message">メッセージ</a></li>
			<li class="sitemap_item"><a href="../company/history">沿革</a></li>
			<li class="sitemap_item">
				<a href="../company/our_business/index">事業内容</a>
				<ul>
					<li class="sitemap_item"><a href="../our_business/film/">映像製作・販売事業</a></li>
					<li class="sitemap_item"><a href="../company/our_business/licensing/">版権事業</a></li>
					<li class="sitemap_item"><a href="../company/our_business/others/">関連事業</a></li>
					<li class="sitemap_item sitemap_item-last"><a href="../company/our_business/overseas/">海外展開</a></li>
				</ul>
			</li>
			<li class="sitemap_item"><a href="../company/organization_chart">組織図</a></li>
			<li class="sitemap_item"><a href="../company/animation_production">制作工程について</a></li>
			<li class="sitemap_item"><a href="../company/affiliated_companies">関連会社</a></li>
			<li class="sitemap_item sitemap_item-last"><a href="../company/about_pero">Peroについて</a></li>
		</ul>
	</li>
	<li class="sitemap_item"><a href="../press/">プレスリリース</a></li>
	<li class="sitemap_item">
		<a href="../ir/">IR情報</a>
		<ul>
			<li class="sitemap_item"><a href="../ir/news/">IR NEWS</a></li>
			<li class="sitemap_item"><a href="../ir/settlement/">決算報告</a></li>
			<li class="sitemap_item">
				<a href="../ir/materials/library.php">IR資料</a>
				<ul>
					<li class="sitemap_item"><a href="../ir/materials/financial_results.php">決算短信</a></li>
					<li class="sitemap_item"><a href="../ir/materials/presentation.php">プレゼンテーション資料</a></li>
					<li class="sitemap_item"><a href="../ir/materials/count.php">決算計数資料</a></li>
					<li class="sitemap_item"><a href="../ir/materials/securities.php">有価証券報告書</a></li>
					<li class="sitemap_item sitemap_item-last"><a href="../ir/materials/peros.php">PERO'Sステーション</a></li>
				</ul>
			</li>
			<li class="sitemap_item"><a href="../ir/movie/">動画情報</a></li>
			<li class="sitemap_item"><a href="../ir/leaflet">個人投資家の皆様へ</a></li>
			<li class="sitemap_item"><a href="../ir/ir_calendar">IRカレンダー</a></li>
			<li class="sitemap_item"><a href="../ir/reduce">配当</a></li>
			<li class="sitemap_item"><a href="../ir/benefit_program">株主優待制度</a></li>
			<li class="sitemap_item">
				<a href="../ir/share/information">株式情報</a>
				<ul>
					<li class="sitemap_item sitemap_item-last"><a href="../ir/share/constitution/">株主構成</a></li>
				</ul>
			</li>
			<li class="sitemap_item"><a href="../ir/announce">電子公告</a></li>
			<li class="sitemap_item"><a href="../ir/general_meeting">株主総会</a></li>
			<li class="sitemap_item sitemap_item-last"><a href="../ir/mag">メール配信</a></li>
		</ul>
	</li>
	<li class="sitemap_item">
		<a href="../recruit/">採用情報</a>
		<ul>
			<li class="sitemap_item">
				<a href="../recruit/new_graduates/index">新卒採用</a>
				<ul>
					<li class="sitemap_item"><a href="../recruit/new_graduates/2016">募集要項</a></li>
					<li class="sitemap_item sitemap_item-last"><a href="../recruit/new_graduates/faq/">採用Q&amp;A</a></li>
				</ul>
			</li>
			<li class="sitemap_item">
				<a href="../recruit/mid-career_recruitment/index">中途採用</a>
				<ul>
					<li class="sitemap_item sitemap_item-last"><a href="../recruit/mid-career_recruitment/2016/">募集要項</a></li>
				</ul>
			</li>
			<li class="sitemap_item sitemap_item-last">
				<a href="../recruit/production_staff/index">製作スタッフ</a>
				<ul>
					<li class="sitemap_item"><a href="../recruit/production_staff/2016/">研修生応募要項</a></li>
					<li class="sitemap_item"><a href="../recruit/production_staff/job_description/">職種説明</a></li>
					<li class="sitemap_item sitemap_item-last"><a href="../recruit/production_staff/faq/">製作スタッフ募集Q&amp;A</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="sitemap_item">
		<a href="../faq/">よくあるご質問</a>
	</li>
	<li class="sitemap_item">
		<a href="../policy">個人情報保護方針</a>
	</li>
	<li class="sitemap_item sitemap_item-last">
		<a href="../compliance">コンプライアンス指針</a>
	</li>
</ul>

Styleguide 3.24.0
============================================================*/
.sitemap {
  margin: 0 !important;
  position: relative; }
  .sitemap > .sitemap_item {
    margin-left: 0;
    margin: 40px 0 0; }
    .sitemap > .sitemap_item > a {
      background: #eee url(../images/bullets/arrow_red_right.png) 15px center no-repeat;
      font-weight: bold;
      font-size: 15px;
      color: #e1301d;
      border: none;
      border-radius: 0; }
    .sitemap > .sitemap_item:before {
      content: none; }
  .sitemap_item {
    display: block !important;
    margin: 5px 0 0 5em;
    position: relative;
    z-index: 99;
    font-size: 13px;
    /* &:after {
			content: '';
			display: block;
			position: absolute;
			top: -15px;
			left: -1em;
			border-left: 1px solid #ccc;
			height: 100%;
		} */ }
    .sitemap_item:before {
      content: '';
      display: block;
      position: absolute;
      top: 15px;
      left: -2em;
      border-top: 1px solid #ccc;
      width: 2em; }
    .sitemap_item-last:after {
      content: '';
      display: block;
      position: absolute;
      top: 16px;
      left: -2em;
      width: 2em;
      height: 100%;
      background: #fff; }
    .sitemap_item a {
      display: block;
      text-decoration: none !important;
      padding: 8px 15px 8px 30px;
      position: relative;
      z-index: 100;
      background: #fff url(../images/bullets/arrow_red_right.png) 15px center no-repeat;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer; }
  .sitemap ul {
    position: relative;
    margin: 5px 0 0 !important; }
    .sitemap ul:before {
      content: '';
      display: block;
      border-left: 1px solid #ccc;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 3em; }
    .sitemap ul ul .sitemap_item {
      margin-top: 0; }
      .sitemap ul ul .sitemap_item:before {
        top: 11px; }
      .sitemap ul ul .sitemap_item-last:after {
        top: 12px; }
    .sitemap ul ul .sitemap_item a {
      display: inline-block;
      border: none;
      border-radius: 0;
      padding: 2px 5px 2px 20px;
      background-position: 8px center; }

/*
SNSボタン

.sns

Markup:
<div class="sns">
	<li class="sns_item"><div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count"></div></li>
	<li class="sns_item"><a class="twitter-share-button" href="https://twitter.com/share" data-dnt="true">Tweet</a></li>
	<li class="sns_item"> <a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="...">mixiチェック</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script></li>
	<li class="sns_item"><div class="g-plus" data-action="share" data-annotation="bubble" data-href="http://syncer.jp/"></div></li>
</div><!-- /.sns -->

Styleguide 3.25.0
============================================================*/
.sns {
  letter-spacing: -.4em;
  text-align: right;
  margin: 5px 0 0; }
  .sns_item {
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    margin: 0 0 0 10px; }