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

/*////////////////////////////////////////////////////////

共通css

///////////////////////////////////////////////////////*/
body { }
#wrapper { width: 100%; }


/* =header
-------------------------------------------------------*/
header { width: 100%; padding: 10px 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

header h1 { float:left; width: 79px; }
header h1 a:hover img {
    filter: alpha(opacity=100) !important;
    -moz-opacity:1 !important;
    opacity:1 !important;
}

header section { margin:0 auto; }

header nav ul#gNavi { float:left; list-style-type:none; padding-left:70px; }
    header nav ul#gNavi li { float:left; width:100px; text-align:center; }
	header nav ul#gNavi li a { display:block; height:60px; padding-top:30px; text-decoration:none;}
	header nav ul#gNavi li a:link,
	header nav ul#gNavi li a:visited { color:#000; border-bottom-style:solid; border-width:3px; border-color:rgba(256,256,256,0); }
    header nav ul#gNavi li a:hover,
	header nav ul#gNavi li a:active { color:#17719f; border-bottom:solid 3px #17719f; }

/*スクロール時に表示*/	
header #scrollNavi {
  position: fixed;
  min-width:980px;
  padding: 10px;
  z-index: 9999;
  display: none;
  top: 0;
  left: 0;
  width:  100%;
  height: 60px;
  background-color:rgba(256,256,256,0.9);
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  box-shadow:rgba(113, 135, 164, 0.1) 0px 0px 6px 3px;
  -webkit-box-shadow:rgba(113, 135, 164, 0.1) 0px 0px 6px 3px;
  -moz-box-shadow:rgba(113, 135, 164, 0.1) 0px 0px 6px 3px;
}
header #scrollNavi #logo-box { float:left; width:39px; }
header #scrollNavi nav ul#gNavi { float:left; list-style-type:none; padding-left:103px; }
    header #scrollNavi nav ul#gNavi li { float:left; width:100px; text-align:center; }
	header #scrollNavi nav ul#gNavi li a { display:block; height:37px; padding-top:10px; text-decoration:none;}


	 
/* スマートフォン設定 */
.slicknav_menu { display:none; }
@media screen and (max-width: 800px) {
	.js #gNavi { display:none; }
	.js .slicknav_menu { display:block; }
}

/* メインイメージ */
#mainImage-container { position:relative; }
#mainImage-container #logo-box { position:absolute; left:50%; top:165px; margin-left:-76px; width:152px; z-index:100; filter: alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; }
#mainImage-container #txt-box { position:absolute; right: 10px; bottom:10px; text-align:right; color:#FFFFFF; }
#mainImage-container #catch-box { position:absolute; left:50px; bottom:50px; color:#FFFFFF; font-size: 369.2%; line-height:1.2; }

	
/* =contents
-------------------------------------------------------*/
#container { width: 100%; padding:100px 0; }
section { width:1260px; padding:0 10px; margin:0 auto; }
section.width-full { width:100%; padding:0; }

/*about*/
section#about-container {}
section#about-container h2 { font-size: 261.5%; line-height:1; font-weight:bold; width:6em; text-align:center; margin:0 auto 60px; border-bottom:solid 1px #fff100; padding-bottom:5px; }
    section#about-container .article-1 { position:relative; float:left; width:470px; padding-top:65px; }
	    section#about-container .article-1 .name-box { padding: 0 0 30px 50px; }
		section#about-container .article-1 .name-box .name {font-size: 338.5%;}
		section#about-container .article-1 .pic-box { position:absolute; left:0; bottom:0; }
	section#about-container .article-2 { float:right; width:760px; padding-bottom:30px; }
	    section#about-container .article-2 .signature-box img { max-width:233px; }

/*portfolio*/
section#portfolio-container {}
section#portfolio-container h2 { font-size: 261.5%; line-height:1; font-weight:bold; text-align:center; background-color:#000000; color:#FFFFFF; padding:30px 0; }
    section#portfolio-container ul#thum-container { list-style-type:none; }
	section#portfolio-container ul#thum-container li { float:left; width:19.75%; height:250px; margin: 5px 0.3125% 0 0; }
	section#portfolio-container ul#thum-container li:nth-child(5n) { margin-right:0; }
	section#portfolio-container ul#thum-container li .mask { width: 100%; height: 100%; }
	section#portfolio-container ul#thum-container li a .mask { transition:opacity 0.2s ease; background:rgba(0,0,0,0); opacity:0.8; width:100%; height:100%; }
	section#portfolio-container ul#thum-container li a .mask:hover { background: rgba(0,0,0,0.8); transition: opacity 0.3s ease; }
	section#portfolio-container ul#thum-container li a:hover .mask{ opacity:0.4; }
	
/*social*/
ul#social-container { list-style-type:none; width:330px; margin:70px auto; }
ul#social-container li { float:left; width:60px; margin-right:30px; }
ul#social-container li:last-child { margin-right:0; }

.btn-contact a { display:block; width:246px; border:solid 2px #000000; text-align:center; padding:20px 0; background:url(../img/icon-mail.gif) no-repeat 10px center; margin:0 auto; text-decoration:none !important; }
.btn-contact a:link,.btn-contact a:visited { color:#000000; }
.btn-contact a:hover,.btn-contact a:active { color:#fff; background-color:#000000; }

@media screen and (max-width: 800px) {
section { width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
}

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

/*=======================================================
○○○
=======================================================*/


/*=======================================================
○○○
=======================================================*/





/* =footer
-------------------------------------------------------*/
footer { background-color:#353535; padding:50px 0; text-align:center; color:#FFFFFF; font-size:85%; }


/*=======================================================

構成要素

=======================================================*/

/* =toTop
-------------------------------------------------------*/
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:90px;
	right:20px;
	overflow:hidden;
	width:50px;
	height:29px;
	border:none;
	text-indent:100%;
	background:url(/assets/common/img/ui.totop.png) no-repeat left top;
	z-index: 100;
}

#toTopHover {
	background:url(/assets/common/img/ui.totop.png) no-repeat left -29px;
	width:50px;
	height:29px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}

/* マウスオーバー透過
-------------------------------------------------------*/
#wrapper a:hover img {
    filter: alpha(opacity=70);
    -moz-opacity:0.70;
    opacity:0.70;
	-webkit-transition: all .3s;
	transition: all .3s;
}

#wrapper a:hover {
	-webkit-transition: all .3s;
	transition: all .3s;
}

img { width: 100%; max-width: 100%; /*height: auto;*/ }




/*=======================================================
 IE6,7,8 のみに適用
 =======================================================*/
.oldie header { }