
/******************************************/
/*##################################################################################################*/

@media (min-width:768px) {
body { margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;
	background-color:#fff;
	height:200%;
        width:100%;
	word-break: break-all;
	background:url(../img/con_bg01.jpg);
	background-repeat:repeat;
}
.top_img{
	margin-top:65px;
	padding:145px 0px 0px 0px;
        width:100%;
        height:175px;
	color:#ff0000;
	font-size:38px;
	font-weight:bold;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	text-align:center;
	display:block;
	background:url(../img/about/top_img.jpg);
	background-repeat:no-repeat;
background-size:cover;
}

.top_img .txtc{
	font-size:14px;
	font-weight:normal;
	color:#fff;
	text-align:center;

}

.title_box{
	width:900px;
	margin:200px auto 0px auto;
	padding:0px;
}
.title_box .midashi01{
	width:100%;
	height:45px;
	margin:0px auto;
	padding:0px;
	text-align:center;
	font-size:38px;
	font-weight:bold;
	color:#ff0000;
        letter-spacing: 0.1px;
font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
}
.title_box .txtc{
	font-size:16px;
	font-weight:normal;
	color:#fff;
	text-align:center;

}

.about_box{
	width:1000px;
	margin:0px auto 80px auto;
	padding:0px;
	overflow: hidden;

}

/*left*/
.about_box .box{
	width:900px;
	height:407px;
	margin:70px auto 0px auto;
	position:relative;
}

.about_box .box .img_box01{
	width:900px;
	height:407px;
	margin:0px;
}
.about_box .box .img_box01 img{
	width:598px;
	height:407px;
	text-align:right;
	float:right;
}
.about_box .box .btn_box{
	width:404px;
	height:390px;
	text-align:left;
	color:#000;
	top:25px;
	font-size:14px;
	position:absolute;
}
.about_box .box .btn_box .btn a{
	width:404px;
	height:225px;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_wh.gif);
	background-repeat:no-repeat;
	background-position:center right;
}
.about_box .box .btn_box .btn a:hover{
	width:404px;
	height:225px;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_red.gif);
	background-repeat:no-repeat;
	background-position:center right;
}
.about_box .box .btn_box .btn a .yaku {
	padding-top:120px;
	margin:0px 0px 0px 35px;
	font-size:16px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:200%;
	z-index:1;
}
.about_box .box .btn_box .btn a .title {
	margin:0px 0px 0px 35px;
	font-size:30px;
	font-weight:bold;
	color:#e10000;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box .btn_box .btn:hover .title {
	margin:0px 0px 0px 35px;
	font-size:30px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box .btn_box .txtbox {
	width:285px;
	margin:15px 0px 0px 0px;
	font-size:16px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;
}

/*right*/
.about_box .box02{
	width:1000px;
	height:407px;
	margin:70px auto 0px auto;
	position:relative;
}

.about_box .box02 .img_box01{
	width:1000px;
	height:407px;
	margin:0px;
}
.about_box .box02 .img_box01 img{
	width:598px;
	height:407px;
	text-align:right;
	float:left;
	margin-left:100px;
}
.about_box .box02 .btn_box02{
	width:404px;
	height:390px;
	text-align:left;
	color:#000;
	top:25px;
	right:0;
	font-size:14px;
	position:absolute;
}
.about_box .box02 .btn_box02 .btn a{
	width:404px;
	height:225px;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_wh.gif);
	background-repeat:no-repeat;
	background-position:center right;
}
.about_box .box02 .btn_box02 .btn a:hover{
	width:404px;
	height:225px;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_red.gif);
	background-repeat:no-repeat;
	background-position:center right;
}
.about_box .box02 .btn_box02 .btn a .yaku {
	padding-top:120px;
	margin:0px 0px 0px 35px;
	font-size:16px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:200%;
	z-index:1;
}
.about_box .box02 .btn_box02 .btn a .title {
	margin:0px 0px 0px 35px;
	font-size:30px;
	font-weight:bold;
	color:#e10000;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box02 .btn_box02 .btn:hover .title {
	margin:0px 0px 0px 35px;
	font-size:30px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box02 .btn_box02 .txtbox {
	width:285px;
	margin:15px 0px 0px 119px;
	font-size:16px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;
}





.midashi{
	width:100%;
	height:45px;
	margin:0px auto;
	padding:0px;
	text-align:center;
	font-size:28px;
	font-weight:bold;
	color:#000;
}



.mr5{
margin-right:5%;
}
.ml5{
margin-left:5%;
}
.mr3{
margin-right:3%;
}

}

/******************************************/
/*##################################################################################################*/

