:root {
  --primary: #bf1e56;
  --secondary: #C4EDBC;
  --primary-light: #F8E1E8;
}

b {
  font-weight: 400;
}
em,i {
  font-style: normal;
}

a {
  color: inherit;
}
a:not([class]) {
  text-decoration: underline;
}
.bg-dark a {
  color: var(--white);
}

@media (hover: hover) {
  a,
  a[class]:hover {
    text-decoration: none;
  }
  a:not([class]):hover,
  a:not([class]):hover > *{
    color: var(--primary);
    text-decoration: underline;
  }

  .bg-dark a:hover {
    color: var(--primary-light);
  }

  a.card:hover {
    color: var(--gray);
  }
  a.border-primary:hover {
    border-color: var(--secondary) !important;
  }
  /* 
  a.border-info:hover {
    border-color: var(--primary) !important;
  } */
}


.kenten-circle {
  -webkit-text-emphasis: circle;
  text-emphasis: circle;
}

.marker {
  background: linear-gradient(to bottom, transparent 64%, rgba(255, 240, 0, .8) 64%);
}

.bg-primary-light {
  background-color: var(--primary-light);
}

.border-primary {
  border-color: var(--primary) !important;
}

.border-secondary {
  border-color: var(--secondary) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.btn-primary {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--secondary);
  border-color: var(--secondary);
}
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #DD7AC5;
  border-color: #DD7AC5;
}


body > header {
  box-shadow: 0 3px 5px 0 rgba(32, 32, 32, 0.05);
}
.navbar-light .navbar-brand {
  color: #DD7AC5;
  /* font-weight: 700; */
  font-family: serif;
  /* font-size: 100%; */
  letter-spacing: -0.06em;
}
.navbar-light .navbar-toggler {
  border: none
}
.navbar-light .navbar-nav .nav-link.active { 
  color: var(--primary);
}
.navbar-light .nav-item .nav-link::before {
  border-color: var(--primary);
}

.mv-image-column {
  padding-top: 50%;
  overflow: hidden;
}
@media (min-width: 768px) {
  .mv-image-column {
    padding-top: 0;
  }
}
.mv-image-wrapper {
  position: absolute; top: 0;right: 0;bottom: 0;left: 0;
}

#mv {
  background-color: #D8F3E7;
}
.jumbotron {
  background: transparent;
}
#mv h2,
h1 {
  font-size: 2.1rem;
  color: var(--gray);
}
main > :not(#mv) h2 {
  text-align: center;
  color: var(--primary);
  margin-bottom: 1em;
  line-height: 1.6;
  border-bottom: 0.1rem solid var(--primary);
}

.first-message-heading {
  font-size: 110%;
  text-decoration: underline;
}

.flow-steps {
  list-style: none;
  counter-reset: flow;
  padding-inline-start: 1rem;
  margin-bottom: -2em;
}
.flow-step {
  counter-increment: flow;
  display: block;
  position: relative;
  background: var(--secondary);
  font-weight: 700;
  margin-bottom: 2em;
  border-radius: 0.4rem;
  padding: 1.5em 1.3em 1.3em 2.5rem;
}
.flow-step::before {
  content: counter(flow);
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-60%, -50%);
  width: 3.4rem;
  height: 3.4rem;
  background: var(--white);
  border: 0.2rem solid var(--secondary);
  border-radius: 50%;
  color: var(--gray);
}
li:not(:last-child) .flow-step::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  right: 0;
  top: 100%;
  transform: translate(-50%, 0.5em);
  width: 0;
  height: 0;
  border-top: 1em solid var(--primary);
  border-right: 1.5em solid transparent;
  border-left: 1.5em solid transparent;
  border-bottom: 1em solid transparent;
}

#certification-list {
  border-radius: 1rem;
	box-shadow: inset 0 0 0 0.6rem var(--white), inset 0 0 0 0.8rem var(--secondary);
  padding: 2rem 2.1rem 2.2rem 2.4rem;
  line-height: 2;
}

#advantage h3 {
  position: relative;
  font-size: 1.25rem;
  margin-bottom: 0.5em;
  padding-left: 1.3em;
}
#advantage h3:not(:first-child) {
  margin-top: 3rem;
}
#advantage h3::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: no-repeat url(../images/check.png) center/contain;
  margin: 0 0.3em -0.1em -1.3em;
}

#its-for-you ul {
  list-style: none;
}

#its-for-you li {
  position: relative;
  margin-bottom: 2em;
  padding-left: 1.6em;
}
#its-for-you li::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: no-repeat url(../images/finger.png) center/contain;
  margin: 0 0.4em -0.15em -1.6em;
}

#message h3 {
  font-size: 140%;
  margin: 3rem 0 2rem;
}

#interview h4 {
  font-size: 100%;
  margin: 2rem 0 1rem;
}
#interview h4::before {
  content: '—— '
}

#global-footer .company-name {
  font-size: 140%;
}

#footer-nav {
  justify-content: center;
}
#footer-nav .nav-item {
  width: 100%;
}
@media (min-width: 768px) {
  #footer-nav {
    text-align: left;
  }
}