@charset "utf-8";

#Content{
	padding: 126px 0 60px;
}

@media screen and (max-width: 767px){
	#Content{
		padding: 52px 0 40px;
	}
}

/*-----------------------------------------------------
Main
-------------------------------------------------------*/
#Main{
	width: 980px;
	overflow: hidden;
	position: relative;
	margin: 0 auto;
}

@media screen and (max-width: 767px){
	#Main{
		width: auto;
		margin: 0 20px;
	}
}


/*-------------------------------------
section
---------------------------------------*/
#Main section{
	overflow: hidden;
	position: relative;
	margin: 0 0 60px;
}

#Main section img{
	width: 100%;
	height: auto;
}

/* image
---------------------*/
#Main section p.image{
	width: 470px;
	height: 330px;
	float: left;
	margin: 50px 0 0;
}
#Main section p.image a{
	width: 470px;
	height: 330px;
	display: block;
}
#Main section p.image img{
	display: none;
}

#Main section.kutsushitaya p.image{
	background: url(/jp/corporate/brand/images/kutsushitaya_img.jpg) no-repeat 50% 50%;
	background-size: cover;
}
#Main section.tabio p.image{
	background: url(/jp/corporate/brand/images/tabio_img.jpg) no-repeat 50% 50%;
	background-size: cover;
}
#Main section.tabio_men p.image{
	background: url(/jp/corporate/brand/images/TM_560-346_0.jpg) no-repeat 50% 50%;
	background-size: cover;
}

/* inline
---------------------*/
#Main section div.inline{
	width: 490px;
	position: absolute;
	left:410px;
	top:0;
	padding: 4px 40px 40px;
	background: #fff;
}

/* h2 */
#Main section div.inline h2 img{
	width: 110px;
	height: auto;
}

/* p */
#Main section div.inline p{
	margin: 0 0 30px;
	line-height: 1.7;
	letter-spacing: 0.05em;
}

/* link */
#Main section div.inline ul.link{
	text-align: right;
	font-size: 0;
}
#Main section div.inline ul.link li{
	display: inline-block;
	margin: 0 0 0 15px;
	font-size: 12px;
}
#Main section div.inline ul.link li:first-child{
	margin: 0;
}
/*#Main section div.inline ul.link li.brand{
	display: block;
	margin-top: 12px;
}*/
#Main section div.inline ul.link li a{
	position: relative;
	padding: 0 16px 0 0;
}
#Main section div.inline ul.link li a span{
	width: 7px;
	height: 7px;
	display: block;
	position: absolute;
	top:3px;
	right:3px;
	background: url(/jp/corporate/common/images/ico_arw.png) no-repeat 100% 0;
}

@media screen and (min-width: 768px){
	#Main section div.inline ul.link li a span{
		-webkit-transition: right .2s;
		   -moz-transition: right .2s;
		    -ms-transition: right .2s;
		     -o-transition: right .2s;
		        transition: right .2s;
	}
	#Main section div.inline ul.link li a:hover span{
		right:0;
	}
}
@media screen and (max-width: 767px){
	#Main section{
		margin: 0 0 20px;
	}

	/* image
	---------------------*/
	#Main section p.image{
		width: auto;
		height: auto;
		float: none;
		position: relative;
		top:0;
		left: 0;
		margin: 0;
	}
	#Main section p.image a{
		width: auto;
		height: auto;
	}
	#Main section p.image img{
		display: inline;
	}

	/* inline
	---------------------*/
	#Main section div.inline{
		width: auto;
		position: relative;
		margin: 0;
		padding: 0 20px 20px;
		top:auto;
		left:auto;
		font-size: 11px;
	}

	/* h2 */
	#Main section div.inline h2{
		padding: 23px 0 20px;
		text-align: center;
	}
	#Main section div.inline h2 img{
		width: 240px;
		height: auto;
	}

	/* p */
	#Main section div.inline p{
		margin: 0 0 15px;
		line-height: 1.8;
	}

	/* link */
	#Main section div.inline ul.link li{
		margin: 0 0 0 15px;
		font-size: 11px;
	}
	#Main section div.inline ul.link li a{
		padding: 0 13px 0 0;
	}
	#Main section div.inline ul.link li a span{
		width: 7px;
		height: 7px;
		top:3px;
		right:0;
		background: url(/jp/corporate/common/images/ico_arw_sp.png) no-repeat 100% 0;
		background-size: 7px 7px;
	}
}

/*-------------------------------------
wrap
---------------------------------------*/
/* wrap
---------------------*/
#Main div.wrap{
	width: 1020px;
	overflow: hidden;
}

/* section
---------------------*/
#Main div.wrap section{
	width: 300px;
	float: left;
	margin: 0 40px 60px 0;
}

/* image */
#Main div.wrap section p.image{
	width: 300px;
	height: auto;
	position: relative;
	top:0;
	left: 0;
	margin: 0;
	float: none;
}
#Main div.wrap section p.image a{
	width: 300px;
	height: auto;
}
#Main div.wrap section p.image img{
	display: inline;
}

/* inline */
#Main div.wrap section div.inline{
	width: auto;
	position: relative;
	margin: 0;
	left:auto;
	top:auto;
	padding: 1px 30px 36px;
}

/* h2 */
#Main div.wrap section div.inline h2{
	text-align: center;
}
#Main div.wrap section div.inline h2 img{
	width: 240px;
	height: auto;
}

@media screen and (max-width: 767px){
	/* wrap
	---------------------*/
	#Main div.wrap{
		width: auto;
	}
	/* section
	---------------------*/
	#Main div.wrap section{
		width: auto;
		float: left;
		margin: 0 0 20px;
	}

	/* image */
	#Main div.wrap section p.image{
		width: 100%;
	}
	#Main div.wrap section p.image a{
		width: auto;
		height: auto;
	}

	/* inline */
	#Main div.wrap section div.inline{
		width: auto;
		position: relative;
		margin: 0;
		padding: 0 20px 20px;
	}
}