@charset "UTF-8";

/* ============================================================
 * トップページ Service セクションの追加スタイル
 *
 * ■ 何をしているか
 *   トップの事業内容を「Life line / Reform の2ブロック × 3カード」から
 *   「事業カテゴリ6枚のカード」に組み替えた（front-page.php）。
 *   カードの中身（.service__item__img / __ttl / __subTtl）は
 *   style.css の既存定義をそのまま使い、ここでは
 *     - 3列 × 2行の折り返しグリッド化
 *     - カードをリンク（<a>）にしたことによる見た目の調整
 *   だけを上書きする。事業が増えてもカードを1枚足すだけで済む。
 *
 * ■ なぜ SCSS ではなくこのファイルなのか
 *   _assets/css/style.css は _assets/scss/style.scss を Prepros で
 *   コンパイルした「成果物」。手編集しても次のビルドで消える。
 *   ビルド環境なしでも確実に反映させるため、採用ページ・事業内容ページと
 *   同じ「専用CSSを別ファイルで enqueue する」方式を踏襲する。
 *
 * ■ 読み込み
 *   _functions/output-control/enqueue.php の grios_front_assets() が
 *   is_front_page() のときだけ style.css の後に読む。
 *   CSS を更新したら enqueue.php のバージョン文字列を上げること。
 *
 * ■ 数値の単位について
 *   style.css は 1920px / 320px 基準の vw 指定。ここでも同じ換算に揃える。
 *     PC: 1px = 0.0520833333vw（1920基準）
 *     SP: 1px = 0.3125vw       （320基準）
 * ============================================================ */

/* ------------------------------------------------------------
 * カードグリッド（PC: 3列 × 2行）
 * ------------------------------------------------------------ */
.service__items--grid {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /* row-gap 60px / column-gap 34px（列間は既存3列レイアウトと同じ値） */
  gap: 3.125vw 1.7708333333vw;
}

.service__items--grid .service__item {
  /* 既存の .service__item は flex-shrink 前提の幅指定なので、
     折り返す以上ここで実寸の3等分を明示する必要がある */
  width: calc((100% - 1.7708333333vw * 2) / 3);
}

/* ------------------------------------------------------------
 * カード（リンク化にともなう調整）
 * ------------------------------------------------------------ */
.service__item--card {
  display: block;
  text-decoration: none;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

.service__item--card:hover {
  opacity: 0.7;
}

/* 英字が2行になっても行間が詰まらないように（例: Water purifier） */
.service__items--grid .service__item__ttl {
  line-height: 1.35;
}

/* ------------------------------------------------------------
 * SP（〜767px）: 2列 × 3行
 *   6枚を既存の1列縦積みで並べると縦に長くなりすぎるため2列にする。
 * ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  .service__items--grid {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /* row-gap 25px / column-gap 15px */
    gap: 7.8125vw 4.6875vw;
  }

  .service__items--grid .service__item {
    width: calc((100% - 4.6875vw) / 2);
  }

  /* 2列ぶんの幅に合わせて画像の高さを詰める（contain のまま余白を残さない） */
  .service__items--grid .service__item__img {
    height: 33vw;
  }
}