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

@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/service/top_img.jpg);
	background-repeat:no-repeat;
background-size:cover;
	position:relative;
	z-index:-1;
}

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

}

.service_box{
	width:700px;
	margin:-62px auto 0px auto;
	padding:60px 100px 80px 100px;
	overflow: hidden;
	background-color:#fff;
	position:relative;
	z-index:1;

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

.service_box .lb_txt{
	font-size:20px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:200%;

}
.service_box .l_txt{
	font-size:16px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;

}


.service_box .img_box{
	width:700px;
	height:246px;
	margin:40px auto 50px auto;
	display:block;
	overflow: hidden;
}
.service_box .img_box .lbox img{
	width:335px;
	margin:0px;
	padding:0px;
	display:block;
	float:left;
}
.service_box .img_box .rbox img{
	width:335px;
	margin:0px;
	padding:0px;
	display:block;
	float:right;
}
.youtube_box{
	width:900px;
	margin:0px auto 0px auto;
	padding:50px 0px 50px 0px;
	display:block;
	text-align:center;
	overflow: hidden;
	background-color:#f0f0f0;
}
.youtube_box .title{
	font-size:16px;
	font-weight:normal;
	color:#000;
	text-align:center;
	line-height:180%;
}
.youtube_box img{
	margin:20px 0 0 0;
	width:430px;
	height:250px;
}
.btm{
	width:900px;
	height:80px;
	margin:0px auto;
	padding:0px;
	display:block;
	text-align:center;
	overflow: hidden;
	background-color:#fff;
}

.service_box02{
	width:1000px;
	overflow: hidden;
	margin:0px auto 62px auto;
	background:url(../img/bg_wh.gif);
	background-repeat:no-repeat;
	background-position:center center;

}
/*box01*/
.service_box02 .box01{
	width:1000px;
	height:292px;
	padding-top:155px;
	margin:0px auto;
	background:url(../img/service/ser01.jpg);
	background-repeat:no-repeat;
	background-position:center right;

}
.service_box02 .box01 .bn_box{
	width:364px;
	height:115px;
	margin:0px 0px 0px 0px;
	padding:150px 30px 0px 30px;
	display:block;
	background-color:#e10000;
}
.service_box02 .box01 .bn_box .txt01{
	font-size:16px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box01 .bn_box .txt02{
	font-size:30px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}
/*box02*/
.service_box02 .box02{
	width:1000px;
	height:292px;
	padding-top:155px;
	margin:0px auto;
	background:url(../img/service/ser02.jpg);
	background-repeat:no-repeat;
	background-position:center left;

}
.service_box02 .box02 .bn_box{
	width:364px;
	height:115px;
	margin:0px 0px 0px 0px;
	padding:150px 30px 0px 30px;
	display:block;
	background-color:#e10000;
	float:right;
}
.service_box02 .box02 .bn_box .txt01{
	font-size:16px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box02 .bn_box .txt02{
	font-size:30px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}
/*box03*/
.service_box02 .box03{
	width:1000px;
	height:292px;
	padding-top:155px;
	margin:0px auto;
	background:url(../img/service/ser03.jpg);
	background-repeat:no-repeat;
	background-position:center right;

}
.service_box02 .box03 .bn_box{
	width:364px;
	height:115px;
	margin:0px 0px 0px 0px;
	padding:150px 30px 0px 30px;
	display:block;
	background-color:#e10000;
}
.service_box02 .box03 .bn_box .txt01{
	font-size:16px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box03 .bn_box .txt02{
	font-size:30px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}


.mr5{
margin-right:5%;
}
.ml5{
margin-left:5%;
}
.mr3{
margin-right:3%;
}
.mr4{
margin-right:4%;
}
.modal {
background-color: #fff; /*/ 元の色    #fff*/
border-radius: 4px;        /*/ 元の数値  8px*/
max-width: 780px;         /*/ 元の数値  500px*/
padding: 20px;             /*/ 元の数値  上下15px | 左右30px*/
}

.modal iframe{
	width:740px;
	height:540px;

}

}

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

@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/service/top_img.jpg);
	background-repeat:no-repeat;
	/*background-size:cover;*/
	background-size:contain;
	position:relative;
	z-index:-1;
}

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

}

