@charset "UTF-8";

/* genre | ページ固有スタイル
--------------------------------------------------*/

.genre {
  padding: 30rem 0;
}

.genre__item {
  background-color: #FFFFFF;
  border-radius: 20rem;
  padding: 24rem 15rem 30rem;
  scroll-margin-top: 80rem;
}

.genre__item:not(:first-of-type) {
  margin-top: 30rem;
}

.genre__title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10rem;
}

.genre__main-title {
  color: #C90000;
  font-size: 26rem;
  letter-spacing: 0.08em;
  font-weight: 900;
}

.genre__sub-title {
  font-size: 16rem;
  padding-bottom: 12rem;
  display: inline-block;
  font-weight: 700;
  border-bottom: 5rem solid #C90000;
  width: 96rem;
  text-align: center;
}

.genre__text {
  margin-top: 20rem;
}

.genre__video {
  margin-top: 16rem;
}

@media only screen and (min-width: 769px) {
  .genre {
    padding: 70rem 0;
  }

  .genre__item:not(:first-of-type) {
    margin-top: 20rem;
  }

  .genre__item {
    border-radius: 33rem;
    padding: 70rem;
    display: flex;
    -moz-column-gap: 32rem;
    column-gap: 32rem;
    justify-content: space-between;
    scroll-margin-top: 90rem;
  }

  .genre__title {
    align-items: flex-start;
    row-gap: 18rem;
  }

  .genre__main-title {
    font-size: 30rem;
  }

  .genre__sub-title {
    padding-bottom: 24rem;
    text-align: left;
  }

  .genre__text {
    margin-top: 30rem;
    flex: 1;
    line-height: 1.875;
  }

  .genre__video {
    max-width: 571rem;
    width: 100%;
  }
}