/* =========================
   HTML5 レスポンシブ グリッド ひな形
   =========================*/
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img,
object,
embed {
  max-width: 100%;
  height: auto;
}

object,
embed {
  height: 100%;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  overflow: hidden;
  visibility: hidden;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.hide {
  display: none;
}


.antialiased {
  -webkit-font-smoothing: antialiased;
}

img {
  display: inline-block;
  vertical-align: middle;
}

textarea {
  height: auto;
  min-height: 50px;
}

select {
  width: 100%;
}

i {
  font-style: normal;
}

.animate {
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}

.button {
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, rgba(255, 255, 255, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.2)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.05) 1%, rgba(0, 0, 0, 0.2) 100%);
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.05) 1%, rgba(0, 0, 0, 0.2) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.05) 1%, rgba(0, 0, 0, 0.2) 100%);
  background-image: linear-gradient(top, rgba(255, 255, 255, 0.05) 1%, rgba(0, 0, 0, 0.2) 100%);
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cleft {
  clear: left;
}

/*画像のブロック*/
.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  *zoom: 1;
}
.row .grid--1,
.row .grid--2,
.row .grid--3,
.row .grid--4,
.row .grid--5,
.row .grid--6,
.row .grid--7,
.row .grid--8,
.row .grid--9,
.row .grid--10,
.row .grid--11,
.row .grid--12 {
  float: left;
  margin-left: 0.9%;
  margin-right: 0.9%;
}
.row .grid--1 {
  width: 6.53333%;
}
.row .grid--2 {
  width: 14.86667%;
}
.row .grid--3 {
  width: 23.2%;
}
.row .grid--4 {
  width: 31.53333%;
}
.row .grid--5 {
  width: 39.86667%;
}
.row .grid--6 {
  width: 48.2%;
}
.row .grid--7 {
  width: 56.53333%;
}
.row .grid--8 {
  width: 64.86667%;
}
.row .grid--9 {
  width: 73.2%;
}
.row .grid--10 {
  width: 81.53333%;
}
.row .grid--11 {
  width: 89.86667%;
}
.row .grid--12 {
  width: 98.2%;
}

.row:before, .row:after {
/*文字列の挿入*/
  content: " ";
/*display: tableは絶対にカラム落ちしないfloay*/
/*カラムの高さは、一番縦長と同じ高さになる*/
/*全カラムを包含するコンテナーにdisplay: table;を適用する*/
/*各カラムとなる.block__elementにはdisplay: table-cell;と横幅を適用する*/
  display: table;
}
.row:after {
  clear: both;
}
/*.row .row:before, 
.row .row:after {
  content: " ";
  display: table;
}

.row .row:after {
  clear: both;
}*/

.row.collapse > .column,
.row.collapse > .columns {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  float: left;
}

.row.collapse .row {
  margin-left: 0;
  margin-right: 0;
}

.row .row {
  width: auto;
  margin-left: -0.9375em;
  margin-right: -0.9375em;
  margin-top: 0;
  margin-bottom: 0;
  max-width: none;
  *zoom: 1;
}
.row .row.collapse {
  width: auto;
  margin: 0;
  max-width: none;
  *zoom: 1;
}

.row .row.collapse:before, 
.row .row.collapse:after {
  content: " ";
  display: table;
}

.row .row.collapse:after {
  clear: both;
}
/* max-width 400px… iPhone横幅320px*/
@media only screen and (max-width: 40em) {
  .row .grid--1,
  .row .grid--2,
  .row .grid--3,
  .row .grid--4,
  .row .grid--5,
  .row .grid--6,
  .row .grid--7,
  .row .grid--8,
  .row .grid--9,
  .row .grid--10,
  .row .grid--11,
  .row .grid--12 {
    float: none;
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
  }
}
/* 400.6px~max-width 640px, mobile-only styles*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  .row #content .grid--1,
  .row #content .grid--2,
  .row #content .grid--3,
  .row #content .grid--4 {
    width: 48.2% !important;
  }
}
/* min-width 641px and max-width 1024px*/