@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>
```
*/
.container:after, .ul-2col:after, .ul-3col:after {
  content: "";
  clear: both;
  display: block;
}


html {
  background: white;
  color: black;
  font-size: 62.5%;
  /*ベースを10pxにしています*/
  line-height: 1.8;
}

body {
	min-width: 1200px;
	font-size: 16px;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", Osaka, sans-serif;
}
@media only screen and (max-width: 480px) {
  body {
    min-width: inherit;
	font-size:15px;
  }
}

.img_resize {
  max-width: 100%;
  max-height: 100%;
}

a.op:hover img {
  opacity: 0.7;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
	line-height:30px;
}
.container-s{
  width: 800px;
  margin: 0 auto;
}
@media only screen and (max-width: 480px) {
  .container {
    width: 98%;
  }
  .container-s{
  width: 98%;
  overflow-x:hidden;
}

}

.sp-view {
  display: none;
}
@media only screen and (max-width: 480px) {
  .sp-view {
    display: inherit;
  }
}

@media only screen and (max-width: 480px) {
  .sp-hide {
    display: none;
  }
}

/*
## 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: inline-block;
  padding: 5px 10px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: orange;
  color: black !important;
}
.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: inline-block;
  padding: 5px 10px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #ccc;
  color: black !important;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNjY2NjY2MiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(20%, #ffffff), color-stop(70%, #cccccc));
  background: -moz-linear-gradient(#dddddd, #ffffff 20%, #cccccc 70%);
  background: -webkit-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: #eee;
}

/*
## 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;
}

.pt0 {
  padding-top: 0px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pr0 {
  padding-right: 0px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.pb0 {
  padding-bottom: 0px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pl0 {
  padding-left: 0px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pl50 {
  padding-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;
}

@media only screen and (max-width: 480px) {
  .sp-t_l {
    text-align: left !important;
  }
}

@media only screen and (max-width: 480px) {
  .sp-t_c {
    text-align: center !important;
  }
}

@media only screen and (max-width: 480px) {
  .sp-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;
}
.f_n {
  float: none;
}

.clr {
  clear: both;
}

/*
## 9. w49 w32
 
横幅指定　スマホの指定あり
 
```
	<p class="w100 f_l" style="border:1px solid black;">100</p>
	<p class="w49 f_l" style="border:1px solid black;">49 float left</p>
	<p class="w32 f_l" style="border:1px solid black;">32 float left</p>
	
```
*/
.w100 {
  width: 100%;
}

.w80 {
  width: 80%;
}

.w75 {
  width: 75%;
}

.w65 {
  width: 65%;
}

.w60 {
  width: 60%;
}

.w50 {
  width: 50%;
}

.w49 {
  width: 49%;
}

.w40 {
  width: 40%;
}

.w38 {
  width: 38%;
}

.w32 {
  width: 32%;
}

.w25 {
  width: 25%;
}

.w20 {
  width: 20%;
}

@media only screen and (max-width: 480px) {
  .sp-w100 {
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  .sp-w75 {
    width: 75%;
  }
}

@media only screen and (max-width: 480px) {
  .sp-w49 {
    width: 49%;
  }
}

@media only screen and (max-width: 480px) {
  .sp-w30 {
    width: 30%;
  }
}

@media only screen and (max-width: 480px) {
  .sp-wauto {
    width: auto;
  }
}

/*
## 9. ul-2col, ul-3col
 
リスト横並びクラス
3列並びはスマホで2列に変更
 
```
	<ul class="clearfix ul-2col">
		<li>あいうえお</li>
		<li>かきくけこ</li>
		<li>さしすせそ</li>
		<li>たちつてと</li>
		<li>なにぬねの</li>
		<li>はひふへほ</li>
		<li>まみむめも</li>
		<li>やゆよ</li>
    </ul>
    
	<ul class="clearfix ul-3col">
		<li>あいうえお</li>
		<li>かきくけこ</li>
		<li>さしすせそ</li>
		<li>たちつてと</li>
		<li>なにぬねの</li>
		<li>はひふへほ</li>
		<li>まみむめも</li>
		<li>やゆよ</li>
	</ul>
	
```
*/
.ul-2col {
  margin-left: 0 !important;
}
.ul-2col > li {
  width: 49%;
  display: block;
}
.ul-2col > li:nth-child(odd) {
  clear: both;
  float: left;
}
.ul-2col > li:nth-child(even) {
  float: right;
}

.ul-3col {
  margin-left: 0 !important;
}
.ul-3col > li {
  width: 32%;
  display: block;
  float: left;
}
@media only screen and (max-width: 480px) {
  .ul-3col > li {
    width: 49%;
  }
}
.ul-3col > li:nth-child(3n + 1) {
  clear: both;
}
@media only screen and (max-width: 480px) {
  .ul-3col > li:nth-child(3n + 1) {
    clear: none;
  }
}
.ul-3col > li:nth-child(3n + 2) {
  margin: 0 2% 10px;
}
@media only screen and (max-width: 480px) {
  .ul-3col > li:nth-child(3n + 2) {
    margin: 0 0 10px;
  }
}
@media only screen and (max-width: 480px) {
  .ul-3col > li:nth-child(odd) {
    clear: both;
    float: left;
  }
}
@media only screen and (max-width: 480px) {
  .ul-3col > li:nth-child(even) {
    float: right;
  }
}

.ul-ib > li {
  display: inline-block;
}

@media only screen and (max-width: 480px) {
  .ul-sp1col > li {
    width: 100%;
    float: none;
  }
}

/*
## 10. b-left,b-top,b-rigth,b-bottom

要素に罫線
 
```
	<p class="b-left" style="margin-bottom:10px;">左</p>
	<p class="b-top" style="margin-bottom:10px;">上</p>
	<p class="b-right" style="margin-bottom:10px;">右</p>
	<p class="b-bottom" style="margin-bottom:10px;">下</p>
```
*/
.b-left {
  border-left: 1px solid black;
}

.b-top {
  border-top: 1px solid black;
}

.b-right {
  border-right: 1px solid black;
}

.b-bottom {
  border-bottom: 1px solid black;
}

/*
## 11. list-none, list-disc, list-decimal

リストスタイル
 
```
	<ul>
		<li class="list-none">none</li>
		<li class="list-disc">disc</li>
		<li class="list-decimal">decimal</li>
	</ul>
```
*/
.list-none {
  list-style-type: none !important;
}

.list-disc {
  list-style-type: disc !important;
}

.list-decimal {
  list-style-type: decimal !important;
}

/*
## 12. sp-table-block

スマホ用テーブル要素をブロック化
 
```
	<table class="sp-table-block">
		<tr>
			<th>ヘッダー</th>
			<td>ボディ</td>
	</table>
```
*/
@media only screen and (max-width: 480px) {
  .sp-table-block th,
  .sp-table-block td {
    display: block;
    width: auto;
  }
}