/**** Google Font ****/
@import url(https://fonts.googleapis.com/css?family=Montserrat);

/* リセット
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-size: 100%;
    vertical-align: baseline;
}
:focus {outline: 0;}
ol, ul {list-style: none;}
table {border-collapse: separate; border-spacing: 0;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}


/* 画像
------------------------------------------------------------*/
img {
    max-width: 100%;
    vertical-align: middle;
}
.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}
.img-rounded {
    border-radius: 4px;
}
.img-thumbnail {
    display: inline-block;
    height: auto;
    max-width: 100%;
    padding: 2px;
    line-height: 1.428571429;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
}
.img-circle {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
.img-shadow {
    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.07);
}
img.aligncenter {
    display: block;
    margin:5px auto;
}
img.alignright{
    float:right;
    padding:4px;
    margin: 0 0 10px 25px;
    display:inline;
}
img.alignleft{float:left; margin: 0 25px 10px 0;}
img.alignleft2{float:left; margin: 7px 15px 0 0;}
img.alignleft3{float:left; margin: 0 0 20px 0;}
.respo {
    display: block;
    max-width: 100%;
    height: auto;
    width /***/:auto; /*IE8のみ適用*/}


/* メッセージボックス
------------------------------------------------------------*/
.success, .message{
    background-color: #f1f9f7;
    border: 1px solid #e0f1e9;
    color: #1d9d74;
    padding: 15px;
    margin-top: 3px;
    margin-bottom: 20px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-weight: bold;
}
.error {
    background-color: #fdf7f7;
    border: solid 1px #f9c1c1;
    color: #d9534f;
    padding: 15px;
    margin-top: 5px;
    margin-bottom: 20px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    font-weight: bold;
}
.info {
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    color: #333;
    padding: 15px;
    margin-top: 3px;
    margin-bottom: 20px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}


