@charset "UTF-8";
/********************************************
pixivコミックランキング2019
********************************************/
html {
  font-size: 62.5%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  word-wrap: break-word; }

body {
  font-size: 1.6rem;
  background-color: #fff;
  margin: 0;
  padding: 0; }

*,
*::before,
*::after {
  box-sizing: border-box; }

h1, h2, h3, div, p, ul, li {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

img {
  max-width: 100%;
  height: auto;
  line-height: 0;
  vertical-align: bottom; }

#ptop {
  margin: 0;
  position: fixed;
  right: -60px;
  bottom: 15px;
  z-index: 8888;
  text-align: right;
  width: 60px;
  height: 61px;
  transition: all 0.8s ease; }
  @media only screen and (min-width: 992px) {
    #ptop {
      right: -120px;
      width: 120px;
      height: 122px; } }
  #ptop:hover {
    cursor: pointer; }
  #ptop.active {
    right: 10px; }
    @media only screen and (min-width: 992px) {
      #ptop.active {
        right: 15px; } }

.pcOnly {
  display: none; }
  @media only screen and (min-width: 992px) {
    .pcOnly {
      display: inline; } }

.spOnly {
  display: inline; }
  @media only screen and (min-width: 992px) {
    .spOnly {
      display: none; } }

/*アニメーション*/
@keyframes loop {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes loop2 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-200%); } }
.zoomIn {
  animation: animation-zoomIn 1s linear both; }

.zoomInDray {
  animation: animation-zoomIn 1s linear .2s both; }

@keyframes animation-zoomIn {
  0% {
    z-index: auto;
    opacity: 0;
    transform: scale(2); }
  40% {
    opacity: 1;
    transform: scale(0.8); }
  70% {
    opacity: 1;
    transform: scale(1.1); }
  to {
    opacity: 1;
    transform: scale(1); } }
.fadeInUp {
  animation: fadeInUp .5s ease-out 0s both; }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100px, 0); }
  50% {
    opacity: .4; }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }
/*タイトル*/
#title {
  position: relative; }
  #title #titleBkWrap {
    display: flex;
    width: 100%;
    height: 76vw;
    max-height: 583px;
    overflow: hidden; }
    @media only screen and (min-width: 992px) {
      #title #titleBkWrap {
        height: 583px; } }
    #title #titleBkWrap img {
      height: 100%;
      width: auto;
      max-width: none; }
      @media only screen and (min-width: 1200px) {
        #title #titleBkWrap img {
          height: 100%;
          max-height: none; } }
      #title #titleBkWrap img:first-child {
        animation: loop 100s -50s linear infinite; }
      #title #titleBkWrap img:last-child {
        animation: loop2 100s linear infinite; }
  #title #corplogo {
    display: none; }
    @media only screen and (min-width: 1200px) {
      #title #corplogo {
        position: absolute;
        display: block;
        width: 230px;
        top: 47px;
        left: 36px; } }
  #title .snsBtn {
    display: flex;
    position: absolute;
    top: 4.266vw;
    right: 4.266vw; }
    @media only screen and (min-width: 992px) {
      #title .snsBtn {
        top: 42px;
        right: 42px; } }
    #title .snsBtn img {
      width: 8.266vw;
      height: auto;
      margin-left: 3.466vw; }
      @media only screen and (min-width: 992px) {
        #title .snsBtn img {
          width: 62px;
          margin-left: 25px; } }
  #title h1 {
    position: absolute;
    top: 17.6vw;
    left: 0;
    width: 100%;
    text-align: center; }
    #title h1 img {
      width: 84vw;
      height: auto;
      max-width: 628px; }
    @media only screen and (min-width: 992px) {
      #title h1 {
        top: 15vw; } }
    @media only screen and (min-width: 1200px) {
      #title h1 {
        top: 111px; }
        #title h1 img {
          width: 628px; } }
  #title .titleSub {
    opacity: 0;
    position: absolute;
    width: 100%;
    top: 54.933vw;
    left: 0;
    text-align: center; }
    #title .titleSub img {
      width: 54.666vw;
      height: auto;
      max-width: 410px; }
    @media screen and (min-width: 769px) and (max-width: 991px) {
      #title .titleSub {
        top: 47vw; } }
    @media only screen and (min-width: 992px) {
      #title .titleSub {
        top: 38vw; } }
    @media only screen and (min-width: 1200px) {
      #title .titleSub {
        top: 370px; }
        #title .titleSub img {
          width: 410px; } }

