@charset "Shift_JIS";


/* MainBOX
----------------------------------------------------*/

#kakomi {

	margin		: 0px;
	padding		: 20px 30px 0 30px;
	float		: left;
	position	: relative;
	overflow	: visible;
}

	
/* INFO
----------------------------------------------------*/

.title_info {
	width		: 900px;
	height		: 105px;
	background: url(../info/title_info.jpg) no-repeat #FCC;
}

#infol{
	float: left;
	width: 300px;
	margin-bottom: 10px;
}

#infor{
	float: right;
	width: 500px;
	margin-bottom: 30px;
	/*background-color:blue;*/
}

#infor dt, dd {
	overflow	: visible;
}

#infor2{
	clear: both;
	width: 840px;
	margin-bottom: 30px;
	overflow	: visible;
	/*background-color:purple;*/
}

#infor2 div {
	overflow	: visible;
}

#imgarea{
	clear: both;
	overflow	: visible;
}

#imgarea img {
	paddint		: 0px 0px 0px 0px;
	/*float		: left;*/
}

.info_img_1, .info_img_2, .info_img_3 {
	margin		: 0px 8px 8px 0px;
}

.info_img_4 {
	margin		: 0px 0px 8px 0px;
}

.history {
	width: 100%;
	padding-bottom: 20px;
}

.history dl {
	width: 100%;
}

.history dt {
	width: 6em;
	float: left;
	padding-bottom: 1px;
	color: #83A545;
}
.history dd {
	padding-left: 6em;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 0.5em;
}

@media screen and (max-width: 980px) {
	/* INFO
	----------------------------------------------------*/

	.title_info {
		width		: 700px;
		height		: 105px;
		background: url(../info/title_info_700.jpg) no-repeat #FCC;
	}

	#infol{
		float: left;
		width: 300px;
		margin		: 0px 0px 10px 0px;
		/*margin-bottom: 10px;*/
	}

	#infor{
		float: right;
		width: 320px;
		margin		: 0px 0px 30px 0px;
		/*margin-bottom: 30px;*/
	}

	#infor2{
		clear: both;
		width: 640px;
		margin-bottom: 30px;
		overflow	: visible;
	}

	#imgarea{
		width: 640px;
		margin		: 0px 0px 10px 0px;
		clear: both;
		overflow	: visible;
	}

	#imgarea img {
		paddint		: 0px 0px 0px 0px;
		float		: left;
	}

	.info_img_1, .info_img_2, .info_img_4 {
		margin		: 0px 15px 8px 0px;
	}

	.info_img_3 {
		margin		: 0px 0px 8px 0px;
	}
}

@media screen and (max-width: 750px) {

	/* INFO
	----------------------------------------------------*/

	.title_info {
		width		: 500px;
		height		: 105px;
		background: url(../info/title_info_500.jpg) no-repeat #FCC;
	}

	#infol{
		clear	: both;
		width: 440px;
		margin		: 0px 0px 10px 0px;
		/*margin-bottom: 10px;*/
		background-color	: #FFF0F0;
	}

	#infol img {
		margin	: 0px auto 0px auto;
		display	: block;
	}

	#infor{
		clear	: both;
		width: 440px;
		margin		: 0px 0px 30px 15px;
		/*margin-bottom: 30px;*/
	}

	#infor2{
		clear: both;
		width: 440px;
		margin-bottom: 30px;
		overflow	: visible;
	}

	#imgarea{
		width: 430px;
		margin		: 0px 0px 10px 0px;
		clear: both;
	}

	#imgarea img {
		paddint		: 0px 0px 0px 0px;
	}

	.info_img_1, .info_img_3 {
		margin		: 0px 15px 8px 0px;
		float		: left;
	}

	.info_img_2, .info_img_4 {
		margin		: 0px 0px 8px 15px;
		float		: right;
	}
}

@media screen and (max-width: 500px) {
	/* INFO
	----------------------------------------------------*/

	.title_info {
		width	:100%;
		height	: auto;
		background: url(../info/title_info_500.jpg) no-repeat #FCC;
		background-size:contain;
		aspect-ratio: 5 / 1.062;
	}

	#infol{
		clear	: both;
		width: 100%;
		margin		: 0px 0px 10px 0px;
		/*margin-bottom: 10px;*/
		background-color	: #FFF0F0;
	}

	#infol img {
		margin	: 0px auto 0px auto;
		display	: block;
	}

	#infor{
		clear	: both;
		width: 100%;
		margin		: 0px 0px 30px 15px;
		/*margin-bottom: 30px;*/
	}

	#infor2{
		clear: both;
		width: 100%;
		margin-bottom: 30px;
		overflow	: visible;
	}

	#imgarea {
		width: 100%;
		margin		: 0px 0px 10px 0px;
		clear: both;
		background-color:red;
	}
	#imgarea img {
		paddint		: 0px 0px 0px 0px;
	}
	.info_img_1, .info_img_3 {
		margin		: 0px 4% 8px 0px;
	}
	.info_img_2, .info_img_4 {
		margin		: 0px 0px 8px 0px;
	}
}