@charset "utf-8";

/*-----------------------------------------------------
Content
-------------------------------------------------------*/
#Content{
	padding: 0;
	background: #fff;
}


/*-----------------------------------------------------
MV
-------------------------------------------------------*/
#MV{
	width: 100%;
	position: relative;
}
#MV div.inline{
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	background: #000;
}
#MV div.inline li img{
	width: 100%;
	height: auto;
	position: absolute;
	top:50%;
	left:50%;
	display: none;
}
#MV div.inline ul{
	display: none;
}
#MV span{
	width: 100%;
	height: 100%;
	position: absolute;
	display: none;
	/*background: url(/jp/corporate/images/mv_bg.png) repeat 50% 0;*/
}
#MV p.loading{
	width: 72px;
	height: 8px;
	position: absolute;
	top:50%;
	left:50%;
	margin: -4px 0 0 -36px;
	z-index: 10;
}
#MV p.loading span{
	width: 72px;
	height: 8px;
	display: block;
	background: url(/jp/corporate/common/images/loading.gif) no-repeat 0 0;
}
#MV p.last{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
	background: #000;
	z-index: 10;
	display: none;
}
#MV p.last img{
	width: 183px;
	height: 27px;
	position: absolute;
	top:50%;
	left:50%;
	margin: -14px 0 0 -92px;
}
#MV p.tablet{
	width: 100%;
	height: 100%;
	z-index: 10;
	display: none;
}

@media screen and (max-width: 767px){
	#MV{
		background: #000;
	}
	#MV div.inline{
		opacity: 1;
	}
	#MV div.inline ul{
		display: block;
	}
	#MV div.inline ul li{
		overflow: hidden;
		opacity: 0;
		position: absolute;
		top:0;
		left:0;
		z-index: 0;
	}
	#MV div.inline ul li:last-child{
		opacity: 1;
	}
	#MV div.inline ul li img{
		width: 100%;
		height: auto;
		position: absolute;
		top:0;
		left:0;
		display: inline;
	}

	#MV p.loading{
		width: 100%;
		height: 100%;
		margin: 0;
		top:0;
		left:0;
		background: #fff;
	}
	#MV p.loading span{
		width: 60px;
		height: 6px;
		display: block;
		position: absolute;
		top:50%;
		left:50%;
		margin: -3px 0 0 -30px;
		background: url(/jp/corporate/common/images/loading_sp.gif) no-repeat 0 0;
		background-size: 60px 6px;
	}
}

/*-----------------------------------------------------
Main
-------------------------------------------------------*/
/* ttl
---------------------*/
#Main .ttl{
	font-size: 18px;
	margin: 0 0 45px;
}

@media screen and (max-width: 767px){
	/* ttl
	---------------------*/
	#Main .ttl{
		margin: 0 0 30px;
		font-size: 14px;
	}

}
/*-------------------------------------
common
---------------------------------------*/
/* section
---------------------*/
#Main section{
	padding: 87px 0 85px;	
}

/* wrap
---------------------*/
#Main div.wrap{
	width: 980px;
	overflow: hidden;
	margin: 0 auto;
}

@media screen and (max-width: 767px){
	/* section
	---------------------*/
	#Main section{
		padding: 42px 0 43px;	
	}

	/* wrap
	---------------------*/
	#Main div.wrap{
		width: 100%;
	}
}

/*-------------------------------------
brand
---------------------------------------*/
#Main section.brand{
	padding: 87px 0 71px;
}
#Main section.brand ul{
	width: 980px;
	overflow: hidden;
	margin: 0 auto;
}
#Main section.brand ul li{
	width: 176px;
	float: left;
	margin: 0 92px 0 0;
}
#Main section.brand ul li#brand04,
#Main section.brand ul li#brand08{
	margin-right:0;
}
#Main section.brand ul li a{
	width: 176px;
	display: block;
	padding: 47px 0;
}
#Main section.brand ul li a svg{
	width: 176px;
	height: 88px;
}
#Main section.brand ul li a svg path{
	fill:#999;
}
/*#Main section.brand ul li.brand01 a,
#Main section.brand ul li.brand02 a,
#Main section.brand ul li.brand03 a,
#Main section.brand ul li.brand04 a{
	height: 42px;
}
#Main section.brand ul li.brand05 a,
#Main section.brand ul li.brand06 a,
#Main section.brand ul li.brand07 a,
#Main section.brand ul li.brand08 a{
	height: 85px;
}*/
/*#Main section.brand ul li.brand01 a{background: url(/jp/corporate/images/brand_logo01.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand02 a{background: url(/jp/corporate/images/brand_logo02.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand03 a{background: url(/jp/corporate/images/brand_logo03.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand04 a{background: url(/jp/corporate/images/brand_logo04.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand05 a{background: url(/jp/corporate/images/brand_logo05.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand06 a{background: url(/jp/corporate/images/brand_logo06.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand07 a{background: url(/jp/corporate/images/brand_logo07.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand08 a{background: url(/jp/corporate/images/brand_logo08.png) no-repeat 50% 50%;}*/

