@media screen and (max-width: 750px) {
	@media screen and (max-height: 800px) {
		html, body {
			height: 82vh;
		}
	}
	@media screen and (min-height: 801px) {
		html, body {
			height: 82vh;
		}
	}
	html, body {
		width: 100vw;
		margin: 0;
		background-color: #f5f3ee;
		font-family: 'Avenir','Arial','ヒラギノ角ゴシック','Hiragino Sans', 
sans-serif;
	}
	footer {
		align-self: flex-end;
		margin-right: 1em;
		margin-top: -30px;
	}
	::-webkit-scrollbar {
		width: 10px;
	}
	::-webkit-scrollbar-track {
		background-color: #102f30;
		border: none;
		border-radius: 10px;
		box-shadow: inset 0 0 2px #102f30;
	}
	::-webkit-scrollbar-thumb {
		background-color: #9bb085;
		border-radius: 10px;
		box-shadow: none;
	}

	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.menu {
		width: 90%;
		height: 90%;
	}
	.cat {
		background-image: url("../img/bg.png");
		background-position: bottom center;
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.bl_block {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		top: 0;
		left: 0;
	}
	@media screen and (max-height: 700px) {
		.bl_block {
			justify-content: end;
		}
	}
	@media screen and (min-height: 701px) {
		.bl_block {
			justify-content: center;
		}
	}

	/*--- balloon welcome ---*/
	.bl_welcome {
		width: 13em;
		height: 5em;
		line-height: 1.3em;
	    border-radius: 5em;
	    text-align: center;
	    padding: 3px 11px;
	    display: inline-block;
	    position: relative;
		background-color: #5f7dab;
		border: 2px solid #fff;
		margin-right: 10%;
	}
	.bl_welcome > p{
		font-size: 1.2em;
		font-weight: bold;
		color: #fff;
		padding: 0.1em 0.5em;
	}
	.bl_welcome:after {
	    content: "";
	    position: absolute;
	    top: 85%;
	    left: 33%;
	    margin-left: 0.5em;

	    border: 1em solid transparent;
	    border-top: 3em solid #5f7dab;
	    transform: rotate(-30deg);
	}

	/*--- balloon menu common ---*/
	.balloon {
		width: 8em;
		height: 3em;
		line-height: 1em;
	    border-radius: 5em;
	    text-align: center;
	    padding: 3px 11px;
	    display: inline-block;
	    position: relative;
		background-color: #8fdad2;
		border: 2px solid #fff;
	}
	.balloon:hover {
		transition-duration: 0.15s;
	    background-color: #f0a57f;
	}
	.balloon:hover {
	    cursor: pointer;
	}
	.balloon_text {
		font-size: 1.2em;
		font-weight: bold;
		color: #066;
		text-shadow:
			2px 2px 1px #fff
			, -2px 2px 1px #fff
			, 2px -2px 1px #fff
			, -2px -2px 1px #fff
			, 2px 0px 1px #fff
			, 0px 2px 1px #fff
			, -2px 0px 1px #fff
			, 0px -2px 1px #fff
		;
	}

	/*--- balloon works ---*/
	.bl_works {
		margin-right: 50%;
		margin-bottom: 50%;
		margin-top: -10%;
	}
	.bl_works:after {
	    content: "";
	    position: absolute;
	    top: 90%;
	    left: 50%;
	    margin-left: 0.5em;
	    width: 1.3em;
	    height: 1.3em;
	    border-radius: 1.3em;
	    background-color: #8fdad2;
	    border: 1px solid #fff;
	}
	.bl_works:before {
	    content: "";
	    position: absolute;
	    top: 112%;
	    left: 64%;
	    margin-left: 0.5em;
	    width: 0.7em;
	    height: 0.7em;
	    border-radius: 0.7em;
	    background-color: #a1ece4;
	    border: 1px solid #fff;
	}
	.bl_works:hover:after {
		transition-duration: 0.15s;
	    content: "";
	    position: absolute;
	    top: 90%;
	    left: 50%;
	    margin-left: 0.5em;
	    width: 1.3em;
	    height: 1.3em;
	    border-radius: 1.3em;
	    background-color: #f0a57f;
	    border: 3px solid #fff;
	}
	.bl_works:hover:before {
		transition-duration: 0.15s;
	    content: "";
	    position: absolute;
	    top: 112%;
	    left: 64%;
	    margin-left: 0.5em;
	    width: 0.7em;
	    height: 0.7em;
	    border-radius: 0.7em;
	    background-color: #ffbd8a;
	    border: 3px solid #fff;
	}
	.bl_works:hover {
		transform: translate(-3px, -3px);
	}
	/*--- balloon about me ---*/
	.bl_me {
	    margin-left: 50%;
	    margin-top: 5%;
	}
	.bl_me:after {
	    content: "";
	    position: absolute;
	    top: 90%;
	    left: 25%;
	    margin-left: 0.5em;
	    width: 1.3em;
	    height: 1.3em;
	    border-radius: 1.3em;
	    background-color: #8fdad2;
	    border: 1px solid #fff;
	}
	.bl_me:before {
	    content: "";
	    position: absolute;
	    top: 112%;
	    left: 17%;
	    margin-left: 0.5em;
	    width: 0.7em;
	    height: 0.7em;
	    border-radius: 0.7em;
	    background-color: #a1ece4;
	    border: 1px solid #fff;
	}
	.bl_me:hover:after {
		transition-duration: 0.15s;
	    content: "";
	    position: absolute;
	    top: 90%;
	    left: 25%;
	    margin-left: 0.5em;
	    width: 1.3em;
	    height: 1.3em;
	    border-radius: 1.3em;
	    background-color: #f0a57f;
	    border: 3px solid #fff;
	}
	.bl_me:hover:before {
		transition-duration: 0.15s;
	    content: "";
	    position: absolute;
	    top: 112%;
	    left: 17%;
	    margin-left: 0.5em;
	    width: 0.7em;
	    height: 0.7em;
	    border-radius: 0.7em;
	    background-color: #ffbd8a;
	    border: 3px solid #fff;
	}
	.bl_me:hover {
		transform: translate(3px, -3px);
	}

	/*--- modal ---*/
	.undisplayed {
		display: none;
	}
	.modal_disp {
		transition-duration: 1.15s;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}
	.modal_bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.modal_wrap {
		width: 100%;
		height: 100%;
		text-align: center;
	}
	.modal_wrap:after {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 0px;
		height: 100%;
	}
	.modal_outer {
		width: 90%;
		height: 80%;
		min-height: 500px;
		background-color: #437778;
		border-radius: 18px;
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}
	.modal_box {
		margin: 3em 1.3em 1em 1.3em;
		height: 90%;
		min-height: 450px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cls_btn {
		margin-top: 1em;
		margin-right: 1em;
		width: 2em;
		height: 2em;
		line-height: 2em;
		text-align: center;
		border-radius: 30px;
		background-color: #bdcbcc;
		font-weight: bold;
		color: #285a5b;
		float: right;
	}
	.cls_btn:hover {
	    cursor: pointer;
	}
	.modal_box .inner {
		color: #fff;
		background-color: #285a5b;
		border-radius: 10px;
		width: 95%;
		height: 87%;
		text-align: left;
		padding: 10px;
		overflow: auto;
	}
	.modal_box .inner > :first-child {
		margin-top: 0;
	}
	.modal_box .inner > div {
		padding: 1em;
	}

	.mdl_title {
		width: 100%;
		margin: 0 10px;
		font-size: 1.3em;
		font-weight: bold;
	}
	.txt_c {
		text-align: center;
	}
}