/*インデックスボタン*/
#indexBtn ul {
  position: relative;
  height: 46.666vw;
  width: 82.133vw;
  margin: 5vw auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  @media only screen and (min-width: 992px) {
    #indexBtn ul {
      width: 960px;
      height: 140px;
      margin: 30px auto 0; } }
  #indexBtn ul li {
    width: 20.533vw;
    padding: 0 2vw;
    margin: 0 0 2vw 0; }
    @media only screen and (min-width: 992px) {
      #indexBtn ul li {
        width: 136px;
        margin: 0;
        padding: 0 10px; } }
    @media only screen and (min-width: 992px) {
      #indexBtn ul li img:hover {
        opacity: 0.7; } }

/*ランキングコンテンツ*/
.contentsWrap {
  padding: 4vw; }
  @media only screen and (min-width: 992px) {
    .contentsWrap {
      padding: 30px 0; } }
  .contentsWrap .contents {
    background-color: #fff;
    padding: 6vw 4vw; }
    @media only screen and (min-width: 992px) {
      .contentsWrap .contents {
        width: 1040px;
        margin: 0 auto;
        padding: 40px; } }
    .contentsWrap .contents h2 {
      width: 100%;
      text-align: center; }
    @media only screen and (min-width: 992px) {
      .contentsWrap .contents .no01 {
        margin: 70px 0 0; } }
    .contentsWrap .contents .no01 ul li.image {
      margin-bottom: 55px; }
    @media only screen and (min-width: 992px) {
      .contentsWrap .contents .no01 ul li.image {
        float: left;
        margin-bottom: 0; }
      .contentsWrap .contents .no01 ul li.txt {
        float: right;
        width: 520px; }
      .contentsWrap .contents .no01 ul li.btn {
        float: right;
        width: 520px;
        margin: 60px 0 0; }
      .contentsWrap .contents .no01 ul::after {
        content: "";
        display: block;
        clear: both; } }
    .contentsWrap .contents .no01 ul .crown {
      width: 25.6vw;
      margin: 6.666vw auto 0; }
      @media only screen and (min-width: 992px) {
        .contentsWrap .contents .no01 ul .crown {
          width: 193px;
          margin: 30px auto 0; } }
    .contentsWrap .contents .no01 ul .cbTitle {
      font-size: 2.2rem;
      font-weight: bold;
      line-height: 1.4;
      text-align: center;
      margin: 3vw 0; }
      @media only screen and (min-width: 992px) {
        .contentsWrap .contents .no01 ul .cbTitle {
          font-size: 3.2rem;
          margin: 50px 0 30px; } }
    .contentsWrap .contents .no01 ul .author {
      font-size: 1.6rem;
      font-weight: bold;
      line-height: 1.2;
      text-align: center;
      margin: 3vw 0; }
      @media only screen and (min-width: 992px) {
        .contentsWrap .contents .no01 ul .author {
          font-size: 2.2rem;
          margin: 0; } }
    .contentsWrap .contents .no01 ul .cover {
      width: 72vw;
      margin: 0 auto 5vw; }
      @media only screen and (min-width: 992px) {
        .contentsWrap .contents .no01 ul .cover {
          width: 400px; } }
    .contentsWrap .contents .wrapTwo {
      margin: 8vw 0 0;
      /*総合以外*/
      /*総合用*/ }
      @media only screen and (min-width: 992px) {
        .contentsWrap .contents .wrapTwo {
          display: flex;
          margin: 0;
          justify-content: space-around;
          border-top: 1px solid #c7c7c7; } }
      .contentsWrap .contents .wrapTwo ul {
        display: block;
        border-top: 1px solid #c7c7c7;
        padding: 6.333vw 0 2vw; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .wrapTwo ul {
            border: none;
            padding: 0; } }
        .contentsWrap .contents .wrapTwo ul li:nth-child(1) {
          width: 65%;
          float: right;
          padding-left: 3vw; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapTwo ul li:nth-child(1) {
              width: 260px;
              margin: 0 auto;
              border: none;
              float: none;
              padding-left: 0; } }
          .contentsWrap .contents .wrapTwo ul li:nth-child(1) .crown {
            width: 25.6vw;
            margin: 0 auto; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .wrapTwo ul li:nth-child(1) .crown {
                width: 166px;
                margin: 45px auto; } }
        .contentsWrap .contents .wrapTwo ul li:nth-child(2) {
          width: 35%;
          float: left; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapTwo ul li:nth-child(2) {
              width: 260px;
              margin: 0 auto;
              text-align: center;
              float: none; } }
        .contentsWrap .contents .wrapTwo ul li:nth-child(3) {
          width: 65%;
          float: left; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapTwo ul li:nth-child(3) {
              width: 452px;
              margin: 0 auto; } }
          .contentsWrap .contents .wrapTwo ul li:nth-child(3) .cbTitle {
            font-size: 1.4rem;
            font-weight: bold;
            line-height: 1.4;
            text-align: center;
            margin: 0 0 2vw 3vw; }
            .contentsWrap .contents .wrapTwo ul li:nth-child(3) .cbTitle.t-s {
              font-size: 1.3rem; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .wrapTwo ul li:nth-child(3) .cbTitle {
                font-size: 3.2rem;
                margin: 52px 0 0; }
                .contentsWrap .contents .wrapTwo ul li:nth-child(3) .cbTitle.t-s {
                  font-size: 2rem; } }
          .contentsWrap .contents .wrapTwo ul li:nth-child(3) .author {
            font-size: 1.2rem;
            font-weight: bold;
            line-height: 1.2;
            text-align: center;
            margin: 2vw 0 2vw 3vw; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .wrapTwo ul li:nth-child(3) .author {
                font-size: 2.1rem;
                margin: 28px 0 0; }
                .contentsWrap .contents .wrapTwo ul li:nth-child(3) .author.t-s {
                  font-size: 1.6rem;
                  margin: 19px 0 0; } }
        .contentsWrap .contents .wrapTwo ul li:nth-child(4) {
          clear: both;
          width: 100%;
          padding: 6.666vw 0; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapTwo ul li:nth-child(4) {
              padding: 62px 0 0; } }
        .contentsWrap .contents .wrapTwo ul::after {
          content: "";
          display: block;
          clear: both; }
      .contentsWrap .contents .wrapTwo ul.overall {
        display: flex;
        flex-wrap: wrap;
        border: none;
        padding: 0; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .wrapTwo ul.overall {
            display: block; } }
        .contentsWrap .contents .wrapTwo ul.overall li:nth-child(1) {
          width: 100%;
          border-top: 1px solid #c7c7c7;
          float: none; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapTwo ul.overall li:nth-child(1) {
              border: none; } }
          .contentsWrap .contents .wrapTwo ul.overall li:nth-child(1) .crown {
            width: 25.6vw;
            margin: 6.666vw auto; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .wrapTwo ul.overall li:nth-child(1) .crown {
                width: 166px;
                margin: 45px auto; } }
        .contentsWrap .contents .wrapTwo ul.overall li:nth-child(2) {
          width: 50%;
          float: none; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapTwo ul.overall li:nth-child(2) {
              width: 260px;
              margin: 0 auto;
              text-align: center; } }
        .contentsWrap .contents .wrapTwo ul.overall li:nth-child(3) {
          width: 50%;
          float: none; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapTwo ul.overall li:nth-child(3) {
              width: 452px;
              margin: 0 auto; } }
          .contentsWrap .contents .wrapTwo ul.overall li:nth-child(3) .cbTitle {
            font-size: 2rem;
            font-weight: bold;
            line-height: 1.4;
            text-align: center;
            margin: 17vw 0 2vw 3vw; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .wrapTwo ul.overall li:nth-child(3) .cbTitle {
                font-size: 3.2rem;
                margin: 52px 0 0; } }
          .contentsWrap .contents .wrapTwo ul.overall li:nth-child(3) .author {
            font-size: 1.4rem;
            font-weight: bold;
            line-height: 1.2;
            text-align: center;
            margin: 2vw 0 2vw 3vw; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .wrapTwo ul.overall li:nth-child(3) .author {
                font-size: 2.1rem;
                margin: 28px 0 0; } }
        .contentsWrap .contents .wrapTwo ul.overall li:nth-child(4) {
          width: 100%;
          margin: 6.666vw 0;
          padding: 0; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapTwo ul.overall li:nth-child(4) {
              margin: 62px 0 0;
              padding: 0; } }
    .contentsWrap .contents .wrapFour {
      margin: 0; }
      @media only screen and (min-width: 992px) {
        .contentsWrap .contents .wrapFour {
          display: flex;
          margin: 65px 0;
          justify-content: space-around;
          border-top: 1px solid #c7c7c7; } }
      .contentsWrap .contents .wrapFour ul {
        border-top: 1px solid #c7c7c7;
        display: block;
        clear: both;
        padding: 6.333vw 0 2vw; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .wrapFour ul {
            border: none;
            padding: 65px 0 0; } }
        .contentsWrap .contents .wrapFour ul li:nth-child(1) {
          width: 65%;
          float: right; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapFour ul li:nth-child(1) {
              width: 180px;
              float: none;
              margin: 0 auto; } }
          .contentsWrap .contents .wrapFour ul li:nth-child(1) .crown {
            width: 24vw;
            margin: 3.333vw auto 6.666vw; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .wrapFour ul li:nth-child(1) .crown {
                width: 154px;
                margin: 0 auto 24px;
                text-align: center; } }
        .contentsWrap .contents .wrapFour ul li:nth-child(2) {
          width: 35%;
          float: left; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapFour ul li:nth-child(2) {
              width: 180px;
              height: 256px;
              text-align: center;
              float: none;
              margin: 0 auto 24px; }
              .contentsWrap .contents .wrapFour ul li:nth-child(2) img {
                height: 100%;
                width: auto;
                max-width: none; } }
        .contentsWrap .contents .wrapFour ul li:nth-child(3) {
          width: 65%;
          float: left; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapFour ul li:nth-child(3) {
              width: 200px;
              float: none;
              margin: 0 auto; } }
          .contentsWrap .contents .wrapFour ul li:nth-child(3) .cbTitle {
            font-size: 1.8rem;
            font-weight: bold;
            line-height: 1.4;
            text-align: center;
            margin: 0 auto 3.333vw; }
            .contentsWrap .contents .wrapFour ul li:nth-child(3) .cbTitle.t-m {
              font-size: 1.4rem; }
            .contentsWrap .contents .wrapFour ul li:nth-child(3) .cbTitle.t-s {
              font-size: 1.3rem; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .wrapFour ul li:nth-child(3) .cbTitle {
                height: 40px;
                font-size: 1.8rem;
                margin: 0 auto; }
                .contentsWrap .contents .wrapFour ul li:nth-child(3) .cbTitle.w2l {
                  font-size: 1.3rem; } }
          .contentsWrap .contents .wrapFour ul li:nth-child(3) .author {
            font-size: 1.4rem;
            font-weight: bold;
            line-height: 1.2;
            text-align: center; }
            .contentsWrap .contents .wrapFour ul li:nth-child(3) .author.t-m {
              font-size: 1.1rem; }
        .contentsWrap .contents .wrapFour ul li:nth-child(4) {
          clear: both;
          width: 100%;
          padding: 6.666vw 0; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapFour ul li:nth-child(4) {
              width: 180px;
              padding: 25px 0;
              margin: 0 auto; } }
        .contentsWrap .contents .wrapFour ul::after {
          content: "";
          display: block;
          clear: both; }
    @media only screen and (min-width: 992px) {
      .contentsWrap .contents .wrapThree {
        display: flex;
        margin: 0;
        justify-content: space-around;
        border-top: 1px solid #c7c7c7; } }
    .contentsWrap .contents .wrapThree ul {
      border-top: 1px solid #c7c7c7;
      display: block;
      clear: both;
      padding: 6.333vw 0 2vw; }
      @media only screen and (min-width: 992px) {
        .contentsWrap .contents .wrapThree ul {
          border: none;
          padding: 65px 0 0; } }
      .contentsWrap .contents .wrapThree ul li:nth-child(1) {
        width: 65%;
        float: right; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .wrapThree ul li:nth-child(1) {
            width: 300px;
            float: none; } }
        .contentsWrap .contents .wrapThree ul li:nth-child(1) .crown {
          width: 24vw;
          margin: 3.333vw auto 6.666vw; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapThree ul li:nth-child(1) .crown {
              width: 168px;
              margin: 0 auto 24px;
              text-align: center; }
              .contentsWrap .contents .wrapThree ul li:nth-child(1) .crown img {
                max-width: inherit; } }
      .contentsWrap .contents .wrapThree ul li:nth-child(2) {
        width: 35%;
        float: left; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .wrapThree ul li:nth-child(2) {
            width: 300px;
            height: 256px;
            text-align: center;
            float: none;
            margin: 0 0 24px; }
            .contentsWrap .contents .wrapThree ul li:nth-child(2) img {
              height: 100%;
              width: auto;
              max-width: none; } }
      .contentsWrap .contents .wrapThree ul li:nth-child(3) {
        width: 65%;
        float: left; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .wrapThree ul li:nth-child(3) {
            width: 300px;
            float: none; } }
        .contentsWrap .contents .wrapThree ul li:nth-child(3) .cbTitle {
          font-size: 1.8rem;
          font-weight: bold;
          line-height: 1.4;
          text-align: center;
          margin: 0 0 2vw 3vw; }
          .contentsWrap .contents .wrapThree ul li:nth-child(3) .cbTitle.t-m {
            font-size: 1.4rem; }
          .contentsWrap .contents .wrapThree ul li:nth-child(3) .cbTitle.t-s {
            font-size: 1.3rem;
            margin-top: -1rem; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapThree ul li:nth-child(3) .cbTitle {
              height: 60px;
              font-size: 1.8rem;
              margin: 0 auto; }
              .contentsWrap .contents .wrapThree ul li:nth-child(3) .cbTitle.t-m {
                font-size: 1.3rem; }
              .contentsWrap .contents .wrapThree ul li:nth-child(3) .cbTitle.t-s {
                margin-top: 0; } }
        .contentsWrap .contents .wrapThree ul li:nth-child(3) .author {
          font-size: 1.4rem;
          font-weight: bold;
          line-height: 1.2;
          text-align: center;
          margin: 0 0 0 3vw; }
          .contentsWrap .contents .wrapThree ul li:nth-child(3) .author.t-m {
            font-size: 1.2rem; }
          .contentsWrap .contents .wrapThree ul li:nth-child(3) .author.t-s {
            font-size: 1.2rem; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .wrapThree ul li:nth-child(3) .author {
              height: 50px;
              margin: 0; } }
      .contentsWrap .contents .wrapThree ul li:nth-child(4) {
        clear: both;
        width: 100%;
        padding: 6.666vw 0; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .wrapThree ul li:nth-child(4) {
            width: 180px;
            padding: 25px 0;
            margin: 0 auto; } }
      .contentsWrap .contents .wrapThree ul::after {
        content: "";
        display: block;
        clear: both; }
    .contentsWrap .contents .trend {
      border-top: 1px solid #c7c7c7;
      padding: 6.666vw 0; }
      @media only screen and (min-width: 992px) {
        .contentsWrap .contents .trend {
          padding: 45px 0;
          margin: 45px 0 0; } }
      .contentsWrap .contents .trend h3 {
        font-size: 1.4rem;
        text-align: center; }
        .contentsWrap .contents .trend h3 img {
          width: 32.8vw;
          margin: 0 5px 3px 0; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .trend h3 img {
              width: 210px; } }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .trend h3 {
            font-size: 2.8rem; } }
        .contentsWrap .contents .trend h3 em {
          font-style: normal;
          line-height: 1.2;
          display: inline-block;
          border-bottom: 1px solid #000; }
      .contentsWrap .contents .trend h4 {
        font-size: 1.4rem;
        text-align: center;
        margin: 1vw 0 0 0; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .trend h4 {
            font-size: 2.8rem;
            margin: 10px 0 0 0; } }
        .contentsWrap .contents .trend h4 em {
          font-style: normal; }
      .contentsWrap .contents .trend .wrap {
        margin: 5.6vw 0 0 0; }
        @media only screen and (min-width: 992px) {
          .contentsWrap .contents .trend .wrap {
            margin: 50px 30px 0;
            display: flex;
            justify-content: space-between; } }
        .contentsWrap .contents .trend .wrap .cut {
          text-align: center;
          font-size: 1.2rem; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .trend .wrap .cut {
              width: 460px;
              font-size: 1.8rem; } }
          .contentsWrap .contents .trend .wrap .cut img {
            width: 50vw; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .trend .wrap .cut img {
                width: 298px; } }
          .contentsWrap .contents .trend .wrap .cut p {
            margin: 3.2vw 0 0 0; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .trend .wrap .cut p {
                margin: 30px 0 0 0; } }
        .contentsWrap .contents .trend .wrap .text {
          margin: 7vw 0 0 0;
          font-size: 1.3rem;
          font-weight: bold;
          line-height: 1.6; }
          @media only screen and (min-width: 992px) {
            .contentsWrap .contents .trend .wrap .text {
              width: 385px;
              margin: 0;
              font-size: 2rem; } }
          .contentsWrap .contents .trend .wrap .text p {
            margin: 1rem 0 0 0; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .trend .wrap .text p.ch {
                font-size: 1.6rem;
                margin-top: 24px; } }
          .contentsWrap .contents .trend .wrap .text ul {
            font-weight: normal; }
            @media only screen and (min-width: 992px) {
              .contentsWrap .contents .trend .wrap .text ul {
                font-size: 1.6rem; } }
            .contentsWrap .contents .trend .wrap .text ul li {
              margin-bottom: .5em; }

/*カテゴリー色設定*/
#overall {
  background-color: #fee2e1; }
  #overall h2 {
    background-color: #ff4f4e; }

#love {
  background-color: #ffdaf0; }
  #love h2 {
    background-color: #ff6bc9; }
  #love .trend h3 em {
    border-bottom: 1px solid #fbb0dc; }
  #love .trend h4 em {
    color: #ff69d2; }

#gag {
  background-color: #feebc0; }
  #gag h2 {
    background-color: #ffb001; }
  #gag .trend h3 em {
    border-bottom: 1px solid #ffb000; }
  #gag .trend h4 em {
    color: #ffb000; }

#every {
  background-color: #d4f2fc; }
  #every h2 {
    background-color: #4fcbed; }
  #every .trend h3 em {
    border-bottom: 1px solid #4fcbee; }
  #every .trend h4 em {
    color: #4fcbee; }

#work {
  background-color: #d6e4ff; }
  #work h2 {
    background-color: #6194ff; }
  #work .trend h3 em {
    border-bottom: 1px solid #6194ff; }
  #work .trend h4 em {
    color: #6194ff; }

#work {
  background-color: #d6e4ff; }
  #work h2 {
    background-color: #6194ff; }
  #work .trend h3 em {
    border-bottom: 1px solid #6194ff; }
  #work .trend h4 em {
    color: #6194ff; }

#bl {
  background-color: #efdeff; }
  #bl h2 {
    background-color: #c27dff; }
  #bl .trend h3 em {
    border-bottom: 1px solid #c27dff; }
  #bl .trend h4 em {
    color: #c27dff; }

#essay {
  background-color: #ddf7d0; }
  #essay h2 {
    background-color: #76e145; }
  #essay .trend h3 em {
    border-bottom: 1px solid #76e144; }
  #essay .trend h4 em {
    color: #76e144; }

/*マンガ書影　フチ*/
.cover img,
.cut img {
  border: 1px solid #ccc; }

/*リンクボタン*/
.linkBtnL {
  width: 70vw;
  margin: 0 auto; }
  @media only screen and (min-width: 992px) {
    .linkBtnL {
      width: 382px; } }
  .linkBtnL a {
    position: relative;
    width: 70vw;
    height: 14vw;
    overflow: hidden;
    border-radius: 14vw;
    display: block;
    background: #ffc200 url("../img/bt_read_off.png") center center no-repeat;
    background-size: 38.666vw 4.266vw;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.3);
    transition: color 0.3s cubic-bezier(0.23, 0.76, 0.37, 0.99); }
    @media only screen and (min-width: 992px) {
      .linkBtnL a {
        width: 382px;
        height: 77px;
        border-radius: 77px;
        background-image: none; }
        .linkBtnL a:hover {
          border: 2px solid #ffc200; }
        .linkBtnL a::before {
          position: absolute;
          top: 24px;
          left: 78px;
          z-index: 100;
          content: '';
          display: inline-block;
          width: 220px;
          height: 30px;
          background-image: url("../img/bt_read_off.png");
          background-size: contain;
          background-repeat: no-repeat;
          vertical-align: middle; }
        .linkBtnL a::after {
          position: absolute;
          top: 0;
          left: -100%;
          background: #fff;
          display: block;
          content: "";
          width: 382px;
          height: 77px;
          border-radius: 77px;
          transition: left 0.3s cubic-bezier(0.23, 0.76, 0.37, 0.99); }
        .linkBtnL a:hover::before {
          top: 22px;
          left: 76px;
          background-image: url("../img/bt_read_on.png"); }
        .linkBtnL a:hover::after {
          left: 0; } }

.linkBtnM {
  width: 70vw;
  margin: 0 auto; }
  @media only screen and (min-width: 992px) {
    .linkBtnM {
      width: 312px; } }
  .linkBtnM a {
    position: relative;
    width: 70vw;
    height: 14vw;
    overflow: hidden;
    border-radius: 14vw;
    display: block;
    background: #ffc200 url("../img/bt_read_off.png") center center no-repeat;
    background-size: 38.666vw 4.266vw;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.3);
    transition: color 0.3s cubic-bezier(0.23, 0.76, 0.37, 0.99); }
    @media only screen and (min-width: 992px) {
      .linkBtnM a {
        width: 312px;
        height: 77px;
        border-radius: 77px;
        background-image: none; }
        .linkBtnM a:hover {
          border: 2px solid #ffc200; }
        .linkBtnM a::before {
          position: absolute;
          top: 24px;
          left: 44px;
          z-index: 100;
          content: '';
          display: inline-block;
          width: 220px;
          height: 30px;
          background-image: url("../img/bt_read_off.png");
          background-size: contain;
          background-repeat: no-repeat;
          vertical-align: middle; }
        .linkBtnM a::after {
          position: absolute;
          top: 0;
          left: -100%;
          background: #fff;
          display: block;
          content: "";
          width: 312px;
          height: 77px;
          border-radius: 77px;
          transition: left 0.3s cubic-bezier(0.23, 0.76, 0.37, 0.99); }
        .linkBtnM a:hover::before {
          top: 22px;
          left: 42px;
          background-image: url("../img/bt_read_on.png"); }
        .linkBtnM a:hover::after {
          left: 0; } }

.linkBtnS {
  width: 70vw;
  margin: 0 auto; }
  @media only screen and (min-width: 992px) {
    .linkBtnS {
      width: 170px; } }
  .linkBtnS a {
    position: relative;
    width: 70vw;
    height: 14vw;
    overflow: hidden;
    border-radius: 14vw;
    display: block;
    background: #ffc200 url("../img/bt_read_off.png") center center no-repeat;
    background-size: 38.666vw 4.266vw;
    box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.3);
    transition: color 0.3s cubic-bezier(0.23, 0.76, 0.37, 0.99); }
    @media only screen and (min-width: 992px) {
      .linkBtnS a {
        width: 170px;
        height: 58px;
        border-radius: 58px;
        background-image: none; }
        .linkBtnS a:hover {
          border: 2px solid #ffc200; }
        .linkBtnS a::before {
          position: absolute;
          top: 20px;
          left: 19px;
          z-index: 100;
          content: '';
          display: inline-block;
          width: 140px;
          height: 18px;
          background-image: url("../img/bt_read_off.png");
          background-size: contain;
          background-repeat: no-repeat;
          vertical-align: middle; }
        .linkBtnS a::after {
          position: absolute;
          top: 0;
          left: -100%;
          background: #fff;
          display: block;
          content: "";
          width: 170px;
          height: 58px;
          border-radius: 58px;
          transition: left 0.3s cubic-bezier(0.23, 0.76, 0.37, 0.99); }
        .linkBtnS a:hover::before {
          top: 18px;
          left: 17px;
          background-image: url("../img/bt_read_on.png"); }
        .linkBtnS a:hover::after {
          left: 0; } }

/*SNSシェアボタン*/
.snsBtnWrap {
  margin: 6vw auto 4vw; }
  @media only screen and (min-width: 992px) {
    .snsBtnWrap {
      margin: 40px auto 10px; } }
  .snsBtnWrap p {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 3.333vw; }
    @media only screen and (min-width: 992px) {
      .snsBtnWrap p {
        font-size: 1.6rem;
        margin-bottom: 10px; } }
  .snsBtnWrap .snsBtn {
    display: flex;
    justify-content: center; }
    .snsBtnWrap .snsBtn li {
      width: 10.666vw;
      height: auto;
      margin: 0 2vw; }
      @media only screen and (min-width: 992px) {
        .snsBtnWrap .snsBtn li {
          width: 56px;
          margin: 0 11px; } }

/*バナー*/
.banner a {
  display: block;
  margin: 12.666vw auto;
  width: 88.533vw;
  height: 27.2vw;
  background: url("../img/ban_sp.png") no-repeat;
  background-size: cover;
  text-indent: -9999px; }
  @media only screen and (min-width: 992px) {
    .banner a {
      margin: 70px auto;
      width: 1042px;
      height: 227px;
      background: url("../img/ban_pc.png") no-repeat;
      background-size: cover; } }
  .banner a:hover {
    opacity: 0.8; }

/*フッター*/
#footer {
  width: 100%;
  background-color: #ffc900; }
  #footer .wrap {
    margin: 0 auto;
    padding: 6vw 0;
    width: 62.666vw; }
    @media only screen and (min-width: 992px) {
      #footer .wrap {
        padding: 68px 0;
        width: 470px; } }
    #footer .wrap .logo {
      width: 50vw;
      margin: 0 auto 13.333vw; }
      @media only screen and (min-width: 992px) {
        #footer .wrap .logo {
          width: 376px;
          margin: 0 auto 100px; } }
    #footer .wrap .contact_privacy {
      display: flex;
      justify-content: space-around; }
      #footer .wrap .contact_privacy li {
        font-size: 1.2rem; }
        @media only screen and (min-width: 992px) {
          #footer .wrap .contact_privacy li {
            font-size: 1.6rem; } }
        #footer .wrap .contact_privacy li a {
          color: #000;
          text-decoration: underline;
          font-weight: bold; }
          #footer .wrap .contact_privacy li a:hover {
            color: #767676; }

/*# sourceMappingURL=ranking.css.map */