@media screen and (min-width: 768px){
/*#Main section.brand ul li.brand01 a:hover{background: url(/jp/corporate/images/brand_logo01_on.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand02 a:hover{background: url(/jp/corporate/images/brand_logo02_on.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand03 a:hover{background: url(/jp/corporate/images/brand_logo03_on.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand04 a:hover{background: url(/jp/corporate/images/brand_logo04_on.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand05 a:hover{background: url(/jp/corporate/images/brand_logo05_on.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand06 a:hover{background: url(/jp/corporate/images/brand_logo06_on.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand07 a:hover{background: url(/jp/corporate/images/brand_logo07_on.png) no-repeat 50% 50%;}
#Main section.brand ul li.brand08 a:hover{background: url(/jp/corporate/images/brand_logo08_on.png) no-repeat 50% 50%;}*/
}
@media screen and (max-width: 767px){
	#Main section.brand{
		padding: 42px 0 36px;
	}
	#Main section.brand h2.ttl{
		margin: 0 0 10px;
	}
	#Main section.brand ul{
		width: 300px;
	}
	#Main section.brand ul li{
		width: 120px;
		margin: 0 15px;
	}
	#Main section.brand ul li#brand04,
	#Main section.brand ul li#brand08{
		margin-right:15px;
	}
	#Main section.brand ul li a{
		width: 120px;
		display: block;
		padding: 15px 0;
	}
	#Main section.brand ul li a svg{
		width: 120px;
		height: 60px;
	}
	/*#Main section.brand ul li.brand01 a,
	#Main section.brand ul li.brand02 a,
	#Main section.brand ul li.brand03 a,
	#Main section.brand ul li.brand04 a,
	#Main section.brand ul li.brand05 a,
	#Main section.brand ul li.brand06 a{
		height: 35px;
	}
	#Main section.brand ul li.brand07 a,
	#Main section.brand ul li.brand08 a{
		height: 50px;
	}
	#Main section.brand ul li.brand01 a{background: url(/jp/corporate/images/brand_logo01_sp.png) no-repeat 50% 50%;background-size:120px auto;}
	#Main section.brand ul li.brand02 a{background: url(/jp/corporate/images/brand_logo02_sp.png) no-repeat 50% 50%;background-size:120px auto;}
	#Main section.brand ul li.brand03 a{background: url(/jp/corporate/images/brand_logo03_sp.png) no-repeat 50% 50%;background-size:120px auto;}
	#Main section.brand ul li.brand04 a{background: url(/jp/corporate/images/brand_logo04_sp.png) no-repeat 50% 50%;background-size:120px auto;}
	#Main section.brand ul li.brand05 a{background: url(/jp/corporate/images/brand_logo05_sp.png) no-repeat 50% 50%;background-size:120px auto;}
	#Main section.brand ul li.brand06 a{background: url(/jp/corporate/images/brand_logo06_sp.png) no-repeat 50% 50%;background-size:120px auto;}
	#Main section.brand ul li.brand07 a{background: url(/jp/corporate/images/brand_logo07_sp.png) no-repeat 50% 50%;background-size:120px auto;}
	#Main section.brand ul li.brand08 a{background: url(/jp/corporate/images/brand_logo08_sp.png) no-repeat 50% 50%;background-size:120px auto;}*/
}


/*-------------------------------------
topics
---------------------------------------*/
#Main section.topics{
	background: #f5f5f5;
}

