@charset "UTF-8";
body[data-device="pc"] {
  /*====================================================================================
ボタンの設定
====================================================================================*/
  /*------------------------------------------
ロゴ
------------------------------------------*/
  /*------------------------------------------
ボタン：通常
------------------------------------------*/
  /*------------------------------------------
検索ボタン
------------------------------------------*/
  /*------------------------------------------
通知を受けとる
------------------------------------------*/
  /*------------------------------------------
mylist 削除ボタン
------------------------------------------*/
  /*====================================================================================
タイトル
====================================================================================*/
  /*------------------------------------------
アイコン
------------------------------------------*/
  /*====================================================================================
リスト
====================================================================================*/
  /*====================================================================================
リストエリア
====================================================================================*/
  /*------------------------------------------
ランキング
------------------------------------------*/
  /*====================================================================================
タブスイッチ
====================================================================================*/
  /*====================================================================================
フッター
====================================================================================*/
}

body[data-device="pc"] #logo_wni:hover, body[data-device="pc"] .logo_site:hover {
  -webkit-animation: logo .3s ease-out forwards;
          animation: logo .3s ease-out forwards;
}

@-webkit-keyframes logo {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0.8;
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
}

@keyframes logo {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    opacity: 0.8;
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
}

body[data-device="pc"] .btn_pt01 > *, body[data-device="pc"] .btn_pt02 > * {
  transition: ease-in .1s;
}

body[data-device="pc"] .btn_pt01 > *:hover, body[data-device="pc"] .btn_pt02 > *:hover {
  transition: ease-out .2s;
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

body[data-device="pc"] .btnSerch:hover {
  -webkit-animation: btnSerch .1s ease-out forwards;
          animation: btnSerch .1s ease-out forwards;
}

@-webkit-keyframes btnSerch {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
}

@keyframes btnSerch {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
}

body[data-device="pc"] .delete {
  transition: ease-in .2s;
}

body[data-device="pc"] .delete:hover {
  transition: ease-in .2s;
  background-color: #0a7ce0;
}

body[data-device="pc"] .t_ico, body[data-device="pc"] *[class*="tit_sub"].ico:before {
  -webkit-animation: ico01 2s ease-in-out infinite alternate;
          animation: ico01 2s ease-in-out infinite alternate;
}

@-webkit-keyframes ico01 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(25deg);
            transform: rotate(25deg);
  }
}

@keyframes ico01 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(25deg);
            transform: rotate(25deg);
  }
}

body[data-device="pc"] .list_pt01 li:hover {
  -webkit-animation: btnSerch01 .25s ease-out forwards;
          animation: btnSerch01 .25s ease-out forwards;
}

@-webkit-keyframes btnSerch01 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
    box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.05);
  }
}

@keyframes btnSerch01 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
    box-shadow: 0px 10px 5px 0px rgba(0, 0, 0, 0.05);
  }
}

body[data-device="pc"] .list_pt02.mylist li:hover {
  -webkit-animation: unset;
          animation: unset;
}

body[data-device="pc"] .list_pt02.mylist li:hover a, body[data-device="pc"] .list_pt02.mylist li:hover .txt {
  -webkit-animation: list_pt02 .2s ease-out forwards;
          animation: list_pt02 .2s ease-out forwards;
}

body[data-device="pc"] .list_pt02 li:hover, body[data-device="pc"] .list_pt03 li:hover {
  -webkit-animation: list_pt02 .2s ease-out forwards;
          animation: list_pt02 .2s ease-out forwards;
}

body[data-device="pc"] .list_pt02 li a:hover:after, body[data-device="pc"] .list_pt03 li a:hover:after {
  -webkit-animation: arrow01 .2s ease-out forwards;
          animation: arrow01 .2s ease-out forwards;
}

@-webkit-keyframes arrow01 {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
}

@keyframes arrow01 {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  100% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
}

@-webkit-keyframes list_pt02 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes list_pt02 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

body[data-device="pc"] .listArea .item p a {
  position: relative;
}

body[data-device="pc"] .listArea .item p a:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #083997;
  position: absolute;
  bottom: -3px;
  left: -8px;
  opacity: 0;
}

body[data-device="pc"] .listArea .item p a:hover:after {
  -webkit-animation: listArea .4s ease-in-out forwards;
          animation: listArea .4s ease-in-out forwards;
}

@-webkit-keyframes listArea {
  0% {
    opacity: 0;
    left: -8px;
  }
  80% {
    left: 2px;
  }
  100% {
    opacity: 1;
    left: 0px;
  }
}

@keyframes listArea {
  0% {
    opacity: 0;
    left: -8px;
  }
  80% {
    left: 2px;
  }
  100% {
    opacity: 1;
    left: 0px;
  }
}

body[data-device="pc"] .link a {
  transition: ease-in .1s;
}

body[data-device="pc"] .link a:hover {
  transition: ease-out .1s;
  opacity: 0.6;
}

body[data-device="pc"] .list_pt01.rank li:hover i {
  -webkit-animation: rank 2s linear infinite;
          animation: rank 2s linear infinite;
}

@-webkit-keyframes rank {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes rank {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

body[data-device="pc"] .menu_tab_switch .switch, body[data-device="pc"] .switchArea .switch {
  transition: ease-in .2s;
}

body[data-device="pc"] .menu_tab_switch .switch:hover, body[data-device="pc"] .switchArea .switch:hover {
  transition: ease-out .2s;
}

body[data-device="pc"] #footer > * {
  transition: ease-in .2s;
}

body[data-device="pc"] #footer > *:hover {
  transition: ease-out .2s;
  opacity: 0.6;
}