@charset "utf-8";

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

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

.alignleft { float: left; }
.alignright { float: right; }
.aligncenter {
  display: block;
  margin: auto;
}

/* @ マージン指定
----------------------------------------------------------------------------- */
.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; }

/* @ 画像の回り込み（float）対応
----------------------------------------------------------------------------- */
img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
img.floatR,
img.alignright {
  margin: 0 0 2em 2em;
  display: inline;
}
img.floatL,
img.alignleft {
  margin: 0 2em 2em 0;
  display: inline;
}
@media only screen and (max-width: 640px) {
  img.floatR,
  img.alignright {
    float: none;
    display: block;
    margin: 0 auto 1em !important;
  }
  img.floatL,
  img.alignleft {
    float: none;
    display: block;
    margin: 0 auto 1em !important;
  }
  .alignright {
    float: none;
  }
  .alignleft {
    float: none;
  }
}



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

/* @ 文字装飾除去
----------------------------------------------------------------------------- */
.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;
  background-color: transparent;
  padding: 0;
}
@media only screen and (max-width: 640px) {
  table.table_none th,
  table.table_none td {
    width: 100% !important;
    display: block;
  }
}

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

/* @ 交差
----------------------------------------------------------------------------- */
table.table_stripe {
  width: 100% !important;
  max-width: 100%;
  border-collapse: collapse;
}
@media screen and (max-width: 480px) {
  table.table_stripe,
  table.table_stripe tbody,
  table.table_stripe tr {
    display: block;
    background: #fff;
    height: 100% !important;
  }
}
table.table_stripe thead th {
  background: #ddd !important;
}
table.table_stripe th,
table.table_stripe td {
  padding: 15px;
  text-align: left;
  box-sizing: border-box;
  border-bottom: 2px solid #fff;
  vertical-align: top;
}
@media screen and (max-width: 480px) {
  table.table_stripe th,
  table.table_stripe td {
    display: block;
    border: none;
    width: 100% !important;
    height: 100% !important;
  }
  table.table_stripe th {
    background: #ebfaff !important;
  }
  table.table_stripe td {
    background: #fff !important;
  }
}
table.table_stripe th {
  font-weight: 500;
  white-space: nowrap;
  -webkit-font-smoothing: initial;
  -moz-osx-font-smoothing: initial;
}
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: #ebfaff;
}

/* @ 横型
----------------------------------------------------------------------------- */
table.table_horizon {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background: #fff;
}
@media screen and (max-width: 480px) {
  table.table_horizon {
    font-size: 0.813rem;
  }
}
/*
@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 th {
  background-color: #0a225e;
  color: #fff;
}
/*
@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;
  }
}
*/

/* @ 枠線
----------------------------------------------------------------------------- */
.border_thin {
  padding: 1em;
  border: solid 1px #ccc;
}
.border_normal {
  padding: 1em;
  border: solid 3px #ccc;
}
.border_thick {
  padding: 1em;
  border: solid 5px #ccc;
}
.border_thin.red,
.border_normal.red,
.border_thick.red {
  border-color: #f00;
}
.border_double {
  padding: 1em;
  border: 3px double #06F;
}

/* @ リンクボタン
----------------------------------------------------------------------------- */
.linkbtn_S {
  display: inline-block;
  background-color: #999;
  padding: .5em 1em;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}
.linkbtn_M {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px 20px;
  background-color: #999;
  border: none;
  border-radius: 5px;
  color: #FFF;
  font-size: 1rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}
.linkbtn_L {
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 215px;
  padding: 18px 2em;
  border: none;
  outline: none;
  background-color: #ff9b06;
  border-radius: 4px;
  color: #fff;
  font-size: 1.125rem;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}
.linkbtn_S:hover,
.linkbtn_M:hover,
.linkbtn_L:hover {
  -ms-filter: "alpha(opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
  color: #fff;
  text-decoration: none;
}


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

.disp_none {
  display: none;
}

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

/* @ テーブル幅
----------------------------------------------------------------------------- */
.w10 {
  width: 10% !important;
}
.w20 {
  width: 20% !important;
}
.w30 {
  width: 30% !important;
}
.w40 {
  width: 40% !important;
}
.w50 {
  width: 50% !important;
}
.w60 {
  width: 60% !important;
}
.w70 {
  width: 70% !important;
}
.w80 {
  width: 80% !important;
}
.w90 {
  width: 90% !important;
}

/* @ テーブル幅
----------------------------------------------------------------------------- */
.links-buy {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px;
  margin: 0;
  background: #6eb8b3;
  list-style: none;
}
.links-buy li {
  margin-right: 20px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media screen and (min-width: 769px) {
  .links-buy li {
    width: calc(((100% - 20px * 3) / 4) - 0.1px);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .links-buy li:nth-of-type(4n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .links-buy li {
    width: calc(((100% - 20px) / 2) - 0.1px);
    margin-bottom: 20px !important;
  }
  .links-buy li:nth-of-type(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 480px) {
  .links-buy li {
    width: 100%;
    margin-bottom: 20px !important;
    margin-right: 0;
  }
  .links-buy li:last-of-type {
    margin-bottom: 0 !important;
  }
}
.links-buy li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border: 2px solid #fff;
  background: #fff;
  font-size: 1rem;
  text-decoration: none;
  color: #6eb8b3;
  transition: all 0.3s;
}
@media screen and (max-width: 480px) {
  .links-buy li a {
    justify-content: flex-start;
  }
}
.links-buy li a::before {
  display: inline-block;
  content: '＞';
  margin-right: 5px;
}
.links-buy li a:hover {
  background: #6eb8b3;
  color: #fff;
}