@charset "UTF-8";
#footer .banner {
  display: flex;
  justify-content: center;
  margin-bottom: 30px; }
  @media screen and (max-width: 749px) {
    #footer .banner {
      flex-direction: column; } }
  #footer .banner figure {
    width: 244px; }
    #footer .banner figure:not(:nth-child(4n)) {
      margin-right: 28px; }
    @media screen and (max-width: 749px) {
      #footer .banner figure {
        width: 100%; }
        #footer .banner figure:not(:nth-child(4n)) {
          margin-right: 0; }
        #footer .banner figure:nth-child(n+2) {
          margin-top: 10px; } }
#footer .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  #footer .links li {
    padding: 0.5em 0;
    width: 20%; }
    @media screen and (max-width: 749px) {
      #footer .links li {
        width: 50%; } }
    #footer .links li a {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      text-align: left; }
      @media screen and (max-width: 749px) {
        #footer .links li a {
          justify-content: flex-start; } }

#top-area {
  position: relative;
  width: 1120px;
  margin: 0 auto 60px; }
  @media all and (min-width: 1121px) and (max-width: 1367px) {
    #top-area {
      width: 1060px;
      margin: 0 auto 30px; } }
  @media all and (min-width: 750px) and (max-width: 1120px) {
    #top-area {
      width: 100%;
      margin: 0 auto 30px; } }
  @media screen and (max-width: 749px) {
    #top-area {
      width: 100%;
      margin: 0 auto 30px; } }
  #top-area .new, #top-area .app, #top-area .next, #top-area .comics1, #top-area .comics2, #top-area .extra {
    position: absolute; }
    #top-area .new a img, #top-area .app a img, #top-area .next a img, #top-area .comics1 a img, #top-area .comics2 a img, #top-area .extra a img {
      transition: .3s; }
      #top-area .new a img:hover, #top-area .app a img:hover, #top-area .next a img:hover, #top-area .comics1 a img:hover, #top-area .comics2 a img:hover, #top-area .extra a img:hover {
        transform: scale(1.1); }
  @media all and (min-width: 750px) and (max-width: 1120px) {
    #top-area .left, #top-area .right {
      display: none; } }
  @media screen and (max-width: 749px) {
    #top-area .left, #top-area .right {
      display: none; } }
  #top-area .new {
    top: 20px;
    left: 0px;
    width: 270px;
    animation: zoomIn 0.5s forwards,float_a 3s linear 1s infinite;
    transform-origin: 50% 50%; }
    @media all and (min-width: 1121px) and (max-width: 1367px) {
      #top-area .new {
        left: -30px;
        width: 250px; } }
  #top-area .app {
    top: 220px;
    left: -240px;
    animation: zoomIn 0.5s forwards,float_a 3s linear 0.5s infinite;
    transform-origin: 50% 50%; }
    @media all and (min-width: 1121px) and (max-width: 1367px) {
      #top-area .app {
        top: 270px;
        left: -120px;
        width: 220px; } }
  #top-area .next {
    top: 400px;
    left: 0;
    width: 270px;
    animation: zoomIn 0.5s forwards,float_b 3s linear 0.5s infinite;
    transform-origin: 50% 50%; }
    @media all and (min-width: 1121px) and (max-width: 1367px) {
      #top-area .next {
        left: -30px;
        top: 520px;
        width: 250px; } }
  #top-area .comics1 {
    top: 20px;
    right: 0;
    width: 270px;
    animation: zoomIn 0.5s forwards,float_b 3s linear 0.5s infinite;
    transform-origin: 50% 50%; }
    @media all and (min-width: 1121px) and (max-width: 1367px) {
      #top-area .comics1 {
        right: -30px;
        width: 250px; } }
  #top-area .comics2 {
    top: 220px;
    right: -240px;
    animation: zoomIn 0.5s forwards,float_a 3s linear 0.5s infinite;
    transform-origin: 50% 50%; }
    @media all and (min-width: 1121px) and (max-width: 1367px) {
      #top-area .comics2 {
        right: -120px;
        top: 270px;
        width: 220px; } }
  #top-area .extra {
    top: 400px;
    right: 0px;
    width: 270px;
    animation: zoomIn 0.5s forwards,float_b 3s linear 1s infinite;
    transform-origin: 50% 50%; }
    @media all and (min-width: 1121px) and (max-width: 1367px) {
      #top-area .extra {
        right: -30px;
        top: 520px;
        width: 250px; } }
  #top-area .top-slider {
    display: none; }
    @media all and (min-width: 750px) and (max-width: 1120px) {
      #top-area .top-slider {
        display: block;
        width: 560px;
        margin: 0 auto; } }
    @media screen and (max-width: 749px) {
      #top-area .top-slider {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto; } }
  #top-area .top-cover {
    width: 560px;
    margin: 0 auto;
    animation: zoomIn 0.5s forwards;
    transform-origin: 50% 50%; }
    @media all and (min-width: 750px) and (max-width: 1120px) {
      #top-area .top-cover {
        display: none; } }
    @media screen and (max-width: 749px) {
      #top-area .top-cover {
        display: none; } }

