@charset "utf-8";
/* CSS Document */

/************************************************************************************
HTML,BODY
*************************************************************************************/
html,body {
	width:100%;
	height:100%;
	min-height:100%; /* html fit brows */
	scroll-behavior: smooth;
}
body {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	text-align:center;
	font-size:75%;/*12px*/
	font-weight:400;
	font-family:'Raleway','メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';
	line-height:150%;
	color:#3b3b3b;
	background-color:#3b3b3b;
	background-image:url(../images/common/body_bg.jpg);
	background-repeat:repeat;
	background-position:left top;
}

/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear: both;
	visibility:hidden;
}
.clearfix {/* for IE<8 */
	zoom:1;
}

/************************************************************************************
FLOAT
*************************************************************************************/
.floatleft {
	float:left;
}
.floatright {
	float:right;
}
.floatnone {
	float:none;
}

/************************************************************************************
LINK
*************************************************************************************/
a {
	/*white-space:nowrap;*/
}
a:link {
	color:#FFF;
	text-decoration: none;
	outline: none;
}
a:visited {
	color:#FFF;
	text-decoration:none;
}
a:hover {
	color:#FFF;
	text-decoration: none;
}

a:active, a:focus{
	outline:none;
}
.alphaover a:hover img {
	opacity:0.8;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
}
.none{
	opacity:0.4;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
}

/************************************************************************************
TEXT
*************************************************************************************/
.white {
	color:#fff;
}
.gray1 {
	color:#f2f2f2;
}
.gray2 {
	color:#9a9a9a;
}
.gray3 {
	color:#3b3b3b;
}
.gray4 {
	color:#191919;
}
.black {
	color:#000;
}
.blue {
	color:#8CCAD3;
}
.green {
	color:#354B4E;
}
.beige {
	color:#B5B0A5;
}
.text_bg {
	background-color:#354B4E;
}
.bold {
	font-family:'Raleway','メイリオ','Meiryo';
	font-weight:700;
}
.tit {
	font-size:22px;
	font-weight:600;
	line-height:48px;
	border-top:solid 1px #3b3b3b;
	border-bottom:solid 1px #3b3b3b;
	text-align:left;
	margin-bottom:30px;
}
h4.subTit {
	margin-bottom:10px;
}

/************************************************************************************
INPUT,TEXTAREA
*************************************************************************************/
input {
	padding-left:2px;
}
input:focus {
	outline: 2px #8CCAD3 solid;
}
textarea {
	padding-left:2px;
}
textarea:focus {
	outline: 2px #8CCAD3 solid;
}
input, input[type="password"], input[type="search"], isindex {
	-webkit-appearance: textfield;
	padding: 1px;
	background-color: white;
	border: 1px solid #CCC;
	border-image: initial;
	-webkit-rtl-ordering: logical;
	-webkit-user-select: text;
	cursor: auto;
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
	border: none;
}
textarea {
	-webkit-appearance: textarea;
	background-color: white;
	border: 1px solid #CCC;
	border-image: initial;
	-webkit-rtl-ordering: logical;
	-webkit-user-select: text;
	-webkit-box-orient: vertical;
	resize: auto;
	cursor: auto;
	padding: 2px;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/************************************************************************************
CONTAINER
*************************************************************************************/
#container {
	width:100%;
	height:100%;
	min-height:100%; /* html fit brows */
	margin:0 auto;
}

/************************************************************************************
HEADER
*************************************************************************************/
#header {
	width:100%;
	height:50px;
	font-size:14px;
	font-family:'Raleway','メイリオ','Meiryo';
	position:fixed;
	_position: absolute; /*IE6 doesn't support fixed positioning*/
	top:0;
	left:0;
	z-index:9999;
}
/*#header a {
	filter: alpha(opacity=20)\9;
}
#header a:hover {
	filter: alpha(opacity=100)\9;
}*/

/************************************************************************************
TOP
*************************************************************************************/
#top {
	width:94%;
	padding:80px 3% 0;
	/*margin-top:80px;*/
	text-align:center;
	height:100%;
	min-height:100%;
}
#top .hello {
	font-size:200px;
	font-weight:800;
	line-height:100%;
	font-family:'Raleway';
	font-size:160px\9;
}
#top h2 {
	font-size:100px;
	font-weight:300;
	line-height:150%;
	font-size:60px\9;
}
#top h4 {
	font-size:45px;
	font-weight:300;
	line-height:200%;
	font-size:25px\9;
	font-style:italic;
}
@media screen and (max-height:540px) {
	#top {
	min-height:540px;
	}
}

