@charset "utf-8";
/* ========================
theme layout
======================== */
/* structure */
/* common
------------------------ */
.container {
  max-width: 960px;
}

.inner {
  margin: 0 auto;
}

/* ------------------------
header
------------------------ */
#header {
  height: 60px;
  position: fixed;
  width: 100%;
  z-index: 2;
}

#header::after {
  position: absolute;
  height: 2px;
  width: 100%;
}

#header .inner,
#header .container {
  height: 100%;
  max-width: 100%;
}

#header .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#header .inner::before,
#header .inner::after {
  display: none;
}

/* ------------------------
main 
------------------------ */
#main {
  margin: 0 auto;
}

.main .inner {
  padding: 80px 0;
  max-width: 1000px;
}

/* ------------------------
footer 
------------------------ */
footer {
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

/* layout */
/* ------------------------
grid
------------------------ */
.grid-2,
.grid-3,
.grid-3-1,
.grid-3-2,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10 {
  padding: 0 20px 0 20px;
}

/* ------------------------
column
------------------------ */
/* label column */
.col-auto label {
  width: auto;
}

.col-2 label {
  width: calc(50% - 20px);
}

.col-3 label {
  width: calc(100% / 3 - 20px);
}

.col-4 label {
  width: calc(25% - 20px);
}

.col-5 label {
  width: calc(20% - 20px);
}

.col-6 label {
  width: calc(100% / 6 - 20px);
}

.col-7 label {
  width: calc(100% / 7 - 20px);
}

.col-8 label {
  width: calc(100% / 8 - 20px);
}

.col-9 label {
  width: calc(100% / 9 - 20px);
}

.col-10 label {
  width: calc(10% - 20px);
}

.col-12 label {
  width: calc(100% / 12 - 20px);
}

.col-auto label {
  width: auto;
}

/* ------------------------
wrap
------------------------ */
/* box-wrap
------------------------ */
.box-wrap {
}

.box-wrap-n,
.box-wrap.col-n {
  margin: 0;
  padding: 0;
}

.box-wrap + .box,
.box-wrap + .grid-1 .box {
  margin-top: 0;
}

.box-wrap .grid-1 {
  padding: 0 20px 0 20px;
}

.box-wrap.col-n .box {
  margin: 0 0 40px 0;
}

.box-wrap + .box,
.box-wrap + .grid-1 .box {
  margin-top: 0;
}

.box-wrap .grid-1 {
  padding: 0 20px 0 20px;
}

.box-wrap.col-n .box {
  margin: 0 0 40px 0;
}

/* flex-wrap
------------------------ */
.flex-wrap,
.flex-wrap-around,
.flex-wrap-between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-wrap-around,
.flex-cnt-around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flex-wrap-between,
.flex-cnt-between {
  -ms-flex-line-pack: justify;
  justify-content: space-between;
}

.alternate .flex-wrap:nth-of-type(even) {
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flex-wrap + .flex-wrap {
  margin: 80px 0 0 0;
}

/* flex-col-box */
.flex-col-box {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  height: 100%;
  text-align: center;
  width: auto;
}

.flex-col-box .box,
.flex-dir-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* mod-form
------------------------ */
.mod-form .flex-wrap,
.mod-form-block .flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  justify-content: flex-start;
}