@charset "UTF-8";
@import url("contact.css");

/*
薄い色
#92CDE8

濃い色
#59A2C4
*/

body {
	width: 100%;
	margin: 0 auto;
	color: #202020;
	font-size: 14px;
	line-height: 150%;
	letter-spacing: 1px;
	font-family:"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.serif{
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

img {
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}


.cf:before,
.cf:after{
	content:" ";
	display:table;
}

.cf:after{
	clear:both;
}

.cf{
	*zoom:1;
}

.mb_2{
	margin-bottom:2% !important;
}
.mb_3{
	margin-bottom:3% !important;
}
.mb_5{
	margin-bottom:5% !important;
}
.center{
	text-align:center;
}
.right{
	text-align:right;
}
.left{
	text-align:left;
}
.bold{
	font-weight:bold;
}
.red{
	color:red;
}
.blue{
	color:blue;
}

/* 共通
================================================== */
.left_img{
	float:left;
	margin:0 2% 2% 0;
}

/* リンク
------------------------------ */

a {
	color: #3488d0;
	transition: All 0.4s ease;
}
a img {
	transition: All 0.4s ease;
}

/* テーブル
------------------------------ */

table.def {
	width: 100%;
	font-size: 13px;
}
table.def th {
	width: 40%;
	padding: 5px;
	color: #59A2C4;
	text-align: left;
	vertical-align: top;
	border: 1px solid #92CDE8;
}
table.def td {
	padding: 5px;
	border: 1px solid #92CDE8;
}


/* リスト
------------------------------ */

ul.def {
	margin: 0 0 15px;
}
ul.def li {
	height: 30px;
	padding: 0 0 0 12px;
	line-height: 35px;
	border-bottom: 1px dotted #cfcfcf;
	background: url(../images/common/ico_arrow02.png) left center no-repeat;
	overflow: hidden;
}


/* バナー・ボタン
------------------------------ */

.bnr {
	margin: 0 1% 2%;
	text-align: center;
}
.b_bnr{
	margin-bottom:5%;
}

.btn {
	margin: 0 10px 10px;
	padding: 6px 0;
	text-align: center;
	color: #fff;
	text-decoration: none;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 4px;
	background:
		url(../images/common/ico_arrow02_w.png) 5px center no-repeat,
		linear-gradient(#53d8aC, #92CDE8)
	;
	box-shadow:
		0 2px 2px rgba(0,0,0,.2),
		0 1px 1px rgba(255,255,255,.6) inset
	;
	display: block;
}

p.text-more {
	padding: 12px 0 0;
	text-align: right;
}
p.text-more a {
	padding: 0 0 0 12px;
	color: #214ba1;
	background: url(../images/common/ico_arrow02.png) left center no-repeat;
}


/* ページネーション
------------------------------ */

ul.pagenation {
	margin: 0 0 20px;
	text-align: center;
	font-size: 0;
	letter-spacing: 0;
}
ul.pagenation li {
	width: 30px;
	margin: 0 3px;
	text-align: center;
	line-height: 30px;
	font-size: 13px;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	vertical-align: top;
	display: inline-block;
}
ul.pagenation li.current {
	color: #fff;
	background: #3488d0;
}
ul.pagenation li.dot {
	width: 15px;
	margin: 0 1px;
	border: none;
}
ul.pagenation li a {
	text-decoration: none;
	display: block;
}


/* ページ内リンク
------------------------------ */

.anchor-links {
	margin: 0 0 15px;
	text-align: center;
	font-size: 0;
	letter-spacing: 0;
}
.anchor-links li {
	width: 30%;
	height: 35px;
	margin: 0 1% 10px;
	line-height: 35px;
	font-size: 13px;
	border: 1px solid #cfcfcf;
	background: linear-gradient(#fff, #e3e3e3);
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
}
.anchor-links a {
	text-decoration: none;
	display: block;
}


/* 開閉式コンテンツ
------------------------------ */

.toggle {
	cursor: pointer;
}
.toggle + * {
	display: none;
}
.toggle:target + * {
	display: block;
}


/* ヘッダー
================================================== */

.site-header {
	margin: 0 0;
}

.h_wrap{
	position:fixed;
	border-bottom:2px solid #3488d0;
	z-index:200;
	background:#fff;
	width:100%;
}
.h_wrap .inner{
	width:100%;
}

.h-logo {
	width: 70%;
	float:left;
	padding:1.5% 1%;
}

#navButton{
	width:15%;
	float:right;
}
#navButton img{
	width:100%;
}

#gnav_wrap nav ul{
	display:none;
	background-color:#3488d0;
	padding:2% 0;
}
#gnav_wrap nav ul li{
	padding:5%;
}
#gnav_wrap nav ul li a{
	display:block;
	color:#fff;
	text-decoration:none;
}
#gnav_wrap nav .menuActive{
	display:block !important;
}



