@charset "utf-8";

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

 * style
 *
 * 1. import
 * 2. html, body
 * 3. HTMLtag（各タグ）
 * 4. Layout（共通要素）
 * 5. title（共通要素）

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



/*****
 * 1. import
*****/

@import "import/reset.css";
@import "import/util.css";


/*****
 * 2. html, body
*****/

	body {
		background-color: #fff;
	}
	.page {
		min-width: 1200px;
		color: #333333;
		font-size: 12px;
		line-height: 1.5;
		letter-spacing: 0.1em;
		font-family:Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
		/*font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;*/
	}
	img {
		max-width: 100%;
		height: auto;
	}


/*****
 * 3. HTMLtag
*****/

/* anchor */
	a {
		color: #0000ff;
		text-decoration: none;
		background-color: transparent;
		background-image: none;
		background-repeat: no-repeat;
		background-position: top left;
	}
	a:visited {}
	a:hover {
		color: #ff0000;
		text-decoration: none;
		background-position: bottom right;
	}
	a:active {}


/* cap */
	.cap,
	.caption {
		color: #666666;
		font-size: 10px;
		line-height: 15px;
		background: none;
	}
	.cap {
		padding-top: 5px;
	}


/*****
 * 4. Layout
*****/

/* Header */
	body #gHeader {
		position: relative;
		padding: 50px 60px;
	}

	.site_title {
		float: left;
		font-size: 28px;
		letter-spacing: .02em;
	}
	.site_title a {
		display: block;
		color: #222;
	}

	#gHeader .mail,
	#gHeader .menu {
		display: none;
	}


/* gNav */
	body #gNav {
		float: right;
		padding-top: 12px;
	}
	#gNav ul li {
		float: left;
		margin-left: 55px;
	}
	#gNav ul li:first-child {
		margin-left: 0;
	}
	#gNav ul li a {
		color: #000;
	}
	#gNav ul li a,
	#gNav ul li strong {
		position: relative;
	}
	#gNav ul li a::before,
	#gNav ul li strong::before {
		pointer-events: none;
		content: '';
		position: absolute;
		bottom: -5px;
		left: 0;
		right: 0;
		width: 100%;
		height: 1px;
		background-color: #000;
	}
	#gNav ul li a::before {
		opacity: 0;
		transition: .3s;
	}
	#gNav ul li a:hover::before {
		opacity: 1;
	}



/* Container */
	body #container {
		position: relative;
		text-align: left;
		background-color: transparent;
	}
	.wrap {
		width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}


/* Footer */
	body #gFooter {
		position: relative;
		width: 100%;
		min-width: 1200px;
		height: 383px;
	}
	#gFooter .bg-left,
	#gFooter .bg-center,
	#gFooter .bg-right {
		position: absolute;
		bottom: 0;
		height: 383px;
		z-index: -1;
	}
	#gFooter .bg-left {
		left: 0;
		width: 359px;
		background-image: url(../imgs/bg-ftr_left.jpg);
		background-repeat: no-repeat;
		background-position: left bottom;
	}
	#gFooter .bg-center {
		width: 100%;
		background-image: url(../imgs/bg-ftr_center.jpg);
		background-repeat: repeat-x;
		background-position: right bottom;
	}
	#gFooter .bg-right {
		right: 0;
		width: 533px;
		background-image: url(../imgs/bg-ftr_right.jpg);
		background-repeat: no-repeat;
		background-position: right bottom;
	}


	#profile #gFooter .bg-left {
		background-image: url(../imgs/bg-ftr_left02.jpg);
	}
	#profile #gFooter .bg-center {
		background-image: url(../imgs/bg-ftr_center02.jpg);
	}
	#profile #gFooter .bg-right {
		background-image: url(../imgs/bg-ftr_right02.jpg);
	}


	#portfolio #gFooter .bg-left {
		background-image: url(../imgs/bg-ftr_left03.jpg);
	}
	#portfolio #gFooter .bg-center {
		background-image: url(../imgs/bg-ftr_center03.jpg);
	}
	#portfolio #gFooter .bg-right {
		background-image: url(../imgs/bg-ftr_right03.jpg);
	}


	#contact #gFooter .bg-left {
		background-image: url(../imgs/bg-ftr_left04.jpg);
	}
	#contact #gFooter .bg-center {
		background-image: url(../imgs/bg-ftr_center04.jpg);
	}
	#contact #gFooter .bg-right {
		background-image: url(../imgs/bg-ftr_right04.jpg);
	}


	.copyright {
		position: absolute;
		left: 265px;
		bottom: 30px;
	}
	.copyright br {
		display: none;
	}


/*****
 * 5. title
*****/

	.site_title {
		/*dont use <h1> selector*/
	}
	.content_title {
		/*dont use <h2> selector*/
	}



/*****
 * 6. other page
*****/