@charset "UTF-8";

/* ////////////////////////////////////////////////////////////////////
price
//////////////////////////////////////////////////////////////////// */


/* ==================================================
共通
================================================== */

.hero-price .inner,
.section-price .inner,
.section-cta .inner {
  width: min(var(--inner), calc(100% - 48px));
  margin: 0 auto;
}


/* ==================================================
hero-price
================================================== */

.hero-price {
  padding: 100px 0;
  background: var(--color-brighter);
  text-align: center;
}

.hero-price-title {
  margin: 0;
  color: var(--color-main);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
}


/* ==================================================
section-price
================================================== */

.section-price {
  padding: 100px 0 40px;

  background: var(--color-white);
}


/* ==================================================
price-block
顧問契約
給与計算代行
就業規則の改定、作成
================================================== */

.price-block {
  margin-bottom: 120px;
}

.price-block:last-child {
  margin-bottom: 0;
}


/* --------------------------
block title
-------------------------- */

.price-block-title {
  position: relative;

  margin: 0 0 64px;
  padding-bottom: 22px;

  color: var(--color-main);

  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.4;

  text-align: center;

  letter-spacing: 0.05em;
}

.price-block-title::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 56px;
  height: 3px;

  background: var(--color-main);

  transform: translateX(-50%);
}


/* ==================================================
price-content
================================================== */

.price-content {
  margin-bottom: 64px;
}

.price-content:last-child {
  margin-bottom: 0;
}

.price-content .table-note {
  margin: 0px 0 20px 0;
}


/* ==================================================
price-subtitle
================================================== */

.price-subtitle {
  margin: 0 0 24px;
  padding-left: 16px;

  color: var(--color-text);

  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;

  border-left: 4px solid var(--color-main);
}

.price-subtitle-note {
  display: inline-block;

  margin-left: 10px;

  color: var(--color-text);

  font-size: 0.875rem;
  font-weight: 400;
}


/* ==================================================
price-small-title
================================================== */

.price-small-title {
  margin: 36px 0 20px;
  padding-left: 14px;

  color: var(--color-text);

  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;

  border-left: 3px solid var(--color-main);
}


/* ==================================================
text
================================================== */

.price-text {
  margin: 0 0 18px;

  color: var(--color-text);

  font-size: 1rem;
  line-height: 2;
}

.price-text:last-child {
  margin-bottom: 0;
}


/* --------------------------
service list
-------------------------- */

.price-service-list {
  margin: 0 0 18px;

  color: var(--color-main);

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.8;
}


/* --------------------------
note
-------------------------- */

.price-note {
  margin: 20px 0 0;

  color: var(--color-text);

  font-size: 0.875rem;
  line-height: 1.8;
}


/* ==================================================
table wrapper
================================================== */

.price-table-wrapper {
  width: 100%;

  overflow-x: auto;

  margin-bottom: 24px;

  -webkit-overflow-scrolling: touch;
}


/* ==================================================
price-table 共通
================================================== */

.price-table {
  width: 100%;

  border-collapse: collapse;

  background: var(--color-white);
}

.price-table th,
.price-table td {
  padding: 18px 20px;

  border: 1px solid #d9e4df;

  color: var(--color-text);

  font-size: 0.9375rem;
  line-height: 1.7;

  text-align: center;

  vertical-align: middle;
}


/* --------------------------
thead
-------------------------- */

.price-table thead th {
  color: var(--color-white);

  background: var(--color-main);

  font-weight: 700;
}


/* --------------------------
tbody
-------------------------- */

.price-table tbody td {
  background: var(--color-white);
}

.price-table tbody tr:nth-child(even) td {
  background: rgba(103, 142, 124, 0.05);
}


/* ==================================================
4列表
================================================== */

.price-table-4col {
  table-layout: fixed;

  min-width: 780px;
}

.price-table-4col th,
.price-table-4col td {
  width: 25%;
}


/* ==================================================
2列表
================================================== */

.price-table-2col {
  table-layout: fixed;

  min-width: 620px;
}

.price-table-2col th:first-child,
.price-table-2col td:first-child {
  width: 65%;
}

.price-table-2col th:last-child,
.price-table-2col td:last-child {
  width: 35%;
}


/* ==================================================
試算例
================================================== */

.price-table-example th:first-child,
.price-table-example td:first-child {
  width: 72%;
}

.price-table-example th:last-child,
.price-table-example td:last-child {
  width: 28%;
}


/* ==================================================
price-note-list
================================================== */

.price-note-list {
  margin: 0;
  padding-left: 1.4em;

  list-style-type: disc;
}

.price-note-list li {
  margin-bottom: 10px;

  color: var(--color-text);

  font-size: 0.9375rem;
  line-height: 1.8;
}

