@charset "utf-8";


/*防犯システムサービス
-------------------------------------------------------------*/
* {
    box-sizing: border-box;
  }

  .blur {
    min-height: 70vh;
    margin: 5%;
  
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  ul {
    padding: 0;
  }

  li {
    list-style-type: none;
  }

  dd {
    margin-left: 0;
  }
  
  .flow {
    padding-left: 120px;
    position: relative;
  }

  .flow::before {
    content: "";
    width: 15px;
    height: 100%;
    background: #eee;
    margin-left: -8px;
    display: block;
    position: absolute;
    top: 0;
    left: 120px;
  }

  .flow > li {
    position: relative;
  }

  .flow > li:not(:last-child) {
    margin-bottom: 8vh;
  }

  .flow > li .icon {
    font-size: 12px;
    color: #fff;
    background: rgb(107,144,219);
    background:  linear-gradient(to right,#49a349, #70ae27);
    background:  linear-gradient(to right,#49a349, #70ae27);
    background:  linear-gradient(to right,#49a349, #70ae27);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
    padding: 8px 20px;
    display: block;
    position: absolute;
    top: 0;
    left: -120px;
    z-index: 1;
  }

  .flow > li .icon::after {
    content: "";
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #70ae27;
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .flow > li dl {
    padding-left: 70px;
    position: relative;
  }

  .flow > li dl::before,
  .flow > li dl::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
  }

  .flow > li dl::before {
    width: 7px;
    height: 7px;
    margin-top: -3px;
    background: #49a349;
    border-radius: 50%;
    left: -4px;
  }

  .flow > li dl::after {
    width: 50px;
    border-bottom: 1px dashed #999;
    position: absolute;
    left: 5px;
  }

  .flow > li dl dt {
    font-size: 20px;
    font-weight: 600;
    color: #49a349;
    margin-bottom: 1vh;
  }

/* 画面幅が768px以下の時にレイアウト変更 */
@media (max-width: 768px) {
  .flow > li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .flow > li .icon {
    position: relative; /* アイコンを上に配置 */
    margin-bottom: 10px; /* アイコンとテキストの間にスペース */
    order: -1; /* アイコンを上に表示 */
  }

  .flow > li dl {
    padding-left: 0; /* 左の余白を削除 */
    position: relative;
    order: 1; /* テキストを下に表示 */
  }

  .flow > li dl::before {
    left: 0;
  }

  .flow > li dl::after {
    left: 10px;
  }

  .flow > li .icon::after {
    content: "";
    border-style: solid;
    border-width: 10px 5px 0 5px; /* 矢印が下向きになるように幅を調整 */
    border-color: #70ae27 transparent transparent transparent; /* 下向きの矢印の色設定 */
    position: absolute;
    top: 100%; /* アイコンの下に表示 */
    left: 50%;
    transform: translateX(-50%); /* 中央揃え */
  }

  .flow::before {
    left: 5%;
}

ul.flow {
  padding-left: 10%;
}
.flow > li .icon {
  text-align: center;
  margin-left: 20%;
}
  
}