@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : component.scss
For   : bell-c/

Created       : 2025-11-10
Last Modified : 2025-11-10

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

Content

////////////////////////////////////////////////// */
/**
 * typography
 */
.c-global-heading {
  display: grid;
  grid-template-columns: 100%;
  row-gap: var(--heading-gap);
  color: var(--heading-color, var(--color-primary));
  line-height: 1;
}
.c-global-heading__primary {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--heading-primary-gap);
  font-size: var(--heading-primary-font-size);
  font-weight: 600;
}
.c-global-heading__primary:before {
  content: "";
  width: var(--heading-disc-size);
  height: var(--heading-disc-size);
  background-color: var(--heading-color, var(--color-primary));
  border-radius: 100vh;
}
.c-global-heading__secondary {
  font-size: var(--heading-secondary-font-size);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: var(--heading-secondary-line-height, 1);
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .c-global-heading {
    --heading-gap: 1.2rem;
    --heading-primary-gap: 0.8rem;
    --heading-disc-size: 0.8rem;
    --heading-primary-font-size: 1.2rem;
    --heading-secondary-font-size: 3.6rem;
    --heading-secondary-line-height: 1.2;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .c-global-heading {
    --heading-gap: 3.2rem;
    --heading-primary-gap: 1.2rem;
    --heading-disc-size: 1.6rem;
    --heading-primary-font-size: 1.8rem;
    --heading-secondary-font-size: 8rem;
  }
}
/**
 * breadcrumb
 */
.c-global-breadcrumb {
  -webkit-margin-before: var(--breadcrumb-spacer);
          margin-block-start: var(--breadcrumb-spacer);
}
.c-global-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.c-global-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
  flex-shrink: 0;
  font-size: var(--breadcrumb-font-size);
  font-weight: 600;
}
.c-global-breadcrumb__item:first-of-type {
  color: #aeaeae;
}
.c-global-breadcrumb__item:not(:first-of-type) {
  color: var(--color-primary);
}
.c-global-breadcrumb__item:not(:first-of-type)::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  background-color: var(--color-primary);
  border-radius: 100vh;
}

