@charset "Shift_JIS";
html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
address,
em, img,
dl, dt, dd, ol, ul, li,
table, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:14px;
	vertical-align:baseline;
	font-family:'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino kaku Gothic Pro','MS Pゴシック','MS PGothic',sans-serif;
	box-sizing: border-box;
	line-height: 1.6em;
	}
body{
	background-color: #F6F6F6;
	padding: 10px;
	}
ol, ul{
    list-style:none;
}
table{
    border-collapse: collapse; 
    border-spacing:0;
}
.clear {
    clear:both;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	}
a{ color: #175FBF; }
table {
    width:100%;
}
strong { color: #263B80; }
/*-------------- none -----------------------*/

#tel,.del{ display: none; }
/*-------------- base -----------------------*/

#header,#left-con{
	background: #FFF;
	overflow: hidden;
	padding: 10px;
	}
#header li a,#contents,.top-menu dl img,.top-menu2 dl img,.top-p a,#page-top a,.footer-link a,#tar-con3 p a,.service-menu a,.pageup a,#ser-bo a{ border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px; } 
#left-con{ margin-bottom: 20px; }
#kind-h2,.ser-li{
    position: relative;
    color: #111;
    font-size: 1.143em;
    font-weight: bold;
    padding: 0.5em 0.5em 0.5em 1.7em;
    border-bottom: 3px solid #B92A2C;
}
.ser-li{ margin-top: 20px; }
#kind-h2:before,.ser-li:before{
    content: "";
    position: absolute;
    background: #d48789;
    top: 0;
    left: 0.4em;
    height: 12px;
    width: 12px;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}
 
#kind-h2:after,.ser-li:after{
    content: "";
    position: absolute;
    background:#d26466;
    top: 1.0em;
    left: 0;
    height: 8px;
    width: 8px;
    transform: rotate(15deg);
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
}
/*-------------- header -----------------------*/

