/* clearfix */
.clearfix {
  *zoom: 1;
}
.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

.container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

[class*='col-'] {
  float: left;
  display: inline-block;
}

.col-full {
  width: 100%;
}

.col-1-2 {
  width: 50%;
}

.col-1-3 {
  width: 33.33%;
}

.col-2-3 {
  width: 66.66%;
}

.col-1-4 {
  width: 25%;
}

.col-2-4 {
  width: 50%;
}

.col-3-4 {
  width: 75%;
}

.col-1-5 {
  width: 20%;
}

.col-2-5 {
  width: 40%;
}

.col-3-5 {
  width: 60%;
}

.col-4-5 {
  width: 80%;
}

.col-1-6 {
  width: 16.66%;
}

.col-2-6 {
  width: 33.33%;
}

.col-3-6 {
  width: 50%;
}

.col-4-6 {
  width: 66.66%;
}

.col-5-6 {
  width: 83.33%;
}

/*----------------------------------------------------
	pc >= 960
----------------------------------------------------*/
/*----------------------------------------------------
	tablet < 960
----------------------------------------------------*/
@media (min-width: 768px) and (max-width: 999px) {
  .container {
    width: 100%;
  }

  .col-1-3, .col-2-3 {
    width: 100%;
  }

  .col-1-4 {
    width: 50%;
  }

  .col-1-6, .col-2-6, .col-3-6, .col-4-6, .col-5-6 {
    width: 100%;
  }
}
/*----------------------------------------------------
	phone < 768px
----------------------------------------------------*/
@media (max-width: 767px) {
  .container {
    width: 100%;
  }

  .col-1-2, .col-1-3, .col-2-3, .col-1-4, .col-2-4, .col-3-4, .col-1-5, .col-2-5, .col-3-5, .col-4-5, .col-1-6, .col-2-6, .col-3-6, .col-4-6, .col-5-6 {
    width: 100%;
  }
}