@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

/*common*/

html {
    height: 100%;
}

body {
    color: #fff;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
    font-size: clamp(10px, 16 / 1200 * 100vw, 16px);
    font-weight: 200;
    font-style: normal;
    line-height: 2;
    line-break: strict;
    word-break: break-all;
    text-align: justify;
    text-justify: distribute;
    min-height: 100vh;
    position: relative;
    background: url(../images/common/bg.jpg);
}

a:link {
    text-decoration: none;
    color: #f30;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
}

a:visited {
    text-decoration: none;
    color: #f30;
}

a:hover {
    text-decoration: none;
    opacity: 0.7;
}

p:not(:last-child) {
    margin-bottom: 1.5em;
}

/*PC--------------------------------------------------------------------------------------*/


/*BG*/

.bg-wrap {
    position: fixed;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}

.bg-wrap .bg-pic {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 64.28571%;
    position: relative;
    width: 100%;
    background: url("../images/common/bgpic.png") no-repeat;
    background-size: cover;
    display: block;
}

/*header*/

.header-wrap {
    max-width: 1230px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
}

.header-wrap .heade-base {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 37.5%;
    position: relative;
    width: 100%;
    display: block;
    background: url(../images/common/headerBG.png) no-repeat;
    background-size: cover;
}

.header-wrap .heade-base.novel-header {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 37.5%;
    position: relative;
    width: 100%;
    display: block;
    background: url(../images/novel/headerBG.png) no-repeat;
    background-size: cover;
}

.header-wrap .heade-base .title-pos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: titleFadeIn 2s ease 0s 1 normal;
    -webkit-animation: titleFadeIn 2s ease 0s 1 normal;
    z-index: 10;
}

@keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes titleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

    50% {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-wrap .heade-base .title-pos h1 {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 37.5%;
    position: relative;
    width: 100%;
    background: url("../images/common/headerTitle.png") no-repeat;
    background-size: cover;
    display: block;
    text-indent: -9999px;
}

.header-wrap .heade-base .title-pos h1.novel-title {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 37.5%;
    position: relative;
    width: 100%;
    background: url("../images/novel/headerTitle.png") no-repeat;
    background-size: cover;
    display: block;
    text-indent: -9999px;
}

.header-wrap .heade-base .text-pos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    animation: textFadeIn 2s ease 0s 1 normal;
    -webkit-animation: textFadeIn 2s ease 0s 1 normal;
    z-index: 10;
}

@keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

    50% {
        opacity: 0;
        transform: translateY(10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes textFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

    50% {
        opacity: 0;
        transform: translateY(10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-wrap .heade-base .text-pos .header-text {
    top: 0px;
    left: 0px;
    height: 0;
    padding-top: 37.5%;
    position: relative;
    width: 100%;
    background: url("../images/common/headerText.png") no-repeat;
    background-size: cover;
    display: block;
    text-indent: -9999px;
}

.header-wrap .header-read {
    color: #fc0;
    text-align: center;
    font-size: 1.4em;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}

/*intro*/

.intro-wrap {
    max-width: 1230px;
    width: 100%;
    margin: 70px auto;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
}

.intro-wrap .intro-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.intro-wrap .intro-box .cover01 {
    width: 17%;
}

.intro-wrap .intro-box .cover02 {
    width: 17%;
}

.intro-wrap .intro-box .cover01 img,
.intro-wrap .intro-box .cover02 img {
    width: 100%;
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}

.intro-wrap .intro-box .intro-text {
    width: 48%;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 0 1em;
    box-sizing: border-box;
}

.intro-wrap .intro-box .intro-text .caution::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    content: "\f071";
    font-weight: bold;
    color: #fc0;
    font-size: 2em;
}

/*content*/

.cc01 {
    color: #fc0;
}

.cc02 {
    color: #0048ff;
}

.link-btn{
    margin: 70px auto;
    max-width: 600px;
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
}

.link-btn a{
    background: #333b75;
    color: #fff;
    border-radius: 100px;
    padding: 0.5em;
    font-size: 1.2em;
    text-align: center;
    display: block;
    overflow: hidden;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    box-sizing: border-box;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    font-family: "Noto Serif JP", serif;
}

/*bord*/

.bord-wrap {
    max-width: 630px;
    width: 100%;
    margin: 70px auto;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
}

.bord-wrap .bord {
    background: url(../images/content/bordBG.jpg) no-repeat top center;
    background-size: cover;
    padding: 30px 30px 60px 30px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}

.bord-wrap .bord h4 {
    font-size: 1em;
    margin-bottom: 1em;
}

.bord-wrap .bord h4 span.name {
    font-size: 1.2em;
    color: #387a14;
    vertical-align: baseline;
}

.bord-wrap .bord p {
    margin-left: 5em;
}

.bord-wrap .bord .bord-pic {
    width: 100px;
}

.bord-wrap .bord .bord-pic img {
    width: 100%
}

/*note*/

.note-wrap {
    max-width: 1260px;
    width: 100%;
    margin: 70px auto;
    padding: 0 30px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    font-size: 0.9em;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}

/*app*/

.app-wrap {
    max-width: 600px;
    width: 100%;
    margin: 70px auto;
    box-sizing: border-box;
    position: relative;
    background: #e10002;
    padding: 30px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: 1.5;
}

.app-wrap .app-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.app-wrap .app-box .icon-kadokawa {
    width: 95px;
    padding-right: 15px;
    box-sizing: border-box;
}

.app-wrap .app-box .icon-app {
    width: 314px;
}

.app-wrap .app-box .icon-app p {
    margin-bottom: 1em;
    line-height: 1;
    text-align: center;
}

.app-wrap .app-box .icon-kadokawa img,
.app-wrap .app-box .icon-app img {
    width: 100%;
}

.app-wrap .app-box .icon-app .icon-wrap {
    display: flex;
    flex-wrap: wrap;
}

.app-wrap .app-box .icon-app .icon-wrap .app {
    width: 136px;
    margin-right: 10px;
}

.app-wrap .app-box .icon-app .icon-wrap .gp {
    width: 168px;
}

.app-wrap aside {
    margin-top: 30px;
}

.app-wrap aside h5 {
    color: #fc0;
    margin-bottom: 0.5em;
}

.app-wrap aside p {
    font-size: 0.8em;
}

/*pw*/

.pw-wrap {
    max-width: 660px;
    width: 100%;
    margin: 70px auto;
    box-sizing: border-box;
    position: relative;
    padding: 0 30px;
}

form {
    margin: 0;
    padding: 0;
}

input {
    display: block;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

input[type='button'] {
    background: #333b75;
    color: #fff;
    border-radius: 100px;
    padding: 0.5em;
    font-size: 1.2em;
    text-align: center;
    display: block;
    overflow: hidden;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    border: 2px solid #fff;
    box-sizing: border-box;
    -webkit-transition: all 500ms 0s ease;
    transition: all 500ms 0s ease;
    font-family: "Noto Serif JP", serif;
}

input[type='button']:hover {
    opacity: 0.7;
    cursor: pointer;
}

/*novel*/

.novel-wrap {
    max-width: 660px;
    width: 100%;
    margin: 0 auto 70px auto;
    padding: 30px;
    box-sizing: border-box;
    position: relative;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.5);
}


/*footer*/

.footer-bg {
    background: #000;
    width: 100%;
    box-sizing: border-box;
}

.footer-bg .footer-wrap {
    max-width: 1230px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    padding: 70px 15px;
    text-align: center;
    font-weight: 400;
    font-size: 0.9em;
    font-family: "Noto Sans JP", sans-serif;
}

.footer-bg .footer-wrap .sns ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin-bottom: 1.5em;
}

.footer-bg .footer-wrap .sns ul li {
    width: 50px;
    margin: 0 5px;
}


.footer-bg .footer-wrap .sns ul li img {
    width: 100%;
}

/*fade*/

.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s, visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

/*RESPONSIVE--------------------------------------------------------------------------------------*/

@media only screen and (max-width: 1200px) {}



@media only screen and (max-width: 1000px) {}

/*MOBILE--------------------------------------------------------------------------------------*/

@media only screen and (max-width: 767px) {


    body {
        font-size: clamp(10px, 14 / 375 * 100vw, 14px);
    }

    span.br::before {
        content: "\A";
        white-space: pre;
    }

    /*BG*/

    .bg-wrap .bg-pic {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 150%;
        position: relative;
        width: 100%;
        background: url("../images/common/bgpic.png") no-repeat top 0 right 70%;
        background-size: cover;
        display: block;
    }

    /*header*/

    .header-wrap .heade-base {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 137.5%;
        position: relative;
        width: 100%;
        display: block;
        background: url(../images/common/headerBG2.png) no-repeat;
        background-size: cover;
    }

    .header-wrap .heade-base.novel-header {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 137.5%;
        position: relative;
        width: 100%;
        display: block;
        background: url(../images/novel/headerBG2.png) no-repeat;
        background-size: cover;
    }

    .header-wrap .heade-base .title-pos h1 {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 137.5%;
        position: relative;
        width: 100%;
        background: url("../images/common/headerTitle2.png") no-repeat;
        background-size: cover;
        display: block;
        text-indent: -9999px;
    }

    .header-wrap .heade-base .title-pos h1.novel-title {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 137.5%;
        position: relative;
        width: 100%;
        background: url("../images/novel/headerTitle2.png") no-repeat;
        background-size: cover;
        display: block;
        text-indent: -9999px;
    }

    .header-wrap .heade-base .text-pos .header-text {
        top: 0px;
        left: 0px;
        height: 0;
        padding-top: 137.5%;
        position: relative;
        width: 100%;
        background: url("../images/common/headerText2.png") no-repeat;
        background-size: cover;
        display: block;
        text-indent: -9999px;
    }

    .header-wrap .header-read {
        color: #fc0;
        text-align: center;
        font-size: 1.2em;
        -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
        -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
        text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    }

    /*intro*/

    .intro-wrap {
        max-width: 1230px;
        width: 100%;
        margin: 7vh auto;
        padding: 0 15px;
        box-sizing: border-box;
        position: relative;
    }

    .intro-wrap .intro-box .cover01 {
        width: 50%;
        order: 1;
        padding: 0 2vw;
        box-sizing: border-box;
    }

    .intro-wrap .intro-box .cover02 {
        width: 50%;
        order: 2;
        padding: 0 2vw;
        box-sizing: border-box;
    }

    .intro-wrap .intro-box .intro-text {
        width: 100%;
        order: 3;
        padding-top: 5vh;
    }

    /*content*/

    .link-btn{
        margin: 7vh auto;
        max-width: 600px;
        width: 100%;
    }

    /*bord*/

    .bord-wrap {
        width: 100%;
        margin: 7vh auto;
        padding: 0 15px;
        box-sizing: border-box;
        position: relative;
    }

    .bord-wrap .bord p {
        margin-left: 2em;
    }

    /*app*/

    .app-wrap {
        max-width: 600px;
        width: 100%;
        margin: calc(7vh + 40px) auto 0 auto;
        box-sizing: border-box;
        position: relative;
        background: #e10002;
        padding: 1px 30px 5vh 30px;
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 400;
        line-height: 1.5;
    }

    .app-wrap .app-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: -40px;
        flex-direction: column;
    }

    .app-wrap .app-box .icon-kadokawa {
        width: 80px;
        padding-right: 0;
        box-sizing: border-box;
        margin-bottom: 5vh;
    }

    .app-wrap aside {
        margin-top: 5vh;
    }

    .app-wrap aside h5 {
        color: #fc0;
        margin-bottom: 0.5em;
    }

    .app-wrap aside p {
        font-size: 0.9em;
    }

    /*pw*/

.pw-wrap {
    max-width: 660px;
    width: 100%;
    margin: 7vh auto;
    box-sizing: border-box;
    position: relative;
    padding: 0 30px;
}

    /*novel*/

    .novel-wrap {
        max-width: 630px;
        width: 100%;
        margin: 0 auto 7vh auto;
        padding: 7vh 30px;
        box-sizing: border-box;
        position: relative;
        background: rgba(0, 0, 0, 0.5);
    }

    /*note*/

.note-wrap {
    max-width: 1230px;
    width: 100%;
    margin: 7vh auto;
    padding: 0 30px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    font-size: 0.9em;
    -moz-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    -webkit-text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    text-align: left;
}


    /*footer*/

    .footer-bg .footer-wrap {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        padding: 5vh 30px;
        font-weight: 400;
        font-size: 0.9em;
        font-family: "Noto Sans JP", sans-serif;
    }

}