@charset "utf-8";
/* ============================================================
   トップページ用の調整だけを書く（.tp- から始まるクラス）
   ★土台は現行トップの top-assets/css/style.css。そちらは触らない。
   ★共通部品（header / sidebar / cta / footer）のCSSも触らない。
     ここは「確定版の部品を、現行レイアウトのどこに置くか」だけを決める。
   ============================================================ */

/* 確定サイドバーの置き場所
   現行は .strengths__side の中に画像ボタンが left:1030px / width:262px で並んでいた。
   確定サイドバーは幅276pxの部品なので、左端を現行と同じ1030pxに合わせる。 */
.tp-side{
  position:absolute;
  left:1030px;
  top:45px;              /* 左の大枠画像 .strengths__box と同じ高さから始める */
  width:276px;
}

/* 確定CTAは現行のCTA帯（画像1枚）と入れ替え。上下の余白は cta.css / footer.css が持つ */

/* =========================================================
   ★2026/08/31 クライアント指示
   トップ「お客様の声｜施工実績」に一覧ページへのリンクを追加。
   ・画像の中の写真4枚には .link-overlay（％指定）を重ねている（HTML側）
   ・「一覧ページはこちら」は、写真のすぐ下に固定して画像の上に重ねている
     （セクションの外に置くと、画像の下の白い部分が帯として見えてしまうため）
   ========================================================= */
.voice-more{
  position:absolute;
  left:0;
  width:100%;
  text-align:center;
  z-index:2;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size:15px;
  font-weight:500;
  color:#333;                  /* 指示どおり、普通の黒い文字 */
  text-decoration:underline;
  text-underline-offset:4px;
}
.voice-more:hover{opacity:.7;}

/* PC用とスマホ用の出し分け（トップはPC版とスマホ版が別々の作りのため） */
.voice-more--sp{display:none;}
@media (max-width:768px){
  .pc-view .voice-more{display:none;}
  .voice-more--sp{
    display:block;
    font-size:3.2vw;           /* 375px幅で約12px。スマホの余白（49px）に収まる大きさ */
    text-underline-offset:2px;
  }
}

/* =========================================================
   ★2026/09/12 L1：トップ「お客様の声｜施工実績」の写真4枚を
   ブログ「お客様の声」カテゴリの最新4件から自動表示にする（追加分だけ）
   ・元の1枚絵（sec6-clients.png）は触っていない。上に重ねるだけ
   ・JSが動かなかったときは、元の絵がそのまま出る（真っ白にはならない）
   ・グレーの色 #b2b1b1 ＝元の絵のグレー地の実測値 rgb(178,177,177)
   ========================================================= */
.link-overlay{ overflow:hidden; }
.link-overlay > img.voice-auto{
  display:block; width:100%; height:100%;
  border-radius:inherit;
  background:#fff;  /* ★20260914 L4：ロゴの後ろを白に（先方要望）。旧 #b2b1b1 */
}
.link-overlay > img.voice-auto--cover{ object-fit:cover; }
.link-overlay > img.voice-auto--contain{ object-fit:contain; padding:6%; }
/* ★20260914 L4：後ろの絵のグレーの枠は角が四角。重ねた画像だけ角丸(6px)だと角からグレーがのぞくため、
   自動で差し替えた枠だけ角を四角にして、グレーを完全に隠す */
.link-overlay.is-auto,
.link-overlay.is-auto > img.voice-auto{ border-radius:0; }
.link-overlay.is-auto:hover > img.voice-auto{ filter:brightness(1.08); }
/* ★透かさない（opacity を下げると、下にある元の絵の古い写真が透けて見えるため。20260912 修正） */