/* variables */
:root {
  --fee-excel-green: #07913a;
  --fee-ppt-red: #d3522f;
  --fee-bot-blue: #6eb4f9;
  --fee-copilot-purple: #ab6ef9;
}

/* base */
body {
  background: white;
  position: relative;
}

main {
  margin: 0 auto;
  max-width: 500px;
  padding-bottom: 0;
  position: static;
}

.ec-footer {
  margin-top: 0;
}

/* firstview */
.fee-business-firstview {
  padding-top: var(--clamp-30sp);
}

.fee-business-firstview__main-visual {
  height: var(--clamp-210sp);
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.fee-business-firstview__main-visual img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.fee-business-firstview__headline {
  font-size: var(--clamp-20sp);
  font-weight: 700;
  text-align: center;
}

.fee-business-firstview__toc {
  margin-top: var(--clamp-124sp);
}

.fee-business-firstview__toc--list {
  display: flex;
  flex-direction: column;
  gap: var(--clamp-25sp);
  margin: 0 auto;
  width: var(--clamp-220sp);
}

.fee-business-firstview__toc--list_item {
  height: var(--clamp-64sp);
  width: 100%;
}

.fee-business-firstview__toc--list_item_anchor {
  align-items: center;
  color: var(--gray);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--clamp-16sp);
  font-weight: 700;
  line-height: 1;
  height: 100%;
  order: 1;
  transition: color .2s ease;
  width: 100%;
}

.fee-business-firstview__toc--list_item_anchor[data-course="excel"]:hover {
  color: var(--fee-excel-green);
}

.fee-business-firstview__toc--list_item_anchor[data-course="ppt"]:hover {
  color: var(--fee-ppt-red);
}

.fee-business-firstview__toc--list_item_anchor[data-course="ai-bot"]:hover {
  color: var(--fee-bot-blue);
}

.fee-business-firstview__toc--list_item_anchor[data-course="ms-copilot"]:hover {
  color: var(--fee-copilot-purple);
}

.fee-business-firstview__toc--list_item_anchor::before {
  content: "";
  height: var(--clamp-3sp);
  order: 2;
  width: 100%;
}

.fee-business-firstview__toc--list_item_anchor[data-course="excel"]::before {
  background: var(--fee-excel-green);
}

.fee-business-firstview__toc--list_item_anchor[data-course="ppt"]::before {
  background: var(--fee-ppt-red);
}

.fee-business-firstview__toc--list_item_anchor[data-course="ai-bot"]::before {
  background: var(--fee-bot-blue);
}

.fee-business-firstview__toc--list_item_anchor[data-course="ms-copilot"]::before {
  background: var(--fee-copilot-purple);
}

.fee-business-firstview__toc--list_item_anchor::after {
  background: url(../../images/fee-b/icon/arrow-up_black.svg) no-repeat center/contain;
  content: "";
  height: var(--clamp-15sp);
  order: 3;
  width: var(--clamp-15sp);
}

/* fees */
.fee-business__price-table {
  position: relative;
}

.fee-business__price-table[data-course="excel"] {
  margin-top: var(--clamp-40sp);
  padding-top: var(--clamp-120sp);
}

.fee-business__price-table[data-course="ppt"],
.fee-business__price-table[data-course="ai-bot"],
.fee-business__price-table[data-course="ms-copilot"] {
  margin-top: var(--clamp-120sp);
  padding-top: var(--clamp-120sp);
}

.fee-business__price-table-inner {
  background: var(--sumire);
  padding-top: var(--clamp-48sp);
}

.fee-business__price-table--course {
  font-size: var(--clamp-32sp);
  font-weight: 700;
  line-height: 1.4;
  position: absolute;
  text-align: center;
  top: var(--clamp-40sp);
  width: 100%;
}

.fee-business__price-table--course::after {
  background: #163b9c;
  content: "";
  height: var(--clamp-40sp);
  left: calc(50% - var(--clamp-2sp) / 2);
  position: absolute;
  top: var(--clamp-59sp);
  width: var(--clamp-2sp);
}

.fee-business__price-table--plans {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--clamp-30sp);
}

