html {
  scroll-behavior: smooth;
  background-color: $white;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  color: $primary-color;
}

/*clear*/
.clear:before,
.clear:after {
  content: "";
  display: table;
}

.clear:after {
  clear: both;
}

.clear {
  *zoom: 1;
}

img {
  max-width: 100%;
}

iframe {
  max-width: 100%;
}

a {
  color: $primary-color;
  transition: color 0.2s linear;

  svg {
    pointer-events: none;
  }
}

a,
a:hover {
  text-decoration: none;
  cursor: pointer;
}

a:focus {
  outline: 0;
  text-decoration: none;
}

a:hover,
a:active {
  outline: 0;
  text-decoration: none;
}

input,
input:focus {
  outline: 0;
  border: none;
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 0;
  border-top: 1px solid $gray-bluish;
}

.max-content-width {
  max-width: $max-width;
  margin-left: auto;
  margin-right: auto;
}

svg {
  max-width: 100%;
}

.loading {
  font-size: 9.3rem;
  opacity: 0.5;
  color: $primary-color;
  display: none;

  &.open {
    display: block;
    text-align: center;
  }
}

@include xs {
  .hide-xs {
    display: none;
  }
}

@include sm {
  .hide-sm {
    display: none;
  }
}

@include md {
  .hide-md {
    display: none;
  }
}

@include xs-up {
  .mobile-only {
    display: none;
  }
}

p {
  line-height: 1.5;
}

.rich-content {
  color: $primary-color;
  line-height: 1.5;

  p {
    font-size: 1.8rem;

    @include sm {
      font-size: 1.6rem;
    }

    &.paragraph-big {
      font-size: 2.4rem;

      @include sm {
        font-size: 2.1rem;
      }
    }

    &.paragraph-medium {
      font-size: 2.1rem;

      @include sm {
        font-size: 1.8rem;
      }
    }

    &.paragraph-small {
      font-size: 1.8rem;

      @include sm {
        font-size: 1.6rem;
      }
    }
  }

  ol {
    padding: revert;
    margin: revert;
  }

  ul,
  li {
    padding: revert;
    margin: revert;
    list-style: inherit;

    ul,
    ol {
      margin-top: 1rem;
    }
  }

  li {
    margin-bottom: 1rem;
    font-size: 1.8rem;
  }

  a {
    text-decoration: underline;
  }

  h2,
  h3 {
    > a {
      color: $medium-color;
      text-decoration: none;
    }
  }

  h1,
  .heading1 {
    margin-bottom: 2.4rem;
    margin-top: 4.8rem;

    &:first-child {
      margin-top: 0;
    }
  }

  h2,
  .heading2 {
    margin-bottom: 2.4rem;
    margin-top: 4.8rem;

    &:first-child {
      margin-top: 0;
    }
  }

  h3,
  .heading3 {
    margin-bottom: 2.4rem;
    margin-top: 4.8rem;

    &:first-child {
      margin-top: 0;
    }
  }

  h4,
  .heading4 {
    margin-bottom: 2.4rem;
    margin-top: 4.8rem;

    &:first-child {
      margin-top: 0;
    }
  }

  &__objective {
    margin-bottom: 3rem;
  }

  table {
    border: 2px solid #e2e2e3;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    height: 100%;
    margin: 3.2rem 0;
    padding: 0px;

    tr:nth-child(odd) {
      background-color: $gray-bluish;
    }

    tr:nth-child(even) {
      background-color: $white;
    }

    td {
      vertical-align: middle;
      border: 2px solid #e2e2e3;
      border-width: 0px 2px 2px 0px;
      text-align: left;
      padding: 1.3rem 0.9rem 1.1rem;
      font-size: 16px;
      font-weight: normal;
      color: $primary-color;
    }

    tr:last-child td {
      border-width: 0px 2px 0px 0px;
    }

    tr td:last-child {
      border-width: 0px 0px 2px 0px;
    }

    tr:last-child td:last-child {
      border-width: 0px 0px 0px 0px;
    }

    tr:nth-child(2) th {
      background-color: $white;
      border: 0px solid #e2e2e3;
      border-width: 0px 0px 2px 2px;
      font-size: 1.6rem;
      font-weight: bold;
      letter-spacing: 0.023rem;
      color: $primary-color;
      padding: 1.2rem 0.9rem 1rem;
      text-align: left;
    }

    tr:nth-child(2):hover th {
      background-color: $white;
    }

    tr:nth-child(2) th:first-child {
      border-width: 0px 0px 2px 0px;
    }

    tr:nth-child(2) th:last-child {
      border-width: 0px 0px 2px 2px;
    }

    tr:first-child {
      th {
        padding: 1.9rem 0.9rem 1.8rem;
        font-size: 1.8rem;
        font-weight: bold;
        letter-spacing: 0.026rem;
        background-color: $white;
        border: 2px solid #e2e2e3;
        border-width: 0px 0px 2px 2px;
        text-align: left;

        &:first-child {
          border-width: 0px 0px 2px 0px;
        }

        &:last-child {
          border-width: 0px 0px 2px 2px;
        }
      }
    }
  }

  blockquote {
    margin: 3.2rem 5rem 3.2rem;
    font-size: 2.1rem;
    color: $medium-color;
    font-weight: 400;
    font-style: italic;

    &:before {
      content: "“";
      margin-right: 8px;
    }

    &:after {
      content: "”";
      margin-left: 8px;
    }

    p {
      display: inline;
      margin-left: -6px;
      margin-right: -6px;
    }
  }

  .quote-name {
    margin: -1.6rem 0 3.2rem 5rem;
    color: $primary-color;

    &:before {
      content: "-";
    }
  }

  .big-check {
    position: relative;
    font-size: 2.1rem;
    list-style: none;

    @include sm {
      font-size: 1.8rem;
    }

    &::before {
      content: "";
      position: absolute;
      left: -38px;
      top: 3px;
      display: block;
      width: 25px;
      height: 25px;
      background: url("../img/svg/ico_check.svg") no-repeat center;
      background-size: 25px;
    }
  }

  ol {
    counter-reset: item;
  }

  .ol-big-numbers {
    position: relative;
    list-style: none !important;
    font-size: 1.8rem;
    margin: 2.4rem 0;

    &::before {
      content: counter(item) " ";
      position: absolute;
      left: -3.6rem;
      top: -1px;
      counter-increment: item;
      font-size: 23px;
      font-weight: 700;
      color: $medium-color;
      margin-right: 1rem;
    }
  }

  .text-medium {
    font-size: 2.1rem;

    @include sm {
      font-size: 1.8rem;
    }
  }
}

