.sec_online_hero {
  background: #fffdf8 url('/images/art/online-hero-v1.webp') center / cover no-repeat;
  @media (max-width: 1000px) { background-image: linear-gradient(90deg, transparent, #fffdf8eb 25%, #fffdf8eb 75%, transparent), url('/images/art/online-hero-v1.webp'); }
  @media (max-width: 650px) { background-image: radial-gradient(ellipse, #fffdf8f5 25%, #fffdf8c9 65%, #fffdf855), url('/images/art/online-hero-v1.webp'); }
  .wrap { margin: 0 auto; padding: 80px 44% 64px 13%; max-width: 1440px;
    @media (max-width: 1200px) { padding-inline: 10% 42%; }
    @media (max-width: 1000px) { padding-inline: 12% 30%; }
    @media (max-width: 733px) { padding: 48px 100px 40px; }
    @media (max-width: 650px) { padding: 48px 24px 40px; }
  }
  .ttl_ptn_1 { --align-ttl: left; }
  .rule_ptn_1 { margin-left: 0; }
  .lead { margin-top: 24px; color: var(--color-rose); }
  .txt_ptn_1 { --align-txt: left; }
}
.sec_online_hero { .wrap { padding-inline: 22% 39%; @media (max-width: 1000px) { padding-inline: 20% 30%; } @media (max-width: 733px) { padding-inline: 100px; } @media (max-width: 650px) { padding-inline: 24px; } } .ttl_ptn_1.type_3 { font-size: 52px; @media (max-width: 1200px) { font-size: 44px; } @media (max-width: 1000px) { font-size: 36px; } @media (max-width: 650px) { font-size: 30px; } } }