@charset "utf-8";
/*common*/
body {margin: 0; font: 16px/1.4em "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", Geneva, Arial, Verdana, sans-serif}
#menu{
	left:12px;
	top: 12px;
	background: white;
	box-shadow: 1px 1px 3px rgba(0,0,0, 0.3);
	border-radius: 4px;
	text-shadow: 1px 1px 2px rgba(0,0,0, 0.3);
	display: flex;
}
#menu>a>img{
	margin: 4px 12px;
}
#link{	/*menu>ul*/
	list-style:none;
	margin: auto auto auto auto;
	padding: 4px 16px 8px 8px;
	font: 18px/1.4em sans-serif;
}
#wall{	/*top image*/
	width:700px;
}
#roof{	/*breadcrumbs*/
	text-indent:8px;
	font-size:12px;
	color: gray;
}
#copy {	/*copyright*/
	clear:left;
	font-size: 10px;
	color: #666;
}
h1{
	padding: 2px 12px;
	text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
	line-height:1.4em;
	margin:0.4em auto;
	box-shadow: 0px 0px 2px rgba(0,0,0, 0.2);
	border-radius: 4px;
}
h2{
	text-shadow: 1px 1px 2px rgba(0,0,0, 0.2);
	line-height:1.4em;
	margin:0.4em auto;
}
h2:before{
	content:"▶ ";
}
.lead{
	color: #555;
}
#rows{
	flex-direction:row;
}
@media (min-width:881px){
	#menu {
		position:fixed;
		flex-direction: column;
	}
	#main {
		margin: 12px 8px auto 160px;
		width: 700px;
	}
	#copy{
		margin: 32px auto;
	}
	#name{
		width:256px;
		padding-top:90px;
	}
	#rows{
		flex-direction:column;
	}
	#maps{
		width:45%;
		height:45%;
	}
}
@media (max-width:880px){
	#menu {
		position:absolute;
		flex-direction: row;
		align-items:center;
		width:94%;
	}
	#menu a{
		font-size: 12px;
		line-height:1.0em;
	}
	#logo{
		width:70px;
		height:81px;
	}
	#push{	/*menu:sugiyama*/
		flex-grow:5;
		align-self:flex-end;
	}
	#main {
		margin: 136px 2% auto 2%;
		width: 96%;
	}
	#main p{
		margin: auto 8px 8px 8px;
	}
	#wall{
		width:100%;
	}
	#copy{
		margin: 32px 12px;
	}
	#name{
		width:256px;
		font-size:90%;
	}
	h1{
		font-size: 1.1em;
	}
	h2{
		font-size: 1.0em;
	}
	h3{
		font-size: 0.9em;
	}
	#maps{	/*info>image*/
		width:90%;
		height:90%;
	}
	.rows{	/*info*/
		flex-direction: column;
		align-items:center;
		justify-content: center;
	}
}
ul{
	list-style: square;
}
.rows{	/*flex>figure*/
	display:flex;
}
a:link {color: #333; text-decoration: none}
a:visited {color: #333; text-decoration: none}
a:hover {color: #666; text-decoration: underline}
a:active {color: #999; text-decoration: none}

/*info*/
#axes{
	margin: auto auto auto 12px;
}

/*sugiyama*/
#face{	/*menu:sugiyama:face*/
	width:48px;
	height:48px;
	margin: 4px 72px 4px auto;
	border-radius:24px;
	border:1px solid #eee;
	box-shadow:0px 0px 2px rgba(0,0,0, 0.3);
	background:url(imgs/sgym.png);
}
#sent{	/*menu:sugiyama:text*/
	font:bold 13px/1.4em sans-serif;
	margin:12px 4px 6px auto;
	float:right;
}
#myst{
	padding: 12px;
	border: 1px solid #ddd;
	display:none;
}
h3{
	margin-top: 0px;
	padding: 2px 12px;
	color: #333;
	box-shadow: 0px 2px 2px rgba(0,0,0, 0.2);
	border-bottom-left-radius:8px;
	border-top-right-radius:8px;
	border-bottom-right-radius:8px;
}
date{
	padding: 1px 12px;
	font-size: 12px;
	color: #fff;
	background: #aaa;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	box-shadow: 1px 0px 2px rgba(0,0,0, 0.3);
}

/*work*/
#figs{
	width: 256px;
	height:320px;
}
#figs>div{
	position:relative;
	width:72px;
	height:68px;
	line-height:4.0em;
	text-align: center;
	border-radius: 36px;
	color: white;
	background: gray;
}
#fig1{left:86px;top:0;}
#fig2{left:32px;top:-22px;}
#fig3{left:140px;top:-90px;}
#fig4{left:86px;top:-112px;}
#fig5{left:0;top:-112px;}
#fig6{left:86px;top:-180px;}
#fig7{left:172px;top:-250px;}
#fig8{left:86px;top:-248px;}
#list>div{
	width: 267px;
}

/*troubles*/
#none {position: absolute; left: 28%; top: 30%; width: 50%; padding: 32px; background: rgb(192,192,192); opacity: 0.9}