@charset "utf-8";

h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.3em;
}

h4 {
    font-size: 1.2em;
}

.bold {
    font-weight: bold;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-floating),
.collection a.collection-item {
    color: #2979ff;
}

.collection .collection-item.active {
    background-color: #29b6f6;
}

.width100 {
    width: 100%;
    margin-bottom: 1rem;
    height: 80px;
    padding: 15px;
}

#page-top {
    position: fixed;
    bottom: 0px;
    z-index: 2;
}

.card .card-image .card-title {
    color: #fff;
    position: absolute;
    bottom: -20px;
    left: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    font-size: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.col.s4.m3, .col.s6.m4, .col.s6.m4 {
    padding: 0 0.1rem;
}

img {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    max-width: 600px;
}

.col .s6 .m4 .l4 {
    padding: 0 0.2rem;
}

.btn-paging {
    width: 49%;
    height: 6rem;
}

.pagination li i.btn-pagination {
    color: white;
    font-size: 6rem;
    display: block;
}

.card-reveal .card-title {
    font-size: 1rem;
    font-weight: bold;
}

.btn-large, .btn-large:hover {
    width: 100%;
    margin-bottom: 1rem;
    background-color: #039be5;
}

.dropdown-content li > a {
    color: #039be5;
}

.star {
    color: #ffd600;
    line-height: 0.1rem;
    margin: 0;
    width: 15%
}

.single-list-font {
    font-size: 1rem;
}

.card .card-content {
    padding: 10px;
}

.single-list-table th, .single-list-table td {
    padding: 0px;
}

.single-list-tag li {
    display: inline-block;
    font-size: 1rem;
    line-height: 1rem;
    color: #039be5;
    /* background-color: #039be5; */
    border-bottom: 1px solid #e0e0e0;
    padding: 0 2em 0 0;
}

.single-list-border {
    border-bottom: #e0e0e0 1px solid;
}

@media only screen and (min-width: 993px) {
    .single-list-border:nth-child(odd) {
        border-right: #e0e0e0 1px solid;
    }
}

.single-list-tags {
    display: inline-block;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    line-height: 32px;
    padding: 0 12px;
    border-radius: 4px;
    background-color: #26a69a;
    margin: 1px;
}

.col.s12.m12.l6.card-panel.single-list-right-relative {
    position: relative;
    padding: 0 0.1rem;
}

i.material-icons.single-list-right-absolute {
    position: absolute;
    bottom: 50%;
    right: -0.3rem;
    transform: translateY(50%);
    font-size: 3.5rem;
    color: #bdbdbd;
}

i.material-icons.single-list-right-absolute2 {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 3rem;
    padding: 5px;
    display: inline-block;
    color: #bdbdbd;
}

h3.single-list-h3 {
    font-size: 1.3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
}

.single-list-a {
    color: #212121;
}

i.material-icons.show-absolute {
    position: absolute;
    bottom: 50%;
    right: -10px;
    transform: translateY(50%);
    font-size: 2rem;
    background-color: rgba(66, 66, 66, 0.7);
    border-radius: 100px;
    color: white;
}

.show-relative {
    position: relative;
}

.row .col.s2 {
    width: 20%;
}

li.col.s2 {
    padding: 1px;
}

ul.col.s12 {
    margin: 0;
    padding: 0;
}

.card .card-image h3.card-title-top {
    color: #fff;
    position: absolute;
    bottom: -1.2rem;
    left: 0;
    padding: 4px;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    font-size: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card .card-image span.card-title-top {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 4px;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    font-size: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

span.card-tips {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    padding: 0 0.5rem;
    text-align: center;
    border-radius: 4px;
    color: white;
}

.col.s12.m4.l3 {
    /*    max-width: 400px;*/
}

.col.s12.m8.l9 {
    max-width: 900px;
}

.row {
    max-width: 1300px;
}

.single-list-tag li.characters {
    display: inline-block;
    font-size: 1rem;
    line-height: 1rem;
    color: #039be5;
    /* background-color: #039be5; */
    border-bottom: 1px solid #e0e0e0;
    padding: 0 2em 0 0;
    margin: 0.8rem;
}

@keyframes bounce {
    0%, 100% {
        transform: scale(0.0)
    }
    7% {
        transform: scale(1.0)
    }
    18% {
        transform: scale(1.0)
    }
    33% {
        transform: scale(0.1)
    }
    50% {
        transform: scale(1.0)
    }
    72% {
        transform: scale(0.1)
    }
    97% {
        transform: scale(1.0)
    }
}

.ball {
    animation: bounce 1s infinite ease-out;
    position: absolute;
    width: 100%;
}

.link_items {
    position: relative;
}

li a, span.modal-trigger {
    display: block;
}


.col.s12.m12.l6.card-panel.single-list-right-relative img {
    max-width: 150px;
    max-height: 200px;
}

.col.s5 {
    max-height: 280px;
    overflow: hidden;
}

.blue {
    background-color: transparent !important;
}

h3 {
    border: none;
}

i.material-icons.page_link_btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 3.5rem;
    background-color: rgba(66, 66, 66, 0.7);
    border-radius: 100px;
    color: white;
    z-index: 3;
}

.overmenu {
    position: relative;
    z-index: 998;
}

.cover {
    overflow-x: auto;
    width: 100%;
    position: fixed;
    top: -1rem;
    left: 0;
    z-index: 3;
}

.cover_footer {
    overflow-x: auto;
    width: 100%;
    z-index: 3;
}

ul.cover-ul {
    max-width: 100%;
    display: inline-table;
}

ul.cover-ul li:first-child {
    padding-left: 1.7rem;
}

ul.cover-ul li {
    display: table-cell;
    padding: 1rem 1.2rem 1rem 0;
    font-size: 1.2rem;
    color: white;
}

.content2 {
    padding: 2px;
}

.btmBorder {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #1E90FF;
    padding-bottom: 0px;
}

.osusume4 {
    background-color: #ffffe0;
}

.content2 .tag {
    line-height: 1.4;
    margin-bottom: 3px;
    font-size: 13px;
}

.content2 .hoshi {
    line-height: 1.5;
    margin-bottom: 3px;
    font-size: 13px;
}

.content2 .thumb {
    background-repeat: no-repeat;
    width: 100px;
    float: left;
    margin-right: 5px;
}

.content2 .title {
    color: #4169e1;
    font-weight: bold;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 20px;
    margin-left: 70px;
    line-height: 1.5;
    margin-bottom: 7px;
}

.content2 .circle {
    line-height: 1.5;
    margin-left: 85px;
    margin-bottom: 3px;
    font-size: 11px;
}

.content2 .gensaku {
    line-height: 1.5;
    margin-left: 85px;
    margin-bottom: 3px;
    font-size: 11px;
}

.content2 .date {
    line-height: 1.5;
    margin-top: 5px;
    font-size: 12px;
    margin-bottom: 3px;
    margin-right: 4px;
    float: left;
}

.content2 .page {
    line-height: 1.5;
    margin-top: 5px;
    margin-bottom: 3px;
    margin-right: 8px;
    font-size: 11px;
    float: left;
}

.content2 .quick {
    line-height: 1.3;
    margin-top: 2px;
    font-size: 11px;
    margin-bottom: 2px;
    float: right;
}

.boxright {
    text-align: right;
}

.content2 .menu {
    line-height: 1.5;
    paddingleft: 85px;
    margin-bottom: 7px;
}

.menu2 {
    display: block;
    width: 56.5%;
    float: left;
    padding: 14px;
    margin: 0.5em auto;
    margin-bottom: 6px;
    margin-top: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc #999 #999 #ccc;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    text-decoration: none;
    text-align: center;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffffff, EndColorStr=#ffcccccc);
    background: -moz-linear-gradient(top, #fff, #ccc);
    background: -o-linear-gradient(top, #fff, #ccc);
    background: linear-gradient(top, #fff, #ccc);
    /* top: 4.7%; */
    /* top: 4.7%; */
}

.content2 {
    padding: 2px;
}

.clearFix:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    content: ".";
}

img.image_top {
    margin-top: 1rem;
}

html > body .doujin-t a.a_wrap {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: left;
}

.shinchaku-wide-scroll {
    overflow: hidden;
    height: 250px; /* 可視領域の高さ */
    width: 100%;
}

.shinchaku-wide-scroll .scroll-height {
    /*    height: 300px;  横スクロールする理屈上の高さ
    */    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 慣性スクロール */
}

.shinchaku-wide-scroll .scroll-list {
    display: inline-table;
    max-width: 100%;
}

.shinchaku-wide-scroll .scroll-list li {
    display: table-cell;
    padding-right: 0.5rem;
}

.shinchaku-wide-scroll .scroll-list li img {
    width: 130px;
}

span.shinchaku-wide-scroll-gensaku {
    color: #fff;
    position: absolute;
    bottom: 0;
    padding: 4px;
    background: rgba(0, 0, 0, 0.8);
    width: 130px;
    font-size: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*加藤 追記*/
.ranking-wide-scroll {
    overflow: hidden;
    width: 100%;
}

.ranking-wide-scroll .scroll-height {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 慣性スクロール */
}

.ranking-wide-scroll .scroll-list {
    display: inline-table;
    max-width: 100%;
}

.ranking-wide-scroll .scroll-list li {
    display: table-cell;
    padding-right: 0.5rem;
}

.ranking-wide-scroll .scroll-list li img {
    width: 130px;
}

span.ranking-wide-scroll-items {
    color: #fff;
    position: absolute;
    bottom: 0rem;
    padding: 4px;
    background: rgba(0, 0, 0, 0.8);
    width: 130px;
    font-size: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

span.ranking-card-tips {
    position: absolute;
    top: 5px;
    margin-left: 90px;
    padding: 0 0.5rem;
    text-align: center;
    border-radius: 4px;
    color: white;
}

/*----- campaign Start -----*/

a.tags-link {
    color: #ffffff;
    background: #039be5;
    padding: 8px 5px;
    margin: 4px 3px;
    border-radius: 3px;
    display: inline-block;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.circle-list {
    background: #bdbdbd;
    display: inline-block;
    width: 30%;
}

.characters-campaign {
    padding: 0 0.75rem;
}

.characters-campaign img {
    margin-bottom: 3%;
    display: block;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.characters-campaign li {
    width: 100%;
    position: relative;
}

.characters-campaign li span {
    position: absolute;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.8);
    width: 98%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    bottom: 2%;
}

.ranking-campaign {
    padding: 0 0.75rem;
}

.margin-top {
    margin-top: 20px;
}

.margin-bottom {
    margin-bottom: 20px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.campaign-top {
    display: block;
    border-radius: 2px 2px 0 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    padding: 0 12%;
    margin-bottom: 3%
}

.campaign-image {
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 15px;
}

.campaign-image img {
    width: 100%;
}

.campaign-image span {
    color: #fff;
    position: absolute;
    bottom: 5px;
    left: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    font-size: 1.3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: auto;
    margin-right: auto;
}

.campaign-list {
    margin: auto 0;
    width: 100%;
    text-align: center;
}

/*----- campaign End -----*/

/* 既存のスタイルを編集 */
@media only screen and (min-width: 0) {
    .doujinshi-card {
        height: auto;
    }
}

.doujinshi-card a {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: left;
}

.doujinshi-thumbnail {
    height: 180px;
    max-width: 140px;
}

.doujinshi-information {
    position: relative;
    width: 60%;

}

.doujinshi-title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px;
    font-size: 20px;
    color: #1565c0;
    font-weight: bold;
}

.doujinshi-anime {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: bold;
}

.doujinshi-circle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.doujinshi-character {
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doujinshi-tag {
    font-weight: bold;
    border: 2px solid #1565c0;
    border-radius: 4px;
    position: relative;
    padding: 3px;
    width: 100%;
    display: block;
    margin-bottom: 2%;
    height: 77px;
}

.doujinshi-tag::before {
    background: #fff;
    color: #1565c0;
    font-weight: bold;
    font-family: Material Icons;
    content: "\label タグ一覧";
    position: relative;
    bottom: 12px;
}

.doujinshi-tag span {
    margin-top: -10px;
    margin-bottom: 10px;
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.doujinshi-osusume {
    display: inline-block;
    width: 80%;
    float: right;
    margin-top: 5%;
}

.star_border {
    color: #ffd600;
    line-height: 0.1rem;
    margin: 2px 2px 2px 2px;
    width: 13%;
}

/* 既存のスタイルを編集 */
.star {
    color: #ffd600;
    line-height: 0.1rem;
    margin: 2px 2px 2px 2px;
    width: 13%;
}

.computer {
    color: #01579b;
}

.create {
    color: #00bfa5;
}

.person {
    color: #29b6f6;
}

.thumb_up {
    color: #616161;
}

/* 既存のスタイルを編集 */
i.material-icons.single-list-right-absolute {
    position: absolute;
    bottom: 50%;
    right: -1rem;
    transform: translateY(50%);
    font-size: 3.5rem;
    color: #bdbdbd;
}

.doujin-column {
    vertical-align: 4px;
    display: inline;
    position: absolute;
    margin-top: 3px;
    margin-left: 2px;
    font-size: 12.8px;
    width: 80%;
    height: 30%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*既存のcssを編集 */
@media only screen and (min-width: 993px) {
    div.col.l6.doujinshi-card {
        width: 48%;
        margin-right: 12px;
        height: 320px;
    }
}

div.paging {
    position: relative;
}

li.before {
    float: left;
}

li.next {
    float: right;
}

.tabs{
    margin-bottom: 10px!important;
}

.tabs .tab {
    text-transform: none;
}

.side-nav .collapsible {
    margin-bottom: 100px;
    color: #000;
}

.margin-top-20 {
    margin-top: 20px;
}

/*----- fair Start -----*/

@media only screen and (min-width: 0) {
    .slider .slides li img {
        height: 140px !important;
        width: 299px !important;
    }

    .slider {
        height: 190px !important;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 375px)
and (max-width: 760px) {
    .slider .slides li img {
        height: 165px !important;
        width: 352px !important;
    }

    .slider {
        height: 205px !important;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 992px) {
    .slider .slides li img {
        height: 281px !important;
        width: 100% !important;
    }

    .slider {
        height: 320px !important;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

@media only screen and (min-width: 760px)
and (max-width: 992px) {
    .slider {
        height: 260px !important;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .slider .slides li img {
        height: 220px !important;
        width: 470px !important;
    }
}

.slider .slides {
    background-color: white;
    height: inherit !important;
}

.fair-slider {
    display: block;
    text-align: center;
}

.fair-slider img {
    width: 85%;
    margin: 10px;
}

.slider .slides li {
    margin-top: 10px;
}

/*----- fair End -----*/

/*----- List search Start -----*/

/* チェックボックスを非表示にする */
input[type="checkbox"] {
    visibility: hidden;
}

#characters-menu {
    position: relative;
    width: 100%;
    height: 48px;
    margin: 0 auto;
}

/* ラベル (ボタン) のデザイン */
#characters-menu label {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 3rem;
    cursor: pointer;
    color: black;
    -webkit-transition: all .25s ease-in-out 0s;
    -moz-transition: all .25s ease-in-out 0s;
    -ms-transition: all .25s ease-in-out 0s;
    -o-transition: all .25s ease-in-out 0s;
    transition: all .25s ease-in-out 0s;
    border-bottom: 1px solid #9e9e9e;
}

#characters-menu label span {
    position: absolute;
    top: 10px;
    left: 0;
    user-select: text;
}

#characters-menu label:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1.5px;
    width: 100%;
    -webkit-transition: all .25s ease-in-out 0s;
    -moz-transition: all .25s ease-in-out 0s;
    -ms-transition: all .25s ease-in-out 0s;
    -o-transition: all .25s ease-in-out 0s;
    transition: all .25s ease-in-out 0s;
    border: none;
}

#characters-menu label:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1.5px;
    bottom: 0;
    width: 100%;
    -webkit-transition: all .25s ease-in-out 0s;
    -moz-transition: all .25s ease-in-out 0s;
    -ms-transition: all .25s ease-in-out 0s;
    -o-transition: all .25s ease-in-out 0s;
    transition: all .25s ease-in-out 0s;
    border: none;
}

#characters-menu input[type="checkbox"]:checked + label:before,
#characters-menu input[type="checkbox"]:checked + label:after {
}

/* リストのデザイン */
#list {
    position: absolute;
    top: 44px;
    left: 150px;
    margin-left: -150px;
    width: 100%;
    max-height: 400px;
    overflow: scroll;
    background: rgba(0, 0, 0, 0.72);
    visibility: hidden;
    opacity: 0;
    border-radius: 8px;
    -webkit-transition: all .25s ease-in-out 0s;
    -moz-transition: all .25s ease-in-out 0s;
    -ms-transition: all .25s ease-in-out 0s;
    -o-transition: all .25s ease-in-out 0s;
    transition: all .25s ease-in-out 0s;
    -webkit-transform: translate3d(0, -15px, 0);
    -moz-transform: translate3d(0, -15px, 0);
    -ms-transform: translate3d(0, -15px, 0);
    -o-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
}

#list:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #19283C transparent;
}

#list li {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    font-size: 14px;
    line-height: 50px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #039be5;
    background-color: #ffffff;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#list li:hover {
    background-color: #f5f5f5
}

#list li a {
    color: #039be5;
    display: inline-block;
    height: 4em;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ラベルにチェックが入ったときにリストを表示 */
#characters-menu input[type="checkbox"]:checked + label + #list {
    background: #ffffff;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.characters-menu-arrow {
    font-size: 24px;
    position: absolute;
    top: 10px;
    right: -2px;
}

#characters-menu input[type="checkbox"]:checked + label + #list {
    z-index: 1 !important;
}

/*----- List search End -----*/

/*----- List sort Start -----*/
.sort {
    border: 3px solid #26a69a;
    margin: 20px 5%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.sort-title {
    background-color: #26a69a;
    width: 100%;
    display: block;
}

.sort-title span {
    margin: 5px;
    color: white;
    font-size: 18px;
}

.sort-area {
    padding: 10px;
}

/*----- List sort End -----*/

/*----- Tab Start -----*/

.tabs .tab a.active {
    color: #ffffff;
    background-color: #ee6e73;
    display: block;
    width: 90%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color .28s ease;
    margin: 0 5px;
    border-radius: 4px;
}

.tabs .tab a {
    color: #ee6e73;
    border: #ee6e73 2px solid;
    display: block;
    width: 90%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color .28s ease;
    margin: 0 5px;
    border-radius: 4px;
}

.tabs .indicator {
    position: relative;
}

/*----- Tab End -----*/

/*----- MENU Start -----*/
.menu-block {
    border: 1px solid #eee;
    margin: 0;
    text-align: center;
    line-height: 40px;
    font-size: 17px;
    background-color: #82B1FF !important;
    color: white !important;
    padding: 0;
    position: relative;
}

.menu-block a {
    color: white !important;
    width: 100%;
    height: 100%;
    display: block;
}

.menu-block a:hover {
    filter: alpha(opacity=80);
    opacity: 0.8;
    -moz-opacity: 0.8;
}

.menu-icon {
    position: relative;
    top: 4px;
    font-size: 20px;
}

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

#fixedBox.row {
    max-width: none;
    margin-bottom: 0;
}

/*----- MENU End -----*/

.show-title {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0.5em 0 !important;
}

.collapsible-body {
    padding: 1em;
}

.grey-text {
    color: #7A7A7A;
    margin-right: 0.1em;
    font-size: 0.9em;
}

h2.grey-text {
    font-size: 0.9em;
    margin-bottom: -1em;
}

.circle-border {
    border-top: 0.1em solid #eceff1;
    border-bottom: 0.1em solid #eceff1;
    padding: 1em 0;
    margin: 1em 0;
    overflow: hidden;
    position: relative;
}

.circle-name {
    font-size: 1em;
    font-weight: bold;
}

.circle-info {
    display: block;
    width: 75%;
}

.circle-editor {
    font-size: 1.5em;
    background-color: rgba(66, 66, 66, 0.7);
    border-radius: 100px;
    color: white;
    padding: 0.1em;
}

.circle-all {
    width: 20%;
    margin-bottom: 0 !important;
    margin-right: 0.5em;
}

.circle-all a {
}

.circle-next {
    background-color: #0091ea;
    transform: tranlateY(50%);
    border-radius: 100%;
    color: white;
    font-size: 2em;
    padding: 0.2em;
    margin-bottom: 0.1em;
}

.related-books-title {
    font-weight: bold;
}

.bottom-spacer {
    position: relative;
}

.related-bottom {
    position: absolute;
    bottom: 1em;
}

li.bottom-spacer {
    padding: 1em 0 !important;
}

li.bottom-spacer:last-child {
    padding: 1em 0 !important;
    padding-bottom: 0 !important;
}

.pagination li i.btn-pagination {
    font-size: 3em;
}

.one-by-one-read {
    position: absolute;
    bottom: -1em;
    right: 0;
    left: 0;
}

.one-by-one-read p {
    font-size: 1.5em;
    text-align: center;
    color: white;
    background-color: rgba(38, 50, 56, 0.8);
}

.btn-text {
    color: white;
    font-weight: bold;
    font-size: 0.9em;
}

.star {
    width: 15% !important;
}

.star_border {
    width: 15% !important;
}

h2.grey-text.next-books {
    border-top: 0.1em solid #eceff1;
    padding-top: 1em;
    margin: 1em 0;
    font-weight: bold;
}

i.material-icons.circle-absolute {
    position: absolute;
    bottom: 1.4em;
    right: 0;
    margin: auto;
    background-color: rgba(66, 66, 66, 0.7);
    border-radius: 100%;
    color: white;
    z-index: 10000;
}

.circle-center {
    width: 80%;
}

.dl-btn {
    height: 6em;
    width: 100%;
    text-align: center;
}

.dl-btn i.btn-pagination {
    font-size: 4.5em;
    color: white;
}

.update-data{
    padding: 0 1rem;
}

.search-pop{
    display: block;
    width: 100%;
}

.search-pop > input { /* ラジオボックス非表示 */
    display: none;
}

.search-pop > input:nth-child(1) + label {
    cursor: pointer;
    position: absolute;
    right: -10px;
    top: 1px!important;
    bottom: 0;
    display: block;
    height: 55px;
    width: 55px;
}

.pop-all { /* 初期設定 ポップアップ非表示 */
    display: none;
}

.pop-content-area{
    display: block;
    width: 100%;
}

.search-pop > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .pop-all {/* ラジオ１ チェックでポップアップ表示 */
    z-index: 998;
    display: block;
    position: absolute;
    width: 100%;
    margin: 0 auto!important;
}

.search-pop > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label + .pop-all > div {/* */
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.search-pop > input:nth-child(1) + label ~ label {
    display: none;/* ラジオ１ 以外のラベルを初期は非表示 */
}
.search-pop > input:nth-child(1):checked + label + input:nth-child(3) + label {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    text-indent: -999999px;
    overflow: hidden;
    box-sizing:border-box
}
.search-pop > input:nth-child(1):checked + label + input:nth-child(3) + label + input:nth-child(5) + label {
    background: #42a5f5;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
    width: 30px;
    height: 30px;
    font-size: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    padding: inherit;
    box-sizing: border-box;
}

.search-pop > input:nth-child(1) + label + input:nth-child(3):checked + label + input:nth-child(5) + label + .pop-all,
.search-pop > input:nth-child(1) + label + input:nth-child(3) + label + input:nth-child(5):checked + label + .pop-all { /* ラジオ２と３ どっちかチェックでポップアップ非表示 */
    display: none;
}

.pop-all {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

label::before{
    border: none!important;
}

.pop-content li a{
    color: #42a5f5;
    display: block;
    text-align: center;
    border: solid 3px #42a5f5;
    margin: 5px;
    background: #ffffff;
    border-radius: 5px;
    font-weight: bold;
    line-height: 15px;
    font-size: 12px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.16);
    padding: 0;
    position: relative;
}

.pop-content li a:hover{
    box-shadow:5px 5px 5px rgba(0,0,0,0.16);
    background: #ffffff;
}
.pop-content li a span{
    font-size: 15px;
}

.material-icons.pop-icon{
    color: #42a5f5;
    text-align: center;
    display: block;
    margin: auto;
    font-size: 48px;
}

.pop-content form{
    color: #000000;
    display: block;
    margin: 30px 5px 5px 10px;
}

.pop-content-area{
    display: block;
    background-color: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 601px) {
    input.one-row{
        width: 69%!important;
        background: #ffffff;
        font-size: 12px;
    }
}

@media screen and (min-width: 602px){
    input.one-row{
        width: 100%!important;
        background: #ffffff;
        font-size: 12px;
    }
}

/*.nav-wrapper {*/
/*max-width: 1300px;*/
/*display: block;*/
/*margin: 0 auto;*/
/*}*/

.fixed-menu{
    position: fixed;
    z-index: 10000;
    display: block;
    top: 0;
    width: 100%;
    /*box-shadow: 2px 2px 2px rgba(0,0,0,0.4);*/
    background: #2979FF;
    /*max-width: 1300px!important;*/
}


nav{
    background: none;
    box-shadow: none;
    height: 60px!important;
    line-height: 62px!important;
    /*max-width: 1300px!important;*/
    /*margin: 0 auto!important;*/
}

@media only screen and (max-width: 600px){
    nav {
        height: 56px!important;
    }
}

@media only screen and (max-width: 320px){
    .global-menu .smart-logo{
        box-shadow: none;
        width: 160px;
        display: block;
        position: absolute;
        top: 0.1rem;
        padding: 5px;
        left: 14%;
    }
}

@media only screen and (min-width: 321px){
    .global-menu .smart-logo{
        box-shadow: none;
        width: 120px;
        display: block;
        position: absolute;
        top: 0.3rem;
        padding: 5px;
        left: 13%;
        z-index: 993;
    }
}

@media only screen and (max-width: 600px) {
    .global-menu .smart-logo {
        box-shadow: none;
        width: 130px;
        display: block;
        position: absolute;
        top: 0.2rem;
        padding: 5px;
        left: 14%;
        z-index: 993;
    }
}

@media only screen and (min-width: 993px) {
    .global-menu .smart-logo {
        box-shadow: none;
        width: 160px;
        display: block;
        position: absolute;
        top: 0.1rem;
        padding: 5px;
        margin-left: 48px;
        left: 0;
        z-index: 993;
    }

    .fixed-menu {
        position: absolute !important;
    }

}

.pc-menu-box{
    margin-left: -15rem!important;
    display: block;
    width: 100%;
}

.banner-button{
    /*margin: 5% 2.5%;*/
    display: block;
    width: 100%;
    position: relative;
}

.banner-button:hover{
    top: 1px;
    box-shadow: none;
}

.global-menu .material-icons.menu{
    float: left;
    font-size: 2.5rem;
    position: fixed;
    top: -0.1rem;
    left: 0.3rem;
    font-weight: bold;
}

@media only screen and (max-width: 321px){
    .global-menu .material-icons.menu {
        float: left;
        font-size: 24px;
        position: fixed;
        top: -0.35rem;
        left: 0.4rem;
        font-weight: bold;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.menu {
        float: left;
        font-size: 24px;
        position: fixed;
        top: -0.35rem;
        left: 0.4rem;
        font-weight: bold;
    }
}

.global-menu .menu::after{
    content: "メニュー";
    font-size: 0.8rem;
    font-weight: bold;
    position: relative;
    bottom: -0.7rem;
    left: -2.7rem;
}

@media only screen and (max-width: 321px){
    .global-menu .menu::after {
        content: "メニュー";
        font-size: 9px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem!important;
        left: -2rem!important;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .menu::after {
        content: "メニュー";
        font-size: 10px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem!important;
        left: -2.1rem!important;
    }
}

.global-menu .material-icons.search{
    float: right;
    font-size: 2.5rem;
    position: relative;
    top: -0.5rem;
    right: -0.5rem;
    color: #ffffff;
    font-weight: bold;
    height: 50px;
    width: 50px;
    z-index: 993;
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.search {
        float: right;
        font-size: 24px!important;
        position: absolute!important;
        top: -0.5rem;
        right: -0.5rem;
        color: #ffffff;
        font-weight: bold;
        height: 50px;
        width: 50px;
        z-index: 993;
    }
}

@media only screen and (max-width: 321px) {
    .global-menu .material-icons.search {
        float: right;
        font-size: 24px!important;
        position: absolute!important;
        top: -0.5rem;
        right: -0.5rem;
        color: #ffffff;
        font-weight: bold;
        height: 50px;
        width: 50px;
        z-index: 993;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.search {
        float: right;
        font-size: 24px!important;
        position: absolute!important;
        top: -0.5rem;
        right: -0.5rem;
        color: #ffffff;
        font-weight: bold;
        height: 50px;
        width: 50px;
        z-index: 993;
    }
}

.global-menu .search::after{
    content: "検索";
    font-size: 0.8rem;
    font-weight: bold;
    position: relative;
    bottom: -0.7rem;
    right: 2.1rem;
    z-index: 993;
}

@media only screen and (max-width: 321px){
    .global-menu .search::after {
        content: "検索";
        font-size: 9px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem;
        right: 1.6rem;
        z-index: 993;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .search::after {
        content: "検索";
        font-size: 10px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem;
        right: 1.7rem;
        z-index: 993;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.star::after {
        content: "ランキング";
        font-size: 10px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem;
        right: 3rem;
    }
}

@media only screen and (max-width: 991px){
    .global-menu .material-icons.star{
        font-size: 2.5rem;
        position: relative;
        top: -0.3rem;
        margin-left: 70%;
        color: #ffffff;
        width: 30px!important;

    }
    .global-menu .material-icons.star::after{
        content: "ランキング";
        font-size: 0.8rem;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem;
        right: 3.2rem;
    }
}

@media only screen and (max-width: 321px){
    .global-menu .material-icons.star::after {
        content: "ランキング";
        font-size: 9px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem;
        right: 2.7rem;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.star::after {
        content: "ランキング";
        font-size: 10px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem;
        right: 3rem;
    }
}

@media only screen and (min-width: 992px){
    .global-menu .material-icons.star{
        display: none;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.star {
        font-size: 24px!important;
        position: absolute;
        top: -6px;
        color: #ffffff;
        width: 30px!important;
        right: 55px;
    }
}

@media only screen and (max-width: 321px) {
    .global-menu .material-icons.star {
        font-size: 24px!important;
        position: absolute;
        top: -6px;
        color: #ffffff;
        width: 30px!important;
        right: 45px;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.star {
        font-size: 24px!important;
        position: absolute;
        top: -6px;
        color: #ffffff;
        width: 30px!important;
        right: 55px;
    }
}

footer.page-footer{
    margin-top: 10px;
    padding: 15px 0 80px 0!important;
}

.pickup-area {
    padding-bottom: 10px;
    border: solid 1px #9e9e9e;
}

.pickup-area .pickup-comic{
    display: block;
    margin: 5px 0;
    border-top: dashed 2px #9e9e9e;
    padding-top: 0.5rem;
    position: relative;
}

.pickup-area .pickup-comic-start{
    display: block;
    padding-top: 0.5rem;
    position: relative;
}
.pickup-area .pickup-comic::before{
    content: "このコミックを読む >";
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    bottom: 2px;
    right: 0;
    padding: 0.3rem;
    border-radius: 5px;
    background-color: #ffb300;
    border-bottom: solid 2px #c78e08;
    /*    content: "この同人誌を読む >";
        font-size: 12px;
        font-weight: bold;
        color: #039be5;
        position: absolute;
        bottom: 0;
        right: 5px;*/
}
.pickup-area .pickup-comic-start::before{
    content: "このコミックを読む >";
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    bottom: 2px;
    right: 0;
    padding: 0.3rem;
    border-radius: 5px;
    background-color: #ffb300;
    border-bottom: solid 2px #c78e08;

    /*    content: "この同人誌を読む >";
        font-size: 12px;
        font-weight: bold;
        color: #039be5;
        position: absolute;
        bottom: 0;
        right: 5px;*/
}
.pickup-area p{
    margin: 0;
    font-size: 13px;
    color: #039be5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pickup-area .row{
    margin-bottom: 0!important;
}

.pickup-area .row .col{
    padding: 0 0.2rem;
}

span.pickup-header {
    position: relative;
    padding: 0.4em;
    background: #ee6e73;
    font-size: 1.5em;
    margin: 10px 0;
    color: #ffffff;
    display: block;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    z-index: 997;
}

span.pickup-header::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 30px;
    border: 15px solid transparent;
    border-top: 15px solid #ee6e73;
    width: 0;
    height: 0;
}

.pickup-link{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.slider .indicators .indicator-item {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 18px;
    width: 18px;
    margin: 0 20px;
    background-color: #e0e0e0;
    transition: background-color .3s;
    border-radius: 50%;
    z-index: 100;
    top:5px;
}

.slider .indicators .indicator-item.active {
    background-color: #ee6e73;
}
.slider .slides a:active{
    opacity: 0.7;
}
.btn-large:active{
    opacity: 0.7;
}

.fixed-menu a:active{
    opacity: 0.9;
    box-shadow: none;
}
.prcomics-textlink{
    padding: 0;
    margin: 20px 0;
}

.prcomics-textlink .prcomic{
    display: block;
    position:relative;
    border-bottom: dashed 2px #9e9e9e;
}

.prcomics-textlink .prcomic p{
    margin: 5px;
}

.prcomics-textlink .prcomic a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.prcomics-textlink .prcomic .prcomic-title{
    color: #039be5;
    font-weight: bold;
    font-size: 18px;
}

.prcomics-textlink .prcomic .prcomic-circle{
    color: #ee6e73;
    font-size: 13px;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: right;
}

a.all-area{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.prcomics-textlink .prcomic .prcomic-title{
    color: #039be5;
    font-weight: bold;
    font-size: 18px;
}

.prcomics-textlink .prcomic .prcomic-circle{
    color: #ee6e73;
    font-size: 13px;
    font-weight: bold;
    display: block;
    width: 100%;
    text-align: right;
}

.ranking-prcomics{
    display: block;
    width: 100%;
    padding: 0;
}

.ranking-prcomics .col{
    padding: 3px!important;
}

.prcomics-list{
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 2px solid #9e9e9e;
    margin-top: 10px;
    position: relative;
}

@media only screen and (min-width: 1200px) {
    .prcomics-list {
        border-bottom: none;
    }
}

.prcomics-list p{
    margin: 0;
    padding: 5px;
}

.prcomics-list .description{
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}
.prcomics-list .title{
    font-size: 14px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.prcomics-list .label{
    display: inline-block;
    color: #ffffff;
    padding: 1px 10px;
    text-align: center;
    font-size: 11px;
    border-radius: 3px;
    font-weight: bold;
    margin-bottom: 5px;
}

.prcomics-list .ranking-label{
    position: absolute;
    top: 7px;
    left: 7px;
    padding: 0 0.5rem;
    text-align: center;
    border-radius: 4px;
    color: white;
}

/*ページネーション-Start*/
.cover-list a{
    display: block;
    padding: 5px 13px;
    background: #0091ea;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    position: relative;
    border-radius: 2px;
}

.cover-list a:active{
    background-color: #80d8ff;
    box-shadow: none!important;
    top: 1px;
}

.cover-list a:hover{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.16), 0 5px 20px 0 rgba(0,0,0,0.12);
}

ul.cover-ul li:first-child {
    padding-left: 0!important;
}

ul.pagination{
    clear: both;
}

.pagination li{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.paging .pagination span{
    position: relative;
    top: -1.9rem;
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
}
/*ページネーション-End*/

.dropdown-content li>a, .dropdown-content li>span{
    color: #039be5!important;
}

.paging i{
    font-size: 6rem!important;
}

/*既存の書き換え*/
td, th{
    padding: 10px 5px;
}

.btn, .btn-large{
    background-color: #039be5;
}

.banner-card img{
    box-shadow: none;
}

.banner-card:hover{
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.16), 0 6px 20px 0 rgba(0,0,0,0.12);
}

.banner-card:active{
    opacity: 0.7;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 1px 5px 0 rgba(0,0,0,0.12);
    border: none;
    top: 0;
}

.card .banner-title{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    width: 90%;
    padding: 0;
    margin: 0;
}

.sidebar-banner p{
    margin: 0;
    padding: 0 3px;
    line-height: 1;
}

.sidebar-banner li{
    padding: 0!important;
    margin: 0.5rem 0.5%!important;
    float: left;
    width:49%;
}

.af-textimg{
    display: block;
    width: 100%;
    margin: 1rem 0 ;
    padding: 0;
}

.af-textimg p.description{
    margin: 3px 0;
    width: 100%;
    line-height: 1;
}

.af-textimg p.header{
    margin: 0;
    color: #039be5;
    font-weight: bold;
}

.af-textimg p.author{
    margin: 0 15px 0 0;
    color: #ee6e73;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}

.af-textimg .row{
    position: relative;
}

.af-textimg .row a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.af-textimg .col{
    padding: 0 0.2rem;
}

.pickup-area .col {
    padding: 0 0.2rem!important;
}

.syllabary-list{
    width: 100%;
    display: block;
    overflow: hidden;
}

.syllabary-list ul.japanese {
    width: 10%;
    display: block;
    float: right;
    margin: 0 0 1rem 0;
}

.syllabary-list ul.japanese li{
    width: 100%;
    display: inline-block;
    padding: 1px;
    text-align: center;
}

.syllabary-list ul.english {
    width: 100%;
    display: block;
    clear: both;
    float: left;
    margin: 0 0 1rem 0;
}

.syllabary-list ul.english li{
    width: 10%;
    display: block;
    text-align: center;
    float: left;
    padding: 1px;
}

.syllabary-list .active{
    border: 2px solid #039be5;
    border-radius: 2px;
    line-height: 2;
    box-shadow: none;
    background: #039be5;
    color: #fff;
}

.syllabary-list .default{
    border: 2px solid #039be5;
    border-radius: 2px;
    line-height: 2;
}

.syllabary-list a{
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16), 0 1px 1px 0 rgba(0,0,0,0.12);
}

.syllabary-list a:hover{
    color: #ee6e73;
}

.syllabary-list a:active{
    color: #ffffff;
    background-color: #039be5;
    border-radius: 2px;
}

.syllabary-list .column li .active{
    color: #ffffff!important;
    background-color: #039be5!important;
    border-radius: 2px!important;
}

.syllabary-btn{
    display: block;
    width: 100%;
    clear: both;
    text-align: center;
    margin: 2rem 0;
    padding: 0 1rem;
}

.syllabary-list ul.tags-btn {
    width: 100%;
    display: block;
    clear: both;
    float: left;
    margin: 0 0 1rem 0;
}

.syllabary-list ul.tags-btn li{
    width: 50%;
    display: block;
    text-align: center;
    float: left;
    padding: 1px;
}
.syllabary-list ul.tags-btn li a{
    padding: 0 0.3rem;
}

.category-list{
    padding: 5px!important;
    margin: 0.5rem 0 0.5rem 0!important;
    position: relative;
    height: 91px;
}

.category-list a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.category-list:hover{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.16), 0 5px 20px 0 rgba(0,0,0,0.12);
}

.category-list:active{
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16), 0 1px 5px 0 rgba(0,0,0,0.12);
    opacity: 0.7;
}

@media only screen and (min-width: 993px) {
    .category-list {
        width: 49%!important;
        margin: 0.5rem 0.5%!important;
    }

    .category-list .thumbnail{
        height: 80px;
    }

    .category-list .description{
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
    }
}

@media only screen and (max-width: 992px) {
    .category-list .thumbnail{
        height: 80px;;
    }

    .category-list .description{
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
    }
}

h2.category-list-header{
    width: 100%;
    clear: both;
    font-size: 1.3rem;
}

.category-list .thumbnail{
    width: 80px;
    overflow: hidden;
    float: left;
    margin-right: 10px;
    display: block;
}

.category-list .thumbnail img{
    height:140%;
}

.category-list .title {
    color: #039be5;
    font-size: 14px;
    margin: 0;
    padding: 0;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 59%;
    position: relative;

}

.category-list .title:hover{
    color: #ee6e73;
}

.category-list .description{
    display: -webkit-box;
    margin: 0;
    border-top: 1px solid #e0e0e0;
    padding-top: 1px;
    width: auto;
}

.category-list span.right{
    padding-right: 0.2rem;
}

.sidebar-banner p:hover{
    color: #ee6e73;
}

.category-menu li{
    width: 21%;
    margin: 1%;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    border: 3px solid #42a5f5;
    border-right: 4px solid #42a5f5;
    border-bottom: 6px solid #42a5f5;
    border-radius: 5px;
    position: relative;
    background-color: #fff;
}

.category-menu i{
    font-size: 38px;
    width: 100%;
    display: block;
    position: relative;
    top: 3px;
}

.category-menu span{
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-menu li:active{
    border: 3px solid #42a5f5!important;
    opacity: 0.7;
    top: 0;
    border-bottom: 3px solid #42a5f5!important;

}
.category-menu li:hover{
    border-bottom: 8px solid #42a5f5;
}

p.displayed-results{
    color: #444;
    position: relative;
    top: 15px;
    margin: 0;
    font-size: 14px;
}

.result{
    width: 100%;
    margin: 0 0 20px 0!important;
    display: block;
    text-align: center;
    font-size: 1.2rem;

}

.result span{
    font-size: 1.5rem;
    font-weight: bold;
}

.breadcrumb{
    font-size: 14px!important;
}

/*----------リストデザイン-Start----------*/
.list-all {
    background-color: #fff;
    width: 100%;
    margin: 0!important;
    clear: both;
}

.list-all .col{
    padding: 0 0.1rem;
}

.list-all img{
    box-shadow: none;
    position: relative;
    display: block;
    height:100%;
    border-radius: 0!important;
}

.list-thumbnail{
    display: block;
    position: relative;
    width: 100%;
    padding: 0!important;
    overflow: hidden;
    height: 100%;
    background-color: #eceff1;
    border: 1px solid #eceff1;
    border-bottom: none!important;
}
.list-all img{
    box-shadow: none;
    position: relative;
    display: block;
    height:100%;
    border-radius: 0!important;
}

.list-all ul{
    margin: 20px 0 0 0!important;
}

.list-all h1{
    font-size: 1.3rem!important;
    clear: both;
}

.list-pickup-header{
    font-size: 1.3rem!important;
    clear: both;
    line-height: 110%;
}

.recommend-star {
    font-size: 14px!important;
    font-weight: bold!important;
    position: absolute!important;
    color: #ffffff!important;
    display: inline-block!important;
    border-radius: 2px;
    padding: 0 5px!important;
    z-index: 100!important;
    bottom: 0.2rem!important;
    left: 0.2rem!important;
    right: auto!important;
}

.bg-color-red {
    background-color: #ee6e73;
}

.bg-color-gray {
    background-color: #9e9e9e;
}

.text-gray {
    padding: 8px;
    margin: 16px 0;
    font-size: 14px;
    color: #9e9e9e;
}

.secret-word-btn {
    padding: 16px 0;
    margin:  8px 0;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.secret-word-btn i {
    margin-right: 8px;
}

.form-my-woed {
    margin: 16px 0;
    padding: 8px;
}

.form-my-woed .card {
    padding: 16px;
    margin: 0;
}

.form-my-woed button {
    border: none!important;
    padding: 12px 16px!important;
    border-radius: 8px;
    box-shadow: none!important;
}

.form-my-woed button:hover {
    background-color: #9e9e9e;
}

.form-my-woed-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bg-color-blue {
    background-color: #42A5F5;
}

.my-woed h2 {
    padding: 0 16px;
    font-size: 1.1rem;
    margin-top: 60px;
    display: flex;
    align-items: center;
}

.my-woed h2 i {
    margin-right: 8px;
}

.osusume10{
    background-color: #ffd600!important;
}
.osusume9{
    background-color: #9e9e9e!important;
}
.osusume8{
    background-color: #1E88E5!important;
}
.osusume7,.osusume6{
    background-color: #00bcd4!important;
}

.osusume5,.osusume4,.osusume3,.osusume2,.osusume1{
    background-color: #8bc34a!important;
}


/*表紙リスト*/
.package-list{
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
}

.package-list-text{
    color: #000000;
    background: #eceff1;
    width: 100%;
    display: block;
    padding: 5px 0;
}

.package-list h2{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 3px 0;
    padding: 0.5px 1px;
    line-height: 1.5;
    height: 35px;
}

.package-list img{
    width: auto;
}

.package-list li{
    margin-top: 15px;
    position: relative;
    box-shadow: 0px 5px 3px -2px rgba(0,0,0,0.16);
    -webkit-box-shadow: 0px 5px 2px -2px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 5px 2px -2px rgba(0,0,0,0.16);
}

.package-list-text{
    height: 65px;
}

.package-list-text {
    color: #000000!important;
    background: #ffffff;
    width: 100%;
    display: block;
    padding: 5px 0;
    border-left: 1px solid #eceff1!important;
    border-right: 1px solid #eceff1!important;
    box-sizing: border-box;
}

.package-list a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: left;
}

.package-list li:hover{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.16), 0 5px 20px 0 rgba(0,0,0,0.12);
}

.package-list li:active{
    opacity: 0.7!important;
    box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.16);!important;
}

@media only screen and (max-width: 600px){
    .package-list .list-thumbnail{
        height: 44vw;
    }
}

@media only screen and (min-width: 601px){
    .package-list .list-thumbnail{
        height: 23vw;
    }
}

@media only screen and (min-width: 993px){
    .package-list .list-thumbnail{
        height: 205px;
    }
}

.package-list-anime{
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    position: relative;
    height: auto;
    border-top: 1px solid #eceff1!important;
}

.package-list-anime::before{
    font-family: Material Icons;
    content: "\E865";
    font-size: 13px;
    color: #448AFF;
    position: relative;
    top: 2px;
}

/*リスト下の詳細ボックス*/
.detail-box{
    width: 100%;
    display: block;
    margin: 1rem 0!important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    border-radius: 2px;

}

.detail-box .head-box{
    float: left;
    width: 100%;
    clear: both;
    background-color: #448AFF !important;
    color: #ffffff;
    padding: 5px 10px;
    display: inline-block;
    /*text-align: center;*/

}

.detail-box .foot-box{
    width: 100%;
    padding: 10px;
    display: inline-block;
}

/*リスト下&ブックビューの詳細ボックス*/

/*プルダウン*/

.detail-box a{
    border:1px solid #039be5;
    border-radius: 3px;
    font-size: 14px;
    padding: 2px 3px;
    margin: 2px;
    display: inline-block;
    color: #039be5;
    font-weight: normal;
}

.detail-box a:hover{
    color: #ee6e73;
    border:1px solid #ee6e73;
    /*border-bottom:1px solid #ee6e73;*/

}

.detail-box a:active{
    color: #ee6e73;
    border:1px solid #ee6e73;
    /*border-bottom:1px solid #ee6e73;*/
}

.detail-box .anime-icon:before{
    font-family: Material Icons;
    content: "\E865";
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
}

.detail-box .character-icon:before{
    font-family: Material Icons;
    content: 'person';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
    font-weight: bold;
}

.detail-box .circle-icon:before{
    font-family: Material Icons;
    content: 'create';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;

}

.detail-box .tag-icon:before{
    font-family: Material Icons;
    content: 'local_offer';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;

}

.detail-box .upload-day-icon:before{
    font-family: Material Icons;
    content: 'access_time';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
}

.detail-box .issue-day-icon:before{
    font-family: Material Icons;
    content: 'watch_later';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
    font-weight: bold;
}

.detail-box .recommend-icon:before{
    font-family: Material Icons;
    content: 'thumb_up';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
}

.detail-box .books-icon:before{
    font-family: Material Icons;
    content: 'library_books';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
}

.detail-box .description-icon:before{
    font-family: Material Icons;
    content: 'description';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
}

.detail-box .title-icon:before{
    font-family: Material Icons;
    content: 'layers';
    font-size: 16px;
    color: #FFFFFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
    font-weight: bold;
}

/*プルダウン*/

.pull-wrap{
    margin-bottom: 1rem;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}

.pull-wrap div#characters,#tags{
    margin: 0;
    font-size: 14px;
    width: 100%;
    clear: both;
    background-color: #448AFF !important;
    color: #ffffff;
    padding: 5px 10px;
    display: inline-block;
}

.pull-wrap-btn {
    display: block;
    width: 100%;
    color: #fff;
    text-align: center;
    padding-left: 0!important;
    top: 185px;
    z-index: 1000;
    margin: 0;
}

.pull-wrap-btn i{
    color: rgba(66, 66, 66, 0.7);
    font-size: 30px;
}
.pull-wrap-item {
    position: relative;
    overflow: hidden;
    height: 180px; /*隠した状態の高さ*/
    width: 100%;
    padding: 0 5px 20px 5px;
    top: -25px;
}
.pull-wrap-item::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /*グラデーションで隠す高さ*/
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.5) 50%, #fff 100%);
    background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.5) 50%, #fff 100%);
    content: "";
}
.pull-wrap-trigger {
    display: none; /*チェックボックスは常に非表示*/
}
.pull-wrap-trigger:checked + .pull-wrap-btn {
    display: none; /*チェックされていたら、pull-wrap-btnを非表示にする*/
}
.pull-wrap-trigger:checked ~ .pull-wrap-item {
    height: auto; /*チェックされていたら、高さを戻す*/
    top: 10px!important;/*チェックされていたら、topのpadding0で表示*/
}
.pull-wrap-trigger:checked ~ .pull-wrap-item::before {
    display: none; /*チェックされていたら、pull-wrap-itemのbeforeを非表示にする*/
}

/*オススメ度*/

.detail-box .star, .star_border{
    width: 8.8%!important;
    margin: 0!important;
    display: inline-block!important;
    vertical-align: middle;
}

/* お気に入り */
.favorite-icon {
    color: #ee6e73!important;
    font-size: 32px;
    position: absolute;
    display: inline-block;
    border-radius: 4px 0 0 0;
    padding: 0;
    z-index: 100;
    right: 0!important;
    bottom: -1px!important;
    background-color: #FFFFFF;
    cursor: pointer;
}

@media only screen and (max-width: 601px) {
    .favorite-icon {
        font-size: 24px;
    }
}

@media only screen and (max-width: 992px){
    .global-menu .material-icons.favorite {
        margin: 0!important;
    }

    .global-menu .material-icons.star {
        margin: 0!important;
    }
}

@media only screen and (min-width: 992px) {
    .global-menu .material-icons.favorite {
        display: none!important;
    }
}

@media only screen and (max-width: 321px){
    .global-menu .material-icons.favorite::after {
        content: "お気に入り";
        font-size: 9px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem;
        right: 2.6rem;
    }
}

@media only screen and (max-width: 321px){
    .global-menu .material-icons.favorite {
        font-size: 24px!important;
        position: absolute;
        top: -6px;
        color: #ffffff;
        width: 30px!important;
        right: 95px;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.favorite::after {
        content: "お気に入り";
        font-size: 10px!important;
        font-weight: bold;
        position: relative;
        bottom: -0.7rem;
        right: 3rem;
    }
}

@media only screen and (min-width: 322px) {
    .global-menu .material-icons.favorite {
        font-size: 24px!important;
        position: absolute;
        top: -6px;
        color: #ffffff;
        width: 30px!important;
        right: 120px;
    }
}

.favorite-btn {
    padding: 16px 0;
    margin:  8px 0;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    cursor: pointer;
}

.favorite-btn i {
    margin-right: 8px;
}

.category-list .favorite-icon {
    bottom: 0!important;
    left: 0!important;
    right: auto!important;
    top: auto!important;
    font-size: 24px!important;
    border-radius: 0 4px 0 0!important;
}

.favorite-btn-area {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

.favorite-btn-area .favorite-btn {
    font-size: 12px;
    max-width: 200px;
    padding: 12px 12px;
    margin: 40px 0 0 0;
    border-radius: 8px;
}

.favorite-btn-area .favorite-btn i {
    font-size: 12px;
}

.favorite-btn:hover {
    box-shadow: none;

}

/*----------現在未使用 ここから----------*/
/*詳細リスト*/
@media only screen and (min-width: 993px) {
    .detail-list li.row .col.l6,.m6 {
        width: 48%!important;
        margin-right: 12px;
    }
}

.detail-list-text {
    padding: 0 5px!important;
}

.detail-list li h2{
    font-size: 15px;
    font-weight: bold;
    color: #1565c0;
    margin: 0 0 5% 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    top: 2px;
}

.detail-list li p{
    margin: 0;
}

.detail-list a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: left;
}

.detail-list-anime,.detail-list-circle,.detail-list-characters{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-list-column{
    vertical-align: 4px;
    display: inline;
    position: relative;
    font-size: 12px;
    font-weight: bold;
}

.detail-list-tags{
    width: 100%;
    position: relative;
    display: block;
    height: 55px;
}

.detail-list .material-icons{
    font-size: 18px!important;
}

.detail-list li{
    display: block;
    width: 100%;
    padding: 5px 0 5px 5px!important;
    position: relative;
}

.detail-list .label{
    color: #7986cb;
}

@media only screen and (max-width: 320px) {
    .detail-list-tags p {
        position: absolute;
        height: 88%;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 90%;
        font-size: 11px;
        font-weight: bold;
        bottom: 4px;
        left: 22px;
    }
}

@media only screen and (min-width: 321px) {
    .detail-list-tags p {
        position: absolute;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 90%;
        font-size: 12px;
        font-weight: bold;
        bottom: 2px;
        left: 22px;
    }
}

/*ソートボタン*/

.list-sort {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    background-color: #fff;
    margin:40px 0 auto;
    width: 100%;
    white-space: nowrap;
}

.list-sort .sort-btn {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    display: block;
    float: left;
    text-align: center;
    line-height: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: .8px;
    width: 15%;
    min-width: 80px;
}

.list-sort .sort-btn a.active {
    color: #ffffff;
    background-color: #9e9e9e;
    display: block;
    width: 90%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color .28s ease;
    margin: 0 5px;
    border-radius: 4px;
}

.list-sort .sort-btn a {
    color: #9e9e9e;
    border: #9e9e9e 2px solid;
    display: block;
    width: 90%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color .28s ease;
    margin: 0 5px;
    border-radius: 4px;
}

.list-sort .sort-btn a , .list-sort .sort-btn a.active{
    margin: 0 5%!important;
}

/*表紙リストと詳細リストのタブ切り替え*/
.tab-item {
    width: calc(100%/2);
    height: 50px!important;
    border-bottom: 3px solid #039be5;
    background-color: #f5f5f5;
    line-height: 50px!important;
    font-size: 16px!important;
    color: #039be5;
    display: block!important;
    float: left;
    text-align: center;
    transition: all 0.2s ease!important;
    margin-bottom: 20px;
}

input[name="tab-item"] {
    display: none;
}

#package:checked ~ #package-area,
#detail:checked ~ #detail-area{
    display: block;
}

.list-all [type="radio"]:not(:checked)+label, [type="radio"]:checked+label{
    padding-left: 0;
}

.tab-content{
    display: none;
    padding: 20px 0 0 0;
    clear: both;
    overflow: hidden;
    margin: 0 -5px;
}

.list-all input:checked + .tab-item {
    background-color: #039be5;
    color: #fff;
}

[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after{
    background: none!important;
}

[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after{
    border: none!important;
}
/*----------ここまで----------*/

/*----------リストデザイン-End----------*/

/*----------ランキングデザイン-Start----------*/
.period-btn{
    width: 100%;
    display: table;
}

.period-btn li{
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    padding: 2px;
    width: 25%;
}

.period-btn li a{
    color: #9e9e9e;
    padding: 10px;
    border-radius: 4px;
    border: #9e9e9e 2px solid;
}

.period-btn li a:hover,.ranking-btn li a:hover{
    opacity: 0.7;
}

.period-btn li a.active , .ranking-btn li a.active{
    background-color: #9e9e9e;
    color: #ffffff;
}

.ranking-btn{
    width: 100%;
    display: table;
    /*margin: 0 5% 2rem 5%;*/
    margin-bottom: 3rem;
}

.ranking-btn li{
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    padding: 2px;
    width: 25%;
}

.ranking-btn li a{
    /*color: #9e9e9e;*/
    color: rgba(0,0,0,0.87);
    padding: 10px;
    border-radius: 2px;
    border: #9e9e9e 1px solid;
    font-size: 12px;
    /*box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);*/
}

.fs10{
    font-size: 10px;
}

.ranking-contents{
    display: block;
    width: 100%;
}

.ranking-contents h1,h2{
    font-size: 1.3rem;
    clear: both;
}

.comic-wrap .card{
    margin: 0!important;
    box-shadow: none;
}

.comic-wrap{
    display: block;
    /*margin: 0 -5px 10px -5px;*/
    margin: 0 0 10px 0;
}

.comic-wrap img{
    box-shadow: none;
    border-bottom: none!important;
}

@media only screen and (min-width: 993px){
    .comic-wrap li{
        width: 16.2%;
    }
    ul.comic-wrap.scroll li{
        width: 15.2%!important;
    }

    .comic-wrap li .thumbnail{
        height: 195px;
    }

    .comic-wrap{
        margin: 0 0 10px 0;
    }
}

@media only screen and (max-width: 992px){
    .comic-wrap li{
        width: 24.3%;
    }
    ul.comic-wrap.scroll li{
        width: 23.3%!important;
    }
    .comic-wrap li .thumbnail{
        height: 22vw;
    }
}

@media only screen and (max-width: 599px){
    .comic-wrap li{
        width: 32.5%;
    }

    ul.comic-wrap.scroll li{
        width: 31.5%!important;
    }

    .comic-wrap li .thumbnail{
        height: 42vw;
    }

    .sp-none{
        display: none!important;
    }
}

ul.comic-wrap.scroll{
    overflow-x: scroll;
    /*    white-space: nowrap;
    */    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin: 10px 0 0 0!important;
    padding: 0 0 1.2rem 0;
    display: flex!important;
}

.comic-wrap li{
    display: inline-block;
    padding: 5px 1px;
    color: #039be5;
}

.comic-wrap .comics{
    border: 1px #ddd solid;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.10), 0 1px 10px 0 rgba(0,0,0,0.06);
    display: block;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
    overflow: hidden;
}

.comic-wrap .rank{
    width: 100%;
    display: block;
    margin-bottom: 3px;
    padding: 0 3px;
    /*background-color: #f7f7f7;*/
    border: 1px solid #ddd;
    color: rgba(0,0,0,0.87);
    font-size: 12px;
}
.comic-wrap .rank1{
    width: 100%;
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    background-color: #ffd600;
    border: none;
    padding: 1px 3px 1px 3px;
    font-size: 12px;
    font-weight: bold;
}

.comic-wrap .rank2{
    width: 100%;
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    background-color: #bdbdbd;
    border: none;
    padding: 1px 3px 1px 3px;
    font-size: 12px;
    font-weight: bold;
}

.comic-wrap .rank3{
    width: 100%;
    display: block;
    margin-bottom: 3px;
    color: #ffffff;
    background-color: #8d6e63;
    border: none;
    padding: 1px 3px 1px 3px;
    font-size: 12px;
    font-weight: bold;
}

.comic-wrap li .thumbnail{
    display: block;
    width: 100%;
    overflow: hidden;
}

.comic-wrap li .thumbnail img{
    display: block;
    height: 100%;
    display: block;
}

.comic-wrap .title{
    font-size: 12px;
    margin: 0;
    padding: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    height: 40px;
}

.comic-wrap .category{
    font-size: 12px;
    margin: 0;
    padding: 0 2px 2px 1px;
    border-top: none!important;
    color: #5d5d5d;
    /*overflow: hidden;*/
    /*display: -webkit-box;*/
    /*-webkit-line-clamp: 1;*/
    /*-webkit-box-orient: vertical;*/
    line-height: 1.5;
    height: 23px;


    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.comic-wrap .category:hover{
    color: #ee6e73!important;
}

.comic-wrap a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.comic-wrap .comics:hover{
    color: #ee6e73!important;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.12), 0 5px 10px 0 rgba(0,0,0,0.08);
}

.comic-wrap .title:hover{
    color: #ee6e73!important;
}

.comic-wrap .comics:active{
    color: #ee6e73!important;
    box-shadow:none;
    opacity: 0.7;
}

.ranking-link{
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    display: block;
    width: 100%;
    padding: 10px;
    text-align: left;
    font-size: 1em;
    margin-bottom: 3em;
}

.ranking-link:hover{
    color: #ee6e73
}

.ranking-menu{
    border: 1px solid #ddd;
    padding: 0;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.10), 0 1px 10px 0 rgba(0,0,0,0.06);
}

.ranking-menu li{
    border-bottom: 1px solid #ddd;
    display: block;
    width: 100%;
    position: relative;
}

.ranking-menu li a{
    padding: 10px;
}

.ranking-menu li a:hover{
    color: #ee6e73
}

.comic-wrap a:active{
    opacity: 0.7;
}

.ranking-menu li:last-child{
    border: none;
}

.comic-wrap .category.anime-icon::before {
    font-family: Material Icons;
    content: "\E865";
    font-size: 13px;
    color: #448AFF;
    position: relative;
    top: 2px;
}

.comic-wrap .category.circle-icon::before {
    font-family: Material Icons;
    content: 'create';
    font-size: 13px;
    color: #00bfa5;
    position: relative;
    top: 2px;
}

.comic-wrap .category.tag-icon::before {
    font-family: Material Icons;
    content: 'local_offer';
    font-size: 13px;
    color: #7986cb;
    position: relative;
    top: 2px;
    margin-right: 2px;
}

.comic-wrap .category.comic-icon::before {
    font-family: Material Icons;
    content: 'layers';
    font-size: 13px;
    color: #64b5f6;
    position: relative;
    top: 2px;
}

.comic-wrap .comics .thumbnail{
    position: relative;
}

.comic-wrap .comics .thumbnail span{
    position: absolute;
    bottom: 1px;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    font-size: 10px;
    color: #ffffff;
    padding: 5px;
}

.comic-wrap .upload-day,.relation-circle,.relation-character,.relation-anime{
    width: 100%;
    display: block;
    margin-bottom: 3px;
    padding: 0 3px;
    border: 1px solid #ddd;
    color: #777777;
    font-size: 12px;
}

.comic-wrap .upload-day:before{
    font-family: Material Icons;
    content: 'access_time';
    font-size: 14px;
    color: #ee6e73;
    position: relative;
    top: 3px;
    margin-right: 3px;
    line-height: 1;
}

.comic-wrap .relation-circle:before{
    font-family: Material Icons;
    content: 'create';
    font-size: 14px;
    color: #00bfa5;
    position: relative;
    top: 3px;
    margin-right: 3px;
    line-height: 1;
}

.comic-wrap .relation-character:before{
    font-family: Material Icons;
    content: 'person';
    font-size: 14px;
    color: #29b6f6;
    position: relative;
    top: 3px;
    margin-right: 3px;
    line-height: 1;
}

.comic-wrap .relation-anime:before{
    font-family: Material Icons;
    content: 'radio_button_unchecked';
    font-size: 14px;
    color: #448AFF;
    position: relative;
    top: 3px;
    margin-right: 3px;
    line-height: 1;
}

.ranking-header{
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    width: 100%;
    position: relative;
    line-height: 120%;
    display: flex;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px;
    margin-top: 1.5rem;
}

.ranking-header a{
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: left;
}

.ranking-header:active{
    opacity: 0.7;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.08), 0 2px 10px 0 rgba(0,0,0,0.04);
}

.ranking-header:hover{
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.16), 0 5px 15px 0 rgba(0,0,0,0.12);
}

.ranking-header .left-block{
    background-color: #448AFF !important;
    color: #ffffff;
    padding: 15px 10px;
    font-size: 1.2rem!important;
    display: inline-block;
    width: 16%;
    text-align: center;
    border-radius: 2px 0 0 2px;
}

.ranking-header .right-block{
    padding: 15px 10px;
    font-size: 1.2rem!important;
    width: 84%;
    color: #039be5;
    display: inline-block;
    border-radius: 0 2px 2px 0;
    /*background-color: #fafafa !important;*/
}

.ranking-header .right-block .title{
    font-size: 1.2rem!important;
    width: 95%;
    color: #039be5;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 5px;


}

.ranking-header .right{
    float: right !important;
    position: absolute;
    right: 5px;
}

.ranking-header i{
    font-size: 2rem;
    color: #d1a300;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100!important;
}

.ranking-comics{
    height: 80px;
    width: 100%;
}

/*----------ランキングデザイン-End----------*/

/*----------ブックビューデザイン-Start----------*/

.margin-bottom-0{
    margin-bottom: 0!important;
}

.next-comics .col{
    margin: 0!important;
    padding: 0!important;
}

.bookview-wrap .col{
    margin: 0!important;
    padding: 0!important;
}

@media only screen and (min-width: 993px){
    .bookview-wrap .col{
        padding: 0 0.75rem!important;
    }
}
/*----------ブックビューデザイン-End----------*/



.top-ranking-container{
    clear: both;
    overflow: hidden;
    margin: 0 -8px;
    display: block;
}

.notice dt{
    font-size: 15px;
}

.notice dd{
    border-bottom: 1px solid #d0d0d0;
    margin-bottom: 10px;
}

.package-list .top-label {
    width: 100%;
    display: block;
    margin-bottom: 3px;
    padding: 0 3px;
    border: 1px solid #ddd;
    color: rgba(0,0,0,0.87);
    font-size: 12px;
}

.package-list .new-comic {
    width: 100%!important;
    display: block!important;
    margin-bottom: 3px!important;
    color: #ffffff!important;
    background-color: #ee6e73!important;
    border: none!important;
    padding: 1px 3px 1px 3px!important;
    font-size: 12px!important;
    font-weight: bold!important;
}

.history-list{
    display: block;
    width: 100%;
}

.card-menu{
    border: 1px solid #ddd;
    padding: 0;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.10), 0 1px 10px 0 rgba(0,0,0,0.06);
    margin-bottom: 2rem;
}

.card-menu li{
    border-bottom: 1px solid #ddd;
    display: block;
    width: 100%;
    position: relative;
}

.card-menu li span{
    margin-left: 10px;
}

.card-menu li a{
    padding: 10px;
}

.card-menu li a:hover{
    color: #ee6e73
}

.card-menu li:last-child{
    border: none;
    text-align: right;
}


.card-menu li:first-child{
    border-top: 1px solid #ddd;
}

.card-menu h3{
    margin-left: 10px;
}

div#ranking_doujinshiweekly,div#ranking_gensakuweekly,div#ranking_circleweekly,div#ranking_tagweekly{
    padding: 0!important;
}

.package-list h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 3px 0;
    padding: 0.5px 1px;
    line-height: 1.5;
    height: 35px;
}

div.pc {
    display: none !important;
}

@media only screen and (min-width: 321px) and (max-width: 812px) {
    div.pc {
        display: block !important;
    }
}

div.rss-panel {
    padding: 0;
    text-align: left;
}

ul.rss-scroll {
    padding: 0;
    height: 300px !important;
    list-style: none;
    overflow-y: scroll !important;
    white-space: nowrap;
    text-align: left;
}

.rss-panel h2.rss {
    margin: 0;
    padding: 5px 0px 5px 10px;
    background-color: #448AFF !important;
    font-size: 1.5rem;
}

.rss-panel ul.rss {
    margin: 5px;
}

.rss-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    border-bottom: solid 1px #ddd;
    margin-top: 5px;
    margin-bottom: 4px;
}

.rss-panel ul.rss li:last-child a {
    border-bottom: none;
}

ul.rss-scroll::-webkit-scrollbar{
    width: 10px;
}
ul.rss-scroll::-webkit-scrollbar-thumb{
    background: #c1c1c1;
    border-radius: 6px;
    border: 2px solid #c1c1c1;
}
ul.rss-scroll::-webkit-scrollbar-track-piece:start{
    background: #f1f1f1;
}
ul.rss-scroll::-webkit-scrollbar-track-piece:end{
    background: #f1f1f1;
}

.info-box {
    margin: 1rem 0 1rem 0;
}

.info-box span{
    font-size: 12px;
    margin-bottom: 0.5rem;
    display: block;
}

.hierarchy {
    margin: 0;
    padding: 2px 4px;
    box-sizing: border-box;
    list-style: none; }
.hierarchy__item {
    font-size: 13px;
    display: inline-flex;
    position: relative;
    color: #ffffff; }
.hierarchy__item:last-child::after {
    content: none; }
.hierarchy__item::after {
    content: ">";
    margin-left: 2px;
    margin-right: 2px; }
.hierarchy__item a {
    color: #ffffff;
    display: inline-block; }

.banner-card img {
    height: auto; }

img.kpia {
    height: auto; }

.comic-wrap li .thumbnail img {
    width: auto; }

.site-thumbnail img {
    height: auto; }

img.sh_all {
    height: auto; }

/**---RSS---**/
.rss {
    margin: 0 0 10px 0!important;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
}

.rss__item {
    width: 16.6%;
    padding: 4px 2px;
}

@media screen and (max-width: 992px) {
    .rss__item {
        width: 25%;
    }
}

@media screen and (max-width: 599px) {
    .rss__item {
        width: 33.3%;
    }
}

.rss__item:hover {
    color: #ee6e73!important;
}

.rss__link {
    border: 1px #ddd solid;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.10), 0 1px 10px 0 rgba(0,0,0,0.06);
    display: block;
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
    overflow: hidden;
    color: #039be5;
    text-align: left;
}

.rss__link:hover {
    color: #ee6e73!important;
}

.rss__thumb {
    display: block;
    width: 100%;
    box-shadow: none;
    height: 195px;
}

@media screen and (max-width: 992px) {
    .rss__thumb {
        height: 22vw;
    }
}

@media screen and (max-width: 599px) {
    .rss__thumb {
        height: 42vw;
    }
}

.rss__title {
    font-size: 12px;
    margin: 0;
    padding: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    height: 40px;
}

.rss__site {
    font-size: 12px;
    margin: 0;
    padding: 0 2px 2px 1px;
    border-top: 1px solid #ddd;
    color: #5d5d5d;
    line-height: 1.5;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    color: rgba(0,0,0,0.87);
}

.rss__site::before {
    font-family: Material Icons;
    content: "\e9c5";
    font-size: 13px;
    color: #448AFF;
    position: relative;
    top: 2px;
}

/**---RSS(scroll)---**/

.scroll-rss .rss {
    width: 100%!important;
    overflow-x: scroll!important;
    overflow-y: hidden!important;
    white-space: nowrap!important;
    box-sizing: border-box!important;
    display: block!important;
    margin: 10px 0 10px 0!important;
}

.scroll-rss .rss__item {
    display: inline-block!important;
    width: 23%;
}

@media screen and (min-width: 1023px) {
    .scroll-rss .rss__item {
        width: 17%;
    }
}

@media screen and (max-width: 599px) {
    .scroll-rss .rss__item {
        width: 31%;
    }
}

.scroll-rss .rss__title {
    height: 25px;
}

.scroll-rss .rss__site {
    font-size: 11px;
}

/**---RSS(sidebar)---**/

.sidebar-rss .rss__item {
    width: 33.3%!important;
    padding: 4px 2px;
}

.sidebar-rss .rss__thumb {
    height: 135px!important;
}

@media screen and (max-width: 992px) {
    .sidebar-rss .rss__item {
        width: 33.3%!important;
    }

    .sidebar-rss .rss__thumb {
        height: 110px!important;
    }
}

@media screen and (max-width: 599px) {
    .sidebar-rss .rss__item {
        width: 33.3%!important;
    }

    .sidebar-rss .rss__thumb {
        height: 42vw!important;
    }
}

.ad-wrap {
    margin: 16px 0;
}

#link-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    z-index: 2147483647;
}

.card-menu {
    padding: 10px;
}

.card-wrap {
    margin: 20px 0;
}

.card-wrap .card-menu li:last-child {
    text-align: left!important;
}

.search-word {
    margin: 0.5rem 0 1rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.search-word-header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 20px;
    width: 100%;
}

.search-word-header h5 {
    font-size: 1rem;
    line-height: 110%;
    margin: 0.5rem 0 0.4rem 0;
}

.search-word-item {
    background-color: #fff;
    padding: 6px 8px;

}

.search-word-link {
    font-size: 14px;
}

.search-word-link:hover {
    color: #ee6e73;
}

.list-sort {
    height: 38px!important;
}

.list-sort .sort-btn {
    line-height: 38px!important;
    height: 38px!important;
    min-width: auto!important;
    width: auto!important;
    letter-spacing: inherit!important;
}

.list-sort .sort-btn a.active {
    width: 95%!important;
    margin: 0!important;
}

.list-sort .sort-btn a {
    width: 95%!important;
    font-size: 12px!important;
    margin: 0!important;
}

/* 20230208 */
.comic-wrap .category {
    border-top: 1px solid #eceff1!important;
}

/* mmd */

.video-list {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    border-top: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    margin: 16px 0;
    text-align: left!important;
}

.video-link {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
}

.video-thumb {
    width: 35%;
    height: 120px;
    box-sizing: border-box;
    overflow: hidden;
}

.video-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.video-text {
    width: 65%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 8px;
}

.video-title {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(0,0,0,0.87);
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
    padding-left: 8px;
    font-size: 18px;
}

.video-tags {
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 100%;
    box-sizing: border-box;
}

.video-tag {
    margin-right: 8px;
    margin-bottom: 8px;
}

.video-scroll {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    margin: 16px 0;
    overflow-x: scroll;
    display: flex!important;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left!important;
}

.video-scroll-item {
    padding-right: 8px;
    width: 65%;
    box-sizing: border-box;
    display: inline-block!important;
    min-width: 65%!important;
}

.video-scroll-link {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.video-scroll-thumb {
    width: 100%;
    box-sizing: border-box;
    height: 220px;
    overflow: hidden;
}

.video-scroll-img {
    width: 100%;
    border-radius: 4px 4px 0 0;
    box-shadow: none;
    height: 100%;
    object-fit: cover;
}

.video-scroll-text {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 8px 8px 8px;
}

.video-scroll-title {
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(0,0,0,0.87);
    margin-bottom: 4px;
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.video-scroll-tags {
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    box-sizing: border-box;
}

.video-scroll-tag {
    margin-right: 8px;
    margin-bottom: 4px;
}

/*-- video-card --*/
.video-card {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    margin: 32px 0;
    display: flex!important;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    text-align: left!important;
}

.video-card-item {
    padding: 8px 4px 8px 4px ;
    width: 50%;
    box-sizing: border-box;
    display: inline-block!important;
}

.video-card-link {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    border-radius: 4px;
}

.video-card-thumb {
    width: 100%;
    box-sizing: border-box;
    height: 130px;
}

.video-card-img {
    box-sizing: border-box;
    border-radius: 4px 4px 0 0;
    position: relative;
    width: 100%;
    box-shadow: none;
    height: 100%;
    object-fit: cover;
}

.video-card-text {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 0 8px 8px 8px;
}

.video-card-title {
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(0,0,0,0.87);
    margin-bottom: 4px;
    width: 100%;
    box-sizing: border-box;
    display: block;
}

.video-card-tags {
    font-size: 10px;
    font-weight: bold;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    box-sizing: border-box;
}

.video-card-tag {
    margin-right: 8px;
    margin-bottom: 4px;
}

/*-- video-tile --*/
.video-tile {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    margin: 32px 0;
    display: flex!important;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    text-align: left!important;
}

.video-tile-item {
    padding: 4px 0 4px 0 ;
    width: 49%;
    box-sizing: border-box;
    display: inline-block!important;
}

.video-tile-link {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    height: 130px;
}

.video-tile-thumb {
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    position: relative;
    width: 100%;
    box-shadow: none;
    height: 100%;
    object-fit: cover;
}


.video-tile-link::after {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(360deg, rgb(0 0 0 / 85%) 0%, rgb(246 246 246 / 0%) 50%, rgba(255,255,255,0) 100%);    content: "";
}


.video-tile-title {
    font-size: 12px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFFFFF;
    margin-bottom: 4px;
    width: 100%;
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom: 0;
    padding: 0 4px;
    line-height: 1;
    z-index: 2;
}

.video-play {
    display: block;
    width: 100%;
    padding: 8px 0;
    box-sizing: border-box;
    margin: 32px 0;
    text-align: left!important;
}

.video-play-link {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
}

.video-play-thumb {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/*.video-play-thumb::before {*/
/*    position: absolute;*/
/*    content: "";*/
/*    display: block;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    border-radius: 50%;*/
/*    background-color: #000000;*/
/*    opacity: 0.6;*/
/*    width: 60px;*/
/*    height: 60px;*/
/*}*/

/*.video-play-thumb::after {*/
/*    position: absolute;*/
/*    content: "";*/
/*    display: block;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-40%, -50%);*/
/*    border-style: solid;*/
/*    border-color: transparent transparent transparent #ffffff;*/
/*    border-width: 15px 0 15px 25px;*/
/*}*/

.video-play-img {
    width: 100%;
    border-radius: 8px;
}

.video-play-title {
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(0,0,0,0.87);
    padding: 4px 0 0 0;
    width: 100%;
    box-sizing: border-box;
}

.video-play-tags {
    padding: 0 8px;
    margin: 4px 0 4px 0;
    font-size: 14px;
    font-weight: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    box-sizing: border-box;
}

.video-play-tag {
    margin-right: 8px;
    margin-bottom: 4px;
}

.video-play-btn {
    width: 98%;
    box-sizing: border-box;
    background-color: #ee6e73;
    font-size: 16px;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    margin: 8px auto;
    border-radius: 8px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

}

/* 202304 */

.article-card {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
    margin: 32px 0;
    padding: 0;
    text-align: left;
}

.article-card-link {
    padding: 24px 8px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}

.article-card-title {
    font-size: 18px;
    font-weight: bold;
    color: rgba(0,0,0,0.87);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
}

.article-card-content {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
}

.article-card-thumb {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/*.article-card-thumb::before {*/
/*    position: absolute;*/
/*    content: "";*/
/*    display: block;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    border-radius: 50%;*/
/*    background-color: #000000;*/
/*    opacity: 0.6;*/
/*    width: 60px;*/
/*    height: 60px;*/
/*}*/

/*.article-card-thumb::after {*/
/*    position: absolute;*/
/*    content: "";*/
/*    display: block;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-40%, -50%);*/
/*    border-style: solid;*/
/*    border-color: transparent transparent transparent #ffffff;*/
/*    border-width: 15px 0 15px 25px;*/
/*}*/

.article-card-img {
    width: 100%;
    box-sizing: border-box;
}

.article-card-tags {
    width: 100%;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 4px 0;
}

.article-card-tag {
    border: 1px solid #039be5;
    border-radius: 3px;
    font-size: 14px;
    padding: 2px 3px;
    margin: 2px;
    display: inline-block;
    color: #039be5;
    font-weight: normal;
}

.article-card-btn {
    background-color: #ee6e73;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    color: #FFFFFF;
    border-radius: 12px;
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0;
}

@media screen and (min-width: 1025px) {
    .hidden-pc {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .hidden-sp {
        display: none;
    }
}

.out-scroll-img {
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 16px 0;
    padding: 0; }
.out-scroll-img__list {
    margin: 0 0 4px 0;
    padding: 0 4px;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto !important;
    white-space: nowrap; }
.out-scroll-img__item {
    width: 30%;
    padding: 2px;
    display: inline-block;
    overflow: hidden;
    white-space: normal; }
.out-scroll-img__link {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 130px;
}
.out-scroll-img__link:hover {
    color: #448AFF !important; }
.out-scroll-img__img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    object-position: 50% 65%; }

.content-scroll-img {
    padding: 8px;
    margin: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box; }
.content-scroll-img__heading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
    color: #222222;
    font-weight: bold;
    padding: 0 8px;
    margin: 32px 0 0 0; }
.content-scroll-img__heading i {
    color: #FECD16;
    margin-right: 4px; }
.content-scroll-img__heading svg {
    color: #FECD16;
    margin-right: 4px; }
.content-scroll-img__list {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    display: flex;
    padding: 8px 0; }
.content-scroll-img__item {
    flex: 0 0 auto;
    display: flex;
    width: 40%;
    margin-right: 8px;
    align-items: center;
    justify-content: center; }
.content-scroll-img__item a {
    display: block;
    width: 100%;
    height: 180px;
}
.content-scroll-img__item img {
    width: 100%;
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
    object-position: 50% 65%; }
.content-scroll-img__btn {
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    background-color: #448AFF !important;
    border-radius: 8px;
    width: 100%;
    padding: 16px 0;
    text-align: center;
    color: #FFFFFF;
    position: relative;
    height: auto!important;}

/*縦リスト*/
.ds-1 {
    margin: 0 0 24px 0;
}
.ds-1__link {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.ds-1__thumb {
    width: 35%;
    height: 120px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 8px;
}
.ds-1__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}
.ds-1__detail {
    width: 65%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 8px;
}
.ds-1__title {
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.87);
    font-size: 13px;
    margin: 0 0 8px 0;
}
.ds-1__text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.87);
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    margin: 0 0 8px 0;
}
.ds-1__btn {
    font-size: 10px;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #ee6e73;
    border-radius: 4px;
    padding: 2px 4px;
    width: 30%;
    box-sizing: border-box;
    position: absolute;
    right: 8px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1), 0 1px 10px 0 rgba(0, 0, 0, 0.06);
}
.ds-1__btn:hover {
    background-color: #9e9e9e;
}
.ds-1__btn svg {
    color: #FFFFFF;
    font-size: 12px;
    margin-right: 4px;
}

/*スクロールリスト*/
.ds-2 {
    box-sizing: border-box;
    width: 100%;
    padding: 8px;
    overflow-x: scroll;
    display: flex !important;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left !important;
    margin: 8px 0 24px 0;
}
.ds-2__item {
    padding-right: 8px;
    box-sizing: border-box;
    display: inline-block !important;
    min-width: 170px !important;
}
.ds-2__link {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    border-radius: 4px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1), 0 1px 10px 0 rgba(0, 0, 0, 0.06);
}
.ds-2__thumb {
    width: 100%;
    box-sizing: border-box;
    height: 170px;
    overflow: hidden;
    position: relative;
}
.ds-2__img {
    width: 100%;
    border-radius: 4px 4px 0 0;
    box-shadow: none;
    height: 100%;
    object-fit: cover;
}
.ds-2__detail {
    padding: 4px;
}
.ds-2__caption {
    position: absolute;
    padding: 2px;
    left: 0;
    bottom: 0;
    font-size: 10px;
    color: #FFFFFF;
    background-color: #ee6e73;
    font-weight: bold;
}
.ds-2__text {
    width: 100%;
    font-size: 11px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    margin: 4px 0;
}
.ds-2__btn {
    font-size: 10px;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #ee6e73;
    border-radius: 4px;
    padding: 4px 0;
    width: 90%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto;
}
.ds-2__btn:hover {
    background-color: #9e9e9e;
}
.ds-2__btn svg {
    color: #FFFFFF;
    font-size: 14px;
    margin-right: 4px;
}

/*試し読み*/
.ds-3 {
    padding: 8px;
    margin: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
.ds-3__list {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    display: flex;
    padding: 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 24px 0;
}
.ds-3__item {
    flex: 0 0 auto;
    display: flex;
    width: 85%;
    margin-right: 8px;
    align-items: center;
    justify-content: flex-start;
    scroll-snap-align: start;
}
.ds-3__item:last-child {
    justify-content: center;
}
.ds-3__item img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}
.ds-3__item--btn {
    font-size: 18px;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #2979FF;
    border-radius: 8px;
    padding: 16px 0;
    width: 80%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1), 0 1px 10px 0 rgba(0, 0, 0, 0.06);
}
.ds-3__item--btn:hover {
    background-color: #9e9e9e;
}
.ds-3__item--btn svg {
    color: #FFFFFF;
    font-size: 12px;
    margin-right: 4px;
}
.ds-3__btn {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #ee6e73;
    border-radius: 8px;
    padding: 16px 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1), 0 1px 10px 0 rgba(0, 0, 0, 0.06);
    margin: 0 0 24px 0;
}
.ds-3__btn:hover {
    background-color: #9e9e9e;
}
.ds-3__btn svg {
    color: #FFFFFF;
    font-size: 12px;
    margin-right: 8px;
}