html,body,#content{
    height: 100%;
    width: 100%;
    font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI","Noto Sans Japanese","ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;;
}

h1 a
{
    color: #363636;
}

#home h1{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #FFF;
    margin: 0;
    padding: 1em 0;
}

.map-btn-area{
    z-index: 999;
    position: absolute;
    top: 5em;
    left: 10%;
}

.map-btn-area .btns{
    margin-left: -50%;
}

.ReactModal__Overlay{
    z-index: 9999;
}

.has-text-centered > .button{
    width: 15%;
}

.hide{
    display: none !important;
}

.content h2.area-title
{
    background: #00d1b2;
    color: #FFF;
    text-align: center;
    padding: 8px 0 10px;
    margin: 0;
}

#drop
{
    width: 100%;
}

.dropzone {
    padding: 10px;
    width : 100%;
    height : 200px;
    border : 1px solid #dbdbdb;
    border-radius: 3px;
    max-width: 100%;
}

.drop-button
{
    width: 100%;
    height: 200px;
    max-width: 100%;
}

.th-nowrap th
{
    white-space: nowrap;
}

.arrow{
	position: relative;
	background: #CCC;
	width: 20px;
	height: calc(100% - 24px);
	margin-top: 12px;
	margin-bottom: 12px;
	cursor: pointer;
	border-radius: 3px;
}

.arrow.arrow-half{
	height: calc(50% - 24px);
	margin-top: 12px;
	margin-bottom: 24px;
}

.arrow .icon{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -12px;
	margin-left: -12px;
}

.column.arrow-column{
	margin: 0;
	padding: 0;
}

.login-form{
    margin-top: 5em;
}

#user-dropdown{
    position: absolute;;
    top: 0.45em;
    right: 7em;
}

.mb20{
	margin-bottom: 20px;
}

td.center{
    text-align: center;
}

@media screen and (min-width: 769px), print {
	.column.arrow-column{
	    -webkit-box-flex: 0;
	    -ms-flex: none;
	    flex: none;
	    width: 1%;
	}
}

@media print{
	.area > .columns,
	.area .column{
		width: 100% !important;
		display: block !important;
		page-break-after: always;
	}

	html, body, #content{
		overflow: initial !important;
	}

	#map, #map > div, #mapView, #iframe{
		width: 100% !important;
		height: 30em !important;
	}

	#area, #practice, #survey {
		height: initial !important;
	}

	#history-info{
		overflow: initial !important;
	}

	.area .column.no-print{
		display: none !important;
	}

	.no-print{
		display: none !important;
	}

	.map-image{
		width: calc(100% - 170px) !important;
	}
	.map-image.image-list{
		padding-top: 0 !important;
	}
}