/* コースのカード（写真＋色の面の角丸カードを横に並べる）と、年齢・目的からえらぶ札 */
.course {
  --gap-x: 5vw;
  --per: 2;
  --card-w: calc(100vw / var(--per) - var(--gap-x));
  position: relative;
  z-index: 0;
  padding: 80px 0 40px;
}
@media (min-width: 800px) { .course { --gap-x: 40px; } }
@media (min-width: 1280px) { .course { --per: 4; } }
/* カードの途中から下に敷く帯 */
.course::after {
  content: "";
  position: absolute;
  top: clamp(196px, var(--card-w) * 0.375 + 100px, 265px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: var(--band);
}

.course__scroller {
  padding: 20px 0 40px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.course__scroller::-webkit-scrollbar { display: none; }
.course__list {
  display: flex;
  width: max-content;
  margin: 0 auto;
  padding: 0 clamp(8px, 2.5vw, 20px);
}
.course__item {
  flex: none;
  width: var(--card-w);
  min-width: 256px;
  max-width: 440px;
  padding: 0 clamp(8px, 2.5vw, 20px);
  box-sizing: content-box;
  scroll-snap-align: center;
}
.course__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 40px;
  background: var(--c);
  color: var(--navy);
  transition: transform 0.3s ease-out;
}
@media (min-width: 960px) {
  .course__inner { box-shadow: var(--shadow-card); }
}
@media (hover: hover) {
  .course__inner:hover { transform: scale(1.03); }
}
.course__item--c-sage { --c: var(--c-sage); }
.course__item--c-mustard { --c: var(--c-mustard); }
.course__item--c-peach { --c: var(--c-peach); }

.course__img {
  display: block;
  aspect-ratio: 5 / 3;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
}
.course__img img { width: 100%; height: 100%; object-fit: cover; }
.course__item--c-sage .course__img img { object-position: 60% 70%; }
.course__item--c-peach .course__img img { object-position: center 30%; }

/* 左上の色の札（楽器の印） */
.course__icon {
  position: absolute;
  top: 0;
  left: min(4.348% + 12.87px, 32px);
  z-index: 1;
  margin-top: -5%;
  padding: clamp(8px, 4.348% - 3.13px, 14px) clamp(10px, 5.435% - 3.913px, 16px);
  border-radius: 16px;
  background: var(--c);
}
.course__icon svg { width: 30px; height: 30px; fill: var(--navy); }
@media (min-width: 960px) { .course__icon svg { width: 36px; height: 36px; } }

.course__desc {
  display: block;
  flex-grow: 1;
  padding: 5% 7.5% 10%;
}
.course__title {
  display: block;
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}
.course__text {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 2;
}
@media (min-width: 960px) {
  .course__title { font-size: 24px; }
  .course__text { font-size: 14px; line-height: 1.75; }
}

/* 年齢・目的からえらぶ */
.course__find {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--side);
}
.course__find .heading { margin: 24px 0; padding-top: 0; }
@media (min-width: 960px) {
  .course__find .heading { margin: 24px 0 32px; }
}
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.5vw, 16px);
}
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) { .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tiles li { display: flex; }
.tiles__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 6px;
  border-radius: 16px;
  background: var(--white);
  color: var(--main);
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
@media (hover: hover) {
  .tiles__link:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
}
.tiles__link svg { width: 40px; height: 40px; fill: currentColor; }
.tiles__txt {
  margin-top: 8px;
  color: var(--main-ink);
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: clamp(11px, 0.46875vw + 9.5px, 14px);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-align: center;
}
@media (min-width: 960px) {
  .tiles__link { padding: 32px 8px 28px; }
}

.tiles__sub { display: block; }