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

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 screen and (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 screen and (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;
  overflow: 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;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .c-global-breadcrumb {
    --breadcrumb-gap: 1.2rem;
    --breadcrumb-spacer: 2.4rem;
    --breadcrumb-font-size: 1.2rem;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .c-global-breadcrumb {
    --breadcrumb-gap: 1.6rem;
    --breadcrumb-spacer: 4.8rem;
    --breadcrumb-font-size: 1.8rem;
  }
}
/**
 * pager
 */
.c-global-pager__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3.6rem;
}
.c-global-pager__item[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[data-pager-type=number].is-current {
  --pager-border-active: none;
  --pager-color-active: var(--color-primary);
  --pager-font-weight-active: 700;
}

/**
 * button
 */
.c-global-button {
  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-radius: var(--button-border-radius);
  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[data-button-type=primary], .c-global-button[data-button-type=secondary] {
  --button-border-radius: 1.2rem;
}
.c-global-button[data-button-type=primary]::after, .c-global-button[data-button-type=secondary]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--button-icon-position, var(--button-icon-position-default));
  width: var(--button-icon-size, var(--button-icon-size-default));
  height: var(--button-icon-size, var(--button-icon-size-default));
  margin: auto;
  border-radius: 100vh;
  background-color: var(--button-color-active, var(--button-color-secondary));
  transition: all var(--transition-default);
}
.c-global-button[data-button-type=primary] {
  --button-color-primary: var(--color-background-gradient);
  --button-color-secondary: var(--color-white);
  --button-color-tertiary: var(--color-primary);
}
.c-global-button[data-button-type=secondary], .c-global-button[data-button-type=tertiary] {
  --button-color-primary: var(--color-white);
  --button-color-secondary: var(--color-primary);
  border: 0.2rem solid var(--color-primary);
}
.c-global-button[data-button-type=tertiary] {
  font-family: var(--font-combine);
  --button-letter-spacing: 0.04em;
  --button-font-weight: 500;
}
.c-global-button[data-button-type=primary]:hover, .c-global-button[data-button-type=primary]:active {
  --button-background-active: var(--button-color-secondary);
  --button-color-active: var(--button-color-tertiary);
  border: 0.2rem solid var(--color-primary);
}
.c-global-button:not([data-button-type=primary]):hover, .c-global-button:not([data-button-type=primary]):active {
  --button-background-active: var(--button-color-secondary);
  --button-color-active: var(--button-color-primary);
}
.c-global-button:hover, .c-global-button:active {
  opacity: 1;
}

/* --- for small viewport --- */
@media screen and (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 6rem;
    --button-font-size-default: 1.4rem;
    --button-icon-position-default: 3rem;
    --button-icon-size-default: 0.8rem;
  }
  .c-global-button[data-button-type=tertiary] {
    --button-border-radius: 1.2rem;
  }
  .c-global-button[data-button-type=tertiary]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--button-icon-position, var(--button-icon-position-default));
    width: var(--button-icon-size, var(--button-icon-size-default));
    height: var(--button-icon-size, var(--button-icon-size-default));
    margin: auto;
    border-radius: 100vh;
    background-color: var(--button-color-active, var(--button-color-secondary));
  }
}
/* --- for large viewport --- */
@media screen and (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 6rem;
    --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-border-radius: 1rem;
    --button-font-size-default: 2rem;
  }
}
/**
 * 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;
}

/**
 * sticky sections
 */
.js-sticky-section {
  position: -webkit-sticky;
  position: sticky;
  top: calc(100svh - var(--sticky-section-height));
  transition: all var(--transition-default);
}
.js-sticky-section.is-stuck {
  opacity: 0;
}
/*# sourceMappingURL=component.css.map */