@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);
}
.footnote {
	font-size: var(--font-xs);
}
/* ======================================================
  施工実績
====================================================== */
.section--works {
	background-color: #fff;
}
.ba-p22-box{
  margin-top: 100px;
}
.ba-p22-box:first-of-type{
  margin-top: 40px;
}

/* タブ */
.ba-p22__tab{
  display:flex;
  gap:0;
  list-style:none;
  margin:0;
  padding:0;
}
.ba-p22__li{
  flex:1; /* 均等幅 */
}
.ba-p22__a{
  display:block;
  text-decoration:none;
  text-align:center;
  font-weight:900;

  color:#111;
  background:var(--white); /* 非アクティブ */

  border:1px solid var(--gray-4);
  border-bottom:0;              /* 下線を消してタブ化 */
  border-radius:10px 10px 0 0;  /* 完全四角なら0に */
  padding:12px 14px;
}
.ba-p22__li + .ba-p22__li .ba-p22__a{
  margin-left:-1px; /* 境界線を1本に */
}

/* ✅ 押してる方（アクティブ）を main-color / white */
.ba-p22__li.is-active .ba-p22__a{
  background: var(--main-color);
  color: var(--white);
  border-color: var(--main-color);
  position:relative;
  z-index:2;
}

/* 画像ステージ（タブと繋げる） */
.ba-p22__stage{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid rgba(0,0,0,.12);
  margin-top:-1px;
  overflow:hidden;
  background:#ddd;
}

/* 表示切替 */
.ba-p22__area{
  position:absolute;
  inset:0;
  display:none;
  opacity:0;
}
.ba-p22__area.is-active{
  display:block;
  animation: ba_p22_fade .35s ease forwards;
}
@keyframes ba_p22_fade{
  from{ opacity:0; }
  to{ opacity:1; }
}

.ba-p22__img{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
}
.ba-p22__img--before{ background-image: var(--before); }
.ba-p22__img--after{  background-image: var(--after); }

/* スマホ調整 */
@media (max-width: 767px){
  .ba-p22-box{
    margin-top: 60px;
  }
  .ba-p22-box:first-of-type{
    margin-top: 40px;
  }
  .ba-p22__a{
    padding:10px 10px;
    font-size:13px;
  }
}