/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap');
/* 全体設定 */

html {
    background: transparent;
    font-size: 62.5%;
}

*{
font-family:"トーキング", 'Shippori Mincho', sans-serif;
color: #FDD2F6;/* ★全体の文字色 */
font-size: 1.4rem;
font-weight: 400;
line-height: 1.8em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

.shippori-mincho-regular {
  font-family: "Shippori Mincho", serif;
  font-weight: 400;
  font-style: normal;
}



body:before{
background: url("ils.png");/* ★背景画像のURL */
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: "";
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -99;
width: 100%;
height: 100vh;
}

body{
width: 100vw;
background-color: #FFF;
overflow-x: hidden;
}

.wrap{
max-width: 700px;
height: auto;
position: relative;
padding: 40px 70px 0;
overflow: hidden;
margin: 50px auto 30px;
}


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

a:hover{
filter: blur(1px);/* ★リンク文字をホバーした時のぼかし具合 */
}

/* 強調文 */
strong{
font-weight: 700;
}

/* サイトタイトル */
h1{
font-size: 2.4rem;
letter-spacing: 0.18em;
writing-mode: vertical-rl;
line-height: 1.6em;
width: fit-content;
margin: 0 auto 50px;
text-align: left;
}

/* 見出し */
h2{
font-size: 1.8rem;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 60px auto 30px;
}

/* 章 */
.chapter{
padding: 25px 30px;
border: 1px solid #F3E7C5;
}

.chapter+.chapter{
padding-top: 50px;
}

.chapter a{
margin-right: 10px;
}

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

input[type="text"],input[type="reset"],input[type="submit"]{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: rgba(255,255,255,0.3);/* ★フォームの背景色 */
border-radius: 0;
color: #532525;/* ★フォームの文字色 */
border: 1px solid #532525;/* ★フォームの枠線の色 */
height:2.0em;
width: 6em;
padding: 2px 5px 1px;
line-height: normal;
}

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

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

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

/* 小説本文 */
.novel-wrap{
max-width: 800px;
margin-top: 20px;
}

.novel{
background-color: rgba(255,255,255,0.45);/* ★本文の背景 */
padding: 40px;
backdrop-filter: blur(12px);
}

.text{
margin: 30px 0 45px;
}

.text-footer{
display: flex;
justify-content: space-between;
padding-top: 30px;
}

.back{
width: 50%;
}

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

.page a{
font-size: 14px;
}

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

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

h1{
font-size: 22px;
width: auto;
margin: 30px auto;
}

.dream input{
line-height: normal;
}

.novel-wrap{
padding: 15px;
}

.novel{
padding: 40px 25px;
}

.text{
margin-top: 20px;
}
}