.rich-content-system {
  @include rich-content-system;
}

[data-aos="simplefade"] {
  opacity: 0;
  transition-property: opacity;
}

[data-aos="simplefade"].aos-animate {
  opacity: 1;
}

[data-aos="growline"] {
  height: 0px;
  transition-property: height;
}

[data-aos="growline"].aos-animate {
  height: 100px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 10001;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease-out;

  &::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(13, 24, 41, 0.6);
  }

  &.js-show {
    opacity: 1;
    pointer-events: all;
  }
}

.bg-- {
  background-color: $lighter-color;
}

.bg--blue {
  background-color: $topic-blue;
}

.bg--blue {
  background-color: $topic-blue;
}

.bg--secondary {
  background-color: $lighter-color;
  color: $primary-color;
}

.bg--primary {
  background-color: $primary-color;
  * {
    color: $white;
  }
}

.bg--orange {
  background-color: $topic-orange;
  color: $primary-color;
}

.bg--yellow {
  background-color: $topic-yellow;
  color: $primary-color;
}

.bg--green,
.bg--grey {
  background-color: $topic-green;
  color: $primary-color;
}

.bg--dark {
  background-color: $dark-color;
  * {
    color: $white;
  }
}

.bg--medium {
  background-color: $medium-color !important;
  * {
    color: $white;
  }
}

.bg--lighter {
  background-color: $lighter-color;
  color: $primary-color;
}

.bg--vivid-blue {
  background-color: $blue;
  color: $primary-color;
}

.fill--secondary g {
  fill: $secondary-color;
}

.fill--primary g {
  fill: $primary-color !important;
}

.fill--orange g {
  fill: $topic-orange !important;
}

.fill--yellow g {
  fill: $topic-yellow !important;
}

.fill--green g {
  fill: $topic-green !important;
}

.fill--dark g {
  fill: $dark-color !important;
}

.fill--medium g {
  fill: $medium-color !important;
}

.fill--lighter g {
  fill: $lighter-color !important;
}

.swiper,
.swiper-container {
  &__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  &__prev {
    margin-right: 20px;
    transform: rotate(90deg);
    cursor: pointer;
    height: 12px;
    width: 12px;

    &.swiper-button-disabled {
      opacity: 0.5;
    }
  }

  &__next {
    margin-left: 14px;
    transform: rotate(-90deg);
    cursor: pointer;
    height: 12px;
    width: 12px;

    &.swiper-button-disabled {
      opacity: 0.5;
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    svg {
      display: none;
    }
  }

  &__dots {
    z-index: 1;

    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
      border-radius: 6px;
      background-color: $primary-color;
      margin-right: 6px;
      opacity: 1;
      transition: all 0.3s;
    }

    .swiper-pagination-bullet-active {
      background-color: $medium-color;
      width: 24px;
      border-radius: 5px;
    }
  }
}

.anchor-offset {
  position: absolute;
  top: calc((#{$header-height} + 82px) * -1);

  @include sm {
    top: calc((#{$header-height-mobile} + 82px) * -1);
  }
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9998;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;

  .js-nav-open & {
    opacity: 1;
    pointer-events: all;
  }
}