/* p
---------------------*/
#Main section.topics p{
	position: relative;
	margin: 26px 0 0;
}
#Main section.topics p a{
	display: block;
	padding: 0 15px 0 0;
	text-align: center;
	font-family: 'Lora', serif;
}
#Main section.topics p a span{
	width: 7px;
	height: 7px;
	position: absolute;
	top:5px;
	left:50%;
	margin: 0 0 0 40px;
	background: url(/jp/corporate/common/images/ico_arw.png) no-repeat 100% 0;
}

@media screen and (min-width: 768px){
	#Main section.topics p a span{
		-webkit-transition: margin .2s;
		   -moz-transition: margin .2s;
		    -ms-transition: margin .2s;
		     -o-transition: margin .2s;
		        transition: margin .2s;
	}
	#Main section.topics p a:hover span{
		margin:0 0 0 43px;
	}
}

@media screen and (max-width: 767px){
	/* p
	---------------------*/
	#Main section.topics p{
		margin: 20px 20px 0;
	}
	#Main section.topics p a{
		padding: 0 15px 0 0;
		text-align: right;
		font-size: 11px;
	}
	#Main section.topics p a span{
		width: 7px;
		height: 7px;
		top:4px;
		left:auto;
		right:0;
		margin: 0;
		background: url(/jp/corporate/common/images/ico_arw_sp.png) no-repeat 100% 0;
		background-size: 7px 7px;
	}
}

/*-------------------------------------
news
---------------------------------------*/
#Main section.news{
	width: 490px;
	float: left;
}
#Main section.news dl dt{
	margin: 0 0 5px;
	color: #888;
	font-size: 12px;
	font-family: 'Lora', serif;
	letter-spacing: 0.08em;
}
#Main section.news dl dd{
	margin: 0 0 30px;
}

/* p
---------------------*/
#Main section.news p{
	position: relative;
	margin: 54px 0 0;
}
#Main section.news p a{
	display: block;
	padding: 0 15px 0 0;
	text-align: center;
	font-family: 'Lora', serif;
}
#Main section.news p a span{
	width: 7px;
	height: 7px;
	position: absolute;
	top:5px;
	left:50%;
	margin: 0 0 0 34px;
	background: url(/jp/corporate/common/images/ico_arw.png) no-repeat 100% 0;
}

@media screen and (min-width: 768px){
	#Main section.news dd a{
		border-bottom:1px solid #fff;
		-webkit-transition: all .25s;
		   -moz-transition: all .25s;
		    -ms-transition: all .25s;
		     -o-transition: all .25s;
		        transition: all .25s;
	}
	#Main section.news p a span{
		-webkit-transition: margin .2s;
		   -moz-transition: margin .2s;
		    -ms-transition: margin .2s;
		     -o-transition: margin .2s;
		        transition: margin .2s;
	}
	#Main section.news dd a:hover{
		border-bottom:1px solid #666;
	}
	#Main section.news p a:hover span{
		margin: 0 0 0 37px;
	}
}

@media screen and (max-width: 767px){
	#Main section.news{
		width: auto;
		float: none;
		margin: 0 20px;
	}
	#Main section.news dl dt{
		margin: 0 0 5px;
		font-size: 10px;
	}
	#Main section.news dl dd{
		font-size: 11px;
		margin: 0 0 25px;
	}
	#Main section.news dl dd a{
		display: block;
	}

	/* p
	---------------------*/
	#Main section.news p{
		position: relative;
		margin:0;
	}
	#Main section.news p a{
		padding: 0 15px 0 0;
		text-align: right;
		font-size: 11px;
	}
	#Main section.news p a span{
		width: 7px;
		height: 7px;
		top:4px;
		left:auto;
		right:0;
		margin: 0;
		background: url(/jp/corporate/common/images/ico_arw_sp.png) no-repeat 100% 0;
		background-size: 7px 7px;
	}
}