#visual_wrap{
	width: 100%;
	background-color:#fff;
	position:relative;

}
.visual {
	margin: 0 auto;
	width: 100%;
	height: auto;
	text-align: left;
	overflow: hidden;
}

.visual ul {
	width: 100%;
	height: 55vw;
	text-align: left;
	overflow: hidden;
	position: relative;
}

.visual ul li {
	top: 0;
	width: 100%;
	height: 55vw;
	display: none;
	position: absolute;
	overflow: hidden;
}
#visual_wrap .main_cach{
	position:absolute;
	bottom:2%;
	z-index:100;
}
.sub-visual{
	margin-bottom:3%;
}
.sub-visual.error{
	height: 85px;
}

/* フッター
================================================== */
/* pagetop
-------------------------*/
.backtotop {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 9000;
    display: none;
	width:10%;
	opacity:0.8;
}
.backtotop a:focus{
	outline:none !important;
}


/* info
------------------------------ */
.f_info{
	padding:1px 0 0;
	border-top:3px solid #3488d0;
	text-align:center;
}
.f_info .f_logo{
	border-top:1px solid #3488d0;
}
.f_info .f_logo img{
	padding:3% 5% 2%;
}
.f_info .address{
	border-bottom:1px solid #3488d0;
	margin-bottom:1px;
}
.f_info .address p{
	display:inline-block;
	margin:0 auto;
	padding:0 2% 2%;
}
.f_info p{
	text-align:left;
}
.f_info .tel_wrap{
	border-top:3px solid #3488d0;
	margin:0 0 1px;
	padding-top:1px;
}
.f_info .tel_wrap .tel_inner{
	background-color:#013c88;
	padding-bottom:2%;
}
.f_info .f_tel{
	display:inline-block;
	margin:0 auto;
	padding-top:2%;
	color:#fff;
}
.f_info .f_tel a{
	color:#fff;
	text-decoration:none;
}

/* グローバルナビ
------------------------------ */

.f-nav {
	overflow: hidden;
}
.f-nav h3{
	background-color:#3488d0;
	color:#fff;
	padding:3% 2%;
	font-size:120%;
}
.f-nav h4{
	background-color:#2169a9;
	color:#fff;
	padding:2% 2%;
	font-size:100%;
}
.f-nav li {
	padding: 3% 1%;
	font-size: 13px;
	letter-spacing: 0;
	box-sizing: border-box;
	border-bottom:1px solid #ededed;
}
.f-nav li i{
	color:#3488d0;
}
.f-nav li a {
	text-decoration: none;
	display: block;
	color:#333;
}
.f-nav p{
	border:1px solid #ffc4f4;
	margin:2% 1%;
}
.f-nav p a{
	display:block;
	color:#5e2953;
	background-color:#ffebfc;
	padding:3% 1%;
	text-decoration:none;
	border:1px solid #fff;
}
.f-nav .for li{
	border:1px solid #5bb1fe;
	margin:2% 1%;
	padding:0;
}
.f-nav .for li a{
	display:block;
	color:#476581;
	background-color:#add5f9;
	padding:3% 1%;
	text-decoration:none;
	border:1px solid #fff;
}
.f-nav .for li a i{
	color:#476581;
}


/* ホームへリンク・トップへリンク
------------------------------ */

.f-topnav {
	background: #3488d0;
	overflow: hidden;
	border-bottom:1px solid #fff;
}
.f-topnav li {
	box-sizing:border-box;
	width: 50%;
	text-align: center;
	float: left;
}
.f-topnav li:nth-child(2n-1){
	border-right:1px solid #fff;
}
.f-topnav li a {
	padding: 5% 1%;
	display: block;
	color:#fff;
	text-decoration:none;
}


