/* //////////////////////////////////////////////////

Title : component.scss
For   : hospis/

Created       : 2025-09-26
Last Modified : 2025-09-26

==========================================

Content

////////////////////////////////////////////////// */
/**
 * typography
 */
.c-heading {
  display: flex;
  flex-direction: var(--heading-flex-direction, column);
  gap: var(--heading-gap, var(--heading-gap-default));
}
.c-heading__main {
  font-size: var(--heading-main-font-size, var(--heading-main-font-size-default));
  font-family: var(--heading-main-font-family);
  font-weight: var(--heading-main-font-weight, var(--heading-main-font-weight-default));
  line-height: var(--heading-main-line-height, var(--heading-main-line-height-default));
  letter-spacing: var(--heading-main-letter-spacing);
  color: var(--heading-main-color, var(--heading-main-color-default));
}
.c-heading__sub {
  font-size: var(--heading-sub-font-size, var(--heading-sub-font-size-default));
  font-family: var(--heading-sub-font-family);
  font-weight: var(--heading-sub-font-weight, var(--heading-sub-font-weight-default));
  line-height: var(--heading-sub-line-height, var(--heading-sub-line-height-default));
  letter-spacing: var(--heading-sub-letter-spacing);
  color: var(--heading-sub-color, var(--heading-sub-color-default));
}
.c-heading--page-title {
  --heading-main-font-family: var(--font-combine);
  --heading-main-font-weight-default: 300;
  --heading-main-color-default: var(--color-theme-light);
  --heading-sub-font-family: var(--font-ja);
  --heading-sub-font-weight-default: 500;
}
.c-heading--primary {
  --heading-main-font-family: var(--font-combine);
  --heading-main-font-weight-default: 300;
  --heading-main-color-default: var(--color-theme-light);
  --heading-sub-font-family: var(--font-ja);
  --heading-sub-font-weight-default: 500;
}
.c-heading--secondary {
  --heading-flex-direction: row;
  align-items: center;
  font-size: var(--heading-font-size, var(--heading-font-size-default));
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight, var(--heading-font-weight-default));
  line-height: var(--heading-line-height, var(--heading-line-height-default));
  letter-spacing: var(--heading-letter-spacing, var(--heading-letter-spacing-default));
  color: var(--heading-color, var(--color-theme-light));
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-heading--page-title {
    --heading-gap-default: 0.8rem;
    --heading-main-font-size-default: 2.4rem;
    --heading-main-line-height-default: calc(40 / 24);
    --heading-sub-font-size-default: 2.6rem;
    --heading-sub-line-height-default: calc(37 / 26);
    text-align: var(--heading-text-align, center);
  }
  .c-heading--primary {
    --heading-gap-default: 0;
    --heading-main-font-size-default: 4.8rem;
    --heading-main-line-height-default: calc(58 / 48);
    --heading-sub-font-size-default: 1.4rem;
    --heading-sub-line-height-default: calc(20 / 14);
    text-align: var(--heading-text-align, right);
  }
  .c-heading--secondary {
    --heading-gap-default: 1rem;
    --heading-font-size-default: 2.2rem;
    --heading-font-weight-default: 700;
    --heading-line-height-default: calc(32 / 22);
    --heading-letter-spacing-default: 0.05em;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-heading--page-title {
    --heading-gap-default: 2.2rem;
    --heading-main-font-size-default: 5.4rem;
    --heading-main-line-height-default: calc(66 / 54);
    --heading-sub-font-size-default: 3rem;
    --heading-sub-line-height-default: calc(44 / 30);
  }
  .c-heading--primary {
    --heading-gap-default: 1.2rem;
    --heading-main-font-size-default: 9rem;
    --heading-main-line-height-default: calc(110 / 90);
    --heading-sub-font-size-default: 2rem;
    --heading-sub-line-height-default: calc(29 / 20);
    text-align: var(--heading-text-align, right);
  }
  .c-heading--secondary {
    --heading-gap-default: 1.5rem;
    --heading-font-size-default: 2.8rem;
    --heading-font-weight-default: 700;
    --heading-line-height-default: calc(40 / 28);
    --heading-letter-spacing-default: 0.05em;
  }
}
/**
 * button
 */
