// out: style.css, compress: false
@fontSize: 16px;
@lineHeight: 1.8;
@fontColor: #333;
@primaryColor: #7f6252;//#624c3f
@secondaryColor: #dbcbc2;
@lightGray: #eee;
@accentColor: orange;
@gold: #c8a063;
@registerColor: #e83828;
@loginColor: #002c76;
@linkColor: #7f6252;//#624c3f
@linkHoverColor: #ac8d7b;
@shadowColor: #888;
@lightShadowColor: #ddd;
@white: #fff;
@maxWidth: 1180px;

@charset "UTF-8";
/*
* Theme Name: Tenrijiho Online
*/

/*! 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 */
@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;
}

html {
    position: relative;
    margin: auto;
    scroll-behavior: smooth;
    font-family: "游ゴシック", "Yu Gothic", "Noto Sans JP", "メイリオ", "meiryo", Helvetica, sans-serif;
}
body {
    padding-top: 60px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
a {
    color: @linkColor;
    text-decoration: none;
    &:hover {
        color: @linkHoverColor;
        img { opacity: 0.75; }
    }
}
.footer {
    a:hover {
        color: @lightShadowColor;
    }
}
html {
    color: @fontColor;
    font-size: @fontSize;
    line-height: @lineHeight;
}
img {
    max-width: 100%;
    height: auto;
}
.clearfix:after,.spacer {
    display: table;
    content: "";
    clear: both;
}

.container {
    padding-left: 20px;
    padding-right: 20px;
    max-width: @maxWidth;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative;
    &&--header {
        padding-top: 14px;
        padding-bottom: 14px;
        max-width: none;
    }
    &&--sideMenu {
        padding-top: 30px;
        padding-bottom: 75px;
        padding-left: 15px;
    }
    &&--breadcrumbs {
        margin-bottom: 15px;
        margin-top: 15px;
        font-size: 0.75rem;
    }
    &&--main {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    &&--toppage-first {
        margin-bottom: 20px;
    }
    &&--flex {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
    }
    &&--stretch {
        align-items: stretch!important;
    }
    &&--wide {
        max-width: 1600px;
    }
    &&--full {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    &&--standard {
        margin-top: 20px;
        margin-bottom: 50px;
    }
    &&--l-margin {
        margin-top: 100px;
        margin-bottom: 100px;
    }
    &&--help {
        max-width: 1000px;
    }
    &&--photoSingle {
        margin: auto;
        max-width: 1040px;
    }
    &&--short { max-width: 720px; }
    &&--post { margin-bottom: 80px; }
    &&--ads { margin: 60px auto; }
    &&--series { margin-bottom: 20px; }
    &&--footer { margin-bottom: 0; }
}

@mnums: 0,10,20,25,30,40,50,80,100;
@mname: 0,10,20,25,30,40,50,80,100;
.loop(@i) when (@i > 0) {
    @s: extract(@mname, @i);
    @n: extract(@mnums, @i);
    .mt@{s} { margin-top: ~"@{n}px!important"; }
    .mr@{s} { margin-right: ~"@{n}px!important"; }
    .mb@{s} { margin-bottom: ~"@{n}px!important"; }
    .ml@{s} { margin-left: ~"@{n}px!important"; }
    .loop(@i - 1);
}
.loop(length(@mnums));

@nums: 25,30,33.33,40,50,60,66.66,70,75;
@numname: 25,30,33,40,50,60,66,70,75;
.loop2(@i) when (@i > 0) {
    @s: extract(@numname, @i);
    @n: extract(@nums, @i);
    .flex-width-@{s} {
        width: calc(~"@{n}% - 10px");
    }
    @media all and (max-width: 820px){
        .flex-width-@{s} {
            width: 100%;
            margin: 0;
        }
    }
    .loop2(@i - 1);
}

.loop2(length(@nums));

.text {
    &-indent1 {
        text-indent: -1em;
        padding-left: 1em;
    }
    &-indent2 {
        text-indent: -2em;
        padding-left: 2em;
    }
    &-small { font-size: 0.88em; }
    &-ssmall { font-size: 0.76em; }
    &-large { font-size: 1.12em; }
    &-xlarge { font-size: 1.24em; }
    &-left { text-align: left; }
    &-center { text-align: center; }
    &-right { text-align: right; }
}

.archive-title,.post-title,.page-title,
.archiveTitle,.postTitle,.pageTitle {
    font-size: 1.875rem;
    line-height: 1.3;
    width: 100%;
    margin: 0 0 1em;
    small {
        font-size: 0.75em;
    }
}

.archiveTitle-caption {
    padding: 10px 0;
    background: rgba(255,255,255,0.9);
    margin-bottom: 25px;
    &:empty { display: none; }
}

.archiveCaption {
    margin: 1rem 0 1rem;
}

.archiveUtility {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.header {
    width: 100%;
    position: fixed;
    background: #fff;
    top: 0;
    z-index: 11;
    border-bottom: solid 5px @shadowColor;
    a {
        color: inherit;
        &:hover {
            color: @linkHoverColor;
        }
    }
    &__title {
        font-size: 1em;
        height: 1.8em;
        margin: 0 auto;
        width: fit-content;
        > a {
            display: block;
            position: relative;
            left: 13%;
            > img {
                display: block;
                max-width: 200px;
            }
        }
    }
    &__searchButton {
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 60px;
    }
    &__utilities {
    	position: absolute;
    	top: 50%;
    	transform: translateY(-50%);
    	right: 20px;
    	font-size: 0.875rem;
        > ul {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            list-style: none;
            > li + li {
                margin-left: 25px;
            }
        }
    }
    &__searchbox {
        display: none;
    }
}

.toggleSideMenu {
    display: block;
    position: absolute;
    left: 10px;
    top: 50%;
    padding: 5px;
    width: 36px;
    height: 26px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: none;
    transform: translateY(-50%);
    span {
        height: 2px;
        width: 26px;
        background: @linkColor;
        display: block;
        position: absolute;
        left: 5px;
        &:nth-child(1) { top: 4px; }
        &:nth-child(2) { top: 13px; }
        &:nth-child(3) { top: 22px; }
    }
}

body.is-toggle-sidemenu {
    .mainColumn {
        width: 100%;
    }
    .sideMenu {
        display: none;
    }
}

.toggleonlineSitesMenu {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 100%;
	background: #eee;
	color: #7e6252;
	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: #7e6252;
        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;
                    }
                }
            }
        }
    }
}

.toppage {
    .categoryWrap {
        margin-bottom: 2rem;
    }
    #breadcrumbs {
        display: none;
    }
    .contentsList.contentsList--category.contentsList--open > ul > li:nth-child(n + 9) {
        display: block;
    }
}

.sideMenu {
    display: block;
    order: 1;
	width: 220px;
    max-height: 100vh;
    background: #fff;
	position: sticky;
	z-index: 2;
	top: 65px;
    left: 0px;
	overflow-y: scroll;
    padding-bottom: 60px;
    &__category {
        ul {
            list-style: none;
            font-weight: bolder;
            > li {
                margin-bottom: 1em;
                line-height: 1.35;
                a {
                    pointer-events: auto;
                }
            }
            ul {
                padding-left: 1em;
                font-weight: normal;
                > li {
                    margin: 0.5em;
                    margin-left: 0;
                }
            }
        }
    }
}

.mainColumn {
    order: 2;
	width: calc(~"100% - 220px");
    padding-top: 30px;
    margin-left: auto;
    margin-right: auto;
    &&--full {
    	width: 100%;
        padding-top: 0;
        padding-bottom: 0;
        + .sideMenu {
            display: none!important;
        }
    }
}

