*{margin:0;padding:0}
div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,footer,header,nav{box-sizing:border-box}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{text-decoration:none}
a img{border-style:none}
ul,li{list-style-type:none}

html{
font-size:62.5%
}
body{
background:#eeeeee; /* 背景 */
color:#002f7b; /* 文字色 */
font-size:1.2em; /* 文字の大きさ */
font-family:Verdana,Roboto,'游ゴシック','Yu Gothic','游ゴシック体','YuGothic','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
letter-spacing:1px;
line-height:1.5;
padding:20px;
text-align:center;
overflow-y:scroll;
overflow-wrap:break-word;
word-wrap:break-word
}
a{
color:#d1002f
}
a:hover{
color:#df2e8a
}
/*--------------------------------------------------------
基本
--------------------------------------------------------*/
#wrapper{
margin:0 auto;
width:600px /* 全体の幅・大きさはここで変更 */
}
/*--------------------------------------------------------
上(ヘッダー)
--------------------------------------------------------*/
header{
background:url(image/back03.gif) no-repeat #fff;
border:1px solid;
text-align:right
}
.header-inner{
min-height:120px;
padding:10px
}
/*--------------------------------------------------------
メニュー
--------------------------------------------------------*/
#menu{
padding:20px 0 0;
text-align:center;
width:100%
}
nav li{
display:inline-block;
font-weight:700;
width:20% /* 1つのメニューの幅 100%/20% で一列に5個表示 */
}
nav li a{
background:#009c84;
border:1px solid #fff;
color:#0f2a87;
display:block;
padding:5px 0
}
nav li a:hover{
background:#00a3a2;
color:#d4e166
}
/*--------------------------------------------------------
メイン
--------------------------------------------------------*/
#contents{
text-align:left
}
.block{
background:url(image/back01.gif) repeat-x #fff;
border:1px solid;
margin:10px 0;
padding:30px 10px 10px;
text-align:left
}
#contents a{
text-decoration:underline
}
#contents a img{text-decoration:none}
/*--------------------------------------------------------
下(フッター)
--------------------------------------------------------*/
footer{
margin:10px auto;
padding:10px 20px;
text-align:right
}
.pagetop{
float:left
}
/*--------------------------------------------------------
見出し、枠、線
--------------------------------------------------------*/
h1{
font-size:1.5em;
letter-spacing:4px;
margin-bottom:20px;
text-align:left
}
h2{
background:url(image/line01.png) no-repeat 50% 0;
font-size:1.2em;
margin:.5em 0;
min-height:25px;
text-align:center
}
h3{
background:#a199a0;
border:2px dashed #e3deda;
border-radius:4px;
box-shadow:0 0 0 3px #00a3a2;
color:#fff;
font-size:1em;
margin:20px 0;
padding:4px
}
h1 span,h2 span{
color:#df2e8a
}
dt{
color#df2e8a;
font-weight:700;
clear:both;
float:left;
margin:0 0 5px;
width:150px
}
dd{
border-bottom:1px dashed;
margin:0 0 5px 150px
}
em{
font-weight:700
}
input,textarea{
background:#df2e8a;
border:1px solid;
margin:3px 0;
width:80%
}
textarea{
height:50px
}
hr{
display:block;
border:0;  
border-top:1px solid #ccc;
margin:1em 0;
padding:0;
height:1px
}
.marker{
background:#df2e8a;
padding:1px 5px;
margin:0 3px
}
.dcline{
border-left:8px solid #d7edc2;
margin:5px 0;
padding:3px
}
.textbox{
border:1px dotted;
margin:10px 0;
padding:3px;
text-align:center
}
.title{
color:#f9beb7;
font-size:1.5em;
font-weight:700;
margin:2em 0;
text-align:right
}
.txt{
border-left:1px solid;
margin:1em;
padding:0 0 0 1em
}
.frame{
background:#f9beb7;
border:2px dashed #c9b9a2;
border-radius:4px;
box-shadow:0 0 0 3px #f9beb7,4px 4px 5px #ccc;
padding:5px
}
.cf:before,.cf:after{content:" ";display:table}
.cf:after{clear:both}
/*--------------------------------------------------------
スマホ、タブレット用
横幅600pxで切り替え
--------------------------------------------------------*/
@media screen and (max-width: 600px){
body{font-size:1.5em}
header{position:relative}
h2{background:url(image/line01.png) no-repeat 0 0}
#wrapper{width:100%}
dt{float:none;clear:none;width:auto}
dd{margin-left:20px}
img{max-width:100%;height:auto} /* 画像の縮小表示 */
/*--------------------------------------------------------
スマホ、タブレット用メニュー
--------------------------------------------------------*/
/* メニュー */
#menu{
display:none;
position:absolute; /* 表示位置固定 */
padding:0;
left:0;
z-index:20
}
nav li{
width:100%
}
nav li a{
padding:10px 0
}
/* メニューを開くボタン */
#open {
background:#f9beb7;
display:block;
padding:.5em
}
#open.close {
background:#c9b9a2;
color:#fff
}
}
/* --- ここまでがテンプレの元々のCSS --- */

/* --- 自分の追記 --- */
header {
    background-image: url("https://lobster-box.neocities.org/無題59_20250531213218.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #333;
}
body {
    background-image: url("https://lobster-box.neocities.org/Unknown.jpeg");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed; /* ← スクロールしても固定！ */
    background-size: cover; /* ← 画面にフィットさせる */
    background-color: #000000;
    
    .block {
    text-align: center;
    background-color: #eeeeee; /* ← 好きな色に変えてOK！ */
    padding: 15px;
    border: 5px solid #dddddd;
    border-radius: 10px;
}
}
.header-inner h1 {
    font-size: 32px; /* 文字の大きさ */
    color: #00ccff;  /* 昔っぽい水色 */
    font-family: Verdana, Geneva, sans-serif; /* オールドネット風フォント */
    text-shadow: 1px 1px #000; /* 黒い影で文字が見やすくなる */
    text-align: center; /* 中央寄せ（必要なら） */
}
/* 自己啓発ページ（selfpage用） */
body.selfpage {
    background: url("image/self_bg.png") center top no-repeat;
    background-color: #eeeeee; /* 背景色（ここ好きな色に変えてOK！） */
}

body.selfpage .block {
    background-color: #fafafa; /* ブロック（本文枠）の背景色 */
    border: 2px solid #999999; /* ブロックの枠線（ピンク） */
    padding: 15px;
}
.article-wrapper {
  position: relative;
}

.series-illust {
  position: absolute;
  top: 500px;  /* 縦位置、調整OK */
  left: 20px;  /* 左に寄せたい場合は小さめ、もっと右寄せたい場合は増やす */
  z-index: 10; /* 他の要素の上に出す */
}

.series-illust {
  width: 150px;  /* イラストサイズ自由に調整 */
  height: auto;
}