@charset "UTF-8";
.del{ display: none; }
.ser-h3{ line-height: 1.4em; }
/*------------------------------------------------*/
.main{ margin: 0; }
.logo{ float: left; width: 48%; margin: 0 0 0 2%; }
.logo img{ width: 80px; }
.cre{ float: right; width: 48%; margin: 0 2% 0 0;}
.cre img{ width: 100%; height: auto;}
h1{ font-size: 16px;}
.content-top2 p,.content-top1 li,.header2 .p2,.content-subtop3 dd.text,.content-top4 dd{ line-height: 1.8em; padding: 10px; }
/*--[電話]------------------------------------------------------------------------------*/
.tel a{ display: block; padding: 8px 0 4px 0; margin: 0 2%; }
.tel-right{ text-align: center; }
.tel-top img{
	width: 100%;
	max-width: 370px;
	height: auto;
}
.tel-box{
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #ffefe3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 0%,#ffefe3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 0%,#ffefe3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffefe3',GradientType=0 ); /* IE6-9 */
	overflow: hidden;
	border-top: 2px solid #2845ae;
	padding: 20px 0 10px 0
}
.tel-left .tel1{ font-weight: bold; color: #f56c00; text-align: center; }
.tel-left span{ font-weight: bold; display: block; color: #f56c00; text-align: center; font-size: 18px; }
.tel-left .tel2{ text-align: center; padding-bottom: 10px; font-size: 12px; }
.tel-box img{ width: 98%; height: auto;max-width: 370px; display: block; margin-right: auto;margin-left: auto;}
/*--[メニュー]------------------------------------------------------------------------------*/
.main-nav,.main-nav2{ display: none; background: #c22c2c;}
.ie8 .main-nav,.ie8 .main-nav2{ display: block!important; }
.ie7 .main-nav li{ width: 100%; }
.accordion2{ 
	margin: 15px 0 0 0;
	padding: 10px; color: #FFF; font-weight: bold;
	background: #c22c2c;
	background: -moz-linear-gradient(top,  #c22c2c 54%, #cb4a4a 63%, #cb4a4a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(54%,#c22c2c), color-stop(63%,#cb4a4a), color-stop(100%,#cb4a4a));
	background: -webkit-linear-gradient(top,  #c22c2c 54%,#cb4a4a 63%,#cb4a4a 100%);
	background: -o-linear-gradient(top,  #c22c2c 54%,#cb4a4a 63%,#cb4a4a 100%);
	background: -ms-linear-gradient(top,  #c22c2c 54%,#cb4a4a 63%,#cb4a4a 100%);
	background: linear-gradient(to bottom,  #c22c2c 54%,#cb4a4a 63%,#cb4a4a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c22c2c', endColorstr='#cb4a4a',GradientType=0 ); }
.main-nav > li > a,.main-nav .link2 p,.main-nav li ul li a{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 43%, #f2f2f2 56%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(43%,#ffffff), color-stop(56%,#f2f2f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 43%,#f2f2f2 56%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 43%,#f2f2f2 56%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 43%,#f2f2f2 56%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 43%,#f2f2f2 56%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
}
.accordion2:after,.main-nav p:after{ content: "＋"; display:block; float: right;}
.main-nav li a:after{ content: "＞"; display:block; float: right; color: #cb4a4a}
.on li a:after{ content: "＞";display:block; float: right; color: #cb4a4a; font-weight: bold; }
.link2 p:after{ color: #cb4a4a; font-weight: bold; }
.main-nav > li > a,.main-nav .link2 p,.main-nav li ul li a,.main-nav2 > li > a,.main-nav2 .link2 p,.main-nav2 li ul li a{
display: block; padding: 10px 15px; border-bottom: dotted 1px #CCC;color: #000; }
.main-nav2 > li > a,.main-nav2 .link2 p,.main-nav2 li ul li a{ color: #FFF; }
.main-nav li ul li a,.main-nav2 li ul li a{ padding: 10px 15px 10px 30px; color: #000; }
/*--[トップヘッダー&サービスヘッダー]----------------------------------------------*/
.header2,.ser-header{ clear: both; margin-top: 2%;}
.header2 h2,.ser-header h2{ 
	margin: 0 10px; font-weight: bold; 
	padding: 8px 0 0 0;
	background: #FFF; line-height: 1.3em; font-size: 24px; text-align: center;
	position: relative;
	}
.header2 h2:before,.ser-header:before{ content:'出張'; text-shadow: none;  background: #be6a18; font-weight: bold; color: #FFF; padding: 6px 6px; margin: 0 4px 0 0 ; font-size: 20px; border-radius: 10px;
}
.header2 h2{ margin-top: 10px; }
.header2 .p2{ clear:both; background: url(../images/top_14.png) bottom center no-repeat; padding: 0 10px 32% 10px; background-size: contain;}
.ie8 .header2 .p2{ padding-bottom: 210px; }
.header2 .p1{ padding: 10px; font-weight: bold; }
.ser-header{ margin-bottom: 10px; }
.ser-header p{ padding: 0 10px;}
.ser-header .p1{ font-weight: bold; padding: 10px 10px 5px 10px; }
/*--[共通ヘッダー]-----------------------------------------------------------*/
.header3{ overflow: hidden;background: #bf2727; color: #FFF; font-weight: bold; padding: 15px 10px 10px 10px;}
.header3 .box1{ text-align: center; font-weight: bold; line-height: 1.4em; }
.header3 span{ color: #fdf01c; font-weight: bold; }
.header3 .box2{ text-align: center; }
.header3 .box2 ul{  margin: 0 auto; background: #FFF; overflow: hidden; padding: 5px 5px 2px 5px; }
.header3 .box2 ul li{ display: inline; color: #bf2727;padding: 5px;}
/*--[トップページ１]-----------------------------------------------------------*/
.content-top1 h3{ background: #9f2424; padding: 10px; color: #FFF; font-weight: bold;text-align: center; }
.content-top1 ul{ background: url(../images/top_20.png) center top no-repeat; background-size: 60%; padding: 50% 0 0 0; margin-bottom: 10px;  }
.ie8 .content-top1 ul{ padding-top: 150px;}
.content-top1 ul li{ border-bottom: 1px dotted #CCC; padding: 6px 10px; }
.content-top1 ul li:last-child{ border-bottom: none; padding: 6px 10px; }
/*--[トップページ２]-----------------------------------------------------------*/
.content-top2 div{ margin-top: 10px;padding: 50% 10px 10px 10px;}
.ie8 .content-top2 div{ padding-top: 150px; }
.content-top2 div:first-child{ border-bottom: 1px dotted #CCC; }
.content-top2 div h4{color: #2845ae; line-height: 1.4em; padding: 0 10px; }
.content-top2 .box1{ background: url(../images/top_31.png) center top no-repeat; background-size: 70%; }
.content-top2 .box2{ background: url(../images/top_34.png) center top no-repeat; background-size: 70%; }

/*--[トップナビ]-----------------------------------------------------------*/
.con-nav{ float: none; width: 100%; margin: 0 0 0 0; }
.con-nav p{ line-height: 1.8em; padding: 0 10px; }
.ie8 .con-nav{ width: 100%; }
.con-nav2{ margin-bottom: 30px; }
.con-nav li{ border: none; /*border-bottom: 1px solid #CCC;*/ }
.con-nav a{ padding: 15px!important; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;border-top: 1px solid #e2e2e2; background: url(../images/arrow.png) right top no-repeat;font-size: 20px; font-weight: bold;}
.con-nav a:after,.con-nav span:after{ float:none!important; padding-top: 5px; }
.con-nav li a,.con-nav li span{ text-decoration: none;font-size: 20px; font-weight: bold; }
.page-nav{ margin-top: 20px; }
/*--[トップページ３]-----------------------------------------------------------*/
.content-top3 dl{ clear: both; width: 100%; border: 1px solid #CCC; margin: 2% 0 0 0;}
.content-top3 .kagi4{ margin-bottom: 30px; }
.content-top3 li{ width: 100%!important;border: 1px solid #CCC; border-top: none!important; }
/*--[トップページ４]-----------------------------------------------------------*/
.content-top4{ margin: 2% 2% 30px 2%; }
.content-top4 dt{ padding: 10px 60px 10px 10px; line-height: 1.8em!important; font-size: 18px; }
.content-top4 dt span{ font-size: 18px; }
.content-top4 dt:before{ padding: 0; margin: 0; background: none!important; content: ""!important; }
.content-top4 .top1{background: url(../images/main_60.png) right top no-repeat; }
.content-top4 .top2{background: url(../images/main2_60.png) right top no-repeat;  }
.content-top4 .top3{background: url(../images/main3_60.png) right top no-repeat; }
.content-top4 .top4{background: url(../images/main4_60.png) right top no-repeat; }
.content-subtop4{ padding:10px; background-position: right 10px top 10px; background-size: 120px; }
.content-subtop4 h4{ padding: 40px 110px 20px 0; line-height: 1.6em; font-weight: bold; }
.content-subtop4 p{  }
.ie8 .content-subtop4{ background-position: center top; padding: 190px 20px 20px 20px; }
/*--[トップページ５]------------------------------------------------------------------------------*/
.content-top5{ margin: 0 2% 40px 2%; padding: 220px 10px 0 10px; background: url(../images/sp.jpg) center top no-repeat;}
.content-top5 p{  line-height: 1.8em; }
.content-top5 .red{ font-weight: bold; line-height: 1.4em!important; color: #C4070B; padding-top: 20px; font-size: 18px; }

/*--[フッターフロウ]-----------------------------------------------------------*/
.content-flow ol{ margin: 2% 2% 30px 2%; overflow: hidden; }
.content-flow li{ clear: both; width: 100%!important; margin: 0; text-align: left; min-height: 60px!important; padding: 15px 0 10px 10px;
	border-bottom: 1px solid #CCC;
}
.content-flow li:before{ text-align: left; display: block; color: #2845ae; font-weight: bold; }
.content-flow .flow1:before{ content: "STEP１"; }
.content-flow .flow2:before{ content: "STEP２"; }
.content-flow .flow3:before{ content: "STEP３"; }
.content-flow .flow4:before{ content: "STEP４"; }
.content-flow .flow1{ background-position: right bottom!important; background-size: 80px!important;}
.content-flow .flow2{ background-position: right bottom!important; background-size: 60px!important;}
.content-flow .flow3{ background-position: right top!important; background-size: 60px!important;}
.content-flow .flow4{ background-position: right top 10px!important; background-size: 60px!important;}
/*--[フッター]-----------------------------------------------------------*/
.content-foot{ background: #FFF;}
.foot-area .foot-p{ background-position: center top; background-size: 60%; padding: 46% 10px 0 10px; }
.ie8 .foot-area .foot-p{ margin: 0; padding: 150px 20px 20px 20px; }
footer .main-nav a,footer .link2 p,footer .link2 a{ color: #FFF!important; }
footer .add{ border: none; padding-bottom: 100px; color: #000; }
footer .add a{color: #000; }
.footer-map iframe{ display: block; clear: both; overflow: hidden; margin: 0 auto 20px auto; }
/*--[サービストップ]-----------------------------------------------------------*/
.contents-ser1,.contents-ser2{ background-size: 80%!important; background-position: center top!important; margin: 10px 20px; padding: 58% 0 0 0; }
.contents-ser1 h4,.contents-ser2 h4{ line-height: 1.4em; font-size: 18px; padding: 10px 0; }
.contents-ser1 p,.contents-ser2 p{ margin-bottom: 20px; line-height: 1.8em; }
/*--[サービスプライス]-----------------------------------------------------------*/
.ser-price{ background-size: 30%; background-position: center top; padding: 30% 0 0 0; margin: 10px auto; width: 96%;}
.ser-price .price1{ text-align: center; padding: 0 0 2px 0;margin: 0 0 5px 0; font-size: 18px; }
.ser-price .price2,.ser-price .price2 span{ text-align: center; margin: 0; line-height: 1.2em; font-size: 26px; }
.ser-price .price2 span{ display: block;}
.ser-price .price3{ padding: 10px; line-height: 1.4em; color: #666; font-size: 14px;}
 /*--[サービス個所（鍵開け・修理・交換）]------------------------------------------------------------------------------*/
.open .ser-box,.repair .ser-box,.change .ser-box{ margin: 0; padding: 310px 15px 15px; border-top: 1px dotted #2845ae; background-size: 200px!important; background-position: center top!important; }
.ie8 .open .ser-box,.ie8 .repair .ser-box,.ie8 .change .ser-box{ padding-top: 200px; }
.change .ser-box2{ padding-top: 200px; }
.repair .ser-box{ padding-top: 210px; }
.ser-box h4{ color: #2845ae; padding: 0 0 5px 0; font-size: 18px; font-weight: bold; }
.open.ser-box1{ background: url(../images/ser_11.png) left top no-repeat; }
.open .ser-box2{ background: url(../images/ser2_11.png) left top no-repeat; }
.open .ser-box3{ background: url(../images/ser4_11.png) left top no-repeat; }
.open .ser-box4{ background: url(../images/ser3_11.png) left top no-repeat; }
.ser-subbox{ padding: 10px; background:#DDF2FF; color: #2845ae; margin-top: 5px;}
.ser-box .bold{ padding-top: 10px; }
.ser-box p{ line-height: 1.8em; }
 /*--[サービス個所・作成・取り付け]------------------------------------------------------------------------------*/
.car .ser-box,.bike .ser-box{ background-position: center top!important; background-size: 80%!important; margin: 0 2% 30px 2%; padding: 65% 10px 20px 10px; border-bottom: 1px dotted #2845ae; }
.ie8 .car .ser-box,.ie8 .bike .ser-box{ padding-top: 230px; }
.car .ser-make3 .text{ margin: 0 2% 0 2%; padding: 10% 20px 20px 20px; text-align: center; background: url(../images/car_11.png) top center no-repeat; background-size: 80%; color: #0C4DA6; } 
.ie8 .car .ser-make3 .text{ background: none; padding-top: 0; }
.bike .ser-make3 .text{ margin: 0 10px 30px 10px; padding: 0 10px 18% 10px; background-size: 20%!important; background-position: left bottom, right bottom!important; } 
.new .ser-box{ background-position: center top!important; background-size: 80%!important; margin: 20px 2%; padding: 0 15px 10px 15px;}
.new .ser-box1{ background-size: 60%!important; padding-top: 80%; } 
.ie8 .new .ser-box1{ padding-top: 450px; }
.new .ser-box2{ padding-top: 28%; }   
.new .ser-box3{ padding-top: 52%; }
.new .ser-box p{ margin-bottom: 20px; }
.new .ser-box1 .ser-new1{ min-height: 100px; }
.new .ser-box1 .ser-new1{ background: url(../images/new_10.png) center top no-repeat; padding: 260px 0 0 0; }
.ie8 .new .ser-box{ padding-left: 0; } 
.ie8 .new .ser-box1 .ser-new1{ background: url(../images/new_10.png) center top no-repeat; padding: 260px 0 0 0; }
.ie8 .new .ser-box2{ padding-top: 100px; }
.ie8 .new .ser-box3{ padding-top: 210px; }
/*--[サービストピック]------------------------------------------------------------------------------*/
.ser-topic p{ background-size: 100px!important; background-position: center top!important; padding: 120px 10px 0 10px; line-height: 1.8em; }
/*--[サービス例・作成]------------------------------------------------------------------------------*/
.ser-make2 p{ line-height: 1.8em; }
.car .ser-make p{ background-position: center top; background-size: 80%!important; padding: 62% 15px 0 15px; margin: 20px 0 0 0; }
.ie8 .car .ser-make p{ padding-top: 240px; }
.car .ser-make2 p{  padding: 18% 15px 0 15px; }
.bike .ser-make p{ background-position: center top; background-size: 60%!important; padding: 50% 15px 0 15px; margin: 20px 0 0 0; }
.bike .ser-make2 p{  padding: 10% 15px 0 15px; }
/*--[電子錠１]------------------------------------------------------------------------------*/
.digital 
.digital .ser-box{ padding: 15px 10px 30px 10px; margin: 0; }
.digital .ser-box1{ padding: 280px 10px 30px 10px;background-size:300px;background-position: center top; }
.digital .ser-box2{ padding: 280px 10px 30px 10px;background-size:300px;background-position: center top;}
.digital .ser-box3{ padding: 200px 10px 30px 10px;background-size:300px;background-position: center top;}
.digital .ser-box4{ padding: 180px 10px 30px 10px;background-size:300px;background-position: center top;}
.digital .ser-box5 dl{ padding:15px; background-size: 80px;}
.digital .ser-box5 dt{ margin-bottom: 10px;padding-right: 30px;}
/*--[鍵猿１]------------------------------------------------------------------------------*/
.kagi dl{ width: 100%; padding: 15px; border: none; border-bottom: 1px #CCC solid; }
.kagi dt{ line-height: 1.4em; background-position: center top!important; background-size: 200px!important; padding: 200px 0 0 0; text-align: center; font-size: 18px; }
.ie8 .kagi dt{ padding-top: 100px; font-size: 18px; }
.kagi dt span{ font-size: 18px;}
.kagi dd{ background: #F4F4F4; padding: 10px;line-height: 1.8em;}
/*--[料金１]------------------------------------------------------------------------------*/
.price dl{ border: 2px solid #CCC; border-bottom: none; }
.price dt{ padding: 10px; border-top: none; border-bottom: 1px dotted #CCC; text-align: center; background: #E4F1FF;  font-size: 18px;}
.price dd{ padding: 28px; text-align: center; border-top: none; border-bottom: 2px solid #CCC; font-size: 18px;}
.price dd span{  font-size: 18px; }
.price dt,.price dd{ float: none; width: 100%; border-right: none; }
dt.price1{ border-bottom: 1px solid #CCC!important; }
.price .text{ margin: 15px; line-height: 1.8em; }
/*--[料金２]------------------------------------------------------------------------------*/
.price-ol li{ padding: 200px 10px 10px;background-position: center top!important; background-size: 220px!important; }
.price-ol h4{ }
.price-ol p{ padding: 0 5px; line-height: 1.8em; }
.ie8 .price-ol li{ padding: 280px 10px 10px; }
/*---[ Page Top ]-----------------------------------------------------------------------------*/
#page-top a {
    padding: 10px;
	background: #333;
	border: 2px solid #FFF;
    width: 80px;
    }
/*---[ ブログ ]-----------------------------------------------------------------------------*/
.content-topic dl,.blog-topic dl{ margin:0; }
.content-topic dt img,.blog-topic dt img{ width: 60px; }
.content-topic dt,.blog-topic dt{ padding: 0 0 5px 0; }
.content-topic dd,.blog-topic dd{ padding: 0 0 5px 0;}
.content-topic,.blog-topic{ margin: 10px 0 0 0 ; }
.content-topic ul,.content-pick ul,.blog-topic ul{padding: 10px;  }
.blog-box .text{ padding: 10px 0 40px 0; border-top: 1px solid #CCC; width: auto; line-height: 1.8em;  }
.con-h3{ font-size: 20px; }
.topic-box2{ background-position: center top; padding: 150px 0 0 0!important; }
.blog-ran .left{ text-align: center; }
.blog-ran .text p{ padding: 0; }
.blog-ran .left img{ width: 222px!important; height: 160px;}
/*---[ サブエリア ]-----------------------------------------------------------------------------*/
.subarea-box div{ margin: 20px 20px;}
.subarea1{ background-position: center top; }
.subarea2{ background-position: center top; }
.subarea3{ background-position: center top; }/**/
.subarea-box h4{ font-weight: bold; padding: 120px 0 0 0; }
.voice{ margin: 20px 10px; border: dotted #CCC 2px; padding: 120px 10px 30px 10px!important; line-height: 1.6em; background: url(../images/kagi.png) center top no-repeat; }
.voice h3{
	text-align: center;
}
.voice p{ font-size: 16px; line-height: 1.8em;}