@charset "utf-8";

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* ボックス関連
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* @ フロート操作
----------------------------------------------------------------------------- */
.clearfix:before,
.clearfix:after{
  content: " ";
  display: table;
}
.clearfix:after{
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.clear { clear: both !important; }
.floatL, .alignleft { float: left !important; }
.floatR, .alignright { float: right !important; }

/* @ マージン指定
----------------------------------------------------------------------------- */
.mgn_none { margin: 0 !important; }
.mgnT_none { margin-top: 0 !important; }
.mgnR_none { margin-right: 0 !important; }
.mgnB_none { margin-bottom: 0 !important; }
.mgnL_none { margin-left: 0 !important; }
.mgn_S { margin: 1em !important; }
.mgnT_S { margin-top: 1em !important; }
.mgnR_S { margin-right: 1em !important; }
.mgnB_S { margin-bottom: 1em !important; }
.mgnL_S { margin-left: 1em !important; }
.mgn_M { margin: 2em !important; }
.mgnT_M { margin-top: 2em !important; }
.mgnR_M { margin-right: 2em !important; }
.mgnB_M { margin-bottom: 2em !important; }
.mgnL_M { margin-left: 2em !important; }
.mgn_L { margin: 3em !important; }
.mgnT_L { margin-top: 3em !important; }
.mgnR_L { margin-right: 3em !important; }
.mgnB_L { margin-bottom: 3em !important; }
.mgnL_L { margin-left: 3em !important; }

/* @ パディング指定
----------------------------------------------------------------------------- */
.pad_none { padding: 0 !important; }
.padT_none { padding-top: 0 !important; }
.padR_none { padding-right: 0 !important; }
.padB_none { padding-bottom: 0 !important; }
.padL_none { padding-left: 0 !important; }
.pad_S { padding: 1em !important; }
.padT_S { padding-top: 1em !important; }
.padR_S { padding-right: 1em !important; }
.padB_S { padding-bottom: 1em !important; }
.padL_S { padding-left: 1em !important; }
.pad_M { padding: 2em !important; }
.padT_M { padding-top: 2em !important; }
.padR_M { padding-right: 2em !important; }
.padB_M { padding-bottom: 2em !important; }
.padL_M { padding-left: 2em !important; }
.pad_L { padding: 3em !important; }
.padT_L { padding-top: 3em !important; }
.padR_L { padding-right: 3em !important; }
.padB_L { padding-bottom: 3em !important; }
.padL_L { padding-left: 3em !important; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* テキスト関連
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* @ 文字装飾除去
----------------------------------------------------------------------------- */
.cleanfont {
  font-weight: normal;
  font-style: normal;
}

/* @ 明朝体指定
----------------------------------------------------------------------------- */
.serif {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho Pro", "MS PMincho", serif;
}


/* @ 改行禁止
----------------------------------------------------------------------------- */
.nowrap { white-space: nowrap !important; }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* リスト関連
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* @ リストなし
----------------------------------------------------------------------------- */
.list_none li,
li.list_none {
  list-style: none outside !important;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* テーブル関連
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* @ 枠なし
----------------------------------------------------------------------------- */
table.table_none,
table.table_none th,
table.table_none td {
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* @ 標準
----------------------------------------------------------------------------- */
table.table_default {
  background-color: #ccc;
  border-spacing: 1px;
  border-collapse: separate;
  border: none;
  width: 100%;
  max-width: 100%;
}
@media screen and (max-width: 500px) {
  table.table_default,
  table.table_default tbody,
  table.table_default tr {
    display: block;
    background: #fff;
    height: auto !important;
  }
}
table.table_default th,
table.table_default td {
  border: 1px solid #fff;
  padding: 1em;
  text-align: left;
}
@media screen and (max-width: 500px) {
  table.table_default th,
  table.table_default td {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    height: auto !important;
    text-align: left !important;
  }
}
table.table_default th {
  background-color: #f6f6f6;
  white-space: nowrap;
}
table.table_default td {
  background-color: #fff;
}

/* @ 交差
----------------------------------------------------------------------------- */
table.table_stripe {
  width: 100%;
  max-width: 100%;
}
@media screen and (max-width: 500px) {
  table.table_stripe,
  table.table_stripe tbody,
  table.table_stripe tr {
    display: block;
    background: #fff;
  }
}
table.table_stripe thead th {
  background: #ddd !important;
}
table.table_stripe th,
table.table_stripe td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}
@media screen and (max-width: 500px) {
  table.table_stripe th,
  table.table_stripe td {
    display: block;
    border: none;
  }
  table.table_stripe th {
    background: #eee !important;
  }
  table.table_stripe td {
    background: #fff !important;
  }
}
table.table_stripe th {
  font-weight: bold;
  white-space: nowrap;
}
table.table_stripe tr:nth-of-type(even) th,
table.table_stripe tr:nth-of-type(even) td {
  background: #fff;
}
table.table_stripe tr:nth-of-type(odd) th,
table.table_stripe tr:nth-of-type(odd) td {
  background: #eee;
}

/* @ 横型
----------------------------------------------------------------------------- */
table.table_horizon {
  width: 100%;
  max-width: 100%;
}
@media screen and (max-width: 640px) {
  table.table_horizon {
    display: block;
    position: relative;
  }
  table.table_horizon:before {
    content: '※ この表は横方向にスクロール可能です。';
    display: block;
    margin-bottom: 0.5em;
    color: #999;
  }
  table.table_horizon thead {
    display: block;
    float: left;
  }
  table.table_horizon thead tr {
    display: block;
    border-bottom: 1px solid #ccc;
  }
  table.table_horizon tbody {
    display: block;
    position: relative;
    overflow-x: auto;
  }
  table.table_horizon tbody tr {
    display: table-cell;
    margin: 0;
    border-bottom: 1px solid #ccc;
  }
}
table.table_horizon thead th {
  background-color: #eee;
}
@media screen and (max-width: 640px) {
  table.table_horizon thead th {
    border-left: 1px solid #ccc;
  }
}
table.table_horizon th,
table.table_horizon td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}
@media screen and (max-width: 640px) {
  table.table_horizon th,
  table.table_horizon td {
    display: block;
    border-left: 0;
    border-bottom: 0;
    white-space: nowrap;
  }
}

/* @ 横スクロール
----------------------------------------------------------------------------- */
table.table_horizon-b {
  width: 100%;
  max-width: 100%;
}
@media screen and (max-width: 640px) {
  table.table_horizon-b {
    display: block;
    position: relative;
  }
  table.table_horizon-b:before {
    content: '※ この表は横方向にスクロール可能です。';
    display: block;
    margin-bottom: 0.5em;
    color: #999;
  }
  table.table_horizon-b tbody {
    position: relative;
    display: block;
    overflow-x: auto;
  }
  table.table_horizon-b tbody tr {
    margin: 0;
    border-bottom: 1px solid #ccc;
  }
}
table.table_horizon-b th {
  background-color: #f6f6f6;
}
@media screen and (max-width: 640px) {
  table.table_horizon-b tr > th:first-of-type {
    border-left: 1px solid #ccc;
  }
}
table.table_horizon-b th,
table.table_horizon-b td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}
@media screen and (max-width: 640px) {
  table.table_horizon-b th,
  table.table_horizon-b td {
    width: 100% !important;
    height: auto !important;
    border-left: 0;
    border-bottom: 0;
    white-space: nowrap;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
* その他
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.disp_none {
  display: none;
}

/* @ 透過処理
----------------------------------------------------------------------------- */
.alpha:hover {
  -ms-filter: "alpha(opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
  text-decoration: none;
}