@tailwind base;
@tailwind components;
@tailwind utilities;

#coaching svg {
  display: inline;
}

#coaching .border {
  border-style: solid !important;
  border-color: #e5e7eb;
}

#coaching .border-primaryOrange {
  border-color: #FFB081 !important;
}

#coaching .border-solid {
  border-left: solid;
}

#coaching td, #coaching th {
  border: 1px solid #e5e7eb;
}

#coaching .global-footer {
  padding-top: 0 !important;
}

#coaching section {
  margin-bottom: 2rem; /* スマホ基準（デフォルト） */
}

#coaching .score .border {
  border-color: #ff7060 !important;
}

/* タブレット（768px以上） */
@media (min-width: 768px) {
  #coaching section {
    margin-bottom: 4rem;
  }
}

/* PC（1024px以上） */
@media (min-width: 1024px) {
  #coaching section {
    margin-bottom: 6rem;
  }
}

#coaching a {
    cursor: pointer;
  }


  #coaching {
    --faq-accent-color: #ff7060;
  }
  
  #coaching .faq-item {
    position: relative;
    padding-right: 2rem;
    cursor: pointer;
  }
  
  #coaching .faq-item::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--faq-accent-color);
    border-top: 2px solid var(--faq-accent-color);
    transition: transform 0.3s ease;
  }
  
  #coaching .faq-item.open::after {
    transform: translateY(-50%) rotate(135deg);
  }
  
  @media screen and (max-width: 767px) {
    body#coaching.sp-menu-visible {
      overflow: auto !important;
      height: auto !important;
    }
  }

  .border-l-4 {
    border-left-width: 4px !important;
}

.border-yellow-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 224 71/var(--tw-border-opacity,1)) !important
}

.border-pink-300 {
  --tw-border-opacity: 1;
  border-color: rgb(249 168 212/var(--tw-border-opacity,1)) !important

}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250/var(--tw-border-opacity,1)) !important
}