/* 顧問契約と月額サービス対応表を、同じ比較資料としてつなぐページ内の関係表現。 */
.p-price-page {
  --price-advisory-monthly-paper-top: #fcfcfa;
  --price-advisory-monthly-paper-bottom: #fafbfb;
  --price-advisory-monthly-gold: var(--price-gold, #ad8139);
  --price-advisory-monthly-consult: #b38c42;
  --price-advisory-monthly-procedure: #4a8895;
  --price-advisory-monthly-payroll: #8a6876;
  --price-advisory-monthly-rail-x: max(28px, calc(50% - 590px));
}

#price-advisory-plans,
#price-monthly-comparison {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(173, 129, 57, 0), rgba(173, 129, 57, 0.09) 4.5rem, rgba(173, 129, 57, 0.12) 94%, rgba(173, 129, 57, 0.05)),
    linear-gradient(180deg, var(--price-advisory-monthly-paper-top), var(--price-advisory-monthly-paper-bottom));
  background-position: var(--price-advisory-monthly-rail-x) 0, 0 0;
  background-repeat: no-repeat;
  background-size: 1px 100%, 100% 100%;
}

#price-advisory-plans {
  padding-bottom: clamp(28px, 3vw, 42px);
}

#price-monthly-comparison {
  padding-top: clamp(64px, 6vw, 82px);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 76' preserveAspectRatio='none'%3E%3Cpath d='M64 10C54 2 41 0 29 4 9 10-1 31 5 51c6 19 28 29 47 20 7-3 12-8 16-13L56 50c-3 4-7 7-12 8-11 3-22-3-26-14-4-12 2-25 13-29 8-3 17-1 23 4Z' fill='%23e5d8bd' fill-opacity='.16'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(173, 129, 57, 0), rgba(173, 129, 57, 0.09) 4.5rem, rgba(173, 129, 57, 0.12) 94%, rgba(173, 129, 57, 0.05)),
    linear-gradient(180deg, var(--price-advisory-monthly-paper-top), var(--price-advisory-monthly-paper-bottom));
  background-position: calc(var(--price-advisory-monthly-rail-x) + 10px) -3px, var(--price-advisory-monthly-rail-x) 0, 0 0;
  background-repeat: no-repeat;
  background-size: 80px 76px, 1px 100%, 100% 100%;
}

#price-monthly-comparison::before {
  position: absolute;
  top: clamp(25px, 2.4vw, 34px);
  left: 50%;
  width: min(calc(100% - 48px), 1180px);
  height: 1px;
  background: linear-gradient(90deg, rgba(173, 129, 57, 0.04), rgba(173, 129, 57, 0.26) 18%, rgba(173, 129, 57, 0.26) 82%, rgba(173, 129, 57, 0.04));
  content: '';
  transform: translateX(-50%);
}

#price-monthly-comparison::after {
  position: absolute;
  top: clamp(21px, 2.4vw, 30px);
  left: var(--price-advisory-monthly-rail-x);
  width: 9px;
  height: 9px;
  border: 3px solid var(--price-advisory-monthly-paper-bottom);
  border-radius: 50%;
  background: var(--price-advisory-monthly-gold);
  box-shadow: 0 0 0 1px rgba(173, 129, 57, 0.2);
  content: '';
}

#price-advisory-plans thead th:nth-child(2),
#price-monthly-comparison thead th[data-price-col="0"] {
  box-shadow: inset 0 3px 0 var(--price-advisory-monthly-consult);
}

#price-advisory-plans thead th:nth-child(3),
#price-monthly-comparison thead th[data-price-col="1"] {
  box-shadow: inset 0 3px 0 var(--price-advisory-monthly-procedure);
}

#price-advisory-plans thead th:nth-child(4),
#price-monthly-comparison thead th[data-price-col="2"] {
  box-shadow: inset 0 3px 0 var(--price-advisory-monthly-payroll);
}

@media (max-width: 780px) {
  .p-price-page {
    --price-advisory-monthly-rail-x: 24px;
  }

  #price-advisory-plans {
    padding-bottom: 24px;
  }

  #price-monthly-comparison {
    padding-top: 54px;
    background-position: calc(var(--price-advisory-monthly-rail-x) + 4px) -1px, var(--price-advisory-monthly-rail-x) 0, 0 0;
    background-size: 60px 57px, 1px 100%, 100% 100%;
  }

  #price-monthly-comparison::before {
    top: 22px;
    width: calc(100% - 40px);
  }

  #price-monthly-comparison::after {
    top: 18px;
  }
}