@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 %
---------------------------------------------------------------------*/




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



/* List
--------------------- */
#List {
	width: 814px;
	margin: 0 auto;
}
	#List ul li {
		float: left;
	}
	#List ul li.last {
		float: right;
	}


#localNavi {
	display: none !important;
}






/* Contact
--------------------- */
#Contact {
	width: 810px;
	margin: 0 auto;
}

	#Contact .txt {
		text-align: right;
	}
		#Contact .txt span {
			color: #bd0000;
		}

	#Contact .grayBox {
		background: #f1f1f1;
		padding: 10px 30px;
	}
		#Contact .grayBox dl {
			background: url(../../common/img/border_bottom.gif) repeat-x bottom;
			padding: 20px 0;
		}
		#Contact .grayBox dl.last {
			background: none;
			padding: 20px 0 20px 0;
		}
		* html #Contact .grayBox dl {
			zoom: 100%;
		}
		*:first-child+html #Contact .grayBox dl {
			display: inline-block;
		}
		#Contact .grayBox dl:after {
			content: "."; 
			clear: both; 
			height: 0; 
			display: block; 
			visibility: hidden;
		}
			#Contact .grayBox dl dt {
				width: 172px;
				float: left;
				font-size: 14px;
				font-weight: bold;
				letter-spacing: 0.1em;
				text-align: left;
				border: none !important;
				padding:8px 0 0 0 !important;
			}
				#Contact .grayBox dl dt span {
					color: #bd0000;
				}
				
			#Contact .grayBox dl dd {
				width: 577px;
				float: right;
				border: none !important;
				padding: 0 !important;
			}
				#Contact .grayBox dl dd .txtBox01 {
					width: 380px;
					border: solid 1px #e0e0e0;
					background: #fff;
					padding: 10px;
				}
				#Contact .grayBox dl dd .txtBox02 {
					width: 164px;
					border: solid 1px #e0e0e0;
					background: #fff;
					padding: 10px;
				}
				
				#Contact .grayBox dl dd span {
					margin-left: 12px;
				}

				#Contact .grayBox dl dd ul li {
					float: left;
					margin-right: 25px;
				}

				#Contact .grayBox .mt01 {
					padding-top: 12px !important;
				}
				#Contact .grayBox .mt02 {
					padding-top: 15px !important;
				}
				#Contact .grayBox .mt03 {
					padding-top: 130px !important;
				}

				#Contact .grayBox .textarea {
					width: 555px !important;
					height: 264px !important;
					border: solid 1px #e0e0e0;
					background: #fff;
					padding: 10px;
				}


		#Contact #Btn {
			width: 560px;
			margin: 30px auto 0 auto;
		}
			#Contact #Btn li {
				float: left;
			}
			#Contact #Btn li.last {
				float: right;
			}
				#Contact #Btn li button {
					border: none !important;
					background: none !important;
				}






.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) {






/* List
--------------------- */
#List {
	padding: 10% 5%;
}
	#List ul li {
		width: 48%;
		float: left;
	}
	#List ul li.last {
		float: right;
	}
		#List ul li img {
			width: 100%;
			height: auto;
		}







/* Contact
--------------------- */
#Contact {
	padding: 5%;
}

	#Contact .txt {
		text-align: right;
	}
		#Contact .txt span {
			color: #bd0000;
		}

	#Contact .grayBox {
		background: #f1f1f1;
		padding: 10px 30px;
	}
		#Contact .grayBox dl {
			background: url(../../common/img/border_bottom.gif) repeat-x bottom;
			padding: 20px 0;
		}
		#Contact .grayBox dl.last {
			background: none;
			padding: 20px 0 20px 0;
		}
		* html #Contact .grayBox dl {
			zoom: 100%;
		}
		*:first-child+html #Contact .grayBox dl {
			display: inline-block;
		}
		#Contact .grayBox dl:after {
			content: "."; 
			clear: both; 
			height: 0; 
			display: block; 
			visibility: hidden;
		}
			#Contact .grayBox dl dt {
				width: 100%;
				display: block;
				font-size: 14px;
				font-weight: bold;
				letter-spacing: 0.1em;
				text-align: left;
				border: none !important;
			}
				#Contact .grayBox dl dt span {
					color: #bd0000;
				}
				
			#Contact .grayBox dl dd {
				width: 100%;
				display: block;
				border: none !important;
				padding: 0 !important;
			}
				#Contact .grayBox dl dd .txtBox01 {
					width: 94%;
					border: solid 1px #e0e0e0;
					background: #fff;
					padding: 3%;
				}
				#Contact .grayBox dl dd .txtBox02 {
					width: 94%;
					border: solid 1px #e0e0e0;
					background: #fff;
					padding: 3%;
				}
				
				#Contact .grayBox dl dd span {
					display: block;
					padding-top: 5px;
				}

				#Contact .grayBox dl dd ul li {
				}

				#Contact .grayBox .textarea {
					width: 94% !important;
					height: 100px !important;
					border: solid 1px #e0e0e0;
					background: #fff;
					padding: 3%;
				}


		#Contact #Btn {
			margin-top: 7%;
		}
			#Contact #Btn li {
				width: 100%;
				margin-bottom: 3%;
				text-align: center;
			}
			#Contact #Btn li.last {
				margin-bottom: 0;
			}
				#Contact #Btn li button {
					width: 100%;
					text-align: center;
					border: none !important;
					background: none !important;
				}
					#Contact #Btn li img {
						width: 80%;
						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;
	}


}