/* ============================================================
   cvg-fullwidth.css — セクション横幅いっぱい表示
   配置場所: /css/cvg-fullwidth.css

   使い方:
     cvg.css の直後に1行追加するだけ
     <link rel="stylesheet" href="/css/cvg-fullwidth.css">

   対象ファイル: cvg_top_zoho_2.html（sandbox版）

   解決する問題:
     ① .cvg-container の max-width:1200px
        → セクション背景が1200px止まりに見える
     ② .cvg-section はすでにフルワイドだが
        内側コンテンツを中央寄せ・読みやすい幅に保つ
     ③ ヘッダー・ヒーローのインライン max-width をクラスで管理
        （HTML側で style="" を cvg-header-inner / cvg-hero-inner に変更済み）
   ============================================================ */


/* ============================================================
   1. セクション — 横幅いっぱい（変更なし・確認用）
   ============================================================ */

/*
  .cvg-section はもとから width 指定がなく親要素幅 = 100% なので
  追加対応不要。背景色がフルワイドになる。
*/
.cvg-section,
.zs-hero,
.zs-footer {
  width: 100%;
  box-sizing: border-box;
}


/* ============================================================
   2. .cvg-container の max-width 解除
      → セクション内コンテンツの制限を取り除く
   ============================================================ */

/*
  【重要】
  元の定義（HTML内 <style>）:
    .cvg-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  ここで max-width を none にすると左右いっぱいに広がる。
  内側のグリッド・カードは各自の幅指定で収まる。

  ただしテキスト行が長くなりすぎる場合は
  max-width: 1440px 等に調整してください。
*/
.cvg-container {
  max-width: none !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

@media (max-width: 1024px) {
  .cvg-container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media (max-width: 768px) {
  .cvg-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ============================================================
   3. ヘッダー内コンテンツ幅
      （HTML側: style="max-width:1200px..." → class="cvg-header-inner"）
   ============================================================ */

.cvg-header-inner {
  width: 100%;
  max-width: none;           /* フルワイド */
  margin: 0;
  padding: 0 48px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .cvg-header-inner {
    padding: 0 32px;
  }
}

@media (max-width: 768px) {
  .cvg-header-inner {
    padding: 0 16px;
  }
}


/* ============================================================
   4. ヒーローセクション
      （HTML側: section の style="" を削除済み）
      （HTML側: 内側div の style="max-width..." → class="cvg-hero-inner"）
   ============================================================ */

/* セクション本体 */
.zs-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /*background: var(--cvg-navy, #0d1b3e);*/
	background-color: #A5CAD2 !important;
}

/* 内側コンテンツラッパー */
.cvg-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;           /* フルワイド */
  margin: 0;
  padding: 80px 48px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .cvg-hero-inner {
    padding: 80px 32px;
  }
}

@media (max-width: 768px) {
  .cvg-hero-inner {
    padding: 60px 16px;
  }
}


/* ============================================================
   5. フッター
   ============================================================ */

/*
  フッターは .cvg-container を内包するので
  セクション2の .cvg-container 上書きがそのまま適用される。
  フッター自体のパディングはインラインスタイルで設定済みなので
  ここでは追加不要。
*/


/* ============================================================
   6. Zoho Sites 固有 .zpcontainer の max-width 解除
      （2026home ページ側での制限に対応）
   ============================================================ */

/*
  Zoho Sites が生成する以下のルールを上書き:
    @media (min-width: 992px) {
      .theme-pages-full-stretch .zpcontainer {
        max-inline-size: 1440px;
        padding-inline-start: 50px;
        padding-inline-end: 50px;
      }
    }
*/
.zpcontainer,
.theme-pages-full-stretch .zpcontainer {
  max-inline-size: none !important;
  width: 96% !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
}

/* zprow（Zoho の行要素）もフルワイドに */
.zprow {
  max-width: none !important;
  width: 100% !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}


/* ============================================================
   7. html / body の横スクロール防止
   ============================================================ */

html,
body {
  overflow-x: hidden;
}