/*
 * オーディオチェック固有の補正。
 * 基本デザインは便利時計マニュアルの manual.css をそのまま使用します。
 */
.browser-shot img,
.shot-card img {
  object-fit: contain;
}

/*
 * 濃紺セクション内でも、注意書きは便利時計マニュアルと同じ
 * 淡い背景＋濃い文字で確実に読めるようにします。
 */
.section-dark .notice {
  color: #27313d;
  background: #fff9ef;
}

.section-dark .notice strong {
  color: #171b21;
}

@media (max-width: 760px) {
  .header-clock-btn {
    white-space: nowrap;
  }
}

/*
 * ヒーローの画面キャプチャは、本文との視覚的な比重を整えるため
 * デスクトップ表示で横幅を少し抑えます。
 */
.hero .browser-shot {
  width: 84%;
  max-width: 540px;
  justify-self: center;
}

/*
 * START / STOP セクションは明るい背景上に配置されるため、
 * 濃紺セクション用のカード文字色を明るい背景向けに補正します。
 */
#action .use-card {
  color: #171b21;
  background: #ffffff;
  border-color: #dce3eb;
  box-shadow: 0 12px 30px rgba(16, 24, 40, .06);
}

#action .use-card h3 {
  color: #171b21;
}

#action .use-card p {
  color: #5b6470;
}

#action .use-card .num {
  color: #e61b23;
}

@media (max-width: 900px) {
  .hero .browser-shot {
    width: 100%;
    max-width: none;
  }
}