.c-button {
  display: var(--button-display, grid);
  grid-template-columns: var(--button-grid-template-columns, 1fr var(--button-icon-background-width, var(--button-icon-background-width-default)));
  align-items: center;
  max-width: var(--button-width, var(--button-width-default));
  width: 100%;
  min-height: var(--button-height, var(--button-height-default));
  padding-inline: var(--button-gutter, var(--button-gutter-default));
  border-radius: 100vh;
  background: var(--button-color-primary-active, var(--button-color-primary));
  font-size: var(--button-font-size, var(--button-font-size-default));
  letter-spacing: var(--button-letter-spacing, 0);
  font-weight: var(--button-font-weight, 600);
  color: var(--button-color-secondary-active, var(--button-color-secondary));
  text-align: var(--button-text-align, center);
  transition: all var(--transition-default);
}
.c-button::after {
  aspect-ratio: 1;
  background-position: var(--button-icon-position-horizontal, center) var(--button-icon-position-vertical, center);
  background-repeat: no-repeat;
  border-radius: 100vh;
  transition: background-color var(--transition-default), border var(--transition-default);
}
.c-button--primary {
  --button-color-primary: var(--color-theme-light);
  --button-color-secondary: var(--color-white);
  border: 1px solid var(--button-color-primary);
}
.c-button--primary::after {
  --button-icon-position-vertical: calc(
    50% - var(--button-icon-height, var(--button-icon-height-default)) / 4
  );
  content: "";
  border: 1px solid var(--button-color-secondary-active, var(--button-color-secondary));
  background-image: var(--button-icon-background-active, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40NzMiIGhlaWdodD0iNi43NDQiIHZpZXdCb3g9IjAgMCAyMy40NzMgNi43NDQiPiA8cGF0aCBpZD0i44OR44K5XzM0OCIgZGF0YS1uYW1lPSLjg5HjgrkgMzQ4IiBkPSJNLTIwODQxLjU4LTgzNTkuOTEzaDIyLjI2NmwtNS44OTEtNS44OTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwODQxLjU4IDgzNjYuMTU3KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4="));
  background-size: auto var(--button-icon-height, var(--button-icon-height-default));
}
.c-button--primary:hover {
  --button-icon-background-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40NzMiIGhlaWdodD0iNi43NDQiIHZpZXdCb3g9IjAgMCAyMy40NzMgNi43NDQiPiA8cGF0aCBpZD0i44OR44K5XzM0OCIgZGF0YS1uYW1lPSLjg5HjgrkgMzQ4IiBkPSJNLTIwODQxLjU4LTgzNTkuOTEzaDIyLjI2NmwtNS44OTEtNS44OTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwODQxLjU4IDgzNjYuMTU3KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDVBNEQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=");
}
.c-button--secondary {
  --button-color-primary: var(--color-theme-light);
  --button-color-secondary: var(--color-white);
  border: 1px solid var(--button-color-primary);
}
.c-button--secondary::after {
  content: "";
  border: 1px solid var(--button-color-secondary-active, var(--button-color-secondary));
  background-color: var(--button-color-secondary-active, var(--button-color-secondary));
  background-image: var(--button-icon-background-active, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi40NTkiIGhlaWdodD0iMTguNjg3IiB2aWV3Qm94PSIwIDAgMjIuNDU5IDE4LjY4NyI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNDQwIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA0NDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS40MTMpIj4gPHBhdGggaWQ9IuODkeOCuV8yMjEiIGRhdGEtbmFtZT0i44OR44K5IDIyMSIgZD0iTS0yMDA3OC45ODQtMTM5NjRoMTkuNDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMDc4Ljk4NCAxMzk3MS43NTYpIiBmaWxsPSJub25lIiBzdHJva2U9IiM0NWE0ZDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+IDxwYXRoIGlkPSLjg5HjgrlfMjIyIiBkYXRhLW5hbWU9IuODkeOCuSAyMjIiIGQ9Ik0tMjAwNjguNjIxLTEzOTcybDguOCw4LjA2OC04LjgsNy43OTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMDgwLjI4MSAxMzk3MikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQ1YTRkMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg=="));
  background-size: var(--button-icon-width, var(--button-icon-width-default));
}
.c-button--secondary:hover {
  --button-icon-background-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi40NTkiIGhlaWdodD0iMTguNjg3IiB2aWV3Qm94PSIwIDAgMjIuNDU5IDE4LjY4NyI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNDQwIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA0NDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS40MTMpIj4gPHBhdGggaWQ9IuODkeOCuV8yMjEiIGRhdGEtbmFtZT0i44OR44K5IDIyMSIgZD0iTS0yMDA3OC45ODQtMTM5NjRoMTkuNDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMDc4Ljk4NCAxMzk3MS43NTYpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+IDxwYXRoIGlkPSLjg5HjgrlfMjIyIiBkYXRhLW5hbWU9IuODkeOCuSAyMjIiIGQ9Ik0tMjAwNjguNjIxLTEzOTcybDguOCw4LjA2OC04LjgsNy43OTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMDgwLjI4MSAxMzk3MikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg==");
}
.c-button--tertiary {
  --button-color-primary: var(--color-white);
  --button-color-secondary: var(--color-theme-light);
  border: 1px solid var(--button-color-secondary);
}
.c-button--tertiary::after {
  content: "";
  border: 1px solid var(--button-color-secondary-active, var(--button-color-secondary));
  background-color: var(--button-color-secondary-active, var(--button-color-secondary));
  background-image: var(--button-icon-background-active, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi40NTkiIGhlaWdodD0iMTguNjg3IiB2aWV3Qm94PSIwIDAgMjIuNDU5IDE4LjY4NyI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNDQwIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA0NDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS40MTMpIj4gPHBhdGggaWQ9IuODkeOCuV8yMjEiIGRhdGEtbmFtZT0i44OR44K5IDIyMSIgZD0iTS0yMDA3OC45ODQtMTM5NjRoMTkuNDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMDc4Ljk4NCAxMzk3MS43NTYpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+IDxwYXRoIGlkPSLjg5HjgrlfMjIyIiBkYXRhLW5hbWU9IuODkeOCuSAyMjIiIGQ9Ik0tMjAwNjguNjIxLTEzOTcybDguOCw4LjA2OC04LjgsNy43OTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMDgwLjI4MSAxMzk3MikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg=="));
  background-size: var(--button-icon-width, var(--button-icon-width-default));
}
.c-button--tertiary:hover {
  --button-icon-background-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMi40NTkiIGhlaWdodD0iMTguNjg3IiB2aWV3Qm94PSIwIDAgMjIuNDU5IDE4LjY4NyI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNDQwIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA0NDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMS40MTMpIj4gPHBhdGggaWQ9IuODkeOCuV8yMjEiIGRhdGEtbmFtZT0i44OR44K5IDIyMSIgZD0iTS0yMDA3OC45ODQtMTM5NjRoMTkuNDgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMDc4Ljk4NCAxMzk3MS43NTYpIiBmaWxsPSJub25lIiBzdHJva2U9IiM0NWE0ZDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+IDxwYXRoIGlkPSLjg5HjgrlfMjIyIiBkYXRhLW5hbWU9IuODkeOCuSAyMjIiIGQ9Ik0tMjAwNjguNjIxLTEzOTcybDguOCw4LjA2OC04LjgsNy43OTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwMDgwLjI4MSAxMzk3MikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQ1YTRkMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg==");
}
.c-button--quaternary {
  --button-color-primary: var(--color-white);
  --button-color-secondary: var(--color-theme-light);
  border: 1px solid var(--button-color-primary);
}
.c-button--quaternary::after {
  --button-icon-position-vertical: calc(
    50% - var(--button-icon-height, var(--button-icon-height-default)) / 4
  );
  content: "";
  border: 1px solid var(--button-color-secondary-active, var(--button-color-secondary));
  background-image: var(--button-icon-background-active, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40NzMiIGhlaWdodD0iNi43NDQiIHZpZXdCb3g9IjAgMCAyMy40NzMgNi43NDQiPiA8cGF0aCBpZD0i44OR44K5XzM0OCIgZGF0YS1uYW1lPSLjg5HjgrkgMzQ4IiBkPSJNLTIwODQxLjU4LTgzNTkuOTEzaDIyLjI2NmwtNS44OTEtNS44OTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwODQxLjU4IDgzNjYuMTU3KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDVhNGQwIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4="));
  background-size: var(--button-icon-width, var(--button-icon-width-default));
}
.c-button--quaternary:hover {
  --button-icon-background-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40NzMiIGhlaWdodD0iNi43NDQiIHZpZXdCb3g9IjAgMCAyMy40NzMgNi43NDQiPiA8cGF0aCBpZD0i44OR44K5XzM0OCIgZGF0YS1uYW1lPSLjg5HjgrkgMzQ4IiBkPSJNLTIwODQxLjU4LTgzNTkuOTEzaDIyLjI2NmwtNS44OTEtNS44OTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwODQxLjU4IDgzNjYuMTU3KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=");
}
.c-button--blur {
  --button-color-primary: rgba(255, 255, 255, 0.2);
  --button-color-secondary: var(--color-white);
  border: 1px solid var(--button-color-secondary);
}
.c-button--blur::after {
  --button-icon-position-vertical: calc(
    50% - var(--button-icon-height, var(--button-icon-height-default)) / 4
  );
  content: "";
  border: 1px solid var(--button-color-secondary-active, var(--button-color-secondary));
  background-image: var(--button-icon-background-active, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40NzMiIGhlaWdodD0iNi43NDQiIHZpZXdCb3g9IjAgMCAyMy40NzMgNi43NDQiPiA8cGF0aCBpZD0i44OR44K5XzM0OCIgZGF0YS1uYW1lPSLjg5HjgrkgMzQ4IiBkPSJNLTIwODQxLjU4LTgzNTkuOTEzaDIyLjI2NmwtNS44OTEtNS44OTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwODQxLjU4IDgzNjYuMTU3KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4="));
  background-size: auto var(--button-icon-height, var(--button-icon-height-default));
}
.c-button--blur:hover {
  opacity: 0.7;
}
.c-button--prev, .c-button--next {
  --button-color-primary: transparent;
  --button-color-secondary: var(--color-white);
  border: 1px solid var(--button-color-secondary);
}
.c-button--prev:hover, .c-button--next:hover {
  opacity: 0.7;
}
.c-button--prev {
  --button-grid-template-columns: var(
      --button-icon-background-width,
      var(--button-icon-background-width-default)
    )
    1fr;
}
.c-button--prev::before {
  --button-icon-position-vertical: calc(
    50% - var(--button-icon-height, var(--button-icon-height-default)) / 4
  );
  content: "";
  background-image: var(--button-icon-background-active, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40NzMiIGhlaWdodD0iNi43NDQiIHZpZXdCb3g9IjAgMCAyMy40NzMgNi43NDQiPiA8cGF0aCBpZD0i44OR44K5XzczOSIgZGF0YS1uYW1lPSLjg5HjgrkgNzM5IiBkPSJNLTIwODE5LjMxNC04MzU5LjkxM2gtMjIuMjY2bDUuODkxLTUuODkxIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMDg0Mi43ODcgODM2Ni4xNTcpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg=="));
  background-size: auto var(--button-icon-height, var(--button-icon-height-default));
  background-position: var(--button-icon-position-horizontal, center) var(--button-icon-position-vertical, center);
  background-repeat: no-repeat;
  border-radius: 100vh;
  aspect-ratio: 1;
  transition: all var(--transition-default);
}
.c-button--next::after {
  --button-icon-position-vertical: calc(
    50% - var(--button-icon-height, var(--button-icon-height-default)) / 4
  );
  content: "";
  background-image: var(--button-icon-background-active, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMy40NzMiIGhlaWdodD0iNi43NDQiIHZpZXdCb3g9IjAgMCAyMy40NzMgNi43NDQiPiA8cGF0aCBpZD0i44OR44K5XzM0OCIgZGF0YS1uYW1lPSLjg5HjgrkgMzQ4IiBkPSJNLTIwODQxLjU4LTgzNTkuOTEzaDIyLjI2NmwtNS44OTEtNS44OTEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwODQxLjU4IDgzNjYuMTU3KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4="));
  background-size: auto var(--button-icon-height, var(--button-icon-height-default));
}
.c-button:hover:not(.c-button--blur, .c-button--prev, .c-button--next) {
  --button-color-primary-active: var(--button-color-secondary);
  --button-color-secondary-active: var(--button-color-primary);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-button--primary {
    --button-icon-background-width-default: 3rem;
    --button-gutter-default: 0.8rem;
    --button-width-default: 22rem;
    --button-height-default: 4.5rem;
    --button-font-size-default: 1.4rem;
    --button-icon-height-default: 0.4rem;
  }
  .c-button--secondary {
    --button-icon-background-width-default: 4.5rem;
    --button-gutter-default: 0.6rem;
    --button-width-default: 29rem;
    --button-height-default: 5.5rem;
    --button-font-size-default: 1.6rem;
    --button-icon-width-default: 1.5rem;
  }
  .c-button--tertiary {
    --button-icon-background-width-default: 4.5rem;
    --button-gutter-default: 0.6rem;
    --button-width-default: 29rem;
    --button-height-default: 5.5rem;
    --button-font-size-default: 1.6rem;
    --button-icon-width-default: 1.5rem;
  }
  .c-button--quaternary {
    --button-icon-background-width-default: 3.6rem;
    --button-gutter-default: 1rem;
    --button-width-default: 31.2rem;
    --button-height-default: 5.2rem;
    --button-font-size-default: 1.8rem;
    --button-icon-width-default: 1.8rem;
  }
  .c-button--blur {
    --button-icon-background-width-default: 3rem;
    --button-gutter-default: 1.5rem;
    --button-width-default: 25rem;
    --button-height-default: 6rem;
    --button-font-size-default: 1.4rem;
    --button-icon-height-default: 0.4rem;
  }
  .c-button--prev, .c-button--next {
    --button-icon-background-width-default: 2rem;
    --button-gutter-default: 1.4rem;
    --button-width-default: 100%;
    --button-height-default: 5rem;
    --button-font-size-default: 1.5rem;
    --button-icon-height-default: 0.6rem;
  }
  .c-button:active, .c-button:hover {
    transform: scale(1.05);
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-button--primary {
    --button-icon-background-width-default: 4.5rem;
    --button-gutter-default: 1rem;
    --button-width-default: 30rem;
    --button-height-default: 6.5rem;
    --button-font-size-default: 2rem;
    --button-icon-height-default: 0.6rem;
  }
  .c-button--secondary {
    --button-icon-background-width-default: 6rem;
    --button-gutter-default: 0.8rem;
    --button-width-default: 40rem;
    --button-height-default: 7.5rem;
    --button-font-size-default: 2.2rem;
    --button-icon-width-default: 2rem;
  }
  .c-button--tertiary {
    --button-icon-background-width-default: 4.5rem;
    --button-gutter-default: 1.2rem;
    --button-width-default: 44rem;
    --button-height-default: 7rem;
    --button-font-size-default: 2rem;
    --button-icon-width-default: 1.4rem;
  }
  .c-button--quaternary {
    --button-icon-background-width-default: 4.6rem;
    --button-gutter-default: 1.2rem;
    --button-width-default: 37.2rem;
    --button-height-default: 6.8rem;
    --button-font-size-default: 2rem;
    --button-icon-width-default: 2.2rem;
  }
  .c-button--blur {
    --button-icon-background-width-default: 4rem;
    --button-gutter-default: 2rem;
    --button-width-default: 32rem;
    --button-height-default: 7.5rem;
    --button-font-size-default: 1.8rem;
    --button-icon-height-default: 0.5rem;
  }
  .c-button--prev, .c-button--next {
    --button-icon-background-width-default: 2.3rem;
    --button-gutter-default: 1.8rem;
    --button-width-default: 100%;
    --button-height-default: 6rem;
    --button-font-size-default: 1.6rem;
    --button-icon-height-default: 0.6rem;
  }
  .c-button:hover {
    transform: scale(1.05);
  }
}
/**
 * breadcrumb
 */
.c-global-breadcrumb {
  position: relative;
}
.c-global-breadcrumb__list {
  display: flex;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  gap: 1em;
  overflow-x: auto;
}
.c-global-breadcrumb__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1em;
  flex-shrink: 0;
}
.c-global-breadcrumb__item:not(:first-of-type)::before {
  content: ">";
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-global-breadcrumb {
    font-size: 1rem;
    line-height: 1.4;
  }
  .c-global-breadcrumb[data-breadcrumb-position=page-header] {
    -webkit-margin-after: 4.5rem;
            margin-block-end: 4.5rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-global-breadcrumb {
    font-size: 1.2rem;
    line-height: 1.4166666667;
  }
}
/**
 * anchor
 */
.c-global-anchor[data-anchor-position=page-header] .c-global-anchor__list {
  justify-content: center;
}
.c-global-anchor[data-type=border] .c-global-anchor__item {
  background-image: linear-gradient(to right, #d8d8d8, #d8d8d8 0.8rem, transparent 0.8rem, transparent 1.2rem);
  background-size: 1.2rem 1px;
  background-position: left bottom;
  background-repeat: repeat-x;
}
.c-global-anchor__list {
  display: flex;
  align-items: center;
}
.c-global-anchor__link {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
}
.c-global-anchor__link::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNC4zNzYiIGhlaWdodD0iMjQuMzc2IiB2aWV3Qm94PSIwIDAgMjQuMzc2IDI0LjM3NiI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNTM4IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA1MzgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjAwMSAwKSI+IDxnIGlkPSLmpZXlhoblvaJfMTcwIiBkYXRhLW5hbWU9IualleWGhuW9oiAxNzAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LjM3NiAwKSByb3RhdGUoOTApIiBmaWxsPSIjNDVhNGQwIiBzdHJva2U9IiM0NWE0ZDAiIHN0cm9rZS13aWR0aD0iMSI+IDxjaXJjbGUgY3g9IjEyLjE4OCIgY3k9IjEyLjE4OCIgcj0iMTIuMTg4IiBzdHJva2U9Im5vbmUiLz4gPGNpcmNsZSBjeD0iMTIuMTg4IiBjeT0iMTIuMTg4IiByPSIxMS42ODgiIGZpbGw9Im5vbmUiLz4gPC9nPiA8ZyBpZD0i44Kw44Or44O844OXXzQ2MCIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgNDYwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNy4wMzYgNy4xOTQpIHJvdGF0ZSg5MCkiPiA8cGF0aCBpZD0i44OR44K5XzIyMiIgZGF0YS1uYW1lPSLjg5HjgrkgMjIyIiBkPSJNMCwwLDQuMyw0LjkzMSwwLDkuNyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy42OTMpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxIi8+IDwvZz4gPC9nPjwvc3ZnPg==");
  background-size: 100%;
  background-repeat: no-repeat;
  aspect-ratio: 1;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-global-anchor[data-anchor-position=page-header] {
    -webkit-padding-after: 6rem;
            padding-block-end: 6rem;
  }
  .c-global-anchor[data-anchor-position=page-header] .c-global-anchor__list {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }
  .c-global-anchor[data-anchor-position=page-header] .c-global-anchor__link {
    font-size: 1.4rem;
  }
  .c-global-anchor[data-type=border] .c-global-anchor__list {
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
  .c-global-anchor[data-type=border] .c-global-anchor__item {
    -webkit-padding-after: 1rem;
            padding-block-end: 1rem;
  }
  .c-global-anchor[data-type=border] .c-global-anchor__link {
    font-size: 1.2rem;
  }
  .c-global-anchor__link {
    gap: 0.5rem;
  }
  .c-global-anchor__link::before {
    width: 1.9rem;
    height: 1.9rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-global-anchor[data-anchor-position=page-header] {
    position: absolute;
    bottom: 5rem;
    left: 0;
    right: 0;
    margin: auto;
  }
  .c-global-anchor[data-type=border] .c-global-anchor__item {
    -webkit-padding-after: 1.8rem;
            padding-block-end: 1.8rem;
  }
  .c-global-anchor__list {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }
  .c-global-anchor__link {
    gap: 1rem;
    font-size: 1.7rem;
  }
  .c-global-anchor__link::before {
    width: 2.4rem;
    height: 2.4rem;
  }
}
/**
 * pagination
 */
.c-pagination__container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-pagination__button {
  width: 3rem;
  aspect-ratio: 1;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  text-indent: -9999px;
}
.c-pagination__button--prev {
  background-image: var(--disabled-background-image, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4xNDUiIGhlaWdodD0iMjkuMTQ1IiB2aWV3Qm94PSIwIDAgMjkuMTQ1IDI5LjE0NSI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNzQ0IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA3NDQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTI2LjE3NyAtMTYwMS41MDIpIj4gPGcgaWQ9IualleWGhuW9ol8yNDYiIGRhdGEtbmFtZT0i5qWV5YaG5b2iIDI0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEyNi4xNzcgMTYwMS41MDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiM0NGE0ZDAiIHN0cm9rZS13aWR0aD0iMSI+IDxjaXJjbGUgY3g9IjE0LjU3MiIgY3k9IjE0LjU3MiIgcj0iMTQuNTcyIiBzdHJva2U9Im5vbmUiIC8+IDxjaXJjbGUgY3g9IjE0LjU3MiIgY3k9IjE0LjU3MiIgcj0iMTQuMDcyIiBmaWxsPSJub25lIiAvPiA8L2c+IDxwYXRoIGlkPSLjg5HjgrlfODM4IiBkYXRhLW5hbWU9IuODkeOCuSA4MzgiIGQ9Ik0tMjA4MjcuNjE1LTgzNjIuMTA5aC0xMy45NjNsMy42OTMtMy42OTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxOTc1LjM0NiA5OTc5LjAzMSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQ0YTRkMCIgc3Ryb2tlLXdpZHRoPSIxIiAvPiA8L2c+IDwvc3ZnPg=="));
}
.c-pagination__button--prev[data-disabled=true] {
  --disabled-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4xNDUiIGhlaWdodD0iMjkuMTQ1IiB2aWV3Qm94PSIwIDAgMjkuMTQ1IDI5LjE0NSI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNzQ0IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA3NDQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTI2LjE3NyAtMTYwMS41MDIpIj4gPGcgaWQ9IualleWGhuW9ol8yNDYiIGRhdGEtbmFtZT0i5qWV5YaG5b2iIDI0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEyNi4xNzcgMTYwMS41MDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiNhZmFmYWYiIHN0cm9rZS13aWR0aD0iMSI+IDxjaXJjbGUgY3g9IjE0LjU3MiIgY3k9IjE0LjU3MiIgcj0iMTQuNTcyIiBzdHJva2U9Im5vbmUiIC8+IDxjaXJjbGUgY3g9IjE0LjU3MiIgY3k9IjE0LjU3MiIgcj0iMTQuMDcyIiBmaWxsPSJub25lIiAvPiA8L2c+IDxwYXRoIGlkPSLjg5HjgrlfODM4IiBkYXRhLW5hbWU9IuODkeOCuSA4MzgiIGQ9Ik0tMjA4MjcuNjE1LTgzNjIuMTA5aC0xMy45NjNsMy42OTMtMy42OTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxOTc1LjM0NiA5OTc5LjAzMSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2FmYWZhZiIgc3Ryb2tlLXdpZHRoPSIxIiAvPiA8L2c+IDwvc3ZnPg==");
}
.c-pagination__button--next {
  background-image: var(--disabled-background-image, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4xNDUiIGhlaWdodD0iMjkuMTQ1IiB2aWV3Qm94PSIwIDAgMjkuMTQ1IDI5LjE0NSI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNzQzIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA3NDMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTI2LjE3NyAtMTYwMS41MDIpIj4gPGcgaWQ9IualleWGhuW9ol8yNDYiIGRhdGEtbmFtZT0i5qWV5YaG5b2iIDI0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEyNi4xNzcgMTYwMS41MDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiM0NGE0ZDAiIHN0cm9rZS13aWR0aD0iMSI+IDxjaXJjbGUgY3g9IjE0LjU3MiIgY3k9IjE0LjU3MiIgcj0iMTQuNTcyIiBzdHJva2U9Im5vbmUiIC8+IDxjaXJjbGUgY3g9IjE0LjU3MiIgY3k9IjE0LjU3MiIgcj0iMTQuMDcyIiBmaWxsPSJub25lIiAvPiA8L2c+IDxwYXRoIGlkPSLjg5HjgrlfODM4IiBkYXRhLW5hbWU9IuODkeOCuSA4MzgiIGQ9Ik0tMjA4NDEuNTgtODM2Mi4xMDloMTMuOTYzbC0zLjY5My0zLjY5NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE5NzUuMzQ4IDk5NzkuMDMxKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNDRhNGQwIiBzdHJva2Utd2lkdGg9IjEiIC8+IDwvZz4gPC9zdmc+"));
}
.c-pagination__button--next[data-disabled=true] {
  --disabled-background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4xNDUiIGhlaWdodD0iMjkuMTQ1IiB2aWV3Qm94PSIwIDAgMjkuMTQ1IDI5LjE0NSI+IDxnIGlkPSLjgrDjg6vjg7zjg5dfNzQzIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyA3NDMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTI2LjE3NyAtMTYwMS41MDIpIj4gPGcgaWQ9IualleWGhuW9ol8yNDYiIGRhdGEtbmFtZT0i5qWV5YaG5b2iIDI0NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEyNi4xNzcgMTYwMS41MDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiNhZmFmYWYiIHN0cm9rZS13aWR0aD0iMSI+IDxjaXJjbGUgY3g9IjE0LjU3MiIgY3k9IjE0LjU3MiIgcj0iMTQuNTcyIiBzdHJva2U9Im5vbmUiIC8+IDxjaXJjbGUgY3g9IjE0LjU3MiIgY3k9IjE0LjU3MiIgcj0iMTQuMDcyIiBmaWxsPSJub25lIiAvPiA8L2c+IDxwYXRoIGlkPSLjg5HjgrlfODM4IiBkYXRhLW5hbWU9IuODkeOCuSA4MzgiIGQ9Ik0tMjA4NDEuNTgtODM2Mi4xMDloMTMuOTYzbC0zLjY5My0zLjY5NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE5NzUuMzQ4IDk5NzkuMDMxKSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYWZhZmFmIiBzdHJva2Utd2lkdGg9IjEiIC8+IDwvZz4gPC9zdmc+");
}
.c-pagination__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
}
.c-pagination__item {
  color: var(--pagination-current-color, #afafaf);
  font-weight: 700;
}
.c-pagination__item:has(.is-current) {
  --pagination-current-color: var(--color-theme-light);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-pagination {
    -webkit-margin-before: 4rem;
            margin-block-start: 4rem;
  }
  .c-pagination__container {
    gap: 3.3rem;
  }
  .c-pagination__list {
    font-size: 1.4rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-pagination {
    -webkit-margin-before: 6rem;
            margin-block-start: 6rem;
  }
  .c-pagination__container {
    gap: 3.6rem;
  }
  .c-pagination__list {
    font-size: 1.7rem;
  }
}
/**
 * form
 */
.c-global-form__field :where(label, input, select, textarea) {
  font-size: 1.6rem;
}
.c-global-form__field :where(input, select, textarea) {
  border: 1px solid #8e8e8e;
  background-color: var(--color-white);
}
.c-global-form__field :where(input, select, textarea)::-moz-placeholder {
  color: #acacac;
}
.c-global-form__field :where(input, select, textarea)::placeholder {
  color: #acacac;
}
.c-global-form__field :where(input:where([type=tel], [type=email], [type=text]),
select,
textarea) {
  width: 100%;
  padding-inline: 1rem;
}
.c-global-form__field :where(input:where([type=tel], [type=email], [type=text]), select) {
  height: 5rem;
}
.c-global-form__field :where(select) {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOC4wMiIgaGVpZ2h0PSIxNS43IiB2aWV3Qm94PSIwIDAgMTguMDIgMTUuNyI+IDxwYXRoIGlkPSLjg5HjgrlfOTc3IiBkYXRhLW5hbWU9IuODkeOCuSA5NzciIGQ9Ik0xMCwxOS4zLDE5LjAyLDMuNkgxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTMuNikiIGZpbGw9IiNhY2FjYWMiLz48L3N2Zz4=");
  background-size: 1.6rem;
  background-repeat: no-repeat;
  background-position: center right 1rem;
}
.c-global-form__field :where(select):invalid, .c-global-form__field :where(select)[aria-invalid=true] {
  color: #acacac;
}
.c-global-form__field :where(select) option:first-of-type {
  color: #acacac;
}
.c-global-form__field :where(textarea) {
  height: 12.8rem;
  padding-block: 1.5rem;
}
.c-global-form__field :where(input:where([type=radio], [type=checkbox])) {
  width: 1.8rem;
  height: 1.8rem;
}
.c-global-form__field :where(label) {
  position: relative;
}
.c-global-form__field :where(label) input:where([type=radio], [type=checkbox]) {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.c-global-form__field :where(label) input:where([type=radio], [type=checkbox]):checked {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0id2hpdGUiPjwvcmVjdD4gPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yIDEyQzIgNi40NzcxNSA2LjQ3NzE1IDIgMTIgMkMxNy41MjI4IDIgMjIgNi40NzcxNSAyMiAxMkMyMiAxNy41MjI4IDE3LjUyMjggMjIgMTIgMjJDNi40NzcxNSAyMiAyIDE3LjUyMjggMiAxMlpNMTUuNzA3MSA5LjI5Mjg5QzE2LjA5NzYgOS42ODM0MiAxNi4wOTc2IDEwLjMxNjYgMTUuNzA3MSAxMC43MDcxTDEyLjAyNDMgMTQuMzg5OUMxMS40NTg2IDE0Ljk1NTYgMTAuNTQxNCAxNC45NTU2IDkuOTc1NjggMTQuMzg5OUw4LjI5Mjg5IDEyLjcwNzFDNy45MDIzNyAxMi4zMTY2IDcuOTAyMzcgMTEuNjgzNCA4LjI5Mjg5IDExLjI5MjlDOC42ODM0MiAxMC45MDI0IDkuMzE2NTggMTAuOTAyNCA5LjcwNzExIDExLjI5MjlMMTEgMTIuNTg1OEwxNC4yOTI5IDkuMjkyODlDMTQuNjgzNCA4LjkwMjM3IDE1LjMxNjYgOC45MDIzNyAxNS43MDcxIDkuMjkyODlaIiBmaWxsPSIjNDRBNEQwIj48L3BhdGg+IDwvZz48L3N2Zz4=");
  background-size: 200%;
  background-position: center center;
}
.c-global-form__scrollable {
  height: 12.8rem;
  padding-block: 1.5rem;
  padding-inline: 1rem;
  border: 1px solid #8e8e8e;
  background-color: var(--color-white);
  font-size: 1.5rem;
  line-height: 1.5333333333;
  letter-spacing: 0.05em;
  overflow: auto;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-global-form__field :where(label):has(input:where([type=radio], [type=checkbox])) {
    -webkit-padding-start: 3.2rem;
            padding-inline-start: 3.2rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-global-form__field :where(label):has(input:where([type=radio], [type=checkbox])) {
    -webkit-padding-start: 3.6rem;
            padding-inline-start: 3.6rem;
  }
}
/**
 * accordion
 */
.c-global-accordion {
  overflow: hidden;
  height: var(--acc-height--closed, auto);
  transition: height 0.25s;
}
.c-global-accordion.is-opened {
  height: var(--acc-height--opened, auto);
}

/**
 * faq
 */
.c-global-faq__header {
  position: relative;
  border-bottom: 1px solid #ccc;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.c-global-faq__header::before, .c-global-faq__header::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  margin: auto;
  background-color: var(--color-theme-light);
  transition: all var(--transition-default);
}
.c-global-faq__header::after {
  transform: rotate(90deg);
}
.c-global-faq__header-text {
  display: flex;
}
.c-global-faq__header-text::before {
  content: "Q";
  flex-shrink: 0;
  font-family: var(--font-en);
  color: var(--color-theme-light);
}
.c-global-faq__contents {
  background-color: var(--color-background-default);
}
.c-global-faq__description {
  display: flex;
  letter-spacing: 0.05em;
  font-weight: 400;
}
.c-global-faq__description::before {
  content: "A";
  flex-shrink: 0;
  font-family: var(--font-en);
  color: var(--color-theme-light);
}
.c-global-faq.is-opened .c-global-faq__header::before {
  transform: rotate(360deg);
}
.c-global-faq.is-opened .c-global-faq__header::after {
  transform: rotate(540deg);
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-global-faq__header {
    padding-block: 2.5rem;
    -webkit-padding-end: 3rem;
            padding-inline-end: 3rem;
  }
  .c-global-faq__header::before, .c-global-faq__header::after {
    width: 1.4rem;
  }
  .c-global-faq__header-text {
    gap: 1rem;
    font-size: 1.6rem;
  }
  .c-global-faq__header-text::before {
    font-size: 2.5rem;
    line-height: 1;
  }
  .c-global-faq__contents {
    padding-block: 2.5rem;
    padding-inline: calc(var(--global-gutter) * 2);
  }
  .c-global-faq__description {
    gap: 1.25rem;
    font-size: 1.5rem;
    line-height: 2;
  }
  .c-global-faq__description::before {
    font-size: 2.5rem;
    line-height: 1;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-global-faq__header {
    padding-block: 3rem;
  }
  .c-global-faq__header::before, .c-global-faq__header::after {
    width: 2.5rem;
  }
  .c-global-faq__header-text {
    align-items: center;
    gap: 1em;
    font-size: 1.8rem;
  }
  .c-global-faq__header-text::before {
    font-size: 2.5rem;
  }
  .c-global-faq__contents {
    padding-block: 2.5rem;
    -webkit-padding-start: 5rem;
            padding-inline-start: 5rem;
    -webkit-padding-end: 7rem;
            padding-inline-end: 7rem;
  }
  .c-global-faq__description {
    gap: 1.5rem;
    font-size: 1.6rem;
    line-height: 1.875;
  }
  .c-global-faq__description::before {
    font-size: 2.5rem;
    line-height: 1;
  }
}
/**
 * page header
 */
.c-page-header {
  position: relative;
  padding-inline: calc(var(--global-gutter) * 1);
}
.c-page-header__container {
  max-width: var(--container-middle);
  width: 100%;
  margin-inline: auto;
  -webkit-padding-before: var(--page-header-top-spacer, var(--page-header-top-spacer-default));
          padding-block-start: var(--page-header-top-spacer, var(--page-header-top-spacer-default));
  -webkit-padding-after: var(--page-header-bottom-spacer, var(--page-header-bottom-spacer-default));
          padding-block-end: var(--page-header-bottom-spacer, var(--page-header-bottom-spacer-default));
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-page-header__container {
    --page-header-top-spacer-default: 1.5rem;
    --page-header-bottom-spacer-default: 8rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-page-header__container {
    --page-header-top-spacer-default: 9.5rem;
    --page-header-bottom-spacer-default: 17.5rem;
  }
}
/*# sourceMappingURL=component.css.map */