.fee-business__price-table--plans_item {
  background: white;
  border: 1px solid var(--gray);
  height: var(--clamp-432sp);
  margin: 0 auto;
  width: var(--clamp-335sp);
}

.fee-business__price-table--plans_item_name {
  align-items: center;
  border-bottom: 1px solid var(--gray);
  color: white;
  display: flex;
  font-size: var(--clamp-20sp);
  font-weight: 700;
  height: var(--clamp-100sp);
  justify-content: center;
  width: 100%;
}

.fee-business__price-table[data-course="excel"] .fee-business__price-table--plans_item_name {
  background: var(--fee-excel-green);
}

.fee-business__price-table[data-course="ppt"] .fee-business__price-table--plans_item_name {
  background: var(--fee-ppt-red);
}

.fee-business__price-table[data-course="ai-bot"] .fee-business__price-table--plans_item_name {
  background: var(--fee-bot-blue);
}

.fee-business__price-table[data-course="ms-copilot"] .fee-business__price-table--plans_item_name {
  background: var(--fee-copilot-purple);
}

.fee-business__price-table--plans_item_fee {
  display: flex;
  font-family: "Poppins", sans-serif;
  font-size: var(--clamp-32sp);
  font-weight: 600;
  line-height: 1;
  justify-content: center;
  margin: var(--clamp-30sp) 0;
}

.fee-business__price-table--plans_item_fee::before {
  content: "¥";
  font-size: var(--clamp-24sp);
  font-weight: 600;
  transform: translateY(var(--clamp-6sp));
}

.fee-business__price-table--plans_item_fee::after {
  content: "/人";
  font-family: unset;
  font-size: var(--clamp-16sp);
  font-weight: 400;
  transform: translateY(var(--clamp-11sp));
}

.fee-business__price-table--plans_item_contents {
  margin: 0 auto;
  width: var(--clamp-290sp);
}

.fee-business__price-table--plans_item_contents ul li {
  align-items: center;
  display: flex;
  font-size: var(--clamp-16sp);
  font-weight: 400;
  gap: var(--clamp-10sp);
  height: var(--clamp-40sp);
  padding-left: var(--clamp-15sp);
}

.fee-business__price-table--plans_item_contents ul li:nth-child(odd) {
  background: #eee;
}

.fee-business__price-table--plans_item_contents ul li:first-child {
  font-weight: 700;
}

.fee-business__price-table--plans_item_contents ul li::before {
  background: url(../../images/fee-b/icon/check-mark-icon.svg) no-repeat center/contain;
  content: "";
  height: var(--clamp-20sp);
  width: var(--clamp-20sp);
}

.fee-business__price-table--discount {
  font-size: var(--clamp-14sp);
  font-weight: 700;
  margin: var(--clamp-30sp) auto 0;
  padding: var(--clamp-15sp) 0;
  text-align: center;
  width: var(--clamp-335sp);
}

.fee-business__price-table[data-course="excel"] .fee-business__price-table--discount {
  border-bottom: 1px solid var(--fee-excel-green);
  border-top: 1px solid var(--fee-excel-green);
  color: var(--fee-excel-green);
}

.fee-business__price-table[data-course="ppt"] .fee-business__price-table--discount {
  border-bottom: 1px solid var(--fee-ppt-red);
  border-top: 1px solid var(--fee-ppt-red);
  color: var(--fee-ppt-red);
}

.fee-business__price-table[data-course="ai-bot"] .fee-business__price-table--discount {
  border-bottom: 1px solid var(--fee-bot-blue);
  border-top: 1px solid var(--fee-bot-blue);
  color: var(--fee-bot-blue);
}

.fee-business__price-table[data-course="ms-copilot"] .fee-business__price-table--discount {
  border-bottom: 1px solid var(--fee-copilot-purple);
  border-top: 1px solid var(--fee-copilot-purple);
  color: var(--fee-copilot-purple);
}

.fee-business__price-table--cta {
  align-items: center;
  background: #eee;
  display: flex;
  flex-direction: column;
  gap: var(--clamp-20sp);
  margin-top: var(--clamp-30sp);
  padding: var(--clamp-30sp) 0;
}

