@charset "UTF-8";
/* ================================================================
    
	init
	
================================================================ */
/* ================================
	color
================================ */
/* ================================
    @mixin text-hidden
================================ */
/* ================================
    brakpoint
    @mixin media-query
================================ */
/* ================================================================
    
	layout
    大まかなレイアウトとグリッド

================================================================ */
/* ================================
    width	
================================ */
.container {
  width: 100%;
  position: relative;
  z-index: 1;
}

.container > .inner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.container > .inner.full {
  max-width: 100%;
  padding: 0;
}

.page {
  overflow: hidden;
}

article > * + * {
  margin-top: 2em;
}

/* ================================
	grid
================================ */
/*
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.grid.gutters{ grid-gap: 10px }

.sm-gr1 { grid-column: span 1 }
.sm-gr2 { grid-column: span 2 }
.sm-gr3 { grid-column: span 3 }
.sm-gr4 { grid-column: span 4 }
.sm-gr5 { grid-column: span 5 }
.sm-gr6 { grid-column: span 6 }
.sm-gr7 { grid-column: span 7 }
.sm-gr8 { grid-column: span 8 }
.sm-gr9 { grid-column: span 9 }
.sm-gr10 { grid-column: span 10 }
.sm-gr11 { grid-column: span 11 }
.sm-gr12 { grid-column: span 12 }

@media ( min-width : 481px ) {
.md-gr1 { grid-column: span 1 }
.md-gr2 { grid-column: span 2 }
.md-gr3 { grid-column: span 3 }
.md-gr4 { grid-column: span 4 }
.md-gr5 { grid-column: span 5 }
.md-gr6 { grid-column: span 6 }
.md-gr7 { grid-column: span 7 }
.md-gr8 { grid-column: span 8 }
.md-gr9 { grid-column: span 9 }
.md-gr10 { grid-column: span 10 }
.md-gr11 { grid-column: span 11 }
.md-gr12 { grid-column: span 12 }
}

@media ( min-width : 768px ) {
.lg-gr1 { grid-column: span 1 }
.lg-gr2 { grid-column: span 2 }
.lg-gr3 { grid-column: span 3 }
.lg-gr4 { grid-column: span 4 }
.lg-gr5 { grid-column: span 5 }
.lg-gr6 { grid-column: span 6 }
.lg-gr7 { grid-column: span 7 }
.lg-gr8 { grid-column: span 8 }
.lg-gr9 { grid-column: span 9 }
.lg-gr10 { grid-column: span 10 }
.lg-gr11 { grid-column: span 11 }
.lg-gr12 { grid-column: span 12 }
}
*/
/* ================================
	grid
================================ */
.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.grid.gutters {
  margin-left: -3.48624%;
}

.grid.gutters > .col {
  margin-left: 3.48624%;
}

.col {
  margin-bottom: calc( 3.48624% / 1.618);
}

.sm-gr1 {
  width: 8.33333%;
}

.sm-gr2 {
  width: calc( 8.33333% * 2);
}

.sm-gr3 {
  width: calc( 8.33333% * 3);
}

.sm-gr4 {
  width: calc( 8.33333% * 4);
}

.sm-gr5 {
  width: calc( 8.33333% * 5);
}

.sm-gr6 {
  width: calc( 8.33333% * 6);
}

.sm-gr7 {
  width: calc( 8.33333% * 7);
}

.sm-gr8 {
  width: calc( 8.33333% * 8);
}

.sm-gr9 {
  width: calc( 8.33333% * 9);
}

.sm-gr10 {
  width: calc( 8.33333% * 10);
}

.sm-gr11 {
  width: calc( 8.33333% * 11);
}

.sm-gr12 {
  width: 100%;
}

.grid.gutters > .sm-gr1 {
  width: calc( 8.33333% - 3.48624%);
}

.grid.gutters > .sm-gr2 {
  width: calc( 8.33333% * 2 - 3.48624%);
}

.grid.gutters > .sm-gr3 {
  width: calc( 8.33333% * 3 - 3.48624%);
}

.grid.gutters > .sm-gr4 {
  width: calc( 8.33333% * 4 - 3.48624%);
}

.grid.gutters > .sm-gr5 {
  width: calc( 8.33333% * 5 - 3.48624%);
}

.grid.gutters > .sm-gr6 {
  width: calc( 8.33333% * 6 - 3.48624%);
}

.grid.gutters > .sm-gr7 {
  width: calc( 8.33333% * 7 - 3.48624%);
}

.grid.gutters > .sm-gr8 {
  width: calc( 8.33333% * 8 - 3.48624%);
}

.grid.gutters > .sm-gr9 {
  width: calc( 8.33333% * 9 - 3.48624%);
}

.grid.gutters > .sm-gr10 {
  width: calc( 8.33333% * 10 - 3.48624%);
}

