@charset "utf-8";
/*===========================================================
＊ BASIC SETTING
===========================================================*/

html, body {
  font-size: 14px;
  height: 100%;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
}

body {
  color: #000000;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.8;
  vertical-align: baseline;
  background: transparent;
}

h1, h2, h3, h4, h5, h6{
  line-height: 1.4;
}

table th{
  font-weight:normal;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/*  image
--------------------------------------*/

img {
  margin: 0px;
  padding: 0px;
  border: none;
  vertical-align: bottom;
  /*IEの下スペ回避*/
  -webkit-touch-callout: none;
  max-width:100%;
  height:auto;
}

a img {
  border: 0px;
}

/*  link
--------------------------------------*/
a {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  color: #000000;
  text-decoration: none;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

/*  ロールオーバー時、透過で使用
-------------------------------------*/
.toimg a:hover img {
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}

/*  list
--------------------------------------*/

ul {
  list-style-type: none;
}

/*	クリアフィックス - CLEAR FIX -
--------------------------------------*/
.cf:before,
.cf:after { content:""; display:table;}
.cf:after { clear:both;}
.cf { zoom:1;}


.centerpos {
  text-align: center;
}

.col-xl-five-1, .col-lg-five-1, .col-md-five-1, .col-sm-five-1, .col-xs-five-1,
.col-xl-five-2, .col-lg-five-2, .col-md-five-2, .col-sm-five-2, .col-xs-five-2,
.col-xl-five-3, .col-lg-five-3, .col-md-five-3, .col-sm-five-3, .col-xs-five-3,
.col-xl-five-4, .col-lg-five-4, .col-md-five-4, .col-sm-five-4, .col-xs-five-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-xs-five-1 {
  width: 20%;
  flex: 0 0 20%;
  float: left;
}
.col-xs-five-2 {
  width: 40%;
  flex: 0 0 40%;
  float: left;
}
.col-xs-five-3 {
  width: 60%;
  flex: 0 0 60%;
  float: left;
}
.col-xs-five-4 {
  width: 80%;
  flex: 0 0 80%;
  float: left;
}

@media (min-width: 576px) {
  .col-sm-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
  .col-sm-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
  }
  .col-sm-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
  }
  .col-sm-five-4 {
    width: 80%;
    flex: 0 0 80%;
    float: left;
  }
}

@media (min-width: 768px) {
  .col-md-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
  .col-md-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
  }
  .col-md-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
  }
  .col-md-five-4 {
    width: 80%;
    flex: 0 0 80%;
    float: left;
  }
  .col-md-offset-five-1 {
    margin-left: 4.3333333%;
  }
}

@media (min-width: 992px) {
  .col-lg-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
  .col-lg-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
  }
  .col-lg-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
  }
  .col-lg-five-4 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
}

@media (min-width: 1200px) {
  .col-xl-five-1 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
  .col-xl-five-2 {
    width: 40%;
    flex: 0 0 40%;
    float: left;
  }
  .col-xl-five-3 {
    width: 60%;
    flex: 0 0 60%;
    float: left;
  }
  .col-xl-five-4 {
    width: 20%;
    flex: 0 0 20%;
    float: left;
  }
}