.c-recruit-breadcrumb {
  -webkit-margin-before: var(--breadcrumb-spacer);
          margin-block-start: var(--breadcrumb-spacer);
  letter-spacing: 0.05em;
}
.c-recruit-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
}
.c-recruit-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--breadcrumb-gap);
  flex-shrink: 0;
  font-size: var(--breadcrumb-font-size);
  font-weight: 500;
}
.c-recruit-breadcrumb__item:last-of-type {
  color: var(--color-recruit-common-gray);
}
.c-recruit-breadcrumb__item:not(:first-of-type)::before {
  content: "／";
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .c-global-breadcrumb {
    --breadcrumb-spacer: 2.4rem;
    --breadcrumb-gap: 1.2rem;
    --breadcrumb-font-size: 1.2rem;
  }
  .c-global-breadcrumb__list {
    overflow-x: auto;
  }
  .c-recruit-breadcrumb {
    --breadcrumb-spacer: 4rem;
    --breadcrumb-gap: 1.2rem;
    --breadcrumb-font-size: 1.2rem;
  }
  .c-recruit-breadcrumb__list {
    overflow-x: auto;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .c-global-breadcrumb {
    --breadcrumb-spacer: 4.8rem;
    --breadcrumb-gap: 1.6rem;
    --breadcrumb-font-size: 1.8rem;
  }
  .c-recruit-breadcrumb {
    --breadcrumb-spacer: 8rem;
    --breadcrumb-gap: 1.2rem;
    --breadcrumb-font-size: 1.4rem;
  }
}
/**
 * pager
 */
.c-global-pager__list {
  display: flex;
  justify-content: center;
  gap: 3.6rem;
}
.c-global-pager__item-inner[data-pager-type=number] {
  border-bottom: var(--pager-border-active, 1px solid var(--color-base));
  font-size: 2rem;
  color: var(--pager-color-active, var(--color-base));
  font-family: var(--font-en);
  font-weight: var(--pager-font-weight-active, 500);
  letter-spacing: 0.08em;
  line-height: 1;
}
.c-global-pager__item-inner[data-pager-type=number].is-current {
  --pager-border-active: none;
  --pager-color-active: var(--color-primary);
  --pager-font-weight-active: 700;
}

/**
 * navigation
 */
.p-single-navigation__link {
  display: flex;
  align-items: center;
  letter-spacing: 0.08em;
}
.p-single-navigation__link span {
  border-bottom: 1px solid var(--color-base);
}
.p-single-navigation__link::before, .p-single-navigation__link::after {
  background-repeat: no-repeat;
  background-size: 100%;
}
.p-single-navigation__link[data-link-type=prev]::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAxNkMzLjU4MTcyIDE2IDAgMTIuNDE4MyAwIDhDMCAzLjU4MTcyIDMuNTgxNzIgMCA4IDBDMTIuNDE4MyAwIDE2IDMuNTgxNzIgMTYgOEMxNiAxMi40MTgzIDEyLjQxODMgMTYgOCAxNlpNMTAuMTEzMyAxMC40OTIyTDcuNDI2NzYgNy44MDU2NkwxMC4xMTMzIDUuMTE5MTRMOC42OTkyMiAzLjcwNDFMNC41OTc2NiA3LjgwNTY2TDguNjk5MjIgMTEuOTA3MkwxMC4xMTMzIDEwLjQ5MjJaIiBmaWxsPSIjMDYzNDg4Ii8+PC9zdmc+");
}
.p-single-navigation__link[data-link-type=next]::after {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAwQzEyLjQxODMgMCAxNiAzLjU4MTcyIDE2IDhDMTYgMTIuNDE4MyAxMi40MTgzIDE2IDggMTZDMy41ODE3MiAxNiAwIDEyLjQxODMgMCA4QzAgMy41ODE3MiAzLjU4MTcyIDAgOCAwWk01Ljg4NjcyIDUuNTA3ODFMOC41NzMyNCA4LjE5NDM0TDUuODg2NzIgMTAuODgwOUw3LjMwMDc4IDEyLjI5NTlMMTEuNDAyMyA4LjE5NDM0TDcuMzAwNzggNC4wOTI3N0w1Ljg4NjcyIDUuNTA3ODFaIiBmaWxsPSIjMDYzNDg4Ii8+PC9zdmc+");
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .p-single-navigation {
    max-width: 30rem;
    -webkit-margin-before: 8rem;
            margin-block-start: 8rem;
    margin-inline: auto;
  }
  .p-single-navigation__container {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: space-between;
    row-gap: 4rem;
  }
  .p-single-navigation__link {
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
    font-size: 1.4rem;
  }
  .p-single-navigation__link[data-link-type=prev] {
    grid-column: 1;
    grid-row: 2;
  }
  .p-single-navigation__link[data-link-type=next] {
    grid-column: 2;
    grid-row: 2;
  }
  .p-single-navigation__link::before, .p-single-navigation__link::after {
    width: 1.6rem;
    height: 1.6rem;
  }
  .p-single-navigation__button {
    --button-height: 6.8rem;
    --button-font-size: 1.8rem;
    grid-column: 1/-1;
    grid-row: 1;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .p-single-navigation {
    -webkit-margin-before: 14rem;
            margin-block-start: 14rem;
  }
  .p-single-navigation__container {
    display: flex;
    justify-content: center;
    align-items: center;
    -moz-column-gap: 6rem;
         column-gap: 6rem;
  }
  .p-single-navigation__link {
    -moz-column-gap: 1.6rem;
         column-gap: 1.6rem;
    font-size: 1.8rem;
  }
  .p-single-navigation__link::before, .p-single-navigation__link::after {
    width: 1.6rem;
    height: 1.6rem;
  }
}
/**
 * button
 */
.c-global-button {
  --button-color-primary: var(--color-white);
  --button-color-secondary: var(--color-primary);
  position: relative;
  display: var(--button-display, grid);
  place-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: 0.1rem solid var(--color-primary);
  background: var(--button-background-active, var(--button-color-primary));
  font-size: var(--button-font-size, var(--button-font-size-default));
  letter-spacing: var(--button-letter-spacing, 0.05em);
  font-weight: var(--button-font-weight, 600);
  color: var(--button-color-active, var(--button-color-secondary));
  text-align: var(--button-text-align, center);
  line-height: var(--button-line-height, 1);
  overflow: hidden;
  transition: all var(--transition-default);
}
.c-global-button:hover, .c-global-button:active {
  --button-background-active: var(--color-button-background-active);
  --button-color-active: var(--button-color-secondary);
}
.c-global-button:hover, .c-global-button:active {
  opacity: 1;
}

.c-post-button :where(.wp-block-button__link) {
  --button-color-primary: var(--color-white);
  --button-color-secondary: var(--color-primary);
  --button-border-radius: 0;
  position: relative;
  display: var(--button-display, flex);
  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: var(--button-border-radius);
  border: 0.1rem solid var(--color-primary);
  background: var(--button-background-active, var(--button-color-primary));
  font-size: var(--button-font-size, var(--button-font-size-default));
  letter-spacing: var(--button-letter-spacing, 0.05em);
  font-weight: var(--button-font-weight, 600);
  color: var(--button-color-active, var(--button-color-secondary));
  text-align: var(--button-text-align, center);
  line-height: var(--button-line-height, 1);
  overflow: hidden;
  transition: all var(--transition-default);
}
.c-post-button :where(.wp-block-button__link):hover, .c-post-button :where(.wp-block-button__link):active {
  --button-background-active: var(--color-button-background-active);
  --button-color-active: var(--button-color-secondary);
}
.c-post-button :where(.wp-block-button__link):hover, .c-post-button :where(.wp-block-button__link):active {
  opacity: 1;
}

.c-recruit-button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr var(--button-icon-width, var(--button-icon-width-default));
  align-items: center;
  max-width: var(--button-max-width, var(--button-max-width-default));
  min-width: var(--button-min-width, var(--button-min-width-default));
  min-height: var(--button-height, var(--button-height-default));
  padding-block: var(--button-spacer, var(--button-spacer-default));
  padding-inline: var(--button-gutter, var(--button-gutter-default));
  border-radius: 0.4rem;
  background: var(--button-background-variant, var(--color-base));
  font-size: var(--button-font-size, var(--button-font-size-default));
  color: var(--button-color-variant, var(--color-white));
  font-weight: 600;
  letter-spacing: 0.05em;
}
.c-recruit-button--arrow {
  position: relative;
  height: 100%;
  border-left: 1px solid var(--button-color-variant, var(--color-white));
  overflow: hidden;
}
.c-recruit-button--arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: var(--icon-recruit-button-variable, var(--icon-recruit-link-arrow-white-path));
  background-size: var(--button-icon-size, var(--button-icon-size-default));
  background-position: center right var(--button-icon-position-right, 0);
  background-repeat: no-repeat;
  -webkit-animation: var(--animation);
          animation: var(--animation);
}
.c-recruit-button:hover {
  --animation: anim-around-onece 500ms var(--timing-function-default) forwards;
  opacity: 1;
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .c-global-button[data-button-type=primary], .c-global-button[data-button-type=secondary], .c-global-button[data-button-type=tertiary] {
    --button-width-default: 30rem;
    --button-height-default: 5rem;
    --button-gutter-default: 4rem;
    --button-font-size-default: 1.4rem;
    --button-icon-position-default: 3rem;
    --button-icon-size-default: 0.8rem;
  }
  .c-post-button :where(.wp-block-button__link) {
    --button-width-default: 30rem;
    --button-height-default: 5rem;
    --button-gutter-default: 4rem;
    --button-font-size-default: 1.4rem;
    --button-icon-position-default: 3rem;
    --button-icon-size-default: 0.8rem;
  }
  .c-recruit-button {
    --button-icon-width-default: 3.6rem;
    --button-max-width-default: fit-content;
    --button-min-width-default: 30rem;
    --button-height-default: 6.4rem;
    --button-spacer-default: 1rem;
    --button-gutter-default: 2rem 1.2rem;
    --button-font-size-default: 1.6rem;
    --button-icon-size-default: 2.4rem;
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .c-global-button[data-button-type=primary], .c-global-button[data-button-type=secondary] {
    --button-width-default: 30rem;
    --button-height-default: 6.8rem;
    --button-gutter-default: 4rem;
    --button-font-size-default: 1.8rem;
    --button-icon-position-default: 3rem;
    --button-icon-size-default: 0.8rem;
  }
  .c-global-button[data-button-type=tertiary] {
    --button-width-default: fit-content;
    --button-height-default: 4.6rem;
    --button-gutter-default: 3.4rem;
    --button-font-size-default: 2rem;
  }
  .c-post-button :where(.wp-block-button__link) {
    --button-width-default: 30rem;
    --button-height-default: 6.8rem;
    --button-gutter-default: 4rem;
    --button-font-size-default: 1.8rem;
    --button-icon-position-default: 3rem;
    --button-icon-size-default: 0.8rem;
  }
  .c-recruit-button {
    --button-icon-width-default: 3.6rem;
    --button-max-width-default: fit-content;
    --button-min-width-default: 30rem;
    --button-height-default: 6.4rem;
    --button-spacer-default: 1rem;
    --button-gutter-default: 2rem 1.2rem;
    --button-font-size-default: 1.8rem;
    --button-icon-size-default: 2.4rem;
  }
}
/**
 * accordion
 */
.js-accordion-container {
  height: var(--accordion-active-height, var(--accordion-height--closed, auto));
  overflow: hidden;
  transition: height var(--transition-default);
}
.js-accordion-container.is-opened {
  --accordion-active-height: var(--accordion-height--opened, auto);
}

.js-accordion-trigger:hover {
  cursor: pointer;
}

/**
 * scroll hint
 */
:has(> .js-table-scroll__hint) {
  position: relative;
}

.js-table-scroll__hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding-block: 1em;
  padding-inline: 1rem;
  border-radius: 0.25em;
  background-color: rgba(0, 0, 0, 0.45);
  font-size: 1rem;
  color: var(--color-white);
  -webkit-animation: anim-fade-in-out 1500ms var(--timing-function-default) infinite;
          animation: anim-fade-in-out 1500ms var(--timing-function-default) infinite;
  z-index: var(--zindex-overlay);
}
.js-table-scroll__hint::before {
  content: "";
  width: 4rem;
  height: 4rem;
  background-image: var(--icon-table-scroll-hint-path);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/**
 * sticky sections
 */
.js-sticky-section {
  position: -webkit-sticky;
  position: sticky;
  transition: all var(--transition-default);
}
.js-sticky-section.is-stuck {
  opacity: 0;
}

/* --- for small viewport --- */
@media (max-width: 767px) {
  .js-sticky-section {
    top: calc(100svh - var(--sticky-section-height));
  }
}
/* --- for large viewport --- */
@media (min-width: 768px) {
  .js-sticky-section {
    top: calc(100svh - var(--sticky-section-height));
  }
}
/*# sourceMappingURL=component.css.map */