.swiper-container {
    &&-nav {
        padding: 0;
        padding-right: 30px;
        box-sizing: border-box;
        .swiper-slide {
            width: auto;
            display: inline-block;
            margin-left: 1em;
            margin-right: 1em;
            &:first-child { margin-left: 0; }
            &:last-child { margin-right: 0; }
        }
        .swiper-button-prev:after,.swiper-button-next:after {
            content: "";
            width: 8px;
            height: 8px;
            border: solid 2px @fontColor;
            border-right: none;
            border-bottom: none;
            display: block;
            position: absolute;
            top: 40%;
            z-index: 1;
            transform: rotate(135deg);
        }
        .swiper-button-prev {
            left: 0;
            background: linear-gradient(270deg, transparent, #eee, #eee);
            &:after { left: 2px; transform: rotate(315deg); }
        }
        .swiper-button-next {
            right: 0;
            background: linear-gradient(90deg, transparent, #eee, #eee);
            &:after { right: 2px; }
        }
    }
    .swiper-button-next.swiper-button-disabled,
    .swiper-button-prev.swiper-button-disabled {
        display: none;
    }
}

.breadcrumbs {
    list-style: none;
    display: block;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
	overflow: hidden;
    > li {
        margin-right: 1em;
        display: inline;
        &:last-child:after { display: none; }
        &:after {
            content: "＞";
            font-size: 0.875em;
            margin-left: 1em;
        }
    }
}

.slick-container {
    .slick-item {
        box-sizing: border-box;
        img { display: inline; }
        &.slick-item-center {
            text-align: center;
        }
        &.slick-item-column3 {
            width: 33.33%;
            margin: 0 15px;
        }
        &.slick-item-column4 {
            width: 25%;
            margin: 0 15px;
        }
    }
    &&-banner {
        .slick-arrow {
            background: @white;
        }
    }
    &&-series,&&-seriespage {
        margin-left: -15px;
        margin-right: -15px;
        .slick-item {
            margin: 0 15px;
        }
    }
    &&-video {
        margin-left: -10px;
        margin-right: -10px;
        .slick-item {
            margin: 0 10px;
        }
    }
    &&-series,&&-video {
        .slick-arrow {
            transform: translateY(-50%) scale(1.15);
            &.slick-prev { left: 0px; }
            &.slick-next { right: 0px; }
        }
    }
    .slick-arrow {
        display: block;
        position: absolute;
        top: 50%;
        z-index: 2;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        background: @white;
        border: solid 1px @linkColor;
        height: 26px;
        width: 26px;
        border-radius: 30px;
        overflow: hidden;
        text-indent: 100%;
        white-space: nowrap;
        outline: none;
        cursor: pointer;
        transform: translateY(-50%);
        &.slick-disabled {
            opacity: 0;
            pointer-events: none;
        }
        &:after {
            content: "";
            display: block;
            width: 6px;
            height: 6px;
            border: solid 2px @linkColor;
            border-top: none;
            border-right: none;
            position: absolute;
            top: 8px;
        }
        &.slick-prev {
            left: -15px;
            &:after {
                transform: rotate(45deg);
                left: 9px;
            }
        }
        &.slick-next {
            right: -15px;
            &:after {
                transform: rotate(225deg);
                right: 9px;
            }
        }
        &:hover {
            opacity: 0.7;
        }
    }
    .slick-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        list-style: none;
        margin-top: 0.75rem;
        > li {
            margin: 0 0.25rem;
            &.slick-active > button {
                background: @linkColor;
            }
            > button {
                display: block;
                -webkit-appearance: none;
                -moz-appearance: none;
                -ms-appearance: none;
                appearance: none;
                outline: none;
                border: none;
                background: none;
                text-indent: 100%;
                overflow: hidden;
                height: 0.75rem;
                width: 0.75rem;
                background: @lightShadowColor;
                border-radius: 50%;
                line-height: 1;
            }
        }
    }
}

.topContents {
    &&--main {
        width: calc(~"67% - 20px");
    }
    &&--sub {
        width: calc(~"33% - 20px");
    }
}

.article {
    position: relative;
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
    &__title {
        font-size: 1em;
        margin-bottom: 10px;
        font-weight: bolder;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        a {
            display: block;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: inherit;
        }
        .icon-paperlayout {
            width: auto;
            height: 26px;
            margin-right: 5px;
        }
    }
    &__text {
        width: calc(~"100% - 80px");
        line-height: 1.5;
        &&--video {
        	width: calc(~"100% - 80px * 16 / 9");
        }
    }
    &__description {
        font-size: 0.825em;
        margin-bottom: 0.25rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        display: none;
    }
    &__thumbnail {
        width: 80px;
        height: 0px;
        padding-bottom: 80px;
        overflow: hidden;
        position: relative;
        &&--video {
            width: calc(~"80px * 16 / 9");
        }
        > a {
            display: block;
            position: absolute;
            overflow: hidden;
            width: 100%;
            height: 100%;
            &:hover {
                opacity: 1;
                img {
                    opacity: 1;
                    transform: scale(1.08);
                }
            }
            > img {
                display: block;
                transition: all 0.35s ease;
                object-fit: cover;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
    &__playButton {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        background: rgba(0,0,0,0.7);
        line-height: 1;
        width: 40px;
        height: 40px;
        transform: translate(-50%,-50%);
        border: solid 1px #fff;
        border-radius: 50%;
        font-size: 1.32em;
        pointer-events: none;
        .icon.icon-play:before {
            z-index: 3;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0;
            color: #fff;
            transform: translate(-50%,-50%);
            display: block;
        }
    }
    &__meta {
        width: 100%;
        height: 3.4em;
        font-size: 0.75em;
        line-height: 1.15;
        margin-top: 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: @shadowColor;
        > * {
            margin-right: 1rem;
            &:last-child { margin-right: 0; }
        }
    }
    &__tags {
    	display: block;
    	white-space: nowrap;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	margin-top: 8px;
    }
    &__tag {
        margin-right: 1rem;
        &:last-child { margin-right: 0; }
    }
    &__date {
        color: @linkColor;
        &:empty {
            display: none;
        }
    }
    &__bookmark {
        display: none;
        height: 1em;
        button {
        	background: none;
        	padding: 0;
        	border: none;
        	font-size: 16px;
            color: @primaryColor;
            cursor: pointer;
            .icon:before {
                margin-left: 0;
                line-height: 16px;
                font-size: 16px;
                position: relative;
                top: -1px;
            }
        }
    }
    &__paid {
        display: inline-block;
        margin: 0;
        font-size: 0.84em;
        &:before {
            margin: 0;
        }
    }
    &__category--351 {
        display: inline-block;
        text-decoration: none;
        pointer-events: none;
        background: #888;
        color: @white;
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 0.84em;
        font-weight: bolder;
    }
    &__tag:before { content: '#'; }
    &__videoTime {
        position: absolute;
        bottom: 0;
        right: 0;
        line-height: 1;
        z-index: 2;
        font-size: 12px;
        padding: 3px 5px;
        background: #fff;
        pointer-events: none;
        opacity: 0.8;
    }
    &__duration {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(230,230,230,0.8);
        z-index: 2;
        &__currentTime {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            background: red;
            height: 100%;
        }
    }
    &__playPause {
        position: absolute;
        left: 40px;
        margin: 0;
        top: 40px;
        transform: translate(-50%,-50%);
        opacity: 0.9;
        display: block;
        background: #ccc;
        border-radius: 50%;
        width: fit-content;
        padding: 1px;
        z-index: 2;
        button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            appearance: none;
            border: none;
            font-size: 26px;
            line-height: 1;
            color: @primaryColor;
            cursor: pointer;
            margin: 4px;
            z-index: 2;
            position: relative;
            background: #fff;
            i {
                display: block;
                &.icon-pause {
                    display: none;
                    font-size: 0.88em;
                    position: relative;
                    top: -1px;
                }
                &.icon-play {
                    position: relative;
                    left: 2px;
                    top: 0px;
                }
            }
        }
        > svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            circle {
                stroke: transparent;
                stroke-width: 5px;
                stroke-dasharray: 0, 141.3;
                stroke-linecap: round;
                fill: transparent;
                transform-origin: 25px 25px;
                transform: rotate(-90deg);
            }
        }
    }
}
.article {
    &&--topContents {
        flex-wrap: wrap;
        .article {
            &__thumbnail {
                width: 100%;
                padding-bottom: calc(~"100% * 9 / 16");
                margin-bottom: 10px;
            }
            &__text {
                width: 100%;
            }
            &__title {
                font-size: 1.5em;
                margin: 0 auto 0.5rem;
                line-height: 1.5;
                white-space: normal;
                overflow: auto;
            }
            &__description {
                display: -webkit-box;
                margin: 0 auto 0.5rem;
                font-size: 0.85em;
                line-height: 1.5;
                padding-left: 1.5rem;
            }
            &__meta {
                text-align: right;
            }
            &__tags {
                display: inline;
            }
        }
    }
    &&--topSmall {
    	flex-wrap: wrap;
        .article {
            &__thumbnail {
                width: 100%;
                height: 0;
                padding-bottom: calc(~"100% * 9 / 16");
                margin-bottom: 10px;
            }
            &__text {
                width: 100%;
            }
            &__title {
                font-size: 1.3em;
                line-height: 1.15;
                margin-bottom: 10px;
            }
            &__description {
                display: none;
            }
            &__meta {
                text-align: right;
                padding-left: 1.5em;
                height: auto;
            }
            &__tags {
                display: inline;
            }
        }
    }
    &&--oyasama {
        background: @primaryColor;
        padding: 5px;
        margin-top: 14px;
        .article {
            &__title {
                position: absolute;
                top: -14px;
                left: 0;
                z-index: 2;
                padding: 5px 10px;
                background: #f44;
                color: #fff;
                font-family: YuMincho,"游明朝",serif;
                font-size: 1.32em;
            }
            &__description {
                width: calc(~"100% - 50px");
                padding: 0;
                color: #fff;
                font-size: 1.24em;
                font-weight: bold;
                line-height: 1;
                display: block;
                a {
                    color: #fff;
                }
            }
            &__cta {
                position: absolute;
                bottom: 0;
                right: 5px;
                width: 36px;
                height: 35px;
                border-radius: 50%;
                background: #f44;
                transform: translateY(-50%);
                &:after {
                    content: "";
                    position: absolute;
                    top: 12px;
                    left: 10px;
                    width: 9px;
                    height: 9px;
                    border: solid 3px #fff;
                    border-left: none;
                    border-bottom: none;
                    transform: rotate(45deg);
                }
            }
        }
        @media all and (min-width: 821px) and (max-width:1280px){
            .article__title {
                font-size: 1.2em;
            }
        }
        @media all and (max-width: 820px){
            .article__title {
                font-size: 2vw;
            }
        }
        @media all and (max-width:480px){
            margin-top: 34px;
            .article__title {
                font-size: 1.32em;
            }
        }
    }
    &&--ssmall {
        font-size: 0.875em;
        align-items: baseline;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        position: relative;
        margin-bottom: 0;
        .article {
            &__title {
                color: @fontColor;
                font-weight: bolder;
                margin-bottom: 0;
                overflow: hidden;
                position: relative;
            }
            &__date {
                font-size: 0.8em;
                min-width: 9em;
                margin-right: 10px;
                text-align: right;
            }
        }
    }
    &&--noImage {
        .article {
            &__thumbnail { display: none; }
            &__text { width: 100%!important; margin-left: 0!important; }
        }
    }
    &&--archive,&&--search {
        .article {
            &__text {
                padding-right: 10px;
            }
            &__title a {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                // height: 2.8em;
                white-space: normal;
                &:hover {
                    text-decoration: underline;
                }
            }
            &__meta {
                height: auto;
            }
        }
    }
    &&--search {
        .article__title a {
            height: auto;
        }
    }
    &&--localnews {
        margin-bottom: 0;
        .article {
            &__title { font-size: 1em; }
        }
    }
    &&--wideImage {
        display: block;
        width: 100%;
        margin-bottom: 0;
        .article {
            &__thumbnail {
                width: 100%;
                margin: 0 0 5px;
                padding-bottom: calc(~"100% * 9 / 16");
                > a, .article__thumbnail__imageArea {
                    position: absolute;
                    display: block;
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                    &:after {
                        content: "";
                        display: block;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 140%;
                        height: 140%;
                        filter: blur(10px);
                        z-index: 1;
                        background: inherit;
                    }
                    > img {
                    	position: absolute;
                    	width: auto;
                    	height: 100%;
                    	z-index: 2;
                    	object-fit: contain;
                    	max-width: 100%;
                    	top: 50%;
                    	left: 50%;
                    	transform: translate(-50%, -50%);
                    }
                    &:hover img {
                        transform: translate(-50%,-50%) scale(1.05);
                    }
                }
            }
            &__text { width: 100%; }
            &__title {
                font-size: 1em;
                margin-bottom: 5px;
            }
            &__description,&__meta {
                padding-left: 0;
            }
        }
    }
    &&--category {
        margin-bottom: 0;
    }
    &&--archive,&&--search {
        margin-bottom: 0;
        padding-bottom: 15px;
        border-bottom: solid 1px #ddd;
    }
    &&--future {
        opacity: 0.45;
        pointer-events: none;
        * {
            pointer-events: none;
        }
    }
    &&--omichinews {
    	background: none;
    	font-size: 0.92em;
        .article {
            &__thumbnail {
                width: 95px;
                padding-bottom: calc(~"95px * 9 / 16");
                margin-left: 5px;
            }
            &__text {
                width: calc(~"100% - 100px");
                padding-right: 10px;
            }
            &__title {
                font-size: 0.92em;
                margin-bottom: 5px;
                a {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    white-space: normal;
                    font-size: 1em;
                    min-height: 2.7em;
                }
            }
            &__description {
                display: none;
            }
            &__meta {
                height: auto;
            }
        }
    }
    &&--series {
        margin-bottom: 15px;
        .article__category,.article__tag {
            display: none;
        }
        .article__title a {
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            white-space: unset;
        }
        .article__meta {
            height: auto;
        }
        .article__tags {
            display: none;
        }
        &:last-child {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: none;
        }
    }
    &&--video {
        width: 100%;
        margin: 0;
        display: block;
        .article__thumbnail {
            width: 100%;
            height: 0;
            padding: 0 0 56.25%;
            margin: 0 0 5px;
            img {
                padding: 0;
            }
        }
        .article__text {
            position: relative;
            width: 100%;
        }
        .article__title {
            &.article__title--video {
                margin-bottom: 5px;
            }
            a {
                display: -webkit-box;
                white-space: normal;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
        }
        .article__meta.article__meta--video {
        	margin-top: 5px;
        }
    }
}

.play {
    .article {
        &__playPause button {
            .icon-play { display: none!important; }
            .icon-pause { display: block!important; }
        }
    }
}
.pause {
    .article {
        &__playPause button {
            .icon-play { display: block!important; }
            .icon-pause { display: none!important; }
        }
    }
}


.heading {
    line-height: 1.5;
    font-size: 1.125em;
    margin-bottom: 1rem;
    &&--noborder { border: none; }
    &&--series { padding-left: 0px; }
    &&--center { text-align: center;}
    &&--link { max-width: 160px; margin: 0 auto 1.5rem; }
    &&--related_links {
        text-indent: -0.5em;
        &:before { content: "【"; }
        &:after { content: "】"; }
    }
}

.contentsList {
    &&--topContents {
        padding: 0;
        margin: 0;
        list-style: none;
        > li {
            margin-bottom: 20px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    &&--textonly {
        background: @lightGray;
        padding: 0.875rem 2rem;
        position: relative;
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        .heading {
        	width: 160px;
        	margin-bottom: 0;
        }
        > ul {
            width: calc(~"100% - 160px");
            column-count: 2;
            > li {
                list-style: none;
                &:last-child {
                    text-align: right;
                }
            }
        }
    }
    &&--popular > ul {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        margin-left: -10px;
        margin-right: -10px;
        list-style: none;
        flex-wrap: wrap;
        > li {
            width: calc(~"25% - 20px");
            margin: 0 10px 15px;
        }
    }
    &&--category > ul {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 0px;
        padding-right: 0px;
        > li {
            width: calc(~"33.33% - 20px");
            margin: 0 10px 15px;
            list-style: none;
        }
    }
    &&--omichinews {
        width: calc(~"33.33% - 30px");
        position: relative;
        margin-left: 15px;
        margin-right: 15px;
        > h3 {
            width: 180px;
            margin: 0;
            text-align: left;
            font-weight: normal;
            font-size: 0.92em;
            line-height: 1;
            color: @white;
            background: linear-gradient(90deg, @linkColor 40% , transparent);
            padding: 0.4em 0.75em;
        }
        > ul {
            list-style: none;
            margin: 10px auto;
            > li {
                margin-top: 8px;
                padding-top: 8px;
                + li {
                    margin-top: 8px;
                    border-top: solid 1px @lightShadowColor;
                }
            }
        }
    }
    &&--digital_archive {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        list-style: none;
        margin-right: -15px;
        margin-bottom: 40px;
        li {
            width: calc(~"25% - 30px");
            margin: 0 15px 5px;
        }
    }
    &&--related_links {
    	margin: 20px auto;
        > ul {
            display: flex;
            align-items: stretch;
            justify-content: flex-start;
            flex-wrap: wrap;
            padding: 0;
            margin: 0 -15px;
            width: auto;
            list-style: none;
            > li {
                width: calc(~"50% - 40px");
                margin: 0 20px 20px;
                background: #fff;
            }
        }
    }
}

.omichinewsTab {
	display: flex;
	justify-content: center;
	list-style: none;
    > li {
        width: calc(~"33.33% - 20px");
        padding: 0;
        margin: 0 10px;
        text-align: center;
        position: relative;
        font-weight: bolder;
        &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0%;
            height: 2px;
            background: @primaryColor;
            z-index: 1;
            transition: all 0.35s ease;
        }
        &.is-active:after {
            width: 100%;
        }
        a {
            color: inherit;
        }
    }
}
.omichinewsTab {
    display: none;
}

.omichinewsFlex {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
    margin-top: 20px;
    margin-left: -15px;
    margin-right: -15px;
}

.toppage .article__bookmark {
    display: none;
}
.archive,.category {
    .archiveContents.archiveContents--large {
        margin-bottom: 20px;
        > li {
            width: 100%;
            margin: 0;
            .article {
                border-bottom: solid 1px #ddd;
                &__thumbnail {
                    width: calc(~"50% - 10px");
                    margin: 0 10px 0 0;
                    padding-bottom: 29%;
                }
                &__text {
                    width: calc(~"50% - 10px");
                    margin: 0 0 0 10px;
                }
                &__description {
                    -webkit-line-clamp: 3;
                    margin-bottom: 0.5rem;
                    font-size: 0.875em;
                    padding-left: 0;
                }
                &__title {
                    font-size: 1.375em;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    white-space: normal;
                }
            }
        }
    }
    .catBGWrap {
        margin: 0 -20px -60px;
        width: auto;
    }
    .catBG {
        background-position: center;
        width: 100%;
        height: 0;
        padding-bottom: calc(~"100% / 1.91");
        background-size: cover;
        .archive-title, .post-title, .page-title, .archiveTitle, .postTitle, .pageTitle {
        	text-indent: 100%;
        	overflow: hidden;
        	white-space: nowrap;
        	color: transparent;
        }
    }
    .child_cat {
        margin: 1.25rem 0 3.5rem;
        position: relative;
        > ul {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            flex-wrap: nowrap;
            font-size: 0.875em;
            width: 100%;
            list-style: none;
            margin-bottom: -0.75rem;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            > li {
                margin-right: 0.75rem;
                > a {
                    display: block;
                    padding: 0px 8px;
                    background: #eee;
                    color: #444;
                    text-decoration: none;
                }
            }
        }
        &.all {
            > ul {
                flex-wrap: wrap;
                max-height: 200px;
                overflow-x: hidden;
                overflow-y: scroll;
                white-space: normal;
                > li {
                    margin-bottom: 0.75rem;
                }
            }
            button[name="toggle_child_cat"]:after {
                transform: translate(-50%,-50%) rotate(180deg);
            }
        }
    }
    button[name="toggle_child_cat"] {
        position: absolute;
        width: 40px;
        height: 28px;
        z-index: 1;
        bottom: 0;
        left: 50%;
        transform: translate(-50%,125%) rotate(0deg);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none;
        background: none;
        color: inherit;
        display: block;
        outline: none;
        cursor: pointer;
        transition: all 0.5s ease;
        &:after {
            content: "";
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 0px;
            height: 0px;
            z-index: 1;
            border: solid 14px;
            color: inherit;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom: none;
            background: none;
        }
    }
}
.archiveContents {
    width: auto;
    padding: 0;
    margin: 0 -10px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    list-style: none;
    > li {
        width: calc(~"50% - 10px");
        margin: 0 10px 10px;
        border: solid 5px #fff;
        border-bottom: none;
        padding: 5px 5px 0;
        background: rgba(255,255,255,0.9);
        &:nth-child(odd) { margin-left: 0; }
        &:nth-child(even) { margin-right: 0; }
    }
    .article__bookmark {
        display: inline-block;
        margin-right: 0;
    }
    &&--search {
        display: block;
        > li {
            width: 100%;
            margin: 0;
        }
        .article {
            // a:hover { color: @linkColor; }
            .article__text {
                max-width: 670px;
            }
            .article__description {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                color: #777;
                b { color: @fontColor; }
            }
            // .article__meta { display: none; }
        }
    }
}
.historyDate {
	font-size: 0.84em;
	color: @shadowColor;
    &:before {
        content: "";
        border: solid 8px;
        border-bottom: none;
        border-left: solid 5px transparent;
        border-right: solid 5px transparent;
        position: relative;
        top: 12px;
        margin-right: 3px;
    }
}
.historyPosts {
	padding: 0 0 0 1.3em;
	margin-bottom: 1em;
}

.categoryMoreWrap {
    margin: 1rem 0 0;
    font-size: 0.875em;
    &&--center { text-align: center; }
    &&--left { text-align: left; }
    &&--right { text-align: right; }
    &&--honbu {
        position: absolute;
        top: 0.7rem;
        right: 1rem;
        margin: 0;
    }
    &&--cat {
        position: absolute;
        top: 0;
        right: 20px;
        margin: 0;
    }
    &&--post { margin: 2rem auto; }
}
.categoryMore {
    display: inline-block;
    line-height: 1;
    margin: 5px;
    &:hover {
        text-decoration: underline;
        opacity: 1;
    }
    &&--honbuinfo {
        padding: 0;
        background: none;
        border: none;
        font-size: 0.8em;
        color: @primaryColor;
    }
    &&--strong {
        padding: 0.5em 1.25em;
        border: solid 1px;
        border-radius: 2em;
        color: @white;
        background: @linkColor;
        border-color: @linkColor;
        &:hover {
            color: @linkColor;
            background: @white;
            text-decoration: none!important;
        }
    }
    &&--omichinews {
        font-size: 0.92em;
        padding: 0.375em 1em;
    }
}
.banner.banner--1 > ul {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: auto;
    margin-left: -10px;
    margin-right: -10px;
    > li {
        margin: 0 10px 20px;
        width: calc(~"25% - 20px");
        * { display: block; }
        > a {
            position: relative;
            border: solid 1px @primaryColor;
        }
        .banner__text {
            position: absolute;
            bottom: 0;
            background: linear-gradient(0deg, @primaryColor 50%, transparent 100%);
            padding-top: 1em;
            font-size: 12px;
            line-height: 1;
            color: @white;
            width: 100%;
            padding: 0.5em;
            text-align: center;
        }
    }
}

.linkBannerOnText {
	position: relative;
	display: block;
	border: solid 1px @primaryColor;
    img {
        display: block;
    }
    .banner__text {
        display: block;
        width: 100%;
        color: @white;
        font-size: 0.75em;
        line-height: 1;
        text-align: center;
        background: @primaryColor;
        padding: 0.35em;
    }
}

.slideBannerWrap, .seriesWrap {
    background: @lightGray;
    padding: 1.5rem 0;
    margin: 80px 0;
    position: relative;
}

.slideBannerWrap .slick-dots {
    position: absolute;
    bottom: -1.125rem;
}

.slideBanner__ads {
	position: absolute;
	top: 5px;
	left: 5px;
	background: #888;
	color: #fff;
	line-height: 1;
	padding: 2px 4px;
	font-size: 11px;
	border-radius: 3px;
}

.seriesItem {
    position: relative;
    &__banner {
        * { display: block!important; }
        img {
            width: 100%;
        }
    }
    &__contents {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 0;
        margin-top: -60px;
        padding: 10px;
    }
    &__title {
        text-align: center;
        font-size: 1.125em;
        margin-bottom: 0.25rem;
        a {
            color: inherit;
            text-decoration: none;
        }
    }
    &__article {
        width: calc(~"50% - 20px");
        margin: 0 10px;
        background: rgba(255,255,255,0.9);
        padding: 15px;
        z-index: 2;
        position: relative;
        &__title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            position: relative;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 1em;
            line-height: 1.35;
        }
        &__description {
            font-size: 0.8em;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            color: @shadowColor;
            margin-top: 8px;
        }
        &:before,
        &:after {
            content: "";
            position: absolute;
            z-index: -1;
            width: 20px;
            height: 20px;
            border: solid 5px;
            border-color: @linkColor;
            opacity: 1;
            pointer-events: none;
        }
        &:before {
            border-bottom: none;
            border-right: none;
            top: 0px;
            left: 0px;
        }
        &:after {
            right: 0px;
            bottom: 0px;
            border-left: none;
            border-top: none;
        }
    }
}

/* ebook */
.container {
    &&--ebook {
        margin-top: 60px;
        margin-bottom: 60px;
        padding: 25px;
        background: url(./ebook/img/bg-ebook.png) #eee;
        background-size: 50px;
        background-position: -25px -25px;
    }
    &&--bookslider {
        max-width: 1140px;
    	padding-left: 0px;
    	padding-right: 0px;
    }
    @media all and (max-width: 820px){
        &&--ebook {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    @media all and (max-width: 480px){
        &&--ebook {
            padding-left: 15px;
            padding-right: 15px;
        }
    }
}
.itemsSwiper {
    margin: 15px auto;
    overflow: hidden;
    &&--pb25 {
        padding-bottom: 25px;
    }
    &&--pb50 {
        padding-bottom: 50px;
    }
    &&--pb100 {
        padding-bottom: 100px;
    }
    .swiper-wrapper {
        align-items: flex-end;
    }
    .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;
        }
    }
    @media all and (max-width:820px){
        .swiper-button-next, .swiper-button-prev {
            display: none;
        }
    }
    .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;
    }
}

/* audio */
.container {
    &&--topPageAudio {
        padding: 25px;
        margin-bottom: 50px;
    }
    &&--topPageAudioslider {
        max-width: 1140px;
        padding-left: 0px;
        padding-right: 0px;
    }
    @media all and (max-width: 820px){
        &&--topPageAudio {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
    @media all and (max-width: 480px){
        &&--topPageAudio {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
}

.article.article--topPageAudio {
    max-width: 220px;
    width: 17vw;
    min-width: 145px;
    .article__thumbnail {
        padding-bottom: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #f5f3ed;
        &.article__thumbnail--audiobook {
            background-image: url(./audio/img/bg-audiobook.png);
        }
        > a {
            width: calc(~"100% - 10px");
            height: calc(~"100% - 10px");
            margin: 5px;
        }
        .article__thumbnail__imageArea > img {
            position: absolute;
            width: auto;
            height: 100%;
            z-index: 2;
            object-fit: contain;
            max-width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
    .article__text {
        position: absolute;
        padding: 0;
    }
}

/* photo gallery */
.container {
    &&--photogallery {
        margin: 50px auto;
    }
}
.photogalleryToppage {
    &Link {
        display: block;
        width: 100%;
        position: relative;
        overflow: hidden;
        color: inherit;
        &:hover {
            color: inherit;
            .photogalleryToppage__images:after {
                opacity: 0.65;
            }
        }
    }
    &__images {
        display: flex;
        align-items: stretch;
        justify-content: center;
        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.5);
            background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0.9), rgba(255,255,255,0.5));
            pointer-events: none;
            transition: all 0.5s ease;
        }
    }
    &__image {
        width: 15%;
        padding-bottom: 160px;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    &__heading {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform: translate(-50%,-50%);
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        line-height: 1.3;
        font-size: 1.5em;
        height: 1em;
        font-family: "Yu Mincho", "YuMincho", serif, sans-serif;
        text-shadow: 0 0 5px #fff;
        &__en {
            display: block;
            color: #666;
            font-weight: normal;
            font-size: 70%;
        }
    }
}

@media screen and (max-width: 1440px){
	.photogalleryToppage {
        &__image {
            width: calc(100% / 6);
            &:nth-of-type(n+7) {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 1280px){
	.photogalleryToppage {
        &__image {
            width: calc(100% / 5);
            &:nth-of-type(n+6) {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 1024px){
	.photogalleryToppage {
        &__image {
            width: calc(100% / 4);
            &:nth-of-type(n+5) {
                display: none;
            }
        }
    }
}

@media screen and (max-width: 821px){
	.photogalleryToppage {
        &__images {
            display: grid;
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 120px 120px;
        }
        &__image {
            width: auto;
            display: block!important;
            padding-bottom: 120px;
            &:nth-of-type(n+7) {
                display: none!important;
            }
        }
    }
}

@media screen and (max-width: 480px){
	.photogalleryToppage {
        &__images {
            display: grid;
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 80px 80px;
        }
        &__image {
            padding-bottom: 80px;
        }
    }
}

.sliderItemSection {
    padding: 15px 25px;
    &__headingWrap {
        width: 100%;
        margin: 0 auto 15px;
    }
    &__heading {
        margin: 0;
        margin-right: 25px;
        font-size: 1.32em;
    }
    &__caption {
        font-size: 0.88em;
        margin: 0 0 0.5em;
    }
    &__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);
            }
        }
    }
}

.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, > .ebookMore {
                padding: 10px;
                max-width: 100%;
                max-height: 100%;
                width: auto;
            }
        }
    }
    &__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;
        }
    }
    &__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;
    }
    &__bookmark {
        display: none;
    }
    &&--video {
        margin: 0;
    }
    &&--slider {
        width: auto;
        margin: 0;
        .listItem__thumb {
            background: none;
            padding: 0;
            height: auto;
            > a {
                position: relative;
                width: auto;
                height: auto;
                top: unset;
                left: unset;
                transform: unset;
                > img, > .ebookMore {
                    padding: 0;
                    max-height: 210px;
                    box-shadow: 0px 0px 1px #bbb;
                }
                @media all and (max-width: 820px){
                    > img, > .ebookMore {
                        max-height: 182px;
                    }
                }
                @media all and (max-width: 480px){
                    > img, > .ebookMore {
                        max-height: 160px;
                    }
                }
            }
        }
    }
}


.keywords,.categories {
    list-style: none;
    padding: 0!important;
}
.keywords {
    font-size: 0.92em;
    > li {
        display: inline-block;
        margin-right: 1.5em;
        margin-bottom: 0.75em;
        > a:before { content: "#" }
    }
}
.categories {
    font-weight: bolder;
    > li {
        margin-bottom: 0.75em;
    }
    .children {
        font-weight: normal;
        font-size: 0.88em;
        margin: 0;
        list-style: none;
        padding-left: 0;
        li {
            display: inline-block;
            margin: 0.4em 1.4em 0.4em 0;
            a {
                display: inline-block;
                text-indent: -1em;
                padding-left: 1em;
                &:before {
                    content: "";
                    border: solid 3px;
                    border-radius: 50%;
                    width: 0;
                    height: 0;
                    display: inline-block;
                    margin: 0 0.3em;
                    position: relative;
                    transform: translateY(-2px);
                }
            }
        }
        .children {
            padding-left: 1em;
            font-size: 1em;
            a:before {
                transform: translateY(-2px) scale(0.5);
                border-radius: 0;
            }
        }
    }
}
.linkWrap {
    margin: 100px auto;
}
.links {
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    > li {
        margin: 0 1rem 1rem;
        > a {
            font-weight: bold;
        }
    }
    &:last-child { margin-bottom: 0rem; }
}

.postWrap {
    background: @white;
    > :last-child {
        margin-bottom: 0;
    }
}

.seriesMainSection,.seriesContent {
	position: relative;
	padding-top: 20px;
    margin-bottom: 40px;
    &__banner {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        background-size: auto 100%;
        background-repeat: no-repeat;
        width: 100%;
        height: 90%;
    }
    &__textarea {
        position: relative;
        z-index: 2;
        background: rgba(255,255,255,0.9);
        width: 60%;
        margin: 80px 0 0px auto;
        padding: 15px 20px;
        border: solid 10px #fff;
        border-image: linear-gradient(315deg,#ddd,rgba(255,255,255,0.6));
        border-image-slice: 1;
    }
    &__heading {
        position: relative;
        margin-bottom: 20px;
        font-size: 1.56em;
        line-height: 1.35;
        padding-bottom: 10px;
        padding-right: 40px;
        a {
            color: inherit;
        }
        &:after {
            content: "";
            display: block;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg,#333,transparent);
            position: absolute;
            bottom: 0;
            left: 0;
        }
    }
    &__postCount {
        position: absolute;
        top: 0;
        right: 0;
        background: #333;
        color: #fff;
        line-height: 1;
        font-size: 1em;
        text-align: center;
        padding: 4px 8px;
        a {
            color: #fff;
        }
        small {
            font-size: 60%;
            display: block;
            margin: 3px auto 0;
            text-align: center;
        }
    }
}

.seriesNormalSection {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	width: 100%;
}

.seriesContent {
	width: calc(~"50% - 30px");
	margin: 0 15px 45px;
	position: relative;
    &__banner {
        padding-bottom: 50%;
        background-size: 100% auto;
    }
    &__textarea {
        margin: 33.33% auto 0;
        padding: 10px 10px 15px;
        max-width: 440px;
        width: 95%;
        border-image-source: linear-gradient(0deg,#ddd,rgba(255,255,255,0.6));
    }
    &__heading {
        font-size: 1.24em;
    }
}

.seriesOtherSection {
    margin-top: 40px;
    margin-bottom: 40px;
}
.seriesOtherSection {
	margin-bottom: 20px;
}

.post {
    &-separator {
        background: linear-gradient(90deg,@shadowColor,transparent);
        border: none;
        height: 1px;
        width: 100%;
        margin: 1rem auto;
        display: block;
        position: relative;
    }
    &-date {
        margin-right: 1rem;
        &:empty {
            display: none;
        }
    }
    &-button1 {
        margin: 20px auto;
        margin-left: 0;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        height: 100%;
    }
    &-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;
        }
        &-x {
            > * { border-color: #000; }
            &:hover { opacity: 0.6; }
        }
        #icon-x { fill: #000; }
    }
    &-thumbnail {
        margin-bottom: 0.5rem;
        * {
            display: block;
            width: auto;
            margin: auto;
        }
    }
    &-meta {
        font-size: 0.875em;
        margin: 0 auto 0.5rem;
        width: 100%;
        > * {
            display: inline-block;
        }
        a {
            display: inline-block;
            margin-right: 1rem;
            color: @linkColor;
            &:hover {
                color: @primaryColor;
            }
        }
    }
    &-tag:before { content: "#"; }
}

.post-container {
    h5,h6,ul,ol,dl,table,blockquote,q,p,address,pre,code {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .wp-block-heading {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    h2.wp-block-heading { font-size: 1.5em; line-height: 1.4; margin-top: 2rem; }
    h3.wp-block-heading { font-size: 1.25em; line-height: 1.4; margin-top: 1.75rem; }
    h4.wp-block-heading { font-size: 1em; line-height: 1.4; margin-top: 1.5rem; }
    a {
        color: @linkColor;
        &:hover {
            text-decoration: underline;
        }
    }
    .contentsList {
        .article__title a {
            color: inherit;
        }
    }
    hr.wp-block-separator {
        max-width: 100px;
        margin: 1.5em auto;
        background: @shadowColor;
        border: none;
        height: 2px;
    }
    ul, ol { padding-left: 1.5em; }
    table {
        border-collapse: collapse;
        font-size: 0.875em;
        thead { background: @secondaryColor; }
        th,td {
            border: solid 1px @lightShadowColor;
            padding: 0.5em 0.75em;
            line-height: 1.4;
        }
        tfoot {
            border-top: double 3px @lightShadowColor;
        }
    }
    table.paid-history-table {
        font-size: 1em;
    }
    blockquote {
        border-left: solid 5px;
        border-left-color: @primaryColor;
        padding: 1em;
        background: #eee;
        width: fit-content;
        margin: 2em auto;
        min-width: 80%;
        > *:first-child { margin-top: 0; }
        > *:last-child { margin-bottom: 0; }
    }
    .wp-block-image .alignright,
    .wp-block-image .alignleft {
        max-width: 45%;
    }
    .wp-block-image figure img {
        display: block;
    }
    .wp-block-gallery figcaption,
    .wp-block-image figcaption {
        font-size: 0.75em;
        margin-top: 0em;
        color: @shadowColor;
    }
    > *:first-child {
        margin-top: 0;
    }
    .wp-embed-aspect-16-9.wp-has-aspect-ratio {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
        display: block;
        .wp-block-embed__wrapper,iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: block;
        }
    }
    .linklayout-sp {
        gap: 0px!important;
        justify-content: center;
        margin-left: -10px;
        margin-right: -10px;
        > .wp-block-image {
            width: calc(~"33% - 20px")!important;
            margin: 0 10px 20px!important;
            overflow: hidden;
            border-radius: 10px;
            a {
                display: block;
            }
            img {
                display: block;
                border: solid 3px #333;
                border-radius: 10px;
            }
            .wp-element-caption {
                background: #333!important;
                line-height: 1;
                padding: 5px!important;
            }
        }
    }
    
    @media all and (max-width:480px){
        .linklayout-sp {
            gap: 0px!important;
        }
        .linklayout-sp > .wp-block-image {
            width: calc(50% - 20px)!important;
            flex-grow: unset!important;
        }    
    }
    
}

.aionsei {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-right: 20px;
    background: #75909d;
    border-radius: 3px;;
    width: fit-content;
    overflow: hidden;
    &__heading {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10px;
        font-size: 0.84em;
        line-height: 1.2;
        text-align: right;
        background: #75909d;
        color: #fff;
        height: 54px;
        strong {
            font-size: 1.5em;
            font-weight: normal;
            display: block;
        }
    }
    &__control {
    	position: relative;
    	margin: 5px;
    	margin-right: 10px;
        .article__playPause {
            position: relative;
            top: 0;
            left: 0;
            transform: none;
        }
    }
    &__limitmessage {
        padding: 5px 10px;
    }
}

.journalArchiveList {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
    list-style: none;
    &&--media {
        margin-left: -15px;
        margin-right: -15px;
        > li {
            width: fit-content;
            margin: 0 15px;
        }
    }
    &&--year {
        > li {
            margin: 0 20px 10px 0;
            > a {
                padding: 5px;
                line-height: 1;
                display: block;
                border: solid 1px #ddd;
            }
        }
    }
}

.journalArchive__media {
	display: block;
	text-align: center;
	width: fit-content;
	margin: auto;
	margin-left: 0;
    &__image {
        width: fit-content;
        margin: auto;
        > img {
            display: block;
            max-width: 220px;
            max-height: 220px;
            width: auto;
            height: auto;
            border: solid 1px #eee;
        }
    }
}

.help {
    .article.article--help {
        .article__meta {
            display: none;
        }
        .article__description {
            display: none;
        }
        .article__text {
            padding: 0;
            a {
                font-weight: normal;
                white-space: normal;
            }
        }
    }
    .contentsList.contentsList--related_links > ul {
        display: block;
        margin-left: 1em;
        list-style: disc;
        > li {
            width: 100%;
            margin: 0 0 0.8em;
        }
    }
}

.helpCatButtonList {
	padding: 0;
	list-style: none;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 40px -15px;
    > li {
        width: calc(~"33.33% - 30px");
        margin: 0 15px 40px;
    }
}

.helpCatButton {
	padding: 55px 20px;
	border: solid 2px;
	border-radius: 20px;
	display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
	height: 100%;
	position: relative;
	background: @primaryColor;
	color: #fff;
	border-color: @primaryColor;
	text-decoration: none;
    strong {
        display: block;
        text-align: center;
        font-size: 1.16em;
    }
    small {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-align: left;
        line-height: 1.35;
        width: calc(~"100% - 40px");
    }
    &:hover {
        background: #fff;
        color: @primaryColor;
        text-decoration: none;
    }
}

.helpArchive {
	display: flex;
	align-items: normal;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 40px -15px;
	list-style: none;
    > li {
        margin: 0 15px 0px;
        width: calc(~"50% - 30px");
        padding: 20px 0;
        border-bottom: dotted 3px #ccc;
    }
}

.helpContent {
	padding-left: 40px;
}

.help-post-list {
    list-style: none;
    > li {
        padding: 0 0 10px;
        margin-bottom: 10px;
        border-bottom: dotted 3px #ccc;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.caption {
    font-size: 0.84em;
}

.tabMenu {
	display: block;
	position: relative;
	margin-bottom: 20px;
    > ul {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        list-style: none;
        width: fit-content;
        padding: 0;
        > li {
            button {
                display: block;
                background: #fff;
                padding: 8px 12px;
                color: @primaryColor;
                border: solid 1px @primaryColor;
                cursor: pointer;
                line-height: 1;
                outline: none;
                &.current {
                    background: @primaryColor;
                    color: #fff;
                    pointer-events: none;
                }
                &:hover {
                    background: #eee;
                }
            }
            &:first-child button {
                border-radius: 5px 0 0 5px;
            }
            &:last-child button {
                border-radius: 0 5px 5px 0;
            }
        }
    }
}

.pagenation {
    .wp-pagenavi {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 30px 0;
        * {
            display: none;
            background: #fff;
            border: none;
        }
        a:hover {
            color: @linkColor;
            border-color: @linkColor;
        }
        .pages {
            border: solid 1px #ccc;
        }
        .previouspostslink, .nextpostslink, .pages {
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }
        .previouspostslink:before,.nextpostslink:after {
        	content: "";
        	display: block;
        	width: 15px;
        	height: 15px;
        	border: solid 5px;
        	border-bottom: none;
        	border-right: none;
            position: relative;
            transition: all 0.35s ease;
        }
        .previouspostslink {
            &:before {
                left: 0;
                transform: rotate(-45deg);
            }
            &:hover:before {
                left: -5px;
            }
        }
        .nextpostslink {
            &:after {
                right: 0;
                transform: rotate(135deg);
            }
            &:hover:after {
                right: -5px;
            }
        }

        .pagenation .wp-pagenavi .previouspostslink, .pagenation .wp-pagenavi .nextpostslink {
        	display: flex;
        	align-items: center;
        	justify-content: flex-start;
        }
        .previouspostslink {
            margin-right: 1rem;
            order: 1;
        }
        .pages { order: 2; }
        .nextpostslink {
            margin-left: 1rem;
            order: 3;
        }
    }
    &&--post {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        margin-top: 30px;
        margin-bottom: 60px;
        a {
            display: flex;
            align-items: center;
            border: solid 1px @lightShadowColor;
            padding: 0.5rem 0.375rem;
            width: auto;
            width: calc(~"50% - 1rem");
            background: @white;
            line-height: 1.5;
            p {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin: 0 0.5rem;
            }
            img {
                display: block;
                max-width: 60px;
            }
        }
        .post-prev:before,.post-next:after {
            content: "";
            display: block;
            border: solid 12px @shadowColor;
            border-top: solid 7px transparent;
            border-bottom: solid 7px transparent;
        }
        .post-prev {
            justify-content: flex-start;
            &:before {
                border-left: none;
                margin-right: 0.5rem;
            }
        }
        .post-next {
            justify-content: flex-start;
            img { order: 2; }
            p { order: 1; }
            &:after {
                border-right: none;
                margin-left: 0.5rem;
                order: 3;
            }
        }
    }
}

.post-container {
    .tml {
        max-width: 600px!important;
        margin: 20px auto 20px 0;
        p:empty {
            display: none;
        }
        .message {
            display: inline-block;
        }
        #wpg-login a {
            margin: 10px;
            width: calc(~"50% - 20px");
            border-radius: 10px;
        }
        #registerform ,#loginform {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: baseline;
            > * {
                order: 2;
                margin: 10px auto 15px;
                width: 100%;
                &.g-recaptcha {
                    margin-left: 240px;
                }
            }
            > #wpg-login {
                background: #ddd;
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                justify-content: flex-start;
                padding: 10px;
                margin-top: 0;
                order: 1;
            }
            .tml-submit-wrap {
                margin-bottom: 0;
                margin-left: 240px;
                width: auto;
                > input[type="submit"] {
                    display: block;
                    min-width: 10em;
                    padding: 0.75em 1em;
                    color: @white;
                    background: @linkColor;
                    border: solid 2px @linkColor;
                    border-radius: 8px;
                    cursor: pointer;
                    transition: all 0.35s ease;
                    line-height: 1;
                    &:hover {
                        color: @linkColor;
                        background: @white;
                    }
                }
            }
            > #xs-social-login-container {
                order: 1;
                background: #eee;
                width: 100%;
                max-width: 100%;
                padding: 20px;
                .xs-login {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    gap: 20px;
                }
                .xs-login__item {
                    width: calc(~"50% - 10px");
                    border-radius: 8px;
                    box-shadow: none;
                    border: solid 2px;
                    &.wslu-color-scheme--google { border-color: #4285F4; }
                    &.wslu-color-scheme--facebook { border-color: #3B5998; }
                    &.wslu-color-scheme--twitter { border-color: #1DA1F2; }
                    &.wslu-color-scheme--lineapp { border-color: #06C755; }
                }
            }
        }
    }
    .tml-submit-wrap {
        margin-bottom: 0;
        margin-left: 240px;
        width: auto;
        > input[type="submit"] {
            display: block;
            min-width: 10em;
            padding: 0.75em 1em;
            color: @white;
            background: @linkColor;
            border: solid 2px @linkColor;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.35s ease;
            line-height: 1;
            &:hover {
                color: @linkColor;
                background: @white;
            }
            &[disabled="disabled"] {
                background: #eaeaea;
                color: #888;
                border-color: #888;
                pointer-events: none;
            }
        }
    }
    .tml-user-email-wrap,
    .tml-user-pass1-wrap,
    .tml-user-pass2-wrap,
    .tml-user-login-wrap,
    .tml-user-pass-wrap,
    .form_item {
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        width: 100%;
        margin: 25px 0;
        > label, > .form_label {
            width: 240px;
            margin-top: 0.4em;
            padding-right: 40px;
            position: relative;
        }
        .form_label.form_label--image button {
            max-width: 100px;
            border: solid 1px #ddd;
            border-radius: 100px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            display: block;
            img {
                display: block;
            }
        }

        > input, > .form_field {
            width: calc(~"100% - 240px");
            max-width: calc(~"100% - 240px");
            position: relative;
            .caption {
                font-size: 0.75em;
                margin: 0.125rem 0 0;
                text-indent: -1em;
                padding-left: 1em;
                line-height: 1.4;
            }
        }
        > input,
        > .input,
        > .form_field input,
        > .form_field .input,
        .form_field select {
            margin: 0;
            padding: 0.4em 0.8em;
            border: solid 1px @shadowColor;
            border-radius: 5px;
            font-size: 16px;
            line-height: inherit;
            &.readonly {
                background: #f0f0f0;
            }
        }
        &--required .form_label:after,label[for*="pass"]:after {
            content: "必須";
            position: absolute;
            right: 15px;
            white-space: nowrap;
            top: 50%;
            color: red;
            border: solid 1px;
            border-radius: 10px;
            padding: 3px 6px;
            line-height: 1;
            font-size: 12px;
            transform: translateY(-50%);
        }
    }
    #your-profile {
        label[for*="pass"]:after {
            display: none;
        }
    }
    .form_field {
        position: relative;
        select {
            width: 100%;
            display: block;
            background: @white;
            color: inherit;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: solid 1px @shadowColor;
        }
        &--select {
            &:after {
                content: "▼";
                line-height: 1;
                position: absolute;
                top: 14px;
                right: 4px;
                z-index: 2;
                pointer-events: none;
                color: #888;
                transform: scale(0.75);
            }
        }
        &--birthday {
            display: flex!important;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            .form_field { width: 19%; }
            .form_field:first-child { width: 29%; }
        }
        &--checkbox > label {
            position: relative;
            margin-bottom: 5px;
            padding-left: 0.5em;
            width: fit-content;
            input[type="checkbox"] {
                transform: scale(1.3) translateX(-30%);
                vertical-align: baseline;
            }
        }
        &--radio {
            display: block;
            label {
                display: inline-block;
                margin-right: 20px;
                padding-left: 5px;
            }
        }

    }
    .tml .tml-action-links {
        margin: 25px 0 0 240px;
    }
    .g-recaptcha {
        margin-left: 240px;
    }
    #form-errors {
        border: solid 1px red;
        background: snow;
        padding: 0.6rem;
        font-size: 0.875em;
        margin-bottom: 1rem;
        color: red;
        &:empty {
            display: none;
        }
        > p {
            margin-bottom: 0.75rem;
            padding-left: 1em;
            text-indent: -1em;
            line-height: 1.5;
            &:before { content: "･"; }
        }
        > *:last-child { margin-bottom: 0; }
    }
    .tml.tml-register {
        position: relative;
        pointer-events: none;
        &.active {
            pointer-events: auto;
            &:after {
                display: none;
            }
        }
        &:after {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 4;
            width: 100%;
            height: 100%;
            display: block;
            content: "";
            background: #fff;
            opacity: 0.7;
        }
        .message {
            display: none;
        }
    }
}

.form_item {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    width: 100%;
    margin: 25px 0;
    > label, > .form_label {
        width: 240px;
        margin-top: 0.4em;
        padding-right: 40px;
        position: relative;
    }
    .form_label.form_label--image button {
        max-width: 100px;
        border: solid 1px #ddd;
        border-radius: 100px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        display: block;
        img {
            display: block;
        }
    }

    > input, > .form_field {
        width: calc(~"100% - 240px");
        max-width: calc(~"100% - 240px");
        position: relative;
        .caption {
            font-size: 0.75em;
            margin: 0.125rem 0 0;
            text-indent: -1em;
            padding-left: 1em;
            line-height: 1.4;
        }
    }
    > input,
    > .input,
    > .form_field input,
    > .form_field .input,
    .form_field select {
        margin: 0;
        padding: 0.4em 0.8em;
        border: solid 1px @shadowColor;
        border-radius: 5px;
        font-size: 16px;
        line-height: inherit;
        max-width: 100%;
        &.readonly {
            background: #f0f0f0;
        }
    }
    > .form_field textarea {
        border: solid 1px @shadowColor;
        border-radius: 5px;
        display: block;
        padding: 0.4em 0.8em;
        max-width: 100%;
    }
    &--required .form_label:after,label[for*="pass"]:after {
        content: "必須";
        position: absolute;
        right: 15px;
        white-space: nowrap;
        top: 50%;
        color: red;
        border: solid 1px;
        border-radius: 10px;
        padding: 3px 6px;
        line-height: 1;
        font-size: 12px;
        transform: translateY(-50%);
    }
}

.mypage {
    &-headerLine {
        background: #ddd;
        height: 40px;
        border: none;
        border-bottom: solid 1px #bbb;
        margin-bottom: 2rem;
    }
    &-container {
        padding-left: 2em;
    }
    .heading2 {
        font-size: 1.25em;
        border-left: solid 5px;
        padding-left: 5px;
        margin-bottom: 1rem;
    }
    a {
        color: @linkColor;
    }
    dl {
        > dt {
            font-size: 1.25em;
            font-weight: bold;
            border-left: solid 5px;
            padding-left: 5px;
            margin-top: 40px;
            a {
                font-size: 0.875em;
                font-weight: normal;
            }
        }
        > dd {
            margin: 10px 0 20px;
        }
    }
    &__section {
        margin: 20px auto 60px;
        table {
            border-collapse: collapse;
            width: 100%;
            th,td {
                padding: 0.5rem;
                border: solid 1px @lightShadowColor;
            }
            th {
                background: @secondaryColor;
                width: 8em;
                font-size: 0.875em;
                border-bottom-color: @white;
            }
            tr:last-child {
                th,td {
                    border-bottom-color: @lightShadowColor;
                }
            }
        }
    }
    .currentPlan {
        margin: 1rem 0;
        border-collapse: collapse;
        th, td {
            padding: 0.25em 0.5em;
            border: solid 1px #ccc;
        }
        th {
            background: #eee;
        }
        td {
            font-size: 1.5em;
            font-weight: bold;
            line-height: 1.2;
            padding: 0.75rem 1rem;
            small {
                font-size: 1em;
                font-weight: normal;
            }
        }
    }
    .nextPlan {
        border: solid 1px red;
        width: fit-content;
        padding: 0.5rem 0.75rem;
    }
    .payForm {
        input[type="radio"] {
            margin-right: 5px;
        }
    }
    h3 {
        margin: 1rem 0 0.5rem;
    }
    hr {
        margin: 1rem auto;
        height: 1px;
        border: none;
        background: #ddd;
    }
    #payjp_checkout_box input[type=button] {
        font-size: 1em;
    }
    #nlmg-resign-button {
        background: #f44336;
        border: solid 1px #f44336;
    }

    &-menu {
        margin-bottom: 1rem;
        > ul {
            list-style: none;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            flex-wrap: wrap;
            margin: 0 -0.75rem;
            > li {
                margin: 0 0.75rem 1rem;
            }
        }
    }
    #loading {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.9);
        height: 100vh;
        width: 100vw;
        z-index: 99999;
        > img {
            width: 70px;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    }
    .kiyaku {
        max-height: 300px;
        position: relative;
        overflow-y: scroll;
        border: solid 1px #ddd;
        padding: 8px 12px;
        ol {
            padding-left: 1.5em;
        }
    }
}

