body {
  font-family: 'Noto Sans JP', sans-serif;
}

.text-stroke{
  -webkit-text-stroke: 1px black;
  color: white;
}
.text-stroke-bold{
  -webkit-text-stroke: 2px black;
  color: white;
  leading-trim: both;
  text-edge: cap;
}

.accordion-content {
  transition: max-height 0.5s ease-in-out;
}

.checkbox-custom {
  height: 20px;
  width: 20px;
  border: 1px solid #D0D5DD;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  background-color: white;
}

.checkbox-custom::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background: transparent;
}

input[type="checkbox"]:checked + .checkbox-custom {
  border-color: #101828;
  background-color: #F8ED4F;
}

input[type="checkbox"]:checked + .checkbox-custom::after {
  background-image: url('../icons/checkboxtick.svg');
  background-size: cover;
}

.radio-custom {
  height: 20px;
  width: 20px;
  border-radius: 50%; /* Make it round for radio button */
  border: 1px solid #101828;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
  background-color: white;
}

input[type="radio"].hidden {
  display: none;
}

input[type="radio"].hidden:checked + .radio-custom {
  background-color: #F8ED4F; /* Background color for checked state */
}

input[type="radio"].hidden:checked + .radio-custom::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background-color: #101828;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Tostr Styles */
#toast-container > .toast-success {
  background-color: #ecfdf3; /* Green */
  color: #12b76a;
  border: 1px solid #12b76a;
  font-size: 14px;
  opacity: 1;
}

#toast-container > .toast-error {
  background-color: #fef3f2;
  color: #f04438;
  border: 1px solid #f04438;
  font-size: 14px;
  opacity: 1;
}

/* scrolled header */
.header_scrolled {
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
}

/* hover animation */
a,button {
  transition: .3s ease opacity;
}
a:hover,a:active,button:hover,button:active {
  opacity: .6;
}

/* animate css */
:root {
  --animate-duration: 1s;
  --animate-delay: 0.5s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}