@charset "UTF-8";
/*
 * 15-grid.css … グリッド
 * css/ のファイルは番号の順に全ページで読み込む（functions.php）。後のファイルが優先されるので、番号（順番）を変えないこと
 */

/* ---------------------------------------
    共通グリッドの設定

    使い方はこんな感じ（４分割の場合）

    <div class="row">
        <div.class="col-4">内容</div>
        <div class="col-4">内容</div>
        <div class="col-4">内容</div>
        <div class="col-4">内容</div>
    </div>
--------------------------------------- */
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row .col-4 {
  width: 23%;
}
.row .col-3 {
  width: 30%;
}
.row .col-2 {
  width: 48%;
}
@media screen and (max-width: 800px) {
  .row {
    display: block;
  }
  .row .col-2, .row .col-3, .row .col-4 {
    width: auto;
  }
}

.row-img {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.row-img .col-4 {
  width: 23%;
}
.row-img .col-3 {
  width: 30%;
}
.row-img .col-2 {
  width: 48%;
}
.row-img img {
  max-height: 225px;
}
@media screen and (max-width: 800px) {
  .row-img {
    display: block;
  }
  .row-img img {
    width: auto;
    max-height: none;
  }
}