/************************************************************************************
CONTACT
*************************************************************************************/
#contact {
	width:150px;
	height:70px;
	font-family:'Raleway','メイリオ','Meiryo';
	position:fixed;
	_position: absolute; /*IE6 doesn't support fixed positioning*/
	left:50%;
	bottom:50px;
	margin-left:-75px;
	z-index:99999;
}
#contact ul li {
	width:50px;
	height:50px;
	float:left;
}
#contact ul li a{
	width:50px;
	height:50px;
	display:block;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
#contact ul li a:hover {
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
/* twitter */
#twitter a {
	background-image:url(../images/common/twitter.png);
	background-position:left top;
	background-repeat:no-repeat;
}
#twitter a:hover {
	background-image:url(../images/common/twitter_on.png);
	background-position:left top;
	background-repeat:no-repeat;
}
/* mail */
#mail a {
	background-image:url(../images/common/mail.png);
	background-position:left top;
	background-repeat:no-repeat;
	margin-top:20px;
}
#mail a:hover {
	background-image:url(../images/common/mail_on.png);
	background-position:left top;
	background-repeat:no-repeat;
	margin-top:20px;
}
/* facebook */
#facebook a {
	background-image:url(../images/common/facebook.png);
	background-position:left top;
	background-repeat:no-repeat;
}
#facebook a:hover {
	background-image:url(../images/common/facebook_on.png);
	background-position:left top;
	background-repeat:no-repeat;
}

/************************************************************************************
PAGE-TOP
*************************************************************************************/
#page-top {
	width:50px;
	height:50px;
    position:fixed;
	right:20px;
	bottom:10px;
	z-index:99999;
}
#page-top a {
	width:50px;
	height:50px;
	display:block;
	background-image:url(../images/common/totop.png);
	background-repeat:no-repeat;
	background-position:center;
	filter: alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
    display:block;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
#page-top a:hover {
	background-image:url(../images/common/totop.png);
	background-repeat:no-repeat;
	background-position:center;
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}

/************************************************************************************
WORKS
*************************************************************************************/
#works {
	width:94%;
	padding:50px 3% 0;
	text-align:center;
	min-height:100%;
}
.imgWrap {
	width:920px;
	margin:0 auto;
}
.imgList{
	position:relative;
    width:930px;
    margin-right:-10px;
	margin-bottom:15px;
	overflow:hidden;
}
.view {
   width: 280px;
   height: 160px;
   margin-right:10px;
   margin-bottom:10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 280px;
   height: 160px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h4 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   background-color:#000000\9;
   margin: 10px 0 0 0;
}
.view p {
   font-family:'Raleway','メイリオ','Meiryo';
   font-size: 14px;
   position: relative;
   color: #fff;
   padding: 5px 20px 20px;
   text-align: center;
}
.view a.info {
	width:84px;
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
   position:absolute;
   bottom:5px;
   left:50%;
   margin-left:-49px;
   z-index:100000;
}
.view a.info:hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
   text-decoration:underline;
}
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background: rgba(140, 202, 211, 0.8);
   background-color:#8CCAD3\9;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h4 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h4,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
@media screen and (max-width:948px) {
 	.imgWrap, .imgList {
		width:100%;
	}
	.imgList {
		margin-right:0;
		margin-left:20px;
	}
	.view {
		width:45%;
		border:5%;
		height:100%;
	}
	.view .mask,.view .content {
		width:100%;
		height:100%;
	}
	.view img {
		width:100%;
		height:auto;
	}
}
@media screen and (max-width:815px) {
	.imgList {
		margin-right:0;
		margin-left:10px;
	}
}
@media screen and (max-width:640px) {
	.imgList {
		margin-left:0;
	}
	.view {
		width:95%;
		border:5%;
		height:100%;
		margin:0 auto 10px;
		float:none;
	}
	.view .mask,.view .content {
		width:100%;
		height:100%;
	}
	.view img {
		width:100%;
		height:auto;
	}
}

/************************************************************************************
Blog
*************************************************************************************/
#blog {
	width:94%;
	padding:50px 3% 0;
	/*margin-top:50px;*/
	text-align:center;
	min-height:100%;
}
#blogArticle {
	width:920px;
	margin:0 auto;
}
#articleList {
    width:930px;
    margin-right:-10px;
	overflow:hidden;
}
	
