#page {
    margin: 0 auto;
    width: 1000px;
}
 /* nanmonkstylesq@9不要なマージンをリセット */
#contents {
	display: flex;
}

main {
	width : 820px;
	color : #000;
	background : #0000;
}

#sub1 {
	width : 30px;
	color : #fff;
	background : #0000;
}

#sub2 {
	width : 300px;
	color : #000;
	background : #fff;
}

#d1000 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 1000px;
    color: #fff;
 }




#d900 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 900px;
    color: #fff;
 }

#d800 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 800px;
    color: #fff;
 }

#d700 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 700px;
    color: #fff;
 }

#d600 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 600px;
    color: #fff;
 }


#d500 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 500px;
    color: #fff;
 }


#d400 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 400px;
    color: #fff;
 }


#d300 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 300px;
    color: #fff;
 }


#d200 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 200px;
    color: #fff;
 }


#d100 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 100px;
    color: #fff;
 }



#d90 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 90px;
    color: #fff;
 }




#d80 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 80px;
    color: #fff;
 }


#d70 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 70px;
    color: #fff;
 }


#d60 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 60px;
    color: #fff;
 }



#d50 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 50px;
    color: #fff;
 }


#d40 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid #eff;
    width: 300px;
    height: 40px;
    color: #fff;
 }


#d30 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid;
    width: 300px;
    height: 30px;
    color: #fff;
  }



#d20 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 20px;
    color: #fff;
  }



#d15 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 15px;
    color: #fff;
 }

#d10 { 
	margin: 3px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 10px;
    color: #fff;
 }

#d105 { 
	margin: 1px auto 0;
    padding: 0;
    border: 2px solid ;
    width: 300px;
    height: 5px;
    color: #fff;
 }

#d2 { 
	margin: 8px 111px;
    padding: 1px;
      width: 451px;
    height: 545px;
    color: #fff;115px;
    background: url(oonabe.jpg);
	position: absolute;
 }


#d201 { 
	margin: 1px auto 0;
    padding: 15px solid #eff;
   	border: 1px solid #000;
	width: 475px;
    height: 560px;
    background-color: #eff;
}



#d3 { 
	margin: 8px 108px;
    padding: 1px;
      width: 454px;
    height: 307px;
    color: #fff;115px;
    background: url(syupatu.jpg);
	position: absolute;
 }


#d301 { 
	margin: 1px auto 0;
    padding: 15px solid #eff;
   	border: 1px solid #000;
	width: 475px;
    height: 325px;
    background-color: #eff;
}


#d4 { 
	margin: 8px 96px;
    padding: 1px;
      width: 454px;
    height: 304px;
    color: #fff;115px;
    background: url(yahiraki01.jpg);
	position: absolute;
 }


#d401 { 
	margin: 1px auto 0;
    padding: 15px solid #eff;
   	border: 1px solid #000;
	width: 470px;
    height: 320px;
    background-color: #eff;
}

#d5 { 
	margin: 9px 51px;
    padding: 1px;
      width: 564px;
    height: 371px;
    color: #fff;100px;
    background: url(sinsyaoku01.jpg);
	position: absolute; 
}


#d501 { 
	margin: 1px auto 0;
    padding: 20px solid #eff;
   	border: 1px solid #000;
	width: 588px;
    height: 390px;
    background-color: #eff;
}









#d1011 { 
	margin: 20px 80px;
    padding: 100;
      width: 498px;
    height: 705px;
    color: #fff;100px;
    background: url(20gugu01.jpg);
	position: absolute; 
}

#d1012{ 
	margin: 0px auto 0;
    padding: 10px 10px 10px 10px;
   	border: 1px solid #000;
	width: 530px;
    height: 725px;
    background-color: #eff;
}

#d2011 { 
	margin: 20px 100px;
    padding: 0;
      width: 460px;
    height: 670px;
    color: #fff;100px;
    background: url(jinpaset.jpg);
	position: absolute; 
}

#d2012{ 
	margin: 1px auto 0;
    padding: 200px solid #eff;
   	border: 1px solid #000;
	width: 490px;
    height: 700px;
    background-color: #eff;
}

#d3011 { 
	margin: 15px 110px;
    padding: 0;
      width: 449px;
    height: 401px;
    color: #fff;100px;
    background: url(tansokuchan.jpg);
	position: absolute; 
}

#d3012{ 
	margin: 1px auto 0;
    padding: 10px solid #eff;
    border: 1px solid #000;
    width: 480px;
    height: 420px;
    background-color: #eff;
}




#d4011 { 
	margin: 40px 133px;
    padding: 100;
      width: 407px;
    height: 570px;
    color: #fff;100px;
    background: url(bakehon.jpg);
	position: absolute; 
}

#d4012{ 
	margin: 1px auto 0;
    padding: 20px solid #eff;
    border: 1px solid #000;
    width: 440px;
    height:600px;
    background-color: #eff;
}


#d3111 {
    margin: 1px auto 0;
    padding: 20px; /* 余白のみを指定 */
    border: 1px solid #000; /* 黒い外郭 */
    width: 450px;
    height: 550px;
    background-color: #d0f4ff; /* 薄青の台紙 */
    position: relative; /* 子要素の絶対配置の基準点 */
    overflow: hidden; /* 子要素がはみ出さないように */
}

#d311 {
    margin: 1px 20px; /* 不要なマージンをリセット */
    padding: 0; /* 不要なパディングをリセット */
    width: 451px;
    height: 545px;
    /* color: #fff;100px; は削除または修正 */
    background: url() no-repeat center center / cover; /* 写真を背景画像として中央に配置し、要素全体を覆う */
    position: absolute;
    top: 95%; /* 親要素の上端から50%の位置 */
    left: 39%; /* 親要素の左端から50%の位置 */
    transform: translate(-50%, -50%); /* 要素自身の幅と高さの半分だけ戻し、中央に配置 */
    z-index: 1; /* 台紙の上に表示されるように設定（必要に応じて） */
}


#d4111 {
    margin: 1px auto 0;
    padding: 20px; /* 余白のみを指定 */
    border: 1px solid #000; /* 黒い外郭 */
    width: 456px;
    height: 309px;
    background-color: #d0f4ff; /* 薄青の台紙 */
    position: relative; /* 子要素の絶対配置の基準点 */
    overflow: hidden; /* 子要素がはみ出さないように */
}

#d411 {
    margin: 40px 0px;  /* 不要なマージンをリセット */
    padding: 0; /* 不要なパディングをリセット */
    width: 454px;
    height: 307px;
    /* color: #fff;100px; は削除または修正 */
    background: url() no-repeat center center / cover; /* 写真を背景画像として中央に配置し、要素全体を覆う */
    position: absolute;
    top: 50%; /* 親要素の上端から50%の位置 */
    left: 40%; /* 親要素の左端から50%の位置 */
    transform: translate(-50%, -50%); /* 要素自身の幅と高さの半分だけ戻し、中央に配置 */
    z-index: 1; /* 台紙の上に表示されるように設定（必要に応じて） */
}







#text {
	
	color: #330066;
	font-family: serif;
	font-weight: bold;
 } 

header, footer {
  text-align: center;
  color: #fff;
  background: #003;
}