@charset "UTF-8";
/*--------------------------------------------------------------------------------
▼ common.cssは全てのサイトに共通して使用可能なcss設定です ▼
---------------------------------------------------------------------------------*/
/*---------------------------------------------
■目次：
1. 文字のサイズ
2. 文字の太さ
3. 文字のカラー
4. 文字の位置
5. 文字の装飾
6. 文章の体裁
7. フロート
8. マージン
9. パディング
10. 枠線
11. 背景
12. 幅
13. テーブル
14. その他
----------------------------------------------*/

/*-----------------------------------------------------------------
1. 文字のサイズ
------------------------------------------------------------------*/
/*大雑把な指定*/
.tiny { font-size: 60%; }/*かなり小さい*/
.small { font-size: 80%; }/*小さい*/
.big { font-size: 120%; }/*大きい*/
.huge { font-size: 140%; }/*かなり大きい*/

/*細かい指定*/
.f10 { font-size: 77%; }/*約10px*/
.f11 { font-size: 85%; }/*約11x*/
.f12 { font-size: 93%; }/*約12px*/
.f13 { font-size: 100%; }/*約13px*/
.f14 { font-size: 108%; }/*約14px*/
.f15 { font-size: 116%; }/*約15px*/
.f16 { font-size: 123.1%; }/*約16px*/
.f17 { font-size: 131%; }/*約17px*/
.f18 { font-size: 138.5%; }/*約18px*/
.f19 { font-size: 146.5%; }/*約19px*/
.f20 { font-size: 153.9%; }/*約20px*/
.f21 { font-size: 161.6%; }/*約21px*/
.f22 { font-size: 167%; }/*約22px*/
.f23 { font-size: 174%; }/*約23px*/
.f24 { font-size: 182%; }/*約24px*/
.f25 { font-size: 189%; }/*約25px*/
.f26 { font-size: 197%; }/*約26px*/

/* ※文字サイズの指定はYUI Fontsに基づいて設定しています。（基準サイズ13px）*/

/*-----------------------------------------------------------------
2. 文字の太さ
------------------------------------------------------------------*/
.b { font-weight: bold; }/*太字*/
.normal { font-weight: normal; }/*通常の太さ*/
.lighter { font-weight: lighter; }/*細字*/