.plans {
    input[type="radio"] {
        display: none;
        + label {
            display: block;
            padding-left: 1.5em;
            cursor: pointer;
            &:hover {
                background: #eee;
            }
            &:before {
                content: "";
                border: solid 1px;
                width: 1.2em;
                height: 1.2em;
                border-radius: 5px;
                background: #fff;
                position: absolute;
                top: 50%;
                left: 10px;
                transform: translateY(-50%);
                color: #888;
                z-index: 1;
            }
        }
        &:checked + label {
            background: @secondaryColor;
            cursor: auto;
            &:after {
                content: "";
                font-family: "fontello";
                position: absolute;
                top: 50%;
                left: 10px;
                font-size: 1.8em;
                transform: translateY(-50%);
                color: @linkColor;
                z-index: 2;
            }
        }
    }
    > table {
        width: 100%;
    	border-collapse: collapse;
        > thead td {
        	background: @linkColor;
        	color: @white;
        	padding: 16px;
        	line-height: 1;
        	font-weight: bold;
        	text-align: center;
        	border: solid 1px @lightShadowColor;
        }
        td {
            border: solid 1px @lightShadowColor;
            width: 50%;
            position: relative;
        }
        .tokucho {
            td {
                vertical-align: top;
            }
            ul {
                margin: 1em 0;
                padding-left: 2em;
            }
        }
    }
    .priceItem {
        position: relative;
        padding: 0.75em 1em;
        &__heading {
            margin: 0;
            font-size: 0.84em;
            font-weight: bold;
        }
        &__price {
            font-size: 1.24em;
            font-weight: bold;
        }
        > * {
            display: inline-block;
            margin: 0 0.25em;
            vertical-align: middle;
        }
        > .priceItem__text {
            display: block;
            line-height: 1;
            font-size: 0.84em;
            color: #ff5722;
            text-align: center;
        }
    }
}


