/* =========================================================
   Saisho Giken
   Base: saisho_lightning_child_fix_images
   Purpose:
   1. ファーストビュー背景を画面幅に合わせて調整
   2. 文字が画面端に寄らないよう左右余白を確保
   ※ sample-beads.png / sample-software.png のサイズ指定は変更しません
   ========================================================= */

/* ファーストビュー背景 */
.sg-hero{
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:center right !important;
}

/* 文字・コンテンツ全体の左右余白 */
.sg-container{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:clamp(28px, 5vw, 72px) !important;
  padding-right:clamp(28px, 5vw, 72px) !important;
}

/* ファーストビューの文字幅 */
.sg-hero-text{
  max-width:720px !important;
}

/* PC */
@media (min-width:1201px){
  .sg-hero{
    background-size:cover !important;
    background-position:center right !important;
  }
}

/* ノートPC・タブレット横 */
@media (max-width:1200px){
  .sg-hero{
    background-size:cover !important;
    background-position:62% center !important;
  }
}

/* タブレット */
@media (max-width:900px){
  .sg-hero{
    background-size:cover !important;
    background-position:68% center !important;
  }

  .sg-hero::after{
    background:linear-gradient(
      90deg,
      rgba(15,23,42,.96),
      rgba(15,23,42,.82),
      rgba(15,23,42,.48)
    ) !important;
  }
}

/* スマホ */
@media (max-width:640px){
  .sg-container{
    padding-left:24px !important;
    padding-right:24px !important;
  }

  .sg-hero{
    background-size:cover !important;
    background-position:74% center !important;
  }

  .sg-hero h1{
    font-size:34px !important;
    line-height:1.35 !important;
  }

  .sg-lead{
    font-size:15px !important;
    line-height:1.9 !important;
  }

  .sg-hero::after{
    background:linear-gradient(
      90deg,
      rgba(15,23,42,.97),
      rgba(15,23,42,.88),
      rgba(15,23,42,.62)
    ) !important;
  }
}