.blogPost {
	width: 300px;
	height:auto;
	margin-right:10px;
	margin-bottom:10px;
	float: left;
	border-top: 10px solid #8CCAD3;
	overflow: hidden;
	-webkit-box-shadow: 1px 1px 2px #e6e6e6;
	-moz-box-shadow: 1px 1px 2px #e6e6e6;
	box-shadow: 1px 1px 2px #e6e6e6;
	cursor: default;
	text-align:left;
	font-size:14px;
	background-color:#FFFFFF;
}
/*#blogArticle a {
	color:#191919;
	text-decoration:underline;
}*/
#blogArticle a:hover {
	text-decoration:none;
}

.blogPost img {
   display: block;
   position: relative;
}
.blogPost img{
	width:100%;
	height:auto;
	-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.blogPost:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.postdate {
	padding:10px;
	font-size:12px;
	text-align:right;
}
.updatetitle {
	padding:10px;
	font-size:16px !important;
	text-align:center;
	font-weight:700;
}
.updatetitle a {
	color:#3b3b3b;
	text-decoration:underline;
}
.postImg {
	width:100%;
	height:auto;
	max-height:
}
.excerptT {
	padding:10px;
	font-size:14px !important;
}
.moreLink {
	padding:10px;
	text-align:right;
}
.moreLink a {
	width:70px;
	height:16px;
	line-height:16px;
	background-color:#8CCAD3;
	padding:5px;
	color:#FFFFFF;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
.moreLink a:hover {
	background-color:#3b3b3b;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
.toBlog {
	text-align:right;
	font-size:18px;
	padding-top:20px;
}
.toBlog a {
	width:112px;
	height:19px;
	line-height:19px;
	background-color:#8CCAD3;
	padding:5px;
	color:#FFFFFF;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}
.toBlog a:hover {
	background-color:#3b3b3b;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	-ms-transition-duration: 1s;
	transition-duration: 1s;
}	
@media screen and (max-width:948px) {
	#blogArticle, #articleList {
		width:100%;
	}
	#articleList {
		margin-right:0;
		margin-left:20px;
	}
	.blogPost {
		width:45%;
		border:5%;
		/*height:100%;*/
	}
}
@media screen and (max-width:815px) {
	#articleList {
		margin-right:0;
		margin-left:10px;
	}
}
@media screen and (max-width:640px) {
	.blogPost {
		width:95%;
		border:5%;
		/*height:100%;*/
		margin:0 auto 10px;
		float:none;
	}
}

/************************************************************************************
About
*************************************************************************************/
#about {
	width:94%;
	padding:50px 3% 30px;
	/*margin-top:50px;*/
	text-align:center;
}
.aboutWrap {
	width:920px;
	margin:0 auto;
}
.aboutList{
	position:relative;
    width:930px;
    margin-right:-10px;
	overflow:hidden;
}
#about .aboutBox {
	width:300px;
	height:300px;
	margin-right:10px;
	margin-bottom:10px;
	float:left;
	overflow:hidden;
	/*-webkit-box-shadow:1px 1px 2px #e6e6e6;
	-moz-box-shadow:1px 1px 2px #e6e6e6;
	box-shadow:1px 1px 2px #e6e6e6;
	cursor: default;*/
	text-align:left;
	font-size:14px;
}
#about .aboutBox h5, #about .aboutBox p {
	padding:10px;
}
#about div.aboutBox h5{
	font-size:19px;
	font-weight:600;
	text-align:center;
	margin-bottom:5px;
}
#about a {
	color:#3b3b3b;
	text-decoration:underline;
	font-weight:600;
}
#about a:hover {
	color:#3b3b3b;
	text-decoration:none;
}
.skillList {
	margin-top:10px;
	margin-left:7px;
	margin-bottom:10px;
	text-align:center;
}
.skillList img {
	margin-bottom:5px;
}
#about dl {
	padding:10px 20px 20px;
	font-weight:400;
	margin-bottom:10px;
}
#about dt {
	font-weight:bold;
	margin-bottom:5px;
}
#about dd {
	margin-bottom:5px;
	margin-left:10px;
}
@media screen and (max-width:948px) {
	#about .aboutBox {
		width:95%;
		height:100%;
		margin:0 auto 10px;
		float:none;
		text-align:center;
	}
	.aboutWrap, .aboutList {
		width:100%;
	}
	.aboutBox {
		border-bottom:1px solid #9a9a9a;
		margin-bottom:20px;
		padding-bottom:5px;
	}
}

/************************************************************************************
FOOTER
*************************************************************************************/
#footer {
	width:100%;
	height:200px;
	padding-top:20px;
	background-color:#191919;
	font-family:'Raleway','メイリオ','Meiryo';
	line-height:110%;
	color:#9a9a9a;
	overflow:hidden;
}
.copy {
	padding-top:80px;
}