@charset "utf-8";

/* PC用CSS */

/* 共通設定 */
body {
    color: #000000;
    font-size: 1.5rem;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
h2,h3,.back {
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
h2 {
    margin: 0em 1em;
    font-size: 1.2em;
    color: #a0a0a0;
}
h3 {
    margin: 1em;
    color: #485257;
}
input,textarea,button,select {
    margin-bottom: 1em;
    border: solid .2px #cccccc;
    font-family: inherit;
    font-size: 90%;
    letter-spacing: inherit;
}
.mobile {
    display: none;
}


/* 段落設定 */
p {
    padding: 0 1em;
}
section {
    margin: 5vh 0;
}


/* ページ全般設定 */
main {
    display: block;
    padding: 5vh 0;
    margin: 0 10% 0 30%;
    width: 60%;
    min-width: 600px;
    max-width: 1200px;
    min-height: 100vh;
    background: #ffffff;
}
.wrap-page,.wrap-contents {
    margin:0 auto 5vh;
     width: 80%;
     min-width: 600px;
}
.wrap-page a {
    color: #000000;
    transition: .3s;
}
.wrap-page a:hover {
    color: #a0a0a0;
}

/* フォーム、リストなどの機能に追加すれば余白を揃えられます */
.space {
    padding: 0 1em;
    margin: 3vh 0;
}


/* 小説部分設定 */

/* 名前変換フォーム設定 */
.nameChange {
    text-align: center;
}
.nameChange input[type="text"] {
    padding: .5em;
    margin-right: 1em;
    width: 10em;
}
.nameChange input[type="submit"] {
    padding: .5em 1em;
}


/* 小説部分ナビゲーション設定 */
.contentsNav {
    display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
.contentsNav li a {
    margin: 0 1em;
    color: #cccccc;
}


/* 小説一覧リスト設定 */
.novelList {
    margin: 5vh auto;
    width: 100%;
    box-sizing: border-box;
    columns: 2;
    column-gap: 3em;
}
.novelList ul {
    padding: 1em 0;
    width: 120%;
    min-width: 22em;
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.novelList li {
    margin: .5em;
}
.next-column {
    break-before: column;
    -webkit-break-before: column;
}
li.categoryName {
    margin: 0 0 2em;
    color: #000000;
    text-align: center;
}
.novelList li a {
    color: #000000;
}
.novelList li a:visited {
    color: #000000;
}
.novelList li span,.novelList li div {
    margin: 0 1em;
    color: #000000;
}
.novelList li div {
    font-size: .8em;
}

/* 更新マーク設定 */
.new::after {
    content: 'new';
    margin: 0 .5em;
    color: #678e92;
    font-size: 1rem;
    letter-spacing: 0;
}

/* バナー風リンク設定 */
.banner {
    display: flex;
     justify-content: center;
     align-items: center;
    width: 100%;
     max-width: 300px;
    height: 4em;
    background: #999999;
    text-align: center;
}
a.banner span.bannerTitle {
    padding: .2em 1em;
    background: rgba(255,255,255,.8);
    color: #444444;
}


/* 小説本文設定 */
.wrap-text {
    padding: 0vh 3%;
    margin: 0 auto;
    width: 46%;
    max-width: 1000px;
    min-width: 600px;
    letter-spacing: 0.1em;
    background: #ffffff;
    line-height: 220%;
    font-size: 1.6rem;
    text-align:justify;
}
.wrap-text h4 {
    margin-bottom: 1em;
    text-align: right;
}
.wrap-text h4::after {
    content: '';
    display: block;
    margin: .0em 0;
    width: 100%;
    height: .2rem;
}
.wrap-text aside {
    color: #000000;
    font-size: .8em;
}


/* メールフォーム設定 */
.mail textarea,.mail input[type="text"] {
    padding: .5em;
    width: 60%;
    border: solid .2px #cccccc;
}
.mail textarea {
    height: 5em;   
}


/* ヘッダー設定 */
.mainHeader {
    display: flex;
    justify-content: center;
    position: fixed;
     top: 0;
     left: 0;
    height: 100vh;
    width: 30%;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.siteInfoFrame {
    display: flex;
     flex-direction: column;
     justify-content: center;
    padding: 10vh 5% 0;
    width: 50%;
    background: url('../img/design57_2.jpg') center / cover fixed #dce0e6;
    z-index: 2;
}
.siteInfo {
    padding: 0 1em;
    margin-bottom: 2em;
    text-align: center;
}
.siteInfo span {
    color: #67828f;
    font-size: .9rem;
    text-align: center;
}
h1 {
    position: relative;
    font-size: 1.7em;
}
h1::before {
    content: '';
    display: block;
    position: absolute;
     top: -4em;
     left: calc(50% - 1.5rem);
    padding: 1em 0;
    width: 3rem;
    height: 3rem;
}

.navFrame {
    margin: 0 auto 6em;
    width: 100%;
}
.mainNav {
    display: flex;
     flex-flow: column wrap;
     justify-content: center;
     align-items: center;
    position: relative;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.mainNav li {
    margin: .8em 1em;
    font-size: 1.5em;
}
.mainNav li a {
    padding: 0.5em 1em;
    color: #000000;
    transition: .5s;
}
.mainNav li a:hover {
    background: rgba(204,209,214,.4);
}


/* 戻るボタン設定 */
.back {
    text-align: right;
}
.back a {
    display: inline-block;
    padding: 1em 2em;
    color: #000000;
    cursor: pointer;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.8rem;
}



/* 画面幅1001px～1300px時の調整用 */
@media screen and (max-width:1300px) {
    .mainHeader {
        min-width: 300px;
    }
    .siteInfoFrame {
        padding: 10vh 3% 0;
    }
    .mainNav li a {
        padding: .5em 0;
    }
    main,footer {
        padding: 2em;
        margin-left: 30%;
    }
}