@charset "utf-8";
@media screen and (max-width: 768px) {
 .mtext_big {
  font-size: 2rem
 }
 .contactbx {
  text-align: center;
  margin: 15px 0
 }
 .contactbx li {
  display: inline-block;
  margin: 0 0px 10px
 }
 .mttl-rs span {
  background: #111;
  color: #fff;
  padding: 2px 10px;
  margin-right: 5px;
  font-size: 2rem;
  margin-bottom: 10px
 }
 .tcenter_sp {
  text-align: center;
 }
 .mtext1 {
  font-size: 1.8rem
 }
 .mtext_5rem {
  font-size: 3rem;
  text-align: center
 }
 .grid-item {
  transition: .3s ease-in-out;
  width: calc(100% - 30px) !important;
  font-size: 12px;
  background: #fff;
  padding: 10px 10px 10px;
  margin-left: 5px;
  margin-right: 5px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 0px 1px
 }
 .section_box_text_r, .section_box_text_l {
  display: -webkit-flex;
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  margin: 0 auto
 }
 .section_box_text_box {
  width: calc(100% - 40px);
  vertical-align: middle;
  padding: 20px 20px
 }
 .section_box_img {
  flex: 1
 }
 .section_box_img img {
  width: 100%;
  height: 100%;
  object-fit: cover
 }
 .flex_bx_2, .flex_bx_3, .flex_bx_4 {
  display: block
 }
 .flex_bx_2 .bx {
  width: 100%
 }
 .flex_bx_3 .bx {
  width: calc(100% - 0px)
 }
 .flex_bx_3 .bx:last-child {
  border-right: 0px solid #aaa
 }
 .flex_bx_4 .bx {
  width: calc(100% - 0px)
 }
 .flex_bx_4 .bx:last-child {
  border-right: 0px solid #aaa
 }
 .flex_bx_2 .bx, .flex_bx_3 .bx, .flex_bx_4 .bx {
  margin-bottom: 20px;
  padding: 0 0px;
  position: relative;
  border-right: 0px solid #ccc
 }
 .newsbox {
  flex-direction: column;
  color: #fff !important;
  display: block;
 }
 .news-ttl {
  width: 100% !important;
  border-right: 0px solid #393977;
  border-bottom: 1px solid #fff;
  padding: 5px 0;
  text-align: center
 }
 .news-ttl span {
  font-size: 1.2rem !important
 }
 .news-bx {
  flex: 1;
  width: calc(100% - 0px);
  padding: 0 0px
 }
 .scrbr {
  width: 100%;
  padding: 15px 0px;
  max-height: 100px;
  overflow-y: scroll;
  overflow-x: hidden
 }
 #flash {
  width: 100%;
  min-width: 100%;
  position: relative
 }
 .flashimg {
  max-width: 100%;
  width: 100%;
  height: auto;
  position: absolute;
  padding: 0px 0;
  text-align: center;
  top: 0;
  right: 0;
  left: 0;
  bottom: auto;
  margin: auto;
  z-index: 5000
 }
 body {
  font-size: 1.3rem
 }
 /*  header {
     height: 70px
   }*/
 #head .logo img {
  /*    height: 55px*/
  width: 250px;
 }
 footer {
  padding: 0px 0;
  margin: 0;
  min-width: 100%;
  text-align: center
 }
 #footer {
  padding: 20px 0;
  margin: 0 auto 0;
  text-align: center;
  display: flex;
  justify-content: space-around;
  width: 100%;
  flex-direction: column
 }
 #contentwrap {
  width: 100%
 }
 #contentwrap p img {
  display: block;
  margin-left: auto;
  margin-right: auto
 }
 .list-bnr li {
  width: calc(100% - 5px)
 }
 .scrollbar-x {
  height: auto;
  overflow-x: scroll;
  overflow-y: hidden
 }
 .scrollbar-x table {
  width: 960px
 }
 .sp {
  display: block !important;
  text-align: center;
  margin: 0 auto
 }
 .pc {
  display: none !important;
  text-align: center
 }
 .map {
  width: 100%;
  height: 300px
 }
 .mttl_cl {
  font-size: 2.5rem
 }
 .mttl_cl:after {
  top: 65px
 }
 .youtube_vd {
  margin-top: 20%;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center
 }
 .youtube_vd iframe {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100%;
  width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 auto;
  display: block
 }
 #singlepage p img, #main p img {
  display: block;
  margin-left: auto;
  margin-right: auto
 }
 .single {
  width: 90%;
  margin: 0 auto;
  padding: 25px 0px
 }
 .lmain, .rmain {
  float: none;
  width: 100%
 }
 .lsingle, .rsingle {
  float: none;
  width: 90%;
  margin-bottom: 20px
 }
 .form dl {
  margin: 10px 0
 }
 .form dt {
  float: none;
  width: 100%;
  height: 20px;
  line-height: 20px;
  padding-top: 10px
 }
 .form dd {
  width: 100% !important;
  padding-left: 0;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 0px solid #eee
 }
 .form dd:last-child {
  border-bottom: 0px;
  margin-bottom: 0px
 }
 .textarea, textarea {
  width: 93% !important;
  font-size: 1.6rem;
  max-height: 250px;
  max-width: 100%;
 }
 .dropdown {
  font-size: 1.6rem
 }
 .fm-text {
  text-align: left
 }
 .news {
  width: 100%;
  margin: 0;
  padding: 0
 }
 .news dt {
  float: none;
  width: auto;
  padding-top: 5px;
  line-height: 1.3;
  text-align: center
 }
 .news dt:after {
  content: none;
  margin-left: 0
 }
 .news dd {
  padding-left: 0;
  padding-bottom: 5px;
  padding-top: 5px;
  line-height: 1.3
 }
 .mttl_slash {
  font-size: 1.5rem
 }
 .news-bl dt {
  float: none;
  width: 100%;
  color: #174cb2;
  margin: 2px 0 0
 }
 .news-bl dd {
  padding-left: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 5px 0
 }
 #title {
  padding: 30px 0 30px
 }
 #title h2 {
  font-size: 2.5rem
 }
 #title_02 {
  padding: 30px 0 30px
 }
 #title_02 h2 {
  font-size: 2.5rem
 }
 #title_02 h2 span {
  font-size: 1.2rem
 }
 #title_02 h2 p {
  font-size: 1.2rem
 }
 table {
  font-size: 1.1rem !important;
  margin: 15px 0
 }
 table th {
  vertical-align: middle;
  padding: 2px 5px;
  font-weight: bold;
  line-height: 1.5
 }
 table td {
  padding: 5px 5px;
  vertical-align: middle;
  border: #aaa 1px solid
 }
 .none, #nav-f, #menuA, #menu, #seoA, #pankuzu, #navi, .seo, #fmenu, #tnavi, .tbnr, .pc, #fnavi_bg, #fnavi {
  display: none
 }
 #head, header, #footer, footer, #wrap, #nav, #wrapA, #seo, #title {
  width: 100%;
  min-width: 100%
 }
 img {
  max-width: 100%;
  height: auto
 }
 .flink0, .flink1, .flink2 {
  width: 100%;
  margin-bottom: 20px
 }
 .flink0 ul, .flink1 ul, .flink2 ul {
  margin-right: 0;
  margin-bottom: 0;
  text-align: center
 }
 .flink0 li, .flink1 li, .flink2 li {
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px
 }
 .flink0 li img, .flink1 li img, .flink2 li img {
  display: block;
  margin-left: auto;
  margin-right: auto
 }
 .fleft0, .fleft1, .fleft2, .fright0, .fright1, .fright2 {
  float: none
 }
 .fleft0, .fleft1, .fleft2, .fright0, .fright1, .fright2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center
 }
}