/* ボタン
------------------------------------------------------------*/
.btn, .btn:visited {
    display: inline-block;
    line-height: 1.2;
    padding: 3px 8px;
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    position: relative;
    cursor: pointer;
}
.btn a, .btn a:hover, .btn a:active {
    text-decoration: none;
    color: #fff;
}
a.btn i, a.btn:hover i, a.btn:active i {
    color: #fff;
}
.btn-xsmall.btn, .btn-xsmall.btn:visited {
    font-size: 86%;
    font-weight: normal;
    padding: 5px 12px 5px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.btn-small.btn, .btn-small.btn:visited {
    font-size: 92%;
    font-weight: normal;
    padding: 7px 12px 7px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}
.btn-normal.btn, .btn-normal.btn:visited { 
    padding: 9px 12px 9px;
}
.btn-medium.btn, .btn-medium.btn:visited { 
    font-size: 100%;
    padding: 13px 20px 13px;
}
.btn-large.btn, .btn-large.btn:visited{
    font-size: 110%;
    padding: 16px 35px 16px;
}
.btn-super.btn, .btn-super.btn:visited {
    font-size: 20px;
    padding: 20px 50px 20px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    font-weight: normal;
}
.btn-yell.btn, .btn-yell.btn:visited { background-color: #ffcc00; color: #111;}
.btn-yell.btn:hover  { background-color: #008740; color: #fff; }
.btn-yell.btn i  { color: #111;}
.btn-pink.btn, .btn-pink.btn:visited  { background-color: #e54c3a; color: #fff;}
.btn-pink.btn:hover { background-color: #e56b5b; color: #fff;}
.btn-green.btn, .btn-green.btn:visited  { background-color: #17b576; color: #fff;}
.btn-green.btn:hover   { background-color: #14a36b; color: #fff;}
.btn-mosgreen.btn, .btn-mosgreen.btn:visited  { background-color: #009966; color: #fff;}
.btn-mosgreen.btn:hover   { background-color: #4bb793; color: #fff;}
.btn-red.btn, .btn-red.btn:visited  { background-color: #e62727; color: #fff;}
.btn-red.btn:hover  { background-color: #cf2525; color: #fff;}
.btn-orange.btn, .btn-orange.btn:visited  { background-color: #ff660c; color: #fff;}
.btn-orange.btn:hover { background-color: #f44c0f; }
.btn-blue.btn, .btn-blue.btn:visited { background-color: #2981e4; color: #fff;}
.btn-blue.btn:hover  { background-color: #2575cf; }
.btn-blown.btn, .btn-navy.btn:visited { background-color: #736152; color: #fff;}
.btn-blown.btn:hover  { background-color: #5e4f42; }
.btn-sky.btn, .btn-sky.btn:visited { background-color: #38adbf; color: #fff;}
.btn-sky.btn:hover  { background-color: #5bbac9; }
.btn-glay.btn, .btn-glay.btn:visited  { background-color: #999; color: #fff;}
.btn-glay.btn:hover { background-color: #777; }
.btn-white.btn, .btn-white.btn:visited  { background-color: #f3f3f3; color: #222; text-shadow: 0 -1px 1px rgba(255,255,255,0.20);}
.btn-white.btn:hover { background-color: #e3e3e3; }
.btn-black.btn, .btn-glay.btn:visited  { background-color: #222; color: #fff;}
.btn-black.btn:hover { background-color: #555; }


/* TABLE1
------------------------------------------------------------*/
.table-form {overflow: hidden; padding: 10px 0;}
.table-form dl{width: 100%; display:inline-block; *display:inline; *zoom:1; border-bottom: 1px solid #ccc; margin: 0 auto; overflow:hidden;}
.table-form dl dt{float: left;  width: 26%; background: #f5f5f5; color: #333; border-top: 1px solid #ccc; font-weight: bold; clear: both; padding-bottom: 10000px; margin-bottom: -10000px; overflow:hidden; }
.table-form dl dd{float: left;  width: 72.5%; background: #fff;  border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc; padding-bottom: 10000px; margin-bottom: -10000px;}

.table-form dl dt.dtthumb{width: 18%;}
.table-form dl dd.ddthumb{width: 80%;}
@media only screen and (max-width: 760px){
.table-form dl dt, .table-form dl dt.dtthumb{float: none; width: 100%; }
.table-form dl dt.dtthumb{text-align: center;}
.table-form dl dd, .table-form dl dd.ddthumb{float: none; width: 100%;  border-left: none;}
}


/* TABLE2
------------------------------------------------------------*/
table {
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
th {
  background-color: #eee;
  text-align: left;
  font-weight: bold;}
.table {
  width: 100%;
  margin-bottom: 20px;
  }
.table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td {
  padding: 18px 5px 16px 0px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #e7e7e7;}
.table > thead > tr > th {
  padding: 15px 10px 14px 10px;
  vertical-align: bottom;
  border-bottom: 3px solid #dddddd;}
.table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td {
  border-top: 0;}
.table > tbody + tbody {
  border-top: 2px solid #dddddd;}
.table .table {
  background-color: #ffffff;}
.table-condensed > thead > tr > th,.table-condensed > tbody > tr > th,.table-condensed > tfoot > tr > th,.table-condensed > thead > tr > td,.table-condensed > tbody > tr > td,.table-condensed > tfoot > tr > td {
  padding: 5px;}
.table-bordered {
  border: 1px solid #dddddd;}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #dddddd;}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #f5f5f5;}
table col[class*="col-"] {
  display: table-column;
  float: none;}
table td[class*="col-"],
table th[class*="col-"] {
  display: table-cell;
  float: none;}
.table > thead > tr > td.active,.table > tbody > tr > td.active,.table > tfoot > tr > td.active,.table > thead > tr > th.active,.table > tbody > tr > th.active,.table > tfoot > tr > th.active,.table > thead > tr.active > td,.table > tbody > tr.active > td,.table > tfoot > tr.active > td,.table > thead > tr.active > th,.table > tbody > tr.active > th,.table > tfoot > tr.active > th {
  background-color: #f5f5f5;}
.table > thead > tr > td.success,.table > tbody > tr > td.success,.table > tfoot > tr > td.success,.table > thead > tr > th.success,.table > tbody > tr > th.success,.table > tfoot > tr > th.success,.table > thead > tr.success > td,.table > tbody > tr.success > td,.table > tfoot > tr.success > td,.table > thead > tr.success > th,.table > tbody > tr.success > th,.table > tfoot > tr.success > th {
  background-color: #dff0d8;}
.table-hover > tbody > tr > td.success:hover,.table-hover > tbody > tr > th.success:hover,.table-hover > tbody > tr.success:hover > td,.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;}
.table > thead > tr > td.danger,.table > tbody > tr > td.danger,.table > tfoot > tr > td.danger,.table > thead > tr > th.danger,.table > tbody > tr > th.danger,.table > tfoot > tr > th.danger,.table > thead > tr.danger > td,.table > tbody > tr.danger > td,.table > tfoot > tr.danger > td,.table > thead > tr.danger > th,.table > tbody > tr.danger > th,.table > tfoot > tr.danger > th {
  background-color: #f2dede;}
.table-hover > tbody > tr > td.danger:hover,.table-hover > tbody > tr > th.danger:hover,.table-hover > tbody > tr.danger:hover > td,.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;}
.table > thead > tr > td.warning,.table > tbody > tr > td.warning,.table > tfoot > tr > td.warning,.table > thead > tr > th.warning,.table > tbody > tr > th.warning,.table > tfoot > tr > th.warning,.table > thead > tr.warning > td,.table > tbody > tr.warning > td,.table > tfoot > tr.warning > td,.table > thead > tr.warning > th,.table > tbody > tr.warning > th,.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;}
.table-hover > tbody > tr > td.warning:hover,.table-hover > tbody > tr > th.warning:hover,.table-hover > tbody > tr.warning:hover > td,.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;}

@media screen and (max-width: 767px) {
  .table {width: 95%; margin: 0 auto;}
  .table-responsive {
    width: 98%;
    margin: 0 auto;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid #dddddd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;}
  .table-responsive > .table {margin-bottom: 0;}
  .table-responsive > .table > thead > tr > th,  .table-responsive > .table > tbody > tr > th,  .table-responsive > .table > tfoot > tr > th,  .table-responsive > .table > thead > tr > td,  .table-responsive > .table > tbody > tr > td,  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;}
  .table-responsive > .table-bordered {
    border: 0;}
  .table-responsive > .table-bordered > thead > tr > th:first-child,  .table-responsive > .table-bordered > tbody > tr > th:first-child,  .table-responsive > .table-bordered > tfoot > tr > th:first-child,  .table-responsive > .table-bordered > thead > tr > td:first-child,  .table-responsive > .table-bordered > tbody > tr > td:first-child,  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
    border-left: 0;}
  .table-responsive > .table-bordered > thead > tr > th:last-child,  .table-responsive > .table-bordered > tbody > tr > th:last-child,  .table-responsive > .table-bordered > tfoot > tr > th:last-child,  .table-responsive > .table-bordered > thead > tr > td:last-child,  .table-responsive > .table-bordered > tbody > tr > td:last-child,  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
    border-right: 0;}
  .table-responsive > .table-bordered > tbody > tr:last-child > th,  .table-responsive > .table-bordered > tfoot > tr:last-child > th,  .table-responsive > .table-bordered > tbody > tr:last-child > td,  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
    border-bottom: 0;}
}


/* GRID レイアウト （12分割）
------------------------------------------------------------*/
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
.container:before, .container:after { display: table; content: " "; }
.container:after { clear: both }
.container:before, .container:after { display: table; content: " "; }
.container:after { clear: both }
.row {width: 100%; padding: 0; margin: 0 auto;}
.row:before, .row:after { display: table; content: " "; }
.row:after { clear: both }
.row:before, .row:after { display: table; content: " "; }
.row:after { clear: both }
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
    position: relative; min-height: 1px; }
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 { float: left; padding: 0; }
.col-xs-12 { width: 100%}
.col-xs-11 { width: 91.66666666666666%}
.col-xs-10 { width: 83.33333333333334%}
.col-xs-9 { width: 75%}
.col-xs-8 { width: 66.66666666666666%}
.col-xs-7 { width: 58.333333333333336%}
.col-xs-6 { width: 50% }
.col-xs-5 { width: 41.66666666666667%}
.col-xs-4 { width: 33.33333333333333%}
.col-xs-3 { width: 25% }
.col-xs-2 { width: 16.666666666666664%}
.col-xs-1 { width: 8.333333333333332%}
.col-xs-offset-12 { margin-left: 100% }
.col-xs-offset-11 { margin-left: 91.66666666666666% }
.col-xs-offset-10 { margin-left: 83.33333333333334% }
.col-xs-offset-9 { margin-left: 75% }
.col-xs-offset-8 { margin-left: 66.66666666666666% }
.col-xs-offset-7 { margin-left: 58.333333333333336% }
.col-xs-offset-6 { margin-left: 50% }
.col-xs-offset-5 { margin-left: 41.66666666666667% }
.col-xs-offset-4 { margin-left: 33.33333333333333% }
.col-xs-offset-3 { margin-left: 25% }
.col-xs-offset-2 { margin-left: 16.666666666666664% }
.col-xs-offset-1 { margin-left: 8.333333333333332% }
.col-xs-offset-0 { margin-left: 0 }
@media screen and (max-width: 448px){
    .container { width: 435px }
    .col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11 { float: left; padding: 0; }
    .col-ss-12 { width: 100%; text-align: center; }
    .col-ss-11 { width: 91.66666666666666%; text-align: center; }
    .col-ss-10 { width: 83.33333333333334%; text-align: center; }
    .col-ss-9 { width: 75%; text-align: center; }
    .col-ss-8 { width: 66.66666666666666%; text-align: center; }
    .col-ss-7 { width: 58.333333333333336%; text-align: center; }
    .col-ss-6 { width: 50%; text-align: center; }
    .col-ss-5 { width: 41.66666666666667%; text-align: center; }
    .col-ss-4 { width: 33.33333333333333% }
    .col-ss-3 { width: 25%; text-align: center; }
    .col-ss-2 { width: 16.666666666666664%; text-align: center; }
    .col-ss-1 { width: 8.333333333333332%; text-align: center; }
}
@media screen and (min-width: 768px) { 
    .container { width: 750px }
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11 { float: left; padding: 0; }
    .col-sm-12 { width: 100%;  }
    .col-sm-11 { width: 91.66666666666666%;  }
    .col-sm-10 { width: 83.33333333333334%;  }
    .col-sm-9 { width: 75%;  }
    .col-sm-8 { width: 66.66666666666666%;  }
    .col-sm-7 { width: 58.333333333333336% }
    .col-sm-6 { width: 50%;  }
    .col-sm-5 { width: 41.66666666666667%;  }
    .col-sm-4 { width: 33.33333333333333%;  }
    .col-sm-3 { width: 25%;  }
    .col-sm-2 { width: 16.666666666666664%;  }
    .col-sm-1 { width: 8.333333333333332%;  }
    .col-sm-offset-12 { margin-left: 100% }
    .col-sm-offset-11 { margin-left: 91.66666666666666% }
    .col-sm-offset-10 { margin-left: 83.33333333333334% }
    .col-sm-offset-9 { margin-left: 75% }
    .col-sm-offset-8 { margin-left: 66.66666666666666% }
    .col-sm-offset-7 { margin-left: 58.333333333333336% }
    .col-sm-offset-6 { margin-left: 50% }
    .col-sm-offset-5 { margin-left: 41.66666666666667% }
    .col-sm-offset-4 { margin-left: 33.33333333333333% }
    .col-sm-offset-3 { margin-left: 25% }
    .col-sm-offset-2 { margin-left: 16.666666666666664% }
    .col-sm-offset-1 { margin-left: 8.333333333333332% }
    .col-sm-offset-0 { margin-left: 0 }
}
@media screen and (min-width: 982px) { 
    .container { width: 960px }
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 { float: left; padding: 0; }
    .col-md-12 { width: 100%  }
    .col-md-11 { width: 91.66666666666666% }
    .col-md-10 { width: 83.33333333333334%  }
    .col-md-9 { width: 75%  }
    .col-md-8 { width: 66.66666666666666% }
    .col-md-7 { width: 58.333333333333336% }
    .col-md-6 { width: 50% }
    .col-md-5 { width: 41.66666666666667% }
    .col-md-4 { width: 33.33333333333333% }
    .col-md-3 { width: 25% }
    .col-md-2 { width: 16.666666666666664% }
    .col-md-1 { width: 8.333333333333332% }
    .col-md-offset-12 { margin-left: 100% }
    .col-md-offset-11 { margin-left: 91.66666666666666% }
    .col-md-offset-10 { margin-left: 83.33333333333334% }
    .col-md-offset-9 { margin-left: 75% }
    .col-md-offset-8 { margin-left: 66.66666666666666% }
    .col-md-offset-7 { margin-left: 58.333333333333336% }
    .col-md-offset-6 { margin-left: 50% }
    .col-md-offset-5 { margin-left: 41.66666666666667% }
    .col-md-offset-4 { margin-left: 33.33333333333333% }
    .col-md-offset-3 { margin-left: 25% }
    .col-md-offset-2 { margin-left: 16.666666666666664% }
    .col-md-offset-1 { margin-left: 8.333333333333332% }
    .col-md-offset-0 { margin-left: 0 }
}


/* ユーティリティー
------------------------------------------------------------*/
/**** clearfix ****/
.clearfix:after {content: "."; display: block; height: 0; line-height: 0; clear: both; visibility: hidden;}
.clearfix { display: inline-block; }
*+html .clearfix { height: 1%; }
* html .clearfix { height: 1%; }
.clearfix {display: block;}

/**** font size ****/
.font70 {font-size: 79%;}
.font85 {font-size: 86%;}
.font92 {font-size: 93%;}
.font110 {font-size: 108%;}
.font120 {font-size: 115%;}
.font135 {font-size: 136%;}
.font150 {font-size: 150%;}
.font180 {font-size: 179%;}
.font210 {font-size: 200%;}
.font240 {font-size: 250%;}
.font300 {font-size: 300%;}
.font330 {font-size: 330%;}
.font360 {font-size: 350%;}
.font400 {font-size: 400%;}
.font500 {font-size: 500%;}

/**** font weight ****/
.bold {font-weight: bold}
.normal {font-weight: normal}

/**** font color****/
.font-red {color: #d8002b}
.font-pink {color: #e16871}
.font-orange {color: #ffc114}
.font-purple {color: #7c0060}
.font-blue {color: #007ac6}
.font-blue2 {color: #70b7b7}
.font-sky {color: #b0e0e1}
.font-tya {color: #706651}
.font-green {color: #009966}
.font-mosgreen {color: #00a84c}
.font-green2 {color: #009966}
.font-green3 {color: #b5dbc1}
.font-yellow {color: #ffeb00}
.font-gray {color: #999}
.font-gray2 {color: #bbb}
.font-gray3 {color: #ddd}
.font-gray6 {color: #666}
.font-black {color: #111}
.font-white {color: #fff}

/**** align ****/
.a_center {text-align: center; margin-left: auto; margin-right: auto;}
.a_left {text-align: left;}
.a_right {text-align: right;}

/**** valign ****/
.v_top {vertical-align: top}
.v_middle {vertical-align: middle}
.v_bottom {vertical-align: bottom}

/**** float ****/
.fl_l {float: left;}
.fl_r {float: right;}
.fl_clear {clear: both;}

/**** border ****/
.border-top {border-top: 1px solid #eee;}
.border-bottom {border-bottom: 1px solid #eee;}
.border-left {border-left: 1px solid #eee;}
.border-right {border-right: 1px solid #eee;}

/**** width ****/
.w5 {width: 5%;}
.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%;}
.w70 {width: 70%;}
.w75 {width: 75%;}
.w80 {width: 80%;}
.w85 {width: 85%;}
.w90 {width: 90%;}
.w95 {width: 95%;}
.w100 {width: 100%;}

/**** margin ****/
/* 全体 */
.mg5 {margin: 5px;}
.mg10 {margin: 10px;}
.mg15 {margin: 15px;}
.mg20 {margin: 20px;}
.mg30 {margin: 30px;}
/* 上下 */
.mgtb5 {margin-top: 5px; margin-bottom: 5px;}
.mgtb10 {margin-top: 10px; margin-bottom: 10px;}
.mgtb15 {margin-top: 15px; margin-bottom: 15px;}
.mgtb20 {margin-top: 20px; margin-bottom: 20px;}
.mgtb30 {margin-top: 30px; margin-bottom: 30px;}
.mgtb40 {margin-top: 40px; margin-bottom: 40px;}
/* 上 */
.mgt5 {margin-top: 5px;}
.mgt10 {margin-top: 10px;}
.mgt15 {margin-top: 15px;}
.mgt20 {margin-top: 20px;}
.mgt30 {margin-top: 30px;}
.mgt40 {margin-top: 40px;}
.mgt50 {margin-top: 50px;}
.mgt60 {margin-top: 60px;}
.mgt70 {margin-top: 70px;}
/* 下 */
.mgb5 {margin-bottom: 5px;}
.mgb10 {margin-bottom: 10px;}
.mgb15 {margin-bottom: 15px;}
.mgb20 {margin-bottom: 20px;}
.mgb30 {margin-bottom: 30px;}
.mgb40 {margin-bottom: 40px;}
.mgb50 {margin-bottom: 50px;}
.mgb60 {margin-bottom: 60px;}
.mgb70 {margin-bottom: 70px;}
/* 左 */
.mgl5 {margin-left: 5px;}
.mgl10 {margin-left: 10px;}
.mgl15 {margin-left: 15px;}
.mgl20 {margin-left: 20px;}
.mgl30 {margin-left: 30px;}
.mgl40 {margin-left: 40px;}
.mgl50 {margin-left: 50px;}
.mgl70 {margin-left: 70px;}
/* 右 */
.mgr5 {margin-right: 5px;}
.mgr8 {margin-right: 8px;}
.mgr10 {margin-right: 10px;}
.mgr15 {margin-right: 15px;}
.mgr20 {margin-right: 20px;}
.mgr30 {margin-right: 30px;}
.mgr40 {margin-right: 40px;}
.mgr50 {margin-right: 50px;}
.mgr70 {margin-right: 70px;}

/**** padding ****/
/* 全体 */
.pd3 {padding: 3px;}
.pd5 {padding: 5px;}
.pd10 {padding: 10px;}
.pd15 {padding: 15px;}
.pd20 {padding: 20px;}
.pd30 {padding: 30px;}
.pd40 {padding: 40px;}
/* 上下 */
.pdtb5 {padding-top: 5px; padding-bottom: 5px;}
.pdtb10 {padding-top: 10px; padding-bottom: 10px;}
.pdtb15 {padding-top: 15px; padding-bottom: 15px;}
.pdtb20 {padding-top: 20px; padding-bottom: 20px;}
.pdtb30 {padding-top: 30px; padding-bottom: 30px;}
.pdtb40 {padding-top: 40px; padding-bottom: 40px;}
.pdtb60 {padding-top: 60px; padding-bottom: 60px;}
.pdtb100 {padding-top: 100px; padding-bottom: 100px;}
/* 上 */
.pdt3 {padding-top: 3px;}
.pdt5 {padding-top: 5px;}
.pdt10 {padding-top: 10px;}
.pdt15 {padding-top: 15px;}
.pdt20 {padding-top: 20px;}
.pdt30 {padding-top: 30px;}
.pdt40 {padding-top: 40px;}
/* 下 */
.pdb5 {padding-bottom: 5px;}
.pdb10 {padding-bottom: 10px;}
.pdb15 {padding-bottom: 15px;}
.pdb20 {padding-bottom: 20px;}
.pdb30 {padding-bottom: 30px;}
.pdb40 {padding-bottom: 40px;}
.pdb50 {padding-bottom: 50px;}
.pdb60 {padding-bottom: 60px;}
.pdb70 {padding-bottom: 70px;}
/* 左右 */
.pdlr5 {padding-left: 5px; padding-right: 5px;}
.pdlr10 {padding-left: 10px; padding-right: 10px;}
.pdlr15 {padding-left: 15px; padding-right: 15px;}
.pdlr20 {padding-left: 20px; padding-right: 20px;}
.pdlr25 {padding-left: 25px; padding-right: 25px;}
.pdlr30 {padding-left: 30px; padding-right: 30px;}
.pdlr40 {padding-left: 40px; padding-right: 40px;}
/* 左 */
.pdl5 {padding-left: 5px;}
.pdl10 {padding-left: 10px;}
.pdl15 {padding-left: 15px;}
.pdl20 {padding-left: 20px;}
.pdl30 {padding-left: 30px;}
/* 右 */
.pdr5 {padding-right: 5px;}
.pdr10 {padding-right: 10px;}
.pdr15 {padding-right: 15px;}
.pdr20 {padding-right: 20px;}
.pdr30 {padding-right: 30px;}