@charset "utf-8";

/*



このCSSファイルは全て削除予定なので追加しないで下さい


*/

// input[type="search"] {
//   padding: 0;
//   border: none;
//   border-radius: 0;
//   outline: none;
//   background: none;
// }
// select {
//   -moz-appearance: none;
//   -webkit-appearance: none;
//   appearance: none;
//   border-radius: 0;
//   border: 0;
//   margin: 0;
//   padding: 0;
//   background: none transparent;
//   vertical-align: middle;
//   font-size: inherit;
//   color: inherit;
//   box-sizing: content-box;
// }
// button {
//   -webkit-appearance: none;
//   -moz-appearance: none;
//   appearance: none;
//   padding: 0;
//   border: none;
//   outline: none;
//   background: transparent;
// }

/*-- 検索カテゴリ--*/

.m-search__category {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  line-height: 1.5;
}
.m-search__category li {
  background-color: #fff;
  color: #8d8d8f;
  border-radius: 2.4rem;
  position: relative;
  transition: 0.3s linear;
  cursor: pointer;
}
.m-search__category.-decision li {
  cursor: auto;
}
.m-search__category li:before,
.m-search__category li:after {
  width: 1.3rem;
  height: 1.4rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.m-search__category li.icon01:before {
  background-image: url("~assets/images/shared/icon-lyrics.svg");
}
.m-search__category li.icon01:after {
  background-image: url("~assets/images/shared/icon-lyrics-white.svg");
}
.m-search__category li.icon02:before {
  background-image: url("~assets/images/shared/icon-composition.svg");
}
.m-search__category li.icon02:after {
  background-image: url("~assets/images/shared/icon-composition-white.svg");
}
.m-search__category li.icon03:before {
  background-image: url("~assets/images/shared/icon-tag-gray.svg");
}
.m-search__category li.icon03:after {
  background-image: url("~assets/images/shared/icon-tag-white.svg");
}
.m-search__category li.icon04:before {
  background-image: url("~assets/images/shared/icon-arrangement-gray.svg");
}
.m-search__category li.icon04:after {
  background-image: url("~assets/images/shared/icon-arrangement-white.svg");
}
.m-search__category li.icon05:before {
  background-image: url("~assets/images/shared/icon-guitar-gray.svg");
}
.m-search__category li.icon05:after {
  background-image: url("~assets/images/shared/icon-guitar-white.svg");
}
.m-search__category li.icon06:before {
  background-image: url("~assets/images/shared/icon-piano-gray.svg");
}
.m-search__category li.icon06:after {
  background-image: url("~assets/images/shared/icon-piano-white.svg");
}
.m-search__category li.icon07:before {
  background-image: url("~assets/images/shared/icon-strings-gray.svg");
}
.m-search__category li.icon07:after {
  background-image: url("~assets/images/shared/icon-strings-white.svg");
}
.m-search__category li.icon08:before {
  background-image: url("~assets/images/shared/icon-drum-gray.svg");
}
.m-search__category li.icon08:after {
  background-image: url("~assets/images/shared/icon-drum-white.svg");
}
.m-search__category li.icon09:before {
  background-image: url("~assets/images/shared/icon-bass-gray.svg");
}
.m-search__category li.icon09:after {
  background-image: url("~assets/images/shared/icon-bass-white.svg");
}
.m-search__category li.icon10:before {
  background-image: url("~assets/images/shared/icon-synthesizer-gray.svg");
}
.m-search__category li.icon10:after {
  background-image: url("~assets/images/shared/icon-synthesizer-white.svg");
}
.m-search__category li.icon11:before {
  background-image: url("~assets/images/shared/icon-chorus-gray.svg");
}
.m-search__category li.icon11:after {
  background-image: url("~assets/images/shared/icon-chorus-white.svg");
}
.m-search__category li.icon12:before {
  background-image: url("~assets/images/shared/icon-singer-gray.svg");
}
.m-search__category li.icon12:after {
  background-image: url("~assets/images/shared/icon-singer-white.svg");
}
.m-search__category li.icon13:before {
  background-image: url("~assets/images/shared/icon-picture-gray.svg");
}
.m-search__category li.icon13:after {
  background-image: url("~assets/images/shared/icon-picture-white.svg");
}
.m-search__category li.icon14:before {
  background-image: url("~assets/images/shared/icon-mix-gray.svg");
}
.m-search__category li.icon14:after {
  background-image: url("~assets/images/shared/icon-mix-white.svg");
}
.m-search__category li:after,
.m-search__category li:hover:before {
  display: none;
}
.m-search__category li:hover:after {
  display: block;
}
.m-search__category li.selected:after,
.m-search__category li.selected2:after {
  display: block;
}
.m-search__category li.selected:before,
.m-search__category li.selected2:before {
  display: none;
}
.m-search__category li img {
  vertical-align: middle;
}
.m-search__category li.selected {
  background-color: #7db3f2;
  color: #fff;
}
.m-search__category li.selected2 {
  background-color: #725feb;
  color: #fff;
}
.m-search__category li:hover {
  color: #fff;
}
.m-search__category li.-green:hover {
  background-color: #6fc9e8;
  border: 1px #6fc9e8 solid;
}
.m-search__category li.-purple:hover {
  background-color: #725feb;
  border: 1px #725feb solid;
}
.m-search__category li.-blue:hover {
  background-color: #7db3f2;
  border: 1px #7db3f2 solid;
}

/* pc */
@media print, only screen and (min-width: 1px) {
  .m-search__category {
    margin-bottom: -1rem;
  }
  .m-search__category li {
    font-size: 1.4rem;
    border: 1px #fff solid;
    padding: 0.2rem 1.4rem 0.2rem 3.7rem;
    margin: 0 0 1rem 1rem;
  }
  .m-search__category li.icon-none {
    padding: 0.2rem 1.5rem;
  }
  .m-search__category li.selected {
    border: 1px #7db3f2 solid;
  }
  .m-search__category li.selected2 {
    border: 1px #725feb solid;
  }
}

/* sp */
// @media screen and (max-width: 767px) {
//   .m-search__category {
//     margin-bottom: -1rem;
//   }
//   .m-search__category li {
//     font-size: 1.4rem;
//     background-color: #fff;
//     padding: 0.6rem 1.5rem 0.6rem 3.3rem;
//     margin: 0 0.8rem 1rem 0;
//   }
//   .m-search__category li:before {
//     display: block;
//   }
//   .m-search__category li.icon-none {
//     padding: 0.6rem 1.5rem;
//   }
// }

/*-- フォーム --*/

// input[type="text"] {
//   // padding: 0;
//   border: none;
//   border-radius: 0;
//   outline: none;
//   background: none;
// }
// /*
// input[type="checkbox"] {
//     display: none;
// }
// input[type="checkbox"]:checked + label {
//     background: #ff0000;
// }
// */
// textarea {
//   -webkit-appearance: none;
//   -moz-appearance: none;
//   appearance: none;
//   resize: none;
//   padding: 0;
//   border: 0;
//   outline: none;
//   background: transparent;
// }
// button,
// input[type="submit"] {
//   -webkit-appearance: none;
//   -moz-appearance: none;
//   appearance: none;
//   padding: 0;
//   border: none;
//   outline: none;
//   background: transparent;
// }

.m-form__must {
  background-color: #fc44a5;
  color: #fff;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  border-radius: 0.4rem;
  padding: 0.1rem 0.7rem 0.1rem 0.8rem;
  display: inline-block;
  margin-left: 0.5rem;
}
.m-form__any {
  background-color: #eaeaef;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  border-radius: 0.4rem;
  padding: 0 0.6rem 0 0.8rem;
  display: inline-block;
  margin-left: 0.5rem;
}

.flexbetween {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/*-- ユーザー情報テーブル --*/

.m-userTable {
  width: calc(100% - 2rem);
  margin: 2rem 0 0 2rem;
  border-top: 1px #f8f7fe solid;
  border-right: 1px #f8f7fe solid;
  @include mq-sp {
    width: 100%;
    margin: 0;
    border-left: 1px #f8f7fe solid;
  }
}
.table-sp tr {
  @include mq-sp {
    position: relative;
    th {
      border-bottom: 1px #ebe8fb solid;
      vertical-align: middle;
      font-size: 1.4rem;
      padding: 1.6rem 1.5rem;
      letter-spacing: 0.05em;
      @include mq-sp {
        padding: 1.68rem 2rem;
        border-bottom: none;
      }
      span {
        font-size: 1.2rem;
      }
    }
    .m-userTable__hadle {
      @include mq-sp {
        position: absolute;
        top: -0.3rem;
        right: 0;
        border: none;
      }
    }
  }
}
.m-userTable th {
  border-bottom: 1px #ebe8fb solid;
  vertical-align: middle;
  font-size: 1.4rem;
  padding: 1.6rem 1rem;
  letter-spacing: 0.05em;
  @include mq-sp {
    padding: 0.702rem 2rem;
    border-bottom: none;
  }
  span {
    font-size: 1.2rem;
  }
}
.m-userTable td {
  border-bottom: 1px #ebe8fb solid;
  vertical-align: middle;
  font-size: 1.4rem;
  padding: 1.6rem 1rem;
  letter-spacing: 0.05em;
  @include mq-sp {
    padding: 1.45rem 2rem;
  }
  span {
    font-size: 1.2rem;
  }
}
.m-userTable th {
  width: 15.6rem;
  background-color: #f9f7fe;
  text-align: center;
  @include mq-sp {
    text-align: left;
  }
}
.m-userTable__avatar {
  width: 3.9rem;
  height: 3.9rem;
  border-radius: 50%;
}
.m-userTable__edit {
  width: 5.4rem;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s linear;
}
.m-userTable__edit:before,
.m-userTable__edit:after {
  width: 1.4rem;
  height: 1.4rem;
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.m-userTable__edit:before {
  background-image: url("~assets/images/shared/icon-edit.svg");
}
.m-userTable__edit:after {
  background-image: url("~assets/images/shared/icon-edit-purple.svg");
  display: none;
}
.m-userTable__edit:hover:before {
  display: none;
}
.m-userTable__edit:hover:after {
  display: block;
}
.m-userTable__social th {
  text-align: left !important;
}
.m-userTable__social th,
.m-userTable__social td {
  padding: 0.6rem 1.5rem;
}
.m-userTable__social img {
  vertical-align: middle;
  width: 1.6rem;
  margin-right: 0.8rem;
}
.m-userTable__hadle {
  width: 8rem;
}
.m-userTable__text {
  margin: 1rem 0 0 2rem;
  font-size: 1.4rem;
}
/* pc */
@media print, only screen and (min-width: 1px) {
}

// /* sp */
// @media screen and (max-width: 767px) {
//   .m-userTable th,
//   .m-userTable td {
//   }
//   .m-userTable th {
//     width: 100%;
//   }
// }