#sp_icon, #humberger {
 display: none
}

#page {
 padding: 0;
 position: relative;
 z-index: 2;
 left: 0;
 -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 transition-timing-function: cubic-bezier(1, 0, 0, 1)
}

#drawernav {
 background: #393977;
 overflow: auto;
 position: fixed;
 top: 0;
 right: -240px;
 width: 240px;
 height: 100%;
 color: #fff;
 z-index: 99998;
 box-shadow: rgba(0, 0, 0, 0.2) -3px 0 2px 0;
 -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 transition-timing-function: cubic-bezier(1, 0, 0, 1)
}

#drawernav ul {
 list-style: none;
 padding: 0
}

#drawernav ul:first-child {
 margin-top: 60px
}

#drawernav ul li a {
 background: #393977;
 color: #fff;
 font-size: 1.3rem;
 display: block;
 padding: 10px 20px;
 text-decoration: none;
 border-top: 1px solid rgba(255, 255, 255, 0.2);
 border-bottom: 1px solid rgba(255, 255, 255, 0.2)
}

#drawernav ul li a span {
 font-size: 1rem;
 margin-left: 5px
}

#drawernav ul li a:hover {
 color: #fff
}

#drawernav ul li a:before {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 content: "\f0da";
 margin-right: 10px
}

#drawernav li ul li a {
 font-size: 1.1rem;
 color: #111;
 display: block;
 padding: 8px 20px;
 text-decoration: none;
 border-top: none;
 border-bottom: none;
 box-shadow: none;
 background: #008EB6
}

#drawernav li ul li a:before {
 content: "・";
 margin-right: 3px
}

#drawernav img {
 display: block;
 width: 90%;
 padding: 5px 0;
 margin: 0 auto
}