.slick-dots li {
  margin: 0 15px !important; }

.slick-dots li button:before {
  font-family: 'slick';
  font-size: 15px !important;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .5;
  color: #ff99cc !important; }

.slick-dots li.slick-active button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 18px;
  line-height: 20px;
  content: '';
  color: #ff99cc !important;
  text-align: center;
  background: url("../img/ribon.svg") no-repeat 0 0; }

#newstopic {
  width: 100%;
  background-color: #e0d9ff; }
  #newstopic.list {
    background: none; }
  #newstopic h1 {
    text-align: center;
    padding-top: 30px; }
    @media screen and (max-width: 749px) {
      #newstopic h1 {
        width: 82.12%;
        margin: 0 auto; } }
  #newstopic .topics {
    padding: 30px 0;
    margin: 0 auto; }
    #newstopic .topics ul {
      display: flex;
      flex-wrap: wrap; }
      #newstopic .topics ul .box {
        width: 340px;
        background-color: #fff;
        border-radius: 20px;
        box-sizing: border-box;
        border: 6px solid #ff99cc; }
        @media all and (min-width: 750px) and (max-width: 1120px) {
          #newstopic .topics ul .box {
            width: 31%; } }
        @media screen and (max-width: 749px) {
          #newstopic .topics ul .box {
            width: 49%;
            border-radius: 15px;
            border-width: 3px; } }
        #newstopic .topics ul .box:not(:nth-child(3n)) {
          margin-right: 20px; }
        #newstopic .topics ul .box:nth-child(n+4) {
          margin-top: 20px; }
        @media screen and (max-width: 749px) {
          #newstopic .topics ul .box:not(:nth-child(3n)) {
            margin-right: 0; }
          #newstopic .topics ul .box:not(:nth-child(2n)) {
            margin-right: 2%; }
          #newstopic .topics ul .box:nth-child(n+4) {
            margin-top: 0; }
          #newstopic .topics ul .box:nth-child(n+3) {
            margin-top: 10px; } }
        #newstopic .topics ul .box:firstchild, #newstopic .topics ul .box:nth-child(3n+4) {
          border-color: #ff99cc; }
        #newstopic .topics ul .box:nth-child(3n+2) {
          border-color: #cc99ff; }
        #newstopic .topics ul .box:nth-child(3n+3) {
          border-color: #66cccc; }
        #newstopic .topics ul .box a {
          display: flex;
          flex-direction: column;
          outline: none;
          min-height: 480px; }
          #newstopic .topics ul .box a .pict {
            overflow: hidden;
            border-radius: 14px 14px 0 0;
            margin: 0;
            padding: 0;
            width: 100%;
            outline: none; }
            #newstopic .topics ul .box a .pict img {
              transition: .3s; }
            @media screen and (max-width: 749px) {
              #newstopic .topics ul .box a .pict {
                border-radius: 12px 12px 0 0; } }
          #newstopic .topics ul .box a:hover {
            text-decoration: none;
            color: #ccc; }
            #newstopic .topics ul .box a:hover .pict img {
              transform: scale(1.1); }
              @media screen and (max-width: 749px) {
                #newstopic .topics ul .box a:hover .pict img {
                  transform: none; } }
          #newstopic .topics ul .box a .date {
            font-size: 1.6rem;
            padding: 10px;
            color: #999; }
          #newstopic .topics ul .box a .desc {
            flex-grow: 1;
            font-size: 1.8rem;
            padding: 0 10px 10px; }
          @media all and (min-width: 750px) and (max-width: 1120px) {
            #newstopic .topics ul .box a {
              min-height: auto; } }
          @media screen and (max-width: 749px) {
            #newstopic .topics ul .box a {
              min-height: auto; }
              #newstopic .topics ul .box a .date {
                font-size: 1.4rem; }
              #newstopic .topics ul .box a .desc {
                font-size: 1.4rem; } }