/*-------------------------------------
social
---------------------------------------*/
#Main section.social{
	width: 400px;
	float: right;
}
#Main section.social ul li{
	margin: 30px 0 0;
}
#Main section.social ul li:first-child{
	margin: 0;
}
#Main section.social ul li a{
	width: 398px;
	height: 68px;
	display: block;
	position: relative;
	font-size:14px;
	font-family: 'Lora', serif;
	text-align: center;
	line-height: 68px;
	border: 1px solid #888;
}
#Main section.social ul li a svg{
	width: 20px;
	height: 20px;
	position: absolute;
	top:24px;
	left:35px;
}
#Main section.social ul li a svg path{
	fill:#666;
}

@media screen and (max-width: 767px){
	#Main section.social{
		width: auto;
		float: none;
		margin: 0 20px;
		padding: 0 0 45px;
	}
	#Main section.social ul li{
		margin: 15px 0 0;
	}
	#Main section.social ul li:first-child{
		margin: 0;
	}
	#Main section.social ul li a{
		width: auto;
		height: 43px;
		font-size:12px;
		line-height: 43px;
	}
	#Main section.social ul li a svg{
		width: 13px;
		height: 13px;
		top:15px;
		left:24px;
	}
}


/*-------------------------------------
shop
---------------------------------------*/
#Main section.shop{
	background: #f5f5f5;
}

/* domestic,oversea
---------------------*/
#Main section.shop div.domestic,#Main section.shop div.oversea{
	text-align: center;
}
#Main section.shop div dl{
	overflow: hidden;
	font-size: 14px;
}
#Main section.shop div dl dt,
#Main section.shop div dl dd{
 	display: inline-block;  
    *display: inline;  
    *zoom: 1; 
}
#Main section.shop div dl dt{
	padding: 0 35px 0 0;
	border-right:1px solid #999;
}
#Main section.shop p.map img{
	width: 100%;
	height: auto;
}

/* domestic
---------------------*/
#Main section.shop div.domestic{
	width: 375px;
	float: left;
}
#Main section.shop div.domestic dd{
	padding: 0 0 0 25px;
}
#Main section.shop div.domestic dd a{
	padding: 0 0 0 25px;
	background: url(/jp/corporate/images/shop_ico_search.png) no-repeat 0 0.1ex;
}
#Main section.shop div.domestic p.map{
	width: 265px;
	margin: 0 auto 31px;
}

/* oversea
---------------------*/
#Main section.shop div.oversea{
	width: 420px;
	float: right;
}
#Main section.shop div.oversea dl dt{
	padding: 0 25px 0 0;
}
#Main section.shop div.oversea dd{
	padding:0 0 0 25px;
}
#Main section.shop div.oversea p.map{
	width: 272px;
	margin: 0 auto 45px;
}

@media screen and (min-width: 768px){
	#Main section.shop div dl dd a{
		border-bottom:1px solid #f5f5f5;
		-webkit-transition: all 0.25s;
		        transition: all 0.25s;
	}
	#Main section.shop div dl dd a:hover{
		border-bottom:1px solid #666;
	}
}

@media screen and (max-width: 767px){
	/* domestic,oversea
	---------------------*/
	#Main section.shop div.domestic,#Main section.shop div.oversea{
		text-align: center;
	}
	#Main section.shop div dl{
		overflow: hidden;
		font-size: 11px;
	}
	#Main section.shop div dl dt,
	#Main section.shop div dl dd{
	 	display: inline-block;  
	    *display: inline;  
	    *zoom: 1; 
	}
	#Main section.shop div dl dt{
		padding: 0 19px 0 0;
	}

	/* domestic
	---------------------*/
	#Main section.shop div.domestic{
		width: auto;
		float: none;
		margin: 0 0 25px;
	}
	#Main section.shop div.domestic dd{
		padding:0 0 0 20px;
	}
	#Main section.shop div.domestic dd a{
		padding: 0 0 0 13px;
		background: url(/jp/corporate/images/shop_ico_search.png) no-repeat 0 0.3ex;
		background-size: 10px 10px;
	}
	#Main section.shop div.domestic p.map{
		width: 150px;
		margin: 0 auto 12px;
	}

	/* oversea
	---------------------*/
	#Main section.shop div.oversea{
		width: auto;
		float: none;
	}
	#Main section.shop div.oversea dd{
		padding:0 0 0 20px;
	}
	#Main section.shop div.oversea p.map{
		width: 150px;
		margin: 0 auto 10px;
	}
}