.price-note-list li:last-child {
  margin-bottom: 0;
}


/* ==================================================
price-list
================================================== */

.price-list {
  margin: 0;
  padding-left: 1.4em;

  list-style-type: disc;
}

.price-list li {
  margin-bottom: 12px;

  color: var(--color-text);

  font-size: 1rem;
  line-height: 1.9;
}

.price-list li:last-child {
  margin-bottom: 0;
}


/* ==================================================
price-number-list
================================================== */

.price-number-list {
  margin: 0;
  padding-left: 1.6em;

  list-style-type: decimal;
}

.price-number-list li {
  margin-bottom: 14px;

  color: var(--color-text);

  font-size: 1rem;
  line-height: 1.9;
}

.price-number-list li:last-child {
  margin-bottom: 0;
}


/* ==================================================
CTA
================================================== */

.section-cta {
  padding-top: 40px;
}


/* ####################################################################
responsive
#################################################################### */


/* ==================================================
1000px以下
================================================== */

@media screen and (max-width: 1000px) {

  .hero-price {
    padding: 80px 0;
  }

  .hero-price-title {
    font-size: 2.4rem;
  }


  .section-price {
    padding: 80px 0 30px;
  }


  .price-block {
    margin-bottom: 100px;
  }

  .price-block-title {
    margin-bottom: 52px;

    font-size: 2.125rem;
  }


  .price-content {
    margin-bottom: 56px;
  }


  .price-subtitle {
    font-size: 1.25rem;
  }

}


/* ==================================================
777px以下
================================================== */

@media screen and (max-width: 777px) {

  /* --------------------------
  inner
  -------------------------- */

  .hero-price .inner,
  .section-price .inner,
  .section-cta .inner {
    width: min(var(--inner), calc(100% - 32px));
  }


  /* --------------------------
  hero
  -------------------------- */

  .hero-price {
    padding: 64px 0 54px;
  }

  .hero-price-title {
    font-size: 2rem;
  }


  /* --------------------------
  section
  -------------------------- */

  .section-price {
    padding: 64px 0 20px;
  }


  /* --------------------------
  block
  -------------------------- */

  .price-block {
    margin-bottom: 80px;
  }

  .price-block-title {
    margin-bottom: 40px;
    padding-bottom: 18px;

    font-size: 1.75rem;
  }

  .price-block-title::after {
    width: 44px;
    height: 2px;
  }


  /* --------------------------
  content
  -------------------------- */

  .price-content {
    margin-bottom: 46px;
  }


  /* --------------------------
  subtitle
  -------------------------- */

  .price-subtitle {
    margin-bottom: 20px;
    padding-left: 12px;

    font-size: 1.125rem;

    border-left-width: 3px;
  }

  .price-subtitle-note {
    display: block;

    margin-top: 8px;
    margin-left: 0;

    font-size: 0.8125rem;
    line-height: 1.6;
  }


  /* --------------------------
  small title
  -------------------------- */

  .price-small-title {
    margin: 30px 0 18px;

    font-size: 1rem;
  }


  /* --------------------------
  text
  -------------------------- */

  .price-text {
    font-size: 0.9375rem;
    line-height: 1.9;
  }

  .price-service-list {
    font-size: 0.9375rem;
    line-height: 1.9;
  }

  .price-note {
    font-size: 0.8125rem;
  }


  /* --------------------------
  table
  -------------------------- */

  .price-table-wrapper {
    width: 100%;
    margin: 0 0 24px;
    padding: 0;
  }

  .price-table th,
  .price-table td {
    padding: 14px 12px;

    font-size: 0.875rem;

    text-align: left;
  }


  /* 4列は横スクロール */

  .price-table-4col {
    min-width: 680px;
  }


  /* 2列は画面内に収める */

  .price-table-2col {
    width: 100%;
    min-width: 0;

    table-layout: fixed;
  }

  .price-table-2col th:first-child,
  .price-table-2col td:first-child {
    width: 62%;
  }

  .price-table-2col th:last-child,
  .price-table-2col td:last-child {
    width: 38%;
  }

  .price-table-2col th,
  .price-table-2col td {
    word-break: break-word;
  }


  /* 試算例 */

  .price-table-example th:first-child,
  .price-table-example td:first-child {
    width: 68%;
  }

  .price-table-example th:last-child,
  .price-table-example td:last-child {
    width: 32%;
  }


  /* --------------------------
  list
  -------------------------- */

  .price-note-list li {
    font-size: 0.875rem;
    line-height: 1.8;
  }

  .price-list li,
  .price-number-list li {
    font-size: 0.9375rem;
    line-height: 1.8;
  }


  /* --------------------------
  CTA
  -------------------------- */

  .section-cta {
    padding-top: 32px;
  }

}