/* OUR BUSINESS */
.our-business {
 height: auto; /* 全体デフォルトを上書き */
 padding: 160px 0 0;
}

.ob-lead {
 margin: 0 45px 24px; /* section-title に合わせた左マージン */
 color: #393939;
 line-height: 1.6;
}

.ob-lead span {
 display: block; /* 行として扱う */
}

.ob-grid {
 --gap: 24px;
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: var(--gap);
 padding: 0 60px;
 margin-top: 20px;
}

.ob-card {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 text-decoration: none;
 background: #eee;
 border: 1px solid #e5e5e5;
 border-radius: 8px;
 padding: 28px 20px 22px;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
 color: #000;
}

.ob-card:hover {
 transform: translateY(-4px);
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 background: #ffd400;
 color: white;
}

.ob-illust {
 display: grid;
 place-items: center;
 width: 100%;
 aspect-ratio: 4 / 3; /* 画像が小さくても均一に */
}

.ob-illust img {
 max-width: 70%;
 height: auto;
 user-select: none;
 pointer-events: none;
 transition: transform 0.2s ease;
}

.ob-card:hover .ob-illust img {
 transform: scale(1.03);
}

.ob-title {
 margin-top: 14px;
 font-weight: 700;
 letter-spacing: 0.04em;
}

@media (max-width: 768px) {
 .our-business {
  padding-block: 180px 0;
 }
 .ob-grid {
  gap: 8px;
  padding: 0 30px;
  margin-top: 20px;
 }
 .ob-card {
  padding: 18px 10px 22px;
 }
}

@media (max-width: 600px) {
 .our-business {
  padding: 120px 0 0;
 }
 .ob-grid {
  gap: 8px;
  padding: 0 20px;
  margin-top: 10px;
 }
 .ob-lead {
  margin: 0 12px 16px;
 }
 .ob-card {
  justify-content: flex-start;
  padding: 5px 5px 10px;
  border-radius: 4px;
 }
 .ob-card.is-active {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
 }
 .ob-illust {
  aspect-ratio: 1/1;
  max-width: 100%;
 }
 .ob-illust img {
  max-width: 100%;
 }
 .ob-title {
  font-size: min(14px, 3.6vw);
  line-height: 1.1;
  letter-spacing: 0;
  margin-top: 5px;
  overflow-wrap: break-word;
  max-width: 100%;
 }
}

/* ===== OUR BUSINESS × WORKS 統合用 ===== */
.our-business {
 position: relative;
 height: auto;
 padding: 160px 0 80px; /* 吹き出し分の下余白 */
}

.ob-grid {
 position: relative;
 z-index: 2;
}

.ob-card {
 cursor: pointer;
 border-radius: 8px;
 border: 1px solid #e5e5e5;
 background: #eee;
}

.ob-card.is-active {
 background: #ffd400;
 color: #fff;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.ob-card:focus-visible {
 outline: 2px solid #ffd400;
 outline-offset: 3px;
}

/* 吹き出し本体（枠 + 角丸 + 余白） */
.ob-detail {
 --arrow-left: 50%;
 position: relative;
 margin: 32px 60px 0;
 display: none;
 background: #fff; /* 枠の内側の色 */
 border: 4px solid #e5e5e5;
 border-radius: 16px;
 padding: 24px 24px 28px; /* ★ 枠と画像＋説明のあいだの余白 */
 overflow: visible; /* ★ 三角が上にはみ出せるようにする */
}

.ob-detail.is-open {
 display: block;
}

.ob-detail__arrow {
 position: absolute;
 top: -16px;
 left: calc(var(--arrow-left) - 80px);
 width: 0;
 height: 0;
 border-left: 16px solid transparent;
 border-right: 16px solid transparent;
 border-bottom: 16px solid #e5e5e5; /* ★ 中身も枠と同じ色でベタ塗り */
}

/* 三角の中身（枠の内側の色） */
.ob-detail__arrow::after {
 content: "";
 position: absolute;
 top: 3px;
 left: -12px;
 width: 0;
 height: 0;
 border-left: 12px solid transparent;
 border-right: 12px solid transparent;
 border-bottom: 14px solid #fff;
}

/* 中身のコンテンツボックス */
.ob-detail .worksrow-grid {
 margin-top: 0;
 border: none; /* 外枠は .ob-detail に任せる */
 background: #edefeb; /* もとの WORKS と同じ色 */
 border-radius: 12px;
 overflow: hidden;
}

/* data-tag 付きの行だけを切り替え */
.ob-detail .workrow[data-tag] {
 display: none;
}

.ob-detail .workrow.is-active {
 display: grid;
}

@media (max-width: 768px) {
 .ob-detail__arrow {
  left: calc(var(--arrow-left) - 50px);
 }
 .ob-detail {
  margin: 24px 30px 0;
 }
}

@media (max-width: 600px) {
 .our-business {
  padding: 120px 0 0;
 }
 .ob-card.is-active {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
 }
 .ob-detail__arrow {
  left: calc(var(--arrow-left) - 35px);
 }
 .ob-detail {
  margin: 16px 20px 0;
  padding: 10px;
  border: 2px solid #e5e5e5;
 }
}