* {
  margin:0; padding:0;
}
.header {
  display: table;
  text-align: center;
  width: 100%;
  color: #000000;
  background-color: #87ceeb
}
.flex_test-box1 {
    padding:  0px;             /* 余白指定 */
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.flex_test-item1 {
    padding: 0px;
    color:  #fff;               /* 文字色 */
    margin:  0px;              /* 外側の余白 */
}
 
.flex_test-item1:nth-child(1) {
    flex-basis:  200px;         /* 幅指定 */}
 
.flex_test-item1:nth-child(2) {
    flex-basis:  200px;         /* 幅指定 */}
 
.flex_test-item1:nth-child(3) {
    flex-basis:  200px;         /* 幅指定 */}
 
.flex_test-item1:nth-child(4) {
        flex-basis:  200px;         /* 幅指定 */}
        
.flex_test-item1:nth-child(5) {
        flex-basis:  200px;         /* 幅指定 */}
.part-img {
    background-image:url(door.png);  /* 画像のURLを指定       */
    background-repeat:  no-repeat;                         /* 画像の繰り返しを指定  */              
    background-position:center center;                     /* 画像の表示位置を指定  */
    background-size:contain;                               /* 画像のサイズを指定    */
    width:100%;                                            /* 横幅のサイズを指定    */
    height:400px;
}

.box1{
  width: 500px;
  height: 100px;
  position: relative;
  top: 30px;
  left: 30px;
}
.box2 {
  padding: 0;
  width: 350px;
  position: absolute;
  bottom: 150px;
  right: 30px;  
}
.box3 {
  padding: 0.5em 1em;
  margin: 0;
  width: 300px;
  height: 300px;     /* 高さを制限(※) */
  overflow: scroll;  /* スクロールバーを表示(※) */
  background-color: rgba(220,220,220,0.5);
  border: solid 3px #dcdcdc;/*線*/
  border-radius: 10px;/*角の丸み*/}
.box3 p {
    margin: 0; 
    padding: 0;
}
.box4 {
  margin: 30px auto;
  width: 700px;
  height: 200px;
}
.box4 p {
  text-align: center;
  font-size: 20px;
}
.box5{
  position: relative;
  top: 30px;
  display: flex;
  justify-content: center;
}
.box6,
.box7 {
  width: 500px;
  height: 500px;
}
.box6{
}
.box7{
}
.map{
  text-align: center;
}
.box8{
  position: relative;
  top: 30px;
  text-align: center;
  width: 100%;
}
.box9{
  position: relative;
  top: 30px;
  text-align: center; 
  width: 100%; 
  height: 3000px;
}
.box10{
  position: relative;
  top: 30px;
  text-align: center;
  width: 100%;
  height: 5500px;
}
.box11{
  position: relative;
  top: 30px;
  text-align: center;
  width: 100%;
  height: 5100px;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 40px; 
  color: #000000;
  background-color: rgba(255,255,255,0.5);
  text-align: center;
  font-size: 12px;
  padding: 50px 0;
  border-top: 1px solid #dcdcdc;
}
body {
  color: #696969;
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'  
}
a {
  text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
  color: black;
}
#B{
width:250px;
height:auto;
float:left;
margin-top:30px;
margin-left:30px;
}
#C { 
margin-left:260px;
min-height:580px;
height:auto;
  border:solid #696969 ;
  border-width:0 0 0 1px;  }
.box12{
  position: relative;
  top: 30px;
  text-align: center; 
  width: 100%; 
}
.box13{
  margin-left: 30px;
  height: 580px; 
  }