.service_box{
	width:61%;
	margin:-60px auto 0% auto;
	padding:6% 10% 2% 10%;
	overflow: hidden;
	background-color:#fff;
	position:relative;
	z-index:1;

}
.service_box .midashi{
	width:100%;
	margin:0px auto 50px auto;
	padding:0px;
	text-align:center;
	font-size:21px;
	font-weight:bold;
	color:#000;
	line-height:200%;
}

.service_box .lb_txt{
	font-size:20px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:200%;

}
.service_box .l_txt{
	font-size:16px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:200%;

}


.service_box .img_box{
	width:100%;
	margin:4% auto 5% auto;
	display:block;
	overflow: hidden;
}
.service_box .img_box .lbox img{
	width:47%;
	margin:0px;
	padding:0px;
	display:block;
	float:left;
}
.service_box .img_box .rbox img{
	width:47%;
	margin:0px;
	padding:0px;
	display:block;
	float:right;
}
.youtube_box{
	width:81%;
	margin:0px auto 0px auto;
	padding:5% 0px 5% 0px;
	display:block;
	text-align:center;
	overflow: hidden;
	background-color:#f0f0f0;
}
.youtube_box .title{
	font-size:1.6vw;
	font-weight:normal;
	color:#000;
	text-align:center;
	line-height:180%;
}
.youtube_box img{
	margin:20px 0 0 0;
	width:48%;
	height:25vw;
}
.btm{
	width:80%;
	height:10%;
	margin:0px auto;
	padding:0px;
	display:block;
	text-align:center;
	overflow: hidden;
	background-color:#fff;
}

