@font-face {
    font-family: 'M PLUS 1p';
    font-style: normal;
    font-weight: 400;
    src:
            local('M PLUS 1p'),
            url("../../fonts/demons/MPLUS1p-Regular.ttf");
}
@font-face {
    font-family: 'M PLUS 1p Bold';
    font-style: normal;
    font-weight: 700;
    src:
            local('M PLUS 1p Bold'),
            url("../../fonts/demons/MPLUS1p-Bold.ttf");
}
@font-face {
    font-family: 'M PLUS 1p Black';
    font-style: normal;
    font-weight: 900;
    src:
            local('M PLUS 1p Black'),
            url("../../fonts/demons/MPLUS1p-Black.ttf");
}
@font-face {
    font-family: 'Dela Gothic One';
    font-style: normal;
    font-weight: 400;
    src:
            local('Dela Gothic One'),
            url("../../fonts/demons/DelaGothicOne-Regular.ttf");
}

:root {
    --white: #FFFFFF;
    --black: #000000;
    --login-btn: #C238EF;
    --bg-color-1: #972AE6;
    --bg-color-2: #626FBF;
    --bg-color-3: #4EA092;
    --announce-text: #FC00FF;
    --list-bg-1: #DEECDD;
    --list-bg-2: #C1DFC4;
    --list-text: #3D6BEF;
}

body {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    color: var(--white);
    font-style: normal;
    background: linear-gradient(180deg,
                                var(--bg-color-1) 10%,
                                var(--bg-color-2) 33%,
                                var(--bg-color-3) 53%,
                                var(--bg-color-3) 77%,
                                var(--bg-color-1) 94%);
    background-size: 85%;
}

a {
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
}

/* ヘッダーカスタマイブ */
a.btn-header {
    border-color: var(--login-btn);
    color: var(--login-btn);
}

/* ヘッダー部イメージ */
section.product-image {
    width: 100%;
}

/* クレジット */
section.credit {
    width: 100%;
    overflow: visible;
    background-image: url("../../images/product/demons/name_base.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    aspect-ratio: 4.7/1;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    letter-spacing: 2px;
    font-family: "M PLUS 1p Black", sans-serif;
    font-weight: 900;
}
section.credit dl {
    transform: translateY(-25%);
}
section.credit dl:not(:first-child) {
    margin-left: 15lvw;
}
section.credit dt {
    margin-bottom: 0.5lvw;
    font-size: 1.6lvw;
}
section.credit dd {
    font-size: 2.3lvw;
}

/* KILLイメージ */
.interval-img {
    width: 100%;
    position: relative;
    transform: translateY(-15%);
    z-index: -1;
}

/* 小説一覧 */
main {
    width: unset;
    margin-bottom: 10lvw;
}
main .top-img, main .bottom-img {
    width: 100%;
}
main .novel-list {
    display: inline-block;
    width: 63%;
    min-height: 40lvw;
    text-align: center;
    padding: 5lvw 2lvw 2lvw;
    margin: 1lvw 0 2lvw;
    background: linear-gradient(var(--list-bg-1) 0%, var(--list-bg-2) 100%);
    border: var(--black) 0.3lvw solid;
    box-shadow: var(--black) 0.37lvw 0.53lvw 0 0;
    position: relative;
}
main .novel-list::before {
    content: '';
    position: absolute;
    top: -14%;
    left: 0;
    right: 0;
    width: 60%;
    height: auto;
    margin: 0 auto;
    background: url("../../images/product/demons/novel.png") no-repeat;
    background-size: contain;
    aspect-ratio: 752/232;
}
main .novel-list .chara-bg-left,
main .novel-list .chara-bg-right {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 95%;
}
main .novel-list .chara-bg-left {
    top: -5%;
    left: -70%;
}
main .novel-list .chara-bg-right {
    top: -5%;
    right: -70%;
}
main .announce {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "M PLUS 1p Black", sans-serif;
    margin: 3lvw 0 1lvw;
}
main .announce .announce-time {
    font-family: "Dela Gothic One", sans-serif;
    font-size: 2.3lvw;
    color: var(--list-text);
}
main .announce .announce-text {
    font-size: 1.85lvw;
    color: var(--announce-text);
    margin-left: 2lvw;
}
main .content {
    display: inline-block;
    width: 60%;
    font-family: "M PLUS 1p Bold", sans-serif;
    font-size: 1.8lvw;
    font-weight: 700;
    text-align: center;
    color: var(--list-text);
}
main .content dl {
    margin-top: 1lvw;
    padding: 0.5lvw 0;
    border-bottom: var(--white) 0.4lvw solid;
}
main.novel .content a:active,
main.novel .content a:focus,
main.novel .content a:hover,
main.novel .content a:link,
main.novel .content a:visited {
    text-decoration: none;
    color: var(--list-text);
}
main.novel .more {
    text-align: center;
    margin-top: 4lvw;
}
main.novel .more-btn {
    display: inline-block;
    width: 20lvw;
}

/* コンテンツ */
.contents {
    width: 100%;
    margin: 20lvw 0 0;
    background: url("../../images/product/demons/contents_base.png") center center;
    background-size: cover;
    aspect-ratio: 1920/1424;
    /*aspect-ratio: 0.87/1; !* スマホ版仮 *!*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.contents::before {
    content: '';
    position: absolute;
    background: url("../../images/product/demons/halftone.png") no-repeat center top;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1920/793;
    top: -25%;
    opacity: 0.7;
    z-index: -1;
}
.contents .contents-block {
    transform: translateY(-10%);
}
.contents .header {
    width: 35lvw;
    margin-bottom: 5lvw;
}
.contents .banner {
    width: 40lvw;
}

/* クリエイター */
.creator {
    background: url("../../images/product/demons/bg_text.png") no-repeat center center;
    background-size: cover;
    aspect-ratio: 780/767;

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.creator .profile {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transform: translateY(20%);
}
.creator .writer {
    width: 60lvw;
}
.creator .x-account {
    position: absolute;
    top: 14%;
    right: 9%;
}
.creator .x-icon {
    display: block;
    width: 100%;
}

/* フッター */
footer {
    margin: 0;
    color: var(--white);
    background: var(--black);
}
footer a:active,
footer a:focus,
footer a:hover,
footer a:link,
footer a:visited {
    color: var(--white);
}


/* === タブレット === */
@media screen and (max-width: 768px) {
    main .novel-list {
        min-height: 50lvw;
    }
    main .novel-list::before {
        top: -10%;
    }
    main .announce .announce-time {
        font-size: 3.5lvw;
    }
    main .announce .announce-text {
        font-size: 3.2lvw;
    }
    main .content {
        font-size: 3lvw;
    }
    main .content dl {
        margin-top: 1.5lvw;
    }
}


/* === スマホ === */
@media screen and (max-width: 480px){

}