@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*******************
 **    YUI font   **
 *******************/
/*-----------------------------------------------------
Yahoo UI Library Font-size Adjustment
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
http://developer.yahoo.com/yui/license.txt
http://developer.yahoo.com/yui/fonts/
10px = 77%     11px = 85%     12px = 93%     13px = 100%
14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
18px = 138.5%  19px = 146.5%  20px = 153.9%  21px = 161.6%
22px = 167%    23px = 174%    24px = 182%    25px = 189%
26px = 197%
------------------------------------------------------*/


/* 共通 */


*{
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
/* html{height:100%;} */
body, h1, h2, h3, h4, h5, h6, blockquote, p, form,iframe{margin: 0;padding: 0;}
body{
/* 	height:100%; */
	margin: 0 auto;
	background-color: #fff;
}
ul{list-style:none;margin:0;padding:0;}
ol li{list-style-position:outside;}
img{border: 0;}
h1{margin: 0; padding: 0;font-weight: 100;}
h2{
	font-size: 108%;
	font-weight: 100;
}
del {
	text-decoration: line-through;
}
a{
	text-decoration: none;
	color: #727171;

}
blockquote{
	margin: 0 0 0 5px;
	padding: 3px 0 3px 10px;
	border-left: 2px solid #DDD;
}
select,
input,
button,
textarea,
select,
button {
	font-size: 100%;
	font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Helvetica, Arial, sans-serif;
}
sup{
	vertical-align: super;
/* 	font-family: Verdana, Helvetica, Arial, sans-serif; */
}

/*******************
 **    Layout     **
 *******************/

body > #wrapper{height:auto;}


/*******************
 **     TOP    **
 *******************/

#wrapper{
	font-family: "Noto Sans Japanese", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, Helvetica, Arial, sans-serif;
	color: #727272;
	font-weight: 100;
	margin: 0 auto;
	width: 100%;
	text-align: justify;
	text-justify: inter-ideograph;
	-webkit-text-size-adjust: 100%;
	height: 100%;
}


#top_contents{
	font-size: 123.1%;
	line-height: 174%;
	letter-spacing: 0.2em;
	text-align: center;
	width: 320px;
	height: 400px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#top_contents nav li{
	margin: 50px 0;
}


#top_contents a{
	display: block;
	width: 320px;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}
#top_contents a:hover{opacity: 0.6;}


/*******************
 **     ABOUT     **
 *******************/

#about_contents,
#projects_contents{
	font-size: 93%;
	line-height: 197%;
	letter-spacing: 0.08em;
}

#about_contents h1,
#projects_contents h1{
	font-size: 123.1%;
	font-weight: 100;
	line-height: 174%;
	letter-spacing: 0.2em;
	text-align: center;
	margin: 60px auto 40px;
}
#about_contents h1 a{
	display: block;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

#about_contents h1 a:hover{opacity: 0.6;}


#profile{
	width:700px;
	margin: 0 auto;
}
.profile_ja,.profile_en{
	width:330px;
	float: left;
	margin: 0 10px;
}
.profile_content{margin-bottom: 50px;}
.profile_content h2{margin-bottom: 5px;}

.profile_content dt,
.profile_content dd{
	text-align: left;
	float: left;

}

.profile_content dt{width: 70px;}
.profile_content dd{width: 260px;}


/*******************
 **   projects    **
 *******************/
#works{width: 100%;}


#works .project{
	width: 350px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 50px;
}

#works .project img{width: 350px;height: auto;}
#works .project p{margin: 5px;}
#works a{
	display: block;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
	text-align: center;
}
#works a:hover{opacity: 0.6;}

.project-detail{
	width: 550px;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 50px;
}
.date{font-size: 93%;}
.project-post-contents{display: block;margin: 20px auto;}
.project-post-contents img{width: 350px;height: auto;margin-bottom: 10px;}
.project-desc{
	width: 550px;
	text-align: justify;
}
.project-desc p{margin-bottom: 20px;}
.project-desc p:last-child{margin-bottom: 0;}
.project-info{margin-top: 50px;}

@media screen and (max-width: 480px) {

	#top_contents{font-size: 108%;height: 250px;}
	#top_contents nav li{margin: 30px 0;}

	#about_contents,
	#projects_contents{font-size: 77%;line-height: 182%;}
	#about_contents h1,
	#projects_contents h1{font-size: 108%;margin: 20px auto;}
	#profile{width:90%;}
	ul.profile_content{width: 100%;margin-bottom: 30px;}
	.profile_ja,.profile_en{width:100%;float: none;margin: 0;}
	.profile_content dt{width: 30%;}
	.profile_content dd{width: 70%;}
	.profile_ja{margin-bottom: 15px;}
	#projects_contents{width: 90%;margin: 0 auto;}
	#works .project, .project-detail{width: 100%; margin-bottom: 40px;}
	#works .project img, .project-detail img{display: block;width: 100%;height: auto;}
	.project-desc{width: 100%;}
}

.back{margin-bottom: 30px;}
/*フロート解除用のハック*/
/*clearfix*/
.clearfix:after{
visibility:hidden;
height:0;
display: block;
font-size: 0;
content: " ";
clear: both;
}