/* css/custom-colors.css */

a{
  color: unset;
}
/* 📌 [コメンアウト: Figma Blue Colors] */
.bg-blue-100 { background-color: #e0f2ff !important; }
.bg-blue-500 { background-color: #3b82f6 !important; }
.bg-blue-600 { background-color: #2563eb !important; }
.bg-blue-900 { background-color: #1e3a8a !important; }

.text-blue-100 { color: #e0f2ff !important; }
.text-blue-500 { color: #3b82f6 !important; }
.text-blue-600 { color: #2563eb !important; }
.text-blue-900 { color: #1e3a8a !important; }

/* 📌 [コメンアウト: Figma Gray Colors] */
.bg-gray-100 { background-color: #f3f4f6 !important; }
.bg-gray-400 { background-color: #9ca3af !important; }
.bg-gray-800 { background-color: #1f2937 !important; }
.bg-gray-900 { background-color: #111827 !important; }

.text-gray-100 { color: #f3f4f6 !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-gray-800 { color: #1f2937 !important; }
.text-gray-900 { color: #111827 !important; }

.text-bk { color: #2B323C !important; }

/* 📌 [コメンアウト: Figma Green/Red Colors] */
.bg-green-500 { background-color: #62D642 !important; }
.text-green-500 { color: #62D642 !important; }
.text-green-700 { color: #469C2C !important; }

.bg-red-500 { background-color: #ef4444 !important; }
.text-red-500 { color: #ef4444 !important; }

.bg-F0F0E8-500 { background-color: #F0F0E8 !important; }
.text-F0F0E8-500 { color: #F0F0E8 !important; }

.bg-F7F7F3-500 { background-color: #F7F7F3 !important; }
.text-F7F7F3-500 { color: #F7F7F3 !important; }

/* 📌 [コメンアウト: Noto Sans JP Font Weights] */
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-extrabold { font-weight: 800 !important; }
.fw-black { font-weight: 900 !important; }

.lh-1 { line-height: 1 !important; }

.ls-0 { letter-spacing: 0 !important; }
.ls-1 { letter-spacing: 1px !important; }
.ls-2 { letter-spacing: 2px !important; }
.ls-3 { letter-spacing: 3px !important; }
.ls-4 { letter-spacing: 4px !important; }
.ls-5 { letter-spacing: 5px !important; }
.ls-30 { letter-spacing: 30px !important; }


/* 📌 [コメンアウト: Extra Small Font Sizes] */
.fs-xxs { font-size: 0.625rem !important; } /* 10px */
.fs-xs { font-size: 0.75rem !important; } /* 12px */

/* 📌 [コメンアウト: Custom Font Sizes - Responsive 20px Series] */
/* 20px Base - モバイル */
.fs-20 {font-size: 20px !important;}
@media (min-width: 768px) {.fs-20 {font-size: 20px !important;}}
@media (min-width: 992px) {.fs-20 {font-size: 20px !important;}}

/* 📌 [コメンアウト: Custom Font Sizes - Responsive 24px Series] */
/* 24px Base - モバイル */
.fs-24 {font-size: 24px !important;}
@media (min-width: 768px) {.fs-24 {font-size: 24px !important;}}
@media (min-width: 992px) {.fs-24 {font-size: 24px !important;}}

/* 📌 [コメンアウト: Custom Font Sizes - Responsive 34px Series] */
/* 34px Base - モバイル */
.fs-34 {font-size: 34px !important;}
@media (min-width: 768px) {.fs-34 {font-size: 34px !important;}}
@media (min-width: 992px) {.fs-34 {font-size: 34px !important;}}

/* 📌 [コメンアウト: Custom Font Sizes - Responsive 74px Series] */
/* 74px Base - モバイル */
.fs-50 {font-size: 50px !important;}
@media (min-width: 768px) {.fs-50 {font-size: 50px !important;}}
@media (min-width: 992px) {.fs-50 {font-size: 50px !important;}}


/* 📌 [コメンアウト: Custom Font Sizes - Responsive 74px Series] */
/* 74px Base - モバイル */
.fs-74 {font-size: 74px !important;}
@media (min-width: 768px) {.fs-74 {font-size: 74px !important;}}
@media (min-width: 992px) {.fs-74 {font-size: 74px !important;}}

/* 📌 [コメンアウト: Custom Button Design] */
.btn-primary {
  width: 260px!important;
  max-width: 260px!important;
  height: 73px!important;
  background-color: #62D642 !important;
  border-color: #62D642 !important;
  color: white !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  border: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  background-color: #52C632 !important;
  border-color: #52C632 !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(98, 214, 66, 0.3) !important;
}

.btn-primary:focus,
.btn-primary:active {
  background-color: #42B622 !important;
  border-color: #42B622 !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(98, 214, 66, 0.25) !important;
}

/* Play Icon Circle */
.btn-play-icon {
  width: 38px;
  height: 38px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Play Arrow Inside Circle */
.btn-play-arrow {
  width: 16px;
  height: 20px;
  fill: #2b323c;
}

.transform-deg-90 { transform: rotate(90deg) !important; }

/* 📌 [コメンアウト: Custom Outline Button Design] */
.btn-outline-primary {
  border-color: #62D642 !important;
  color: #62D642 !important;
  background-color: transparent !important;
  border-width: 2px !important;
  transition: all 0.3s ease !important;
}

.btn-outline-primary:hover {
  background-color: #62D642 !important;
  border-color: #62D642 !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(98, 214, 66, 0.3) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: #52C632 !important;
  border-color: #52C632 !important;
  color: white !important;
  box-shadow: 0 0 0 0.2rem rgba(98, 214, 66, 0.25) !important;
}