@charset "UTF-8";
body{ background: url(../images/subtle-pattern-1.png); /*#f1eee5*/; }
.main{ max-width: 1060px; margin: 0 auto; padding:0;/* box-shadow */
/*box-shadow:rgba(235, 235, 235, 0.458824) 0px 0px 5px 3px;
-webkit-box-shadow:rgba(235, 235, 235, 0.458824) 0px 0px 5px 3px;
-moz-box-shadow:rgba(235, 235, 235, 0.458824) 0px 0px 5px 3px;*/}
.logo{ float: left; margin: 10px 20px 5px 10px; width: 100px; }
.logo img{ width: 100px;}
.logo:hover{ margin: 15px 20px 0 10px; } 
.cre img{ width: 230px;}
#header-box{
	float: left;
}
#header-box .cre{ float: left;}
.tel-top{ float: right; padding: 0 10px 0 0; }

.header1{ background: url(../images/header_03.png) left bottom no-repeat; overflow: hidden;padding-bottom: 10px; border-bottom: 2px solid #cb4a4a; }
.header1 .tel{  float: right; }
.pc-del{ display: none; }
.con-h3{ margin: 0 2%;}
.change .sub-h3{ margin: 0 2%; }
.content-top2 p,.header2 .p2,.content-subtop3 dd.text,.content-top4 dd{ line-height: 1.8em; padding: 10px; }
/*--[電話]----------------------------------------------------------------------------*/
.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-box .tel-left{ float: left; text-align: center; width: 50%; }
.tel-box .tel-right{ float: right; width: 50%; }
.tel-left .tel1{ font-weight: bold; color: #f56c00; font-size: 22px; padding-top: 10px; }
.tel-left span{ font-weight: bold; display: block; color: #f56c00; font-size: 22px; }
.tel-left .tel2{ font-weight: bold; text-align: center; padding-bottom: 10px; }
.tel{ padding: 10px; }
section .tel{ clear:both;margin-bottom: 30px; }
.main .tel{ height: 100px;  overflow: hidden; }
/*--[メニュー]----------------------------------------------*/
.main-nav{ clear: both;border-top: 2px solid #FFF; display: block; }
.main-nav > li {
	color: #FFF;
	list-style: none;
	float: left;
	width: 25%;
	height: 60px;
	text-align:center;
	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 );
	border-left: 1px solid #FFF;
	line-height: 1.2em;
}
.main-nav > li:first-child{ border: none; }
.main-nav > li > a{ display: block; text-align: center; color: #FFF; padding: 12px 0 0 0; height: 48px;}
.main-nav > .link2{ padding: 12px 0 0 0; cursor: pointer; height: 60px;}
.ie7 .main-nav > .link2{ padding: 12px 0 0 0; cursor: pointer; height: 48px;}
.main-nav li ul { margin-top: 10px;display: none; position:absolute; width: 30%;}
.main-nav li ul li{ display: block; width: 100%; border-left: 1px solid #CCC; border-right: 1px solid #CCC; border-bottom: 1px dotted #DDD; background: #FFF;}
.main-nav li ul li a{ display: block; background: #FFF; text-align: left; color: #000; padding: 15px 15px 15px 20px; }
.main-nav li ul li a:before{ content: "→"; color: #cb4a4a; font-weight: bold; padding-right: 10px; }
.main-nav li ul li a:hover{ padding: 15px 15px 15px 40px; }
.main-nav > .link1 a:after{ content: "Top page"; display: block; text-align: center;}
.main-nav > .link2 p:after{ content: "Service"; display: block; text-align: center;}
.main-nav > .link3 a:after{ content: "Price"; display: block; text-align: center;}
.main-nav > .link4 a:after{ content: "Kagizaru"; display: block; text-align: center;}
.main-nav > .link5 a:after{ content: "Area"; display: block; text-align: center;}
/*--[トップヘッダー&サービスヘッダー]----------------------------------------------*/
.header2,.ser-header{ clear: both; background: url(../images/top_11.png) right top no-repeat; overflow: hidden;}
.ser-header{ background-size: 25%; padding-bottom: 15px; }
.header2 h2,.ser-header h2{ max-width: 90%; padding: 25px 0 10px 20px; font-weight: bold; line-height: 1; text-shadow: 4px 4px 0 #FFF, -4px 4px 0 #FFF, 4px -4px 0 #FFF, -4px -4px 0 #FFF; font-size: 60px; }
.header2 h2 span,.ser-header h2 span{ text-shadow: none; display: block; background: #be6a18; font-weight: bold; color: #FFF; float: left; padding: 14px 10px 5px 10px; line-height: 40px; margin: 0 10px 0 0; font-size: 46px; }
.header2 .p2{ clear:both; max-width: 76%; margin: 0 0 20px 20px; background: url(../images/top_14.png) bottom left no-repeat; padding: 0 0 23% 0; background-size: contain; }
.ser-header p,.header2 .p1{ text-align: left; max-width: 80%; margin: 0 0 0 20px; font-size: 18px; }
.ser-header .p1,.header2 .p1{ font-weight: bold; }
.header2 p{ text-shadow: #FFF 1px 1px 0px, #FFF -1px 1px 0px,
             #FFF 1px -1px 0px, #FFF -1px -1px 0px;}
.con-nav li{ min-height: 160px; }
.con-nav li a, .con-nav li span,.con-nav li a:after{ font-weight: bold; font-size: 20px;}
.page-nav li{ min-height: 30px; }

/*--[共通ヘッダー]--------------------------------------------------*/
.header3{ overflow: hidden; background: #bf2727; color: #FFF; padding: 5px 10px;text-align: center; }
.header3 span{ color: #fdf01c; font-weight: bold; font-size: 30px; }
.header3 .box1{ padding: 15px 0 8px 0; font-weight: bold; line-height: 1.2em; font-size: 30px; }
/*--[トップページ１]--------------------------------------------------*/
.content-top1{ padding: 10px 0 0 180px; background: url(../images/top_21.png) left top no-repeat, url(../images/top_19.png) top repeat-x; background-size: auto; }
.ie8 .content-top1{ padding-left: 0; }
.content-top1 h3{ background: #9f2424;color: #FFF; height: 53px; line-height: 53px;font-weight: bold; font-size: 20px; }
.ie8 .content-top1 h3{ padding: 0 0 0 40px;}
.ie8 .content-top1 ul{ padding: 20px 20px 20px 40px;}
.content-top1 ul{ overflow: hidden; margin-right: 10px;padding: 20px 20% 10px 0; background: url(../images/top_20.png) right top no-repeat; background-size: 20%;}
.content-top1 li{ padding-bottom: 10px; line-height: 1.6em; }
/*--[トップページ２]--------------------------------------------------*/
.content-top2 div{ padding: 10px 10px 20px 240px; margin: 20px; min-height: 160px; }
.content-top2 div:first-child{ border-bottom: dotted 1px #CCC; }
.content-top2 div h4{color: #2845ae; padding-bottom: 10px; }
.content-top2 .box1{ background: url(../images/top_31.png) left top no-repeat; }
.content-top2 .box2{ background: url(../images/top_34.png) left top no-repeat; }
/*--[トップページ４]--------------------------------------------------*/
.content-top4 .top1:before{ font-size: 18px; content: "安心その３";background: url(../images/main_60.png) center top no-repeat; }
.content-top4 .top2:before{ font-size: 18px; content: "安心その２";background: url(../images/main2_60.png) center top no-repeat;  }
.content-top4 .top3:before{ font-size: 18px; content: "安心その１";background: url(../images/main3_60.png) center top no-repeat; }
.content-top4 .top4:before{ font-size: 18px; content: "安心その４";background: url(../images/main4_60.png) center top no-repeat; }
/*--[トップページ３]--------------------------------------------------*/
.content-top3 .link5{ width: 50%;}
.content-top3 .link6{ width: 25%;}
.content-top3 .link7{ width: 25%;}
.content-top3 .text{ min-height: 100px; }
/*--[トップページ５]------------------------------------------------------------------------------*/
.content-top5{ margin: 0 2% 40px 2%; padding: 0 220px; background-image: url(../images/back1.jpg), url(../images/back2.jpg); background-position: left top, right top;background-repeat: no-repeat; }
.content-top5 p{ line-height: 1.8em; }
.content-top5 .red{ color: #C4070B; padding-top: 20px; border-bottom: dotted 1px #C4070B; margin-bottom: 10px; font-size: 18px; }

/*--[サービスプライス]------------------------------------------------------------------------------*/
.change .ser-price,.new .ser-price{ width: 95%;padding: 0 0 0 100px; }
/*---[フッターフロウ]------------------------------------------------------------------------------*/
.content-flow li{ border: 1px solid #CCC;}
.content-flow li:before{ display: block; color: #2845ae; text-align: center; }
.content-flow .flow1:before{ content: "STEP１"; }
.content-flow .flow2:before{ content: "STEP２"; }
.content-flow .flow3:before{ content: "STEP３"; }
.content-flow .flow4:before{ content: "STEP４"; }
.ie8 .content-flow li{ width: 22.8%; margin: 10px 0 10px 10px; padding: 20px; text-align: center; }
.ie7 .content-flow li{ width: 19.5%; }
/*--[フッター]--------------------------------------------------*/
footer ul{ overflow: hidden; padding: 20px 0 30px 10px; width: 90%; margin: 0 auto; }
footer ul > li { float: left;width: 20%;}
footer ul li:first-child,footer ul .link2{ float: left; }
footer ul .link3{ clear: both; }
.ie8 footer ul .link4{ clear: both; }
.ie8 footer ul .link5{ clear: both; }
footer ul li ul{ margin: 0; padding: 0 0 20px 0; width: 400%;  }
footer ul li ul li{ float: left; padding: 10px 0 0 0;width: 30%; }
footer ul li ul li:before{ content: "＞ "; }
footer ul li,footer li a{ color: #FFF; }
footer li a:hover{ padding-left: 10px; }
.footer-map{ overflow: hidden; float: right; padding: 0 0 10px 10px; height: 200px; }
.foot-p{ overflow: hidden; }
/*--[料金１]------------------------------------------------------------------------------*/
.price .con-h3,.area .con-h3,.area1{ margin: 50px 2%; }
.price-ol li{ min-height: 240px; }
/*--[エリア１]------------------------------------------------------------------------------*/
.area1{ background: #2770d3; }
.area .con-h3{ margin-bottom: 0; }
/*--[電子錠１]------------------------------------------------------------------------------*/
.digital .ser-box1{ min-height: 250px; }
.digital .ser-box5b dl{ width: 32%; float: left; }
.digital .ser-box5c{ display: -wbkit-flex; display: flex; }
.digital .ser-box5b .digital2b{ margin: 0 1%; }
/*--[ブログ]------------------------------------------------------------------------------*/
.content-topic{ float: left; width: 47%; }
.content-pick{ float: right; width: 47%; }
.content-topic ul,.content-pick ul{ padding: 10px 10px 0 10px; border: 1px solid #CCC; height: 100px; }
.content-topic{ margin: 30px 0 0 2%; clear: both; }
.content-topic h3{ border-right: 1px solid #FFF; }
.content-pick{ margin: 30px 2% 0 0; }
.ichiran{ padding: 10px 10px 30px 10px; }

.side-topic{  float: right; width: 30%; margin: 20px 20px 20px 0;}/*右*/
.blog .blog-box{ float: left; width: 62%; }/*左*/
.blog .text .left{ float: left; padding: 0 10px 0 0; }
/*--[鍵猿１]------------------------------------------------------------------------------*/
.kagi dl{ min-height: 200px; }
.kagi dd{ padding: 10px 10px 0px 10px;}
.kagi .ser-kagi1,.kagi .ser-kagi3,.kagi .ser-kagi5{ border-right: none; }