h1{ font-size: 11px; font-weight: normal; line-height: 1.4em; background: #003366; color: #FFF; padding: 5px; }
h1 strong{ color: #FFF; }
#logo{ text-align: center; padding: 0 0 0 40px; }
#logo img{ width: 200px; }
.header-top a{ display: block; margin: 10px 0;}
.footer-link{ margin-bottom: 20px;overflow: hidden; }
#header li{ float: left; width: 50%; }
.footer-link{ color: #F6F6F6; line-height: 0.6; }
.footer-link a{ width: 80%; margin: 0 auto; padding: 15px 10px !important; }
#header li a,.footer-link a{ display: block; text-align: center; border: 1px solid #FFF; padding: 10px;font-size: 16px; background: #003366; color: #FFF;}
#rnavi{ display: none; }
#pankuzu{ margin-bottom: 10px; }
.service-menu a{display: block; border: 2px solid #003366;padding: 10px 0; }
.service-menu p{width :50%; float: left;border: 1px solid #FFF;}
/*-------------- top -----------------------*/
.top-menu,.top-menu2{ clear: both; }
.top-menu2{ margin-bottom: 20px; }
.top-menu dd,.top-menu2 dd{ float: right; width: 68%; padding: 5px 0 0 0;}
.top-menu dl,.top-menu2 dl{ overflow: hidden; margin-bottom: 10px; }
.top-menu dl img,.top-menu2 dl img{ float: left; width: 30%; border: 2px solid #003366; padding: 10px 0; }
.top-h3,.con-h3,.sp-h3{ padding: 0 0 0 10px; border-left: 10px solid #003366; border-bottom: 1px solid #003366; margin-bottom: 10px;}
.top-h3 span,.con-h3,.sp-h3{ font-size: 16px; }
.top-h3p,#tar-con3 h3{ margin: 0 10px; font-weight: bold; color: #003366; border-bottom: dotted 1px #003366; }
.con-h3,.sp-h3{ font-weight: bold; }
.top-p{ padding: 10px; }
.top-p a,#tar-con3 p a{ display: block; background: #003366; color: #FFF; padding: 10px; width: 60%; margin: 10px auto; text-align: center; }
#top-me li{ margin: 10px 0 0 0;}
#top-me{ padding: 0 0 5px 0; }
#top-me2{ overflow: hidden; padding: 10px 0 10px 0; }
#top-me2 li{ padding: 10px; border: 1px dotted #003366; margin-bottom: 10px;}
#ser-cbox h4{ background: url(../img/cbt.jpg) center bottom no-repeat;height: 25px; background-size: contain; text-indent: -9999px;overflow: hidden; margin-bottom: 10px;}
#top-o li{ clear: both; border-top: dotted 1px #CCC; padding: 10px 0 10px 10px; overflow: hidden; }
#ser-cp{ margin-bottom: 10px; }
#top-o div{ float: left; width: 60%; }
#top-o p span{ color: #A70E10; }
#top-o img{ float: right; width: 40%; }
#top-ob:before{ content: "▼ オススメの鍵"; font-size: 20px; font-weight: bold; background: #003366; color: #FFF; display: block; text-align: center; padding: 10px;}
#top-ob{ border-bottom: 1px solid #003366;overflow: hidden;margin-bottom: 20px; }
#top-ob img{ border-right: 1px solid #003366; border-left: 1px solid #003366; border-top: 1px solid #003366; }
/*-------------- footer -----------------------*/
#left-foot h3{ background: #003366; color: #FFF; padding: 5px 10px; }
#left-foot #footp{ background: url(../cmn/clear-l.gif) left top no-repeat; padding: 15px 0 0 80px; height: 110px; }
#footp1{ font-weight: bold; }
#footp2{ font-size: 12px; color: #474747; padding: 10px;border: 1px dotted #CCC;margin: 10px 0 0 0;}
#page-top a,.pageup a,#ser-bo a{ display: block; width: 80%; background: #FFF;padding: 10px; margin: 0 auto; text-align: center; margin-bottom: 20px;border: 2px solid #003366;}
.pageup{ clear: both; }
#left-footb{ margin: 10px ; }
/*-------------- contents -----------------------*/
#tar-con h2,#ser-top h2,#ser-repair h2,#ser-open h2,#ser-new h2,#ser-make h2,#ser-change h2,#safe-con h2,#car-con h2,#price-con h2,#etc-con h2,#elect-con h2,#area-con h2,#crim-con h2{ font-size: 24px; color: #003366; padding: 15% 0 8% 0; width: 65%;line-height: 1.4em;}
#tar-con,#ser-top,#ser-repair,#ser-open,#ser-new,#ser-make,#ser-change,#safe-con,#car-con,#price-con,#etc-con,#elect-con,#area-con,#crim-con{ margin-bottom: 20px;}
	#tar-con{ background: url(../s_target/img/title.jpg) left top no-repeat; background-size: contain; }
	#ser-top{ background: url(../s_service/img/title.jpg) left top no-repeat; background-size: contain; }
	#ser-repair{ background: url(../s_service/t_repair/img/title.jpg) left top no-repeat; background-size: contain; }
	#ser-open{ background: url(../s_service/t_open/img/title.jpg) left top no-repeat; background-size: contain; }
	#ser-new{ background: url(../s_service/t_new/img/title.jpg) left top no-repeat; background-size: contain; }
	#ser-make{ background: url(../s_service/t_make/img/title.jpg) left top no-repeat; background-size: contain; }
	#ser-change{ background: url(../s_service/t_change/img/title.jpg) left top no-repeat; background-size: contain; }
	#safe-con{ background: url(../s_safe/img/title.jpg) left top no-repeat; background-size: contain; }
	#house-con{ background: url(../s_house/img/title.jpg) left top no-repeat; background-size: contain; }
	#car-con{ background: url(../s_car/img/title.jpg) left top no-repeat; background-size: contain; }
	#price-con{ background: url(../s_price/img/back2.jpg) left top no-repeat; background-size: contain; }
	#etc-con{ background: url(../s_etc/img/title.jpg) left top no-repeat; background-size: contain; }
	#area-con{ background: url(../area-list/img/title.jpg) left top no-repeat; background-size: contain; }
	#crim-con{ background: url(../s_crim/img/title.jpg) left top no-repeat; background-size: contain; }
#h3-clear{ display: none; }
/*#h3-clear a{ display: block; background: url(../img/bt_03.png) left top no-repeat; width: 100%; background-size: contain; height: 100px; margin-bottom: 20px;}*/
/*-------------- trouble -----------------------*/
#tar-con2{ background: #F6F6F6; padding: 10px; margin-bottom: 20px;}
.tar-title img{ float: left; width: 40px; }
#tar-con2 ul{ clear: both; background: url(../s_target/img/con2.gif) right bottom no-repeat; background-size: 40%;padding-bottom: 10px;}
#tar-con2 li{ border-top: 1px dotted #CCC; }
#tar-con3{ margin-bottom: 20px; }
#tar-con3 h3{ margin-bottom: 10px;}
#tar-con3 p{ padding: 35% 0 10px 0 ; }
#tar-b{ background: url(../s_target/img/f1.jpg) center top no-repeat; background-size: 50%; }
#tar-b2{ background: url(../s_target/img/f2.jpg) center top no-repeat; background-size: 50%;}
#tar-b3{ background: url(../s_target/img/f3.jpg) center top no-repeat; background-size: 50%;}
#tar-b4{ background: url(../s_target/img/f4.jpg) center top no-repeat; background-size: 50%;}
#tar-b5{ background: url(../s_target/img/f5.jpg) center top no-repeat; background-size: 50%;}
/*-------------- kind -----------------------*/
#ser-ul{ padding: 0 10px 10px 10px; overflow: hidden; }
#ser-ul li{ padding-top: 10px; float: left; width: 50%; }
.kind-box{ clear: both; margin-bottom: 30px; border: 1px solid #003366; padding: 10px 10px 10px 10px; }
.kind-box table{ width: 100%; margin: 0 auto; border: 1px solid #CCC; }
.slid-t img,.cyl-t img,.ass-t img,.ele-t img{display:none;}
.kin-px{ padding: 10px;}
.kind-right #slid1{ background: url(../s_slid/img/g1-2.jpg) center top no-repeat; background-size: 40%; padding: 40% 10px 10px 10px;}
.kind-right #slid1-2{ background: url(../s_slid/img/g-22.jpg) center top no-repeat; background-size: 50%; padding: 40% 10px 10px 10px;}
.kind-right #slid2{ background: url(../s_slid/img/g2-2.jpg) center top no-repeat; background-size: 40%; padding: 40% 10px 10px 10px;}
.kind-right #kind2{ background: url(../s_cylinder/img/g2-2.jpg) center top no-repeat; background-size: 40%; padding: 40% 10px 10px 10px;}
.kind-right #kind3{ background: url(../s_cylinder/img/g3-2.jpg) center top no-repeat; background-size: 50%; padding: 40% 10px 10px 10px;}
.kind-right #kind4{ background: url(../s_cylinder/img/g4-2.jpg) center top no-repeat; background-size: 50%; padding: 40% 10px 10px 10px;}
.kind-right #assist1{ background: url(../s_assist/img/g1.jpg) center top no-repeat; background-size: 50%; padding: 40% 10px 10px 10px;}
.kind-right #elect3{ background: url(../s_elect/img/g3.jpg) center top no-repeat; background-size: 50%; padding: 40% 10px 10px 10px;}
.slid-t:before,.cyl-t:before,.ass-t:before,.ele-t:before{ color: #003366; font-weight: bold;display: block; margin: 10px 0 0 0; border-bottom: dotted 1px #003366; text-align: center; }
.t1:before{ content: "高性能シリンダーのカバスターネオを装備"; }
.t2:before{ content: "安心のダブルデッドボルト"; }
.t3:before{ content: "カバ社独自・世界最高水準の引き戸錠"; }
.t4:before{ content: "暗くても鍵穴�@がわかる蓄光リング"; }
.t5:before{ content: "高いピッキング性能のリバーシブルキー"; }
.c1:before{ content: "防犯性と操作性を極めたディンプルキー"; }
.c2:before{ content: "世界トップクラス、ピッキングに強い鍵"; }
.c3:before{ content: "防犯性と操作性を極めたディンプルキー"; }
.a1:before{ content: "時代のニーズにこたえる最上級の補助錠"; }
.a2:before{ content: "官民合同会議の試験に合格した防犯建物部品"; }
.a3:before{ content: "ピッキングなどの不正開錠に強いV18使用"; }
.a4:before{ content: "高性能シリンダー搭載・戸先鎌錠タイプ"; }
.a5:before{ content: "左右共用タイプの防犯対策戸先鎌錠"; }
.e1:before{ content: "選べる３つのモードで使用環境を選ばない"; }
.e2:before{ content: "省エネ機能付き、洗練されたスマートな電子錠"; }
/*-------------- sesrvice -----------------------*/
.ser-ul2 h3{ padding: 10px 0; }
.ser-ul2 .txt{ padding: 50% 0 0 0; }
.ser-ul2 a img{ display: block; width: 80%; margin: 5px auto 40px auto; }
#ser-01 p{ background: url(../s_service/img/img.jpg) center top no-repeat; background-size: 60%; } 
#ser-02 p{ background: url(../s_service/img/img2.jpg) center top no-repeat; background-size: 60%; } 
#ser-03 p{ background: url(../s_service/img/img3.jpg) center top no-repeat; background-size: 60%; } 
#ser-04 p{ background: url(../s_service/img/img4.jpg) center top no-repeat; background-size: 60%; } 
#ser-05 p{ background: url(../s_service/img/img5.jpg) center top no-repeat; background-size: 60%; } 
#seo-1 .ser-dx{ background: url(../s_service/img/house.png) center top no-repeat; background-size: 30%; }
#seo-2 .ser-dx{ background: url(../s_service/img/car.png) center top no-repeat; background-size: 30%; }
#seo-3 .ser-dx{ background: url(../s_service/img/safe.png) center top no-repeat; background-size: 25%; }
#seo-4 .ser-dx{ background: url(../s_service/img/desk.png) center top no-repeat; background-size: 40%; }
/*-------------- open/make/change/repair -----------------------*/
#ser-t h3 img{ display: none; }
#ser-t .ser-tx img{ width: 60px;padding: 5px 0; }
#ser-t .ser-tx{ font-size: 12px; border-top: dotted 1px #003366;margin-top: 10px; }
#ser-t div{ border: 1px solid #CCC; padding: 10px;margin: 0 10px 30px 10px; }
#ser-t .ser-dx{ padding: 30% 0 0 0;font-size: 12px; }
#ser-bo{ font-size: 12px; margin-bottom: 20px; }
#ser-bo a{ margin-top: 10px; }

#ser-t h3:before,.tro-h:before{ color: #FFF; background: #003366; font-weight: bold;display: block; margin: 10px 0 10px 0; padding: 10px;  text-align: center; font-size: 18px; }
#ser-t h3:after{ content: "お見積り･出張費無料"; display: block; color: #C72C2F; text-align: center; margin-bottom: 10px; } 
.open1:before{ content: "家・建物の鍵開け 8,800円〜(税込)"; }
.open2:before{ content: "車・バイクの鍵開け 8,800円〜(税込)"; }
.open3:before{ content: "金庫・ロッカーの鍵開け 8,800円〜(税込)"; }
.open4:before{ content: "机・その他の鍵開け 8,800円〜(税込)"; }
.new1:before{ content: "家・建物の鍵取り付け 16,500円〜(税込･部品代別)"; }
.new2:before{ content: "机・その他の鍵取り付け 16,500円〜(税込･部品代別)"; }
.change1:before{ content: "家・建物の鍵交換 11,000円〜(税込･部品代別)"; }
.change2:before{ content: "金庫・ロッカーの鍵交換 11,000円〜(税込･部品代別)"; }
.change3:before{ content: "机・その他の鍵交換 11,000円〜(税込･部品代別)"; }
.make1:before{ content: "家・建物の鍵作成 16,500円〜(税込)"; }
.make2:before{ content: "金庫・ロッカーの鍵作成 16,500円〜(税込)"; }
.make3:before{ content: "机・その他の鍵作成 16,500円〜(税込)"; }
.repair1:before{ content: "家・建物の鍵修理 8,800円〜(税込)"; }
.repair2:before{ content: "金庫・ロッカーの鍵修理 8,800円〜(税込)"; }
.repair3:before{ content: "机・その他の鍵修理 8,800円〜(税込)"; }
/*-------------- trouble sub -----------------------*/
.tro-h img{ display: none; }
.tro-con{ border: 1px solid #CCC; padding: 10px; margin-bottom: 30px }
.tro-con h4{ padding: 10px 0 5px 0; border-bottom: 1px solid #B11316; }
.tro-con li p{ padding: 10px; }
.tro-h:before{ margin-bottom: 0!important; }
.safe1:before{ content: "鍵開け・番号開錠"; }
.safe2:before{ content: "紛失キーの作成"; }
.safe3:before{ content: "故障の修理・調整"; }
.safe4:before{ content: "鍵の交換・番号変更"; }
.house1:before{ content: "鍵開け・番号開錠"; }
.house2:before{ content: "鍵の作成・複製"; }
.house3:before{ content: "鍵の修理・調整"; }
.house4:before{ content: "鍵の交換・取替え"; }
.house5:before{ content: "鍵・補助錠の取り付け"; }
.etc1:before{ content: "鍵開け・開錠"; }
.etc2:before{ content: "鍵の作成・複製"; }
.etc3:before{ content: "故障の修理・調整"; }
.etc4:before{ content: "鍵の交換・取替え"; }
.car1:before{ content: "インロック開錠"; }
.car2:before{ content: "紛失キーの作成・複製"; }
.car3:before{ content: "イモビライザーキー作成"; }
/*---------------------- area ---------------------------*/
.h3-clear2{ width: 90%; margin: 0 auto; } 
.area-foot{ margin-bottom: 30px; }
.foot-p span img{ width: 180px; margin: 10px 0; }
#foot-ul{ border: dotted 1px #CCC; padding: 0 10px 10px 10px; }
#foot-ul li span{ display: block;margin-top: 10px; font-weight: bold; color: #003366; }
#foot-ul li{ font-size: 12px; }
/*---------------------- flow ---------------------------*/
#flow-con{ padding: 20px 0 0 0; }
.flow-p{ padding: 10px 10px 20px 10px; }
#merit-box{ padding: 10px; }
#merit-box h3{ padding: 20px 40% 10% 0; }
#merit-box p{ border-top: 1px solid #C12124; padding: 10px 10px 20px 10px; }
#step1 h3{ background: url(../s_flow/img/step1.jpg) right top no-repeat; background-size: 40%; }
#step2 h3{ background: url(../s_flow/img/step2.jpg) right top no-repeat; background-size: 40%; }
#step3 h3{ background: url(../s_flow/img/step3.jpg) right top no-repeat; background-size: 40%; }
/*---------------------- price ---------------------------*/
#price-table{ border-collapse: collapse; margin-top: 10px;}
#price-table td,#price-table th{ text-align: center; border: 1px solid #CCC; }
#price-table td{ font-size: 11px; }
.price-s td{ background: #FFE077; }
.price-t { background: #F4F4F4; }
#price-b p{ text-align: left; padding: 10px; font-size: 12px; }
#price-p{ font-size: 12px; padding: 10px; }
/*------------------------fq------------------------------*/
#fq-top{ margin-bottom: 30px; padding-bottom: 10px;border-bottom: 3px dotted #CCC; }
#fq-top p{ padding-top: 10px;font-weight: bold; font-size: 24px; text-align: center; }
#fq-top ul { padding: 10px; }
#fq-top li { padding: 0 0 10px 0; }
#fq-top li:before{ content: "Ｑ."; }
.fq-q{ color: #FFF; background: #003366; padding: 5px 10px; }
.fq-q:before{ content: "Ｑ. "; font-size: 20px;font-weight: bold;}
.fq-a{ padding: 10px; }
.fq-a a{ margin-top: 10px; }
.fq-a:before{ content: "Ａ. "; color: #CB2528;font-size: 20px;font-weight: bold; }
/*------------------------crim------------------------------*/
#crim-con2{ margin-bottom: 30px; }
#crim-con2 li{ padding: 10px; border-bottom: dotted 2px #CCC; }
#crim-con2 li.end{ border: none; }
#crim-con2 li img{ width: 90%; margin: 0 10%; padding: 10px 0;}
#crim-con3 h4{ font-size: 20px;padding: 10px 0 0 0; border-bottom: 1px solid #CCC; margin-bottom: 10px; }
#crim-p1 p{ background: url(../s_crim/img/p1.jpg) left top no-repeat; background-size: 38%; padding: 0 0 10px 42%; }
#crim-p2 p{ background: url(../s_crim/img/p2.jpg) left top no-repeat; background-size: 38%; padding: 0 0 10px 42%; }
#crim-p3 p{ background: url(../s_crim/img/p3.jpg) left top no-repeat; background-size: 38%; padding: 0 0 10px 42%; }
#crim-con3{ padding-bottom: 30px; }
#rec-box{ padding: 0 0 40px 0; overflow: hidden; }
#rec-box p{ padding-bottom: 10px; }
#rec-box a{ display: block;float: left; width: 48%; padding: 1%; }
/*-------------------map-----------------------------------*/
.map-t{ border-left: 5px solid #0157AD;font-weight: bold; padding: 0 0 0 10px; }
.map-con{ margin-top: 20px; }
.map-con td{ padding-bottom: 10px; }
.map-p{ font-weight: bold; padding: 0 0 0 10px;border-left: 5px solid #0157AD;margin: 20px 0 0 0; }
/*----------------------subarea----------------------------*/
.area-con3 p{ clear: both;font-size: 18px; padding-bottom: 5px; border-bottom: 1px solid #BD2F31; color: #BD2F31; font-weight: bold; margin-top: 20px; }
.area-con3 ul{ overflow: hidden; margin-bottom: 20px; }
.area-con3 li{ padding: 5px; border-bottom: 1px dotted #CCC; float: left; font-size: 12px; }
.area-con3{ margin-bottom: 30px; }
.clear-l2{ margin-bottom: 30px; }
#area-tro{ overflow: hidden; margin-bottom: 30px; }
#area-tro li{ float: left; width: 50%; }
/*--------------------------------*/
.area-box{
	padding: 10px 15px 10px 15px;
	border: 1px dotted #003366;
	border-top: none;
}
.area-box h4{ font-weight: bold;
	font-size: 16px;
	color: #D81619;
	padding: 20px 0 20px 80px;
	}
.area-box p{
	padding-top: 5px;
}
	#area-box1 h4{
		background: url(../img/icon1_03.png) left bottom no-repeat;
		background-size: 80px;
	}
	#area-box2 h4{
		background: url(../img/icon2_03.png) left bottom no-repeat;
		background-size: 80px;
	}
	#area-box3 h4{
		background: url(../img/icon3_03.png) left bottom no-repeat;
		background-size: 80px;
	}
	#area-box4 h4{
		background: url(../img/icon4_03.png) left bottom no-repeat;
		background-size: 80px;
	}
.area-title{
	clear: both;
	background: #23558B;
	font-weight: bold;
	color: #FFF;
	padding: 15px;
	font-size: 20px;
	text-align: center;
}
.area-box2{
	padding: 15px;
	border: 10px solid #23558B;
	margin-bottom: 40px;
	position: relative;
}
.area-box2 h4:before{
	content: url(../img/car_03.png);
	display: block;
	text-align: center;
	padding-bottom: 5px;
	
}
.area-box2 h4{
	font-size: 16px;
	font-weight: bold;
	color: #23558B;
	padding-bottom: 10px;
}