@charset "UTF-8";

#cource .flex-container {
  gap: 40px;
}

#cource .flex-container .flex-item {
  width: calc((100% - 40px) / 2);
  border-radius: 20px;
  overflow: hidden;
}

#cource .flex-container .flex-item h3 {
  font-size: 2.8rem;
  color: #fff;
  padding: 0.5em 0;
}

#cource .flex-container .flex-item .content {
  padding: 30px;
  background-color: #fff;
}

#cource .flex-container .flex-item .content p {
  color: #6c6c6c;
  line-height: 1.75;
}

#cource .flex-container .flex-item .content ul {
  margin: 30px 0;
}

#cource .flex-container .flex-item .content ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.8rem;
}

#cource .flex-container .flex-item .content ul li:not(:last-child) {
  margin-bottom: 0.6em;
}

#cource .flex-container .flex-item .content ul li::before {
  content: "";
  display: inline-block;
  background-color: #aaaaaaff;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

#cource .flex-container .flex-item .content .button {
  background-color: #fff;
  border: 2px solid #ffc600;
  color: #ffc600;
  transition: .2s all;
}

#cource .flex-container .flex-item .content .button:hover {
  background-color: #ffc600;
  color: #fff;
}

#cource .flex-container .flex-item .content .button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 2px solid #ffc600;
  border-right: 2px solid #ffc600;
  transition: .2s all;
}

#cource .flex-container .flex-item .content .button:hover::after {
  border-color: #fff;
  right: 4%;
}

#cource .flex-container .flex-item:nth-child(1) {
  border: 3px solid var(--color-trial);
}

#cource .flex-container .flex-item:nth-child(1) h3 {
  background-color: var(--color-trial);
}

#cource .flex-container .flex-item:nth-child(2) {
  border: 3px solid var(--color-introduction);
}

#cource .flex-container .flex-item:nth-child(2) h3 {
  background-color: var(--color-introduction);
}

#cource .flex-container .flex-item:nth-child(3) {
  border: 3px solid var(--color-classroom);
}

#cource .flex-container .flex-item:nth-child(3) h3 {
  background-color: var(--color-classroom);
}

#cource .flex-container .flex-item:nth-child(4) {
  border: 3px solid var(--color-hobby);
}

#cource .flex-container .flex-item:nth-child(4) h3 {
  background-color: var(--color-hobby);
}

#cource .flex-container .flex-item:nth-child(5) {
  border: 3px solid var(--color-creator);
}

#cource .flex-container .flex-item:nth-child(5) h3 {
  background-color: var(--color-creator);
}

#cource .flex-container .flex-item:nth-child(6) {
  border: 3px solid var(--color-skillup);
}

#cource .flex-container .flex-item:nth-child(6) h3 {
  background-color: var(--color-skillup);
}

#cource .flex-container .flex-item:nth-child(7) {
  border: 3px solid var(--color-starting);
}

#cource .flex-container .flex-item:nth-child(7) h3 {
  background-color: var(--color-starting);
}

#cource .flex-container .flex-item:nth-child(8) {
  border: 3px solid var(--color-community);
}

#cource .flex-container .flex-item:nth-child(8) h3 {
  background-color: var(--color-community);
}

/** -------- スマホ -------- **/
@media screen and (max-width: 960px) {
  #cource .flex-container .flex-item {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  #cource .flex-container .flex-item h3 {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 570px) {
  #cource .flex-container .flex-item h3 {
    font-size: 1.9rem;
    font-weight: 500;
  }

  #cource .flex-container .flex-item h3 span {
    font-size: 0.65em;
  }

  #cource .flex-container .flex-item .content {
    padding: 2rem;
  }

  #cource .flex-container .flex-item .content ul li {
    font-size: 1.5rem;
  }
}