@charset "utf-8";
/* ======================================================
  施工実績　ファーストビュー
====================================================== */
.hero-p09 {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .10);
  min-height: 260px;
  background: var(--main-5);
}
.hero-p09__inner {
  position: relative;
  padding: 16px;
  color: #fff;
}
.hero-p09__kicker {
  margin: 0;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .92);
}
.hero-p09__lead {
  margin: 8px 0 0;
  font-size: 20px;
  line-height: 1.35;
}
.hero-p09__quote {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: var(--font-l);
  color: var(--white);
}
.hero-p09__desc {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .92);
}
.hero-p09__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-p09__btn {
  min-width: 145px;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
  padding: 11px 12px;
  border-radius: 999px;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  background: var(--white);
}
/* ======================================================
  施工実績
====================================================== */


/* セクション背景 */
.section--works{
  background:#f6f6f6;
  padding: 60px 0;
}

.section--works .inner{
  max-width: 980px;
  margin: 0 auto;
}

/* 見出し（中央） */
.section--works .section-title{
  text-align:center;
  margin: 0 0 36px;
}


.section--works .section-title p{
  margin: 6px 0 0;
  font-size: 14px;
  color:#111;
}

/* ===== 一覧グリッド ===== */
#works .works-grid{
  display:grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* 通常：3列 */
#works .works-grid > a.works-card--link{
  grid-column: span 4;
  min-width: 0; /* grid崩れ防止 */
}

/* 最初の2件：大きく（2列） */
#works .works-grid > a.works-card--link:nth-child(-n+2){
  grid-column: span 6;
}

/* ===== カード本体 ===== */
#works a.works-card--link{
  display:block;                 /* aをblockに固定 */
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius: 4px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: .2s;
}

/* hover */
#works a.works-card--link:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* a直下ラッパー（spanでもOK） */
#works .works-card__inner{
  display:block;
}

/* ===== サムネ ===== */
#works .works-thumb{
  display:block;
  width:100%;
  background:#f0f0f0;
  overflow:hidden;
  height: 150px; /* 下段 */
}

#works .works-grid > a.works-card--link:nth-child(-n+2) .works-thumb{
  height: 220px; /* 上段（大きい2枚） */
}

#works .works-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
	  object-position: center bottom;/*画像の下の方*/
}

/* ===== タイトル帯（写真の下） ===== */
#works .works-cap{
  display:flex;
	align-items: center;
	justify-content: space-between;
  width:100%;
  padding: 10px 12px;
  border-top:1px solid #eee;
  background:#fff;
}

/* タイトル */
#works .works-title{
  display:block;
  margin:0;
  font-size: var(--font-s);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.02em;

  /* 縦書き・回転が混ざった時の保険 */
  writing-mode: horizontal-tb;
  transform:none;
}

/* 日付 */
#works .works-date{
  display:block;
  margin-top:6px;
  font-size: var(--font-xs);
  color:#666;
  writing-mode: horizontal-tb;
  transform:none;
}

/* ===== もっと見るボタン ===== */
#works .works-more{
  text-align:center;
  margin-top: 18px;
}

#works .works-more__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background:#ff2b2b;
  color:#fff;
  text-decoration:none;

  padding:10px 18px;
  border-radius: 6px;

  font-weight:800;
  font-size: 13px;
  line-height: 1;
}

/* ===== レスポンシブ ===== */
@media (max-width: 900px){
  #works .works-grid{
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  /* 通常2列 */
  #works .works-grid > a.works-card--link{
    grid-column: span 4;
  }

  /* 上2枚は1列で大きく */
  #works .works-grid > a.works-card--link:nth-child(-n+2){
    grid-column: span 8;
  }

  #works .works-grid > a.works-card--link:nth-child(-n+2) .works-thumb{
    height: 240px;
  }
}

@media (max-width: 560px){
  /* 1列で全部同じ幅 */
  #works .works-grid{
    grid-template-columns: 1fr !important;
  }

  /* 全カードを同じ幅にする（nth-childを無効化） */
  #works .works-grid > a.works-card--link{
    grid-column: span 1 !important;
  }

  /* スマホの画像高さ */
  #works .works-thumb{
    height: 220px;
  }
}

/* ===== CTA（もっと見る） ===== */
/* 既存のworks-capに追記するだけ（重複回避） */
#works .works-cap{
  position: relative;
}

#works .works-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  color: var(--main-color);
  border: 1px solid var(--main-color);
  background: #fff;
}

#works .works-cta::after{
  content: "→";
  font-weight: 900;
}

#works a.works-card--link:hover .works-cta{
  transform: translateX(1px);
}