@charset "utf-8";
/* Responsive */

@media print, screen and (min-width:769px){/*769px以上に適用*/
	#main{
		float:left;
		width:64%;
	}
	
	#main .photo{
		float:left;
		width:28%;
		margin:0 2% 0 0;
	}
	
	#main .photo img{
		width:100%;
		height:auto;
	}
	
	#main .profile{
		float:left;
		width:70%;
	}
	
	#g-nav{
		float:right;
		width:30%;
	}
	
	#g-nav #nav-title-pc{
		color:#FFFFFF;
		margin:0.5em 0 0.65em 0;
		padding:0.5em 1em;
		/*background-color:#55402b;*/
		background-color:#000000;
	}
	
	#g-nav #nav-title{
		visibility:hidden;
		display:none;
	}
	
	#g-nav #nav-list{
	}
	
	#g-nav #nav-list li{
		border-bottom:solid 1px #000000;
	}
	
	#g-nav #nav-list li a{
		display:block;
		color:#000000;
		padding:0.5em;
	}
	
	#g-nav #nav-list li a:hover{
		color:#ffffff;
		background-color:#000000;
	}
}

@media screen and (max-width:768px){/*768px以下に適用*/

	article{
		position:relative;
	}
	
	#main{
		margin-bottom:40px;
	}
	
	#main .photo{
		text-align:center;
		margin:0 auto;
	}
	
	#main .photo img{
		width:65%;
		height:auto;
	}

	#g-nav{
		width:100%;
		/*position:absolute;
		top:-20px;
		left:0;*/
		z-index:9999;
	}
	
	#g-nav #nav-title-pc{
		visibility:hidden;
		display:none;
	}
	
	#g-nav #nav-title{
		color:#FFFFFF;
		margin:0;
		padding:1em;
		background-color:#000000;
	}
	
	#g-nav #nav-list{
	}
	
	#g-nav #nav-list li{
		border-bottom:solid 1px #FFFFFF;
	}
	
	#g-nav #nav-list li a{
		display:block;
		color: #ffffff;
		padding:0.5em;
		background: #000000;
	}

}