@charset "utf-8";

/*-----------------------------------------------------
font
-------------------------------------------------------*/
#Main .category dl,
#Main .section ul,
#Main .pager ul li,
#Main aside.other h3,
#Main .section p:before{
	font-family:'DINNextLTPro-Condensed', sans-serif;
	letter-spacing:0.1em;
}
/*
#Main .section figcaption,
#Main aside.other p{
	font-family:'DINNextLTPro-Condensed','TsukuGoPr5-R', sans-serif;
	letter-spacing:0.2em;
}
*/



/*-----------------------------------------------------
Main
-------------------------------------------------------*/
#Main{}


/*-------------------------------------
h1
---------------------------------------*/
#Main h1 a{text-decoration:none;}
#Main h1 a:hover{opacity:1;}


/*-------------------------------------
category
---------------------------------------*/
#Main .category{
	position:absolute;
	top:95px;
	right:0;
	display:none !important;
}
#Main .category dl{
	overflow:hidden;
	font-size:170%;
	line-height:1;
	vertical-align:middle;
}
#Main .category dl dt,
#Main .category dl dd{
	float:left;
	display:inline;
}
#Main .category dl dt{
	margin:0 27px 0 0;
}
#Main .category dl dt:after{
	content:"";
	margin:0 0 0 24px;
	border-left:1px solid #131313;
}
#Main .category dl dd{
	margin:0 0 0 25px;
}
#Main .category dl dd:first-of-type{margin:0;}
#Main .category dl dd a{color:#131313;text-decoration:none;}
#Main .category dl dd a.active,
#Main .category dl dd a:hover{color:#999999;}

@media screen and (max-width:1140px){ /* == device-width < 1140 == */
	#Main .category{right:60px;}
}
@media screen and (max-width:640px){ /* == device-width < 640 == */
	#Main .category{display:none;}
}



/*-------------------------------------
section
---------------------------------------*/
#Main .section{
	width:47.4%;
	display:inline;
	margin:0 0 65px 0;
}
#Main .section:nth-child(odd){float:left;}
#Main .section:nth-child(even){float:right;}
#Main .section a{
	width:100%;
	display:block;
	position:relative;
	text-decoration:none;
}
#Main .section a:hover{
	opacity:0.7;
}

@media screen and (max-width:640px){ /* == device-width < 640 == */
	#Main .section{
		width:100%;
		float:none !important;
		display:block;
		margin:0 0 30px 0;
	}
}

/* img
---------------------*/
#Main .section p{
	width:100%;
	position:relative;
}
#Main .section p img{
	width:100%;
	height:auto;
}

/* figcaption
---------------------*/
#Main .section figcaption{
	padding:20px 0 0 0;
	font-size:139%;
	line-height:1.4;
	color:#131313;
	text-decoration:none;
}
@media screen and (max-width:640px){ /* == device-width < 640 == */
	#Main .section figcaption{
		padding:17px 2px 0 2px;
		font-size:93%;
	}
}

/* ul
---------------------*/
#Main .section ul{
	overflow:hidden;
	padding:5px 0 0;
}
#Main .section ul li{
	float:left;
	display:inline;
	padding:0 10px 0 0;
	font-size:116%;
	line-height:1;
	color:#999999;
}
#Main .section ul li:after{
	content:"/";
	position:relative;
	right:-5px;
	top:-1px;
}
#Main .section ul li:last-of-type:after{
	display:none;	
}
@media screen and (max-width:640px){ /* == device-width < 640 == */
	#Main .section ul{
		overflow:hidden;
		padding:0 2px 0;
	}
	#Main .section ul li{
		float:left;
		display:inline;
		padding:5px 5px 0 0;
		font-size:93%;
		color:#999999;
	}
	#Main .section ul li:after{
		right:-2px;
	}
}



/*-------------------------------------
pager
---------------------------------------*/
#Main .pager{
	clear:both;
	padding:35px 0 0 0;
}
#Main .pager ul{
	width:100%;
	overflow:hidden;
	padding:0 0 100px 0;
	text-align:center;
}
#Main .pager ul li{
	display:inline-block;
	margin:0;
}
/* num */
#Main .pager ul li a,
#Main .pager ul li span{
	display:block;
	padding:10px 20px;
	font-size:154%;
}
#Main .pager ul li a{color:#131313;text-decoration:none;}
#Main .pager ul li a:hover,
#Main .pager ul li span{opacity:0.5;}

/* prev */
#Main .pager ul li a.prev,
#Main .pager ul li span.prev{
	padding-left:25px;
	background-image:url("/common/images/icon_arrow_left_black_min.png");
	background-repeat:no-repeat;
	background-position:0 47%;
}
/* next */
#Main .pager ul li a.next,
#Main .pager ul li span.next{
	padding-right:25px;
	background-image:url("/common/images/icon_arrow_right_black_min.png");
	background-repeat:no-repeat;
	background-position:100% 47%;
}
@media screen and (max-width:640px){ /* == device-width < 640 == */
	#Main .pager{padding:0 0 8px 0;}
	#Main .pager ul{padding:0 0 25px 0;}
	#Main .pager ul li a,
	#Main .pager ul li span{
		padding:0 7px;
		font-size:108%;
	}
	#Main .pager ul li a.prev,
	#Main .pager ul li span.prev{
		padding-left:18px;
		-webkit-background-size:5px auto;
		background-size:5px auto;
		background-position:0 43%;
	}
	#Main .pager ul li a.next,
	#Main .pager ul li span.next{
		padding-right:18px;
		-webkit-background-size:5px auto;
		background-size:5px auto;
		background-position:100% 43%;
	}
}



/*-------------------------------------
Contact
---------------------------------------*/
#Contact{
	margin:0;
	padding:0 0 100px;
}
@media screen and (max-width:640px){ 
	#Contact{
		padding:0 0 40px;
		margin:0;
	}
}


/*-------------------------------------
other
---------------------------------------*/
#Main aside.other{
	width:74%;
	display:table;
	position:relative;
	margin:0 auto 100px auto;
}
@media screen and (max-width:640px){ /* == device-width < 640 == */
	#Main aside.other{
		width:auto;
		display:block;
		margin:0 0 35px 0;
	}
}

/* h3
---------------------*/
#Main aside.other h3{
	width:23.5%;
	position:absolute;
	top:50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	display:table-cell;
	font-size:154%;
	text-align:right;
	line-height:1;
	letter-spacing:0.11em;
	vertical-align:middle;
}
@media screen and (max-width:640px){ /* == device-width < 640 == */
	#Main aside.other h3{
		width:auto;
		position:static;
		top:auto;
		-webkit-transform:translateY(0);
		transform:translateY(0);
		display:block;
		margin:0 0 12px 0;
		font-size:108%;
		text-align:center;
		line-height:1;
	}
	#Main aside.other h3:after{
		content:"";
		width:12px;
		height:1px;
		display:block;
		margin:12px auto;
		background-color:#131313;
	}
}

/* p
---------------------*/
#Main aside.other p{
	width:70%;
	display:table-cell;
	float:right;
	padding:0 0 0 3.3%;
	font-size:108%;
	border-left:1px solid #131313;
}
@media screen and (max-width:640px){ /* == device-width < 640 == */
	#Main aside.other p{
		width:auto;
		display:block;
		float:none;
		padding:0;
		font-size:77%;
		text-align:center;
		border-left:none;
	}
}