body{
	padding:0px ;
	margin: 0;
	-webkit-text-size-adjust: 100%;
	background-image: url(f18.png);
}
#main{
	/* margin: 1rem; */
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;	
}
#home{
	padding: 1rem;
	padding-left: 3rem;
	width: 70vw;
}

h1{
	margin:20px 0 30px;
	padding: 0rem;
	font-size:140%;
}

h2{
	font-size:100%;
	margin:20px 0 20px;
	padding:8px;
	padding-left:16px;
	border:solid 1px black;
	background-color:#eee;
	mix-blend-mode: multiply;
}

p{
	padding-left:1rem ;
}

img{
	width:400px;
}

a{
	font-weight: bold;
}

a:link {color:#668;}
a:visited{color:#668;}
a:hover{color:#aac;}
a:active{color:#668;}

.pic{
	text-align: center;
}

.thm{
	margin-top: 1rem;
	font-weight: bold;
	padding-left:  0.5rem;
	border-left:solid 0.5rem black;
}

@media screen and (min-aspect-ratio: 1) {
	body{
		line-height: 2rem;
	}

	#content_frame{
		display: block;
		flex-grow: 1;
		}
	#side{
		padding: 2rem;
		width: 30vw;
	}
	.pc{display: block;}
	.sp{display: none;}
	.content{
		padding: 2rem;
		width: 90vh;
		border-right:solid 2px black;
	}
}

@media screen and (max-aspect-ratio: 1) {
	body { 
		line-height: 5vw;
		font-size : 3.2vw ;
	}
	#content_frame{display: none;}
	#side{
		width: 100%;
		padding: 2rem;
	}
	.pc{display: none;}
	.sp{display: block;}
	.content{
		width: 100%;
		padding: 2rem;
}

}