/** breakPoint **/
:root {
  --color-bg-product-primary: var(--brand-color-payroll-primary);
  --color-bg-product-medium: var(--brand-color-payroll-medium);
  --color-bg-product-light: var(--brand-color-payroll-light);
  --color-bg-product-dark: var(--brand-color-payroll-dark);
  --color-bg-product-medium-light: var(--brand-color-payroll-light);
  --color-text-product-primary: var(--brand-color-payroll-primary);
  --color-text-product-medium: var(--brand-color-payroll-medium);
  --color-text-product-accent: var(--accent-leaf);
  --color-button-product-primary: var(--color-bg-product-primary);
}

.c-button {
  width: 310px;
  margin-left: 35px;
  margin-top: 0;
  background: var(--color-bg-product-primary);
}
.c-button--inverse {
  background: var(--color-bg-primary);
}
.c-button--medium {
  color: #fff;
  background-color: var(--color-bg-product-medium);
}
.c-button--accent {
  background-color: var(--brand-color-payroll-accent);
}
.c-button__title {
  color: var(--color-text-primary);
  width: 233px;
}
.c-button__accent {
  width: 76px;
  height: 64px;
  margin-left: -33px;
  margin-top: 0;
}
@media (max-width: 1079px) {
  .p-product-common-hero__image {
    flex: 1;
    border-radius: var(--radius_md, 8px) 0 0 var(--radius_md, 8px);
  }
}

.cp-banner {
  background-image: url("../images/payroll/cp-bg1.svg"), url("../images/payroll/cp-bg2.svg");
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  height: 120px;
  background-color: #f2f2ea;
}
@media (max-width: 1079px) {
  .cp-banner {
    background-size: 167px, 97px;
    height: 323px;
    align-content: center;
  }
}
.cp-banner__title {
  font-size: 40px;
  color: var(--color-text-product-primary);
}
@media (min-width: 1080px) {
  .cp-banner__title {
    text-align: center;
    margin-left: 56px;
    margin-right: 28px;
  }
}
@media (max-width: 1079px) {
  .cp-banner__title {
    margin-left: 16px;
  }
}
.cp-banner__title-t2 {
  font-size: 38px;
}
@media (max-width: 1079px) {
  .cp-banner__title-t2 {
    font-size: 35px;
    display: block;
    line-height: 1.3;
    margin-top: -16px;
  }
}
.cp-banner__row {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
}
@media (max-width: 1079px) {
  .cp-banner__row {
    padding-top: 10px;
    flex-wrap: wrap;
    height: auto;
    row-gap: var(--spacing_xl);
  }
}
.cp-banner__row img {
  height: 100%;
}
@media (max-width: 1079px) {
  .cp-banner__row img {
    height: auto;
    width: 108px;
  }
}
@media (max-width: 1079px) {
  .cp-banner__button-wrap {
    flex: 1 0 100%;
  }
}
.cp-banner__button {
  display: block;
  border-radius: 40px;
  font-weight: bold;
  letter-spacing: 0.05em;
  width: 212px;
  text-align: center;
  padding: 16px 0 15px;
  background-color: var(--brand-color-payroll-accent);
}
@media (max-width: 1079px) {
  .cp-banner__button {
    margin: auto;
  }
}

