/* バッティングヒーロー 導入事例
 * このファイルのスタイルは .bh-cases 内に限定しています。
 * JavaScript・外部フォント・外部画像は不要です。
 */
.bh-cases {
  --bh-blue: #0925ad;
  --bh-navy: #071440;
  --bh-yellow: #ffed00;
  --bh-cyan: #9deff4;
  --bh-border: #9bc9e8;
  --bh-font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  padding: 64px 24px 72px;
  color: var(--bh-navy);
  background: radial-gradient(ellipse at 50% 0%, #f7feff 0%, #e8f9ff 65%, #def4fc 100%);
  font-family: var(--bh-font);
  font-size: 16px;
  line-height: 1.8;
  text-align: left;
  overflow-wrap: anywhere;
  isolation: isolate;
  scroll-margin-top: 90px;
}
.bh-cases, .bh-cases *, .bh-cases *::before, .bh-cases *::after { box-sizing: border-box; }
.bh-cases :where(h2, h3, p, ul) { margin: 0; padding: 0; }
.bh-cases .bh-cases__inner { width: 100%; max-width: 1060px; margin-inline: auto; }
.bh-cases .bh-cases__header { margin-bottom: 36px; text-align: center; }
.bh-cases .bh-cases__ornament { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 10px; }
.bh-cases .bh-cases__ornament::before,
.bh-cases .bh-cases__ornament::after { content: ""; width: 150px; height: 3px; background: var(--bh-blue); }
.bh-cases .bh-cases__bat { display: block; flex: 0 0 78px; width: 78px; height: 64px; }
.bh-cases .bh-cases__title { color: var(--bh-navy); font-size: clamp(28px, 4.7vw, 52px); font-weight: 900; letter-spacing: .025em; line-height: 1.45; }
.bh-cases .bh-cases__marker { padding-inline: .1em; background: linear-gradient(transparent 72%, var(--bh-cyan) 72%, var(--bh-cyan) 95%, transparent 95%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bh-cases .bh-cases__lead { margin-top: 15px; font-size: clamp(15px, 2vw, 21px); font-weight: 700; line-height: 1.8; }
.bh-cases .bh-cases__themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 26px; list-style: none; }
.bh-cases .bh-cases__theme { padding: 4px 22px; border: 2px solid var(--bh-navy); border-radius: 999px; background: #ffffffa6; font-size: 17px; font-weight: 700; line-height: 1.6; }
.bh-cases .bh-cases__list { display: grid; gap: 20px; }
.bh-cases .bh-case { position: relative; padding: 26px 30px 24px; border: 1px solid var(--bh-border); border-radius: 15px; background: #fff; box-shadow: 0 4px 0 #abdcef40, 0 9px 22px #1e608110; }
.bh-cases .bh-case__meta { display: flex; align-items: stretch; width: fit-content; max-width: calc(100% - 130px); margin-bottom: 12px; font-size: 15px; font-weight: 800; line-height: 1.6; }
.bh-cases .bh-case__number { flex-shrink: 0; padding: 4px 18px 4px 14px; color: #fff; background: var(--bh-blue); clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.bh-cases .bh-case__category { display: flex; align-items: center; padding: 4px 16px 4px 9px; background: #e5efff; }
.bh-cases .bh-case__client { max-width: calc(100% - 130px); margin-bottom: 10px; font-size: 24px; font-weight: 800; letter-spacing: .015em; line-height: 1.5; }
.bh-cases .bh-case__venue { display: block; font-size: 15px; font-weight: 700; }
.bh-cases .bh-case__heading { position: relative; max-width: calc(100% - 130px); margin-bottom: 16px; color: var(--bh-navy); font-size: clamp(23px, 2.65vw, 30px); font-weight: 900; letter-spacing: -.025em; line-height: 1.55; }
.bh-cases .bh-case__icon { position: absolute; top: 28px; right: 28px; display: grid; place-items: center; width: 106px; height: 106px; border-radius: 50%; background: #e3f6ff; }
.bh-cases .bh-case__icon svg { display: block; width: 76px; height: 76px; }
.bh-cases .bh-case__body { color: #15203a; font-size: 16px; font-weight: 500; line-height: 1.95; }
.bh-cases .bh-case__tags { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 17px; list-style: none; }
.bh-cases .bh-case__tag { padding: 4px 15px; border-radius: 6px; color: var(--bh-navy); background: #d9f3fc; font-size: 14px; font-weight: 700; line-height: 1.7; }
.bh-cases .bh-cases__note { margin-top: 18px; font-size: 13px; text-align: center; }
.bh-cases .bh-cases__cta { margin-top: 38px; text-align: center; }
.bh-cases .bh-cases__cta-heading { margin-bottom: 20px; font-size: clamp(21px, 3vw, 32px); font-weight: 800; line-height: 1.6; }
.bh-cases .bh-cases__cta-link { display: inline-flex; align-items: center; justify-content: center; gap: 28px; max-width: 100%; min-height: 64px; padding: 12px 42px; border: 2px solid transparent; border-radius: 999px; color: var(--bh-navy); background: var(--bh-yellow); box-shadow: 0 5px 0 #cfbc16, 0 8px 14px #103d5c16; font-size: clamp(17px, 2.5vw, 25px); font-weight: 900; line-height: 1.5; text-decoration: none; transition: background-color .16s ease, box-shadow .16s ease; }
.bh-cases .bh-cases__cta-link:hover { color: var(--bh-navy); background: #fff655; box-shadow: 0 3px 0 #cfbc16, 0 6px 12px #103d5c16; text-decoration: none; }
.bh-cases .bh-cases__cta-link:focus-visible { outline: 3px solid var(--bh-blue); outline-offset: 6px; }
.bh-cases .bh-cases__cta-arrow { flex: 0 0 28px; width: 28px; height: 24px; }
@media (max-width: 640px) {
  .bh-cases { padding: 40px 16px 48px; }
  .bh-cases .bh-cases__header { margin-bottom: 25px; }
  .bh-cases .bh-cases__ornament { gap: 14px; margin-bottom: 8px; }
  .bh-cases .bh-cases__ornament::before,
  .bh-cases .bh-cases__ornament::after { width: 72px; height: 2px; }
  .bh-cases .bh-cases__bat { flex-basis: 60px; width: 60px; height: 49px; }
  .bh-cases .bh-cases__title { font-size: clamp(25px, 6.5vw, 36px); letter-spacing: 0; }
  .bh-cases .bh-cases__lead { margin-top: 12px; font-size: 15px; }
  .bh-cases .bh-cases__themes { gap: 8px; margin-top: 20px; }
  .bh-cases .bh-cases__theme { padding: 4px 12px; border-width: 1px; font-size: 13px; }
  .bh-cases .bh-cases__list { gap: 16px; }
  .bh-cases .bh-case { padding: 20px 18px; border-radius: 12px; }
  .bh-cases .bh-case__meta { max-width: calc(100% - 62px); flex-wrap: wrap; margin-bottom: 12px; font-size: 11px; }
  .bh-cases .bh-case__number { padding: 3px 13px 3px 8px; }
  .bh-cases .bh-case__category { padding: 3px 7px 3px 4px; }
  .bh-cases .bh-case__client { max-width: calc(100% - 62px); margin-bottom: 14px; font-size: 18px; }
  .bh-cases .bh-case__venue { margin-top: 2px; font-size: 12px; }
  .bh-cases .bh-case__heading { max-width: none; margin-bottom: 12px; font-size: 23px; line-height: 1.6; }
  .bh-cases .bh-case__icon { top: 20px; right: 15px; width: 56px; height: 56px; }
  .bh-cases .bh-case__icon svg { width: 42px; height: 42px; }
  .bh-cases .bh-case__body { font-size: 15px; line-height: 1.95; }
  .bh-cases .bh-case__tags { gap: 7px; margin-top: 15px; }
  .bh-cases .bh-case__tag { padding: 4px 9px; font-size: 12px; }
  .bh-cases .bh-cases__note { font-size: 11px; }
  .bh-cases .bh-cases__cta { margin-top: 30px; }
  .bh-cases .bh-cases__cta-heading { font-size: 21px; }
  .bh-cases .bh-cases__cta-link { gap: 13px; width: 100%; min-height: 60px; padding: 12px 15px; font-size: 17px; }
  .bh-cases .bh-cases__cta-arrow { flex-basis: 22px; width: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .bh-cases .bh-cases__cta-link { transition: none; }
}