@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 Black';
    font-style: normal;
    font-weight: 900;
    src:
            local('M PLUS 1p Black'),
            url("../../fonts/demons/MPLUS1p-Black.ttf");
}

:root {
    --white: #FFFFFF;
    --black: #000000;
    --login-btn: #C238EF;
    --bg-color-1: #6A14D1;
    --bg-color-2: #1F7BBC;
    --text-border: #000960;
    --text-shadow: #00FFD2;
    --border-color: #0DBCD1;
}

body {
    font-family: "M PLUS 1p", sans-serif;
    font-weight: 700;
    color: var(--white);
    font-style: normal;
    background: linear-gradient(var(--bg-color-1) 0%, var(--bg-color-2) 85%);
    background-size: 100%;
}

a {
    text-decoration: none;
}

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

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

/* クレジット */
.credit {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: left;
    letter-spacing: 2px;
    margin-right: 10px;
    font-family: "M PLUS 1p Black", sans-serif;
    font-weight: 900;
    gap: 3lvw;
    margin-top: 1lvw;
}
.credit-img img {
    display: block;
    width: 100%;
}

main {
    width: 100%;
    margin-top: 1lvw;
}
/* 最初から読む 続きから読む */
main .novel-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1lvw;
}
main .novel-btn {
    width: 17lvw;
}
main .novel-btn img {
    display: block;
    width: 100%;
}
main .novel-btn:not(:first-child) {
    margin-left: 3lvw;
}

/* 紹介文 */
main .introduction {
    margin-top: 3lvw;
}
main .introduction .header{
    width: 60%;
    margin: 0 auto 7lvw;
}
main .introduction .header img {
    display: block;
    width: 100%;
}
main .introduction .text {
    margin: 0 auto 7lvw;
    width: 60%;
    font-size: 2lvw;
    line-height: 1.5;
    paint-order: stroke fill;
}

/* 目次 */
main .index {
    width: 89lvw;
    margin: 0 auto 3.5lvw;
    font-size: 1.5lvw;
    font-weight: 700;
    text-align: center;
}
main .index img.header {
    display: block;
    margin: 0 auto 2.5lvw;
    width: 10lvw;
    max-width: 15lvw;
    min-width: 7lvw;
}
main .index dl {
    width: 58lvw;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.3;
    padding: 2lvw 0;
    border-bottom: 0.5lvw solid var(--border-color);
}
main .index dt, main .index dd {
    display: flex;
}
main .index dt {
    min-width: 25%;
    word-break: auto-phrase;
}
main .index:has(dt) dd {
    min-width: 75%;
}
main .index a:active,
main .index a:focus,
main .index a:hover,
main .index a:link,
main .index a:visited {
    color: var(--white);
    text-decoration: none;
    display: inline-block;
}

/* ページャー */
.pager {
    padding-top: 1.7lvw;
    padding-bottom: 3.4lvw;
}
.page-link {
    border: var(--border-color) 0.35lvw solid;
    background-color: var(--white);
    color: var(--black);
}
.page-item.active .page-link {
    background-color: var(--black);
    color: var(--white);
}

/* フッター */
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 .index {
        font-size: 2lvw;
    }

    /* ページャー */
    .page-link {
        min-width: 4.5lvw;
        min-height: 4.5lvw;
        border-width: 0.7lvw;
    }
}

/* === スマホ === */
@media screen and (max-width: 480px){
    /* 最初から読む 続きから読む */
    main .novel-btn {
        width: 23lvw;
    }

    /* 紹介文 */
    main .introduction .header{
        width: 70%;
    }
    main .introduction .text {
        width: 70%;
        font-size: 2.5lvw;
    }

    /* 目次 */
    main .index {
        font-size: 2.5lvw;
    }
    main .index img.header {
        width: 15lvw;
    }
}