@charset "UTF-8";
/* -------------------------------------------------------------------------
	Foundation
------------------------------------------------------------------------- */
/* Variable */
/*

brakepoints

*/
/*

base color

*/
/* $color_sub : ; */
/*

text color

*/
/*

base font size

*/
.font.bold {
  font-weight: 700;
}
.font.normal {
  font-weight: 400;
}
.font.white {
  color: #ffffff;
}
.font.mini {
  font-size: 14px;
}
.font.serif {
  font-family: "Zen Old Mincho", serif;
}

/*

width

*/
/* Mixin */
/*

clear

*/
/*

メディアクエリ

ブレークポイント定義
```sass
$breakpoints:(
	tablet: 959px,
	sp: 768px
);
```

● max-widthで指定する
```sass
@include mq(sp) {
	height:40px;
}
```
```output css
@media all and (max-width: 768px) {
	height: 40px;
}
```

● 範囲指定する場合は、引数に2つ入れる
```sass
@include mq(sp tablet) {
	height:40px;
}
```
```output css
@media all and (min-width: 680px) and (max-width: 959px) {
	height: 40px;
}
```

● min-widthで指定する場合は第2引数をtrueにする
```sass
@include mq(tablet, true) {
	height:40px;
}
```
```output css
@media all and (min-width: 960px) {
	height: 40px;
}
```

● 特定のbodyクラスを除外する場合は第3引数に指定する
```sass
@include mq(sp, true, is_tablet) {
	height:40px;
}
```
```output css
@media all and (min-width: 769px) {
	body:not(.is_tablet) .selector {
		height: 40px;
	}
}
```

● 特定のbodyクラスを含む場合は第4引数に指定する
```sass
@include mq(sp, true, null, is_tablet) {
	height:40px;
}
```
```output css
@media all and (min-width: 769px) {
	body.is_tablet .selector {
		height: 40px;
	}
}
```

*/
/*

ブレイクポイントごとのキーワードとマージンの組み合わせを作る

```sass
@include create_margins(
	(
		default:(
			l:50px,
			m:40px,
			s:30px,
			xs:20px
		),
		tablet:(
			l:40px,
			m:30px,
			s:25px
		),
		sp:(
			l:30px,
			m:25px,
			s:20px,
			xs:15px
		)
	)
)
```

それぞれのキーワードに対する上下左右のマージン用クラスを
ブレークポイントの数だけ出力します

```output css
.rmb_l { margin-bottom: 50px !important; }
.rmt_l { margin-top: 50px !important; }
.rmr_l { margin-right: 50px !important; }
.rml_l { margin-left: 50px !important; }
～略～

@media screen and (max-width: 959px) {
  .rmb_l { margin-bottom: 40px !important; }
  .rmt_l { margin-top: 40px !important; }
  .rmr_l { margin-right: 40px !important; }
  .rml_l { margin-left: 40px !important; }
	～略～
}

@media screen and (max-width: 768px) {
  .rmb_l { margin-bottom: 30px !important; }
  .rmt_l { margin-top: 30px !important; }
  .rmr_l { margin-right: 30px !important; }
  .rml_l { margin-left: 30px !important; }
	～略～
}
```

*/
/*

章番号用mixin (IE8以上)

キャプションに章番号をつける場合
```sass
$counterName: oreoreCounter;
.parent-section {
	@include resetCounter($counterName);
	h2 {
		@include addCounter($counterName, '第', '章');
	}
}
```

入れ子になってるリストに通し番号(1-1-1など）を付ける場合
```sass
$counterName: listCounter;
ol {
	@include resetCounter($counterName);
	li {
		@include addCounters($counterName, '-');
	}
}
```

*/
/*

グリッドレイアウト用mixin (IE8以上)

引数で分割数を指定して呼び出す
```sass
@include grid_system(12);
```

```html
<div class="grid--12 gutter--2">  ← このdivへの幅指定はNG
	<div class="grid__col--4"></div> ┐
	<div class="grid__col--4"></div> ├ 子要素は合計が分割数になるようにクラス名を付ける
	<div class="grid__col--4"></div> ┘
</div>
```

グリッドの間隔は「gutter--N」で指定する
通常はパーセントですが、「gutter--Npx」にするとピクセルになります。

ブレークポイントで変える場合は、「tablet_」「sp_」など、$breakpointsで定義したキーの接頭辞を付ける
```html
<div class="grid--12 gutter--20px tablet-gutter--15px sp_gutter--10px">
	<div class="grid__col--4 tablet-grid__col--6 sp_grid__col--12"></div>
	<div class="grid__col--4 tablet-grid__col--6 sp_grid__col--12"></div>
	<div class="grid__col--4 tablet-grid__col--6 sp_grid__col--12"></div>
</div>
```

*/
/*

sp heighlight

*/
/* -------------------------------------------------------------------------
	Object
------------------------------------------------------------------------- */
/* Project */
.structure .section_base_layout_service_logo {
  height: 70px;
}
@media all and (max-width: 768px) {
  .structure .section_base_layout_service_logo {
    height: 50px;
  }
}
/*# sourceMappingURL=structure.css.map */