@charset "utf-8";

/*
   /tec/products/smartlock/iel_zero_kaitai.html 専用CSS
*/


/* ---------------------------- Common */

.m-content {
  margin-bottom: 1.5rem;
}

.m-sct {
  margin-top: 40px
}
.m-sct ul,
.m-sct li {
  list-style-type: none;
}
.m-sct p {
  font-size: 0.875rem;
  line-height: 1.8;
}
.m-sct p+p {
    margin-top: 1rem;
}
.m-sct img {
  width: 100%;
  height: auto;
}

.m-sct-anchor {
  position: relative;
  margin-top: -64px;
  padding-top: 64px;
  z-index: -1;
}
.m-sct-img {
  position: relative;
  margin: 0 auto;
  max-width: 400px;
  z-index: 1;
}
.m-sct-img {
  position: relative;
  margin: 0 auto;
  max-width: 400px;
  z-index: 1;
}
.m-sct-img.o-70percent {
  width: 75%;
  margin-left: 0;
}
.m-sct-img.o-80percent {
  width: 80%;
}
.m-sct-img.o-90percent {
  width: 90%;
}

.c-borderHeader_title span {
  font-size: 0.875rem;
  font-feature-settings: "palt";
}
.m-txt {
  font-size: 0.875rem;
  line-height: 1.8;
}
.m-txt + .m-txt {
  margin-top: 12px;
}
.m-cap {
  margin-top: 8px !important;
  font-size: 0.750rem !important;
  line-height: 1.6 !important;
}

.m-lists-flow,
.m-list-2clm  {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px 14px;
}
.m-list-2clm  > li,
.m-lists-flow > li {
  position: relative;
    width: calc(50% - 7px);
}
.m-lists-flow > li:not(:last-child):after {
  display: block;
  content: "";
  position: absolute;
  right: -28px;
  top: calc(53% - 15px);
  width: 14px;
  height: 20px;
  background: url(/miwa_smartphone/tec/products/images/smartlock/kaitai/icon_arrow.svg) no-repeat;
  z-index: 1;
}
.m-lists-flow + .m-lists-flow {
  padding-top: 32px;
}

.m-lists-flow + .m-lists-flow:before {
  display: block;
  content: "";
  position: absolute;
  left: calc(50% - 10px);
  top: 0;
  width: 20px;
  height: 14px;
  background: url(/miwa_smartphone/tec/products/images/smartlock/kaitai/icon_down.svg) no-repeat;
  z-index: 1;
}
.m-lists-flow + .m-lists-flow > li:not(:last-child):after {
  right: -18px;
  top: calc(44% - 15px);
}

/* -------------- 冒頭ページ見出し内バナー */

.content-header-inner {
  position: relative;
  min-height: 78px;
  padding-right: 160px;
}

.content-header-banner {
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
}

.content-header-banner img {
  width: 100%;
}

/* ---------------------------- Page Menu */

.m-menu {
  position: sticky;
  top: 0px;
  z-index: 10;
  padding: 11px 0;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
}
.m-menu * {
  box-sizing: border-box;
}
.m-menu-lists {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  width: 100%;
  /* max-width: 600px; */
  list-style-type: none;
}
.m-menu-lists > li{
  width: 100%;
  max-width: min(calc(50% - 10px), 180px);
  /* width: calc(33.33% - 4px); */
}
.m-menu-lists > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 2px 6px 0 6px;
  width: 100%;
  height: 30px;
  border-radius: 15px;
  border: solid 1px #009a5a;
  background-color: #fff;
  color: #009a5a;
  text-align: center;
  font-size: 0.750rem;
  line-height: 1.0;
  font-feature-settings: "palt";
  text-decoration: none;
}


/* ---------------------------- Section Main */

.m-sct-main {
  margin-bottom: 24px
}

/* ---------------------------- Section Safety */

.m-sct-safety__parts {
  margin-top: -20px !important;
}

.m-sct-safety__flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.75rem;
}

.m-sct-safety__flow img  {
  margin-bottom: 4px;
}

/* ---------------------------- Section Thumbturn */

.m-sct-thumbturn .m-list-2clm {
  align-items: flex-start;
}

/* ---------------------------- Section Mounting */

.m-mounting-cap {
  display: flex;
  justify-content: space-between;
  gap: 0 10%;
}
.m-mounting-cap > li{
  width: calc(50% - 5%)
}
.m-mounting-cap01 {
  padding-left: 5%;
}
.m-mounting-cap02 {
  padding-left: 2.5%;
}

.m-mounting-arrow {
  text-align: center;
}
.m-mounting-arrow img{
  width: 5%;
}


/* ---------------------------- Section Condensation */

.m-condensation-cap {
  display: flex;
  justify-content: space-between;
  gap: 0 7.6%;
  letter-spacing: 0.01em;
  font-feature-settings: "palt";
}
.m-condensation-cap p{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.m-condensation-cap p + p {
  margin-top: 0;
}


/* ---------------------------- Option */

.o-blue {
 color: #42A8EC
}
.o-red {
 color: #DE0022
}

.o-flex-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}