@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Teko:500&display=swap');
/*
'Teko' is licensed under the Open Font License.
https://fonts.google.com/specimen/Teko
*/

html {
 background: transparent;
 font-size: 62.5%;
}
body {
 min-height: 100vh;
 background: #ffffff;
 color: #ffffff;
 font-size: 1.1rem;
 font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
 letter-spacing: 0.2em;
 line-height: 180%;
 background: url('../img/1280.jpg') center center / cover no-repeat fixed;
}
a {
 text-decoration: none;
}
ul,ol {
 list-style: none;
}
h2 {
 display: flex;
  justify-content: center;
  align-items: center;
 padding: 0.5em 0;
 margin: 1em 0;
 font-family: 'Teko', sans-serif;
 font-size: 1.5em;
 font-weight: normal;
 letter-spacing: 0.1em;
 overflow-x: hidden;
 text-align: center;
}
h2::before,h2::after {
 flex-grow: 1;
 content: '';
 display: inline-block;
 border-top: solid 2px #cccccc;
}
h2::before {
 margin-right: 2rem;
}
h2::after {
 margin-left: 2rem;
}
h2.Nihongo {
 font-size: 1.2em;
}
h3 {
 margin: 0.5em;
}
em {
  background: #d9dbe6;
  font-style: normal;
 }


p {
 padding: 0 1em;
}
section,.novelList {
 padding-top: 2em;
 margin-bottom: 1em;
}


.wrap {
 margin: 0vh auto 5vh;
  width: 90vw;
  max-width: 500px;
}
.wrap a {
 color: #939ab6;
}


input[type],textarea,button,select {
 border: none;
 color: inherit;
 font-family: inherit;
 font-size: 100%;
 letter-spacing: 0.1em;
}
textarea,input[type="text"] {
  padding: 0.2em;
  border: solid 1px #999999;
}
input[type="submit"] {
  padding: 0.2em 0.5em;
  background: #2b3a7b;
  color: #ffffff;
}





.mainNav {
/* background: #dfe1e7;*/
 color: #2b3a7b;
}


header {
 text-align: center;
}

.mainNav_wrap {
 padding: 1em;
 margin: 15vw auto 0;
  width: 80%;
  max-width: 500px;
 background: #203891;

}
.mainNav_frame {
 padding: 1em;
 border: solid 2px #ffffff;
}

.siteName {
 padding: 1em;
 box-sizing: border-box;
}
h1 {
 padding-bottom: 0.5em;
 font-size: 1.2em;
}
.siteInfo {
 font-size: 0.8rem;
 padding: 1em 1em 0;
 margin-top: 1em;
 border-top: solid 2px #ffffff;
}

.mainNav {
 display: flex;
  justify-content: center;
  align-items: center;
 position: fixed;
  left: 0;
  top: -15vmin;
 padding: 0.5em 0;
 width: 100vw;
 height: 15vmin;
 background: #2b3a7b;
 font-family: 'Teko', sans-serif;
 transition: 0.1s;
 z-index: 4;
}
.mainNav li {
 margin: 0 1em;
}
.mainNav li a {
 padding: 0.5em 0.5em;
 color: #ffffff;
 font-size: 1.5em;
}


/* メニュー開閉 */
.mainNav,.click,.trigger {
 transition: 0.2s;
}

.click {
 display: block;
 position: fixed;
  right: 2em;
  top: 0;
 padding: 1em 2em 0.5em;
 height: 2em;
 background: #2b3a7b;
 border-bottom-left-radius: 1em;
 border-bottom-right-radius: 1em;
 color: #ffffff;

 z-index: 4;
}
.trigger {
 width: 1em;
}
.active .click {
 position: fixed;
  top: 15vmin;

}
.active .trigger {
 transform: rotate(180deg);
}
.active .mainNav {
 position: fixed;
  top: 0;

}

.novelList a {
  color: #051f5c;
}
.novelLong li {
 margin: 20% 0;
}
.novelLong li:last-of-type {
 margin: 20% 0 0;
}
.novelLong li a {
/*  */
 display: flex;
/* ※↑重なり順を指定するのに必要なので削除非推奨 */
 position: relative;
 margin: 2em 0;
 min-height: 10em;
 background: #e9eef2;
 border-radius: 1rem;
 z-index: 1;
}

.novelLong li a::before {
 content: '';
 position: absolute;
  left: 1em/*calc(50% - 5vw - 1rem)*/;
  top: -3em;
 width: 10em;
 height: 10em;
 background: #666666;
 border: solid 1rem #e9eef2;
 border-radius: 50%;
}




.serialInfo {
 padding: 2em;
 width: 100%;
 font-size: 1rem;
 text-align: right;
 z-index: 3;
}
.serialTitle {
 padding: 0.2em 0.5em;
 background: rgba(255,255,255,0.6);
 font-size: 1.2rem;
 transition: 0.3s ease-out;
}
.serialInfo div {
 padding-top: 1em;
}
.serialInfo div span {
 display: inline;
 background: rgba(255,255,255,0.6);
 line-height: 2em;
 transition: 0.3s ease-out;
}

li.linkBox_1 a::before {
 background: url('../img/design54_3.jpg') center 70% / cover no-repeat #9dede5;
}
li.linkBox_2 a::before {
 background: url('../img/design54_4.jpg') center / cover no-repeat #9dede5;
}
li.linkBox_3 a::before {
 background: url('../img/design54_5.jpg') center / cover no-repeat #e9c73c;
}
li.linkBox_4 a::before {
 background: url('../img/design54_13.jpg') center / cover no-repeat #e9c73c;
}
li.linkBox_5 a::before {
 background: url('../img/design54_t.jpg') center / cover no-repeat #e9c73c;
}
li.linkBox_6 a::before {
 background: url('../img/design54_b.jpg') center / cover no-repeat #e9c73c;
}
li.linkBox_7 a::before {
 background: url('../img/design54_se.jpg') center / cover no-repeat #e9c73c;
}





.back {
 position: fixed;
  right: 1em;
  bottom: 1em;
 z-index: 1;
}
.back a {
 display: block;
 padding: 1rem;
  width: 1em;
  height: 1em;
 background: rgba(0,0,0,0.3);
 border-radius: 50%;
 color: #ffffff;
 font-size: 1.2em;
 text-align: center;
 line-height: 1.2em;
}


footer {
 display: none;
 margin: 5vw 0;
 font-size: .9rem;
 color: #bbbbbb;
 text-align: center;
}
footer p a {
 color: #999999;
}


.right {
 text-align: right;
}