.heading-line {
  display: block;
  white-space: nowrap;
}

.no-break {
  white-space: nowrap;
}

.screen-library {
  margin-top: 70px;
  padding-top: 50px;
  border-top: 1px solid var(--line);
}

.screen-library-heading {
  display: grid;
  grid-template-columns: .35fr .7fr 1fr;
  gap: 30px;
  align-items: end;
  margin-bottom: 28px;
}

.screen-library-heading h3 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 30px;
  line-height: 1.4;
}

.screen-library-heading p {
  margin: 0;
  color: #64736c;
  font-size: 13px;
}

.screen-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.screen-strip figure {
  margin: 0;
  padding: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(20, 45, 34, .09);
}

.screen-strip figcaption {
  display: flex;
  justify-content: space-between;
  padding: 12px 7px 5px;
}

.screen-strip figcaption span {
  color: #738079;
  font-size: 11px;
}

@media (max-width: 980px) {
  .heading-line {
    white-space: normal;
  }

  .screen-library-heading {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 700px) {
  .hero h1 > span {
    display: block;
  }

  .hero h1 > span + span {
    margin-top: -.15em;
  }

  .heading-line {
    display: block;
  }

  .screen-strip {
    grid-template-columns: 1fr;
  }

  .screen-strip figure,
  .gallery figure {
    padding: 5px;
  }

  .screen-strip figcaption,
  .gallery figcaption {
    padding: 10px 7px 6px;
  }
}

/* 2026-10-12 移設時に追加：まだ使えない機能の「予定」「開発中」の札と、提供の予定 3 段 */
.plan-tag {
  display: inline-block;
  margin: 0 8px 0 6px;
  padding: 1px 9px;
  border-radius: 99px;
  background: #e8ece7;
  color: #3d4f47;
  font: 800 11px/1.6 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: .04em;
  vertical-align: 2px;
}
.section-dark .plan-tag { background: rgba(255, 255, 255, .16); color: #fff; margin-left: 0; }
.deploy-cards-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .deploy-cards-3 { grid-template-columns: 1fr; } }
.deploy-layout-wide { grid-template-columns: 1fr; gap: 40px; }
.deploy-layout-wide .note { grid-column: 1; }
.deploy-cards-3 h3 { font-size: 24px; }