.grid.gutters > .sm-gr11 {
  width: calc( 8.33333% * 11 - 3.48624%);
}

.grid.gutters > .sm-gr12 {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .md-gr1 {
    width: 8.33333%;
  }
  .md-gr2 {
    width: calc( 8.33333% * 2);
  }
  .md-gr3 {
    width: calc( 8.33333% * 3);
  }
  .md-gr4 {
    width: calc( 8.33333% * 4);
  }
  .md-gr5 {
    width: calc( 8.33333% * 5);
  }
  .md-gr6 {
    width: calc( 8.33333% * 6);
  }
  .md-gr7 {
    width: calc( 8.33333% * 7);
  }
  .md-gr8 {
    width: calc( 8.33333% * 8);
  }
  .md-gr9 {
    width: calc( 8.33333% * 9);
  }
  .md-gr10 {
    width: calc( 8.33333% * 10);
  }
  .md-gr11 {
    width: calc( 8.33333% * 11);
  }
  .md-gr12 {
    width: 100%;
  }
  .grid.gutters > .md-gr1 {
    width: calc( 8.33333% - 3.48624%);
  }
  .grid.gutters > .md-gr2 {
    width: calc( 8.33333% * 2 - 3.48624%);
  }
  .grid.gutters > .md-gr3 {
    width: calc( 8.33333% * 3 - 3.48624%);
  }
  .grid.gutters > .md-gr4 {
    width: calc( 8.33333% * 4 - 3.48624%);
  }
  .grid.gutters > .md-gr5 {
    width: calc( 8.33333% * 5 - 3.48624%);
  }
  .grid.gutters > .md-gr6 {
    width: calc( 8.33333% * 6 - 3.48624%);
  }
  .grid.gutters > .md-gr7 {
    width: calc( 8.33333% * 7 - 3.48624%);
  }
  .grid.gutters > .md-gr8 {
    width: calc( 8.33333% * 8 - 3.48624%);
  }
  .grid.gutters > .md-gr9 {
    width: calc( 8.33333% * 9 - 3.48624%);
  }
  .grid.gutters > .md-gr10 {
    width: calc( 8.33333% * 10 - 3.48624%);
  }
  .grid.gutters > .md-gr11 {
    width: calc( 8.33333% * 11 - 3.48624%);
  }
  .grid.gutters > .md-gr12 {
    width: 100%;
  }
}

@media screen and (min-width: 960px) {
  .lg-gr1 {
    width: 8.33333%;
  }
  .lg-gr2 {
    width: calc( 8.33333% * 2);
  }
  .lg-gr3 {
    width: calc( 8.33333% * 3);
  }
  .lg-gr4 {
    width: calc( 8.33333% * 4);
  }
  .lg-gr5 {
    width: calc( 8.33333% * 5);
  }
  .lg-gr6 {
    width: calc( 8.33333% * 6);
  }
  .lg-gr7 {
    width: calc( 8.33333% * 7);
  }
  .lg-gr8 {
    width: calc( 8.33333% * 8);
  }
  .lg-gr9 {
    width: calc( 8.33333% * 9);
  }
  .lg-gr10 {
    width: calc( 8.33333% * 10);
  }
  .lg-gr11 {
    width: calc( 8.33333% * 11);
  }
  .lg-gr12 {
    width: 100%;
  }
  .grid.gutters > .lg-gr1 {
    width: calc( 8.33333% - 3.48624%);
  }
  .grid.gutters > .lg-gr2 {
    width: calc( 8.33333% * 2 - 3.48624%);
  }
  .grid.gutters > .lg-gr3 {
    width: calc( 8.33333% * 3 - 3.48624%);
  }
  .grid.gutters > .lg-gr4 {
    width: calc( 8.33333% * 4 - 3.48624%);
  }
  .grid.gutters > .lg-gr5 {
    width: calc( 8.33333% * 5 - 3.48624%);
  }
  .grid.gutters > .lg-gr6 {
    width: calc( 8.33333% * 6 - 3.48624%);
  }
  .grid.gutters > .lg-gr7 {
    width: calc( 8.33333% * 7 - 3.48624%);
  }
  .grid.gutters > .lg-gr8 {
    width: calc( 8.33333% * 8 - 3.48624%);
  }
  .grid.gutters > .lg-gr9 {
    width: calc( 8.33333% * 9 - 3.48624%);
  }
  .grid.gutters > .lg-gr10 {
    width: calc( 8.33333% * 10 - 3.48624%);
  }
  .grid.gutters > .lg-gr11 {
    width: calc( 8.33333% * 11 - 3.48624%);
  }
  .grid.gutters > .lg-gr12 {
    width: 100%;
  }
}
/*# sourceMappingURL=layout.css.map */