@charset "UTF-8";
/* 
# Style Guide of Manmaru

## 1. html body基本設定

html bodyの基本設定。背景白、文字色黒、フォント13px/1.4 メイリオ、ヒラギノ角ゴ ProN W3、MSPゴシック、Osaka、sans-serif

```
	<p>フォント13px/1.4 メイリオ、ヒラギノ角ゴ ProN W3、MSPゴシック、Osaka、sans-serif</p>
```
*/
html {
  background: white;
  color: black;
  font-size: 62.5%;
  /*ベースを10pxにしています*/
  line-height: 1.4;
}

body {
  font-size: 14px;
  font-size: 1.4rem;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", Osaka, sans-serif;
}

img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

/*
## 2. clearfix

Block要素内でfloatを完結させるクラス。<br>
floatを指定する親要素に適用。

```
	<ul class="clearfix" style="list-style: none inside; border: 1px solid black; padding: 10px;">
		<li style="float:left; border: 1px solid black; padding: 10px; margin: 0 10px;">List</li>
		<li style="float:left; border: 1px solid black; padding: 10px; margin: 0 10px;">List</li>
		<li style="float:left; border: 1px solid black; padding: 10px; margin: 0 10px;">List</li>
	</ul>
	<p>clear fix test. if ul tags is not have "clearfix" class, this paragraph is upper than here.</p>
```
*/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/*
## 3. opacity

要素hover時の半透明化。<br>
透過させたい要素に適用。

```
	<p class="opacity" style="padding: 10px; background-color: orange;">opacity</p>
```
 */
.opacity:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

/*
## 4. btn-**

aタグのボタン化クラス。

### Button Orange

```
	<p><a class="btn-orange" href="#">Button</a></p>
	<p><a class="btn-orange :hover" href="#">Button</a></p>
```
 */
.btn-orange {
  display: block;
  padding: 5px 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background-color: orange;
  color: black;
}
.btn-orange:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  color: black;
}

/*
### Button Gradient Gray

```
	<p><a class="btn-gray" href="#">Button</a></p>
	<p><a class="btn-gray :hover" href="#">Button</a></p>
```
 */
