@charset "UTF-8";
/* CSS Document */
/***********************************************
***  Pages Common
***********************************************/
.pages-main{
    margin-top: 80px;
        padding-top: 120px;
}
.pages-inner{
    max-width:1600px;
    width: 98%;
    margin: 0 auto;
}
.pages-heading-default{
/*
    transform: translateX(-100px);
    opacity: 0;
*/
        transform: translateX(0);
    opacity: 1;
    width: 20%;
    margin-left: 1%;
}
@media only screen and (max-width:1200px) {
    .pages-main {
    padding-top: 80px;
}
        .pages-heading-default {
        width: 25%;
        margin-left: 1%;
    }
}
@media only screen and (max-width:800px) {
     .pages-heading-default {
        width: 40%;
        margin-left: 1%;
    }
}
@media only screen and (max-width:600px) {
    .pages-main {
        margin-top: 60px;
        padding-top: 40px;
    }
}
/***********************************************
***  COMICS
***********************************************/
.comics-lead-wrapper{
    display:flex;
    width: 90%;
    margin: 40px auto;
    align-items: flex-end;
}
.comics-lead{
    max-width:500px;
    margin-right: 80px;
}
.comics-trial-btn{
    max-width:420px;
    position: relative;
    transition: 0.2s ease;
}
.comics-trial-btn a{
    position:relative;
    z-index: 2;
}
.comics-trial-btn:before{
    position:absolute;
    content: "";
    background-image: url(../img/comics/comics-trial-btn-bg.png);
    width: 63px;
    height: 100%;
    left: 0;
    bottom:0;
    background-size: auto 100%;
    background-repeat:no-repeat;
    animation: scroll-right 1s infinite linear 2s both;
    z-index: 0;
    opacity: 0;
}
.comics-trial-btn:after{
    position:absolute;
    content: "";
    background-image: url(../img/comics/comics-trial-btn-bg.png);
    width: 63px;
    height: 100%;
    left: 0;
    bottom:0;
    background-size: auto 100%;
    background-repeat:no-repeat;
    animation :scroll-right 1s infinite linear 0s both;
    z-index: 0;
    opacity: 0;
}
.comics-trial-btn:hover{
    transform: translateX(20px);
}
@keyframes scroll-right {
from {
  transform: translateX(-30%);
    opacity: 0;
}
  to {
  transform: translateX(60%);
    opacity: 1;
}
}
.comics-lists{
    width: 90%;
    display:flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin:40px auto 80px;
}
.comics-list{
    width:12%;
    margin-right: calc(16% / 6);
    margin-bottom: 40px;
    position: relative;
}

.comics-list:before {
    background: #e60013;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform .3s;
    z-index: 0;
}
.comics-list:hover a {
  mix-blend-mode: hard-light;
  color: #fff;
    opacity: 0.8;
}
.comics-list:hover:before {
    transform-origin: left top;
    transform: scale(1, 1);
}
.comics-list:nth-child(7n){
    margin-right: 0;
}

@media only screen and (max-width:1200px) {
    .comics-list {
    width: 18%;
    margin-right: calc(10% / 4);
}
.comics-list:nth-child(7n){
   margin-right: calc(10% / 4);
}
.comics-list:nth-child(5n){
   margin-right: 0;
}
}
@media only screen and (max-width:800px) {

    .comics-lead{
    max-width:500px;
    width: 60%;
        margin-right: 10px;
}
.comics-trial-btn{
    width: 40%;
}
        .comics-list {
        width: 30%;
        margin-right: calc(10% / 2);
                margin-bottom: 20px;
    }
.comics-list:nth-child(5n){
   margin-right: calc(10% / 2);
}
        .comics-list:nth-child(7n) {
   margin-right: calc(10% / 2);
    }
.comics-list:nth-child(3n){
   margin-right: 0;
}
    .comics-trial-btn:hover{
    transform: translateX(10px);
}
}