@charset "UTF-8";
::-moz-placeholder {
  font-family: "Yomogi", cursive;
}
::placeholder {
  font-family: "Yomogi", cursive;
}

body {
  font-family: "Yomogi", cursive;
  background-color: transparent;
  width: 100vw;
  color: rgb(114, 96, 63);
  font-family: "Yomogi", cursive;
  margin: 32px 0;
  position: relative;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  position: relative;
  padding: 20px 0 12px;
  width: 992px;
  min-height: 1400px;
  height: 100%;
  margin: 0 auto;
}
.container .chopper-wrapper .chopper {
  position: absolute;
  z-index: 0;
  top: 300px;
  right: 1065px;
  display: block;
  transform: translateX(46%) scaleX(-1);
  height: 136px;
  opacity: 0.6;
}
.container .chopper-wrapper .chopper.catched {
  animation: 1s 0.3s kf-chopper-hidden forwards;
}
.container .chopper-wrapper .chopper.right {
  height: 136px;
  transform: translate(730%);
}
.container .chopper-wrapper .chopper.right.appear {
  transform: translate(692%);
  transition: 1s 1s all;
}
.container .chopper-wrapper .chopper.right.appear.catched {
  transition: 0.6s transform;
  animation: none;
  transform: translate(730%);
}
@keyframes kf-chopper-hidden {
  0%, 20%, 40% {
    transform: translate(46%, 0%) scaleX(-1);
  }
  10%, 30% {
    transform: translate(46%, -4%) scaleX(-1);
  }
  100% {
    transform: translate(-46%, 0%) scaleX(-1);
    opacity: 0;
  }
}
.container header {
  height: auto;
  width: 700px;
  padding-top: 24px;
}
.container header .header-left {
  text-align: center;
  margin-bottom: 16px;
}
.container header .header-left .utada,
.container header .header-left h1 {
  opacity: 0;
  font-size: 48px;
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 0;
  height: 69.5px;
}
.container header .header-left .utada.appear,
.container header .header-left h1.appear {
  opacity: 1;
}
.container header .header-left .sub-title {
  font-size: 18px;
  margin: 8px 0 24px;
  opacity: 0;
}
.container header .header-left .sub-title.appear {
  transition: opacity 0.3s;
  opacity: 1;
}
.container header .header-left .search {
  margin-bottom: 0;
}
.container header .header-left p {
  animation: kf-tenmetu 1.6s infinite;
}
@keyframes kf-tenmetu {
  0%, 8%, 92%, 100% {
    opacity: 0.3;
  }
  42%, 58% {
    opacity: 1;
  }
}
.container header .header-right {
  text-align: right;
}
.container header .header-right .name-rank-ookan-wrapper {
  white-space: nowrap;
  position: absolute;
  top: 57px;
  right: 29px;
  cursor: pointer;
}
.container header .header-right .user-rank-wrapper {
  margin: 4px 30px 6px;
}
.container header .header-right .user-rank-wrapper .user-rank {
  font-size: 20px;
}
.container header .header-right .ookan-rate {
  position: relative;
}
.container header .header-right .ookan-rate li img {
  width: 20px;
  vertical-align: text-top;
}
.container header .header-right .ookan-rate li img.small-ookan {
  width: 10px;
}
.container header .header-right .request-btn {
  position: absolute;
  top: 10px;
  right: 130px;
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 8px;
  background-color: yellow;
}
.container header .header-right .request-modal p {
  margin: 0;
}
.container header .header-right .request-modal p:nth-child(1) {
  color: red;
  margin: 5px;
  font-size: 18px;
}
.container header .header-right .request-modal p:nth-child(5) {
  color: red;
}
.container header .header-right .cant-request-wrapper.logout-request-wrapper {
  right: 172px;
}
.container header .header-right .cant-request-wrapper {
  position: absolute;
  top: 10px;
  right: 130px;
  width: 140px;
}
.container header .header-right .cant-request-wrapper .cant-request {
  padding-left: 10px;
  padding-right: 10px;
  margin-right: 8px;
  background-color: yellow;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  opacity: 0.2;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-align: center;
  font-size: 18px;
}
.container header .header-right .cant-request-wrapper:hover .request-description {
  display: block;
}
.container header .header-right .cant-request-wrapper .request-description {
  display: none;
  position: absolute;
  top: 60px;
  width: 450px;
  left: -200px;
  padding: 20px;
  background-color: white;
  box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}
