@charset "UTF-8";
/* ==========================================================================
   合同会社 LINK FORCE ／ 草刈り専門サイトへのリニューアルで追加した分だけ
   2026-08-12 本番公開（先方承認済み）

   css/style.css（制作会社の納品物・158,948B）は一切変更していない。
   追加・上書きしたいスタイルは必ずこのファイルに書く。
   読み込みは functions.php の wp_enqueue_style('lf-renewal', ...) で
   style.css の後ろに入れているので、同じセレクタならこちらが勝つ。

   中身:
     1) トップ「事業内容」の互い違いレイアウト
     2) ご相談バナー画像（不動産管理ページ・Contact の直前）
     3) 施工実績（実績紹介一覧）の見出し帯の写真
     4) 民間・不動産ページ 冒頭リード文の装飾
   ========================================================================== */

/* 1) トップ「事業内容」の互い違いレイアウト
      パーツは既存の .home-center__container.-service をそのまま使う。
      -service はPCで flex-direction: row-reverse（＝画像左／テキスト右）なので、
      t-textleft を足したものだけPCで row に戻して テキスト左／画像右 にする。
      スマホは -service の column-reverse がそのまま効くので、
      3ブロックとも「画像 → テキスト」の縦積みで揃う。 */
@media screen and (min-width: 768px) {
  .home-center__container.-service.t-textleft {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}

.t-service-block {
  margin-top: 8rem;
}

@media screen and (max-width: 767px) {
  .t-service-block {
    margin-top: 10vw;
  }
}

/* 2) ご相談バナー画像（不動産管理ページのみ・Contact の直前） */
.t-cta-banner-img {
  background: #fff;
  padding: 6rem 0;
}

.t-cta-banner-img a {
  display: block;
  transition: opacity .3s;
}

.t-cta-banner-img a:hover {
  opacity: .85;
}

.t-cta-banner-img img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .t-cta-banner-img {
    padding: 10vw 0;
  }

  /* スマホは画面幅いっぱいに出して、画像内の文字を少しでも大きく見せる */
  .t-cta-banner-img .inner {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 3) 施工実績（実績紹介一覧）の見出し帯の写真
      使っているのは実績紹介の投稿のアイキャッチ写真＝サイト内の既存写真で、
      投稿そのものには一切手を触れていない。
      /works/ は「投稿ページ」として出力されるので body に .blog が付く。
      テスト側は固定ページだったため .page-id-2813 で当てていた（css/test-lf.css）。
      民間・官公庁・不動産の見出し帯はテーマ既定（img/common/bg001.jpg）のまま。 */
body.blog .ttl_cover_20230406 {
  /* 実績「糸満市 自社重機での作業伐採」の写真 */
  background-image: url(/wp-content/uploads/2024/06/42750_0.jpg);
  background-position: center 55%;
}

/* 4) 民間・不動産ページ 冒頭リード文の装飾
      素のテキストが白地に浮いていたので、淡い枠に載せてひとまとまりに見せる。
      幅・左右余白は既存の .inner と同じ（max-width 116.8rem / padding 2.4rem）。
      文言は一字も変えていない。 */
.t-lead {
  width: 100%;
  max-width: 116.8rem;
  margin: 3rem auto 8rem;
  padding: 0 2.4rem;
}

.t-lead__inner {
  position: relative;
  background: #f5f9f3;
  border: 1px solid #dfe8da;
  border-radius: .8rem;
  padding: 4rem 4.5rem;
  overflow: hidden;
}

/* 枠の上端・左寄せに金の短いアクセント線（サイトの他の見出しと同じ意匠） */
.t-lead__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8rem;
  height: .4rem;
  background: #c9a227;
}

.t-lead__p {
  text-align: center;
  line-height: 1.9;
  margin: 0;
}

.t-lead__p + .t-lead__p {
  margin-top: 2.4rem;
}

/* 実績・価格の部分だけ少しだけ強調（色＋太さ）。
   色は既存テーマのプライマリ（--primary-color: #103369）をそのまま使う */
.t-lead__em,
.t-lead__p strong {
  color: var(--primary-color);
  font-weight: 700;
}

.t-lead__p strong {
  font-size: 1.15em;
}

/* 最後の1行だけ少し大きく・太めにして締めに見せる。
   折り返すときに末尾が1〜2文字だけ残らないよう text-wrap: balance を効かせる
   （非対応ブラウザでは無視されるだけで、表示は崩れない） */
.t-lead__last {
  display: block;
  margin-top: 1.6rem;
  font-size: 1.15em;
  font-weight: 700;
  text-wrap: balance;
}

@media screen and (max-width: 767px) {
  .t-lead {
    margin: 3rem auto 5rem;
    padding: 0 5vw;
  }

  .t-lead__inner {
    padding: 6vw 5vw;
  }

  /* SPは既存の <br> が効くと行が不揃いになるので、幅なりに折り返させる */
  .t-lead__p br {
    display: none;
  }

  .t-lead__p + .t-lead__p {
    margin-top: 2rem;
  }

  /* SPは幅が狭く、締めの1行が「い！」だけ折り返される。少しだけ小さくして2行に収める */
  .t-lead__last {
    font-size: 1.05em;
    margin-top: 1.4rem;
  }
}