.btn,.button,.button-nlmg {
    padding: 0.5em 1em;
    border-radius: 3px;
    margin: 0.5rem 0;
    cursor: pointer;
    font-size: 1em;
    border: solid 1px;
    display: inline-block;
    &:hover {
        background: #eee;
    }
    &.btn-sm {
        padding: 0.25em 1em;
    }
    &.btn-lg {
        padding: 0.5em 2.5em;
        min-width: 160px;
    }
    &.btn-primary {
        color: @white;
        background-color: #198fcc;
        background-image: -webkit-linear-gradient(#35a9e6 0,#319cd3 48%,#2590c7 100%);
        background-image: -moz- oldlinear-gradient(#35a9e6 0,#319cd3 48%,#2590c7 100%);
        background-image: -o-linear-gradient(#35a9e6 0,#319cd3 48%,#2590c7 100%);
        background-image: linear-gradient(#35a9e6 0,#319cd3 48%,#2590c7 100%);
        border: solid 1px #32a1da;
    }
    &.btn-danger {
        color: @white;
        background: #f44336;
        border: solid 1px #f44336;
    }
    &[disabled="disabled"] {
        pointer-events: none!important;
        background: #bbb!important;
        border-color: #bbb!important;
    }
    &&--viewer {
        margin: 0;
        display: flex;
        align-items: center;
        text-align: right;
        .icon-viewer {
            font-size: 2em;
            line-height: 1;
            margin-left: 0.2em;
            margin-right: -0.3em;
        }
        > span {
            font-size: 0.84em;
            line-height: 1.3;
            strong {
                font-size: 1.5em;
                font-weight: normal;
            }
        }
        > img {
            display: block;
            width: 2.7em;
            margin-left: 0.5em;
        }
    }
    &&--theme {
        color: @white;
        background-color: @primaryColor;
        border-color: @primaryColor;
        &:hover {
            text-decoration: none;
            opacity: 0.75;
        }
    }
    &&--login {
        display: block;
        white-space: nowrap;
        color: #fff;
        border: solid 1px @loginColor;
        background: @loginColor;
        font-size: 0.875rem;
        line-height: 1;
        border-radius: 20px;
        margin: 3px 0;
        &:hover {
            background: #fff;
            color: @loginColor;
        }
    }
    &&--register {
        display: block;
        white-space: nowrap;
        background: @registerColor;
        color: #fff;
        border: solid 1px @registerColor;
        font-size: 0.875rem;
        line-height: 1;
        border-radius: 20px;
        margin: 3px 0;
        &:hover {
            background: #fff;
            color: @registerColor;
        }
    }
    &&--inlineblock {
        display: inline-block!important;
    }
    &&--large {
        font-size: 1.12em;
    }
    &&--photo {
    	border-radius: 0;
    	background: @primaryColor;
    	color: #fff;
    	border-color: @primaryColor;
        &:hover {
            color: @primaryColor;
            background: #fff;
        }
    }
}

.button-toggle-contentsList {
    display: none;
}
@media all and (max-width: 820px){
    .button-toggle-contentsList {
        -webkit-appearance: none;
        appearance: none;
        border: solid 1px @primaryColor;
        background: @primaryColor;
        color: @white;
        padding: 0.5em 1.25em;
        border-radius: 3em;
        min-width: 140px;
        position: relative;
        margin: 20px auto;
        display: block;
        width: fit-content;
        cursor: pointer;
    }
    
    .button-toggle-contentsList__closetext {
        display: none;
    }
    
    .button-toggle-contentsList:after {
        content: "";
        display: inline-block;
        margin: 0;
        width: 8px;
        height: 8px;
        border: solid 2.5px @white;
        border-top: none;
        border-left: none;
        transform: rotate(45deg);
        position: relative;
        top: -2px;
        left: 3px;
    }
    
    .contentsList--open .button-toggle-contentsList:after {
        transform: rotate(225deg);
        top: 2px;
    }
    
    .contentsList--open .button-toggle-contentsList .button-toggle-contentsList__closetext {
        display: inline;
    }
    
    .contentsList--open .button-toggle-contentsList .button-toggle-contentsList__opentext {
        display: none;
    }
    
    .button-toggle-contentsList:hover {
        color: @primaryColor;
        background: @white;
    }
    
    .button-toggle-contentsList:hover:after {
        border-color: @primaryColor;
    }
}

.simplefavorites-clear {
    display: block;
    width: fit-content;
    margin: -3.7em 0 2em auto;
	font-size: 0.84em;
    line-height: 1;
    color: @white;
	background: @shadowColor;
	border: solid 1px @shadowColor;
	padding: 0.25em 1em;
	border-radius: 3px;
	cursor: pointer;
}

.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--category > label,&.input-group--tag > label {
                margin-bottom: 0.5em;
            }
            > label {
                display: inline-block;
                margin-right: 1em;
                &:last-child {
                    margin-right: 0;
                }
            }
        }
        &&--keyword > input {
            display: block;
            width: auto;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: solid 1px #bbb;
            padding: 0.5rem;
        }
        &&--date input {
            border: solid 1px #bbb;
            padding: 0.375rem 0.5rem;
        }
        &&--submit 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 {
        &: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; }
    }
}
.stickyUtility {
    position: sticky;
    bottom: -1px;
    width: 100vw;
    margin-left: -220px;
    margin-bottom: -1px;
    margin-top: 40px;
    padding-bottom: 1px;
    z-index: 9;
    pointer-events: none;
}
.showCount {
    position: relative;
    margin: 0px 1rem 10px auto;
    width: 70px;
    height: 70px;
    background: #333;
    border: solid 1px #333;
    border-radius: 50%;
    line-height: 1;
    padding: 20px;
    color: @white;
    cursor: pointer;
    pointer-events: auto;
    &__more {
        position: absolute;
        top: 15px;
        right: 26px;
        font-size: 1.25em;
        text-align: center;
        width: 2em;
    }
    &__max {
        position: absolute;
        bottom: 17px;
        left: 32px;
        text-align: center;
        font-size: 0.75em;
        width: 2em;
    }
    &:after {
        content: "";
        border-top: solid 1px @white;
        position: absolute;
        top: 33px;
        left: 17px;
        width: 40px;
        z-index: 1;
        transform: rotate(125deg);
    }
    &__text {
        display: block;
        position: absolute;
        font-size: 0.75em;
        top: -1.125rem;
        right: 0;
        width: fit-content;
        white-space: nowrap;
        color: #333;
        font-weight: bold;
        z-index: 1;
        background: @white;
        padding: 5px;
        border-radius: 5px;
    }
}
.limit-announce {
    text-align: center;
    margin: 20px auto 40px;
    border: solid 5px @linkColor;
    width: fit-content;
    padding: 30px 5%;
    background: #fff;
    max-width: 580px;
    &-buttons {
        display: flex;
        align-items: center;
        justify-content: space-around;
        a:hover {
            text-decoration: none;
        }
    }
}

.tml-login {
    .tml-rememberme-submit-wrap {
        display: block!important;
    }
    .tml-rememberme-wrap,
    .tml-submit-wrap {
        display: block!important;
        margin-left: 240px;
    }
}

dl.tokusho {
    dt {
        font-weight: bold;
        font-size: 0.88em;
        &:before { content: "【"; }
        &:after { content: "】"; }
    }
    dd {
        margin-left: 1.7em;
        margin-bottom: 0.5em;
    }
}

.sidebar {
    > *:first-child {
        margin-top: 0!important;
    }
    .adItem {
        margin: 1.5rem auto;
        max-width: 300px;
        * {
            display: block;
        }
    }
    .banner.banner--1 > ul {
        max-width: 300px;
        margin: 1.5rem auto;
        > li {
            width: calc(~"50% - 5px");
            margin: 0 0 10px;
            &:nth-child(odd) {
                margin-right: 5px;
            }
            &:nth-child(even) {
                margin-left: 5px;
            }
            * {
                display: block;
                width: 100%;
                margin: 0;
            }
            .banner__text {
                font-size: 11px;
                position: relative;
                padding: 4px;
                background: @primaryColor;
            }
        }
    }
    .contentsList.contentsList--textonly {
        padding: 15px;
        display: block;
        width: 100%;
        .heading.heading--noborder {
            width: 100%;
            font-size: 1em;
            margin-bottom: 0.5rem;
            br { display: none; }
        }
        > ul {
            display: block;
            column-count: unset;
            width: 100%;
            li {
                margin-bottom: 5px;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        .categoryMore.categoryMore--topright {
            font-size: 0.75em;
        }
    }
    .contentsList.contentsList--popular {
        padding: 10px;
        border: solid 1px #888;
        > ul {
            display: block;
            margin: 0;
            width: 100%;
            > li {
                width: 100%;
                margin: 0 0 10px;
            	border-top: solid 1px #eee;
            	padding-top: 10px;
            }
        }
    }
    .article.article--popular {
        .article {
            &__thumbnail {
                width: 70px;
                padding-bottom: 70px;
                &--video {
                    width: calc(~"70px * 16 / 9");
                }
            }
            &__text {
                padding-right: 10px;
                &--video {
                    width: calc(~"100% - 70px * 16 / 9");
                }
            }
            &__title {
                font-size: 0.92em;
                min-height: 2.7em;
                a {
                    white-space: normal;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                }
            }
            &__meta {
                padding: 0;
                font-size: 0.75em;
                height: auto;
            }
            &__description { display: none; }
            &__tags { display: none; }
        }
    }
}

body.login .mobileMenu {
    .button.button--register,.button.button--login {
        opacity: 0;
        pointer-events: none;
    }
}

.mobileMenuWrap {
    display: block;
	position: fixed;
	top: 6px;
	right: 60px;
	width: 300px;
	z-index: 11;
}

.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;
        }
    }
}