.fee-business__price-table--cta_button {
  border-radius: var(--clamp-10sp);
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  display: block;
  height: var(--clamp-76sp);
  transition: all .2s;
  user-select: none;
  width: var(--clamp-335sp);
}

.fee-business__price-table--cta_button:hover {
  transform: translateY(var(--clamp-2sp));
}

.fee-business__price-table--cta_button-inner {
  align-items: center;
  display: flex;
  font-size: var(--clamp-18sp);
  font-weight: 700;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: all .2s;
  width: 100%;
  z-index: 5;
}

.fee-business__price-table--cta_button-inner::before {
  background-image: linear-gradient(90deg, rgba(255,255,255,0) 0,rgba(255,255,255,.3) 80%,rgba(255,255,255,0) 100%);
  content: "";
  height: 200px;
  left: -65%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(25deg);
  width: 50%;
  z-index: -1;
}

.fee-business__price-table--cta_button:hover .fee-business__price-table--cta_button-inner::before {
  animation: cmn-btn-interaction .2s linear 0s forwards;
}

@keyframes cmn-btn-interaction {
  0% {
    left: -65%;
  }
  100% {
    left: 115%;
  }
}

.fee-business__price-table--cta_button-inner::after {
  content: "";
  position: absolute;
  z-index: 5;
}

.fee-business__price-table--cta_button[data-link="course-details"] {
  background: #163b9c;
  border: var(--clamp-5sp) solid #163b9c;
}

.fee-business__price-table--cta_button[data-link="course-details"] .fee-business__price-table--cta_button-inner {
  color: white;
}

.fee-business__price-table--cta_button[data-link="docs"] {
  background: white;
  border: var(--clamp-5sp) solid #163b9c;
}

.fee-business__price-table--cta_button[data-link="docs"] .fee-business__price-table--cta_button-inner {
  color: var(--gray);
}

/* supports */
.fee-business__supports {
  margin: var(--clamp-160sp) auto 0;
  width: var(--clamp-335sp);
}

.fee-business__supports--headline {
  font-size: var(--clamp-32sp);
  font-weight: 700;
  text-align: center;
}

.fee-business__supports--list {
  display: flex;
  flex-direction: column;
  gap: var(--clamp-20sp);
  margin-top: var(--clamp-40sp);
}

.fee-business__supports--list_item {
  align-items: center;
  background: var(--sumire);
  border-radius: var(--clamp-25sp);
  display: flex;
  flex-direction: column;
  gap: var(--clamp-20sp);
  padding: var(--clamp-20sp);
}

.fee-business__supports--list_title {
  font-size: var(--clamp-20sp);
  font-weight: 700;
  order: 2;
}

.fee-business__supports--list_text {
  font-size: var(--clamp-14sp);
  font-weight: 400;
  line-height: 1.7;
  order: 3;
}

.fee-business__supports--list_image {
  order: 1;
}

.fee-business__supports--list_image[data-index="0"],
.fee-business__supports--list_image[data-index="1"],
.fee-business__supports--list_image[data-index="3"] {
  height: var(--clamp-100sp);
  width: var(--clamp-200sp);
}

.fee-business__supports--list_image[data-index="2"] {
  height: var(--clamp-100sp);
  width: var(--clamp-100sp);
}

.fee-business__supports--list_image img {
  height: 100%;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

/* faq */
.fee-business__faq {
  background: #eee;
  margin-top: var(--clamp-160sp);
  padding: var(--clamp-80sp) 0;
}

.fee-business__faq--headline {
  font-size: var(--clamp-32sp);
  font-weight: 700;
  text-align: center;
}

.fee-business__faq--list {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--clamp-30sp);
  margin-top: var(--clamp-80sp);
}

.fee-business__faq--list_item {
  background: white;
  overflow: hidden;
  transition: height .2s ease;
  width: var(--clamp-335sp);
}

.fee-business__faq--list_item:has(input[id="faq-0"]),
.fee-business__faq--list_item:has(input[id="faq-1"]),
.fee-business__faq--list_item:has(input[id="faq-3"]) {
  height: var(--clamp-111sp);
}