.container header .header-right-btn-wrapper {
  display: flex;
  position: absolute;
  top: 10px;
  right: 24px;
}
.container header .header-right-btn-wrapper .signin-btn {
  margin-right: 4px;
}
.container header .user-name {
  margin: 16px 0 24px;
  display: block;
  font-size: 20px;
  white-space: nowrap;
}
.container header .achieve {
  white-space: nowrap;
  font-size: 20px;
  display: inline-block;
  width: 180px;
  margin-bottom: 8px;
  cursor: pointer;
}
.container header .this-week-type-count {
  background: linear-gradient(transparent 60%, rgba(255, 197, 23, 0.4) 60%);
}
.container header .this-week-type-rank {
  background: linear-gradient(transparent 60%, rgba(255, 251, 41, 0.4) 60%);
}
.container header .in-description {
  text-align: left;
  font-size: 14px;
  position: absolute;
  top: 128px;
  right: 0px;
  padding: 10px;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.container header .in-description.disappear {
  display: none;
}
.container header .in-description .description-gray {
  color: #ddd;
}
.container header .in-description .description-header {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
}
.container header .login-modal,
.container header .signin-modal,
.container header .request-modal {
  width: 430px;
  padding: 30px;
  background-color: #f5f0e2;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: -530px;
  left: calc(50vw - 175px);
  opacity: 0;
  z-index: 1000;
  text-align: center;
}
.container header .login-modal .login-error,
.container header .login-modal .signin-error,
.container header .signin-modal .login-error,
.container header .signin-modal .signin-error,
.container header .request-modal .login-error,
.container header .request-modal .signin-error {
  color: red;
}
.container header .login-modal input,
.container header .signin-modal input,
.container header .request-modal input {
  width: 300px;
  height: 20px;
  padding: 16px;
  margin: 20px 0 0;
}
.container header .login-modal .btn-wrapper,
.container header .signin-modal .btn-wrapper,
.container header .request-modal .btn-wrapper {
  display: flex;
  justify-content: space-evenly;
}
.container header .login-modal .modal-login-btn,
.container header .login-modal .modal-signin-btn,
.container header .login-modal .modal-request-btn,
.container header .login-modal .modal-request-cancel-btn,
.container header .login-modal .login-cancel-btn,
.container header .login-modal .signin-cancel-btn,
.container header .signin-modal .modal-login-btn,
.container header .signin-modal .modal-signin-btn,
.container header .signin-modal .modal-request-btn,
.container header .signin-modal .modal-request-cancel-btn,
.container header .signin-modal .login-cancel-btn,
.container header .signin-modal .signin-cancel-btn,
.container header .request-modal .modal-login-btn,
.container header .request-modal .modal-signin-btn,
.container header .request-modal .modal-request-btn,
.container header .request-modal .modal-request-cancel-btn,
.container header .request-modal .login-cancel-btn,
.container header .request-modal .signin-cancel-btn {
  margin-top: 20px;
  border: 1px solid black;
  background-color: #dad1ba;
}
.container header .login-modal.appear,
.container header .signin-modal.appear,
.container header .request-modal.appear {
  top: 30px;
  opacity: 1;
  transition: all 0.3s;
}
.container header .adomin-wrapper {
  display: flex;
  position: absolute;
  top: 8px;
  left: 8px;
}
.container header .adomin-wrapper .btn {
  margin-right: 10px;
}
.container .to-en-page {
  position: absolute;
  top: 80px;
  right: 70px;
  display: inline-block;
  text-align: center;
  border: 1px solid black;
  padding: 2px;
  text-decoration: none;
  color: inherit;
}
.container .to-en-page:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
.container .search {
  position: relative;
  text-align: left;
  margin-bottom: 8px;
  display: flex;
  width: 640px;
}
.container .search form {
  width: 345px;
  height: 40px;
  display: flex;
}
.container .search input {
  width: 280px;
  padding: 10px;
  margin-right: -20px;
}
.container .search button {
  width: 65px;
  border: 1px solid black;
}
.container .search .to-typingschool {
  margin-left: 40px;
  border: none;
  margin-bottom: 0;
  width: 300px;
  background-color: red;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
.container .search .to-typingschool a {
  text-decoration: none;
  color: white;
}
.container .search .search-aid-span {
  white-space: nowrap;
  position: absolute;
  left: 352px;
  font-size: 14px;
  color: #bbb;
}
.container .song {
  display: flex;
  width: 600px;
  margin-right: 0;
  white-space: nowrap;
}
.container .song .thumbnail {
  width: 192px;
  height: 108px;
  vertical-align: baseline;
  display: inline-block;
  margin-right: 20px;
}
.container .song .youtube_etc {
  display: flex;
  flex-direction: column;
}
.container .song .speed {
  white-space: nowrap;
  display: inline-block;
  width: 88px;
  margin-bottom: 10px;
  background: linear-gradient(transparent 60%, rgb(245, 255, 102) 60%);
}
.container .song .song-title {
  display: inline-block;
  white-space: nowrap;
  position: relative;
}
.container .song .song-title > span:last-child {
  position: absolute;
  top: 40px;
  left: 16px;
}
.container .song .song-title span {
  display: inline-block;
}
.container .song .song-title img {
  width: 30px;
  display: inline-block;
  margin-right: 8px;
}
.container .song .song-title img.small-ookan {
  width: 15px;
  margin-left: 10px;
}
.container .song .song-title .btn {
  margin-bottom: 40px;
}
.container form {
  display: inline-block;
  margin-bottom: 8px;
}
.container button,
.container .btn {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  display: inline-block;
  font-family: "Yomogi", cursive;
  background-color: transparent;
  border: none;
  outline: none;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  background-color: #f5f0e2;
  text-align: center;
  margin-bottom: 16px;
  color: #8f8569;
  font-size: 18px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.container button span,
.container .btn span {
  transition: all 0.3s;
  display: block;
}
.container button span:hover,
.container .btn span:hover {
  transform: scale(1.05);
  opacity: 0.8;
}

.menu {
  position: relative;
  z-index: 100;
  list-style: none;
  padding: 0;
  display: flex;
  width: 74%;
}
.menu.menu1 {
  margin-top: 16px;
}

.menu li {
  flex: 1;
}

.menu li a {
  width: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  display: inline-block;
  text-align: center;
  padding: 8px 0px;
  background-color: #f7c9aa;
  color: #fdfbf6;
  text-decoration: none;
  border-radius: 4px;
}

.menu li a.active {
  background-color: #fcf9f0;
  color: black;
}

.menu.details {
  width: 95%;
}

.popular-search-words button {
  font-size: 12px !important;
}

.middle-header {
  margin-bottom: 32px;
  width: 675px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.middle-header .middle-left {
  margin-top: 4px;
  text-align: center;
}
.middle-header .middle-left p {
  margin: 4px 0 0 2px;
}
.middle-header .middle-left p img {
  width: 20px;
}
.middle-header .middle-left p.cotegoryOokanCountWrapper.disappear {
  display: none;
}
.middle-header .category-select-btn-wrapper {
  position: relative;
  margin-top: 4px;
  width: 200px;
  right: -60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.middle-header .category-select-btn-wrapper::before {
  content: "→";
  position: absolute;
  top: 22px;
  left: -18px;
}
.middle-header .category-select-btn-wrapper.disappear {
  display: none;
}
.middle-header .category-select-btn-wrapper .kategorydesiboru {
  position: absolute;
  top: 8px;
  left: -82px;
}
.middle-header button {
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  background-color: rgb(235, 141, 34);
  font-size: 12px;
  flex-basis: 62px;
  margin: 4px 0 0 4px;
  color: white;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.middle-header button.selected {
  background-color: rgb(236, 215, 190);
}

.main-tag {
  width: 735px;
  margin-bottom: 16px;
  display: inline-block;
}
.main-tag ul {
  width: 100%;
}

.recomended-search-method {
  color: red;
  font: bold;
  text-align: left;
}

.content.active {
  min-height: 150px;
  padding: 12px;
  display: block;
}
.content.active .singer-list-level {
  width: 650px;
  display: flex;
  flex-wrap: wrap;
}
.content.active .singer-list-level button {
  margin-right: 8px;
}

.content {
  display: none;
}

.first3,
.second3 {
  font-size: 24px;
  text-align: left;
}

.main-wrapper {
  display: flex;
  width: 948px;
  justify-content: space-between;
}

.aside-right {
  width: 192px;
  background-color: white;
}
.aside-right legend {
  background: linear-gradient(transparent, transparent, #f5f0e2) !important;
}
.aside-right fieldset {
  overflow: scroll;
  width: 100%;
  margin-bottom: 16px;
  margin-top: 20px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.aside-right fieldset button {
  height: 0px;
  line-height: 0px;
  font-size: 14px;
  margin-bottom: 0px;
  white-space: nowrap;
  padding: 10px 4px;
  background: linear-gradient(transparent, transparent, #f5f0e2) !important;
}
.aside-right .news {
  max-height: 475px;
}
.aside-right .news .news-list {
  overflow-y: scroll;
  width: 100%;
  height: 95%;
  scrollbar-width: none;
}
.aside-right .news .news-list::-webkit-scrollbar {
  display: none;
}
.aside-right .news li {
  padding: 0;
  margin: 0 0 8px;
  line-height: 16px;
}
.aside-right .news span {
  display: block;
  text-align: right;
  font-size: 14px;
  color: #fdfbf6;
  background-color: #f7c9aa;
}
.aside-right .news.important {
  max-height: 200px;
}
.aside-right .iken-wrapper {
  position: relative;
}
.aside-right .iken-wrapper textarea {
  width: 200px;
  padding: 10px;
}
.aside-right .iken-wrapper textarea::-moz-placeholder {
  color: #ccc;
  font-size: 18px;
}
.aside-right .iken-wrapper textarea::placeholder {
  color: #ccc;
  font-size: 18px;
}

.more-wrapper {
  width: 100%;
  opacity: 0.7;
  transition: opacity 0.3s;
  margin-top: 48px;
}
.more-wrapper .more {
  width: 600px;
}
.more-wrapper:hover {
  opacity: 0.9;
}
.more-wrapper.disappear {
  display: none;
}

.header-sita-ad {
  width: 974px;
  height: 280px;
  background-color: #fcfcfc;
  margin: 32px auto;
}

footer {
  position: relative;
  transform: translateX(8%);
}

.login-mode .login-modal,
.login-mode .signin-modal {
  display: none;
}

.chopphomepositioner {
  width: 500px;
  height: 412px;
}

textarea[name=kasi] {
  margin-top: 20px;
}

.win .btn,
.win button {
  color: #504833 !important;
}
.win button,
.win .btn,
.win .login-modal,
.win .signin-modal,
.win .request-modal {
  background-color: #f5f0e2 !important;
}
.win form button {
  background: linear-gradient(transparent, transparent, #f5f0e2);
}
.win .menu li a,
.win .news span {
  background-color: #d49f7b !important;
}
.win .menu li a.active {
  background-color: #f6f2e7 !important;
}
.win .middle-header button {
  color: white !important;
  background-color: rgb(216, 111, 25) !important;
}
.win .middle-header button.selected {
  background-color: rgb(236, 215, 190) !important;
}

.footer-ad {
  text-align: center;
  padding-top: 5px;
  width: 100vw;
  height: 150px;
  background-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.4);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4000;
  transition: 0.5s all;
}
.footer-ad a {
  position: relative;
  z-index: 1000;
}
.footer-ad img {
  width: 900px;
  height: 140px;
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
}
.footer-ad span {
  position: absolute;
  top: -20px;
  left: 0;
  width: 50px;
  height: 30px;
  text-align: center;
  background-color: orange;
  color: white;
  font-weight: bold;
  transition: 1.2s all;
  box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.footer-ad span.hide {
  background-color: black;
  color: white;
}
.footer-ad.disappear {
  transform: translateY(156px);
}
.footer-ad .chopper {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(calc(-50% - 540px), -41%) scaleX(-1);
  height: 100px;
  display: block;
  opacity: 0.6;
}
.footer-ad .chopper.catched:not(.right) {
  animation: 1s 0.3s kf-footer-chopper-hidden forwards ease-in-out;
}
.footer-ad .chopper.right {
  transform: translate(calc(-50% + 740px), -41%);
  opacity: 0;
}
.footer-ad .chopper.right.appear {
  opacity: 0.6;
  transform: translate(calc(-50% + 540px), -41%);
  transition: 1s 1s all;
}
.footer-ad .chopper.right.appear.catched {
  animation: 3s 0.3s kf-footer-chopper-fadeout forwards;
}
@keyframes kf-footer-chopper-hidden {
  0%, 20%, 40% {
    transform: translate(calc(-50% - 540px), -41%) scaleX(-1);
    opacity: 0.6;
  }
  10%, 30% {
    transform: translate(calc(-50% - 540px), -45%) scaleX(-1);
    opacity: 0.6;
  }
  100% {
    transform: translate(calc(-50% - 740px), -41%) scaleX(-1);
    opacity: 0;
  }
}
@keyframes kf-footer-chopper-fadeout {
  0%, 6.6%, 13.3%, 20%, 26.6%, 33.3%, 40%, 46.6%, 53.3%, 60%, 66.6%, 73.3%, 80% {
    transform: translate(calc(-50% + 540px), -41%);
    opacity: 0.6;
  }
  3.3%, 10%, 16.6%, 23.3%, 30%, 36.6%, 43.3%, 50%, 56.6%, 63.3%, 70%, 76.6% {
    transform: translate(calc(-50% + 540px), -45%);
    opacity: 0.6;
  }
  100% {
    transform: translate(calc(-50% + 520px), -41%);
    opacity: 0;
  }
}

footer {
  width: 700px;
  padding: 80px 0 150px;
  text-align: center;
  margin: 0 auto;
  transform: translateX(-100px);
}

.header-ad {
  box-sizing: border-box;
  padding: 8px 16px 24px 0;
  width: 974px;
  height: 350px;
  background-color: #fcfcfc;
  margin: 0 auto 16px;
}
.header-ad .header-img-description-wrapper {
  display: flex;
  justify-content: space-between;
}
.header-ad .header-ad-right {
  margin-left: 20px;
}
.header-ad .header-ad-right li .kaki3ten {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.header-ad .header-ad-right li .gyoukai-kizyunn {
  background: linear-gradient(transparent 0%, transparent 50%, yellow 50%);
}
.header-ad .header-ad-title {
  background: linear-gradient(transparent 0%, transparent 50%, yellow 50%);
  text-align: center;
  letter-spacing: 2px;
}
.header-ad .dmm-campaign {
  color: red;
  margin-top: 12px;
  display: block;
  font-size: 18px;
  text-align: center;
}

.dmm-btn-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

a.dmm-btn {
  text-decoration: none;
  display: inline-block;
  width: 320px;
  height: 40px;
  padding: 16px 32px;
  font-size: 20px;
  background: linear-gradient(rgb(7, 186, 7), rgb(26, 195, 26));
  border-radius: 10px;
  color: rgb(215, 249, 215);
  box-shadow: inset 2px 4px 8px white, 2px 4px 8px rgba(4, 94, 4, 0.3);
  cursor: pointer;
  transition: transform 0.3s;
}
a.dmm-btn:hover {
  transform: scale(1.03);
}
a.dmm-btn span {
  background-color: rgb(215, 249, 215);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  font-size: 24px;
  margin-left: 8px;
  animation: kf-mawarusankaku 1.3s infinite ease-in-out;
}
a.dmm-btn span::after {
  content: "▶︎";
  color: rgb(7, 186, 7);
  display: inline-block;
}
@keyframes kf-mawarusankaku {
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

[name=recommended-yougaku] {
  padding: 4px 8px;
  width: 200px;
  height: 30px;
}

.recommended-sousin {
  cursor: pointer;
  display: inline-block;
  width: 44px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: solid 1px black;
}

#orange-btn:not(.active) {
  background-color: #fdbc91 !important;
}

#red-btn:not(.active) {
  background-color: red !important;
}/*# sourceMappingURL=youtubeindex.css.map */