<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Kaku Gothic New', sans-serif;
color: #FFF;/* ★全体の文字色 */
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;
}

body{
width: 100vw;
background-color: #155A5A;/* ★全体の背景色 */
overflow-x: hidden;
}

.wrap{
max-width: 600px;
min-height: 100vh;
position: relative;
padding: 0 25px 0;
overflow: hidden;
margin: 30px auto 30px;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 50px auto 30px;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 1px dotted #FFF;/* ★リンク文字の下線の色 */
}

a:hover{
color: #C3B19D;/* ★リンク文字をhoverしたときの色 */
border-bottom: 1px dotted #C3B19D;
}

/* 強調文 */
strong{
font-weight: 700;
position: relative;
color: #C3B19D;/* ★強調文の文字色 */
}

strong:after{
position: absolute;
content: '';
width: 100%;
height: 3px;
background-color: #C3B19D;/* ★強調文の下線の色 */
left: 0;
bottom: -3px;;
}

/* ヘッダーメニュー */
header{
width: 100%;
padding: 20px;
}

header p{
font-size: 13px;
text-align: center;
}

.flex{
width: 100%;
display: flex;
justify-content: center;
gap: 10%;
margin-top: 30px;
}

.mv-wrap{
width: 230px;
height: 330px;
border-radius: 9999px;
background-color: transparent;
border: 1px solid #FFF;/* ★TOP画像を囲む線の色 */
position: relative;
}

.mv{
width: 210px;
height: 310px;
border-radius: 9999px;
background-image: url("//static.nanos.jp/upload/m/mellow100/mtr/0/0/20230415223245.jpg");/* ★TOP画像のURL */
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}

.nav{
height: 330px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
}

.nav li a{
font-family: 'Yeseva One', cursive;
color: #FFF;/* ★ヘッダーメニューの文字色 */
font-size: 30px;
letter-spacing: 0em;
line-height: 1.6em;
transition: 0.2s;
border-bottom: none;
}

.nav li a:hover{
color: #4C8686;/* ★ヘッダーメニューをホバーしたときの文字色 */
}

/* 子ページ */
.child-nav{
flex-direction: row;
gap: 20px;
margin-top: 15px;
height: auto;
}

.child-nav li a{
font-size: 24px;
}

/* サイトタイトル */
h1{
font-family: 'Yeseva One', cursive;
font-size: 90px;
letter-spacing: 0em;
line-height: 1em;
color: #C3B19D;/* ★サイトタイトルの文字色 */
text-align: center;
}

/* 見出し */
h2{
font-family: 'Yeseva One', cursive;
color: #C3B19D;/* ★h2見出しの文字色 */
font-size: 22px;
letter-spacing: 0em;
background-image: url('//static.nanos.jp/upload/m/mellow100/mtr/0/0/20230415223254.png');/* ★見出しの前の画像URL */
background-size: 22px 22px; 
background-repeat: no-repeat; 
padding: 0px 0px 10px 30px; 
line-height: 24px;
}

h3{
font-size: 16px;
font-family: 'Yeseva One', cursive;
letter-spacing: 0em;
}

/* テキストボックス */
.box{
background-color: rgba(0,0,0,0.2);/* ★テキストボックスの背景色（黒の半透明） */
width: fit-content;
max-width: 100%;
padding: 10px 20px;
margin: 0 auto;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 70px;
overflow: hidden;
}


/* 入力フォームと送信ボタン */
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;
padding: 0 6px;
border-radius: 0;
border: none;
width: 20em;
height: 2.5em;
color: #262626;/* ★入力フォームの文字色 */
}

textarea{
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
appearance: none;
box-shadow: none;
background: #FFF;
padding: 0 6px;
border-radius: 0;
border: none;
width: 20em;
height: 8.0em;
color: #262626;/* ★入力フォームの文字色 */
}


input:focus, textarea:focus{
border: 1px solid #C3B19D;/* ★フォームフォーカス時の枠線の色 */
outline: none;
height: 2.5em;
}

textarea:focus{
border: 1px solid #C3B19D;/* ★フォームフォーカス時の枠線の色 */
outline: none;
height: 8.0em;
}

input[type="submit"]{
width: auto;
margin-top: 5px;
height: 2.2em;
background-color: #C3B19D;/* ★送信ボタンの背景色 */
color: #155A5A;/* ★送信ボタンの文字色 */
padding: 0 20px 2px;
cursor: pointer;
transition: 0.2s;
font-family: 'Yeseva One', cursive;
border-radius: 9999px;
}

input[type="submit"]:hover{
background-color: #4C8686;/* ★送信ボタンをhoverしたときの背景色 */
}

/* 名前変換フォーム */
.dream{
align-items: center;
}

.dream input{
width: 8em;
height: 30px;
margin-right: 15px;
line-height: normal;
}

.dream input[type="submit"]{
width: auto;
height: 30px;
padding: 0 15px;
line-height: normal;
}

/* 小説一覧 */
.long-title+.long-title{
margin-top: 20px;
}

.long-title a{
font-weight: 700;
font-size: 13px;
}

.long-title p{
font-weight: 400;
font-size: 11px;
}

.long-title:hover{
border-bottom: none;
}

/* フッター */
footer{
text-align: center;
margin-top: 140px;
font-size: 11px;
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin-top: 0;
padding-top: 25px;
}

main{
margin-top: 55px;
}

h1{
font-size: 40px;
}

h2{
font-size: 18px;
background-size: 18px 18px; 
padding: 0px 0px 10px 22px; 
line-height: 18px;
}

h3{
font-size: 13px;
}

.mv-wrap{
width: 160px;
height: 230px;
}

.mv{
width: 140px;
height: 210px;
}

.nav{
height: 230px;
}

.child-nav{
height: auto;
}

.child-nav li a{
font-size: 18px;
}
}

</style>