@media screen and (min-width:768px) and ( max-width:1000px) {
body { margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;
	background-color:#fff;
	height:200%;
        width:100%;
	word-break: break-all;
	background:url(../img/con_bg01.jpg);
	background-repeat:repeat;
}
.top_img{
	margin-top:65px;
	padding-top:10vw;
	width: 100vw;
	height: 20vw;
	color:#ff0000;
	font-size:32px;
	font-weight:bold;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	text-align:center;
	line-height:100%;
	display:block;
	background:url(../img/about/top_img.jpg);
	background-repeat:no-repeat;
	/*background-size:cover;*/
	background-size:contain;
	background-repeat:no-repeat;
background-size:100% 100%;
}

.top_img .txtc{
	font-size:14px;
	font-weight:normal;
	color:#fff;
	text-align:center;

}

.about_box{
	width:100%;
	margin:0px auto 80px auto;
	padding:0px;
	overflow: hidden;

}

/*left*/
.about_box .box{
	width:90%;
	margin:5% auto 0px auto;
}

.about_box .box .img_box01{
	width:100%;
	margin:0px;
	text-align:right;
	position: relative;
	z-index:100;
}
.about_box .box .img_box01 img{
	width:65%;
	height:auto;
	text-align:right;
}
.about_box .box .btn_box{
	margin:-400px 0% 0% 0%;
	width:60%;
	text-align:left;
	color:#000;
	font-size:12px;
	position: relative;
	z-index:101;
}
.about_box .box .btn_box .btn a{
	width:85%;
	padding:0% 0% 1% 0%;
	max-height:200x;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_wh.gif);
	background-repeat:no-repeat;
	background-size:90% 90%;	

}
.about_box .box .btn_box .btn a:hover{
	width:85%;
	padding:0% 0% 7% 0%;
	max-height:200px;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_red.gif);
	background-repeat:no-repeat;
	background-size:90% 90%;
}
.about_box .box .btn_box .btn a .yaku {
	margin:0% 0% 0% 8%;
	font-size:12px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:200%;

}
.about_box .box .btn_box .btn a .title {
	margin:0px 0px 0px 8%;
	font-size:26px;
	font-weight:bold;
	color:#e10000;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box .btn_box .btn:hover .title {
	margin:0px 0px 0px 8%;
	font-size:26px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box .btn_box .txtbox {
	width:60%;
	margin:-5% 0% 0px 0px;
	font-size:12px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;
}


/*right*/
.about_box .box02{
	width:100%;
	margin:5% auto 0px auto;
	text-align:right;
}

.about_box .box02 .img_box01{
	width:100%;
	margin:0% 0% 0% 0%;
	text-align:left;
	position: relative;
	z-index:100;
}
.about_box .box02 .img_box01 img{
	margin:0% 0% 0% 10%;
	width:58%;
	height:auto;
	text-align:left;
}
.about_box .box02 .btn_box02{
	margin:0px 0% 0% 0%;
	width:60%;
	text-align:right;
	color:#000;
	font-size:12px;
	z-index:101;
	float:right;
}
.about_box .box02 .btn_box02 .btn a{
	width:70%;
	padding:0% 0% 0% 0%;
	max-height:200x;
	margin:0px 0px -20px 0px;
	display:block;
	background:url(../img/about/bg_wh.gif);
	background-repeat:no-repeat;
	background-size:contain;
	float:right;


}
.about_box .box02 .btn_box02 .btn a:hover{
	width:70%;
	padding:0% 0% 0% 0%;
	max-height:200px;
	margin:0px 0px 0px 0px;
	display:block;
	background:url(../img/about/bg_red.gif);
	background-repeat:no-repeat;
	background-size:contain;
	float:right;
}
.about_box .box02 .btn_box02 .btn a .yaku {
	margin:-5% 0% 0% 8%;
	font-size:12px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:200%;

}
.about_box .box02 .btn_box02 .btn a .title {
	margin:0px 0px 0px 8%;
	font-size:26px;
	font-weight:bold;
	color:#e10000;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box02 .btn_box02 .btn:hover .title {
	margin:0px 0px 0px 8%;
	font-size:26px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box02 .btn_box02 .txtbox {
	width:51%;
	margin:0% 0% 0% 0%;
	font-size:12px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;
	float:right;
}



.midashi{
	width:100%;
	height:45px;
	margin:0px auto;
	padding:0px;
	text-align:center;
	font-size:28px;
	font-weight:bold;
	color:#000;
}



.mr5{
margin-right:5%;
}
.ml5{
margin-left:5%;
}
.mr3{
margin-right:3%;
}

}

/******************************************/
/*##################################################################################################*/


@media (max-width:767px) {

body { margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;
	background-color:#fff;
	height:200%;
        width:100%;
	word-break: break-all;
	background:url(../img/con_bg01.jpg);
	background-repeat:repeat;
}

.top_img{
	margin-top:65px;
	padding-top:10vw;
	width: 100vw;
	height: 17vw;
	color:#ff0000;
	font-size:20px;
	font-weight:bold;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	text-align:center;
	line-height:100%;
	display:block;
	background:url(../img/about/sp_bg.jpg);
	background-repeat:no-repeat;
	/*background-size:cover;*/
background-size:100% 100%;
}
.top_img .txtc{
	font-size:12px;
	font-weight:normal;
	color:#fff;
	text-align:center;

}


.title_box{
	margin-top:85px;
	width: 100%;
	padding:0px;
	display:block;
}
.title_box .midashi01{
	width:100%;
	margin:0px auto;
	padding:0px;
	text-align:center;
	font-size:24px;
	font-weight:bold;
	color:#ff0000;
        letter-spacing: 0.1px;
font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
}
.title_box .txtc{
	font-size:12px;
	font-weight:normal;
	color:#fff;
	text-align:center;

}

.about_box{
	width:90%;
	margin:5% auto 10% auto;
	padding:0% 5% 0% 5%;
	overflow: hidden;


}


/*left*/
.about_box .box{
	width:95%;
	margin:0% auto 0px auto;
}

.about_box .box .img_box01{
	width:100%;
	margin:0px;
	text-align:right;
	position: relative;
	z-index:100;
}
.about_box .box .img_box01 img{
	width:90%;
	text-align:right;
}
.about_box .box .btn_box{
	margin:-10% 0% 0% 0%;
	width:100%;
	text-align:left;
	color:#000;
	font-size:12px;
	position: relative;
	z-index:101;
}
.about_box .box .btn_box .btn a{
	width:85%;
	padding:19% 0% 8% 0%;
	max-height:200x;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_wh.gif);
	background-repeat:no-repeat;
	background-size:90% 90%;	

}
.about_box .box .btn_box .btn a:hover{
	width:85%;
	padding:19% 0% 8% 0%;
	max-height:200px;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_red.gif);
	background-repeat:no-repeat;
	background-size:90% 90%;
}
.about_box .box .btn_box .btn a .yaku {
	margin:0% 0% 0% 8%;
	font-size:12px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;

}
.about_box .box .btn_box .btn a .title {
	margin:0px 0px 0px 8%;
	font-size:18px;
	font-weight:bold;
	color:#e10000;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box .btn_box .btn:hover .title {
	margin:0px 0px 0px 8%;
	font-size:18px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box .btn_box .txtbox {
	width:100%;
	margin:-5% 0% 0px 0px;
	font-size:12px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;
}

/*right*/
.about_box .box02{
	width:95%;
	margin:5% auto 8% auto;
}

.about_box .box02 .img_box01{
	width:100%;
	margin:0px;
	text-align:right;
	position: relative;
	z-index:100;
}
.about_box .box02 .img_box01 img{
	width:90%;
	text-align:right;
}
.about_box .box02 .btn_box02{
	margin:-10% 0% 0% 0%;
	width:100%;
	text-align:left;
	color:#000;
	font-size:12px;
	position: relative;
	z-index:101;
}
.about_box .box02 .btn_box02 .btn a{
	width:85%;
	padding:19% 0% 8% 0%;
	max-height:200x;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_wh.gif);
	background-repeat:no-repeat;
	background-size:90% 90%;	

}
.about_box .box02 .btn_box02 .btn a:hover{
	width:85%;
	padding:19% 0% 8% 0%;
	max-height:200px;
	margin:0px 0px 15px 0px;
	display:block;
	background:url(../img/about/bg_red.gif);
	background-repeat:no-repeat;
	background-size:90% 90%;
}
.about_box .box02 .btn_box02 .btn a .yaku {
	margin:0% 0% 0% 8%;
	font-size:12px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;

}
.about_box .box02 .btn_box02 .btn a .title {
	margin:0px 0px 0px 8%;
	font-size:18px;
	font-weight:bold;
	color:#e10000;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box02 .btn_box02 .btn:hover .title {
	margin:0px 0px 0px 8%;
	font-size:18px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
        letter-spacing: 0.1px;
	font-family: "Hiragino Kaku Gothic ProN", "Osaka", Arial, sans-serif;
	z-index:1;
}
.about_box .box02 .btn_box02 .txtbox {
	width:100%;
	margin:-5% 0% 0px 0px;
	font-size:12px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;
}

.midashi{
	width:100%;
	height:45px;
	margin:0px auto;
	padding:0px;
	text-align:center;
	font-size:28px;
	font-weight:bold;
	color:#000;
}



.mr5{
margin-right:5%;
}
.ml5{
margin-left:5%;
}
.mr3{
margin-right:3%;
}



}

/*#######################################################################################*/




.clear{
	clear:both;
}
.list60{
width:60px;
padding:3px 2px;
}
.list130{
width:130px;
padding:3px 2px;
}
.list250{
width:270px;
padding:3px 2px;
}