.btn-gray {
  display: block;
  padding: 5px 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background-color: #cccccc;
  color: black;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #ffffff), color-stop(70%, #cccccc));
  background: -webkit-linear-gradient(#dddddd, #ffffff 20%, #cccccc 70%);
  background: -moz-linear-gradient(#dddddd, #ffffff 20%, #cccccc 70%);
  background: -o-linear-gradient(#dddddd, #ffffff 20%, #cccccc 70%);
  background: linear-gradient(#dddddd, #ffffff 20%, #cccccc 70%);
  border: 1px solid #ccc;
}
.btn-gray:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  color: black;
}

/*
## 5. odd-color-**
 
奇数要素のみに背景色の適用。<br>
背景を適用したい親要素にクラス適用。<br>
li　p　tr　divに対応。

### Odd Selector Background Orange

```
	<ul class="odd-color-orange" style="list-style: none inside; border: 1px solid black; padding: 10px;">
		<li style="padding: 10px;">List</li>
		<li style="padding: 10px;">List</li>
		<li style="padding: 10px;">List</li>
	</ul>
```
*/
.odd-color-orange > li:nth-child(odd),
.odd-color-orange > p:nth-child(odd),
.odd-color-orange > div:nth-child(odd),
.odd-color-orange > tr:nth-child(odd) {
  background-color: orange;
}

/*
### Odd Selector Background Gray

```
	<table style="border: 1px solid black; padding: 10px;">
		<tbody class="odd-color-gray">
			<tr>
				<th style="border: 1px solid black; padding: 10px;">th</th>
				<td style="border: 1px solid black; padding: 10px;">td</td>
			</tr>
			<tr>
				<th style="border: 1px solid black; padding: 10px;">th</th>
				<td style="border: 1px solid black; padding: 10px;">td</td>
			</tr>
			<tr>
				<th style="border: 1px solid black; padding: 10px;">th</th>
				<td style="border: 1px solid black; padding: 10px;">td</td>
			</tr>
		</tbody>
	</table>
```
 */
.odd-color-gray > li:nth-child(odd),
.odd-color-gray > p:nth-child(odd),
.odd-color-gray > div:nth-child(odd),
.odd-color-gray > tr:nth-child(odd) {
  background-color: #eeeeee;
}

/*
## 6. mt** mr** mb** ml**
 
空き設定したい要素に適用
 
```
	<p class="mt5" style="border: 1px solid black; padding: 10px;">margin-top 5</p>
	<p class="mt10" style="border: 1px solid black; padding: 10px;">margin-top 10</p>
	<p class="mt15" style="border: 1px solid black; padding: 10px;">margin-top 15</p>
	<p class="mt20" style="border: 1px solid black; padding: 10px;">margin-top 20</p>
	<p class="mt30" style="border: 1px solid black; padding: 10px;">margin-top 30</p>
	<p class="mt40" style="border: 1px solid black; padding: 10px;">margin-top 40</p>
	<p class="mt50" style="border: 1px solid black; padding: 10px;">margin-top 50</p>
	
	<p class="mr10" style="border: 1px solid black; padding: 10px;">margin-right 10</p>
	<p class="mr20" style="border: 1px solid black; padding: 10px;">margin-right 20</p>
	<p class="mr30" style="border: 1px solid black; padding: 10px;">margin-right 30</p>
	<p class="mr40" style="border: 1px solid black; padding: 10px;">margin-right 40</p>
	<p class="mr50" style="border: 1px solid black; padding: 10px;">margin-right 50</p>
	
	<p class="mb5" style="border: 1px solid black; padding: 10px;">margin-bottom 5</p>
	<p class="mb10" style="border: 1px solid black; padding: 10px;">margin-bottom 10</p>
	<p class="mb15" style="border: 1px solid black; padding: 10px;">margin-bottom 15</p>
	<p class="mb20" style="border: 1px solid black; padding: 10px;">margin-bottom 20</p>
	<p class="mb30" style="border: 1px solid black; padding: 10px;">margin-bottom 30</p>
	<p class="mb40" style="border: 1px solid black; padding: 10px;">margin-bottom 40</p>
	<p class="mb50" style="border: 1px solid black; padding: 10px;">margin-bottom 50</p>
	
	<p class="ml10" style="border: 1px solid black; padding: 10px;">margin-left 10</p>
	<p class="ml20" style="border: 1px solid black; padding: 10px;">margin-left 20</p>
	<p class="ml30" style="border: 1px solid black; padding: 10px;">margin-left 30</p>
	<p class="ml40" style="border: 1px solid black; padding: 10px;">margin-left 40</p>
	<p class="ml50" style="border: 1px solid black; padding: 10px;">margin-left 50</p>
	
```
*/
.mt0 {
  margin-top: 0px !important;
}

.mt5 {
  margin-top: 5px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mr0 {
  margin-right: 0px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mb0 {
  margin-bottom: 0px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.ml0 {
  margin-left: 0px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml50 {
  margin-left: 50px !important;
}

/*
## 7. t_l t_c t_r
 
文字の揃え指定
 
```
	<p class="t_l">text align left</p>
	<p class="t_c">text align center</p>
	<p class="t_r">text align right</p>
	
```
*/
.t_l {
  text-align: left !important;
}

.t_c {
  text-align: center !important;
}

.t_r {
  text-align: right !important;
}

/*
## 8. f_l f_r
 
フロート指定
 
```
	<p class="f_l" style="width:300px;border:1px solid black;">float left</p>
	<p class="f_r" style="width:300px;border:1px solid black;">float right</p>
	<p class="clr" style="width:300px;border:1px solid black;">clear both</p>
	
```
*/
.f_l {
  float: left;
}

.f_r {
  float: right;
}

.clr {
  clear: both;
}