* { box-sizing: border-box; }

html>/**/body{
  overflow:-moz-scrollbars-vertical;
}

*{ 
	font-family: "Arial","ＭＳ Ｐゴシック","Osaka";
	font-size:12px;
	line-height:1.6em;
	margin:0px;
	padding:0px;
}

body {
	margin:0em auto;
	padding:10px;
	background-color:#343434;
	color:#fff; 
	font-size:12px; 
	max-width:980px; 
}

.center { text-align:center; }

h1 { margin:0.3em 0 1.5em 0; font-size:15px; line-height:1.3em; display:inline; vertical-align:middle; }
h2 { margin:0 0 10px 0px; font-size:10px; color:#999; }
h3 { margin:0 0 10px 0px; }
h4 { margin:0 0 10px 0px; }
h5 { margin:0 0 10px 0px; }
p { margin:0 0 5 0px; line-height:1.5em}

#contents1 { font-size:12px;text-align:left;width:100%; padding:2vw; }
#contents2 { margin:0px; color:#fff; }
#textmenu { margin:10 0 10 0px; }
#textmenu .layer1 { margin:0 5px 0 0px; }
#menu2 { line-height:1.5em; }
.htmlnote { margin:0 0 20 -10px; }
a { color:#aaf; text-decoration:none; }
a:hover { color:#ccf }

hr { margin:10px 0 10 0px; clear:both; border:0px;border-top:1px solid #555; height:1px; }

img.em { vertical-align:middle; height:1.3em; }

img.profile1 { float:left; width:10%; max-width:100px; padding:0px;margin:0 5px 10 0px; }
@media only screen and (max-width: 767px)  {
	img.profile1 { float:left; width:15%; }
}
@media only screen and (max-width: 414px)  {
	img.profile1 { float:left; width:calc( ( 100% - 20px ) / 6 ); }
}
/*img.profile2 { width:100%; max-width:400px; background-color:#343434;padding:0px;margin:0 0 10 0px; }*/
img.profile2 { width:50%; max-width:300px; background-color:#343434;padding:0px;margin:0 0 2em 2em; float:right; }

div.catchcopy { font-size:14px; font-style:italic; }

.cr { font-size:0.5em; color:#ccc; }
.cr a { font-size:inherit; color:#ccc; text-decoration:none; }

img.bgtop { margin:10px 0 10px 0; width:100%; }
.logo { width:50px; margin:0 20px 10px 0; display:inline-block; vertical-align:middle; }
.logo img{ width:100%; }

img.map { width:100%; margin:1em 0 1em 0; }
img.map_top { width:100px; margin:0 0 2em 0; }
img.pageimg { width:45%; float:right; margin:0em 0 1em 2em; }


img.worksimg1 { width:45%; max-width:200px; float:right; margin:0 0 2em 2em; }

img.htmlworksimg { width:100%; background:#343434;padding:0px;margin:0 0 0 0px; }

div.works1 a.htmlworksicon { display:block; float:left; width:23%; margin:0 5px 5px 0; }
div.works2 a.htmlworksicon { display:block; float:left; width:39px; margin:0 5px 5px 0; }

div.works1 a.htmlworksicon img { background:#343434; width:100%; object-position:50% 50%; }
div.works2 a.htmlworksicon img { background:#343434; width:100%; object-position:50% 50%; }


a.htmlworksicontop { display:block; float:left; width:10%; padding:1%; }
a.htmlworksicontop img { width:100%; }
div.works1 a.htmlworksicon { width:16%; }

@media only screen and (max-width: 767px)  {
	a.htmlworksicontop { width:20%; }
	div.works1 a.htmlworksicon { width:23.6%; }
}
@media only screen and (max-width: 414px)  {
	a.htmlworksicontop { width:25%; }
	div.works1 a.htmlworksicon { width:31%; }
}