@charset "UTF-8";

/* ================================
大まかなレイアウト
================================ */
/* ----------------------
横幅指定とセンタリング
---------------------- */
.container{
    width:100%;
    position: relative;
}
.container > .inner {
    width: 100%;
    max-width:1200px;
    margin: 0 auto;
    padding: 3em 1em;
}
.container > .inner.full {
    max-width: 100%;
}
.page{
    overflow: hidden;
}

/* sp */
@media (min-width:481px){
    .container > .inner { padding: 5em 1.4em; }
}


/* ----------------------
配色とマージン
---------------------- */
body{
}

.page{
}

.globalHeader{
}
.globalHeader .inner{
}

.globalFooter{padding-top: 2em;
}
.globalFooter .inner{
}

.content{
}
.content .inner{
}


/* ================================
グリッド
================================ */
/*
.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{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;    
}
.grid.reverse{
    flex-direction: row-reverse;
}
.grid.float{
    display: block;
    overflow: hidden;
}
.grid.float > .col{ float: left;}

.col{
/*    margin-bottom: 1.4%;*/
}
.grid.gutters{ margin-left: -2%; }
.grid.gutters > .col{ margin-left: 2%; margin-bottom: 1.4%; }

.sm-gr1 { width: 8.333333%;  }
.sm-gr2 { width: calc( 8.333333% * 2); }
.sm-gr3 { width: calc( 8.333333% * 3); }
.sm-gr4 { width: calc( 8.333333% * 4); }
.sm-gr5 { width: calc( 8.333333% * 5); }
.sm-gr6 { width: calc( 8.333333% * 6); }
.sm-gr7 { width: calc( 8.333333% * 7); }
.sm-gr8 { width: calc( 8.333333% * 8); }
.sm-gr9 { width: calc( 8.333333% * 9); }
.sm-gr10 { width: calc( 8.333333% * 10); }
.sm-gr11 { width: calc( 8.333333% * 11); }
.sm-gr12 { width: 100%; }
.grid.gutters > .sm-gr1 { width: calc( 8.333333% - 2%);  }
.grid.gutters > .sm-gr2 { width: calc( 8.333333% * 2 - 2%); }
.grid.gutters > .sm-gr3 { width: calc( 8.333333% * 3 - 2%); }
.grid.gutters > .sm-gr4 { width: calc( 8.333333% * 4 - 2%); }
.grid.gutters > .sm-gr5 { width: calc( 8.333333% * 5 - 2%); }
.grid.gutters > .sm-gr6 { width: calc( 8.333333% * 6 - 2%); }
.grid.gutters > .sm-gr7 { width: calc( 8.333333% * 7 - 2%); }
.grid.gutters > .sm-gr8 { width: calc( 8.333333% * 8 - 2%); }
.grid.gutters > .sm-gr9 { width: calc( 8.333333% * 9 - 2%); }
.grid.gutters > .sm-gr10 { width: calc( 8.333333% * 10 - 2%); }
.grid.gutters > .sm-gr11 { width: calc( 8.333333% * 11 - 2%); }
.grid.gutters > .sm-gr12 { width: 100%; }

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

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