.jasrac-number {
    width: fit-content;
    margin: 10px 10px 20px auto;
    text-align: center;
    font-size: 12px;
    img {
        display: block;
        margin: 0 0 0 auto;
        width: 38px;
    }
}

.footer {
    padding: 10px;
    background: @primaryColor;
    color: @white;
    a {
    	color: @white;
    }
    &__navigation {
        display: flex;
        align-items: flex-start;
        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;
}

ins.adsbygoogle:empty {
    height: 1px!important;
}

@media all and (min-width: 821px){
    .scrollTop {
        position: fixed;
        z-index: 99;
        bottom: 10px;
        right: 0;
        width: 36px;
        height: 40px;
        border: solid 1px #cccccc;
        border-right: 0;
        background: #eeeeee;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        &:before {
            content: "";
            position: absolute;
            top: 17px;
            right: 10px;
            z-index: -1;
            transform: rotate(45deg);
            border: solid 3px #666;
            border-bottom: none;
            border-right: none;
            height: 10px;
            width: 10px;
            display: block;
        }
        &:hover {
        	background: #fff;
        }
    }
    .sidebar { max-width: 300px; }
}

@media all and (max-width: 1440px){

}

@media all and (max-width: 1280px){
    .contentsList {
        &&--digital_archive {
            li {
                width: calc(~"33.33% - 30px");
            }
        }
    }
}
@media all and (max-width: 1024px){
    body {
        .sideMenu {
            display: none;
        }
    }
    body.is-toggle-sidemenu {
        button.toggleSideMenu > span {
            &:nth-child(1) {
                transform: rotate(45deg);
                top: 50%;
            }
            &:nth-child(2) {
                display: none;
            }
            &:nth-child(3) {
                transform: rotate(-45deg);
                top: 50%;
            }
        }
        .sideMenu {
            display: block;
            height: 100%;
            position: fixed;
            overflow-y: scroll;
            top: 55px;
            border-right: solid 1px #eee;
        }
    }

    .toggleSideMenu {
        display: block;
    }

    .sideMenu {
        display: none;
    }
    .mainColumn {
        width: 100%!important;
        padding-top: 20px;
    }

    .stickyUtility {
        margin-left: 0;
    }

}
@media all and (max-width: 820px){
    html {
        font-size: 16px;
    }

    .container {

    }

    .header__utilities {
        display: none;
    }

    .onlineSitesMenu {
        height: 22px;
        > div {
            display: none;
        }
    }

    label.toggleonlineSitesMenu {
        width: 50px;
    	background: none;
    }

    .archive-title, .post-title, .page-title, .archiveTitle, .postTitle, .pageTitle {
        font-size: 1.5em;
    }

    .article {
        &&--topContents {
            margin-bottom: 20px;
            .article {
                &__text {
                    width: 100%;
                }
                &__description {
                    padding-left: 0;
                    font-size: 0.92em;
                }
                &__meta {
                    padding-left: 0;
                }
            }
        }
        &&--topSmall {
            .article {
                &__title {
                    font-size: 1.08em;
                    margin-bottom: 5px;
                }
            }
        }
    }

    .archive {
        &&--topContents {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            flex-wrap: wrap;
            margin-bottom: -20px;
            > li {
                width: calc(~"50% - 10px");
                margin: 0 10px 20px;
                &:nth-child(odd) { margin-left: 0; }
                &:nth-child(even) { margin-right: 0; }
            }
        }
    }

    .banner.banner--1 {
        > ul {
            flex-wrap: nowrap;
            > li {
                margin-bottom: 0;
            }
        }
    }

    .topContents {
        &&--sub {
            display: flex;
            align-items: stretch;
            > * {
                width: 100%;
            }
        }
    }
    .toppage .contentsList.contentsList--category > ul > li:nth-child(n + 9) {
        display: none;
    }
    .contentsList {
        &&--topContents {
            > li {
                width: 100%;
            }
        }
        &&--popular {
            > ul {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-start;
                justify-content: flex-start;
                > li {
                    width: calc(~"33.33% - 20px");
                }
            }
        }
        &&--category > ul {
            margin-bottom: 0;
            > li {
                width: calc(~"50% - 20px");
                margin: 0 10px 15px;
            }
        }
    	&&--related_links > ul {
    		margin-left: -10px;
    		margin-right: -10px;
            > li {
                width: calc(~"50% - 20px");
                margin-left: 10px;
                margin-right: 10px;
            }
    	}
    }

    .slideBannerWrap, .seriesWrap {
        margin: 50px auto;
    }
    .seriesItem {
        &__contents {
            display: block;
            margin-top: -30px;
        }
        &__article {
            width: 100%;
            margin: 0 0 10px;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .slick-container {
        &&-video,&&-audio {
        	display: flex;
        	align-items: flex-start;
        	justify-content: flex-start;
        	flex-wrap: wrap;
        	margin-left: -10px;
        	margin-right: -10px;
        }
        .slick-item.slick-item-column3 {
            width: calc(~"50% - 20px");
            margin: 0 10px 20px;
        }
        .slick-item.slick-item-column4 {
            width: calc(~"33.33% - 20px");
            margin: 0 10px 20px;
        }
    }

    .sidebar {
        display: none;
        margin-top: 80px;
        .adItem {
            margin: 15px 15px 0 0;
            width: 250px;
        }
        .banner.banner--1 {
            width: calc(~"100% - 280px");
            margin: 15px 0 0 15px;
            > ul {
                max-width: 100%;
                flex-wrap: wrap;
                margin: 0;
                > li {
                    width: calc(~"50% - 15px");
                    margin: 0 15px 30px;
                    &:nth-child(odd) { margin-left: 0; }
                    &:nth-child(even) { margin-right: 0; }
                }
            }
        }
        .article.article--ssmall {
            display: flex;
            line-height: 1.8;
        }
    }

    .seriesMainSection {
        &__banner {
            height: 0;
            padding-bottom: 50%;
            background-size: cover;
        }
        &__textarea {
            width: auto;
            margin: 35% 15px 0;
            border-image-source: linear-gradient(0deg, #ddd, rgba(255, 255, 255, 0.6));
        }
    }
    .seriesContent__textarea {
    	font-size: 0.88em;
    }
    .seriesNormalSection {
    	padding-left: 0;
    	padding-right: 0;
    }

    .post-container {
        margin: auto;
    }

    .helpCatButton {
    	line-height: 1.35;
        strong {
            font-size: 1em;
        }
    }
    .helpCatButtonList > li {
    	width: calc(~"50% - 30px");
    }
    .helpContent {
        padding-left: 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;
        }
    }
    .stickyUtility {
        bottom: 50px;
    }
    .footer {
        display: none;
    }
}

@media all and (max-width: 640px){
    .contentsList {
        &&--textonly {
            padding: 10px;
            .heading {
                text-align: left;
            }
            > ul {
                column-count: unset;
            }
        }
        &&--omichinews {
            display: none;
            border: solid 2px;
            border-color: @primaryColor;
            border-radius: 20px;
            padding: 0px 15px;
            margin: 10px auto;
            width: 100%;
            &.is-active {
                display: block;
            }
            > h3 {
                display: none;
            }
        }
        &&--digital_archive {
            li {
                width: calc(~"50% - 30px");
            }
        }
    }
    .omichinewsTab {
        display: flex;
    }

    .omichinewsFlex {
        display: block;
        margin: 20px auto;
        width: 100%;
    }

}

@media all and (max-width:480px){
    html {
        font-size: 15px;
        line-height: 1.7;
    }

    body {
        padding-top: 75px;
        &.toppage {
            padding-top: 50px;
        }
    }

    body.is-toggle-sidemenu {
        overflow: hidden;
        .sideMenu {
            width: 100%;
            top: 45px;
        }
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
        &&--header {
            padding: 12px 0;
        }
        &&--series {
            padding-left: 15px;
            padding-right: 15px;
        }
        &&--ads {
            max-width: 330px;
        }
        &&--archiveTitle {
            font-size: 1.5em;
            margin-bottom: 0.75rem;
        }
        &&--breadcrumbs {
            margin: 0 auto 1rem;
        }
        &&--flex {
            display: block;
        }
        &&--post {
            margin-bottom: 40px;
        }
    }

    .header {
        height: 50px;
    	border-bottom-width: 2px;
        &__title {
            height: 1.4em;
            > a > img {
                max-width: 150px;
            }
        }
    }

    input[name="onlineSitesMenu"]:checked + label.toggleonlineSitesMenu .onlineSitesMenu > span {
    	top: 20px;
    	left: 6px;
    }

    .categoryWrap {
        margin-bottom: 1rem;
    }

    .breadcrumbs {
        font-size: 0.75em;
        > li {
            margin-right: 0.5rem;
            &:after { margin-left: 0.5rem; }
        }
    }

    .mainColumn {
        padding-top: 0;
        padding-bottom: 50px;
    }
    .swiper-container {
        &&-nav {
            padding-right: 20px;
            .swiper-slide {
                font-size: 0.875em;
                margin-left: 0;
                margin-right: 0;
            }
            .swiper-button-prev { display: none; }
        }
    }
    .itemsSwiper {
        &&--topaudio {
            .swiper-slide.listItem.listItem--audio.listItem--slider {
                height: 190px!important;
            }
        }
    }

    .article {
        &__title {
            display: block;
            font-size: 1em;
        }
        &__text {
            font-size: 0.92em;
        }
        &__description { padding-left: 0; }
        &__meta { padding-left: 0; height: auto; }
        &__playPause button {
            width: 32px;
            height: 32px;
            font-size: 22px;
        }
        &&--topContents {
            display: block;
            .article__thumbnail {
                width: auto;
                padding-bottom: calc(~"(100% + 30px) * 9 / 16");
                margin-left: -15px;
                margin-right: -15px;
            }
            .article__title {
                font-size: 1.25em;
                a {
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    white-space: normal;
                }
            }
            .article__text {
                width: 100%;
            }
        }
        &&--topSmall {
            .article__description {
                display: -webkit-box;
            }
            .article__meta {
                text-align: left;
                padding-left: 0;
            }
        }
        &&--ssmall {
            .article__date {
                font-size: 0.75em;
                min-width: 9.5em;
                margin-right: 0;
                text-align: left;
            }
            .article__title {
            	white-space: nowrap;
            	text-overflow: ellipsis;
            	overflow: hidden;
            }
        }
        &&--omichinews {
        	font-size: 1em;
        }
        &&--archive,&&--search {
            .article__title a {
                height: auto;
            }
        }
        &&--ranking { margin-bottom: 0; }
        &&--wideImage {
            height: 100%;
            .article__text {
                padding: 5px 8px;
            }
            .article__title a {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                white-space: normal;
                line-height: 1.35;
            }
        }
        &&--series {
        	margin-bottom: 10px;
        	padding-bottom: 10px;
        }
    }

    .topContents {
        &&--main {
            width: 100%;
        }
        &&--sub {
            display: block;
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            > * {
                display: block;
                width: 100%;
                margin: 0;
            }
        }
    }

    #honbu-info {
    	margin: 15px 0;
    }

    .contentsList {
        &&--topContents {
            margin-bottom: 0;
            > li {
                width: 100%;
                margin: 0 0 20px;
            }
        }
        &&--textonly {
            display: block;
            .heading {
                text-align: center;
                width: 100%;
                margin-bottom: 8px;
                br { display: none; }
            }
            ul {
                width: 100%;
            }
        }
        &&--localnews > ul > li {
            width: 100%;
            margin: 10px 0 0;
            &:nth-child(n+9){ display: none; }
        }
        &&--ranking {
            padding: 0.5rem;
            > ul > li:last-child {
                margin-bottom: 0;
            }
        }
        &&--category > ul {
            margin-left: 0;
            margin-right: 0;
            > li {
                width: 100%;
                margin: 0 0 12px;
            }
        }
        &&--popular {
            > ul {
                margin-left: -15px;
                margin-right: -15px;
                align-items: flex-start;
                justify-content: flex-start;
                flex-wrap: nowrap;
                overflow-x: scroll;
                width: auto;
                > li {
                    width: 240px;
                    min-width: 240px;
                    margin-left: 15px;
                    margin-right: 15px;
                }
            }
            .article {
                border: solid 1px;
                .article__thumbnail {
                    margin-bottom: 0;
                }
                .article__text {
                    background: @fontColor;
                    color: @white;
                    padding: 10px;
                }
                .article__meta * {
                    color: #ddd;
                }
            }
        }
        &&--digital_archive {
        	display: block;
        	margin: 0 0 40px;
        	padding-left: 8px;
            li {
                width: auto;
                margin: 0 0 10px;
            }
        }
        &&--related_links {
            > ul > li {
                width: 100%;
                margin: 0 10px 10px;
            }
        }
    }

    .seriesItem {
        &__contents {
            padding: 10px 20px;
        }
        &__article {
            margin: 0 0 10px;
        }
    }

    .heading {
        font-size: 1em;
        margin-bottom: 15px;
        &&--series {
            text-align: center;
            padding: 0;
            margin-bottom: 1rem;
        }
        &&--omichinews {
            text-align: center;
        }
    }

    .banner.banner--1 {
        margin: 30px auto;
        > ul {
            flex-wrap: wrap;
            > li {
                width: calc(~"50% - 20px");
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }
    }

    .slick-container {
        &&-banner {
            .slick-arrow.slick-next:after { right: 5px; }
            .slick-arrow.slick-prev:after { left: 5px; }
        }
        &&-series {
            .slick-arrow.slick-next { right: 10px; }
            .slick-arrow.slick-prev { left: 10px; }
        }
        &&-ads {
            .slick-arrow.slick-next { right: -30px; }
            .slick-arrow.slick-prev { left: -30px; }
        }
        &&-video {
            > *:nth-child(n+9) {
                display: none;
            }
        }
        .slick-item.slick-item-column3,
        .slick-item.slick-item-column4 {
            width: calc(~"50% - 20px");
            margin: 0 10px 20px;
        }
        &&-banner {
            .slick-arrow {
                background: none;
                border: none;
            }
        }
        &&-seriespage .slick-item {
            margin: 0 8px;
        }
        .slick-arrow.slick-next {
            right: -10px;
            &:after { transform: rotate(225deg) skew(10deg,10deg); }
        }
        .slick-arrow.slick-prev {
            left: -10px;
            &:after { transform: rotate(45deg) skew(10deg,10deg); }
        }
    }

    .itemsSwiper {
        &&--topaudio {
            height: 440px;
        }
    }

    .sliderItemSection {
        &__caption {
            margin: 0.5em 0;
            line-height: 1.5;
        }
    }

    .categoryMoreWrap {
        &&--left { text-align: left; }
        &&--right { text-align: center; }
        &&--cat {
            right: 10px;
            .categoryMore.categoryMore--strong {
                font-size: 0.84em;
                padding: 0.25em 0.75em;
            }
        }
    }

    .archive, .category {
        .catBGWrap {
            position: relative;
            z-index: -1;
            margin: 0 -15px;
        }
        .catBG {
            margin: 0 0 -1.5rem;
        }
    }

    .archiveContents {
        > li {
            width: 100%;
            margin: 0 0 5px;
        }
    }

    .archiveUtility {
    	margin-bottom: 20px;
    }

    .historyPosts {
    	line-height: 1.35;
        > li {
            margin: 0.25em 0 0.5em;
        }
    }

    .categories,.keywords {
        padding: 10px 0 0;
        background: none;
        border-top: solid 1px @lightShadowColor;
    }
    .categories {
        columns: unset;
        > li > ul {
            columns: auto 2;
        }
    }
    .links > li {
        margin: 0 0.375rem 0.5rem;
        > a {
            font-size: 0.875em;
        }
    }

    .sidebar {
        .article.article--ssmall {
            display: block;
            line-height: 1.2;
        }
        .adItem {
            width: 300px;
            margin: 0 auto;
            order: 3;
        }
        .banner.banner--1 {
            width: 100%;
            margin: 0 0 30px;
            order: 2;
            > ul > li {
                width: calc(~"50% - 10px");
                margin: 0 10px 20px;
            }
        }
        .contentsList.contentsList--textonly { order: 1; }
    }

    .galleryItem {
        width: calc(~"(100% / 2) - 10px");
        &__thumb {
            img {
                max-height: 240px;
            }
        }
    }

    .archive-title, .post-title, .page-title, .archiveTitle, .postTitle, .pageTitle {
        font-size: 1.16em;
        margin-bottom: 1rem;
    }

    .post-meta {
        margin-bottom: 1rem;
        font-size: 0.75em;
        a {
            font-weight: normal;
        }
    }

    .helpCatButton {
        padding: 40px 10px;
        small {
            width: calc(~"100% - 20px");
        }
    }

    .helpArchive {
        margin-top: 20px;
        > li {
            width: 100%;
            padding: 10px 0;
        }
    }

    .post-container {
        // font-size: 0.92em;
        h2.wp-block-heading { font-size: 1.25em; }
        h3.wp-block-heading { font-size: 1.125em; }
        h4.wp-block-heading { font-size: 0.875em; }
        table {
            th,td { padding: 0.375em 0.5em;}
        }
        .wp-block-media-text__media img {
            display: block;
            max-width: 280px;
            max-height: 280px;
            padding: 10px;
            margin: auto;
            width: auto;
            height: auto;
        }
        .wp-block-image {
            .alignright,.alignleft {
                max-width: 360px;
                margin: 10px auto;
                float: none;
            }
        }
    }
    .post-utility {
        .post-share {
            order: 2;
        }
        .post-date {
            margin: 0 0 0.5rem;
        }
    }

    .journalArchiveList {
        &&--media {
            margin-left: -10px;
            margin-right: -10px;
            > li {
                margin: 0 5px;
                width: calc(~"33.33% - 10px");
            }
        }
    }
    .journalArchive__media {
        margin: auto;
        &__image > img {
            max-width: 100%;
            max-height: 140px;
            margin: auto;
        }
    }


    .pagenation.pagenation--post {
        margin-top: 20px;
        font-size: 0.88em;
        a {
            width: calc(~"50% - 10px");
            padding: 4px;
            position: relative;
            margin-bottom: 0;
            img {
                width: 100%;
                max-width: none;
                height: 80px;
                object-fit: cover;
            }
            p {
                margin: 0px 4px;
                line-height: 1.35;
            }
        }
        .post-prev:before,
        .post-next:after {
            border-width: 9px;
            border-top-width: 6px;
            border-bottom-width: 6px;
        }
    }

    .seriesMainSection,.seriesContent {
    	padding-left: 10px;
    	padding-right: 10px;
        &__textarea {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            padding: 10px;
            border-width: 6px;
        }
        &__heading {
            font-size: 1.24em;
            padding-bottom: 5px;
            margin-bottom: 10px;
            padding-right: 30px;
        }
        &__postCount {
            font-size: 0.88em;
            padding: 4px 6px;
        }
    }
    .seriesNormalSection {
    	display: block;
    }
    .seriesContent {
    	width: 100%;
    	margin-left: 0;
    	margin-right: 0;
    }

    .post-container {
        .tml {
            margin: 10px auto;
            #registerform,#loginform {
                > * {
                    margin: 0 0 15px 0;
                    &.g-recaptcha {
                        margin-left: 0;
                    }
                }
                .tml-submit-wrap {
                    margin-left: 0;
                    width: 100%;
                    > input[type="submit"] {
                        width: 100%;
                        margin: 20px auto;
                    }
                }
                #xs-social-login-container {
                    padding: 15px;
                    .xs-login {
                        gap: 10px;
                    }
                    .xs-login__item {
                        width: 100%;
                        padding: 5px 8px;
                    }
                    .xs-login--style-1 .xs-login__item--icon {
                        width: 1.4em;
                        height: 1.4em;
                        line-height: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0.2em;
                        font-size: 1em;
                        box-sizing: content-box;
                    }
                }
            }
            #wpg-login a {
                width: 100%;
                margin: 5px auto;
            }
        }
        .tml-submit-wrap {
            margin-left: 0;
            width: 100%;
            > input[type="submit"] {
                width: 100%;
                margin: 20px auto;
            }
        }
        .tml-user-email-wrap,
        .tml-user-pass1-wrap,
        .tml-user-pass2-wrap,
        .tml-user-login-wrap,
        .tml-user-pass-wrap,
        .form_item {
            display: block;
            margin: 0 auto 15px;
            > label, > .form_label {
                display: block;
                width: 100%;
                margin-right: 0;
            }
            > input, > .form_field {
                display: block;
                width: 100%;
                max-width: 100%;
            }
            &--required .form_label:after,label[for*="pass"]:after {
                position: relative;
                margin-left: 15px;
                right: unset;
                border: none;
                padding: 0;
                content: "(必須)";
            }
        }
        .tml .tml-action-links {
            margin: 0 0 80px!important;
            display: flex;
            justify-content: center;
        }
        .g-recaptcha {
            margin-left: 0;
        }
        p {
            margin-bottom: 10px;
            line-height: 1.5;
        }
    }
    .limit-announce {
        padding: 20px 10px;
    }
    .tml-login {
        .tml-submit-wrap,
        .tml-rememberme-wrap {
            margin-left: 0;
            text-align: center;
        }
    }

    .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;
            }
        }
    }

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

    .mypage-menu {
        display: none;
    }

    .mypage {
        &__section {
            table {
                th {
                    width: 5rem;
                }
            }
        }
    }

    .post-button1 {
        font-size: 3.7vw;
        justify-content: space-between;
    }

    .aionsei {
        width: calc(~"50% - 10px");
        justify-content: center;
    }
    
    
    .btn {
        &&--viewer {
            width: calc(~"50% - 10px");
            justify-content: center;
            .icon.icon-viewer {
                font-size: 1.88em;
            }
            > span strong {
                font-size: 1.2em;
                white-space: nowrap;
            }
            > img {
                width: 2.5em;
            }
        }
        &&--planPugrade, &&--webplayer {
            display: block;
            width: 100%;
            max-width: 280px;
            margin: 20px auto;
            text-align: center;
        }
    }
}

@media print {
    // .header,.footer,.mobileMenuWrap {
    //     display: none!important;
    // }
    html,body {
        margin:0!important;
        padding:0!important;
    }
    .header {
        position: relative;
        top: 0;
    }
    .mobileMenuWrap {
        position: absolute;
    }
    .sideMenu {
        position: relative;
        top: 0;
    }
    .archiveContents > li {
        margin-bottom: 5px;
    }
    .article.article--archive, .article.article--search {
        padding-bottom: 5px;
    }
    .scrollTop {
        display: none;
    }
}