@font-face {
  font-family: FuturaCyrillic;
  src: url("/lp/plan/genreselect/font/FuturaCyrillicBold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: FuturaCyrillic;
  src: url("/lp/plan/genreselect/font/FuturaCyrillicHeavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

.c-link-btn {
  --c-link-btn-color: #e8374a;
  --c-link-btn-bg: #fff;
  --c-link-btn-border: #e8374a;
  border: min(.15625vw, 2px) solid var(--c-link-btn-border);
  background-color: var(--c-link-btn-bg);
  width: min(28.125vw, 360px);
  height: min(5.625vw, 72px);
  color: var(--c-link-btn-color);
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  border-radius: min(78.0469vw, 999px);
  justify-content: space-between;
  align-items: center;
  padding: 0 min(1.5625vw, 20px);
  font-size: min(1.40625vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s;
  display: flex;
  position: relative;
}

@media (width < 768px) {
  .c-link-btn {
    border: .5vw solid var(--c-link-btn-border);
    width: 74vw;
    height: 14.5vw;
    padding: 0 5vw;
    font-size: 3.75vw;
  }
}

.c-link-btn:before {
  content: "";
  flex: 0 0 min(2.1875vw, 28px);
  width: min(2.1875vw, 28px);
}

@media (width < 768px) {
  .c-link-btn:before {
    flex: 0 0 5.5vw;
    width: 7vw;
  }
}

.c-link-btn__text {
  text-align: center;
  flex: auto;
}

.c-link-btn__icon {
  flex: 0 0 min(2.1875vw, 28px);
  justify-content: center;
  align-items: center;
  width: min(2.1875vw, 28px);
  display: flex;
}

@media (width < 768px) {
  .c-link-btn__icon {
    flex: 0 0 7vw;
    width: 4.5vw;
  }
}

.c-link-btn__icon svg {
  width: auto;
  height: auto;
  display: block;
}

.c-link-btn__icon svg [stroke] {
  stroke: currentColor;
}

.c-link-btn__icon svg [fill] {
  fill: currentColor;
}

.c-link-btn--red {
  --c-link-btn-color: #fff;
  --c-link-btn-bg: #e8374a;
  --c-link-btn-border: #e8374a;
}

.c-link-btn--red:hover, .c-link-btn--red:focus-visible, .c-link-btn--white {
  --c-link-btn-color: #e8374a;
  --c-link-btn-bg: #fff;
  --c-link-btn-border: #e8374a;
}

.c-link-btn--white:hover, .c-link-btn--white:focus-visible {
  --c-link-btn-color: #fff;
  --c-link-btn-bg: #e8374a;
  --c-link-btn-border: #e8374a;
}

.c-link-btn--green {
  --c-link-btn-color: #fff;
  --c-link-btn-bg: #7ec04d;
  --c-link-btn-border: #7ec04d;
}

.c-link-btn--green:hover, .c-link-btn--green:focus-visible {
  --c-link-btn-color: #7ec04d;
  --c-link-btn-bg: #fff;
  --c-link-btn-border: #7ec04d;
}

.c-sample {
  background-color: var(--color-primary);
  width: 100px;
  height: 100px;
}

@media (width >= 768px) {
  .c-sample {
    background-color: var(--color-secondary);
  }
}

.p-genreselect-channel {
  background-color: #d9eef2;
  padding-bottom: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-channel {
    padding-bottom: 18vw;
  }
}

.p-genreselect-channel-ttl {
  width: min(47.1875vw, 604px);
  height: min(5.625vw, 72px);
  margin-inline: auto;
  padding-top: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-channel-ttl {
    width: 90vw;
    height: 13.75vw;
    padding-top: 16vw;
  }
}

.p-genreselect-channel-text {
  color: #111;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-top: min(2.5vw, 32px);
  font-size: min(1.40625vw, 18px);
  font-weight: 700;
  line-height: 1.5;
}

@media (width < 768px) {
  .p-genreselect-channel-text {
    margin-top: 10vw;
    padding: 0 5vw;
    font-size: 4vw;
  }
}

.p-genreselect-channel-body {
  margin-top: min(4.375vw, 56px);
}

@media (width < 768px) {
  .p-genreselect-channel-body {
    margin-top: 10vw;
  }
}

.p-genreselect-channel-body__type {
  width: min(81.25vw, 1040px);
  height: min(14.6875vw, 188px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-channel-body__type {
    width: 90vw;
    height: 93.5vw;
  }
}

.p-genreselect-channel-body__ttl {
  width: min(81.25vw, 1040px);
  margin: min(3.125vw, 40px) auto min(1.5625vw, 20px);
  font-size: min(1.5625vw, 20px);
  font-weight: 700;
}

@media (width < 768px) {
  .p-genreselect-channel-body__ttl {
    width: 90vw;
    margin: 6vw auto 4vw;
    font-size: 5vw;
  }
}

.p-genreselect-channel-body__group {
  flex-wrap: wrap;
  gap: min(1.875vw, 24px);
  width: min(81.25vw, 1040px);
  margin: 0 auto;
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-channel-body__group {
    gap: 3vw;
    width: 90vw;
    margin: 0 auto;
  }
}

.p-genreselect-channel-body__item {
  background-color: #fff;
  border-radius: min(.625vw, 8px);
  justify-content: center;
  align-items: center;
  width: min(18.125vw, 232px);
  height: min(8.125vw, 104px);
  padding: 0 0 0 min(.78125vw, 10px);
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (width < 768px) {
  .p-genreselect-channel-body__item {
    border-radius: 2vw;
    width: 41vw;
    height: 21vw;
    padding: 0 0 0 2.5vw;
  }
}

.p-genreselect-channel-body__item:before {
  content: "";
  background: linear-gradient(#12bcc8 0%, #0176b4 100%);
  width: min(.78125vw, 10px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media (width < 768px) {
  .p-genreselect-channel-body__item:before {
    width: 2.5vw;
  }
}

.p-genreselect-channel-body__item-text {
  z-index: 1;
  color: #111;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  font-size: min(1.25vw, 16px);
  font-weight: 700;
  line-height: 1.5;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-channel-body__item-text {
    font-size: 4vw;
  }
}

.p-genreselect-channel-option {
  padding-top: min(7.8125vw, 100px);
  padding-bottom: min(2.5vw, 32px);
}

@media (width < 768px) {
  .p-genreselect-channel-option {
    padding-top: 14.5vw;
    padding-bottom: 8vw;
  }
}

.p-genreselect-channel-option__container {
  background-color: #ceeaf0;
  border: min(.078125vw, 1px) solid #c6dde1;
  border-radius: min(1.25vw, 16px);
  width: min(81.25vw, 1040px);
  margin-inline: auto;
  padding: min(7.03125vw, 90px) 0 min(6.25vw, 80px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-channel-option__container {
    border: .25vw solid #c6dde1;
    border-radius: 4vw;
    width: 93vw;
    padding: 12vw 0 10vw;
  }
}

.p-genreselect-channel-option__container:before {
  content: "";
  background-image: url("../img/channel_icon.png");
  background-repeat: no-repeat;
  background-size: min(9.375vw, 120px) min(9.14063vw, 117px);
  width: min(9.375vw, 120px);
  height: min(9.14063vw, 117px);
  position: absolute;
  top: calc(-1 * min(2.8125vw, 36px));
  left: calc(-1 * min(2.65625vw, 34px));
}

@media (width < 768px) {
  .p-genreselect-channel-option__container:before {
    background-size: 18vw 17.5vw;
    width: 18vw;
    height: 17.5vw;
    top: -8.25vw;
    left: -1vw;
  }
}

.p-genreselect-channel-option-smlttl {
  width: min(24.0625vw, 308px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-channel-option-smlttl {
    width: 59.5vw;
  }
}

.p-genreselect-channel-option-bigttl {
  width: min(54.4531vw, 697px);
  margin: min(.78125vw, 10px) auto 0;
}

@media (width < 768px) {
  .p-genreselect-channel-option-bigttl {
    width: 81.75vw;
    margin: 1vw auto 0;
  }
}

.p-genreselect-channel-option-ttltext {
  color: #111;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-top: min(4.21875vw, 54px);
  font-size: min(1.40625vw, 18px);
  font-weight: 700;
  line-height: 1.75;
}

@media (width < 768px) {
  .p-genreselect-channel-option-ttltext {
    margin-top: 10vw;
    font-size: 4vw;
  }
}

.p-genreselect-channel-option__group {
  margin-top: min(3.90625vw, 50px);
  flex-wrap: wrap;
  gap: min(1.875vw, 24px);
  width: min(67.0313vw, 858px);
  margin-inline: auto;
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-channel-option__group {
    gap: 3vw;
    width: 82vw;
    margin-top: 10vw;
  }
}

.p-genreselect-channel-option__item {
  --channel-option-bar: #ed334e;
  background-color: #fff;
  border-radius: min(1.25vw, 16px);
  flex-direction: column;
  justify-content: center;
  width: min(17.8125vw, 228px);
  height: min(9.6875vw, 124px);
  padding-left: min(3.28125vw, 42px);
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (width < 768px) {
  .p-genreselect-channel-option__item {
    border-radius: 2vw;
    width: 34vw;
    height: 27.75vw;
    padding-left: 5.5vw;
  }
}

.p-genreselect-channel-option__item:before {
  content: "";
  background-color: var(--channel-option-bar);
  width: min(.78125vw, 10px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media (width < 768px) {
  .p-genreselect-channel-option__item:before {
    width: 2.5vw;
  }
}

.p-genreselect-channel-option__name {
  color: #111;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  font-size: min(1.25vw, 16px);
  font-weight: 700;
  line-height: 1.5;
}

@media (width < 768px) {
  .p-genreselect-channel-option__name {
    font-size: 3.5vw;
  }
}

.p-genreselect-channel-option__price {
  color: #111;
  font-feature-settings: "palt" on;
  letter-spacing: .04em;
  margin-top: min(.390625vw, 5px);
  font-weight: 700;
  line-height: 1.2;
}

@media (width < 768px) {
  .p-genreselect-channel-option__price {
    font-size: 3.5vw;
  }
}

.p-genreselect-channel-option__price-num {
  font-family: Lato, sans-serif;
  font-size: min(2.1875vw, 28px);
}

@media (width < 768px) {
  .p-genreselect-channel-option__price-num {
    font-size: 6.5vw;
  }
}

.p-genreselect-channel-option__price-unit {
  margin-left: min(.46875vw, 6px);
  font-size: min(1.09375vw, 14px);
}

@media (width < 768px) {
  .p-genreselect-channel-option__price-unit {
    margin-left: 0;
    font-size: 3.5vw;
  }
}

.p-genreselect-channel-descript {
  width: min(81.25vw, 1040px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-channel-descript {
    width: 90vw;
  }
}

.p-genreselect-channel-descript p {
  color: #777;
  font-feature-settings: "palt" on;
  letter-spacing: 0 / 8em;
  padding-left: min(1.09375vw, 14px);
  font-size: min(.9375vw, 12px);
  font-weight: 400;
  line-height: 1.5;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-channel-descript p {
    padding-left: 3.5vw;
    font-size: 3vw;
  }
}

.p-genreselect-channel-descript p:before {
  content: "※";
  position: absolute;
  left: 0;
}

.p-genreselect-channel-descript p:not(:first-of-type) {
  margin-top: min(.3125vw, 4px);
}

@media (width < 768px) {
  .p-genreselect-channel-descript p:not(:first-of-type) {
    margin-top: 1vw;
  }
}

.p-genreselect-charm {
  background: linear-gradient(to right, #02adb9 0%, #016398 100%);
  padding-bottom: min(9.375vw, 120px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm {
    padding-bottom: 18vw;
  }
}

.p-genreselect-charm__bg {
  z-index: 0;
  background-image: url("../img/charm_bg.png");
  background-position: 10% min(1.5625vw, 20px);
  background-repeat: repeat;
  background-size: min(4.0625vw, 52px) min(4.0625vw, 52px);
  position: absolute;
  inset: 0;
}

@media (width < 768px) {
  .p-genreselect-charm__bg {
    background-position: 2% 4vw;
    background-size: 13vw 12.75vw;
  }
}

.p-genreselect-charm-ttl {
  z-index: 1;
  width: min(53.125vw, 680px);
  margin-inline: auto;
  padding-top: min(9.375vw, 120px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm-ttl {
    width: 85.75vw;
    padding-top: 16.25vw;
  }
}

.p-genreselect-charm-list {
  z-index: 1;
  margin-top: min(6.71875vw, 86px);
  grid-template-columns: repeat(2, 1fr);
  gap: min(5vw, 64px) min(3.125vw, 40px);
  width: min(81.25vw, 1040px);
  margin-inline: auto;
  display: grid;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 11.75vw;
    width: 88vw;
    margin-top: 15vw;
  }
}

.p-genreselect-charm-card {
  background-color: #fff;
  border-radius: min(1.25vw, 16px);
  padding: min(2.1875vw, 28px) min(1.875vw, 24px) min(3.67188vw, 47px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm-card {
    border-radius: 4vw;
    padding: 0 8vw 8vw;
  }
}

.p-genreselect-charm-card__num {
  margin-inline: auto;
  width: min(5.625vw, 72px);
  margin-top: calc(-1 * min(3.90625vw, 50px));
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm-card__num {
    width: 16vw;
    margin-top: -5vw;
  }
}

.p-genreselect-charm-card__num-img {
  width: auto;
  max-width: none;
  height: auto;
  display: block;
}

.p-genreselect-charm-card__ttl-img {
  width: auto;
  max-width: none;
  height: auto;
  margin-inline: auto;
  display: block;
}

@media (width < 768px) {
  .p-genreselect-charm-card__ttl-img {
    margin-top: -2vw;
  }
}

.p-genreselect-charm-card__cont {
  color: #111;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-top: min(.859375vw, 11px);
  font-size: min(1.25vw, 16px);
  font-weight: 500;
  line-height: 1.75;
}

@media (width < 768px) {
  .p-genreselect-charm-card__cont {
    margin-top: 4vw;
    font-size: 4vw;
  }
}

.p-genreselect-charm-card:first-child .p-genreselect-charm-card__ttl-img {
  width: min(24.6094vw, 315px);
}

@media (width < 768px) {
  .p-genreselect-charm-card:first-child .p-genreselect-charm-card__ttl-img {
    width: 60vw;
  }
}

.p-genreselect-charm-card:nth-child(2) .p-genreselect-charm-card__ttl-img {
  width: min(17.8906vw, 229px);
}

@media (width < 768px) {
  .p-genreselect-charm-card:nth-child(2) .p-genreselect-charm-card__ttl-img {
    width: 47.75vw;
  }
}

.p-genreselect-charm-card:nth-child(3) .p-genreselect-charm-card__ttl-img {
  width: min(20.7813vw, 266px);
}

@media (width < 768px) {
  .p-genreselect-charm-card:nth-child(3) .p-genreselect-charm-card__ttl-img {
    width: 53.75vw;
  }
}

.p-genreselect-charm-card:nth-child(4) .p-genreselect-charm-card__ttl-img {
  width: min(21.7188vw, 278px);
}

@media (width < 768px) {
  .p-genreselect-charm-card:nth-child(4) .p-genreselect-charm-card__ttl-img {
    width: 59.5vw;
  }
}

.p-genreselect-charm-switch {
  z-index: 1;
  margin-top: min(6.25vw, 80px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm-switch {
    margin-top: 10vw;
  }
}

.p-genreselect-charm-switch__head {
  z-index: 2;
  width: min(61.3281vw, 785px);
  margin-inline: auto;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm-switch__head {
    width: 63.75vw;
  }
}

.p-genreselect-charm-switch__bg {
  width: min(81.25vw, 1040px);
  height: min(46.9531vw, 601px);
  position: absolute;
}

@media (width < 768px) {
  .p-genreselect-charm-switch__bg {
    width: 90vw;
    height: 298.75vw;
  }
}

.p-genreselect-charm-switch__panel {
  margin-top: calc(-1 * min(7.34375vw, 94px));
  background-color: #d9eef2;
  background-image: url("../img/charm_switch_panel_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(95.3125vw, 1220px) min(49.6094vw, 635px);
  border-radius: min(1.875vw, 24px);
  width: min(81.25vw, 1040px);
  margin-inline: auto;
  padding: min(8.90625vw, 114px) 0 min(6.25vw, 80px);
  position: relative;
  overflow: hidden;
}

@media (width < 768px) {
  .p-genreselect-charm-switch__panel {
    background-color: #e4f3f6;
    background-image: url("../img/charm_switch_panel_bg_sp.png");
    background-position: top;
    background-repeat: no-repeat;
    background-size: 90vw 298.75vw;
    border-radius: 6vw;
    width: 90vw;
    margin-top: -27.5vw;
    padding: 31.25vw 0 10vw;
    position: relative;
    overflow: hidden;
  }
}

.p-genreselect-charm-switch__example {
  width: min(15.2344vw, 195px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-charm-switch__example {
    width: 45vw;
  }
}

.p-genreselect-charm-switch-list {
  grid-template-columns: repeat(3, 1fr);
  gap: min(4.29688vw, 55px);
  margin-top: min(3.59375vw, 46px);
  padding: 0 min(3.125vw, 40px);
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-charm-switch-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 17.5vw;
    margin-top: 11vw;
    padding: 0 10vw;
  }
}

.p-genreselect-charm-switch-card {
  background-color: #fff;
  border-radius: min(.78125vw, 10px);
  padding: 0 min(1.32813vw, 17px) min(2.5vw, 32px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card {
    border-radius: 2vw;
    padding: 0 5.75vw 8vw;
  }
}

.p-genreselect-charm-switch-card:after {
  content: "";
  color: #111;
  background-image: url("../img/dots.png");
  background-repeat: no-repeat;
  background-size: min(1.95313vw, 25px) min(.390625vw, 5px);
  width: min(1.95313vw, 25px);
  height: min(.390625vw, 5px);
  font-size: min(4.0625vw, 52px);
  line-height: 1;
  position: absolute;
  top: 50%;
  right: calc(-1 * min(3.20313vw, 41px));
  transform: translateY(-50%);
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card:after {
    background-image: url("../img/dots_align.png");
    background-size: 1.25vw 6.25vw;
    width: 1.25vw;
    height: 6.25vw;
    top: auto;
    bottom: -13.25vw;
    right: 50%;
  }
}

.p-genreselect-charm-switch-card:last-child:after {
  display: none;
}

.p-genreselect-charm-switch-card__month {
  margin-inline: auto;
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  border-radius: min(.46875vw, 6px);
  width: min(10.3906vw, 133px);
  margin-top: calc(-1 * min(1.5625vw, 20px));
  padding: min(.390625vw, 5px) 0 min(.703125vw, 9px);
  font-size: min(1.5625vw, 20px);
  font-weight: 700;
  line-height: 1.5;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card__month {
    border-radius: 1.5vw;
    width: 23.5vw;
    margin-top: -5vw;
    padding: 1.5vw 0 2.25vw;
    font-size: 4.25vw;
  }
}

.p-genreselect-charm-switch-card__month:after {
  content: "";
  border-top: min(.9375vw, 12px) solid #18a9bc;
  border-left: min(.625vw, 8px) solid #0000;
  border-right: min(.625vw, 8px) solid #0000;
  position: absolute;
  bottom: calc(-1 * min(.78125vw, 10px));
  left: 50%;
  transform: translateX(-50%);
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card__month:after {
    border-top: 3.5vw solid #18a9bc;
    border-left: 2vw solid #0000;
    border-right: 2vw solid #0000;
    bottom: -2.75vw;
  }
}

.p-genreselect-charm-switch-card__genre {
  text-align: center;
  margin-top: min(3.125vw, 40px);
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card__genre {
    margin-top: 9vw;
  }
}

.p-genreselect-charm-switch-card__genre-img {
  width: auto;
  max-width: none;
  height: auto;
  margin-inline: auto;
  display: block;
}

.p-genreselect-charm-switch-card__icon {
  margin-top: min(1.875vw, 24px);
  width: min(6.25vw, 80px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card__icon {
    width: 18vw;
    margin-top: 2.5vw;
  }
}

.p-genreselect-charm-switch-card__cont {
  color: #111;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  justify-content: center;
  align-items: center;
  height: min(5.625vw, 72px);
  margin-top: min(1.5625vw, 20px);
  font-size: min(1.17188vw, 15px);
  font-weight: 500;
  line-height: 1.5;
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card__cont {
    height: auto;
    margin-top: 5vw;
    font-size: 3.75vw;
  }
}

.p-genreselect-charm-switch-card:first-child .p-genreselect-charm-switch-card__month {
  background-color: #18a9bc;
}

.p-genreselect-charm-switch-card:first-child .p-genreselect-charm-switch-card__month:after {
  border-top-color: #18a9bc;
}

.p-genreselect-charm-switch-card:nth-child(2) .p-genreselect-charm-switch-card__month {
  background-color: #e2c500;
}

.p-genreselect-charm-switch-card:nth-child(2) .p-genreselect-charm-switch-card__month:after {
  border-top-color: #e2c500;
}

.p-genreselect-charm-switch-card:nth-child(3) .p-genreselect-charm-switch-card__month {
  background-color: #ee873e;
}

.p-genreselect-charm-switch-card:nth-child(3) .p-genreselect-charm-switch-card__month:after {
  border-top-color: #ee873e;
}

.p-genreselect-charm-switch-card:first-child .p-genreselect-charm-switch-card__genre-img {
  width: min(8.51563vw, 109px);
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card:first-child .p-genreselect-charm-switch-card__genre-img {
    width: 24.75vw;
  }
}

.p-genreselect-charm-switch-card:nth-child(2) .p-genreselect-charm-switch-card__genre-img {
  width: min(16.9531vw, 217px);
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card:nth-child(2) .p-genreselect-charm-switch-card__genre-img {
    width: 49.25vw;
  }
}

.p-genreselect-charm-switch-card:nth-child(3) .p-genreselect-charm-switch-card__genre-img {
  width: min(12.6563vw, 162px);
}

@media (width < 768px) {
  .p-genreselect-charm-switch-card:nth-child(3) .p-genreselect-charm-switch-card__genre-img {
    width: 34.5vw;
  }
}

.p-genreselect-kv {
  width: 100%;
  height: 58.2031vw;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-kv {
    height: 188.75vw;
  }
}

.p-genreselect-kv__bg {
  z-index: -1;
  background-color: #d9eef2;
  width: 100%;
  height: 58.9844vw;
  position: absolute;
  top: 0;
  left: 0;
}

@media (width < 768px) {
  .p-genreselect-kv__front {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.p-genreselect-kv__container {
  position: relative;
}

.p-genreselect-kv-subttl {
  width: 20.1563vw;
  margin-inline: auto;
  padding-top: 4.6875vw;
}

@media (width < 768px) {
  .p-genreselect-kv-subttl {
    width: 52vw;
    padding-top: 26.25vw;
  }
}

.p-genreselect-kv-ttl {
  width: 57.0313vw;
  margin-inline: auto;
  padding-top: 1.25vw;
}

@media (width < 768px) {
  .p-genreselect-kv-ttl {
    width: 87vw;
    padding-top: 2.25vw;
  }
}

.p-genreselect-kv-big {
  color: #111;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-inline: auto;
  background-image: url("../img/kv_ttl_big_bg.png");
  background-repeat: no-repeat;
  background-size: 61.4844vw 5vw;
  justify-content: center;
  align-items: center;
  width: 61.4844vw;
  height: 5vw;
  margin-top: 2.5vw;
  font-size: 2.03125vw;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-kv-big {
    background-image: url("../img/kv_ttl_big_bg_sp.png");
    background-size: 65vw 13.5vw;
    width: 65vw;
    height: 13.5vw;
    margin-top: 5vw;
    font-size: 3.5vw;
  }
}

.p-genreselect-kv-hot {
  margin-top: 3.125vw;
  width: fit-content;
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-kv-hot {
    margin-top: 5vw;
  }
}

.p-genreselect-kv-hot__container {
  background-color: #fff;
  border-radius: .625vw;
  width: 52.0313vw;
  padding-block: 2.10938vw 2.42188vw;
  padding-inline: 2.42188vw;
}

@media (width < 768px) {
  .p-genreselect-kv-hot__container {
    border-radius: 2vw;
    width: 66vw;
    padding-block: 3vw 4.75vw;
    padding-inline: 7.25vw 10.25vw;
  }
}

.p-genreselect-kv-hot__group {
  width: fit-content;
  margin-inline: auto;
}

.p-genreselect-kv-hot-point--top {
  width: 43.6719vw;
}

@media (width < 768px) {
  .p-genreselect-kv-hot-point--top {
    width: 67.25vw;
  }
}

.p-genreselect-kv-hot-point--bottom {
  width: 47.3438vw;
  margin-top: .703125vw;
}

@media (width < 768px) {
  .p-genreselect-kv-hot-point--bottom {
    width: 66vw;
    margin-top: 4vw;
  }
}

.p-genreselect-kv-hot__text {
  color: #777;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-top: min(.625vw, 8px);
  padding-left: 1.09375vw;
  font-size: .9375vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-kv-hot__text {
    margin-top: 1.5vw;
    padding-left: 3vw;
    font-size: 2.5vw;
  }
}

.p-genreselect-kv-hot__text:before {
  content: "※";
  position: absolute;
  left: 0;
}

.p-genreselect-kv-hot-taggroup {
  gap: .46875vw;
  margin-top: 2.34375vw;
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-kv-hot-taggroup {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
    margin-top: 4vw;
    margin-left: 2vw;
  }
}

.p-genreselect-kv-hot-tag {
  color: #fff;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  border-radius: 2.34375vw;
  align-items: center;
  width: fit-content;
  height: 2.34375vw;
  padding: 0 .9375vw;
  font-size: .9375vw;
  font-weight: 700;
  line-height: 1.5;
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-kv-hot-tag {
    border-radius: 7.5vw;
    height: 6.25vw;
    padding: 0 2.75vw 0 3.25vw;
    font-size: 2.75vw;
  }
}

.p-genreselect-kv-hot-tag--red {
  background-color: #e8374a;
}

.p-genreselect-kv-hot-tag--blue {
  background-color: #00a6ba;
}

.p-genreselect-kv-hot-tag--orange {
  background-color: #f08441;
}

.p-genreselect-kv-hot-tag--purple {
  background-color: #9b7cb1;
}

.p-genreselect-kv-hot-tag--green {
  background-color: #7ec04d;
}

.p-genreselect-kv-hot-tag--yellow {
  background-color: #e1c721;
}

.p-genreselect-kv-actions {
  z-index: 1;
  position: relative;
}

.p-genreselect-kv-actions__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.875vw;
  width: 64.375vw;
  margin-inline: auto;
  padding: 3.125vw 0 4.0625vw;
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-kv-actions__container {
    grid-template-columns: repeat(1, 1fr);
    gap: 3vw;
    width: 84vw;
    padding: 6vw 0 0;
  }
}

@media (width >= 768px) {
  .p-genreselect-kv-actions__btn {
    width: 28.125vw;
    height: 5.625vw;
    padding: 0 1.5625vw;
    font-size: 1.40625vw;
  }

  .p-genreselect-kv-actions__icon {
    flex: none;
    height: 1.25vw;
  }

  .p-genreselect-kv-actions__icon svg {
    width: auto;
    height: 100%;
  }
}

.p-genreselect-point {
  background-color: #d9eef2;
  width: 100%;
  padding-bottom: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-point {
    padding-bottom: 18vw;
  }
}

.p-genreselect-point-ttl {
  width: min(51.9531vw, 665px);
  margin-inline: auto;
  padding-top: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-point-ttl {
    width: 61.75vw;
    padding-top: 10vw;
  }
}

.p-genreselect-point-list {
  justify-content: center;
  gap: min(3.125vw, 40px);
  margin-top: min(5vw, 64px);
  padding-top: min(1.71875vw, 22px);
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-point-list {
    flex-direction: column;
    align-items: center;
    gap: 11vw;
    margin-top: 14vw;
    padding-top: 0;
  }
}

.p-genreselect-point-card {
  background-color: #fff;
  border-radius: min(1.25vw, 16px);
  width: min(25vw, 320px);
  height: min(24.9219vw, 319px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-point-card {
    border-radius: 4vw;
    width: 84vw;
    height: 36.5vw;
  }
}

.p-genreselect-point-card__pop {
  margin-top: calc(-1 * min(1.71875vw, 22px));
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-point-card__pop {
    margin-top: -4vw;
  }
}

.p-genreselect-point-card__pop-bg {
  justify-content: center;
  align-items: center;
  width: min(11.4063vw, 146px);
  margin-inline: auto;
  display: flex;
  position: relative;
  top: 0;
}

@media (width < 768px) {
  .p-genreselect-point-card__pop-bg {
    width: 28vw;
  }
}

.p-genreselect-point-card__pop-bg svg {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-point-card__pop-num {
  font-feature-settings: "palt" on;
  color: #fff;
  font-family: Lato;
  font-size: min(1.5625vw, 20px);
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);
}

@media (width < 768px) {
  .p-genreselect-point-card__pop-num {
    font-size: 4vw;
  }

  .p-genreselect-point-card__warp {
    justify-content: space-between;
    gap: 0;
    padding: 0 7vw;
    display: flex;
  }
}

.p-genreselect-point-card__body {
  flex-direction: column;
  justify-content: center;
  height: min(6.71875vw, 86px);
  margin-top: min(1.17188vw, 15px);
  padding-inline: min(2.73438vw, 35px) min(2.26563vw, 29px);
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-point-card__body {
    height: 21.5vw;
    margin-top: 0;
    padding-inline: 0;
  }
}

.p-genreselect-point-card__title {
  color: #111;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  text-align: center;
  font-size: min(1.5625vw, 20px);
  font-weight: 700;
  line-height: 1.5;
}

@media (width < 768px) {
  .p-genreselect-point-card__title {
    text-align: start;
    font-size: 4.5vw;
  }
}

.p-genreselect-point-card__text {
  color: #777;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-top: min(.625vw, 8px);
  padding-left: min(1.09375vw, 14px);
  font-size: min(.9375vw, 12px);
  font-weight: 500;
  line-height: 1.5;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-point-card__text {
    margin-top: 2vw;
    padding-left: 3.5vw;
    font-size: 3vw;
  }
}

.p-genreselect-point-card__text:before {
  content: "※";
  position: absolute;
  left: 0;
}

.p-genreselect-point-card__subtext {
  color: #111;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-top: min(.625vw, 8px);
  font-family: Noto Sans JP;
  font-size: min(.9375vw, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 1.5;
}

@media (width < 768px) {
  .p-genreselect-point-card__subtext {
    text-align: start;
    margin-top: 2vw;
    font-size: 3vw;
  }
}

.p-genreselect-point-card__img {
  margin-inline: auto;
  width: min(9.375vw, 120px);
  height: min(9.375vw, 120px);
  margin-top: min(1.95313vw, 25px);
}

@media (width < 768px) {
  .p-genreselect-point-card__img {
    margin-top: 0;
    width: 22.5vw;
    height: 22.5vw;
    margin-inline: 0;
  }
}

.p-genreselect-point-more {
  margin-top: min(4.0625vw, 52px);
  width: min(61.4063vw, 786px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-point-more {
    width: 90vw;
    margin-top: 15.25vw;
    position: relative;
  }

  .p-genreselect-point-more:before {
    content: "";
    background-image: url("../img/point_more_icon.png");
    background-repeat: no-repeat;
    background-size: 17vw 16.5vw;
    width: 17vw;
    height: 16.5vw;
    margin-top: -9.25vw;
    margin-left: -3.5vw;
    position: absolute;
  }
}

.p-genreselect-recommend {
  background-color: #fad7db;
  padding-top: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-recommend {
    padding-top: 16vw;
  }
}

.p-genreselect-recommend-ttl {
  text-align: center;
  width: fit-content;
  margin-inline: auto;
}

.p-genreselect-recommend-ttl__sub {
  width: min(28.5156vw, 365px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-recommend-ttl__sub {
    width: 71.25vw;
  }
}

.p-genreselect-recommend-ttl__sub-img {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-recommend-ttl__main {
  margin-top: min(.78125vw, 10px);
  width: min(40.1563vw, 514px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-recommend-ttl__main {
    width: 90vw;
    margin-top: 4vw;
  }
}

.p-genreselect-recommend-ttl__main-img {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-recommend-list {
  margin-top: min(4.375vw, 56px);
}

@media (width < 768px) {
  .p-genreselect-recommend-list {
    margin-top: 15.5vw;
  }
}

.p-genreselect-recommend-section {
  --recommend-section-bg: transparent;
  background-color: var(--recommend-section-bg);
  width: 100%;
  padding-bottom: min(8.125vw, 104px);
}

.p-genreselect-recommend-section:not(:first-of-type) {
  padding-top: min(8.90625vw, 114px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:not(:first-of-type) {
    padding-top: 21.5vw;
  }
}

@media (width >= 768px) {
  .p-genreselect-recommend-section:last-of-type {
    padding-bottom: min(6.25vw, 80px);
  }
}

@media (width < 768px) {
  .p-genreselect-recommend-section:last-of-type {
    padding-bottom: 0;
  }

  .p-genreselect-recommend-section {
    padding-bottom: 18vw;
  }
}

.p-genreselect-recommend-actions {
  background-color: #fbf6cc;
}

.p-genreselect-recommend-actions__container {
  grid-template-columns: repeat(2, 1fr);
  gap: min(1.875vw, 24px);
  width: min(73.75vw, 944px);
  margin-inline: auto;
  padding: min(0vw, 0px) 0 min(8.125vw, 104px);
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-recommend-actions__container {
    grid-template-columns: repeat(1, 1fr);
    gap: 3vw;
    width: 84vw;
    padding: 12vw 0 18vw;
  }
}

@media (width >= 768px) {
  .p-genreselect-recommend-actions__container .p-genreselect-recommend-actions__btn {
    width: min(32.8125vw, 420px);
  }
}

.p-genreselect-recommend-card {
  --recommend-theme: auto;
  --recommend-card-bg: #fff;
  background-color: var(--recommend-card-bg);
  border-radius: min(1.5625vw, 20px);
  width: min(70vw, 896px);
  margin-inline: auto;
  padding: min(6.25vw, 80px) min(5.625vw, 72px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-recommend-card {
    border-radius: 5vw;
    width: 78vw;
    padding: 16vw 6vw 14vw;
  }
}

.p-genreselect-recommend-card__genre {
  position: absolute;
  top: calc(-1 * min(2.96875vw, 38px));
  left: 0;
}

@media (width < 768px) {
  .p-genreselect-recommend-card__genre {
    top: -5.5vw;
  }
}

.p-genreselect-recommend-card__genre-img {
  width: auto;
  max-width: none;
  height: auto;
  display: block;
}

.p-genreselect-recommend-card__lead {
  text-align: center;
  margin-inline: auto;
}

.p-genreselect-recommend-card__lead-img {
  width: 100%;
  max-width: none;
  height: auto;
  margin-inline: auto;
  display: block;
}

.p-genreselect-recommend-card__heading {
  background-color: var(--recommend-theme);
  color: #fff;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  border-radius: min(.3125vw, 4px);
  margin-top: min(4.6875vw, 60px);
  padding: min(.390625vw, 5px) 0 min(.546875vw, 7px);
  font-size: min(1.5625vw, 20px);
  font-weight: 700;
  line-height: 1.35;
}

@media (width < 768px) {
  .p-genreselect-recommend-card__heading {
    border-radius: 1vw;
    margin-top: 6vw;
    padding: 1.25vw 0 1.75vw;
    font-size: 4.5vw;
  }
}

.p-genreselect-recommend-card__summary {
  color: #111;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-top: min(1.875vw, 24px);
  font-size: min(1.25vw, 16px);
  font-weight: 500;
  line-height: 1.75;
}

@media (width < 768px) {
  .p-genreselect-recommend-card__summary {
    margin-top: 4vw;
    font-size: 4vw;
  }
}

.p-genreselect-recommend-card-gallery {
  grid-template-columns: repeat(3, 1fr);
  gap: min(1.875vw, 24px);
  margin-top: min(3.4375vw, 44px);
  padding-bottom: min(.625vw, 8px);
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-recommend-card-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
    margin-top: 11vw;
    padding-bottom: 2vw;
  }

  .p-genreselect-recommend-card-gallery__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 3vw);
  }
}

.p-genreselect-recommend-card-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-recommend-card-gallery__note {
  color: #777;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  text-align: left;
  margin-top: min(.625vw, 8px);
  font-size: min(.78125vw, 10px);
  font-weight: 300;
  line-height: 1.5;
}

@media (width < 768px) {
  .p-genreselect-recommend-card-gallery__note {
    margin-top: 2vw;
    font-size: 2.5vw;
  }
}

.p-genreselect-recommend-card-channels {
  flex-wrap: wrap;
  gap: min(.625vw, 8px);
  margin-top: min(2.34375vw, 30px);
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

@media (width < 768px) {
  .p-genreselect-recommend-card-channels {
    gap: 2.5vw;
    margin-top: 6vw;
  }
}

.p-genreselect-recommend-card-channels__item {
  color: #111;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  background-color: #f1f1f1;
  border: min(.078125vw, 1px) solid #ebebeb;
  border-radius: min(78.0469vw, 999px);
  padding: min(.3125vw, 4px) min(1.09375vw, 14px) min(.46875vw, 6px);
  font-size: min(1.01563vw, 13px);
  font-weight: 400;
  line-height: 1.5;
}

@media (width < 768px) {
  .p-genreselect-recommend-card-channels__item {
    border: .25vw solid #ebebeb;
    border-radius: 249.75vw;
    padding: 1vw 3.5vw 1.5vw;
    font-size: 3.25vw;
  }
}

.p-genreselect-recommend-section:first-child .p-genreselect-recommend-card__genre-img {
  width: min(15.7031vw, 201px);
  height: min(6.01563vw, 77px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:first-child .p-genreselect-recommend-card__genre-img {
    width: 38vw;
    height: 15.5vw;
  }
}

.p-genreselect-recommend-section:first-child .p-genreselect-recommend-card__lead {
  width: min(54.6875vw, 700px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:first-child .p-genreselect-recommend-card__lead {
    width: 78vw;
  }
}

.p-genreselect-recommend-section:nth-child(2) .p-genreselect-recommend-card__genre-img {
  width: min(15.7031vw, 201px);
  height: min(6.01563vw, 77px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(2) .p-genreselect-recommend-card__genre-img {
    width: 38vw;
    height: 15.5vw;
  }
}

.p-genreselect-recommend-section:nth-child(2) .p-genreselect-recommend-card__lead {
  width: min(52.5vw, 672px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(2) .p-genreselect-recommend-card__lead {
    width: 78vw;
  }
}

.p-genreselect-recommend-section:nth-child(3) .p-genreselect-recommend-card__genre-img {
  width: min(20.7031vw, 265px);
  height: min(6.01563vw, 77px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(3) .p-genreselect-recommend-card__genre-img {
    width: 49vw;
    height: 15.5vw;
  }
}

.p-genreselect-recommend-section:nth-child(3) .p-genreselect-recommend-card__lead {
  width: min(59.0625vw, 756px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(3) .p-genreselect-recommend-card__lead {
    width: 78vw;
  }
}

.p-genreselect-recommend-section:nth-child(4) .p-genreselect-recommend-card__genre-img {
  width: min(23.3594vw, 299px);
  height: min(6.01563vw, 77px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(4) .p-genreselect-recommend-card__genre-img {
    width: 55vw;
    height: 15.5vw;
  }
}

.p-genreselect-recommend-section:nth-child(4) .p-genreselect-recommend-card__lead {
  width: min(54.6875vw, 700px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(4) .p-genreselect-recommend-card__lead {
    width: 78vw;
  }
}

.p-genreselect-recommend-section:nth-child(5) .p-genreselect-recommend-card__genre-img {
  width: min(23.125vw, 296px);
  height: min(6.01563vw, 77px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(5) .p-genreselect-recommend-card__genre-img {
    width: 55vw;
    height: 15.5vw;
  }
}

.p-genreselect-recommend-section:nth-child(5) .p-genreselect-recommend-card__lead {
  width: min(56.875vw, 728px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(5) .p-genreselect-recommend-card__lead {
    width: 78vw;
  }
}

.p-genreselect-recommend-section:nth-child(6) .p-genreselect-recommend-card__genre-img {
  width: min(28.0469vw, 359px);
  height: min(6.01563vw, 77px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(6) .p-genreselect-recommend-card__genre-img {
    width: 65.25vw;
    height: 15.5vw;
  }
}

.p-genreselect-recommend-section:nth-child(6) .p-genreselect-recommend-card__lead {
  width: min(56.875vw, 728px);
}

@media (width < 768px) {
  .p-genreselect-recommend-section:nth-child(6) .p-genreselect-recommend-card__lead {
    width: 78vw;
  }
}

.p-genreselect-yakyu {
  background-color: #d9eef2;
  padding-bottom: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-yakyu {
    padding-bottom: 18vw;
  }
}

.p-genreselect-yakyu-ttl {
  width: min(60.3906vw, 773px);
  height: auto;
  margin-inline: auto;
  padding-top: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-yakyu-ttl {
    width: 78.75vw;
    padding-top: 17vw;
  }
}

.p-genreselect-yakyu-body {
  margin-inline: auto;
  width: min(68.75vw, 880px);
  height: min(52.8125vw, 676px);
  margin-top: min(3.125vw, 40px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-yakyu-body {
    width: 90vw;
    height: 124.5vw;
    margin-top: 6vw;
  }
}

.p-genreselect-yakyu-body:before {
  content: "";
  z-index: 2;
  pointer-events: none;
  background-image: url("../img/yakyu_body_deco_left.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: min(18.5156vw, 237px);
  height: min(13.9063vw, 178px);
  position: absolute;
  bottom: min(2.57813vw, 33px);
  left: min(-9.21875vw, -118px);
}

@media (width < 768px) {
  .p-genreselect-yakyu-body:before {
    width: 35.5vw;
    height: 26.5vw;
    bottom: -12.75vw;
    left: -7.75vw;
  }
}

.p-genreselect-yakyu-body:after {
  content: "";
  z-index: 2;
  pointer-events: none;
  background-image: url("../img/yakyu_body_deco_right.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: min(9.375vw, 120px);
  height: min(24.8438vw, 318px);
  position: absolute;
  bottom: min(3.67188vw, 47px);
  right: min(-4.92188vw, -63px);
}

@media (width < 768px) {
  .p-genreselect-yakyu-body:after {
    width: 16vw;
    height: 42vw;
    bottom: -12.75vw;
    right: -3.75vw;
  }
}

.p-genreselect-yakyu-body__cont {
  z-index: 3;
  position: relative;
}

.p-genreselect-yakyu-body__subttl {
  width: min(42.7344vw, 547px);
  margin-inline: auto;
  padding-top: min(5.9375vw, 76px);
}

@media (width < 768px) {
  .p-genreselect-yakyu-body__subttl {
    width: 66.5vw;
    padding-top: 12vw;
  }
}

.p-genreselect-yakyu-body__ttl {
  margin-inline: auto;
  width: min(45.5469vw, 583px);
  margin-top: min(1.95313vw, 25px);
}

@media (width < 768px) {
  .p-genreselect-yakyu-body__ttl {
    width: 66.5vw;
    margin-top: 5vw;
  }
}

.p-genreselect-yakyu-body__text {
  color: #777;
  font-feature-settings: "palt" on;
  margin-inline: auto;
  letter-spacing: .08em;
  width: fit-content;
  margin-top: min(2.10938vw, 27px);
  font-size: min(.9375vw, 12px);
  font-weight: 400;
  line-height: 1.5;
}

@media (width < 768px) {
  .p-genreselect-yakyu-body__text {
    margin-top: 5vw;
    font-size: 3vw;
  }
}

.p-genreselect-yakyu-body__text p {
  padding-left: min(1.09375vw, 14px);
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-yakyu-body__text p {
    padding-left: 3.5vw;
  }
}

.p-genreselect-yakyu-body__text p:before {
  content: "※";
  position: absolute;
  left: 0;
}

.p-genreselect-yakyu-body__bannar {
  margin-inline: auto;
  width: min(52.6563vw, 674px);
  height: min(22.2656vw, 285px);
  margin-top: min(1.59375vw, 46px); 
}

@media (width < 768px) {
  .p-genreselect-yakyu-body__bannar {
    width: 70vw;
    height: 29.5vw;
    margin-top: 6vw;
  }
}

.p-genreselect-yakyu__bg {
  width: min(68.75vw, 880px);
  height: min(52.8125vw, 676px);
  position: absolute;
  top: 0;
}

@media (width < 768px) {
  .p-genreselect-yakyu__bg {
    width: 90vw;
    height: 124.5vw;
  }
}

.p-genreselect-yakyu-actions__container {
  grid-template-columns: repeat(2, 1fr);
  gap: min(1.875vw, 24px);
  width: min(73.75vw, 944px);
  margin-inline: auto;
  padding: min(6.25vw, 80px) 0 0;
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-yakyu-actions__container {
    grid-template-columns: repeat(1, 1fr);
    gap: 3vw;
    width: 84vw;
    padding: 18.75vw 0 0;
  }
}

@media (width >= 768px) {
  .p-genreselect-yakyu-actions__container .p-genreselect-yakyu-actions__btn {
    width: min(32.8125vw, 420px);
  }
}

.p-genreselect {
  font-family: Noto Sans JP, sans-serif;
}

.p-genreselect img {
  width: 100%;
  height: auto;
}

.p-genreselect-guide {
  background-color: #b2e4ea;
  background-image: url("../img/guide_bg.png");
  background-position: 10% min(1.5625vw, 20px);
  background-repeat: repeat;
  background-size: min(4.0625vw, 52px) min(4.0625vw, 52px);
}

@media (width < 768px) {
  .p-genreselect-guide {
    background-position: 2% 4vw;
    background-size: 13vw 13vw;
  }
}

.p-genreselect-guide-ttl {
  width: min(29.6094vw, 379px);
  margin-inline: auto;
  padding-top: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-guide-ttl {
    width: 66.75vw;
    padding-top: 16.25vw;
  }
}

.p-genreselect-guide-setttl {
  margin-inline: auto;
  width: min(55.4688vw, 710px);
  margin-top: min(2.89063vw, 37px);
}

@media (width < 768px) {
  .p-genreselect-guide-setttl {
    width: 90vw;
    margin-top: 10vw;
  }
}

.p-genreselect-guide-set {
  grid-template-columns: repeat(2, 1fr);
  gap: min(3.125vw, 40px);
  width: min(81.25vw, 1040px);
  margin: min(3.125vw, 40px) auto 0;
  padding-bottom: min(4.375vw, 56px);
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-guide-set {
    grid-template-columns: repeat(1, 1fr);
    gap: 8vw;
    width: 90vw;
    margin: 8vw auto 0;
    padding-bottom: 12vw;
  }
}

.p-genreselect-guide-set-item {
  width: min(39.0625vw, 500px);
  margin-inline: auto;
  overflow: hidden;
}

@media (width < 768px) {
  .p-genreselect-guide-set-item {
    width: 90vw;
  }
}

.p-genreselect-guide-set-item img {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-guide-actions {
  justify-content: center;
  display: flex;
}

.p-genreselect-guide-actions__container .c-link-btn {
  width: min(37.5vw, 480px);
}

@media (width < 768px) {
  .p-genreselect-guide-actions__container .c-link-btn {
    width: auto;
  }
}

.p-genreselect-guide-more {
  width: min(37.5vw, 480px);
  margin: min(4.6875vw, 60px) auto 0;
  padding-bottom: min(4.375vw, 56px);
}

@media (width < 768px) {
  .p-genreselect-guide-more {
    width: 84vw;
    margin: 14vw auto 0;
    padding-bottom: 10vw;
  }
}

.p-genreselect-guide-more img {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-guide-course__container {
  background-color: #fff;
  border-radius: min(1.25vw, 16px);
  width: min(66.1719vw, 847px);
  margin-inline: auto;
  padding: min(4.375vw, 56px) min(8.82813vw, 113px) min(3.75vw, 48px) min(6.25vw, 80px);
}

@media (width < 768px) {
  .p-genreselect-guide-course__container {
    border-radius: 4vw;
    width: 76.5vw;
    padding: 10vw 7.5vw 10vw 6vw;
  }
}

.p-genreselect-guide-course-ttl {
  width: min(7.8125vw, 100px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-guide-course-ttl {
    width: 25vw;
  }
}

.p-genreselect-guide-course-text {
  margin-top: min(2.10938vw, 27px);
}

@media (width < 768px) {
  .p-genreselect-guide-course-text {
    margin-top: 5vw;
  }
}

.p-genreselect-guide-course-text p {
  color: #111;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  padding-left: min(1.09375vw, 14px);
  font-size: min(1.25vw, 16px);
  font-weight: 400;
  line-height: 1.75;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-guide-course-text p {
    padding-left: 3.5vw;
    font-size: 4vw;
  }
}

.p-genreselect-guide-course-text p:before {
  content: "";
  background-color: #00a6ba;
  border-radius: 100%;
  width: min(.625vw, 8px);
  height: min(.625vw, 8px);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media (width < 768px) {
  .p-genreselect-guide-course-text p:before {
    width: 2vw;
    height: 2vw;
    top: 2.5vw;
    transform: none;
  }
}

.p-genreselect-guide-course-text p + p {
  margin-top: min(.625vw, 8px);
}

@media (width < 768px) {
  .p-genreselect-guide-course-text p + p {
    margin-top: 2vw;
  }
}

.p-genreselect-guide-tuner {
  width: min(81.25vw, 1040px);
  margin: min(5.07813vw, 65px) auto 0;
  padding-bottom: min(6.25vw, 80px);
}

@media (width < 768px) {
  .p-genreselect-guide-tuner {
    width: 90vw;
    margin: 12vw auto 0;
    padding-bottom: 12vw;
  }
}

.p-genreselect-guide-tuner img {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-guide-course-actions {
  padding-bottom: min(6.25vw, 80px);
}

@media (width < 768px) {
  .p-genreselect-guide-course-actions {
    padding-bottom: 12vw;
  }
}

.p-genreselect-guide-course-actions__container {
  grid-template-columns: repeat(2, 1fr);
  gap: min(1.875vw, 24px);
  width: min(73.75vw, 944px);
  margin-inline: auto;
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-guide-course-actions__container {
    grid-template-columns: repeat(1, 1fr);
    gap: 3vw;
    width: 84vw;
  }
}

@media (width >= 768px) {
  .p-genreselect-guide-course-actions__container .p-genreselect-guide-course-actions__btn {
    width: min(32.8125vw, 420px);
  }
}

.p-genreselect-guide-course-actions__btn {
  margin-inline: auto;
}

.p-genreselect-guide-attention {
  padding-bottom: min(8.125vw, 104px);
}

@media (width < 768px) {
  .p-genreselect-guide-attention {
    padding-bottom: 18vw;
  }
}

.p-genreselect-guide-attention__container {
  background-color: #fff;
  border-radius: min(1.25vw, 16px);
  width: min(68.75vw, 880px);
  margin-inline: auto;
  padding: min(4.375vw, 56px) min(6.25vw, 80px) min(6.25vw, 80px);
}

@media (width < 768px) {
  .p-genreselect-guide-attention__container {
    border-radius: 4vw;
    width: 78vw;
    padding: 10vw 6vw;
  }
}

.p-genreselect-guide-attention-ttl {
  color: #111;
  text-align: center;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  width: min(6.25vw, 80px);
  margin-inline: auto;
  font-weight: 700;
  line-height: 1.4;
}

@media (width < 768px) {
  .p-genreselect-guide-attention-ttl {
    width: 20vw;
  }
}

.p-genreselect-guide-attention-ttl img {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-guide-attention-groupttl {
  color: #00a6ba;
  text-align: start;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  margin-top: min(2.5vw, 32px);
  font-size: min(1.25vw, 16px);
  font-weight: 700;
  line-height: 1.4;
}

@media (width < 768px) {
  .p-genreselect-guide-attention-groupttl {
    margin-top: 7.25vw;
    font-size: 4vw;
  }
}

.p-genreselect-guide-attention-ttl + .p-genreselect-guide-attention-groupttl {
  margin-top: min(2.5vw, 32px);
}

@media (width < 768px) {
  .p-genreselect-guide-attention-ttl + .p-genreselect-guide-attention-groupttl {
    margin-top: 5vw;
  }
}

.p-genreselect-guide-attention-text {
  margin-top: min(1.01563vw, 13px);
}

@media (width < 768px) {
  .p-genreselect-guide-attention-text {
    margin-top: 3vw;
  }
}

.p-genreselect-guide-attention-text p {
  color: #111;
  font-feature-settings: "palt" on;
  letter-spacing: .08em;
  padding-left: min(1.25vw, 16px);
  font-size: min(1.09375vw, 14px);
  font-weight: 400;
  line-height: 1.5;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-guide-attention-text p {
    padding-left: 4vw;
    font-size: 3.5vw;
  }
}

.p-genreselect-guide-attention-text p:before {
  content: "※";
  position: absolute;
  left: 0;
}

.p-genreselect-guide-attention-text p + p {
  margin-top: min(.3125vw, 4px);
}

@media (width < 768px) {
  .p-genreselect-guide-attention-text p + p {
    margin-top: 1vw;
  }
}

header.site-header {
  z-index: 100;
  position: absolute;
}

header.site-header a {
  width: fit-content;
  height: auto;
  transition: opacity .25s;
  display: inline-block;
}

@media (hover: hover) and (pointer: fine) {
  header.site-header a:hover {
    opacity: .75;
  }
}

header.site-header a:focus-visible {
  opacity: .75;
}

footer.site-footer {
  font-family: Noto Sans JP, sans-serif;
}

footer.site-footer .container {
  margin-top: 56px;
  margin-bottom: 40px;
}

@media (width < 768px) {
  footer.site-footer .container {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

footer.site-footer .container img {
  width: fit-content;
  margin-inline: auto;
}

@media (width < 768px) {
  footer.site-footer .container img {
    width: 207px;
    margin-inline: auto;
  }
}

footer.site-footer .container p {
  text-align: center;
  margin-top: 22px;
  font-size: 12px;
}

@media (width < 768px) {
  footer.site-footer .container p {
    margin-top: 32px;
    font-size: 12px;
  }
}

.p-sample {
  width: 100%;
  padding: 12rem;
}

@media (width < 768px) {
  .p-sample__heading {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

@media (width >= 768px) {
  .p-sample__heading {
    font-size: 2.4rem;
    line-height: 1.33333;
  }
}

.p-sample__text {
  margin-top: 16px;
}

@media (width >= 768px) {
  .p-sample__text {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}

.p-sample__img {
  border: 1px solid #000;
  margin-top: 32px;
}

.p-sample__background {
  background-color: #000;
  background-image: url("../img/sample.png");
  background-position: center;
  background-size: cover;
  border: 1px solid #000;
  width: 200px;
  height: 200px;
  margin-top: 32px;
}

.p-genreselect-seemore {
  background-color: #d9eef2;
  padding: min(7.5vw, 96px) 0;
}

@media (width < 768px) {
  .p-genreselect-seemore {
    padding: 18vw 0;
  }
}

.p-genreselect-seemore__container {
  width: min(81.25vw, 1040px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-seemore__container {
    width: 90vw;
  }
}

.p-genreselect-seemore-ttl {
  width: min(24.375vw, 312px);
  margin-inline: auto;
}

@media (width < 768px) {
  .p-genreselect-seemore-ttl {
    width: 62.5vw;
  }
}

.p-genreselect-seemore-ttl img {
  width: 100%;
  height: auto;
  display: block;
}

.p-genreselect-seemore-list {
  margin-top: min(4.92188vw, 63px);
  grid-template-columns: 1fr 1fr;
  gap: min(3.35938vw, 43px);
  width: min(81.0156vw, 1037px);
  margin-inline: auto;
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-seemore-list {
    grid-template-columns: 1fr;
    gap: 14.75vw;
    width: 90vw;
    margin-top: 16vw;
  }
}

.p-genreselect-seemore-list__item {
  background-color: #fff;
  border-radius: min(1.875vw, 24px);
  flex-direction: column;
  align-items: center;
  width: min(32.5781vw, 417px);
  padding: min(5.625vw, 72px) min(3.125vw, 40px) min(4.375vw, 56px);
  display: flex;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-seemore-list__item {
    border-radius: 4vw;
    width: auto;
    padding: 13.5vw 5.5vw 7.75vw 8vw;
  }
}

.p-genreselect-seemore-list__item:first-child .p-genreselect-seemore-list__ttl-img {
  width: min(13.125vw, 168px);
}

@media (width < 768px) {
  .p-genreselect-seemore-list__item:first-child .p-genreselect-seemore-list__ttl-img {
    width: 42vw;
  }
}

.p-genreselect-seemore-list__item:nth-child(2) .p-genreselect-seemore-list__ttl-img {
  width: min(9.375vw, 120px);
}

@media (width < 768px) {
  .p-genreselect-seemore-list__item:nth-child(2) .p-genreselect-seemore-list__ttl-img {
    width: 30vw;
  }
}

.p-genreselect-seemore-list__icon {
  background-color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: min(6.09375vw, 78px);
  height: min(6.09375vw, 78px);
  display: flex;
  position: absolute;
  top: calc(-1 * min(3.125vw, 40px));
  left: 50%;
  transform: translateX(-50%);
}

@media (width < 768px) {
  .p-genreselect-seemore-list__icon {
    width: 19.5vw;
    height: 19.5vw;
    top: -10vw;
  }
}

.p-genreselect-seemore-list__icon svg {
  width: min(3.75vw, 48px);
  height: min(3.75vw, 48px);
  display: block;
}

@media (width < 768px) {
  .p-genreselect-seemore-list__icon svg {
    width: 12vw;
    height: 12vw;
  }
}

.p-genreselect-seemore-list__ttl {
  text-align: center;
  margin-top: min(0vw, 0px);
}

@media (width < 768px) {
  .p-genreselect-seemore-list__ttl {
    margin-top: 0;
  }
}

.p-genreselect-seemore-list__ttl-img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  display: block;
}

.p-genreselect-seemore-list__text {
  color: #111;
  letter-spacing: .08em;
  height: 100%;
  margin-top: min(1.5625vw, 20px);
  font-size: min(1.25vw, 16px);
  font-weight: 500;
  line-height: 1.75;
}

@media (width < 768px) {
  .p-genreselect-seemore-list__text {
    height: auto;
    margin-top: 4vw;
    font-size: 4vw;
  }
}

.p-genreselect-seemore-list__btn {
  --seemore-btn-color: #fff;
  --seemore-btn-bg: #7cc14a;
  --seemore-btn-border: #7cc14a;
  border: min(.15625vw, 2px) solid var(--seemore-btn-border);
  background-color: var(--seemore-btn-bg);
  width: 100%;
  min-height: min(5vw, 64px);
  color: var(--seemore-btn-color);
  border-radius: min(78.0469vw, 999px);
  justify-content: center;
  align-items: center;
  margin-top: min(2.5vw, 32px);
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s;
  display: flex;
  position: relative;
}

@media (width < 768px) {
  .p-genreselect-seemore-list__btn {
    border: .5vw solid var(--seemore-btn-border);
    width: 74vw;
    min-height: 14.5vw;
    margin-top: 6vw;
  }
}

.p-genreselect-seemore-list__btn:hover, .p-genreselect-seemore-list__btn:focus-visible {
  --seemore-btn-color: #7cc14a;
  --seemore-btn-bg: #fff;
  --seemore-btn-border: #7cc14a;
}

.p-genreselect-seemore-list__btn-text {
  color: inherit;
  text-align: center;
  letter-spacing: .04em;
  font-size: min(1.5625vw, 20px);
  font-weight: 700;
  line-height: 1.3;
}

@media (width < 768px) {
  .p-genreselect-seemore-list__btn-text {
    font-size: 3.75vw;
  }
}

.p-genreselect-seemore-list__btn-icon {
  justify-content: center;
  align-items: center;
  width: min(1.25vw, 16px);
  height: min(1.01563vw, 13px);
  display: inline-flex;
  position: absolute;
  right: min(1.875vw, 24px);
}

@media (width < 768px) {
  .p-genreselect-seemore-list__btn-icon {
    width: 4vw;
    height: 3.25vw;
    right: 5vw;
  }
}

.p-genreselect-seemore-list__btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.p-genreselect-seemore-list__btn-icon svg [stroke] {
  stroke: currentColor;
}

.p-genreselect-seemore-list__btn-icon svg [fill] {
  fill: currentColor;
}

.p-genreselect-seemore-actions {
  margin-top: min(6.25vw, 80px);
}

@media (width < 768px) {
  .p-genreselect-seemore-actions {
    margin-top: 12vw;
  }
}

.p-genreselect-seemore-actions__container {
  grid-template-columns: repeat(2, 1fr);
  gap: min(1.875vw, 24px);
  width: min(73.75vw, 944px);
  margin-inline: auto;
  display: grid;
}

@media (width < 768px) {
  .p-genreselect-seemore-actions__container {
    grid-template-columns: repeat(1, 1fr);
    gap: 3vw;
    width: 84vw;
  }
}

@media (width >= 768px) {
  .p-genreselect-seemore-actions__container .p-genreselect-seemore-actions__btn {
    width: min(32.8125vw, 420px);
  }
}

.p-genreselect-seemore-actions__btn {
  margin-inline: auto;
}

header .u-sp, footer .u-sp, .p-genreselect .u-sp {
  display: block;
}

@media (width >= 768px) {
  header .u-sp, footer .u-sp, .p-genreselect .u-sp {
    display: none;
  }
}

header .u-pc, footer .u-pc, .p-genreselect .u-pc {
  display: none;
}

@media (width >= 768px) {
  header .u-pc, footer .u-pc, .p-genreselect .u-pc {
    display: block;
  }
}

html, body {
  margin: 0;
  padding: 0;
}

p {
  margin-block: 0;
}