.c-cta {
  background: var(--payroll-30, #f7d05f);
}
.c-cta .c-primary-button {
  max-width: 200px;
  min-height: 45px;
  padding: var(--spacing_sm);
}
@media (max-width: 1079px) {
  .c-cta .c-primary-button {
    height: 45px;
    max-width: 240px;
  }
}

.p-product-attendance-function-columns {
  background-color: #fffbea;
}

.p-product-common-price {
  background-color: #fffbea;
}
@media (max-width: 1079px) {
  .p-product-common-price__cta {
    display: block;
  }
  .p-product-common-price .c-primary-button {
    margin: var(--spacing_lg) auto 0;
  }
}

.p-attendance-price-main__header {
  background-color: var(--color-bg-product-primary);
  padding: 8px 0;
}
@media (max-width: 1079px) {
  .p-attendance-price-main__header {
    padding: 4px 0;
  }
}
.p-attendance-price-main__inner {
  background-color: var(--color-bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px var(--spacing_lg) 26px;
}
@media (max-width: 1079px) {
  .p-attendance-price-main__inner {
    scale: 0.9;
    padding: 21px 0px;
  }
}
.p-attendance-price-main__badge {
  background-color: #fff1c2;
  color: var(--color-bg-product-primary);
  width: 96px;
  height: 96px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1.25;
  font-weight: bold;
  margin-right: 21px;
}
@media (max-width: 1079px) {
  .p-attendance-price-main__badge {
    width: 75.4px;
    height: 75.4px;
    font-size: 18px;
    margin-right: 14px;
  }
}
.p-attendance-price-main__value {
  font-size: 80px;
  line-height: 1;
  font-weight: 700;
  font-family: var(--font-family-en);
  color: var(--color-bg-product-primary);
  margin-right: 6px;
}
@media (max-width: 1079px) {
  .p-attendance-price-main__value {
    font-size: 64px;
    margin-right: 7px;
  }
}
.p-attendance-price-main__detail {
  font-weight: bold;
  line-height: 1;
  text-align: left;
}
.p-attendance-price-main__suffix {
  position: relative;
  top: 13px;
}

.p-product-cp-banner {
  min-height: 248px;
  background-color: #f2f2ea;
  background-image: url("../images/payroll/cp-bg1.svg"), url("../images/payroll/cp-bg2.svg");
  background-repeat: no-repeat;
  background-position: left top, right bottom;
  padding: var(--spacing_xl);
  position: relative;
}
@media (max-width: 1079px) {
  .p-product-cp-banner {
    min-height: 400px;
    background-size: 167px, 97px;
  }
}
.p-product-cp-banner__label {
  position: absolute;
  inset: 32px 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22333%22%20height%3D%2245%22%20viewBox%3D%220%200%20333%2045%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M320.359%2022.1699V22.1719L332.681%2044.3418H320.359V44.3398H12.3213V44.3418H0L12.3213%2022.1719V22.1699L0%200H332.681L320.359%2022.1699Z%22%20fill%3D%22%23B57800%22%2F%3E%3C%2Fsvg%3E");
  background-size: contain;
  width: 333px;
  height: 44.3px;
  margin: 0 auto;
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  padding: 1px;
  text-align: center;
  line-height: 1.75;
  letter-spacing: 0.05em;
}
@media (max-width: 1079px) {
  .p-product-cp-banner__label {
    top: 56px;
  }
}
.p-product-cp-banner__icon {
  width: 143px;
  margin-left: 65px;
}
@media (max-width: 1079px) {
  .p-product-cp-banner__icon {
    width: 108px;
    margin-right: 10px;
    margin-left: 0;
  }
}
.p-product-cp-banner__title {
  color: var(--color-bg-product-primary);
}
@media (min-width: 1080px) {
  .p-product-cp-banner__title {
    margin-left: 46px;
    margin-right: 32px;
  }
}
.p-product-cp-banner__title div:first-child {
  font-size: 60px;
}
@media (max-width: 1079px) {
  .p-product-cp-banner__title div:first-child {
    font-size: 40px;
  }
}
.p-product-cp-banner__title div:last-child {
  font-size: 30px;
}
@media (max-width: 1079px) {
  .p-product-cp-banner__title div:last-child {
    font-size: 35px;
  }
}
.p-product-cp-banner__row {
  position: relative;
  align-items: end;
  display: flex;
  justify-content: center;
  margin-top: 7px;
}
@media (max-width: 1079px) {
  .p-product-cp-banner__row {
    flex-wrap: wrap;
    margin-top: 80px;
  }
}
.p-product-cp-banner__button-wrap {
  width: 247px;
}
@media (max-width: 1079px) {
  .p-product-cp-banner__button-wrap {
    width: auto;
    flex: 1 0 100%;
  }
}
.p-product-cp-banner__button {
  border-radius: 40px;
  font-weight: bold;
  letter-spacing: 0.05em;
  width: 247px;
  text-align: center;
  padding: 16px 0 15px;
  background-color: var(--brand-color-payroll-accent);
  position: relative;
  display: block;
}
@media (max-width: 1079px) {
  .p-product-cp-banner__button {
    width: 240px;
    margin: auto;
    margin-top: var(--spacing_lg);
  }
}
@media (min-width: 1080px) {
  .p-product-cp-banner__button {
    top: -32px;
  }
}

.p-product-collaboration-box {
  border-radius: var(--radius_sm, 6px);
  background: var(--kintai-primary, #db6800);
  padding: 44px 47px 40px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1079px) {
  .p-product-collaboration-box {
    padding: var(--spacing_lg);
    height: 400px;
  }
}
.p-product-collaboration-box__bg {
  width: 481px;
  inset: auto 78px 0 auto;
  position: absolute;
}
@media (max-width: 1079px) {
  .p-product-collaboration-box__bg {
    inset: auto 99px 0 auto;
  }
}
.p-product-collaboration-box__desc {
  position: relative;
  z-index: 2;
}
.p-product-collaboration-box .c-primary-button {
  width: 240px;
  color: var(--text-primary, #233447) !important;
  gap: var(--spacing_md);
}
@media (max-width: 1079px) {
  .p-product-collaboration-box .c-primary-button {
    min-width: 122px;
    width: fit-content;
    height: 45px;
    min-height: 45px;
    padding: var(--spacing_sm) var(--spacing_md);
    margin-left: auto;
    position: absolute;
    inset: auto var(--spacing_lg) var(--spacing_lg) auto;
  }
}
.p-product-collaboration-box .c-primary-button__icon {
  position: relative;
  inset: auto;
  transform: none;
}

@media (max-width: 1079px) {
  .c-cta::before {
    clip-path: polygon(0 0, 100% 0, 100% 93%, 0 66%);
  }
}

.c-support__buttons .c-support__button-wrap:first-child {
  display: none;
}

/*# sourceMappingURL=payroll.css.map */