/*-----------------------------------------------------------------
3. 文字のカラー
------------------------------------------------------------------*/
/*黒系統*/
.black { color: #000; }/*黒*/
.l-black { color: #333; }/*薄黒色*/
.d-gray { color: #666; }/*濃灰色*/
.gray { color: #999; }/*灰色*/
.l-gray { color: #ccc; }/*薄灰色*/
.white { color: #fff; }/*白*/

/*赤系統*/
.l-red { color: #f00; }/*鮮赤*/
.red { color: #c00; }/*赤*/
.d-red { color: #800; }/*濃赤*/
.brown { color: #600; }/*茶*/
.d-brown { color: #300; }/*濃茶*/

/*青系統*/
.l-blue { color: #00f; }/*鮮青*/
.blue { color: #00e; }/*青*/
.d-blue { color: #009; }/*濃青*/
.l-navy { color: #006; }/*薄紺*/
.navy { color: #003; }/*紺*/

/*よく使う色*/
.orange { color: #ffa500; }/*橙*/
.pink { color: #ffc0cb; }/*ピンク*/

/*注記事項---------------------------
l = light（薄い・明るい）
d = dark（濃い・暗い）

※webセーフカラーで指定しています。
------------------------------------*/

/*-----------------------------------------------------------------
4. 文字の位置
------------------------------------------------------------------*/
/*縦の位置*/
.v-t { vertical-align: top; }/*上*/
.v-m { vertical-align: middle; }/*中央*/
.v-b { vertical-align: bottom; }/*下*/

/*横の位置*/
.a-l { text-align: left; }/*左*/
.a-c { text-align: center; }/*中央*/
.a-r { text-align: right; }/*右*/

/*-----------------------------------------------------------------
5. 文字の装飾
------------------------------------------------------------------*/
.ita { font-style: italic;}/*イタリック体*/
.ul { text-decoration: underline; }/*下線を引く*/
.ul-none { text-decoration: none; }/*下線を消す*/
.del { text-decoration:line-through;}/*取消線を引く*/

/*-----------------------------------------------------------------
6. 文章の体裁
------------------------------------------------------------------*/
/* 行間 */
.l-h10 { line-height: 1.0; }/*行の高さ＝フォントの1.0倍*/
.l-h11 { line-height: 1.1; }/*行の高さ＝フォントの1.1倍*/
.l-h12 { line-height: 1.2; }/*行の高さ＝フォントの1.2倍*/
.l-h13 { line-height: 1.3; }/*行の高さ＝フォントの1.3倍*/
.l-h14 { line-height: 1.4; }/*行の高さ＝フォントの1.4倍*/
.l-h15 { line-height: 1.5; }/*行の高さ＝フォントの1.5倍*/
.l-h16 { line-height: 1.6; }/*行の高さ＝フォントの1.6倍*/
.l-h17 { line-height: 1.7; }/*行の高さ＝フォントの1.7倍*/
.l-h18 { line-height: 1.8; }/*行の高さ＝フォントの1.8倍*/
.l-h19 { line-height: 1.9; }/*行の高さ＝フォントの1.9倍*/
.l-h20 { line-height: 2.0; }/*行の高さ＝フォントの2.0倍*/

/* 字下げ */
.i { text-indent: 1em; }
.i2 { text-indent: 2em; }
.i3 { text-indent: 3em; }
.i4 { text-indent: 4em; }
.i5 { text-indent: 5em; }

/* 改行 */
.br { margin-top: 1em; }

.br2 { margin-top: 2em; }

.br3 { margin-top: 3em; }

/*-----------------------------------------------------------------
7. フロート
------------------------------------------------------------------*/
/*右寄せ：左側に文章が回りこみ*/
.f-r {
margin: 0 0 10px 18px;
float: right;
}

.right { float: right; }

/*左寄せ：右側に文章が回りこみ*/
.f-l {
margin: 0 18px 10px 0;
float: left;
}

.left { float: left; }

/*中央寄せ*/
.center {
margin: 0 auto;
display: block;
}

/*回り込み解除*/
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0;
}

/*回り込み解除*/
.clear { clear: both; }

/*-----------------------------------------------------------------
8. マージン
------------------------------------------------------------------*/
.m0 { margin: 0; }/*四方向にmargin0*/
.m10 { margin: 10px; }/*四方向にmargin10px*/
.m20 { margin: 20px; }/*四方向にmargin20px*/
.m30 { margin: 30px; }/*四方向にmargin30px*/
.m40 { margin: 40px; }/*四方向にmargin40px*/

.m-t0 { margin-top: 0; }/*上方向にmargin0*/
.m-t10 { margin-top: 10px; }/*上方向にmargin10px*/
.m-t20 { margin-top: 20px; }/*上方向にmargin20px*/
.m-t30 { margin-top: 30px; }/*上方向にmargin30px*/
.m-t40 { margin-top: 40px; }/*上方向にmargin40px*/

.m-r0 { margin-right: 0; }/*右方向にmargin0*/
.m-r10 { margin-right: 10px; }/*右方向にmargin10px*/
.m-r20 { margin-right: 20px; }/*右方向にmargin20px*/
.m-r30 { margin-right: 30px; }/*右方向にmargin30px*/
.m-r40 { margin-right: 40px; }/*右方向にmargin40px*/

.m-b0 { margin-bottom: 0; }/*下方向にmargin0*/
.m-b10 { margin-bottom: 10px; }/*下方向にmargin10px*/
.m-b20 { margin-bottom: 20px; }/*下方向にmargin20px*/
.m-b30 { margin-bottom: 30px; }/*下方向にmargin30px*/
.m-b40 { margin-bottom: 40px; }/*下方向にmargin40px*/

.m-l0 { margin-left: 0; }/*左方向に0*/
.m-l10 { margin-left: 10px; }/*左方向にmargin10px*/
.m-l20 { margin-left: 20px; }/*左方向にmargin20px*/
.m-l30 { margin-left: 30px; }/*左方向にmargin30px*/
.m-l40 { margin-left: 40px; }/*左方向にmargin40px*/

/*-----------------------------------------------------------------
9. パディング
------------------------------------------------------------------*/
.p0 { padding: 0; }/*四方向にpadding0*/
.p10 { padding: 10px; }/*四方向にpadding10px*/
.p20 { padding: 20px; }/*四方向にpadding20px*/
.p30 { padding: 30px; }/*四方向にpadding30px*/

.p-t0 { padding-top: 0; }/*上方向にpadding0*/
.p-t10 { padding-top: 10px; }/*上方向にpadding10px*/
.p-t20 { padding-top: 20px; }/*上方向にpadding20px*/
.p-t30 { padding-top: 30px; }/*上方向にpadding30px*/

.p-r0 { padding-right: 0; }/*右方向にpadding0*/
.p-r10 { padding-right: 10px; }/*右方向にpadding10px*/
.p-r20 { padding-right: 20px; }/*右方向にpadding20px*/
.p-r30 { padding-right: 30px; }/*右方向にpadding30px*/

.p-b0 { padding-bottom: 0; }/*下方向にpadding0*/
.p-b10 { padding-bottom: 10px; }/*下方向にpadding10px*/
.p-b20 { padding-bottom: 20px; }/*下方向にpadding20px*/
.p-b30 { padding-bottom: 30px; }/*下方向にpadding30px*/

.p-l0 { padding-left: 0; }/*左方向にpadding0*/
.p-l10 { padding-left: 10px; }/*左方向にpadding10px*/
.p-l20 { padding-left: 20px; }/*左方向にpadding20px*/
.p-l30 { padding-left: 30px; }/*左方向にpadding30px*/

/*-----------------------------------------------------------------
10. 枠線
------------------------------------------------------------------*/
/*input等の枠をなくす*/
.no-bo { border: none; }

/*画像の枠*/
.frame {
padding: 1px;
border: 1px solid #eee;
}

/*枠線（白）*/
.bo1-white { border: 1px solid #fff; }

.bo2-white { border: 2px solid #fff; }

.bo3-white { border: 3px solid #fff; }

.bo4-white { border: 4px solid #fff; }

/*枠線（灰色）*/
.bo1-gray { border: 1px solid #ccc; }

.bo2-gray { border: 2px solid #ccc; }

.bo3-gray { border: 3px solid #ccc; }

.bo4-gray { border: 4px solid #ccc; }

/*実線の囲い枠・・・数字は枠までのpadding*/
.solid4 {
padding: 4px;
border: 1px solid #999;
}

.solid8 {
padding: 8px;
border: 1px solid #999;
}

.solid12 {
padding: 12px;
border: 1px solid #999;
}

/*破線の囲い枠・・・数字は枠までのpadding*/
.dashed4 {
padding: 4px;
border: 1px dashed #999;
}

.dashed8 {
padding: 8px;
border: 1px dashed #999;
}

.dashed12 {
padding: 12px;
border: 1px dashed #999;
}

/*点線の囲い枠・・・数字は枠までのpadding*/
.dotted4 {
padding: 4px;
border: 1px dotted #999;
}

.dotted8 {
padding: 8px;
border: 1px dotted #999;
}

.dotted12 {
padding: 12px;
border: 1px dotted #999;
}

/*-----------------------------------------------------------------
11. 背景
------------------------------------------------------------------*/
.bg-white { background: #fff; }

.bg-black { background: #000; }

.bg-red { background: #f00; }

.bg-green { background: #0f0; }

.bg-blue { background: #00f; }

/* ※色の濃淡はお好みで調整ください。 */

/*-----------------------------------------------------------------
12. 幅
------------------------------------------------------------------*/
/* パーセンテージ */
.w05 { width: 5%; }

.w06 { width: 6%; }

.w07 { width: 7%; }

.w08 { width: 8%; }

.w09 { width: 9%; }

.w10 { width: 10%; }

.w15 { width: 15%; }

.w20 { width: 20%; }

.w25 { width: 25%; }

.w30 { width: 30%; }

.w35 { width: 35%; }

.w40 { width: 40%; }

.w45 { width: 45%; }

.w50 { width: 50%; }

.w55 { width: 55%; }

.w60 { width: 60%; }

.w65 { width: 65%; }

.w70 { width: 70%; }

.w75 { width: 75%; }

.w80 { width: 80%; }

.w85 { width: 85%; }

.w90 { width: 90%; }

.w95 { width: 95%; }

.w100 { width: 100%; }

.auto { width: auto; }

/* ピクセル指定 */
.px10 { width: 10px; }

.px15 { width: 15px; }

.px16 { width: 16px; }

.px20 { width: 20px; }

.px25 { width: 25px; }

.px30 { width: 30px; }

.px35 { width: 35px; }

.px40 { width: 40px; }

.px45 { width: 45px; }

.px50 { width: 50px; }

.px55 { width: 55px; }

.px60 { width: 60px; }

.px65 { width: 65px; }

.px70 { width: 70px; }

.px75 { width: 75px; }

.px80 { width: 80px; }

.px85 { width: 85px; }

.px90 { width: 90px; }

.px95 { width: 95px; }

.px100 { width: 100px; }

.px120 { width: 120px; }

.px140 { width: 140px; }

.px160 { width: 160px; }

.px180 { width: 180px; }

.px200 { width: 200px; }

.px300 { width: 300px; }

.px400 { width: 400px; }

.px500 { width: 500px; }

/*-----------------------------------------------------------------
13. テーブル
------------------------------------------------------------------*/
/*セルのサイズ調整*/
.td-10 { width: 10%; }

.td-20 { width: 20%; }

.td-30 { width: 30%; }

.td-40 { width: 40%; }

.td-50 { width: 50%; }

.td-60 { width: 60%; }

.td-70 { width: 70%; }

.td-80 { width: 80%; }

.td-90 { width: 90%; }

/*-----------------------------------------------------------------
14. その他
------------------------------------------------------------------*/
/*リストのアイコンをなくす*/
.no-i { list-style-type: none; }

/*ブロック化・インライン化*/
.block { display: block;}
.inline { display: inline;}
.inline-block { display: inline-block;}