// out: style.css, sourcemap: false, compress: false
@primaryColor: #002c76;
@secondaryColor: #d6eefb;
@white: #fff;
@red: #e83828;
@gold: #c8a063;
@silver: #9fa0a0;
@bronze: #b18147;
@linkColor: @primaryColor;
@fontColor: #222;
@shadowColor: #888;
@fontSize: 15px;
@lineHeight: 1.8;


@charset "UTF-8";

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*# sourceMappingURL=normalize.min.css.map */

* {
    box-sizing: border-box;
}

@font-face {
  font-family: 'fontello';
  src: url('./fontello/font/fontello.eot');
  src: url('./fontello/font/fontello.eot#iefix') format('embedded-opentype'),
       url('./fontello/font/fontello.woff') format('woff'),
       url('./fontello/font/fontello.ttf') format('truetype'),
       url('./fontello/font/fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
    line-height: 1;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    width: auto;
}

html {
    margin: 0;
    padding:0;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.8;
    font-family: Noto sans JP,"游ゴシック体",YuGothic,"游ゴシック","Yu Gothic","メイリオ";
    color: #333;
}

body {
    position: relative;
    padding-top: 58px;
    overflow-x: hidden;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
}

a {
    color: @linkColor;
    text-decoration: none;
    &:hover {
        opacity: 0.65;
        text-decoration: underline;
    }
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

.mt1 { margin-top: 10px; }
.mt2 { margin-top: 20px; }
.mt3 { margin-top: 30px; }
.mt4 { margin-top: 40px; }
.mt5 { margin-top: 50px; }
.mb1 { margin-bottom: 10px; }
.mb2 { margin-bottom: 20px; }
.mb3 { margin-bottom: 30px; }
.mb4 { margin-bottom: 40px; }
.mb5 { margin-bottom: 50px; }
.ml1 { margin-left: 10px; }
.ml2 { margin-left: 20px; }
.ml3 { margin-left: 30px; }
.ml4 { margin-left: 40px; }
.ml5 { margin-left: 50px; }
.mr1 { margin-right: 10px; }
.mr2 { margin-right: 20px; }
.mr3 { margin-right: 30px; }
.mr4 { margin-right: 40px; }
.mr5 { margin-right: 50px; }

.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    &&--full {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    &&--relative {
        position: relative;
    }
    &&--breadcrumbs {
        margin-top: 20px;
    	margin-bottom: 20px;
    }
}

.header {
    position: fixed;
    top: 0;
    z-index: 11;
    width: 100%;
	margin-bottom: 10px;
    background: #fff;
    border-bottom: solid 5px @secondaryColor;
    &&--ebook-top {
    	margin-bottom: 0;
    	border-bottom: none;
    }
    &-flex {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        width: 100%;
    }
    &__logo {
        margin: 10px 0;
        font-size: 1em;
        * {
            display: block;
        }
        img {
            height: 2.4em;
            line-height: 1;
        }
    }
    &__utility {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    &__nav {
        margin-right: 20px;
        > ul {
            display: flex;
            align-items: baseline;
            justify-content: flex-end;
            list-style: none;
            padding: 0;
            > li {
                margin-right: 20px;
                &:last-of-type {
                    margin-right: 0;
                }
            }
        }
    }
}

.toggleonlineSitesMenu {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 100%;
	background: #eee;
	color: @primaryColor;
	font-size: 11px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

input[name="onlineSitesMenu"] {
	display: none;
}
.onlineSites {
    display: none;
}

.onlineSitesMenu {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	line-height: 1;
    > span {
        width: 9px;
        height: 9px;
        margin: 5%;
        background: @primaryColor;
        border-radius: 1px;
    }
}

input[name="onlineSitesMenu"]:checked + label.toggleonlineSitesMenu {
    .onlineSitesMenu {
        > span {
            width: 32px;
            height: 2px;
            position: absolute;
            top: 26px;
            left: 10px;
            &:nth-child(1) {
                transform: rotate(45deg);
            }
            &:nth-child(2) {
                transform: rotate(-45deg);
            }
            &:nth-child(n+3) {
                display: none;
            }
        }
        > div {
            display: none;
        }
    }
    .onlineSites {
        display: block;
        position: absolute;
        top: 100%;
        right: 15px;
        width: 230px;
        background: #fff;
        border: solid 2px;
        padding: 30px 15px;
        border-radius: 10px;
        .linkItems {
            line-height: 1;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start;
            margin-bottom: -20px;
            padding: 0;
            > li {
                width: 65px;
                height: 65px;
                margin: 0 15px 20px;
                > a {
                    padding: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                    background: #fff;
                    width: 100%;
                    height: 100%;
                    border: solid 1px;
                    border-radius: 10px;
                    img {
                        margin-bottom: 5px;
                    }
                }
            }
        }
    }
}

.searchArticle {
	max-width: 720px;
	margin: 0 0 80px;
}

.searchForm {
    margin: 0 auto;
    &__field {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 1rem;
        &:last-child {
            margin-bottom: 0;
        }
        > label {
            display: block;
            width: 6em;
            min-width: 6em;
            margin-right: 1em;
        }
        .input-group {
            &.input-group--tag > label {
                margin-bottom: 0.5em;
            }
            > label {
                display: inline-block;
                margin-right: 1em;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        > input[type="text"] {
            display: block;
            width: auto;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: solid 1px #bbb;
            padding: 0.5rem;
        }
        &&--date input, input[type="date"] {
            border: solid 1px #bbb;
            padding: 0.375rem 0.5rem;
        }
        &&--submit {
            margin-top: 20px;
            button {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border: solid 1px #888;
                background: #888;
                color: @white;
                padding: 0.5rem 0.75rem;
                cursor: pointer;
            }
        }
    }
    &__toggleDetails {
        text-decoration: none;
        &:hover { text-decoration: none; }
        &:after {
            content: "";
            display: inline-block;
            border: solid 2px;
            border-top: none;
            border-left: none;
            width: 8px;
            height: 8px;
            position: relative;
            transform: rotate(45deg);
            top: -3px;
            right: -6px;
        }
        &.active:after {
            transform: rotate(225deg);
            top: 2px;
        }
    }
}

.pcOnly {
    display: block;
    &&--flex { display: flex; }
    &&--inline { display: inline; }
    &&--inline-block { display: inline-block; }
}
.mobileOnly {
    display: none;
    &&--flex { display: none; }
    &&--inline { display: none; }
    &&--inline-block { display: none; }
}
@media all and (max-width: 480px){
    .pcOnly {
        display: none;
        &&--flex { display: none; }
        &&--inline { display: none; }
        &&--inline-block { display: none; }
    }
    .mobileOnly {
        display: block;
        &&--flex { display: flex; }
        &&--inline { display: inline; }
        &&--inline-block { display: inline-block; }
    }
}

.breadcrumbs {
    margin: 20px 0;
    font-size: 0.75rem;
    line-height: 1;
    list-style: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0;
    margin: 0;
    > li {
        display: inline;
        margin-right: 10px;
        &:after {
            content: ">";
            margin-left: 15px;
        }
        &:last-child {
            margin-right: 0;
            &:after {
                display: none;
            }
        }
    }
}

.mainSlider {
    background: @secondaryColor;
    padding: 20px 0;
    margin-bottom: 20px;
    .swiper {
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .swiper-slide {
        display: block;
        width: 75%;
        transform: scale(0.75);
        max-width: 900px;
        // transition: transform 0.5s ease 0.1s;
        position: relative;
        > img {
            display: block;
            width: 100%;
        }
        &-active {
            transform: scale(1);
            z-index: 2;
        }
        &-prev {
            left: 6%;
            z-index: 1;
        }
        &-next {
            left: -6%;
            z-index: 1;
        }
    }
}

.bg-ebook {
    background: url(../img/bg-ebook.png);
    background-size: 50px;
    background-position: -25px -25px;
    padding: 20px 0;
}
.bg-secondary {
    background-color: @secondaryColor;
}

.listItems {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    &&--slider {
        margin: auto;
        width: auto;
    }
}

.listItem {
    width: calc(~"16.66% - 30px");
    margin: 0 15px 30px;
    &__thumb {
        position: relative;
        padding: 10px 10px 122%;
        background: #eee;
        height: 0;
        * {
            display: block;
        }
        > a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            > img {
                padding: 10px;
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
    &__genreLink > a {
        min-width: 100px;
        height: 80px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 10px;
        color: @fontColor;
        text-decoration: none;
        line-height: 1.5;
        border-radius: 15px;
        font-size: 18px;
        &:hover {
            background: #ddd;
            opacity: 1;
        }
    }
    &__author {
    	font-size: 0.75em;
    	white-space: nowrap;
    	text-overflow: ellipsis;
    	overflow: hidden;
    	position: relative;
        > * {
            color: inherit;
        }
    }
    &__text {
        line-height: 1.5;
        margin-top: 5px;
        position: absolute;
    	left: auto;
    	top: 100%;
    	width: 100%;
    }
    &__title {
        font-size: 0.875em;
        a {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            position: relative;
        }
    }
    &__bookmark {
        display: none;
        .simplefavorite-button {
            background: none;
            padding: 0;
            border: none;
            font-size: 16px;
            color: @primaryColor;
            cursor: pointer;
        }
    }
    &__pubDate {
        font-size: 0.75em;
        color: #888;
        display: none;
    }
    &__desc {
        font-size: 0.75em;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        display: none;
    }
    &&--slider {
        width: auto;
        margin-bottom: 0;
        margin-left: 0;
        .listItem__thumb {
            background: none;
            padding: 0;
            height: auto;
            > a {
                position: relative;
                width: auto;
                height: auto;
                top: unset;
                left: unset;
                transform: unset;
                > img {
                    padding: 0;
                    max-height: 210px;
                    box-shadow: 0px 0px 1px #bbb;
                }
            }
        }
    }
    &&--category {
        background: #fff;
        width: 140px;
        height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        border: solid 1px #eee;
    }
}

.itemsSwiper {
    &&--pb100 {
        padding-bottom: 100px;
    }
    .swiper-wrapper {
        align-items: flex-end;
    }
}

.sliderItemSection {
    padding: 15px 25px;
    &__headingWrap {
        width: 100%;
        margin: 0 auto 15px;
    }
    &__heading {
        margin: 0;
        margin-right: 25px;
        font-size: 1.64em;
        &&--genre {
            font-size: 1.32em;
        }
    }
    &__caption {
        margin: 0 0 0 1rem;
    }
    &__more {
        position: absolute;
        top: 1.5rem;
        right: 0;
        margin: 0;
        transform: translateY(-50%);
        > a {
            display: block;
            width: fit-content;
            border-radius: 5px;
            line-height: 1;
            &:after {
                content: "〉";
                display: inline-block;
                position: relative;
                transform: scale(0.8);
            }
        }
    }
}

.itemsSwiper {
    margin: 15px auto;
    overflow: hidden;
}

.swiper-wrapper {
    align-items: flex-end;
}

.ebook {
    .swiper-button-prev,
    .swiper-button-next {
        background: @primaryColor;
        color: #fff;
        width: 28px;
        height: 28px;
        margin: 0;
        border-radius: 28px;
        transition: all 0.5s ease;
        transform: translateY(-50%);
        &:hover {
            opacity: 0.8;
        }
        &:after {
            content: "";
            width: 10px;
            height: 10px;
            position: absolute;
            top: 8px;
            border-bottom: solid 3px #fff;
            border-left: solid 3px #fff;
            z-index: 1;
        }
    }
    .swiper-button-prev:after {
        left: 10px;
        transform: rotate(45deg);
    }
    .swiper-button-next:after {
        right: 10px;
        transform: rotate(225deg);
    }
    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: -20px;
    }
    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: -20px;
    }
    .swiper-button-next.swiper-button-disabled,
    .swiper-button-prev.swiper-button-disabled {
        opacity: 0;
    }
    .mainSlider {
        .swiper-button-prev,
        .swiper-button-next {
            width: 32px;
            height: 32px;
            border-radius: 32px;
            &:after {
                width: 10px;
                height: 10px;
                top: 10px;
            }
        }
        .swiper-button-prev:after {
            left: 12px;
        }
        .swiper-button-next:after {
            right: 12px;
        }
        .swiper-button-prev,
        .swiper-rtl .swiper-button-next {
            left: calc(~"((100% - 900px) / 2) - 52px");
        }
        .swiper-button-next,
        .swiper-rtl .swiper-button-prev {
            right: calc(~"((100% - 900px) / 2) - 52px");
        }
    }
    .button {
        color: @white;
        background: @primaryColor;
        padding: 0.5em 1em;
        border-radius: 20px;
        line-height: 1;
        text-align: center;
        display: block;
        text-decoration: none;
        border: solid 1px @primaryColor;
        transition: all 0.35s ease;
        &:hover {
            background: @white;
            color: @primaryColor;
            opacity: 1;
        }
        &.button--login {
            background: @primaryColor;
            border-color: @primaryColor;
            font-size: 0.875rem;
            margin: 3px 0;
            &:hover {
                color: @primaryColor;
                background: @white;
            }
        }
        &.button--register {
            background: @red;
            border-color: @red;
            font-size: 0.875rem;
            margin: 3px 0;
            &:hover {
                color: @red;
                background: @white;
            }
        }
        &.button--inlineblock {
            display: inline-block;
        }
        &.button--large {
        	font-size: 1.12em;
        }
    }
}

.pagenation {
    margin: 50px auto 80px;
    > ul {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
        > li {
            > a {
                min-width: 2em;
                background: #fff;
                padding: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                border: solid 1px #bbb;
                color: inherit;
                &.currentpage {
                    pointer-events: none;
                    background: #bbb;
                    color: #fff;
                }
            }
            + li {
                margin-left: 25px;
            }
        }
    }
}

.archiveTitle {
	font-size: 1.4em;
	margin: 0px 0 15px;
}
.archiveContents {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin-left: -15px;
	margin-right: -15px;
	width: auto;
    &&--bookmark {
        .listItem__bookmark {
            display: inline-block;
        }
    }
    > li {
        width: calc(~"16.66% - 30px");
        margin: 0 15px 30px;
    }
}
.archiveUtility {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.listItem.listItem--archive {
	width: 100%;
	margin: 0;
    .listItem {
        &__thumb {
            background: url(../img/bg-ebook.png);
            background-size: 50px;
        }
        &__text {
            position: relative;
        }
    }
}

.itemDetailSection {
    margin-bottom: 80px;
}
.itemDetail {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    &__mainthumb {
        width: calc(~"100% - 90px");
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            display: block;
            max-height: 480px;
        }
    }
    &__thumbWrap {
        width: calc(~"50% - 20px");
        padding: 20px;
        margin-right: 20px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        position: sticky;
        top: 60px;
        z-index: 1;
        background: url('../img/bg-ebook.png');
        background-size: 50px;
    }
    &__subthumbs {
        width: 80px;
        margin-right: 10px;
        order: 1;
        > a {
            width: 80px;
            height: 80px;
            position: relative;
            display: block;
            background: #fff;
            border: solid 1px #ddd;
            padding: 5px;
            &:hover {
                opacity: 1;
                img {
                    opacity: 0.7;
                }
            }
            + a {
                margin-top: 5px;
            }
            > img {
                max-height: 100%;
                display: block;
                margin: auto;
                border: solid 1px #eee;
            }
        }
    }
    &__text {
        width: 50%;
        padding-left: 20px;
        min-width: 460px;
    }
    &__tags {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
        font-size: 0.875em;
        > a {
            display: inline-block;
            margin: 0 1em 0.25em 0;
            &:hover {
                text-decoration: none;
            }
        }
    }
    &__title {
        margin: 0;
        line-height: 1.5;
        font-size: 1.64em;
        .mainTitle {
            margin-right: 0.5em;
        }
        .subtitle {
            font-size: 0.65em;
            display: inline-block;
        }
    }
    &__author {
        margin-bottom: 15px;
        a {
            color: inherit;
            &:hover {
                color: @primaryColor;
                text-decoration: none;
                opacity: 1;
            }
        }
    }
    &__caption {
        margin: 15px auto 5px;
    }
    &__paper {
        margin: 15px 0;
    }
    &__price {
        color: #888;
        margin: 0 auto 15px;
        display: inline-block;
    }
    &__buttonWrap {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        position: sticky;
        top: 0px;
        z-index: 2;
        background: #fff;
        padding: 0;
        margin: 15px auto;
    }
    &__button {
        display: flex;
        align-items: center;
        justify-content: center;
        border: solid 1px #888;
        color: #fff;
        background: #888;
        padding: 10px;
        line-height: 1;
        min-width: 120px;
        border-radius: 10px;
        text-decoration: none;
        transition: all 0.35s ease;
        + .itemDetail__button {
            margin-left: 20px;
        }
        &:hover {
            opacity: 1;
            text-decoration: none;
        }
        &&--read {
            background: #0044bb;
            border-color: #0044bb;
            &:hover {
                color: #0044bb;
                background: #f8faff;
            }
        }
        &&--sample {
            font-size: 0.84em;
            &:hover {
                background: #fafafa;
                color: #666;
            }
        }
        &&--buy {
            border-color: #e83828;
            color: #fff;
            background: #e83828;
            font-size: 0.84em;
            display: inline-flex;
            padding: 5px;
            margin-left: 1em;
            &:hover {
                background: #fff;
                color: #e83828;
            }
        }
    }
    &__tab {
        border: solid 1px #ccc;
        border-left: none;
        border-right: none;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        > a {
            display: block;
            line-height: 1;
            padding: 8px 10px;
            border-radius: 5px;
            margin: 10px 15px 10px 0;
            text-decoration: none;
            opacity: 1;
            background: #f3f3f3;
            min-width: 90px;
            i {
                margin-right: 2px;
            }
            &.active {
                background: #0045bb!important;
                color: #fff;
                pointer-events: none;
            }
            &:hover {
                background: #dae2fc;
            }
        }
    }
    &__tabContent {
        display: none;
        padding: 20px 0;
        &&.active {
            display: block;
        }
    }
    &__index {
        > ul {
            font-weight: bold;
        }
        ul {
            padding: 0;
            list-style: none;
            margin: 0;
            ul {
                padding-left: 36px;
                font-weight: normal;
                list-style: disc;
                ul {
                    list-style: circle;
                    padding-left: 1em;
                }
            }
        }
    }
    &__content {
        position: relative;
    }
    &__profileWrap {
        background: url(../img/bg-ebook.png);
        background-size: 50px;
        padding: 10px 15px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 0.875em;
    }
    &__profile {
        margin-bottom: 20px;
        &:last-of-type {
            margin-bottom: 0;
        }
        &__title {
            margin: 0 auto;
        }
        &__name {
            font-size: 1em;
            font-weight: bolder;
            margin: 0px auto;
        }
        &__text {
            margin: 0px auto;
        }
    }
    &-utility {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        margin: 1rem 0;
    }
    &-share {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        flex-wrap: wrap;
        max-width: 100%;
        > * {
        	height: 40px;
        	width: 40px;
            > * {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                cursor: pointer;
                overflow: hidden;
                border: solid 1px;
                background: @white;
                color: @primaryColor;
                &:hover {
                    opacity: 0.7;
                }
            }
            + * {
                margin-left: 10px;
            }
        }
        &-favorites > * {
            border-color: #888;
            color: #888;
            font-size: 1.25rem;
            &:hover {
                color: #ff9800;
                border-color: #ff9800;
            }
            &.active {
                border-color: #ff9800;
                color: #fff;
                background: #ff9800;
                &:hover {
                    opacity: 0.7;
                }
            }
        }
        &-line > * {
        	border-color: #4caf50;
        }
        #share-line {
            fill: #4caf50;
        }
        &-twitter > * {
            border-color: #03a9f4;
        }
        #icon-twitter {
        	fill: #03a9f4;
        }
        &-facebook > * {
            border-color: #3f51b5;
        }
        #icon-facebook {
        	fill: #3f51b5;
        }
    }
}
.review {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 15px;
    &__rating {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        margin-right: 10px;
        line-height: 1;
        color: #ff8800;
        i.icon:before {
            margin: 0 1px;
        }
    }
    &__date {
        font-size: 0.875em;
        margin-right: 10px;
        color: #888;
    }
}

.separator {
    background: linear-gradient(90deg,@shadowColor,transparent);
    border: none;
    height: 1px;
    display: block;
    position: relative;
}
.mobileMenuWrap {
    display: block;
	position: fixed;
	top: 6px;
	right: 60px;
	width: 300px;
	z-index: 12;
}

.mobileMenu {
    > ul {
        margin: 0;
        list-style: none;
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        padding: 0;
        > li {
            width: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 8px;
            line-height: 1.15;
            font-size: 11px;
            color: @primaryColor;
            &.home {
                display: none;
            }
            &.others {
                width: 60px;
            }
            a:hover {
                text-decoration: none;
                opacity: 1;
            }
        }
    }
    &&--loggedIn {
        > ul > li{
            width: 20%;
            &.others {
                position: relative;
                top: unset;
                transform: unset;
                right: unset;
            }
        }
    }
    .subMenuWrap {
        display: none;
    }
    .subMenu {
        position: relative;
        width: 100%;
        overflow-y: scroll;
        padding-right: 20px;
        > * {
        	width: 100%;
            &:last-child {
                margin-bottom: 0!important;
            }
        }
    }
    #toggleOther {
        display: none;
        + label {
            position: relative;
            z-index: 2;
            cursor: pointer;
            .show { display: block; }
            .hide { display: none; }
        }
        &:checked + label {
            .show { display: none; }
            .hide { display: block; }
            + .subMenuWrap {
                display: block;
                position: absolute;
                top: 45px;
                right: 0px;
                overflow: hidden;
                z-index: 1;
                width: 280px;
                height: auto;
                padding: 20px;
                padding-right: 0;
                border: solid 2px #ddd;
                border-radius: 15px;
                background: #fff;
                text-align: right;
            }
        }
    }
    .menuList {
        margin: 0 auto 30px;
        list-style: none;
        font-size: 1rem;
        padding: 0;
        &.menuList--small {
            font-size: 0.875rem;
            a {
                color: #666;
            }
        }
        > li {
            margin-bottom: 0.75em;
        }
        a:hover { text-decoration: underline; }
    }

    .copyright.copyright--inMenu {
        color: #888;
        margin-bottom: 30px;
    }

    .planUpgrade {
        font-size: 1.25rem;
        > a {
            color: @gold;
        }
    }
}

.footer {
    margin-top: 100px;
    background: #eee;
    padding: 10px;
    &__navigation {
    	display: flex;
    	align-items: flex-end;
    	justify-content: center;
    	flex-wrap: wrap;
    	list-style: none;
    	padding: 0;
    	margin: 15px -15px;
    	font-size: 0.84em;
    	width: auto;
        > li {
            margin: 0 15px;
        }
    }
    &__logo {
        margin: auto;
        width: 180px;
    }
    &__copyright {
        text-align: center;
        font-size: 11px;
        margin-bottom: 10px;
    }
}

.noscript-message {
	margin-bottom: 15px;
	border: solid 1px red;
	padding: 5px 8px;
	width: fit-content;
	line-height: 1.5;
}


@media all and (max-width: 1100px){
    .archiveContents > li {
        width: calc(~"20% - 30px");
    }
}

@media all and (max-width: 920px){
    .archiveContents > li {
        width: calc(~"25% - 30px");
    }
}

@media all and (max-width: 820px){
    body {
        padding-top: 50px;
    }
    .container {
        &&--bookslider {
            padding-right: 0;
        }
    }
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
        background: #fff;
        border-bottom: solid 1px #ddd;
        &&--ebook-top {
            border-bottom: solid 1px #ddd;
        }
        &__logo {
            margin: 10px 0;
            img {
                height: 29px;
            }
        }
    }
    .onlineSitesMenu {
        height: 22px;
        > div {
            display: none;
        }
    }
    label.toggleonlineSitesMenu {
        width: 50px;
    	background: none;
    }

    .mainColumn {
        margin-bottom: 100px;
    }
    .mainSlider {
        padding: 20px;
    }
    .listItem {
        width: calc(~"25% - 20px");
        margin: 0 10px 20px;
        &&--slider .listItem__thumb>a>img {
            max-height: 182px;
        }
        &__genreLink > a {
            height: 70px;
            min-width: 80px;
        }
    }
    .sliderItemSection {
        padding: 10px 0;
        &__headingWrap {
            margin-bottom: 10px;
            display: block;
        }
        &__heading {
            font-size: 1.4em;
        }
        &__caption {
            font-size: 0.875em;
        }
    }
    .itemsSwiper {
        margin: 10px auto;
    }
    .swiper-button-next, .swiper-button-prev {
        display: none;
    }
    .ebook {
        .mainSlider {
            .swiper-button-next, .swiper-button-prev {
                display: block;
            }
            .swiper-button-next {
                right: 5px;
            }
            .swiper-button-prev {
                left: 5px;
            }
        }
    }
    .itemDetail {
        display: block;
        &__thumbWrap {
            width: 100%;
            margin: 30px auto;
            align-items: flex-end;
            flex-direction: column;
            max-width: 640px;
            position: unset;
            z-index: unset;
        	padding: 15px;
        }
        &__mainthumb {
            order: 1;
            width: 100%;
        	justify-content: center;
            img {
                max-height: 35vh;
            }
        }
        &__subthumbs {
            order: 2;
            width: 100%;
            margin: 0 auto;
            display: flex;
            align-items: flex-end;
            flex-wrap: wrap;
            justify-content: center;
            > a {
                width: 70px;
            	height: 70px;
                margin: 8px 4px 0px;
                + a {
                    margin-top: 0;
                }
            }
        }
        &__text {
            width: 100%;
            max-width: 640px;
            min-width: 0px;
            margin: auto;
            padding: 0;
        }
    }

    .mobileMenuWrap {
        display: block;
        position: fixed;
        top: unset;
        bottom: 0;
        left: 0;
        background: @white;
        border-top: solid 1px #888;
        width: 100%;
        z-index: 9999;
        font-size: 0.75em;
    }
    .mobileMenu {
        > ul {
            justify-content: center;
            > li {
                justify-content: center;
                &.home {
                    display: flex;
                }
                &.others {
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                }
            }
        }
        &.mobileMenu--loggedIn {
            > ul {
                justify-content: space-between;
                > li {
                    &.others {
                        position: relative;
                        top: unset;
                        right: unset;
                        transform: unset;
                    }
                }
            }
        }
        #toggleOther:checked + label + .subMenuWrap {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            top: unset;
            bottom: 0px;
            width: 100vw;
            height: 100vh;
            padding: 70px 15px;
            border: none;
            border-radius: 0;
        }
    }

    .footer {
        display: none;
    }
}

@media all and (max-width: 640px){
    .ebook {
        .mainSlider {
            .swiper-button-prev,
            .swiper-rtl .swiper-button-next {
                right: unset;
            }
            .swiper-button-next,
            .swiper-rtl .swiper-button-prev {
                left: unset;
            }
        }
    }
    .archiveContents > li {
        width: calc(~"33.33% - 30px");
    }
}
@media all and (max-width: 480px){
    html {
      font-size: 15px;
      line-height: 1.5;
    }
    .header {
        padding: 10px 5px;
        &__logo {
            margin: 0;
            font-size: 1.24em;
        }
        &__nav {
            margin-right: 0;
            > ul {
                margin: 0;
                > li {
                    margin-right: 10px;
                    font-size: 0.875em;
                }
            }
        }
        &__searchbox {
            display: none;
        }
    }
    input[name="onlineSitesMenu"]:checked + label.toggleonlineSitesMenu .onlineSitesMenu > span {
    	top: 20px;
    	left: 6px;
    }
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    .ebook {
        .mainSlider {
            padding: 20px 5px;
            .swiper-slide {
                width: 100%;
                transform: none;
                &-prev {
                    left: unset;
                }
                &-next {
                    left: unset;
                }
            }
            .swiper-button {
                &-next,&-prev {
                    width: 24px;
                    height: 24px;
                    &:after {
                        width: 7px;
                        height: 7px;
                        top: 7px;
                    }
                }
                &-prev {
                    left: 2px;
                    &:after { left: 9px; }
                }
                &-next {
                    right: 2px;
                    &:after { right: 9px; }
                }
            }
        }
    }

    .main {
        margin-top: 15px;
        &&--top {
            margin-top: 0px;
        }
    }
    .listItems {
        margin-left: -10px;
        margin-right: -10px;
    }
    .listItem {
        width: calc(~"33.33% - 10px");
        margin: 0 5px 10px;
        &&--slider {
            .listItem__thumb {
                min-width: 110px;
                > a {
                    justify-content: flex-start;
                    > img {
                        max-height: 160px;
                    }
                }
            }
        }
        &&--category {
            width: 110px;
            max-height: 160px;
            > a {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                flex-direction: column;
            }
        }
        &__genreLink > a {
            font-size: 1.08em;
        }
    }
    .sliderItemSection {
        &__heading {
            font-size: 1.16em;
            margin-right: 0;
        }
        &__more {
            font-size: 0.875em;
            top: 50%;
        }
    }
    .pagenation {
        margin: 40px auto 60px;
        > ul > li + li {
            margin-left: 15px;
        }
    }

    .archiveTitle {
    	font-size: 1.2em;
    }
    .archiveContents > li {
        width: calc(~"50% - 30px");
    }

    .itemDetailSection {
    	margin-bottom: 50px;
    }
    .itemDetail {
        &__thumbWrap {
            margin: 15px auto;
            display: block;
        }
        &__mainthumb {
            justify-content: center;
            width: 100%;
        }
        &__subthumbs {
            width: 100%;
            justify-content: center;
            > a {
                width: 60px;
                height: 60px;
                margin-top: 12px;
            }
        }
        &__heading {
            font-size: 1.4em;
            margin-bottom: 0px;
        }
        &__title {
            font-size: 1.32em;
            line-height: 1.3;
        }
        &__author {
            margin-bottom: 0;
        }
        &__caption {
            margin: 0 auto 10px;
        }
        &__buttonWrap {
            width: 100%;
            padding: 10px 0;
            margin: 5px auto;
        }
        &__button {
            padding: 10px;
            min-width: 100px;
            font-size: 0.875em;
            width: calc(~"50% - 10px");
            + .itemDetail__button {
                margin-left: 20px;
            }
            &.itemDetail__button--buy {
                width: auto;
                padding: 5px 10px;
            }
        }
        &__paper {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 100%;
        }
        &__price {
            margin: 0;
        }
        &__tab {
            width: 100%;
            a {
                margin: 6px 10px 6px 0;
            }
        }
    }

    .searchForm {
        &__field {
            display: block;
            align-items: baseline;
            > label {
                width: 100%;
                margin: 0 0 5px;
            }
            input[type="text"] {
                width: 100%;
            }
            input[type="date"] {
                width: calc(~"100% - 2em");
            }
            &.searchForm__field--date {
                .input-group {
                    padding-left: 14px;
                    > * {
                        margin-bottom: 0.75rem;
                    }
                }
                .label {
                    width: 4.5em;
                }
            }
            .input-group.input-group--tag {
                margin-top: 8px;
            }
        }
    }

    .footer {
        display: none;
        padding: 10px 0;
        margin-top: 30px;
        &__nav {
            margin: 10px 0;
            ul {
                flex-wrap: wrap;
                font-size: 0.875em;
            }
        }
        &__logo {
            font-size: 0.875em;
            line-height: 1;
        }
        &__copyright {
            margin-bottom: 0;
        }
    }
}