#channel-area {
  position: relative;
  margin-bottom: -145px;
  display: flex;
  /* flexbox */
  gap: 60px;
  /* 余白 */ }
  @media all and (min-width: 750px) and (max-width: 1120px) {
    #channel-area {
      gap: 5.66vw 0; } }
  @media screen and (max-width: 749px) {
    #channel-area {
      gap: 2.66% 0; } }
  #channel-area .media_box {
    width: 500px;
    margin: 50px auto;
    position: relative; }
    #channel-area .media_box p {
      margin: 0 auto; }
    #channel-area .media_box.ch {
      background: #f964b2; }
    #channel-area .media_box.lib {
      background: #ed3745;
      display: flex;
      align-items: center; }
    @media all and (min-width: 750px) and (max-width: 1120px) {
      #channel-area .media_box {
        width: 47.17vw; } }
    @media screen and (max-width: 749px) {
      #channel-area .media_box {
        width: 48.67%; } }
    #channel-area .media_box::before, #channel-area .media_box::after {
      width: 100%;
      height: 0;
      display: block;
      position: absolute;
      left: 0;
      content: ""; }
    #channel-area .media_box.ch::before {
      border-bottom: solid 30px #f964b2;
      border-right: solid 30px transparent;
      bottom: 100%; }
      @media screen and (max-width: 749px) {
        #channel-area .media_box.ch::before {
          border-bottom: solid 20px #f964b2;
          border-right: solid 20px transparent; } }
    #channel-area .media_box.ch::after {
      border-top: solid 30px #f964b2;
      border-left: solid 30px transparent;
      top: 100%; }
      @media screen and (max-width: 749px) {
        #channel-area .media_box.ch::after {
          border-top: solid 20px #f964b2;
          border-left: solid 20px transparent; } }
    #channel-area .media_box.lib::before {
      border-bottom: solid 30px #ed3745;
      border-right: solid 30px transparent;
      bottom: 100%; }
      @media screen and (max-width: 749px) {
        #channel-area .media_box.lib::before {
          border-bottom: solid 20px #ed3745;
          border-right: solid 20px transparent; } }
    #channel-area .media_box.lib::after {
      border-top: solid 30px #ed3745;
      border-left: solid 30px transparent;
      top: 100%; }
      @media screen and (max-width: 749px) {
        #channel-area .media_box.lib::after {
          border-top: solid 20px #ed3745;
          border-left: solid 20px transparent; } }
  #channel-area .thumb-area {
    margin: 0 auto;
    text-align: center; }
    @media screen and (max-width: 749px) {
      #channel-area .thumb-area {
        width: 90%; } }
    #channel-area .thumb-area .logo {
      padding-top: 10px; }
    #channel-area .thumb-area .thumb {
      position: relative;
      background-color: #fff;
      width: 440px;
      border: 2px solid #fff;
      padding: 0;
      font-size: 0;
      overflow: hidden !important; }
      @media all and (min-width: 750px) and (max-width: 1120px) {
        #channel-area .thumb-area .thumb {
          width: 39.29vw; } }
      @media screen and (max-width: 749px) {
        #channel-area .thumb-area .thumb {
          width: 100%; }
          #channel-area .thumb-area .thumb img:hover {
            transform: none; } }
      #channel-area .thumb-area .thumb img {
        transition: .3s; }
        #channel-area .thumb-area .thumb img:hover {
          transform: scale(1.1); }
      #channel-area .thumb-area .thumb::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        width: 80px;
        height: 80px;
        background: transparent url("../img/home/start.png") no-repeat scroll 0px 0px;
        background-size: contain;
        pointer-events: none; }
        @media screen and (max-width: 749px) {
          #channel-area .thumb-area .thumb::after {
            width: 40px;
            height: 40px; } }
  #channel-area .bg-img img {
    width: 500px; }
    @media screen and (max-width: 749px) {
      #channel-area .bg-img img {
        width: 50%; } }

#lineup {
  width: 100%;
  background-color: #fcdeee;
  padding-top: 145px; }
  #lineup h1 {
    text-align: center;
    padding-top: 30px; }
    @media screen and (max-width: 749px) {
      #lineup h1 {
        width: 82.12%;
        margin: 0 auto; } }
  #lineup .slider-area {
    max-width: 100%;
    margin: 0 auto 30px;
    padding: 30px 0 60px;
    overflow: hidden; }
  #lineup .slick-slide {
    border: 10px solid #fff;
    box-shadow: 0 0 8px #ccc;
    margin: 0 10px;
    transition: .3s; }
    @media all and (min-width: 750px) and (max-width: 1120px) {
      #lineup .slick-slide {
        border-width: 0.89vw;
        margin: 0 0.89vw; } }
    @media screen and (max-width: 749px) {
      #lineup .slick-slide {
        border-width: 1.33vw;
        margin: 0 1.33vw; } }
    #lineup .slick-slide:hover {
      transform: scale(1.1); }
  #lineup .slick-list {
    overflow: visible; }