/* ===== base styles ===== */

.text-center {
  text-align: center;
  font-size: 80%;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-highlight-yellow {
  display: inline;
  background: linear-gradient(180deg, transparent 60%, #f8fd32 60%, #f8fd32 100%);
}

/* ----- */

.base-text-note {
  font-size: var(--body-font-size-sm);
}

/* ----- heading */

:is(h1, h2, h3, h4) {
  line-height: var(--heading-line-height-base);
}

.base-section-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--color-biz-base);
}

[class*="base-heading-lv"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  justify-content: center;
}

[class*="base-heading-lv"] > .heading-sub {
  font-size: 14px;
  font-weight: normal;
}

[class*="base-heading-lv"][class*="base-heading-lv"][data-theme="white"] {
  color: #fff;
}

/* lv2 */

.base-heading-lv2 {
  font-size: 2.4rem;
  color: var(--color-biz-base);
}

.base-primary-buttom > .button-label {
  flex: 1;
  text-align: center;
}

@media (any-hover: hover) {
  .base-primary-buttom:hover {
    opacity: 0.7;
  }
}

.base-primary-buttom[data-variant="fill"] {
  color: #fff;
  background: var(--color-bland-base);
  border: 1px solid var(--color-bland-base);
}

.base-primary-buttom[data-variant="outline"] {
  color: var(--color-bland-base);
  background: #fff;
  border: 1px solid var(--color-bland-base);
}

/* ----- base link button styles */

.base-buttom-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* primary */

.base-primary-link-buttom {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 42px;
  padding: 13px 10px 13px 17px;
  font-size: 16px;
  font-weight: var(--bold);
  text-align: center;
}

.base-primary-link-buttom.boxLink::before{
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  text-align: left;
}

.base-primary-link-buttom > .button-label {
  flex: 1;
  text-align: center;
}

@media (any-hover: hover) {
  .base-primary-link-buttom:hover {
    opacity: 0.7;
  }
}

.base-primary-link-buttom[data-variant="fill"] {
  color: #fff;
  background: var(--color-bland-base);
  border: 1px solid var(--color-bland-base);
}

.base-primary-link-buttom[data-variant="outline"] {
  color: var(--color-bland-base);
  background: #fff;
  border: 1px solid var(--color-bland-base);
}