@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/*eaf1f5*/;
 color: #ffffff;
 font-size: 1.3rem;
 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;
}

em {
 background: #d9dbe6;
 font-style: normal;
}
h2 {
 display: flex;
  justify-content: center;
  align-items: center;
 padding: 0.5em 0;
 margin: 1em 0 2em;
 font-family: 'Teko', sans-serif;
 font-size: 1.5em;
 font-weight: normal;
 overflow-x: hidden;
 text-align: center;
}
h2::before,h2::after {
 flex-grow: 1;
 content: '';
 display: inline-block;
 border-top: solid 2px #FFFFFF;
}
h2::before {
 margin-right: 3rem;
}
h2::after {
 margin-left: 3rem;
}
h2.Nihongo {
 font-size: 1.3em;
}
.right {
 text-align: right;
}

h3 {
 margin: 0.5em;
}

p {
 padding: 0 2em;
}
section {
 margin: 5vh 0 10vh;

}


.wrap {
 margin: 0 auto 10vh;
  width: 60vw;
  min-width: 500px;
  max-width: 1000px;
}



.wrap a {
 color: #939ab6;

}



main {
 display: block;


}




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.5em 1em;
  background: #2b3a7b;
  color: #ffffff;
}







h1 {
 padding: 0.5em 0;
 font-size: 2em;
}
.siteInfo {
 font-size: 1rem;
}

header {
 display: flex;
  justify-content: center;
  align-items: center;
 margin: 10vh 0;
 text-align: center;
}

.mainNav_wrap {
  min-width: 500px;
  max-width: 900px;
 padding: 1em;
 background: #203891;
 color: #ffffff;
}
.mainNav_frame {
 padding: 2em;
 border: solid 2px #ffffff;
}



.mainNav {
 display: flex;
  justify-content: center;
  align-items: center;
 padding-top: 2em;
 margin-top: 2em;
 border-top: solid 2px #ffffff;
 font-family: 'Teko', sans-serif;
}
.mainNav li {
 margin: 0 0.5em;
 font-size: 1.5em;
}
.mainNav li a {
 padding: 0.5em;
 color: #ffffff;
 transition: 0.3s;
}
.mainNav li a:hover {
 color: #9ba4ba;
}

.click {
 display: none;
}





.novelList {
 position: relative;
 padding-top: 10vh;
}
.novelList a {
  color: #051f5c;
}

.novelLong {
 display: flex;
  flex-wrap: wrap;
 margin: 10vh 0;
}
.novelLong li {
 margin: 8vh 0;
 width: 30vw;
  max-width: 500px;
}

.novelLong li a {
 display: flex;
/* ※↑重なり順を指定するのに必要なので削除非推奨 *//*  */
 position: relative;
 margin: 0 2em;
 min-height: 15rem;
 border-radius: 1rem;
 z-index: 1;
}

.novelLong li a::before {
 content: '';
 position: absolute;
  left: 1em;
/* 丸を中央に配置したい場合はleft: calc(50% - 5vw - 1rem);に変更してください。 */
  top: -4em;
 width: 12em;
 height: 12em;
 background: #666666;
 border: solid 1rem #dadee8;
 border-radius: 50%;

 transition: 0.3s ease-out;
}

.novelLong li:nth-child(4n+1) a {
 background: #e9eef2;
}
.novelLong li:nth-child(4n+1) a::before {
 border: solid 1rem #e9eef2;
}
.novelLong li:nth-child(4n+2) a {
 background: #dadee8;
}
.novelLong li:nth-child(4n+2) a::before {
 border: solid 1rem #dadee8;
}
.novelLong li:nth-child(4n+3) a {
 background: #dadee8;
}
.novelLong li:nth-child(4n+3) a::before {
 border: solid 1rem #dadee8;
}
.novelLong li:nth-child(4n+4) a {
 background: #e9eef2;
}
.novelLong li:nth-child(4n+4) a::before {
 border: solid 1rem #e9eef2;
}

.serialInfo {
 padding: 2.5em;
 width: 100%;
 font-size: 1rem;
 z-index: 3;
}
.serialTitle {
 padding: 0.2em 0.5em;
 margin-bottom: 2em;
 background: rgba(255,255,255,0.7);
 font-size: 1.5rem;
 transition: 0.3s ease-out;
}
.serialInfo div {
 padding-top: 2em;
}
.serialInfo div span {
 display: inline;
 background: rgba(255,255,255,0.7);
 line-height: 2em;
 transition: 0.3s ease-out;
}
.novelLong li a:hover .serialInfo div span {
 background: rgba(255,255,255,0.9);

}
.novelLong li a:hover .serialTitle {
 background: rgba(255,255,255,0.9);
}




/* ＊＊＊＊＊　長編画像設定　＊＊＊＊＊ */

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 {
 padding-bottom: 5vh;
 width: 90%;
 text-align: right;
}
.back a {
 display: inline-block;
 padding: 1rem;
  width: 1.5em;
  height: 1.5em;
 background: rgba(0,0,0,0.5);
 border-radius: 50%;
 color: #ffffff;
 font-size: 2em;
 text-align: center;
 transition: 0.3s;
 line-height: 1.5em;
}
.back a:hover {
 background: rgba(0,0,0,0.7);
}



footer {
 display: none;
 padding: 0 0 5vh;
 color: #9ba4ba;
 font-size: 1rem;
 text-align: center;
}
footer p a {
 color: #707d9b;
}