.fee-business__faq--list_item:has(input[id="faq-2"]),
.fee-business__faq--list_item:has(input[id="faq-4"]) {
  height: var(--clamp-92sp);
}

.fee-business__faq--list_item:has(input[id="faq-0"]:checked) {
  height: var(--clamp-467sp);
}

.fee-business__faq--list_item:has(input[id="faq-1"]:checked) {
  height: var(--clamp-277sp);
}

.fee-business__faq--list_item:has(input[id="faq-2"]:checked),
.fee-business__faq--list_item:has(input[id="faq-4"]:checked) {
  height: var(--clamp-231sp);
}

.fee-business__faq--list_item:has(input[id="faq-3"]:checked) {
  height: var(--clamp-202sp);
}

.fee-business__faq--list_question label {
  display: flex;
  padding: var(--clamp-30sp) var(--clamp-10sp) var(--clamp-30sp) var(--clamp-23sp);
}

.fee-business__faq--list_question label::before {
  color: #163b9c;
  content: "Q";
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-size: var(--clamp-20sp);
  font-weight: 700;
  margin-right: var(--clamp-20sp);
  transform: translateY(calc(var(--clamp-3sp) * -1));
}

.fee-business__faq--list_question label::after {
  content: "";
  flex-shrink: 0;
  height: var(--clamp-20sp);
  margin-left: var(--clamp-10sp);
  transform: translateY(var(--clamp-4sp));
  width: var(--clamp-20sp);
}

.fee-business__faq--list_item:has(input[id="faq-0"]) .fee-business__faq--list_question label::after,
.fee-business__faq--list_item:has(input[id="faq-1"]) .fee-business__faq--list_question label::after,
.fee-business__faq--list_item:has(input[id="faq-2"]) .fee-business__faq--list_question label::after,
.fee-business__faq--list_item:has(input[id="faq-3"]) .fee-business__faq--list_question label::after,
.fee-business__faq--list_item:has(input[id="faq-4"]) .fee-business__faq--list_question label::after {
  background: url(../../images/fee-b/icon/closed-icon.svg) no-repeat center/contain;
}

.fee-business__faq--list_item:has(input[id="faq-0"]:checked) .fee-business__faq--list_question label::after,
.fee-business__faq--list_item:has(input[id="faq-1"]:checked) .fee-business__faq--list_question label::after,
.fee-business__faq--list_item:has(input[id="faq-2"]:checked) .fee-business__faq--list_question label::after,
.fee-business__faq--list_item:has(input[id="faq-3"]:checked) .fee-business__faq--list_question label::after,
.fee-business__faq--list_item:has(input[id="faq-4"]:checked) .fee-business__faq--list_question label::after {
  background: url(../../images/fee-b/icon/open-icon.svg) no-repeat center/contain;
}

.fee-business__faq--list_question label span {
  font-size: var(--clamp-16sp);
  font-weight: 700;
  width: 100%;
}

.fee-business__faq--list_answer {
  display: flex;
  font-size: var(--clamp-16sp);
  font-weight: 400;
  gap: var(--clamp-22sp);
  line-height: 1.7;
  margin-top: var(--clamp-10sp);
  padding: var(--clamp-17sp) var(--clamp-20sp) var(--clamp-30sp);
  position: relative;
}

.fee-business__faq--list_answer::before {
  content: "A";
  flex-shrink: 0;
  font-family: "Poppins", sans-serif;
  font-size: var(--clamp-20sp);
  font-weight: 400;
}

.fee-business__faq--list_answer::after {
  background: #163b9c;
  content: "";
  height: 1px;
  left: calc(50% - var(--clamp-315sp) / 2);
  position: absolute;
  top: 0;
  width: var(--clamp-315sp);
}