/* コピーライト
------------------------------ */

.f-copy {
	color: #fff;
	font-size: 12px;
	text-align: center;
	background: #2169a9;
	display: block;
	padding:1%;
}
.f-copy a {
	color: inherit;
	text-decoration: none;
}


/* コンテンツ
================================================== */

.main-contents {
	display: block;
}


/* 記事骨格
------------------------------ */

.item-box {
	margin: 0 1% 3%;
}
.item-text {
	overflow: hidden;
	padding:0 1% 1%;
}

.photo{
	text-align:center;
	background-color:#ededed;
	padding:1% 0;
	margin-bottom:2%;
}


/* 見出し
------------------------------ */

.item-title-h3 {
	color:#fff;
	background-color:#013c88;
	padding:1px 0;
	margin-bottom:2%;
}
.item-title-h3 span{
	display:block;
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
	padding:2% 1%;
}

.item-title-h4 {
	margin: 0 0 2%;
	color: #013c88;
	font-size: 15px;
	border-bottom: 1px solid #013c88;
}
.item-title-h5 {
	color: #013c88;
	margin: 0 0 1%;
}


/* 記事サムネイル
------------------------------ */

img.thumb-left {
	max-width: 35%;
	height: auto;
	margin: 0 8px 8px 0;
	float: left;
}
img.thumb-right {
	max-width: 35%;
	height: auto;
	margin: 0 0 8px 8px;
	float: right;
}
img.thumb-center {
	max-width: 95%;
	margin: 0 auto 8px;
	display: block;
}
img.photo {
	padding: 2px;
	background: #fff;
	box-shadow: 0 2px 2px rgba(0,0,0,.2);
	box-sizing: border-box;
}


/* 記事情報
------------------------------ */

.post-data {
	margin: 0 0 15px;
	line-height: 21px;
	font-size: 0;
	letter-spacing: 0;
}
.post-data li {
	margin: 0 8px 0 0;
	padding: 0 8px 0 0;
	font-size: 12px;
	border-right: 1px dotted #aaa;
	display: inline-block;
}
.post-data .item-date {
	margin: 0;
}
.item-date {
	margin: 0 0 8px;
	padding: 0 0 0 10px;
	font-size: 13px;
	background: url(../images/common/ico_arrow01.png) left center no-repeat;
	display: block;
}


/* 詳細ページ SNSシェアボタン
------------------------------ */

.sns-sharerbtn-list {
	margin: 8px 0;
	padding: 8px 0;
	text-align: center;
	border-top: 1px solid #cfcfcf;
	border-bottom: 1px solid #cfcfcf;
	background: #f0f0f0;
	overflow: hidden;
	clear: both;
}
.sns-sharerbtn-list li {
	margin: 0 4px;
	vertical-align: top;
	display: inline-block;
}


/* 詳細ページ 前後の記事へのリンク
------------------------------ */

.paginated-link {
	margin: 2% 5px;
	overflow: hidden;
}
.paginated-link li {
	width: 48%;
	padding: 0 5px;
	text-align: center;
	font-size: 13px;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	background: #f0f0f0;
	box-sizing: border-box;
}
.paginated-link li.prev-link {
	float: left;
}
.paginated-link li.next-link {
	float: right;
}
.paginated-link li a {
	height: 35px;
	line-height: 35px;
	text-decoration: none;
	display: block;
	overflow: hidden;
}


/* トップページ
================================================== */

.greeting{
	background:url(../images/top/g_bk.png) no-repeat center bottom;
	background-size:cover;
	padding:2% 1%;
}
.greeting h3{
	color:#023a91;
	font-weight:bold;
	margin-bottom:2%;
}
.greeting p{
	text-shadow:0 0 3px #fff,0 0 3px #fff;
}

.top_nav nav ul{
	padding:0.5% 0 2%;
}
.top_nav nav ul li{
	width:33%;
	float:left;
}
.top_nav nav ul li:nth-child(3n-1){
	margin:0 0.5%;
}




/* 新着情報
------------------------------ */

.news-list li {
	height: 35px;
	line-height: 35px;
	border-bottom: 1px dotted #cfcfcf;
	overflow: hidden;
}
.news-list li span {
	margin: 0 8px 0 0;
}


