/* ==========================================================================
   URIHOモニタリング LP — base
   トークン・リセット・共通ボタン・セクション見出し
   --------------------------------------------------------------------------
   カラートークン（値は直接記述。変更時はこの表を正とする）
     メイン（ディープティール）: #0A8278
     ダーク（影・深部）       : #054F47 / #076B5F
     アクセント（明）         : #149A8B / #0E9083
     CTA（コーラル）          : #F05A3C（影 rgba(201,61,34,.30)）
     見出しネイビー           : #14283C
     本文                     : #2B3742 / #3C4E60 / #3C4651
     サブテキスト             : #5B6670 / #6A7882 / 注釈 #7A828A
     危険赤（明背景）         : #CB4F3B ／（暗背景）#EE8470
     スレート（03背景）       : #2E4A52
     背景（淡）               : #EFF6F5 ／ セクション白 #FDFDFB ／ ベージュ #FBF4EA
     アラート黄               : #FFBB00（FV）/ #F5C21B（一覧）／異常なし緑 #1CAF9A
   フォント: 'Noto Sans JP'（本文）/ 'Zen Kaku Gothic New'（FV見出しのみ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   既存共通CSS対策
   ・reset/common は content-box 前提のため、モニタリング要素のみ border-box に統一する
   ・base.css の * { word-break: break-all } を打ち消し、カンプの折返し表現を維持する
   ・base.css の body { line-height: 155% }（%指定のため計算値21.7pxが固定継承される）を
     打ち消す。カンプは line-height 未指定（normal）前提のため、明示指定のない要素の
     行高がカンプとずれるのを防ぐ（各ルールの明示的な line-height は後勝ちで有効）
   -------------------------------------------------------------------------- */
[class^="monitoring-"],
[class*=" monitoring-"],
[class^="monitoring-"]::before,
[class*=" monitoring-"]::before,
[class^="monitoring-"]::after,
[class*=" monitoring-"]::after {
  box-sizing: border-box;
  word-break: normal;
}
body.monitoring-body {
  margin: 0;
  font-family: "Noto Sans JP", Meiryo, sans-serif;

  /* base.css の body { line-height: 155% }（%指定のため計算値21.7pxが固定継承される）を
     打ち消す。カンプは body 未指定（normal）前提。各要素へ直接 normal を当てると
     カンプが親指定→子継承で使っている line-height（例: 41.2%数字の0.9）まで壊れるため、
     body でリセットして自然に継承させる */
  line-height: normal;
  color: #2b3742;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* グループフッター（既存共通コンポーネント）は他ページと同じ行高（base.css の
   body 155% ＝ 14px 基準で 21.7px）を維持する */
body.monitoring-body .pre-footer {
  line-height: 155%;
}

/* 折り返し制御用ユニット（幅が足りない時に塊ごと改行させる） */
.monitoring-h2c {
  display: inline-block;
}

/* テキスト色ユーティリティ（強調） */
.monitoring-red {
  color: #cb4f3b;
}
.monitoring-red-lt {
  color: #ee8470;
}
.monitoring-red-b {
  font-weight: 700;
  color: #cb4f3b;
}
.monitoring-teal {
  color: #0a8278;
}
.monitoring-teal-b {
  font-weight: 700;
  color: #0a8278;
}
.monitoring-navy-b {
  font-weight: 700;
  color: #14283c;
}
.monitoring-fw-n {
  font-weight: normal;
}

/* --------------------------------------------------------------------------
   セクション共通
   -------------------------------------------------------------------------- */
.monitoring-sec {
  padding: 112px 56px;
}
.monitoring-sec-inner {
  max-width: 1040px;
  margin: 0 auto;
}
.monitoring-sec-head {
  margin-bottom: 64px;
  text-align: center;
}
.monitoring-sec-head-left {
  text-align: left;
}
.monitoring-eyebrow {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #0a8278;
  letter-spacing: 0.18em;
}
.monitoring-eyebrow-slate {
  color: #9fd0c8;
}
.monitoring-eyebrow-teal-lt {
  color: #9fe0d5;
}
.monitoring-h2 {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.4;
  color: #14283c;
  letter-spacing: -0.01em;
}
.monitoring-h2-white {
  color: #ffffff;
}

/* line-height はカンプ（reference/*.dc.html）準拠で未指定（normal）。
   1.8 を当てるとカンプより各セクションが5〜10px高くなる */
.monitoring-lead {
  margin: 14px 0 0;
  font-size: 16px;
  color: #5b6670;
}
.monitoring-lead-slate {
  margin-top: 16px;
  color: #bccbd0;
}
.monitoring-lead-teal-lt {
  color: #c7e7e1;
}

/* --------------------------------------------------------------------------
   ボタン
   ・大CTA（コーラル・ピル・無料バッジ）＝ .monitoring-btn-cta
   ・ゴースト（ティール枠）＝ .monitoring-btn-ghost
   ・ヘッダー/固定バー用の小CTA＝ .monitoring-btn-dl-s / .monitoring-fixedbar-btn（ホバー白反転）
   ・ページ内CTAのホバーは「浮く」（translateY(-4px)＋影強化）で統一
   -------------------------------------------------------------------------- */
.monitoring-btn-cta {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 18px 18px 18px 40px;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  background: #f05a3c;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgb(201 61 34 / 30%);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.monitoring-btn-cta:hover {
  box-shadow: 0 10px 20px rgb(20 40 60 / 25%);
  transform: translateY(-4px);
}
.monitoring-btn-cta-price {
  gap: 14px;
  padding: 18px 18px 18px 48px;
}
.monitoring-btn-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 14px;
  font-weight: 700;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
}
.monitoring-btn-cta-price .monitoring-btn-badge {
  font-size: 15px;
}
.monitoring-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 23px 34px;
  font-size: 18px;
  font-weight: 700;
  color: #054f47;
  white-space: nowrap;
  text-decoration: none;
  background: #ffffff;
  border: 1.5px solid #0a8278;
  border-radius: 999px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.monitoring-btn-ghost:hover {
  box-shadow: 0 8px 16px rgb(20 40 60 / 15%);
  transform: translateY(-4px);
}

