@charset "utf-8";
/* ========== 比較表 ========== */
.area-lp .area-comparison {
  --cmp-blue: #0e5a88;
  --cmp-green: #9bc960;
  padding: calc(56 * var(--u)) calc(16 * var(--u));
  background: #fcfcfc;
  color: #333;
}
.area-lp .area-comparison__inner {
  max-width: calc(1024 * var(--u));
  margin: 0 auto;
}

/* 見出し */
.area-lp .area-comparison__head {
  text-align: center;
}
.area-lp .area-comparison__title {
  margin: 0;
  color: var(--cmp-blue);
  font-family: "Zen Old Mincho", serif;
  font-size: calc(26 * var(--u));
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.6;
}
.area-lp .area-comparison__lead {
  margin-top: calc(12 * var(--u));
  font-size: calc(15 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1.9;
  text-align: left;
}

/* 表 */
.area-lp .area-comparison__scroll-hint {
  margin-top: calc(24 * var(--u));
  color: #666;
  font-size: calc(12 * var(--u));
  line-height: 1.5;
  text-align: right;
}
.area-lp .area-comparison__table-wrap {
  margin-top: calc(8 * var(--u));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: calc(10 * var(--u));
  box-shadow: 0 0 calc(10 * var(--u)) rgba(0, 0, 0, 0.1);
}
.area-lp .area-comparison__table {
  width: 100%;
  min-width: calc(640 * var(--u));
  border-collapse: collapse;
  background: #ddd;
  font-size: calc(14 * var(--u));
  letter-spacing: 0.1em;
  line-height: 1.75;
}
.area-lp .area-comparison__table th,
.area-lp .area-comparison__table td {
  padding: calc(14 * var(--u)) calc(14 * var(--u));
  border: calc(1 * var(--u)) solid #ddd;
  background: #fff;
  text-align: left;
  vertical-align: middle;
}
.area-lp .area-comparison__table tr > :first-child { border-left: 0; }
.area-lp .area-comparison__table tr > :last-child { border-right: 0; }
.area-lp .area-comparison__table thead tr > * { border-top: 0; }
.area-lp .area-comparison__table tbody tr:last-child > * { border-bottom: 0; }
.area-lp .area-comparison__table thead th {
  background: #85b4d0;
  color: #fff;
  font-size: calc(15 * var(--u));
  font-weight: 700;
  text-align: center;
}
.area-lp .area-comparison__table thead th.area-comparison__ours {
  background: var(--cmp-green);
  font-size: calc(16 * var(--u));
}
.area-lp .area-comparison__table tbody th {
  width: calc(110 * var(--u));
  background: #f2f2f2;
  color: var(--cmp-blue);
  font-weight: 700;
  text-align: center;
}
.area-lp .area-comparison__table tbody td.area-comparison__ours {
  background: #fafff3;
  font-weight: 700;
}
.area-lp .area-comparison__price {
  font-size: 1.3em;
  letter-spacing: 0.08em;
}

/* 例：預貯金の解約の場合 */
.area-lp .area-comparison__example {
  margin-top: calc(48 * var(--u));
}
.area-lp .area-comparison__ex-title {
  margin: 0;
  color: var(--cmp-blue);
  font-family: "Zen Old Mincho", serif;
  font-size: calc(22 * var(--u));
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.7;
  text-align: center;
}
.area-lp .area-comparison__ex-box {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: calc(28 * var(--u)) calc(20 * var(--u));
  border-radius: calc(10 * var(--u));
  background: #fff;
  box-shadow: 0 0 calc(10 * var(--u)) rgba(0, 0, 0, 0.1);
}
.area-lp .area-comparison__ex-col {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
}
.area-lp .area-comparison__ex-head {
  margin: 0;
  color: var(--cmp-blue);
  font-family: "Zen Old Mincho", serif;
  font-size: calc(19 * var(--u));
  font-weight: 400;
  letter-spacing: 0.12em;
  line-height: 1.8;
}
.area-lp .area-comparison__ex-img {
  width: 100%;
  height: auto;
  aspect-ratio: 64 / 25; /* 画面幅が変わっても縦横比は固定 */
  border-radius: calc(10 * var(--u));
  object-fit: cover;
}
.area-lp .area-comparison__ex-text {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  font-size: calc(15 * var(--u));
  letter-spacing: 0.1em;
  line-height: 2;
}

/* 注記 */
.area-lp .area-comparison__note {
  margin-top: calc(32 * var(--u));
  color: #666;
  font-size: calc(12 * var(--u));
  letter-spacing: 0.08em;
  line-height: 1.8;
}

@media (min-width: 992px) {
  .area-lp .area-comparison {
    padding: calc(100 * var(--u)) calc(24 * var(--u));
  }
  .area-lp .area-comparison__title {
    font-size: calc(40 * var(--u));
    letter-spacing: calc(8 * var(--u));
    line-height: calc(80 * var(--u));
  }
  .area-lp .area-comparison__lead {
    margin-top: calc(16 * var(--u));
    font-size: calc(18 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
    line-height: calc(36 * var(--u));
    text-align: center;
  }
  .area-lp .area-comparison__table-wrap {
    width: fit-content;
    margin: calc(40 * var(--u)) auto 0;
    overflow: hidden;
  }
  .area-lp .area-comparison__table {
    width: calc(1022 * var(--u));
    font-size: calc(16 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
    line-height: calc(30 * var(--u));
  }
  .area-lp .area-comparison__table th,
  .area-lp .area-comparison__table td {
    padding: calc(20 * var(--u)) calc(22 * var(--u));
  }
  .area-lp .area-comparison__table .area-comparison__blank,
  .area-lp .area-comparison__table tbody th { width: calc(184 * var(--u)); }
  .area-lp .area-comparison__table thead th { width: calc(260 * var(--u)); font-size: calc(17 * var(--u)); }
  .area-lp .area-comparison__table thead th.area-comparison__ours { width: calc(314 * var(--u)); font-size: calc(19 * var(--u)); }
  .area-lp .area-comparison__price {
    font-size: calc(22 * var(--u));
    line-height: calc(34 * var(--u));
  }

  .area-lp .area-comparison__example {
    margin-top: calc(40 * var(--u));
    padding-top: calc(24 * var(--u));
  }
  .area-lp .area-comparison__ex-title {
    font-size: calc(28 * var(--u));
    letter-spacing: calc(5 * var(--u));
    line-height: calc(48 * var(--u));
  }
  .area-lp .area-comparison__ex-box {
    flex-direction: row;
    gap: calc(48 * var(--u));
    margin-top: calc(20 * var(--u));
    padding: calc(52 * var(--u));
  }
  .area-lp .area-comparison__ex-col {
    flex: 1;
    gap: calc(24 * var(--u));
  }
  .area-lp .area-comparison__ex-head {
    font-size: calc(22 * var(--u));
    letter-spacing: calc(3 * var(--u));
    line-height: calc(40 * var(--u));
  }
  .area-lp .area-comparison__ex-text {
    font-size: calc(16 * var(--u));
    letter-spacing: calc(1.8 * var(--u));
    line-height: calc(32 * var(--u));
  }
  .area-lp .area-comparison__note {
    margin-top: calc(40 * var(--u));
    font-size: calc(13 * var(--u));
    letter-spacing: calc(1 * var(--u));
    line-height: calc(24 * var(--u));
  }
}