.icon-menu {
 padding: 0;
 margin: 0 auto;
 height: 7px;
 text-align: center;
 width: 35px
}

.icon-bar {
 height: 2px;
 background: #fff;
 display: block;
 margin-bottom: 6px;
 -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 transition-timing-function: cubic-bezier(1, 0, 0, 1)
}

.fixed-content {
 right: inherit;
 width: 100%;
 -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 transition-timing-function: cubic-bezier(1, 0, 0, 1)
}

#overlay {
 z-index: -1;
 opacity: 0;
 background: #000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 position: fixed;
 -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
 transition: all 400ms cubic-bezier(1, 0, 0, 1);
 -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
 transition-timing-function: cubic-bezier(1, 0, 0, 1)
}

@media (max-width: 768px) {
 #sp_icon {
  background: #393977;
  position: fixed;
  top: 2px;
  right: 62px;
  z-index: 999999;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start
 }
 #sp_icon li {
  font-size: 2.2rem;
  display: block;
  width: 30px;
  height: 30px;
  padding: 13px 15px 17px;
  cursor: pointer;
  color: #111;
  text-align: center;
  line-height: 1.2;
  margin-right: 2px;
  position: relative;
  border-radius: 100%
 }
 #sp_icon li span {
  font-size: 1.3rem;
  display: block
 }
 #sp_icon li a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-indent: -999px
 }
 #humberger {
  background:#0268c1;
  display: block;
  position: fixed;
  top: 8px;
  right: 2px;
  width: 30px;
  height: 30px;
  padding: 15px;
  cursor: pointer;
  z-index: 99999;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  border-radius: 100%
 }
 .drawer-opened #page {
  left: -240px;
  box-shadow: 1px 0 2px #000
 }
 .drawer-opened .fixed-content {
  left: -240px
 }
 .drawer-opened #drawernav {
  right: 0
 }
 .drawer-opened #humberger {
  background: none
 }
 .drawer-opened #humberger .icon-bar {
  background: #fff
 }
 .drawer-opened #humberger :nth-child(1) {
  transform: translate(0, 8px) rotate(45deg)
 }
 .drawer-opened #humberger :nth-child(2) {
  transform: translate(-20px, 0);
  opacity: 0
 }
 .drawer-opened #humberger :nth-child(3) {
  transform: translate(0, -8px) rotate(-45deg)
 }
 #humberger :nth-child(3) {
  margin-bottom: 0px
 }
 .drawer-opened #humberger .icon-menu {
  opacity: 0
 }
 .icon-menu {
  padding: 0 1px;
  margin: 0 auto;
  height: 10px;
  text-align: center !important;
  width: 50px;
  font-size: 1.1rem
 }
 .drawer-opened #humberger .icon-menu {
  opacity: 0
 }
 .drawer-opened #overlay {
  opacity: 0.5;
  left: -240px;
  position: fixed;
  z-index: 9999999;
  width: 100%;
  height: 100%
 }
 .fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden
 }
}