@media (min-width: 744px) {
  /* base */
  main {
    max-width: 1920px;
  }

  /* firstview */
  .fee-business-firstview {
    padding-top: var(--clamp-75);
  }

  .fee-business-firstview__main-visual {
    height: var(--clamp-420);
  }

  .fee-business-firstview__toc {
    margin: var(--clamp-115);
  }

  .fee-business-firstview__headline {
    font-size: var(--clamp-40);
    margin: 0 auto;
    text-align: left;
    width: var(--clamp-1100);
  }

  .fee-business-firstview__toc {
    margin-top: var(--clamp-220);
  }

  .fee-business-firstview__toc--list {
    flex-direction: row;
    gap: unset;
    justify-content: space-between;
    width: var(--clamp-1099);
  }

  .fee-business-firstview__toc--list_item {
    height: var(--clamp-64);
    width: var(--clamp-220);
  }

  .fee-business-firstview__toc--list_item_anchor {
    font-size: var(--clamp-20);
  }

  .fee-business-firstview__toc--list_item_anchor::before {
    height: var(--clamp-3);
  }

  .fee-business-firstview__toc--list_item_anchor::after {
    height: var(--clamp-15);
    width: var(--clamp-15);
  }

  /* fees */
  .fee-business__price-table[data-course="excel"],
  .fee-business__price-table[data-course="ppt"],
  .fee-business__price-table[data-course="ai-bot"],
  .fee-business__price-table[data-course="ms-copilot"] {
    margin-top: var(--clamp-80);
    padding-top: var(--clamp-160);
  }

  .fee-business__price-table-inner {
    padding-top: var(--clamp-40);
  }

  .fee-business__price-table--course {
    font-size: var(--clamp-40);
    line-height: 1;
    top: var(--clamp-80);
  }

  .fee-business__price-table--course::after {
    height: var(--clamp-40);
    left: calc(50% - var(--clamp-2) / 2);
    top: var(--clamp-50);
    width: var(--clamp-2);
  }

  .fee-business__price-table--plans {
    flex-direction: row;
    justify-content: center;
    gap: var(--clamp-25);
  }

  .fee-business__price-table--plans_item {
    height: var(--clamp-432);
    margin: 0;
    width: var(--clamp-350);
  }

  .fee-business__price-table--plans_item_name {
    font-size: var(--clamp-24);
    height: var(--clamp-100);
  }

  .fee-business__price-table--plans_item_fee {
    font-size: var(--clamp-32);
    margin: var(--clamp-30full) 0;
  }

  .fee-business__price-table--plans_item_fee::before {
    font-size: var(--clamp-24);
    transform: translateY(var(--clamp-6));
  }

  .fee-business__price-table--plans_item_fee::after {
    font-size: var(--clamp-16);
    transform: translateY(var(--clamp-11));
  }

  .fee-business__price-table--plans_item_contents {
    width: var(--clamp-290);
  }

  .fee-business__price-table--plans_item_contents ul li {
    font-size: var(--clamp-16);
    gap: var(--clamp-10);
    height: var(--clamp-40);
    padding-left: var(--clamp-15);
  }

  .fee-business__price-table--plans_item_contents ul li::before {
    height: var(--clamp-20);
    width: var(--clamp-20);
  }

  .fee-business__price-table--discount {
    font-size: var(--clamp-16);
    margin: var(--clamp-45) auto 0;
    padding: var(--clamp-15) 0 var(--clamp-17);
    width: var(--clamp-660);
  }

  .fee-business__price-table--cta {
    flex-direction: row;
    gap: var(--clamp-40);
    justify-content: center;
    margin-top: var(--clamp-30full);
    padding: var(--clamp-30full) 0;
  }

  .fee-business__price-table--cta_button {
    border-radius: var(--clamp-10);
    box-shadow: 0 0 var(--clamp-10) rgba(0,0,0,.1);
    height: var(--clamp-80);
    width: var(--clamp-410);
  }

  .fee-business__price-table--cta_button:hover {
    transform: translateY(var(--clamp-2));
  }

  .fee-business__price-table--cta_button-inner {
    font-size: var(--clamp-20);
  }

  .fee-business__price-table--cta_button[data-link="course-details"] {
    border: none;
  }

  .fee-business__price-table--cta_button[data-link="docs"] {
    border: var(--clamp-5) solid #163b9c;
  }

  /* supports */
  .fee-business__supports {
    margin: var(--clamp-160) auto 0;
    width: var(--clamp-1120);
  }

  .fee-business__supports--headline {
    font-size: var(--clamp-32);
  }

  .fee-business__supports--list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--clamp-40);
    justify-content: center;
    margin-top: var(--clamp-40);
  }

  .fee-business__supports--list_item {
    align-items: flex-start;
    border-radius: var(--clamp-25);
    gap: unset;
    height: var(--clamp-202);
    justify-content: space-between;
    padding: var(--clamp-40) 0 var(--clamp-40) var(--clamp-133);
    position: relative;
    width: var(--clamp-530);
  }

  .fee-business__supports--list_title {
    font-size: var(--clamp-20);
    order: 1;
  }

  .fee-business__supports--list_text {
    font-size: var(--clamp-14);
    order: 2;
    width: var(--clamp-357);
  }

  .fee-business__supports--list_image {
    left: 0;
    order: unset;
    position: absolute;
  }

  .fee-business__supports--list_image[data-index="0"],
  .fee-business__supports--list_image[data-index="3"] {
    height: var(--clamp-182);
    top: calc(50% - var(--clamp-182) / 2);
    width: var(--clamp-133);
  }

  .fee-business__supports--list_image[data-index="1"] {
    height: var(--clamp-162);
    top: calc(50% - var(--clamp-162) / 2);
    width: var(--clamp-133);
  }

  .fee-business__supports--list_image[data-index="2"] {
    height: var(--clamp-100);
    top: calc(50% - var(--clamp-100) / 2);
    width: var(--clamp-100);
  }

  /* faq */
  .fee-business__faq {
    margin-top: var(--clamp-160);
    padding: var(--clamp-82) 0 var(--clamp-80);
  }

  .fee-business__faq--headline {
    font-size: var(--clamp-32);
  }

  .fee-business__faq--list {
    gap: var(--clamp-30full);
    margin-top: var(--clamp-80);
  }

  .fee-business__faq--list_item {
    width: var(--clamp-1100);
  }

  .fee-business__faq--list_item:has(input[id="faq-0"]),
  .fee-business__faq--list_item:has(input[id="faq-1"]),
  .fee-business__faq--list_item:has(input[id="faq-2"]),
  .fee-business__faq--list_item:has(input[id="faq-3"]),
  .fee-business__faq--list_item:has(input[id="faq-4"]) {
    height: var(--clamp-92);
  }

  .fee-business__faq--list_item:has(input[id="faq-0"]:checked) {
    height: var(--clamp-263);
  }

  .fee-business__faq--list_item:has(input[id="faq-1"]:checked),
  .fee-business__faq--list_item:has(input[id="faq-2"]:checked),
  .fee-business__faq--list_item:has(input[id="faq-3"]:checked),
  .fee-business__faq--list_item:has(input[id="faq-4"]:checked) {
    height: var(--clamp-188);
  }

  .fee-business__faq--list_question label {
    cursor: pointer;
    padding: var(--clamp-30full) var(--clamp-50) var(--clamp-30full) var(--clamp-40);
  }

  .fee-business__faq--list_question label::before {
    font-size: var(--clamp-20);
    margin-right: var(--clamp-20);
    transform: translateY(calc(var(--clamp-3) * -1));
  }

  .fee-business__faq--list_question label::after {
    height: var(--clamp-20);
    margin-left: 0;
    transform: translateY(var(--clamp-4));
    width: var(--clamp-20);
  }

  .fee-business__faq--list_question label span {
    font-size: var(--clamp-16);
    width: 100%;
  }

  .fee-business__faq--list_answer {
    font-size: var(--clamp-16);
    gap: var(--clamp-22);
    margin-top: var(--clamp-10);
    padding: var(--clamp-22) var(--clamp-30full) var(--clamp-30full) var(--clamp-40);
  }

  .fee-business__faq--list_answer::before {
    font-size: var(--clamp-20);
  }

  .fee-business__faq--list_answer::after {
    left: calc(50% - var(--clamp-1040) / 2);
    width: var(--clamp-1040);
  }
}