@charset "UTF-8";
/* CSS Document */



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/


.rightside dl dt.second {
	display: none;
}




/* PC */
@media screen and (min-width:501px), print {
	




.brand{
	width:100%;
	background:#f7f7f7;
	min-width:1040px;
	}


.tit span {
	background: #f7f7f7 !important;
}






#wrapper{
	}
	#wrapper .area{
		margin-bottom:90px;
		}
		#wrapper .area dl{
			width:238px;
			height:349px;
			background:#fff;
			float:left;
			margin:0 29px 29px 0;
		}
		#wrapper .area dl.right {
			margin:0 0 29px 0;
		}
			#wrapper .area dl dd{
				width:238px;
				height:111px;
				background:url(../img/brand_arrow.gif) no-repeat 215px center;
				display: table-cell; 
				vertical-align:middle;
				text-align:center;
			}
				#wrapper .area dl dd img{
					width: 150px;
					height:auto;
				}





.modal{
	width:700px !important;
	padding:120px 90px 70px 90px;
	position:relative;
	}
	.modal .leftside{
		float:left;
		width:215px;
		}
		.modal .leftside .category{
			position:absolute;
			top:0;
			left:0;
			}
			
		.modal .leftside .detail_logo {
			margin-bottom:45px;
			text-align: center;
		}
			.modal .leftside .detail_logo img {
				width: 100%;
				height: auto;
			}
			
		.modal .leftside h3{
			text-align:center;
			margin-bottom:25px;
			font-size:15px;
			font-weight:bold;
			line-height:23px;
			}
		.modal .leftside p{
			}
		.modal .leftside ul{
			margin-top:25px;
			border-top:1px solid #dbdbdb;
			}
		.modal .leftside ul li{
			border-bottom:1px solid #dbdbdb;
			padding:5px;
			}
		.modal .leftside ul li dl dt{
			min-width:75px;
			float:left;
			margin-right:5px;
			}
		.modal .leftside ul li dl dd{
			float:left;
			}
			
	.modal .rightside{
		float:right;
		width:420px;
		position:relative;
	}
		.modal .rightside .pht{
			width:420px;
			height:250px;
			display: table-cell; 
			vertical-align:middle;
    		text-align:center;
			}
				.modal .rightside .pht img{
					width:auto;
				}
			
		.modal .rightside dl {
			margin-top:50px;
			margin-right: 0 !important;
		}
		* html .modal .rightside dl {
			zoom: 100%;
		}
		*:first-child+html .modal .rightside dl {
			display: inline-block;
		}
		.modal .rightside dl:after {
			content: "."; 
			clear: both; 
			height: 0; 
			display: block; 
			visibility: hidden;
		}
			.modal .rightside dl dt {
				float:left;
				margin-right:5px;
			}
			.modal .rightside dl dd {
				float:right;
			}


	.fancybox-skin {
		padding:10px !important;
	}


}






/* スマホ */
@media only screen and (max-width: 500px) {


.brand{
	background:#f7f7f7;
}



.tit span {
	background: #f7f7f7 !important;
}




#wrapper{
	padding-top: 10%;
}
	#wrapper .area{
		padding: 5% 5% 10% 5%;
	}
		#wrapper .area dl {
			width:48%;
			background:#fff;
			float:left;
			margin:0 1% 2% 1%;
		}
			#wrapper .area dl dt{
				width:100%;
				}
				#wrapper .area dl dt img{
					width:100%;
					height:auto;
				}
			#wrapper .area dl dd{
				width:300px;
				height:90px;
				background:url(../img/brand_arrow.gif) no-repeat 95% center;
				display: table-cell; 
				vertical-align:middle;
				text-align:center;
			}
				#wrapper .area dl dd img{
					width: 70%;
					height:auto;
				}









.modal{
	width: 94% !important;
	padding: 15% 3% 3% 3%;
	margin:0 auto;
	position:relative;
}
	.modal .leftside{
		padding: 0 5%;
	}
		.modal .leftside .category {
			position:absolute;
			top:0;
			left:0;
		}
		
		.modal .leftside p {
			font-size: 12px;
		}
			
		.modal .leftside .detail_logo {
			width: 100%;
			margin-bottom: 5%;
			text-align: center;
		}
			.modal .leftside .detail_logo img {
				width: 60%;
				height: auto;
			}	
			
		.modal .leftside h3{
			text-align:center;
			font-size: 14px;
			font-weight:bold;
			line-height:23px;
			margin-bottom: 3%;
		}
		
		.modal .leftside ul{
			margin-top:3%;
			border-top:1px solid #dbdbdb;
		}
			.modal .leftside ul li{
				border-bottom:1px solid #dbdbdb;
				padding:1%;
				font-size: 12px;
			}
				.modal .leftside ul li dl dt{
					min-width:30%;
					float:left;
					margin-right:2%;
				}
				.modal .leftside ul li dl dd{
					float:left;
				}
			
			
			
	.modal .rightside{
		padding: 0 5%;
	}
		.modal .rightside .pht{
			width: 100%;
    		text-align:center;
			padding-top: 5%;
		}
			.modal .rightside .pht img{
				width: 60%;
				height: auto;
			}
			
		.modal .rightside dl{
			width: 100%;
			margin-top: 3%;
			text-align: center;
			margin-right: 0 !important;
		}
			.modal .rightside dl dt{
				margin-bottom: 3%;
			}
			.modal .rightside dl dd{
			}
				.modal .rightside dl img{
					width: 70%;
					height: auto;
				}




	.fancybox-skin {
		padding: 3% !important;
	}
	.fancybox-wrap{
		width: 80% !important;
	}
	.fancybox-inner{
		width: 100% !important;
	}

}