/* ============================================
   page-led.php 専用スタイル（LED照明工事ページ）
   既存の sass/css ビルドには手を加えず、このファイル単体で読み込みます。
   クラス名はすべて "led-" を付けて既存クラスとの衝突を避けています。
============================================ */

.p-lower-mv.led {
  background: url(../img/led/header_led.jpg) no-repeat center / cover;
}

.led-page {
  background: #F7F8FA;
  width: 100%;
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  color: #1A2233;
  -webkit-font-smoothing: antialiased;
}

/* 以下はすべて .led-page の中だけに効くようスコープしています。
   （ヘッダー・フッターなど、このページの外側には一切影響しません） */
    .led-page * { box-sizing: border-box; }
    .led-page h1, .led-page h2, .led-page h3 {
      font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
      margin: 0;
    }
    .led-page p { margin: 0; }
    .led-page a { color: #16233B; text-decoration: none; }
    .led-page a:hover { color: #0E2B6E; }
    .led-wrap { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
    .led-section { padding: 96px 0; }
    .led-eyebrow {
      display: inline-block;
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #0E2B6E;
      margin-bottom: 16px;
    }
    .led-btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 32px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 18.5px;
      color: #FFFFFF;
      white-space: nowrap;
    }
    .led-btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 32px;
      border-radius: 4px;
      font-weight: 700;
      font-size: 18.5px;
      color: #FFFFFF;
      border: 1.5px solid rgba(255,255,255,0.5);
      white-space: nowrap;
    }
    .led-card {
      background: #FFFFFF;
      border: 1px solid #E3E7ED;
      border-radius: 6px;
      padding: 32px;
    }
    .led-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .led-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
    .led-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
    .led-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .led-benefit-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .led-flow-step { flex: 1 1 140px; text-align: center; }
    .led-flow-arrow { flex-shrink: 0; color: #C6CAD3; align-self: center; }

    /* 03 BENEFITS: アイコン（チャッピー素材から切り出したSVG） */
    .led-benefit-icon {
      width: clamp(48px, 9vw, 76px);
      height: clamp(48px, 9vw, 76px);
      display: block;
      margin: 0 auto;
      border-radius: 50%;
    }

    /* タイトルの改行位置をモバイルだけ変えるための <br> 用クラス。
       PC/タブレットでは非表示、600px以下でだけ改行を有効にします。 */
    .led-br-sp { display: none; }

    /* 03 BENEFITS: 削減効果シミュレーション図（棒グラフ+バッジを1枚のSVGにまとめたので、
       折り返して崩れることがありません。幅いっぱいに広がり、縦横比を保って縮小されます） */
    .led-benefit-chart {
      width: 100%;
      height: auto;
      display: block;
      margin-top: 24px;
    }

    @media (max-width: 860px) {
      .led-section { padding: 64px 0; }
      .led-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .led-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .led-grid-2 { grid-template-columns: minmax(0, 1fr); }
      .led-grid-3 { grid-template-columns: minmax(0, 1fr); }
      .led-benefit-icons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .led-hero-flex { flex-direction: column; }
      .led-nav-links { display: none !important; }
      .led-flow-arrow { display: none; }
    }

    @media (max-width: 480px) {
      .led-benefit-icons { grid-template-columns: minmax(0, 1fr); gap: 32px; }
      .led-benefit-icon { width: 96px; height: 96px; }
      .led-benefit-title { font-size: 17px !important; }
      .led-benefit-desc { font-size: 14px !important; margin-top: 6px !important; }
    }

    @media (max-width: 600px) {
      .led-br-sp { display: inline; }
    }