@charset "UTF-8";

/* ジャンル　フリースペース上部 */
.genre-title{
    margin-inline: auto;
    max-width: 11.1rem;
    width: 100%
}
.genre-title img{
    width: 100%;
}
.genre-media{
    max-width: 33.5rem;
    width: 100%;
    margin-inline: auto;
    margin-top: 7.4rem;
}
.genre-media img{
    width: 100%;
}
.genre-dtail01{
    max-width: 31rem;
    width: 100%;
    margin-inline: auto;
    margin-top: 12.6rem;
}
.genre-dtail01 img{
    width: 100%;
}
.genre-dtail02{
    max-width: 31rem;
    width: 100%;
    margin-top: 6rem;
    margin-inline: auto;
}
.genre-dtail02 img{
    width: 100%;
}
@media screen and (min-width: 960px) {
    .genre-title{
        max-width: 16.7rem;
    }
    .genre-media{
      max-width: 85.8rem;
        margin-top: 2rem;
    }
    .genre-dtail01{
      max-width: 74rem;
      margin-top: 7rem;
    }
    .genre-dtail02{
      max-width: 74rem;
    }
}
.genre-banner{
  display: grid;
  grid-template-columns: 1fr;
  gap:3rem;
}
.genre-banner img{
  width: 100%;
}
@media screen and (min-width: 960px) {
  .genre-banner{
    max-width: 86rem;
    width: 100%;
    margin-inline: auto;
    gap: 0 3rem;
    grid-template-columns: 1fr 1fr;
  }
}