/* ヘッダー用（ホバー白反転・浮かない） */
.monitoring-btn-dl-s {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  background: #f05a3c;
  border: 1.5px solid #f05a3c;
  border-radius: 999px;
  transition:
    background 0.18s,
    color 0.18s,
    box-shadow 0.18s;
}
.monitoring-btn-dl-s:hover {
  color: #f05a3c;
  background: #ffffff;
}
.monitoring-btn-contact-s {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 11px 22px;
  font-size: 16px;
  font-weight: 700;
  color: #054f47;
  white-space: nowrap;
  text-decoration: none;
  background: #ffffff;
  border: 1.5px solid #0a8278;
  border-radius: 999px;
  transition: background 0.18s;
}
.monitoring-btn-contact-s:hover {
  background: #e6f2ef;
}

/* --------------------------------------------------------------------------
   キーフレーム
   -------------------------------------------------------------------------- */
/* margin-topではなくtransformで動かす。fill-mode: both のため to { margin-top: 0 } が
   恒久適用され、SP幅のカード2の margin-top: 62px（積層の覗き）を潰してしまうため */
@keyframes fv-card {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fv-copy {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fv-pop {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  70% {
    opacity: 1;
    transform: scale(1.18);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   既存共通CSS対策（アンカー）
   base.css の a:link / a:visited / a:hover（色 #3296d2・hover下線）と
   a { overflow: hidden } は詳細度 (0,1,1) でクラス単体 (0,1,0) に勝つため、
   a要素のボタン・リンクは同等以上の詳細度で明示上書きする
   -------------------------------------------------------------------------- */
a[class^="monitoring-"],
a[class*=" monitoring-"] {
  overflow: visible;
}
a.monitoring-btn-cta:link,
a.monitoring-btn-cta:visited,
a.monitoring-btn-cta:hover {
  color: #ffffff;
  text-decoration: none;
}
a.monitoring-btn-ghost:link,
a.monitoring-btn-ghost:visited,
a.monitoring-btn-ghost:hover {
  color: #054f47;
  text-decoration: none;
}
a.monitoring-btn-dl-s:link,
a.monitoring-btn-dl-s:visited {
  color: #ffffff;
  text-decoration: none;
}
a.monitoring-btn-dl-s:hover {
  color: #f05a3c;
  text-decoration: none;
}
a.monitoring-btn-contact-s:link,
a.monitoring-btn-contact-s:visited,
a.monitoring-btn-contact-s:hover {
  color: #054f47;
  text-decoration: none;
}