@charset "utf-8";
/* ========================
layout
======================== */
/* structure */
/* common
------------------------ */
.wrapper {
  height: 100%;
  position: relative;
}

/* ------------------------
header
------------------------ */
header {
}

/* ------------------------
main 
------------------------ */
main {
}

/* ------------------------
footer 
------------------------ */
footer {
}

/* layout */
/* ------------------------
grid
------------------------ */
.grid-1 {
  clear: both;
  width: 100%;
}

.grid-2 {
  width: 50%;
}

.grid-3-1 {
  width: 34%;
}

.grid-3-2 {
  width: 66%;
}

.grid-3 {
  width: 33.33333%;
  width: calc(100% / 3);
}

_:-ms-lang(x)::-ms-backdrop, .grid-3 {
  width: 33%;/* ie11 */
}

_:-ms-lang(x)::backdrop, .grid-3 {
  width: 33%;/* edge */
}

.grid-4 {
  width: 25%;
}

.grid-5 {
  width: 20%;
}

.grid-6 {
  width: 16.66666%;
  width: calc(100% / 6);
}

_:-ms-lang(x)::-ms-backdrop, .grid-6 {
  width: 16%;/* ie11 */
}

_:-ms-lang(x)::backdrop, .grid-6 {
  width: 16%;/* edge */
}

.grid-7 {
  width: 14.28571%;
  width: calc(100% / 7);
}

_:-ms-lang(x)::-ms-backdrop, .grid-7 {
  width: 14%;/* ie11 */
}

_:-ms-lang(x)::backdrop, .grid-7 {
  width: 14%;/* edge */
}

.grid-8 {
  width: 12.5%;
}

.grid-9 {
  width: 11.11111%;
  width: calc(100% / 9);
}

_:-ms-lang(x)::-ms-backdrop, .grid-9 {
  width: 11%;/* ie11 */
}

_:-ms-lang(x)::backdrop, .grid-9 {
  width: 11%;/* edge */
}

.grid-10 {
  width: 10%;
}

.grid-12 {
  width: 8.33333%;
  width: calc(100% / 12);
}

_:-ms-lang(x)::-ms-backdrop, .grid-12 {
  width: 8.3%;/* ie11 */
}

_:-ms-lang(x)::backdrop, .grid-12 {
  width: 8.3%;/* edge */
}

/* box-wrap
------------------------ */
.box-wrap .grid-2,
.box-wrap .grid-3,
.box-wrap .grid-3-1,
.box-wrap .grid-3-2,
.box-wrap .grid-4,
.box-wrap .grid-5,
.box-wrap .grid-6,
.box-wrap .grid-7,
.box-wrap .grid-8,
.box-wrap .grid-9,
.box-wrap .grid-10 {
  float: left;
}

/* ------------------------
column
------------------------ */
.col-2 > *,
.col-2 .box {
  width: 50%;
}

.col-3 > *,
.col-3 .box {
  width: 33.33333%;
  width: calc(100% / 3);
}

_:-ms-lang(x)::-ms-backdrop, .col-3 > * {
  width: 33%;/* ie11 */
}

_:-ms-lang(x)::backdrop, .col-3 > * {
  width: 33%;/* edge */
}

.col-4 > *,
.col-4 .box {
  width: 25%;
}

.col-5 > *,
.col-5 .box {
  width: 20%;
}

.col-6 > *,
.col-6 .box {
  width: 16.66666%;
  width: calc(100% / 6);
}

_:-ms-lang(x)::-ms-backdrop, .col-6 > * {
  width: 16%;/* ie11 */
}

_:-ms-lang(x)::backdrop, .col-6 > * {
  width: 16%;/* edge */
}