/* 下層ページ
================================================== */

/* 戸建て・マンション個室の方
------------------------------ */

.dea_img img{
	width:50%;
	float:left;
}

/* マンション管理組合の方
------------------------------ */

.man_nav li{
	width:49.5%;
	float:left;
}
.man_nav li:nth-child(2n-1){
	margin-right:0.5%;
}
.man_nav li:nth-child(2n){
	margin-left:0.5%;
}
.list_row li{
	width:40%;
	float:left;
}
.list_row li img{
	width:100%;
}
.list_row li:nth-child(3n-1){
	width:20%;
	padding-top:10%;
}
.man_point{
	border-bottom:1px dotted #ccc;
	padding-bottom:2%;
}

/* 小規模オフィス・病院・介護施設の方
-------------------------------------- */

.office_inner{
	padding-top:1%;
}
.office_inner img{
	width:40%;
	float:left;
	margin-right:2%;
}
.office_inner .txt{
	width:58%;
	float:left;
}
.t_office,
.t_office tbody,
.t_office tr,
.t_office tr th,
.t_office tr td{
	display:block;
}
.t_office,
.t_office tbody,
.t_office tr{
	width:100%;
	box-sizing:border-box;
}
.t_office{
	border:1px solid #5bb1fe;
	padding:1px;
}
.t_office tr th{
	width:98%;
	text-align:left;
	color:#013c88;
	padding:2% 1%;
	background-color:#add5f9;
}
.t_office tr td{
	padding:2% 1%;
}

/* 女性総合防犯設備士
------------------------------ */

.woman{
	padding:1px;
	border:1px solid #ffc4f4;
}
.woman .inner{
	padding:2% 1%;
	background-color:#ffebfc;
}
.circle{
	width:35%;
	height:33.5vw;
	overflow:hidden;
}
.woman .circle{
	margin-left:1%;
}
.list_w li{
	border-bottom:1px dotted #ccc;
	padding:2% 0;
}
.list_w li img{
	width:40%;
	margin-right:2%;
	float:left;
}
.list_w li p{
	padding:3% 0;
	width:58%;
	float:left;
}

/* カギの交換
------------------------------ */

#tab{
	padding:0 1% 2%;
}
#tab li{
	border:1px solid #5bb1fe;
	padding:1px;
	margin-bottom:1%;
}
#tab li a{
	background-color:#add5f9;
	text-decoration:none;
	display:block;
	padding:2% 1%;
	color:#476581;
}
.key_info{
	border:1px solid #ccc;
	padding:1px;
	margin-bottom:2%;
}
.key_info .inner{
	background-color:#ededed;
	padding:2% 1%;
}
.blo li{
	margin-bottom:2%;
}
.change li{
	padding:2% 0;
	border-bottom:1px dotted #ccc;
}
.change li:last-child{
	border-bottom:none;
	margin-bottom:2%;
}
.change li img{
	width:25%;
	margin-right:2%;
	float:left;
}

/* オートロックのリニューアル
------------------------------ */

.list_row02{
	margin-bottom:2%;
}
.list_row02 li{
	width:49%;
	float:left;
	text-align:center;
}
.list_row02 li:nth-child(2n-1){
	margin-right:1%;
}
.list_row02 li:nth-child(2n){
	margin-left:1%;
}
.list_row02 li p{
	background-color:#013c88;
	color:#fff;
	padding:1%;
}
.list_row03 li{
	margin-bottom:2%;
}
.list_row04{
	margin-bottom:2%;
}
.list_row04 li{
	padding:2% 0;
	border-bottom:1px dotted #ccc;
}
.list_row04 li img{
	width:48%;
	margin-right:2%;
	float:left;
}
.list_row04 li p{
	width:50%;
	float:left;
}
.list_row05{
	margin-bottom:2%;
}
.list_row05 li{
	float:left;
	width:42%;
}
.list_row05 li p{
	font-size:90%;
}
.list_row05 li img{
	width:100%;
}
.list_row05 li:nth-child(3n-1){
	width:10%;
	margin:0 3%;
	padding-top:10%;
}

/* 電気錠
------------------------------ */

