/* =========================================
   Landing Page Custom Styles
   現状のwordpressのCSSから脱却するため。
   このCSSはTailwind CDNと合わせて適用する。
   ========================================= */

/* WordPress CSSリセットと優先度の強制 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");

/* サイトエンジンのfont-size: 62.5%（10pxベース）に対応したフォントサイズをpx単位で明示的に指定 */

.csr-landing {
  font-family: "Noto Sans JP", sans-serif !important;
  line-height: 1.75 !important;
  font-size: 16px !important;
}

/* フォントサイズをpx単位で明示的に指定してサイトエンジンの標準に合わせる */
.csr-landing .text-7xl {
  font-size: 72px !important;
  line-height: 1 !important;
}

.csr-landing .text-6xl {
  font-size: 60px !important;
  line-height: 1 !important;
}

.csr-landing .text-5xl {
  font-size: 48px !important;
  line-height: 1.1 !important;
}

.csr-landing .text-4xl {
  font-size: 36px !important;
  line-height: 1.2 !important;
}

.csr-landing .text-3xl {
  font-size: 32px !important;
  line-height: 1.3 !important;
}

.csr-landing .text-2xl {
  font-size: 28px !important;
  line-height: 1.4 !important;
}

.csr-landing .text-xl {
  font-size: 22px !important;
  line-height: 1.5 !important;
}

.csr-landing .text-lg {
  font-size: 20px !important;
  line-height: 1.6 !important;
}

.csr-landing .text-base {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

.csr-landing .text-sm {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

.csr-landing .font-bold {
  font-weight: 700 !important;
}

.csr-landing .font-black {
  font-weight: 900 !important;
}

.csr-landing .leading-relaxed {
  line-height: 1.75 !important;
}

.csr-landing .leading-tight {
  line-height: 1.3 !important;
}

/* ヒーローセクションのパディングを2倍に増加 */

.csr-landing .bg-white {
  background-color: #ffffff !important;
}

.csr-landing .bg-gray-50 {
  background-color: #f9fafb !important;
}

.csr-landing .bg-gray-900 {
  background-color: #111827 !important;
}

.csr-landing .text-white {
  color: #ffffff !important;
}

.csr-landing .text-foreground {
  color: #0f172a !important;
}

.csr-landing .text-cyan-600 {
  color: #0891b2 !important;
}

.csr-landing .text-green-600 {
  color: #16a34a !important;
}

.csr-landing .challenge-card {
  border: 2px solid #22d3ee !important;
  border-radius: 0.75rem !important;
  padding: 1.5rem !important;
  background-color: #ffffff !important;
}

.csr-landing .shadow-sm {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.csr-landing .shadow-md {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
}

.csr-landing .flex {
  display: flex !important;
}

.csr-landing .grid {
  display: grid !important;
}

.csr-landing .items-center {
  align-items: center !important;
}

.csr-landing .items-start {
  align-items: flex-start !important;
}

.csr-landing .justify-center {
  justify-content: center !important;
}

.csr-landing .text-center {
  text-align: center !important;
}

/* コンテンツ幅を1.5倍に拡大 */
.csr-landing .max-w-3xl {
  max-width: 48rem !important;
}

.csr-landing .max-w-4xl {
  max-width: 72rem !important;
}

.csr-landing .max-w-6xl {
  max-width: 90rem !important;
}

.csr-landing .max-w-7xl {
  max-width: 100rem !important;
}

.csr-landing .mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.csr-landing .w-full {
  width: 100% !important;
}

.csr-landing .h-full {
  height: 100% !important;
}

/* 画像の高さを固定 */
.csr-landing .h-48 {
  height: 192px !important;
}

.csr-landing .object-cover {
  object-fit: cover !important;
}

.csr-landing .object-contain {
  object-fit: contain !important;
}

.csr-landing .relative {
  position: relative !important;
}

.csr-landing .absolute {
  position: absolute !important;
}

.csr-landing .inset-0 {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.csr-landing .z-0 {
  z-index: 0 !important;
}

.csr-landing .z-10 {
  z-index: 10 !important;
}

.csr-landing .overflow-hidden {
  overflow: hidden !important;
}

.csr-landing .flex-shrink-0 {
  flex-shrink: 0 !important;
}

.csr-landing .flex-1 {
  flex: 1 1 0% !important;
}

.csr-landing .inline-flex {
  display: inline-flex !important;
}

.csr-landing .inline-block {
  display: inline-block !important;
}

.csr-landing .container {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 768px) {
  .csr-landing .md\\:text-7xl {
    font-size: 72px !important;
    line-height: 1 !important;
  }

  .csr-landing .md\\:text-6xl {
    font-size: 60px !important;
    line-height: 1 !important;
  }

  .csr-landing .md\\:text-5xl {
    font-size: 48px !important;
    line-height: 1.1 !important;
  }

  .csr-landing .md\\:text-4xl {
    font-size: 36px !important;
    line-height: 1.2 !important;
  }

  .csr-landing .md\\:text-xl {
    font-size: 22px !important;
    line-height: 1.6 !important;
  }

  .csr-landing .md\\:py-16 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .csr-landing .md\\:py-32 {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
  }

  .csr-landing .md\\:py-64 {
    padding-top: 16rem !important;
    padding-bottom: 16rem !important;
  }

  .csr-landing .md\\:px-6 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .csr-landing .md\\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .csr-landing .md\\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .csr-landing .md\\:flex-row {
    flex-direction: row !important;
  }

  .csr-landing .md\\:w-3\\/5 {
    width: 60% !important;
  }

  .csr-landing .md\\:w-2\\/5 {
    width: 40% !important;
  }

  .csr-landing .md\\:gap-12 {
    gap: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .csr-landing .lg\\:text-7xl {
    font-size: 84px !important;
    line-height: 1 !important;
    \
  }

  .csr-landing .lg\\:text-6xl {
    \
    font-size: 72px !important;
    line-height: 1 !important;
  }

  .csr-landing .lg\\:py-40 {
    padding-top: 10rem !important;
    padding-bottom: 10rem !important;
  }

  .csr-landing .lg\\:py-80 {
    padding-top: 20rem !important;
    padding-bottom: 20rem !important;
  }

  .csr-landing .lg\\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* HubSpotフォームの横幅と中央寄せ */
.hubspot-form-container {
  max-width: 800px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* HubSpotフォームの見出しスタイル */
.hubspot-form-title {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
  font-weight: bold;
  text-align: center;
}