@charset "UTF-8";
/* 初期化 */
* {
    box-sizing: border-box;
}
html, body, p, ul, ol, li, h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
}
ol,ul {
    list-style: none;
}
html {
    color: #fff;
}
a {
    color: #fff;
    text-decoration: none;
    transition: all .5s;
}
a:hover {
    opacity: .7;
}
img {
    width:100%;
    max-width:100%;
    height:auto;
    display:block
}
body {
    position: relative;
    background: linear-gradient(180deg, #5b2326, #933535);
    font-family: "Sawarabi Mincho";
}
p {
    line-height: 1.4;
}
p:not(:last-child) {
    margin-bottom: 8px;
}
.-none {
    display: none !important;
}
@media screen and (max-width: 767px) {
    .-sp-none {
        display: none !important;
    }
}
@media screen and (min-width: 768px) {
    .-pc-none {
        display: none !important;
    }
}

/* 変数 */
:root {
  --title-width: 22rem;
  --title-height: 12rem;
  --title-color: #3F2B13;
}
@media screen and (min-width: 768px) {
    :root {
        --title-width: 510px;
        --title-height: 122px;
    }
}

/* header
==================== */
header {
    text-align: center;
}
.title {
    max-width: var(--title-width);
    height: var(--title-height);
    margin: 0 auto;
    padding-top: 1rem;
    color: var(--title-color);
}
.title h1 {
    max-width: var(--title-width);
    width: 100%;
    text-align: center;
}
.title_text,
.title img {
    position: absolute;
}
.title_text {
    line-height: 1;
    height: var(--title-height);
    width: 100%;
    max-width: var(--title-width);
    display: flex;
    align-items: center;
    justify-content: center;
}
.title img {
    z-index: -1;
    height: var(--title-height);
    width: var(--title-width);
}

/* sp */
@media screen and (min-width: 371px) and (max-width: 767px) {
    .title_text > span:first-child {
        margin-bottom: 0.5rem;
    }
}
@media screen and (max-width: 767px) {
    .title_text {
        flex-direction: column;
    }
}
/* pc */
@media screen and (min-width: 768px) {
    header {
        max-width: 960px;
        margin: 0 auto;
        padding-top: 40px;
    }
    .title {
        margin-bottom: 10px;
    }
    .title_text {
        flex-direction: row;
    }
    .title_text_l {
        letter-spacing: -2px;
    }
    .title_text_r {
        padding-left: 8px;
    }
}

/* main
==================== */
section {
    margin: 3rem auto;
}
section + section {
    margin-top: 4rem;
}
.splide {
    z-index: 5;
}
.splide__controls {
    display: flex;
    align-items: center;
}
.splide__progress__wrap {
    margin-left: 0.7rem;
    width: calc( 100% - 2.5rem );
}
.splide__progress__wrap {
    margin-left: 0.7rem;
}
.splide__progress__bar {
  height: 3px;
  width: 100%;
  background: #ccc;
}
button {
    border: 0;
    cursor: pointer;
    padding: 0;
}
.splide__toggle {
    align-items: center;
    background: #737e80;
    border-radius: 50%;
    display: inline-flex;
    height: 1.8rem;
    justify-content: center;
    transition: background-color .2s ease;
    width: 1.8rem;
}
.splide__toggle svg {
    fill: #e5eeee;
    height: 46%;
    transition: fill .2s ease;
    width: 46%;
}
.splide__pagination {
    bottom: 2rem;
}

.detail_list li {
    line-height: 1;
    text-align: center;
}
.detail_list li:first-child {
    position: relative;
    margin-bottom: 12px;
}
.detail_list li:first-child:after {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    content: "";
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
#splide-illust .detail_list li:first-child:after {
    background-image: url(../img/frame_illust.png);
    background-size: 100% 100%;
}
#splide_novel .detail_list li:first-child:after {
    background-image: url(../img/frame_novel.png);
    background-size: 100% 100%;
}
.detail_list li:nth-child(2) {
    margin-bottom: 8px;
    font-size: 15px;
}
.detail_list li:nth-child(3) {
    font-size: 12px;
}
#splide-illust .detail_list {
    width: 72vw;
    margin: 0 4vw;
}
#splide-illust .detail_list img {
    margin: 0 auto;
    padding: 11% 10%;
}
#splide-illust .detail_list .direction-vertical {
    height: 56vw;
}
#splide-illust .detail_list .direction-vertical img {
    transform: translateY(-1vw) rotate(-90deg);
    width: 40.5vw;
    padding: 0;
}
#splide_novel .detail_list {
    width: 55vw;
    margin: 0 4vw;
}
#splide_novel .detail_list:has(.size-shinsho) {
    width: 44.1vw;
}
#splide_novel .detail_list img {
    margin: 0 auto;
    padding: 13% 14% 14%;
}
#splide_novel .detail_list .size-shinsho img {
    margin: 0 auto;
    padding: 17% 14%;
}
/* sp */
@media screen and (max-width: 640px) {
    #splide-illust .splide__arrow {
        top: 33%;
    }
}
@media screen and (min-width: 641px) and (max-width: 767px) {
    #splide-illust .splide__arrow {
        top: 33%;
    }
}
@media screen and (max-width: 767px) {
    #splide-illust .splide__arrow--prev {
        left: 1.5rem;
    }
    #splide-illust .splide__arrow--next {
        right: 1.5rem;
    }
    #splide_novel .splide__arrow {
        top: 36%;
    }
    #splide_novel .splide__arrow--prev {
        left: 3rem;
    }
    #splide_novel .splide__arrow--next {
        right: 3rem;
    }
    .splide__controls {
        margin: 2rem 2rem 0;
    }
}
@media screen and (max-width: 1240px) {
    .lightbox {
        height: 96svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
/* pc */
@media screen and (min-width: 768px) {
    section {
        max-width: 600px;
    }
    #splide-illust .splide__arrow {
        top: 35%;
    }
    #splide_novel .splide__arrow {
        top: 37%;
    }
    #splide-illust .splide__arrow--prev,
    #splide_novel .splide__arrow--prev {
        left: -4rem;
    }
    #splide-illust .splide__arrow--next,
    #splide_novel .splide__arrow--next {
        right: -4rem;
    }
    .splide__controls {
        margin: 2rem 8rem 0;
    }
    #splide-illust .detail_list {
        width: 330px;
        margin: 0 30px;
    }
    #splide-illust .detail_list .direction-vertical {
        height: 258px;
    }
    #splide-illust .detail_list .direction-vertical img {
        transform: translateY(-2px) rotate(-90deg);
        width: 185px;
    }
    #splide_novel .detail_list {
        width: 250px;
        margin: 0 30px;
    }
    #splide_novel .detail_list:has(.size-shinsho) {
        width: 201px;
    }
}
@media screen and (min-width: 850px) {
    section {
        max-width: 700px;
    }
}
@media screen and (min-width: 960px) {
    section {
        max-width: 800px;
    }
}
@media screen and (min-width: 1100px) {
    section {
        max-width: 960px;
    }
}

