.infobox{
     margin : 30px ;
     padding : 20px ;
     max-width: 100%;
     border-radius:22px;
     background-color : lightgray ;
     border: solid 1px #ccc;
     box-shadow: 2px 3px 5px -2px #ddd inset;/*テキストエリア内にシャドウ*/
}

.table-wrap {
  overflow-x: scroll;
  overflow-y: scroll;
  height: 800px;
     max-width: 100%;
}

.zonepic{
	max-width: 100%;
	width: 300px;
	height: auto;
}
.img_box{
	display:table-cell;
}

img {
  max-width: 100%;
  height: atuo;
}

.mapwindow{
  margin : 30px ;
  padding : 20px ;
  max-width: 100%;
  max-height: 40%;
  background-color : lightgray ;
}


#place{
	display: inline-block;
	width: 400px;
	max-width: 80%;
	padding: 0.5em;
	margin: 0.5em 0;
	height: calc( 1.8em * 1 );
	line-height: 1.8;
	font-size: 14px;
  border: solid 1px #ccc;
	box-shadow: 2px 3px 5px -2px #ddd inset;/*テキストエリア内にシャドウ*/
	background: #fff;/*内側のシャドウはbackgroundの初期化が必要*/
	border-radius:6px;
  }

  #mapid{
    width: 1000px;
    height: 400px;
    padding: 0.5em;
    margin: 0.5em 0;
    border: solid 2px #ccc;
    box-shadow: 2px 3px 5px -2px #ddd inset;/*テキストエリア内にシャドウ*/
    background: #fff;/*内側のシャドウはbackgroundの初期化が必要*/
    border-radius:20px;
  }

  #date, #hour, #pigmature, #pigkid{
    display: inline-block;
    width: 200px;
    max-width: 30%;
    padding: 0.5em;
    margin: 0.5em 0;
    height: calc( 1.8em * 1 );
    line-height: 1.8;
    font-size: 14px;
    border: solid 1px #ccc;
    box-shadow: 2px 3px 5px -2px #ddd inset;/*テキストエリア内にシャドウ*/
    background: #fff;/*内側のシャドウはbackgroundの初期化が必要*/
    border-radius:6px;
    }

  #date, #hour, #pigmature, #pigkid{
    display: inline-block;
    width: 200px;
    max-width: 50%;
    padding: 0.5em;
    margin: 0.5em 0;
    height: calc( 1.8em * 1 );
    line-height: 1.8;
    font-size: 14px;
    border: solid 1px #ccc;
    box-shadow: 2px 3px 5px -2px #ddd inset;/*テキストエリア内にシャドウ*/
    background: #fff;/*内側のシャドウはbackgroundの初期化が必要*/
    border-radius:6px;
    }

    #purpose{
      display: inline-block;
      width: 400px;
      max-width: 95%;
      padding: 0.5em;
      margin: 0.5em 0;
      height: calc( 1.8em * 4 );
      line-height: 1.8;
      font-size: 14px;
      border: solid 1px #ccc;
      box-shadow: 2px 3px 5px -2px #ddd inset;/*テキストエリア内にシャドウ*/
      background: #fff;/*内側のシャドウはbackgroundの初期化が必要*/
      border-radius:6px;
      }

/* =============== leaflet =============== */

      .leaflet-popup-content-wrapper,
      .leaflet-popup-tip {
        background: black;
        border-color: gray;
      }
  
      .leaflet-popup-content,
      a.leaflet-popup-close-button {
        color: black !important;
        font: 12pt monospace;
      }
  
      .leaflet-popup-content-wrapper {
        border-width: 3px;
        border-style: solid;
      }
  
      .leaflet-popup-tip-container {
        margin-top: -3px;
        height: 23px;
      }
  
      .leaflet-popup-tip {
        border-style: solid;
        border-width: 0 3px 3px 0;
      }