@media (max-width: 768px) {

 /*util*/
 #humberger span:last-of-type {
  font-size: 1rem;
 }
 #humberger {
  top: 14px;
 }
 .mtext1,
 .tcenter_sp {
  text-align: left;
  padding: 0 5%;
 }
 .mtext1 br {
  display: none;
 }
 .immobilizer br,
 .single br,
 .tcenter_sp br {
  display: none;
 }
 .featureFlex__items--flex h4 {
  font-size: 1.5rem;
 }
 .featureFlex__items__text,
 p,
 .single ul:nth-of-type(2) {
  font-size: 1.4rem;
 }
 .single p {
  font-size: 1.6rem;
 }
 .marg-48 {margin: 8% 0;}
 #contentwrap h3 {text-align: center;}
 #title_bg1 {
  margin-bottom: 5%;
 }
 /*追加コンテンツ
 ======================================*/
 .logo {
  padding: 0 2%;
  text-align: left;
  line-height: 130%;
 }
 #humberger {
  top: 34px;
  right: 8px;
 }
 .menuBlock {
  margin:2% auto;
 }
 ul.contentWide li {
  width: 49%;
  margin-bottom: 2%;
 }
 .featureFlex__items--flex img,
 ul.contentWide li img {
  max-width: 100%;
  width: 100%;
 }
 p.contentWide,
 ul.contentWide {
  width: 100%;
  padding: 2% 4%;
  box-sizing: border-box;
  flex-wrap: wrap;
 }
 /*はじめに*/
 .visit .visit_img {
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
  margin-top: 2%;
 }
 /*特徴*/
 .feature {
  margin-bottom: 4%;
  padding: 8% 0;
 }
 .featureFlex__items--flex {
  width: 100%;
  flex-wrap: wrap;
 }
 .featureFlex__items__text,
 p.contentWide {
  padding: 2% 4%;
 }
 /*ご相談メニュー*/
 .mttl_cl {
  margin-bottom: 8%;
 }
 /*イモビライザー*/
 .pbx {
  background: rgba(236, 248, 255, 0.79) !important;
 }
 .bg-image3 h3 {padding: 0;}
 /*コンタクト*/
 .single .contactText {
  text-align: center;
 }
 /*フッター*/
 .logo_f,
 .copyright {
  text-align: left;
  padding:0 4%;
  box-sizing: border-box;
 }
 .copyright {padding-left: 0;}
 .contactbx li {width: 100%;}
 .contactbx .ml a,
 .contactbx .tl a {min-width: auto;}
 /*レスポンシブヘッダーアイコン*/
 #drawernav,
 #drawernav ul li a {
  background: #0268c1;
 }
 .iconArea {
  display: block;
 }
 .iconArea a {
  width: 50%;
  display: block;
  float: left;
  box-sizing: border-box;
  background: #0268c1;
  text-align: center;
  padding: 1% 0;
 }
 h3 span.tinline {display: inline-block;}
 ul.contactbx {
  margin-top: 5%;
 }
 /*
 内部1 service
 ==================================================*/
 .text--big--blue {
  font-size: 1.6rem;
 }
 .checkbox article h4::before {
  font-size: 1rem;
 }
 #title,
 .single {padding:0;}
 .checkbox article h4 {
  padding-bottom: 0%;
 }
 .key--price figure {
  width: 33%;
 }
}/*768media*/
@media (max-width: 480px) {
 #head .logo img {width: 220px;}
 .single p {
  font-size: 1.3rem;
 }
 #humberger {top: 55px;}
 .mtext1 {
  font-size: 1.8rem;
 }
 .list-bnr li a {font-size: 1.4rem;}
 .key--price figure {
  width: 49%;
 }
 /*
 内部1 service
 ==================================================*/
 table th {
  display: none;
 }
 table {
  position: relative;
 }
 table::before {
  content:attr(data-label);
  display: block;
 }
 .keyTable td {
  width: 50%;
 }
}/*480 media*/
@media (max-width: 768px) {
 /*
 内部2 security
 ==================================================*/
 .textSection {
  margin-bottom: 3%;
 }
 .security_bottom_content {
  width: 100%;
 }
 .smart_rim--flex figure {
  width: 40%;
  margin-right: 0;
 }
 .security_bottom_content figure {
  width: 24%;
 }
 .smart_rim .orangeSpan {
  width: 220px;
  box-sizing: border-box;
 }
}/*768px media*/
@media (max-width: 480px) {
 .security--flex article {
  width: 100%;
 }
 .smart_rim--flex {
  flex-wrap: wrap;
 }
 .smart_rim h4,
 .smart_rim--flex figure {
  text-align: center;
 }
 .smart_rim .orangeSpan {
  margin: 0 auto;
 }
 .smart_rim--flex figure,
 .smart_rim--flex ul {
  width: 100%;
 }
 .smart_rim--flex ul {margin-top: 3%;}
 .security_bottom_content {
  flex-wrap: wrap;
 }
 .security_bottom_content figure {
  width: 49%;
 }
 .security_bottom_content figure img {width: 100%;}
}/*480px medoa*/
/*
内部3 other
==================================================*/
@media (max-width: 768px) {
 .doorBlock__items--flex figure {
  margin-right: 2%;
 }
 .smartLive-camera--inner {
  width: 100%;
 }
}/*768px media*/
@media (max-width: 480px) {
 .doorBlock__items--flex figure {
  margin-right: 2%;
 }
 .doorBlock__items--flex {
  flex-wrap: wrap;
 }
 .doorBlock__items--flex figure {
  width: 100%;
  margin-right: 0;
  margin-bottom: 1%;
 }
 .doorBlock__items--flex figure img {
  width: 100%;
  max-width: 100%;
 }
 .doorBlock__items--flex p {
  width: 100%;
 }
 .smartLive-camera--inner figure {
  text-align: center;
  margin-right: 0;
 }
 .smartLive-camera--inner figure,
 .smartLive-camera--inner figure img {
  width: 100%;
 }
 .smartLive-camera--inner {
  flex-wrap: wrap;
 }
}/*768px media*/
@media (max-width: 480px) {

}/*480px media*/


/*
内部４ company
==================================================*/
/* 会社情報 */
@media screen and (max-width: 768px) {
 .single .company_gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
 }
 .single .company_gallery img {
  width: 90%;
  margin: 1%;
 }
}
@media screen and (max-width: 480px) {
 .news-lb dd {padding-left: 9em;}
}/*media*/

/*# sourceMappingURL=sp.css.map */