@charset "utf-8";
/*------------------------------------------------------------------

  動作環境

------------------------------------------------------------------*/

/* PC以下共通サイズ------------------------------- */
.ttl1 {
  margin-bottom: 10px;
}
.dl_list {
  display: flex;
  gap: 0 5px;
  flex-wrap: wrap;
}
.dl_list dt {
  flex: 0 0 150px;
  line-height: 2;
  font-weight: var(--fw-bold);
  padding: 20px 0;
  border-bottom: solid 2px var(--c-orange);
}
.dl_list dd {
  width: calc(100% - 155px);
  line-height: 2;
  padding: 20px 0;
  border-bottom: solid 2px var(--c-lightgray);
}
.dl_list dd .txt_small {
  color: var(--c-gray);
}
.spec_area {
  max-width: 1000px;
}
.spec_area h3 {
  font-size: 20px;
  line-height: 2;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 0 15px;
  margin-top: 70px;
}
.spec_area h3:before {
  font-family: var(--ff-icon);
  content: "\f0c8";
  color: var(--c-orange);
  font-size: 10px;
}
.spec_area {
  display: flex;
  flex-direction: column;
  gap: 120px 0;
}
.spec_item > .txt_small {
  margin-top: 30px;
  color: var(--c-gray);
}
.spec_item .txt_basic {
  margin: 30px 0 10px;
}
.spec_banner {
  display: flex;
  align-items: center;
  gap: 5px;
}
.spec_banner p {
  flex: 0 0 200px;
}
.spec_banner a {
  height: 50px;
  display: inline-block;
}
@media (hover: hover) and (pointer: fine) {
  .spec_banner a:hover {
    opacity: 0.8;
  }
}

/* PCのみサイズ------------------------------- */
@media screen and (min-width: 1101px) {
}

/* タブレット（iPad Pro）以下サイズ------------------------------- */
@media screen and (max-width: 1100px) {
}

/* タブレット（iPad）以下サイズ------------------------------- */
@media screen and (max-width: 1023px) {
  .ttl1 .sp {
    display: block !important;
  }
}

/* スマホサイズ------------------------------- */
@media screen and (max-width: 767px) {
  .ttl1 {
    font-size: 24px;
    align-items: flex-start;
  }
  .spec_area {
    gap: 80px 0;
  }
  .spec_area h3 {
    margin-top: 50px;
    font-size: 18px;
  }
  .spec_banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .spec_banner p {
    flex: 1;
  }
  .dl_list dt {
    flex: 0 0 100px;
    letter-spacing: 0;
    padding: 10px 0;
  }
  .dl_list dd {
    width: calc(100% - 115px);
    padding: 10px 0;
  }
}
