@charset "UTF-8";
.sec-compare {
  position: relative;
  width: 100%;
  font-feature-settings: normal;
  padding: 91.9px 0 105px;
  background-color: #fff;
  background-image: url(../../assets/img/compare/bg-pattern.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: auto 101.54%;
}
.compare-sp { display: none; }
.compare-sp-block { display: none; }
.compare-head {
  width: min(1080px, calc(100% - 80px));
  margin: 0 auto;
  text-align: center;
}
.compare-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--c-text);
}
.compare-title-line { display: block; }
.compare-h-lg { font-size: 48px; }
.compare-h-sm { font-size: 40px; }
.compare-divider {
  display: block;
  width: 80px;
  height: 1px;
  margin: 30px auto 0;
  background-color: #666;
}
.compare-lead {
  margin: 48.8px auto 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.72px;
  color: var(--c-text);
}
.compare-scroll {
  margin-top: 74.65px;
  padding: 8px 0 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-tablewrap {
  position: relative;
  z-index: 0;
  width: 1120px;
  margin: 0 auto;
  padding-bottom: 9px;
}
.compare-tablewrap::before,
.compare-tablewrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 11px;
  width: 305px;
  height: 64px;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.compare-tablewrap::before { left: 496.5px; }
.compare-tablewrap::after  { left: 810.5px; }
.compare-tbl {
  width: 1120px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
.compare-col-lb { width: 175px; }
.compare-col-im { width: 317px; }
.compare-col-br { width: 314px; }
.compare-col-de { width: 314px; }
.compare-corner { padding: 0; background-color: transparent; }
.compare-row-hd { height: 75px; }
.compare-hd {
  padding: 0;
  vertical-align: bottom;
  font-weight: 400;
}
.compare-hd-bar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto;
  padding-bottom: 22px;
  border-radius: 16px 16px 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #fff;
}
.compare-hd--implant .compare-hd-bar { width: 100%;  height: 75px; background-color: #244496; }
.compare-hd--bridge  .compare-hd-bar { width: 305px; height: 64px; background-color: #55adbc; }
.compare-hd--denture .compare-hd-bar { width: 305px; height: 64px; background-color: #6ec09e; }
.compare-row-ph { height: 194px; }
.compare-ph {
  padding: 0;
  background-color: #f5f8f9;
  vertical-align: middle;
  text-align: center;
}
.compare-ph picture { display: block; }
.compare-ph img {
  display: block;
  width: 270.94px;
  height: 162.73px;
  margin: 0 auto;
  object-fit: cover;
}
.compare-tbl tbody tr { height: 80px; }
.compare-rh {
  padding: 0 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--c-text);
  text-align: center;
  vertical-align: middle;
}
.compare-c {
  padding: 0 8px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-text);
  text-align: center;
  vertical-align: middle;
}
.compare-tbl tbody tr:nth-child(odd) .compare-rh,
.compare-tbl tbody tr:nth-child(odd) .compare-c--bridge,
.compare-tbl tbody tr:nth-child(odd) .compare-c--denture { background-color: #fff; }
.compare-tbl tbody tr:nth-child(even) .compare-rh,
.compare-tbl tbody tr:nth-child(even) .compare-c--bridge,
.compare-tbl tbody tr:nth-child(even) .compare-c--denture { background-color: #f5f8f9; }
.compare-c--implant { background-color: transparent; }
.compare-tbl tbody tr + tr .compare-c--implant {
  background-image: repeating-linear-gradient(to right, #ccc 0 2px, rgba(204, 204, 204, 0) 2px 4px);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: left top;
}
.compare-hl-bg {
  position: absolute;
  z-index: -1;
  left: 176px;
  top: 269px;
  width: 315px;
  height: 569px;
  border-radius: 0 0 16px 16px;
  background-color: #fefbf6;
}
.compare-hl {
  position: absolute;
  z-index: 2;
  left: 175px;
  top: 0;
  width: 317px;
  height: 838px;
  border: 1px solid #f0831e;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.compare-hl-shadow {
  display: block;
  position: absolute;
  z-index: -1;
  left: 492px;
  top: 75px;
  width: 628px;
  height: 754px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
  .sec-compare {
    padding: 65.92px 0 71px;
    background-size: 424.23% auto;
    background-position: center -12px;
  }
  .compare-pc { display: none; }
  .compare-sp { display: inline; }
  .compare-head {
    width: 342px;
    max-width: calc(100% - 48px);
  }
  .compare-title { font-size: 28px; }
  .compare-h-lg  { font-size: 28px; }
  .compare-h-sm  { font-size: 24px; }
  /* 2026-10-16 「ブリッ／ジ・」の改行対策：1行目「インプラント・ブリッジ・」を1行に収める */
  .compare-title-line { white-space: nowrap; }
  .compare-title-line:first-child .compare-h-lg { font-size: min(26px, 6.9vw); }
  /* 2026-10-16 表が横スクロールすることの案内（SPのみ） */
  .compare-sp-block { display: block; }
  .compare-scroll-hint {
    margin: 32px 24px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #666;
    text-align: right;
  }
  .compare-scroll-hint-arrow {
    display: inline-block;
    margin-left: 4px;
    animation: compare-hint-nudge 1.4s ease-in-out infinite;
  }
  @keyframes compare-hint-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .compare-scroll-hint-arrow { animation: none; }
  }
  .compare-scroll-hint + .compare-scroll { margin-top: 10px; }
  .compare-divider { margin-top: 37.31px; }
  .compare-lead {
    margin-top: 39.5px;
    font-size: 16px;
    letter-spacing: 0.48px;
    text-align: justify;
  }
  .compare-scroll {
    margin-top: 41.67px;
    padding-left: 28px;
  }
  .compare-tablewrap {
    width: 388px;
    margin: 0;
  }
  .compare-tablewrap::before,
  .compare-tablewrap::after { display: none; }
  .compare-tbl { width: 388px; }
  .compare-col-lb { width: 73px; }
  .compare-col-im,
  .compare-col-br,
  .compare-col-de { width: 105px; }
  .compare-row-hd { height: 62px; }
  .compare-hd-bar {
    align-items: center;
    padding-bottom: 0;
    border-radius: 8px 8px 0 0;
    font-size: 15px;
  }
  .compare-hd--implant .compare-hd-bar { width: 100%;    height: 62px; }
  .compare-hd--bridge  .compare-hd-bar,
  .compare-hd--denture .compare-hd-bar { width: 101.82px; height: 42.78px; }
  .compare-row-ph { height: 81px; }
  .compare-ph {
    padding: 3px 0 10px;
    vertical-align: top;
  }
  .compare-ph img {
    width: 90.25px;
    height: 68px;
  }
  .compare-tbl tbody tr:nth-child(1) { height: 63.25px; }
  .compare-tbl tbody tr:nth-child(2) { height: 68.59px; }
  .compare-tbl tbody tr:nth-child(3) { height: 58.83px; }
  .compare-tbl tbody tr:nth-child(4) { height: 59.58px; }
  .compare-tbl tbody tr:nth-child(5) { height: 62px; }
  .compare-tbl tbody tr:nth-child(6) { height: 62px; }
  .compare-tbl tbody tr:nth-child(7) { height: 56.75px; }
  .compare-rh {
    padding: 0 2px;
    font-size: 15px;
    line-height: 1.2;
  }
  .compare-c {
    padding: 0 4px;
    font-size: 15px;
    line-height: 1.4;
  }
  .compare-c--tight { line-height: 1.2; }
  .compare-tbl tbody tr:nth-child(odd) .compare-rh,
  .compare-tbl tbody tr:nth-child(odd) .compare-c--bridge,
  .compare-tbl tbody tr:nth-child(odd) .compare-c--denture,
  .compare-tbl tbody tr:nth-child(even) .compare-rh,
  .compare-tbl tbody tr:nth-child(even) .compare-c--bridge,
  .compare-tbl tbody tr:nth-child(even) .compare-c--denture { background-color: #fff; }
  .compare-tbl tbody tr:first-child .compare-rh { border-top-left-radius: 8px; }
  .compare-tbl tbody tr:last-child  .compare-rh { border-bottom-left-radius: 8px; }
  .compare-tbl tbody tr + tr .compare-rh,
  .compare-tbl tbody tr + tr .compare-c {
    background-image: repeating-linear-gradient(to right, #ccc 0 1px, rgba(204, 204, 204, 0) 1px 2px);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: left top;
  }
  .compare-hl-bg {
    left: 73px;
    top: 143px;
    width: 105px;
    height: 440px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }
  .compare-hl {
    left: 72.91px;
    top: 0;
    width: 106px;
    height: 583px;
    border-radius: 8px;
    box-shadow: none;
  }
  .compare-hl-shadow {
    display: block;
    position: absolute;
    z-index: -1;
    left: 73px;
    top: 62px;
    width: 315px;
    height: 512px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  }
}