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

/* 全体設定 */
*{
font-family: 'Shippori Mincho', serif;
color: #454545;/* ★全体の文字色 */
font-size: 13px;
font-weight: 400;
letter-spacing: 0.07em;
line-height: 2em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
-webkit-appearance: none;
}

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

.wrap{
max-width: 800px;
height: auto;
padding: 40px;
margin: 0 auto;
}

.bg{
width: 100%;
padding: 10px;
border: 4px solid #454545;/* ★ストライプ背景の太い枠線 */
background: repeating-linear-gradient(135deg, #454545 0, #454545 1px, #FFF 1px, #FFF 9px);/* ★ストライプの色 */
}

.inner{
width: 100%;
background-color: #FFF;/* ★コンテンツ部分の背景色 */
padding: 40px 10% 0;
border: 2px solid #454545;/* ★ストライプ背景の内側の枠線 */
}

/* リンク文字 */
a{
transition: 0.2s;
}

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

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

p{
text-align: center;
}

/* 見出し */
h1{
font-family: 'Dancing Script', 'Shippori Mincho', serif;
font-size: 50px;/* ★タイトルの文字サイズ */
line-height: 1.5em;
text-align: center;
padding-bottom: 20px;
}

h2{
font-family: 'Dancing Script', 'Shippori Mincho', serif;
font-size: 16px;/* ★章の見出しの文字サイズ */
margin-bottom: 15px;
position: relative;
display: inline-block;
font-weight: 600;
}

h2:before,h2:after{
content: '';
width: 7px;
height: 7px;
background-color: #454545;/* ★章見出し横のダイヤアイコンの色 */
position: absolute;
top: 10px;
transform: rotate(45deg);
}

h2:before{
left: -25px;
}

h2:after{
right: -25px;
}

h3{
font-family: 'Dancing Script', 'Shippori Mincho', serif;
font-size: 16px;/* ★各話タイトルの文字サイズ（本文画面） */
font-weight: 600;
padding: 40px 0 30px;
text-align: center;
}

/* イラスト画像 */
.top img{
width: 50px;/* ★イラスト画像のサイズ */
display: block;
margin: 0 auto;
}

/* ボタン */
.btn{
padding-top: 30px;
text-align: center;
}

.btn a{
width: 140px;
height: 40px;
line-height: 36px;
font-family: 'Dancing Script', 'Shippori Mincho', serif;
font-size: 18px;
text-align: center;
vertical-align: middle;
display: inline-block;
background-color: #F7F5EF;/* ★名前変換ボタンの背景色 */
margin: 0 12px;
border: 1px solid #454545;
}

.btn a:hover{
background-color: #E5E1D5;/* ★名前変換ボタンをホバーした時の背景色 */
color: #454545;
}

/* 前のページに戻るリンク */
.back{
font-family: 'Dancing Script', 'Shippori Mincho', serif;
font-size: 18px;
text-align: center;
display: inline-block;
margin-bottom: 20px;
}

/* 名前変換フォーム */
.dream{
text-align: center;
}

.dream span{
font-family: 'Dancing Script', 'Shippori Mincho', serif;
font-size: 24px;
padding-bottom: 15px;
display: block;
}

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

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: #FFF;/* ★名前変換フォームの背景色 */
border-radius: 0;
color: #262626;
border:1px solid #454545;/* ★名前変換フォームの枠線の色 */
height:2.0em;
width: 7em;
margin-right: 10px;
padding: 2px 5px 1px;
line-height: normal;
}

input:focus{
outline: none;
height:2.0em;
background-color: #F5F5F5;/* ★名前変換フォームフォーカス時の背景色 */
}

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

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

/* 章 */
.chapter{
width: 80%;
margin: 80px auto 0;
text-align: center;
}

.chapter a{
border-top: 1px solid #454545;/* ★各話リンクの上側の罫線 */
border-bottom: 1px solid #454545;/* ★各話リンクの下側の罫線 */
height: 35px;
line-height: 35px;
display: block;
margin-bottom: -1px;
}


/* 小説本文 */
.text{
text-align: left;
}

.page{
font-family: 'Dancing Script', 'Shippori Mincho', serif;
padding: 60px 0 40px;
display: flex;
gap: 30px;
font-size: 18px;
justify-content: center;
color: #A0A0A0;
}

.page a{
font-family: 'Dancing Script', 'Shippori Mincho', serif;
font-size: 18px;
}

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

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

.bg{
padding: 5px;
}

.inner{
padding: 40px 5% 0;
}

h1{
font-size: 32px;
}

h2{
font-size: 14px;
}

.top img{
width: 30px;
}

.btn a{
width: 110px;
font-size: 16px;
}
}

</style>