/* apisdk ページ固有（実測= capture/api-ex.json / api-ex1920.json の2幅照合）
   図表は全て1枚画像（About図/計測表/主観・客観表/料金表）＝配置+タイポのみ実装 */

/* ヒーロー: タイトル下に 羊(左 55vw-55) + 本文(右 40vw-40・縦センター) */
.api-hero-title { margin: 72px 50px 0; }
.api-hero-row { margin: 20px 50px 0; display: flex; align-items: center; justify-content: space-between; }
.api-hero-sheep { width: calc(55vw - 55px); height: auto; flex: none; }
.api-hero-body { width: calc(40vw - 40px); font-size: 20px; line-height: 28px; color: #fff; flex: none; }

/* About Service: 図1枚 = 100%コンテンツ幅 */
.abs2 { margin-top: 260px; }
.abs2 > .sec-label, .abs2 > .sec-title { margin-left: var(--m); }
.abs2-img { width: var(--c); height: auto; margin: 33px 0 0 var(--m); }

/* 星付き見出し（4vw） */
.star-h { display: flex; align-items: center; gap: 4px; margin-left: var(--m); }
.star-h img { flex: none; }
.star-h h2 {
  font-family: Roboto, sans-serif; font-size: 4vw; font-weight: 700;
  letter-spacing: -0.04em; line-height: 1; color: #fff;
}

/* メリット3列（30%c + gap5%c・列中心=15/50/85%c） */
.merit { margin-top: 200px; }
.merit-grid {
  margin: 35px var(--m) 0;
  display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(.05 * var(--c));
}
.merit-cell { display: flex; flex-direction: column; align-items: center; }
.merit-num {
  position: relative; z-index: 2;
  width: 100%; max-width: 220px; text-align: center;
  font-size: 32px; font-weight: 900; line-height: 32px; color: #fff;
  /* liveはマスク無し=白い円弧が白い数字の背後を通る（同色で見えない） */
}
.merit-circle {
  width: 216px; height: 216px; border: 2px solid #fff; border-radius: 50%;
  margin-top: -16px;
  display: flex; align-items: center; justify-content: center;
}
.merit-ttl { width: 100%; font-size: 32px; font-weight: 700; line-height: 1.4; color: #fff; margin-top: 24px; text-align: center; }
.merit-body { width: 100%; margin: 22px 0 0; font-size: 16px; line-height: 22.4px; color: #fff; text-align: left; }

/* 計測可能項目（表=SVG 100%c） */
.mtable { margin-top: 175px; }
.mtable-img { width: var(--c); height: auto; margin: 50px 0 0 var(--m); }

/* 主観的/客観的（左45%c=本文+図・右50%c=表・gap5%c） */
.api2col { margin-top: 175px; }
.api2col-row { margin: 49px var(--m) 0; display: flex; justify-content: space-between; align-items: flex-start; }
.api2col-left { width: calc(.45 * var(--c)); flex: none; }
.api2col-body { font-size: 20px; line-height: 28px; color: #fff; }
.api2col-illust { width: 100%; height: auto; margin-top: 72px; }
.api2col-table { width: calc(.50 * var(--c)); height: auto; flex: none; }

/* 中間CTA（トップページ .midcta と同型・x はapisdk実測の37.5vw基準） */
.midcta {
  position: relative; height: 365px;
  border-top: 1px solid #444; border-bottom: 1px solid #444;
  margin-top: calc(8.33vw - 45px); /* 実測: 75@1440 / 115@1920 */
}
.midcta-inner {
  position: relative; height: calc(100% - 4px); margin: 2px 0;
  border-top: 1px solid #444; border-bottom: 1px solid #444;
}
.midcta-lead {
  position: absolute; top: 119px; left: calc(37.5vw - 174px);
  font-size: 20px; line-height: 28px; color: #333;
}
.midcta-word {
  position: absolute; top: 159px; left: calc(37.5vw - 156px);
  width: 301px; height: 88px; background: #fff; border-radius: 44px;
  font-family: "Noto Sans JP", sans-serif; font-size: 40px; font-weight: 900;
  line-height: 56px; color: #ff7a00;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: background .3s cubic-bezier(.4,.4,0,1), color .3s cubic-bezier(.4,.4,0,1);
}
.midcta-word .plane-white { display: none; }
.midcta-word:hover { background: #ff7a00; color: #fff; }
.midcta-word:hover .plane-orange { display: none; }
.midcta-word:hover .plane-white { display: block; }
.midcta-sheep {
  position: absolute; left: calc(50vw + 179px); transform: translateX(-50%);
  top: calc(184px - 8.33vw); /* 実測: 64@1440 / 24@1920 */
  width: calc(25vw - 10px); height: auto;
}

/* Use Case */
.uc { margin-top: calc(8.75vw + 4px); /* 実測: 130@1440 / 172@1920 */ }
.uc-label { color: #222 !important; margin-left: var(--m); }
.uc-title-main { color: #222; margin-left: var(--m); }
.uc-lead { margin: 34px 0 0 var(--m); font-size: 16px; line-height: 22.4px; color: #333; }
.uc-cards { display: flex; margin: 19px 0 0 calc(25vw - 158px); gap: calc(50vw - 463px); }
.uc-card {
  position: relative; width: 390px; flex: none;
  border: 2px solid #222; border-radius: 16px;
  margin-top: 14px;
  padding: 17px 5px 20px;
}
.uc-card-title {
  position: absolute; top: -14px; left: 50%; translate: -50% 0;
  background: rgb(255, 254, 247); /* グラデーション該当位置の近似色 */
  padding: 0 14px;
  font-size: 28px; font-weight: 700; line-height: 28px; color: #222; white-space: nowrap;
}
.uc-card-sub { font-size: 15px; line-height: 21px; color: #333; text-align: center; }
.uc-card img { margin: 10px auto 0; }

/* Pricing */
.pr { margin-top: 226px; }
.pr-img { width: var(--c); height: auto; margin: 34px 0 0 var(--m); }

/* 提供条件 */
.terms { margin: 230px var(--m) 0; }
.terms h3 {
  font-family: Roboto, sans-serif; font-size: 36px; font-weight: 900;
  letter-spacing: -1.44px; line-height: 36px; color: #222;
}
.terms p { font-size: 28px; line-height: 39.2px; color: #333; margin-top: 8px; }
.terms h3 + p { margin-top: 33px; }

/* 下部CTA余白（apisdk: 提供条件末尾→羊130・pill下→main末尾112） */
.cta2 { margin-top: 130px; padding-bottom: 117px; }


/* ===== apisdk SP/モバイル（≤840・実測= live-api-sp480/700-ex.json） ===== */
@media (max-width: 840px) {
  .api-hero-title { margin: 102px 25px 0; }
  .api-hero-row { display: none; }
  .abs2 { margin-top: 108px; }
  .merit { margin-top: 100px; }
  .merit-circle { max-width: 216px; }
  .mtable { margin-top: 100px; }
  .api2col { margin-top: 100px; }
  .midcta { display: none; }
  .uc { margin-top: 100px; }
  .uc-cards { margin-left: 20px; gap: 0; }
  .pr { margin-top: 94px; }
  .terms { margin-top: 100px; }
  .cta2 { margin-top: 78px; padding-bottom: 47px; }
}

@media (max-width: 540px) {
  .mtable { margin-top: 169px; }
}