@charset "UTF-8";
@media screen and (min-width: 401px) {
  [no-pc] {
    display: none !important; }
  [only-sp] {
    display: none !important; } }

@media screen and (max-width: 400px) {
  [no-sp] {
    display: none !important; }
  [only-pc] {
    display: none !important; } }

.Flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  @media screen and (max-width: 400px) {
    .Flex {
      display: block; } }

.Flex-box {
  text-align: center; }
  .Flex-box p {
    text-align: left;
    padding: 2px; }
  @media screen and (max-width: 400px) {
    .Flex-box {
      display: block; } }

#Song {
  position: relative; }
  @media screen and (min-width: 401px) {
    #Song {
      padding-top: 120px; } }
  @media screen and (max-width: 400px) {
    #Song {
      padding-top: 60px; } }
  #Song h2 {
    position: relative;
    display: block;
    padding: 15px 0;
    text-align: center; }
    @media screen and (min-width: 401px) {
      #Song h2 {
        margin: 0 auto;
        width: 100%;
        height: 66px;
        background: linear-gradient(-225deg, transparent 12px, #f150af 12px), linear-gradient(#f150af 0%, #f150af 100%), linear-gradient(-45deg, #f150af 12px, #f150af 12px), linear-gradient(#f150af 0%, #f150af 100%);
        background-position: top left, bottom left, bottom right, top right;
        background-size: 50.1% 50.1%;
        background-repeat: no-repeat; } }
    @media screen and (max-width: 400px) {
      #Song h2 {
        width: 100%;
        height: 70px;
        background-color: #f150af;
        border-top: solid 4px rgba(255, 255, 255, 0.8); } }
    #Song h2 img {
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto; }
      @media screen and (min-width: 401px) {
        #Song h2 img {
          height: 40px;
          width: auto; } }
      @media screen and (max-width: 400px) {
        #Song h2 img {
          height: 40px;
          width: auto; } }
    #Song h2:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 16px;
      width: 994px;
      height: 66px;
      background: linear-gradient(-45deg, transparent 25%, #f25eb5 25%, #f25eb5 50%, transparent 50%, transparent 75%, #f25eb5 75%, #f25eb5);
      background-size: 100px 100px;
      background-attachment: scroll; }
    #Song h2:after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 64px;
      background-image: url(../img/title_bg_leftbottom.png);
      background-repeat: no-repeat;
      background-position: left top; }

