@charset "utf-8";
.sub_head{
  font-size: var(--fs-32);
}

.table_outer{
  width: 100%;
  margin-top: 30px;
  table{
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px 0;
    th{
      text-align: center;
      padding: 15px 0;
      font-weight: bold;
      width: 261px;
    }
    td{
      padding: 15px 25px;
    }
    tbody{
      th{
        background: #e8ecf7;
        color: var(--main-blue);
        border-bottom: 1px solid var(--main-blue);
      }
      td{
        border-bottom: 1px solid var(--main-blue);
      }
    }
    tr:first-child{
      th{
        border-top: 1px solid var(--main-blue);
      }
      td{
        border-top: 1px solid var(--main-blue);
      }
    }
    dl {
      display: flex;
      flex-wrap: wrap;
    }
    dt{
      width: 6em;
    }
    dd{
      width: calc(100% - 9em);
    }
  }
}

.map_btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 15px;
  margin-top: 20px;
  gap: 15px;
  color: var(--txt-color);
  border: 1px solid var(--deep-blue);
  border-radius: 10px;
  &::after{
    content: '';
    display: block;
    background: url(../../../img/arrow.svg) no-repeat center;
    background-size: contain;
    width: 20px;
    height: 20px;
  }
}
.art_bot{
  display: flex;
  justify-content: center;
  margin-top: 60px;
}
.bot_btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.5;
  background: var(--deep-blue);
  font-size: var(--fs-24);
  border-radius: 10px;
  padding: 10px 15px;
  min-height: 60px;
  color: #fff;
  &::after{
    content: '';
    display: block;
    background: url(../../../../common/img/arrow_rev.svg) no-repeat center;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-left: 15px;
  }
}

@media screen and (max-width: 767px){

.table_outer{
  width: 100%;
  table{
    display: block;
    width: 100%;
    th{
      display: block;
      width: 100%;
    }
    td{
      display: block;
      width: 100%;
      padding: 15px 5%;
    }
    tbody{
      display: block;
      width: 100%;
    }
    tr{
      display: block;
      width: 100%;
    }
    tr:first-child{
      td{
        border-top: none;
      }
    }
  }
}

}