/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;600&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Kaku Gothic Antique', sans-serif;
color: #262626;/* ★全体の文字色 */
font-size: 12px;
font-weight: 400;
letter-spacing: 0.1em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
-webkit-appearance: none;
}

body{
width: 100vw;
background: #FFF;/* ★全体の背景色 */
overflow-x: hidden;
}

.wrap{
max-width: 700px;
min-height: 100vh;
position: relative;
padding: 60px 0 0;
overflow: hidden;
margin: 0 auto;
background-color: #FFF;/* ★メインコンテンツの背景色 */
}

/* リンク文字 */
a{
color: #B59C36;/* ★リンク文字の色 */
transition: 0.2s;
}

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

/* 強調文 */
strong{
font-weight: 600;
color: #D82B4C;/* ★強調文の文字色 */
}

/* 分岐ページ見出し */
h1{
font-size: 17px;
letter-spacing: 0.25em;
font-weight: 600;
margin-bottom: -30px;
}

h2{
font-size: 12px;
padding-bottom: 5px;
margin-top: 10px;
}

/* 分岐ページタイトル部分 */
.top{
width: 100%;
text-align: center;
padding: 0 25px;
}

.line{
display: flex;
align-items: center;
justify-content: center;
margin: 50px auto;
}

.line img{
width: 15px;
}

/* 名前変換フォーム */
form{
display: flex;
align-items: center;
justify-content: start;
width: 100%;
flex-wrap: wrap;
gap: 10px;
}

input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #F8F8F8;/* ★フォームの背景色 */
border-radius: 0;
color: #262626;/* ★フォームの入力文字色 */
border:1px solid #F8F8F8;
width: 30em;
height:2.0em;
}

input:focus, textarea:focus{
outline: none;
height:2.0em;
}

input[type="submit"]{
width: auto;
background-color: #B59C36;/* ★登録ボタンの背景色 */
border: none;
color: #FFF;/* ★登録ボタンの文字色 */
padding: 0 10px;
cursor: pointer;
transition: 0.2s;
}

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

.dream input{
width: 8em;
margin-right: 10px;
padding: 2px 5px 1px;
line-height: normal;
}

.dream input[type="submit"]{
width: auto;
padding: 0px 10px;
line-height: normal;
}


/* 分岐ページのメインコンテンツ*/
main{
width: 100%;
text-align: center;
margin: 80px auto 100px;
padding: 0 25px;
}

.novel-list{
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 50px 5%;
justify-content: space-between;
}

.novel-list li{
width: 30%;
}

.novel-list .stone{
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
background-color: #F8F8F8;/* ★宝石の背景の丸の色 */
transition: 0.3s;
}

.novel-list .stone:hover{
background-color: transparent;
}

.novel-list img{
height: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

.novel-list p{
line-height: 1.2em;
}

.novel-list span{
font-size: 10px;
color: gray;
}


/* 小説表紙ページ */
.light{
width: 120px;
display: block;
margin: 0 auto 10px;
}

.stone-l{
width: 120px;
}

.novel-ttl{
font-size: 18px;
margin: 30px auto 10px;
color: #B59C36;
writing-mode: vertical-rl;
}

.text{
padding-bottom: 20px;
}

.chapter{
width: 80%;
margin: 0 auto;
text-align: left;
}

.chapter+.chapter{
margin-top: 40px;
}

.chapter h2{
background: repeating-linear-gradient(135deg, #EFEFEF, #EFEFEF 1px, #fff 1px, #fff 4px);/* ★章タイトルの背景のストライプ */
padding: 6px 20px;
margin-bottom: 15px;
font-weight: 600;
}

/* 小説本文 */
h3{
font-size: 16px;
font-weight: 600;
background: repeating-linear-gradient(135deg, #EFEFEF, #EFEFEF 1px, #fff 1px, #fff 4px);/* ★小説タイトルの背景のストライプ */
padding: 8px 25px;
margin-bottom: 40px;
}

.novel{
text-align: left;
margin-top: 20px;
}

.novel-text{
padding-bottom: 60px;
}

.page{
border-top: 1px #262626 dotted;/* ★ページ送りリンクの上の点線の色 */
padding-top: 40px;
text-align: center;
}

/* フッター */
footer{
text-align: center;
font-size: 11px;
margin-bottom: 50px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
padding: 60px 20px 0;
}

.top{
padding: 0;
}

main{
margin-top: 60px;
padding: 0;
}

.dream input{
line-height: normal;
}

.novel-list{
gap: 50px 3%;
}

.novel-list li{
width: 46%;
}

.novel-cover{
padding-top: 20px;
}

.novel-cover main{
padding: 0 10px;
}

.light{
width: 80px;
}

.stone-l{
width: 80px;
}

.chapter{
width: 100%;
}
}