.auto{
	width:50%;
	margin:0 auto;
}
.auto p{
	background-color:#013c88;
	color:#fff;
	padding:1%;
}


/* サイトマップ
------------------------------ */

.sitemap-list a {
	padding:2% 1%;
	text-decoration: none;
	border-bottom: 1px dotted #ccc;
	display: block;
}
.sitemap-list a:hover {
	background-color: #efefef;
}


/* よくある質問
------------------------------ */

dl.faq-list dt {
	padding: 0 0 0 35px;
	color: #59A2C4;
	font-weight: bold;
	background: url(../images/faq/ico_q.png) left center no-repeat;
}
dl.faq-list dd {
	margin: 0 0 3%;
	padding: 10px 0 10px 35px;
	border-bottom: 1px dotted #cfcfcf;
	background: url(../images/faq/ico_a.png) left center no-repeat;
}


/* ギャラリー
------------------------------ */

ul.gallery {
	font-size: 0;
	letter-spacing: 0;
}
ul.gallery li {
	width: 32%;
	margin: 0 0 8px;
	font-size: 13px;
	vertical-align: top;
	display: inline-block;
}
ul.gallery li:nth-child(3n+2) {
	margin: 0 2% 8px;
}


/* お問い合わせ
------------------------------ */

.contact-form dt {
	margin: 0 0 8px;
	padding: 5px;
	background: #e9e9e9;
}
.contact-form dd {
	margin: 0 0 15px;
	padding: 0 0 15px;
}

.input-big,
.input-middle,
.input-mini {
	padding: 5px;
	box-sizing: border-box;
}
.input-big {
	width: 100%;
}
.input-middle {
	width: 60%;
}
.input-mini {
	width: 60px;
}

/* 必須マーク */
.required-mark {
	color: #f00;
	font-size: 12px;
}

/* 未記入エラー文 */
.error-text {
	margin: 0 0 5px;
	color: #f00;
}

/* 確認、バック、送信ボタン */
.contact-submits {
	text-align: center;
}
.contact-submits input {
	margin: 0 5px;
	padding: 5px;
}


main .error{
	margin: 50px 0;
}

.bbx{
	background:url(../images/common/bleu_box.jpg) left 5px no-repeat;
	padding-left:15px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.black_box{
	background: url(../images/common/block.jpg) 1px 5px no-repeat;
	margin-bottom: 10px;
	padding-left: 15px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#content h3 {
    background: url(../images/common/h3_bg.gif) left center no-repeat #1b5d99;
    padding: 12px 10px 12px 45px;
    font-size: 18px;
    color: #fff;
    font-family: "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}

section .container h4 {
    margin-bottom: 20px;
    margin-top: 20px;
    font-size: 16px;
    color: #242424;
    border-bottom: 2px solid #1b5d99;
    padding-left: 10px;
}

.left_contents{
	text-align: center;
}

.right_contents{
	background-color: #ededed;
    padding: 2% 1%;
}

.wide{
	margin: 0 auto;
    display: block;
    width: 100%;
}

.intro_list li{
	width: 100%;
	margin: 0 0 20px;
}

.bn{
	text-align: center;
}

.bn01{
	margin-top: 30px;
}

.bn02{
	margin: 15px 0;
}

.bn03{
	margin-bottom: 30px;
}

.circle-blue {
    background: #1b5d99;
    padding: 20px;
    color: #fff;
    width: fit-content;
    font-size: 18px;
    font-weight: bold;
}

.circle-red{
	background: red;
    padding: 20px;
    color: #fff;
    width: fit-content;
    font-size: 18px;
    font-weight: bold;
}

.relative {
    position: relative;
}

.orange{
	color: orange;
}

section .container h4.sp {
    border: none;
    border-bottom: 1px solid #329dff;
    padding: 0px 0px 0px 0px;
}

section .container h5 {
    font-size: 14px;
    color: #2466c2;
    font-weight: bold;
    margin-bottom: 10px;
}

.q_icon {
    background: url(../images/faq/q_icon.gif)  10px center no-repeat;
    border: none;
    padding: 10px 20px 10px 50px;
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #2d7fc9;
    margin-bottom: 10px;
}

.a_icon {
    background: url(../images/faq/a_icon.gif) 10px center no-repeat;
    padding: 10px 20px 10px 50px;
}