@charset "UTF-8";

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;600&display=swap');

/* 全体設定 */
*{
font-family: 'Noto Serif JP', serif;
color: #454545;/* ★全体の文字色 */
font-size: 12px;
font-weight: 200;
letter-spacing: 0.05em;
line-height: 1.9em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
width: 100vw;
overflow-x: hidden;
}

.wrap{
max-width: 800px;
min-height: 100vh;
position: relative;
padding: 0 70px;
overflow: hidden;
margin: 0 auto 30px;
}

/* リンク文字 */
a{
border-bottom: 1px solid #C7C003;/* ★リンク文字の下線の色 */
transition: 0.2s;
}

a:hover{
color: #C7C003;/* ★リンクをホバーした時の文字色 */
}

/* 強調文 */
strong{
font-weight: 600;
border-bottom: 2px solid #454545;/* ★強調文の下線の色 */
}

/* サイトタイトル */
.top,.list{
width: 200px;
background-color: rgba(255,255,255,0.8);/* ★半透明の白背景 */
margin: 0 auto 40px;
padding: 40px 15px;
position: relative;
}

.top:after,.list:after{
content: '';
position: absolute;
padding: 5px;
background-color: transparent;
border: 1px solid #454545;/* ★半透明の白背景の外枠線 */
width: 100%;
height: 100%;
top: -5px;
left: -5px;
z-index: -1;
}

.caption{
color: #989898;/* ★タイトル下のグレーの説明文 */
text-align: center;
padding-top: 8px;
}

.dream{
text-align: center;
padding-top: 15px;
}

.dream a{
border-bottom: none;
color: #C7C003;/* ★name changeのリンク文字色 */
}

.dream a:hover{
opacity: 0.5;/* ★name changeのリンク文字をホバーした時の透明度 */
}

/* 見出し */
h1{
font-size: 14px;
letter-spacing: 0.2em;
text-align: center;
}

h2{
font-size: 11px;
font-weight: 600;
padding: 0 0 5px;
margin-bottom: 15px;
text-align: center;
position: relative;
}

h2:before,h2:after{
content: '';
width: 4px;
height: 4px;
border-top: solid 1px #454545;
border-right: solid 1px #454545;
position: absolute;
left: 48.35%;
transform: rotate(135deg);
}

h2:before{
top: 24px;
}

h2:after{
top: 28px;
}

h3{
font-size: 15px;
text-align: center;
padding-bottom: 20px;
}

/* 章一覧 */
.chapter+.chapter{
padding-top: 40px;
}

.list a{
display: block;
width: fit-content;
margin: 0 auto 5px;
}

.back a{
margin-top: 50px;
}

/* 名前変換フォーム */
form{
text-align: center;
padding-top: 20px;
}

input[type="text"],input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;/* ★フォームの背景色 */
border-radius: 0;
border: 1px solid #454545;/* ★フォームの枠線の色 */
height:30px;
width: 8em;
margin: 4px auto;
padding: 2px 5px 1px;
line-height: normal;
}

input:focus{
outline: none;
height:30px;
}

input[type="submit"]{
width: auto;
background-color: #454545;/* ★OKボタンの背景色 */
border: none;
color: #FFF;/* ★OKボタンの文字色 */
font-size: 11px;
padding: 0 10px;
cursor: pointer;
line-height: normal;
transition: 0.2s;
}

input[type="submit"]:hover{
background-color: #C7C003;/* ★OKボタンをホバーした時の背景色 */
}

/* 小説本文 */
.novel{
width: 100%;
margin: 60px auto;
}

.text{
margin: 40px 0;
line-height: 2.0em;
font-size: 13px;
}

.page{
text-align: center;
width: 100%;
padding-top: 20px;
border-top: 1px solid #454545;/* ★ページ送りボタンの上の線 */
}

/* フッター */
footer{
text-align: center;
margin: 30px auto;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
body:before{
background-position: center -80px;
background-size: 440px;
}

.wrap{
padding: 0 30px;
}

h3{
font-size: 14px;
}

.text{
margin: 20px 0 40px;
}
}