.sp-only {
  display: none;
}

.course__wrap .c-grid {
  gap: 56px;
}
.course__wrap img {
  max-width: 100%;
}
.course__wrap .c-heading {
  margin-bottom: 64px;
}
.course__wrap .c-button {
  margin-top: 32px;
}

.course__item {
  background: var(--v-color-white) url("./bg-frame.png") repeat center top;
  background-size: contain;
  padding: 40px;
  border-radius: 40px;
}

.course__logo {
  margin-bottom: 16px;
  text-align: center;
}
.course__logo .img_copy {
  height: 24px;
  margin-top: 0;
  margin-bottom: 8px;
}
.course__logo .img_logo {
  height: 54px;
  margin-top: 0;
  margin-bottom: 0;
}
.course__logo .-smiley {
  max-width: 301px;
}
.course__logo .-standard {
  max-width: 283px;
}
.course__logo .-fun {
  max-width: 313px;
}
.course__logo .-cut {
  max-width: 303px;
}
.course__logo .-timely {
  max-width: 265px;
}
.course__logo .-variation {
  max-width: 287px;
}
.course__logo .-quick {
  max-width: 258px;
}

.course__img {
  width: 320px;
  margin: auto auto 16px auto;
}
.course__img img {
  width: 100%;
  border-radius: 16px;
}

.course__list {
  --color: #e08d95;
  padding: 16px 24px;
  border-radius: 16px;
  border: 1px dashed var(--color);
  margin-bottom: 16px;
  width: 432px;
}
.course__list.-brown {
  --color: #c7915c;
}
.course__list.-green {
  --color: #5ebd9b;
}
.course__list.-orange {
  --color: #e6ac00;
}
.course__list.-purple {
  --color: #b07baf;
}
.course__list.-darkblue {
  --color: #1e2677;
}
.course__list.-red {
  --color: #ea5503;
}

.ricelist {
  --color: #e08d95;
  list-style: none;
}
.ricelist li {
  font-size: 16px;
  font-weight: 600;
  color: var(--color);
  padding-left: 16px;
  position: relative;
}
.ricelist li::before {
  content: "";
  display: block;
  width: 8px;
  height: 14px;
  background-color: var(--color);
  -webkit-mask: url("./icn-rice.png") no-repeat center/contain;
          mask: url("./icn-rice.png") no-repeat center/contain;
  position: absolute;
  left: 0;
  top: 8px;
}
.-brown .ricelist li {
  --color: #c6915b;
}
.-brown .ricelist li::before {
  background-color: var(--color);
}
.-green .ricelist li {
  --color: #5ebd9b;
}
.-green .ricelist li::before {
  background-color: var(--color);
}
.-orange .ricelist li {
  --color: #e6ac00;
}
.-orange .ricelist li::before {
  background-color: var(--color);
}
.-purple .ricelist li {
  --color: #b07baf;
}
.-purple .ricelist li::before {
  background-color: var(--color);
}
.-darkblue .ricelist li {
  --color: #1e2677;
}
.-darkblue .ricelist li::before {
  background-color: var(--color);
}
.-red .ricelist li {
  --color: #ea5503;
}
.-red .ricelist li::before {
  background-color: var(--color);
}

.info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px 48px;
}
.info dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.info dl dt {
  background: url("./bg-frame2.png") no-repeat center;
  background-size: contain;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 88px;
  min-height: 29px;
  color: var(--v-color-white);
  font-weight: 600;
}
.combination {
  color: var(--v-color-white);
}
.combination .c-heading {
  margin-bottom: 64px;
}
.combination .c-button {
  margin-top: 32px;
}

.combination__img {
  text-align: center;
  margin-bottom: 40px;
}
.combination__img img {
  max-width: 160px;
  width: 100%;
}

@media screen and (max-width: 750px) {
  .sp {
    display: block;
  }
  .course__wrap .c-grid {
    gap: 24px;
  }
  .info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
  }
  .info dl dt {
    min-width: 80px;
    min-height: 26px;
  }
  .ricelist li {
    font-size: 14px;
  }
  .ricelist li::before {
    top: 6px;
  }
  .course__item {
    padding: 24px;
    border-radius: 32px;
    width: calc(100vw - 40px);
  }
  .course__item .c-button__main {
    width: 100%;
  }
  .course__logo {
    margin-bottom: 16px;
  }
  .course__logo img {
    max-width: calc(100vw - 88px);
  }
  .course__logo .-smiley {
    max-width: 313px;
  }
  .course__logo .-cut {
    max-width: 313px;
  }
  .course__logo .-fun {
    max-width: 313px;
  }
  .course__logo .-timely {
    max-width: 313px;
  }
  .course__logo .-variation {
    max-width: 313px;
  }
  .course__logo .-quick {
    max-width: 313px;
  }
  .course__img {
    width: 100%;
  }
  .course__img img {
    width: 100%;
  }
  .course__list {
    width: 100%;
  }
  .combination .c-heading {
    margin-bottom: 50px;
  }
  .combination .c-button {
    margin-top: 40px;
  }
  .combination .c-button__main {
    width: 100%;
  }
  .combination__img {
    margin-bottom: 56px;
  }
}