/* footer
==================== */
.footer_img {
    margin-bottom: 1rem;
}
footer {
    margin: 1rem 1rem 0;
    text-align: center;
    padding-bottom: 1rem;
    position: relative;
}
footer small {
    position: relative;
    z-index: 6;
    text-shadow: 0 0 4px #000;
}
.piyo, .boo {
    position: fixed;
    bottom: 0;
    overflow:hidden
}
@media screen and (max-width: 767px) {
    .footer_img {
        margin-bottom: 12rem;
    }
    .piyo, .boo {
        width: 190px;
        height: auto;
    }
    .piyo {
        left: -190px;
    }
    .boo {
        right: -190px;
    }
    .piyo img {
        transform: translateY(22px);
    }
    .boo img {
        transform: translateY(22px);
    }
}
@media screen and (min-width: 768px) {
    .footer_img {
        max-width: 960px;
        margin: 20px auto;
    }
    .piyo, .boo {
        width: 300px;
        height: auto;
    }
    .piyo {
        left: -400px;
    }
    .boo {
        right: -400px;
    }
    .piyo img {
        transform: translateY(35px);
    }
    .boo img {
        transform: translateY(35px);
    }
}

/* 崩れ防止
==================== */
@media screen and (max-width: 370px) {
    :root {
        --title-width: 88vw;
        --title-height: 48vw;
    }
    .title {
        padding-top: 3vw;
    }
    .title_text {
        font-size: 8vw;
        margin-top: 0.5vw;
    }
    .title_text > span:first-child {
        margin-bottom: 1vw;
    }
    p {
        font-size: 4.5vw;
    }
    p:not(:last-child) {
        margin-bottom: 2vw;
    }
    section + section {
        margin-top: 12vw;
    }
    section {
        margin: 10vw auto;
    }
    .splide__controls {
        margin: 10vw 10vw 0;
    }
    .detail_list li:nth-child(2) {
        margin-bottom: 2vw;
        font-size: 4.5vw;
    }
    .detail_list li:nth-child(3) {
        font-size: 3.5vw;
    }
    footer {
        margin: 4vw 4vw 0;
        padding-bottom: 4vw;
    }
    .footer_img {
        margin-bottom: 4vw;
    }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
    section + section {
        margin-bottom: 12rem;
    }
}
@media screen and (min-width: 980px) and (max-width: 1239px) {
    section + section {
        margin-bottom: 10rem;
    }
}
@media screen and (min-width: 1240px) and (max-width: 1399px) {
    section + section {
        margin-bottom: 8rem;
    }
}