@media screen and (min-width: 401px) {
  .Song-content {
    margin: 0 auto;
    width: 1020px;
    padding: 5px;
    margin-bottom: 60px;
    background: linear-gradient(-225deg, transparent 14px, rgba(255, 255, 255, 0.9) 14px), linear-gradient(rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(-45deg, transparent 14px, rgba(255, 255, 255, 0.9) 14px), linear-gradient(rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
    background-position: top left, bottom left, bottom right, top right;
    background-size: 50.1% 50.1%;
    background-repeat: no-repeat; } }

@media screen and (max-width: 400px) {
  .Song-content {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8); } }

@media screen and (min-width: 401px) {
  .Song-content-inner {
    width: 900px;
    margin: 0 auto;
    padding: 20px 0 0 0; } }

@media screen and (max-width: 400px) {
  .Song-content-inner {
    width: 100%;
    padding: 20px 20px 0px 20px; } }

@media screen and (min-width: 401px) {
  .Song-list {
    width: 1020px; } }

@media screen and (max-width: 400px) {
  .Song-list {
    width: 100%; } }

@media screen and (min-width: 401px) {
  .Song-list > li {
    width: 953px;
    height: 288px;
    margin: 0 auto 40px auto; } }

@media screen and (max-width: 400px) {
  .Song-list > li {
    width: 100%;
    height: 740px;
    margin-bottom: 40px; } }

.Song-list-box {
  display: block;
  position: relative; }
  @media screen and (min-width: 401px) {
    .Song-list-box-shadow {
      width: 953px;
      height: 288px;
      position: absolute;
      top: 0px;
      left: 0px;
      background: linear-gradient(-225deg, transparent 24px, #bcc9cb 24px), linear-gradient(#bcc9cb 0%, #bcc9cb 100%), linear-gradient(-45deg, transparent 24px, #bcc9cb 24px), linear-gradient(#bcc9cb 0%, #bcc9cb 100%);
      background-position: top left, bottom left, bottom right, top right;
      background-size: 50.1% 50.1%;
      background-repeat: no-repeat; } }
  @media screen and (max-width: 400px) {
    .Song-list-box-shadow {
      width: 100%;
      height: 740px; } }
  .Song-list-box-white {
    overflow: hidden; }
    @media screen and (min-width: 401px) {
      .Song-list-box-white {
        width: 955px;
        height: 290px;
        position: absolute;
        top: -6px;
        left: -6px;
        background: linear-gradient(-225deg, transparent 22px, #fff 22px), linear-gradient(#fff 0%, #fff 100%), linear-gradient(-45deg, transparent 22px, #fff 22px), linear-gradient(#fff 0%, #fff 100%);
        background-position: top left, bottom left, bottom right, top right;
        background-size: 50.1% 50.1%;
        background-repeat: no-repeat; } }
    @media screen and (max-width: 400px) {
      .Song-list-box-white {
        width: 100%;
        height: 740px;
        background-color: #fff;
        padding: 4px 0; } }
  .Song-list-box-blue {
    overflow: hidden; }
    @media screen and (min-width: 401px) {
      .Song-list-box-blue {
        width: 947px;
        height: 282px;
        position: absolute;
        top: 4px;
        left: 4px;
        background: linear-gradient(-225deg, transparent 20px, #77eaf1 20px), linear-gradient(#77eaf1 0%, #77eaf1 100%), linear-gradient(-45deg, transparent 20px, #77eaf1 20px), linear-gradient(#77eaf1 0%, #77eaf1 100%);
        background-position: top left, bottom left, bottom right, top right;
        background-size: 50.1% 50.1%;
        background-repeat: no-repeat; } }
    @media screen and (max-width: 400px) {
      .Song-list-box-blue {
        width: 100%;
        height: 740px;
        background-color: #77eaf1;
        padding: 4px 0; } }
  .Song-list-box-inner {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    color: #000; }
    @media screen and (min-width: 401px) {
      .Song-list-box-inner {
        width: 935px;
        height: 270px;
        position: absolute;
        top: 6px;
        left: 6px;
        background: linear-gradient(-225deg, transparent 18px, #fff 18px), linear-gradient(#fff 0%, #fff 100%), linear-gradient(-45deg, transparent 18px, #fff 18px), linear-gradient(#fff 0%, #fff 100%);
        background-position: top left, bottom left, bottom right, top right;
        background-size: 50.1% 50.1%;
        background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; } }
    @media screen and (max-width: 400px) {
      .Song-list-box-inner {
        width: 100%;
        height: 740px;
        background-color: rgba(255, 255, 255, 0.9); } }
  .Song-list-box-inner:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 82px;
    left: -311px;
    width: 140%;
    height: 75%;
    background-image: url(../img/songlist_box_bg.png);
    background-position: left bottom;
    background-repeat: no-repeat;
    transform: skew(-45deg); }
    @media screen and (max-width: 400px) {
      .Song-list-box-inner:before {
        display: none; } }
  .Song-list-box-inner-bg {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: absolute;
    z-index: 1; }
    .Song-list-box-inner-bg > dl {
      display: flex;
      flex-wrap: wrap; }
      @media screen and (min-width: 401px) {
        .Song-list-box-inner-bg > dl {
          margin: 0 0 0 12px; } }
      @media screen and (max-width: 400px) {
        .Song-list-box-inner-bg > dl {
          margin: 0 6px 0 6px; } }

@media screen and (min-width: 401px) {
  .Song-list-jacket {
    order: 0;
    margin: 16px 0px 0px 4px;
    width: 236px;
    height: 236px; } }

@media screen and (max-width: 400px) {
  .Song-list-jacket {
    order: 1;
    margin: 16px 0px 25px 45px;
    width: 300px;
    height: 300px; } }

.Song-list-title {
  position: relative;
  font-family: "M PLUS 1p",'Montserrat','Helvetica Neue',"メイリオ","Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-weight: 800;
  font-size: 130%; }
  @media screen and (min-width: 401px) {
    .Song-list-title {
      order: 1;
      width: 658px;
      height: 48px;
      margin: 16px 0px 12px 12px;
      background-image: url(../img/songlist_title_bg.png);
      background-size: 658px auto;
      background-repeat: no-repeat; } }
  @media screen and (max-width: 400px) {
    .Song-list-title {
      order: 0;
      width: 100%;
      margin: 16px 0px 12px 0px;
      padding: 5px 0 5px 42px;
      background: linear-gradient(-225deg, transparent 10px, #0dd0d7 10px), linear-gradient(#0dd0d7 0%, #0dd0d7 100%), linear-gradient(-45deg, transparent 10px, #0dd0d7 10px), linear-gradient(#0dd0d7 0%, #0dd0d7 100%);
      background-position: top left, bottom left, bottom right, top right;
      background-size: 50.1% 50.1%;
      background-repeat: no-repeat; } }
  @media screen and (max-width: 400px) {
    .Song-list-title:before {
      content: "";
      display: block;
      position: absolute;
      left: 8px;
      top: 7px;
      background-image: url(../img/song/songlist_title_icon.png);
      background-repeat: no-repeat;
      background-size: 100% auto;
      width: 30px;
      height: 30px; } }
  .Song-list-title .CharaSetting-1 {
    display: block;
    color: #fff; }
    @media screen and (min-width: 401px) {
      .Song-list-title .CharaSetting-1 {
        position: absolute;
        top: 5px;
        left: 50px;
        width: 600px;
        height: 34px;
        padding: 4px 4px 4px 8px;
        background-image: url(../img/songlist_title_bg_inner.png);
        background-size: auto 34px;
        background-repeat: no-repeat;
        background-position: right top; } }
    @media screen and (max-width: 400px) {
      .Song-list-title .CharaSetting-1 {
        top: 5px;
        left: 50px;
        width: 330px;
        min-height: 34px;
        padding: 4px 4px 4px 8px;
        background-color: #0c7478; } }
  .Song-list-title .CharaSetting-2 {
    display: block;
    color: #fff; }
    @media screen and (min-width: 401px) {
      .Song-list-title .CharaSetting-2 {
        position: absolute;
        top: 5px;
        left: 50px;
        width: 598px;
        height: 34px;
        padding: 4px 4px 4px 8px;
        background-image: url(../img/song/songlist_title_bg_2chara.png);
        background-position: right center;
        background-size: auto auto;
        background-repeat: no-repeat; } }
    @media screen and (max-width: 400px) {
      .Song-list-title .CharaSetting-2 {
        top: 5px;
        left: 50px;
        width: 280px;
        min-height: 34px;
        padding: 4px 4px 4px 8px;
        background-color: #0c7478; }
        .Song-list-title .CharaSetting-2:after {
          content: "";
          display: block;
          position: absolute;
          right: 2px;
          top: 10px;
          bottom: 0;
          width: 60px;
          height: 26px;
          background-image: url(../img/song/songlist_title_bg_2chara.png);
          background-position: right center;
          background-size: auto auto;
          background-repeat: no-repeat; } }
  .Song-list-title .CharaSetting-3 {
    color: #fff; }
    @media screen and (min-width: 401px) {
      .Song-list-title .CharaSetting-3 {
        top: 5px;
        left: 50px;
        width: 598px;
        height: 34px;
        padding: 4px 4px 4px 8px;
        position: absolute;
        background-image: url(../img/song/songlist_title_bg_3chara.png);
        background-position: right center;
        background-size: auto auto;
        background-repeat: no-repeat; } }
    @media screen and (max-width: 400px) {
      .Song-list-title .CharaSetting-3 {
        top: 5px;
        left: 50px;
        width: 280px;
        min-height: 34px;
        padding: 4px 4px 4px 8px;
        background-color: #0c7478; }
        .Song-list-title .CharaSetting-3:after {
          content: "";
          display: block;
          position: absolute;
          right: 2px;
          top: 10px;
          bottom: 0;
          width: 60px;
          height: 26px;
          background-image: url(../img/song/songlist_title_bg_3chara.png);
          background-position: right center;
          background-size: auto auto;
          background-repeat: no-repeat; } }
  .Song-list-title .CharaSetting-6 {
    color: #fff; }
    @media screen and (min-width: 401px) {
      .Song-list-title .CharaSetting-6 {
        top: 5px;
        left: 50px;
        width: 598px;
        height: 34px;
        padding: 4px 4px 4px 8px;
        position: absolute;
        background-image: url(../img/song/songlist_title_bg_6chara.png);
        background-position: right center;
        background-size: auto auto;
        background-repeat: no-repeat; } }
    @media screen and (max-width: 400px) {
      .Song-list-title .CharaSetting-6 {
        top: 5px;
        left: 50px;
        width: 280px;
        min-height: 34px;
        padding: 4px 4px 4px 8px;
        background-color: #0c7478; }
        .Song-list-title .CharaSetting-6:after {
          content: "";
          display: block;
          position: absolute;
          right: 2px;
          top: 10px;
          bottom: 0;
          width: 60px;
          height: 26px;
          background-image: url(../img/song/songlist_title_bg_6chara.png);
          background-position: right center;
          background-size: auto auto;
          background-repeat: no-repeat; } }

.Song-list-mixmode {
  order: 3; }
  @media screen and (min-width: 401px) {
    .Song-list-mixmode {
      position: absolute;
      right: 20px;
      top: 113px; } }
  @media screen and (max-width: 400px) {
    .Song-list-mixmode {
      margin: 0 0 12px 8px; } }
  .Song-list-mixmode dl {
    display: flex; }
    @media screen and (min-width: 401px) {
      .Song-list-mixmode dl {
        width: 100%;
        flex-wrap: nowrap; } }
    @media screen and (max-width: 400px) {
      .Song-list-mixmode dl {
        width: 380px;
        flex-wrap: wrap; } }
  .Song-list-mixmode dt {
    background-color: #e5406e;
    color: #fff;
    transform: skew(14deg);
    padding: 0; }
    @media screen and (min-width: 401px) {
      .Song-list-mixmode dt {
        width: 120px;
        height: 31px; } }
    @media screen and (max-width: 400px) {
      .Song-list-mixmode dt {
        width: 80px;
        height: 58px; } }
    .Song-list-mixmode dt > span {
      display: block;
      padding-top: 2px;
      transform: skew(-14deg);
      font-family: 'Kosugi Maru','Helvetica Neue',"メイリオ","Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
      font-weight: bold;
      font-size: 75%;
      text-align: center; }
      @media screen and (max-width: 400px) {
        .Song-list-mixmode dt > span {
          padding-top: 14px;
          line-height: 140%; } }
  .Song-list-mixmode dd {
    display: flex;
    background-color: #ffd8e3;
    transform: skew(14deg); }
    @media screen and (min-width: 401px) {
      .Song-list-mixmode dd {
        padding: 4px 0 0 14px;
        width: 516px;
        height: 31px; } }
    @media screen and (max-width: 400px) {
      .Song-list-mixmode dd {
        flex-wrap: wrap;
        padding: 6px 0 0 14px;
        width: 292px;
        height: 58px; } }
    .Song-list-mixmode dd div {
      transform: skew(-14deg);
      margin: 0 2px; }
  @media screen and (max-width: 400px) {
    .Song-list-mixmode .lv_easy {
      width: 84px; } }
  @media screen and (max-width: 400px) {
    .Song-list-mixmode .lv_normal {
      width: 84px; } }
  @media screen and (max-width: 400px) {
    .Song-list-mixmode .lv_hard {
      width: 84px; } }
  .Song-list-mixmode .lv_extreme {
    width: 88px;
    height: 24px;
    background-image: url(../img/song/lv_blank.png);
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media screen and (max-width: 400px) {
      .Song-list-mixmode .lv_extreme {
        width: 84px;
        margin-left: -5px; } }
  .Song-list-mixmode .lv_exextreme {
    width: 88px;
    height: 24px;
    background-image: url(../img/song/lv_blank.png);
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media screen and (max-width: 400px) {
      .Song-list-mixmode .lv_exextreme {
        width: 84px; } }

@media screen and (max-width: 400px) {
  .spbr {
    display: block; } }

.Song-list-acmode {
  order: 2; }
  @media screen and (min-width: 401px) {
    .Song-list-acmode {
      position: absolute;
      right: 20px;
      top: 76px; } }
  @media screen and (max-width: 400px) {
    .Song-list-acmode {
      margin: 0 0 6px 8px; } }
  .Song-list-acmode dl {
    display: flex; }
    @media screen and (min-width: 401px) {
      .Song-list-acmode dl {
        width: 100%;
        flex-wrap: nowrap; } }
    @media screen and (max-width: 400px) {
      .Song-list-acmode dl {
        width: 380px;
        flex-wrap: wrap; } }
  .Song-list-acmode dt {
    background-color: #3e64c4;
    color: #fff;
    transform: skew(14deg);
    padding: 0; }
    @media screen and (min-width: 401px) {
      .Song-list-acmode dt {
        width: 120px;
        height: 31px; } }
    @media screen and (max-width: 400px) {
      .Song-list-acmode dt {
        width: 80px;
        height: 58px; } }
    .Song-list-acmode dt > span {
      display: block;
      padding-top: 2px;
      transform: skew(-14deg);
      font-family: 'Kosugi Maru','Helvetica Neue',"メイリオ","Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
      font-weight: bold;
      font-size: 75%;
      text-align: center; }
      @media screen and (max-width: 400px) {
        .Song-list-acmode dt > span {
          padding-top: 14px;
          line-height: 140%; } }
  .Song-list-acmode dd {
    display: flex;
    background-color: #dae0f8;
    transform: skew(14deg); }
    @media screen and (min-width: 401px) {
      .Song-list-acmode dd {
        padding: 4px 0 0 14px;
        width: 516px;
        height: 31px; } }
    @media screen and (max-width: 400px) {
      .Song-list-acmode dd {
        flex-wrap: wrap;
        padding: 6px 0 0 14px;
        width: 292px;
        height: 58px; } }
    .Song-list-acmode dd div {
      transform: skew(-14deg);
      margin: 0 2px; }
  .Song-list-acmode .lv_extreme {
    width: 88px;
    height: 24px;
    background-image: url(../img/song/lv_extreme.png);
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media screen and (max-width: 400px) {
      .Song-list-acmode .lv_extreme {
        margin-left: -5px;
        width: 84px; } }
  .Song-list-acmode .lv_easy.Off {
    width: 88px;
    height: 24px;
    background-image: url(../img/song/lv_blank.png);
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media screen and (max-width: 400px) {
      .Song-list-acmode .lv_easy.Off {
        width: 84px; } }
  .Song-list-acmode .lv_exextreme {
    width: 88px;
    height: 24px;
    background-image: url(../img/song/lv_exextreme.png);
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media screen and (max-width: 400px) {
      .Song-list-acmode .lv_exextreme {
        width: 84px; } }
  .Song-list-acmode .lv_exextreme.Off {
    width: 88px;
    height: 24px;
    background-image: url(../img/song/lv_blank.png);
    background-size: 100% auto;
    background-repeat: no-repeat; }
    @media screen and (max-width: 400px) {
      .Song-list-acmode .lv_exextreme.Off {
        width: 84px; } }

.lv_easy {
  width: 88px;
  height: 24px;
  background-image: url(../img/song/lv_easy.png);
  background-size: 100% auto;
  background-repeat: no-repeat; }
  @media screen and (max-width: 400px) {
    .lv_easy {
      width: 84px; } }

.lv_normal {
  width: 88px;
  height: 24px;
  background-image: url(../img/song/lv_normal.png);
  background-size: 100% auto;
  background-repeat: no-repeat; }
  @media screen and (max-width: 400px) {
    .lv_normal {
      width: 84px; } }

.lv_hard {
  width: 88px;
  height: 24px;
  background-image: url(../img/song/lv_hard.png);
  background-size: 100% auto;
  background-repeat: no-repeat; }
  @media screen and (max-width: 400px) {
    .lv_hard {
      width: 84px; } }

.SlideOn {
  width: 26px;
  height: 26px;
  background-image: url(../img/song/slideon.png);
  background-size: 100% auto;
  background-repeat: no-repeat; }

.SlideOff {
  width: 26px;
  height: 26px;
  background-image: url(../img/song/slideoff.png);
  background-size: 100% auto;
  background-repeat: no-repeat; }

.Song-list-info {
  order: 4; }
  @media screen and (min-width: 401px) {
    .Song-list-info {
      width: 650px;
      position: absolute;
      right: 8px;
      top: 156px; } }
  @media screen and (max-width: 400px) {
    .Song-list-info {
      margin-left: 4px; } }
  .Song-list-info ul {
    display: flex;
    flex-wrap: wrap; }
    .Song-list-info ul li {
      border: solid 3px #c7dfdf;
      transform: skew(14deg);
      background-color: #fff; }
      @media screen and (min-width: 401px) {
        .Song-list-info ul li {
          width: 48%;
          height: 34px; } }
      @media screen and (max-width: 400px) {
        .Song-list-info ul li {
          width: 380px;
          height: 34px; } }
      @media screen and (min-width: 401px) {
        .Song-list-info ul li.name17 {
          height: 49px; } }
      @media screen and (max-width: 400px) {
        .Song-list-info ul li.name17 > dl > dd {
          font-size: 80%; } }
      .Song-list-info ul li.Off {
        display: none; }
      .Song-list-info ul li dl {
        display: flex;
        transform: skew(-14deg);
        padding: 3px;
        line-height: 100%; }
        .Song-list-info ul li dl dt {
          padding: 3px 0 0 0;
          text-align: center;
          font-family: "M PLUS 1p",'Montserrat','Helvetica Neue',"メイリオ","Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
          font-weight: 700;
          font-size: 75%;
          background-color: #0c7478;
          transform: skew(14deg);
          color: #fff; }
          @media screen and (min-width: 401px) {
            .Song-list-info ul li dl dt {
              width: 92px;
              height: 22px; } }
          @media screen and (max-width: 400px) {
            .Song-list-info ul li dl dt {
              width: 82px;
              height: 22px; } }
          .Song-list-info ul li dl dt span {
            display: block;
            transform: skew(-14deg); }
        .Song-list-info ul li dl dd {
          font-family: 'Montserrat','Kosugi Maru','Helvetica Neue',"メイリオ","ヒラギノ角ゴ Pro W3", sans-serif; }
          @media screen and (min-width: 401px) {
            .Song-list-info ul li dl dd {
              width: 280px;
              height: 22px;
              padding: 3px 4px 0 8px;
              font-size: 90%; } }
          @media screen and (max-width: 400px) {
            .Song-list-info ul li dl dd {
              width: 280px;
              height: 22px;
              padding: 3px 0px 0 10px;
              font-size: 100%; } }

@media screen and (min-width: 401px) {
  .Song-list-music {
    margin: 0 2% 1% 0; } }

@media screen and (max-width: 400px) {
  .Song-list-music {
    margin: 0 0 2% 0; } }

@media screen and (min-width: 401px) {
  .Song-list-lyrics {
    margin: 0 0% 1% 0; } }

@media screen and (max-width: 400px) {
  .Song-list-lyrics {
    margin: 0 0 2% 0; } }

@media screen and (min-width: 401px) {
  .Song-list-arranger {
    margin: 0 2% 1% 0; } }

@media screen and (max-width: 400px) {
  .Song-list-arranger {
    margin: 0 0 2% 0; } }

@media screen and (min-width: 401px) {
  .Song-list-illustrator {
    margin: 0 0% 1% 0; } }

@media screen and (max-width: 400px) {
  .Song-list-illustrator {
    margin: 0 0 2% 0; } }

.Song-list-nav .levels {
  text-align: center; }
  @media screen and (max-width: 400px) {
    .Song-list-nav .levels {
      padding-top: 10px; } }

.Song-list-nav .levels-box {
  display: inline-block; }

.Song-list-nav .level {
  color: transparent;
  user-select: none;
  font-size: 0;
  display: block; }
  @media screen and (min-width: 401px) {
    .Song-list-nav .level {
      margin: 0 2px;
      width: 62px;
      height: 62px; } }
  @media screen and (max-width: 400px) {
    .Song-list-nav .level {
      width: 50px;
      height: 50px; } }

.Song-list-nav input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("../img/song/btn_songnav.png");
  background-size: 1100% 200%; }
  @media screen and (min-width: 401px) {
    .Song-list-nav input[type="checkbox"] {
      width: 62px;
      height: 62px;
      margin: 2px; } }
  @media screen and (max-width: 400px) {
    .Song-list-nav input[type="checkbox"] {
      width: 50px;
      height: 50px; } }

.Song-list-nav input::-ms-check {
  display: none; }

.Song-list-nav .levels-box:nth-child(1) input[type="checkbox"] {
  background-position: 0 0; }

.Song-list-nav .levels-box:nth-child(2) input[type="checkbox"] {
  background-position: -100% 0; }

.Song-list-nav .levels-box:nth-child(3) input[type="checkbox"] {
  background-position: -200% 0; }

.Song-list-nav .levels-box:nth-child(4) input[type="checkbox"] {
  background-position: -300% 0; }

.Song-list-nav .levels-box:nth-child(5) input[type="checkbox"] {
  background-position: -400% 0; }

.Song-list-nav .levels-box:nth-child(6) input[type="checkbox"] {
  background-position: -500% 0; }

.Song-list-nav .levels-box:nth-child(7) input[type="checkbox"] {
  background-position: -600% 0; }

.Song-list-nav .levels-box:nth-child(8) input[type="checkbox"] {
  background-position: -700% 0; }

.Song-list-nav .levels-box:nth-child(9) input[type="checkbox"] {
  background-position: -800% 0; }

.Song-list-nav .levels-box:nth-child(10) input[type="checkbox"] {
  background-position: -900% 0; }

.Song-list-nav .levels-box:nth-child(11) input[type="checkbox"] {
  background-position: -1000% 0; }

.Song-list-nav input[type="checkbox"]:checked {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("../img/song/btn_songnav.png");
  background-size: 1100% 200%; }
  @media screen and (min-width: 401px) {
    .Song-list-nav input[type="checkbox"]:checked {
      width: 62px;
      height: 62px;
      margin: 2px; } }
  @media screen and (max-width: 400px) {
    .Song-list-nav input[type="checkbox"]:checked {
      width: 50px;
      height: 50px; } }

.Song-list-nav .levels-box:nth-child(1) input[type="checkbox"]:checked {
  background-position: 0 -100%; }

.Song-list-nav .levels-box:nth-child(2) input[type="checkbox"]:checked {
  background-position: -100% -100%; }

.Song-list-nav .levels-box:nth-child(3) input[type="checkbox"]:checked {
  background-position: -200% -100%; }

.Song-list-nav .levels-box:nth-child(4) input[type="checkbox"]:checked {
  background-position: -300% -100%; }

.Song-list-nav .levels-box:nth-child(5) input[type="checkbox"]:checked {
  background-position: -400% -100%; }

.Song-list-nav .levels-box:nth-child(6) input[type="checkbox"]:checked {
  background-position: -500% -100%; }

.Song-list-nav .levels-box:nth-child(7) input[type="checkbox"]:checked {
  background-position: -600% -100%; }

.Song-list-nav .levels-box:nth-child(8) input[type="checkbox"]:checked {
  background-position: -700% -100%; }

.Song-list-nav .levels-box:nth-child(9) input[type="checkbox"]:checked {
  background-position: -800% -100%; }

.Song-list-nav .levels-box:nth-child(10) input[type="checkbox"]:checked {
  background-position: -900% -100%; }

.Song-list-nav .levels-box:nth-child(11) input[type="checkbox"]:checked {
  background-position: -1000% -100%; }

.Song-list-nav button {
  display: block;
  width: 100%;
  height: 100%;
  color: transparent;
  user-select: none;
  font-size: 0; }