.service_box02{
	width:90%;
	margin:0px auto 0px auto;
	background:url(../img/bg_wh.gif);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:90% 100%;
	overflow: hidden;

}
/*box01*/
.service_box02 .box01{
	width:100%;
	height:292px;
	padding-top:155px;
	margin:0px auto;
	background:url(../img/service/ser01.jpg);
	background-repeat:no-repeat;
	background-position:center right;
	background-size:82% 82%;

}
.service_box02 .box01 .bn_box{
	width:38%;
	height:95px;
	margin:0px 0px 0px 0px;
	padding:130px 10px 0px 30px;
	display:block;
	background-color:#e10000;
}
.service_box02 .box01 .bn_box .txt01{
	font-size:14px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box01 .bn_box .txt02{
	font-size:21px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}
/*box02*/
.service_box02 .box02{
	width:100%;
	height:292px;
	padding-top:155px;
	margin:0px auto;
	background:url(../img/service/ser02.jpg);
	background-repeat:no-repeat;
	background-size:82% 82%;

}
.service_box02 .box02 .bn_box{
	width:38%;
	height:95px;
	margin:0px 0px 0px 0px;
	padding:130px 10px 0px 30px;
	display:block;
	background-color:#e10000;
	float:right;
}
.service_box02 .box02 .bn_box .txt01{
	font-size:14px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box02 .bn_box .txt02{
	font-size:21px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}
/*box03*/
.service_box02 .box03{
	width:100%;
	height:292px;
	padding-top:155px;
	margin:0px auto;
	background:url(../img/service/ser03.jpg);
	background-repeat:no-repeat;
	background-position:center right;
	background-size:82% 82%;

}
.service_box02 .box03 .bn_box{
	width:38%;
	height:95px;
	margin:0px 0px 0px 0px;
	padding:130px 10px 0px 30px;
	display:block;
	background-color:#e10000;
}
.service_box02 .box03 .bn_box .txt01{
	font-size:14px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box03 .bn_box .txt02{
	font-size:21px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}



.tmb50{
margin-bottom:5%;

}
.mb50{
margin-bottom:0%;

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

.modal {
background-color: #fff; /*/ 元の色    #fff*/
border-radius: 4px;        /*/ 元の数値  8px*/
max-width: 80%;         /*/ 元の数値  500px*/
padding: 10px;             /*/ 元の数値  上下15px | 左右30px*/
z-index:10001;
}

iframe{
	width:80%;
	height:50vw;

}

}

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


@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: 20vw;
	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/service/top_img.jpg);
	background-repeat:no-repeat;
	/*background-size:cover;*/
	background-size:contain;
	position:relative;
	z-index:100;
}
.top_img .txtc{
	font-size:12px;
	font-weight:normal;
	color:#fff;
	text-align:center;

}

.service_box{
	width:80%;
	margin:-6% auto 0% auto;
	padding:0% 5% 8% 5%;
	overflow: hidden;
	background-color:#fff;
	position:relative;
	z-index:101;

}


.service_box .midashi{
	width:100%;
	margin:6% auto 3% auto;
	padding:0px;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	color:#000;
	line-height:200%;
}

.service_box .lb_txt{
	font-size:12px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;

}
.service_box .l_txt{
	font-size:12px;
	font-weight:normal;
	color:#000;
	text-align:left;
	line-height:180%;

}


.service_box .img_box{
	width:100%
	height:246px;
	margin:40px auto 50px auto;
	display:block;
	overflow: hidden;
}
.service_box .img_box .lbox img{
	width:47.5%;
	margin:0px;
	padding:0px;
	display:block;
	float:left;
}
.service_box .img_box .rbox img{
	width:47.5%;
	margin:0px;
	padding:0px;
	display:block;
	float:right;
}
.youtube_box{
	width:90%;
	margin:0px auto 0px auto;
	padding:5% 0px 6% 0px;
	display:block;
	text-align:center;
	overflow: hidden;
	background-color:#f0f0f0;
}
.youtube_box .title{
	font-size:12px;
	font-weight:normal;
	color:#000;
	text-align:center;
	line-height:180%;
}
.youtube_box img{
	margin:2% 0 0 0;
	width:90%;
	height:45vw;
}
.btm{
	width:90%;
	height:2%;
	margin:0px auto;
	padding:0px;
	display:block;
	text-align:center;
	overflow: hidden;
	background-color:#fff;
}

.service_box02{
	width:90%;
	height:auto;
	margin:0px auto -20% auto;
	padding:22% 0% 0% 0%;
	background:url(../img/bg_wh.gif);
	background-repeat:no-repeat;
	background-position:center center;

}
/*box01*/
.service_box02 .box01{
	width: 80vw;
	height: 60vw;
	padding-top:30%;
	margin:5% auto -45% auto;
	background:url(../img/service/ser01.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	position:relative;
}
.service_box02 .box01 .bn_box{
	width:70%;
	margin:0px 0px 0px 0px;
	padding:8% 5% 5% 5%;
	display:block;
	bottom:86vw;
	background-color:#e10000;
	position:absolute;
}
.service_box02 .box01 .bn_box .txt01{
	font-size:12px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box01 .bn_box .txt02{
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}
/*box02*/
.service_box02 .box02{
	width: 80vw;
	height: 60vw;
	padding-top:30%;
	margin:5% auto -45% auto;
	background:url(../img/service/ser02.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	position:relative;
}
.service_box02 .box02 .bn_box{
	width:70%;
	margin:0px 0px 0px 0px;
	padding:13% 5% 5% 5%;
	display:block;
	bottom:86vw;
	background-color:#e10000;
	position:absolute;
}
.service_box02 .box02 .bn_box .txt01{
	font-size:12px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box02 .bn_box .txt02{
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}


/*box03*/
.service_box02 .box03{
	width: 80vw;
	height: 60vw;
	padding-top:30%;
	margin:5% auto -45% auto;
	background:url(../img/service/ser03.jpg);
	background-repeat:no-repeat;
	background-size:contain;
	position:relative;
}
.service_box02 .box03 .bn_box{
	width:70%;
	margin:0px 0px 0px 0px;
	padding:13% 5% 5% 5%;
	display:block;
	bottom:86vw;
	background-color:#e10000;
	position:absolute;
}
.service_box02 .box03 .bn_box .txt01{
	font-size:12px;
	font-weight:bold;
	color:#000;
	text-align:left;
	line-height:180%;
}
.service_box02 .box03 .bn_box .txt02{
	font-size:14px;
	font-weight:bold;
	color:#fff;
	text-align:left;
	line-height:180%;
}



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

.mb50{
margin-bottom:8%;
}
.sp_btm{
margin-top:5%;
}
.modal {
background-color: #fff; /*/ 元の色    #fff*/
border-radius: 4px;        /*/ 元の数値  8px*/
max-width: 90%;         /*/ 元の数値  500px*/
padding: 10px;             /*/ 元の数値  上下15px | 左右30px*/
z-index:10001;
}

iframe{
	width:100%;
	height:70vw;

}


}

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




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


