@charset "utf-8";
/* ========== 費用体系 ========== */
.area-lp .area-price {
  --price-blue: #0e5a88;
  --price-green: #9bc960;
  --price-lgreen: #fafff3;
  --price-orange: #e58a00;
  --price-link: #33a5cb;
  padding: calc(56 * var(--u)) calc(16 * var(--u));
  background:
    linear-gradient(0deg, rgba(246, 248, 251, 0) 0%, #f6f8fb 100%),
    linear-gradient(90deg, rgba(246, 248, 251, 0) 0%, #f6f8fb 100%),
    #fff;
  color: #333;
}
.area-lp .area-price__inner {
  max-width: calc(1024 * var(--u));
  margin: 0 auto;
}

/* 見出し */
.area-lp .area-price__head {
  padding: calc(20 * var(--u)) 0;
  border-top: calc(1 * var(--u)) solid #333;
  border-bottom: calc(1 * var(--u)) solid #333;
  text-align: center;
}
.area-lp .area-price__title {
  margin: 0;
  color: var(--price-blue);
  font-family: "Zen Old Mincho", serif;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.6;
}
.area-lp .area-price__lead {
  margin-top: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1.9;
}
.area-lp .area-price__lead a {
  color: var(--price-link);
  text-decoration: underline;
}

/* トータルパッケージプラン */
.area-lp .area-price__pack {
  margin-top: calc(48 * var(--u));
}
.area-lp .area-price__pack-title {
  margin: 0;
  padding: calc(16 * var(--u));
  background: var(--price-green);
  color: #fff;
  font-size: calc(21 * var(--u));
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
.area-lp .area-price__pack-body {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
  padding: calc(24 * var(--u)) calc(16 * var(--u));
  background: var(--price-lgreen);
}
.area-lp .area-price__pack-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(10 * var(--u));
}
.area-lp .area-price__normal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(8 * var(--u)) calc(14 * var(--u));
}
.area-lp .area-price__normal-label {
  padding: calc(4 * var(--u)) calc(14 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #4f4f4f;
  color: #fff;
  font-size: calc(14 * var(--u));
  letter-spacing: 0.1em;
  line-height: calc(24 * var(--u));
}
.area-lp .area-price__normal-num {
  color: var(--price-link);
  font-size: calc(20 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.area-lp .area-price__limited {
  display: flex;
  flex-wrap: wrap;
  border-radius: calc(4 * var(--u));
  overflow: hidden;
  color: #fff;
  font-size: calc(13 * var(--u));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: calc(22 * var(--u));
}
.area-lp .area-price__limited span { padding: calc(6 * var(--u)) calc(12 * var(--u)); }
.area-lp .area-price__limited-web { background: var(--price-blue); }
.area-lp .area-price__limited-num { background: var(--price-orange); }
.area-lp .area-price__special {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
}
.area-lp .area-price__special img {
  flex-shrink: 0;
  width: calc(64 * var(--u));
  height: calc(64 * var(--u));
}
.area-lp .area-price__special-num {
  color: var(--price-orange);
  font-size: calc(46 * var(--u));
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
.area-lp .area-price__special-num span { font-size: calc(22 * var(--u)); }
.area-lp .area-price__pack-note {
  color: #666;
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1.7;
}
.area-lp .area-price__pack-contents {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
}
.area-lp .area-price__pack-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  list-style: none;
}
.area-lp .area-price__pack-list li {
  padding: calc(2 * var(--u)) calc(12 * var(--u));
  border: calc(2 * var(--u)) solid var(--price-green);
  border-radius: calc(10 * var(--u));
  background: #fff;
  color: var(--price-green);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.8;
}
.area-lp .area-price__comment {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--u));
}
.area-lp .area-price__comment img {
  flex-shrink: 0;
  width: calc(64 * var(--u));
  height: auto;
}
.area-lp .area-price__comment p {
  position: relative;
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #fff;
  color: var(--price-link);
  font-size: calc(14 * var(--u));
  letter-spacing: 0.1em;
  line-height: 1.8;
}
/* 吹き出しのしっぽ */
.area-lp .area-price__comment p::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: calc(-9 * var(--u));
  border: calc(9 * var(--u)) solid transparent;
  border-right: calc(12 * var(--u)) solid #fff;
  border-left: 0;
}

/* 基本料金・サポート内容 */
.area-lp .area-price__cols {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--u));
  margin-top: calc(48 * var(--u));
}
.area-lp .area-price__col {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.area-lp .area-price__line-title {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: 0;
  font-size: calc(21 * var(--u));
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.area-lp .area-price__line-title::before,
.area-lp .area-price__line-title::after {
  content: "";
  flex: 1;
  height: calc(1 * var(--u));
  background: #ccc;
}
.area-lp .area-price__support-lead {
  font-size: calc(15 * var(--u));
  letter-spacing: 0.1em;
  line-height: 1.8;
}
.area-lp .area-price__support-lead span { color: var(--price-green); }
.area-lp .area-price__table {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  margin: 0;
}
.area-lp .area-price__row {
  display: flex;
}
.area-lp .area-price__row dt,
.area-lp .area-price__row dd {
  display: flex;
  align-items: center;
  margin: 0;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  letter-spacing: 0.06em;
}
.area-lp .area-price__row dt {
  flex: 0 0 40%;
  gap: calc(10 * var(--u));
  background: var(--price-green);
  color: #fff;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: 1.6;
}
.area-lp .area-price__row dd {
  flex: 1;
  background: var(--price-lgreen);
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  white-space: nowrap;
}
.area-lp .area-price__table--support .area-price__row dt { flex-basis: 60%; }
.area-lp .area-price__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: #fff;
  color: var(--price-green);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 992px) {
  .area-lp .area-price {
    padding: calc(100 * var(--u)) calc(24 * var(--u));
  }
  .area-lp .area-price__head {
    padding: calc(30 * var(--u)) 0;
  }
  .area-lp .area-price__title {
    font-size: calc(40 * var(--u));
    letter-spacing: calc(8 * var(--u));
    line-height: calc(80 * var(--u));
  }
  .area-lp .area-price__lead {
    margin-top: 0;
    font-size: calc(18 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
    line-height: calc(34 * var(--u));
  }

  .area-lp .area-price__pack {
    margin-top: calc(120 * var(--u));
  }
  .area-lp .area-price__pack-title {
    padding: calc(30 * var(--u)) calc(16 * var(--u));
    font-size: calc(30 * var(--u));
    letter-spacing: calc(3 * var(--u));
    line-height: calc(48 * var(--u));
  }
  .area-lp .area-price__pack-body {
    flex-direction: row;
    align-items: center;
    gap: calc(40 * var(--u));
    padding: calc(36 * var(--u));
  }
  .area-lp .area-price__pack-price {
    flex: 0 0 calc(500 * var(--u));
  }
  .area-lp .area-price__normal-label {
    padding: calc(4 * var(--u)) calc(18 * var(--u));
    font-size: calc(16 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
  }
  .area-lp .area-price__normal-num {
    font-size: calc(24 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
    line-height: calc(36 * var(--u));
  }
  .area-lp .area-price__limited {
    flex-wrap: nowrap;
    font-size: calc(15 * var(--u));
    letter-spacing: calc(1.2 * var(--u));
  }
  .area-lp .area-price__limited span { padding: calc(6 * var(--u)) calc(14 * var(--u)); }
  .area-lp .area-price__special { gap: calc(12 * var(--u)); }
  .area-lp .area-price__special img {
    width: calc(90 * var(--u));
    height: calc(90 * var(--u));
  }
  .area-lp .area-price__special-num {
    font-size: calc(68 * var(--u));
    letter-spacing: calc(1 * var(--u));
    line-height: calc(84 * var(--u));
  }
  .area-lp .area-price__special-num span { font-size: calc(32 * var(--u)); }
  .area-lp .area-price__pack-note {
    font-size: calc(13 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
    line-height: calc(22 * var(--u));
  }
  .area-lp .area-price__pack-contents {
    flex: 1;
    min-width: 0;
  }
  .area-lp .area-price__pack-list li {
    padding: calc(4 * var(--u)) calc(12 * var(--u));
    font-size: calc(17 * var(--u));
    letter-spacing: calc(1 * var(--u));
    line-height: calc(30 * var(--u));
  }
  .area-lp .area-price__comment { gap: calc(12 * var(--u)); }
  .area-lp .area-price__comment img { width: calc(80 * var(--u)); }
  .area-lp .area-price__comment p {
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    font-size: calc(16 * var(--u));
    letter-spacing: calc(1 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .area-lp .area-price__cols {
    flex-direction: row;
    gap: calc(40 * var(--u));
    margin-top: calc(64 * var(--u));
  }
  .area-lp .area-price__col {
    flex: 1;
    min-width: 0;
  }
  .area-lp .area-price__line-title {
    font-size: calc(26 * var(--u));
    letter-spacing: calc(2.6 * var(--u));
    line-height: calc(52 * var(--u));
  }
  .area-lp .area-price__support-lead {
    font-size: calc(16 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
    line-height: calc(28 * var(--u));
  }
  .area-lp .area-price__row dt,
  .area-lp .area-price__row dd {
    padding: calc(14 * var(--u)) calc(16 * var(--u));
    letter-spacing: calc(1 * var(--u));
  }
  .area-lp .area-price__row dt {
    flex-basis: calc(190 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(26 * var(--u));
  }
  .area-lp .area-price__row dd {
    padding: calc(14 * var(--u)) calc(20 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: calc(28 * var(--u));
  }
  .area-lp .area-price__table--support .area-price__row dt { flex-basis: calc(290 * var(--u)); }
}